/* ═══════════════════════════════════════
   TSC — WOW.CSS · ULTRA GLOSSY SAPPHIRE
   The Sapientia Collective © 2026
═══════════════════════════════════════ */

/* ══════════════════════════════════════
   GLOSSY SAPPHIRE BODY — EVERY PAGE
══════════════════════════════════════ */
html {
  background: #D6EAFF;
}
body {
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%,  rgba(255,255,255,0.85) 0%, transparent 55%),
    radial-gradient(ellipse 60%  50% at 100% 0%,   rgba(90,171,255,0.30) 0%, transparent 50%),
    radial-gradient(ellipse 50%  40% at 0%   100%, rgba(30,127,255,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 40%  30% at 80%  90%,  rgba(255,215,0,0.08)  0%, transparent 50%),
    linear-gradient(160deg, #E8F4FF 0%, #C8DFFF 40%, #D6EAFF 70%, #BBD8FF 100%) !important;
  min-height: 100vh;
}

/* Floating ambient orbs */
body::before {
  content: '';
  position: fixed;
  top: -250px; right: -250px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(30,127,255,0.14) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: orb-a 18s ease-in-out infinite alternate;
}
body::after {
  content: '';
  position: fixed;
  bottom: -200px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,215,0,0.10) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: orb-b 22s ease-in-out infinite alternate-reverse;
}
@keyframes orb-a {
  0%   { transform: translate(0,0)   scale(1.0); }
  50%  { transform: translate(-50px, 60px) scale(1.15); }
  100% { transform: translate(40px, -40px) scale(0.90); }
}
@keyframes orb-b {
  0%   { transform: translate(0,0)   scale(1.0); }
  50%  { transform: translate(60px, -40px) scale(1.12); }
  100% { transform: translate(-30px, 50px) scale(0.92); }
}

/* ══════════════════════════════════════
   NAV — digisidekick clean override
══════════════════════════════════════ */
nav {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════
   GLOSSY PAGE HERO (inner pages)
   — partner, contact, awards, join
══════════════════════════════════════ */
.page-hero {
  background:
    radial-gradient(ellipse 80% 100% at 20% 50%, rgba(30,127,255,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80%  at 85% 10%, rgba(90,171,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50%  at 50% 90%, rgba(255,215,0,0.09)  0%, transparent 50%),
    radial-gradient(ellipse 100% 60% at 50% -5%, rgba(255,255,255,0.70) 0%, transparent 50%),
    linear-gradient(135deg, #E0F0FF 0%, #C4DCFF 50%, #D6EAFF 100%) !important;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #1E7FFF, #FFD700, #5AABFF, transparent);
  z-index: 2;
}
.page-hero h1         { color: var(--navy) !important; }
.page-hero-sub        { color: rgba(9,12,24,0.68) !important; }
.page-hero-label      { color: var(--blue) !important; }
.page-hero-bg-text    { color: rgba(30,127,255,0.07) !important; }

/* ══════════════════════════════════════
   GLOSSY SECTION BACKGROUNDS
══════════════════════════════════════ */
.sec {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.55) 0%,
    rgba(214,234,255,0.30) 50%,
    rgba(194,220,255,0.20) 100%
  ) !important;
  position: relative;
}
/* Shine strip at top of each section */
.sec::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.50), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════
   GLASSMORPHISM CARDS
══════════════════════════════════════ */
.card {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.96) 0%,
    rgba(255,255,255,0.82) 45%,
    rgba(210,232,255,0.85) 100%
  ) !important;
  backdrop-filter: blur(24px) saturate(200%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(108%) !important;
  border: 1px solid rgba(255,255,255,0.90) !important;
  box-shadow:
    0 12px 40px rgba(30,127,255,0.12),
    0 4px  12px rgba(30,127,255,0.07),
    0 1px  0   rgba(255,255,255,1.0) inset,
    0 -1px 0   rgba(30,127,255,0.06) inset !important;
}
.card:hover {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,1.0) 0%,
    rgba(255,255,255,0.95) 50%,
    rgba(225,242,255,0.95) 100%
  ) !important;
  box-shadow:
    0 20px 60px rgba(30,127,255,0.18),
    0 6px  20px rgba(30,127,255,0.10),
    0 1px  0   rgba(255,255,255,1.0) inset !important;
  transform: translateY(-5px) !important;
}
/* Shine sweep on hover */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 70%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.55) 50%,
    transparent 70%
  );
  transform: skewX(-20deg);
  z-index: 1;
}
.card:hover::before {
  animation: card-shine 0.55s ease forwards;
}
@keyframes card-shine {
  from { left: -120%; }
  to   { left:  170%; }
}

/* ══════════════════════════════════════
   GLOSSY BUTTONS
══════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(
    145deg,
    #7EC8FF 0%,
    #1E7FFF 35%,
    #1668D4 75%,
    #0D52B8 100%
  ) !important;
  box-shadow:
    0 6px 24px rgba(30,127,255,0.40),
    0 2px  8px rgba(30,127,255,0.25),
    0 1px  0   rgba(255,255,255,0.40) inset !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: skewX(-20deg);
}
.btn-primary:hover {
  background: linear-gradient(
    145deg,
    #96D4FF 0%,
    #3A9AFF 35%,
    #1E7FFF 75%,
    #1668D4 100%
  ) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 14px 40px rgba(30,127,255,0.50),
    0 4px  12px rgba(30,127,255,0.30),
    0 1px  0   rgba(255,255,255,0.45) inset !important;
}
.btn-primary:hover::before {
  animation: btn-shine 0.5s ease forwards;
}
@keyframes btn-shine {
  from { left: -100%; }
  to   { left:  160%; }
}

.nav-cta {
  background: linear-gradient(
    145deg,
    #7EC8FF 0%,
    #1E7FFF 40%,
    #1668D4 100%
  ) !important;
  box-shadow:
    0 4px 18px rgba(30,127,255,0.40),
    0 1px 0   rgba(255,255,255,0.35) inset !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

/* ══════════════════════════════════════
   GLOSSY STATS BAR
══════════════════════════════════════ */
.stats-bar {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.96),
    rgba(220,238,255,0.90)
  ) !important;
  backdrop-filter: blur(24px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(220%) !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  box-shadow:
    0 8px 32px rgba(30,127,255,0.14),
    0 2px  8px rgba(30,127,255,0.08),
    0 2px  0   rgba(255,255,255,1.0) inset,
    0 -1px 0   rgba(30,127,255,0.08) inset !important;
}
.stat {
  background: transparent !important;
  position: relative;
}
.stat::after {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  background: rgba(255,255,255,0.40);
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.stat:hover::after { opacity: 1; }

/* ══════════════════════════════════════
   GLOSSY FORMS
══════════════════════════════════════ */
.form-input, .form-select, .form-textarea {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.98),
    rgba(220,238,255,0.88)
  ) !important;
  border: 1.5px solid rgba(255,255,255,0.80) !important;
  box-shadow:
    0 2px 10px rgba(30,127,255,0.08),
    0 1px  0   rgba(255,255,255,0.98) inset,
    0 -1px 0   rgba(30,127,255,0.06) inset !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #1E7FFF !important;
  background: #fff !important;
  box-shadow:
    0 0 0  4px rgba(30,127,255,0.14),
    0 4px 14px rgba(30,127,255,0.12),
    0 1px  0   rgba(255,255,255,1.0) inset !important;
}

/* ══════════════════════════════════════
   GLOSSY TICKER
══════════════════════════════════════ */
.ticker {
  background: linear-gradient(
    90deg,
    #090C18 0%,
    #0D2060 20%,
    #1030A0 50%,
    #0D2060 80%,
    #090C18 100%
  ) !important;
  box-shadow:
    0 4px 24px rgba(9,12,24,0.40),
    0 1px 0   rgba(30,127,255,0.30) inset !important;
}

/* ══════════════════════════════════════
   GLOSSY FOOTER
══════════════════════════════════════ */
footer {
  background: linear-gradient(
    160deg,
    #090C18 0%,
    #0A1E60 30%,
    #0D2870 55%,
    #081840 80%,
    #090C18 100%
  ) !important;
}

/* ══════════════════════════════════════
   DARK SECTION GLASS CARDS (navy bg)
══════════════════════════════════════ */
.dark-card, [style*="background:var(--navy)"] .card,
[style*="background:linear-gradient(135deg,var(--navy)"] .card {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(16px) !important;
}

/* ══════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════ */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #D6EAFF, #C2DCFF);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #7EC8FF, #1E7FFF, #1668D4);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.50);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #5AABFF, #1E7FFF);
}

/* ══════════════════════════════════════
   SECTION SEPARATOR LINES
══════════════════════════════════════ */
.sec + .sec {
  border-top: 1px solid rgba(255,255,255,0.60);
}

/* Mobile — remove heavy effects */
@media(max-width:640px){
  body::before, body::after { display:none; }
  .card::before { display:none; }
  .btn-primary::before { display:none; }
}

/* ══════════════════════════════════════
   POPPING TEXT — GLOBAL
══════════════════════════════════════ */

/* Section labels — vivid sapphire */
.sec-label {
  color: #1E7FFF !important;
  font-weight: 600;
  letter-spacing: 3px;
}
.sec-label::before {
  background: linear-gradient(90deg, #FFD700, #F79F1F) !important;
  height: 2px !important;
}

/* Stat numbers — gold gradient */
.stat-num {
  background: linear-gradient(135deg, #1A4B9E, #1E7FFF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}
.stat-num span {
  background: linear-gradient(135deg, #FFD700, #F79F1F) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Section titles — navy with depth */
h2.sec-title {
  color: var(--navy) !important;
  text-shadow: 0 2px 12px rgba(9,12,24,0.08);
}

/* Ticker items — bright white */
.ticker-item {
  color: rgba(255,255,255,0.95) !important;
  font-weight: 500 !important;
  letter-spacing: 3px;
}

/* Page hero labels — gold */
.page-hero-label {
  color: #FFD700 !important;
  text-shadow: 0 0 12px rgba(255,215,0,0.5) !important;
  font-weight: 600 !important;
}
.page-hero-label::before {
  background: linear-gradient(90deg, #FFD700, transparent) !important;
}

/* Page hero h1 — white with depth */
.page-hero h1 {
  color: #fff !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.30) !important;
}

/* Dark section body text — brighter */
.cta-banner p,
.page-hero-sub {
  color: rgba(255,255,255,0.88) !important;
}

/* CTA banner gold word */
.cta-banner h2 .saf {
  background: linear-gradient(135deg, #FFD700, #F79F1F) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.cta-banner h2 {
  text-shadow: none;
}

/* Card titles */
.card-title {
  color: var(--navy) !important;
  font-weight: 700 !important;
}

/* Footer links hover — gold */
.footer-col a:hover {
  color: #FFD700 !important;
}


/* ══════════════════════════════════════
   GLOBAL TEXT POP — FINAL PASS
   White · Black · Gold on every surface
══════════════════════════════════════ */

/* ── HEADINGS — WHITE for dark site ── */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── BODY TEXT — near black ── */
p, li, div > p {
  color: rgba(255,255,255,0.88) !important;
}
/* Hero text — white by default, gold words handled inline */
#home p {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.8) !important;
}

/* ── SECTION TITLES ── */
h2.sec-title {
  color: #090C18 !important;
  font-weight:900;
}
/* Sapphire words in headings */
h2.sec-title .saf {
  background: linear-gradient(135deg,#1E7FFF,#5AABFF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
/* Outline words — solid black stroke */
h2.sec-title .out {
  -webkit-text-stroke: 3px #090C18 !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── SEC-BODY (italic descriptions) ── */
.sec-body {
  color: rgba(0,0,0,0.78) !important;
}

/* ── SECTION LABELS ── */
.sec-label {
  color: #1E7FFF !important;
  font-weight: 700 !important;
}

/* ── NAV LINKS ── */
.nav-links a {
  color: rgba(0,0,0,0.60) !important;
}
.nav-links a:hover, .nav-links a.active {
  color: #1E7FFF !important;
}
.nav-logo {
  color: #090C18 !important;
  font-weight: 600 !important;
}

/* ── CARD TEXT ── */
.card-title {
  color: #ffffff !important;
  font-weight: 800 !important;
}
.card-text {
  color: rgba(255,255,255,0.80) !important;
}
.card-num {
  color: rgba(0,0,0,0.50) !important;
}

/* ── STATS ── */
.stat-num {
  background: linear-gradient(135deg,#090C18 0%,#1E7FFF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
}
.stat-num span {
  background: linear-gradient(135deg,#FFD700,#F79F1F) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.stat-label {
  color: rgba(255,255,255,0.80) !important;
  font-weight: 600 !important;
}

/* ── FORM LABELS ── */
.form-label {
  color: #FFD700 !important;
  font-weight: 700 !important;
}
.form-input, .form-select, .form-textarea {
  color: #ffffff !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.08) !important;
}

/* ── DARK SECTIONS (navy/black bg) ── */
/* page-hero, cta-banner, footer, donate section */
.page-hero *, .page-hero h1, .page-hero p {
  color: #ffffff !important;
}
.page-hero h1 {
  text-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
  font-weight: 900 !important;
}
.page-hero-sub {
  color: rgba(255,255,255,0.88) !important;
}
.page-hero-label {
  color: #FFD700 !important;
  text-shadow: 0 0 14px rgba(255,215,0,0.55) !important;
}

/* CTA banner */
.cta-banner h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.25) !important;
}
.cta-banner p {
  color: rgba(255,255,255,0.90) !important;
}
.cta-banner-tag {
  color: #FFD700 !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.50) !important;
}

/* Footer */
footer .footer-logo {
  color: #ffffff !important;
  text-shadow: none !important;
}
footer .footer-tagline {
  color: rgba(255,255,255,0.72) !important;
}
footer .footer-col-title {
  color: rgba(255,255,255,0.55) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}
footer .footer-col a {
  color: rgba(255,255,255,0.72) !important;
}
footer .footer-col a:hover {
  color: #FFD700 !important;
}
footer .footer-bar {
  color: rgba(255,255,255,0.50) !important;
}

/* Ticker */
.ticker-item {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ── PAGE HERO ON LIGHT BG (partner,contact,awards,join) ── */
.page-hero[style*="E0F0FF"] h1,
.page-hero[style*="C4DCFF"] h1,
.page-hero[style*="D6EAFF"] h1 {
  color: #090C18 !important;
  text-shadow: none !important;
}
.page-hero[style*="E0F0FF"] .page-hero-sub,
.page-hero[style*="C4DCFF"] .page-hero-sub {
  color: rgba(0,0,0,0.68) !important;
}

/* ── BIF CARDS ── */
.bif-card-title {
  color: #090C18 !important;
}
.bif-card-text {
  color: rgba(0,0,0,0.72) !important;
}

/* ── INLINE MUTED/DIMMED OVERRIDES ── */
[style*="color:var(--muted)"] {
  color: rgba(0,0,0,0.76) !important;
}
[style*="color:var(--dimmed)"] {
  color: rgba(0,0,0,0.58) !important;
}
[style*="rgba(9,12,24,0.65)"] {
  color: rgba(0,0,0,0.75) !important;
}
[style*="rgba(9,12,24,0.72)"] {
  color: rgba(0,0,0,0.80) !important;
}
[style*="rgba(9,12,24,0.42)"] {
  color: rgba(0,0,0,0.58) !important;
}
[style*="rgba(9,12,24,0.52)"] {
  color: rgba(0,0,0,0.65) !important;
}

/* ── GOLD HIGHLIGHTS — strategic use ── */
/* Gold on: award stars, nav dot label, key numbers */
.award-star, .gold-text, .highlight-gold {
  background: linear-gradient(135deg,#FFD700,#F79F1F) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}

/* ── BIFURCATION PAGE ── */
.bif-num { color: rgba(0,0,0,0.35) !important; }

/* ── SHOP CARDS ── */
.product-name { color: #090C18 !important; font-weight: 700 !important; }
.product-desc { color: rgba(0,0,0,0.68) !important; }
.product-price { color: #1E7FFF !important; font-weight: 800 !important; }

/* ── MOBILE ── */
.mob-menu a { color: rgba(0,0,0,0.68) !important; }
.mob-menu a.active, .mob-menu a:hover { color: #1E7FFF !important; }