/* ================================================================
   AutoKredits.com LV — V6 · DARK FRAME + LIGHT CONTENT (hybrid)
   Approved design: preview/v6.html.
   DARK FRAME (kept from V2 Dark Luxury): header/.mob, .ptac, .hero,
   .calc + sliders, modal (.overlay/.mdl/.ofc*), .cta-band, .sticky,
   .pg-hero, .ftr — dark glass + gold.
   LIGHT CONTENT (V6): warm cream body, white cards, ink text,
   gold accents — .sec/.cmp/.lender/.wc/.steps/.revs/.faq/.art/
   .blog, pg-x pages, .contact.
   Every original class/ID name is preserved. HTML & JS untouched.
   Do not rename selectors. JS state classes: scrolled/open/show/
   selected/on/ok. Slider fill via --p custom property.
   ================================================================ */

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Variables (BOTH token sets) ───────────────────────────────── */
:root{
  /* ── dark frame tokens (V2 Dark Luxury) ── */
  --bg-0:#070A11; --bg-1:#0B0F17; --bg-2:#111827; --charcoal:#0E141F;
  --glass:rgba(20,27,40,0.55); --glass-2:rgba(28,36,52,0.6);
  --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.14);
  --gold:#D4A657; --gold-bright:#F5C46B; --amber:#F59E0B;
  --gold-light:#F5C46B;                 /* legacy alias -> gold-bright */
  --text:#F4F6FA; --muted:#9AA6BC; --muted-2:#6B7688;
  --green:#4ADE80;
  /* legacy blue aliases mapped to gold so old rules stay on-brand */
  --blue:#D4A657; --blue-light:#F5C46B; --blue-dark:#B98A3E;
  --red:#F87171;
  /* ── light content tokens (V6) ── */
  --cream:#FDFBF7; --cream-2:#F6F0E6;
  --ink:#1A2332; --body:#3D4654; --lmuted:#6B7280;
  --lborder:#EAE2D3; --lgreen:#0E9F6E;
  --gold-dark:#9A7223; --gold-deep:#B8860B;
  --lt-shadow:0 10px 30px -14px rgba(83,63,26,0.16);
  --lt-shadow-hover:0 22px 44px -18px rgba(83,63,26,0.24);
  /* legacy gray scale remapped to light-content friendly values */
  --g50:#FAF7F0;
  --g100:#F3EEE2;
  --g200:#EAE2D3;
  --g300:#D9D2C3;
  --g400:#9AA1AD;
  --g500:var(--lmuted);
  --g600:#525B6B;
  --g700:var(--body);
  --g800:var(--ink);
  --g900:#10161F;
  /* geometry */
  --r:14px;
  --radius:20px; --radius-sm:14px;
  --shadow:0 24px 60px -20px rgba(0,0,0,0.7);
  --glow-gold:0 0 0 1px rgba(212,166,87,0.35), 0 0 40px -6px rgba(212,166,87,0.35);
  --grad-gold:linear-gradient(120deg,var(--gold-bright),var(--gold) 60%,#C29346);
  /* fonts */
  --font:'Inter',system-ui,sans-serif;
  --display:'Sora','Inter',system-ui,sans-serif;
}

/* ── Base (LIGHT: warm cream + ink) ────────────────────────────── */
html{scroll-behavior:smooth;overflow-x:hidden;background:var(--bg-0)}
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
a{color:var(--gold-dark);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-deep)}
img{max-width:100%;display:block}
strong,b{color:var(--ink)}

/* Dark-frame scopes: bold text stays light on dark backgrounds.
   (Component-specific strong rules further below still win.) */
.hdr strong,.hdr b,.mob strong,.mob b,
.hero strong,.hero b,.calc strong,.calc b,
.overlay strong,.overlay b,.mdl strong,.mdl b,
.cta-band strong,.cta-band b,.sticky strong,.sticky b,
.ftr strong,.ftr b,.vcard strong,.vcard b,
.pg-hero strong,.pg-hero b,.hero-page strong,.hero-page b{color:var(--text)}

/* ── Animations (JS/modal depend on these names) ───────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes mdlIn{from{transform:translateY(20px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes drive{0%,100%{transform:translateX(0)}25%{transform:translateX(3px) translateY(-1px)}75%{transform:translateX(-3px) translateY(-1px)}}

/* ── Layout ────────────────────────────────────────────────────── */
.w{max-width:1180px;margin:0 auto;padding:0 24px;position:relative}

/* ── Sections (LIGHT zone) ─────────────────────────────────────── */
.sec{padding:80px 0;position:relative;background:transparent}
.sec-alt{background:var(--cream-2)}
/* .sec-dark restyled as LIGHT alt section (used for FAQ on index) */
.sec-dark{background:var(--cream-2);color:var(--body)}

.sec-hd{text-align:center;margin-bottom:44px}
.sec-hd .tag{margin-bottom:12px}
.sec-hd h2{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:-.02em}
.sec-hd h2 em,
.sec-t em{font-style:normal;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-hd p{font-size:1rem;color:var(--lmuted);max-width:560px;margin:0 auto;font-weight:400}
.sec-dark .sec-hd h2{color:var(--ink)}
.sec-dark .sec-hd p{color:var(--lmuted)}
.sec-hd-left{text-align:left}
.sec-hd-left p{margin:0}

.sec-t{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:-.02em}
.sec-dark .sec-t{color:var(--ink)}
.sec-d{font-size:1rem;color:var(--lmuted);max-width:560px;margin:0 auto;font-weight:400}
.sec-dark .sec-d{color:var(--lmuted)}

/* Eyebrow / tag — light zone: gold on soft gold-tinted pill */
.tag{
  display:inline-block;font-family:var(--font);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.28em;color:var(--gold-dark);
  background:rgba(212,166,87,0.12);padding:6px 12px 6px 16px;border-radius:50px;
}
/* …but inside dark heroes the eyebrow stays plain gold (as V2) */
.hero .tag,.hero-txt .tag,.pg-hero .tag,.hero-page .tag{background:none;padding:0;border-radius:0;color:var(--gold)}

/* ================================================================
   HEADER — DARK FRAME (unchanged from V2)
   ================================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;height:72px;
  background:rgba(9,13,20,0.94);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;transition:background .25s,box-shadow .25s,border-color .25s;
}
.hdr.scrolled{background:rgba(7,10,17,0.98);box-shadow:0 10px 30px -12px rgba(0,0,0,.7);border-bottom-color:var(--border-strong)}
.hdr-in{display:flex;align-items:center;width:100%;gap:20px}

/* Logo */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-box{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-bright),#B98A3E);
  box-shadow:0 6px 18px -6px rgba(212,166,87,0.7);
  overflow:hidden;
}
/* Override the inline fill="#2563EB" on the SVG mark -> dark on gold */
.logo-box svg{fill:#1a130a}
.logo-box svg path{fill:#1a130a}
.logo-t{font-family:var(--display);font-size:1.18rem;font-weight:700;color:var(--text);letter-spacing:-.02em}
.logo-t b{color:var(--gold);font-weight:700}

/* Nav */
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{position:relative;color:var(--muted);font-size:.86rem;font-weight:500;transition:color .2s;padding:8px 12px}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;width:0;background:var(--gold);transition:width .25s;margin:auto}
.nav a:hover{color:var(--text)}
.nav a:hover::after{width:calc(100% - 24px)}
.nav a.active{color:var(--text)}
.nav a.active::after{width:calc(100% - 24px)}

/* Header CTA (also reused in .sticky) */
.cta-sm{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 22px;border-radius:12px;
  background:var(--grad-gold);color:#1a130a;
  font-family:var(--display);font-size:.84rem;font-weight:700;
  margin-left:8px;flex-shrink:0;text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 8px 26px -8px rgba(212,166,87,0.6);transition:transform .2s,box-shadow .25s;
}
.cta-sm:hover{transform:translateY(-2px);color:#1a130a;box-shadow:0 12px 34px -8px rgba(212,166,87,0.85)}
.hdr .cta-sm{margin-left:8px}

/* Burger */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:1px solid var(--border-strong);border-radius:10px;cursor:pointer;padding:9px}
.burger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:.2s}

/* Mobile nav drawer */
.mob{display:none;position:fixed;top:72px;left:0;right:0;bottom:0;background:linear-gradient(180deg,#0C1220,#070A11);z-index:99;padding:8px 0 20px;overflow-y:auto;border-top:1px solid rgba(212,166,87,0.18)}
.mob.open{display:flex;flex-direction:column;animation:fadeUp .22s ease}
.mob a{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;font-size:.98rem;font-weight:500;color:#D7DEEA;border-bottom:1px solid rgba(255,255,255,0.05);transition:.15s}
.mob a:hover,.mob a:active{background:rgba(212,166,87,0.08);color:#fff}

/* ================================================================
   PTAC banner — DARK FRAME gold-tinted strip (clears fixed header)
   ================================================================ */
.ptac{margin-top:72px;
  background:linear-gradient(90deg,rgba(212,166,87,0.10),rgba(212,166,87,0.03)),#0B0F17;
  border-bottom:1px solid rgba(212,166,87,0.18);
  padding:9px 0;text-align:center;
}
.ptac p{font-size:.8rem;font-weight:500;color:#E7D8B8;letter-spacing:.01em}
.ptac strong{color:var(--gold-bright);font-weight:700}

/* ================================================================
   HERO — DARK FRAME (carries its own ambient bg on the light body)
   ================================================================ */
.hero{
  padding:70px 0 60px;position:relative;color:var(--text);overflow:hidden;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(212,166,87,0.16), transparent 60%),
    radial-gradient(800px 600px at 8% 12%, rgba(37,58,99,0.35), transparent 60%),
    linear-gradient(180deg,#070A11 0%, #0B0F17 45%, #0B0F17 100%);
  border-bottom:1px solid rgba(212,166,87,0.18);
}
.hero::before{content:'';position:absolute;width:600px;height:600px;top:-180px;right:-120px;background:radial-gradient(circle,rgba(212,166,87,.14),transparent 70%);pointer-events:none;z-index:0}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000,transparent 85%);
  mask-image:radial-gradient(circle at 50% 0%,#000,transparent 85%);
}
.hero-g{display:grid;grid-template-columns:1.05fr 420px;gap:54px;align-items:center;position:relative;z-index:1}

.hero-txt .tag{display:inline-block;margin-bottom:16px}
.hero-txt h1{font-family:var(--display);font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin-bottom:16px;color:var(--text)}
.hero-txt h1 em{font-style:normal;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:1.05rem;color:var(--muted);max-width:640px;font-weight:300}
.hero-txt .sub{line-height:1.75;max-width:500px;margin-bottom:24px}
.hero-txt .sub strong{color:var(--text)}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.pills span{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;background:var(--glass);border:1px solid var(--border);border-radius:999px;
  font-size:.84rem;font-weight:500;color:#D7DEEA;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.hero-btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.btn-hero{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 32px;border-radius:14px;
  background:var(--grad-gold);color:#1a130a;
  font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:-.01em;
  border:none;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 26px -8px rgba(212,166,87,0.65);transition:transform .2s,box-shadow .25s;
}
.btn-hero:hover{color:#1a130a;transform:translateY(-2px);box-shadow:0 14px 36px -8px rgba(212,166,87,0.85)}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px;border-radius:14px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border-strong);color:var(--text);
  font-family:var(--display);font-size:.92rem;font-weight:600;cursor:pointer;text-decoration:none;transition:.2s;
}
.btn-ghost:hover{background:rgba(255,255,255,0.07);color:var(--text)}

.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px}
.trust span{font-size:.82rem;font-weight:500;color:var(--muted-2);display:inline-flex;align-items:center;gap:6px}
.trust b,.trust strong{color:#C9D2E1;font-weight:600}
.updated{font-size:.8rem;color:var(--muted-2);margin-top:12px}
.hero-txt .updated{font-size:.74rem;color:var(--muted-2);margin-top:16px}
.updated-date{font-weight:600;color:#C9D2E1}

/* ================================================================
   CALCULATOR — DARK FRAME glass card (also sits on light sections:
   near-solid dark gradient keeps contrast on cream — see .sec .calc)
   ================================================================ */
.calc{
  width:420px;position:relative;overflow:hidden;color:var(--text);
  background:linear-gradient(165deg,#1A2334,#0D1322);
  border:1px solid var(--border-strong);border-radius:26px;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,0.06);
}
.calc::before{content:"";position:absolute;top:-35%;right:-30%;width:100%;height:120%;background:radial-gradient(closest-side,rgba(212,166,87,0.15),transparent);pointer-events:none}
.calc-hd{padding:22px 26px 16px;position:relative;z-index:1;border-bottom:1px solid var(--border)}
.calc-hd h2{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--text)}
.calc-hd p{font-size:.8rem;color:var(--muted-2);margin-top:3px}
.calc-bd{padding:24px 26px 26px;position:relative;z-index:1}

/* Slider groups */
.sg{margin-bottom:22px}
.sg-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.sg-top label{font-size:.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.val{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--gold)}
.sg-range{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted-2);margin-top:9px}

/* Range slider — gold fill driven by CSS var --p (set by JS) */
input[type=range]{
  --p:40%;
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) var(--p),rgba(255,255,255,0.10) var(--p));
  outline:none;cursor:pointer;margin:6px 0;border:none;padding:0;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:transparent}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold-bright) 55%,var(--gold));
  border:2px solid #1a130a;box-shadow:0 0 0 4px rgba(212,166,87,0.25),0 3px 8px rgba(0,0,0,0.5);
  cursor:grab;transition:box-shadow .15s;
}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px rgba(212,166,87,0.30),0 4px 12px rgba(0,0,0,0.55)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,0.10)}
input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--gold)}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold-bright) 55%,var(--gold));
  border:2px solid #1a130a;box-shadow:0 0 0 4px rgba(212,166,87,0.25);cursor:grab;
}

/* Calculator summary (4 cells) */
.calc-sum{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin:20px 0;overflow:hidden;
}
.calc-sum div{padding:16px 8px;text-align:center;border-right:1px solid var(--border)}
.calc-sum div:last-child{border-right:none}
.calc-sum small{display:block;font-size:.66rem;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.calc-sum strong{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--text)}
.calc-sum div:first-child strong{color:var(--gold)}

/* Calculator CTA (primary, gold — reused by modal form + contact) */
.calc-cta{
  width:100%;padding:15px;border-radius:14px;border:none;
  background:var(--grad-gold);color:#1a130a;
  font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 26px -8px rgba(212,166,87,0.6);transition:transform .2s,box-shadow .25s;
}
.calc-cta:hover{color:#1a130a;transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(212,166,87,0.85)}
.calc-note{text-align:center;font-size:.78rem;color:var(--muted-2);margin-top:14px;display:flex;align-items:center;justify-content:center;gap:6px}
.calc-note b{color:var(--green)}

/* ================================================================
   TRUST BAR — LIGHT (subtle cream strip, start of light zone)
   ================================================================ */
.tbar{background:var(--cream-2);border-top:1px solid var(--lborder);border-bottom:1px solid var(--lborder);padding:16px 0}
.tbar-in{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.tbar-in span{font-size:.82rem;font-weight:500;color:var(--lmuted);display:flex;align-items:center;gap:5px}
.tbar-in b,.tbar-in strong{color:var(--ink)}

/* ================================================================
   MODAL — DARK FRAME (belongs to the dark calculator flow)
   ================================================================ */
.overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(4,7,12,0.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:16px;
}
.overlay.on{display:flex}

.mdl{
  background:linear-gradient(170deg,#1A2334,#0E1524);
  border:1px solid var(--border-strong);border-radius:22px;
  width:100%;max-width:540px;max-height:92vh;overflow-y:auto;color:var(--text);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  animation:mdlIn .35s ease;box-shadow:var(--shadow);
  scrollbar-width:none;-ms-overflow-style:none;
}
.mdl::-webkit-scrollbar{display:none}
.mdl a{color:var(--gold)}
.mdl a:hover{color:var(--gold-bright)}
.ms{display:none}
.ms.on{display:block}

/* Modal header */
.mdl-hd{
  background:linear-gradient(160deg,rgba(212,166,87,0.10),rgba(20,27,40,0.4));
  border-bottom:1px solid var(--border);color:var(--text);padding:28px 28px 22px;position:relative;
}
.ms:first-child .mdl-hd{border-radius:22px 22px 0 0}
.mdl-hd h2{font-family:var(--display);font-size:1.15rem;font-weight:600;margin-bottom:5px;line-height:1.3;color:var(--text)}
.mdl-hd p{font-size:.84rem;color:var(--muted);line-height:1.5}
.mdl-x{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted);
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;
}
.mdl-x:hover{background:rgba(255,255,255,.14);color:var(--text)}
.mdl-bar{display:flex;gap:16px;padding:12px 16px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;margin-top:16px;font-size:.82rem;font-weight:500;color:var(--muted)}
.mdl-bar strong{color:var(--gold-bright);font-weight:700}
.mdl-social{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:500;color:var(--muted-2);margin-top:12px}
.dot-live{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green);animation:blink 2s infinite}

/* Modal body & footer */
.mdl-bd{padding:24px 28px}
.mdl-ft{padding:16px 28px 24px;text-align:center;border-top:1px solid var(--border)}
.mdl-disc{text-align:center;font-size:.68rem;color:var(--muted-2);line-height:1.5;margin-top:16px}

/* ================================================================
   FORM (inside modal — stays DARK; do not restyle light here)
   ================================================================ */
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mdl-bd .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{margin-bottom:16px;position:relative}
.mdl-bd label{display:block;font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.mdl-bd input,.mdl-bd select,.mdl-bd textarea{
  width:100%;padding:13px 16px;border:1px solid var(--border-strong);border-radius:12px;
  font-family:var(--font);font-size:.9rem;color:var(--text);outline:none;transition:.2s;
  background:rgba(255,255,255,0.03);
}
.mdl-bd input:hover,.mdl-bd select:hover,.mdl-bd textarea:hover{border-color:rgba(212,166,87,0.35)}
.mdl-bd input:focus,.mdl-bd select:focus,.mdl-bd textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,166,87,.15);background:rgba(255,255,255,0.05)}
.mdl-bd input::placeholder,.mdl-bd textarea::placeholder{color:var(--muted-2)}
.mdl-bd select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239AA6BC' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.mdl-bd select option{background:var(--bg-2);color:var(--text)}

/* Checkbox (modal) */
.chk{display:flex;align-items:flex-start;gap:10px;margin:10px 0;padding:12px 14px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;transition:.15s}
.chk:hover{border-color:var(--border-strong)}
.chk input[type="checkbox"]{width:18px;height:18px;min-width:18px;accent-color:var(--gold);cursor:pointer;margin-top:1px}
.chk label{font-size:.78rem;color:var(--muted);line-height:1.45;text-transform:none;letter-spacing:0;cursor:pointer}
.chk a{color:var(--gold);text-decoration:underline}
.req{color:var(--amber);font-weight:700}

/* Custom dropdown (modal) */
.dropdown{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:linear-gradient(170deg,#1C2536,#111827);
  border:1px solid var(--border-strong);border-radius:12px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);z-index:10;margin-top:4px;overflow:hidden;max-height:240px;overflow-y:auto;
}
.dropdown.show{display:block;animation:fadeUp .2s ease}
.dropdown-opt{padding:14px 18px;font-size:.9rem;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:1px solid var(--border);transition:.1s}
.dropdown-opt:last-child{border-bottom:none}
.dropdown-opt:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.dropdown-opt.selected{background:rgba(212,166,87,0.10);color:var(--gold);font-weight:600}

/* Pill select (radio pills — modal) */
.pill-select{display:flex;flex-wrap:wrap;gap:6px}
.pill-opt{cursor:pointer}
.pill-opt input{display:none}
.pill-opt span{display:block;padding:9px 14px;border:1px solid var(--border-strong);border-radius:10px;font-size:.82rem;font-weight:500;color:var(--muted);background:rgba(255,255,255,0.03);transition:.15s;text-align:center}
.pill-opt span:hover{border-color:rgba(212,166,87,0.35);background:rgba(255,255,255,0.05)}
.pill-opt input:checked+span{border-color:var(--gold);background:rgba(212,166,87,0.10);color:var(--gold);font-weight:600}

/* ================================================================
   LOADING SCREEN (modal — dark)
   ================================================================ */
.ld{padding:40px 28px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px}
.ld-spin{width:56px;height:56px;margin-bottom:20px;position:relative}
.ld-ring{position:absolute;inset:0;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
.ld-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;animation:drive 1.5s ease-in-out infinite}
.ld h3{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:20px}
.ld-steps{display:flex;flex-direction:column;gap:0;margin:0 0 20px;width:100%;max-width:280px}
.ls{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);opacity:.3;transition:.3s}
.ls:last-child{border-bottom:none}
.ls.on{opacity:1}
.ls.ok{opacity:1}
.ls.ok .ls-i{background:var(--green);border-color:var(--green);color:#04210f}
.ls-i{width:20px;height:20px;min-width:20px;border:1.5px solid var(--border-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:9px;transition:.3s}
.ls span{font-size:.82rem;color:var(--muted);font-weight:500}
.ld-bar{width:100%;max-width:280px;height:4px;background:rgba(255,255,255,0.08);border-radius:99px;overflow:hidden}
.ld-fill{height:100%;background:var(--grad-gold);border-radius:99px;width:0;transition:width .3s;box-shadow:0 0 12px rgba(212,166,87,0.6)}

/* ================================================================
   OFFER CARDS (JS-injected inside modal) — DARK glass + gold top
   ================================================================ */
.offers{display:flex;flex-direction:column;gap:14px}
.ofc{
  padding:22px;border:1px solid var(--border);border-radius:16px;position:relative;overflow:hidden;
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .2s,border-color .2s,box-shadow .2s;
  animation:fadeUp .4s ease both;
}
.ofc:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.ofc.top{
  border:1px solid rgba(212,166,87,0.45);
  background:linear-gradient(180deg,rgba(212,166,87,0.07),var(--glass-2));
  box-shadow:var(--glow-gold),0 20px 50px -26px rgba(0,0,0,0.8);
}
.ofc.top::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-gold);border-radius:16px 16px 0 0}

.ofc-badge{font-size:.66rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.28em;margin-bottom:12px}
.ofc-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ofc-head img{height:38px;width:auto;max-width:130px;object-fit:contain;background:#fff;padding:6px 10px;border-radius:8px;box-shadow:0 2px 8px -2px rgba(0,0,0,0.5)}

.ofc-chip{font-size:.68rem;font-weight:600;color:var(--gold-bright);background:rgba(212,166,87,0.10);border:1px solid rgba(212,166,87,0.22);padding:3px 9px;border-radius:50px;white-space:nowrap}

/* Offer stats (6 cells) */
.ofc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px;border:1px solid var(--border)}
.ofc-stats div{background:rgba(11,15,23,0.5);padding:12px 10px;text-align:center}
.ofc-stats span{display:block;font-size:.6rem;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.ofc-stats strong{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--text)}
.ofc-highlight{color:var(--gold)!important;font-size:1.1rem!important}

/* Offer details (legacy layout support) */
.ofc-details div{flex:1;min-width:0;background:rgba(255,255,255,0.03);border-radius:8px;padding:8px 10px;text-align:center}
.ofc-details span{display:block;font-size:.65rem;color:var(--muted-2);margin-bottom:2px}
.ofc-details strong{font-size:.78rem;font-weight:600;color:var(--text)}

/* Offer CTA */
.ofc-btn{
  display:block;text-align:center;padding:13px;border-radius:12px;
  font-family:var(--display);font-size:.9rem;font-weight:700;
  background:rgba(255,255,255,0.05);border:1px solid var(--border-strong);color:var(--text);
  transition:.2s;text-decoration:none;
}
.ofc-btn:hover{background:rgba(255,255,255,0.09);color:var(--text)}
.ofc.top .ofc-btn{background:var(--grad-gold);border:none;color:#1a130a;box-shadow:0 8px 22px -8px rgba(212,166,87,0.6)}
.ofc.top .ofc-btn:hover{color:#1a130a;box-shadow:0 12px 30px -8px rgba(212,166,87,0.8)}

.ofc-example{font-size:.66rem;color:var(--muted-2);line-height:1.5;margin-top:10px;text-align:center}

/* ================================================================
   COMPARISON CARDS — LIGHT (white on warm cream, per V6)
   ================================================================ */
.cmp-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px;margin:0 auto}

.cmp-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px;
  background:#FFFFFF;border:1px solid var(--lborder);border-radius:18px;
  box-shadow:var(--lt-shadow);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.cmp-card:hover{transform:translateY(-5px);box-shadow:var(--lt-shadow-hover);border-color:#DECFAF}

/* Featured card — gold border + soft glow */
.cmp-card.top{
  border:1px solid rgba(212,166,87,0.65);
  background:linear-gradient(180deg,#FFFDF8,#FFFFFF 55%);
  box-shadow:0 0 0 1px rgba(212,166,87,0.25),0 0 42px -8px rgba(212,166,87,0.35),var(--lt-shadow);
}
.cmp-card.top::before{
  content:"★ Ieteicams";position:absolute;top:0;right:0;
  background:var(--grad-gold);color:#1a130a;
  font-family:var(--display);font-size:.62rem;font-weight:700;
  padding:6px 14px 6px 12px;border-radius:0 18px 0 12px;letter-spacing:.02em;
  box-shadow:0 6px 18px -4px rgba(212,166,87,0.6);
}
.cmp-card.top::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-gold)}

/* Card logo + USP */
.cmp-logo{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.cmp-logo img{height:40px;width:auto;max-width:140px;object-fit:contain;background:#fff;padding:7px 12px;border-radius:9px;border:1px solid var(--lborder)}
.cmp-usp{font-size:.68rem;font-weight:600;color:var(--gold-dark);background:rgba(212,166,87,0.12);border:1px solid rgba(212,166,87,0.30);padding:4px 10px;border-radius:50px}
.cmp-age{font-size:.68rem;font-weight:500;color:var(--lmuted);background:#F8F4EC;border:1px solid var(--lborder);padding:4px 10px;border-radius:50px;margin-left:auto;white-space:nowrap}

/* Stats grid inside card */
.cmp-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--lborder);border:1px solid var(--lborder);border-radius:12px;overflow:hidden;margin-bottom:18px;flex:1}
.cmp-stat{background:#FCFAF5;padding:14px 10px;text-align:center}
.cmp-stat-label{display:block;font-size:.6rem;font-weight:600;color:var(--lmuted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.cmp-stat-val{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--ink)}
.cmp-stat-val.green{color:var(--lgreen)}

/* CTA row */
.cmp-cta{display:flex;align-items:center;gap:10px}
.cmp-cta a{flex:1;text-align:center;padding:13px 20px;border-radius:12px;font-family:var(--display);font-size:.86rem;font-weight:700;text-decoration:none;transition:.25s}
.btn-cta-gold{background:var(--grad-gold);color:#1a130a;box-shadow:0 8px 22px -8px rgba(212,166,87,0.55)}
.btn-cta-gold:hover{color:#1a130a;transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(212,166,87,0.8)}
/* .btn-cta-dark = ghost button on light (V6 "btn-cta-light" look) */
.btn-cta-dark{background:#FFFFFF;border:1px solid #D9CFBA;color:var(--ink)}
.btn-cta-dark:hover{border-color:var(--gold);color:var(--ink);background:#FFFDF8;transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(83,63,26,0.25)}
.cmp-cta-sub{font-size:.7rem;color:var(--lmuted);white-space:nowrap}

/* Table note + misc (light) */
.tbl-note{font-size:.74rem;color:var(--lmuted);text-align:center;margin-top:26px;line-height:1.6;max-width:700px;margin-left:auto;margin-right:auto}
.tbl-note b{color:var(--ink);font-weight:600}
.tbl-w{overflow-x:auto;margin:20px 0;border-radius:12px}
.tbl-w table{margin:0}
.art .tbl-w table{margin:0}
.badge-feat{display:inline-block;font-size:.7rem;font-weight:600;color:var(--gold-dark);background:rgba(212,166,87,0.12);padding:3px 8px;border-radius:50px}
.intress{font-family:var(--display);font-weight:600;color:var(--lgreen)}
.badge-star{display:inline-block;font-size:.6rem;font-weight:700;color:var(--gold-dark);background:rgba(212,166,87,0.12);padding:2px 8px;border-radius:50px}
.yr{font-size:inherit;color:inherit;font-weight:inherit}

/* ================================================================
   STEPS — LIGHT (white cards, gold number badge)
   ================================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{text-align:center;padding:32px 24px;background:#FFFFFF;border:1px solid var(--lborder);border-radius:16px;box-shadow:var(--lt-shadow);transition:.2s}
.step:hover{border-color:rgba(212,166,87,0.55);transform:translateY(-4px);box-shadow:var(--lt-shadow-hover)}
.step-n{width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:var(--grad-gold);color:#1a130a;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1rem;font-weight:700;box-shadow:0 8px 20px -8px rgba(212,166,87,0.6)}
.step-ico{font-size:1.6rem;margin-bottom:8px}
.step h3{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:5px}
.step p{font-size:.86rem;color:var(--lmuted);line-height:1.6}

/* ================================================================
   WHY / BENEFITS CARDS — LIGHT (white cards, soft tint icon chips)
   ================================================================ */
.why-g{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.why-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wc{display:flex;gap:12px;align-items:flex-start;padding:18px;background:#FFFFFF;border:1px solid var(--lborder);border-radius:var(--r);box-shadow:var(--lt-shadow);transition:.2s}
.wc:hover{border-color:rgba(212,166,87,0.55);transform:translateY(-3px);box-shadow:var(--lt-shadow-hover)}
.wc-i{width:44px;height:44px;min-width:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;border:1px solid var(--lborder)}
.wc-i.a{background:linear-gradient(140deg,rgba(212,166,87,0.20),rgba(212,166,87,0.06));border-color:rgba(212,166,87,0.35)}
.wc-i.b{background:linear-gradient(140deg,rgba(245,158,11,0.16),rgba(245,158,11,0.05));border-color:rgba(245,158,11,0.30)}
.wc-i.c{background:linear-gradient(140deg,rgba(14,159,110,0.14),rgba(14,159,110,0.04));border-color:rgba(14,159,110,0.30)}
.wc-i.d{background:linear-gradient(140deg,rgba(139,92,246,0.14),rgba(139,92,246,0.04));border-color:rgba(139,92,246,0.30)}
.wc h3{font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:3px}
.wc p{font-size:.86rem;color:var(--lmuted);line-height:1.5}

/* ================================================================
   VCARD — kept as a DARK gold-glow highlight card (contrast pop
   inside the light sections)
   ================================================================ */
.vcard{
  background:linear-gradient(180deg,rgba(212,166,87,0.12),rgba(28,36,52,0.55)),#0E1524;
  border:1px solid rgba(212,166,87,0.40);border-radius:var(--radius);padding:32px;color:var(--text);text-align:center;
  box-shadow:var(--glow-gold),0 24px 50px -26px rgba(24,17,4,0.45);
}
.vcard h3,.vcard h4{color:var(--text)}
.vcard .big{font-family:var(--display);font-size:3rem;font-weight:700;line-height:1;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.vcard .big span{font-size:1.6rem}
.vcard .lbl{font-size:.82rem;font-weight:600;color:var(--muted);margin:6px 0 18px}
.vcard-list div{padding:8px 0;font-size:.85rem;font-weight:500;color:var(--text);border-bottom:1px solid var(--border);text-align:left;display:flex;justify-content:space-between;gap:8px}
.vcard-list div:last-child{border-bottom:none}
.btn-w{display:inline-block;margin-top:18px;padding:13px 26px;border-radius:14px;background:var(--grad-gold);color:#1a130a;font-family:var(--display);font-size:.9rem;font-weight:700;transition:.2s;text-decoration:none;box-shadow:0 8px 24px -8px rgba(212,166,87,0.6)}
.btn-w:hover{color:#1a130a;transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(212,166,87,0.85)}

/* ================================================================
   ARTICLE — LIGHT prose (ink on cream, comfortable reading)
   ================================================================ */
.art-g{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start;max-width:1100px;margin:0 auto}
.art h2{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--ink);margin:36px 0 10px;line-height:1.3;letter-spacing:-.01em}
.art h2:first-child{margin-top:0}
.byline{font-size:.8rem;color:var(--lmuted);margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--lborder)}
.art h3{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--gold-dark);margin:30px 0 10px}
.art p{font-size:1rem;color:var(--body);line-height:1.85;margin-bottom:14px}
.art ul,.art ol{margin:10px 0 18px 22px;font-size:1rem;color:var(--body);line-height:1.85}
.art li{margin-bottom:8px}
.art li::marker{color:var(--gold-dark)}
.art a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:2px}
.art a:hover{color:var(--gold-deep)}
.art strong{color:var(--ink)}
.art blockquote{margin:22px 0;padding:16px 22px;border-left:3px solid var(--gold);background:rgba(212,166,87,0.08);border-radius:0 12px 12px 0;color:var(--body);font-style:italic}
.art-tip{background:rgba(212,166,87,0.10);border:1px solid rgba(212,166,87,0.30);border-left:4px solid var(--gold);padding:18px 22px;border-radius:0 12px 12px 0;font-size:.95rem;color:var(--ink);line-height:1.7;margin:24px 0}

/* Article tables — white, soft gold header, hairline + zebra */
.art table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem;border:1px solid var(--lborder);border-radius:12px;overflow:hidden;background:#FFFFFF}
.art table th{background:rgba(212,166,87,0.12);padding:12px 16px;text-align:left;font-size:.72rem;font-weight:700;color:#8a6a2f;text-transform:uppercase;letter-spacing:.06em}
.art table td{padding:12px 16px;border-bottom:1px solid var(--lborder);color:var(--body)}
.art table td:first-child{font-weight:600;color:var(--ink)}
.art table tbody tr:hover{background:rgba(212,166,87,0.06)}
.art table tbody tr:last-child td{border-bottom:none}
.art table tbody tr:nth-child(even){background:rgba(212,166,87,0.04)}

/* Aside — white card + light border; CTA card gold-tinted */
.aside{position:sticky;top:88px}
.aside-c{background:#FFFFFF;border:1px solid var(--lborder);border-radius:14px;padding:22px;margin-bottom:14px;box-shadow:var(--lt-shadow)}
.aside-c h4{font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:10px}
.aside-c ul{list-style:none;padding:0}
.aside-c li{padding:6px 0;border-bottom:1px solid var(--lborder)}
.aside-c li:last-child{border-bottom:none}
.aside-c li a{font-size:.84rem;font-weight:500;color:var(--body)}
.aside-c li a:hover{color:var(--gold-dark)}
.aside-c p{font-size:.84rem;color:var(--lmuted);margin-bottom:10px}
.aside-cta{background:linear-gradient(180deg,rgba(212,166,87,0.14),rgba(212,166,87,0.05)),#FFFDF8;border-color:rgba(212,166,87,0.45);box-shadow:0 0 0 1px rgba(212,166,87,0.18),var(--lt-shadow)}
.aside-cta h4{color:var(--gold-dark)}
.btn-blue{display:block;text-align:center;padding:13px;border-radius:12px;background:var(--grad-gold);color:#1a130a;font-family:var(--display);font-size:.88rem;font-weight:700;text-decoration:none;transition:.2s;box-shadow:0 8px 22px -8px rgba(212,166,87,0.6)}
.btn-blue:hover{color:#1a130a;transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(212,166,87,0.85)}

/* ================================================================
   REVIEWS — LIGHT (white cards, gold stars)
   ================================================================ */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{background:#FFFFFF;border:1px solid var(--lborder);border-radius:16px;padding:24px;box-shadow:var(--lt-shadow);transition:.2s}
.rev:hover{border-color:#DECFAF;transform:translateY(-3px);box-shadow:var(--lt-shadow-hover)}
.rev-stars{color:var(--gold);font-size:.9rem;margin-bottom:10px;letter-spacing:2px}
.rev-txt{font-size:.92rem;color:var(--body);line-height:1.6;font-style:italic;margin-bottom:14px}
.rev-who{display:flex;align-items:center;gap:10px}
.rev-av{width:38px;height:38px;border-radius:50%;background:var(--grad-gold);color:#1a130a;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:.72rem;font-weight:700}
.rev-who strong{font-size:.84rem;color:var(--ink);display:block}
.rev-who span{font-size:.74rem;color:var(--lmuted)}

/* ================================================================
   FAQ — LIGHT (white rounded cards, gold +/× indicator)
   ================================================================ */
.faq-w{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px}

.fi{background:#FFFFFF;border:1px solid var(--lborder);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--lt-shadow);transition:border-color .2s,box-shadow .2s}
.fi:hover{border-color:#DECFAF}
.fi.open{border-color:rgba(212,166,87,0.6);box-shadow:0 0 0 1px rgba(212,166,87,0.18),var(--lt-shadow)}

.fq{width:100%;padding:20px 24px;background:none;border:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-family:var(--display);font-size:1rem;font-weight:500;color:var(--ink);text-align:left;transition:color .15s;line-height:1.4}
.fq:hover{color:var(--gold-dark)}

.fi-i{width:28px;height:28px;min-width:28px;border-radius:50%;border:1px solid rgba(212,166,87,0.45);background:rgba(212,166,87,0.10);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;color:#B98A3E;transition:transform .25s,background .15s;flex-shrink:0}
.fi.open .fi-i{transform:rotate(45deg);background:rgba(212,166,87,0.22)}

.fa{max-height:0;overflow:hidden;transition:max-height .35s ease}
.fi.open .fa{max-height:500px}
.fa p{padding:0 24px 22px;font-size:.95rem;color:var(--body);line-height:1.75;font-weight:400}

/* Context overrides (legacy) — same light values everywhere */
.sec-alt .fq,.pg-content .fq,.sec:not(.sec-dark) .fq{color:var(--ink)}
.sec-alt .fq:hover,.pg-content .fq:hover,.sec:not(.sec-dark) .fq:hover{color:var(--gold-dark)}
.sec-alt .fi-i,.pg-content .fi-i,.sec:not(.sec-dark) .fi-i{color:#B98A3E}
.sec-alt .fa p,.pg-content .fa p,.sec:not(.sec-dark) .fa p{color:var(--body)}

/* ================================================================
   CTA BAND — DARK FRAME (rich gold-glow panel, bridges to footer)
   ================================================================ */
.cta-band{
  background:radial-gradient(700px 300px at 50% 0%,rgba(212,166,87,0.12),transparent 70%),#0B0F17;
  border:none;border-radius:0;
  border-top:1px solid rgba(212,166,87,0.22);
  padding:76px 24px;text-align:center;color:var(--text);
  box-shadow:none;position:relative;overflow:hidden;
  margin:72px 0 0;
}
.cta-band h2{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;margin-bottom:10px;color:var(--text)}
.cta-band p{color:var(--muted);font-size:.95rem;margin-bottom:24px;font-weight:300}
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;padding:16px 34px;border-radius:14px;
  background:var(--grad-gold);color:#1a130a;
  font-family:var(--display);font-size:.95rem;font-weight:700;text-decoration:none;letter-spacing:-.01em;
  box-shadow:0 10px 30px -10px rgba(212,166,87,0.65);transition:transform .2s,box-shadow .25s;
}
.btn-cta:hover{color:#1a130a;transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(212,166,87,0.85)}
.cta-sub{font-size:.74rem;color:var(--muted-2);margin-top:14px}

/* ================================================================
   STICKY BAR — DARK FRAME (bottom fixed, dark glass)
   ================================================================ */
.sticky{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:rgba(9,13,20,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(100%);transition:.3s;
}
.sticky.show{transform:translateY(0)}
.sticky-t{font-size:.82rem;color:var(--muted)}
.sticky-t strong{color:var(--text)}
.sticky .cta-sm{margin-left:0;padding:10px 22px}

/* ================================================================
   FOOTER — DARK FRAME (darkest)
   ================================================================ */
.ftr{background:var(--bg-0);border-top:1px solid var(--border);padding:44px 0 22px;color:var(--muted);position:relative;z-index:1}
.ftr a{color:var(--muted)}
.ftr a:hover{color:var(--gold)}
.ftr-g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:38px;border-bottom:1px solid var(--border)}
.ftr-brand .logo-t{color:var(--text)}
.ftr-brand .logo-t b{color:var(--gold)}
.ftr-brand p{font-size:.8rem;line-height:1.65;margin-top:14px;color:var(--muted);max-width:290px}
/* Footer logo mark keeps gold treatment + dark svg */
.ftr .logo-box{background:linear-gradient(135deg,var(--gold-bright),#B98A3E)}
.ftr .logo-box svg,
.ftr .logo-box svg path{fill:#1a130a}
.ftr-col h4{font-family:var(--display);font-size:.66rem;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.16em;margin-bottom:16px}
.ftr-col a{display:block;font-size:.8rem;color:var(--muted);margin-bottom:8px;transition:.15s}
.ftr-col a:hover{color:var(--gold)}
.ftr-btm{padding-top:22px}
.ftr-copy{font-size:.72rem;color:var(--muted-2)}
.ftr-disc{font-size:.66rem;color:var(--muted-2);line-height:1.6;margin-top:8px;max-width:820px}

/* ================================================================
   SHARED PILL BUTTONS (modal footer — dark context)
   ================================================================ */
.btn-pill-dark{display:inline-block;padding:9px 18px;border-radius:50px;background:rgba(255,255,255,0.04);border:1px solid var(--border-strong);color:var(--text);font-family:var(--font);font-size:.8rem;font-weight:600;text-decoration:none;cursor:pointer;transition:.15s}
.btn-pill-dark:hover{background:rgba(255,255,255,0.09);color:var(--text)}
.btn-pill-gold{display:inline-block;padding:9px 18px;border-radius:50px;background:var(--grad-gold);color:#1a130a;font-family:var(--display);font-size:.8rem;font-weight:700;text-decoration:none;transition:.15s;box-shadow:0 6px 18px -8px rgba(212,166,87,0.6)}
.btn-pill-gold:hover{color:#1a130a;transform:translateY(-1px)}

/* ================================================================
   PAGE HERO (subpages) — DARK FRAME top of content pages
   ================================================================ */
.pg-hero,
.hero-page,
.hero.hero-page{
  padding:120px 0 44px;color:var(--text);min-height:auto;position:relative;overflow:hidden;
  background:
    radial-gradient(700px 420px at 80% -10%, rgba(212,166,87,0.14), transparent 65%),
    radial-gradient(700px 500px at 10% 0%, rgba(37,58,99,0.30), transparent 60%),
    linear-gradient(180deg,#070A11 0%, #0B0F17 100%);
  border-bottom:1px solid rgba(212,166,87,0.18);
}
.pg-hero::before,
.hero-page::before{content:'';position:absolute;width:600px;height:500px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(212,166,87,.14),transparent 70%);pointer-events:none}
.pg-hero h1,
.hero-page h1{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;margin-bottom:10px;letter-spacing:-.02em;color:var(--text)}
.pg-hero h1 em,
.hero-page h1 em{font-style:normal;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-hero .w{text-align:center;position:relative;z-index:1}
.pg-hero p,
.hero-page p,
.blog-hero-sub,
.pg-hero-sub{font-size:.95rem;color:var(--muted);max-width:640px;margin-left:auto;margin-right:auto;font-weight:300}
.pg-hero a,
.hero-page a{color:var(--muted)}
.pg-hero a:hover,
.hero-page a:hover{color:var(--gold)}
.pg-hero .tag,
.hero-page .tag{margin-bottom:12px}
.pg-hero .pills,.hero-page .pills{margin-top:16px;justify-content:center}
.pg-hero .hero-btns,.hero-page .hero-btns{margin-top:20px;justify-content:center}
.pg-hero a.btn-hero,.hero-page a.btn-hero{color:#1a130a}
.pg-hero a.btn-hero:hover,.hero-page a.btn-hero:hover{color:#1a130a}
.pg-hero .updated{margin-top:18px}

/* Breadcrumb (light-on-dark inside .pg-hero) */
.breadcrumb{font-size:.8rem;margin-bottom:14px;color:var(--muted-2)}
.breadcrumb a{color:var(--muted);text-decoration:underline}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb ol,
.pg-hero nav ol,
nav[aria-label="Breadcrumb"] ol,
nav[aria-label="breadcrumb"] ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 auto 14px;justify-content:center;font-size:.8rem;font-weight:500;color:var(--muted-2)}
nav[aria-label="Breadcrumb"] li,
nav[aria-label="breadcrumb"] li,
.pg-hero nav li{display:inline-flex;align-items:center;gap:8px}
nav[aria-label="Breadcrumb"] li:not(:last-child)::after,
nav[aria-label="breadcrumb"] li:not(:last-child)::after{content:"/";color:var(--muted-2)}
nav[aria-label="Breadcrumb"] a,
nav[aria-label="breadcrumb"] a{color:var(--muted)}
nav[aria-label="Breadcrumb"] a:hover,
nav[aria-label="breadcrumb"] a:hover{color:var(--gold)}
.pg-hero nav{margin-bottom:12px;position:relative;z-index:1}

/* ================================================================
   PAGE CONTENT (subpages) — LIGHT prose
   ================================================================ */
.pg-content{padding:56px 0 72px}
.pg-content h2{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--ink);margin:40px 0 12px;line-height:1.3;letter-spacing:-.01em}
.pg-content h2:first-child{margin-top:0}
.pg-content h2 em{font-style:normal;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-content h3{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--gold-dark);margin:30px 0 10px}
.pg-content p{font-size:1rem;color:var(--body);line-height:1.85;margin-bottom:14px}
.pg-content ul,
.pg-content ol{margin:10px 0 18px 22px;font-size:1rem;color:var(--body);line-height:1.85}
.pg-content li{margin-bottom:8px}
.pg-content li::marker{color:var(--gold-dark)}
.pg-content a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:2px}
.pg-content a:hover{color:var(--gold-deep)}
.pg-content strong{color:var(--ink)}
.pg-content blockquote{margin:22px 0;padding:16px 22px;border-left:3px solid var(--gold);background:rgba(212,166,87,0.08);border-radius:0 12px 12px 0;color:var(--body);font-style:italic}
.pg-content .art-tip{background:rgba(212,166,87,0.10);border:1px solid rgba(212,166,87,0.30);border-left:4px solid var(--gold);padding:18px 22px;border-radius:0 12px 12px 0;font-size:.95rem;color:var(--ink);line-height:1.7;margin:24px 0}

/* Tables in page content — light */
.pg-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem;border:1px solid var(--lborder);border-radius:12px;overflow:hidden;background:#FFFFFF}
.pg-content table th{background:rgba(212,166,87,0.12);padding:12px 16px;text-align:left;font-size:.72rem;font-weight:700;color:#8a6a2f;text-transform:uppercase;letter-spacing:.06em}
.pg-content table td{padding:12px 16px;border-bottom:1px solid var(--lborder);color:var(--body)}
.pg-content table tbody tr:hover{background:rgba(212,166,87,0.06)}
.pg-content table tbody tr:nth-child(even){background:rgba(212,166,87,0.04)}
.pg-content table tbody tr:last-child td{border-bottom:none}

/* Page cards (par-mums stats) — LIGHT white cards */
.pg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:24px 0}
.pg-card{background:#FFFFFF;border:1px solid var(--lborder);border-radius:14px;padding:26px;text-align:center;box-shadow:var(--lt-shadow);transition:.2s}
.pg-card:hover{border-color:rgba(212,166,87,0.5);transform:translateY(-3px);box-shadow:var(--lt-shadow-hover)}
.pg-card-icon{font-size:2rem;margin-bottom:12px}
.pg-card-val{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--gold-dark);margin-bottom:4px}
.pg-card-label{font-size:.82rem;color:var(--lmuted);font-weight:500}
.pg-card h4{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:5px}
.pg-card p{font-size:.85rem;color:var(--lmuted);line-height:1.5;margin:0}

/* Page values — LIGHT */
.pg-values{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.pg-val{display:flex;gap:14px;align-items:flex-start;padding:20px;background:#FFFFFF;border:1px solid var(--lborder);border-radius:12px;box-shadow:var(--lt-shadow);transition:.2s}
.pg-val:hover{border-color:rgba(212,166,87,0.5);transform:translateY(-3px);box-shadow:var(--lt-shadow-hover)}
.pg-val-icon{width:46px;height:46px;min-width:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;background:linear-gradient(140deg,rgba(212,166,87,0.18),rgba(212,166,87,0.05));border:1px solid rgba(212,166,87,0.30)}
.pg-val h4{font-family:var(--display);font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:4px}
.pg-val p{font-size:.84rem;color:var(--lmuted);line-height:1.5;margin:0}

/* Page info blocks — LIGHT */
.pg-info{display:flex;gap:16px;align-items:flex-start;padding:20px;background:#FFFFFF;border:1px solid var(--lborder);border-radius:12px;margin:16px 0;box-shadow:var(--lt-shadow)}
.pg-info-icon{font-size:1.5rem;flex-shrink:0}
.pg-info h4{font-family:var(--display);font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:4px}
.pg-info p{font-size:.88rem;color:var(--lmuted);line-height:1.6;margin:0}

/* ================================================================
   BLOG — LIGHT (white cards, gold accents)
   ================================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.blog-card{background:#FFFFFF;border:1px solid var(--lborder);border-radius:16px;padding:28px;box-shadow:var(--lt-shadow);transition:transform .2s,border-color .2s,box-shadow .25s}
.blog-card:hover{border-color:rgba(212,166,87,0.5);transform:translateY(-5px);box-shadow:var(--lt-shadow-hover)}
.blog-card h3{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.blog-card h3 a{color:var(--ink);text-decoration:none}
.blog-card h3 a:hover{color:var(--gold-dark)}
.blog-card p{font-size:.86rem;color:var(--lmuted);line-height:1.6;margin-bottom:10px}
.blog-card-date{font-size:.76rem;color:var(--gold-dark);font-weight:600;margin-bottom:8px}
.blog-card-link{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--gold-dark);margin-bottom:6px;text-decoration:none;display:inline-block}
.blog-card-link:hover{color:var(--gold-deep)}
.blog-card a.read-more,
.blog-card a[href]{font-size:.86rem;font-weight:600;color:var(--gold-dark)}
.blog-card a[href]:hover{color:var(--gold-deep)}

/* ================================================================
   LENDER DIRECTORY (aizdeveji) — LIGHT white cards
   ================================================================ */
.lender-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:960px;margin:0 auto}
.lender-card{position:relative;background:#FFFFFF;border:1px solid var(--lborder);border-radius:16px;padding:28px;box-shadow:var(--lt-shadow);transition:transform .25s,border-color .25s,box-shadow .25s}
.lender-card:hover{border-color:#DECFAF;transform:translateY(-4px);box-shadow:var(--lt-shadow-hover)}
.lender-card.featured{border:1px solid rgba(212,166,87,0.65);background:linear-gradient(180deg,#FFFDF8,#FFFFFF 55%);box-shadow:0 0 0 1px rgba(212,166,87,0.25),0 0 42px -8px rgba(212,166,87,0.35),var(--lt-shadow)}
.lender-card.featured::before{content:"★ Ieteicams";position:absolute;top:-12px;left:24px;background:var(--grad-gold);color:#1a130a;font-family:var(--display);font-size:.65rem;font-weight:700;padding:5px 14px;border-radius:50px;letter-spacing:.02em;box-shadow:0 6px 18px -4px rgba(212,166,87,0.6)}
.lender-card img{margin-bottom:16px;height:46px;width:auto;max-width:150px;object-fit:contain;background:#fff;padding:8px 14px;border-radius:10px;border:1px solid var(--lborder)}
.lender-name{font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:14px}
.lender-details{background:#FCFAF5;border:1px solid var(--lborder);border-radius:12px;padding:4px 0;margin-bottom:16px}
.lender-detail{display:flex;justify-content:space-between;padding:10px 16px;font-size:.84rem;color:var(--body)}
.lender-detail span:first-child{font-weight:500;color:var(--lmuted)}
.lender-detail span:last-child{font-weight:600;color:var(--ink)}
.gpl-val{font-family:var(--display);font-weight:700;color:var(--lgreen)!important}
.lender-actions{display:flex;gap:8px;margin-top:16px}
.lender-actions a{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:12px;font-family:var(--display);font-size:.82rem;font-weight:700;text-decoration:none;transition:.2s;text-align:center;flex:1}
.lender-card>p{font-size:.74rem;color:var(--lmuted);margin:10px 0 4px;line-height:1.5}
.lender-card .lender-actions~p{font-size:.62rem;color:var(--lmuted);margin-top:8px;line-height:1.4}
.btn-accent{background:var(--grad-gold);color:#1a130a;border:none;box-shadow:0 8px 22px -8px rgba(212,166,87,0.55)}
.btn-accent:hover{color:#1a130a;transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(212,166,87,0.8)}
.btn-outline{background:#FFFFFF;color:var(--ink);border:1px solid #D9CFBA}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-dark);background:#FFFDF8}

/* ================================================================
   CONTACT — LIGHT (white card + light inputs; modal stays dark)
   ================================================================ */
.contact-g{display:grid;grid-template-columns:1fr 340px;gap:40px}
.contact-form-wrap{background:#FFFFFF;border:1px solid var(--lborder);border-radius:20px;padding:32px;box-shadow:var(--lt-shadow)}
.contact-form .fg,
.contact-form .form-group{margin-bottom:14px}
.contact-form label{display:block;font-size:.72rem;font-weight:600;color:var(--lmuted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.contact-form input,
.contact-form select,
.contact-form textarea{width:100%;padding:12px 15px;border:1px solid #D9D2C3;border-radius:12px;font-family:var(--font);font-size:.92rem;color:var(--ink);outline:none;transition:.15s;background:#FFFFFF}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--lmuted)}
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover{border-color:rgba(212,166,87,0.55)}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,166,87,.18);background:#FFFDF8}
.contact-form textarea{min-height:110px;resize:vertical}
.contact-form select option{background:#FFFFFF;color:var(--ink)}
.contact-g .aside{position:static}
.contact-g .aside .wc-i{margin-bottom:.75rem}

/* Shared form elements (light content scope; modal uses .mdl-bd) */
input,select,textarea{font-family:var(--font)}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:.74rem;font-weight:600;color:var(--lmuted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.form-group input,
.form-group select,
.form-group textarea{width:100%;padding:12px 15px;border:1px solid #D9D2C3;border-radius:12px;font-family:var(--font);font-size:.92rem;color:var(--ink);outline:none;transition:.15s;background:#FFFFFF}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover{border-color:rgba(212,166,87,0.55)}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,166,87,.18);background:#FFFDF8}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--lmuted)}
.form-group select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.form-group select option{background:#FFFFFF;color:var(--ink)}
.form-check{display:flex;align-items:flex-start;gap:8px;margin:14px 0}
.form-check input[type="checkbox"]{width:16px;height:16px;min-width:16px;accent-color:var(--gold);cursor:pointer;margin-top:2px}
.form-check label{font-size:.82rem;color:var(--body);line-height:1.4;cursor:pointer;text-transform:none;letter-spacing:0}
.form-check a{color:var(--gold-dark);text-decoration:underline}

/* ================================================================
   RESPONSIVE — Tablet (max-width: 960px)
   ================================================================ */
@media(max-width:960px){
  .w{padding:0 20px}
  .nav,.hdr .cta-sm{display:none}
  .burger{display:flex}

  .hero-g{grid-template-columns:1fr;gap:36px}
  .hero{padding:40px 0 48px}
  .hero-txt h1{font-size:clamp(1.9rem,6vw,2.4rem)}
  .calc{width:100%;max-width:460px;margin:0 auto}

  .sec{padding:56px 0}
  .steps{grid-template-columns:1fr;gap:14px}
  .why-g{grid-template-columns:1fr;gap:28px}
  .why-cards{grid-template-columns:1fr 1fr;gap:10px}
  .revs{grid-template-columns:1fr;gap:14px}
  .cmp-cards{grid-template-columns:1fr;gap:14px}
  .lender-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr;gap:14px}

  .art-g{grid-template-columns:1fr;max-width:100%}
  .aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}

  .cmp-cta{width:100%}
  .cmp-cta a{width:100%}

  .ftr-g{grid-template-columns:1fr 1fr;gap:26px}

  .contact-g{grid-template-columns:1fr}
  .pg-values{grid-template-columns:1fr 1fr}
  .pg-cards{grid-template-columns:1fr 1fr}

  .pg-hero,.hero-page,.hero.hero-page{padding:100px 0 36px}
  .cta-band{margin:56px 0 0;padding:56px 22px}
}

/* ================================================================
   RESPONSIVE — Mobile (max-width: 768px)
   ================================================================ */
@media(max-width:768px){
  .w{padding:0 16px}

  /* Header */
  .hdr{height:60px}
  .hdr-in{justify-content:center}
  .logo{margin:0 auto}
  .burger{position:fixed;right:16px;top:14px;z-index:101}
  .mob{top:60px}
  .ptac{margin-top:60px}
  .logo-t{font-size:1.05rem}
  .logo-box{width:28px;height:28px}
  .logo-box svg{width:22px;height:22px}

  /* Hero */
  .hero{padding:28px 0 36px}
  .hero-txt h1{font-size:1.7rem}
  .hero-txt .tag{font-size:.68rem}
  .hero-txt .sub{font-size:.9rem;margin-bottom:18px}
  .pills{flex-wrap:wrap;gap:6px}
  .pills span{font-size:.74rem;padding:6px 12px}
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .trust span{font-size:.74rem}
  .btn-hero{padding:14px 24px;font-size:.88rem;width:100%;justify-content:center}
  .btn-ghost{width:100%;justify-content:center}
  .hero-btns{gap:10px}
  .hero-txt .updated{display:none}

  /* Calculator */
  .calc{border-radius:18px}
  .calc-hd{padding:18px 20px 14px}
  .calc-bd{padding:20px}
  .sg-top .val{font-size:1.1rem}
  .calc-sum{grid-template-columns:1fr 1fr}
  .calc-sum div{border-bottom:1px solid var(--border)}
  .calc-sum div:nth-last-child(-n+2){border-bottom:none}
  .calc-sum div:nth-child(even){border-right:none}
  .calc-cta{font-size:.88rem;padding:14px}

  /* Trust bar */
  .tbar-in{gap:8px 16px;justify-content:center;flex-wrap:wrap}
  .tbar-in span{font-size:.74rem}

  /* Steps */
  .step{padding:24px 18px}
  .step-n{width:44px;height:44px;font-size:.9rem}

  /* Comparison cards */
  .cmp-cards{grid-template-columns:1fr;gap:14px}
  .cmp-card{padding:20px}
  .cmp-logo{flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .cmp-logo img{height:34px;padding:6px 10px}
  .cmp-usp{font-size:.64rem;padding:3px 8px}
  .cmp-age{font-size:.64rem;margin-left:0;margin-top:2px}
  .cmp-stats{grid-template-columns:1fr 1fr}
  .cmp-stat{padding:10px 8px}
  .cmp-stat-label{font-size:.56rem}
  .cmp-stat-val{font-size:.86rem}
  .cmp-cta{flex-direction:column}
  .cmp-cta a{width:100%;display:block;padding:12px 16px;font-size:.84rem}

  /* Why cards */
  .why-cards{grid-template-columns:1fr;gap:10px}
  .wc{padding:16px}

  /* Article */
  .aside{grid-template-columns:1fr;gap:10px}
  .art h2{font-size:1.3rem}
  .art h3{font-size:1.05rem}

  /* Reviews */
  .rev{padding:20px}

  /* FAQ */
  .faq-w{gap:10px}
  .fq{padding:16px 18px;font-size:.94rem}
  .fa p{padding:0 18px 16px;font-size:.9rem}
  .fi-i{width:26px;height:26px;min-width:26px;font-size:1rem}

  /* CTA band */
  .cta-band{padding:48px 18px;margin:48px 0 0}
  .cta-band h2{font-size:1.4rem}
  .btn-cta{padding:14px 28px;font-size:.88rem}

  /* Footer */
  .ftr{padding:40px 0 20px}
  .ftr-g{grid-template-columns:1fr 1fr;gap:22px}
  .ftr-brand{grid-column:1/-1}
  .ftr-brand p{max-width:100%}

  /* Modal */
  .mdl{border-radius:18px;max-width:100%;margin:0;max-height:92vh}
  .overlay{align-items:center;padding:12px}
  .mdl-hd{padding:20px 18px 16px}
  .mdl-hd h2{font-size:1rem}
  .mdl-hd p{font-size:.8rem}
  .mdl-bd{padding:18px}
  .mdl-bd .row{grid-template-columns:1fr}
  .mdl-bar{flex-wrap:wrap;gap:10px;font-size:.76rem;padding:10px 12px}
  .mdl-x{top:12px;right:12px;width:30px;height:30px;font-size:16px}
  .fg{margin-bottom:14px}
  .mdl-bd input,.mdl-bd select,.mdl-bd textarea{padding:14px 16px;font-size:16px;border-radius:12px}
  .mdl-bd select{min-height:50px}
  .mdl-bd label{font-size:.68rem}
  .chk{padding:10px 12px;margin:8px 0}
  .chk label{font-size:.76rem}
  .calc-cta{padding:14px;font-size:.86rem}
  .cmp-cta a{padding:12px 16px;font-size:.82rem}
  .ofc-btn{padding:12px;font-size:.86rem}
  .btn-blue{padding:12px;font-size:.86rem}
  .btn-pill-dark{padding:8px 16px;font-size:.78rem}
  .lender-actions a{padding:11px 16px;font-size:.82rem}
  .calc-note{font-size:.72rem}
  .mdl-social{font-size:.7rem}

  /* Loading */
  .ld{padding:32px 18px 36px;min-height:240px}
  .ld-spin{width:48px;height:48px;margin-bottom:16px}
  .ld-ico{font-size:18px}
  .ld h3{font-size:.9rem;margin-bottom:16px}
  .ld-steps{max-width:100%}
  .ls{padding:8px 0}
  .ls span{font-size:.8rem}
  .ls-i{width:18px;height:18px;min-width:18px;font-size:8px}

  /* Offer cards */
  .offers{gap:10px}
  .ofc{padding:18px}
  .ofc-head img{height:32px;padding:5px 9px}
  .ofc-badge{font-size:.62rem;margin-bottom:10px}
  .ofc-stats{grid-template-columns:1fr 1fr;margin-bottom:12px}
  .ofc-stats div{padding:10px}
  .ofc-stats span{font-size:.58rem}
  .ofc-stats strong{font-size:.88rem}
  .ofc-head{gap:8px;margin-bottom:12px}
  .ofc-btn{padding:12px;font-size:.86rem}
  .ofc-example{font-size:.62rem}
  .mdl-disc{font-size:.64rem}
  .mdl-ft{padding:14px 18px 20px}

  /* Lender */
  .lender-card{padding:22px}

  /* Blog */
  .blog-card{padding:22px}

  /* Contact */
  .contact-form-wrap{padding:22px}

  /* Sticky */
  .sticky{padding:10px 16px}
  .sticky-t{font-size:.78rem}
  .sticky-t strong{display:none}
  .sticky .cta-sm{padding:9px 18px;font-size:.8rem}

  /* Page content */
  .pg-hero,.hero-page,.hero.hero-page{padding:84px 0 28px}
  .pg-hero h1,.hero-page h1{font-size:1.5rem}
  .pg-content{padding:36px 0 48px}
  .pg-content h2{font-size:1.25rem;margin:30px 0 10px}
  .pg-content h3{font-size:1.05rem}
  .pg-values{grid-template-columns:1fr}
  .pg-cards{grid-template-columns:1fr 1fr}
  .pg-val{padding:16px}
  .pg-info{padding:16px;gap:12px}

  /* Tables */
  .pg-content table{font-size:.84rem}
  .pg-content table th,
  .pg-content table td{padding:10px 12px}
  .art table th,
  .art table td{padding:8px 10px;font-size:.82rem}
}

/* ================================================================
   RESPONSIVE — Small Mobile (max-width: 620px / 480px)
   ================================================================ */
@media(max-width:620px){
  .cmp-stats{grid-template-columns:1fr 1fr}
  .ofc-stats{grid-template-columns:1fr 1fr}
  .calc-sum{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .w{padding:0 14px}
  .hero-txt h1{font-size:1.5rem}
  .pills{flex-wrap:wrap;gap:6px}
  .pills span{font-size:.7rem;padding:5px 11px}
  .trust{grid-template-columns:1fr 1fr;gap:6px}
  .trust span{font-size:.7rem}
  .calc-sum{grid-template-columns:1fr 1fr}
  .calc-sum div{padding:12px 6px}
  .calc-sum strong{font-size:.95rem}

  .cmp-stats{grid-template-columns:1fr 1fr}
  .cmp-card{padding:18px}
  .ofc-stats{grid-template-columns:1fr 1fr}

  .pg-cards{grid-template-columns:1fr}
  .pg-val{flex-direction:column;gap:10px;text-align:center}
  .pg-val-icon{margin:0 auto}

  .ftr-g{grid-template-columns:1fr;gap:18px}
  .ftr-col h4{margin-bottom:8px}

  .sec{padding:36px 0}
  .sec-hd{margin-bottom:26px}
  .sec-hd h2{font-size:1.4rem}

  .mdl-bd .chk{padding:8px 10px}
  .mdl-bd .chk label{font-size:.76rem}
}

/* ── Inline SVG icons (thay emoji) ──────────────────────────── */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex-shrink:0}
/* dark-frame contexts: bright gold */
.ptac .ic,.trust .ic,.mdl-bar .ic,.sticky-t .ic,
.calc-note .ic,.dropdown-opt .ic,.mdl-social .ic,.cta-sub .ic{color:var(--gold)}
.ld-ico .ic{color:var(--gold)}
.hero-txt .tag .ic{color:var(--gold)}
/* light-content contexts: readable dark gold */
.tbar-in .ic,.art-tip .ic,.cmp-age .ic,.aside-c .ic{color:#B98A3E}
.wc-i .ic,.step-ico .ic,.pg-card-icon .ic,.pg-val-icon .ic{color:#9A7223}
.wc-i.b .ic{color:#B45309}
.wc-i.c .ic{color:#0E9F6E}
.wc-i.d .ic{color:#7C3AED}

/* ── Layout fixes: content-page components ──────────────────── */
/* Calculator đứng một mình trên trang content: giới hạn bề rộng.
   Dark card on cream — keep strong shadow for contrast. */
.sec .calc{max-width:540px;margin-left:auto;margin-right:auto}

/* ── Fix: content components bên trong khung tối ─────────────── */
.pg-hero .art-tip{background:linear-gradient(160deg,rgba(212,166,87,0.14),rgba(20,27,40,0.5));border-color:rgba(212,166,87,0.4);color:#E9E1D2}
.pg-hero .art-tip strong{color:#F5C46B}
.pg-hero .art-tip .ic{color:var(--gold-bright)}

/* ================================================================
   BLOG PRO — index + article upgrades (V6 hybrid light zone)
   ================================================================ */
/* ── Blog index: card meta + featured ── */
.bc-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;font-size:.76rem;color:var(--lmuted)}
.bc-cat{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a6a2f;background:rgba(212,166,87,0.14);padding:4px 11px;border-radius:50px}
.bc-read{display:inline-flex;align-items:center;gap:5px}
.blog-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;gap:0;overflow:hidden;padding:0}
.blog-card.featured .bc-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.blog-card.featured .bc-visual{background:radial-gradient(420px 260px at 70% 30%,rgba(212,166,87,0.25),transparent 70%),linear-gradient(150deg,#1A2334,#0B0F17);display:flex;align-items:center;justify-content:center;min-height:240px;position:relative}
.blog-card.featured .bc-visual .ic{width:64px;height:64px;color:var(--gold-bright);opacity:.9}
.blog-card.featured h3{font-size:1.45rem;line-height:1.25}
.blog-card.featured .bc-badge{position:absolute;top:18px;left:18px;background:var(--grad-gold);color:#1a130a;font-family:var(--display);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 12px;border-radius:50px}
/* ── Article meta row ── */
.art-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--lborder);font-size:.8rem;color:var(--lmuted)}
.art-meta .bc-cat{font-size:.66rem}
.art-meta span{display:inline-flex;align-items:center;gap:5px}
/* ── Lead paragraph ── */
.art .lead{font-size:1.12rem;line-height:1.75;color:#2A3342;font-weight:400}
/* ── TOC (Saturs) ── */
.toc{background:#FBF7EF;border:1px solid var(--lborder);border-radius:14px;padding:20px 24px;margin:26px 0}
.toc-t{font-family:var(--display);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#8a6a2f;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.toc ol{margin:0;padding:0;list-style:none}
.toc li{margin:0 0 8px;break-inside:avoid;font-size:.9rem}
.toc a{color:var(--body);text-decoration:none;border-bottom:1px dotted #C9BEA6;transition:.15s}
.toc a:hover{color:#8a6a2f;border-bottom-color:var(--gold)}
/* ── Key takeaways ── */
.takeaways{background:linear-gradient(150deg,rgba(212,166,87,0.10),rgba(212,166,87,0.04));border:1px solid rgba(212,166,87,0.35);border-radius:14px;padding:22px 26px;margin:26px 0}
.takeaways-t{font-family:var(--display);font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.takeaways-t .ic{color:#B8860B}
.takeaways ul{margin:0;padding:0;list-style:none}
.takeaways li{position:relative;padding-left:26px;margin-bottom:9px;font-size:.94rem;color:var(--body);line-height:1.6}
.takeaways li::before{content:"✓";position:absolute;left:2px;top:0;color:#0E9F6E;font-weight:700}
/* ── Article headings: anchor offset + hierarchy ── */
.art h2{scroll-margin-top:96px;padding-bottom:10px;border-bottom:1px solid var(--lborder)}
.art h3{scroll-margin-top:96px}
/* ── Tables: number alignment + compact head ── */
.art table{font-variant-numeric:tabular-nums}
.art table th{white-space:nowrap}
/* ── Author box ── */
.author-box{display:flex;gap:16px;align-items:flex-start;background:#FBF7EF;border:1px solid var(--lborder);border-radius:14px;padding:20px 24px;margin:32px 0 0}
.author-av{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--grad-gold);color:#1a130a;font-family:var(--display);font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.author-box h4{font-family:var(--display);font-size:.95rem;color:var(--ink);margin:0 0 4px}
.author-box p{font-size:.84rem;color:var(--lmuted);margin:0;line-height:1.6}
/* ── Related articles ── */
.related{margin-top:34px}
.related-t{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related-card{display:block;background:#fff;border:1px solid var(--lborder);border-radius:12px;padding:16px 18px;text-decoration:none;transition:.2s;box-shadow:0 6px 18px -12px rgba(26,35,50,0.15)}
.related-card:hover{transform:translateY(-3px);border-color:rgba(212,166,87,0.5);box-shadow:0 14px 30px -14px rgba(26,35,50,0.25)}
.related-card .rc-cat{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a6a2f;display:block;margin-bottom:7px}
.related-card .rc-t{font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--ink);line-height:1.4;display:block}
.related-card:hover .rc-t{color:#8a6a2f}
/* ── Responsive ── */
@media(max-width:960px){
  .blog-card.featured{grid-template-columns:1fr}
  .blog-card.featured .bc-visual{min-height:150px;order:-1}
  .related-grid{grid-template-columns:1fr}
  .toc ol{columns:1}
}

/* ── Blog index: tối ưu bố cục card ─────────────────────────── */
.pg-content .blog-grid{grid-template-columns:repeat(2,1fr);gap:22px}
.blog-card{display:flex;flex-direction:column;padding:26px 28px}
.blog-card p{flex:1;margin-bottom:16px;font-size:.9rem;line-height:1.65}
.blog-card.featured p{flex:0 0 auto}
.pg-content .blog-card h3{margin:0 0 10px;font-size:1.18rem;line-height:1.35;color:var(--ink)}
.pg-content .blog-card h3 a{color:var(--ink);text-decoration:none}
.pg-content .blog-card h3 a:hover{color:var(--gold-dark)}
.pg-content .blog-card.featured h3{font-size:1.5rem;line-height:1.25}
.pg-content .blog-card-link{text-decoration:none;margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:.9rem;transition:.18s}
.pg-content .blog-card-link:hover{color:var(--gold-deep);transform:translateX(3px)}
.blog-card:hover{transform:translateY(-4px);border-color:rgba(212,166,87,0.55);box-shadow:0 18px 40px -18px rgba(83,63,26,0.28)}
.blog-card.featured:hover{transform:none}
.bc-meta{margin-bottom:14px}
.bc-meta .blog-card-date{margin-bottom:0;font-weight:500;color:var(--lmuted)}
@media(max-width:760px){.pg-content .blog-grid{grid-template-columns:1fr}}

/* ── Mobile polish: trang chủ + khung ───────────────────────── */
@media(max-width:768px){
  .ptac{padding:6px 0}
  .ptac p{font-size:.72rem;line-height:1.5}
  .hero{padding:30px 0 42px}
  .hero-txt .tag{font-size:.64rem;letter-spacing:.16em}
  .hero-txt h1{font-size:1.8rem;line-height:1.16}
  .hero-txt .sub{font-size:.95rem;line-height:1.7}
  .pills{gap:8px}
  .pills span{font-size:.8rem;padding:7px 13px}
  .hero-btns{flex-direction:column;gap:10px}
  .btn-hero{width:100%;padding:15px 20px}
  .btn-ghost{width:100%;padding:12px 20px;background:none;border:1px solid var(--border);font-size:.9rem;color:var(--muted)}
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:16px}
  .trust span{font-size:.8rem}
  .calc{width:100%}
  .calc-hd{padding:18px 20px 14px}
  .calc-bd{padding:20px 20px 22px}
  .sec{padding:52px 0}
  .sec-hd{margin-bottom:28px}
}
@media(max-width:480px){
  .hero-txt h1{font-size:1.6rem}
  .cmp-stats{grid-template-columns:1fr 1fr;gap:10px}
  .cmp-logo{flex-wrap:wrap;gap:8px}
}

/* ── Chống tràn ngang mobile (nguyên nhân khung trắng 2 bên) ── */
@media(max-width:960px){
  .calc{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
}
@media(max-width:768px){
  /* Bảng nhiều cột: cuộn ngang trong khung thay vì đẩy rộng trang */
  .art table,.pg-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .art table tbody,.art table thead{display:table;width:100%;min-width:520px}
  .pg-content table tbody,.pg-content table thead{display:table;width:100%;min-width:520px}
  /* Các khối rộng khác không được vượt viewport */
  .w{max-width:100%}
  .cmp-cards,.lender-grid,.blog-grid{max-width:100%}
  img,svg{max-width:100%}
}

/* ── Mobile menu pro ────────────────────────────────────────── */
.mob a::after{content:"\2192";color:var(--gold);opacity:.5;font-size:.85rem;margin-left:12px}
.mob a.mob-cta{margin:14px 24px 6px;padding:14px 22px;justify-content:center;background:var(--grad-gold);color:#1a130a;font-family:var(--display);font-weight:700;border-radius:14px;border-bottom:none;box-shadow:0 10px 26px -10px rgba(212,166,87,0.6)}
.mob a.mob-cta::after{content:"\2192";color:#1a130a;opacity:.8}
.mob a.mob-cta:hover{background:var(--grad-gold);color:#1a130a}
/* burger → X khi mở */
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Offers: xếp hạng theo mức phù hợp ─────────────────────── */
.ofc.nofit{opacity:.72}
.ofc.nofit:hover{opacity:.95}
.ofc-limit{margin:10px 0 2px;padding:8px 12px;border-radius:10px;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.35);color:#FCD34D;font-size:.74rem;line-height:1.5}

/* ── Fix: nút gold trong vùng content sáng ──────────────────── */
.pg-content a.btn-hero,.art a.btn-hero{color:#1a130a;text-decoration:none}
.pg-content a.btn-hero:hover,.art a.btn-hero:hover{color:#1a130a}
/* ── Logo lender trong bài viết ─────────────────────────────── */
.art-logo{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--lborder);border-radius:10px;padding:8px 16px;margin:2px 0 14px;box-shadow:0 4px 14px -8px rgba(83,63,26,0.18)}
.art-logo img{height:32px;width:auto;max-width:160px;object-fit:contain;display:block}

/* ── Fix: mọi loại nút trong content không bị .pg-content a đè ── */
.pg-content a.btn-blue,.art a.btn-blue,.aside a.btn-blue,
.pg-content a.btn-cta,.art a.btn-cta,
.pg-content a.btn-hero,.art a.btn-hero,
.pg-content a.ofc-btn,.art a.ofc-btn{color:#1a130a;text-decoration:none}
.pg-content a.btn-blue:hover,.art a.btn-blue:hover,.aside a.btn-blue:hover,
.pg-content a.btn-cta:hover,.art a.btn-cta:hover,
.pg-content a.btn-hero:hover,.art a.btn-hero:hover{color:#1a130a}

/* ── Phòng thủ: link footer không bao giờ bị scope content đè ── */
footer.ftr a{color:var(--muted);text-decoration:none}
footer.ftr a:hover{color:var(--gold)}

/* ── Fix tràn ngang: grid items không bị banh theo min-content của bảng ── */
.art-g > *,.contact-g > *,.why-g > *{min-width:0}
.art{min-width:0;max-width:100%}
.art table,.pg-content table{max-width:100%}

/* ── Phòng thủ bổ sung: mọi nút còn lại trong content scope ── */
.pg-content a.btn-cta-gold,.art a.btn-cta-gold,
.pg-content a.btn-cta-dark,.art a.btn-cta-dark,
.pg-content a.btn-accent,.art a.btn-accent{text-decoration:none}
.pg-content a.btn-cta-gold,.art a.btn-cta-gold,
.pg-content a.btn-accent,.art a.btn-accent{color:#1a130a}
.pg-content a.btn-cta-gold:hover,.art a.btn-cta-gold:hover,
.pg-content a.btn-accent:hover,.art a.btn-accent:hover{color:#1a130a}