* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:#05070f;
  --bg-2:#0a0e1c;
  --paper:#f4f5f9;
  --paper-2:#e9ebf2;
  --ink:#0b0e17;
  --ink-muted:#5b6270;
  --text:#eef1f8;
  --muted:#9aa3b5;
  --blue:#4F7CFF;
  --violet:#7A5CFF;
  --grad:linear-gradient(92deg,#4F7CFF,#7A5CFF);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

html { scroll-behavior:auto; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.mono { font-family:var(--font-mono); letter-spacing:.14em; font-weight:500; }
h1,h2,h3 { font-family:var(--font-display); }

::selection { background:rgba(79,124,255,.4); }

/* line-mask reveal helper: each .hline clips its inner span */
.hline { display:block; overflow:hidden; }
.hline > span { display:block; will-change:transform; }

.grad {
  background:linear-gradient(92deg,#3E8BFF 5%,#8A5CFF 80%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---------- buttons & links ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; color:#fff; text-decoration:none;
  padding:15px 28px; border-radius:100px; white-space:nowrap;
  transition:box-shadow .25s, background .25s, border-color .25s;
  will-change:transform;
}
.btn .arrow { width:15px; height:11px; transition:transform .25s; }
.btn:hover .arrow { transform:translateX(4px); }
.btn-primary { background:var(--grad); box-shadow:0 8px 30px rgba(79,100,255,.35); }
.btn-primary:hover { box-shadow:0 10px 40px rgba(79,100,255,.55); }
.btn-ghost { border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.03); backdrop-filter:blur(6px); }
.btn-ghost:hover { border-color:rgba(255,255,255,.5); }
.btn-big { padding:20px 40px; font-size:17px; }
.nav-cta { padding:12px 22px; font-size:14px; }

.text-link {
  display:inline-flex; align-items:center; gap:9px;
  color:var(--text); text-decoration:none; font-weight:600; font-size:15.5px;
  position:relative; padding-bottom:4px;
}
.text-link svg { width:15px; height:11px; transition:transform .25s; }
.text-link:hover svg { transform:translateX(4px); }
.text-link::after {
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--grad); transform:scaleX(.3); transform-origin:left; transition:transform .3s;
}
.text-link:hover::after { transform:scaleX(1); }

/* ---------- nav ---------- */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; gap:44px;
  padding:20px 4.5vw;
  transition:background .35s, box-shadow .35s, padding .35s;
}
.nav.scrolled {
  background:rgba(5,7,15,.78); backdrop-filter:blur(14px);
  padding:13px 4.5vw;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.01em; }
.logo svg { width:34px; height:28px; }
.nav-links { display:flex; gap:32px; margin-left:auto; }
.nav-links a {
  color:#c8cede; text-decoration:none; font-size:14.5px; font-weight:500;
  position:relative; transition:color .2s;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:-5px; height:1.5px; width:100%;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav-links a:hover { color:#fff; }
.nav-links a:hover::after { transform:scaleX(1); }

/* ---------- hero ---------- */
.hero { position:relative; height:100vh; min-height:620px; overflow:hidden; }
.hero-media { position:absolute; inset:0; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 50%; }
.hero-shade {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,7,15,.88) 0%, rgba(5,7,15,.55) 38%, rgba(5,7,15,.08) 70%),
    linear-gradient(180deg, rgba(5,7,15,.5) 0%, rgba(5,7,15,0) 26%, rgba(5,7,15,0) 70%, rgba(5,7,15,.85) 100%);
}
.hero-inner {
  position:relative; z-index:2;
  height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:0 4.5vw; max-width:1500px;
}
.eyebrow {
  font-size:12.5px; color:#aab4ff; margin-bottom:26px;
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before { content:''; width:34px; height:1.5px; background:var(--grad); display:inline-block; }
.hero-title {
  font-size:clamp(44px, 7.2vw, 96px);
  font-weight:700; letter-spacing:-.03em; line-height:1.04;
}
.hero-sub {
  margin-top:30px; font-size:clamp(16px,1.6vw,18.5px); line-height:1.7;
  color:var(--muted); max-width:520px;
}
.cta-row { display:flex; align-items:center; gap:18px; margin-top:42px; flex-wrap:wrap; }

.scroll-hint {
  position:absolute; left:4.5vw; bottom:34px; z-index:2;
  display:flex; align-items:center; gap:14px; color:#8a93a6; font-size:11px;
}
.mouse { width:24px; height:38px; border:1.5px solid #5a6377; border-radius:13px; position:relative; }
.mouse i { position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:3px; background:#8a93a6; animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(11px);opacity:0} 100%{transform:translateY(0);opacity:0} }

/* ---------- marquee ---------- */
.marquee {
  background:var(--paper); color:var(--ink);
  padding:26px 0; overflow:hidden; position:relative;
}
.marquee-track { display:flex; width:max-content; will-change:transform; }
.marquee-set { display:flex; align-items:center; flex-shrink:0; }
.marquee-set span {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,2.6vw,34px); letter-spacing:-.02em; padding:0 28px;
  white-space:nowrap;
}
.marquee-set i { font-style:normal; font-size:14px; color:var(--blue); }

/* ---------- services intro ---------- */
.services-intro {
  background:var(--paper); color:var(--ink);
  padding:110px 4.5vw 90px;
}
.kicker { font-size:12.5px; color:var(--blue); display:inline-flex; align-items:center; gap:12px; }
.kicker::before { content:''; width:34px; height:1.5px; background:var(--grad); display:inline-block; }
.services-intro h2, .work h2, .process h2 {
  margin-top:20px;
  font-size:clamp(34px,4.6vw,64px); font-weight:700; letter-spacing:-.03em; line-height:1.08;
}

/* ---------- service bands ---------- */
.band { position:relative; height:88vh; min-height:520px; overflow:hidden; }
.band-media { position:absolute; inset:0; }
.band-media img {
  width:100%; height:118%; object-fit:cover; display:block;
  will-change:transform;
}
.band::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,15,.35), rgba(5,7,15,.15) 40%, rgba(5,7,15,.55));
}
.band[data-align="left"]::after {
  background:linear-gradient(90deg, rgba(5,7,15,.82) 0%, rgba(5,7,15,.42) 45%, rgba(5,7,15,.05) 75%);
}
.band[data-align="right"]::after {
  background:linear-gradient(270deg, rgba(5,7,15,.82) 0%, rgba(5,7,15,.42) 45%, rgba(5,7,15,.05) 75%);
}
.band-content {
  position:absolute; z-index:2; top:50%; transform:translateY(-50%);
  max-width:min(560px, 46vw);
}
.band[data-align="left"] .band-content { left:4.5vw; }
.band[data-align="right"] .band-content { right:4.5vw; }
.chip {
  display:inline-block; font-size:12px; color:#c3cbff;
  border:1px solid rgba(195,203,255,.35); border-radius:100px;
  padding:8px 16px; margin-bottom:24px;
  background:rgba(5,7,15,.35); backdrop-filter:blur(8px);
}
.band-title {
  font-size:clamp(32px,4vw,56px); font-weight:700;
  letter-spacing:-.03em; line-height:1.07; color:#fff;
}
.band-copy { margin-top:20px; font-size:16.5px; line-height:1.7; color:#c9cfde; max-width:440px; }
.band .text-link { margin-top:26px; }

/* ---------- work ---------- */
.work { background:var(--paper); color:var(--ink); padding:120px 0 130px; overflow:hidden; }
.work-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  padding:0 4.5vw; margin-bottom:56px;
}
.work-arrows { display:flex; gap:10px; flex-shrink:0; }
.rail-btn {
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  border:1.5px solid rgba(11,14,23,.2); background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, color .25s, border-color .25s, opacity .2s;
}
.rail-btn svg { width:16px; height:12px; }
.rail-btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.rail-btn.disabled { opacity:.25; pointer-events:none; }

.rail {
  overflow:hidden;
  padding:0 4.5vw;
  cursor:grab;
  touch-action:pan-y;
}
.rail.dragging { cursor:grabbing; }
.rail, .rail * { user-select:none; -webkit-user-select:none; }
.rail img { -webkit-user-drag:none; pointer-events:none; }
.rail-track { display:flex; gap:26px; will-change:transform; }
.card {
  flex:0 0 auto; width:min(430px, 74vw);
  text-decoration:none; color:var(--ink);
}
.card-media {
  position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio:3/2; background:var(--paper-2);
}
.card-media img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.card:hover .card-media img { transform:scale(1.06); }
.card-brand {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px,2.6vw,38px); letter-spacing:-.02em; color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.22));
  opacity:1; transition:opacity .4s;
}
.card-badge {
  position:absolute; top:14px; left:14px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; font-weight:500;
  color:#fff; background:rgba(5,7,15,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  padding:7px 12px; border-radius:100px;
}
.card-badge.live { background:var(--grad); border:none; }
.card.soon { cursor:default; }
.card.soon .card-media img { filter:grayscale(.35) brightness(.82); }
.card.soon:hover .card-media img { transform:none; }
.card-meta { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:16px 4px 0; }
.card-meta strong { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-.01em; }
.card-meta .mono { font-size:10.5px; color:var(--ink-muted); }

/* ---------- process ---------- */
.process { background:var(--paper-2); color:var(--ink); padding:120px 4.5vw 130px; }
.steps {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:34px;
  margin-top:64px;
}
.step { border-top:1.5px solid rgba(11,14,23,.15); padding-top:22px; }
.step-num {
  font-size:13px; color:var(--blue);
}
.step h3 { margin-top:14px; font-size:21px; font-weight:700; letter-spacing:-.01em; }
.step p { margin-top:10px; font-size:14.5px; line-height:1.65; color:var(--ink-muted); }

/* ---------- CTA ---------- */
.cta { position:relative; padding:160px 4.5vw; overflow:hidden; }
.cta-media { position:absolute; inset:0; }
.cta-media img { width:100%; height:118%; object-fit:cover; display:block; will-change:transform; }
.cta::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,7,15,.86), rgba(5,7,15,.45) 55%, rgba(5,7,15,.2));
}
.cta-inner { position:relative; z-index:2; max-width:1500px; }
.cta-title {
  font-size:clamp(52px,8.4vw,120px); font-weight:700;
  letter-spacing:-.035em; line-height:1.02; color:#fff;
}
.cta .cta-row { margin-top:48px; gap:28px; }
.text-link.light { color:#dfe4f2; font-size:16.5px; }

/* ---------- footer ---------- */
.footer { background:#04060c; padding:80px 4.5vw 36px; }
.foot-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:44px;
  padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.07);
}
.foot-brand p { margin-top:18px; font-size:14.5px; line-height:1.7; color:var(--muted); }
.foot-col { display:flex; flex-direction:column; gap:13px; }
.foot-col .mono { font-size:11px; color:#6b7488; margin-bottom:6px; }
.foot-col a { color:#c8cede; text-decoration:none; font-size:14.5px; transition:color .2s; }
.foot-col a:hover { color:#fff; }
.foot-base {
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:30px; font-size:10.5px; color:#5a6377;
}

/* ============================================================
   Subpages (services + legal)
   ============================================================ */
.foot-legal { display:flex; gap:22px; flex-wrap:wrap; }
.foot-legal a { color:#8a93a6; text-decoration:none; font-size:12px; transition:color .2s; }
.foot-legal a:hover { color:#fff; }

.page-hero { position:relative; padding:190px 4.5vw 120px; overflow:hidden; }
.page-hero .ph-media { position:absolute; inset:0; }
.page-hero .ph-media img { width:100%; height:116%; object-fit:cover; display:block; will-change:transform; }
.page-hero::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,7,15,.93) 0%, rgba(5,7,15,.72) 45%, rgba(5,7,15,.3)),
             linear-gradient(180deg, rgba(5,7,15,.6), rgba(5,7,15,0) 40%, rgba(5,7,15,.9));
}
.page-hero .ph-inner { position:relative; z-index:2; max-width:1500px; }
.page-hero h1 {
  font-size:clamp(40px,6vw,84px); font-weight:700;
  letter-spacing:-.03em; line-height:1.05; max-width:14ch;
}
.page-hero .lead { margin-top:26px; font-size:clamp(16px,1.6vw,19px); line-height:1.7; color:var(--muted); max-width:560px; }
.crumb { display:inline-flex; align-items:center; gap:10px; font-size:12px; color:#aab4ff; text-decoration:none; margin-bottom:26px; }
.crumb svg { width:14px; height:10px; transform:rotate(180deg); }
.crumb:hover { color:#fff; }

.sec { padding:110px 4.5vw; }
.sec.light { background:var(--paper); color:var(--ink); }
.sec.lighter { background:var(--paper-2); color:var(--ink); }
.sec.dark { background:var(--bg); }
.sec-inner { max-width:1200px; margin:0 auto; }
.sec h2 { font-size:clamp(30px,3.8vw,54px); font-weight:700; letter-spacing:-.03em; line-height:1.1; margin-top:18px; }
.sec .sub { margin-top:20px; font-size:17px; line-height:1.75; max-width:640px; }
.sec.light .sub, .sec.lighter .sub { color:var(--ink-muted); }
.sec.dark .sub { color:var(--muted); }

/* word-by-word animated headline */
.wsplit .w { display:inline-block; overflow:hidden; vertical-align:top; }
.wsplit .w > i { display:inline-block; font-style:normal; will-change:transform; }

/* accordion */
.acc { margin-top:56px; }
.acc-item { border-top:1.5px solid rgba(11,14,23,.14); }
.acc-item:last-child { border-bottom:1.5px solid rgba(11,14,23,.14); }
.sec.dark .acc-item { border-color:rgba(255,255,255,.12); }
.acc-head {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 4px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-size:clamp(19px,2.2vw,26px); font-weight:700;
  letter-spacing:-.01em; color:inherit;
}
.acc-head .acc-tag { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--blue); margin-right:18px; }
.acc-icon { flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid currentColor; opacity:.55; position:relative; transition:transform .35s, opacity .25s; }
.acc-icon::before, .acc-icon::after {
  content:''; position:absolute; left:50%; top:50%; width:12px; height:1.6px;
  background:currentColor; transform:translate(-50%,-50%);
}
.acc-icon::after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .35s; }
.acc-item.open .acc-icon { transform:rotate(45deg); opacity:1; }
.acc-head:hover .acc-icon { opacity:1; }
.acc-panel { overflow:hidden; height:0; }
.acc-body { padding:0 4px 30px; max-width:720px; font-size:16px; line-height:1.75; }
.sec.light .acc-body, .sec.lighter .acc-body { color:var(--ink-muted); }
.sec.dark .acc-body { color:var(--muted); }
.acc-body ul { margin:14px 0 0 18px; display:grid; gap:8px; }

/* feature grid */
.fgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }
.fcard {
  border-radius:18px; padding:30px 26px;
  background:rgba(255,255,255,.6); border:1px solid rgba(11,14,23,.08);
  transition:transform .3s, box-shadow .3s;
}
.sec.dark .fcard { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); }
.fcard:hover { transform:translateY(-5px); box-shadow:0 18px 44px rgba(11,14,23,.09); }
.fcard .mono { font-size:11px; color:var(--blue); }
.fcard h3 { margin-top:12px; font-size:19px; font-weight:700; letter-spacing:-.01em; }
.fcard p { margin-top:10px; font-size:14.5px; line-height:1.65; }
.sec.light .fcard p, .sec.lighter .fcard p { color:var(--ink-muted); }
.sec.dark .fcard p { color:var(--muted); }

/* big stat row */
.stats { display:flex; gap:60px; flex-wrap:wrap; margin-top:60px; }
.stat .num { font-family:var(--font-display); font-size:clamp(40px,5vw,68px); font-weight:700; letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat .lbl { margin-top:6px; font-size:12px; }

/* case study (mobile page) */
.case { border-radius:24px; overflow:hidden; margin-top:60px; background:var(--bg-2); color:var(--text); display:grid; grid-template-columns:1.1fr 1fr; }
.case-media { position:relative; min-height:380px; }
.case-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.case-body { padding:46px 44px; }
.case-body .mono { font-size:11px; color:#aab4ff; }
.case-body h3 { font-size:clamp(24px,2.6vw,34px); font-weight:700; letter-spacing:-.02em; margin-top:12px; }
.case-body p { margin-top:14px; font-size:15px; line-height:1.7; color:var(--muted); }
.case-list { margin-top:22px; display:grid; gap:12px; }
.case-list li { list-style:none; display:flex; gap:12px; font-size:14.5px; line-height:1.6; color:#c9cfde; }
.case-list li::before { content:''; flex:none; width:7px; height:7px; border-radius:50%; background:var(--grad); margin-top:7px; }

/* app store screenshot strip (VoiceInbox subpage) */
.case.solo { display:block; }
.case.solo .case-body { padding:52px 50px 56px; max-width:none; }
.case-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px 44px; margin-top:8px; }
.case-links {
  display:flex; align-items:center; gap:30px; flex-wrap:wrap;
  margin-top:40px; padding-top:34px; border-top:1px solid rgba(255,255,255,.09);
}
.shots-rail {
  display:grid; grid-template-columns:repeat(6, 1fr); gap:14px;
  margin-top:44px;
}
.shots-rail img {
  width:100%; height:auto; display:block;
  border-radius:14px; border:1px solid rgba(11,14,23,.1);
  box-shadow:0 14px 34px rgba(11,14,23,.14);
  -webkit-user-drag:none;
}

/* mini reference cards */
.minirefs { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:26px; }
.miniref { border-radius:18px; padding:28px 26px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.miniref h4 { font-family:var(--font-display); font-size:20px; font-weight:700; }
.miniref .mono { font-size:10.5px; color:#aab4ff; }
.miniref p { margin-top:10px; font-size:14px; line-height:1.65; color:var(--muted); }

/* before/after (databases page) */
.ba { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:26px; margin-top:60px; }
.ba-col { border-radius:18px; padding:30px 28px; }
.ba-col.messy { background:rgba(224,82,82,.06); border:1px solid rgba(224,82,82,.25); }
.ba-col.clean { background:rgba(79,124,255,.06); border:1px solid rgba(79,124,255,.3); }
.ba-col h3 { font-size:18px; font-weight:700; }
.ba-col ul { margin:16px 0 0; display:grid; gap:10px; }
.ba-col li { list-style:none; font-size:14px; line-height:1.55; color:var(--ink-muted); display:flex; gap:10px; }
.ba-col.messy li::before { content:'✕'; color:#d05252; font-weight:700; }
.ba-col.clean li::before { content:'✓'; color:var(--blue); font-weight:700; }
.ba-arrow { align-self:center; font-size:30px; color:var(--blue); }

/* legal pages */
.legal { max-width:820px; margin:0 auto; padding:180px 4.5vw 120px; }
.legal h1 { font-size:clamp(34px,4.4vw,56px); font-weight:700; letter-spacing:-.03em; }
.legal .meta { margin-top:14px; font-size:12px; color:#8a93a6; }
.legal h2 { font-size:22px; font-weight:700; margin-top:52px; letter-spacing:-.01em; }
.legal p, .legal li { font-size:15.5px; line-height:1.8; color:#b7bfd0; }
.legal p { margin-top:16px; }
.legal ul { margin:14px 0 0 20px; display:grid; gap:8px; }
.legal a { color:#9db4ff; }

@media (max-width: 1080px) {
  .fgrid { grid-template-columns:1fr 1fr; }
  .case { grid-template-columns:1fr; }
  .case-cols { grid-template-columns:1fr; }
  .minirefs { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .shots-rail { grid-template-columns:repeat(3, 1fr); }
  .case.solo .case-body { padding:36px 26px 40px; }
}
@media (max-width: 760px) {
  .fgrid { grid-template-columns:1fr; }
  .ba { grid-template-columns:1fr; }
  .ba-arrow { transform:rotate(90deg); justify-self:center; }
  .page-hero { padding:150px 6vw 90px; }
  .sec { padding:80px 6vw; }
}

/* ---------- demo slide-up panel ---------- */
.demo-backdrop {
  position:fixed; inset:0; z-index:180;
  background:rgba(3,4,10,.62); backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity .4s;
}
.demo-backdrop.open { opacity:1; pointer-events:auto; }
.demo-panel {
  position:fixed; left:0; right:0; top:34px; bottom:0; z-index:190;
  background:#0a0e1c; border-radius:20px 20px 0 0;
  transform:translateY(103%);
  transition:transform .65s cubic-bezier(.72,0,.16,1);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 -24px 90px rgba(0,0,0,.55);
}
.demo-panel.open { transform:none; }
.demo-head {
  display:flex; align-items:center; gap:16px;
  padding:13px 20px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(5,7,15,.6);
}
.demo-chip { margin-bottom:0; font-size:10px; padding:6px 12px; }
.demo-head strong { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text); }
.demo-new {
  margin-left:auto; font-size:10.5px; color:#9db4ff; text-decoration:none;
}
.demo-new:hover { color:#fff; }
.demo-close {
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
}
.demo-close svg { width:13px; height:13px; }
.demo-close:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45); }
.demo-frame { flex:1; width:100%; border:0; background:#111; }

/* ---------- cookie banner ---------- */
.cookiebar {
  position:fixed; left:18px; right:18px; bottom:18px; z-index:300;
  display:flex; justify-content:center;
  opacity:0; transform:translateY(24px); pointer-events:none;
  transition:opacity .4s, transform .4s;
}
.cookiebar.visible { opacity:1; transform:none; pointer-events:auto; }
.cb-inner {
  max-width:920px; width:100%;
  background:rgba(10,14,28,.96); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12); border-radius:18px;
  padding:22px 24px; box-shadow:0 24px 70px rgba(0,0,0,.5);
  color:var(--text);
}
.cb-text strong { font-family:var(--font-display); font-size:16px; }
.cb-text p { margin-top:6px; font-size:13.5px; line-height:1.6; color:var(--muted); }
.cb-text a { color:#9db4ff; }
.cb-panel { margin-top:14px; display:grid; gap:10px; }
.cb-panel[hidden] { display:none; }
.cb-row {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-size:13px; padding:10px 14px; border:1px solid rgba(255,255,255,.1);
  border-radius:12px; cursor:pointer;
}
.cb-row em { font-style:normal; color:var(--muted); font-size:12px; }
.cb-row input { width:18px; height:18px; accent-color:var(--blue); flex:none; }
.cb-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.cb-btn {
  font-family:var(--font-body); font-size:13.5px; font-weight:600;
  padding:11px 20px; border-radius:100px; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); background:transparent; color:var(--text);
  transition:border-color .2s, background .2s;
}
.cb-btn:hover { border-color:rgba(255,255,255,.5); }
.cb-accept, .cb-save { background:var(--grad); border:none; }
@media (max-width:600px){ .cb-actions .cb-btn { flex:1; text-align:center; padding:11px 8px; } }

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring { position:fixed; left:0; top:0; z-index:999; pointer-events:none; border-radius:50%; }
.cursor-dot { width:6px; height:6px; background:#fff; mix-blend-mode:difference; }
.cursor-ring {
  width:34px; height:34px; border:1.5px solid rgba(255,255,255,.55);
  mix-blend-mode:difference; transition:transform .2s;
}
@media (hover:none), (pointer:coarse) { .cursor-dot,.cursor-ring { display:none; } }

/* ---------- reveals (JS adds motion; visible w/o JS) ---------- */
.reveal { will-change:transform, opacity; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns:repeat(2, 1fr); gap:40px 30px; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-links { display:none; }
  .band { height:auto; min-height:0; }
  .band-media { position:relative; height:52vw; }
  .band-media img { height:100%; }
  .band::after { background:none !important; }
  .band-content {
    position:relative; top:auto; transform:none; max-width:none;
    padding:34px 6vw 60px; left:auto !important; right:auto !important;
  }
  .band { background:var(--bg-2); }
  .hero-video { object-position:66% 50%; }
  .work-head { flex-direction:column; align-items:flex-start; }
  .steps { grid-template-columns:1fr; }
  .cta { padding:110px 6vw; }
  .foot-grid { grid-template-columns:1fr; gap:36px; }
}