:root{
  --brand:#2563EB; --accent:#22D3EE; --highlight:#A78BFA; --ink:#0B1220;
  --muted-light:#64748B; --muted-dark:#9FB1C6; --muted: var(--muted-light);
  --bg-light:#F8FAFC; --bg-dark:#0B1220;
  --container:1200px; --radius:10px;
  --shadow-soft: 0 8px 24px rgba(11,18,32,0.08);
  --shadow-strong: 0 20px 50px rgba(11,18,32,0.14);

  /* device mockup colors */
  --device-surface-light:#FFFFFF; --device-surface-dark: rgba(255,255,255,0.06); --device-surface: var(--device-surface-light);
  --device-stroke-light:#e6eef8; --device-stroke-dark: rgba(255,255,255,0.16); --device-stroke: var(--device-stroke-light);

  /* typographic scale */
  --step-0: clamp(12px, 1.2vw, 14px);
  --step-1: clamp(14px, 1.6vw, 16px);
  --step-2: clamp(16px, 2vw, 18px);
  --step-3: clamp(20px, 2.6vw, 24px);
  --step-4: clamp(28px, 4vw, 40px);
}
html[data-theme="dark"]{ background:var(--bg-dark); color:#e6eef8; --muted: var(--muted-dark); --device-surface: var(--device-surface-dark); --device-stroke: var(--device-stroke-dark) }
html[data-theme="light"]{ background:var(--bg-light); color:var(--ink); --muted: var(--muted-light); --device-surface: var(--device-surface-light); --device-stroke: var(--device-stroke-light) }
.text-base{ font-size:var(--step-1) }
body{ font-family:Inter,system-ui,Arial; margin:0; line-height:1.45; font-size:var(--step-1) }
html[data-theme="light"] body{ color: var(--ink) }
html[data-theme="dark"] body{ color: #e6eef8 }
.container p{ max-width:70ch }
.container{ max-width:var(--container); margin:0 auto; padding:24px }
.site-header{ position:sticky; top:0; z-index:1000; border-bottom:1px solid rgba(11,18,32,0.06); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease }
html[data-theme="light"] .site-header{ background: rgba(248,250,252,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
html[data-theme="dark"] .site-header{ background: rgba(11,18,32,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255,255,255,0.08) }
/* overlay at top — blends with hero */
.site-header.at-top{ background: transparent !important; border-bottom-color: transparent !important; box-shadow:none }
.site-header.is-scrolled{ box-shadow: 0 10px 30px rgba(11,18,32,0.08) }
.site-header .container{ display:flex; gap:12px; align-items:center }
.brand{ display:flex; gap:8px; align-items:center }
.site-title{ font-weight:700; font-family: 'Plus Jakarta Sans', sans-serif }
.site-title .go{ font-size:1.12em; letter-spacing:0.06em; color:var(--brand); font-weight:900; background:linear-gradient(90deg,var(--brand),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent }
.display .go{ color:var(--brand); font-weight:900 }
.modern-hero{ position:relative; overflow:hidden; padding-top:12px }
.modern-hero .display{ font-size:var(--step-4); letter-spacing:-0.02em }
.modern-hero::before{ content:""; position:absolute; inset:-20% -10% auto -10%; height:360px; z-index:-1;
  background: radial-gradient(60% 80% at 20% 40%, rgba(34,211,238,0.35) 0%, rgba(34,211,238,0.0) 60%),
              radial-gradient(50% 70% at 70% 30%, rgba(37,99,235,0.25) 0%, rgba(37,99,235,0.0) 60%);
  filter: blur(28px) saturate(115%);
  animation: floaty 14s ease-in-out infinite;
}
.modern-hero::after{ content:""; position:absolute; inset:auto -10% -30% -10%; height:220px; z-index:-1;
  background: radial-gradient(60% 80% at 60% 60%, rgba(167,139,250,0.28) 0%, rgba(167,139,250,0.0) 60%);
  filter: blur(26px);
  animation: floaty 18s ease-in-out infinite reverse;
}
/* top gradient to blend with transparent header */
.modern-hero .hero-mask{ position:absolute; inset:-40px -10% auto -10%; height:40px; pointer-events:none;
  background: linear-gradient(180deg, rgba(11,18,32,0.12), rgba(11,18,32,0)); opacity:.12 }
@keyframes floaty{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(18px) } }
.studio-keywords{ font-weight:600; color:var(--muted); letter-spacing:0.08em; margin-top:8px; text-transform:uppercase; font-size:var(--step-1) }
.display em{ color:var(--highlight) }
.nav{ display:flex; gap:6px; padding:4px; border-radius:12px; border:1px solid rgba(11,18,32,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.44)); }
html[data-theme="dark"] .nav{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12) }
.nav a{ position:relative; margin-right:0; color:inherit; text-decoration:none; padding:8px 12px; border-radius:10px }
.nav a[aria-current="page"]{ background:linear-gradient(180deg, rgba(37,99,235,0.12), rgba(34,211,238,0.10)); box-shadow: inset 0 0 0 1px rgba(37,99,235,0.28) }
.nav a:hover{ background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4)) }
html[data-theme="dark"] .nav a:hover{ background: rgba(255,255,255,0.08) }
.nav a::after{ content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; border-radius:2px; opacity:.8;
  background: linear-gradient(90deg, var(--brand), var(--accent)); transform: scaleX(0); transform-origin:left; transition: transform .25s ease }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after{ transform: scaleX(1) }
.nav a:focus-visible{ outline:3px solid var(--highlight); outline-offset:3px }
.controls{ margin-left:auto; display:flex; gap:8px }
.controls button{ padding:8px 10px; border-radius:10px; border:1px solid rgba(11,18,32,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5)); color:inherit }
html[data-theme="dark"] .controls button{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16) }
.controls button:hover{ box-shadow: var(--shadow-soft) }
.controls button[aria-pressed="true"]{ box-shadow: inset 0 0 0 1px rgba(37,99,235,0.35) }
.btn{ display:inline-block; position:relative; color:white; padding:10px 14px; border-radius:12px; text-decoration:none; box-shadow: var(--shadow-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) padding-box,
              linear-gradient(90deg, var(--brand), var(--accent)) border-box;
  border:1px solid transparent;
}
.btn:hover{ box-shadow: var(--shadow-strong); transform: translateY(-1px); transition: box-shadow .2s ease, transform .2s ease }
.btn:active{ transform: translateY(0) scale(.98) }
.hero{ padding:72px 0 48px }
.modern-hero{ display:flex; gap:28px; align-items:center; justify-content:space-between }
.hero-webgl{ position:absolute; inset:0; z-index:-1; opacity:.6; pointer-events:none; height:100%; }
.hero-left{ flex:1 }
.hero-right{ width:320px; display:flex; align-items:center; justify-content:center }
.display{ font-family: 'Plus Jakarta Sans', sans-serif; font-size:40px; margin:0; line-height:1.02 }
.lead{ margin-top:12px; color:var(--muted) }
.muted{ color:var(--muted) }
label{ display:block; margin:10px 0 }
.form input, .form textarea{ width:100%; padding:10px; border-radius:8px; border:1px solid #e6eef8 }
.form input, .form textarea{ background:linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.6)); }
html[data-theme="dark"] .form input, html[data-theme="dark"] .form textarea{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color:inherit }
.form input:focus, .form textarea:focus{ outline:none; border-color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)) padding-box,
              linear-gradient(90deg, var(--brand), var(--accent)) border-box;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
::selection{ background: rgba(37,99,235,0.18) }
.consent{ font-size:var(--step-0); color:var(--muted) }
.grid{ display:grid; gap:18px }
.cols-3{ grid-template-columns:repeat(3,1fr) }
/* glass cards */
.card, .case{ padding:20px; border-radius:14px; box-shadow: 0 8px 20px rgba(11,18,32,0.06); text-decoration:none; color:inherit; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.42)) padding-box,
              linear-gradient(90deg, rgba(37,99,235,0.25), rgba(34,211,238,0.18)) border-box;
  border:1px solid transparent;
}
.case{ display:block }
.card h3{ margin:0 0 10px 0; font-size:var(--step-2); letter-spacing:-0.01em }
.card p{ margin:0; font-size:var(--step-1) }
.case:hover, .card:hover{ transform:translateY(-6px) scale(1.01); transition:transform .22s cubic-bezier(.2,.9,.2,1) }
html[data-theme="dark"] .card, html[data-theme="dark"] .case{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12) }
.site-footer{ border-top:1px solid rgba(11,18,32,0.06); padding:24px 0 }

/* chips */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.chip{ font-size:var(--step-0); padding:6px 10px; border-radius:999px; border:1px solid rgba(11,18,32,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.58)); color:inherit }
html[data-theme="dark"] .chip{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16) }

/* heading accent */
.container h2{ position:relative; padding-bottom:6px }
.container h2::after{ content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; border-radius:2px; opacity:.6;
  background: linear-gradient(90deg, var(--brand), var(--accent)) }

/* GO shimmer */
.site-title .go, .display .go{ background-size:200% 100%; animation: goShimmer 6s ease-in-out infinite }
@keyframes goShimmer{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }

/* responsive */
@media (max-width:920px){ .cols-3{ grid-template-columns:1fr } .modern-hero{ flex-direction:column-reverse; gap:20px } .hero-right{ width:240px } .display{ font-size:calc(var(--step-4) - 8px) } }

.skip-link{ position:absolute; left:-9999px; top:auto }
.skip-link:focus{ left:1rem; top:1rem; background:var(--bg-light); padding:6px 8px; border-radius:4px }

button{ cursor:pointer }
button:focus{ outline:3px solid var(--highlight); outline-offset:3px }

@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important } }

/* utility: visually hidden but accessible */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1) }
.reveal.in{ opacity:1; transform: translateY(0) }
.reveal[data-delay="1"]{ transition-delay:.06s }
.reveal[data-delay="2"]{ transition-delay:.12s }
.reveal[data-delay="3"]{ transition-delay:.18s }

/* flow / timeline */
.flow{ position:relative; margin-top:24px }
.flow-steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.flow-steps::before{ content:""; position:absolute; left:10px; right:10px; top:36px; height:2px; z-index:0;
  background: linear-gradient(90deg, var(--brand), var(--accent)); background-size:200% 100%; animation: shimmer 6s linear infinite }
@keyframes shimmer{ 0%{ background-position:0% 0 } 100%{ background-position:200% 0 } }
.flow .step{ position:relative; z-index:1 }
.flow .step h4{ margin:.2rem 0 .4rem 0 }
.flow .step p{ margin:0 }
@media (max-width:920px){ .flow-steps{ grid-template-columns:1fr } .flow-steps::before{ display:none } }

/* scroll progress */
.scroll-progress{ position:fixed; left:0; top:0; height:3px; width:0%; z-index:9999; background:linear-gradient(90deg, var(--brand), var(--accent)); box-shadow:0 0 12px rgba(37,99,235,0.35) }

/* cookie banner */
.cookie-banner{ position:fixed; left:12px; right:12px; bottom:12px; z-index:1001; border-radius:12px; padding:12px; 
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75)); border:1px solid rgba(11,18,32,0.08); box-shadow:0 12px 40px rgba(11,18,32,0.18) }
html[data-theme="dark"] .cookie-banner{ background: rgba(20,28,46,0.9); border-color: rgba(255,255,255,0.12) }
.cookie-inner{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.cookie-actions{ display:flex; gap:8px }
.cookie-decline{ background:transparent; border:1px solid rgba(11,18,32,0.2); color:inherit; padding:8px 12px; border-radius:10px }
html[data-theme="dark"] .cookie-decline{ border-color: rgba(255,255,255,0.2) }