/* ==========================================================================
   The Realverse — marketing site
   --------------------------------------------------------------------------
   Built on the brand that already exists at therealverse.app: Space Mono, the
   meme lobster, and the two flat colours the logo is actually made of.

   Structurally mid-2010s — full-bleed hero, ghost buttons, a nav that solidifies
   on scroll, three columns, a parallax stats band, fade-up reveals. Skinned
   louder than the era's default, because the ethos is irreverent rather than
   tasteful: flat colour blocks, no gradients, no soft shadows, hard edges.

   Monospace for everything is deliberate. It reads as unpolished and slightly
   hostile to marketing, which is the point of the page.
   ========================================================================== */

:root {
  /* Sampled from img/meme_lobster.png — the mark is exactly two colours.
     #E96935 is also the accent already in use on therealverse.app. */
  --orange:      #E96935;
  --orange-dark: #C9541F;
  --blue:        #266CD0;
  --blue-dark:   #1B51A0;

  /* The page is dark end to end. Four grounds, in the order you meet them:
     night → slate → deep → night, with one orange block at the CTA. Orange is
     saved for the moment of action; using it for a whole mid-page section made
     the brightest thing on the page an argument rather than a button.

     Every foreground/background pair below was measured against WCAG before
     being written down. Nothing here is under 5.0:1. */
  --night:       #0D0D0F;   /* hero, stats, footer — deepest */
  --slate:       #17181C;   /* how it works — one step up */
  --deep:        #101F36;   /* manifesto — chromatic, the cap blue darkened */
  --ink:         #141414;   /* type on the orange block */

  --head:        #F2EEEB;   /* headings — warm off-white, never pure #FFF */
  --body:        #B9B3AE;   /* body copy on any of the three darks */
  --muted:       #8E8880;   /* leads, labels, footer */
  --rule:        #2A2B30;

  --nav-h: 74px;
}

/* --------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.8;
  color: var(--body);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-dark); }
strong { color: var(--head); }

/* Blue clears the 3:1 non-text minimum on all three dark grounds (3.83 / 3.50
   / 3.26) but is only 1.58:1 on the orange CTA -- which is exactly where the
   page's two real controls are. Ink there instead. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.cta :focus-visible { outline-color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 720px; }

/* ----------------------------------------------------------------- nav */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 2px solid transparent;
}
.nav.is-stuck { background: var(--night); border-bottom-color: var(--orange); }

.nav-inner { display: flex; align-items: center; height: var(--nav-h); }

.brand {
  display: flex; align-items: center; gap: 12px;
  color: #fff; font-weight: 700; font-size: 13px;
  letter-spacing: .16em; margin-right: auto;
}
.brand:hover { color: var(--orange); }
.brand-mark { width: 34px; height: 34px; }

.nav-links {
  list-style: none; display: flex; align-items: center;
  gap: 30px; margin: 0; padding: 0;
}
.nav-links a {
  color: rgba(255,255,255,.85);
  font-size: 12px; letter-spacing: .1em; text-transform: lowercase;
}
.nav-links a:hover { color: var(--orange); }

/* Square, hard-edged. Rounded corners would soften the whole thing. */
.nav-cta {
  border: 2px solid var(--orange); color: var(--orange) !important;
  padding: 8px 16px;
  transition: background-color .2s ease, color .2s ease;
}
.nav-cta:hover { background: var(--orange); color: var(--ink) !important; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-toggle span {
  display: block; width: 26px; height: 3px; background: #fff; margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--night);
  /* Subtle gray grid: the only ornament on the page, and it is straight lines. */
  background-image:
    linear-gradient(rgba(150,150,150,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,150,150,.18) 1px, transparent 1px);
  background-size: 46px 46px;
  padding: calc(var(--nav-h) + 40px) 0 90px;
}

.hero-mark {
  width: clamp(150px, 24vw, 230px);
  margin: 0 auto 34px;
  /* The mark is the hero image. Nothing sits on top of it. */
}

.eyebrow {
  margin: 0 0 18px;
  font-size: clamp(11px, 1.5vw, 13px); font-weight: 700;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--orange);
  /* The tracking is wide enough that the trailing space matters — without the
     indent the line sits visibly left of the centred headline under it. */
  text-indent: .42em;
}

.hero-title {
  color: #fff; font-weight: 700;
  font-size: clamp(28px, 6vw, 60px);
  line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 24px;
}
.hero-title .hl {
  /* Highlighter, in the cap's blue — the second colour earns its place here. */
  background: var(--blue);
  box-shadow: 10px 0 0 var(--blue), -10px 0 0 var(--blue);
}

.hero-sub {
  color: rgba(255,255,255,.72);
  font-size: clamp(14px, 1.9vw, 18px);
  max-width: 620px; margin: 0 auto 40px;
}

.hero-foot {
  margin: 26px 0 0; font-size: 12px; letter-spacing: .12em;
  color: var(--orange); text-transform: uppercase;
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 17px 40px; border-radius: 0; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-ghost { color: var(--orange); border: 3px solid var(--orange); background: transparent; }
.btn-ghost:hover { background: var(--orange); color: var(--ink); }
.btn-solid { color: var(--ink); background: var(--orange); border: 3px solid var(--orange); }
.btn-solid:hover { background: var(--ink); color: var(--orange); }

/* ------------------------------------------------------------ scroll cue */

.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; margin-left: -8px;
  width: 16px; height: 16px;
}
.scroll-cue span {
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px;
  border-right: 3px solid var(--orange); border-bottom: 3px solid var(--orange);
  transform: rotate(45deg); animation: cue 1s ease-in-out infinite;
}
@keyframes cue {
  0%   { transform: rotate(45deg) translateY(-5px); opacity: 0; }
  10%  { transform: rotate(45deg) translateY(0);    opacity: 1; }
  90%  { transform: rotate(45deg) translateY(20px); opacity: 1; }
  100% { transform: rotate(45deg) translateY(20px); opacity: 0; }
}

/* ------------------------------------------------------------- sections */

.section { padding: 100px 0; }

/* The two mid-page grounds. Both dark; the step between them is what marks the
   section change, not a rule or a shadow. */
.section-slate { background: var(--slate); 
  background-image:
    linear-gradient(rgba(250,250,250,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,250,250,.045) 1px, transparent 1px);
  background-size: 46px 46px;
}
.section-deep  { background: var(--deep); 
  background-image:
    linear-gradient(rgba(150,150,250,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,150,250,.10) 1px, transparent 1px);
  background-size: 46px 46px;
}

.section-title {
  font-weight: 700; color: var(--orange);
  font-size: clamp(21px, 3.2vw, 32px);
  line-height: 1.25; letter-spacing: -.01em;
  text-align: center; margin: 0 0 18px;
}

/* A blunt bar, not a hairline. Blue against the orange heading is the only
   place the two logo colours touch, and it is deliberate. */
.section-title::after {
  content: ""; display: block;
  width: 60px; height: 5px; background: var(--blue);
  margin: 20px auto 0;
}

.section-lead {
  text-align: center; max-width: 640px; margin: 0 auto 66px;
  color: var(--muted);
}

.row { display: flex; flex-wrap: wrap; gap: 44px; }
.col { flex: 1 1 250px; }
.col h3 {
  font-size: 16px; font-weight: 700; color: var(--head);
  margin: 20px 0 12px; letter-spacing: -.01em;
}
.col p { margin: 0; font-size: 15px; }

/* Numbered squares instead of the era's circular icon badges — same job,
   and it avoids needing an icon set for three items. */
.icon-box {
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--orange); color: var(--orange);
  font-weight: 700; font-size: 19px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.col:hover .icon-box { background: var(--orange); color: var(--night); }

/* ------------------------------------------------------------ statement */

/* The pivot between "here is how it works" and "here is what we think".
   Deliberately almost empty: one sentence, one kicker, and a lot of room.
   Anything else in here would give the eye somewhere to escape to. */
.statement {
  background: var(--night);
  padding: clamp(90px, 14vw, 150px) 0;
  text-align: center;
  background-image:
    linear-gradient(rgba(250,250,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,250,250,.05) 1px, transparent 1px);
  background-size: 46px 46px;
}
.statement-line {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 34px); font-weight: 700;
  line-height: 1.42; letter-spacing: -.015em;
  color: var(--head);
}
.statement-line em {
  font-style: normal;
  color: var(--muted);   /* the turn in the sentence, dropped back a step */
}
.statement-kicker {
  margin: 30px 0 0;
  font-size: clamp(13px, 1.8vw, 16px); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange);
}

/* ------------------------------------------------------------- manifesto */

.section-deep .lead {
  font-size: clamp(18px, 2.6vw, 24px); font-weight: 700;
  color: var(--head); line-height: 1.5; margin: 0 0 24px;
}
.section-deep p { font-size: 15px; }

.creed { list-style: none; padding: 0; margin: 38px 0; }
.creed li {
  border-top: 2px solid rgba(255,255,255,.14);
  padding: 16px 0; font-size: 15px;
}
.creed li:last-child { border-bottom: 2px solid rgba(255,255,255,.14); }
.creed span { display: block; font-weight: 700; color: var(--orange); }

.closing {
  margin: 34px 0 0; font-weight: 700; color: var(--head);
  font-size: 17px !important; line-height: 1.6;
}

/* ----------------------------------------------------------------- band */

/* Back to the deepest ground: a quiet beat between the argument and the
   orange block, so the CTA is the brightest thing on the page. */
.band { background: var(--night); padding: 74px 0; }
.stats { text-align: center; gap: 30px; }
.stat { flex: 1 1 150px; }
.stat-num {
  display: block; font-size: clamp(26px, 4.4vw, 44px); font-weight: 700;
  color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block; margin-top: 8px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------------ cta */

/* The one bright block on the page, at the one moment we want a click. */
.cta { padding: 92px 0; text-align: center; background: var(--orange); }
.cta h2 {
  color: var(--ink); font-size: clamp(21px, 3.2vw, 32px); font-weight: 700;
  margin: 0 0 12px; letter-spacing: -.01em;
}
.cta p { color: var(--ink); margin: 0 0 32px; font-size: 15px; }

.signup-form {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; max-width: 560px; margin: 0 auto;
}
.signup-form input {
  flex: 1 1 280px; min-width: 0;
  padding: 16px 18px; font-size: 15px; font-family: inherit;
  border: 3px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
}
.signup-form input::placeholder { color: rgba(20,20,20,.55); }
.signup-form input:focus { outline: none; background: rgba(255,255,255,.14); }

/* Inverted here: on the orange block the solid button has to be the dark one. */
.cta .btn-solid { background: var(--ink); border-color: var(--ink); color: var(--orange); }
.cta .btn-solid:hover { background: transparent; color: var(--ink); }

.form-note {
  min-height: 24px; margin: 18px 0 0; font-size: 13px;
  color: var(--ink); line-height: 1.6; font-weight: 700;
}

/* --------------------------------------------------------------- footer */

.footer {
  background: var(--night); color: var(--muted);
  padding: 50px 0; text-align: center;
}
.footer .container { display: flex; flex-direction: column; align-items: center; }
.footer-mark { width: 52px; margin-bottom: 22px; }
.footer-links {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  gap: 24px; padding: 0; margin: 0 0 22px;
}
.footer-links a { color: var(--body); font-size: 12px; letter-spacing: .08em; }
.footer-links a:hover { color: var(--orange); }

.x-link { display: block; margin-bottom: 18px; }
.x-link svg { width: 20px; height: 20px; fill: var(--orange); transition: transform .15s ease-in-out; }
.x-link:hover svg { transform: scale(.7); }

.footer-note { font-size: 12px; margin: 0; }

/* --------------------------------------------------------------- reveal */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 2px solid var(--orange);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links.is-open { max-height: 340px; }
  .nav-links li { border-top: 1px solid rgba(255,255,255,.1); }
  .nav-links a { display: block; padding: 16px 24px; }
  .nav-cta { border: 0; }

  .section { padding: 68px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue span { animation: none; }
  * { scroll-behavior: auto !important; }
}