/* nad.css — Nathan Avery Dev design system (single source of truth).
   Extracted from the homepage. Edit HERE to restyle the whole site; every page links this file.
   Component classes (.phone, .ba, .calc) are inert on pages that don't include their markup. */
:root{
    --bg:#0b0d12;
    --bg-2:#0e1117;
    --panel:#12161f;
    --panel-2:#161b26;
    --ink:#f4f6fb;
    --ink-soft:#c7cedd;
    --muted:#8b94a8;
    --line:rgba(255,255,255,.09);
    --line-2:rgba(255,255,255,.14);
    --brand:#ff7a18;
    --brand-2:#ff9d4d;
    --brand-deep:#e8590c;
    --accent:#38e0b0;
    --accent-2:#21c2ff;
    --good:#3ddc84;
    --radius:18px;
    --radius-lg:26px;
    --shadow:0 30px 80px -30px rgba(0,0,0,.85);
    --shadow-brand:0 18px 50px -16px rgba(255,122,24,.55);
    --maxw:1200px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --font-display:"Space Grotesk", system-ui, sans-serif;
    --font-body:"Inter", system-ui, -apple-system, sans-serif;
    --font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }

  *{box-sizing:border-box}
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:clamp(15px,1.05vw,17px);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  body::before{
    /* ambient mesh + grain backdrop */
    content:"";
    position:fixed; inset:0; z-index:-2;
    background:
      radial-gradient(60% 50% at 78% 0%, rgba(255,122,24,.16), transparent 60%),
      radial-gradient(55% 45% at 8% 12%, rgba(33,194,255,.10), transparent 60%),
      radial-gradient(70% 60% at 50% 110%, rgba(56,224,176,.08), transparent 60%),
      var(--bg);
  }
  body::after{
    content:"";
    position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/></svg>");
    mix-blend-mode:overlay;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  button{font-family:inherit;cursor:pointer}
  ::selection{background:var(--brand);color:#1a1207}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--brand-2);
    display:inline-flex; align-items:center; gap:.55rem;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--brand),transparent)}

  h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-.02em;margin:0}
  h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
  h3{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.01em}
  p{margin:0 0 1rem}
  .lead{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--ink-soft);line-height:1.55}
  .muted{color:var(--muted)}

  /* ---------- Buttons ---------- */
  .btn{
    --bw:0;
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    min-height:52px; padding:0 1.45rem; border-radius:999px;
    font-weight:600; font-size:.98rem; letter-spacing:-.01em;
    border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
    will-change:transform;
  }
  .btn svg{width:18px;height:18px;flex:none}
  .btn-primary{
    color:#190f04; background:linear-gradient(180deg,var(--brand-2),var(--brand)); box-shadow:var(--shadow-brand);
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 26px 60px -16px rgba(255,122,24,.7)}
  .btn-primary:active{transform:translateY(-1px)}
  .btn-ghost{color:var(--ink);background:rgba(255,255,255,.04);border-color:var(--line-2);backdrop-filter:blur(8px)}
  .btn-ghost:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08)}
  .btn-call{
    color:var(--ink);background:rgba(56,224,176,.08);border-color:rgba(56,224,176,.35);
  }
  .btn-call:hover{transform:translateY(-3px);border-color:rgba(56,224,176,.6);background:rgba(56,224,176,.14)}
  .btn-sm{min-height:44px;padding:0 1.1rem;font-size:.9rem}
  .btn-block{width:100%}

  .pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--good);position:relative;flex:none}
  .pulse-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--good);opacity:.6;animation:pulse 1.8s var(--ease) infinite}
  @keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}

  /* ---------- Header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:60;
    transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(11,13,18,.72);
    backdrop-filter:saturate(160%) blur(14px);
    border-bottom-color:var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem}
  .brand{display:flex;align-items:center;gap:.65rem;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
  .brand .mark{
    width:34px;height:34px;border-radius:10px;flex:none;
    background:linear-gradient(145deg,var(--brand-2),var(--brand-deep));
    display:grid;place-items:center;color:#190f04;font-weight:700;
    box-shadow:0 8px 22px -8px rgba(255,122,24,.8);
  }
  .brand small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.62rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:1px}
  .nav-links{display:flex;align-items:center;gap:1.6rem}
  .nav-links a{font-size:.92rem;color:var(--ink-soft);font-weight:500;transition:color .2s;position:relative}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;background:var(--brand);transition:right .25s var(--ease)}
  .nav-links a:hover::after{right:0}
  .nav-cta{display:flex;align-items:center;gap:.6rem}
  .hamburger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink);align-items:center;justify-content:center}
  .hamburger svg{width:22px;height:22px}

  /* ---------- Hero ---------- */
  .hero{position:relative;padding:calc(72px + clamp(28px,6vw,72px)) 0 clamp(40px,6vw,80px);overflow:hidden}
  #hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
  .hero .wrap{position:relative;z-index:2}
  .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,56px);align-items:center}
  .hero-copy{max-width:620px}
  .hero h1{font-size:clamp(2.4rem,6vw,4.4rem);margin:.9rem 0 0}
  .hero h1 .accent{
    background:linear-gradient(120deg,var(--brand-2),var(--brand) 55%,var(--brand-deep));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero .lead{margin-top:1.2rem;max-width:540px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}
  .hero-note{display:flex;flex-wrap:wrap;gap:1.1rem 1.4rem;margin-top:1.5rem;font-size:.86rem;color:var(--muted)}
  .hero-note span{display:inline-flex;align-items:center;gap:.45rem}
  .hero-note svg{width:16px;height:16px;color:var(--accent)}

  /* ---------- Phone demo ---------- */
  .demo-stage{position:relative;display:flex;justify-content:center;perspective:1400px}
  .phone{
    position:relative;width:min(330px,82vw);aspect-ratio:9/19.2;border-radius:44px;
    background:linear-gradient(170deg,#1b212e,#0c0f16);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:var(--shadow),0 0 0 8px rgba(255,255,255,.02), inset 0 1px 0 rgba(255,255,255,.08);
    padding:13px;
    transform:rotateY(-12deg) rotateX(4deg) rotateZ(.5deg);
    transition:transform .6s var(--ease);
    will-change:transform;
  }
  .demo-stage:hover .phone{transform:rotateY(-6deg) rotateX(2deg)}
  .phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:92px;height:24px;background:#05070b;border-radius:14px;z-index:5}
  .phone-screen{
    position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;
    background:radial-gradient(120% 80% at 50% 0%, #14202a, #0a0e15 60%);
    display:flex;flex-direction:column;
  }
  .status-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 6px;font-size:.7rem;color:var(--ink-soft);font-family:var(--font-mono)}
  .status-bar .dots{display:flex;gap:3px}
  .status-bar .dots i{width:4px;height:4px;border-radius:50%;background:var(--ink-soft);display:block}

  /* incoming call screen */
  .call-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:30px;text-align:center;background:radial-gradient(100% 70% at 50% 20%, rgba(255,122,24,.16), transparent 60%);transition:opacity .5s var(--ease), transform .5s var(--ease);z-index:4}
  .call-screen.hide{opacity:0;transform:scale(1.05);pointer-events:none}
  .call-avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(145deg,var(--panel-2),#0c1018);border:1px solid var(--line-2);display:grid;place-items:center;margin-bottom:.4rem;position:relative}
  .call-avatar svg{width:38px;height:38px;color:var(--brand-2)}
  .call-avatar::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,122,24,.4);animation:pulse 1.8s var(--ease) infinite}
  .call-from{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-family:var(--font-mono)}
  .call-name{font-family:var(--font-display);font-size:1.25rem;font-weight:600}
  .call-sub{font-size:.8rem;color:var(--ink-soft)}
  .call-actions{display:flex;gap:2.4rem;margin-top:1.6rem}
  .call-btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:none}
  .call-btn svg{width:26px;height:26px;color:#fff}
  .call-btn.decline{background:#e5484d}
  .call-btn.answer{background:var(--good);animation:answerPulse 1.4s ease-in-out infinite}
  @keyframes answerPulse{0%,100%{box-shadow:0 0 0 0 rgba(61,220,132,.5)}50%{box-shadow:0 0 0 12px rgba(61,220,132,0)}}

  /* transcript screen */
  .chat-head{display:flex;align-items:center;gap:.7rem;padding:10px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
  .chat-head .ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,var(--brand-2),var(--brand-deep));display:grid;place-items:center;color:#190f04;flex:none}
  .chat-head .ava svg{width:18px;height:18px}
  .chat-head .meta{line-height:1.2;min-width:0}
  .chat-head .meta b{font-size:.86rem;display:block}
  .chat-head .meta span{font-size:.68rem;color:var(--good);display:inline-flex;align-items:center;gap:.3rem}
  .chat-head .timer{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
  .chat{flex:1;overflow:hidden;padding:14px 14px 8px;display:flex;flex-direction:column;gap:9px;mask-image:linear-gradient(180deg,transparent,#000 24px)}
  .bubble{max-width:82%;padding:9px 13px;border-radius:16px;font-size:.83rem;line-height:1.45;opacity:0;transform:translateY(8px);animation:rise .4s var(--ease) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .bubble.ai{align-self:flex-start;background:linear-gradient(180deg,rgba(255,122,24,.16),rgba(255,122,24,.08));border:1px solid rgba(255,122,24,.22);border-bottom-left-radius:5px;color:#ffe9d6}
  .bubble.caller{align-self:flex-end;background:rgba(255,255,255,.07);border:1px solid var(--line-2);border-bottom-right-radius:5px;color:var(--ink)}
  .bubble .who{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:2px}
  .typing{display:inline-flex;gap:3px;padding:4px 2px}
  .typing i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;animation:typedot 1.2s infinite}
  .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
  @keyframes typedot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

  /* captured lead card slides up at end */
  .lead-card{margin:4px 8px 0;padding:11px 13px;border-radius:14px;background:linear-gradient(180deg,rgba(56,224,176,.14),rgba(56,224,176,.06));border:1px solid rgba(56,224,176,.3);font-size:.78rem;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s}
  .lead-card.show{opacity:1;transform:none}
  .lead-card .lh{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
  .lead-card .lh svg{width:13px;height:13px}
  .lead-card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0}
  .lead-card dt{color:var(--muted)}
  .lead-card dd{margin:0;color:var(--ink);font-weight:500;text-align:right}
  .lead-card .emg{color:#ff8f6b;font-weight:600}
  .chat-foot{padding:8px 12px 12px;text-align:center}
  .chat-foot .real{font-size:.72rem;color:var(--muted)}

  .demo-cap{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);z-index:6}
  .demo-replay{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(11,13,18,.8);border:1px solid var(--line-2);padding:.45rem .8rem;border-radius:999px;backdrop-filter:blur(8px);transition:color .2s,border-color .2s}
  .demo-replay:hover{color:var(--ink);border-color:var(--line-2)}
  .demo-replay svg{width:13px;height:13px}

  .hear-it{margin-top:1.7rem;display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;border-radius:16px;background:linear-gradient(120deg,rgba(56,224,176,.1),rgba(33,194,255,.06));border:1px solid rgba(56,224,176,.25)}
  .hear-it .pulse-dot{margin-top:2px}
  .hear-it p{margin:0;font-size:.9rem;color:var(--ink-soft)}
  .hear-it a{color:var(--accent);font-weight:600;white-space:nowrap}

  /* ---------- Section scaffolding ---------- */
  section{position:relative;padding:clamp(56px,9vw,120px) 0}
  .sec-head{max-width:680px;margin-bottom:clamp(32px,5vw,56px)}
  .sec-head h2{margin-top:.8rem}
  .sec-head p{margin-top:1rem}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

  /* ---------- Before/After slider ---------- */
  .ba-section{background:linear-gradient(180deg,transparent, rgba(255,255,255,.015) 40%, transparent)}
  .ba{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#0a0d13;aspect-ratio:16/10;max-height:620px;user-select:none;touch-action:pan-y}
  .ba-pane{position:absolute;inset:0;overflow:hidden}
  .ba-after{z-index:1}
  .ba-before{z-index:2;width:50%;border-right:2px solid rgba(255,255,255,.85)}
  .ba-site{position:absolute;inset:0;height:100%;width:100%;}
  .ba-inner{width:min(900px,100%);height:100%;}
  /* tag chips */
  .ba-tag{position:absolute;top:16px;z-index:4;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .7rem;border-radius:999px;backdrop-filter:blur(6px)}
  .ba-tag.before{left:16px;background:rgba(229,72,77,.18);border:1px solid rgba(229,72,77,.4);color:#ffb3b3}
  .ba-tag.after{right:16px;background:rgba(56,224,176,.16);border:1px solid rgba(56,224,176,.4);color:#9af5d9}
  .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%);z-index:5;cursor:ew-resize;display:flex;align-items:center;justify-content:center}
  .ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.85);box-shadow:0 0 18px rgba(0,0,0,.5)}
  .ba-knob{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .2s var(--ease)}
  .ba-handle:hover .ba-knob{transform:scale(1.08)}
  .ba-knob svg{width:24px;height:24px;color:#0b0d12}
  .ba-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;font-size:.74rem;color:var(--ink-soft);background:rgba(11,13,18,.7);border:1px solid var(--line-2);padding:.35rem .8rem;border-radius:999px;backdrop-filter:blur(6px);pointer-events:none;transition:opacity .4s}

  /* mock site BEFORE (ugly) */
  .mock{position:absolute;inset:0;font-family:Times New Roman, Georgia, serif;}
  .mock-before{background:#dfe3d8;color:#1c1c1c}
  .mock-before .mb-top{background:#7a1f1f;color:#ffd; text-align:center;padding:10px;font-size:clamp(13px,2.4vw,20px);font-weight:bold;border-bottom:3px ridge #ffcc00;letter-spacing:.5px}
  .mock-before .mb-body{padding:clamp(10px,3vw,26px);display:flex;flex-direction:column;gap:10px}
  .mock-before h4{font-size:clamp(15px,3vw,26px);color:#0000aa;text-decoration:underline;margin:0;font-weight:bold}
  .mock-before .mb-img{height:clamp(60px,16vw,120px);background:repeating-linear-gradient(45deg,#bcbfae,#bcbfae 10px,#cfd3c4 10px,#cfd3c4 20px);border:2px inset #999;display:grid;place-items:center;color:#666;font-size:11px;font-style:italic}
  .mock-before p{font-size:clamp(11px,2.2vw,15px);line-height:1.4;margin:0;max-width:60ch}
  .mock-before .mb-marquee{overflow:hidden;white-space:nowrap;background:#ffffcc;border:1px dashed #b00;padding:3px 0;color:#b00;font-size:clamp(11px,2vw,14px);font-weight:bold}
  .mock-before .mb-marquee span{display:inline-block;padding-left:100%;animation:marq 12s linear infinite}
  @keyframes marq{to{transform:translateX(-100%)}}
  .mock-before .mb-btn{align-self:flex-start;background:linear-gradient(#ddd,#999);border:2px outset #bbb;padding:5px 12px;font-size:13px;color:#111}
  .mock-before .mb-hit{font-size:11px;color:#444;font-style:italic;margin-top:6px}

  /* mock site AFTER (gorgeous, Nathan-built) */
  .mock-after{background:radial-gradient(120% 90% at 80% -10%, #102433, #0a0e15);color:#eef3fb;font-family:var(--font-body);display:flex;flex-direction:column}
  .mock-after .ma-nav{display:flex;align-items:center;justify-content:space-between;padding:clamp(10px,2.4vw,18px) clamp(14px,3vw,28px)}
  .mock-after .ma-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:clamp(12px,2.2vw,17px)}
  .mock-after .ma-brand i{width:clamp(20px,4vw,30px);height:clamp(20px,4vw,30px);border-radius:8px;background:linear-gradient(145deg,#34d399,#0ea5e9);display:block}
  .mock-after .ma-cta{background:linear-gradient(180deg,#3ddc84,#16a34a);color:#04140b;font-weight:700;border-radius:999px;padding:clamp(6px,1.4vw,9px) clamp(10px,2.4vw,18px);font-size:clamp(10px,1.9vw,14px)}
  .mock-after .ma-hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(8px,2vw,20px) clamp(16px,3.4vw,34px)}
  .mock-after .ma-eye{font-family:var(--font-mono);font-size:clamp(8px,1.5vw,11px);letter-spacing:.15em;text-transform:uppercase;color:#5eead4}
  .mock-after .ma-h{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,4.4vw,42px);line-height:1.04;margin:.4rem 0;letter-spacing:-.02em}
  .mock-after .ma-h span{background:linear-gradient(120deg,#5eead4,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
  .mock-after .ma-sub{color:#b9c6d6;font-size:clamp(10px,2vw,15px);max-width:42ch}
  .mock-after .ma-row{display:flex;gap:8px;margin-top:clamp(8px,2vw,16px);flex-wrap:wrap}
  .mock-after .ma-b1{background:linear-gradient(180deg,#3ddc84,#16a34a);color:#04140b}
  .mock-after .ma-b2{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
  .mock-after .ma-b1,.mock-after .ma-b2{font-weight:700;border-radius:999px;padding:clamp(7px,1.6vw,11px) clamp(12px,2.6vw,20px);font-size:clamp(10px,1.9vw,14px)}
  .mock-after .ma-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 clamp(16px,3.4vw,34px) clamp(14px,3vw,26px)}
  .mock-after .ma-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:clamp(8px,2vw,14px)}
  .mock-after .ma-card b{font-size:clamp(10px,1.9vw,14px);display:block}
  .mock-after .ma-card small{color:#8ea0b4;font-size:clamp(8px,1.6vw,11px)}
  .mock-after .ma-dot{width:clamp(16px,3.4vw,26px);height:clamp(16px,3.4vw,26px);border-radius:8px;background:linear-gradient(145deg,rgba(94,234,212,.3),rgba(56,189,248,.15));margin-bottom:6px}

  .ba-disclaim{font-size:.78rem;color:var(--muted);margin-top:1rem;text-align:center}

  /* ---------- Products / two-up ---------- */
  .products{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,28px)}
  .pcard{position:relative;border-radius:var(--radius-lg);padding:clamp(24px,3vw,38px);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg-2));overflow:hidden;transition:transform .4s var(--ease),border-color .4s var(--ease)}
  .pcard::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% -10%, rgba(255,122,24,.12), transparent 60%);opacity:0;transition:opacity .4s}
  .pcard:hover{transform:translateY(-6px);border-color:var(--line-2)}
  .pcard:hover::before{opacity:1}
  .pcard.voice::before{background:radial-gradient(80% 60% at 50% -10%, rgba(56,224,176,.12), transparent 60%)}
  .pcard .ptop{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
  .pcard .picon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:none}
  .pcard .picon svg{width:26px;height:26px}
  .pcard.web .picon{background:linear-gradient(145deg,rgba(255,122,24,.22),rgba(255,122,24,.08));color:var(--brand-2);border:1px solid rgba(255,122,24,.3)}
  .pcard.voice .picon{background:linear-gradient(145deg,rgba(56,224,176,.2),rgba(33,194,255,.08));color:var(--accent);border:1px solid rgba(56,224,176,.3)}
  .tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.32rem .6rem;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-soft)}
  .tag.pop{background:linear-gradient(180deg,rgba(255,122,24,.2),rgba(255,122,24,.08));border-color:rgba(255,122,24,.4);color:var(--brand-2)}
  .tag.new{background:linear-gradient(180deg,rgba(56,224,176,.18),rgba(56,224,176,.06));border-color:rgba(56,224,176,.4);color:var(--accent)}
  .pcard h3{margin-bottom:.5rem}
  .price{display:flex;align-items:baseline;gap:.5rem;margin:.7rem 0 1rem;font-family:var(--font-display)}
  .price .big{font-size:clamp(2rem,4vw,2.7rem);font-weight:700;letter-spacing:-.03em}
  .price .per{color:var(--muted);font-size:.95rem}
  .pcard ul{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:.6rem}
  .pcard li{display:flex;gap:.6rem;font-size:.92rem;color:var(--ink-soft);line-height:1.4}
  .pcard li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--brand-2)}
  .pcard.voice li svg{color:var(--accent)}
  .pcard .pactions{display:flex;flex-direction:column;gap:.6rem;margin-top:auto}
  .pcard .plink{font-size:.86rem;color:var(--muted);text-align:center;transition:color .2s}
  .pcard .plink:hover{color:var(--ink)}
  .addon{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line);font-size:.86rem;color:var(--muted)}
  .addon b{color:var(--ink-soft)}

  /* ---------- How it works ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);counter-reset:step}
  .step{position:relative;padding:clamp(20px,2.4vw,28px);border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
  .step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-mono);font-size:.8rem;color:var(--brand-2);letter-spacing:.1em}
  .step h3{font-size:1.08rem;margin:.8rem 0 .5rem}
  .step p{font-size:.88rem;color:var(--muted);margin:0}
  .step .ic{position:absolute;top:clamp(20px,2.4vw,28px);right:clamp(20px,2.4vw,28px);width:22px;height:22px;color:var(--line-2)}

  /* ---------- Work / samples ---------- */
  .samples{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,20px)}
  .sample{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel);transition:transform .4s var(--ease),border-color .4s}
  .sample:hover{transform:translateY(-5px);border-color:var(--line-2)}
  .sample .thumb{aspect-ratio:4/3;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:14px;color:#fff}
  .sample .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.55));z-index:1}
  .sample .thumb > *{position:relative;z-index:2}
  .sample .s1{background:linear-gradient(150deg,#1f6feb,#0d3b8c)}
  .sample .s2{background:linear-gradient(150deg,#2ea043,#136a2c)}
  .sample .s3{background:linear-gradient(150deg,#8957e5,#4b2a8a)}
  .sample .s4{background:linear-gradient(150deg,#db6d28,#9a4513)}
  .sample .label{font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1.2}
  .sample .trade{font-size:.74rem;color:rgba(255,255,255,.8);font-family:var(--font-mono);letter-spacing:.05em}
  .sample .foot{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:.82rem;color:var(--muted)}
  .sample .foot svg{width:15px;height:15px;transition:transform .25s}
  .sample:hover .foot svg{transform:translate(2px,-2px)}

  /* ---------- Calculator hook ---------- */
  .calc{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(56,224,176,.22);background:linear-gradient(120deg,rgba(56,224,176,.08),rgba(33,194,255,.05));padding:clamp(28px,4vw,48px)}
  .calc-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,48px);align-items:center}
  .calc .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,7vw,4.4rem);letter-spacing:-.03em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
  .calc .num small{font-size:1.1rem;color:var(--ink-soft);font-weight:400;display:block;margin-top:.4rem;font-family:var(--font-body)}
  .calc-controls{display:flex;flex-direction:column;gap:1.2rem}
  .calc-controls label{display:block;font-size:.82rem;color:var(--ink-soft);margin-bottom:.5rem}
  .calc-controls label b{color:var(--ink);font-family:var(--font-mono)}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.12);outline:none}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 4px 14px rgba(56,224,176,.5);border:3px solid #0b0d12}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border:3px solid #0b0d12;border-radius:50%;background:var(--accent);cursor:pointer}

  /* ---------- Lead form (free-sample request) ---------- */
  .lead-form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;max-width:560px;margin:1.6rem auto 0;text-align:left}
  .lead-form .full{grid-column:1 / -1}
  .lead-form label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);margin:0 0 .35rem}
  .lead-form input,.lead-form textarea,.lead-form select{
    width:100%;font:inherit;font-size:.95rem;color:var(--ink);
    background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;
    padding:.7rem .85rem;transition:border-color .2s,background .2s;
  }
  .lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--muted)}
  .lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{outline:none;border-color:var(--brand-2);background:rgba(255,255,255,.07)}
  .lead-form textarea{min-height:84px;resize:vertical}
  .lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* honeypot */
  .lead-form .submit-row{grid-column:1 / -1;display:flex;flex-direction:column;gap:.5rem;margin-top:.3rem}
  .lead-form .form-note{font-size:.8rem;color:var(--muted);text-align:center}
  .form-status{grid-column:1 / -1;margin-top:.4rem;font-size:.95rem;text-align:center;min-height:1.2em}
  .form-status.ok{color:var(--good)}
  .form-status.err{color:#ff8f6b}
  @media (max-width:560px){ .lead-form{grid-template-columns:1fr} }

  /* ---------- About ---------- */
  .about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);align-items:center}
  .about-photo{position:relative;max-width:300px}
  .about-photo img{border-radius:var(--radius-lg);border:1px solid var(--line-2);filter:grayscale(1) contrast(1.05);width:100%}
  .about-photo .ring{position:absolute;inset:-12px;border-radius:calc(var(--radius-lg) + 12px);border:1px solid rgba(255,122,24,.3);z-index:-1}
  .about-photo .badge{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--bg-2);border:1px solid var(--line-2);border-radius:999px;padding:.5rem 1rem;font-size:.8rem;display:flex;align-items:center;gap:.5rem;box-shadow:var(--shadow)}
  .about blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.3;letter-spacing:-.01em;margin:1.2rem 0;color:var(--ink)}
  .about-sig{display:flex;align-items:center;gap:.7rem;margin-top:1.4rem;font-size:.9rem;color:var(--muted)}
  .about-sig b{color:var(--ink);font-family:var(--font-display)}

  /* ---------- FAQ ---------- */
  .faq-list{display:grid;gap:.7rem;max-width:840px}
  .faq-item{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);overflow:hidden;transition:border-color .3s}
  .faq-item[open]{border-color:var(--line-2)}
  .faq-item summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--font-display);font-weight:500;font-size:1.02rem}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary .pm{width:24px;height:24px;flex:none;position:relative;transition:transform .3s var(--ease)}
  .faq-item[open] summary .pm{transform:rotate(45deg)}
  .faq-item summary .pm::before,.faq-item summary .pm::after{content:"";position:absolute;background:var(--brand-2);border-radius:2px}
  .faq-item summary .pm::before{top:11px;left:4px;right:4px;height:2px}
  .faq-item summary .pm::after{left:11px;top:4px;bottom:4px;width:2px}
  .faq-body{padding:0 1.3rem 1.2rem;color:var(--ink-soft);font-size:.94rem}

  /* ---------- Contact ---------- */
  .contact-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,var(--panel),var(--bg-2));padding:clamp(30px,5vw,60px);text-align:center}
  .contact-card::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:120%;height:80%;background:radial-gradient(closest-side,rgba(255,122,24,.18),transparent);pointer-events:none}
  .contact-card .wrap-inner{position:relative;max-width:680px;margin:0 auto}
  .contact-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1.8rem}
  .contact-channels{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2rem;margin-top:1.8rem;font-size:.9rem}
  .contact-channels a{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-soft);transition:color .2s}
  .contact-channels a:hover{color:var(--ink)}
  .contact-channels svg{width:18px;height:18px;color:var(--brand-2)}

  /* ---------- Resources / SEO ---------- */
  .res-tabs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,30px)}
  .res-block h3{font-size:1.05rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
  .res-block h3 svg{width:18px;height:18px;color:var(--brand-2)}
  .res-links{display:flex;flex-wrap:wrap;gap:.5rem}
  .res-links a{font-size:.85rem;color:var(--ink-soft);background:rgba(255,255,255,.03);border:1px solid var(--line);padding:.45rem .8rem;border-radius:10px;transition:all .2s}
  .res-links a:hover{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.06);transform:translateY(-2px)}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 40px;margin-top:clamp(40px,6vw,80px)}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,40px)}
  .foot-grid h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem;font-weight:500}
  .foot-links{display:flex;flex-direction:column;gap:.55rem}
  .foot-links a{font-size:.88rem;color:var(--ink-soft);transition:color .2s}
  .foot-links a:hover{color:var(--brand-2)}
  .foot-about p{font-size:.9rem;color:var(--muted);max-width:34ch;margin:1rem 0}
  .foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:clamp(32px,4vw,52px);padding-top:24px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
  .foot-bottom a{color:var(--muted)}.foot-bottom a:hover{color:var(--ink-soft)}

  /* ---------- Sticky mobile call bar ---------- */
  .mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:55;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(11,13,18,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .mobile-bar .btn{flex:1}

  /* ---------- Mobile menu ---------- */
  .mobile-menu{position:fixed;inset:0;z-index:70;background:rgba(8,10,14,.96);backdrop-filter:blur(12px);transform:translateY(-100%);transition:transform .45s var(--ease);display:flex;flex-direction:column;padding:clamp(20px,5vw,40px)}
  .mobile-menu.open{transform:none}
  .mobile-menu .mm-top{display:flex;align-items:center;justify-content:space-between;height:52px}
  .mobile-menu .mm-close{width:46px;height:46px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink);display:grid;place-items:center}
  .mobile-menu .mm-close svg{width:22px;height:22px}
  .mobile-menu nav{display:flex;flex-direction:column;gap:.3rem;margin-top:2rem}
  .mobile-menu nav a{font-family:var(--font-display);font-size:1.5rem;font-weight:500;padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .mobile-menu .mm-cta{margin-top:auto;display:flex;flex-direction:column;gap:.7rem;padding-bottom:env(safe-area-inset-bottom)}

  /* ---------- Responsive ---------- */
  @media (max-width:1000px){
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .hero-copy{max-width:680px}
    .demo-stage{order:-1;margin-bottom:8px}
    .phone{transform:none}
    .demo-stage:hover .phone{transform:none}
    .products{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr}
    .samples{grid-template-columns:1fr 1fr}
    .calc-grid{grid-template-columns:1fr;gap:28px}
    .about-grid{grid-template-columns:1fr;gap:44px}
    .about-photo{margin:0 auto}
    .res-tabs{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:760px){
    .nav-links{display:none}
    .nav-cta .btn:not(.hamburger){display:none}
    .hamburger{display:inline-flex}
    .mobile-bar{display:flex}
    body{padding-bottom:72px}
    .samples{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .ba{aspect-ratio:3/4;max-height:none}
    .mock-after .ma-cards{grid-template-columns:1fr}
    .mock-after .ma-card:nth-child(n+2){display:none}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
  }
  .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  :focus-visible{outline:3px solid var(--brand-2);outline-offset:3px;border-radius:6px}