/**
 * light-depth.css — Premium Light Theme Depth Kit
 *
 * A reusable design-token + utility layer that gives warm-white landing pages
 * the visual depth normally only found on dark themes.
 *
 * Core principles:
 *   1. Layered neutrals (not just "white on white")
 *   2. Hairline borders + inner highlight (subtle bevel)
 *   3. Multi-layer shadows (not one big blur)
 *   4. Quiet background treatments (orbs + grain + faint grid)
 *   5. Section color-blocking (slightly tinted panels)
 *
 * Usage: link this file AFTER the page's main <style> block, then add
 *        utility classes (.depth-card, .section--tint, etc.) to markup.
 */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Trust accent — only for links, focus rings, badges */
  --trust: #2b59ff;
  --trust-soft: rgba(43, 89, 255, 0.12);
  --trust-muted: rgba(43, 89, 255, 0.06);

  /* Ink refinements — darker base ink for premium contrast */
  --ink-deep: #121826;
  --muted: rgba(18, 24, 38, 0.72);
  --subtle: rgba(18, 24, 38, 0.56);

  /* Stroke system (hairlines) */
  --stroke: rgba(18, 24, 38, 0.08);
  --stroke-strong: rgba(18, 24, 38, 0.12);

  /* Multi-layer shadow tokens — ink-tinted, not grey */
  --shadow-xs:
    0 1px 0 rgba(18, 24, 38, 0.03),
    0 1px 2px rgba(18, 24, 38, 0.06);

  --shadow-sm:
    0 1px 0 rgba(18, 24, 38, 0.03),
    0 2px 6px rgba(18, 24, 38, 0.08);

  --shadow-md:
    0 1px 0 rgba(18, 24, 38, 0.03),
    0 8px 24px rgba(18, 24, 38, 0.10);

  --shadow-lg:
    0 1px 0 rgba(18, 24, 38, 0.03),
    0 18px 50px rgba(18, 24, 38, 0.14);

  --shadow-float:
    0 1px 0 rgba(18, 24, 38, 0.03),
    0 24px 80px rgba(18, 24, 38, 0.18);

  /* Inner bevel highlight */
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}


/* ═══════════════════════════════════════════════════════════
   2. BODY BACKGROUND — orbs + grain (not "Google Docs")
   ═══════════════════════════════════════════════════════════ */

body {
  color: var(--ink);
  background:
    radial-gradient(1100px 650px at 14% -12%, rgba(184, 148, 63, 0.14), transparent 60%),
    radial-gradient(900px 540px at 86% -10%, rgba(43, 89, 255, 0.08), transparent 55%),
    radial-gradient(700px 420px at 72% 30%, rgba(184, 148, 63, 0.06), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(18, 24, 38, 0.04), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.85), var(--bg));
  background-color: var(--bg);
}

/* Grain overlay upgrade — multiply blend for warmer noise */
.grain {
  mix-blend-mode: multiply;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════════════════════
   3. SECTION SYSTEM — color-blocking + tinted panels
   ═══════════════════════════════════════════════════════════ */

/* Tinted section: warm off-white with gold radial */
.section--tint {
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(184, 148, 63, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.7), var(--surface-2)) !important;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

/* Alternate: blue-trust tinted section */
.section--trust-tint {
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(43, 89, 255, 0.05), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.7), var(--surface-2)) !important;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}


/* ═══════════════════════════════════════════════════════════
   4. CARD SYSTEM — hairline + inner highlight + multi-shadow
   ═══════════════════════════════════════════════════════════ */

/* Base depth card — replaces flat cards */
.depth-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm), var(--inner-highlight);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.depth-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--inner-highlight);
  border-color: var(--stroke-strong);
}

/* Premium card — gradient border (replaces dark-theme glow) */
.depth-card--premium {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg,
      rgba(184, 148, 63, 0.55),
      rgba(43, 89, 255, 0.20),
      rgba(184, 148, 63, 0.18)
    ) border-box;
  box-shadow: var(--shadow-md), var(--inner-highlight);
}

.depth-card--premium:hover {
  box-shadow: var(--shadow-lg), var(--inner-highlight);
}

/* Shine card — top radial highlight for physical "object" feel */
.depth-card--shine {
  position: relative;
  overflow: hidden;
}

.depth-card--shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(800px 220px at 50% 0%,
      rgba(255,255,255,0.75),
      transparent 60%);
  opacity: 0.7;
  z-index: 1;
}

/* Float card — hero floating items */
.depth-card--float {
  box-shadow: var(--shadow-float), var(--inner-highlight);
  border: 1px solid rgba(18, 24, 38, 0.08);
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,0.85), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--surface-2));
}

.depth-card--float:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow:
    0 1px 0 rgba(18, 24, 38, 0.03),
    0 28px 90px rgba(18, 24, 38, 0.20);
}


/* ═══════════════════════════════════════════════════════════
   5. TICKER / MARQUEE — glass on light
   ═══════════════════════════════════════════════════════════ */

.depth-ticker {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(18, 24, 38, 0.08);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* ═══════════════════════════════════════════════════════════
   6. BUTTONS — gold brand + trust-blue for UX
   ═══════════════════════════════════════════════════════════ */

/* Secondary button with inner bevel */
.depth-btn {
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  box-shadow: var(--shadow-xs), var(--inner-highlight);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.depth-btn:hover {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
  transform: translateY(-1px);
}

/* Primary gold button — brand moments */
.depth-btn--primary {
  border: 1px solid rgba(184, 148, 63, 0.40);
  background:
    linear-gradient(180deg, rgba(184, 148, 63, 0.15), rgba(184, 148, 63, 0.05)),
    linear-gradient(180deg, #ffffff, var(--surface-2));
  color: var(--ink);
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

.depth-btn--primary:hover {
  box-shadow: var(--shadow-md), var(--inner-highlight);
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════
   7. LINKS + FOCUS RINGS — trust-blue accent
   ═══════════════════════════════════════════════════════════ */

/* Trust-blue links */
a.depth-link {
  color: var(--trust);
  text-underline-offset: 3px;
  text-decoration-color: rgba(43, 89, 255, 0.35);
}

a.depth-link:hover {
  text-decoration-color: var(--trust);
}

/* Focus ring: trust-blue for accessibility */
*:focus-visible {
  outline: 3px solid var(--trust-soft);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Trust badge — "verified", "secure", "support" */
.depth-badge--trust {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--trust);
  background: var(--trust-soft);
  padding: 4px 10px;
  border-radius: 6px;
}


/* ═══════════════════════════════════════════════════════════
   8. ACCORDION — depth with separators + hover
   ═══════════════════════════════════════════════════════════ */

.depth-accordion-item {
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-xs), var(--inner-highlight);
  margin-bottom: 12px;
  overflow: hidden;
}

.depth-accordion-item .faq-q:hover {
  background: linear-gradient(180deg, rgba(184, 148, 63, 0.06), transparent);
}

.depth-accordion-item .faq-q {
  padding: 22px 24px;
}

.depth-accordion-item .faq-a-inner {
  padding: 0 24px 22px;
}


/* ═══════════════════════════════════════════════════════════
   9. APPLIED DEPTH — override existing light theme enhancements
   ═══════════════════════════════════════════════════════════ */

/* Hero warm gradient + orbs layered */
.hero {
  background:
    radial-gradient(700px 400px at 20% 10%, rgba(184,148,63,0.10), transparent 60%),
    radial-gradient(500px 300px at 80% 20%, rgba(43,89,255,0.05), transparent 55%),
    linear-gradient(180deg, #fdfcfa, var(--surface-2) 80%, var(--bg));
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  z-index: 0;
  background: linear-gradient(180deg, transparent, var(--surface-2));
  pointer-events: none;
}

/* Showcase cards — float treatment */
.showcase-card {
  box-shadow: var(--shadow-float), var(--inner-highlight);
  border-color: rgba(18, 24, 38, 0.06);
  background:
    radial-gradient(600px 180px at 50% 0%, rgba(255,255,255,0.7), transparent 55%),
    var(--surface-2);
}

.showcase-card:hover {
  box-shadow:
    0 1px 0 rgba(18,24,38,0.03),
    0 28px 90px rgba(18,24,38,0.18) !important;
}

/* Marketplace cards — depth */
.mp-card {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
  border-color: var(--stroke);
}

.mp-card:hover {
  box-shadow: var(--shadow-lg), var(--inner-highlight) !important;
  border-color: var(--stroke-strong) !important;
}

/* How-it-works cards */
.how-card {
  box-shadow: var(--shadow-xs), var(--inner-highlight);
}

.how-card:hover {
  box-shadow: var(--shadow-md), var(--inner-highlight);
}

/* How number visibility */
.how-num {
  color: var(--gold);
  opacity: 0.15;
}

.how-card:hover .how-num {
  opacity: 0.4;
}

/* Feature bento cards */
.feat-card {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

.feat-card:hover {
  box-shadow: var(--shadow-md), var(--inner-highlight);
}

/* Testimonial cards */
.testi-card {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

.testi-card:hover {
  box-shadow: var(--shadow-md), var(--inner-highlight);
  border-color: rgba(184, 148, 63, 0.18);
}

/* Pricing cards */
.plan {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

/* Featured pricing card — premium gradient border */
.plan.featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg,
      rgba(184, 148, 63, 0.60),
      rgba(43, 89, 255, 0.15),
      rgba(184, 148, 63, 0.25)
    ) border-box;
  box-shadow: var(--shadow-lg), var(--inner-highlight);
}

.plan.featured::before {
  background: linear-gradient(135deg, var(--gold), #d4a847);
}

/* Protection programme cards */
.guar-card {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

.guar-stat-bar {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

/* Scenario cards */
.scenario-card {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

.scenario-card:hover {
  box-shadow: var(--shadow-md), var(--inner-highlight);
}

/* Lender cards */
.lender-card {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

.lender-card:hover {
  box-shadow: var(--shadow-md), var(--inner-highlight);
}

/* Verification cards */
.verify-card {
  box-shadow: var(--shadow-xs), var(--inner-highlight);
}

.verify-card:hover {
  box-shadow: var(--shadow-md), var(--inner-highlight);
}

/* Trust formula + tiers */
.trust-formula,
.trust-tiers {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

/* Founding cards */
.founding-card {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

.founding-card:hover {
  box-shadow: var(--shadow-md), var(--inner-highlight);
}

/* Fee box */
.fee-box {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}

/* Live bar — glass treatment */
.live-bar {
  box-shadow: var(--shadow-sm), var(--inner-highlight);
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ═══════════════════════════════════════════════════════════
  10. SECTION BACKGROUNDS — warm alternation
   ═══════════════════════════════════════════════════════════ */

/* Tinted warm sections */
.how-section,
.testi-section,
.guar-section,
.trust-section,
.lenders-section {
  background:
    radial-gradient(900px 400px at 25% 0%, rgba(184,148,63,0.06), transparent 65%),
    linear-gradient(180deg, #f8f5ef, #fcfbf8);
}

/* Clean white sections */
.feat-section,
.pricing-section,
.verify-section,
.scenarios-section,
.founding-section,
.dispute-section {
  background: var(--bg);
}

/* CTA section depth */
.cta-section {
  background:
    radial-gradient(600px 300px at 50% 20%, rgba(184,148,63,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg), #f5f2ec 50%, var(--bg));
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 80%; max-width: 800px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-dim), rgba(184,148,63,0.18), var(--gold-dim), transparent);
}

/* Sustainability section — green tint */
.sustain-section {
  background:
    radial-gradient(600px 300px at 50% 30%, rgba(42,157,90,0.05), transparent 60%),
    linear-gradient(180deg, rgba(42,157,90,0.02), transparent 40%, rgba(42,157,90,0.02));
}

/* Footer warmth */
footer {
  background: var(--surface-2);
}

/* Marketplace section top border */
.mp-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-h), transparent);
}


/* ═══════════════════════════════════════════════════════════
  11. EYEBROW + NAV REFINEMENTS
   ═══════════════════════════════════════════════════════════ */

/* Gold eyebrow pill */
.sec-eyebrow {
  background: linear-gradient(135deg, rgba(184,148,63,0.08), rgba(184,148,63,0.03));
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(184,148,63,0.12);
}

/* Nav glass enhancement */
nav {
  border-bottom-color: rgba(18, 24, 38, 0.04);
}

nav.scrolled {
  border-bottom-color: rgba(18, 24, 38, 0.06);
  box-shadow: var(--shadow-sm);
}


/* ═══════════════════════════════════════════════════════════
  12. FAQ DEPTH OVERRIDES
   ═══════════════════════════════════════════════════════════ */

.faq-item {
  border-bottom: none;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-xs), var(--inner-highlight);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-q {
  padding: 22px 24px;
}

.faq-q:hover {
  background: linear-gradient(180deg, rgba(184,148,63,0.05), transparent);
}

.faq-a-inner {
  padding: 0 24px 22px;
}


/* ═══════════════════════════════════════════════════════════
  13. EMERALD / TAG REFINEMENTS
   ═══════════════════════════════════════════════════════════ */

.sc-tag {
  background: rgba(42, 157, 90, 0.08);
  color: var(--emerald);
}

.testi-badge {
  background: rgba(42, 157, 90, 0.08);
  color: var(--emerald);
}

/* Marquee improved styling */
.marquee-item {
  color: var(--ink-2);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
  14. SIGNATURE LAYER — Borrowed brand utilities
   ═══════════════════════════════════════════════════════════ */

/* ── Borrowed Stamp ──
   Small rotated watermark used above key headings
   (Protection, Trust, Pricing, Founding) */
.borrowed-stamp {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  border: 1.5px solid rgba(184, 148, 63, 0.35);
  padding: 4px 12px;
  border-radius: 4px;
  transform: rotate(-2deg);
  opacity: 0.75;
  margin-bottom: 12px;
  pointer-events: none;
  user-select: none;
}

/* ── Ticket Edge ──
   Perforated/notch border on featured pricing card */
.ticket-edge {
  position: relative;
}

.ticket-edge::before,
.ticket-edge::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  transform: translateY(-50%);
  box-shadow: inset 0 1px 3px rgba(18, 24, 38, 0.08);
  z-index: 2;
}

.ticket-edge::before { left: -7px; }
.ticket-edge::after  { right: -7px; }

/* ── Section Frame ──
   Wrapper that adds a subtle border + inner padding
   for visual hierarchy between page sections */
.section-frame {
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl, 28px);
  padding: 56px 40px;
  position: relative;
  background: var(--surface);
  box-shadow: var(--shadow-xs), var(--inner-highlight);
}

.section-frame--gold {
  border-color: rgba(184, 148, 63, 0.18);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(184, 148, 63, 0.06), transparent 65%),
    var(--surface);
}

.section-frame--trust {
  border-color: rgba(43, 89, 255, 0.12);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(43, 89, 255, 0.04), transparent 65%),
    var(--surface);
}

/* ── Fade Edges ──
   Horizontal fade mask on marquee / scroller containers */
.fade-edges {
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* ── Section Nav ──
   Sticky pill navigation bar below hero */
.section-nav {
  position: sticky;
  top: calc(64px + env(safe-area-inset-top, 0px));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 40px);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.section-nav::-webkit-scrollbar { display: none; }

.section-nav a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.section-nav a:hover {
  color: var(--ink);
  background: rgba(18, 24, 38, 0.04);
}

.section-nav a.active {
  color: var(--gold);
  background: rgba(184, 148, 63, 0.10);
}

/* ── Button Refinements ──
   Gold gradient button + surface glass button */
.btn-gold-gradient {
  background: linear-gradient(180deg, #c9a96e, var(--gold));
  color: #fff;
  border: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 2px 12px rgba(184, 148, 63, 0.20);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.btn-gold-gradient:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 28px rgba(184, 148, 63, 0.28);
}

.btn-surface {
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  border: 1px solid var(--stroke-strong);
  color: var(--ink);
  box-shadow: var(--shadow-xs), var(--inner-highlight);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.btn-surface:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm), var(--inner-highlight);
}


/* ═══════════════════════════════════════════════════════════
  15. MOTION — reduced motion safety
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .depth-card,
  .depth-card--float,
  .depth-card--premium,
  .depth-btn,
  .depth-btn--primary,
  .btn-gold-gradient,
  .btn-surface,
  .section-nav a {
    transition: none !important;
  }

  .depth-card:hover,
  .depth-card--float:hover {
    transform: none !important;
  }
}