@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg-start:#0f1224;
  --bg-end:#1c1440;
  --coral:#ff8a65;
  --amber:#ffc069;
  --teal:#4fd1c5;
  --text-primary:#f6f4ff;
  --text-muted:#b7b2d4;
  --card-bg:rgba(255,255,255,0.045);
  --card-border:rgba(255,255,255,0.09);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(160deg,var(--bg-start),var(--bg-end) 70%);
  color:var(--text-primary);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,.wordmark{ font-family:'Fredoka',sans-serif; }

/* ---------- Layering ---------- */
main{
  position:relative;
  z-index:1;
}

.bg-gradient{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,138,101,0.10), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(79,209,197,0.10), transparent 55%);
  pointer-events:none;
}

#bgCanvas{
  position:fixed;
  inset:0;
  z-index:1;
  display:block;
  pointer-events:none;
}

.site-content{
  position:relative;
  z-index:10;
}

/* ---------- Nav ---------- */
nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 5vw;
  background:rgba(13,15,32,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.wordmark{
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:0.5px;
  background:linear-gradient(100deg,var(--coral),var(--amber) 55%,var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-decoration:none;
}

#buy_now_link{
  display:inline-block;
  padding:10px 22px;
  border-radius:999px;
  background:linear-gradient(100deg,var(--coral),var(--amber));
  color:#1a1224;
  font-weight:600;
  font-size:0.92rem;
  font-family:'Fredoka',sans-serif;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

#buy_now_link:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(255,160,100,0.35);
}

#buy_now_link:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

/* ---------- Hero ---------- */
.hero{
  padding:14vh 6vw 10vh;
  padding-top:calc(10vh + 60px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero h1{
  margin:0 0 26px;
  font-weight:600;
  line-height:1.08;
  font-size:clamp(2rem, 6vw, 5rem);
  letter-spacing:-0.5px;
}

.hero h1 span{
  display:block;
}

.hero h1 .accent{
  background:linear-gradient(100deg,var(--coral),var(--amber) 60%,var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero p{
  max-width:680px;
  margin:0 auto;
  font-size:1.15rem;
  line-height:1.65;
  color:var(--text-muted);
}

/* ---------- Cards ---------- */
.cards-section{
  padding:4vh 6vw 10vh;
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
  max-width:1200px;
  margin:0 auto;
}

.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:38px 34px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 16px 40px rgba(0,0,0,0.35);
}

.card .icon{
  width:44px;
  height:44px;
  border-radius:12px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  background:linear-gradient(135deg, rgba(255,138,101,0.25), rgba(79,209,197,0.25));
}

.card h3{
  margin:0 0 12px;
  font-size:1.15rem;
  font-weight:600;
  color:var(--text-primary);
}

.card p{
  margin:0;
  font-size:0.98rem;
  line-height:1.6;
  color:var(--text-muted);
}

/* ---------- CTA ---------- */
.cta{
  padding:8vh 6vw 14vh;
  text-align:center;
}

.cta .signal-status{
  display:inline-block;
  padding:6px 16px;
  border-radius:999px;
  border:1px solid rgba(79,209,197,0.4);
  color:var(--teal);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:1.5px;
  margin:0 0 24px;
  background:rgba(79,209,197,0.08);
}

.cta h2{
  font-size:clamp(1.6rem,4vw,2.6rem);
  font-weight:600;
  margin:0 0 30px;
}

#buy_now_bottom{
  display:inline-block;
  padding:18px 44px;
  border-radius:999px;
  background:linear-gradient(100deg,var(--coral),var(--amber));
  color:#1a1224;
  font-weight:700;
  font-size:1.1rem;
  font-family:'Fredoka',sans-serif;
  letter-spacing:0.5px;
  text-decoration:none;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

#buy_now_bottom:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 34px rgba(255,160,100,0.4);
}

#buy_now_bottom:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:4px;
}

.cta .signal-sub{
  color:var(--text-muted);
  font-size:0.95rem;
  margin-top:18px;
}

/* ---------- Footer (served via SSI, styled here for visibility) ---------- */
footer{
  position:relative;
  z-index:20;
  background:var(--bg-end);
  text-align:center;
  padding:26px 6vw 40px;
  color:var(--text-muted);
  font-size:0.82rem;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Mobile ---------- */
@media (max-width:480px){
  nav{ padding:14px 5vw; }
  .wordmark{ font-size:1.25rem; }
  #buy_now_link{ padding:9px 16px; font-size:0.82rem; }
  .hero{ padding-top:calc(10vh + 50px); padding-bottom:8vh; }
  .hero p{ font-size:1rem; }
  .cards-section{ padding:2vh 5vw 8vh; }
  .card{ padding:28px 24px; }
  .cta{ padding:6vh 5vw 10vh; }
  #buy_now_bottom{ padding:16px 32px; font-size:1rem; width:100%; }
}