/* ============ TOKENS ============ */
  :root{
    --bg:#F6F7F5;
    --surface:#FFFFFF;
    --surface-2:#EDF0EE;
    --border:rgba(11,15,20,0.10);
    --text:#0E1416;
    --muted:#5C6B70;
    --accent:#E1503A;
    --accent-ink:#FFFFFF;
    --accent-soft:rgba(225,80,58,0.12);
    --teal:#0F8F7E;
    --teal-soft:rgba(15,143,126,0.12);
    --good:#1E9E5A;
    --good-soft:rgba(30,158,90,0.12);
    --warn:#B3720A;
    --warn-soft:rgba(179,114,10,0.12);
    --bad:#C23B34;
    --bad-soft:rgba(194,59,52,0.12);
    --whatsapp:#25D366;
    --shadow: 0 1px 2px rgba(11,15,20,0.06), 0 12px 32px -16px rgba(11,15,20,0.18);
    --radius: 14px;
    --font-display:'Poppins', ui-sans-serif, system-ui, sans-serif;
    --font-body:'Poppins', ui-sans-serif, system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0B0F14;
      --surface:#141A20;
      --surface-2:#1C242B;
      --border:rgba(237,241,243,0.09);
      --text:#EDF1F3;
      --muted:#93A0A8;
      --accent:#FF6B57;
      --accent-ink:#2A0B06;
      --accent-soft:rgba(255,107,87,0.15);
      --teal:#22B8A6;
      --teal-soft:rgba(34,184,166,0.14);
      --good:#3DDC84;
      --good-soft:rgba(61,220,132,0.14);
      --warn:#FFB020;
      --warn-soft:rgba(255,176,32,0.14);
      --bad:#F0453D;
      --bad-soft:rgba(240,69,61,0.14);
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 48px -20px rgba(0,0,0,0.55);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0B0F14;
    --surface:#141A20;
    --surface-2:#1C242B;
    --border:rgba(237,241,243,0.09);
    --text:#EDF1F3;
    --muted:#93A0A8;
    --accent:#FF6B57;
    --accent-ink:#2A0B06;
    --accent-soft:rgba(255,107,87,0.15);
    --teal:#22B8A6;
    --teal-soft:rgba(34,184,166,0.14);
    --good:#3DDC84;
    --good-soft:rgba(61,220,132,0.14);
    --warn:#FFB020;
    --warn-soft:rgba(255,176,32,0.14);
    --bad:#F0453D;
    --bad-soft:rgba(240,69,61,0.14);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 48px -20px rgba(0,0,0,0.55);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    padding-inline:20px;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }
  .wrap{max-width:1120px; margin:0 auto;}
  .narrow{max-width:720px;}
  a{color:inherit;}
  ::selection{background:var(--accent-soft); color:var(--text);}
  h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; letter-spacing:-0.01em; font-weight:700;}
  p{margin:0; color:var(--muted); line-height:1.6;}
  .eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:0.09em; text-transform:uppercase;
    color:var(--teal); display:flex; align-items:center; gap:8px;
  }
  .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none;}
  .tabular{font-variant-numeric:tabular-nums; font-family:var(--font-mono);}

  /* ============ NAV ============ */
  header{
    position:sticky; top:0; z-index:40; backdrop-filter:blur(10px) saturate(1.3);
    background:color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom:1px solid var(--border);
    margin-inline:-20px; padding-inline:20px;
  }
  .nav{
    max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
    padding-block:14px; gap:16px; position:relative;
  }
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px;}
  .dosti-mini{width:26px; height:26px; border-radius:50%; flex:none;
    background:radial-gradient(circle at 32% 28%, var(--teal), transparent 60%), radial-gradient(circle at 68% 72%, var(--accent), transparent 55%), var(--surface-2);
    box-shadow:inset 0 0 0 1px var(--border);
  }
  nav.links{display:flex; gap:26px; font-size:14.5px; color:var(--muted);}
  nav.links a{text-decoration:none; transition:color .15s;}
  nav.links a:hover{color:var(--text);}
  .navcta{display:flex; align-items:center; gap:10px;}
  @media (max-width:760px){ nav.links{display:none;} }

  .mobile-toggle{
    display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
    background:var(--surface); align-items:center; justify-content:center; cursor:pointer; flex:none;
  }
  .mobile-toggle svg{width:18px; height:18px;}
  @media (max-width:760px){ .mobile-toggle{display:flex;} }
  .mobile-drawer{
    display:none; position:absolute; top:calc(100% + 1px); left:0; right:0;
    background:var(--surface); border:1px solid var(--border); border-top:none;
    border-radius:0 0 14px 14px; padding:8px 20px 14px; box-shadow:var(--shadow);
  }
  .mobile-drawer.open{display:block;}
  .mobile-drawer a{display:block; padding:11px 2px; font-size:15px; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border);}
  .mobile-drawer a:last-child{border-bottom:none;}

  .btn{
    font-family:var(--font-body); font-weight:600; font-size:14.5px; border:none; cursor:pointer;
    padding:11px 20px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  }
  .btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
  .btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 1px 0 rgba(0,0,0,0.15) inset, 0 8px 20px -8px var(--accent-soft);}
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px -8px var(--accent-soft);}
  .btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border);}
  .btn-ghost:hover{border-color:color-mix(in srgb, var(--text) 30%, var(--border));}
  .btn-whatsapp{background:var(--whatsapp); color:#06210F; box-shadow:0 8px 20px -8px rgba(37,211,102,0.45);}
  .btn-whatsapp:hover{transform:translateY(-1px);}

  /* ============ HERO ============ */
  .hero{
    position:relative; padding-block:76px 56px; overflow:hidden;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
  }
  @media (max-width:860px){ .hero{grid-template-columns:1fr; padding-block:44px 32px;} }

  .hero h1{font-size:clamp(34px,5vw,54px); line-height:1.08; font-weight:700; margin-block:16px 18px;}
  .hero h1 em{font-style:normal; color:var(--accent);}
  .hero p.lede{font-size:17px; max-width:46ch;}
  .hero-cta{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}

  .ticker{
    margin-top:34px; display:flex; gap:28px; flex-wrap:wrap;
  }
  .ticker-item .num{font-family:var(--font-mono); font-size:26px; font-weight:600; font-variant-numeric:tabular-nums;}
  .ticker-item .lbl{font-size:12px; color:var(--muted); margin-top:2px;}

  /* Dosti orb */
  .orb-stage{position:relative; height:360px; display:flex; align-items:center; justify-content:center;}
  .orb{
    position:relative; width:210px; height:210px; border-radius:50%;
    background:
      radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--teal) 85%, white) 0%, transparent 42%),
      radial-gradient(circle at 72% 74%, var(--accent) 0%, transparent 46%),
      radial-gradient(circle at 50% 50%, var(--surface-2), var(--surface) 70%);
    box-shadow:0 0 0 1px var(--border), 0 30px 70px -24px var(--teal-soft), inset 0 0 30px rgba(0,0,0,0.08);
    animation:orb-pulse 5.5s ease-in-out infinite;
  }
  .orb::after{
    content:""; position:absolute; inset:-26px; border-radius:50%;
    border:1px solid var(--border); border-top-color:var(--teal); opacity:.55;
    animation:orb-spin 14s linear infinite;
  }
  .orb-face{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
  .orb-face svg{width:64px; height:64px; opacity:.9;}
  @keyframes orb-pulse{
    0%,100%{ transform:scale(1); filter:brightness(1); }
    50%{ transform:scale(1.045); filter:brightness(1.08); }
  }
  @keyframes orb-spin{ to{ transform:rotate(360deg); } }
  .orb-caption{position:absolute; bottom:6px; left:50%; transform:translateX(-50%); text-align:center; font-size:12.5px; color:var(--muted); width:220px;}
  .orb-caption b{color:var(--text); font-family:var(--font-display);}

  /* ============ COMPLIANCE STRIP ============ */
  .strip{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 20px; display:flex; gap:22px; flex-wrap:wrap; align-items:center; margin-block:8px 52px;
  }
  .strip-item{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted);}
  .strip-item svg{flex:none; width:16px; height:16px; color:var(--teal);}
  .strip-item b{color:var(--text); font-weight:600;}
  .strip-item sup{color:var(--accent); font-weight:700;}

  /* ============ SECTION HEADS ============ */
  section{padding-block:54px;}
  .sec-head{max-width:640px; margin-bottom:34px;}
  .sec-head h2{font-size:clamp(24px,3.4vw,32px); margin-top:12px;}
  .sec-head p{margin-top:10px; font-size:15.5px;}

  /* ============ AUDIENCE ROW ============ */
  .audience-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
  @media (max-width:860px){ .audience-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:560px){ .audience-grid{grid-template-columns:repeat(2,1fr);} }
  .audience-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .audience-card.lead{border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); background:var(--accent-soft);}
  .audience-card .ic{
    width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .audience-card.lead .ic{background:var(--accent); color:var(--accent-ink);}
  .audience-card .ic svg{width:20px; height:20px;}
  .audience-card span{font-size:13px; font-weight:600;}
  .audience-note{font-size:12.5px; color:var(--muted); margin-top:18px; max-width:70ch;}

  /* ============ LOAN GRID ============ */
  .grid6{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:860px){ .grid6{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .grid6{grid-template-columns:1fr;} }
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px; display:flex; flex-direction:column; gap:12px; min-height:172px;
    transition:transform .18s ease, border-color .18s ease;
  }
  .card:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--teal) 40%, var(--border));}
  .card .ic{
    width:38px; height:38px; border-radius:10px; background:var(--teal-soft); color:var(--teal);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .card .ic svg{width:20px; height:20px;}
  .card h3{font-size:16.5px; font-weight:600;}
  .card p{font-size:13.5px;}
  .card .tag{margin-top:auto; font-size:12px; color:var(--accent); font-family:var(--font-mono); display:flex; align-items:center; gap:6px;}

  /* ============ PROCESS ============ */
  .process{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:step;}
  @media (max-width:760px){ .process{grid-template-columns:repeat(2,1fr);} }
  .step{position:relative; padding-top:6px;}
  .step .n{font-family:var(--font-mono); font-size:13px; color:var(--accent); font-weight:600;}
  .step h4{font-family:var(--font-display); font-size:16px; margin-top:8px; font-weight:600;}
  .step p{font-size:13.5px; margin-top:6px;}
  .step:not(:last-child)::after{
    content:""; position:absolute; top:12px; left:calc(100% - 8px); width:calc(100% - 16px); height:1px;
    background:var(--border);
  }
  @media (max-width:760px){ .step::after{display:none;} }

  /* ============ CALCULATOR ============ */
  .calc-panel{
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:32px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:36px; box-shadow:var(--shadow);
  }
  @media (max-width:900px){ .calc-panel{grid-template-columns:1fr; padding:24px;} }
  .field{margin-bottom:22px;}
  .field-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px;}
  .field-top label{font-size:13.5px; color:var(--muted); font-weight:500;}
  .field-top .val{font-family:var(--font-mono); font-size:15px; font-weight:600;}
  input[type="range"]{
    width:100%; -webkit-appearance:none; appearance:none; height:5px; border-radius:99px;
    background:var(--surface-2); outline:none;
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent);
    border:3px solid var(--surface); box-shadow:0 0 0 1px var(--border); cursor:pointer; margin-top:-6.5px;
  }
  input[type="range"]::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--surface);
    box-shadow:0 0 0 1px var(--border); cursor:pointer;
  }
  .results{display:flex; flex-direction:column; gap:14px;}
  .result-hero{
    background:var(--surface-2); border-radius:14px; padding:20px 22px;
  }
  .result-hero .lbl{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
  .result-hero .amt{font-family:var(--font-mono); font-size:34px; font-weight:600; margin-top:6px;}
  .result-row{display:flex; justify-content:space-between; font-size:13.5px; padding:10px 2px; border-top:1px solid var(--border);}
  .result-row b{font-family:var(--font-mono); font-weight:600;}
  canvas{width:100%; height:120px; display:block; margin-top:6px;}
  .calc-note{font-size:12px; color:var(--muted); margin-top:14px; line-height:1.55;}

  /* ============ DOSTAA SCORE ============ */
  .score-panel{
    background:linear-gradient(160deg, var(--surface) 0%, var(--surface) 60%, var(--teal-soft) 160%);
    border:1px solid var(--border); border-radius:20px; padding:32px;
  }
  .pill-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
  .pill{
    font-family:var(--font-mono); font-size:12.5px; border:1px solid var(--border); background:var(--surface-2);
    color:var(--muted); padding:8px 14px; border-radius:999px; cursor:pointer; transition:all .15s;
  }
  .pill[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600;}
  .score-out{
    margin-top:22px; border-radius:14px; padding:18px 20px; border:1px solid var(--border);
    background:var(--surface); display:flex; gap:14px; align-items:flex-start;
  }
  .score-dot{width:10px; height:10px; border-radius:50%; margin-top:6px; flex:none;}
  .score-out h4{font-family:var(--font-display); font-size:15.5px; font-weight:700;}
  .score-out p{font-size:13.5px; margin-top:4px;}
  .score-out small{display:block; margin-top:8px; font-size:11.5px; color:var(--muted);}
  .score-cta{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap;}

  /* lead capture inline form (inside Dostaa Score result) */
  .lead-inline{margin-top:16px; padding-top:16px; border-top:1px solid var(--border); display:none;}
  .lead-inline.open{display:block;}
  .lead-inline .row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
  .lead-inline input[type="text"], .lead-inline input[type="tel"]{
    flex:1 1 160px; min-width:0; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    border-radius:10px; padding:10px 12px; font-family:var(--font-body); font-size:14px;
  }
  .lead-inline input:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
  .lead-consent{display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:12px; color:var(--muted);}
  .lead-consent input{margin-top:2px;}
  .lead-status{font-size:12.5px; margin-top:10px; display:none;}
  .lead-status.show{display:block;}

  /* ============ COVERAGE ============ */
  .chips{display:flex; flex-wrap:wrap; gap:9px;}
  .chip{
    font-size:13px; padding:8px 14px; border-radius:999px; border:1px solid var(--border);
    background:var(--surface); color:var(--muted);
  }
  .chip.hq{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); font-weight:600;}

  /* ============ FOOTER ============ */
  footer{border-top:1px solid var(--border); padding-block:40px; margin-top:20px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;}
  @media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }
  .foot-grid h5{font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:12px; font-weight:600;}
  .foot-grid a{display:block; font-size:13.5px; color:var(--muted); text-decoration:none; margin-bottom:9px;}
  .foot-grid a:hover{color:var(--text);}
  .foot-compliance{
    margin-top:32px; padding-top:24px; border-top:1px solid var(--border);
    font-size:12px; color:var(--muted); line-height:1.7;
  }
  .foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:18px; font-size:12px; color:var(--muted);}

  /* ============ WHATSAPP FAB ============ */
  .wa-fab{
    position:fixed; right:20px; bottom:20px; z-index:45; width:56px; height:56px; border-radius:50%;
    background:var(--whatsapp); display:flex; align-items:center; justify-content:center; text-decoration:none;
    box-shadow:0 10px 26px -8px rgba(37,211,102,0.55), 0 0 0 1px rgba(0,0,0,0.05);
    transition:transform .15s ease;
  }
  .wa-fab:hover{transform:translateY(-2px) scale(1.03);}
  .wa-fab svg{width:28px; height:28px;}
  @media (max-width:560px){ .wa-fab{right:14px; bottom:14px; width:50px; height:50px;} .wa-fab svg{width:25px; height:25px;} }

  /* ============ LEAD POPUP ============ */
  .lead-popup{
    position:fixed; left:20px; bottom:20px; z-index:50; width:320px; max-width:calc(100vw - 40px);
    background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
    padding:20px; transform:translateY(24px); opacity:0; pointer-events:none; transition:transform .35s ease, opacity .35s ease;
  }
  .lead-popup.show{transform:translateY(0); opacity:1; pointer-events:auto;}
  .lead-popup .close{position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; border:none; background:var(--surface-2); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .lead-popup h4{font-size:15.5px; font-weight:700; padding-right:20px;}
  .lead-popup p{font-size:12.5px; margin-top:6px;}
  .lead-popup .row{display:flex; gap:8px; margin-top:12px;}
  .lead-popup input[type="text"], .lead-popup input[type="tel"]{
    width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    border-radius:10px; padding:10px 12px; font-family:var(--font-body); font-size:13.5px; margin-top:8px;
  }
  .lead-popup .btn{width:100%; justify-content:center; margin-top:12px;}
  .lead-popup .lead-consent{margin-top:10px;}
  @media (max-width:560px){ .lead-popup{left:12px; right:12px; width:auto; bottom:12px;} }

  /* reveal on scroll */
  .reveal{opacity:1; transform:none;}
  .reveal.pre{opacity:0; transform:translateY(14px);}
  .reveal.on{opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease;}