/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
:root{
  --bg:#0b1220; --panel:#0f172a; --txt:#e5e7eb; --muted:#9aa4b2;
  --accent:#60a5fa; --ring:#3b82f6; --border:#1f2937;
  --glow:0 10px 40px rgba(59,130,246,.25);
  --mx:0; --my:0;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7fafc; --panel:#ffffff; --txt:#0f172a; --muted:#475569; --border:#e5e7eb; --glow:0 14px 40px rgba(37,99,235,.18); }
}
body{
  margin:0; font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--txt); background:var(--bg); overflow-x:hidden;
}

/* ---------- Links: no underlines ---------- */
a{color:var(--txt); text-decoration:none; outline:none}
a:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 60%, transparent); border-radius:12px}

/* ---------- Parallax background ---------- */
.scene{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 900px at 110% 10%, rgba(14,165,233,.14), transparent 60%),
    radial-gradient(700px 700px at 50% 120%, rgba(124,58,237,.12), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #000 12%), var(--bg));
}
.layer{
  position:absolute; inset:-15vmax; filter:blur(2px); opacity:.35;
  background-image: radial-gradient(closest-side, rgba(96,165,250,.28), transparent 60%);
  background-size: 28vmax 28vmax, 22vmax 22vmax, 18vmax 18vmax;
  background-repeat:no-repeat;
  background-position: 10% 20%, 70% 10%, 85% 70%;
  transform: translate3d(calc(var(--mx)*14px), calc(var(--my)*10px), 0) rotate(0.001deg);
  transition: transform .12s linear;
}
.stars{
  position:absolute; inset:0; opacity:.18;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent 60%),
    radial-gradient(1px 1px at 80% 40%, #fff, transparent 60%),
    radial-gradient(1px 1px at 60% 80%, #fff, transparent 60%),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent 60%),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent 60%);
  background-repeat:repeat;
  background-size: 400px 400px;
  transform: translate3d(calc(var(--mx)*6px), calc(var(--my)*4px), 0);
  transition: transform .15s linear;
}

/* ---------- Hero card layout ---------- */
.wrap{min-height:100dvh; display:grid; place-items:center; padding: clamp(20px, 4vw, 40px)}
.card{
  width:min(1120px, 92vw);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--glow);
  padding:clamp(18px, 3.5vw, 38px);
  display:grid; gap:clamp(16px, 3vw, 22px);
  grid-template-columns: 1.2fr .8fr;
  align-items:center;
}
@media (max-width:860px){ .card{ grid-template-columns:1fr } }

.brand{display:flex; align-items:center; gap:12px; color:var(--txt); font-weight:700; letter-spacing:.2px}

/* ---------- Generic chip style ---------- */
.badge{
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  color: var(--txt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(5,116,131,0.2);
  white-space: nowrap;
}
.badge:hover{ box-shadow:0 0 12px rgba(2,218,233,0.9) }

/* ---------- Spec/RFC chips as a strict grid ---------- */
/* Keep the grid from running under the logo on wide screens */
.card .badges{
  max-width: 860px;            /* adjust 760–900px to taste */
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));  /* 3 columns desktop */
  gap: 12px 18px;              /* row | column gap */
}
.card .badges a{ display:block } /* chip fills its cell */
.card .badges .badge{
  display:block;
  text-align:center;
  padding:.55rem .75rem;
}

/* Collapse to 2/1 columns responsively */
@media (max-width: 1000px){
  .card .badges{ grid-template-columns: repeat(2, minmax(210px, 1fr)); }
}
@media (max-width: 560px){
  .card .badges{ grid-template-columns: 1fr; }
}

/* ---------- Typography / buttons ---------- */
.title{
  font-size:clamp(28px, 6vw, 44px);
  line-height:1.1; margin:0;
}
.muted{color:var(--muted)}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:4px}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--border); padding:0.6rem 0.5rem;
  border-radius:8px; background: color-mix(in srgb, var(--panel) 70%, transparent);
  box-shadow:var(--glow);
  transform:translateZ(0);
}
.btn:hover{transform: translateY(-2px); background:linear-gradient(135deg, var(--accent), #058335); color:#baffc4; border:0 }
.btn.report{transform: translateY(-2px); background:linear-gradient(135deg, var(--accent), #c00606); color:#caecec; border:0 }

/* ---------- Logo ---------- */
.logo{
  justify-self:center;
  inline-size:190px; block-size:190px;
  border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background: radial-gradient(70% 70% at 32% 28%, #10294d, #0f172a);
  border:3px solid var(--border);
  box-shadow: 0 0 40px #0e4274, var(--glow);
  transform: translate3d(calc(var(--mx)*6px), calc(var(--my)*8px), 0);
  transition: transform .12s linear;
  transition-delay: 3s;
}
.logo:hover{
  inline-size:200px; block-size:200px;
  box-shadow: 0 0 40px rgb(35,106,199), var(--glow);
}
.logo img{ width:100%; height:100%; object-fit:cover; display:block }

/* ---------- Footer ---------- */
footer{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:center; padding:10px 16px;
  color:var(--muted); font-size:.9rem;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 85%, transparent) 60%);
}