:root{
  --ink:#0B1114;
  --ink-2:#141C21;
  --line:#26323A;
  --paper:#F5F4EF;
  --white:#FFFFFF;
  --muted:#4A5459;
  --muted-dark:#A9B5BB;
  --soft-dark:#D3D9DB;
  --acc:#3CC6EA;
  --acc-ink:#0A6680;
  --radius:18px;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Source Sans 3',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:99}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:0 34px;border-radius:14px;background:var(--acc);color:var(--ink);font-family:var(--display);font-weight:800;font-size:20px;text-decoration:none;position:relative;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 10px 30px -10px var(--acc)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px var(--acc)}
.btn:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.btn svg{flex:none}
.btn--sm{min-height:44px;padding:0 18px;font-size:15px;border-radius:999px;box-shadow:none}
.btn--light{background:var(--white);color:var(--ink);box-shadow:none}
.btn--ink{background:var(--ink);color:var(--white);box-shadow:none}
.pulse::after{content:"";position:absolute;inset:-6px;border-radius:18px;border:2px solid var(--acc);opacity:0;animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{opacity:.7;transform:scale(.96)}100%{opacity:0;transform:scale(1.08)}}

/* Hero */
.hero{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.35;mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 70%)}
.hero::after{content:"";position:absolute;width:900px;height:900px;left:50%;top:-520px;transform:translateX(-50%);background:radial-gradient(circle,var(--acc) 0%,transparent 60%);opacity:.16;pointer-events:none}
.hero > *{position:relative;z-index:1}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none}
.hero-copy{max-width:980px;margin:0 auto;padding:56px 0 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft-dark);background:rgba(255,255,255,.03)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
h1{font-family:var(--display);font-weight:900;font-size:clamp(40px,7.2vw,96px);line-height:.96;letter-spacing:-.04em;text-wrap:balance}
h1 em{font-style:normal;color:var(--acc)}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--soft-dark);max-width:690px}
.fine{font-size:15px;color:var(--muted-dark)}
.hero-demo{max-width:1080px;margin:0 auto;padding:16px 0 80px}

/* Demo player */
.player{background:#05090B;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 40px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02)}
.player-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted-dark)}
.player-top .live{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft-dark)}
.player-top .live i{width:8px;height:8px;border-radius:50%;background:#FF5A5A;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.stage{position:relative;aspect-ratio:16/9;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;padding:32px 48px;overflow:hidden}
.stage::before{content:"";position:absolute;right:-10%;top:-30%;width:70%;height:160%;background:radial-gradient(circle,var(--acc) 0%,transparent 55%);opacity:.10}
.caption{position:relative;display:flex;flex-direction:column;gap:14px}
.caption .step{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.caption .big{font-family:var(--display);font-weight:900;font-size:clamp(28px,4.2vw,56px);line-height:1;letter-spacing:-.03em;color:var(--white)}
.caption .small{font-size:clamp(15px,1.6vw,20px);line-height:1.4;color:var(--soft-dark);max-width:420px}
.fade{animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.phone{position:relative;justify-self:center;width:min(270px,100%);aspect-ratio:9/18.5;background:#000;border-radius:38px;padding:10px;box-shadow:0 0 0 2px #2A3439,0 30px 60px -20px rgba(0,0,0,.8)}
.screen{position:relative;height:100%;border-radius:30px;overflow:hidden;background:#0F1619;color:var(--white);display:flex;flex-direction:column;font-size:13px}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:12px;background:#000;z-index:3}
.sbar{display:flex;justify-content:space-between;padding:12px 22px 6px;font-size:11px;font-weight:700;color:#C9D2D6}

/* Incoming call */
.incoming{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:36px 18px 34px;background:linear-gradient(180deg,#1B262C,#0F1619)}
.incoming .who{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.avatar{width:72px;height:72px;border-radius:50%;background:#2A3840;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:26px;position:relative}
.avatar.ringing::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--acc);animation:ring 1.4s ease-out infinite}
.incoming .name{font-family:var(--display);font-weight:800;font-size:20px}
.incoming .sub{color:#9FB0B7;font-size:12px}
.callbtns{display:flex;gap:56px}
.callbtns .no,.callbtns .yes{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.callbtns .no{background:#E5484D}.callbtns .yes{background:#30A46C}
.ai-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--acc);color:var(--ink);font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase}

/* Live call transcript */
.callhead{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #22303A}
.callhead .t{font-weight:700;font-size:13px}.callhead .s{font-size:11px;color:#9FB0B7}
.wave{display:flex;gap:2px;align-items:center;height:18px;margin-left:auto}
.wave b{width:3px;border-radius:2px;background:var(--acc);animation:wave 0.9s ease-in-out infinite}
.wave b:nth-child(2){animation-delay:.1s}.wave b:nth-child(3){animation-delay:.2s}.wave b:nth-child(4){animation-delay:.3s}.wave b:nth-child(5){animation-delay:.4s}
@keyframes wave{0%,100%{height:4px}50%{height:16px}}
.thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px;overflow:hidden}
.msg{max-width:84%;padding:8px 11px;border-radius:14px;line-height:1.35;animation:pop .35s ease both}
.msg.them{align-self:flex-start;background:#22303A;border-bottom-left-radius:4px}
.msg.us{align-self:flex-end;background:var(--acc);color:var(--ink);font-weight:600;border-bottom-right-radius:4px}
.msg .lbl{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.sep{align-self:center;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7E9098;animation:pop .3s ease both}
.typing{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;background:#22303A;border-radius:14px}
.typing.us{align-self:flex-end;background:var(--acc)}
.typing i{width:6px;height:6px;border-radius:50%;background:#9FB0B7;animation:dots 1s infinite}
.typing.us i{background:var(--ink)}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* Notification cards */
.notifs{flex:1;display:flex;flex-direction:column;gap:10px;padding:26px 12px;background:radial-gradient(circle at 50% 0%,#1E2B32,#0F1619 70%)}
.clock{text-align:center;font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:-.02em;margin:6px 0 10px}
.date{text-align:center;color:#9FB0B7;font-size:12px;margin-top:-12px;margin-bottom:6px}
.notif{background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:10px 12px;display:flex;gap:10px;animation:slide .45s ease both}
.notif .ic{flex:none;width:30px;height:30px;border-radius:8px;background:var(--acc);display:flex;align-items:center;justify-content:center}
.notif .h{font-weight:800;font-size:12px}.notif .b{font-size:12px;color:#C9D2D6;line-height:1.3}
@keyframes slide{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* Email */
.mail{flex:1;display:flex;flex-direction:column;background:#F7F8F8;color:#10161A}
.mail .bar{padding:10px 14px;font-weight:800;font-size:15px;border-bottom:1px solid #E1E4E5;font-family:var(--display)}
.mailrow{padding:10px 14px;border-bottom:1px solid #E9EBEC;animation:pop .35s ease both}
.mailrow .f{display:flex;justify-content:space-between;font-weight:800;font-size:12px}
.mailrow .f span{font-weight:600;color:#5E6A70}
.mailrow .s{font-size:12px;font-weight:600}.mailrow .p{font-size:11px;color:#5E6A70}
.mailrow.new{background:#FFFFFF;border-left:3px solid var(--acc-ink)}
.chip{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:999px;background:var(--acc);color:var(--ink);font-size:10px;font-weight:800}

/* Progress */
.player-bot{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line)}
.pp{width:40px;height:40px;border-radius:50%;border:0;background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.pp:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.track{flex:1;height:6px;border-radius:3px;background:#1E2A30;overflow:hidden;display:flex;gap:3px}
.track span{flex:1;background:#2A3840;border-radius:3px;position:relative;overflow:hidden}
.track span i{position:absolute;inset:0;width:0;background:var(--acc)}
.time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted-dark);min-width:84px;text-align:right}

/* End card */
.endcard{grid-column:1/-1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.endcard .big{font-size:clamp(30px,5vw,64px)}

/* Sections */
section{padding:88px 0}
.dark{background:var(--ink);color:var(--white)}
.kicker{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-ink)}
.dark .kicker{color:var(--acc)}
h2{font-family:var(--display);font-weight:900;font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;max-width:820px}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pain{border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.pain .when{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.02em}
.pain p{color:var(--soft-dark);font-size:18px}
.pain .x{width:34px;height:34px;border-radius:10px;background:rgba(229,72,77,.14);display:flex;align-items:center;justify-content:center}

.calc{background:var(--white);border:1px solid #DCDDD6;border-radius:26px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
input{font:inherit;font-size:17px;padding:12px 14px;border:1px solid #C3C6C0;border-radius:10px;background:#fff;color:var(--ink);width:100%;min-height:50px}
input:focus{outline:2px solid var(--ink);outline-offset:1px}
.result{background:var(--ink);color:var(--white);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:10px}
.result .num{font-family:var(--display);font-weight:900;font-size:clamp(46px,5.4vw,68px);line-height:1;letter-spacing:-.03em;color:var(--acc)}
.result .btn{margin-top:14px;min-height:58px;font-size:18px;width:100%;padding:0 18px;white-space:nowrap}
.note{font-size:14px;color:var(--muted);margin-top:12px}

.outs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.out{border-top:3px solid var(--acc-ink);padding-top:20px;display:flex;flex-direction:column;gap:8px}
.out h3{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.01em}
.out p{color:var(--muted);font-size:17px}
.proof{margin-top:44px;display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:var(--radius);background:var(--white);border:1px solid #DCDDD6}
.proof b{font-family:var(--display)}
.proof .ph{color:var(--muted)}

.final{background:var(--ink);color:var(--white);text-align:center;position:relative;overflow:hidden}
.final::after{content:"";position:absolute;width:800px;height:800px;left:50%;bottom:-560px;transform:translateX(-50%);background:radial-gradient(circle,var(--acc) 0%,transparent 60%);opacity:.22;pointer-events:none}
.final .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px}
.final h2{font-size:clamp(36px,6vw,76px)}
.final h2 em{font-style:normal;color:var(--acc)}

footer{padding:28px 0 100px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;transform:translateY(140%);transition:transform .25s ease}
.sticky.show{transform:none}
.sticky .btn{width:100%;min-height:56px;font-size:18px}

/* Responsive */
@media (max-width:860px){
  .stage{grid-template-columns:1fr;aspect-ratio:auto;padding:24px 18px 26px;gap:20px}
  .caption{text-align:center;align-items:center;min-height:150px}
  .phone{width:220px}
  .pains,.outs,.fields{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .sticky{display:block}
  .nav .btn--sm{display:none}
  section{padding:64px 0}
  .hero-copy{padding-top:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Real screenshot scenes */
.real-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(48,164,108,.16);border:1px solid rgba(48,164,108,.45);color:#7EE2AE;font-size:12px;font-weight:700;letter-spacing:.04em}
.real-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:#30A46C}
.shot{position:relative;margin:0;justify-self:center;width:min(440px,100%);background:#11181C;border:1px solid #2A3439;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -25px rgba(0,0,0,.9),0 0 0 6px rgba(255,255,255,.02);animation:shotIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes shotIn{from{opacity:0;transform:translateY(18px) scale(.97) rotate(-1deg)}to{opacity:1;transform:none}}
.shot-top{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #2A3439;font-size:12px;color:#9FB0B7}
.shot-app{font-weight:800;color:#E6ECEE;letter-spacing:.02em}
.shot-win{position:relative;overflow:hidden}
.shot-win img{width:100%;height:auto}
.shot--pan .shot-win{height:min(420px,52vw)}
@keyframes pan{from{transform:translateY(0)}to{transform:translateY(calc(-100% + min(420px,52vw)))}}
.shot-hl{position:absolute;left:3%;right:3%;border-radius:14px;box-shadow:0 0 0 3px var(--acc),0 0 30px 4px var(--acc);opacity:0;animation:hl .6s ease 1.6s both}
@keyframes hl{to{opacity:1}}
@media (max-width:860px){.shot{width:min(360px,100%)}.shot--pan .shot-win{height:340px}@keyframes pan{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 340px))}}.caption .real-chip{align-self:center}}

/* Sound */
.player{position:relative}
.tap-sound{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--white);color:var(--ink);font-family:var(--display);font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 12px 30px -8px rgba(0,0,0,.7);animation:tapPulse 2.2s ease-in-out infinite}
.tap-sound[hidden]{display:none}
.tap-sound:focus-visible,.mute:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
@keyframes tapPulse{0%,100%{box-shadow:0 12px 30px -8px rgba(0,0,0,.7),0 0 0 0 rgba(255,255,255,.35)}50%{box-shadow:0 12px 30px -8px rgba(0,0,0,.7),0 0 0 10px rgba(255,255,255,0)}}
.mute{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
@media (max-width:860px){.tap-sound{bottom:76px}.time{min-width:0}}
.real-chip--example{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#D3D9DB}
.real-chip--example::before{background:var(--acc)}

/* Camera moves: whip in, settle, then push in on the key detail */
.cam{position:relative;justify-self:center;display:flex;justify-content:center;width:100%;transform-origin:var(--fx,50%) var(--fy,50%);will-change:transform}
@keyframes cam{
  0%{transform:translateX(80px) scale(.9) rotate(1.5deg);filter:blur(10px);opacity:0}
  9%{transform:none;filter:none;opacity:1}
  40%{transform:scale(1.02)}
  68%,100%{transform:scale(var(--fs,1.12))}
}
.caption .big{animation:punch .55s cubic-bezier(.2,.9,.25,1.2) both}
.caption .step{animation:fadeUp .35s ease both}
.caption .small{animation:fadeUp .5s .15s ease both}
@keyframes punch{0%{opacity:0;transform:scale(1.18);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
.stage{transition:none}
.stage::after{content:"";position:absolute;inset:0;background:var(--acc);opacity:0;pointer-events:none}
.stage.cut::after{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:.10}100%{opacity:0}}

/* Real results */
.proofbox{margin-top:48px;background:var(--ink);color:var(--white);border-radius:26px;padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.proofbox::after{content:"";position:absolute;right:-180px;top:-220px;width:520px;height:520px;background:radial-gradient(circle,var(--acc) 0%,transparent 62%);opacity:.18;pointer-events:none}
.proofbox .kicker{color:var(--acc)}
.proofbox h3{font-family:var(--display);font-weight:900;font-size:clamp(26px,3.4vw,40px);line-height:1.05;letter-spacing:-.02em;max-width:760px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px;position:relative;z-index:1}
.stat{border:1px solid var(--line);border-radius:18px;padding:22px;background:rgba(255,255,255,.03)}
.stat-n{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,62px);line-height:1;letter-spacing:-.03em;color:var(--acc)}
.stat-l{margin-top:8px;color:var(--soft-dark);font-size:17px}
.proof-note{color:var(--muted-dark);font-size:15px;max-width:820px;position:relative;z-index:1}
@media (max-width:860px){.stats{grid-template-columns:1fr}}