/* The permanent LoanSakhi.ai landing-page theme — "Sky & Glow".
 *
 * This started as one of six comparison variants (Variant 3, in the spirit
 * of Craft Silicon's light-blue tech hero with a glowing accent shape). The
 * comparison is over: this is the one that was picked, so these rules are
 * unscoped — no html.v3 class needed, no gate, no other five variants to
 * drift out of sync with. Loaded straight after styles.css, so its :root
 * values simply override the old default blue palette.
 */

:root {
  --brand:  #2563eb;   /* blue-600                                          */
  --accent: #0891b2;   /* cyan-600 — checkmarks                             */
  --glow:   #60a5fa;
  --ink:    #0f2a4a;
  --muted2: #5b7597;
  --border2:#d7e6fb;
  --text: var(--ink);
  --muted: var(--muted2);
  --border: var(--border2);
}

body { background: #f3f8ff; color: var(--ink); }

/* --- Nav ------------------------------------------------------------- */
.nav { background: rgba(243,248,255,.95); border-bottom: 1px solid var(--border2); }
.nav a.link:hover { color: var(--brand); }

/* --- Hero: light blue gradient with a soft glowing orb behind the text - */
.hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(96,165,250,.35), transparent 42%),
    radial-gradient(circle at 15% 70%, rgba(8,145,178,.14), transparent 45%),
    linear-gradient(180deg, #eaf3ff 0%, #f7fbff 70%);
  border-radius: 0 0 30px 30px;
  padding-bottom: 54px;
}
.hero h1 { color: var(--ink); }
.hero h1 span { color: var(--brand); }
.hero p.lede { color: var(--muted2); }

.cta a.primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.28); }
.cta a.primary:hover { background: #1d4ed8; }
.cta a.secondary { background: #e4efff; color: var(--brand); border: 1px solid #cfe1fb; }

.journey .jt { color: var(--ink); }
.journey .js { color: var(--muted2); }
.journey .jfoot a { color: var(--brand); }

/* --- Country picker ------------------------------------------------------ */
.countries button { border-color: var(--border2); background: #fff; color: var(--ink); }
.countries button:hover { border-color: var(--brand); }
.countries button.on {
  border-color: var(--brand); background: #e4efff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.16);
}
.ctx { background: #fff; border-color: var(--border2); }
.ctx .k { color: var(--muted2); }

/* --- Sections ----------------------------------------------------------- */
section { border-top: 1px solid var(--border2); background: #fff; }
section:nth-of-type(even) { background: #eef5ff; }
section h2.t { color: var(--ink); }
section p.s { color: var(--muted2); }
.feat {
  border-color: var(--border2); background: #fff;
  box-shadow: 0 2px 10px rgba(37,99,235,.05);
}
.feat h3 { color: var(--ink); }
.feat p { color: var(--muted2); }

/* --- Pricing ------------------------------------------------------------ */
.plan { border-color: var(--border2); background: #fff; }
.plan.hi { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.plan.hi::after { background: var(--brand); }
.plan .pr { color: var(--brand); }
.plan li::before { color: var(--accent); }

/* --- The borrower-journey demo ------------------------------------------ */
#lsDemo .officer { border-color: var(--border2); }
#lsDemo .dots i.on { background: var(--brand); }

/* --- Pilot form and footer ---------------------------------------------- */
.demo { background: #eef5ff; border-color: var(--border2); }
footer { border-top: 1px solid var(--border2); color: var(--muted2); }

@media (max-width: 640px) { .hero h1 { font-size: 32px; } }