:root{
  --bg:#0b0f14;
  --panel:#141a22;
  --muted:#9fb0c3;
  --text:#e6edf5;
  --accent:#7dd3fc;
  --accent2:#a78bfa;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #142133 0%, transparent 50%), radial-gradient(1200px 800px at 110% -10%, #1b153a 0%, transparent 50%), var(--bg);
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,20,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.3px}
.badge{padding:.15rem .5rem;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#00131b; font-weight:800; font-size:.8rem}
.menu a{margin-left:18px;color:var(--muted)}
.hero{
  padding:80px 0;
  display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;
}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#0a1016;font-weight:800;border:none;border-radius:12px;padding:12px 18px;cursor:pointer
}
.btn:hover{filter:brightness(1.05)}
.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.15)}
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.16)}
.card h3{margin-top:0}
.kicker{color:var(--muted);font-size:.9rem;letter-spacing:.3px}
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  padding:40px 0;
}
.notice{font-size:.9rem;color:var(--muted)}
.tag{font-size:.75rem;border:1px solid rgba(255,255,255,.18);padding:.15rem .5rem;border-radius:8px;color:var(--muted)}
.section-title{margin:8px 0 16px 0}
.table{width:100%;border-collapse:collapse}
.table td,.table th{border-bottom:1px solid rgba(255,255,255,.1);padding:8px 6px;text-align:left}
.small{font-size:.92rem;color:var(--muted)}
/* Consent modal */
#consent-modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000;
}
#consent-modal .overlay{position:absolute; inset:0; background:rgba(0,0,0,.65);}
#consent-modal .modal{
  position:relative; max-width:720px; width:92%;
  background:var(--panel); border:1px solid rgba(255,255,255,.15);
  border-radius:16px; box-shadow:var(--shadow); padding:22px;
}
.switch{display:flex;align-items:center;gap:12px;margin:8px 0}
.switch input{transform:scale(1.2)}
.badge-cmp{background:#ffe600;color:#111;font-weight:800;border-radius:8px;padding:.1rem .45rem; font-size:.75rem}
code.inline{background:rgba(255,255,255,.06);padding:.1rem .25rem;border-radius:6px}

/* Hero visual */
.hero-visual img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);display:block}


/* --- Planner tool styles --- */
.input, .select {
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); color:var(--text); outline:none;
}
.input:focus, .select:focus { border-color: rgba(255,255,255,.25); }
.label{ font-size:.85rem; color:var(--muted); margin-bottom:6px; display:block }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:900px){ .form-grid{ grid-template-columns:1fr; } }
.btn-full{ width:100%; justify-content:center }
.result{ background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:16px; }
.result h4{ margin:6px 0 10px 0 }
.result ul{ margin:0 0 6px 18px }
.result .week{ margin-bottom:10px }
.badge-mini{ font-size:.7rem; padding:.05rem .4rem; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:var(--muted); }
    

/* Accessibility: focus styles & skip link */
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;background:var(--panel);padding:8px 12px;border-radius:8px;z-index:9999;border:1px solid rgba(255,255,255,.2)}

/* Small perf helpers */
img[loading="lazy"]{content-visibility:auto}