:root{
  --blue:#1e40af; --blue-ink:#0e3682;
  --amber:#ffd60a; --amber-soft:#ffe88a;
  --ink:#0f1217; --muted:#5b6774; --line:#e7ecf2;
  --bg:#0b0e13; --surface:#ffffff; --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.14);
  --focus: 0 0 0 3px rgba(255,214,10,.55), 0 0 0 1px rgba(0,0,0,.3) inset;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#f6f8fb url('assets/img/pattern.svg') top left / 64px 64px repeat;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 20px}

/* Skip link */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:10px 14px;background:#fff;color:#000;border-radius:10px;box-shadow:var(--shadow);z-index:9999}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,14,20,.80);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.2px}
.brand .logo{width:40px;height:40px;flex:0 0 auto}
.brand small{font-weight:800;color:var(--amber);border:1px solid rgba(255,214,10,.35);padding:2px 8px;border-radius:999px}
.primary-nav a{color:#fff;text-decoration:none;margin:0 12px;font-weight:600;opacity:.92;border-radius:10px;padding:8px 10px}
.primary-nav a:hover,.primary-nav a:focus{opacity:1;outline:none;box-shadow:var(--focus)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;cursor:pointer;border:0}
.btn-primary{background:linear-gradient(135deg,var(--amber),var(--amber-soft));color:#1a1a1a;box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.nav-cta{display:flex;gap:10px;align-items:center}
.menu-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff}
.menu{display:none;border-top:1px solid rgba(255,255,255,.1);background:rgba(10,12,16,.9)}
.menu.open{display:block}
.menu .mobile-links{padding:10px 0}
.menu .mobile-links a{display:block;padding:12px 16px;color:#fff;text-decoration:none;font-weight:600;border-radius:10px}
.menu .mobile-links a:focus{outline:none;box-shadow:var(--focus)}

/* Hero */
.hero{
  position:relative;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(5,8,15,.75), rgba(5,8,15,.75)),
    url('../img/hero-photo.svg') center / cover no-repeat,
    url('../img/hero-bg.svg') center / cover no-repeat;
}
.hero .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:88px 0 72px}
.kicker{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;font-size:13px;letter-spacing:.3px}
h1{font-size:46px;line-height:1.12;margin:18px 0 10px}
.hero .sub{font-size:18px;opacity:.92;margin-bottom:18px}
.pillrow{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 24px}
.pill{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:10px 14px;border-radius:999px;font-size:13px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.apply{padding:18px}
.card-title{margin:6px 0 10px;font-size:20px}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:1fr 1fr}
label{font-size:13px;color:#5b6774}
input:not([type="checkbox"]),select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}
input:focus,select:focus{outline:none;box-shadow:var(--focus)}
input[type="checkbox"]{width:18px;height:18px;accent-color:var(--blue);margin:2px 0 0}
.hp{position:absolute;left:-9999px}
.consent{display:flex;align-items:flex-start;gap:10px;margin:10px 0}
.consent label{font-size:13px;color:#4b5563;line-height:1.5}
.legal{font-size:12px;color:#3d4852;opacity:.9;margin-top:10px}
.success{display:none;color:#137a36;font-weight:700}

/* Marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.marquee .track{display:inline-block;padding:10px 0;animation:scroll 22s linear infinite}
.marquee span{color:#eaeef5;opacity:.92;margin:0 28px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee .track{animation:none}}

/* Sections */
main section{padding:72px 0;background:#fff}
section.alt{background:#f5f7fb url('../img/pattern.svg') top left / 64px 64px repeat}
h2{font-size:34px;line-height:1.25;margin:6px 0 18px}
.lead{color:#4b5563;margin-bottom:24px}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.feature svg{width:28px;height:28px}
.feature h3{margin:6px 0;font-size:18px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;position:relative}
.step .num{width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,var(--amber),var(--amber-soft));display:flex;align-items:center;justify-content:center;font-weight:800;color:#0e1117}

.rates{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.rates table{width:100%;border-collapse:collapse;font-size:14px}
.rates th,.rates td{padding:12px 14px;border-bottom:1px solid var(--line)}
.rates th{background:#f7f9fe;text-align:left}

details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
details+details{margin-top:12px}
details summary{font-weight:700;cursor:pointer}

/* Footer */
.site-footer{background:#0e1117;color:#c9d1d9;padding:40px 0;border-top:1px solid rgba(255,255,255,.06)}
.site-footer a{color:#fff;text-decoration:none}
.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.chip{font-size:12px;background:rgba(255,214,10,.12);border:1px solid rgba(255,214,10,.35);color:#ffe07a;padding:2px 8px;border-radius:999px}
.disclaimer{font-size:12px;color:#9aa3ad}
.footer-legal{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap}

/* Doc pages */
body.doc{background:#f6f8fb}
.doc-header{background:#0e1117;color:#e6edf3;border-bottom:1px solid rgba(255,255,255,.08)}
.doc-header .top{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brandline{display:flex;align-items:center;gap:10px}
.brand-link{color:#fff;text-decoration:none;font-weight:800}
.doc-main{padding:40px 0}
.doc-main h1{font-size:32px;margin:0 0 6px}
.doc-main h2{font-size:20px;margin:26px 0 8px}
.muted{color:#4b5563}
.doc-footer{background:#0e1117;color:#e6edf3;padding:24px 0;border-top:1px solid rgba(255,255,255,.08)}
.doc-foot{display:flex;justify-content:space-between;align-items:center}

/* Responsive */
@media (max-width:1040px){.hero .inner{grid-template-columns:1fr}}
@media (max-width:980px){
  .features{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:780px){
  .primary-nav{display:none}
  .menu-btn{display:inline-flex}
  .apply .grid.two{grid-template-columns:1fr}
}

/* Reveal-on-scroll (light) */
[data-reveal]{opacity:0;transform:translateY(14px);transition:.45s ease}
[data-reveal].visible{opacity:1;transform:none}

/* ---- Text animation for feature headings & copy ---- */
@keyframes shimmerText {
  0%   { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}
.text-shimmer{
  background-image: linear-gradient(90deg, currentColor 0%, currentColor 40%, rgba(255,214,10,.95) 50%, currentColor 60%, currentColor 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  filter: drop-shadow(0 0 0 transparent);
}
.feature.visible .text-shimmer{
  animation: shimmerText 1.4s ease-out .05s both;
}

/* Paragraph rise/fade when card reveals */
@keyframes riseFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.feature.visible p{
  animation: riseFade .55s ease-out .15s both;
}

/* ---- How it works: badge + text animations ---- */
@keyframes popIn {
  0% { transform: scale(.6); opacity: 0; }
  60%{ transform: scale(1.08); opacity: 1; }
  100%{ transform: scale(1); }
}
.step.visible .num{
  animation: popIn .45s ease-out both;
}
/* Reuse shimmer for step headings */
.step.visible .text-shimmer{
  animation: shimmerText 1.4s ease-out .05s both;
}
/* Paragraph rise/fade for steps */
.step.visible p{
  animation: riseFade .55s ease-out .15s both;
}

/* --- Tighter spacing between Rates and FAQ --- */
#rates{ padding-bottom: 38px; }
#faq{ padding-top: 38px; }

@media (max-width:980px){
  #rates{ padding-bottom: 32px; }
  #faq{ padding-top: 32px; }
}
@media (max-width:780px){
  #rates{ padding-bottom: 26px; }
  #faq{ padding-top: 26px; }
}

/* ==== Accessibility: high-contrast heading animation ====
   Previous shimmer clipped the text and reduced contrast.
   We now keep solid text color and animate a highlight bar underneath. */
.text-shimmer{
  color: inherit !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  position: relative;
}
.text-shimmer::after{
  content: "";
  position: absolute;
  left: -20%;
  top: 70%;
  height: .6em;
  width: 45%;
  background: linear-gradient(90deg, rgba(255,214,10,0) 0%, rgba(255,214,10,.45) 50%, rgba(255,214,10,0) 100%);
  transform: translateX(-60%) skewX(-16deg);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
}
@keyframes underlineSweep {
  0%   { opacity: 0; transform: translateX(-60%) skewX(-16deg); }
  25%  { opacity: .85; }
  100% { opacity: 0; transform: translateX(180%) skewX(-16deg); }
}
.feature.visible .text-shimmer::after,
.step.visible .text-shimmer::after{
  animation: underlineSweep 900ms ease-out .05s both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .feature.visible .text-shimmer::after,
  .step.visible .text-shimmer::after{ animation: none; opacity: 0; }
}

/* ===== Accessibility fix: high-contrast heading text =====
   Replace gradient text with an underline sweep so letters stay visible. */
.text-shimmer{
  position: relative;
  color: var(--ink) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: border-box !important;
}
/* Cancel the old shimmer animation on the text itself */
.feature.visible .text-shimmer,
.step.visible .text-shimmer{ animation: none !important; }

/* New subtle underline animation that does not affect text contrast */
@keyframes underlineSweep {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}
.text-shimmer::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.08em;
  height: 0.45em;
  width: 0;
  background: linear-gradient(90deg, rgba(255,214,10,.40), rgba(255,214,10,.18));
  border-radius: 8px;
  z-index: -1;
}
.feature.visible .text-shimmer::after,
.step.visible .text-shimmer::after{
  animation: underlineSweep .9s ease-out both;
}

/* Ensure headings keep solid color for readability */
.feature h3, .step h3{ color: var(--ink); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .feature.visible .text-shimmer::after,
  .step.visible .text-shimmer::after{ animation: none; width: 100%; opacity: .9; }
}

/* === Contrast-safe heading shimmer (underline sweep) ===
   Replaces earlier text-shimmer that used transparent text.
   Keeps text fully readable while adding a subtle animated underline. */
.text-shimmer{
  position: relative;
  color: inherit;            /* keep solid text color for contrast */
  background: none;
  padding-bottom: 2px;       /* space for underline */
}
.text-shimmer::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,214,10,0), rgba(255,214,10,.95), rgba(255,214,10,0));
  transform: translateX(-120%);
  opacity: .9;
}
@keyframes underlineSweep {
  to { transform: translateX(120%); }
}
.feature.visible .text-shimmer::after,
.step.visible .text-shimmer::after{
  animation: underlineSweep 1.1s ease-out .05s both;
}

/* High contrast preference: thicker underline */
@media (prefers-contrast: more){
  .text-shimmer::after{ height: 3px; opacity: 1; }
}

/* Reduced motion: show underline without animation */
@media (prefers-reduced-motion: reduce){
  .feature.visible .text-shimmer::after,
  .step.visible .text-shimmer::after{
    animation: none;
    transform: none;
  }
}

/* Section decorative backgrounds (contrast-safe overlays) */
#benefits{
  background:
    linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
    url('../img/benefits-bg.svg') center / cover no-repeat;
}
#how{
  background:
    linear-gradient(0deg, rgba(255,255,255,.94), rgba(255,255,255,.94)),
    url('../img/how-bg.svg') center / cover no-repeat;
}
#rates{
  background:
    linear-gradient(0deg, rgba(245,247,251,.94), rgba(245,247,251,.94)),
    url('../img/rates-bg.svg') center / cover no-repeat;
}

/* Ensure card borders stay visible on colorful bgs */
.feature, .step, .rates{
  background-color: #ffffff;
  backdrop-filter: saturate(110%);
}