:root{
  --bg:#0c0c0c;
  --surface:#161616;
  --text:#f0f0f0;
  --muted:#787878;
  --red:#f44336;
  --lime-soft:rgba(198,255,0,.07);
  --border:#262626;
  --radius:10px;
  --container:1080px;
  --ff:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --h1:clamp(2rem,1rem + 3.5vw,3.25rem);
  --lead:clamp(1rem,.875rem + .6vw,1.2rem)
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--ff);
  color:var(--text);
  background:
    radial-gradient(ellipse 80% 40% at 15% -5%,rgba(244,67,54,.07) 0%,transparent 55%),
    var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{width:min(100% - 2rem,var(--container));margin-inline:auto}

/* ── Header ── */
.site-header{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border)
}
.header-inner{display:flex;align-items:center;padding:.75rem 0}
.brand-logo{height:32px;width:auto}

/* ── Hero ── */
.hero{padding:clamp(3.5rem,7vw,7rem) 0}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:center
}
.hero-copy h1{
  font-size:var(--h1);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  margin-bottom:.875rem
}
.accent{color:var(--red)}
.accent-ok{color:#22c55e}
.lead{font-size:var(--lead);color:var(--muted);margin-bottom:2rem}

/* ── CTA ── */
.cta-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.625rem
}
.cta-group{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1.125rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  font-family:var(--ff);
  font-weight:600;
  font-size:.875rem;
  cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s;
  white-space:nowrap
}
.btn:hover{background:#1e1e1e;border-color:#383838;transform:translateY(-1px)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:#e53935;border-color:#e53935;transform:translateY(-1px)}

/* ── Status pill ── */
.status-row{margin-top:.875rem}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  padding:.25rem .625rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  border:1px solid
}
.pill::before{
  content:'';
  display:block;
  width:6px;height:6px;
  border-radius:50%;
  background:currentColor
}
.pill-ok{
  color:#22c55e;
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.08)
}

/* ── Hero media ── */
.hero-media{
  border-radius:14px;
  background:var(--lime-soft);
  border:1px solid var(--border);
  padding:2rem;
  overflow:hidden
}

/* ── Status page — centered layout ── */
.hero--status .hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.5rem
}
.status-display{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem
}
.status-orb{
  width:68px;height:68px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 14px rgba(34,197,94,.1),0 0 32px rgba(34,197,94,.2);
  margin-bottom:.5rem;
  animation:orb-pulse 3s ease-in-out infinite
}
@keyframes orb-pulse{
  0%,100%{box-shadow:0 0 0 14px rgba(34,197,94,.1),0 0 32px rgba(34,197,94,.2)}
  50%{box-shadow:0 0 0 22px rgba(34,197,94,.04),0 0 48px rgba(34,197,94,.1)}
}
.hero--status h1{margin-bottom:.25rem}
.hero--status .lead{margin-bottom:.75rem}

/* ── Notice ── */
.notice{padding-bottom:4rem}
.notice-inner{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.75rem 2rem
}
.notice-inner h2{
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  margin-bottom:1rem
}
.bullets{display:flex;flex-direction:column;gap:.5rem}
.bullets li{
  padding-left:1.125rem;
  position:relative;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5
}
.bullets li::before{
  content:'';
  position:absolute;
  left:0;top:.62em;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--red)
}

/* ── Footer ── */
.site-footer{border-top:1px solid var(--border);padding:1.25rem 0}
.footer-inner{display:grid;gap:.375rem}

/* ── Responsive ── */
@media(max-width:768px){
  .hero-inner{grid-template-columns:1fr}
  .hero-media{order:-1}
}
@media(max-width:480px){
  .cta-grid{grid-template-columns:1fr}
}

/* ── Light mode ── */
@media(prefers-color-scheme:light){
  :root{
    --bg:#f5f5f5;
    --surface:#fff;
    --text:#111;
    --muted:#666;
    --red:#c62828;
    --lime-soft:rgba(0,100,0,.04);
    --border:#e0e0e0
  }
  body{
    background:
      radial-gradient(ellipse 80% 40% at 15% -5%,rgba(198,40,40,.05) 0%,transparent 55%),
      var(--bg)
  }
  .site-header{background:rgba(245,245,245,.9)}
  .btn:hover{background:#efefef;border-color:#d0d0d0}
  .btn.primary{color:#fff}
  .btn.primary:hover{background:#b71c1c;border-color:#b71c1c}
}