/* Mixarium — legal/site skin.
   Identity mirrors the app's sci-fi language (docs/SCI_FI_DESIGN_LANGUAGE.md):
   deep navy SURFACE_HORIZON_DEEP base, cyan #00d2ff accent BY INTENTION only,
   hairlines (not borders), radius 4–6, mono uppercase technical labels,
   whisper-quiet grain, and the hero signature (starfield + horizon glow). */

:root{
  --bg:#000B1C;              /* SURFACE_HORIZON_DEEP */
  --panel:rgba(255,255,255,.03);
  --text:#EAEAF0;
  --muted:#9AA3B2;
  --dim:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.09);
  --cyan:#00d2ff;           /* the single accent-by-intention */
  --cyan-dim:rgba(0,210,255,.55);
  --cyan-rule:rgba(0,210,255,.16);
  --mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,"Courier New",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;min-height:100vh;overflow-x:hidden;
}

/* Atmosphere — hero signature. Fixed so it stays put while content scrolls. */
body::before{                       /* starfield + grain */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    url("/stars.svg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat:no-repeat,repeat;
  background-position:top center,top left;
  background-size:cover,140px 140px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 92%);
}
body::after{                        /* horizon glow at the bottom */
  content:"";position:fixed;left:0;right:0;bottom:0;height:60vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(150% 100% at 50% 128%, rgba(0,210,255,.11), rgba(0,210,255,0) 52%),
    radial-gradient(160% 120% at 50% 140%, rgba(10,34,64,.60), rgba(0,0,0,0) 60%);
}

.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:52px 22px 96px}

/* Header */
header{display:flex;align-items:center;gap:14px;margin-bottom:8px}
header img{height:60px;width:auto;display:block;margin-left:-6px}
header a{display:inline-flex}
.hero header{margin-bottom:0;justify-content:center}
.hero header img{height:auto;width:min(420px,84%)}

/* Eyebrow — mono uppercase technical label (docs §3) */
.eyebrow{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:2.4px;
  font-size:11px;color:var(--cyan-dim);margin:26px 0 10px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--cyan);opacity:.7}
.hero .eyebrow{justify-content:center;margin-top:30px}

h1{font-size:27px;line-height:1.22;margin:0 0 8px;color:#fff;letter-spacing:-.2px}
.hero h1{font-size:34px;text-align:center;margin-top:6px}

/* Section heading — editorial, with a cyan technical tick */
h2{
  font-size:16px;margin:38px 0 9px;color:#fff;font-weight:600;
  display:flex;align-items:baseline;gap:9px;
}
h2::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:1px;
  background:var(--cyan);box-shadow:0 0 8px rgba(0,210,255,.5);transform:translateY(-1px)}
.card h2{margin-top:0}
.card h2::before{display:none}

p{margin:0 0 14px}
.muted{color:var(--muted)}
.hero .muted{text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}

/* Metadata line — mono uppercase (last updated / request id) */
.up{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:1.6px;
  color:var(--dim);font-size:12px;margin:0 0 32px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}

a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}

/* Buttons — sci-fi chip: hairline, radius 6, mono uppercase, cyan on hover */
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:30px 0 0}
.btn{
  display:inline-block;border:1px solid var(--line);border-radius:6px;
  padding:12px 20px;color:#fff;background:var(--panel);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:1.6px;font-size:12px;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.btn:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,210,255,.05);text-decoration:none}

/* Card — panel with hairline + cyan top accent */
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:22px 22px;margin:20px 0;overflow:hidden;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan-rule),transparent)}

/* Footer — mono uppercase, hairline top */
footer{
  margin-top:64px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px;display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:1.4px;
}
.hero footer{justify-content:center}
footer a{color:var(--muted)}
footer a:hover{color:var(--cyan)}

@media (max-width:520px){
  .wrap{padding:40px 18px 80px}
  .hero h1{font-size:28px}
  h1{font-size:23px}
}