:root{
  --bg:#0b0f14;
  --bg-soft:#10151d;
  --card:#0f1721;
  --ink:#e6edf6;
  --muted:#9fb0c3;
  --brand:#60a5fa;
  --accent:#34d399;
  --warn:#f59e0b;
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --max:1120px;
}

/* Reset + base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(96,165,250,.18), transparent 60%) no-repeat,
    var(--bg);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:24px}

main{flex:1}
.hero{padding:56px 0}

/* Grid */
.grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
@media(max-width:900px){
  .col-6,
  .col-4{grid-column:span 12}
}

/* Card / UI elements */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.card h2{margin:0 0 8px 0; font-size:22px}
.card p{margin:0 0 16px 0; color:var(--muted)}
.cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  background:var(--brand);
  color:#081018;
  font-weight:600;
}
.cta:hover{filter:brightness(1.04)}

.input{
  display:flex;
  gap:10px;
  align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:10px 12px;
  border-radius:12px;
}
.input input,
.input select{
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color:var(--ink);
  font-size:16px;
}
.helper{color:var(--muted); font-size:14px}
.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  background:rgba(255,255,255,.08);
  padding:2px 6px;
  border-radius:6px;
  font-size:13px;
}
.badge{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:4px 8px;
  background:rgba(255,255,255,.08);
  border-radius:8px;
  color:var(--muted);
  font-size:13px;
}

.success{color:var(--accent)}
.warn{color:var(--warn)}
hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  margin:18px 0;
}

/* Tables (for FAQ) */
table{width:100%; border-collapse:collapse; margin:12px 0 0}
th,td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
}
code{
  background:rgba(255,255,255,.08);
  padding:2px 6px;
  border-radius:6px;
}

/* Light theme */
:root.light{
  --bg:#f7fafc;
  --bg-soft:#ffffff;
  --card:#ffffff;
  --ink:#0b0f14;
  --muted:#445367;
}
body.light{
  background:linear-gradient(180deg,#ffffff, #f4f7fb);
}
.light .menu a{color:#ffffff}
.light .cta{color:white}

/* ========================= */
/* HEADER, NAV & HAMBURGER   */
/* ========================= */

.header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter:blur(8px);
  background:rgba(3,7,18,0.88);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* header container */
.container.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
}

/* Brand / logo */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.brand-logo{
  display:block;
  width:220px;
  height:48px;
  object-fit:contain;
}
.brand-logo--dark{display:none}

/* Light/dark switching for logos (if you add .dark on html/body) */
html.dark .brand-logo--light,
body.dark .brand-logo--light{display:none}
html.dark .brand-logo--dark,
body.dark .brand-logo--dark{display:block}

@media (prefers-color-scheme: dark){
  .brand-logo--light{display:none}
  .brand-logo--dark{display:block}
}

/* Desktop menu */
.menu{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.menu a{
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  white-space:nowrap;
  color:var(--ink);
  opacity:.9;
}
.menu a.active{
  background:rgba(15,23,42,0.9);
}
.menu a:hover{
  opacity:0.9;
  background:rgba(255,255,255,.06);
}

/* Theme toggle button */
.theme-toggle{
  border:1px solid rgba(255,255,255,0.12);
  background:transparent;
  color:inherit;
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
}

/* Hamburger (mobile) */
.hamburger{
  display:none;
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(15,23,42,0.95);
  color:inherit;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.hamburger span{
  display:block;
  width:20px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  margin:3px 0;
}

/* Mobile nav behaviour */
@media (max-width:900px){
  .hamburger{display:inline-flex;}

  /* hide menu inline by default on mobile */
  .menu{display:none;}

  .header[data-open="true"] .menu{
    position:absolute;
    right:16px;
    top:calc(100% + 8px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    min-width:230px;
    padding:10px;
    border-radius:12px;
    background:rgba(15,23,42,0.98);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:0 20px 40px rgba(0,0,0,0.35);
  }

  .header[data-open="true"] .menu a,
  .header[data-open="true"] .menu .theme-toggle{
    display:block;
    width:100%;
    text-align:left;
    padding:10px 12px;
    border-radius:8px;
  }
  .header[data-open="true"] .menu a:hover{
    background:rgba(255,255,255,0.08);
  }

  .brand-logo{width:190px;}
}

/* Focus styles */
.menu a:focus,
.theme-toggle:focus,
.hamburger:focus,
.logo:focus{
  outline:3px solid rgba(96,165,250,0.55);
  outline-offset:2px;
  border-radius:10px;
}

/* ========== */
/*   FOOTER   */
/* ========== */

.footer{
  border-top:1px solid rgba(148,163,184,0.25);
  background:var(--bg-soft);
  margin-top:32px;
  color:var(--muted);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:16px 16px 24px;
  font-size:.85rem;
}
.footer-brand small{
  display:block;
  margin-top:6px;
  max-width:420px;
  line-height:1.4;
  color:#9ca3af;
}

/* generic footer small (for simple layouts) */
.footer small{
  display:block;
  margin-top:6px;
}

.footer-nav{}
.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
}
.footer-links a{
  text-decoration:none;
  font-size:.85rem;
}

@media (max-width:768px){
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}