/* ---------- tokens ---------- */
  :root{
    --bg:#0F1420;
    --bg-2:#0B1018;
    --card:#151B27;
    --card-2:#101724;
    --line:rgba(255,255,255,0.08);
    --line-2:rgba(255,255,255,0.04);
    --text:#E2E8F0;
    --body:#CBD5E1;
    --muted:#94A3B8;
    --dim:#64748B;
    --accent:#2EC4A0;
    --accent-2:#1B9D7E;
    --success:#10B981;
    --warning:#F59E0B;
    --danger:#EF5B5B;
    --maxw: 1200px;
    --pad: clamp(20px, 4vw, 56px);
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --display: "Chakra Petch", system-ui, sans-serif;
    --body-font: "Hanken Grotesk", system-ui, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--body);}
  body{
    font-family:var(--body-font);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;color:inherit}
  ::selection{background:var(--accent);color:#0B1018}

  h1,h2,h3,h4,.display,.label{font-family:var(--display);color:var(--text);}
  h1{font-weight:600;letter-spacing:-0.01em;line-height:1.02;margin:0;}
  h2{font-weight:600;letter-spacing:-0.005em;line-height:1.08;margin:0;}
  h3{font-weight:600;letter-spacing:0;line-height:1.2;margin:0;}
  p{margin:0;text-wrap:pretty;}

  .label{
    font-family:var(--display);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--muted);
    font-weight:500;
  }
  .mono{font-family:var(--mono);}

  .container{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 var(--pad);
  }

  .hairline{border-top:1px solid var(--line);}
  .vrule{border-left:1px solid var(--line);}

  /* ---------- nav ---------- */
  .nav{
    position:sticky; top:0; z-index:30;
    background:rgba(15,20,32,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{
    display:flex;align-items:center;justify-content:space-between;
    height:60px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand-mark{
    width:28px;height:28px;
    display:grid;place-items:center;
    color:var(--accent);
  }
  .brand-mark img{display:block;width:100%;height:100%;object-fit:contain;}
  .brand-mark-sm{width:22px;height:22px;}
  .brand-name{
    font-family:var(--display);
    font-weight:700;
    font-size:15px;
    letter-spacing:0.04em;
    color:var(--text);
  }
  .brand-name span{color:var(--accent);}
  .nav-links{display:flex;gap:28px;align-items:center;}
  .nav-links a{
    font-family:var(--display);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.14em;
    color:var(--muted);
    transition:color .2s;
  }
  .nav-links a:hover{color:var(--text);}
  .nav-cta{display:flex;gap:8px;align-items:center;}
  .nav-version{
    font-family:var(--mono);
    font-size:11px;
    color:var(--dim);
  }
  @media (max-width:760px){
    .nav-links{display:none}
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:11px 18px;
    font-family:var(--display);
    font-weight:600;
    font-size:13px;
    letter-spacing:0.04em;
    border-radius:3px;
    border:1px solid transparent;
    cursor:pointer;
    transition:background .15s, border-color .15s, color .15s, transform .15s;
    background:transparent;
    text-transform:none;
  }
  .btn-primary{
    background:var(--accent); color:#0A0F18; border-color:var(--accent);
  }
  .btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2);}
  .btn-ghost{
    color:var(--text); border-color:var(--line);
  }
  .btn-ghost:hover{border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.02);}
  .btn .arrow{font-family:var(--mono);font-weight:400;}

  .btn-sm{padding:8px 12px; font-size:12px;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 72px);
    overflow:hidden;
  }
  .hero::before{
    /* subtle grid + noise overlay */
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity:.6;
    mix-blend-mode:overlay;
    pointer-events:none;
  }
  .hero-inner{position:relative; z-index:1;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    padding:5px 10px;
    border:1px solid var(--line);
    border-radius:2px;
    background:rgba(46,196,160,0.04);
    margin-bottom:28px;
  }
  .eyebrow .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px rgba(46,196,160,0.15);
  }
  .eyebrow span{
    font-family:var(--display);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--accent);
    font-weight:500;
  }

  h1.hero-title{
    font-size: clamp(48px, 8vw, 92px);
    max-width: 14ch;
    margin-bottom: 22px;
  }
  h1.hero-title em{
    font-style:normal;
    color:var(--accent);
  }
  .hero-sub{
    max-width: 56ch;
    font-size: clamp(16px, 1.4vw, 19px);
    color:var(--body);
    margin-bottom: 32px;
  }
  .hero-cta{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center;
    margin-bottom: 18px;
  }
  .hero-meta{
    display:flex; gap:18px; flex-wrap:wrap;
    font-family:var(--mono);
    font-size:12px;
    color:var(--dim);
  }
  .hero-meta b{color:var(--muted); font-weight:500;}

  /* ---------- terminal mock ---------- */
  .terminal{
    margin-top: clamp(40px, 5vw, 64px);
    border:1px solid var(--line);
    background:var(--card);
    border-radius:3px;
    overflow:hidden;
    box-shadow: 0 30px 80px -40px rgba(0,0,0,0.7);
  }
  .term-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;
    border-bottom:1px solid var(--line);
    background:var(--card-2);
  }
  .term-dots{display:flex;gap:6px;}
  .term-dots i{
    width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,0.12);
  }
  .term-title{
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
  }
  .term-title b{color:var(--accent);font-weight:500;}
  .term-body{
    display:grid;
    grid-template-columns: 1fr 1px 1fr;
    gap:0;
  }
  .term-pane{padding:18px 18px;}
  .term-pane + .term-divider{background:var(--line);}
  .term-line{
    font-family:var(--mono);
    font-size:12.5px;
    line-height:1.7;
    color:var(--body);
    white-space:pre-wrap;
  }
  .term-line .c-acc{color:var(--accent)}
  .term-line .c-mut{color:var(--muted)}
  .term-line .c-dim{color:var(--dim)}
  .term-line .c-warn{color:var(--warning)}
  .term-line .c-ok{color:var(--success)}
  .term-line .c-dan{color:var(--danger)}

  .blink::after{
    content:"▌";
    color:var(--accent);
    margin-left:2px;
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink{50%{opacity:0}}

  @media (max-width: 880px){
    .term-body{grid-template-columns:1fr; }
    .term-divider{display:none}
    .term-pane + .term-pane{border-top:1px solid var(--line);}
  }

  /* ---------- stat strip ---------- */
  .stat-strip{
    margin-top: clamp(24px, 3vw, 40px);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .stat{
    padding: 22px 24px;
    border-right:1px solid var(--line);
  }
  .stat:last-child{border-right:none;}
  .stat-num{
    font-family:var(--display);
    font-weight:600;
    font-size: clamp(22px, 2.4vw, 30px);
    color:var(--text);
    letter-spacing:-0.01em;
  }
  .stat-num small{color:var(--accent);font-weight:600;}
  .stat-label{
    font-family:var(--display);
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:0.16em;
    color:var(--muted);
    margin-top:4px;
  }
  @media (max-width: 880px){
    .stat-strip{grid-template-columns: repeat(2, 1fr);}
    .stat{border-bottom:1px solid var(--line);}
    .stat:nth-child(2n){border-right:none}
  }

  /* ---------- section scaffolding ---------- */
  section{padding: clamp(72px, 10vw, 120px) 0;}
  .section-head{
    display:grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(24px, 4vw, 64px);
    margin-bottom: clamp(36px, 5vw, 64px);
    align-items:end;
  }
  .section-head .left .label{margin-bottom:14px;display:block;}
  .section-head h2{
    font-size: clamp(30px, 4vw, 46px);
    max-width: 16ch;
  }
  .section-head .right{
    color:var(--body);
    font-size: 16px;
    max-width: 56ch;
  }
  @media (max-width: 760px){
    .section-head{grid-template-columns:1fr; align-items:start; gap:18px;}
  }

  /* ---------- problem ---------- */
  .problem{position:relative;}
  .problem-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:0;
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
  }
  .problem-cell{
    padding:18px;
    border-right:1px solid var(--line);
    background:var(--card-2);
    min-height:120px;
    display:flex;flex-direction:column;justify-content:space-between;
    gap:12px;
    position:relative;
  }
  .problem-cell:last-child{border-right:none;}
  .problem-cell .label{font-size:10px;}
  .problem-cell .icn{
    font-family:var(--mono);
    font-size:11px;
    color:var(--dim);
  }
  .problem-cell .name{
    font-family:var(--display);
    font-size:15px;
    color:var(--text);
    font-weight:500;
  }
  .problem-cell .role{
    font-size:12.5px;
    color:var(--muted);
    line-height:1.4;
  }
  .problem-arrow{
    text-align:center;
    margin: 28px 0;
    font-family:var(--mono);
    font-size:11px;
    color:var(--dim);
    letter-spacing:0.2em;
  }
  .problem-arrow span{color:var(--accent);}
  .problem-after{
    border:1px solid var(--accent);
    border-radius:3px;
    padding: 26px 28px;
    background: linear-gradient(180deg, rgba(46,196,160,0.06), rgba(46,196,160,0.02));
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    flex-wrap:wrap;
  }
  .problem-after .l{display:flex; align-items:center; gap:14px;}
  .problem-after .badge{
    width:32px;height:32px;border-radius:3px;
    background:var(--accent); color:#0A0F18;
    display:grid;place-items:center;
    font-family:var(--display);font-weight:700;font-size:13px;
  }
  .problem-after h3{font-size:18px;}
  .problem-after p{color:var(--muted); font-size:13.5px; margin-top:2px;}
  @media (max-width: 880px){
    .problem-grid{grid-template-columns: repeat(2, 1fr);}
    .problem-cell{border-bottom:1px solid var(--line);}
    .problem-cell:nth-child(2n){border-right:none;}
  }

  /* ---------- features grid ---------- */
  .features{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
  }
  .feature{
    background:var(--card);
    padding: 0;
    position:relative;
    transition: background .2s;
  }
  .feature[open]{background:#181F2D;}
  .feature:hover > summary{background:#181F2D;}
  .feature > summary{
    list-style:none;
    padding: 26px 30px;
    cursor:pointer;
    display:flex; flex-direction:column; gap:10px;
    transition: background .2s;
  }
  .feature > summary::-webkit-details-marker{display:none;}
  .feature .head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .feature .num{
    font-family:var(--mono);
    font-size:11px;
    color:var(--dim);
  }
  .feature .head-right{display:flex; align-items:center; gap:10px;}
  .feature .star{
    font-family:var(--display);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.16em;
    color:var(--accent);
    border:1px solid rgba(46,196,160,0.3);
    background: rgba(46,196,160,0.06);
    padding: 3px 8px;
    border-radius:2px;
  }
  .feature .toggle{
    font-family:var(--mono);
    font-size:18px;
    line-height:1;
    color:var(--muted);
    width:20px; height:20px;
    display:inline-grid; place-items:center;
    transition: transform .2s, color .2s;
  }
  .feature:hover .toggle{color:var(--accent);}
  .feature[open] .toggle{
    color:var(--accent);
    transform: rotate(45deg);
  }
  .feature h3{
    font-size: 22px;
    color:var(--text);
    margin-top: 4px;
  }
  .feature .desc{
    color:var(--muted);
    font-size:14.5px;
    line-height:1.55;
  }
  .feature .body{
    padding: 4px 30px 28px;
    border-top:1px solid var(--line);
  }
  .feature ul{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:8px;
    padding-top: 18px;
  }
  .feature li{
    font-size:13.5px;
    color:var(--body);
    line-height:1.5;
    padding-left: 18px;
    position: relative;
  }
  .feature li::before{
    content:"›";
    font-family:var(--mono);
    color:var(--accent);
    font-size:14px;
    line-height:1.5;
    position:absolute;
    left:0;
    top:0;
  }
  .feature li b{color:var(--text); font-weight:600;}
  .feature li code{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent);
    background:rgba(46,196,160,0.08);
    padding:1px 5px;
    border-radius:2px;
  }
  @media (max-width: 760px){
    .features{grid-template-columns: 1fr;}
  }

  /* ---------- email deep dive ---------- */
  .email{
    background: var(--bg-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .email-head{
    display:flex; align-items:end; justify-content:space-between;
    gap:32px; flex-wrap:wrap;
    margin-bottom: clamp(36px, 5vw, 56px);
  }
  .email-head h2{
    font-size: clamp(32px, 4.4vw, 52px);
    max-width: 18ch;
  }
  .email-head .star{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--display);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--accent);
    border:1px solid rgba(46,196,160,0.3);
    background: rgba(46,196,160,0.06);
    padding: 5px 10px;
    border-radius:2px;
    margin-bottom:14px;
  }
  .email-flow{
    border:1px solid var(--line);
    background:var(--card);
    border-radius:3px;
    padding: clamp(20px, 3vw, 32px);
    overflow:hidden;
  }
  .flow-bar{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    border-bottom:1px solid var(--line);
    padding-bottom:12px;
    margin-bottom: 24px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--dim);
  }
  .flow-bar .l{display:flex;align-items:center;gap:10px;}
  .flow-bar .ind{
    width:8px;height:8px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px rgba(46,196,160,0.18);
  }

  .flow-cols{
    display:grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items:stretch;
  }
  @media (max-width: 880px){
    .flow-cols{grid-template-columns:1fr;}
  }

  .flow-email{
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--card-2);
    padding:14px 16px;
    font-family:var(--mono);
    font-size:12px;
    color:var(--body);
    line-height:1.7;
    display:flex; flex-direction:column; gap:6px;
  }
  .flow-email .from{color:var(--muted)}
  .flow-email .from b{color:var(--text); font-weight:500;}
  .flow-email .subj{color:var(--text); font-family:var(--display); font-size:13px; font-weight:500; margin-top:6px;}
  .flow-email .preview{color:var(--dim); font-size:11.5px; margin-top:4px;}
  .flow-email .tag{
    align-self:flex-start;
    font-family:var(--display); font-size:9px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--muted);
    border:1px solid var(--line);
    padding:2px 6px; border-radius:2px;
    margin-bottom:4px;
  }

  .flow-pipeline{
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--card-2);
    padding: 18px;
    display:flex; flex-direction:column; gap:0;
  }
  .pipe-step{
    display:grid;
    grid-template-columns: 28px 1fr auto;
    gap:14px;
    align-items:center;
    padding: 14px 6px;
    border-bottom:1px dashed var(--line);
  }
  .pipe-step:last-child{border-bottom:none;}
  .pipe-step .idx{
    font-family:var(--mono);
    font-size:11px; color:var(--dim);
    text-align:center;
  }
  .pipe-step .body{display:flex; flex-direction:column; gap:2px;}
  .pipe-step .name{
    font-family:var(--display);
    font-weight:500;
    color:var(--text);
    font-size:14px;
  }
  .pipe-step .meta{
    font-size:12px; color:var(--muted);
  }
  .pipe-step .pill{
    font-family:var(--display);
    font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
    padding:4px 8px;
    border-radius:2px;
    border:1px solid var(--line);
    color:var(--muted);
    white-space:nowrap;
  }
  .pipe-step.s-now .pill{
    color:var(--accent); border-color:rgba(46,196,160,0.4); background:rgba(46,196,160,0.08);
  }
  .pipe-step.s-warn .pill{color:var(--warning); border-color:rgba(245,158,11,0.35); background:rgba(245,158,11,0.06);}
  .pipe-step.s-ok .pill{color:var(--success); border-color:rgba(16,185,129,0.35); background:rgba(16,185,129,0.06);}

  .flow-foot{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
    margin-top:24px;
  }
  .flow-foot .ff{
    border:1px solid var(--line);
    background: var(--card-2);
    padding:14px;
    border-radius:3px;
  }
  .flow-foot .ff .label{display:block; margin-bottom:6px;}
  .flow-foot .ff .v{
    font-family:var(--display);
    font-size:14px; color:var(--text); font-weight:500;
  }
  .flow-foot .ff .s{font-size:12px; color:var(--muted); margin-top:2px;}
  @media (max-width: 760px){
    .flow-foot{grid-template-columns:1fr}
  }

  /* ---------- inventory mock (inspired by app screenshot, made-up products) ---------- */
  .inv{
    margin-top: clamp(36px, 5vw, 56px);
  }
  .inv-card{
    border:1px solid var(--line);
    background:var(--card);
    border-radius:3px;
    overflow:hidden;
  }
  .inv-bar{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:10px 14px;
    border-bottom:1px solid var(--line);
    background:var(--card-2);
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
  }
  .inv-bar .tabs{display:flex;gap:18px;}
  .inv-bar .tabs span{color:var(--dim);}
  .inv-bar .tabs span.on{color:var(--accent);}
  .inv-bar .right{display:flex;align-items:center;gap:10px;}
  .inv-bar .pill{
    border:1px solid var(--line); padding:3px 8px; border-radius:2px;
    font-family:var(--display); font-size:10px; text-transform:uppercase; letter-spacing:0.14em;
    color:var(--muted);
  }
  .inv-bar .pill.ok{color:var(--accent);border-color:rgba(46,196,160,0.3);}

  .inv-table{
    display:grid;
    grid-template-columns: 36px 1.6fr 0.5fr 0.5fr 0.6fr 0.5fr 0.7fr;
    align-items:center;
  }
  .inv-table > div{
    padding: 12px 14px;
    border-bottom:1px solid var(--line);
    font-size:13px;
    color:var(--body);
  }
  .inv-table .h{
    font-family:var(--display); font-size:10.5px; text-transform:uppercase; letter-spacing:0.16em;
    color:var(--muted);
    background: var(--card-2);
    border-bottom:1px solid var(--line);
  }
  .inv-table .thumb{
    width:28px;height:28px;border-radius:2px;
    background:var(--bg-2);
    border:1px solid var(--line);
    background-size:cover; background-position:center;
  }
  .inv-table .name{font-weight:500; color:var(--text);}
  .inv-table .sub{color:var(--dim); font-size:11.5px;}
  .inv-table .px{font-family:var(--mono); font-size:12.5px; color:var(--text);}
  .inv-table .qty{font-family:var(--mono); font-size:12.5px; color:var(--accent);}
  .inv-table .stat{
    font-family:var(--display); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
    padding:3px 8px; border-radius:2px; display:inline-block;
    color:var(--muted); border:1px solid var(--line);
  }
  .inv-table .stat.listed{color:var(--accent); border-color:rgba(46,196,160,0.32); background:rgba(46,196,160,0.06);}
  .inv-table .stat.unlisted{color:var(--dim);}
  .inv-table .updated{font-family:var(--mono); font-size:12px; color:var(--muted);}

  /* placeholder thumbs — striped svg */
  .ph-1{background:repeating-linear-gradient(45deg,#1f2a3a,#1f2a3a 4px,#16202e 4px,#16202e 8px);}
  .ph-2{background:repeating-linear-gradient(45deg,#2a221f,#2a221f 4px,#1f1916 4px,#1f1916 8px);}
  .ph-3{background:repeating-linear-gradient(45deg,#1a2a26,#1a2a26 4px,#142220 4px,#142220 8px);}
  .ph-4{background:repeating-linear-gradient(45deg,#2a1f28,#2a1f28 4px,#1f1820 4px,#1f1820 8px);}
  .ph-5{background:repeating-linear-gradient(45deg,#222a1a,#222a1a 4px,#1a2014 4px,#1a2014 8px);}
  .ph-6{background:repeating-linear-gradient(45deg,#2a2a1a,#2a2a1a 4px,#202014 4px,#202014 8px);}

  @media (max-width: 880px){
    .inv-table{grid-template-columns: 28px 1.4fr 0.6fr 0.7fr 0.7fr;}
    .inv-table .h-sizes,.inv-table .v-sizes,
    .inv-table .h-cost,.inv-table .v-cost,
    .inv-table .h-upd,.inv-table .v-upd {display:none;}
  }

  /* ---------- security strip ---------- */
  .security{
    background:var(--bg-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding: clamp(56px, 8vw, 96px) 0;
  }
  .sec-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
  }
  .sec{
    padding: 28px;
    border-right:1px solid var(--line);
    background:var(--card);
    display:flex; flex-direction:column; gap:10px;
  }
  .sec:last-child{border-right:none;}
  .sec .label{display:block;}
  .sec h4{
    font-family:var(--display);
    font-size: 18px;
    color:var(--text);
    font-weight:600;
    margin:4px 0;
  }
  .sec p{font-size:13.5px; color:var(--muted); line-height:1.5;}
  .sec .glyph{
    font-family:var(--mono);
    font-size:12px; color:var(--accent);
    margin-bottom:4px;
  }
  @media (max-width: 760px){
    .sec-grid{grid-template-columns:1fr;}
    .sec{border-right:none; border-bottom:1px solid var(--line);}
    .sec:last-child{border-bottom:none;}
  }

  /* ---------- final cta ---------- */
  .final{
    padding: clamp(80px, 11vw, 140px) 0;
    text-align:center;
    position:relative;
  }
  .final h2{
    font-size: clamp(36px, 6vw, 72px);
    max-width: 16ch;
    margin: 0 auto 22px;
  }
  .final p{
    color:var(--body);
    max-width: 50ch;
    margin: 0 auto 32px;
    font-size: 16px;
  }
  .final .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
  .final .meta{
    margin-top:24px;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--dim);
  }

  /* ---------- pricing ---------- */
  .pricing-head{
    text-align:center;
    margin-bottom: clamp(40px, 5vw, 64px);
  }
  .pricing-head .label{display:block; margin-bottom: 14px;}
  .pricing-head h2{
    font-size: clamp(36px, 5.5vw, 64px);
    max-width: 18ch;
    margin: 0 auto 18px;
  }
  .pricing-head p{
    color:var(--body);
    max-width: 56ch;
    margin: 0 auto;
    font-size: 16px;
  }

  .price-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
    background: var(--line);
    max-width: 1080px;
    margin: 0 auto;
  }
  .price{
    background: var(--card);
    padding: 36px 32px;
    display:flex; flex-direction:column; gap: 18px;
    position:relative;
    text-align:left;
    transition: background .2s;
  }
  .price.featured{
    background: linear-gradient(180deg, rgba(46,196,160,0.06), rgba(46,196,160,0.02)), var(--card);
  }
  .price-top{
    display:flex; align-items:center; justify-content:space-between; gap: 12px;
  }
  .price .tag{
    font-family:var(--display);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--muted);
  }
  .price .badge{
    font-family:var(--display);
    font-size:9.5px;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--accent);
    border:1px solid rgba(46,196,160,0.35);
    background:rgba(46,196,160,0.08);
    padding:3px 8px;
    border-radius:2px;
  }
  .price h3{
    font-family:var(--display);
    font-size:20px;
    color:var(--text);
    margin:0;
  }
  .price .amount{
    display:flex; align-items:baseline; gap:8px;
    margin-top:2px;
  }
  .price .amount .num{
    font-family:var(--display);
    font-weight:600;
    font-size: 48px;
    color: var(--text);
    line-height:1;
    letter-spacing:-0.01em;
  }
  .price.featured .amount .num{color: var(--accent);}
  .price .amount .per{
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
  }
  .price .savings{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--accent);
  }
  .price .savings.muted{color:var(--muted);}
  .price ul{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:8px;
    border-top:1px solid var(--line);
    padding-top: 18px;
  }
  .price li{
    font-size:13.5px;
    color:var(--body);
    padding-left: 18px;
    position: relative;
    line-height:1.5;
  }
  .price li::before{
    content:"›";
    font-family:var(--mono);
    color:var(--accent);
    position:absolute; left:0; top:0;
  }
  .price .pcta{margin-top: auto; padding-top: 8px;}
  .price .pcta .btn{width:100%; justify-content:center;}
  .price .trial{
    font-family:var(--mono);
    font-size:11px;
    color:var(--dim);
    text-align:center;
    margin-top: 8px;
  }
  .price .trial b{color:var(--accent); font-weight:500;}

  @media (max-width: 880px){
    .price-grid{grid-template-columns: 1fr;}
  }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding: 32px 0 24px;
    background:var(--bg-2);
  }
  .foot{
    display:flex;align-items:center;justify-content:space-between;
    gap:18px; flex-wrap:wrap;
  }
  .foot .l{display:flex;align-items:center;gap:14px;}
  .foot .l .brand-name{font-size:13px;}
  .foot .links{
    display:flex;gap:22px;flex-wrap:wrap;
    font-family:var(--display);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.16em;
  }
  .foot .links a{color:var(--muted);}
  .foot .links a:hover{color:var(--text);}
  .foot .v{
    font-family:var(--mono);
    font-size:11px; color:var(--dim);
  }

  /* ---------- reveal ---------- */
  .reveal{
    opacity:0; transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--d, 0ms);
  }
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }