/* Layout: dark single-look "portal" site. 1240px column, sticky header with mascot, orbit-ring motif from the brand torus; legal pages at 68ch. */
:root {
  --midnight: #0b0a1f;   /* brand Midnight: page ground */
  --indigo: #211c52;     /* brand Deep Indigo: raised surfaces */
  --deck: #15123a;       /* between the two, for panels */
  --rule: #2c2766;       /* hairlines */
  --violet: #7b5cff;     /* brand Violet */
  --lilac: #a584ff;      /* brand Light Violet */
  --cyan: #22e1d7;       /* brand Portal Cyan: primary action */
  --amber: #ffb347;      /* brand Spark Amber */
  --blush: #ff7bac;      /* brand Blush */
  --ink: #f4f2ff;        /* primary text */
  --mist: #b4aedb;       /* secondary text, 8:1 on midnight */

  --font-display: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 96px; --s8: 160px;
  --max: 1240px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--midnight);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--cyan); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
img, svg, canvas { max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--cyan); color: var(--midnight); }
h1, h2, h3 { text-wrap: balance; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: max(16px, 4vw); }

/* Header */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(11, 10, 31, .92); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s; }
.site-head.scrolled { border-bottom-color: var(--rule); background: var(--midnight); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 38px; height: 38px; flex: none; transition: transform .5s var(--spring); }
.brand:hover img { transform: rotate(-10deg) scale(1.08); }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-word b { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .08em; }
.brand-word small { font-family: var(--font-body); font-weight: 600; font-size: 9.5px; letter-spacing: .42em; color: var(--lilac); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; font-size: 15px; }
.nav a { color: var(--mist); text-decoration: none; transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .pill { color: var(--midnight); background: var(--cyan); padding: 8px 16px; border-radius: 999px; font-weight: 600; }
.nav .pill:hover { color: var(--midnight); background: #6ff3ec; }

/* Shared type */
.label { margin: 0 0 var(--s3); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; border: 0; border-radius: 999px; padding: 14px 24px; background: var(--cyan); color: var(--midnight); transition: transform .25s var(--spring), box-shadow .25s; box-shadow: 0 0 0 0 rgba(34, 225, 215, .5); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(34, 225, 215, .6); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--lilac); }

/* Prose pages */
.page-head { padding-block: var(--s7) var(--s5); border-bottom: 1px solid var(--rule); }
.page-head h1 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(44px, 7vw, 88px); line-height: 0.95; }
.page-head p { margin: var(--s4) 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.prose { max-width: 68ch; padding-block: var(--s6) var(--s7); color: #dcd8f5; }
.prose h2 { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; margin: var(--s6) 0 var(--s3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--ink); font-size: 18px; margin: var(--s4) 0 var(--s2); }
.prose p, .prose ul { margin: 0 0 var(--s3); }
.prose li + li { margin-top: var(--s2); }
.prose li::marker { color: var(--cyan); }

.contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s4); background: var(--deck); border: 1px solid var(--rule); border-radius: 18px; }
.contact code { font-family: var(--font-mono); font-size: 18px; color: var(--ink); word-break: break-all; }

.faq details { border-top: 1px solid var(--rule); padding-block: var(--s4); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: var(--s3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--cyan); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: var(--s3) 0 0; max-width: 62ch; }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); position: relative; overflow: hidden; }
.foot-top { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s6) var(--s4); }
.foot-top img { width: 64px; height: 64px; }
.foot-top p { margin: 0; color: var(--mist); max-width: 46ch; }
.foot-row { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-block: var(--s4) var(--s5); border-top: 1px solid var(--rule); font-size: 14px; color: var(--mist); }
.foot-row nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
.foot-row a { color: var(--mist); text-decoration: none; }
.foot-row a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .nav { gap: var(--s3); font-size: 14px; }
  .nav .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}