:root{
  --bg: #0B0B12;
  --text: #ffffff;
  --muted: rgba(255,255,255,0.75);
  --soft: rgba(255,255,255,0.1);
  --border: rgba(255,255,255,0.2);
  --accent1: #38bdf8;
  --accent2: #a78bfa;
  --accent3: #34d399;
  --accent4: #f472b6;
  --accent5: #f59e0b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  min-height:100dvh;
}
a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.2) blur(10px);
  background: color(from var(--bg) srgb r g b / 0.4);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.nav-links{display:none;gap:18px}
@media (min-width:640px){.nav-links{display:flex}}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--text)}
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.25rem;border-radius:16px;
  border:1px solid var(--border); background: rgba(255,255,255,.08);
  font-weight:600; color:#fff; backdrop-filter: blur(6px);
  transition: transform .2s ease, background .2s ease;
  overflow:hidden;
}
.btn:hover{background: rgba(255,255,255,.16)}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:16px; filter: blur(14px);
  opacity:0; transition:opacity .25s ease;
  background: conic-gradient(from 180deg at 50% 50%, var(--accent2), var(--accent1), var(--accent3), var(--accent4), var(--accent2));
}
.btn:hover::after{opacity:1}
.badge{display:inline-block;border:1px solid var(--border); background:var(--soft); padding:.35rem .65rem; border-radius:999px; font-size:.75rem; color:#fff; margin:.25rem .35rem .25rem 0}
.hero{padding:80px 0}
.hero-grid{display:grid;gap:40px}
@media (min-width:900px){.hero-grid{grid-template-columns:1fr 1fr}}
.h1{font-weight:900; letter-spacing:-.02em; font-size:clamp(36px, 6vw, 64px); line-height:1.05}
.p{color:var(--muted); font-size:1.125rem}
.mesh{
  position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden;
}
.mesh::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(60% 40% at 10% 10%, color-mix(in srgb, var(--accent2) 25%, transparent) 0%, transparent 60%),
    radial-gradient(40% 60% at 90% 10%, color-mix(in srgb, var(--accent1) 25%, transparent) 0%, transparent 60%),
    radial-gradient(50% 50% at 10% 90%, color-mix(in srgb, var(--accent3) 25%, transparent) 0%, transparent 60%),
    radial-gradient(60% 40% at 90% 90%, color-mix(in srgb, var(--accent5) 25%, transparent) 0%, transparent 60%);
  filter: blur(24px); animation: drift 18s ease-in-out infinite;
}
@keyframes drift{0%{transform:scale(1.1) rotate(0)} 33%{transform:scale(1.18) rotate(5deg)} 66%{transform:scale(1.04) rotate(-3deg)} 100%{transform:scale(1.1) rotate(0)}}
.card{border:1px solid var(--border); background:rgba(255,255,255,.06); border-radius:24px; padding:24px}
.card h3{margin:8px 0 10px; font-size:1.4rem}
.grid{display:grid; gap:20px}
@media (min-width:900px){.grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-12{grid-template-columns:repeat(12,1fr)}}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.9rem}
.kaleido{border:1px solid var(--border); background:rgba(255,255,255,.06); border-radius:32px; padding:8px; position:relative; overflow:hidden; aspect-ratio:1/1}
.kaleido .inner{position:absolute; inset:8px; border-radius:26px; background: conic-gradient(from 0deg at 50% 50%, var(--accent1), var(--accent2), var(--accent4), var(--accent3), var(--accent5), var(--accent1)); animation: wob 12s ease-in-out infinite}
@keyframes wob{0%{transform:scale(1)} 33%{transform:scale(1.03) rotate(2deg)} 66%{transform:scale(.98) rotate(-1deg)} 100%{transform:scale(1)}}
.marquee{overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)}
.marquee-track{display:flex; gap:48px; white-space:nowrap; padding:14px 0; color:var(--muted); text-transform:uppercase; letter-spacing:.25em; animation: roll 22s linear infinite}
@keyframes roll{0%{transform:translateX(-50%)} 100%{transform:translateX(0)}}
.section{padding:80px 0}
.section h2{font-size:2rem; margin:0 0 18px; font-weight:800}
.kpis{display:flex; gap:18px; font-size:.95rem; color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.input, textarea, select{width:100%; background:rgba(255,255,255,.06); border:1px solid var(--border); color:#fff; border-radius:14px; padding:12px 14px; outline:none}
.input:focus, textarea:focus{border-color:var(--accent1)}
.footer{border-top:1px solid rgba(255,255,255,.1); padding:40px 0; color:rgba(255,255,255,.7)}
small{color:rgba(255,255,255,.6)}
.alert{border:1px dashed var(--border); background:rgba(255,255,255,.05); padding:12px 14px; border-radius:14px; color:var(--muted)}