/* Safety: keep mobile nav hidden unless JS unhides it */
.mobile-nav { display: none !important; }


/* ===================================================================
   Gradie – Vanilla CSS theme (Tailwind remix without Tailwind)
   Font: Inter (include via <link> in your HTML head)
   Palette: Oceanic brand (cyan), warm alt backgrounds, ink text
   =================================================================== */

/* ----------------------- CSS Variables (Theme) ---------------------- */
:root{
  /* Brand cyan scale */
  --brand-50:#ECFEFF;
  --brand-100:#CFFAFE;
  --brand-200:#A5F3FC;
  --brand-300:#67E8F9;
  --brand-400:#22D3EE;
  --brand-500:#06B6D4;
  --brand-600:#0891B2;
  --brand-700:#0E7490;
  --brand-800:#155E75;
  --brand-900:#164E63;

  /* Accent */
  --accent-500:#F59E0B;

  /* Neutral / text */
  --ink:#0b1220;
  --slate-700:#334155;
  --slate-600:#475569;
  --slate-500:#64748B;
  --slate-400:#94A3B8;
  --slate-300:#CBD5E1;
  --slate-200:#E2E8F0;
  --slate-100:#F1F5F9;

  /* Warm alt section */
  --warm-100:#FDF7F4;

  /* Effects & radii */
  --shadow-soft:0 10px 30px rgba(2,6,23,.08);
  --shadow-ring:0 0 0 6px rgba(6,182,212,.15);
  --radius-lg:1rem;
  --radius-xl:1.25rem;
  --radius-2xl:1.5rem;

  /* Layout */
  --container:1200px;
}

/* ---------------------------- Base Reset --------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a.underline{ text-decoration:underline; text-underline-offset:4px; }
button{font:inherit}
:focus-visible{outline:none; box-shadow:var(--shadow-ring)}

/* --------------------------- Layout Helpers ------------------------ */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:1.25rem;
}
.section{padding-block:3.5rem}
.section-lg{padding-block:5rem}
.section-alt{background:var(--warm-100)}

.grid{
  display:grid; gap:1.25rem;
}
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

@media (max-width: 900px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}

/* ----------------------------- Typography -------------------------- */
.h1{font-weight:800; line-height:1.1; font-size:clamp(2rem, 3.2vw + 1rem, 3.5rem); letter-spacing:-0.02em;}
.h2{font-weight:800; line-height:1.15; font-size:clamp(1.75rem, 1.5vw + 1.2rem, 2.5rem);}
.h3{font-weight:700; font-size:1.25rem;}

.lead{font-size:1.125rem; color:var(--slate-700); max-width:48ch}
.muted{color:var(--slate-600)}

.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .75rem; border-radius:999px;
  font-weight:700; font-size:.9rem;
  background:color-mix(in srgb, var(--brand-600) 12%, transparent);
  color:var(--brand-700);
}

.code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}

/* ------------------------------ Header ----------------------------- */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(2,6,23,.1);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 0;
}
.nav{ display:flex; align-items:center; gap:1.5rem; font-weight:700; font-size:.98rem; }
.nav a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* Mobile menu */
.menu-btn{ display:none; border:1px solid rgba(2,6,23,.1); padding:.5rem .75rem; border-radius:.75rem; background:#fff; }
@media (max-width: 900px){
  .nav{ display:none; }
  .menu-btn{ display:inline-block; }
  .mobile-nav{ display:none; border-top:1px solid rgba(2,6,23,.1); }
  .mobile-nav.open{ display:block; }
  .mobile-nav a{ display:block; padding:.75rem 0; font-weight:600; }
}

/* ------------------------------- Hero ------------------------------ */
.hero{
  position:relative; overflow:hidden;
  padding-block:4rem;
  background:
    radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--accent-500) 12%, transparent), transparent 60%),
    radial-gradient(1000px 450px at 10% -10%, color-mix(in srgb, var(--brand-600) 16%, transparent), transparent 60%);
}
.hero .cta{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.75rem; }

/* ------------------------------- Cards ----------------------------- */
.card{
  background:#fff; border:1px solid var(--slate-200);
  border-radius:var(--radius-xl); padding:1.25rem;
  box-shadow:var(--shadow-soft);
}

/* ------------------------------- Buttons --------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-xl);
  font-weight:700; padding:.75rem 1.25rem;
  transition:.2s ease; box-shadow:var(--shadow-soft);
  border:2px solid transparent;
}
.btn:disabled{opacity:.6; cursor:not-allowed;}

.btn-primary{ background:var(--brand-600); color:#fff; }
.btn-primary:hover{ background:var(--brand-700); }

.btn-outline{
  background:transparent; border-color:var(--brand-600); color:var(--brand-700);
}
.btn-outline:hover{ background:var(--brand-600); color:#fff; }

.btn-ghost{
  background:transparent; color:var(--ink); box-shadow:none;
}
.btn-ghost:hover{ background:var(--warm-100); }

/* ------------------------------- Forms ----------------------------- */
.input, .select, .textarea{
  width:100%; background:#fff; color:var(--ink);
  border:1px solid var(--slate-200); border-radius:1rem;
  padding:.6rem .9rem; box-shadow:var(--shadow-soft);
}
.input::placeholder, .textarea::placeholder{ color:var(--slate-500); }
.textarea{ min-height:120px; resize:vertical; }

/* ------------------------------ Sections --------------------------- */
.band-alt{ background:var(--warm-100); }
.stat{
  text-align:center; background:#fff; border:1px solid var(--slate-200);
  border-radius:var(--radius-xl); padding:1.25rem; box-shadow:var(--shadow-soft);
}
.stat .num{ font-size:2.25rem; font-weight:800; color:var(--brand-700); }
.stat .label{ color:var(--slate-600); margin-top:.25rem; }

/* ------------------------------- Footer ---------------------------- */
.footer{
  border-top:1px solid rgba(2,6,23,.1);
  background:var(--warm-100);
}
.footer-inner{ display:grid; gap:2rem; grid-template-columns:repeat(4, minmax(0,1fr)); padding:2.5rem 0; }
.footer h4{ font-weight:800; margin:0 0 .75rem; }
.footer p, .footer a{ color:var(--slate-700); }
.footer a:hover{ text-decoration:underline; }

@media (max-width: 900px){
  .footer-inner{ grid-template-columns:1fr; }
}

/* ------------------------------ Banners ---------------------------- */
.banner{
  width:100%; text-align:center; font-weight:700; font-size:.95rem; color:var(--brand-800);
  background:var(--warm-100); padding:.6rem 1rem;
}

/* ------------------------------ Components ------------------------- */
.cta-card{
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-xl);
  padding:2rem; box-shadow:var(--shadow-soft);
}
.icon-pill{
  display:grid; place-items:center; height:40px; width:40px;
  background:var(--brand-100); color:var(--brand-700); border-radius:1rem; font-weight:800;
}

/* ------------------------------ Spacing utils ---------------------- */
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}

/* ------------------------------ Utility colors --------------------- */
.text-slate-700{ color:var(--slate-700) }
.text-slate-600{ color:var(--slate-600) }
.text-slate-500{ color:var(--slate-500) }
.text-brand{ color:var(--brand-700) }
.bg-brand-50{ background:var(--brand-50) }
.bg-brand-100{ background:var(--brand-100) }

/* ------------------------------ Example hero gradient helper ------- */
.hero-grad{
  background:
    radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--accent-500) 12%, transparent), transparent 60%),
    radial-gradient(1000px 450px at 10% -10%, color-mix(in srgb, var(--brand-600) 16%, transparent), transparent 60%);
}

/* ------------------------------ Collapsible (details) -------------- */
details{
  border:1px solid var(--slate-200); border-radius:var(--radius-xl);
  background:var(--warm-100); padding:1rem 1.25rem;
}
details + details{ margin-top:1rem; }
summary{ cursor:pointer; font-weight:700; }
details[open]{ background: #fff; }

/* ------------------------------ Header logo sizing ----------------- */
/* Text logo using Baskerville or close fallback */
.logo-text{
  font-family: Baskerville, "Libre Baskerville", "Times New Roman", Times, serif;
  font-weight: 500; /* approximates Medium */
  font-size: clamp(3.0rem, 1.05rem + 1vw, 2rem);
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ink);
  display: inline-block;
}
.logo{ height:45px; width:auto; }
@media (max-width: 900px){ .logo{ height:36px; } }

/* ------------------------------ Helper: sr-only -------------------- */
.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;
}


/* Collapsible slide-down */
.collapse { overflow:hidden; max-height:0; opacity:0; transform:translateY(-4px);
  transition:max-height .35s ease, opacity .25s ease, transform .35s ease; }
.collapse.open { opacity:1; transform:translateY(0); }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { .collapse, .collapse.open { transition:none; } }