:root{
    --bg: #EEF2F8;
    --bg-raised: #FFFFFF;
    --bg-deep: #E9EFF8;
    --fg: #1E293B;
    --fg-soft: #475569;
    --fg-faint: #64748B;
    --primary: #2563EB;
    --primary-deep: #1D4ED8;
    --primary-tint: #E9EFF8;
    --primary-bright: #3B82F6;
    --warn: #B45309;
    --warn-tint: #FEF3C7;
    --danger: #DC2626;
    --danger-tint: #FEE2E2;
    --accent: #F0710A;
    --accent-tint: #FED7AA;
    --accent-deep: #C2410C;
    --border: #E2E8F0;
    --border-soft: #EEF2F7;
    --dark-bg: #0F172A;
    --dark-bg-deep: #0B1220;
    --dark-text: #F8FAFC;
    --dark-mist: #94A3B8;
    --dark-mist-dim: #8496AF;
    --dark-hair: rgba(248,250,252,0.09);
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.07), 0 1px 1px rgba(15,23,42,0.05);
    --shadow-md: 0 10px 24px rgba(15,23,42,0.09), 0 2px 8px rgba(15,23,42,0.06);
    --shadow-lg: 0 28px 64px rgba(15,23,42,0.22), 0 10px 28px rgba(15,23,42,0.14);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --ease: cubic-bezier(.22,.8,.24,1);
    --ease-expo: cubic-bezier(.16,1,.3,1);
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html.lenis, html.lenis body{height:auto;}
  .lenis.lenis-smooth{scroll-behavior:auto !important;}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
  .lenis.lenis-stopped{overflow:hidden;}
  body{
    background:
      radial-gradient(ellipse 1200px 700px at 15% -10%, rgba(234,88,12,0.05), transparent 55%),
      radial-gradient(ellipse 900px 600px at 100% 0%, rgba(37,99,235,0.045), transparent 50%),
      var(--bg);
    color:var(--fg); font-family:var(--font-body); font-size:15px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ::selection{background:var(--primary); color:#fff;}
  section{padding:88px 0;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  .eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--primary-deep);}
  h1,h2,h3{font-family:var(--font-display); font-weight:700; margin:0;}
  h2{font-size:34px; letter-spacing:-0.3px;}
  .lede{color:var(--fg-soft); font-size:16px; max-width:560px; margin-top:12px; line-height:1.65;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:0.5px;
    padding:13px 22px; border-radius:var(--radius-sm); border:1px solid var(--fg);
    background:var(--fg); color:#fff; cursor:pointer;
    transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
  }
  .btn:hover{background:#334155; box-shadow:var(--shadow-sm); transform:translateY(-1px);}
  .btn:active{transform:scale(0.97);}
  .btn.ghost{background:transparent; color:var(--fg); border-color:var(--border);}
  .btn.ghost:hover{background:var(--bg-deep);}
  .btn.on-dark{background:var(--primary); border-color:var(--primary);}
  .btn.on-dark:hover{background:var(--primary-deep);}

  /* ---------- Nav ---------- */
  .site-nav{
    position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px; background:rgba(248,250,252,0.86); backdrop-filter:blur(10px) saturate(1.4);
    border-bottom:1px solid var(--border);
  }
  .nav-brand{font-family:var(--font-display); font-weight:800; font-size:22px;}
  .nav-brand span{color:var(--primary);}
  .nav-links{display:flex; align-items:center; gap:30px; font-size:13.5px;}
  .nav-links a{color:var(--fg-soft); transition:color .15s var(--ease);}
  .nav-links a:hover{color:var(--fg);}
  .nav-cta{display:flex; align-items:center; gap:14px;}
  .nav-burger{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; min-width:44px; min-height:44px; align-items:center; justify-content:center;}
  .nav-burger span{width:20px; height:2px; background:var(--fg); display:block;}
  .mobile-menu{
    display:grid; grid-template-rows:0fr; background:var(--bg-raised); overflow:hidden;
    border-bottom:1px solid var(--border); transition:grid-template-rows .22s var(--ease);
  }
  .mobile-menu-inner{
    overflow:hidden; min-height:0;
    opacity:0; transform:translateY(-6px); transition:opacity .18s var(--ease), transform .18s var(--ease);
  }
  .mobile-menu-links{display:flex; flex-direction:column; gap:2px; padding:8px 32px 18px 32px;}
  .mobile-menu.open{grid-template-rows:1fr;}
  .mobile-menu.open .mobile-menu-inner{opacity:1; transform:translateY(0);}
  .mobile-menu a{padding:12px 4px; font-size:14.5px; color:var(--fg-soft); border-bottom:1px solid var(--border-soft);}
  .mobile-menu .btn{margin-top:12px; justify-content:center; color:#fff;}

/* ---------- EPIC-inspired full-bleed intro ---------- */
  .intro{
    min-height:100vh; background:linear-gradient(160deg, var(--dark-bg) 0%, #0B1220 100%);
    color:#fff; position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:center;
    padding:120px 0 100px 0;
  }
  .intro-bg-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    z-index:0; opacity:0.35; pointer-events:none;
    mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 70%, transparent 100%);
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 70%, transparent 100%);
  }
  @media (prefers-reduced-motion: reduce){ .intro-bg-video{display:none;} }
  .intro-stamp{
    position:absolute; top:50%; right:-140px; width:460px; height:460px;
    border-radius:50%; transform:translateY(-50%); pointer-events:none;
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
    border:1.5px solid rgba(255,255,255,0.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 20px 60px rgba(0,0,0,0.25);
  }
  .intro-stamp::before{
    content:''; position:absolute; inset:16px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.1);
  }
  .intro-stamp::after{
    content:'✓'; position:absolute; bottom:44px; right:44px; width:56px; height:56px;
    border-radius:50%; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; font-weight:800;
    box-shadow:0 8px 20px rgba(37,99,235,0.45), 0 0 0 4px var(--dark-bg);
  }
  .intro-stamp-pct{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-56%);
    font-family:var(--font-display); font-weight:800;
    font-size:100px; color:#fff; line-height:1; white-space:nowrap;
  }
  .intro-stamp-pct span{font-size:0.5em;}
  .intro-stamp-label{
    position:absolute; top:50%; left:50%; transform:translate(-50%, 40px);
    font-family:var(--font-mono); font-size:13px; letter-spacing:5px; text-transform:uppercase;
    color:var(--primary-bright); opacity:0.9;
  }
  @media (max-width:1100px){ .intro-stamp{display:none;} }
  .ink-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
  .intro-eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:5px; text-transform:uppercase;
    color:var(--accent); text-align:center; margin-bottom:28px; position:relative; z-index:2;
  }
  .intro-headline{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(44px, 7.5vw, 104px); line-height:1.05; text-align:center;
    letter-spacing:-1.5px; color:#fff; position:relative; z-index:2; margin:0 auto; max-width:1200px;
    padding:0 24px;
  }
  .intro-headline em{color:var(--primary-bright); font-style:normal;}
  .intro-sub{
    text-align:center; color:var(--dark-mist); font-size:16px; max-width:520px;
    margin:32px auto 0 auto; position:relative; z-index:2; padding:0 24px; line-height:1.7;
  }
  .intro-actions{display:flex; gap:16px; justify-content:center; margin-top:44px; position:relative; z-index:2;}
  .intro-stats{
    display:flex; justify-content:center; gap:56px; flex-wrap:wrap;
    margin:56px auto 0 auto; padding-top:32px; max-width:600px;
    border-top:1px solid rgba(248,250,252,0.14); position:relative; z-index:2;
  }
  .intro-stat{text-align:center;}
  .is-num{font-family:var(--font-display); font-weight:800; font-size:30px; color:#fff;}
  .is-label{font-family:var(--font-mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--dark-mist); margin-top:6px;}
  @media (max-width:900px){ .intro-stats{gap:32px; margin-top:40px;} }
  .intro-actions .btn.ghost{color:#fff; border-color:rgba(255,255,255,0.25);}
  .intro-actions .btn.ghost:hover{background:rgba(255,255,255,0.08);}
  .scroll-cue{
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase;
    color:var(--dark-mist-dim); z-index:2;
  }
  .scroll-cue .line{width:1px; height:36px; background:linear-gradient(180deg, var(--accent), transparent); animation:scrollPulse 1.8s ease-in-out infinite;}
  @keyframes scrollPulse{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

  /* ---------- HERO (secondary, below intro) ---------- */
  .hero{padding:80px 0 0 0;}
  .hero-top{max-width:720px; margin:0 auto; text-align:center;}
  .hero-top h1{font-size:52px; line-height:1.08; margin:16px 0 18px 0; letter-spacing:-0.8px;}
  .hero-top h1 em{color:var(--primary-deep);}
  .hero-top .lede{margin:0 auto; max-width:520px; text-align:center; font-size:17px;}
  .hero-actions{display:flex; gap:14px; justify-content:center; margin-top:30px;}

  .split{
    display:grid; grid-template-columns:1fr 1fr; gap:2px;
    margin-top:64px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  }
  .split-panel{padding:40px 40px 44px 40px; position:relative;}
  .split-panel.a{background:linear-gradient(150deg, var(--dark-bg), #1E2A44); color:#fff;}
  .split-panel.b{background:var(--bg-raised);}
  .split-tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;}
  .split-panel.a .split-tag{color:var(--accent);}
  .split-panel.b .split-tag{color:var(--primary-deep);}
  .split-panel h3{font-size:24px; margin:10px 0 10px 0;}
  .split-panel p{font-size:13.5px; line-height:1.7; max-width:400px;}
  .split-panel.a p{color:var(--dark-mist);}
  .split-panel.b p{color:var(--fg-soft);}
  .split-panel .btn{margin-top:22px;}

  .hero-benefits{
    display:flex; justify-content:center; gap:48px; flex-wrap:wrap;
    margin-top:40px; padding:0 24px;
  }
  .hero-benefit{display:flex; align-items:center; gap:12px; max-width:220px;}
  .hero-benefit svg{width:30px; height:30px; color:var(--primary); flex-shrink:0;}
  .hb-title{font-size:12.5px; font-weight:600; color:var(--fg);}
  .hb-sub{font-size:11px; color:var(--fg-soft); margin-top:2px; line-height:1.4;}
  @media (max-width:900px){ .hero-benefits{gap:24px; justify-content:flex-start;} }

  /* ---------- Logo strip ---------- */
  .strip{padding:52px 0; border-bottom:1px solid var(--border);}
  .strip-label{text-align:center; font-family:var(--font-mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--fg-faint); margin-bottom:26px;}
  .logo-row{display:flex; justify-content:center; align-items:center; gap:52px; flex-wrap:wrap; opacity:0.65;}
  .logo-row .wm{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--fg-soft);}

  /* ---------- Feature grid (Areas of Focus) ---------- */
  .section-head{text-align:center; max-width:600px; margin:0 auto 48px auto;}
  .section-head .lede{margin:12px auto 0 auto; text-align:center;}
  .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .feat-card{
    background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:26px 24px; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), box-shadow .18s var(--ease);
    overflow:hidden;
  }
  .feat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}

  .vibe-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .vibe-grid > *:last-child{margin-top:36px;}
  .vibe-card{
    background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:36px; text-align:center; box-shadow:var(--shadow-sm);
  }
  .vibe-illo{width:100%; max-width:280px; height:auto; margin:0 auto 20px auto; display:block; border-radius:var(--radius-md); box-shadow:var(--shadow-sm);}
  .vibe-card h3{font-family:var(--font-display); font-size:20px; margin-bottom:10px;}
  .vibe-card p{font-size:13.5px; color:var(--fg-soft); line-height:1.7; max-width:340px; margin:0 auto;}
  @media (max-width:900px){ .vibe-grid{grid-template-columns:1fr;} .vibe-grid > *:last-child{margin-top:0;} }

  /* ---------- Photo band ---------- */
  .photo-band{position:relative; min-height:420px; display:flex; align-items:center; overflow:hidden; padding:0;}
  .photo-band-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .photo-band-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(15,23,42,0.94) 0%, rgba(15,23,42,0.75) 40%, rgba(15,23,42,0.35) 75%, rgba(15,23,42,0.15) 100%);
  }
  .photo-band-content{position:relative; z-index:2; max-width:560px;}
  .photo-band-heading{
    font-family:var(--font-display); font-weight:800; font-size:32px; color:#fff;
    line-height:1.25; margin-top:14px;
  }
  @media (max-width:900px){
    .photo-band{min-height:360px;}
    .photo-band-overlay{background:linear-gradient(180deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.92) 55%, rgba(15,23,42,0.96) 100%);}
    .photo-band-heading{font-size:24px;}
  }

  /* ---------- How it works: steps ---------- */
  .steps-layout{display:grid; grid-template-columns:0.8fr 1.2fr; gap:52px; align-items:center;}
  .steps-photo{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); height:440px;}
  .steps-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .steps-heading{font-size:30px; margin:12px 0 32px 0; max-width:480px;}
  .steps-list{display:flex; flex-direction:column; gap:22px;}
  .step-row{display:flex; gap:18px; align-items:flex-start;}
  .step-num{
    flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
    font-weight:700; font-size:15px;
  }
  .step-row h4{font-size:15px; margin:0 0 4px 0; font-weight:600;}
  .step-row p{font-size:13px; color:var(--fg-soft); margin:0; line-height:1.6; max-width:420px;}
  @media (max-width:900px){ .steps-layout{grid-template-columns:1fr;} .steps-photo{height:280px;} }
  .feat-shot{width:calc(100% + 48px); margin:-26px -24px 16px -24px; display:block; border-bottom:1px solid var(--border); border-radius:var(--radius-md) var(--radius-md) 0 0;}
  .feat-ill{width:38px; height:38px; color:var(--primary); margin-bottom:16px;}
  .feat-card h3{font-size:17px; margin-bottom:8px;}
  .feat-card p{font-size:13px; color:var(--fg-soft); line-height:1.65; margin:0 0 14px 0;}
  .feat-card a{font-family:var(--font-mono); font-size:11px; color:var(--primary); letter-spacing:0.4px;}
  .feat-card a:hover{color:var(--primary-deep);}

  /* ---------- Signature showcase ---------- */
  .showcase{
    background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:52px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; box-shadow:var(--shadow-md);
  }
  .showcase h2{font-size:28px;}
  .showcase .lede{margin-top:14px;}
  .showcase-list{margin-top:24px; display:flex; flex-direction:column; gap:12px;}
  .showcase-list li{list-style:none; display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--fg-soft);}
  .showcase-list svg{width:16px; height:16px; color:var(--primary); flex-shrink:0; margin-top:2px;}
  .stamp-demo{
    display:flex; align-items:center; gap:16px; background:rgba(255,255,255,0.5); backdrop-filter:blur(10px) saturate(1.2);
    border:1px solid rgba(255,255,255,0.6); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:12px;
  }
  .stamp{
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    width:64px; height:64px; padding:8px; border-radius:50%; position:relative; flex-shrink:0;
    font-family:var(--font-mono); color:#fff; box-shadow:var(--shadow-sm);
  }
  .stamp-pct{font-size:15px; font-weight:800; letter-spacing:-0.5px;}
  .stamp-label{font-size:8px; letter-spacing:1px; text-transform:uppercase; margin-top:2px; opacity:0.85;}
  .stamp.high{background:var(--primary);}
  .stamp.mid{background:var(--warn);}
  .sd-name{font-family:var(--font-display); font-size:15px;}
  .sd-role{font-size:11.5px; color:var(--fg-soft); margin-top:1px;}

  /* ---------- Testimonials ---------- */
  .quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .quote-card{
    background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:26px 24px; box-shadow:var(--shadow-sm);
  }
  .quote-mark{font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--primary); line-height:0.6; display:block; margin-bottom:10px;}
  .quote-card p{font-size:13.5px; color:var(--fg); line-height:1.7; margin:0 0 16px 0;}
  .quote-who{font-family:var(--font-mono); font-size:10.5px; color:var(--fg-faint); text-transform:uppercase; letter-spacing:0.4px;}
  .quote-who-row{display:flex; align-items:center; gap:10px;}
  .quote-avatar{width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;}

  /* ---------- Dual CTA ---------- */
  .cta-band{display:grid; grid-template-columns:1fr 1fr; gap:2px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);}
  .cta-cell{padding:44px 40px; text-align:left;}
  .cta-cell.dark{background:linear-gradient(150deg, var(--dark-bg), #1E2A44); color:#fff;}
  .cta-cell.accent-fill{background:linear-gradient(150deg, var(--primary-deep), var(--primary));}
  .cta-cell .eyebrow{color:var(--accent);}
  .cta-cell.accent-fill .eyebrow{color:rgba(255,255,255,0.75);}
  .cta-cell h3{color:#fff; font-size:23px; margin:10px 0 18px 0; max-width:320px;}
  .cta-cell .btn{background:#fff; color:var(--fg); border-color:#fff;}
  .cta-cell .btn:hover{background:var(--bg-deep);}
  .form-row{display:flex; flex-direction:column; gap:12px; margin-top:20px; max-width:340px;}
  .form-row input, .form-row textarea{
    font-family:var(--font-body); font-size:13.5px; padding:11px 14px;
    border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,0.25);
    background:rgba(255,255,255,0.08); color:#fff; outline:none;
  }
  .form-row input::placeholder, .form-row textarea::placeholder{color:rgba(255,255,255,0.55);}
  .form-row input:focus, .form-row textarea:focus{border-color:#fff;}
  .form-row input:focus-visible, .form-row textarea:focus-visible{outline:2px solid #fff; outline-offset:2px;}
  .form-note{font-size:11px; color:rgba(255,255,255,0.6); margin-top:10px;}
  .form-status{font-family:var(--font-mono); font-size:11px; letter-spacing:0.4px; color:#fff; margin-top:10px; min-height:14px;}

  .product-shot{border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-md); margin-bottom:24px;}
  .product-shot img{width:100%; display:block;}
  .demo-video{width:100%; display:block;}

  /* ---------- Security & Compliance ---------- */
  .sec-featured{
    background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:36px; margin-bottom:18px; box-shadow:var(--shadow-sm);
    display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .sec-featured:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
  .sec-featured-text svg{width:34px; height:34px; color:var(--primary); margin-bottom:16px;}
  .sec-featured-text h3{font-size:20px; margin-bottom:9px;}
  .sec-featured-text p{font-size:13.5px; color:var(--fg-soft); line-height:1.7; margin:0; max-width:380px;}
  .sec-log{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:4px 18px;}
  .sec-log-row{
    display:flex; align-items:baseline; gap:10px; padding:12px 0;
    border-bottom:1px solid var(--border-soft); font-size:12.5px;
  }
  .sec-log-row:last-child{border-bottom:none;}
  .sec-log-actor{font-weight:600; color:var(--fg); flex-shrink:0;}
  .sec-log-action{color:var(--fg-soft); flex:1;}
  .sec-log-time{font-family:var(--font-mono); font-size:11px; color:var(--fg-faint); flex-shrink:0;}
  @media (max-width:900px){ .sec-featured{grid-template-columns:1fr;} }

  .sec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .sec-card{
    background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:24px; box-shadow:var(--shadow-sm);
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .sec-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
  .sec-card svg{width:28px; height:28px; color:var(--primary); margin-bottom:14px;}
  .sec-card h3{font-size:15.5px; margin-bottom:7px;}
  .sec-card p{font-size:12.5px; color:var(--fg-soft); line-height:1.65; margin:0;}

  /* ---------- Pricing ---------- */
  .pricing-card{
    max-width:520px; margin:0 auto; text-align:center;
    background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:44px 40px; box-shadow:var(--shadow-md);
  }
  .pricing-card .eyebrow{display:block; margin-bottom:8px;}
  .pricing-card h3{font-size:24px; margin-bottom:10px;}
  .pricing-card p{font-size:13.5px; color:var(--fg-soft); max-width:380px; margin:0 auto 24px auto; line-height:1.65;}
  .pricing-list{display:flex; flex-direction:column; gap:9px; margin:0 0 26px 0; text-align:left; max-width:320px; margin-left:auto; margin-right:auto;}
  .pricing-list li{list-style:none; display:flex; gap:9px; font-size:13px; color:var(--fg-soft);}
  .pricing-list svg{width:15px; height:15px; color:var(--primary); flex-shrink:0; margin-top:2px;}

  /* ---------- Open roles ---------- */
  .role-list{display:flex; flex-direction:column; gap:14px; max-width:760px; margin:0 auto;}
  .role-card{
    display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
    background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:22px 26px; transition:box-shadow .15s ease, transform .15s ease;
  }
  .role-card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
  .role-card.placeholder{border-style:dashed;}
  .role-main{flex:1; min-width:240px;}
  .role-title{font-family:var(--font-display); font-size:17px; font-weight:700;}
  .role-example-tag{
    font-family:var(--font-mono); font-size:9px; letter-spacing:0.6px; font-weight:700;
    background:var(--bg-deep); color:var(--fg-faint); border-radius:99px; padding:3px 8px; vertical-align:middle;
  }
  .role-meta{font-family:var(--font-mono); font-size:11px; color:var(--fg-faint); margin-top:4px;}
  .role-summary{font-size:13px; color:var(--fg-soft); line-height:1.6; margin:10px 0 0 0; max-width:56ch;}
  .role-card .btn{flex-shrink:0;}

  /* ---------- Apply modal (light-background form variant) ---------- */
  .apply-role-line{font-family:var(--font-mono); font-size:12px; color:var(--primary-deep); margin-top:-8px;}
  .apply-form{display:flex; flex-direction:column; gap:12px; margin-top:18px;}
  .apply-form input, .apply-form textarea{
    font-family:var(--font-body); font-size:13.5px; padding:11px 14px;
    border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--bg); color:var(--fg); outline:none; resize:vertical;
  }
  .apply-form input:focus, .apply-form textarea:focus{border-color:var(--primary);}
  .apply-form .btn{align-self:flex-start;}
  .apply-note{color:var(--fg-faint);}
  .apply-box .form-status{color:var(--primary-deep);}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:1px;}
  .faq-item{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; overflow:hidden;}
  .faq-q{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:17px 20px; cursor:pointer; font-size:14px; font-weight:600;
    width:100%; text-align:left; background:none; border:none; font-family:var(--font-body); color:var(--fg);
  }
  .faq-q:focus-visible{outline:2px solid var(--primary); outline-offset:-2px;}
  .faq-q .plus{font-family:var(--font-mono); font-size:16px; color:var(--primary); transition:transform .2s var(--ease); flex-shrink:0;}
  .faq-item.open .faq-q .plus{transform:rotate(45deg);}
  .faq-a{display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows .25s var(--ease);}
  .faq-item.open .faq-a{grid-template-rows:1fr;}
  .faq-a-inner{overflow:hidden; min-height:0;}
  .faq-a p{padding:0 20px 18px 20px; margin:0; font-size:13px; color:var(--fg-soft); line-height:1.65;}

  /* ---------- Founder note ---------- */
  .founder-note{
    max-width:640px; margin:0 auto; text-align:center; padding:36px 20px 0 20px;
  }
  .founder-note p{font-size:13.5px; color:var(--fg-soft); line-height:1.7;}

  /* ---------- Scroll reveal ---------- */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
  .reveal-card{transition:opacity .7s var(--ease-expo), transform .7s var(--ease-expo);}

  /* Progressive enhancement: native scroll-driven reveal for simple (non-staggered) sections.
     Staggered card grids stay on the JS/IntersectionObserver path — correctly replicating
     per-card stagger via animation-range needs per-element range math that isn't worth the
     regression risk for a marginal gain over the already-verified JS version. */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes reveal-in-native {
      from { opacity: 0; transform: translateY(16px); }
    }
    .reveal:not(.reveal-card){
      opacity: 1; transform: none; transition: none;
      animation: reveal-in-native .6s var(--ease) both;
      animation-timeline: view();
      animation-range: entry;
    }
  }
  .reveal.visible{opacity:1; transform:translateY(0);}

  /* ---------- Privacy modal ---------- */
  .privacy-overlay{
    display:flex; position:fixed; inset:0; background:rgba(11,18,32,0.6); z-index:100;
    align-items:flex-start; justify-content:center; padding:60px 20px; overflow-y:auto;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s var(--ease), visibility 0s linear .2s;
  }
  .privacy-overlay.open{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .2s var(--ease), visibility 0s linear 0s;
  }
  .privacy-box{
    background:var(--bg-raised); border-radius:var(--radius-lg); max-width:600px; width:100%;
    padding:36px 40px; box-shadow:var(--shadow-lg);
    transform:translateY(12px) scale(0.98); transition:transform .22s var(--ease);
  }
  .privacy-overlay.open .privacy-box{transform:translateY(0) scale(1);}
  .privacy-box h3{font-size:22px; margin-bottom:16px;}
  .privacy-box p{font-size:13px; color:var(--fg-soft); line-height:1.7; margin:0 0 14px 0;}
  .privacy-box .close-btn{float:right; cursor:pointer; font-family:var(--font-mono); color:var(--fg-faint); background:none; border:none; font-size:12px;}
  .privacy-box .close-btn:focus-visible{outline:2px solid var(--primary);}

  /* ---------- Footer ---------- */
  footer{background:var(--dark-bg); color:var(--dark-mist); padding:64px 0 28px 0;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px; border-bottom:1px solid var(--dark-hair);}
  .foot-brand{font-family:var(--font-display); font-weight:800; font-size:22px; color:#fff;}
  .foot-brand-sub{font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-top:6px;}
  .foot-desc{font-size:12.5px; margin-top:14px; max-width:260px; line-height:1.7;}
  .foot-col h3{font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dark-mist-dim); margin:0 0 14px 0; font-weight:400;}
  .foot-col a{display:block; font-size:13px; color:var(--dark-mist); margin-bottom:10px; transition:color .15s var(--ease);}
  .foot-col a:hover{color:#fff;}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:11.5px; color:var(--dark-mist-dim); font-family:var(--font-mono);}

  @media (max-width:900px){
    .nav-links{display:none;}
    .nav-cta .btn.ghost{display:none;}
    .nav-burger{display:flex;}
    .split, .showcase, .cta-band, .feat-grid, .quote-grid, .sec-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .hero-top h1{font-size:36px;}
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }