/* =========================================================
   ZAPCALL — Premium animated landing page
   Dark-first sales cockpit. Neon green accent.
   ========================================================= */

:root{
  /* surfaces */
  --bg:        #050506;
  --bg-1:      #08090b;
  --panel:     #0e1013;
  --panel-2:   #14171b;
  --panel-3:   #1b1f24;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  /* ink */
  --ink:       #f3f6f5;
  --muted:     #9aa1a8;
  --muted-2:   #636a72;

  /* accents */
  --green:     #00ff87;
  --green-2:   #14f195;
  --green-deep:#00b35e;
  --blue:      #4d7cff;
  --violet:    #8b5cff;
  --cyan:      #45e6ff;
  --amber:     #ffb44d;

  --green-glow: rgba(0,255,135,.55);

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:   'DM Sans', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, monospace;

  --radius:   18px;
  --radius-l: 26px;
  --maxw: 1480px;
  --maxw-wide: 1900px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* page-wide ambient texture */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.05) 0, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity:.035;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
}
/* subtle grid */
body::after{
  content:"";
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
  pointer-events:none;
  z-index:0;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--green);color:#04130a}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}

/* ====== Typography helpers ====== */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--green);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--green),transparent)}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{display:none}

h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.section-title{font-size:clamp(30px,4.6vw,62px);margin:18px 0 16px}
.section-sub{font-size:clamp(16px,1.4vw,20px);color:var(--muted);max-width:62ch;text-wrap:pretty}
.grad-green{
  background:linear-gradient(120deg,#eafff5 0%, var(--green) 45%, var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ====== Buttons ====== */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:14px 24px;border-radius:13px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, color .3s;
  white-space:nowrap;will-change:transform;
}
.btn svg{width:17px;height:17px}
.btn-primary{
  background:linear-gradient(180deg,var(--green-2),var(--green-deep));
  color:#03140b;
  box-shadow:0 0 0 1px rgba(0,255,135,.5), 0 14px 40px -12px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(0,255,135,.7), 0 22px 60px -14px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.45)}
.btn-ghost{
  background:rgba(255,255,255,.03);
  color:var(--ink);
  border-color:var(--line-2);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{border-color:rgba(0,255,135,.5);background:rgba(0,255,135,.06)}
.btn-lg{padding:17px 30px;font-size:16px;border-radius:15px}

/* ====== Navigation ====== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .4s, border-color .4s, backdrop-filter .4s, padding .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(7,8,10,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:20px}
.brand .mark{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(150deg,#9a6bff,#5b2be0);
  box-shadow:0 0 22px -4px rgba(139,92,255,.7), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;
}
.brand .mark svg{width:20px;height:20px}
.brand small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--muted-2);font-weight:500}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  font-size:14.5px;color:var(--muted);padding:9px 14px;border-radius:9px;
  transition:color .2s, background .2s;font-weight:500;
}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer}
@media(max-width:940px){
  .nav-links{display:none}
  .nav-cta .btn:not(.nav-mobile-cta){display:none}
  .nav-burger{display:block}
}

/* ====== Sections shell ====== */
section{position:relative;padding:clamp(72px,9vw,140px) 0;z-index:2}
.section-head{max-width:760px}
.section-head.center{margin:0 auto;text-align:center}
.divider-glow{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);max-width:var(--maxw);margin:0 auto}

/* reveal — content is ALWAYS visible (no time-based hide).
   Entrance motion is intentionally omitted so content can never get
   stuck hidden if the animation clock is unavailable. */
.reveal{}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-top:160px;padding-bottom:80px;overflow:hidden}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 28px;position:relative;z-index:2}
#mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-glow{
  position:absolute;z-index:0;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;
}
.hero-glow.g1{width:620px;height:620px;background:radial-gradient(circle,rgba(0,255,135,.4),transparent 65%);top:-180px;left:-120px}
.hero-glow.g2{width:520px;height:520px;background:radial-gradient(circle,rgba(91,43,224,.4),transparent 65%);top:60px;right:-120px}

.hero-grid{display:grid;grid-template-columns:0.9fr 1.3fr;gap:54px;align-items:center}
@media(max-width:1080px){.hero-grid{grid-template-columns:1fr;gap:46px}}

.hero h1{font-size:clamp(36px,4vw,60px);font-weight:600;letter-spacing:-.03em}
.hero-sub{font-size:clamp(17px,1.5vw,21px);color:var(--muted);margin:26px 0 34px;max-width:54ch;text-wrap:pretty}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.pill-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:#cfe9dc;background:rgba(0,255,135,.07);border:1px solid rgba(0,255,135,.22);
  padding:7px 14px;border-radius:999px;margin-bottom:30px;
}
.pill-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

.trust{margin-top:40px}
.trust p{font-size:14.5px;color:var(--muted-2);margin-bottom:14px}
.trust-badges{display:flex;flex-wrap:wrap;gap:10px}
.tbadge{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  padding:7px 13px;border-radius:9px;display:inline-flex;gap:7px;align-items:center;
  transition:border-color .25s, color .25s;
}
.tbadge:hover{border-color:rgba(0,255,135,.4);color:var(--ink)}
.tbadge .d{width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ====== Hero cockpit stage ====== */
.cockpit{position:relative;height:min(720px,76vh);perspective:1600px;z-index:3}
.cockpit-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .2s ease-out}

.panel{
  position:absolute;
  background:linear-gradient(180deg, rgba(22,25,29,.92), rgba(11,13,16,.94));
  border:1px solid var(--line-2);
  border-radius:16px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  padding:14px;
  will-change:transform;
}
.panel .ph{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.panel .ph .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}
.panel .ph .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}

/* the main cockpit window */
.cp-main{
  left:11%;right:11%;top:7%;bottom:7%;
  background:linear-gradient(180deg,#0b0d10,#070809);
  border-radius:20px;border:1px solid var(--line-2);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;transform:translateZ(0);
}
.cp-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line)}
.cp-bar i{width:11px;height:11px;border-radius:50%;display:block}
.cp-bar i:nth-child(1){background:#ff5f57}.cp-bar i:nth-child(2){background:#febc2e}.cp-bar i:nth-child(3){background:#28c840}
.cp-bar .t{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--muted-2);letter-spacing:.1em}
.cp-body{display:grid;grid-template-columns:148px 1fr;height:calc(100% - 34px)}
.cp-side{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.cp-logo{display:flex;align-items:center;gap:9px;margin-bottom:14px;padding:0 4px}
.cp-logo .m{width:26px;height:26px;border-radius:8px;background:linear-gradient(150deg,#9a6bff,#5b2be0);display:grid;place-items:center}
.cp-logo .m svg{width:15px;height:15px}
.cp-logo b{font-family:var(--font-display);font-size:14px}
.cp-nav{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;font-size:12px;color:var(--muted)}
.cp-nav svg{width:14px;height:14px;opacity:.7}
.cp-nav.active{background:linear-gradient(90deg,rgba(0,255,135,.16),rgba(0,255,135,.04));color:var(--green);box-shadow:inset 2px 0 0 var(--green)}
.cp-nav.active svg{opacity:1}
.cp-content{padding:16px;overflow:hidden;position:relative}
.cp-kicker{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--muted-2);text-transform:uppercase}
.cp-h{font-family:var(--font-display);font-size:19px;margin:5px 0 14px}
.cp-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.cp-stat{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.cp-stat .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase}
.cp-stat .v{font-family:var(--font-display);font-size:24px;margin-top:4px}
.cp-stat .s{font-size:10px;color:var(--green);margin-top:2px}
.cp-cta{margin-top:11px;background:linear-gradient(180deg,var(--green-2),var(--green-deep));color:#04130b;font-weight:700;font-size:13px;text-align:center;padding:12px;border-radius:11px;box-shadow:0 12px 30px -10px var(--green-glow)}

/* floating mini cards */
.float{
  width:var(--fw,220px);
  animation:floaty var(--dur,7s) ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--fy,-12px))}}
@media (prefers-reduced-motion: reduce){.float{animation:none}}

.f-contact{top:5%;right:-5%;--fw:214px;--dur:8s;--fy:-14px;z-index:8}
.f-brief{display:none}
.f-call{bottom:9%;right:-6%;--fw:196px;--dur:7.5s;--fy:-10px;z-index:8}
.f-score{display:none}
.f-follow{bottom:4%;left:-5%;--fw:198px;--dur:7.2s;--fy:-9px;z-index:8}

@media(max-width:1080px){
  .cockpit{height:560px}
  .f-contact{right:-2%}.f-call{right:-2%}.f-follow{left:-2%}
}
@media(max-width:560px){
  .cockpit{height:480px}
  .f-contact{right:0}.f-follow{left:0}
}

/* contact mini */
.avatar{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-display);font-size:12px;font-weight:600;color:#04130b;background:linear-gradient(150deg,var(--green-2),var(--cyan))}
.f-contact .row{display:flex;gap:11px;align-items:center}
.f-contact .nm{font-weight:600;font-size:14px}
.f-contact .meta{font-size:11px;color:var(--muted);font-family:var(--font-mono)}
.f-contact .tags{display:flex;gap:6px;margin-top:11px}
.f-contact .tag{font-size:10px;font-family:var(--font-mono);color:var(--muted);border:1px solid var(--line);padding:4px 8px;border-radius:7px}

/* briefing mini */
.f-brief .line{display:flex;gap:8px;align-items:flex-start;margin-bottom:9px}
.f-brief .line:last-child{margin-bottom:0}
.f-brief .bk{font-family:var(--font-mono);font-size:9px;color:var(--violet);letter-spacing:.08em;min-width:54px;text-transform:uppercase;padding-top:1px}
.f-brief .bv{font-size:12px;color:#dfe4e8;line-height:1.4}
.ai-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--violet);background:rgba(139,92,255,.1);border:1px solid rgba(139,92,255,.3);padding:4px 8px;border-radius:7px;text-transform:uppercase}

/* call mini */
.f-call{background:linear-gradient(180deg,rgba(0,40,22,.85),rgba(7,13,10,.92));border-color:rgba(0,255,135,.3)}
.f-call .live{display:flex;align-items:center;gap:8px;font-size:12px}
.f-call .live .rec{width:9px;height:9px;border-radius:50%;background:#ff5f57;box-shadow:0 0 10px #ff5f57;animation:pulse 1.4s infinite}
.f-call .timer{font-family:var(--font-mono);font-size:22px;color:var(--green);margin-top:6px;letter-spacing:.05em}
.wave{display:flex;align-items:center;gap:3px;height:26px;margin-top:8px}
.wave span{width:3px;background:linear-gradient(var(--green),var(--cyan));border-radius:2px;animation:wv 1.1s ease-in-out infinite}
@keyframes wv{0%,100%{height:5px}50%{height:24px}}
@media (prefers-reduced-motion: reduce){.wave span{height:14px!important;animation:none}.f-call .live .rec{animation:none}}

/* score mini */
.f-score .ring-wrap{display:flex;align-items:center;gap:13px}
.ring{width:62px;height:62px;flex:0 0 auto}
.f-score .sv{font-family:var(--font-display);font-size:13px}
.f-score .sm{font-size:11px;color:var(--muted);font-family:var(--font-mono)}

/* follow mini */
.f-follow{background:linear-gradient(180deg,rgba(20,18,30,.9),rgba(9,9,13,.93));border-color:rgba(139,92,255,.26)}
.f-follow .row{display:flex;gap:10px;align-items:center}
.f-follow .cal{width:32px;height:32px;border-radius:9px;background:rgba(139,92,255,.16);border:1px solid rgba(139,92,255,.34);display:grid;place-items:center;font-family:var(--font-mono);color:var(--violet)}
.f-follow .cal b{font-size:13px;line-height:1}.f-follow .cal small{font-size:8px}
.f-follow .ft{font-weight:600;font-size:13px}
.f-follow .fm{font-size:11px;color:var(--muted);font-family:var(--font-mono)}

/* ============================================================
   MARQUEE / logos-ish strip
   ============================================================ */
.strip{padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.strip-track{display:flex;gap:60px;width:max-content;animation:marq 32s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.strip-track{animation:none}}
.strip-item{font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:12px;white-space:nowrap}
.strip-item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.5}

/* ============================================================
   SHARED LIVE APP WINDOW (real iframe → localhost)
   ============================================================ */
.app-window{position:relative;display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;
  border:1px solid var(--line-2);background:#050505;
  box-shadow:0 60px 150px -50px rgba(0,255,135,.30), 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);}
.app-window::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;box-shadow:inset 0 0 90px -26px var(--step-glow,rgba(0,255,135,.26));transition:box-shadow .6s;z-index:5}
.app-chrome{position:relative;z-index:6;height:46px;flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(8,9,11,.94)}
.app-chrome i{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.app-chrome i:nth-child(1){background:#ff5f57}.app-chrome i:nth-child(2){background:#febc2e}.app-chrome i:nth-child(3){background:#28c840}
.app-chrome .url{margin-left:12px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted-2);letter-spacing:.03em}
.app-chrome .step-tag{margin-left:auto;display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;color:var(--green);background:rgba(0,255,135,.08);border:1px solid rgba(0,255,135,.24);padding:6px 14px;border-radius:9px}
.app-chrome .step-tag .ld{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.6s infinite}
.app-stage{position:relative;flex:1;width:100%;overflow:hidden;background:#050505}
.app-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;display:block;background:#050505}
.app-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:1}
.poster-badge{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted);background:rgba(5,6,8,.8);border:1px solid var(--line-2);padding:8px 13px;border-radius:10px;backdrop-filter:blur(6px)}

/* hero app sizing */
.hero-app{width:100%;height:100%}

/* ============================================================
   JOURNEY — pinned, traveling live iframe
   ============================================================ */
.journey{position:relative;padding-top:clamp(70px,8vw,120px)}
.journey-intro{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.journey-intro .demo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.demo-hint{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:13px;color:var(--muted);border:1px solid var(--line-2);background:rgba(255,255,255,.02);padding:11px 16px;border-radius:11px}
.demo-hint .ld{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s infinite}

.journey-track{position:relative;height:1650vh}
.journey-pin{position:sticky;top:0;height:100vh;overflow:hidden;z-index:46}
.journey-pin::before{content:"";position:absolute;width:80vw;height:62vh;left:50%;top:54%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,255,135,.13),transparent 70%);filter:blur(70px);pointer-events:none;z-index:0}
.journey-frame{position:absolute;left:0;top:0;transform-origin:center center;z-index:3;will-change:transform;--demo-app-scale:.66;--demo-app-size:151.515%}
.journey-frame .app-window{height:100%}
.journey-frame .app-stage iframe{width:var(--demo-app-size);height:var(--demo-app-size);transform:scale(var(--demo-app-scale));transform-origin:top left}

.journey-caption{position:absolute;top:50%;width:min(27vw,400px);z-index:8;transform:translateY(-50%);pointer-events:none}
.journey-caption.side-left{left:5vw}
.journey-caption.side-right{right:5vw}
.journey-caption.side-top{top:13vh;left:50%;transform:translateX(-50%);width:min(62vw,820px);text-align:center}
.journey-caption.side-top .jc-k::after,.journey-caption.side-top .jc-k::before{display:none}
.journey-caption .jc-k{font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.journey-caption h3{font-family:var(--font-display);font-size:clamp(28px,2.6vw,46px);margin:14px 0 14px;letter-spacing:-.02em;line-height:1.04}
.journey-caption p{font-size:clamp(16px,1.2vw,19px);color:var(--muted);text-wrap:pretty}

.journey-ui{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(540px,80vw)}
.j-progress{width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.j-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 0 12px var(--green-glow)}
.j-dots{display:flex;gap:10px}
.j-dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16);border:0;cursor:pointer;padding:0;transition:all .3s}
.j-dots button.on{background:var(--green);box-shadow:0 0 10px var(--green-glow);transform:scale(1.3)}
.j-scrollcue{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:8px}
.j-scrollcue svg{animation:cuebob 2.2s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.journey-mobile{display:none}
@media (prefers-reduced-motion: reduce){.j-scrollcue svg{animation:none}}

/* MOBILE: drop the pin — static big iframe + tappable step list */
@media(max-width:980px){
  .journey-track{height:auto!important}
  .journey-pin{position:static;height:auto;overflow:visible;display:flex;flex-direction:column;gap:18px;padding:0 18px 10px}
  .journey-pin::before{display:none}
  .journey-frame{position:relative!important;transform:none!important;width:100%!important;height:auto!important;--demo-app-scale:.73;--demo-app-size:136.986%}
  .journey-frame .app-window{height:72vh}
  .journey-caption{display:none}
  .journey-ui{position:static;transform:none;width:100%}
  .j-scrollcue{display:none}
  .journey-mobile{display:flex;flex-direction:column;gap:8px}
  .jm-step{text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);cursor:pointer;color:var(--ink)}
  .jm-step.on{border-color:rgba(0,255,135,.4);background:rgba(0,255,135,.05)}
  .jm-step .jc-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
  .jm-step h4{font-family:var(--font-display);font-size:17px;margin-top:4px}
  .jm-step p{font-size:14px;color:var(--muted);margin-top:6px}
}

/* ============================================================
   PROBLEM
   ============================================================ */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
@media(max-width:900px){.pain-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pain-grid{grid-template-columns:1fr}}
.pain{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  position:relative;overflow:hidden;transition:border-color .3s, transform .3s;
}
.pain::before{content:"";position:absolute;inset:0;background:radial-gradient(120px 80px at var(--mx,50%) var(--my,0%),rgba(255,90,90,.08),transparent 70%);opacity:0;transition:opacity .3s}
.pain:hover{border-color:rgba(255,120,120,.3);transform:translateY(-3px)}
.pain:hover::before{opacity:1}
.pain .x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.24);color:#ff8d8d;margin-bottom:14px}
.pain p{font-size:15.5px;color:#d6dadf}
.pain .num{position:absolute;top:16px;right:18px;font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}

/* ============================================================
   WORKFLOW timeline
   ============================================================ */
.flow{position:relative}
.flow-rail{position:relative;margin-top:54px;padding-left:40px}
.flow-rail::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:var(--line-2)}
.flow-rail .fill{position:absolute;left:13px;top:6px;width:2px;background:linear-gradient(var(--green),var(--cyan));box-shadow:0 0 14px var(--green-glow);height:0;transition:height .2s linear}
.fstep{position:relative;padding:0 0 30px}
.fstep:last-child{padding-bottom:0}
.fnode{position:absolute;left:-40px;top:0;width:28px;height:28px;border-radius:50%;background:var(--panel-2);border:2px solid var(--line-2);display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;color:var(--muted-2);transition:all .4s;z-index:2}
.fstep.lit .fnode{border-color:var(--green);color:var(--green);background:rgba(0,255,135,.12);box-shadow:0 0 0 5px rgba(0,255,135,.08),0 0 18px var(--green-glow)}
.fcard{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  transition:border-color .4s, transform .4s, background .4s;
}
.fstep.lit .fcard{border-color:var(--line-2);transform:translateX(4px)}
.fcard h4{font-family:var(--font-display);font-size:18px;font-weight:600;display:flex;align-items:center;gap:10px}
.fcard h4 svg{width:18px;height:18px;color:var(--green)}
.fcard p{font-size:14.5px;color:var(--muted);margin-top:6px}

/* ============================================================
   FEATURE: split section with sticky visual
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev{direction:rtl}.split.rev>*{direction:ltr}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:34px}.split.rev{direction:ltr}}
.split .copy h2{font-size:clamp(28px,3.4vw,46px);margin:16px 0 16px}
.split .copy p{font-size:16.5px;color:var(--muted);text-wrap:pretty}
.microcopy{margin-top:22px;font-family:var(--font-mono);font-size:13px;color:var(--green);display:inline-flex;align-items:center;gap:10px}
.microcopy::before{content:"›";color:var(--green)}

/* generic glass card holding a UI mock */
.mock{
  background:linear-gradient(180deg,rgba(16,19,23,.9),rgba(8,9,11,.95));
  border:1px solid var(--line-2);border-radius:var(--radius-l);padding:20px;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
.mock-glow{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none}

/* Briefing big card */
.brief-card .bh{display:flex;align-items:center;gap:13px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.brief-card .bh .nm{font-family:var(--font-display);font-size:17px}
.brief-card .bh .mt{font-size:12px;color:var(--muted);font-family:var(--font-mono)}
.brief-row{display:flex;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)}
.brief-row:last-child{border-bottom:0}
.brief-row .bk{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);min-width:108px;padding-top:3px}
.brief-row .bv{font-size:14px;color:#e3e7eb;line-height:1.5}
.obj-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.obj{font-size:11px;font-family:var(--font-mono);color:var(--amber);background:rgba(255,180,77,.08);border:1px solid rgba(255,180,77,.26);padding:4px 9px;border-radius:7px}

/* ============================================================
   TRAINING
   ============================================================ */
.train-ui{display:flex;flex-direction:column;gap:12px}
.bubble{max-width:84%;padding:12px 15px;border-radius:14px;font-size:14px;line-height:1.5;opacity:0;transform:translateY(12px);animation:bub .5s forwards}
.bubble.ai{background:var(--panel-2);border:1px solid var(--line-2);border-bottom-left-radius:4px;align-self:flex-start}
.bubble.rep{background:linear-gradient(180deg,rgba(0,255,135,.14),rgba(0,255,135,.05));border:1px solid rgba(0,255,135,.3);border-bottom-right-radius:4px;align-self:flex-end;color:#dffaec}
.bubble .who{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px;display:block}
.bubble.objection{border-color:rgba(255,180,77,.4)}
.bubble.objection .who{color:var(--amber)}
@keyframes bub{to{opacity:1;transform:none}}
.feedback{
  margin-top:6px;background:linear-gradient(120deg,rgba(139,92,255,.12),rgba(77,124,255,.06));
  border:1px solid rgba(139,92,255,.34);border-radius:14px;padding:15px 16px;
}
.feedback .fh{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:11px}
.feedback ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.feedback li{font-size:13.5px;color:#dfe2e8;display:flex;gap:10px;line-height:1.45}
.feedback li .tk{flex:0 0 auto;margin-top:2px}
.train-mic{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;margin-top:4px}
.mic-btn{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(150deg,var(--green-2),var(--green-deep));color:#04130b;box-shadow:0 0 0 0 var(--green-glow);animation:micpulse 2.4s infinite}
@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(0,255,135,.4)}70%{box-shadow:0 0 0 16px rgba(0,255,135,0)}100%{box-shadow:0 0 0 0 rgba(0,255,135,0)}}
.wave-lg{display:flex;align-items:center;gap:4px;height:36px;flex:1}
.wave-lg span{flex:1;background:linear-gradient(var(--green),var(--cyan));border-radius:3px;animation:wv 1s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.mic-btn{animation:none}.wave-lg span{height:18px;animation:none}.bubble{opacity:1;transform:none;animation:none}}

/* ============================================================
   ANALYSE
   ============================================================ */
.analyse-ui{display:grid;grid-template-columns:1fr;gap:14px}
.score-hero{display:flex;align-items:center;gap:24px;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:22px 24px}
.ring-lg{width:118px;height:118px;flex:0 0 auto;position:relative}
.ring-lg .cv{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring-lg .cv b{font-family:var(--font-display);font-size:34px;line-height:1}
.ring-lg .cv small{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase}
.score-meta{flex:1;display:flex;flex-direction:column;gap:10px}
.score-meta .mrow{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.score-meta .mrow .k{color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.tag-pos{color:var(--green);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.an-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.an-2{grid-template-columns:1fr}}
.an-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.an-card .ah{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.an-card.pos .ah{color:var(--green)}.an-card.imp .ah{color:var(--amber)}
.an-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.an-card li{font-size:13px;color:#d8dce1;display:flex;gap:9px;line-height:1.4}
.an-card li .b{flex:0 0 auto;margin-top:6px;width:5px;height:5px;border-radius:50%}
.an-card.pos li .b{background:var(--green)}.an-card.imp li .b{background:var(--amber)}
.next-step{display:flex;align-items:center;gap:13px;background:linear-gradient(120deg,rgba(139,92,255,.14),rgba(77,124,255,.05));border:1px solid rgba(139,92,255,.32);border-radius:14px;padding:15px 18px}
.next-step .ic{width:38px;height:38px;border-radius:10px;background:rgba(139,92,255,.18);border:1px solid rgba(139,92,255,.34);display:grid;place-items:center;color:var(--violet);flex:0 0 auto}
.next-step .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.next-step .v{font-weight:600;font-size:15px;margin-top:2px}

/* ============================================================
   FEATURE GRID
   ============================================================ */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
@media(max-width:1080px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fcell{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  overflow:hidden;transition:transform .3s, border-color .3s;
}
.fcell::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,135,.14),transparent 70%);top:var(--my,-50%);left:var(--mx,50%);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;pointer-events:none}
.fcell:hover{transform:translateY(-4px);border-color:rgba(0,255,135,.3)}
.fcell:hover::after{opacity:1}
.fcell .fi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(0,255,135,.08);border:1px solid rgba(0,255,135,.22);color:var(--green);margin-bottom:15px}
.fcell h4{font-family:var(--font-display);font-size:16.5px;font-weight:600}
.fcell p{font-size:13.5px;color:var(--muted);margin-top:7px}
.fcell .idx{position:absolute;top:18px;right:20px;font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}
/* featured cell with moving border */
.fcell.feat{grid-column:span 2;background:linear-gradient(180deg,rgba(14,17,21,.95),rgba(8,9,11,.95))}
@media(max-width:520px){.fcell.feat{grid-column:span 1}}
.moving-border{position:relative}
.moving-border::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--ang,0deg),transparent 0%, var(--green) 12%, var(--cyan) 22%, transparent 35%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 5s linear infinite;
}
@keyframes spin{to{--ang:360deg}}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@media (prefers-reduced-motion: reduce){.moving-border::before{animation:none}}

/* ============================================================
   INTEGRATIONS
   ============================================================ */
.intg{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
@media(max-width:820px){.intg{grid-template-columns:1fr}}
.intg-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-l);padding:28px;position:relative;overflow:hidden}
.intg-card .logo{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;font-family:var(--font-display);font-weight:700}
.intg-card.hub .logo{background:rgba(255,122,89,.12);border:1px solid rgba(255,122,89,.3);color:#ff7a59}
.intg-card.cal .logo{background:rgba(77,124,255,.12);border:1px solid rgba(77,124,255,.32);color:#6f97ff}
.intg-card h3{font-family:var(--font-display);font-size:21px}
.intg-card p{font-size:14.5px;color:var(--muted);margin-top:10px}
.flowline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:54px;justify-content:center}
.flownode{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12.5px;color:#dfe3e7;background:var(--panel-2);border:1px solid var(--line-2);padding:11px 16px;border-radius:11px;position:relative}
.flownode .d{width:8px;height:8px;border-radius:50%}
.flowarrow{color:var(--muted-2);display:grid;place-items:center}
.flowarrow svg{width:22px;height:18px}
@media(max-width:640px){.flowline{flex-direction:column}.flowarrow{transform:rotate(90deg)}}

/* ============================================================
   PERSONAS
   ============================================================ */
.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
@media(max-width:980px){.persona-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.persona-grid{grid-template-columns:1fr}}
.persona{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .3s,border-color .3s}
.persona:hover{transform:translateY(-4px);border-color:var(--line-2)}
.persona .pico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line-2);margin-bottom:16px;color:var(--green)}
.persona .role{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.persona h4{font-family:var(--font-display);font-size:18px;margin:4px 0 10px}
.persona p{font-size:14px;color:var(--muted)}

/* ============================================================
   RESULTS / metrics
   ============================================================ */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
@media(max-width:820px){.metrics{grid-template-columns:1fr 1fr}}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:center;position:relative;overflow:hidden}
.metric .mv{font-family:var(--font-display);font-size:clamp(38px,5vw,58px);font-weight:600;line-height:1;background:linear-gradient(120deg,#fff,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.metric .ml{font-size:13.5px;color:var(--muted);margin-top:12px}
.outcome-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
@media(max-width:900px){.outcome-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.outcome-grid{grid-template-columns:1fr}}
.outcome{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:14px 15px;font-size:14px;color:#d8dce1}
.outcome .tk{flex:0 0 auto;color:var(--green)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:46px}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-l);padding:30px;position:relative}
.quote.big{background:linear-gradient(150deg,rgba(0,255,135,.07),rgba(14,17,21,.9))}
.quote .qm{font-family:var(--font-display);font-size:46px;color:var(--green);line-height:.5;opacity:.5}
.quote p{font-size:clamp(17px,2vw,22px);margin:18px 0 22px;line-height:1.45;text-wrap:pretty}
.quote.small p{font-size:15.5px}
.quote .by{display:flex;align-items:center;gap:11px}
.quote .by .av{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.quote .by .who{font-size:13px}
.quote .by .who b{font-family:var(--font-display)}
.quote .by .who span{display:block;color:var(--muted-2);font-family:var(--font-mono);font-size:11px}
.quote-note{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);position:absolute;top:18px;right:22px;letter-spacing:.08em}
.quote-stack{display:flex;flex-direction:column;gap:16px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:840px;margin:46px auto 0}
.qitem{border-bottom:1px solid var(--line)}
.qbtn{width:100%;text-align:left;background:none;border:0;color:var(--ink);cursor:pointer;
  padding:22px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--font-display);font-size:clamp(16px,2vw,20px);font-weight:500}
.qbtn .qi{flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .35s, background .3s, border-color .3s;color:var(--green)}
.qitem.open .qi{transform:rotate(45deg);background:rgba(0,255,135,.1);border-color:rgba(0,255,135,.4)}
.qans{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.qans p{padding:0 4px 24px;color:var(--muted);font-size:15.5px;max-width:70ch}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{position:relative;overflow:hidden;text-align:center}
.final .fglow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:760px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,135,.28),transparent 62%);filter:blur(70px);opacity:.7;pointer-events:none}
.final h2{font-size:clamp(34px,5.4vw,72px);position:relative}
.final p{font-size:clamp(16px,1.6vw,20px);color:var(--muted);max-width:60ch;margin:22px auto 36px;position:relative}
.final .hero-ctas{justify-content:center;position:relative}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line);padding:64px 0 40px;position:relative;z-index:2}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-brand{max-width:300px}
.foot-brand p{color:var(--muted);font-size:14px;margin-top:16px}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap}
.foot-col h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.foot-col a{display:block;color:var(--muted);font-size:14px;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--green)}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot-bottom p{font-size:13px;color:var(--muted-2)}
.foot-bottom .tagline{font-family:var(--font-display);color:var(--muted)}

/* scroll progress bar */
.progress-bar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--green),var(--cyan));z-index:70;width:0;box-shadow:0 0 10px var(--green-glow)}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:65;background:rgba(5,6,8,.96);backdrop-filter:blur(20px);display:none;flex-direction:column;padding:90px 28px 28px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--font-display);font-size:24px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.mobile-menu .btn{margin-top:24px;justify-content:center}
.mclose{position:absolute;top:24px;right:24px;background:none;border:0;color:var(--ink);cursor:pointer}