/* ========== Theme tokens ========== */
:root{
  --bg:#0b0d10;
  --card:#0f1216;
  --muted:#9aa4b2;
  --text:#e8ecf1;
  --brand:#4ea8ff;
  --brand-2:#64fbd2;
  --ring: 0 0 0 3px rgba(100,251,210,.25);
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* layout */
  --container-w:1100px;
  --gutter:16px;          /* base mobile padding */
  --gutter-md:20px;       /* >= 680px */
}

/* smooth theme flips */
html, body { transition: background-color .25s ease, color .25s ease; }
:root { transition: --bg .25s ease, --card .25s ease, --text .25s ease, --muted .25s ease, --shadow .25s ease; }

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(100,251,210,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(78,168,255,.15), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
}

/* links */
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}

/* container — prevents edge-to-edge on phones */
.container{
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width:680px){
  .container{ padding-inline: var(--gutter-md); }
}

/* skip link */
.skip-link {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  left:12px; top:12px; width:auto; height:auto; padding:8px 12px;
  background:var(--card); color:var(--text);
  border-radius:10px; border:1px solid rgba(255,255,255,.15);
  z-index:9999;
}

/* ========== Nav / Header ========== */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding-block: 12px;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand-text{ display:flex; flex-direction:column; min-width:0; }
.brand-title{ font-weight:800; letter-spacing:.5px; white-space:nowrap; }
.tag{ font-size:.8rem; color:var(--muted); }

/* Bigger, responsive logo */
.logo{
  display:block;
  height: clamp(44px, 6.2vw, 64px);
  width: auto;
}

/* actions */
.actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.toggle{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.15);
  background:transparent; color:var(--text);
  padding:10px 14px; border-radius:999px; cursor:pointer;
  min-height:44px;
}
.toggle .toggle-text{font-weight:600}
.toggle #themeIcon{font-size:14px; line-height:1}

.nav a.btn{
  padding:10px 14px; border-radius:12px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#081018; font-weight:700; box-shadow:var(--shadow);
  min-height:44px; align-items:center; display:inline-flex;
}

/* ========== Hero ========== */
.hero{ position:relative; isolation:isolate; }
.pulse{
  position:absolute; inset:-200px -200px auto auto; width:420px; height:420px;
  background:radial-gradient(closest-side, rgba(100,251,210,.18), transparent 70%);
  filter: blur(35px); opacity:.6; pointer-events:none; z-index:-1;
}

/* Mobile-first: stack hero columns. */
.hero-wrap{
  display:grid; gap:18px;
  padding-block: 22px;
}
.hero h1{
  font-size:clamp(1.8rem, 4.2vw + 1rem, 3.2rem);
  line-height:1.1; margin:.2rem 0 1rem; font-weight:800;
}
.hero p.lede{ color:var(--muted); font-size:1.05rem; margin:0 0 1.2rem }
.cta{ display:flex; gap:12px; flex-wrap:wrap }
.cta .btn{
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  padding:12px 16px; border-radius:12px; font-weight:700;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#081018; box-shadow:var(--shadow);
  min-height:44px;
}
.cta .ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.15) }

/* Two-column only on wider screens */
@media (min-width:900px){
  .hero-wrap{
    grid-template-columns: 1.1fr .9fr;
    gap:28px;
    padding-block: 34px 10px;
  }
}

/* ========== Cards / Grid ========== */
.grid{
  display:grid; gap:18px;
  margin-block: 22px;
}
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.card h3{ margin:0 0 8px; font-size:1.15rem }
.card p{ margin:0; color:var(--muted) }
.chip{
  display:inline-block; font-size:.72rem; letter-spacing:.3px; padding:6px 10px; border-radius:999px;
  background:rgba(78,168,255,.12); color:var(--brand); border:1px solid rgba(78,168,255,.35);
  margin-bottom:10px
}

/* widen grid as space allows */
@media (min-width:680px){ .grid{ grid-template-columns: repeat(2, 1fr); gap:20px } }
@media (min-width:1000px){ .grid{ grid-template-columns: repeat(3, 1fr); gap:22px } }

/* ========== Featured ========== */
.featured{ margin:10px 0 34px; }
.featured .inner{
  display:grid; gap:18px;
}
.featured .panel{
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
}
.featured h2{ margin:0 0 8px }
.meta{ color:var(--muted); font-size:.9rem }

/* 2-column featured at >=900px */
@media (min-width:900px){
  .featured .inner{ grid-template-columns: 1fr 1fr; gap:22px }
}

/* ========== Forms / Inputs ========== */
.btn-row{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap }
.input{
  flex:1; min-width:200px; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--text); outline:none;
  min-height:44px;
}
.input:focus{ box-shadow:var(--ring) }
.btn, a.btn{
  padding:12px 16px; border-radius:12px; font-weight:700; background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#081018; box-shadow:var(--shadow); display:inline-flex; align-items:center;
}
.btn.ghost, a.btn.ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.15) }

/* ========== Footer ========== */
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block: 20px; }
footer .small{ font-size:.92rem; color:var(--muted) }

/* ========== Micro-animations ========== */
.fade-in{ opacity:0; transform:translateY(6px); animation:fade .7s ease-out forwards }
.fade-in:nth-child(2){ animation-delay:.08s }
.fade-in:nth-child(3){ animation-delay:.14s }
@keyframes fade{ to{ opacity:1; transform:translateY(0) } }

/* ========== Utilities ========== */
.h-full{ height:100% }
.no-margin-top{ margin-top:0 }

/* Media helpers: ensure images never overflow columns */
img{ max-width:100%; height:auto; display:block }

/* Tweak typography on very small phones */
@media (max-width:360px){
  .brand-title{ font-size:0.98rem }
  .tag{ font-size:0.75rem }
}