:root{
  --bg0:#0b2b24;     /* deep green */
  --bg1:#0f3b33;     /* teal-green */
  --paper:#f7f4ef;   /* warm neutral */
  --ink:#f4fbf8;
  --soft:rgba(244,251,248,.78);
  --soft2:rgba(244,251,248,.60);
  --line:rgba(255,255,255,.12);

  --gold:#f1c46b;    /* warm gold accent */
  --teal:#27d7b7;
  --teal2:#2fb0ff;

  --shadow: 0 22px 70px rgba(0,0,0,.40);
  --shadow2: 0 16px 45px rgba(0,0,0,.33);
  --radius: 22px;
}

html, body { height: 100%; }
body{
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 650px at 15% 10%, rgba(39,215,183,.20), transparent 60%),
    radial-gradient(900px 650px at 85% 15%, rgba(47,176,255,.16), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--ink);
  overflow-x: hidden;
}

/* Accessibility / focus */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(39,215,183,.22), 0 0 0 1px rgba(39,215,183,.40);
  border-radius: 12px;
}

/* Skip link */
.skip-link{
  position:absolute;
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-170%);
  z-index: 9999;
}
.skip-link:focus{ transform: translateY(0); }

.border-white-10{ border-color: rgba(255,255,255,.10) !important; }
.text-soft{ color: var(--soft) !important; }
.font-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* Background art */
.bg-art{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* subtle paper texture feel */
.bg-paper{
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(241,196,107,.06), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(39,215,183,.05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 6px);
  opacity: .45;
  filter: blur(0.2px);
  mask-image: radial-gradient(circle at 50% 35%, black 35%, transparent 70%);
}

.blob{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(36px);
  opacity: .32;
  background: radial-gradient(circle at 30% 30%, rgba(39,215,183,.75), rgba(47,176,255,.30), transparent 65%);
  animation: floaty 18s ease-in-out infinite;
}
.blob-a{ left:-220px; top:120px; animation-duration: 20s; }
.blob-b{ right:-240px; top:40px; animation-duration: 24s; opacity:.28; }
.blob-c{ left:30%; bottom:-260px; animation-duration: 28s; opacity:.22; }

@keyframes floaty{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(20px,-24px,0) scale(1.06); }
}

/* Sparkle layer (very subtle) */
.sparkle-layer{
  position:absolute;
  inset:0;
  opacity: .65;
}

/* Header */
.header-glass{
  background: rgba(9, 32, 27, .65);
  backdrop-filter: blur(12px);
}

.logo-wrap{
  width: 46px; height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  display:grid;
  place-items:center;
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
}

.logo-mark{
  position: relative;
  width: 22px; height: 22px;
}
.leaf{
  position:absolute;
  width: 14px; height: 14px;
  left: 2px; top: 6px;
  border-radius: 14px 14px 14px 0;
  transform: rotate(-22deg);
  background: linear-gradient(135deg, rgba(39,215,183,.90), rgba(241,196,107,.70));
  box-shadow: 0 0 0 6px rgba(39,215,183,.10);
}
.leaf-2{
  left: 8px; top: 2px;
  transform: rotate(22deg);
  opacity: .85;
}

.brand-name{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.05;
}
.brand-tagline{
  font-size: 12.5px;
  color: var(--soft2);
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--soft);
  font-size: 12.5px;
  white-space: nowrap;
}

.nav-links a{
  color: var(--ink);
  text-decoration:none;
  font-weight: 600;
  opacity: .92;
}

/* Nav underline animation */
.nav-underline{
  position: relative;
  padding: 6px 2px;
}
.nav-underline::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
  border-radius: 99px;
  opacity: .9;
}
.nav-underline:hover::after{ transform: scaleX(1); }

/* Hero */
.hero{
  position: relative;
}
.py-lg-6{ padding-top: 5rem !important; padding-bottom: 5rem !important; }

.hero-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 260px at 25% 0%, rgba(39,215,183,.16), transparent 55%),
    radial-gradient(900px 260px at 75% 0%, rgba(241,196,107,.12), transparent 58%);
  pointer-events:none;
}

.hero-kicker{
  position: relative;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--soft);
  font-size: 13px;
}

.pulse-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(241,196,107,.40);
  animation: pulse 1.7s ease-in-out infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(241,196,107,.40); }
  70%{ box-shadow: 0 0 0 11px rgba(241,196,107,0); }
  100%{ box-shadow: 0 0 0 0 rgba(241,196,107,0); }
}

.text-shadow{
  text-shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* Signature heartbeat */
.heartbeat{
  height: 40px;
  opacity: .85;
}
.heartbeat-svg{
  width: 100%;
  height: 40px;
}
.heartbeat-path{
  fill: none;
  stroke: rgba(39,215,183,.85);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(39,215,183,.20));
}
@keyframes draw{
  0%{ stroke-dashoffset: 900; opacity: .35; }
  35%{ stroke-dashoffset: 0; opacity: .95; }
  70%{ opacity: .55; }
  100%{ stroke-dashoffset: -900; opacity: .35; }
}

/* Buttons */
.btn-glow{
  position: relative;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-glow:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 0 0 6px rgba(39,215,183,.12), 0 22px 60px rgba(0,0,0,.35);
}

.btn-primary{
  background: linear-gradient(135deg, var(--teal), rgba(241,196,107,.90)) !important;
  border: 0 !important;
  color: #073026 !important;
  font-weight: 800;
}

/* Countdown */
.countdown-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.icon-badge{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

.time-tile{
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.time-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(39,215,183,.35);
  box-shadow: 0 0 0 6px rgba(39,215,183,.08), 0 18px 50px rgba(0,0,0,.30);
}

.time-icon{
  width: 34px; height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
}

.time-value{
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}
.time-label{
  margin-top: 10px;
  color: var(--soft2);
  font-size: 12px;
  letter-spacing: .16px;
  text-transform: uppercase;
}

.countdown-hide{
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
  pointer-events: none;
  transition: all .45s ease;
}

.success-state{
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(39,215,183,.30);
  background: linear-gradient(135deg, rgba(39,215,183,.12), rgba(241,196,107,.10));
}
.success-icon{
  width: 40px; height: 40px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(39,215,183,.32);
  background: rgba(255,255,255,.05);
}

/* Impact section */
.section-head .chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--soft);
  font-weight: 700;
}

.stat-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.stat-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 260px at 30% 0%, rgba(241,196,107,.12), transparent 60%);
  opacity: .7;
  pointer-events:none;
}
.stat-card:hover{
  transform: translateY(-3px);
  border-color: rgba(241,196,107,.25);
  box-shadow: 0 0 0 6px rgba(241,196,107,.07), 0 22px 60px rgba(0,0,0,.33);
}
.stat-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 16px;
  position: relative;
}
.stat-icon{
  width: 42px; height: 42px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.stat-title{
  font-weight: 800;
  letter-spacing: .1px;
}
.stat-value{
  position: relative;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.6px;
  line-height: 1;
}
.stat-suffix{
  font-size: 18px;
  color: var(--gold);
  margin-left: 4px;
  font-weight: 900;
}
.stat-sub{
  position: relative;
  margin-top: 12px;
}

/* Signup */
.signup-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
}
.form-contrast{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--ink) !important;
}
.form-contrast::placeholder{ color: rgba(244,251,248,.48); }
.form-control:focus{
  border-color: rgba(39,215,183,.45) !important;
  box-shadow: 0 0 0 4px rgba(39,215,183,.18) !important;
}
.is-invalid{
  border-color: rgba(255, 120, 120, .60) !important;
  box-shadow: 0 0 0 4px rgba(255, 120, 120, .16) !important;
}

/* Footer */
.contact-link{
  color: var(--ink);
  text-decoration: none;
  opacity: .95;
}
.contact-link:hover{
  text-decoration: underline;
  text-decoration-color: rgba(241,196,107,.55);
  text-underline-offset: 4px;
}

.social-btn{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  color: var(--ink);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.social-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(39,215,183,.35);
  box-shadow: 0 0 0 6px rgba(39,215,183,.08), 0 18px 50px rgba(0,0,0,.28);
}

.footer-line{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}