/* ===== THEME VARIABLES ===== */
:root{
  --bg:#0b0d10;
  --text:#f5f7fa;
  --muted:#b7c0cc;
  --border:rgba(255,255,255,.1);
  --card:rgba(255,255,255,.04);
  --card2:rgba(255,255,255,.06);
  --link:#9bd0ff;
  --btn-bg:#fff;
  --btn-text:#0b0d10;
  --pill-bg:rgba(255,255,255,.06);
}
@media(prefers-color-scheme:light){
  :root[data-theme="auto"]{
    --bg:#fff;--text:#111;--muted:#555;--border:#eee;
    --card:#fafafa;--card2:#f4f4f5;--link:#0b66c3;
    --btn-bg:#111;--btn-text:#fff;--pill-bg:#fff;
  }
}
:root[data-theme="light"]{
  --bg:#fff;--text:#111;--muted:#555;--border:#eee;
  --card:#fafafa;--card2:#f4f4f5;--link:#0b66c3;
  --btn-bg:#111;--btn-text:#fff;--pill-bg:#fff;
}

/* ===== BASE ===== */
*{box-sizing:border-box}
body{
  margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6
}
a{color:var(--link)}
.page{padding-top:78px}

/* ===== NAV / BRAND ===== */
.nav{
  position:fixed;top:0;width:100%;
  background:rgba(12,14,18,.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  z-index:1000;
}
.nav-inner{
  max-width:1100px;margin:0 auto;
  padding:.8rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--text)
}
.brand-logo{
  width:340px;
  /*height:34px;*/
  display:block;object-fit:contain
}
.brand-name{font-weight:800;letter-spacing:.2px; display:none;}

/* ===== MENU ===== */
.menu a{
  margin-left:1rem;text-decoration:none;color:var(--text);opacity:.9
}
.menu a:hover{opacity:1;text-decoration:underline}

/* ===== CONTROLS ===== */
.nav-controls{display:flex;gap:.6rem;align-items:center}
.select{
  padding:.45rem .6rem;border-radius:10px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text)
}
.iconbtn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .75rem;border-radius:999px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text);cursor:pointer
}
.icon{display:none}
.iconlabel{font-weight:700;font-size:.9rem}

/* ===== HERO ===== */
.hero{padding:5rem 1.25rem 3.5rem;border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
h1{font-size:clamp(2.1rem,4vw,3rem);margin:0 0 .75rem}
.lede{color:var(--muted);max-width:70ch}

/* ===== CTA ===== */
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.25rem 0}
.btn{
  padding:.6rem 1rem;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-text);
  font-weight:700;text-decoration:none
}
.btn.ghost{background:var(--card);color:var(--text)}
.pill{
  display:inline-block;margin:.25rem .4rem 0 0;
  padding:.2rem .55rem;border-radius:999px;
  border:1px solid var(--border);background:var(--pill-bg);
  font-size:.85rem;color:var(--muted)
}

/* ===== SECTIONS ===== */
.section{max-width:900px;margin:0 auto;padding:3rem 1.25rem}
.card{
  border:1px solid var(--border);border-radius:16px;
  padding:1rem 1.25rem;background:var(--card2)
}
.muted{color:var(--muted);font-size:.9rem}

/* ===== FOOTER ===== */
.footer{
  border-top:1px solid var(--border);
  padding:2rem 1.25rem;text-align:center;color:var(--muted)
}

/* ===== MOBILE ===== */
@media(max-width:800px){
  .menu{display:none}
}

/* Light header override */
:root[data-theme="light"] .nav{
  background: rgba(255,255,255,.82);
}

/* Auto + system light header override */
@media (prefers-color-scheme: light){
  :root[data-theme="auto"] .nav{
    background: rgba(255,255,255,.82);
  }
}

:root[data-theme="light"] .menu a,
@media (prefers-color-scheme: light){
  :root[data-theme="auto"] .menu a{
    color: var(--text);
    opacity: .85;
  }
}