/* =========================================================================
   SOLProxy — premium "navy + white" theme, shared across pages.
   Loaded AFTER each page's inline <style> so its :root + rules win on ties.
   Deep-navy chrome (nav / footer) on a clean cool-white body with royal-blue
   accents — matched 1:1 to index.html. Page markup & JS are untouched.
   ========================================================================= */
@import url("/static/css/fonts.css");
:root{
  /* brand */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #3b82f6;
  --accent: #1d4ed8;          /* was cyan — now royal blue */
  --success: #15864a;
  --warning: #d97706;
  --danger: #dc2626;

  /* surfaces / text (override each page's baked tokens) */
  --bg-body: #eaeef4;
  --bg-card: #ffffff;
  --text-main: #0a1c3d;
  --text-muted: #47536e;
  --border: rgba(10,28,61,0.12);

  /* also override the index-style tokens some pages use */
  --bg: #eaeef4;
  --surface: #ffffff;
  --surface-2: #f2f6fc;
  --text: #0a1c3d;
  --text-dim: #808da8;
  --accent-2: #2563eb;
  --accent-3: #3b82f6;
  --brand-grad: linear-gradient(125deg,#102a55 0%,#1d4ed8 100%);

  /* helper tokens */
  --sp-bg: #eaeef4;
  --sp-text: #0a1c3d;
  --sp-muted: #47536e;
  --sp-dim: #808da8;
  --sp-surface: #ffffff;
  --sp-surface-2: #f2f6fc;
  --sp-border: rgba(10,28,61,0.12);
  --sp-border-strong: rgba(10,28,61,0.20);
  --sp-accent: #1d4ed8;
  --sp-grad: linear-gradient(125deg,#102a55 0%,#1d4ed8 100%);
  --sp-navy-grad: linear-gradient(165deg,#0d2149 0%,#061127 100%);
  --sp-shadow: 0 18px 44px -22px rgba(10,28,61,0.26);
  --sp-shadow-lg: 0 44px 90px -38px rgba(10,28,61,0.42);
  --sp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html{ background:var(--sp-bg); }
body{ background:var(--sp-bg) !important; color:var(--sp-text); position:relative; }

/* ── Ambient background (navy glows + faint grid on cool white) ── */
.sp-ambient{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 620px at 84% -10%, rgba(29,78,216,0.10), transparent 62%),
    radial-gradient(820px 560px at 3% 0%, rgba(16,42,85,0.10), transparent 58%),
    radial-gradient(820px 820px at 50% 118%, rgba(37,99,235,0.05), transparent 60%);
}
.sp-ambient::after{ content:''; position:absolute; inset:0; opacity:.55;
  background-image:
    linear-gradient(rgba(10,28,61,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,28,61,0.045) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ── Nav (deep navy — premium, heavy) ── */
header.nav{
  background:rgba(8,20,41,0.85) !important;
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:0 14px 44px -26px rgba(0,0,0,0.95) !important;
}
.brand .title{
  color:#fff !important;
  background:linear-gradient(90deg,#ffffff 0%,#a9c6ff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
nav.center a{ color:rgba(226,233,247,0.72) !important; }
nav.center a:hover{ color:#fff !important; background:rgba(255,255,255,0.08) !important; }

/* ── Buttons ── */
.btn-outline{
  background:#ffffff !important; color:var(--sp-text) !important;
  border:1px solid var(--sp-border-strong) !important;
}
.btn-outline:hover{ border-color:var(--primary) !important; color:var(--primary) !important; box-shadow:0 8px 22px -10px rgba(29,78,216,.45); }
/* nav-scoped light outline against the dark bar */
.nav-actions .btn-outline{ background:transparent !important; color:#e9effb !important; border-color:rgba(255,255,255,0.22) !important; }
.nav-actions .btn-outline:hover{ border-color:#fff !important; color:#fff !important; background:rgba(255,255,255,0.06) !important; box-shadow:none !important; }
.btn-primary, .btn-register{
  background:var(--sp-grad) !important; color:#ffffff !important; border:1px solid transparent !important;
  box-shadow:0 12px 30px -10px rgba(16,42,85,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover, .btn-register:hover{ box-shadow:0 18px 40px -10px rgba(29,78,216,.6) !important; transform:translateY(-1px); }

/* ── Headings ── */
.hero-title{
  background:var(--sp-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── Cards ── */
.feature-card, .price-card, .stat-card, .mission-card, .glass{
  background:#ffffff !important; border:1px solid var(--sp-border) !important; box-shadow:var(--sp-shadow);
}
.feature-card:hover, .price-card:hover{
  border-color:rgba(29,78,216,.38) !important;
  box-shadow:var(--sp-shadow-lg) !important; transform:translateY(-6px);
}
.feature-icon{
  background:linear-gradient(160deg, rgba(16,42,85,.10), rgba(29,78,216,.10)) !important;
  border:1px solid rgba(16,42,85,.18); color:var(--primary) !important;
}
.price-card.popular{
  border:1px solid transparent !important;
  background:linear-gradient(#ffffff,#ffffff) padding-box, var(--sp-grad) border-box !important;
  box-shadow:0 40px 90px -34px rgba(16,42,85,.55), 0 0 56px -22px rgba(29,78,216,.4) !important;
}
.popular-badge{ background:var(--sp-grad) !important; color:#ffffff !important; }

/* ── Footer (deep navy) ── */
footer{ background:var(--sp-navy-grad) !important; border-top:1px solid rgba(255,255,255,0.08) !important; color:#fff; }
footer .brand .title{ color:#fff !important; }
.footer-desc{ color:rgba(226,233,247,0.6) !important; }
.footer-desc a{ color:rgba(226,233,247,0.5) !important; border-bottom-color:rgba(255,255,255,0.16) !important; }
.footer-desc a:hover{ color:#8fb4ff !important; }
.footer-col h4{ color:#fff !important; }
.footer-links a{ color:rgba(226,233,247,0.62) !important; }
.footer-links a:hover{ color:#8fb4ff !important; }
.footer-bottom{ color:rgba(226,233,247,0.42) !important; border-top:1px solid rgba(255,255,255,0.08) !important; }

/* ── Forms ── */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),
select, textarea{
  background:#ffffff !important; color:var(--sp-text) !important;
  border:1px solid var(--sp-border-strong) !important;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus{
  border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(29,78,216,.16) !important; outline:none;
}
input::placeholder, textarea::placeholder{ color:var(--sp-dim) !important; }

/* ── Mobile nav overlay (navy) ── */
#mobile-nav-overlay{ background:rgba(8,20,41,0.98) !important; border-top:1px solid rgba(255,255,255,0.08) !important; box-shadow:0 24px 50px rgba(0,0,0,.6) !important; }
#mobile-nav-overlay a{ color:rgba(226,233,247,0.74) !important; }
#mobile-nav-overlay a:hover{ color:#fff !important; background:rgba(255,255,255,0.08) !important; }

/* ── Misc polish ── */
.hamburger span{ background:#fff !important; }
::selection{ background:rgba(29,78,216,.20); color:#0a1c3d; }
*::-webkit-scrollbar{ width:12px; height:12px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(16,42,85,0.28); border-radius:12px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(16,42,85,0.42); background-clip:padding-box; }