/* DSA MITRA marketing site — shared by every page that carries the landing chrome:
   index.html, features.html, how-it-works.html, ai.html, mobile-app.html, faq.html, about.html.
   Moved out of index.html's <style> when the site went multi-page, so every page
   reads one cached stylesheet instead of carrying its own copy. */
    /* ===== RESET ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --ink:     #111827;
      --brand:   #16A34A;
      --brand2:  #22C55E;
      --brand3:  #4ADE80;
      --accent:  #1D4ED8;
      --accent2: #3B82F6;
      --green:   #16A34A;
      --red:     #DC2626;
      --surf:    #F0FDF4;
      --card:    #FFFFFF;
      --muted:   #4B5563;   /* was #6B7280 — ~7:1 on the canvas so fine print stays readable */
      --border:  #E5E7EB;
      --shadow:  0 2px 16px rgba(22,163,74,0.08);
      --shadow-lg: 0 20px 60px rgba(22,163,74,0.15);
      --ink9:    #0C0A09;
      --ink8:    #1C1917;
      --paper:   #FAFAF9;
      --line-d:  rgba(255,255,255,0.09);
      --mono:    'IBM Plex Mono', 'Courier New', monospace;

      /* ── TYPOGRAPHY (shared with pricing.html) ── */
      --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --disp:    'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

      /* ── EDITORIAL LUXE ── */
      --serif:   'Instrument Serif', Georgia, serif;
      --canvas:  #F7FBF8;          /* warm paper — never pure white */
      --canvas2: #EEF6F0;          /* recessed paper */
      --hair:    rgba(20,60,38,0.09);
      --hair2:   rgba(20,60,38,0.15);
      --ease:    cubic-bezier(0.16, 1, 0.3, 1);
      /* layered, warm-tinted depth — grey shadows read cheap on paper */
      --sh-sm:   0 1px 2px rgba(28,25,23,0.04), 0 2px 8px rgba(28,25,23,0.04);
      --sh-md:   0 2px 4px rgba(28,25,23,0.03), 0 8px 24px rgba(28,25,23,0.06), 0 1px 0 rgba(255,255,255,0.7) inset;
      --sh-lg:   0 4px 8px rgba(28,25,23,0.04), 0 18px 44px rgba(28,25,23,0.09), 0 40px 90px rgba(20,83,45,0.07);
      --sh-xl:   0 8px 16px rgba(28,25,23,0.05), 0 32px 70px rgba(28,25,23,0.13), 0 70px 140px rgba(20,83,45,0.12);
      --sp-tight: 64px;
      --sp-base:  96px;
      --sp-air:   128px;
    }
    html { scroll-behavior: smooth; font-size: 16px; }
    body { font-family: var(--sans); background: var(--canvas); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }
    button { font-family: inherit; cursor: pointer; }

    /* ===== ANIMATIONS ===== */
    @keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeIn   { from{opacity:0} to{opacity:1} }
    @keyframes floatY   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
    @keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0.3} }
    @keyframes marquee  { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    @keyframes spin     { to{transform:rotate(360deg)} }
    @keyframes barGrow  { from{width:0} to{width:var(--w)} }
    @keyframes countUp  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
    @keyframes shimmer  { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
    @keyframes ripple   { 0%{transform:scale(1);opacity:0.4} 100%{transform:scale(2.5);opacity:0} }
    @keyframes gradMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

    .reveal { opacity:0; transform:translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .reveal-d1 { transition-delay:0.08s; }
    .reveal-d2 { transition-delay:0.16s; }
    .reveal-d3 { transition-delay:0.24s; }
    .reveal-d4 { transition-delay:0.32s; }
    .reveal-d5 { transition-delay:0.40s; }

    /* ===== TYPOGRAPHY ===== */
    h1,h2,h3,h4 { font-family: var(--disp); line-height: 1.12; letter-spacing: -0.5px; }

    /* ===== UTILITIES ===== */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
    .section    { padding: 96px 0; }
    .text-brand  { color: var(--brand); }
    .text-accent { color: var(--accent); }
    .text-muted  { color: var(--muted); }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
      color: var(--brand); margin-bottom: 14px;
    }
    .eyebrow::before { content:''; width:20px; height:2px; background:var(--brand); border-radius:2px; flex-shrink:0; }

    /* ===== BUTTONS ===== */
    .btn { display:inline-flex; align-items:center; gap:8px; border:none; border-radius:10px; font-size:14px; font-weight:700; padding:13px 24px; transition:all 0.2s; cursor:pointer; font-family:inherit; white-space:nowrap; }
    .btn-brand  { background:var(--brand); color:#fff; }
    .btn-brand:hover  { background:var(--brand2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(22,163,74,0.35); }
    .btn-accent { background:var(--accent); color:#fff; }
    .btn-accent:hover { background:var(--accent2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(29,78,216,0.35); }
    .btn-white  { background:#fff; color:var(--brand); }
    .btn-white:hover  { background:rgba(255,255,255,0.9); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,0.15); }
    .btn-ghost  { background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.28); backdrop-filter:blur(8px); }
    .btn-ghost:hover  { background:rgba(255,255,255,0.22); transform:translateY(-2px); }
    .btn-outline { background:transparent; color:var(--brand); border:2px solid var(--brand); }
    .btn-outline:hover { background:var(--brand); color:#fff; }
    .btn-lg { padding:15px 32px; font-size:15px; border-radius:12px; }
    .btn-sm { padding:8px 16px; font-size:13px; border-radius:8px; }
    .btn-full { width:100%; justify-content:center; }
    .btn-wa  { background:#25D366; color:#fff; }
    .btn-wa:hover { background:#1DA851; transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,0.4); }

    /* ===== NAVBAR ===== */
    #navbar {
      position: sticky; top: 0; z-index: 200;
      background: rgba(12,10,9,0.86);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line-d);
      transition: box-shadow 0.3s;
    }
    #navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.45); }
    .nav-inner { max-width:1200px; margin:0 auto; padding:0 5%; height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .nav-logo  { font-family:var(--disp); font-size:21px; font-weight:800; color:#FAFAF9; display:flex; align-items:center; gap:10px; flex-shrink:0; }
    .nav-logo-badge { width:36px; height:36px; border-radius:10px; background:linear-gradient(150deg,#0F2A1C,#163A27); display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 4px 14px rgba(22,163,74,0.35); }
    .nav-links { display:flex; gap:4px; align-items:center; }
    .nav-links a { font-size:14px; color:rgba(250,250,249,0.75); font-weight:500; padding:7px 14px; border-radius:8px; transition:all 0.2s; }
    .nav-links a:hover, .nav-links a.active { color:#86EFAC; background:rgba(255,255,255,0.06); }
    .nav-right { display:flex; align-items:center; gap:10px; }
    .nav-login { font-size:14px; color:rgba(250,250,249,0.85); font-weight:600; padding:7px 16px; border-radius:8px; transition:all 0.2s; }
    .nav-login:hover { color:#86EFAC; background:rgba(255,255,255,0.06); }
    .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
    .hamburger span { display:block; width:22px; height:2px; background:#FAFAF9; border-radius:2px; transition:all 0.3s; }
    #mobile-nav { display:none; background:var(--ink9); border-top:1px solid var(--line-d); padding:16px 5%; }
    #mobile-nav a { display:block; color:rgba(250,250,249,0.85); font-size:15px; font-weight:500; padding:11px 0; border-bottom:1px solid var(--line-d); }
    #mobile-nav a:last-child { border-bottom:none; }

    /* ===== HERO ===== */
    .hero {
      background:
        radial-gradient(ellipse 950px 560px at 80% -12%, rgba(22,163,74,0.24) 0%, transparent 62%),
        radial-gradient(ellipse 720px 500px at -10% 110%, rgba(34,197,94,0.12) 0%, transparent 55%),
        linear-gradient(165deg, #0C0A09 0%, #171310 55%, #1C1410 100%);
      min-height: 92vh; display:flex; align-items:center;
      padding: 80px 0 60px; position:relative; overflow:hidden;
    }
    .hero-mesh {
      position:absolute; inset:0; pointer-events:none; opacity:0.5; mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    }
    .hero-grid-bg {
      position:absolute; inset:0; pointer-events:none; opacity:0.05;
      background-image: linear-gradient(rgba(220,252,231,0.7) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(220,252,231,0.7) 1px, transparent 1px);
      background-size: 48px 48px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
    }
    .hero-container { max-width:1200px; margin:0 auto; padding:0 5%; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:1; }
    .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.32); padding:6px 14px; border-radius:30px; font-size:11.5px; color:#86EFAC; font-weight:600; font-family:var(--mono); letter-spacing:0.4px; margin-bottom:22px; }
    .hero-live-dot { width:7px; height:7px; background:#4ADE80; border-radius:50%; animation:blink 2s infinite; box-shadow:0 0 8px rgba(74,222,128,0.8); }
    .hero-announce { display:inline-flex; align-items:center; gap:9px; background:linear-gradient(92deg,rgba(34,197,94,0.20),rgba(34,197,94,0.06)); border:1px solid rgba(34,197,94,0.45); padding:5px 13px 5px 5px; border-radius:30px; font-family:var(--mono); font-size:12px; color:#DCFCE7; font-weight:600; letter-spacing:0.2px; margin-bottom:16px; text-decoration:none; transition:border-color .2s ease, transform .2s ease; }
    .hero-announce:hover { border-color:rgba(34,197,94,0.75); transform:translateY(-1px); }
    .hero-announce-tag { background:linear-gradient(92deg,#22C55E,#16A34A); color:#04120A; font-size:9.5px; font-weight:800; letter-spacing:0.6px; padding:3px 9px; border-radius:30px; }
    .hero-announce-arrow { opacity:0.7; font-weight:700; }
    .hero h1 { font-size:clamp(34px,4.5vw,58px); color:var(--paper); margin-bottom:20px; }
    .hero h1 em { font-style:normal; background:linear-gradient(92deg,#86EFAC 0%,#4ADE80 45%,#22C55E 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .hero-sub { font-size:17px; color:rgba(250,250,249,0.6); line-height:1.8; margin-bottom:14px; max-width:490px; }
    .hero-notlender { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; color:rgba(250,250,249,0.75); background:rgba(255,255,255,0.04); border:1px dashed rgba(250,250,249,0.25); border-radius:8px; padding:8px 13px; margin-bottom:32px; }
    .hero-notlender b { color:#86EFAC; font-weight:600; }
    .hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
    .hero-trust { display:flex; gap:10px; flex-wrap:wrap; }
    .trust-chip { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); padding:7px 13px; border-radius:8px; font-size:12px; color:rgba(250,250,249,0.72); font-weight:500; }
    .trust-tick { width:16px; height:16px; background:var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; font-weight:900; flex-shrink:0; }
    /* floating notification toasts around the mockup */
    .hero-toast { position:absolute; z-index:3; display:flex; gap:10px; align-items:center; background:rgba(28,25,23,0.92); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:10px 14px 10px 11px; box-shadow:0 18px 50px rgba(0,0,0,0.55); backdrop-filter:blur(8px); }
    .ht-ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
    .ht-label { font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:rgba(250,250,249,0.45); margin-bottom:2px; }
    .ht-text  { font-size:12px; font-weight:600; color:var(--paper); white-space:nowrap; }
    .ht-t1 { top:4%; right:-26px; animation:floatY 6s ease-in-out infinite; }
    .ht-t2 { bottom:8%; left:-34px; animation:floatY 7s ease-in-out 1.4s infinite; }

    /* ===== MOCKUP ===== */
    .mockup-outer { position:relative; animation:floatY 5s ease-in-out infinite; }
    .mockup-glow  { position:absolute; inset:-30px; border-radius:30px; background:radial-gradient(ellipse, rgba(22,163,74,0.18) 0%, transparent 70%); filter:blur(24px); z-index:0; }
    .mockup { position:relative; z-index:1; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.05); }
    .mkbar  { background:linear-gradient(135deg,var(--brand),var(--brand2)); padding:10px 15px; display:flex; align-items:center; gap:8px; }
    .mkbar-dots { display:flex; gap:5px; }
    .mkbar-dot  { width:9px; height:9px; border-radius:50%; }
    .mkbar-title{ color:rgba(255,255,255,0.9); font-size:11.5px; font-family:var(--disp); font-weight:700; margin-left:4px; }
    .mkbody { background:#F9FAFB; padding:13px; }
    /* KPIs */
    .mk-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:9px; }
    .mk-kpi  { background:#fff; border-radius:9px; padding:9px 10px; border:1px solid #E5E7EB; }
    .mk-kpi-l { font-size:8.5px; color:#9CA3AF; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px; }
    .mk-kpi-v { font-family:var(--disp); font-size:15px; font-weight:800; color:var(--ink); }
    .mk-kpi-s { font-size:8px; color:var(--green); margin-top:2px; font-weight:600; }
    .mk-kpi-s.red { color:var(--red); }
    /* Row 2 */
    .mk-row2 { display:grid; grid-template-columns:1.6fr 1fr; gap:7px; margin-bottom:9px; }
    .mk-box  { background:#fff; border-radius:9px; padding:10px; border:1px solid #E5E7EB; }
    .mk-box-title { font-size:9px; font-weight:700; color:var(--ink); margin-bottom:8px; }
    /* Chart bars */
    .mk-bars { display:flex; align-items:flex-end; gap:4px; height:48px; }
    .mk-bar  { flex:1; border-radius:3px 3px 0 0; transition:opacity 0.3s; }
    /* Pipeline */
    .mk-stage { display:flex; align-items:center; gap:5px; margin-bottom:5px; }
    .mk-stage-name { font-size:8px; color:#9CA3AF; width:72px; flex-shrink:0; }
    .mk-stage-track{ flex:1; background:#F3F4F6; border-radius:3px; height:7px; overflow:hidden; }
    .mk-stage-fill { height:100%; border-radius:3px; }
    .mk-stage-cnt  { font-size:8px; font-weight:800; color:var(--ink); width:14px; text-align:right; }
    /* Leads table */
    .mk-leads { background:#fff; border-radius:9px; padding:10px; border:1px solid #E5E7EB; }
    .mk-leads-h { display:flex; justify-content:space-between; margin-bottom:7px; }
    .mk-leads-t { font-size:9px; font-weight:800; color:var(--ink); }
    .mk-lead-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid #F3F4F6; }
    .mk-lead-row:last-child { border:none; }
    .mk-lead-n { font-size:9px; font-weight:700; color:#1F2937; }
    .mk-lead-b { font-size:8px; color:#9CA3AF; }
    .mk-lead-a { font-size:9px; font-weight:800; color:var(--brand); }
    .mk-badge  { font-size:8px; font-weight:700; padding:2px 8px; border-radius:10px; }

    /* ===== TICKER / BANK BAR ===== */
    .ticker { background:var(--brand); padding:13px 0; display:flex; align-items:center; overflow:hidden; }
    .ticker-label { flex-shrink:0; margin-left:5%; margin-right:20px; background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.22); color:#fff; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:1.6px; padding:7px 14px; border-radius:6px; white-space:nowrap; }
    .ticker-clip  { flex:1; overflow:hidden; }
    .ticker-track { display:flex; animation:marquee 32s linear infinite; white-space:nowrap; }
    .ticker-item { display:inline-flex; align-items:center; gap:9px; padding:0 32px; color:rgba(255,255,255,0.9); font-size:13px; font-weight:500; }
    .ticker-sep { color:rgba(255,255,255,0.4); }

    /* ===== STATS ===== */
    .stats-section { background:linear-gradient(120deg, #16A34A, #22C55E, #4ADE80, #16A34A); background-size:300% 300%; animation:gradMove 11s ease infinite; padding:72px 0; position:relative; overflow:hidden; }
    .stats-section::before { content:''; position:absolute; inset:0; opacity:0.45; mix-blend-mode:overlay; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"); }
    .stats-section::after { content:''; position:absolute; top:-60%; bottom:-60%; width:130px; left:-25%; transform:rotate(16deg); pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); animation:shineSweep 7.5s ease-in-out infinite; }
    @keyframes shineSweep { 0%, 55% { left:-25%; } 90%, 100% { left:125%; } }
    .stats-grid { position:relative; z-index:1; }
    .stat-card { transition:transform 0.25s, background 0.25s, box-shadow 0.25s; }
    .stat-card:hover { transform:translateY(-6px); background:rgba(255,255,255,0.2); box-shadow:0 18px 44px rgba(0,0,0,0.18); }
    .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1100px; margin:0 auto; padding:0 5%; }
    .stat-card { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:18px; padding:28px 22px; text-align:center; }
    .stat-num  { font-family:var(--disp); font-size:44px; font-weight:800; color:#fff; line-height:1; }
    .stat-acc  { color:rgba(255,255,255,0.65); }
    .stat-lbl  { font-size:14px; color:rgba(255,255,255,0.7); margin-top:8px; }

    /* ===== SECTION HEADERS ===== */
    .sec-header { margin-bottom:52px; }
    .sec-header.center { text-align:center; }
    .sec-header.center .eyebrow { justify-content:center; }
    .sec-h2 { font-size:clamp(26px,3.5vw,44px); color:var(--ink); margin-bottom:14px; }
    .sec-sub { font-size:16px; color:var(--muted); line-height:1.75; max-width:560px; }
    .sec-header.center .sec-sub { margin:0 auto; }

    /* ===== FEATURES ===== */
    .features-bg { background:#F9FAFB; }
    .feat-card {
      background:#fff; border:1.5px solid var(--border); border-radius:16px; padding:28px;
      position:relative; overflow:hidden; transition:all 0.25s;
    }
    .feat-card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(22,163,74,0.1); border-color:#BBF7D0; }
    .feat-card::after { content:''; position:absolute; inset:0; opacity:0; background:linear-gradient(135deg,rgba(22,163,74,0.02),rgba(34,197,94,0.02)); transition:opacity 0.25s; }
    .feat-card:hover::after { opacity:1; }
    .feat-card-accent { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),var(--brand2)); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; }
    .feat-card:hover .feat-card-accent { transform:scaleX(1); }
    .feat-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:25px; margin-bottom:18px; }
    .fi-1 { background:#F0FDF4; } .fi-2 { background:#ECFDF5; } .fi-3 { background:#EFF6FF; }
    .fi-4 { background:#FDF4FF; } .fi-5 { background:#F0FDF4; } .fi-6 { background:#FEF2F2; }
    .fi-7 { background:#F0FDF4; } .fi-8 { background:#FFFBEB; } .fi-9 { background:#F0FDFA; }
    .feat-title { font-family:var(--disp); font-size:17px; font-weight:700; color:var(--ink); margin-bottom:9px; }
    .feat-desc  { font-size:14px; color:var(--muted); line-height:1.72; }

    /* ===== HOW IT WORKS ===== */
    .hiw-bg { background:linear-gradient(150deg, #1C1917 0%, #1F2937 60%, #111827 100%); padding:96px 0; position:relative; overflow:hidden; }
    .hiw-bg::before { content:''; position:absolute; width:500px; height:500px; background:rgba(22,163,74,0.05); border-radius:50%; top:-150px; right:-100px; }
    .hiw-bg .eyebrow { color:var(--brand2); }
    .hiw-bg .sec-h2  { color:#fff; }
    .hiw-bg .sec-sub { color:rgba(255,255,255,0.55); }
    .hiw-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
    .hiw-steps::before { content:''; position:absolute; top:30px; left:12.5%; right:12.5%; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(34,197,94,0.05), rgba(34,197,94,0.55) 50%, rgba(34,197,94,0.05)); transform:scaleX(0); transform-origin:left; transition:transform 1.5s cubic-bezier(.22,1,.36,1) 0.35s; }
    .hiw-steps.visible::before { transform:scaleX(1); }
    .hiw-step { text-align:center; }
    .hiw-num { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand2)); display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-size:22px; font-weight:800; color:#fff; margin:0 auto 18px; position:relative; z-index:1; box-shadow:0 6px 24px rgba(22,163,74,0.45); }
    .hiw-title { font-family:var(--disp); font-size:16px; font-weight:700; color:#fff; margin-bottom:10px; }
    .hiw-desc  { font-size:13px; color:rgba(255,255,255,0.68); line-height:1.7; }

    /* ===== LOAN TYPES ===== */
    .loan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .loan-card { background:#fff; border:1.5px solid var(--border); border-radius:16px; padding:24px 18px; text-align:center; transition:all 0.22s; }
    .loan-card:hover { border-color:var(--brand2); background:var(--surf); transform:translateY(-4px); box-shadow:0 12px 36px rgba(22,163,74,0.1); }
    .loan-emoji { width:64px; height:64px; margin:0 auto 13px; border-radius:20px; background:linear-gradient(135deg,#F0FDF4,#DCFCE7); border:1px solid #BBF7D0; display:flex; align-items:center; justify-content:center; font-size:30px; }
    .loan-name  { font-family:var(--disp); font-size:14px; font-weight:700; color:var(--ink); }

    /* ===== PRICING ===== */
    .plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .plan-card { background:#fff; border:1.5px solid var(--border); border-radius:20px; padding:36px 28px; position:relative; transition:all 0.25s; }
    .plan-card:hover { transform:translateY(-5px); box-shadow:0 20px 56px rgba(22,163,74,0.1); }
    .plan-card.popular { border:2px solid var(--brand); background:linear-gradient(160deg,#F0FDF4,#DCFCE7); }
    .plan-popular-tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff; font-size:11.5px; font-weight:700; padding:5px 18px; border-radius:20px; white-space:nowrap; box-shadow:0 4px 14px rgba(22,163,74,0.4); }
    .plan-name    { font-family:var(--disp); font-size:20px; font-weight:800; color:var(--ink); margin-bottom:6px; }
    .plan-sub     { font-size:14px; color:var(--muted); margin-bottom:24px; }
    .plan-price   { font-family:var(--disp); font-size:42px; font-weight:800; color:var(--brand); line-height:1; }
    .plan-per     { font-size:14px; font-weight:400; color:var(--muted); }
    .plan-trial   { font-size:12px; color:var(--green); font-weight:700; margin:7px 0 26px; }
    .plan-feats   { list-style:none; margin-bottom:30px; }
    .plan-feats li { font-size:14px; color:var(--ink); padding:9px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
    .plan-feats li:last-child { border:none; }
    .pf-ok { width:19px; height:19px; background:#ECFDF5; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .pf-ok::after { content:'✓'; color:var(--green); font-size:11px; font-weight:900; }
    .pf-no { width:19px; height:19px; background:#F3F4F6; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .pf-no::after { content:'—'; color:#CCC; font-size:11px; font-weight:700; }

    /* ===== BANKS ===== */
    .banks-bg { background:#fff; background-image:radial-gradient(rgba(22,163,74,0.07) 1px, transparent 1px); background-size:26px 26px; padding:80px 0; }
    .banks-chips { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:44px; }
    .bank-chip { display:flex; align-items:center; gap:9px; background:var(--surf); border:1.5px solid #BBF7D0; border-radius:40px; padding:10px 18px; font-size:13px; font-weight:600; color:var(--ink); transition:all 0.2s; }
    .bank-chip:hover { border-color:var(--brand); background:#DCFCE7; transform:translateY(-2px); box-shadow:0 4px 14px rgba(22,163,74,0.12); }
    .bank-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

    /* ===== COMPARISON TABLE ===== */
    .compare-table { width:100%; border-collapse:collapse; font-size:14px; }
    .compare-table th { text-align:left; padding:13px 16px; background:#F9FAFB; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid var(--border); }
    .compare-table td { padding:13px 16px; border-bottom:1px solid var(--border); color:var(--ink); vertical-align:middle; }
    .compare-table tr:last-child td { border-bottom:none; }
    .compare-table tbody tr:hover td { background:var(--surf); }
    .compare-check { color:var(--green); font-weight:700; font-size:16px; }
    .compare-cross { color:#CCCCCC; font-weight:700; font-size:16px; }

    /* ===== FAQ ===== */
    .faq-wrap { max-width:780px; margin:0 auto; }
    .faq-item { background:#fff; border:1px solid var(--border); border-radius:14px; margin-bottom:12px; overflow:hidden; }
    .faq-q { padding:18px 22px; font-weight:600; font-size:15px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:var(--ink); user-select:none; transition:background 0.2s; }
    .faq-q:hover { background:var(--surf); }
    .faq-icon { font-size:20px; color:var(--brand2); transition:transform 0.28s; }
    .faq-a { max-height:0; overflow:hidden; padding:0 22px; font-size:14px; color:var(--muted); line-height:1.78; transition:max-height 0.35s ease, padding 0.35s; }
    .faq-item.open .faq-a { max-height:400px; padding:0 22px 18px; }
    .faq-item.open .faq-icon { transform:rotate(180deg); }

    /* ===== CONTACT ===== */
    .contact-bg { background:#F9FAFB; padding:96px 0; }
    .contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:start; }
    .contact-info-item { display:flex; gap:14px; margin-bottom:26px; }
    .ci-icon { width:46px; height:46px; border-radius:13px; background:var(--surf); border:1px solid #BBF7D0; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
    .ci-label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; }
    .ci-val   { font-size:15px; font-weight:600; color:var(--ink); }
    .contact-form-card { background:#fff; border:1.5px solid var(--border); border-radius:20px; padding:38px; box-shadow:0 8px 40px rgba(0,0,0,0.06); }
    .form-title { font-family:var(--disp); font-weight:800; font-size:20px; color:var(--ink); margin-bottom:4px; }
    .form-sub   { font-size:13px; color:var(--muted); margin-bottom:26px; }
    .form-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
    .form-label { font-size:12px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:0.4px; }
    .form-input, .form-select, .form-textarea {
      padding:11px 14px; border-radius:10px; border:1.5px solid var(--border);
      font-size:14px; font-family:inherit; outline:none; background:#FAFAFA;
      color:var(--ink); transition:border-color 0.2s, box-shadow 0.2s;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(22,163,74,0.1); }
    .form-textarea { resize:vertical; min-height:90px; }
    .form-submit { width:100%; padding:14px; border:none; border-radius:12px; background:var(--brand); color:#fff; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; transition:all 0.2s; margin-top:6px; }
    .form-submit:hover { background:var(--brand2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(22,163,74,0.35); }
    .form-fine { font-size:12.5px; color:var(--muted); text-align:center; margin-top:10px; }
    .form-fine a { color:var(--brand); }
    #form-success { display:none; text-align:center; padding:30px 0; }

    /* ===== CTA BANNER ===== */
    .cta-banner {
      background: linear-gradient(150deg, #16A34A 0%, #22C55E 50%, #4ADE80 100%);
      background-size: 300% 300%; animation: gradMove 8s ease infinite;
      padding:96px 0; text-align:center; position:relative; overflow:hidden;
    }
    .cta-banner::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:rgba(255,255,255,0.06); top:-200px; left:50%; transform:translateX(-50%); }
    .cta-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; padding:0 5%; }
    .cta-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); padding:7px 16px; border-radius:30px; color:#fff; font-size:12px; font-weight:600; margin-bottom:24px; }
    .cta-h2   { font-size:clamp(28px,4vw,48px); color:#fff; margin-bottom:16px; }
    .cta-sub  { font-size:16px; color:rgba(255,255,255,0.82); line-height:1.75; margin-bottom:36px; }
    .cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

    /* ===== FOOTER ===== */
    footer { background:#111827; color:rgba(255,255,255,0.55); padding:64px 0 28px; }
    .footer-inner { max-width:1200px; margin:0 auto; padding:0 5%; }
    .footer-top  { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:52px; }
    .footer-brand { }
    .footer-logo { font-family:var(--disp); font-size:20px; font-weight:800; color:#fff; display:flex; align-items:center; gap:10px; margin-bottom:14px; }
    .footer-logo-badge { width:30px; height:30px; border-radius:8px; background:linear-gradient(150deg,#0F2A1C,#163A27); display:flex; align-items:center; justify-content:center; font-size:14px; }
    .footer-desc { font-size:13.5px; line-height:1.7; margin-bottom:22px; }
    .footer-socials { display:flex; gap:10px; }
    .footer-social { width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; font-size:16px; transition:all 0.2s; text-decoration:none; }
    .footer-social:hover { background:rgba(22,163,74,0.25); transform:translateY(-2px); }
    .footer-col h5 { font-family:var(--disp); font-size:13px; font-weight:700; color:#fff; margin-bottom:18px; letter-spacing:0.3px; }
    .footer-col a { display:block; font-size:13.5px; color:rgba(255,255,255,0.65); margin-bottom:10px; transition:color 0.2s; }
    .footer-col a:hover { color:var(--brand2); }
    .footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; }
    .footer-links { display:flex; flex-wrap:wrap; gap:12px 20px; }
    .footer-links a { color:rgba(255,255,255,0.4); transition:color 0.2s; }
    .footer-links a:hover { color:var(--brand2); }

    /* ===== BACK TO TOP ===== */
    #back-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; background:var(--brand); color:#fff; border:none; border-radius:12px; font-size:18px; cursor:pointer; opacity:0; transform:translateY(12px); transition:all 0.3s; z-index:150; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(22,163,74,0.4); }
    #back-top.show { opacity:1; transform:translateY(0); }
    #back-top:hover { background:var(--brand2); transform:translateY(-2px); }

    /* ===== WHATSAPP FLOAT ===== */
    .wa-float { position:fixed; bottom:28px; left:28px; z-index:150; display:flex; align-items:center; gap:10px; background:#25D366; color:#fff; border:none; border-radius:50px; padding:11px 20px; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 6px 24px rgba(37,211,102,0.45); transition:all 0.2s; font-family:inherit; text-decoration:none; }
    .wa-float:hover { background:#1DA851; transform:translateY(-3px); box-shadow:0 10px 32px rgba(37,211,102,0.5); }
    .wa-float::before { content:''; position:absolute; inset:-4px; border-radius:50px; background:#25D366; opacity:0.3; animation:ripple 2.5s ease-out infinite; }

    /* ===== SCROLL PROGRESS BAR ===== */
    #scroll-progress { position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--brand),var(--brand3)); z-index:300; box-shadow:0 0 10px rgba(22,163,74,0.55); }

    /* ===== HERO MOCKUP BAR GROWTH ===== */
    @keyframes mkGrow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
    .mk-bars .mk-bar { transform-origin:bottom; animation:mkGrow 0.9s cubic-bezier(.22,1,.36,1) both; }
    .mk-bars .mk-bar:nth-child(1){ animation-delay:0.8s; } .mk-bars .mk-bar:nth-child(2){ animation-delay:0.95s; }
    .mk-bars .mk-bar:nth-child(3){ animation-delay:1.1s; } .mk-bars .mk-bar:nth-child(4){ animation-delay:1.25s; }
    .mk-bars .mk-bar:nth-child(5){ animation-delay:1.4s; } .mk-bars .mk-bar:nth-child(6){ animation-delay:1.55s; }

    /* ===== POSITIONING STRIP ===== */
    .pos-strip { background:var(--paper); padding:88px 0; border-bottom:1px solid var(--border); position:relative; overflow:hidden; }
    .pos-strip::before { content:''; position:absolute; left:50%; top:-120px; transform:translateX(-50%); width:640px; height:280px; background:radial-gradient(ellipse, rgba(22,163,74,0.07) 0%, transparent 70%); pointer-events:none; }
    .pos-inner { text-align:center; max-width:840px; }
    .pos-kicker { display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--brand); margin-bottom:22px; }
    .pos-kicker::before, .pos-kicker::after { content:''; width:34px; height:1.5px; background:linear-gradient(90deg, transparent, var(--brand)); }
    .pos-kicker::after { background:linear-gradient(90deg, var(--brand), transparent); }
    .pos-h { font-family:var(--disp); font-size:clamp(26px,3.8vw,46px); font-weight:800; color:var(--ink); line-height:1.18; margin-bottom:18px; }
    .pos-h .pos-strike { position:relative; white-space:nowrap; color:#9CA3AF; }
    .pos-h .pos-strike::after { content:''; position:absolute; left:-2%; right:-2%; top:54%; height:4px; background:var(--brand); border-radius:3px; transform:rotate(-2deg); }
    .pos-h em { font-style:normal; color:var(--brand); }
    .pos-sub { font-size:16.5px; color:var(--muted); line-height:1.8; max-width:640px; margin:0 auto; }

    /* ===== PRODUCT DEMO PLAYER ===== */
    .demo-bg { background:linear-gradient(170deg, #0C0A09 0%, #17120E 60%, #1B140F 100%); padding:100px 0; position:relative; overflow:hidden; }
    .demo-bg::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0.4; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"); }
    .demo-bg .eyebrow { color:var(--brand2); }
    .demo-bg .sec-h2  { color:var(--paper); }
    .demo-bg .sec-sub { color:rgba(250,250,249,0.55); }
    .demo-player { max-width:920px; margin:0 auto; position:relative; z-index:1; border-radius:22px; background:#141110; border:1px solid rgba(255,255,255,0.1); box-shadow:0 50px 130px rgba(0,0,0,0.6), 0 0 0 1px rgba(22,163,74,0.12), 0 0 90px rgba(22,163,74,0.1); overflow:hidden; }
    .demo-chrome { display:flex; align-items:center; gap:10px; padding:12px 16px; background:rgba(255,255,255,0.035); border-bottom:1px solid rgba(255,255,255,0.08); }
    .demo-chrome-t { font-family:var(--mono); font-size:11px; color:rgba(250,250,249,0.5); margin-left:6px; }
    .demo-live { margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1px; color:#F87171; animation:blink 1.6s infinite; }
    .demo-stage { position:relative; height:400px; background:radial-gradient(ellipse 600px 300px at 50% 0%, rgba(22,163,74,0.09) 0%, transparent 60%), #131010; }
    .demo-scene { position:absolute; inset:0; opacity:0; transform:translateY(12px); transition:opacity 0.5s ease, transform 0.5s ease; pointer-events:none; display:flex; align-items:center; justify-content:center; gap:28px; padding:30px 34px; }
    .demo-scene.active { opacity:1; transform:none; }
    .demo-card { background:#1E1A18; border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:16px; box-shadow:0 16px 44px rgba(0,0,0,0.4); }
    .dc-label { font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:rgba(250,250,249,0.4); margin-bottom:10px; }
    .demo-caption { position:absolute; bottom:16px; left:0; right:0; text-align:center; font-size:13px; color:rgba(250,250,249,0.7); }
    .demo-caption b { color:#86EFAC; font-weight:600; }
    /* scene 1 — lead arrives */
    .ds1-form { width:250px; opacity:0; }
    .demo-scene.active .ds1-form { animation:fadeUp 0.55s ease 0.15s forwards; }
    .ds1-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:12px; }
    .ds1-k { color:rgba(250,250,249,0.45); } .ds1-v { color:var(--paper); font-weight:600; }
    .ds1-arrow { font-size:26px; color:var(--brand2); opacity:0; }
    .demo-scene.active .ds1-arrow { animation:fadeIn 0.4s ease 0.7s forwards; }
    .ds1-list { width:250px; }
    .ds1-newcard { background:rgba(22,163,74,0.14); border:1px solid rgba(34,197,94,0.45); border-radius:10px; padding:10px 12px; margin-bottom:8px; opacity:0; }
    .demo-scene.active .ds1-newcard { animation:fadeUp 0.5s ease 1s forwards; }
    .ds1-old { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
    .ds1-n { font-size:12.5px; font-weight:700; color:var(--paper); }
    .ds1-m { font-size:10.5px; color:rgba(250,250,249,0.45); margin-top:2px; }
    /* scene 2 — whatsapp */
    .ds2-phone { width:290px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,0.12); background:#0B141A; }
    .ds2-head { background:#1F2C34; padding:10px 14px; display:flex; align-items:center; gap:10px; }
    .ds2-av { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand3)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; }
    .ds2-name { font-size:12.5px; font-weight:700; color:#E9EDEF; } .ds2-on { font-size:10px; color:#8696A0; }
    .ds2-body { padding:16px 14px 20px; min-height:170px; background-image:radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); background-size:14px 14px; }
    .ds2-bubble { max-width:86%; margin-left:auto; background:#005C4B; border-radius:10px 2px 10px 10px; padding:9px 11px; font-size:11.5px; line-height:1.55; color:#E9EDEF; opacity:0; }
    .demo-scene.active .ds2-bubble { animation:fadeUp 0.45s ease 1.1s forwards; }
    .ds2-time { display:block; text-align:right; font-size:8.5px; color:rgba(233,237,239,0.55); margin-top:4px; }
    .ds2-typing { display:inline-flex; gap:4px; background:#1F2C34; border-radius:12px; padding:9px 13px; margin-bottom:10px; opacity:0; }
    .demo-scene.active .ds2-typing { animation:fadeIn 0.3s ease 0.3s forwards, fadeOut 0.3s ease 1s forwards; }
    @keyframes fadeOut { from{opacity:1} to{opacity:0} }
    .ds2-dot { width:6px; height:6px; border-radius:50%; background:#8696A0; animation:blink 1s infinite; }
    .ds2-dot:nth-child(2){ animation-delay:0.2s; } .ds2-dot:nth-child(3){ animation-delay:0.4s; }
    .ds2-auto { width:210px; }
    .ds2-auto-line { display:flex; align-items:center; gap:9px; font-size:12px; color:rgba(250,250,249,0.7); padding:8px 0; }
    .ds2-tick { color:#4ADE80; font-weight:800; }
    /* scene 3 — pipeline */
    .ds3-board { width:100%; max-width:660px; }
    .ds3-cols { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; position:relative; }
    .ds3-col { background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.08); border-radius:12px; min-height:200px; padding:9px; }
    .ds3-col-t { font-family:var(--mono); font-size:8.5px; letter-spacing:0.8px; text-transform:uppercase; color:rgba(250,250,249,0.45); margin-bottom:8px; white-space:nowrap; overflow:hidden; }
    .ds3-ghost { background:rgba(255,255,255,0.05); border-radius:8px; height:34px; margin-bottom:7px; }
    .ds3-mover { position:absolute; top:26px; left:0; width:calc(20% - 8px); background:linear-gradient(135deg,var(--brand),var(--brand2)); border-radius:9px; padding:8px 9px; box-shadow:0 10px 30px rgba(22,163,74,0.5); z-index:2; }
    .demo-scene.active .ds3-mover { animation:ds3move 3.6s ease-in-out 0.3s forwards; }
    @keyframes ds3move {
      0%   { transform:translateX(0); }
      22%  { transform:translateX(calc(125% + 2.5px)); }
      44%  { transform:translateX(calc(250% + 5px)); }
      70%  { transform:translateX(calc(375% + 7.5px)); }
      100% { transform:translateX(calc(500% + 10px)); }
    }
    .ds3-mv-n { font-size:10.5px; font-weight:800; color:#fff; white-space:nowrap; }
    .ds3-mv-m { font-size:8.5px; color:rgba(255,255,255,0.8); white-space:nowrap; }
    /* scene 4 — commission */
    .ds4-main { text-align:center; }
    .ds4-amt { font-family:var(--disp); font-size:56px; font-weight:800; color:#4ADE80; line-height:1; text-shadow:0 0 40px rgba(74,222,128,0.35); }
    .ds4-sub { font-size:13px; color:rgba(250,250,249,0.55); margin-top:10px; }
    .ds4-chip { display:inline-flex; align-items:center; gap:8px; margin-top:16px; background:rgba(74,222,128,0.1); border:1px solid rgba(74,222,128,0.35); color:#4ADE80; border-radius:30px; padding:7px 16px; font-size:12px; font-weight:700; opacity:0; }
    .demo-scene.active .ds4-chip { animation:fadeUp 0.5s ease 1.5s forwards; }
    .ds4-side { width:210px; }
    .ds4-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:12px; }
    .ds4-bank { color:rgba(250,250,249,0.75); font-weight:600; }
    .ds4-st-ok { color:#4ADE80; font-family:var(--mono); font-size:10px; }
    .ds4-st-pend { color:#FBBF24; font-family:var(--mono); font-size:10px; }
    /* controls */
    .demo-controls { display:flex; align-items:center; gap:14px; padding:14px 18px; background:rgba(255,255,255,0.035); border-top:1px solid rgba(255,255,255,0.08); flex-wrap:wrap; }
    #demo-toggle { width:40px; height:40px; border-radius:50%; border:none; background:var(--brand); color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; }
    #demo-toggle:hover { background:var(--brand2); transform:scale(1.08); }
    .demo-progress { flex:1; min-width:120px; height:5px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden; }
    #demo-bar { height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--brand3)); border-radius:4px; }
    .demo-chips { display:flex; gap:8px; flex-wrap:wrap; }
    .demo-chip { background:transparent; border:1px solid rgba(255,255,255,0.14); color:rgba(250,250,249,0.55); font-size:11px; font-weight:600; font-family:var(--mono); padding:7px 12px; border-radius:20px; transition:all 0.2s; }
    .demo-chip:hover { border-color:var(--brand2); color:#86EFAC; }
    .demo-chip.active { background:rgba(22,163,74,0.16); border-color:var(--brand2); color:#86EFAC; }
    /* big play overlay */
    .demo-overlay { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(12,10,9,0.55); backdrop-filter:blur(3px); cursor:pointer; transition:opacity 0.4s; }
    .demo-overlay.hide { opacity:0; pointer-events:none; }
    .demo-bigplay { width:76px; height:76px; border-radius:50%; border:none; background:var(--brand); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; padding-left:6px; box-shadow:0 12px 44px rgba(22,163,74,0.55); animation:floatY 3.5s ease-in-out infinite; cursor:pointer; }
    .demo-overlay span { font-family:var(--mono); font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(250,250,249,0.75); }

    /* ===== MOBILE APP SHOWCASE ===== */
    .app-bg { background:linear-gradient(150deg,#F0FDF4 0%,#FFFFFF 60%,#F0FDF4 100%); padding:100px 0; overflow:hidden; }
    .app-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
    .app-points { list-style:none; margin:26px 0 32px; }
    .app-points li { display:flex; gap:12px; align-items:flex-start; padding:9px 0; font-size:15px; color:var(--ink); }
    .app-points .pf-ok { margin-top:2px; }
    .app-soon { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); background:#fff; border:1px dashed #86EFAC; border-radius:8px; padding:9px 14px; font-weight:600; }
    .phone-wrap { position:relative; display:flex; justify-content:center; }
    .phone-halo { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(22,163,74,0.16) 0%, transparent 65%); top:50%; left:50%; transform:translate(-50%,-50%); }
    .phone { position:relative; width:262px; border-radius:40px; background:#1C1917; padding:10px; box-shadow:0 50px 110px rgba(28,25,23,0.4), 0 0 0 1.5px rgba(28,25,23,0.9); animation:floatY 6s ease-in-out infinite; z-index:1; }
    .phone-notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:96px; height:22px; background:#1C1917; border-radius:0 0 14px 14px; z-index:3; }
    .phone-screen { border-radius:31px; overflow:hidden; background:#F9FAFB; }
    .ph-status { display:flex; justify-content:space-between; padding:10px 18px 4px; font-family:var(--mono); font-size:9px; color:#9CA3AF; background:#fff; }
    .ph-head { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; padding:14px 16px 12px; }
    .ph-head-t { font-family:var(--disp); font-size:15px; font-weight:800; }
    .ph-head-s { font-size:9.5px; opacity:0.85; margin-top:1px; }
    .ph-kpis { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:11px 12px 4px; }
    .ph-kpi { background:#fff; border:1px solid #F3F4F6; border-radius:11px; padding:9px 10px; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
    .ph-kpi-l { font-size:7.5px; color:#9CA3AF; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
    .ph-kpi-v { font-family:var(--disp); font-size:14px; font-weight:800; color:var(--ink); margin-top:2px; }
    .ph-body { position:relative; height:296px; }
    .ph-view { position:absolute; inset:0; opacity:0; transition:opacity 0.5s ease; pointer-events:none; overflow:hidden; }
    .ph-view.on { opacity:1; }
    .ph-sec-t { padding:8px 12px 4px; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#9CA3AF; }
    .ph-dots { display:flex; justify-content:center; gap:5px; padding:7px 0 3px; background:#fff; }
    .ph-dot { width:5px; height:5px; border-radius:3px; background:#E5E7EB; transition:all 0.3s; }
    .ph-dot.on { background:var(--brand); width:15px; }
    .ph-stage { display:flex; align-items:center; gap:6px; margin:0 12px 8px; }
    .ph-stage-n { font-size:8.5px; color:#6B7280; width:64px; flex-shrink:0; font-weight:600; }
    .ph-stage-track { flex:1; background:#F3F4F6; border-radius:4px; height:8px; overflow:hidden; }
    .ph-stage-fill { height:100%; border-radius:4px; }
    .ph-stage-c { font-size:9px; font-weight:800; color:var(--ink); width:16px; text-align:right; }
    .ph-comm-total { margin:6px 12px 10px; background:linear-gradient(135deg,#ECFDF5,#F0FDF4); border:1px solid #BBF7D0; border-radius:12px; padding:10px 12px; }
    .ph-comm-l { font-size:7.5px; color:#059669; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
    .ph-comm-v { font-family:var(--disp); font-size:19px; font-weight:800; color:#16A34A; }
    .ph-lead { display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid #F3F4F6; border-radius:11px; padding:9px 11px; margin:0 12px 7px; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
    .ph-lead-n { font-size:10.5px; font-weight:700; color:var(--ink); }
    .ph-lead-m { font-size:8.5px; color:#9CA3AF; margin-top:1px; }
    .ph-badge { font-size:7.5px; font-weight:700; padding:3px 8px; border-radius:10px; }
    .ph-tabs { display:flex; justify-content:space-around; padding:9px 0 11px; background:#fff; border-top:1px solid #F3F4F6; margin-top:5px; }
    .ph-tab { font-size:13px; opacity:0.4; } .ph-tab.on { opacity:1; }
    .app-float { position:absolute; z-index:2; background:#fff; border-radius:13px; padding:9px 13px; box-shadow:0 16px 44px rgba(28,25,23,0.18); border:1px solid var(--border); display:flex; align-items:center; gap:9px; }
    .app-float-t { font-size:11px; font-weight:700; color:var(--ink); white-space:nowrap; }
    .app-float-s { font-size:9.5px; color:var(--muted); white-space:nowrap; }
    .af-1 { top:12%; right:2%; animation:floatY 5s ease-in-out 0.8s infinite; }
    .af-2 { bottom:14%; left:0%; animation:floatY 6s ease-in-out 1.6s infinite; }

    /* ===== FEATURE CARD EXTRAS ===== */
    .feat-icon { transition:transform 0.25s; }
    .feat-card:hover .feat-icon { transform:scale(1.12) rotate(-6deg); }
    .feat-idx { position:absolute; top:20px; right:22px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:1px; color:#D1D5DB; transition:color 0.25s; }
    .feat-card:hover .feat-idx { color:var(--brand2); }

    /* ===== COMPARISON ===== */
    .compare-card { max-width:900px; margin:0 auto; background:#fff; border:1.5px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,0.05); }
    .compare-scroll { overflow-x:auto; }
    .compare-table { min-width:640px; }
    .compare-table th.compare-us { color:var(--brand); background:#F0FDF4; }
    .compare-table td:first-child { font-weight:700; }
    .compare-table td:last-child { background:#FFFBF5; font-weight:600; color:#166534; }
    .compare-old { color:var(--muted); }
    .compare-x  { color:#D1D5DB; margin-right:7px; font-weight:800; }
    .compare-ok { color:var(--green); margin-right:7px; font-weight:800; }

    /* ===== HIW HOVER ===== */
    .hiw-step { padding:22px 14px; border-radius:18px; transition:background 0.25s, transform 0.25s; }
    .hiw-step:hover { background:rgba(255,255,255,0.045); transform:translateY(-5px); }


    /* ===== HERO WORD ENTRANCE ===== */
    .hw { display:inline-block; opacity:0; transform:translateY(30px) rotate(2deg); animation:heroWord 0.7s cubic-bezier(.22,1,.36,1) forwards; }
    @keyframes heroWord { to { opacity:1; transform:translateY(0) rotate(0); } }
    .hw-em { background:linear-gradient(92deg,#86EFAC 0%,#4ADE80 35%,#22C55E 55%,#86EFAC 85%,#4ADE80 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:heroWord 0.7s cubic-bezier(.22,1,.36,1) forwards, emShimmer 7s linear 2.2s infinite; }
    @keyframes emShimmer { from { background-position:0% 0; } to { background-position:220% 0; } }

    /* ===== CURSOR SPOTLIGHT (dark sections) ===== */
    .spot { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 0.5s; background:radial-gradient(circle 280px at var(--mx,50%) var(--my,40%), rgba(34,197,94,0.13), transparent 70%); }
    .hero:hover .spot, .demo-bg:hover .spot { opacity:1; }

    /* ===== MOCKUP PIPELINE FILL GROWTH ===== */
    @keyframes fillGrow { from { transform:scaleX(0); } }
    .mk-stage-fill { transform-origin:left; animation:fillGrow 1s cubic-bezier(.22,1,.36,1) both; }
    .mk-stage:nth-child(2) .mk-stage-fill { animation-delay:1.0s; }
    .mk-stage:nth-child(3) .mk-stage-fill { animation-delay:1.12s; }
    .mk-stage:nth-child(4) .mk-stage-fill { animation-delay:1.24s; }
    .mk-stage:nth-child(5) .mk-stage-fill { animation-delay:1.36s; }
    .mk-stage:nth-child(6) .mk-stage-fill { animation-delay:1.48s; }

    /* ===== BANK CHIPS STAGGERED POP ===== */
    .banks-chips .bank-chip { opacity:0; transform:translateY(14px) scale(0.92); transition:opacity 0.5s ease, transform 0.55s cubic-bezier(.22,1,.36,1); }
    .banks-chips.visible .bank-chip { opacity:1; transform:none; }
    .banks-chips.visible .bank-chip:nth-child(1){transition-delay:0.02s} .banks-chips.visible .bank-chip:nth-child(2){transition-delay:0.07s}
    .banks-chips.visible .bank-chip:nth-child(3){transition-delay:0.12s} .banks-chips.visible .bank-chip:nth-child(4){transition-delay:0.17s}
    .banks-chips.visible .bank-chip:nth-child(5){transition-delay:0.22s} .banks-chips.visible .bank-chip:nth-child(6){transition-delay:0.27s}
    .banks-chips.visible .bank-chip:nth-child(7){transition-delay:0.32s} .banks-chips.visible .bank-chip:nth-child(8){transition-delay:0.37s}
    .banks-chips.visible .bank-chip:nth-child(9){transition-delay:0.42s} .banks-chips.visible .bank-chip:nth-child(10){transition-delay:0.47s}
    .banks-chips.visible .bank-chip:nth-child(11){transition-delay:0.52s} .banks-chips.visible .bank-chip:nth-child(12){transition-delay:0.57s}
    .banks-chips.visible .bank-chip:nth-child(13){transition-delay:0.62s} .banks-chips.visible .bank-chip:nth-child(14){transition-delay:0.67s}
    .banks-chips.visible .bank-chip:nth-child(15){transition-delay:0.72s}

    /* ===== FAQ ICON MORPH (+ / −) ===== */
    .faq-icon { font-size:0; position:relative; width:20px; height:20px; flex-shrink:0; }
    .faq-icon::before, .faq-icon::after { content:''; position:absolute; background:var(--brand2); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%); }
    .faq-icon::before { width:13px; height:2.5px; }
    .faq-icon::after  { width:2.5px; height:13px; transition:transform 0.3s; }
    .faq-item.open .faq-icon::after { transform:translate(-50%,-50%) scaleY(0); }

    /* ===== CURSOR-FOLLOW CARD GLOW ===== */
    .feat-card::before, .loan-card::before, .plan-card::before {
      content:''; position:absolute; inset:0; opacity:0; transition:opacity 0.3s; pointer-events:none; border-radius:inherit;
      background:radial-gradient(circle 150px at var(--fx,50%) var(--fy,50%), rgba(34,197,94,0.13), transparent 70%);
    }
    .feat-card:hover::before, .loan-card:hover::before, .plan-card:hover::before { opacity:1; }
    .loan-card { position:relative; }

    /* ===== FEATURE ICON POP-IN ===== */
    @keyframes iconPop { 0% { transform:scale(0.4); opacity:0; } 70% { transform:scale(1.12); opacity:1; } 100% { transform:scale(1); opacity:1; } }
    .feat-card.visible .feat-icon { animation:iconPop 0.55s cubic-bezier(.22,1,.36,1) 0.15s backwards; }

    /* ===== HIW NUMBER PULSE ===== */
    @keyframes numPulse { 0%,100% { box-shadow:0 6px 24px rgba(22,163,74,0.45); } 50% { box-shadow:0 6px 34px rgba(22,163,74,0.8), 0 0 0 9px rgba(22,163,74,0.12); } }
    .hiw-num { animation:numPulse 3.2s ease-in-out infinite; }
    .hiw-step:nth-child(2) .hiw-num { animation-delay:0.4s; }
    .hiw-step:nth-child(3) .hiw-num { animation-delay:0.8s; }
    .hiw-step:nth-child(4) .hiw-num { animation-delay:1.2s; }

    /* ===== BANK DOT PULSE ===== */
    @keyframes dotPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.65); } }
    .bank-chip:hover .bank-dot { animation:dotPulse 0.8s ease-in-out infinite; }

    @media (prefers-reduced-motion: reduce) {
      .hw, .hw-em { animation:none; opacity:1; transform:none; }
      .mk-stage-fill { animation:none; }
      .mk-bars .mk-bar { animation:none; }
      .banks-chips .bank-chip { opacity:1; transform:none; transition:none; }
      .spot { display:none; }
      .stats-section, .stats-section::after { animation:none; }
      .hiw-num { animation:none; }
      .hiw-steps::before { transform:scaleX(1); transition:none; }
      .feat-card.visible .feat-icon { animation:none; }
      .chip-wall span { opacity:1; }
      .chip-wall.visible span { animation:none; }
      .nav-new { animation:none; }
      #chipnav { transition:none; }
    }

    /* ===== CHIP LANGUAGE (v3) ===== */
    .sec-num { font-family:var(--mono); font-size:10px; font-weight:600; background:rgba(22,163,74,0.08); border:1px solid rgba(22,163,74,0.28); color:var(--brand); border-radius:12px; padding:2px 8px; margin-right:4px; }
    .hiw-bg .sec-num, .demo-bg .sec-num { background:rgba(34,197,94,0.14); color:#86EFAC; }
    .nav-new { font-size:8.5px; font-weight:800; letter-spacing:0.5px; background:var(--brand); color:#fff; border-radius:8px; padding:2px 5px; margin-left:4px; vertical-align:middle; animation:blink 2.4s infinite; }
    .feat-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; position:relative; }
    .feat-chips span { font-size:10.5px; font-weight:700; color:#166534; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:20px; padding:4px 10px; transition:all 0.2s; }
    .feat-card:hover .feat-chips span { border-color:#86EFAC; background:#DCFCE7; }
    .loan-banks { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:9px; }
    .loan-banks span { font-size:9.5px; font-weight:700; color:var(--muted); background:#F9FAFB; border:1px solid var(--border); border-radius:14px; padding:3px 8px; transition:all 0.2s; }
    .loan-card:hover .loan-banks span { border-color:#BBF7D0; color:#166534; background:#F0FDF4; }
    .hiw-chip { display:inline-block; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.5px; color:#86EFAC; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.3); border-radius:16px; padding:3px 10px; margin-bottom:10px; }
    .plan-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; }
    .plan-chips span { font-size:10.5px; font-weight:700; color:var(--muted); background:#F9FAFB; border:1px solid var(--border); border-radius:16px; padding:4px 10px; }
    .plan-card.popular .plan-chips span { background:#fff; border-color:#BBF7D0; color:#166534; }

    /* ===== CAPABILITY CHIP WALL ===== */
    .chip-wall { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:920px; margin:0 auto; }
    .chip-wall span { font-size:13px; font-weight:600; color:var(--ink); background:#fff; border:1.5px solid var(--border); border-radius:30px; padding:9px 16px; cursor:default; opacity:0; transition:border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s; }
    @keyframes chipIn { from { opacity:0; transform:translateY(14px) scale(0.88); } to { opacity:1; transform:none; } }
    .chip-wall.visible span { opacity:1; animation:chipIn 0.5s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(var(--i,0) * 0.03s); }
    .chip-wall span:hover { border-color:var(--brand2); color:var(--brand); background:var(--surf); transform:translateY(-3px); box-shadow:0 8px 22px rgba(22,163,74,0.14); }
    .chipwall-note { text-align:center; margin-top:26px; font-size:13px; color:var(--muted); }
    .chipwall-note b { color:var(--brand); }

    /* ===== ROI CALCULATOR ===== */
    .roi-card { display:grid; grid-template-columns:1.05fr 1fr; max-width:940px; margin:0 auto; border-radius:22px; overflow:hidden; border:1.5px solid var(--border); box-shadow:0 18px 60px rgba(22,163,74,0.10); background:#fff; }
    .roi-left { padding:36px 34px; }
    .roi-lbl { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:10px; }
    .roi-val { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--brand); background:#F0FDF4; border:1px solid #BBF7D0; border-radius:16px; padding:4px 12px; }
    .roi-left input[type=range] { width:100%; accent-color:var(--brand); height:26px; cursor:pointer; margin-bottom:26px; }
    .roi-presets { display:flex; flex-wrap:wrap; gap:7px; }
    .roi-presets span { font-size:11.5px; font-weight:700; color:var(--muted); background:#F9FAFB; border:1px solid var(--border); border-radius:16px; padding:5px 12px; cursor:pointer; transition:all 0.2s; }
    .roi-presets span:hover { border-color:var(--brand2); color:var(--brand); background:var(--surf); }
    .roi-right { background:linear-gradient(160deg, #0C0A09, #1E140D); padding:36px 34px; color:var(--paper); display:flex; flex-direction:column; justify-content:center; gap:12px; position:relative; overflow:hidden; }
    .roi-right::before { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(34,197,94,0.16), transparent 70%); top:-100px; right:-80px; pointer-events:none; }
    .roi-out-l { font-family:var(--mono); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:rgba(250,250,249,0.5); }
    .roi-amt { font-family:var(--disp); font-size:clamp(34px,4vw,50px); font-weight:800; color:#86EFAC; line-height:1.05; }
    .roi-note { font-size:13px; color:rgba(250,250,249,0.6); line-height:1.7; }
    .roi-note b { color:#F87171; }
    .roi-right .btn { align-self:flex-start; margin-top:6px; }

    /* ===== MOBILE SECTION CHIP NAV ===== */
    #chipnav { position:fixed; bottom:14px; left:50%; transform:translateX(-50%) translateY(90px); display:none; gap:4px; background:rgba(12,10,9,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.14); border-radius:30px; padding:5px; z-index:180; transition:transform 0.35s; box-shadow:0 10px 34px rgba(0,0,0,0.4); max-width:calc(100vw - 16px); overflow-x:auto; }
    #chipnav.show { transform:translateX(-50%) translateY(0); }
    #chipnav a { font-size:12px; font-weight:700; color:rgba(250,250,249,0.7); padding:7px 12px; border-radius:20px; white-space:nowrap; }
    #chipnav a.active { background:var(--brand); color:#fff; }

    /* ===== FAQ CATEGORY CHIPS ===== */
    .faq-cats { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; }
    .faq-cats button { font-family:inherit; font-size:12.5px; font-weight:700; color:var(--muted); background:#fff; border:1.5px solid var(--border); border-radius:20px; padding:7px 16px; cursor:pointer; transition:all 0.2s; }
    .faq-cats button:hover { border-color:var(--brand2); color:var(--brand); }
    .faq-cats button.active { background:var(--brand); border-color:var(--brand); color:#fff; }

    /* ===== MICRO-INTERACTIONS & POLISH ===== */
    .btn:active { transform:translateY(0) scale(0.97); }
    .loan-emoji { transition:transform 0.25s; }
    .loan-card:hover .loan-emoji { transform:scale(1.18) rotate(-8deg); }
    .faq-item { transition:border-color 0.25s, box-shadow 0.25s; }
    .faq-item.open { border-color:#86EFAC; box-shadow:0 10px 32px rgba(22,163,74,0.09); }
    .faq-item.open .faq-q { color:var(--brand); }
    footer { position:relative; }
    footer::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand), var(--brand3), var(--brand)); }

    /* ===== RESPONSIVE ===== */
    @media (max-width:1024px) {
      .loan-grid  { grid-template-columns:repeat(2,1fr); }
      .plan-grid  { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
      .contact-grid { grid-template-columns:1fr; }
      .footer-top { grid-template-columns:1fr 1fr; }
      .hero-toast { display:none; }
      .app-grid   { grid-template-columns:1fr; gap:48px; }
      .app-float  { display:none; }
    }
    /* The link row + both CTAs + burger measure ~994px of nav content, so past
       ~1100px the bar overflows the viewport (measured 994px content in an 820px
       tablet). The hamburger takes over before that, not at 768. */
    @media (max-width:1100px) {
      .nav-links { display:none; }
      .hamburger { display:flex; }
    }
    @media (max-width:768px) {
      .hero-container { grid-template-columns:1fr; gap:40px; }
      .mockup-outer   { display:none; }
      /* stacked hero copy: full-width CTAs. Four ragged inline buttons left-aligned
         under a narrow column is what a phone layout looks like when nobody checked it. */
      .hero-btns      { flex-direction:column; align-items:stretch; }
      .hero-btns .btn { justify-content:center; white-space:normal; text-align:center; }
      .stats-grid     { grid-template-columns:repeat(2,1fr); }
      .hiw-steps      { grid-template-columns:repeat(2,1fr); }
      .hiw-steps::before { display:none; }
      .loan-grid      { grid-template-columns:repeat(2,1fr); }
      .footer-top     { grid-template-columns:1fr; gap:32px; }
      .nav-links, .nav-login { display:none; }
      .hamburger      { display:flex; }
      /* logo + Free Trial + Start Now + burger = 469px of content in a 350px row,
         which pushed 74px of horizontal scroll onto every phone. Free Trial is one
         tap away in the hamburger menu, so the bar keeps only Start Now. */
      .nav-inner      { gap:10px; }
      .nav-logo       { font-size:18px; }
      .nav-right .btn-ghost { display:none; }
      .form-grid2     { grid-template-columns:1fr; }
      .section        { padding:72px 0; }
      .ticker-label   { display:none; }
      .pos-strip      { padding:64px 0; }
      .demo-bg        { padding:72px 0; }
      .demo-stage     { height:440px; }
      .demo-scene     { flex-direction:column; gap:16px; padding:22px 18px 40px; }
      .ds1-form, .ds1-list { width:100%; max-width:280px; }
      .ds1-arrow      { transform:rotate(90deg); font-size:20px; }
      .ds2-auto       { display:none; }
      .ds3-col        { min-height:150px; }
      .ds4-side       { display:none; }
      .ds4-amt        { font-size:44px; }
      .demo-chips     { display:none; }
      .app-bg         { padding:72px 0; }
      .phone          { width:230px; }
      .roi-card       { grid-template-columns:1fr; }
      .wa-float       { bottom:76px; }
      #back-top       { bottom:76px; }
    }

    /* ══════════════════════════════════════════════════════════════════
       EDITORIAL LUXE LAYER
       Warm-paper canvas, dark product surfaces. Everything below this
       line is the premium redesign; deleting this block restores the
       previous look (except markup-level changes: SVG icons, app showcase).
       ══════════════════════════════════════════════════════════════════ */

    /* ── grain: paper should never be perfectly clean ── */
    body::before {
      content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.35;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    }

    /* ── TYPE: editorial scale ── */
    h1,h2,h3,h4 { letter-spacing:-0.03em; }
    /* editorial, but the CTAs must still clear the fold at 1440x900 —
       an 80px display pushed them below it */
    .hero h1    { font-size:clamp(34px,3.9vw,56px); line-height:1.08; margin-bottom:16px; }
    .hero h1 em { font-size:1.12em; line-height:1.0; }
    .hero-sub   { font-size:16px; line-height:1.7; margin-bottom:12px; }
    .hero-btns  { margin-bottom:28px; gap:10px; }
    .hero-btns .btn-lg { padding:14px 20px; font-size:14.5px; }  /* keeps all three CTAs on one row */
    /* the wider mockup pushed the KPI row under the toast — lift it clear */
    .ht-t1 { top:-5%; right:-40px; }
    .sec-h2     { font-size:clamp(30px,4.4vw,56px); line-height:1.06; margin-bottom:18px; }
    .sec-sub    { font-size:17px; line-height:1.7; color:#57534E; }
    .serif, .hero h1 em, .pos-h em {
      font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.01em;
    }
    /* Serif italic + gradient, not one or the other. The ramp runs dark→mid green:
       the pale end of the green scale (#86EFAC) is unreadable on a pale green page. */
    .hero h1 em { background:linear-gradient(92deg,#15803D 0%,#16A34A 45%,#22C55E 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .pos-h em   { color:#15803D; }

    /* ── WIDTH: fluid. The old 1200px cap stranded ~410px of dead space on each
       side at 1920. The shell now tracks the viewport at every size; only the
       reading columns are capped, so long lines never hurt legibility. ── */
    .container, .hero-container {
      max-width:none; width:100%;
      padding-left:clamp(20px, 4vw, 80px);
      padding-right:clamp(20px, 4vw, 80px);
    }
    .hero-container { gap:clamp(40px, 5vw, 88px); }
    /* `1fr` is really `minmax(auto,1fr)`: the column refuses to go below its
       min-content, so the dashboard mockup (4-col KPI grid inside) burst out of
       its track and got clipped. minmax(0,1fr) lets the track — and the mockup
       with it — actually shrink. */
    /* The mobile/tablet collapses live in the @media blocks ABOVE (.hero-container
       goes 1fr at ≤768, .app-grid at ≤1024). Restating the desktop tracks here —
       outside a query, later in the sheet — used to beat them on source order, so
       the phone hero stayed split in two next to the display:none mockup and the
       headline was crushed into a ~200px column (one word per line). Only apply
       these tracks where a second column actually exists. */
    @media (min-width: 769px) {
      .hero-container { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    }
    @media (min-width: 1025px) {
      .app-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    }
    .app-dl   { grid-template-columns:minmax(0,1fr) auto; }
    .mockup, .mockup-outer, .demo-player { max-width:100%; min-width:0; }
    .mk-kpis  { grid-template-columns:repeat(4, minmax(0,1fr)); }
    .mk-row2  { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    /* the nav must share the shell's gutters, or the logo floats away from the headline */
    .nav-inner { max-width:none; padding-left:clamp(20px, 4vw, 80px); padding-right:clamp(20px, 4vw, 80px); }
    #mobile-nav { padding-left:clamp(20px, 4vw, 80px); padding-right:clamp(20px, 4vw, 80px); }
    .hero h1, .hero-sub, .hero-notlender { max-width:min(100%, 720px); }
    .app-head, .sec-header.center .sec-sub { max-width:min(100%, 760px); }

    /* ── SPACING RHYTHM: replaces the flat 96px everywhere ── */
    .section     { padding:var(--sp-base) 0; }
    .sec-air     { padding:var(--sp-air) 0; }
    .sec-tight   { padding:var(--sp-tight) 0; }

    /* ── ICONS: inline SVG sprite, inherits currentColor ── */
    .ic { width:1em; height:1em; display:inline-block; vertical-align:-0.125em; fill:none;
          stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
    .ic-fill { fill:currentColor; stroke:none; }
    .ic-lg { width:22px; height:22px; }

    /* ── MOTION: one curve, mask-reveal headlines ── */
    .reveal    { transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); transform:translateY(22px); }
    .reveal-d1 { transition-delay:0.06s; } .reveal-d2 { transition-delay:0.13s; }
    .reveal-d3 { transition-delay:0.20s; } .reveal-d4 { transition-delay:0.27s; }
    .reveal-d5 { transition-delay:0.34s; }
    /* headline words rise from behind a mask rather than fading in place */
    .mask-line { display:block; overflow:hidden; }
    .mask-line > span {
      display:block; transform:translateY(105%);
      transition:transform 1s var(--ease); transition-delay:var(--md, 0s);
    }
    .visible .mask-line > span, .mask-line.visible > span { transform:translateY(0); }
    .lift { transition:transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
    .lift:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
    @media (prefers-reduced-motion: reduce) {
      .mask-line > span { transform:none !important; transition:none !important; }
      .reveal { transition:none !important; transform:none !important; opacity:1 !important; }
      .mockup-outer, .ht-t1, .ht-t2, .app-float { animation:none !important; }
    }

    /* ── DEPTH: light sections get real, warm, layered shadows ── */
    .features-bg, .section { background-color:var(--canvas); }
    .features-bg { background-color:var(--canvas2); }
    .feat-card, .pr-card, .cmp-card, .roi-card, .bank-card, .prod-card {
      box-shadow:var(--sh-md); border-color:var(--hair);
      transition:transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
    }
    .feat-card:hover, .pr-card:hover, .prod-card:hover {
      transform:translateY(-5px); box-shadow:var(--sh-lg);
    }

    /* ══ HERO — VARIANT A: LIGHT (default) ══════════════════════════════ */
    body.hero-light #navbar {
      background:rgba(253,252,250,0.78); border-bottom:1px solid var(--hair);
    }
    body.hero-light #navbar.scrolled { box-shadow:0 1px 0 var(--hair), 0 8px 30px rgba(28,25,23,0.06); }
    body.hero-light .nav-logo    { color:var(--ink9); }
    body.hero-light .nav-links a { color:#57534E; }
    body.hero-light .nav-links a:hover, body.hero-light .nav-links a.active { color:var(--brand); background:rgba(22,163,74,0.06); }
    body.hero-light .nav-login   { color:var(--ink9); }
    body.hero-light .nav-login:hover { color:var(--brand); background:rgba(22,163,74,0.06); }
    body.hero-light .hamburger span { background:var(--ink9); }
    body.hero-light #mobile-nav     { background:var(--canvas); border-top:1px solid var(--hair); }
    body.hero-light #mobile-nav a   { color:var(--ink9); border-bottom:1px solid var(--hair); }

    body.hero-light .hero {
      background:
        radial-gradient(ellipse 900px 520px at 82% -10%, rgba(22,163,74,0.13) 0%, transparent 60%),
        radial-gradient(ellipse 700px 480px at -8% 108%, rgba(34,197,94,0.07) 0%, transparent 55%),
        linear-gradient(170deg, #FDFCFA 0%, #FBF8F4 60%, #F9F5F0 100%);
    }
    body.hero-light .hero-mesh    { mix-blend-mode:multiply; opacity:0.16; }
    body.hero-light .hero-grid-bg { opacity:0.5;
      background-image: linear-gradient(rgba(28,25,23,0.055) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(28,25,23,0.055) 1px, transparent 1px); }
    body.hero-light .hero-eyebrow  { background:rgba(22,163,74,0.07); border-color:rgba(22,163,74,0.2); color:#166534; }
    body.hero-light .hero h1       { color:var(--ink9); }
    body.hero-light .hero-brandline{ color:#166534 !important; }
    body.hero-light .hero-sub      { color:#57534E; }
    body.hero-light .hero-notlender{ background:rgba(28,25,23,0.02); border-color:rgba(28,25,23,0.18); color:#44403C; }
    body.hero-light .hero-announce { background:rgba(22,163,74,0.09); border-color:rgba(22,163,74,0.32); color:#166534; }
    body.hero-light .hero-notlender b { color:var(--brand); }
    body.hero-light .trust-chip    { background:rgba(255,255,255,0.7); border:1px solid var(--hair2); color:#44403C; box-shadow:var(--sh-sm); }
    body.hero-light .btn-ghost     { background:rgba(28,25,23,0.03); color:var(--ink9); border:1.5px solid var(--hair2); }
    body.hero-light .btn-ghost:hover { background:rgba(28,25,23,0.07); }
    /* the product becomes the heavy object on the paper */
    body.hero-light .mockup      { box-shadow:var(--sh-xl); border:1px solid var(--hair2); }
    body.hero-light .mockup-glow { background:radial-gradient(ellipse, rgba(22,163,74,0.16) 0%, transparent 70%); }
    body.hero-light .mkbar       { background:linear-gradient(135deg,#1C1917,#292524); }  /* dark device chrome */
    body.hero-light .mkbar-title { color:rgba(250,250,249,0.75); }

    /* ══ HERO — VARIANT B: DARK (?hero=dark) — original styles stand ══ */

    /* ── TICKER ── */
    .ticker { border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--canvas); }
    .ticker-sep { opacity:0.3; }

    /* ── POSITIONING STRIP: a brand moment, so give it air ── */
    .pos-strip { padding:var(--sp-air) 0; background:var(--canvas); }
    .pos-h { font-size:clamp(30px,4.4vw,54px); line-height:1.12; }

    /* ── DEMO PLAYER: the one dark theatre on the paper ── */
    .demo-player { box-shadow:0 40px 90px rgba(28,25,23,0.28), 0 90px 180px rgba(20,83,45,0.18), 0 0 0 1px rgba(255,255,255,0.08); }

    /* ══════════════════════════════════════════════════════════════════
       APP SHOWCASE — full immersive block (section 09)
       ══════════════════════════════════════════════════════════════════ */
    .app-bg {
      padding:var(--sp-air) 0; position:relative; overflow:hidden;
      background:
        radial-gradient(ellipse 900px 500px at 50% 0%, rgba(22,163,74,0.07) 0%, transparent 60%),
        linear-gradient(175deg, #FBF8F4 0%, #FDFCFA 45%, #F7F3EE 100%);
      border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
    }
    .app-head { text-align:center; max-width:660px; margin:0 auto 8px; }
    .app-head .sec-sub { margin:0 auto; }
    .app-head .eyebrow { justify-content:center; }

    /* three phones in a staggered arc — centre forward, flanks receded */
    .phone-arc {
      position:relative; display:flex; justify-content:center; align-items:center;
      gap:0; margin:40px 0 8px; perspective:1600px;   /* no min-height — it only added dead space */
    }
    .phone-arc .phone {
      position:relative; transition:transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
    }
    .arc-side { z-index:1; }
    .arc-l { transform:translateX(46px) rotateY(16deg) rotate(-5deg) scale(0.84); opacity:0.94; }
    .arc-r { transform:translateX(-46px) rotateY(-16deg) rotate(5deg) scale(0.84); opacity:0.94; }
    .arc-c { z-index:3; transform:scale(1.02); }
    .phone-arc:hover .arc-l { transform:translateX(20px) rotateY(10deg) rotate(-3deg) scale(0.88); }
    .phone-arc:hover .arc-r { transform:translateX(-20px) rotateY(-10deg) rotate(3deg) scale(0.88); }
    .arc-glow {
      position:absolute; left:50%; top:50%; width:760px; height:420px; transform:translate(-50%,-50%);
      background:radial-gradient(ellipse, rgba(22,163,74,0.16) 0%, transparent 68%);
      filter:blur(40px); z-index:0; pointer-events:none;
    }
    .arc-cap { text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:1px;
               text-transform:uppercase; color:#A8A29E; margin-top:18px; }

    /* feature rail — the real capabilities that ship in the APK */
    .app-rail { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:40px 0 0; }
    .app-feat {
      background:rgba(255,255,255,0.75); border:1px solid var(--hair); border-radius:16px;
      padding:22px 20px; box-shadow:var(--sh-md); backdrop-filter:blur(6px);
      transition:transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
    }
    .app-feat:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:rgba(22,163,74,0.28); }
    .app-feat-ic {
      width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
      background:linear-gradient(140deg, rgba(22,163,74,0.1), rgba(34,197,94,0.05));
      border:1px solid rgba(22,163,74,0.16); color:var(--brand); margin-bottom:14px;
    }
    .app-feat-ic .ic { width:20px; height:20px; }
    .app-feat-t { font-family:var(--disp); font-size:15px; font-weight:800; color:var(--ink9); margin-bottom:5px; }
    .app-feat-s { font-size:13.5px; line-height:1.6; color:#57534E; }

    /* download bar — direct APK + QR, so a desktop visitor can install right now */
    .app-dl {
      margin-top:44px; display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center;
      background:linear-gradient(140deg,#1C1917 0%,#292524 60%,#1C1917 100%);
      border-radius:22px; padding:34px 38px; box-shadow:var(--sh-xl);
      position:relative; overflow:hidden;
    }
    .app-dl::after {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(ellipse 500px 240px at 88% 110%, rgba(22,163,74,0.22) 0%, transparent 62%);
    }
    .app-dl-l { position:relative; z-index:1; }
    .app-dl-t { font-family:var(--disp); font-size:clamp(20px,2.4vw,28px); font-weight:800; color:var(--paper); margin-bottom:8px; letter-spacing:-0.02em; }
    .app-dl-s { font-size:14px; color:rgba(250,250,249,0.6); line-height:1.65; margin-bottom:20px; max-width:430px; }
    .app-dl-btns { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
    .app-dl-meta { display:flex; gap:16px; flex-wrap:wrap; margin-top:18px; }
    .app-dl-meta span { font-family:var(--mono); font-size:10.5px; letter-spacing:0.8px; text-transform:uppercase;
                        color:rgba(250,250,249,0.42); display:inline-flex; align-items:center; gap:6px; }
    .app-qr {
      position:relative; z-index:1; background:#fff; border-radius:16px; padding:14px 14px 10px;
      text-align:center; box-shadow:0 18px 44px rgba(0,0,0,0.4);
    }
    .app-qr canvas { display:block; border-radius:6px; }
    .app-qr-c { width:148px; height:148px; }
    .app-qr-l { font-family:var(--mono); font-size:9px; letter-spacing:0.6px; text-transform:uppercase;
                color:#78716C; margin-top:9px; }

    /* ── Separate HR app section (§11) ── */
    .hr-feat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
    .hr-feat { background:#fff; border:1px solid rgba(28,25,23,0.07); border-radius:18px; padding:24px 22px;
               box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 12px 30px -18px rgba(16,24,40,0.18); }
    .hr-feat-ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
    .hr-feat-ic .ic { width:22px; height:22px; }
    .hr-feat-t { font-family:var(--disp); font-size:17px; font-weight:800; color:var(--ink9,#1C1917); margin-bottom:8px; letter-spacing:-0.01em; }
    .hr-feat-s { font-size:13.5px; line-height:1.6; color:#57534E; }
    .hr-why { display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:30px; justify-content:center; }
    .hr-why-item { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#292524; }
    .hr-why-item .ic { width:18px; height:18px; color:#16A34A; flex-shrink:0; }
    .hr-why-item b { font-weight:800; color:#111; }
    @media (max-width:900px){ .hr-feat-grid { grid-template-columns:1fr 1fr; } }
    @media (max-width:560px){ .hr-feat-grid { grid-template-columns:1fr; } }

    /* ── HR hero: text + 3D floating phone that "pops out" ── */
    .hr-hero { display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; margin-bottom:12px; }
    .hr-hero-text { text-align:left; }
    .hr-hero-text .sec-h2, .hr-hero-text .sec-sub { text-align:left; margin-left:0; }
    .hr-hero-text .sec-sub { max-width:520px; }
    .hr-hero-text .hr-why { justify-content:flex-start; margin-top:22px; }
    .hr-hero-stage { position:relative; display:flex; justify-content:center; align-items:center;
                     perspective:1500px; perspective-origin:60% 40%; min-height:400px; }
    /* soft glow puddle behind the phone */
    .hr-hero-stage::before { content:''; position:absolute; width:250px; height:250px; border-radius:50%;
      background:radial-gradient(circle, rgba(22,163,74,0.22) 0%, rgba(22,163,74,0) 70%); filter:blur(10px); z-index:0; }
    .hr-phone-3d { position:relative; z-index:1; transform-style:preserve-3d; will-change:transform;
                   animation:hrFloat 8s cubic-bezier(.45,.05,.55,.95) infinite; }
    .hr-phone-frame { position:relative; width:232px; border-radius:36px; background:#0b0b0f; padding:9px;
      box-shadow: 0 40px 70px -28px rgba(15,42,28,0.5), 0 14px 32px -16px rgba(16,24,40,0.32),
                  inset 0 0 0 2px rgba(255,255,255,0.07); }
    /* Show only the TOP of the app (header + punch + quick actions) so the phone
       stays a short, tidy "peek" — not the full tall scroll. */
    .hr-phone-screen { display:block; width:100%; height:360px; object-fit:cover; object-position:top center;
                       border-radius:28px; background:#F2F4F9; }
    .hr-phone-notch { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:92px; height:19px;
      background:#0b0b0f; border-radius:0 0 12px 12px; z-index:3; }
    .hr-phone-gloss { position:absolute; inset:9px; border-radius:28px; z-index:2; pointer-events:none;
      background:linear-gradient(125deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 42%); }
    /* little floating chips that pop OUT of the phone, front of frame */
    .hr-chip { position:absolute; z-index:4; background:#fff; border-radius:14px; padding:11px 14px;
      box-shadow:0 18px 40px -12px rgba(16,24,40,0.28); display:flex; align-items:center; gap:9px;
      font-size:13px; font-weight:700; color:#111; animation:hrFloat2 8s ease-in-out infinite; }
    .hr-chip .d { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
    .hr-chip.c1 { top:14%; left:-6%; }
    .hr-chip.c2 { bottom:16%; right:-8%; animation-delay:-2.5s; }
    @keyframes hrFloat {
      0%,100% { transform:rotateY(-17deg) rotateX(7deg) translateY(0) translateZ(0); }
      50%     { transform:rotateY(13deg) rotateX(-3deg) translateY(-20px) translateZ(38px); }
    }
    @keyframes hrFloat2 { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
    @media (max-width:820px){
      .hr-hero { grid-template-columns:1fr; gap:8px; }
      .hr-hero-text { text-align:center; }
      .hr-hero-text .sec-h2, .hr-hero-text .sec-sub { text-align:center; margin-left:auto; margin-right:auto; }
      .hr-hero-text .hr-why { justify-content:center; }
      .hr-hero-stage { min-height:360px; margin-top:10px; }
      .hr-phone-frame { width:212px; }
      .hr-phone-screen { height:322px; }
      .hr-chip { font-size:12px; padding:9px 12px; }
      .hr-chip.c1 { left:0; } .hr-chip.c2 { right:0; }
    }
    @media (prefers-reduced-motion: reduce){ .hr-phone-3d,.hr-chip{ animation:none; } .hr-phone-3d{ transform:rotateY(-10deg) rotateX(4deg);} }

    /* ── icon colour: the tinted feature tiles now carry a matching hue ── */
    .feat-icon { border:1px solid rgba(28,25,23,0.05); }
    .fi-1 .ic, .fi-7 .ic { color:#16A34A; }
    .fi-2 .ic, .fi-5 .ic { color:#059669; }
    .fi-3 .ic { color:#2563EB; }
    .fi-4 .ic { color:#A21CAF; }
    .fi-6 .ic { color:#DC2626; }
    .fi-8 .ic { color:#B45309; }
    .fi-9 .ic { color:#0D9488; }
    .trust-tick svg { display:block; }
    /* phone tab bar: emoji became SVG, so it needs an explicit size */
    .ph-tab { display:flex; align-items:center; justify-content:center; color:#78716C; }
    .ph-tab .ic { width:15px; height:15px; }
    .ph-tab.on { color:var(--brand); }
    .hiw-chip .ic { vertical-align:-0.1em; }

    /* ══════════════════════════════════════════════════════════════════
       MOTION SYSTEM
       Transform/opacity only — those are the two properties a browser can
       animate on the compositor without re-running layout or paint.
       Everything here is gated behind prefers-reduced-motion and
       disabled on coarse pointers (phones), where it would only cause jank.
       ══════════════════════════════════════════════════════════════════ */

    /* a warm light that follows the cursor — ambient, never in the way */
    #cursor-glow {
      position:fixed; top:0; left:0; width:560px; height:560px; margin:-280px 0 0 -280px;
      border-radius:50%; pointer-events:none; z-index:1; opacity:0;
      background:radial-gradient(circle, rgba(22,163,74,0.10) 0%, rgba(22,163,74,0.04) 38%, transparent 66%);
      mix-blend-mode:multiply; transition:opacity 0.6s var(--ease);
      will-change:transform;
    }
    body.has-pointer #cursor-glow { opacity:1; }
    body.hero-dark #cursor-glow { mix-blend-mode:screen; background:radial-gradient(circle, rgba(34,197,94,0.13) 0%, transparent 62%); }

    /* parallax + tilt targets get a compositor layer only while they can move */
    .par, .tilt-in { will-change:transform; }
    .tilt-in { transition:transform 0.5s var(--ease); transform-style:preserve-3d; }
    .tilt-in.tilting { transition:transform 0.12s linear; }

    /* buttons lean toward the cursor */
    .btn { will-change:transform; }
    .btn.mag { transition:transform 0.35s var(--ease), background 0.2s, box-shadow 0.35s var(--ease); }

    /* headline words rise out of a mask, one after another */
    .hw { display:inline-block; }
    @media (prefers-reduced-motion: no-preference) {
      .m-words { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:0.06em; }
      /* Hidden ONLY once JS has both split the heading and confirmed it can observe it.
         If either step fails the words are never hidden, so a broken script can't
         leave the page with invisible headlines. */
      .m-split .m-words > span { display:inline-block; transform:translateY(110%); opacity:0; }
      .m-split.m-ready .m-words > span {
        animation:wordRise 0.95s var(--ease) forwards; animation-delay:var(--wd, 0s);
      }
      @keyframes wordRise { to { transform:translateY(0); opacity:1; } }
    }

    /* icons draw themselves in when their card arrives */
    @media (prefers-reduced-motion: no-preference) {
      .feat-icon .ic, .app-feat-ic .ic { stroke-dasharray:120; stroke-dashoffset:120; }
      .visible .feat-icon .ic, .visible .app-feat-ic .ic, .feat-card.visible .ic, .app-feat.visible .ic {
        animation:drawIn 1.1s var(--ease) 0.15s forwards;
      }
      @keyframes drawIn { to { stroke-dashoffset:0; } }
    }

    /* pipeline / stage bars fill on arrival instead of appearing full */
    @media (prefers-reduced-motion: no-preference) {
      .visible .mk-stage-fill, .visible .ph-stage-fill { animation:barIn 1.4s var(--ease) forwards; transform-origin:left center; }
      @keyframes barIn { from { transform:scaleX(0); } to { transform:scaleX(1); } }
    }

    /* section chrome drifts forever — the page is never fully still */
    @media (prefers-reduced-motion: no-preference) {
      .hero, .app-bg { background-size:200% 200%, 200% 200%, 100% 100%; animation:gradDrift 24s ease-in-out infinite; }
      @keyframes gradDrift { 0%,100% { background-position:0% 50%, 100% 50%, 0 0; } 50% { background-position:100% 50%, 0% 50%, 0 0; } }
    }

    /* ══ PINNED SCROLLYTELLING — How It Works ══
       .hiw-pin is a tall runway; .hiw-sticky pins inside it and the four steps
       light up in sequence as you scroll through. Off below 981px and under
       reduced-motion, where it collapses back to an ordinary section. */
    /* position:sticky dies if ANY ancestor has overflow hidden/auto/scroll — that
       ancestor silently becomes the sticky element's scroll container, and since it
       never scrolls, the child never sticks. .hiw-bg carried overflow:hidden. */
    .hiw-bg { padding:0; overflow:visible; }
    .hiw-pin { padding:var(--sp-base) 0; }
    @media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
      .hiw-pin    { height:280vh; padding:0; }
      .hiw-sticky { position:sticky; top:0; height:100vh; display:flex; align-items:center; }
      /* steps start dimmed and low, then rise as the scroll reaches each one */
      .hiw-step   { opacity:0.28; transform:translateY(20px);
                    transition:opacity 0.55s var(--ease), transform 0.55s var(--ease); }
      .hiw-step.lit { opacity:1; transform:none; }
      .hiw-step .hiw-num { transition:transform 0.55s var(--ease), box-shadow 0.55s var(--ease); transform:scale(0.86); }
      .hiw-step.lit .hiw-num { transform:scale(1); box-shadow:0 8px 30px rgba(22,163,74,0.5); }
      /* the connector fills with progress rather than all at once on entry */
      .hiw-steps::before { transform:scaleX(var(--hiw-p, 0)) !important; transition:none !important; }
    }

    /* ══════════════════════════════════════════════════════════════════
       MITRA — the guide avatar
       Travels down the page with the visitor carrying the trial CTA, and says
       something about the section they are actually looking at. It REPLACES the
       sticky trial bar on desktop: two permanent CTAs plus the WhatsApp bubble
       plus back-to-top is clutter, not persuasion. The bar stays on mobile,
       where an avatar would eat the screen.
       ══════════════════════════════════════════════════════════════════ */
    /* sits above back-to-top, low enough that the bubble never lands on body copy
       (at bottom:24% it covered the fourth How-It-Works step) */
    #mitra {
      position:fixed; right:22px; bottom:88px; z-index:190;
      display:flex; align-items:flex-end; gap:12px; flex-direction:row-reverse;
      opacity:0; transform:translateY(24px) scale(0.9); pointer-events:none;
      transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
    }
    #mitra.in { opacity:1; transform:none; pointer-events:auto; }

    .mi-av {
      position:relative; width:62px; height:62px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(150deg,#22C55E 0%,#16A34A 55%,#15803D 100%);
      box-shadow:0 10px 30px rgba(22,163,74,0.4), 0 0 0 4px rgba(255,255,255,0.85),
                 0 0 0 5px rgba(22,163,74,0.18);
      cursor:pointer; border:none; padding:0;
      transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    }
    .mi-av:hover { transform:scale(1.07); box-shadow:0 14px 38px rgba(22,163,74,0.5), 0 0 0 4px #fff, 0 0 0 6px rgba(22,163,74,0.28); }
    .mi-av svg { width:100%; height:100%; display:block; }
    /* a soft pulse so the eye finds it without it ever shouting */
    .mi-av::after {
      content:''; position:absolute; inset:-4px; border-radius:50%;
      border:2px solid rgba(22,163,74,0.45); opacity:0;
    }
    @media (prefers-reduced-motion: no-preference) {
      .mi-av::after { animation:miPulse 3.2s ease-out infinite; }
      @keyframes miPulse { 0% { transform:scale(1); opacity:0.55; } 70%,100% { transform:scale(1.5); opacity:0; } }
      #mitra.in .mi-av { animation:miBob 3.4s ease-in-out infinite; }
      @keyframes miBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
      #mitra.in .mi-av:hover { animation:none; }
    }
    /* unread dot when Mitra has something new to say */
    .mi-dot {
      position:absolute; top:-1px; right:-1px; width:15px; height:15px; border-radius:50%;
      background:#F59E0B; border:2.5px solid #fff; opacity:0; transform:scale(0.4);
      transition:opacity 0.3s var(--ease), transform 0.3s var(--ease);
    }
    #mitra.has-news .mi-dot { opacity:1; transform:none; }

    .mi-bub {
      max-width:290px; background:#fff; border:1px solid var(--hair2); border-radius:16px 16px 4px 16px;
      padding:15px 16px 14px; box-shadow:var(--sh-lg);
      transform-origin:bottom right;
      opacity:0; transform:translateY(8px) scale(0.92); pointer-events:none;
      transition:opacity 0.4s var(--ease), transform 0.4s var(--ease);
    }
    #mitra.open .mi-bub { opacity:1; transform:none; pointer-events:auto; }
    .mi-name { font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
               color:var(--brand); font-weight:600; margin-bottom:5px; }
    .mi-msg  { font-size:13.5px; line-height:1.55; color:var(--ink9); font-weight:600; margin-bottom:12px; }
    .mi-msg b { color:var(--brand); }
    .mi-act  { display:flex; align-items:center; gap:8px; }
    .mi-cta  {
      flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
      background:var(--brand); color:#fff; border:none; border-radius:9px;
      padding:9px 12px; font-size:12.5px; font-weight:700; font-family:inherit;
      transition:background 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .mi-cta:hover { background:#15803D; transform:translateY(-1px); }
    .mi-x {
      background:transparent; border:1px solid var(--hair2); color:#8A9A91;
      width:30px; height:30px; border-radius:8px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      transition:background 0.25s var(--ease), color 0.25s var(--ease);
    }
    .mi-x:hover { background:rgba(20,60,38,0.06); color:var(--ink9); }

    /* the avatar owns the desktop; the bar owns mobile */
    @media (min-width: 981px) { #trial-bar { display:none; } }
    @media (max-width: 980px) { #mitra { display:none; } }

    /* ══ STICKY TRIAL BAR ══ */
    #trial-bar {
      position:fixed; left:0; right:0; bottom:0; z-index:180;
      transform:translateY(120%); transition:transform 0.6s var(--ease);
      padding:0 clamp(12px, 3vw, 28px) clamp(12px, 2vw, 20px);
      pointer-events:none;
    }
    #trial-bar.up { transform:translateY(0); }
    .tb-in {
      pointer-events:auto; max-width:1180px; margin:0 auto;
      display:flex; align-items:center; gap:18px; flex-wrap:wrap;
      background:linear-gradient(140deg,#0F2A1C 0%,#17402B 60%,#10301F 100%);
      border:1px solid rgba(255,255,255,0.1); border-radius:16px;
      padding:14px 16px 14px 22px;
      box-shadow:0 18px 50px rgba(15,42,28,0.35), 0 40px 90px rgba(15,42,28,0.22);
    }
    .tb-t { font-size:14.5px; font-weight:700; color:#F0FDF4; line-height:1.35; }
    .tb-t b { color:#4ADE80; }
    .tb-s { font-size:12px; color:rgba(220,252,231,0.55); margin-top:2px; }
    .tb-r { margin-left:auto; display:flex; align-items:center; gap:10px; }
    #tb-x {
      background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
      color:rgba(220,252,231,0.7); width:32px; height:32px; border-radius:9px;
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
      transition:background 0.25s var(--ease);
    }
    #tb-x:hover { background:rgba(255,255,255,0.16); }
    @media (max-width: 620px) {
      .tb-in { padding:12px 14px; gap:10px; }
      .tb-s  { display:none; }
      .tb-r  { width:100%; margin-left:0; }
      .tb-r .btn { flex:1; justify-content:center; }
      /* the WhatsApp bubble and back-to-top must not sit under the bar */
      body.tb-open .wa-float, body.tb-open #back-top { bottom:96px; }
    }

    /* coarse pointer = phone. Ambient + pointer motion off; reveals stay. */
    @media (hover: none), (pointer: coarse) {
      #cursor-glow { display:none; }
      .hero, .app-bg { animation:none; }
      .tilt-in { transform:none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      #cursor-glow { display:none; }
      .m-words > span { transform:none; opacity:1; animation:none; }
      .par { transform:none !important; }
    }

    /* ══════════════════════════════════════════════════════════════════
       GREEN THEME — one canvas for the whole page
       The two dark sections (demo, how-it-works) and the footer join the light
       green canvas, so the page reads as one surface end to end. Only DEVICES
       stay dark — the browser mockup, the phones, the install panel — because a
       screen is dark; that is the product sitting on the page, not a section of it.
       ══════════════════════════════════════════════════════════════════ */

    /* ── product demo: was a dark theatre, now a light green room ── */
    .demo-bg {
      background:
        radial-gradient(ellipse 900px 500px at 50% 0%, rgba(22,163,74,0.09) 0%, transparent 62%),
        linear-gradient(170deg, #EFF8F3 0%, #F7FBF8 55%, #EAF6EF 100%);
      border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
    }
    .demo-bg::before { display:none; }              /* the noise overlay only reads on dark */
    .demo-bg .sec-h2  { color:var(--ink9); }
    .demo-bg .sec-sub { color:#4B5F55; }
    .demo-bg .eyebrow { color:var(--brand); }
    /* the player itself stays a device — re-tinted from warm black to green-black */
    .demo-player { background:#0F1A14; }
    .demo-stage  { background:radial-gradient(ellipse 600px 300px at 50% 0%, rgba(22,163,74,0.12) 0%, transparent 60%), #0D1711; }

    /* ── how it works: dark slate → light green ── */
    .hiw-bg {
      background:
        radial-gradient(ellipse 700px 400px at 85% 0%, rgba(34,197,94,0.10) 0%, transparent 60%),
        linear-gradient(150deg, #EFF8F2 0%, #F7FBF8 60%, #E9F5EE 100%);
      border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
    }
    .hiw-bg::before   { display:none; }
    .hiw-bg .sec-h2   { color:var(--ink9); }
    .hiw-bg .sec-sub  { color:#4B5F55; }
    .hiw-bg .eyebrow  { color:var(--brand); }
    .hiw-title        { color:var(--ink9); }
    .hiw-desc         { color:#5B6E64; }
    .hiw-chip         { color:#15803D; background:rgba(22,163,74,0.08); border-color:rgba(22,163,74,0.22); }
    .hiw-steps::before{ background:linear-gradient(90deg, rgba(22,163,74,0.06), rgba(22,163,74,0.42) 50%, rgba(22,163,74,0.06)); }

    /* ── install panel: deep green, not near-black ── */
    .app-dl { background:linear-gradient(140deg,#0F2A1C 0%,#163A27 60%,#0F2A1C 100%); }
    .app-dl::after { background:radial-gradient(ellipse 500px 240px at 88% 110%, rgba(34,197,94,0.26) 0%, transparent 62%); }

    /* ── footer: deep green so it belongs to the same page ── */
    footer { background:#0E2118; }
    .footer-bottom, .footer-social { border-color:rgba(255,255,255,0.09); }

    /* ── the phone chrome and the browser chrome are devices: they stay dark ── */
    .phone { background:#12241B; box-shadow:0 50px 110px rgba(15,42,28,0.34), 0 0 0 1.5px rgba(15,42,28,0.9); }
    .phone-notch { background:#12241B; }
    body.hero-light .mkbar { background:linear-gradient(135deg,#12241B,#1B3527); }

    /* ══════════════════════════════════════════════════════════════════
       ELIGIBILITY ENGINE (live widget)
       ══════════════════════════════════════════════════════════════════ */
    .elig-bg {
      padding:var(--sp-air) 0;
      background:
        radial-gradient(ellipse 800px 460px at 20% 0%, rgba(22,163,74,0.08) 0%, transparent 60%),
        linear-gradient(175deg,#F1F9F4 0%,#F7FBF8 50%,#EDF7F1 100%);
      border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
    }
    .elig-card {
      display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
      gap:0; margin-top:48px; border-radius:24px; overflow:hidden;
      background:rgba(255,255,255,0.72); border:1px solid var(--hair2);
      box-shadow:var(--sh-xl); backdrop-filter:blur(8px);
    }
    .elig-in  { padding:34px 32px; border-right:1px solid var(--hair); }
    .elig-out { padding:34px 32px; background:linear-gradient(160deg,#0F2A1C 0%,#163A27 65%,#10301F 100%); position:relative; }

    .elig-prod { display:flex; gap:6px; background:rgba(20,60,38,0.05); border-radius:11px; padding:4px; margin-bottom:26px; }
    .elig-prod-b {
      flex:1; border:none; background:transparent; padding:9px 10px; border-radius:8px;
      font-size:13px; font-weight:700; color:#5B6E64; font-family:inherit;
      transition:background 0.3s var(--ease), color 0.3s var(--ease);
    }
    .elig-prod-b.on { background:#fff; color:var(--ink9); box-shadow:var(--sh-sm); }

    .elig-f   { display:block; margin-bottom:22px; cursor:pointer; }
    .elig-f-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
    .elig-f-l { font-size:13px; font-weight:600; color:#44544B; }
    .elig-f-h b { font-family:var(--disp); font-size:17px; font-weight:800; color:var(--ink9); }
    .elig-f-s { display:block; font-size:11px; color:#8A9A91; margin-top:7px; }

    /* range inputs are the one control browsers style unrecognisably differently */
    .elig-r { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:4px;
              background:linear-gradient(90deg,#16A34A var(--fill,50%), rgba(20,60,38,0.10) var(--fill,50%));
              outline:none; cursor:grab; }
    .elig-r:active { cursor:grabbing; }
    .elig-r::-webkit-slider-thumb {
      -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff;
      border:2.5px solid #16A34A; box-shadow:0 2px 10px rgba(22,163,74,0.35); cursor:grab;
      transition:transform 0.2s var(--ease);
    }
    .elig-r::-webkit-slider-thumb:hover { transform:scale(1.16); }
    .elig-r::-moz-range-thumb {
      width:20px; height:20px; border-radius:50%; background:#fff; border:2.5px solid #16A34A;
      box-shadow:0 2px 10px rgba(22,163,74,0.35); cursor:grab;
    }
    .elig-note { font-size:11px; color:#8A9A91; line-height:1.6; border-top:1px solid var(--hair); padding-top:14px; margin-top:4px; }

    .elig-out-h { display:flex; justify-content:space-between; gap:18px; align-items:flex-start;
                  padding-bottom:18px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.11); }
    .elig-out-l { font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
                  color:rgba(220,252,231,0.5); margin-bottom:5px; }
    .elig-out-v { font-family:var(--disp); font-size:32px; font-weight:800; color:#fff; line-height:1; }
    .elig-out-of { font-size:17px; color:rgba(220,252,231,0.42); font-weight:700; }
    .elig-earn   { text-align:right; }
    .elig-earn-v { font-family:var(--disp); font-size:32px; font-weight:800; color:#4ADE80; line-height:1;
                   transition:color 0.3s var(--ease); }

    .elig-rows { display:flex; flex-direction:column; gap:7px; min-height:250px; }
    .elig-row {
      display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
      background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.08);
      border-radius:12px; padding:11px 13px;
      animation:egIn 0.45s var(--ease) both;
    }
    @keyframes egIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
    .elig-row.ok  { border-color:rgba(74,222,128,0.35); background:rgba(74,222,128,0.09); }
    .elig-row.mid { border-color:rgba(250,204,21,0.28); background:rgba(250,204,21,0.06); }
    .elig-row-n { font-size:13.5px; font-weight:700; color:#F0FDF4; display:flex; align-items:center; gap:8px; }
    .elig-row-m { font-size:11px; color:rgba(220,252,231,0.55); margin-top:3px; line-height:1.5; }
    .elig-row-r { text-align:right; white-space:nowrap; }
    .elig-row-a { font-family:var(--disp); font-size:14px; font-weight:800; color:#fff; }
    .elig-row-c { font-size:11px; color:#4ADE80; font-weight:700; margin-top:2px; }
    .elig-badge { font-size:8.5px; font-weight:800; letter-spacing:0.4px; text-transform:uppercase;
                  padding:3px 7px; border-radius:20px; }
    .eb-ok  { background:#4ADE80; color:#052E16; }
    .eb-mid { background:#FDE047; color:#422006; }
    .eb-no  { background:rgba(255,255,255,0.13); color:rgba(255,255,255,0.6); }

    .elig-cta   { margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.11);
                  display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    .elig-cta-s { font-size:11.5px; color:rgba(220,252,231,0.5); }

    /* ══════════════════════════════════════════════════════════════════
       AI — LIVE

       This section was written in the future tense for as long as that was the
       truth. It shipped (Mistral, metered credits, Phases 0-5), so the tense
       changed with it — and not one word earlier.

       The honesty rule did not go away, it INVERTED. Before, it kept us from
       claiming AI we did not have. Now it keeps us from claiming more AI than we
       have. Every card below maps to a route in backend/src/modules/ai/ai.routes.ts.
       If you add a card, add the route first. The two must never drift:
         draft  -> it DRAFTS. It has never sent a WhatsApp message. Do not imply it.
         score  -> it is a HINT. It never moves a lead by itself. Do not imply it.
       ══════════════════════════════════════════════════════════════════ */

    /* ── the section ── */
    .ai-bg { padding:var(--sp-air) 0; background:var(--canvas); }
    .ai-panel {
      position:relative; border-radius:28px;
      background:linear-gradient(155deg,#0C2417 0%,#123A25 55%,#0B2015 100%);
      box-shadow:var(--sh-xl);
      padding:clamp(34px,4.5vw,60px);
      /* This clips the aurora to the rounded corners — and it used to be `overflow:hidden`,
         which CANNOT be restored. Any overflow other than `visible` turns this panel into
         the scroll container for every position:sticky descendant inside it, and that
         container never scrolls, so the whole card stack below silently dies. (Same bug
         that once broke .hiw-bg.) clip-path clips identically without creating a
         scrollport. Do not "simplify" this back to overflow:hidden. */
      clip-path:inset(0 round 28px);
      /* clip-path paints the aurora inside the corners but does NOT stop it from
         counting as scrollable overflow — the `inset:-40%` ::before below was adding
         ~300px of phantom width to the document on tablet (1122px scrollWidth in an
         820px viewport). Paint containment clips the layout box without creating a
         scrollport, so the sticky stack above keeps working. */
      contain:paint;
    }
    /* a slow aurora behind the panel — the only place on the page that moves like this.
       It used to signal "something not here yet"; now it just signals "this thing is
       thinking". Kept, because it is still the only section that earns the motion. */
    .ai-panel::before {
      content:''; position:absolute; inset:-40%; pointer-events:none;
      background:
        radial-gradient(38% 34% at 22% 28%, rgba(74,222,128,0.20) 0%, transparent 65%),
        radial-gradient(30% 30% at 78% 70%, rgba(34,197,94,0.16) 0%, transparent 62%);
    }
    @media (prefers-reduced-motion: no-preference) {
      .ai-panel::before { animation:aiDrift 22s ease-in-out infinite alternate; }
      @keyframes aiDrift { from { transform:translate(0,0) scale(1); } to { transform:translate(4%,-3%) scale(1.12); } }
    }
    .ai-panel > * { position:relative; z-index:1; }

    .ai-head { max-width:660px; margin-bottom:38px; }
    .ai-kick {
      display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
      font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1.6px;
      text-transform:uppercase; color:#0A1F13; background:#4ADE80;
      padding:5px 11px; border-radius:6px;
    }
    .ai-h {
      font-family:var(--disp); font-size:clamp(28px,3.8vw,46px); font-weight:800;
      line-height:1.08; letter-spacing:-0.03em; color:#FFFFFF; margin-bottom:14px;
    }
    .ai-h em { font-family:var(--serif); font-style:italic; font-weight:400; color:#4ADE80; }
    .ai-sub { font-size:16px; line-height:1.7; color:rgba(220,252,231,0.66); }
    /* the honesty line is not small print — it gets the same weight as the pitch */
    .ai-honest {
      display:flex; gap:9px; align-items:flex-start; margin-top:18px; padding:12px 14px;
      border:1px dashed rgba(74,222,128,0.34); border-radius:10px;
      background:rgba(74,222,128,0.05);
      font-size:13px; line-height:1.6; color:#BBF7D0;
    }
    .ai-honest b { color:#4ADE80; }

    .ai-feat {
      background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09);
      border-radius:16px; padding:20px 20px 18px;
      transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
    }
    .ai-feat:hover { transform:translateY(-4px); border-color:rgba(74,222,128,0.4); background:rgba(74,222,128,0.07); }
    .ai-feat-h { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
    .ai-feat-ic {
      width:36px; height:36px; border-radius:10px; flex-shrink:0;
      display:grid; place-items:center; color:#4ADE80;
      background:rgba(74,222,128,0.12); border:1px solid rgba(74,222,128,0.22);
    }
    .ai-feat-ic .ic { width:17px; height:17px; }
    .ai-feat-t { font-family:var(--disp); font-size:15px; font-weight:800; color:#F0FDF4; }
    .ai-feat-s { font-size:13.5px; line-height:1.6; color:rgba(220,252,231,0.6); }
    /* was .ai-wip / "Building". Renamed rather than restyled: a class called `wip`
       that renders "Live" is a trap for whoever edits this next. */
    .ai-live {
      margin-left:auto; flex-shrink:0;
      display:inline-flex; align-items:center; gap:5px;
      font-family:var(--mono); font-size:8.5px; letter-spacing:.9px; text-transform:uppercase;
      color:#4ADE80; border:1px solid rgba(74,222,128,.34);
      background:rgba(74,222,128,.09);
      padding:3px 8px; border-radius:20px;
    }
    .ai-live::before {
      content:''; width:5px; height:5px; border-radius:50%; background:#4ADE80; flex-shrink:0;
    }
    @media (prefers-reduced-motion: no-preference) {
      .ai-live::before { animation:aiPulse 2.4s ease-out infinite; }
      @keyframes aiPulse {
        0%   { box-shadow:0 0 0 0 rgba(74,222,128,.55); }
        70%  { box-shadow:0 0 0 5px rgba(74,222,128,0); }
        100% { box-shadow:0 0 0 0 rgba(74,222,128,0); }
      }
    }

    /* ── the closer ──
       This was a waitlist ("be the first to run it"). A waitlist for a thing that has
       already shipped is worse than no CTA at all — it tells the visitor the page is
       stale. It is now the strongest proof we have: the bot is ON THIS PAGE. */
    .ai-wait {
      border-top:1px solid rgba(255,255,255,0.1); padding-top:30px;
      display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:32px; align-items:center;
    }
    .ai-wait-t { font-family:var(--disp); font-size:20px; font-weight:800; color:#fff; margin-bottom:7px; letter-spacing:-0.02em; }
    .ai-wait-s { font-size:13.5px; line-height:1.6; color:rgba(220,252,231,0.58); }
    .ai-cta { display:flex; gap:10px; flex-wrap:wrap; }
    .ai-cta-btn {
      padding:13px 22px; font-size:14px; font-weight:700; font-family:inherit;
      border-radius:11px; white-space:nowrap; cursor:pointer; text-decoration:none;
      display:inline-flex; align-items:center; gap:8px;
      transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    }
    .ai-cta-btn.primary { color:#0A1F13; background:#4ADE80; border:1px solid #4ADE80; }
    .ai-cta-btn.primary:hover { transform:translateY(-2px); background:#86EFAC; }
    .ai-cta-btn.ghost {
      color:#F0FDF4; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16);
    }
    .ai-cta-btn.ghost:hover { transform:translateY(-2px); border-color:rgba(74,222,128,0.5); }
    .ai-note { font-family:var(--mono); font-size:10px; letter-spacing:.5px; color:rgba(220,252,231,0.4); margin-top:11px; }

    @media (max-width: 900px) {
      .ai-wait { grid-template-columns:minmax(0,1fr); gap:20px; }
    }

    /* ── RESPONSIVE (editorial layer) ── */
    @media (max-width: 980px) {
      .elig-card { grid-template-columns:minmax(0,1fr); }
      .elig-in   { border-right:none; border-bottom:1px solid var(--hair); }
    }
    @media (max-width: 980px) {
      .app-rail { grid-template-columns:repeat(2,1fr); }
      .app-dl   { grid-template-columns:1fr; gap:26px; }
      .app-qr   { justify-self:start; }
    }
    @media (max-width: 768px) {
      :root { --sp-tight:56px; --sp-base:84px; --sp-air:104px; }
      .phone-arc { min-height:auto; margin:44px 0 8px; }
      .phone-arc .arc-side { display:none; }   /* one phone reads better than three on a phone */
      .arc-c { transform:none; }
      .app-rail { grid-template-columns:1fr; gap:12px; }
      .app-dl  { padding:26px 22px; }
      .app-qr  { display:none; }               /* you are already on the phone */
      body::before { display:none; }           /* grain costs more than it gives on mobile */
    }

    /* ═══════════ §03 FEATURE STACK — rail pins, cards pile up ═══════════
       Sticky works here only because the smooth-scroll drives window.scrollTo
       instead of transforming a wrapper (see the note at smoothScroll()). A
       transformed ancestor would become the containing block for every sticky
       descendant and silently kill all of this. Don't "optimise" that loop. */
    .feat-layout {
      display:grid;
      /* minmax(0,·) not 1fr — a 1fr track is minmax(auto,1fr) and refuses to shrink
         below its content's min-content, which is exactly how the dashboard mockup
         once burst out of its column. */
      grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
      gap:clamp(40px,5vw,84px); align-items:start;
    }
    .feat-rail { position:sticky; top:140px; }
    .feat-rail .sec-sub { max-width:400px; }

    .feat-prog { margin-top:38px; max-width:290px; }
    .feat-prog-count { display:flex; align-items:baseline; gap:8px; font-family:var(--mono); }
    .feat-prog-count b { font-size:42px; font-weight:700; line-height:1; color:var(--brand); font-variant-numeric:tabular-nums; }
    .feat-prog-count span { font-size:15px; font-weight:600; color:#A8A29E; }
    .feat-prog-bar { margin-top:16px; height:3px; border-radius:3px; background:#E7E5E4; overflow:hidden; }
    .feat-prog-bar i { display:block; height:100%; width:11.1%; border-radius:3px;
                       background:linear-gradient(90deg,var(--brand),var(--brand2));
                       transition:width 0.5s var(--ease); }
    .feat-prog-now { margin-top:15px; font-family:var(--disp); font-size:15px; font-weight:700;
                     color:var(--ink); transition:opacity 0.18s ease; }
    .feat-prog-now.swapping { opacity:0; }

    /* The gaps ARE the scroll runway — there is no JS pin, no runway math. 42vh is tuned,
       not arbitrary: it's short enough that the next card's top edge is already peeking in
       at the bottom of the viewport while the current one sits pinned. At 56vh the next card
       was fully offscreen, which left a dead white void under the pinned card and gave the
       reader no hint that anything was coming. */
    .feat-stack { display:flex; flex-direction:column; gap:42vh; padding-bottom:30vh; }
    .feat-slot  { position:sticky; top:calc(120px + var(--i) * 10px); }
    /* the 10px-per-card stagger is what makes it read as a deck: every buried card
       keeps a sliver of its top edge showing behind the one that covered it */
    .feat-bury {
      transform-origin:top center; will-change:transform;
      transform:translateY(calc(var(--bury,0) * -8px)) scale(calc(1 - var(--bury,0) * 0.05));
    }
    .feat-bury .feat-card > :not(.feat-card-accent) { opacity:calc(1 - var(--bury,0) * 0.62); }

    /* one card at a time earns the room the 3-column grid never had */
    .feat-stack .feat-card  { padding:40px 42px; border-radius:20px; }
    .feat-stack .feat-icon  { width:60px; height:60px; border-radius:16px; margin-bottom:22px; }
    .feat-stack .feat-icon .ic { width:30px !important; height:30px !important; }
    .feat-stack .feat-title { font-size:clamp(20px,2vw,27px); margin-bottom:12px; }
    .feat-stack .feat-desc  { font-size:16px; max-width:56ch; }
    .feat-stack .feat-idx   { top:28px; right:30px; font-size:13px; }
    .feat-stack .feat-chips { margin-top:20px; }

    /* Both fallbacks below are the SAME thing: unstick everything and let the nine
       cards be a plain list. Phones don't want 600vh of runway, and reduced-motion
       users didn't ask for a performance. featureStack() bails out to match. */
    @media (max-width: 900px) {
      .feat-layout { grid-template-columns:minmax(0,1fr); gap:34px; }
      .feat-rail   { position:static; }
      .feat-prog   { display:none; }
      .feat-stack  { gap:16px; padding-bottom:0; }
      .feat-slot   { position:static; }
      .feat-bury   { transform:none; will-change:auto; }
      .feat-bury .feat-card > :not(.feat-card-accent) { opacity:1; }
      .feat-stack .feat-card  { padding:26px; }
      .feat-stack .feat-title { font-size:19px; }
      .feat-stack .feat-desc  { font-size:14.5px; }
      .feat-stack .feat-icon  { width:52px; height:52px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .feat-rail  { position:static; }
      .feat-prog  { display:none; }
      .feat-stack { gap:16px; padding-bottom:0; }
      .feat-slot  { position:static; }
      .feat-bury  { transform:none !important; will-change:auto; }
      .feat-bury .feat-card > :not(.feat-card-accent) { opacity:1 !important; }
    }

    /* ═══════════ §10 AI STACK — same machine as §03, inside the dark panel ═══════════
       The head stays full-width above (the "Straight talk" box has to be read, not
       skimmed past in a rail), so this stack gets a slim pinned counter instead. */
    /* Capped and left-aligned to the head above it. Left to the full panel width the
       card copy ran ~150 characters a line, which is punishing to read. */
    .ai-stack-wrap { margin-bottom:34px; max-width:860px; }
    .ai-prog {
      position:sticky; top:92px; z-index:5;   /* z-index needed: the pill is FIRST in DOM, and the
                                                 sticky cards after it would otherwise paint over it */
      display:flex; align-items:center; gap:14px; margin-bottom:20px;
      padding:9px 15px; border-radius:999px; width:fit-content;
      background:rgba(10,31,19,0.72); border:1px solid rgba(74,222,128,0.22);
      backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    }
    .ai-prog-n   { font-family:var(--mono); font-size:12px; font-weight:600; color:rgba(220,252,231,0.55); }
    .ai-prog-n b { font-size:15px; color:#4ADE80; font-variant-numeric:tabular-nums; }
    .ai-prog-bar   { display:block; width:88px; height:3px; border-radius:3px; background:rgba(255,255,255,0.12); }
    .ai-prog-bar b { display:block; height:100%; width:16.7%; border-radius:3px; background:#4ADE80;
                     transition:width 0.5s var(--ease); }

    /* 30vh, not §03's 42vh: these cards are roughly half the height of a .feat-card, so
       the same runway left a dead void of dark panel under the pinned card. Runway has to
       be tuned against card height, not copied between sections. */
    .ai-stack { display:flex; flex-direction:column; gap:30vh; padding-bottom:18vh; }
    .ai-slot  { position:sticky; top:140px; }
    /* No per-card stagger here, unlike §03. These cards sit on a DARK panel where a peeking
       top edge reads as a glitch rather than a deck, so a buried card simply hides behind
       the next one. The scale-down is what sells the depth instead. */
    .ai-bury {
      transform-origin:top center; will-change:transform;
      transform:translateY(calc(var(--bury,0) * -6px)) scale(calc(1 - var(--bury,0) * 0.045));
    }
    .ai-bury .ai-feat { opacity:calc(1 - var(--bury,0) * 0.55); }

    /* A stack has one hard pre-condition the grid never had: the cards must be OPAQUE.
       .ai-feat is translucent glass by default (rgba(255,255,255,.045)) — lovely in a
       grid, fatal in a stack, because a buried card shows straight through the card
       covering it and every title lands on top of every other title. This solid is the
       glass colour resolved against the panel gradient behind it, so it looks the same
       standing still and actually occludes once it moves. */
    .ai-stack .ai-feat       { background:#17402B; }
    .ai-stack .ai-feat:hover { background:#1D4E35; }

    /* one at a time, so they can breathe */
    .ai-stack .ai-feat    { padding:30px 32px; border-radius:20px; }
    .ai-stack .ai-feat-ic { width:44px; height:44px; border-radius:12px; }
    .ai-stack .ai-feat-ic .ic { width:21px; height:21px; }
    .ai-stack .ai-feat-t  { font-size:clamp(17px,1.6vw,21px); }
    .ai-stack .ai-feat-s  { font-size:15px; line-height:1.7; }
    .ai-stack .ai-feat-h  { margin-bottom:13px; }

    @media (max-width: 900px) {
      .ai-prog  { display:none; }
      .ai-stack { gap:12px; padding-bottom:0; }
      .ai-slot  { position:static; }
      .ai-bury  { transform:none; will-change:auto; }
      .ai-bury .ai-feat { opacity:1; }
      .ai-stack .ai-feat   { padding:20px 20px 18px; }
      .ai-stack .ai-feat-t { font-size:15px; }
      .ai-stack .ai-feat-s { font-size:13.5px; line-height:1.6; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ai-prog  { display:none; }
      .ai-stack { gap:12px; padding-bottom:0; }
      .ai-slot  { position:static; }
      .ai-bury  { transform:none !important; will-change:auto; }
      .ai-bury .ai-feat { opacity:1 !important; }
    }

    /* ═══════════ CINEMATIC HERO ═══════════
       Goal: the hero should feel like footage playing, so a visitor stops instead of
       bouncing — WITHOUT hiding the product (the dashboard mockup stays put).
       Everything below animates only `transform` and `opacity`, so it composites on the
       GPU and never triggers layout. Nothing here animates the .hero background itself:
       that would drag the headline and buttons along with it.
       NOTE the theme — body.hero-light makes this hero warm PAPER (#FDFCFA), not the
       dark stage the base .hero rule still describes. The dark hero was tried and
       dropped. So "cinematic" here is drifting daylight, not a moody black room. */

    /* ── 1. drifting aurora — the main "something is playing" cue ── */
    .hero-aurora { position:absolute; inset:-15%; pointer-events:none; overflow:hidden; }
    .hero-aurora i {
      position:absolute; display:block; border-radius:50%;
      will-change:transform; /* these 3 are the only always-on layers we promote */
    }
    .hero-aurora .ha1 {
      width:46vw; height:38vw; left:48%; top:-10%;
      background:radial-gradient(circle at 50% 50%, rgba(34,197,94,0.22), rgba(34,197,94,0) 62%);
      animation:heroAur1 27s ease-in-out infinite alternate;
    }
    .hero-aurora .ha2 {
      width:42vw; height:36vw; left:-10%; top:34%;
      background:radial-gradient(circle at 50% 50%, rgba(134,239,172,0.26), rgba(134,239,172,0) 62%);
      animation:heroAur2 34s ease-in-out infinite alternate;
    }
    /* a warm blob, not a green one — it keeps the paper reading as paper instead of
       tinting the whole hero minty */
    .hero-aurora .ha3 {
      width:34vw; height:30vw; left:22%; top:52%;
      background:radial-gradient(circle at 50% 50%, rgba(234,179,8,0.10), rgba(234,179,8,0) 62%);
      animation:heroAur3 41s ease-in-out infinite alternate;
    }
    @keyframes heroAur1 { from { transform:translate3d(0,0,0) scale(1); }      to { transform:translate3d(-7%,6%,0)  scale(1.18); } }
    @keyframes heroAur2 { from { transform:translate3d(0,0,0) scale(1.1); }    to { transform:translate3d(9%,-7%,0)  scale(0.92); } }
    @keyframes heroAur3 { from { transform:translate3d(0,0,0) scale(0.95); }   to { transform:translate3d(6%,-9%,0)  scale(1.22); } }

    /* ── 2. the grid pans, so the frame reads as moving ──
       Oversized by 60px and translated exactly one 48px cell, so the loop is seamless.
       Transform, not background-position: background-position repaints the whole
       full-viewport layer every frame. */
    .hero-grid-bg { inset:-60px; animation:heroGrid 19s linear infinite; will-change:transform; }
    @keyframes heroGrid { from { transform:translate3d(0,0,0); } to { transform:translate3d(48px,48px,0); } }

    /* ── 3. film grain: the single strongest "this is video" cue ──
       Stepped, not smooth — real grain jumps. Kept slow and tiny; crank the step count
       and it starts to look like noise rather than film, and repaints get expensive. */
    .hero-mesh { inset:-24px; animation:heroGrain 1.6s steps(4) infinite; }
    @keyframes heroGrain {
      0%   { transform:translate3d(0,0,0); }
      25%  { transform:translate3d(-6px,4px,0); }
      50%  { transform:translate3d(5px,-5px,0); }
      75%  { transform:translate3d(-4px,-3px,0); }
      100% { transform:translate3d(0,0,0); }
    }

    /* ── 4. light sweeps across the dashboard, like a reflection crossing a screen ──
       On a ::after, NOT on .mockup itself. .mockup-outer already carries a floatY
       animation, and a CSS animation on an element outranks any inline transform written
       there — so motion systems on this pair have to keep to separate nodes. .mockup's
       overflow:hidden is what clips the streak to the rounded screen.
       Tinted green, not white: a white streak on a white dashboard is invisible. */
    .mockup::after {
      content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
      background:linear-gradient(100deg,
        rgba(255,255,255,0) 38%,
        rgba(22,163,74,0.07) 46%,
        rgba(134,239,172,0.30) 50%,
        rgba(22,163,74,0.07) 54%,
        rgba(255,255,255,0) 62%);
      transform:translate3d(-130%,0,0);
      animation:heroSweep 9s cubic-bezier(.5,0,.5,1) 2.2s infinite;
    }
    /* the streak crosses in the first ~30% and then waits offscreen — a sweep every 9s
       reads as ambient; a continuous one reads as a broken loading shimmer */
    @keyframes heroSweep {
      0%        { transform:translate3d(-130%,0,0); }
      30%, 100% { transform:translate3d(130%,0,0); }
    }

    /* ── 5. vignette — pulls the eye to the headline. Static; it frames, it doesn't move ── */
    .hero::after {
      content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
      background:radial-gradient(ellipse 92% 82% at 50% 38%, rgba(28,25,23,0) 55%, rgba(28,25,23,0.07) 100%);
    }

    @media (max-width: 768px) {
      /* the mockup is display:none here anyway, and three animated blobs plus a grain
         layer is a real battery cost on a phone for motion nobody asked for */
      .hero-mesh   { animation:none; inset:0; }
      .hero-aurora .ha3 { display:none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-aurora i, .hero-grid-bg, .hero-mesh, .mockup::after { animation:none !important; }
      .hero-grid-bg, .hero-mesh { transform:none !important; }
      .mockup::after { display:none; }
    }

    /* ═══ MITRA — the landing-page sales bot (was inline next to its panel) ═══ */
  /* No bubble of our own. The page already HAS one — the #mi-av headset avatar,
     which has always been called Mitra. It opens this panel now. A second floating
     button would have been the fourth thing on this page asking for the same phone
     number, and two of them would have been called Mitra. */

  .mtr-panel{position:fixed;right:22px;bottom:160px;width:372px;height:min(520px,calc(100vh - 200px));
    background:var(--card);border:1px solid var(--border);border-radius:16px;z-index:9001;display:none;
    flex-direction:column;overflow:hidden;box-shadow:0 28px 70px -14px rgba(0,0,0,.3);
    transform-origin:bottom right}
  /* opacity:1 lives HERE, on the resting state — not in the animation.
     It was left to @keyframes to set, and the panel rendered permanently invisible:
     an entry animation that never runs (a heavy page, reduced-motion, a browser quirk)
     takes the whole widget with it. An animation may only DECORATE the resting state,
     never define it. */
  .mtr-panel.open{display:flex;opacity:1;animation:mtrPop .18s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes mtrPop{from{opacity:0;transform:scale(.9) translateY(12px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .mtr-panel.open{animation:none} }

  .mtr-head{display:flex;align-items:center;gap:9px;padding:13px 15px;flex-shrink:0;
    background:linear-gradient(135deg,var(--brand2),var(--brand));color:#fff}
  .mtr-head svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mtr-h-t{font-weight:750;font-size:14.5px}
  .mtr-h-s{font-size:11px;opacity:.85;margin-top:1px}
  .mtr-x{margin-left:auto;background:rgba(255,255,255,.18);border:none;color:#fff;cursor:pointer;
    width:26px;height:26px;border-radius:7px;font-size:16px;line-height:1;font-family:inherit}

  .mtr-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#F8FAFC}
  .mtr-b{max-width:86%;padding:9px 13px;border-radius:13px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
  .mtr-b.ai{background:#fff;border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:4px}
  .mtr-b.me{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
  .mtr-b.sys{align-self:flex-start;background:none;border:none;color:#94A3B8;font-size:11.5px;padding:0 2px;font-style:italic}
  .mtr-chip{display:inline-block;margin:3px;padding:6px 11px;border-radius:15px;background:#fff;border:1px solid var(--border);
    font-size:12px;color:var(--ink);cursor:pointer}
  .mtr-chip:hover{border-color:var(--brand);color:var(--brand)}

  .mtr-foot{flex-shrink:0;border-top:1px solid var(--border);background:#fff;padding:10px}
  .mtr-row{display:flex;gap:7px}
  .mtr-in{flex:1;border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-size:13.5px;font-family:inherit;
    outline:none;min-width:0;color:var(--ink)}
  .mtr-in:focus{border-color:var(--brand)}
  .mtr-send{width:36px;height:36px;border-radius:9px;border:none;background:var(--brand);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .mtr-send:disabled{opacity:.45;cursor:not-allowed}
  .mtr-send svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

  /* FORM MODE — what the visitor sees when the bot cannot talk. */
  .mtr-form{padding:18px 16px;display:flex;flex-direction:column;gap:9px}
  .mtr-form-t{font-size:14px;font-weight:700;color:var(--ink)}
  .mtr-form-s{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:4px}
  .mtr-form input{border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:13.5px;font-family:inherit;outline:none}
  .mtr-form input:focus{border-color:var(--brand)}
  .mtr-form button{background:var(--brand);color:#fff;border:none;border-radius:9px;padding:11px;font-size:13.5px;
    font-weight:700;cursor:pointer;font-family:inherit}
  .mtr-form button:disabled{opacity:.6;cursor:wait}
  .mtr-ok{text-align:center;padding:28px 18px;color:var(--ink);font-size:14px;line-height:1.7}

  @media (max-width:640px){
    /* Full-screen on a phone.

       THE HEIGHT MUST BE dvh. It was `height:100%`, and that is the bug where the chat
       opens with no way to type into it.

       `.mtr-panel` is position:fixed, so a percentage height resolves against the layout
       viewport — and on a phone the layout viewport is the height WITH THE URL BAR HIDDEN.
       The URL bar is showing when the page loads. So the panel renders taller than the
       screen, and the piece that falls off the bottom is `.mtr-foot`: the input row. A fixed
       element does not scroll, so the visitor cannot reach it. The chat looks broken —
       header, greeting, chips, then a wall of white and nowhere to type.

       dvh tracks the VISIBLE height instead, so the input always lands on-screen. The plain
       `height:100%` stays directly above it as the fallback for anything without dvh.

       Do not "verify" this in headless Chrome. There is no URL bar there, so 100% and 100dvh
       are identical and the bug is invisible. It only shows on a real phone. */
    .mtr-panel{right:0;bottom:0;left:0;width:100%;border-radius:0;border:none;
      height:100%;
      height:100dvh}
    /* and on an iPhone the home-indicator bar would sit on top of the send button */
    .mtr-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
    .mtr-fab{right:16px;bottom:16px}
  }

    /* ══ MULTI-PAGE SITE — inner-page hero, home "Explore" doors, About page ══════════
       Same tokens as the home hero (warm paper, hairline grid, green glow), at a height
       that gets the visitor to the content instead of re-selling the product. */
    .page-hero {
      position:relative; overflow:hidden; padding:72px 0 64px; border-bottom:1px solid var(--hair);
      background:
        radial-gradient(ellipse 900px 420px at 85% -20%, rgba(22,163,74,0.13) 0%, transparent 60%),
        radial-gradient(ellipse 600px 360px at -10% 120%, rgba(34,197,94,0.07) 0%, transparent 55%),
        linear-gradient(170deg, #FDFCFA 0%, #FBF8F4 60%, #F9F5F0 100%);
    }
    .page-hero::before {
      content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
      background-image: linear-gradient(rgba(28,25,23,0.05) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(28,25,23,0.05) 1px, transparent 1px);
      background-size:56px 56px;
      -webkit-mask-image:radial-gradient(ellipse 70% 90% at 60% 0%, #000 25%, transparent 75%);
              mask-image:radial-gradient(ellipse 70% 90% at 60% 0%, #000 25%, transparent 75%);
    }
    .page-hero .container { position:relative; }
    .crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:26px; }
    .crumbs a { color:var(--muted); transition:color 0.2s; }
    .crumbs a:hover { color:var(--brand); }
    .crumbs span[aria-hidden] { opacity:0.45; }
    .crumbs [aria-current] { color:var(--ink9); }
    .page-hero h1 { font-size:clamp(32px,4.6vw,58px); line-height:1.06; letter-spacing:-1px; color:var(--ink9); max-width:860px; margin-bottom:18px; }
    .page-hero h1 em { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.5px; color:var(--brand); }
    .page-hero p { font-size:17.5px; line-height:1.7; color:#57534E; max-width:700px; margin-bottom:30px; }
    .page-hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
    @media (max-width:640px) {
      .page-hero { padding:44px 0 40px; }
      .page-hero p { font-size:16px; }
      .page-hero-btns .btn { flex:1 1 100%; justify-content:center; }
    }

    /* the page you are on, in the shared nav */
    body.hero-light #mobile-nav a[aria-current="page"] { color:var(--brand); font-weight:700; }

    /* ── HOME · Explore: one door per inner page ── */
    .explore-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .explore-card {
      display:flex; flex-direction:column; gap:10px; padding:26px 24px; border-radius:18px;
      background:#fff; border:1px solid var(--hair); box-shadow:var(--sh-sm); color:var(--ink);
      transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
    }
    .explore-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:rgba(22,163,74,0.32); }
    .explore-ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(22,163,74,0.08); color:var(--brand); margin-bottom:4px; }
    .explore-ic .ic { width:22px; height:22px; }
    .explore-t { font-family:var(--disp); font-size:18px; font-weight:800; color:var(--ink9); letter-spacing:-0.3px; }
    .explore-s { font-size:14.5px; line-height:1.65; color:var(--muted); flex:1; }
    .explore-go { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--brand); margin-top:4px; }
    .explore-go .ic { width:14px; height:14px; transition:transform 0.25s var(--ease); }
    .explore-card:hover .explore-go .ic { transform:translateX(4px); }
    @media (max-width:980px) { .explore-grid { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:600px) { .explore-grid { grid-template-columns:1fr; } }

    /* ── FOOTER · reachable contact line under the socials ── */
    .footer-contact { margin-top:16px; font-size:13px; line-height:1.8; color:rgba(255,255,255,0.55); }
    .footer-contact a { color:rgba(255,255,255,0.8); }
    .footer-contact a:hover { color:#86EFAC; }
    .footer-social { color:rgba(255,255,255,0.8); }

    /* ── ABOUT ── */
    .about-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
    .about-card { background:#fff; border:1px solid var(--hair); border-radius:18px; padding:30px 28px; box-shadow:var(--sh-sm); }
    .about-ic { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(22,163,74,0.08); color:var(--brand); margin-bottom:16px; }
    .about-ic .ic { width:21px; height:21px; }
    .about-card h3 { font-size:20px; color:var(--ink9); margin-bottom:10px; }
    .about-card p { font-size:15px; line-height:1.75; color:var(--muted); }
    .about-card a, .about-facts a { color:var(--brand); font-weight:700; }
    .about-principles { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:1000px; margin:0 auto; }
    .about-principles li { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--hair); border-radius:16px; padding:22px; font-size:15px; line-height:1.7; color:var(--muted); box-shadow:var(--sh-sm); }
    .about-principles li b { display:block; color:var(--ink9); font-family:var(--disp); font-size:16px; margin-bottom:4px; }
    .about-principles li > .ic { flex-shrink:0; width:22px; height:22px; color:var(--brand); margin-top:2px; }
    .about-company { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; background:#fff; border:1px solid var(--hair); border-radius:22px; padding:44px; box-shadow:var(--sh-md); }
    .about-facts { display:grid; gap:14px; }
    .about-facts > div { display:flex; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--hair); }
    .about-facts > div:last-child { border-bottom:none; padding-bottom:0; }
    .about-facts dt { font-size:13px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:var(--muted); }
    .about-facts dd { font-size:15px; font-weight:600; color:var(--ink9); text-align:right; }
    @media (max-width:860px) {
      .about-grid, .about-principles, .about-company { grid-template-columns:1fr; }
      .about-company { padding:28px 22px; gap:24px; }
      .about-facts > div { flex-direction:column; gap:4px; }
      .about-facts dd { text-align:left; }
    }