:root{
  --bg:#0f1115;
  --card:#161a21;
  --muted:#9aa3af;
  --text:#e5e7eb;
  --accent:#ff4d6d;
  --accent-2:#ffd166;
  --ok:#22c55e;
  --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  color:var(--text);
  background: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:1.25rem}
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(15,17,21,.7); backdrop-filter: blur(8px);
  border-bottom:1px solid #1f2430;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.125rem}
.brand img{width:28px;height:28px}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{padding:.5rem .75rem;border-radius:.5rem}
.menu a.cta{background:var(--accent); color:white; font-weight:700}
.burger{display:none; background:none;border:0;color:var(--text);font-size:1.5rem}
@media (max-width: 780px){
  .menu{display:none;flex-direction:column;align-items:flex-start;background:var(--card);padding:1rem;border:1px solid #242b37;border-radius:.75rem;margin-top:.75rem}
  .menu.show{display:flex}
  .burger{display:block}
}
.hero{
  background: url('../img/hero.svg') center/cover no-repeat, #20242a;
  padding:6rem 1.25rem 5rem;
  text-align:center;
}
.hero h1{font-size: clamp(2rem, 6vw, 3.25rem); margin:0 0 .5rem}
.hero p{color:var(--muted);font-size: clamp(1rem, 2.5vw, 1.25rem); margin:0 auto 1.25rem; max-width: 52ch}
.hero .actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:.66rem;border:1px solid #2a3140}
.btn.primary{background:var(--accent);color:white;border-color:transparent}
.btn.secondary{background:transparent;color:var(--text)}
.grid{display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr)}
.card{background:var(--card); border:1px solid #232a37; padding:1rem; border-radius:.85rem}
.section{padding:3rem 0}
.section h2{font-size: clamp(1.5rem, 4.5vw, 2rem); margin:0 0 1rem}
.features .card{grid-column: span 3}
@media (max-width: 1100px){ .features .card{grid-column: span 6} }
@media (max-width: 640px){ .features .card{grid-column: span 12} }
.kicker{letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; color:var(--accent-2)}
.footer{border-top:1px solid #232a37; background:#0d0f13; color:var(--muted)}
.footer .cols{display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr)}
.footer .col{grid-column: span 3}
.footer .copy{margin-top:1rem; text-align:center; font-size:.9rem}
@media (max-width: 900px){ .footer .col{grid-column: span 6} }
@media (max-width: 560px){ .footer .col{grid-column: span 12} }
.list{display:grid; gap:.75rem}
.badge{display:inline-block;padding:.25rem .5rem;border-radius:.5rem;background:#212735;border:1px solid #2a3242;color:#cbd5e1;font-size:.8rem}
.table{width:100%; border-collapse: collapse; margin-top: .5rem}
.table th,.table td{border:1px solid #2a3242; padding:.5rem; text-align:left}
.notice{font-size:.95rem;color:var(--muted)}
.hero-mini{padding:3rem 1.25rem 2rem; text-align:center; background:#161a21;border-bottom:1px solid #232a37}
.breadcrumbs{font-size:.9rem;color:var(--muted)}
label{display:block;margin:.5rem 0 .25rem}
input,textarea{width:100%;padding:.75rem;border-radius:.5rem;border:1px solid #2a3242;background:#0c0e13;color:#e5e7eb}
input:focus,textarea:focus{outline:2px solid var(--accent); border-color: transparent}
form .row{display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr)}
form .row > *{grid-column: span 6}
@media (max-width: 640px){ form .row > *{grid-column: span 12} }
.alert{padding:.75rem 1rem; background:#15241b; border:1px solid #1d3a2b; border-radius:.66rem; color:#86efac; margin:.75rem 0}