/* ========== THEME ========== */
:root{
  --bg:#fff; --bg-elev:#fffdfa; --card:#fff;
  --text:#0f172a; --muted:#475569;
  --brand:#16a34a; --brand-2:#22c55e; --accent:#f59e0b; --sky:#0ea5e9;
  --ring:rgba(14,165,233,.35); --shadow:0 10px 30px rgba(2,6,23,.08);
  --radius:16px;
}

/* ========== RESET & BASICS ========== */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  -webkit-font-smoothing:antialiased }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
button{ font:inherit }
.link{ color:var(--sky); text-decoration:underline; text-underline-offset:3px }
.brand-underline{ background:linear-gradient(120deg, rgba(34,197,94,.35), rgba(14,165,233,.35)); border-radius:10px; padding:0 .25rem }

/* ========== LAYOUT HELPERS ========== */
.container{ width:min(1120px,92vw); margin-inline:auto }
.section{ padding:72px 0 }

/* ========== HEADER ========== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(240,249,255,.9);
  border-bottom:1px solid rgba(2,6,23,.06);
  backdrop-filter:saturate(140%) blur(8px);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px 0; flex-wrap:nowrap;
}
.brand{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none }
.brand-logo{ width:140px; height:auto; display:block } /* adjust width here */
.nav-links{ display:flex; gap:24px }
.nav-links a{ white-space:nowrap; font-weight:700; opacity:.95 }

@media (max-width: 700px){
  .header-row{ flex-wrap:wrap; gap:12px }
  .nav-links{ width:100%; gap:16px }
  .brand-logo{ width:120px }
}

/* ========== BUTTONS ========== */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px;
  border-radius:14px; border:1px solid rgba(2,6,23,.08);
  background:#fff; color:var(--text); cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
  box-shadow:var(--shadow) }
.btn:hover{ transform:translateY(-1px) }
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }
.btn.primary-bright{ background:linear-gradient(180deg, rgba(34,197,94,.28), rgba(34,197,94,.16)); border-color:rgba(34,197,94,.45) }
.btn.outline{ background:#fff; border-color:rgba(14,165,233,.4) }
.btn.ghost{ background:#fff }

/* ========== HERO ========== */
.hero-bright{
  position:relative; overflow:hidden; padding:88px 0 92px; background:
    radial-gradient(600px 260px at 15% -10%, rgba(34,197,94,.18), transparent 70%),
    radial-gradient(700px 300px at 100% 10%, rgba(14,165,233,.18), transparent 70%),
    radial-gradient(600px 240px at 50% 120%, rgba(245,158,11,.18), transparent 70%)
}
.confetti{ position:absolute; inset:-10% -10% -10% -10%;
  background-image:
    radial-gradient(4px 4px at 10% 20%, rgba(14,165,233,.35) 50%, transparent 51%),
    radial-gradient(4px 4px at 80% 30%, rgba(34,197,94,.35) 50%, transparent 51%),
    radial-gradient(4px 4px at 30% 70%, rgba(245,158,11,.35) 50%, transparent 51%);
  background-repeat:no-repeat; animation:float 12s linear infinite; opacity:.6; pointer-events:none }
@keyframes float{ 50%{ transform:translateY(8px) } }

.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center }
.eyebrow{ color:var(--sky); font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem }
.headline{ font-size:clamp(2rem, 3vw + 1rem, 3.5rem); line-height:1.1; margin:14px 0 }
.dark{ color:var(--text) } .dark-muted{ color:var(--muted) }
.sub{ font-size:1.1rem; max-width:60ch }
.hero-ctas{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px }
.stat{ padding:14px; border-radius:14px; background:#fff; border:1px solid rgba(2,6,23,.06); box-shadow:var(--shadow) }
.stat strong{ font-size:1.3rem }

.hero-card{ background:#fff; border:1px solid rgba(2,6,23,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow) }
.mini-screen{ aspect-ratio:16/10; border-radius:16px; background:linear-gradient(135deg, #ffffff, #eef6ff); border:1px solid rgba(2,6,23,.06); position:relative; overflow:hidden }
.mini-screen::after{ content:""; position:absolute; inset:0; background:
  radial-gradient(240px 120px at 65% 70%, rgba(14,165,233,.25), transparent 70%),
  radial-gradient(320px 140px at 30% 35%, rgba(34,197,94,.25), transparent 72%) }

@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr }
  .stat-row{ grid-template-columns:1fr 1fr }
}

/* ========== MARQUEE ========== */
.light-marquee{ border-block:1px solid rgba(2,6,23,.06); background:#fff }
.marquee-track{ display:flex; gap:36px; padding:12px 0; animation:scroll 28s linear infinite }
.chip{ font-size:.95rem; color:var(--muted); background:#fff; border:1px solid rgba(2,6,23,.08); padding:8px 12px; border-radius:12px }
@keyframes scroll{ to{ transform:translateX(-50%) } }

/* ========== FEATURES ========== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.card{ background:var(--card); border:1px solid rgba(2,6,23,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow) }
.card h3{ margin:.2rem 0 .4rem }
.kpi{ font-weight:800; font-size:1.1rem }
.text-brand{ color:var(--brand) } /* utility for green text */

@media (max-width:960px){
  .grid-3{ grid-template-columns:1fr }
}

/* ========== SCHEDULE ========== */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:14px }
.input, select{ background:#fff; border:1px solid rgba(2,6,23,.12); color:var(--text); padding:12px 14px; border-radius:12px; outline:none; width:100% }
.input:focus, select:focus{ border-color:var(--sky); box-shadow:0 0 0 4px rgba(14,165,233,.15) }
.toolbar > *{ flex:1 1 240px }

.schedule{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.event{ display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:14px; border:1px solid rgba(2,6,23,.08); background:#fff; box-shadow:var(--shadow) }
.event .meta{ color:var(--muted); font-size:.95rem }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid rgba(2,6,23,.08); border-radius:999px; background:#fff; font-size:.9rem }

@media (max-width:960px){
  .schedule{ grid-template-columns:1fr }
}

/* ========== FAQ ========== */
details{ background:var(--card); border:1px solid rgba(2,6,23,.1); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow) }
details + details{ margin-top:10px }
summary{ cursor:pointer; font-weight:800 }

/* ========== REQUEST FORM ========== */
.request-bright{ background:linear-gradient(180deg, #ffffff, #f8fbff) }
form{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
form .full{ grid-column:1 / -1 }
label{ display:block; font-size:.95rem; color:var(--muted); margin-bottom:6px }
.note{ color:var(--muted); font-size:.95rem }
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }

/* ========== FOOTER & TOAST ========== */
.light-footer{ padding:30px 0; color:var(--muted); border-top:1px solid rgba(2,6,23,.06); background:#fff }
.footer{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }
.mr{ margin-right:10px }

.toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:#fff; border:1px solid rgba(2,6,23,.12); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s ease }
.toast.show{ opacity:1 }

/* ========== A11Y ========== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }