@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap');

:root { --gold: #e6b800; }

/* Deep green base background */
body.bg-black {
  background: linear-gradient(180deg, #04140b 0%, #02100a 45%, #010805 100%) !important;
}
/* Let solid black sections reveal the green base */
section.bg-black,
.bg-black:not(header):not(.sticky) {
  background-color: transparent !important;
}
/* Green header */
header.bg-black,
header.sticky {
  background: linear-gradient(90deg, #03130b, #063a20, #03130b) !important;
  border-bottom: 1px solid rgba(230, 184, 0, 0.35) !important;
}

/* Recolor blue accent gradients to emerald green */
[class*="from-blue-900"] {
  --tw-gradient-from: rgba(5, 46, 22, 0.55) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 46, 22, 0)) !important;
}
[class*="to-blue-900"] {
  --tw-gradient-to: rgba(5, 46, 22, 0.35) !important;
}

/* Green glow accents */
.bg-yellow-500\/10 { background-color: rgba(16, 185, 129, 0.12) !important; }

/* Golden accents kept, add green-gold harmony on borders */
.border-yellow-500\/20 { border-color: rgba(230, 184, 0, 0.30) !important; }

/* Top announcement ribbon */
.top-ribbon {
  background: linear-gradient(90deg, #0a5c2b, #e6b800, #0a5c2b);
  background-size: 200% 100%;
  animation: ribbonShine 6s linear infinite;
}
@keyframes ribbonShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---- Sub-page helpers ---- */
.page-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.page-hero {
  text-align: center;
  padding: 3.5rem 1rem 2.5rem;
  background: radial-gradient(600px 300px at 50% -10%, rgba(16,185,129,0.18), transparent 70%);
}
.page-eyebrow {
  color: #e6b800;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 700;
  font-size: .8rem;
}
.page-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  margin-top: .75rem;
  background: linear-gradient(90deg, #e6b800, #34d399, #e6b800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-lead {
  color: #cbd5e1;
  max-width: 46rem;
  margin: 1.25rem auto 0;
  line-height: 1.9;
  font-size: 1.05rem;
}
.content-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(230,184,0,0.18);
  border-radius: 1rem;
  padding: 1.75rem;
}
.content-card h3 { color: #e6b800; font-weight: 700; font-size: 1.25rem; margin-bottom: .6rem; }
.content-card p, .content-card li { color: #cbd5e1; line-height: 1.8; }
.content-prose h2 { color: #34d399; font-size: 1.75rem; font-weight: 700; margin: 2rem 0 1rem; }
.content-prose p { color: #cbd5e1; line-height: 1.9; margin-bottom: 1rem; }
.content-prose ul { margin: 0 0 1rem 0; }
.content-prose li { color: #cbd5e1; line-height: 1.8; margin-bottom: .5rem; }
.cta-gold {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 2.25rem; border-radius: .9rem; font-weight: 700; color: #000;
  background: linear-gradient(90deg, #b8860b, #e6b800, #b8860b);
  transition: transform .2s ease;
}
.cta-gold:hover { transform: scale(1.05); }

/* ============================================================
   PREMIUM POLISH LAYER
   ============================================================ */
html { scroll-behavior: smooth; }

/* Refined typography */
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4,
.hero-title, .feature-title, .page-title, .stat-number {
  font-family: 'Sora', 'Poppins', sans-serif !important;
  letter-spacing: -0.015em;
}

/* Gold-gradient headings */
.hero-title,
h1.text-gold, h2.text-gold, h3.text-gold,
.text-3xl.text-gold, .text-4xl.text-gold, .text-5xl.text-gold {
  background: linear-gradient(92deg, #f7e08a 0%, #e6b800 45%, #34d399 75%, #e6b800 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  background-size: 200% auto;
}
.stat-number {
  color: #f7e08a !important;
  text-shadow: 0 2px 12px rgba(230,184,0,0.25);
}

/* Premium scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #04140b; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e6b800, #0a5c2b);
  border-radius: 10px; border: 2px solid #04140b;
}

/* Glass cards with depth + hover lift */
.glass-effect, .feature-card, .stat-box, .trust-box,
.step-card, .content-card, .why-feature, .glass-contact {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(230,184,0,0.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px -16px rgba(0,0,0,0.7);
  transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, border-color .38s ease;
}
.glass-effect:hover, .feature-card:hover, .stat-box:hover, .trust-box:hover,
.step-card:hover, .content-card:hover, .why-feature:hover {
  transform: translateY(-6px);
  border-color: rgba(230,184,0,0.55) !important;
  box-shadow: 0 22px 48px -18px rgba(230,184,0,0.28);
}

/* Button glow */
a[class*="from-yellow"], button[class*="from-yellow"],
.cta-gold, .hero-btn, .contact-btn, .faq-cta {
  box-shadow: 0 12px 30px -12px rgba(230,184,0,0.55);
}
a[class*="from-green"], button[class*="from-green"], .bg-green-500 {
  box-shadow: 0 12px 30px -12px rgba(16,185,129,0.5);
}

/* Animated sheen sweep on primary buttons */
.cta-gold, .hero-btn, .contact-btn {
  position: relative; overflow: hidden;
}
.cta-gold::after, .hero-btn::after, .contact-btn::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.cta-gold:hover::after, .hero-btn:hover::after, .contact-btn:hover::after { left: 150%; }

/* Gold divider accent under section headings */
.page-title::after {
  content: ""; display: block; width: 90px; height: 3px; margin: 1rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #e6b800, #34d399, transparent);
}

/* Decorative ambient glow behind the page */
body.bg-black::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 420px at 12% 8%, rgba(16,185,129,0.10), transparent 60%),
    radial-gradient(560px 420px at 88% 14%, rgba(230,184,0,0.09), transparent 60%);
}

/* Scroll-reveal animation (progressive enhancement) */
body.reveal-on .reveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
body.reveal-on .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  body.reveal-on .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   SVG ICON SYSTEM
   ============================================================ */
.ic {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -0.18em; flex: none;
}
.ic-lg { width: 2.4rem; height: 2.4rem; }
.ic-gold { color: #e6b800; }
.lead-ic { margin-right: .55rem; }
.check { color: #34d399; margin-right: .6rem; width: 1.1em; height: 1.1em; }
.icon-stars { display: inline-flex; align-items: center; gap: .18rem; color: #e6b800; }
.icon-stars .ic { width: 1.05em; height: 1.05em; }

/* Buttons that lay out icon + label */
.cta-gold, .hero-btn, .contact-btn, .faq-cta { gap: .5rem; }

/* Feature icon tiles render an SVG instead of an emoji glyph */
.feature-icon .ic { width: 2.4rem; height: 2.4rem; color: #e6b800; }