:root{
    --bg:#f6f5f0; --surface:#fff; --surface-2:#edf0e8;
    --border:#e2e4da; --border-2:#cbcfc1;
    --ink:#0f2018; --text:#0f2018; --dim:#42504a; --faint:#6b7a70;
    --brand:#0c6b44; --brand-ink:#084a30; --brand-soft:rgba(12,107,68,.09);
    --logo-navy:#1e3a5f; --logo-red:#c0392b;
    --low:#15803d; --low-bg:#dcfce7; --mid:#b45309; --mid-bg:#fef3c7; --high:#b91c1c; --high-bg:#fee2e2;
    --r:18px; --r-sm:12px;
    --sh-sm:0 1px 2px rgba(15,32,24,.05); --sh:0 2px 6px rgba(15,32,24,.05),0 20px 44px rgba(15,32,24,.10);
    --ease:cubic-bezier(.16,1,.3,1); --maxw:1160px;
    /* ledger/terminal numeral face: reserved ONLY for rate/money figures, giving them an
       engineered, audited feel distinct from the soft rounded sans used everywhere else
       (this is the "strict, precise, trustworthy" signal — no webfont fetch, system stack) */
    --mono:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
    /* editorial layer: a subtle atmospheric wash sampled from the misty-mountain hero, laid *under* a heavy cream scrim so it reads as texture, never as a picture (Mercury "editorial photography as backdrop" idea, dialed way down) */
    --atmos:linear-gradient(180deg,rgba(246,245,240,.94) 0%,rgba(246,245,240,.97) 46%,var(--bg) 100%);
    --hair:rgba(15,32,24,.12); /* hairline rule for editorial dividers */
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3{letter-spacing:-.03em;line-height:1.08;color:var(--ink);text-wrap:balance;font-weight:800}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
  ::selection{background:var(--brand-soft)}

  /* cosmic backdrop — subtle starfield + soft glow for dark (--ink) panels only, disabled in klassik theme */
  .cosmic{position:relative;overflow:hidden}
  .cosmic::before{
    content:'';position:absolute;top:-20px;left:-20px;width:2px;height:2px;border-radius:50%;
    background:transparent;box-shadow:var(--stars,none);
    pointer-events:none;z-index:0;
    animation:cosmicTwinkle 9s ease-in-out infinite;
    transform:translateY(calc(var(--sy,0)*.4px));
  }
  .cosmic::after{
    content:'';position:absolute;top:-20px;left:-20px;right:-20px;bottom:-20px;pointer-events:none;z-index:0;
    background-image:
      radial-gradient(180px 180px at center,rgba(95,217,154,.10),transparent 70%),
      radial-gradient(220px 220px at center,rgba(143,163,152,.08),transparent 70%);
    background-repeat:no-repeat;
    background-position:12% 15%,88% 82%;
    transform:translateY(calc(var(--sy,0)*1px));
    animation:cosmicDrift 46s ease-in-out infinite alternate;
  }
  .cosmic>*{position:relative;z-index:1}
  @keyframes cosmicTwinkle{0%,100%{opacity:.45}50%{opacity:.62}}
  @keyframes cosmicDrift{0%{background-position:12% 15%,88% 82%}100%{background-position:17% 20%,83% 77%}}

  /* top bar */
  .topbar{background:var(--ink);color:#dfe8e2;font-size:.8rem;text-align:center;padding:8px 16px}
  .topbar b{color:#ffd479}
  /* header */
  header{position:sticky;top:0;z-index:60;background:#f6f5f0e6;backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
  nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
  .logo .mk{display:grid;place-items:center}
  .logo .wm{display:flex;flex-direction:column;line-height:1;gap:3px}
  .logo .wm b{font-weight:800;font-size:.96rem;letter-spacing:.04em;color:var(--ink)}
  .logo .wm>span{font-weight:600;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
  /* CRESCOR belgisi: oltin nisbat spirali (o'sish/crescere) + qizil urg'u nuqta — harfsiz */
  .logomark{width:30px;height:30px;overflow:visible;display:block}
  .logomark .lm-spiral{fill:none;stroke:var(--logo-navy);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
  .logomark .lm-accent{fill:var(--logo-red);transform-box:fill-box;transform-origin:center}
  /* Yuklanishda: spiral BIR MARTA "o'sib chiqadi", so'ng qizil nuqta paydo bo'ladi.
     Shundan keyin nuqta juda sekin (3.6s) "nafas oladi" — o'sish/hayotiylik belgisi,
     ko'zga tashlanib ketmaydigan darajada nozik. Hover'da spiral qayta chiziladi
     (kichik lazzat, foydalanuvchi harakatiga javob). */
  @media (prefers-reduced-motion: no-preference){
    .logomark .lm-spiral{stroke-dasharray:1;stroke-dashoffset:1;animation:lmDraw .9s cubic-bezier(.16,1,.3,1) forwards}
    .logomark .lm-accent{opacity:0;transform:scale(.2);animation:lmPop .34s cubic-bezier(.34,1.32,.5,1) .74s forwards,lmBreathe 3.6s ease-in-out 1.3s infinite}
    .logo:hover .logomark .lm-spiral{animation:lmRedraw .7s cubic-bezier(.16,1,.3,1)}
  }
  @keyframes lmDraw{to{stroke-dashoffset:0}}
  @keyframes lmPop{to{opacity:1;transform:scale(1)}}
  @keyframes lmBreathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.82}}
  @keyframes lmRedraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
  .nlinks{display:flex;gap:26px}
  .nlinks a{color:var(--dim);font-weight:600;font-size:.89rem;position:relative;padding:4px 0}
  .nlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--brand);transition:right .22s var(--ease)}
  .nlinks a:hover{color:var(--ink)}
  .nlinks a:hover::after{right:0}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:.9rem;padding:11px 18px;border-radius:100px;transition:transform .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);white-space:nowrap}
  .btn:active{transform:scale(.96)}
  .btn-p{background:var(--ink);color:#fff}.btn-p:hover{background:var(--brand-ink);box-shadow:0 6px 18px rgba(12,107,68,.25)}
  .btn-g{background:transparent;color:var(--ink);border:1px solid var(--border-2)}.btn-g:hover{background:var(--surface-2);border-color:var(--ink)}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;transition:transform .12s var(--ease)}
  .burger:active{transform:scale(.92)}
  .burger span{width:23px;height:2px;background:var(--ink);border-radius:2px}

  /* theme switch */
  .theme-switch{display:flex;background:var(--surface-2);border:1px solid var(--border-2);border-radius:100px;padding:3px;gap:2px}
  .ts-btn{border:none;background:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:.78rem;padding:7px 13px;border-radius:100px;color:var(--faint);transition:background .18s var(--ease),color .18s var(--ease)}
  .ts-btn.active{background:var(--ink);color:#fff}
  .ts-btn:not(.active):hover{color:var(--ink)}

  /* hero */
  .hero{padding:64px 0 34px;position:relative;overflow:hidden}
  .hero::before{content:'';position:absolute;top:-140px;right:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(12,107,68,.14) 0%,transparent 68%);pointer-events:none}

  /* atmospheric hero photography (Variant B) — licensed misty-mountain photo behind a dark scrim so white text stays legible; disabled in klassik theme */
  .hero-photo{padding-top:96px;padding-bottom:64px}
  .hero-photo::after{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      /* extra darkening at bottom-left where the headline sits (same idea Mercury uses) */
      radial-gradient(120% 90% at 20% 78%,rgba(8,18,13,.72) 0%,rgba(8,18,13,.30) 45%,transparent 72%),
      /* overall dark scrim, heavier at the left/bottom text zone, lighter top-right */
      linear-gradient(115deg,rgba(9,20,14,.86) 0%,rgba(9,20,14,.62) 42%,rgba(9,20,14,.34) 100%),
      url('hero-atmosphere.jpg');
    background-size:cover,cover,cover;
    background-position:center,center,center 30%;
    background-repeat:no-repeat;
    /* gentle Ken Burns drift — pure decoration, frozen under reduced-motion */
    animation:heroPan 40s ease-in-out infinite alternate;
    transform-origin:center;
    /* scroll-linked parallax depth: JS updates --hero-py (transform-only, rAF-throttled,
       skipped entirely under reduced-motion) so the photo drifts slower than the page scrolls.
       The Ken Burns zoom above provides the size margin so this never exposes an edge. */
    transform:translateY(var(--hero-py,0px));
  }
  .hero-photo .hgrid{z-index:1}
  @keyframes heroPan{0%{background-size:cover,cover,116%}100%{background-size:cover,cover,124%}}
  /* text over the photo turns light for contrast — .hero.hero-photo raises specificity above the base .hero rules that follow in source order */
  .hero-photo .pill{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#eaf3ee;backdrop-filter:blur(4px)}
  .hero.hero-photo h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
  .hero.hero-photo h1 .hl{color:#7fe3b2}
  .hero.hero-photo .lead{color:#d4ddd6}
  .hero.hero-photo .lead b{color:#fff}
  .hero-photo .btn-g{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.4)}
  .hero-photo .btn-g:hover{background:rgba(255,255,255,.14);border-color:#fff}
  .hero-photo .trust .n{color:#fff}
  .hero-photo .trust .l{color:#b8c5bc}
  .hero-photo .trust>div{border-right-color:rgba(255,255,255,.18)}
  .hero-reassure{font-size:.78rem;color:var(--faint);margin:-16px 0 22px}
  .hero-photo .hero-reassure{color:#b8c5bc}
  @media(prefers-reduced-motion:reduce){.hero-photo::after{animation:none;background-size:cover,cover,120%;transform:none}}
  .hgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end;position:relative}
  .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;background:var(--surface);border:1px solid var(--border-2);font-size:.8rem;font-weight:700;color:var(--brand-ink);margin-bottom:22px}
  .pill .d{width:6px;height:6px;border-radius:50%;background:var(--brand)}
  /* pill "live status" dot: a very slow, quiet breathing pulse — signals "active service"
     without shouting. Transform/opacity only, off entirely under reduced motion. */
  @media (prefers-reduced-motion: no-preference){
    .pill .d{animation:pillPulse 2.6s ease-in-out infinite}
  }
  @keyframes pillPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.3)}}
  .hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);margin-bottom:20px;letter-spacing:-.04em;line-height:1.02}
  .hero h1 .hl{color:var(--brand-ink);position:relative;white-space:nowrap}
  .hero .lead{font-size:1.14rem;color:var(--dim);max-width:48ch;margin-bottom:26px;text-wrap:pretty;line-height:1.55}
  .lead b{color:var(--ink);font-weight:700}
  .hcta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
  .trust{display:flex;gap:0;flex-wrap:wrap;margin-top:4px}
  .trust>div{padding-right:32px;margin-right:32px;border-right:1px solid var(--border)}
  .trust>div:last-child{border-right:none;margin-right:0;padding-right:0}
  .trust .n{font-family:var(--mono);font-size:2.1rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
  .trust .l{font-size:.78rem;color:var(--faint);margin-top:4px}
  /* market panel: reframed as an editorial "rates sheet" with generous padding, a titled masthead row, and larger tabular figures set against hairline rules */
  .mpanel{background:var(--ink);border-radius:var(--r);padding:30px 30px 26px;box-shadow:var(--sh);color:#e9efe9}
  .mpanel h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#8fa398;margin-bottom:20px;font-weight:700;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
  .mstat{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .mstat:last-child{border-bottom:none}
  .mstat .lbl{font-size:.9rem;color:#b7c4bb}
  .mstat .v{font-family:var(--mono);font-weight:700;color:#fff;font-variant-numeric:tabular-nums;font-size:1.14rem;letter-spacing:-.01em;text-align:right}
  .mstat .src{font-size:.64rem;color:#7d8f83;display:block;font-weight:500;letter-spacing:.02em;margin-top:1px}
  .msrc{font-size:.7rem;color:#7d8f83;margin-top:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:13px}

  section{padding:78px 0;position:relative}
  /* editorial section titles: larger, tighter, with an optical size-9 weight so headers read like a financial-journal masthead rather than generic app copy */
  .stitle{font-size:clamp(2rem,4vw,3.15rem);margin-bottom:14px;text-align:left;letter-spacing:-.035em;font-weight:800;line-height:1.04}
  .ssub{text-align:left;color:var(--dim);max-width:62ch;margin:0 0 44px;font-size:1.06rem;text-wrap:pretty;line-height:1.55}
  /* optional editorial kicker: a hairline + short label that can precede a title without becoming an every-section eyebrow. Used sparingly. */
  .kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:var(--brand-ink);font-weight:700;font-size:.8rem;letter-spacing:.02em}
  .kicker::before{content:'';width:34px;height:1.5px;background:var(--brand);flex:none}

  /* steps: horizontal timeline, not boxed cards */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
  .steps::before{content:'';position:absolute;top:19px;left:5%;right:5%;height:1px;background:var(--border-2);z-index:0;transform-origin:left center}
  /* connector line "draws itself" left-to-right as the section scrolls into view.
     .steps gets .in from the same IntersectionObserver as .reveal (see index.html script).
     Transform-only; the un-animated (drawn) state is the default outside no-preference. */
  @media (prefers-reduced-motion: no-preference){
    .steps::before{transform:scaleX(0);transition:transform .6s var(--ease)}
    .steps.in::before{transform:scaleX(1)}
  }
  .step{position:relative;padding-right:18px;transition:transform .2s var(--ease)}
  .step:hover{transform:translateY(-2px)}
  .step .nm{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:20px;position:relative;z-index:1;font-size:.95rem}
  .step h3{font-size:1.05rem;margin-bottom:7px}.step p{color:var(--dim);font-size:.89rem;max-width:26ch}
  /* staggered entrance: each step already carries its own .reveal (index.html), this just
     spaces out when each one's transition-delay kicks in (see .reveal rule for the calc()) */
  .steps .step:nth-child(1){--stagger-i:0}
  .steps .step:nth-child(2){--stagger-i:1}
  .steps .step:nth-child(3){--stagger-i:2}
  .steps .step:nth-child(4){--stagger-i:3}

  /* calculator */
  .calcgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-items:stretch;background:var(--border-2);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm)}
  .calc,.cres{background:var(--surface);padding:32px}
  .cres{background:var(--ink);color:#e9efe9}
  .calc h3,.cres h3{font-size:.72rem;margin-bottom:22px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--faint);padding-bottom:15px;border-bottom:1px solid var(--border)}
  .cres h3{color:#8fa398;border-bottom-color:rgba(255,255,255,.14)}
  .field{margin-bottom:18px}
  .field .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
  .field label{font-weight:600;font-size:.89rem;color:var(--dim)}
  .field .val{font-weight:800;color:var(--brand-ink);font-variant-numeric:tabular-nums}
  input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:10px;background:var(--surface-2);outline:none;cursor:pointer}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:5px solid var(--brand);box-shadow:0 1px 4px rgba(20,32,26,.25);transition:transform .12s var(--ease)}
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
  input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:5px solid var(--brand)}
  /* the headline figure of the whole calculator: oversized, tight, tabular, with the currency word dropped to a quiet caption so the number carries the moment */
  .cres .big{font-family:var(--mono);font-size:clamp(2.7rem,5vw,3.7rem);font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:.98;letter-spacing:-.01em}
  .cres .biglbl{font-size:.72rem;color:#8fa398;margin-bottom:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:700}
  .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
  .citem{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);padding:12px 14px}
  .citem .l{font-size:.76rem;color:#8fa398}
  .citem .v{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;color:#fff}
  .load{border-radius:var(--r-sm);padding:13px 15px;font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:9px}
  .load.ok{background:rgba(21,128,61,.18);color:#5fd99a}
  .load.bad{background:rgba(185,28,28,.2);color:#ff9c9c}
  .cres .btn-p{background:var(--brand)}.cres .btn-p:hover{background:#0e8354}
  .calc .note{font-size:.76rem;color:var(--faint);margin-top:16px;line-height:1.5}

  /* kalkulyator natijasi o'zgarganda: raqam "jonli hisoblayapti" hissini beruvchi
     juda qisqa pulse (faqat opacity/transform, GPU) — harakatni istamagan
     foydalanuvchida butunlay o'chadi */
  @media (prefers-reduced-motion: no-preference){
    .numpulse{animation:numPulse .22s var(--ease)}
  }
  @keyframes numPulse{ 0%{opacity:.5;transform:translateY(3px)} 100%{opacity:1;transform:translateY(0)} }

  /* rate leaderboard */
  .rtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
  .rtab{padding:9px 18px;border-radius:100px;border:1px solid var(--border-2);background:var(--surface);font-weight:700;font-size:.85rem;color:var(--dim);cursor:pointer;transition:.15s var(--ease)}
  .rtab:hover{border-color:var(--ink)}
  .rtab:active{transform:scale(.96)}
  .rtab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .lb{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
  .lbrow{position:relative;display:grid;grid-template-columns:34px 1.6fr 1.3fr 1fr .9fr;gap:16px;align-items:center;padding:18px 8px;border-bottom:1px solid var(--border);transition:background .15s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
  .lbrow:hover{background:var(--surface-2);transform:translateY(-2px);box-shadow:var(--sh-sm);z-index:2}
  /* rows draw in with a short stagger whenever the leaderboard enters view or the tab filter
     re-renders it (renderRates() re-fills #ratesBody, which replays this for the new markup).
     Capped to the first ~6 rows so a 17-row list doesn't get slow. */
  @media (prefers-reduced-motion: no-preference){
    .lb .lbrow{opacity:0;transform:translateY(14px)}
    .lb.in .lbrow{animation:rowIn .5s var(--ease) both}
    .lb.in .lbrow:nth-child(2){animation-delay:45ms}
    .lb.in .lbrow:nth-child(3){animation-delay:90ms}
    .lb.in .lbrow:nth-child(4){animation-delay:135ms}
    .lb.in .lbrow:nth-child(5){animation-delay:180ms}
    .lb.in .lbrow:nth-child(n+6){animation-delay:220ms}
  }
  @keyframes rowIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .lbrank{font-size:.9rem;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums}
  .lbwho .org{font-weight:700;color:var(--ink);font-size:1rem;letter-spacing:-.01em}
  .lbwho .p{font-size:.8rem;color:var(--faint);margin-top:2px}
  .lbrate{display:flex;flex-direction:column;gap:6px}
  .lbrate .rl{font-family:var(--mono);font-weight:700;font-size:1.08rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .lbrate .rl.low{color:var(--low)}.lbrate .rl.mid{color:var(--mid)}.lbrate .rl.high{color:var(--high)}
  .lbbar{height:5px;border-radius:4px;background:var(--surface-2);overflow:hidden}
  .lbbar span{display:block;height:100%;border-radius:4px}
  .lbbar span.low{background:var(--low)}.lbbar span.mid{background:var(--mid)}.lbbar span.high{background:var(--high)}
  .lbmeta{font-size:.82rem;color:var(--dim)}
  .lbmeta .sum{color:var(--faint);font-size:.76rem;display:block;margin-top:1px}
  .lbsrc{font-size:.72rem;color:var(--faint);text-align:right}
  .ronline{font-size:.66rem;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);border-radius:6px;padding:1px 7px;margin-left:7px;vertical-align:middle}
  .tnote{font-size:.76rem;color:var(--faint);margin-top:20px;line-height:1.5}
  @media(max-width:700px){.lbrow{grid-template-columns:22px 1.4fr .9fr;row-gap:6px}.lbsrc{display:none}.lbmeta{grid-column:2/4;order:3;font-size:.78rem}}

  /* matches: kalkulyatorga mos 3 taklif */
  .matchgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
  @media(max-width:820px){.matchgrid{grid-template-columns:1fr}}
  .matchcard{position:relative;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:24px 20px 20px;box-shadow:var(--sh-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
  .matchcard:hover{transform:translateY(-3px);box-shadow:var(--sh)}
  /* the 3 match cards draw in with a short stagger, same pattern as the rate rows above —
     renderMatches() re-fills #matchBody on every calculator change, replaying this each time. */
  @media (prefers-reduced-motion: no-preference){
    .matchgrid .matchcard{opacity:0;transform:translateY(14px)}
    .matchgrid.in .matchcard{animation:rowIn .5s var(--ease) both}
    .matchgrid.in .matchcard:nth-child(2){animation-delay:55ms}
    .matchgrid.in .matchcard:nth-child(3){animation-delay:110ms}
  }
  .matchcard .mrank{position:absolute;top:-11px;left:20px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:100px}
  .matchcard .morg{font-weight:800;font-size:1.02rem;margin-top:8px;letter-spacing:-.01em}
  .matchcard .mp{color:var(--faint);font-size:.82rem;margin-bottom:16px}
  .matchcard .mrate{font-family:var(--mono);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .matchcard .mrate.low{color:var(--low)}.matchcard .mrate.mid{color:var(--mid)}.matchcard .mrate.high{color:var(--high)}
  .matchcard .mmeta{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;color:var(--dim);margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
  .matchcard .mmeta span:last-child{color:var(--faint);text-align:right}
  .mfit{display:inline-block;font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:100px;margin-left:8px;vertical-align:1px}
  .mfit.exact{background:var(--low-bg);color:var(--low)}
  .mfit.approx{background:var(--mid-bg);color:var(--mid)}
  .matchall{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-weight:700;font-size:.88rem;color:var(--brand-ink)}
  .matchall:hover{text-decoration:underline}
  .mempty{color:var(--faint);font-size:.88rem;padding:18px 0}

  /* why: unified editorial list, no card soup */
  .whygrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
  .whylead h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:16px}
  .whylead p{color:var(--dim);font-size:1.03rem;max-width:42ch;margin-bottom:24px}
  .verified{display:flex;gap:13px;align-items:flex-start;background:var(--brand-soft);border:1px solid rgba(12,107,68,.18);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:24px}
  .verified .vseal{flex:none;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center}
  .verified b{display:block;font-size:.88rem;color:var(--brand-ink);letter-spacing:-.005em}
  .verified span{display:block;font-size:.78rem;color:var(--dim);margin-top:3px}
  .verified a{color:var(--brand-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
  .verified a:hover{color:var(--ink)}
  .usp{background:var(--ink);border-radius:var(--r);padding:26px;color:#e6ede9}
  .uspitem{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09)}
  .uspitem:last-child{border-bottom:none}
  .uspitem .ck{flex:none;width:26px;height:26px;border-radius:7px;background:rgba(95,217,154,.15);color:#5fd99a;display:grid;place-items:center;font-weight:800;font-size:.85rem}
  .uspitem b{color:#fff;display:block;font-size:.92rem}
  .uspitem span{color:#a7b5ad;font-size:.84rem}

  .reasons{display:flex;flex-direction:column}
  .reason{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--border);border-radius:var(--r-sm);transition:transform .18s var(--ease),background-color .18s var(--ease)}
  .reason:first-child{padding-top:0}
  .reason:last-child{border-bottom:none}
  .reason:hover{transform:translateY(-2px);background-color:rgba(15,32,24,.025)}
  .reason .ic{flex:none;width:42px;height:42px;border-radius:11px;background:var(--brand-soft);display:grid;place-items:center;font-size:1.15rem}
  .reason h3{font-size:1.02rem;margin-bottom:4px}.reason p{color:var(--dim);font-size:.91rem;max-width:46ch}
  /* each reason now carries its own .reveal (index.html) instead of one shared fade on
     .reasons — these nth-child rules give it a quiet, considered stagger instead of a dump */
  .reasons .reason:nth-child(1){--stagger-i:0}
  .reasons .reason:nth-child(2){--stagger-i:1}
  .reasons .reason:nth-child(3){--stagger-i:2}
  .reasons .reason:nth-child(4){--stagger-i:3}
  .reasons .reason:nth-child(5){--stagger-i:4}
  .reasons .reason:nth-child(6){--stagger-i:5}

  /* faq */
  .faq{max-width:760px;margin:34px auto 0;display:flex;flex-direction:column;gap:10px}
  .qa{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
  .qa summary{cursor:pointer;padding:17px 20px;font-weight:700;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;color:var(--ink)}
  .qa summary::-webkit-details-marker{display:none}
  .qa .pl{color:var(--brand);font-size:1.3rem;transition:transform .2s var(--ease)}
  .qa[open] .pl{transform:rotate(45deg)}
  .qa .ans{padding:0 20px 17px;color:var(--dim);font-size:.92rem;text-wrap:pretty}

  /* cta */
  .ctab{text-align:center;border-radius:var(--r);padding:60px 30px;background:var(--ink);color:#fff}
  .ctab h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:12px}
  .ctab p{color:#b7c4bb;max-width:50ch;margin:0 auto 28px;font-size:1.04rem;text-wrap:pretty}
  .ctab .btn-p{background:var(--brand)}.ctab .btn-p:hover{background:#0e8354}
  .ctab .btn-g{border-color:rgba(255,255,255,.25);color:#fff}.ctab .btn-g:hover{background:rgba(255,255,255,.08)}

  footer{border-top:1px solid var(--border);padding:44px 0 26px;margin-top:20px}
  .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:28px;margin-bottom:24px}
  .fgrid h4{font-size:.9rem;margin-bottom:13px}
  .fgrid a,.fgrid p{display:block;color:var(--dim);font-size:.88rem;margin-bottom:8px}
  .fgrid a:hover{color:var(--brand-ink)}
  .disc{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);padding:15px 17px;color:var(--dim);font-size:.81rem;line-height:1.55;margin-bottom:20px}
  .disc b{color:var(--ink)}
  .fbot{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:18px;color:var(--faint);font-size:.82rem;flex-wrap:wrap;gap:8px}

  /* lead form */
  .lead-form{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:26px;box-shadow:var(--sh-sm)}
  .lf-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  .lf-field{margin-bottom:14px}
  .lf-field label{display:block;font-size:.85rem;font-weight:600;color:var(--dim);margin-bottom:6px}
  .lead-form input,.lead-form select{width:100%;padding:11px 13px;border:1px solid var(--border-2);border-radius:var(--r-sm);font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
  .lead-form input:focus,.lead-form select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  .lf-consent{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;color:var(--dim);margin:4px 0 16px}
  .lf-consent input{width:auto;margin-top:3px;flex:none}
  .lf-msg{padding:12px 15px;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;margin-top:12px;display:none}
  .lf-msg.ok{display:block;background:var(--low-bg);color:var(--low)}
  .lf-msg.err{display:block;background:var(--high-bg);color:var(--high)}
  @media(max-width:520px){.lf-row{grid-template-columns:1fr}}

  /* --stagger-i (set per-item via nth-child rules for .step/.reason, default 0 for everything
     else) delays each grouped item's reveal a little more than the last — reads as "considered"
     rather than everything fading in at once. No-op for ungrouped .reveal elements. */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--stagger-i,0) * 55ms)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
  @media(max-width:920px){.hgrid,.calcgrid,.whygrid{grid-template-columns:1fr;gap:30px}.trust{gap:0}.fgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:700px){.steps{grid-template-columns:1fr;gap:22px}.steps::before{display:none}.step{padding-right:0;padding-left:52px}.step .nm{position:absolute;left:0;top:0;margin-bottom:0}}
  @media(max-width:600px){.nlinks,.ncta-g{display:none}.burger{display:flex}.cgrid{grid-template-columns:1fr}}
  .mm{display:flex;flex-direction:column;padding:0 24px;background:var(--bg);border-bottom:1px solid var(--border);max-height:0;opacity:0;overflow:hidden;transition:max-height .28s var(--ease),opacity .2s var(--ease)}
  .mm.open{max-height:420px;opacity:1;padding:14px 24px 20px}
  .mm a{padding:11px 0;color:var(--dim);font-weight:600;border-bottom:1px solid var(--border)}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;font-weight:700;padding:12px 18px;border-radius:0 0 10px 0}
  .skip-link:focus{left:0}

  /* classic table markup (used only when klassik theme renders the rates table) */
  .tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
  table{width:100%;border-collapse:collapse;min-width:640px}
  thead th{background:var(--ink);color:#fff;font-size:.78rem;font-weight:700;text-align:left;padding:13px 16px;text-transform:uppercase;letter-spacing:.04em}
  tbody td{padding:13px 16px;border-bottom:1px solid var(--border);font-size:.9rem}
  tbody tr:hover{background:var(--surface-2)}
  tbody tr:last-child td{border-bottom:none}
  .org{font-weight:700;color:var(--ink)}
  .badge{display:inline-block;font-family:var(--mono);font-weight:700;font-size:.85rem;padding:3px 11px;border-radius:100px;font-variant-numeric:tabular-nums}
  .badge.low{background:var(--low-bg);color:var(--low)}
  .badge.mid{background:var(--mid-bg);color:var(--mid)}
  .badge.high{background:var(--high-bg);color:var(--high)}
  .src{font-size:.72rem;color:var(--faint)}

  /* ============ KLASSIK theme override — re-skins the same markup toward the original light fintech look ============ */
  html[data-theme="klassik"]{
    --r:14px; --r-sm:10px;
    --sh-sm:0 1px 2px rgba(20,32,26,.05); --sh:0 1px 2px rgba(20,32,26,.04),0 14px 34px rgba(20,32,26,.08);
    --ease:cubic-bezier(.23,1,.32,1);
  }
  html[data-theme="klassik"] h1,html[data-theme="klassik"] h2,html[data-theme="klassik"] h3{letter-spacing:-.025em;line-height:1.15}
  html[data-theme="klassik"] .hero::before{display:none}
  html[data-theme="klassik"] .btn{border-radius:11px}
  html[data-theme="klassik"] .btn-p{background:var(--brand)}
  html[data-theme="klassik"] .btn-p:hover{background:var(--brand-ink)}
  html[data-theme="klassik"] .stitle,html[data-theme="klassik"] .ssub{text-align:center}
  html[data-theme="klassik"] .ssub{margin-left:auto;margin-right:auto}
  /* market panel back to light */
  html[data-theme="klassik"] .mpanel{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--sh)}
  html[data-theme="klassik"] .mpanel h3{color:var(--faint)}
  html[data-theme="klassik"] .mstat{border-bottom:1px solid var(--border)}
  html[data-theme="klassik"] .mstat .lbl{color:var(--dim)}
  html[data-theme="klassik"] .mstat .v{color:var(--brand-ink)}
  html[data-theme="klassik"] .mstat .src{color:var(--faint)}
  html[data-theme="klassik"] .msrc{color:var(--faint);border-top:1px solid var(--border)}
  /* calculator result panel back to light */
  html[data-theme="klassik"] .calcgrid{background:transparent;gap:22px}
  html[data-theme="klassik"] .calc,html[data-theme="klassik"] .cres{border:1px solid var(--border-2);box-shadow:var(--sh-sm);border-radius:var(--r)}
  html[data-theme="klassik"] .cres{background:var(--surface);color:var(--text)}
  html[data-theme="klassik"] .calc h3,html[data-theme="klassik"] .cres h3{color:inherit;text-transform:none;letter-spacing:0;font-size:1.1rem;font-weight:700}
  html[data-theme="klassik"] .cres .big{color:var(--brand-ink)}
  html[data-theme="klassik"] .cres .biglbl{color:var(--faint)}
  html[data-theme="klassik"] .citem{background:var(--surface-2);border:1px solid var(--border)}
  html[data-theme="klassik"] .citem .l{color:var(--faint)}
  html[data-theme="klassik"] .citem .v{color:var(--text)}
  html[data-theme="klassik"] .load.ok{background:var(--low-bg);color:var(--low)}
  html[data-theme="klassik"] .load.bad{background:var(--high-bg);color:var(--high)}
  /* steps back to boxed cards */
  html[data-theme="klassik"] .steps::before{display:none}
  html[data-theme="klassik"] .step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;padding-left:22px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
  html[data-theme="klassik"] .step:hover{transform:translateY(-3px);box-shadow:var(--sh)}
  html[data-theme="klassik"] .step .nm{position:static;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);margin-bottom:13px}
  /* why: back to a 3-col card grid */
  html[data-theme="klassik"] .whygrid{grid-template-columns:1fr;gap:30px}
  html[data-theme="klassik"] .whylead p{max-width:70ch}
  html[data-theme="klassik"] .reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  html[data-theme="klassik"] .reason{flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:23px;border-bottom:1px solid var(--border);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
  html[data-theme="klassik"] .reason:hover{transform:translateY(-3px);box-shadow:var(--sh)}
  html[data-theme="klassik"] .reason .ic{margin-bottom:13px}
  @media(max-width:920px){html[data-theme="klassik"] .reasons{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){html[data-theme="klassik"] .reasons{grid-template-columns:1fr}}
  /* CTA back to light card */
  html[data-theme="klassik"] .ctab{background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--sh-sm);color:var(--text)}
  html[data-theme="klassik"] .ctab h2{color:var(--ink)}
  html[data-theme="klassik"] .ctab p{color:var(--dim)}
  html[data-theme="klassik"] .ctab .btn-g{border-color:var(--border-2);color:var(--ink)}
  html[data-theme="klassik"] .ctab .btn-g:hover{background:var(--surface-2)}
  /* klassik panels turn light — cosmic starfield is for dark --ink panels only */
  html[data-theme="klassik"] .cosmic::before,html[data-theme="klassik"] .cosmic::after{display:none}
  /* klassik = plainer original look — hide the hero photo scrim and restore original dark-on-light hero text */
  html[data-theme="klassik"] .hero-photo::after{display:none}
  html[data-theme="klassik"] .hero-photo{padding-top:64px;padding-bottom:34px}
  html[data-theme="klassik"] .hero-photo .pill{background:var(--surface);border-color:var(--border-2);color:var(--brand-ink);backdrop-filter:none}
  html[data-theme="klassik"] .hero.hero-photo h1{color:var(--ink);text-shadow:none}
  html[data-theme="klassik"] .hero.hero-photo h1 .hl{color:var(--brand-ink)}
  html[data-theme="klassik"] .hero.hero-photo .lead{color:var(--dim)}
  html[data-theme="klassik"] .hero.hero-photo .lead b{color:var(--ink)}
  html[data-theme="klassik"] .hero-photo .btn-g{background:transparent;color:var(--ink);border-color:var(--border-2)}
  html[data-theme="klassik"] .hero-photo .btn-g:hover{background:var(--surface-2);border-color:var(--ink)}
  html[data-theme="klassik"] .hero-photo .trust .n{color:var(--ink)}
  html[data-theme="klassik"] .hero-photo .trust .l{color:var(--faint)}
  html[data-theme="klassik"] .hero-photo .trust>div{border-right-color:var(--border)}
  html[data-theme="klassik"] .hero-photo .hero-reassure{color:var(--faint)}
  /* leaderboard rows hidden, classic table shown (and vice versa) via display toggle driven by JS markup swap — no extra CSS needed since only one markup exists in DOM at a time */

  /* ============================================================
     EDITORIAL LAYER (2026 redesign)
     Purpose: carry the Mercury "financial-journal" feel to the
     inner pages via an atmospheric wash sampled from the hero photo,
     oversized tabular figures, and hairline rules. Palette locked
     (green + cream + off-white); this only touches composition,
     type scale and depth. Fully reduced-motion + klassik safe.
     ============================================================ */

  /* subtle atmospheric page-hero for the inner pages (kalkulyator / hisobot).
     The licensed misty-mountain photo sits UNDER a near-opaque cream scrim, so
     it reads as a faint horizon texture behind the headline, not as a picture. */
  .pagehero{position:relative;isolation:isolate}
  .pagehero.has-atmos{padding-top:64px}
  .pagehero.has-atmos::before{
    content:'';position:absolute;inset:-1px -50vw -40px;z-index:-1;pointer-events:none;
    background:var(--atmos),url('hero-atmosphere.jpg');
    background-size:cover,cover;
    background-position:center,center 22%;
    background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  }
  /* a hairline that visually seats the headline block on the atmospheric band */
  .pagehero.has-atmos .pill{background:var(--surface);border-color:var(--border-2)}

  /* editorial stat band (hisobot "report" figures): big tabular numerals,
     hairline-separated, sitting on a titled masthead rule. Reuses the same
     tokens as the market panel so the two pages feel like one publication. */
  .statband{border-top:2px solid var(--ink);margin-top:6px}
  .statband .sb-head{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 0;gap:16px;flex-wrap:wrap}
  .statband .sb-head .t{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);font-weight:700}

  /* Give the hisobot statcards a real editorial jump: the whole grid becomes a
     row of oversized figures divided by hairlines instead of boxed cards. */
  .statgrid.editorial{background:transparent;border-radius:0;grid-template-columns:repeat(4,1fr);gap:0;overflow:visible;border-top:2px solid var(--ink);margin-bottom:16px}
  .statgrid.editorial .statcard{background:transparent;padding:24px 26px 24px 0;border-right:1px solid var(--hair);position:relative}
  .statgrid.editorial .statcard:last-child{border-right:none}
  .statgrid.editorial .statcard .l{font-size:.7rem;letter-spacing:.13em;margin-bottom:12px}
  .statgrid.editorial .statcard .v{font-size:clamp(2.2rem,3.8vw,3.1rem);line-height:.98;letter-spacing:-.035em}
  @media(max-width:760px){
    .statgrid.editorial{grid-template-columns:1fr 1fr;border-top-width:2px}
    .statgrid.editorial .statcard{padding:20px 20px 20px 0;border-bottom:1px solid var(--hair)}
    .statgrid.editorial .statcard:nth-child(2n){border-right:none;padding-right:0}
    .statgrid.editorial .statcard:nth-last-child(-n+2){border-bottom:none}
  }

  /* hisobot category figures: bigger average, quieter frame (border-less, hairline seam) */
  .catgrid.editorial{grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hair)}
  .catgrid.editorial .catcard{background:transparent;border:none;border-right:1px solid var(--hair);border-radius:0;padding:22px 26px 22px 0}
  .catgrid.editorial .catcard:last-child{border-right:none}
  .catgrid.editorial .catcard .avg{font-size:clamp(1.9rem,3vw,2.5rem);letter-spacing:-.03em;line-height:1;margin:10px 0 6px}
  @media(max-width:760px){.catgrid.editorial{grid-template-columns:1fr}.catgrid.editorial .catcard{border-right:none;border-bottom:1px solid var(--hair);padding:18px 0}.catgrid.editorial .catcard:last-child{border-bottom:none}}

  /* hisobot bar chart: thinner "sparkline" bars on a shared baseline, tighter
     rhythm, tabular rates right-aligned, reads as a broadsheet chart not a UI meter */
  .chart.editorial{border-top:1px solid var(--hair)}
  .chart.editorial .chartrow{grid-template-columns:190px 1fr 74px;padding:11px 0;border-bottom:1px solid rgba(15,32,24,.05)}
  .chart.editorial .chartrow:last-child{border-bottom:none}
  .chart.editorial .chartbar-wrap{height:8px;background:transparent;border-radius:0;box-shadow:inset 0 -1px 0 var(--hair)}
  .chart.editorial .chartbar{height:8px;border-radius:100px}
  .chart.editorial .nm{font-size:.9rem;color:var(--ink);font-weight:600}
  .chart.editorial .rl{font-size:.98rem;letter-spacing:-.02em}

  html[data-theme="klassik"] .pagehero.has-atmos::before{display:none}
  html[data-theme="klassik"] .pagehero.has-atmos{padding-top:44px}