/* ============================================================
   DevBuddy — Awwwards-grade landing
   ============================================================ */
:root {
  --bg: #0c0a09;
  --bg2: #131110;
  --panel: #181513;
  --panel-2: #1e1a17;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.15);
  --cyan: #bef264;
  --cyan-deep: #9fd92e;
  --cyan-glow: rgba(190,242,100,0.55);
  --violet: #ff5c38;
  --violet-glow: rgba(255,92,56,0.5);
  --coral: #ff5c38;
  --text: #f4efe6;
  --muted: #9a9388;
  --muted-2: #6c655c;
  --display: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --promo-h: 46px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}
body.loading { overflow: hidden; height: 100vh; }
::selection { background: rgba(190,242,100,0.3); color: #fff; }

/* ---------------- background ---------------- */
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bg-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(190,242,100,0.10), transparent 55%),
    radial-gradient(100% 70% at 85% 110%, rgba(255,92,56,0.10), transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(12,10,9,0.9) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { position: relative; z-index: 3; }
.container { width: min(1140px, 90vw); margin: 0 auto; }

/* ============================================================
   PRELOADER — boot sequence + diagonal split
   ============================================================ */
#preloader { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.pre-panel {
  position: absolute; inset: 0; background: #14110d;
  will-change: transform; backface-visibility: hidden;
  transition: transform 1.05s cubic-bezier(.76,0,.18,1);
}
.pre-panel.top { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 70%); }
.pre-panel.bot { clip-path: polygon(0 70%, 100% 30%, 100% 100%, 0 100%); }
#preloader.done .pre-panel.top { transform: translate(-3vw, -112%); }
#preloader.done .pre-panel.bot { transform: translate(3vw, 112%); }

.pre-inner { position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  transition: opacity .4s ease, transform .5s ease; }
#preloader.done .pre-inner { opacity: 0; transform: scale(.96); }

/* robot icon booting up */
.pre-icon { position: relative; width: 96px; height: 96px; border-radius: 24%; overflow: hidden;
  background: linear-gradient(160deg, #211d1a, #161310 55%, #0d0b09);
  box-shadow: 0 0 0 1px rgba(190,242,100,0.18), 0 0 54px rgba(190,242,100,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center; gap: 11px;
  animation: pre-bob 3s ease-in-out infinite; }
.pre-scan { position: absolute; left: 0; right: 0; top: 0; height: 26%; pointer-events: none;
  background: linear-gradient(180deg, rgba(190,242,100,0.32), rgba(190,242,100,0) 90%);
  box-shadow: 0 1px 10px rgba(190,242,100,0.5);
  animation: pre-scan 2.1s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes pre-scan { 0%{transform:translateY(-30%);opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{transform:translateY(400%);opacity:0;} }
@keyframes pre-bob { 0%,100%{transform:translateY(-4px);} 50%{transform:translateY(4px);} }
.pre-eye { width: 18px; height: 27px; border-radius: 40% / 34%;
  background: linear-gradient(180deg,#f4ffd6,#bef264 60%,#8fc91e);
  box-shadow: 0 0 14px rgba(190,242,100,0.6), inset 0 4px 6px rgba(255,255,255,0.5);
  opacity: 0; transform: scaleY(.1);
  animation: pre-eye-on .5s cubic-bezier(.5,1.6,.4,1) .25s forwards, pre-blink 3.2s ease-in-out 1.3s infinite; }
.pre-eye.r { animation-delay: .42s, 1.5s; }
@keyframes pre-eye-on { to { opacity: 1; transform: scaleY(1); } }
@keyframes pre-blink { 0%,46%,54%,100%{transform:scaleY(1);} 50%{transform:scaleY(.1);} }

/* terminal boot log */
.pre-term { font-family: var(--mono); font-size: clamp(12px,1.5vw,14px); line-height: 2.0;
  color: var(--muted); width: min(360px, 82vw); }
.pre-term .ln { opacity: 0; transform: translateY(5px); transition: opacity .32s ease, transform .32s ease; white-space: nowrap; }
.pre-term .ln.on { opacity: 1; transform: none; }
.pre-term .ln .pr { color: var(--cyan); margin-right: 8px; }
.pre-term .ln .ok { color: var(--cyan); font-weight: 700; }
.pre-cur { display: inline-block; width: 8px; height: 1.05em; background: var(--cyan);
  margin-left: 6px; vertical-align: -2px; box-shadow: 0 0 8px rgba(190,242,100,0.7);
  animation: pre-cur 1s steps(1) infinite; }
@keyframes pre-cur { 50% { opacity: 0; } }

/* bottom progress hairline */
.pre-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0%; z-index: 4;
  background: var(--cyan); box-shadow: 0 0 14px rgba(190,242,100,0.6); transition: opacity .3s ease; }
#preloader.done .pre-prog { opacity: 0; }

/* ============================================================
   PROGRESS UI
   ============================================================ */
#progress-top {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 60;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 14px var(--cyan-glow);
}
/* floating dock icon w/ progress ring */
#dock {
  position: fixed; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 30px);
  width: 60px; height: 60px; z-index: 55; cursor: pointer;
  opacity: 0; transform: translateY(20px) scale(.8);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
#dock.show { opacity: 1; transform: translateY(0) scale(1); }
#dock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#dock .ring-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 3; }
#dock .ring-fg { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--cyan-glow)); transition: stroke-dashoffset .1s linear; }
#dock .dock-face {
  position: absolute; inset: 9px; border-radius: 22%;
  background: linear-gradient(160deg, #211d1a, #121010);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
#dock .de { width: 7px; height: 11px; border-radius: 40%;
  background: linear-gradient(180deg,#f4ffd6,#bef264); box-shadow: 0 0 6px rgba(190,242,100,0.6);
  transition: transform .15s; }
#dock.up .de { animation: dock-blink .5s; }
@keyframes dock-blink { 50%{transform:scaleY(.1);} }

/* ============================================================
   NAV
   ============================================================ */
/* ---------------- sticky offer bar ---------------- */
#promo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--promo-h); display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 2vw, 16px); padding: 0 14px;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  font-family: var(--sans); font-weight: 600; color: #0c0a09;
  font-size: clamp(12px, 1.6vw, 14px); white-space: nowrap;
}
#promo-bar .promo-price { font-weight: 800; }
#promo-bar .promo-btn {
  display: inline-flex; align-items: center; background: #0c0a09; color: var(--cyan);
  padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: clamp(12px, 1.5vw, 13px);
  text-decoration: none; white-space: nowrap; transition: transform .18s;
}
#promo-bar .promo-btn:hover { transform: translateY(-1px); }

nav {
  position: fixed; top: var(--promo-h); left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 56px);
  transition: background .35s, backdrop-filter .35s, padding .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
nav.scrolled { background: rgba(12,10,9,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding-top: 15px; padding-bottom: 15px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.14em; font-size: 16px; }
.logo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow), 0 0 4px var(--cyan); animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:.55; transform:scale(.85);} 50%{opacity:1; transform:scale(1);} }
.logo b { color: #fff; }
.logo span { color: var(--cyan); }
.nav-right { display: flex; align-items: center; gap: 18px; }
.signin { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--line); transition: color .2s, border-color .2s, background .2s; white-space: nowrap; }
.signin:hover { color: #fff; border-color: var(--line-strong); background: rgba(255,255,255,0.03); }

/* ---------------- buttons ---------------- */
.g-btn {
  display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #1f2330;
  border: none; border-radius: 999px; padding: 15px 26px; font-family: var(--sans);
  font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none;
  transition: transform .18s, box-shadow .25s; box-shadow: 0 8px 30px rgba(0,0,0,0.45); white-space: nowrap;
  position: relative; overflow: hidden;
}
.g-btn::after { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); transform: skewX(-18deg); }
.g-btn:hover::after { animation: sheen .7s ease; }
@keyframes sheen { to { left: 140%; } }
.g-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(190,242,100,0.22), 0 8px 30px rgba(0,0,0,0.5); }
.g-btn:active { transform: translateY(0); }
.g-btn .g-mark { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; }
.g-btn.small { padding: 12px 20px; font-size: 14px; }
.g-btn.huge { padding: 19px 36px; font-size: 18px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 15px 24px;
  font-family: var(--sans); font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none;
  transition: background .2s, border-color .2s, transform .18s, color .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--cyan); color: #fff; transform: translateY(-2px); }

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(120px + var(--promo-h)) 20px 90px; position: relative; }

.robot {
  position: relative; width: clamp(150px, 22vw, 206px); height: clamp(150px, 22vw, 206px);
  margin: 0 auto 38px; border-radius: 24%;
  background: linear-gradient(160deg, #211d1a 0%, #161310 50%, #0d0b09 100%);
  box-shadow: 0 0 0 1px rgba(190,242,100,0.22), 0 0 38px rgba(190,242,100,0.16), 0 26px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -26px 46px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; gap: clamp(13px, 2.4vw, 22px);
  animation: float 4.6s ease-in-out infinite alternate;
}
/* pulsing aura behind hero robot */
.robot-wrap { position: relative; display: inline-block; }
.robot-wrap::before { content: ''; position: absolute; left: 50%; top: 48%; width: 150%; height: 150%;
  transform: translate(-50%,-50%); border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(190,242,100,0.22), rgba(255,92,56,0.08) 42%, transparent 68%);
  filter: blur(14px); animation: aura 4.6s ease-in-out infinite; }
@keyframes aura { 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.92);} 50%{ opacity:.95; transform:translate(-50%,-50%) scale(1.08);} }
@keyframes float { from { transform: translateY(-7px); } to { transform: translateY(9px); } }
.robot::before { content:''; position:absolute; inset:1px; border-radius:inherit; background: radial-gradient(120% 70% at 50% -15%, rgba(255,255,255,0.10), transparent 50%); pointer-events:none; }
.robot::after { content:''; position:absolute; left:50%; bottom:-7%; width:68%; height:18px; transform:translateX(-50%); background: radial-gradient(60% 100% at 50% 50%, rgba(0,0,0,0.5), transparent 75%); filter: blur(9px); z-index:-1; }
.eye { position: relative; width: clamp(40px,5.6vw,54px); height: clamp(50px,7vw,66px); transform-origin: center; transition: transform .16s cubic-bezier(.4,0,.2,1); will-change: transform; }
.lens { position: relative; display: block; width: 100%; height: 100%; border-radius: 38% / 32%;
  background: linear-gradient(180deg, #f4ffd6 0%, #d7f87f 24%, #bef264 72%, #8fc91e 100%);
  box-shadow: 0 0 14px rgba(190,242,100,0.38), 0 4px 10px rgba(30,42,0,0.4), inset 0 -7px 12px rgba(44,60,0,0.4), inset 0 5px 8px rgba(255,255,255,0.5); transform-origin: center; }
.lens::after { content:''; position:absolute; top:9%; left:50%; width:66%; height:26%; transform:translateX(-50%); border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0)); filter: blur(0.4px); }
.eye.blink .lens { animation: puf-blink .52s cubic-bezier(.5,1.6,.4,1); }
@keyframes puf-blink { 0%{transform:scaleY(1);} 32%{transform:scaleY(.1);} 58%{transform:scaleY(1.14);} 78%{transform:scaleY(.94);} 100%{transform:scaleY(1);} }
/* happy (curved) eyes for some sections */
.robot.happy .lens { border-radius: 50% 50% 14% 14% / 70% 70% 14% 14%; height: 70%; align-self: center; }

.robot-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.42em; color: var(--cyan); text-transform: uppercase; margin-bottom: 28px; }

.headline { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; font-size: clamp(44px, 8vw, 116px); margin-bottom: 28px; }
.headline .line { display: block; }
.headline .hl { color: var(--cyan); position: relative; }
.sub { max-width: 620px; color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.65; margin: 0 auto 38px; }
.sub b { color: var(--text); font-weight: 600; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; color: var(--muted-2); text-transform: uppercase; }
.scroll-cue .mouse { width: 22px; height: 34px; border: 1.5px solid var(--line-strong); border-radius: 12px; position: relative; }
.scroll-cue .mouse::after { content:''; position:absolute; top:6px; left:50%; width:3px; height:6px; border-radius:2px; background:var(--cyan); transform:translateX(-50%); animation: scroll-dot 1.8s ease-in-out infinite; }
@keyframes scroll-dot { 0%{opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 70%{opacity:1; transform:translate(-50%,10px);} 100%{opacity:0; transform:translate(-50%,12px);} }

/* ============================================================
   HERO ENTRANCE (plays when loader finishes -> body.entered)
   Default state is VISIBLE; animation uses 'both' to hide-then-reveal,
   so if it never runs the hero is still shown (fail-safe).
   ============================================================ */
body.entered .robot-wrap {
  animation: hero-pop 1s cubic-bezier(.2,.9,.25,1) .05s both;
}
@keyframes hero-pop {
  0% { opacity: 0; transform: translateY(10px) scale(.8); }
  60% { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
body.entered .hero .robot-label { animation: hero-up .8s cubic-bezier(.2,.9,.25,1) .42s both; }
body.entered .hero .headline .line { animation: hero-line 1s cubic-bezier(.2,.9,.25,1) both; }
body.entered .hero .headline .line:nth-child(1) { animation-delay: .5s; }
body.entered .hero .headline .line:nth-child(2) { animation-delay: .64s; }
body.entered .hero .headline .line:nth-child(3) { animation-delay: .78s; }
body.entered .hero .sub { animation: hero-up .9s ease .98s both; }
body.entered .hero .hero-cta { animation: hero-up .9s cubic-bezier(.2,.9,.25,1) 1.12s both; }
body.entered .hero .scroll-cue { animation: hero-fade 1s ease 1.5s both; }
@keyframes hero-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hero-line { from { opacity: 0; transform: translateY(46px); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
/* headline accent underline draw */
.headline .hl::after { content: ''; position: absolute; left: 0; bottom: .04em; height: .07em; width: 0;
  background: var(--cyan); border-radius: 2px; box-shadow: 0 0 18px var(--cyan-glow); }
body.entered .headline .hl::after { animation: hl-draw .7s cubic-bezier(.5,0,.2,1) 1.2s both; }
@keyframes hl-draw { to { width: 100%; } }

/* showcase card reveal stagger */
.show-card.c2 { transition-delay: .12s; }
.show-card.c3 { transition-delay: .24s; }

/* ============================================================
   REVEAL + SHELL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(42px); transition: opacity 1s cubic-bezier(.16,.84,.34,1), transform 1s cubic-bezier(.16,.84,.34,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

section.block { padding: clamp(90px, 14vh, 175px) 20px; position: relative; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--cyan); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.eyebrow::before { content:''; width: 28px; height: 1px; background: var(--cyan); opacity:.6; }
.sec-title { font-family: var(--display); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; font-size: clamp(32px, 5vw, 62px); }
.sec-title .hl { color: var(--cyan); }
.sec-lead { color: var(--muted); font-size: clamp(16px,1.7vw,18px); max-width: 560px; margin-top: 22px; line-height: 1.7; }

/* ============================================================
   MANIFESTO — word colorize on scroll
   ============================================================ */
.manifesto { position: relative; height: 230vh; }
.manifesto .pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.manifesto .mf-text { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.16; font-size: clamp(30px, 5.4vw, 78px); max-width: 1000px; text-align: center; }
.manifesto .w { color: rgba(255,255,255,0.13); transition: color .25s ease, text-shadow .25s ease; display: inline-block; }
.manifesto .w.lit { color: var(--text); }
.manifesto .w.cy { color: var(--cyan); text-shadow: 0 0 36px rgba(190,242,100,0.35); }
.manifesto .mf-tag { position: absolute; top: 14vh; left: 50%; transform: translateX(-50%); }

/* ============================================================
   HORIZONTAL PIN — How it works
   ============================================================ */
.hpin { position: relative; height: 360vh; }
.hpin .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hpin-head { position: absolute; top: clamp(80px, 12vh, 120px); left: clamp(20px,5vw,56px); z-index: 4; }
.hpin-progress { position: absolute; bottom: 42px; left: clamp(20px,5vw,56px); right: clamp(20px,5vw,56px); height: 2px; background: rgba(255,255,255,0.1); z-index: 4; }
.hpin-progress i { display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 10px var(--cyan-glow); }
.hpin-count { position:absolute; bottom: 56px; right: clamp(20px,5vw,56px); z-index:4; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.hpin-track { display: flex; height: 100%; will-change: transform; transform: translate3d(0,0,0); backface-visibility: hidden; }
.hpanel { flex: 0 0 100vw; height: 100%; display: flex; align-items: center; justify-content: center; padding: 120px clamp(28px,7vw,110px) 100px; gap: clamp(30px, 6vw, 90px); }
.hpanel .hp-text { flex: 1 1 0; max-width: 440px; }
.hpanel .hp-num { font-family: var(--display); font-weight: 800; font-size: clamp(70px,12vw,150px); line-height: .8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(190,242,100,0.55); margin-bottom: 22px; }
.hpanel .hp-text h3 { font-family: var(--display); font-weight: 700; font-size: clamp(28px,3.6vw,48px); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 18px; }
.hpanel .hp-text p { color: var(--muted); font-size: clamp(15px,1.5vw,18px); line-height: 1.7; }
.hpanel .hp-tag { display:inline-block; margin-top: 20px; font-family: var(--mono); font-size: 12px; color: var(--cyan); background: rgba(190,242,100,0.08); border: 1px solid rgba(190,242,100,0.25); border-radius: 7px; padding: 7px 13px; }
.hpanel .hp-visual { flex: 1 1 0; max-width: 560px; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   APP MOCKUPS ("images")
   ============================================================ */
.mock { width: 100%; border-radius: 16px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-strong); box-shadow: 0 40px 100px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.mock-bar .tl { display: flex; gap: 7px; }
.mock-bar .tl i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.mock-bar .tl i:nth-child(1){ background:#ff5f57; } .mock-bar .tl i:nth-child(2){ background:#febc2e; } .mock-bar .tl i:nth-child(3){ background:#28c840; }
.mock-bar .url { flex: 1; margin-left: 10px; height: 24px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.mock-body { display: grid; grid-template-columns: 92px 1fr; min-height: 280px; }
.mock-side { border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 11px; }
.mock-side i { height: 9px; border-radius: 4px; background: rgba(255,255,255,0.08); }
.mock-side i:nth-child(1){ width: 70%; } .mock-side i:nth-child(2){ width: 90%; } .mock-side i:nth-child(3){ width: 55%; }
.mock-side i.act { background: rgba(190,242,100,0.4); box-shadow: 0 0 10px var(--cyan-glow); width: 80%; }
.mock-main { padding: 22px; display: flex; flex-direction: column; gap: 13px; position: relative; }
.mock-main .row { height: 11px; border-radius: 5px; background: rgba(255,255,255,0.07); }
.mock-main .row.w1{ width: 85%; } .mock-main .row.w2{ width: 60%; } .mock-main .row.w3{ width: 72%; } .mock-main .row.w4{ width: 45%; }
.mock-btn { margin-top: 8px; align-self: flex-start; padding: 11px 22px; border-radius: 9px; background: rgba(255,255,255,0.06); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--muted); position: relative; }
/* spotlight ring on target */
.spotlight { position: relative; }
.spotlight::before { content:''; position:absolute; inset:-12px; border-radius: 16px; border: 2px solid var(--cyan); box-shadow: 0 0 0 6px rgba(190,242,100,0.12), 0 0 30px var(--cyan-glow); animation: spot-pulse 1.8s ease-in-out infinite; }
@keyframes spot-pulse { 0%,100%{ transform: scale(1); opacity:.9; } 50%{ transform: scale(1.06); opacity:.5; } }
.spot-cursor { position: absolute; right: 30px; bottom: 26px; width: 22px; height: 22px; }
.spot-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }

/* chat mockup */
.mock.chat .mock-body { display: block; min-height: 0; padding: 20px; }
.chat-msg { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-end; }
.chat-msg.me { flex-direction: row-reverse; }
.chat-ava { width: 34px; height: 34px; border-radius: 28%; flex: 0 0 auto; background: linear-gradient(160deg,#211d1a,#121010); display:flex; align-items:center; justify-content:center; gap:4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.chat-ava .ce { width: 5px; height: 9px; border-radius: 40%; background: linear-gradient(180deg,#f4ffd6,#bef264); box-shadow: 0 0 5px rgba(190,242,100,0.6); }
.chat-bub { max-width: 78%; padding: 12px 15px; border-radius: 15px; font-size: 14px; line-height: 1.5; }
.chat-msg.them .chat-bub { background: rgba(190,242,100,0.1); border: 1px solid rgba(190,242,100,0.25); border-bottom-left-radius: 5px; color: var(--text); }
.chat-msg.me .chat-bub { background: rgba(255,255,255,0.07); border: 1px solid var(--line); border-bottom-right-radius: 5px; color: var(--text); }
.chat-bub .mk { color: var(--cyan); font-weight: 600; }

/* ============================================================
   DEMO SHOWCASE (parallax stacked)
   ============================================================ */
section.showcase { position: relative; padding: clamp(40px,5.5vh,78px) 0 clamp(34px,5vh,60px); }
.show-stage { position: relative; width: min(1000px, 92vw); margin: 14px auto 0; height: clamp(300px, 40vw, 450px); }
.showcase .mock-body { min-height: 210px; }
.showcase .mock-main { padding: 18px; gap: 11px; }
.show-card.c1 { width: 56%; left: 2%; top: 2%; z-index: 2; }
.show-card.c2 { width: 39%; right: 0; top: 0; z-index: 3; }
.show-card.c3 { width: 33%; left: 15%; bottom: 2%; z-index: 4; }
.show-card { position: absolute; will-change: transform; backface-visibility: hidden; }
.float-badge { position: absolute; z-index: 5; background: rgba(10,16,26,0.92); border: 1px solid var(--line-strong); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); font-size: 13px; font-weight: 600; will-change: transform; }
.float-badge .fb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow); }
.float-badge.b1 { top: 4%; right: 6%; }
.float-badge.b2 { bottom: 10%; left: 0; }

/* clip reveal */
.clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.76,0,.24,1); }
.clip-reveal.in { clip-path: inset(0 0 0 0); }

/* ============================================================
   WHO IT'S FOR
   ============================================================ */
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.who-card { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px; position: relative; overflow: hidden; transition: border-color .3s, transform .3s; }
.who-card:hover { border-color: var(--line-strong); transform: translateY(-5px); }
.who-card::before { content:''; position:absolute; top:-40%; right:-30%; width:170px; height:170px; background: radial-gradient(circle, rgba(190,242,100,0.10), transparent 70%); opacity:0; transition: opacity .4s; }
.who-card:hover::before { opacity: 1; }
.who-quote { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--muted-2); margin-bottom: 18px; }
.who-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.who-card p { color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { display: flex; justify-content: center; }
.price-card { position: relative; width: min(560px, 92vw); background: radial-gradient(120% 90% at 50% -20%, rgba(190,242,100,0.14), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-strong); border-radius: 28px; padding: 52px 46px; text-align: center; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,0.55); }
.price-card .spot { position: absolute; top: -60%; left: 50%; width: 360px; height: 360px; transform: translateX(-50%); background: radial-gradient(circle, rgba(190,242,100,0.22), transparent 65%); pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.price-card.lit .spot { opacity: 1; }
.price-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--cyan); margin-bottom: 26px; }
.price-amount { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 6px; }
.price-amount .cur { font-family: var(--display); font-weight: 600; font-size: clamp(44px,8vw,72px); color: var(--muted); }
.price-amount .num { font-family: var(--display); font-weight: 800; letter-spacing: -0.045em; font-size: clamp(96px, 18vw, 168px); line-height: 0.85; color: #fff; text-shadow: 0 0 50px rgba(190,242,100,0.28); }
.price-amount .cents { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(32px, 5.5vw, 52px); color: #fff; align-self: flex-start; margin-top: clamp(8px, 2vw, 20px); }
.price-amount .per { font-family: var(--sans); font-size: 19px; color: var(--muted); font-weight: 500; align-self: flex-end; margin-bottom: 18px; }
.price-note { color: var(--muted); font-size: 14px; margin-bottom: 34px; }
.price-feats { list-style: none; text-align: left; max-width: 340px; margin: 0 auto 36px; display: flex; flex-direction: column; gap: 14px; }
.price-feats li { display: flex; align-items: center; gap: 14px; color: var(--text); font-size: 15.5px; }
.price-feats li .ck { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(190,242,100,0.12); border: 1px solid rgba(190,242,100,0.4); display: grid; place-items: center; color: var(--cyan); font-size: 12px; font-weight: 700; }

/* ============================================================
   FINAL + FOOTER
   ============================================================ */
.final { text-align: center; padding: clamp(110px, 18vh, 200px) 20px; position: relative; scroll-margin-top: calc(var(--promo-h) + 90px); }
.final .robot { margin-bottom: 30px; }
.final-title { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 7vw, 98px); line-height: 1.0; letter-spacing: -0.025em; margin-bottom: 26px; }
.final-title .hl { color: var(--cyan); }
.final-sub { color: var(--muted); font-size: clamp(16px,2vw,19px); max-width: 520px; margin: 0 auto 40px; line-height: 1.6; }
/* ---------------- privacy (black-box) ---------------- */
.privacy-sec { text-align: center; padding-top: clamp(50px, 8vh, 90px); }
.privacy-demo {
  margin: 38px auto 0; display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3vw, 30px); flex-wrap: wrap;
}
.privacy-field {
  display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 20px;
  font-family: var(--mono); font-size: 14px;
}
.privacy-label { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }
.privacy-value { color: var(--text); }
.privacy-box { display: inline-block; width: 150px; height: 16px; border-radius: 4px; background: #0b0e13; box-shadow: inset 0 0 0 1px var(--line-strong); }
.privacy-arrow { color: var(--cyan); font-size: 22px; font-weight: 700; }

/* ---------------- feedback ---------------- */
.feedback-sec { text-align: center; }
.feedback-form { width: min(640px, 92vw); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.feedback-form textarea {
  width: 100%; min-height: 130px; resize: vertical; padding: 18px 20px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
}
.feedback-form textarea:focus { outline: none; border-color: var(--cyan); }
.feedback-form textarea::placeholder { color: var(--muted-2); }
.feedback-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.feedback-status { color: var(--muted); font-size: 13.5px; }

footer { border-top: 1px solid var(--line); padding: 40px clamp(20px,5vw,56px); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; color: var(--muted-2); font-size: 13px; }
footer .foot-links { display: flex; gap: 24px; }
footer a { color: var(--muted); text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--cyan); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .hpanel { flex-direction: column; padding: 110px 26px 90px; gap: 28px; justify-content: center; }
  .hpanel .hp-visual { max-width: 90vw; }
  .hpanel .hp-num { font-size: 64px; }
  .show-stage { height: auto; display: flex; flex-direction: column; gap: 18px; }
  .show-card { position: relative !important; width: 100% !important; inset: auto !important; transform: none !important; }
  .float-badge { display: none; }
}
@media (max-width: 760px) {
  .who-grid { grid-template-columns: 1fr; }
  .nav-right .signin { display: none; }
  .promo-label { display: none; }
  .mock-body { grid-template-columns: 70px 1fr; }

  /* phone: turn the horizontal scroll-jack "How it works" into a clean
     vertical stack — no clipping, no scroll-jacking, full content visible.
     (transform:none !important overrides the JS-driven inline transform.) */
  .hpin { height: auto; padding: 78px 0 36px; }
  .hpin .pin { position: static; height: auto; overflow: visible; }
  .hpin-head { position: static; padding: 0 24px; margin-bottom: 18px; }
  .hpin-track { flex-direction: column; transform: none !important; height: auto; gap: 54px; will-change: auto; }
  .hpanel { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; padding: 8px 24px; gap: 22px; }
  .hpin-progress, .hpin-count { display: none; }
}

/* ============================================================
   DEMO VIDEO (16:9 landscape)
   ============================================================ */
.video-sec { text-align: center; }
.video-wrap {
  position: relative; width: min(900px, 92vw); aspect-ratio: 16 / 9;
  margin: 50px auto 0; border-radius: 26px; overflow: hidden; background: #000;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(190,242,100,0.14), 0 0 70px rgba(190,242,100,0.12);
}
.video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-play {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; cursor: pointer;
  border: none; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.18), rgba(0,0,0,0.5));
  transition: opacity .4s ease;
}
.video-wrap.playing .demo-play { opacity: 0; pointer-events: none; }
.demo-play .pbtn {
  position: relative; width: 78px; height: 78px; border-radius: 50%; background: var(--cyan);
  display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(190,242,100,0.16), 0 0 44px var(--cyan-glow);
  transition: transform .2s;
}
.demo-play:hover .pbtn { transform: scale(1.08); }
.demo-play .pbtn::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--cyan);
  opacity: .5; animation: demo-ring 2s ease-out infinite;
}
@keyframes demo-ring { 0%{ transform: scale(.9); opacity:.6; } 100%{ transform: scale(1.5); opacity:0; } }
.demo-play .pbtn svg { width: 30px; height: 30px; margin-left: 4px; fill: #0c0a09; }
.demo-cap { margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
  .reveal, .clip-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .manifesto .w { color: var(--text) !important; }
  .robot-wrap, .hero .robot-label, .hero .headline .line, .hero .sub, .hero .hero-cta, .hero .scroll-cue { opacity: 1 !important; transform: none !important; filter: none !important; }
  .headline .hl::after { width: 100% !important; }
  html { scroll-behavior: auto; }
}