/* Shared component styling: logo, nav, footer, CTA. Scaffolding only. */

.sb-header {
  border-bottom: 1px solid var(--sb-color-border);
}

.sb-footer {
  border-top: 1px solid var(--sb-color-border);
}

.sb-logo__text {
  font-weight: 700;
  font-size: var(--sb-font-size-lg);
  color: var(--sb-color-text);
}

.sb-nav__list {
  display: flex;
  gap: var(--sb-space-md);
}

.sb-nav__link {
  color: var(--sb-color-text-muted);
}

.sb-nav__link--active {
  color: var(--sb-color-text);
}

.sb-cta {
  display: inline-block;
  padding: var(--sb-space-sm) var(--sb-space-md);
  background-color: var(--sb-color-accent);
  color: var(--sb-color-bg);
  border-radius: var(--sb-radius-sm);
  font-weight: 600;
}

.sb-footer__brand {
  font-weight: 600;
}

/* ==========================================================================
   Main hero prototype — scoped to Main only, see layout.css for the
   `.sb-site--main` scoping note. Namespaced under `.main-hero*`.
   ========================================================================== */

/* --- Glass header: a wide floating panel, not a slab and not a pill.
   Visual treatment lives on `-inner` (the positioning/alignment wrapper
   is in layout.css); resting state is intentionally light/transparent,
   and only firms up once scrolled, so it reads as glass over the hero
   image rather than a dark bar sitting on top of it.

   Border-radius note: the rendered bar is ~69px tall (0.65rem vertical
   padding ×2 plus the 3rem logo), so a radius anywhere near half that
   height (~34px) still draws as a fully rounded stadium/pill end,
   regardless of which token produced the px value — `--sb-radius-lg`
   (32px) was tried first and is in fact still mathematically close to a
   pill at this height. `--sb-radius-md` (20px) is clearly sub-half-height,
   which is what actually reads as a rounded-rect panel instead of a
   capsule. */

/* Top scrim gradient — see layout.css for the positioning/z-index. Deep
   Void fading to fully transparent; deliberately not a flat/solid tone
   so it reads as a cinematic veil, not a second header bar. */

.main-hero__header::before {
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.6) 0%, rgba(5, 7, 13, 0.32) 45%, rgba(5, 7, 13, 0) 100%);
}

.main-hero__header-inner {
  border-radius: var(--sb-radius-md);
  background-color: rgba(11, 16, 32, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(244, 239, 230, 0.12);
  box-shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.5);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}

.main-hero__header.is-scrolled .main-hero__header-inner {
  background-color: var(--sb-color-surface-glass-strong);
  box-shadow: 0 10px 32px -10px rgba(0, 0, 0, 0.55);
}

.main-hero__logo {
  display: inline-flex;
  align-items: center;
}

.main-hero__logo-img {
  display: block;
  height: 3rem;
  width: auto;
}

.main-hero__nav-link {
  color: var(--sb-color-text-secondary);
  font-size: var(--sb-font-size-sm);
  font-weight: 500;
  transition: color 200ms ease;
}

.main-hero__nav-link:hover,
.main-hero__nav-link:focus-visible {
  color: var(--sb-color-text);
}

.main-hero__nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.05rem;
  border-radius: var(--sb-radius-pill);
  background-color: rgba(11, 16, 32, 0.5);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: var(--sb-color-text);
  font-weight: 600;
  font-size: var(--sb-font-size-sm);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.main-hero__nav-cta:hover,
.main-hero__nav-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(85, 221, 251, 0.55);
  box-shadow: 0 0 20px -6px rgba(139, 92, 246, 0.4);
}

/* --- Hero overlays --- */

.main-hero__overlay {
  background:
    linear-gradient(
      100deg,
      rgba(5, 7, 13, 0.93) 0%,
      rgba(5, 7, 13, 0.62) 38%,
      rgba(5, 7, 13, 0.28) 65%,
      rgba(5, 7, 13, 0.16) 100%
    ),
    linear-gradient(180deg, rgba(5, 7, 13, 0.05) 0%, rgba(5, 7, 13, 0.32) 65%, rgba(5, 7, 13, 0.96) 100%);
}

.main-hero__glow {
  background:
    radial-gradient(circle at 82% 18%, rgba(139, 92, 246, 0.22), transparent 55%),
    radial-gradient(circle at 60% 78%, rgba(85, 221, 251, 0.16), transparent 50%);
  mix-blend-mode: screen;
}

/* --- Hero copy --- */

.main-hero__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.main-hero__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.main-hero__subheadline {
  font-size: var(--sb-font-size-lg);
  line-height: 1.45;
  color: var(--sb-color-text-secondary);
  max-width: 34rem;
}

.main-hero__supporting {
  font-size: 0.9375rem;
  color: rgba(174, 182, 200, 0.65);
}

.main-hero__scrollhint {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .main-hero__scrollhint {
    animation: main-hero-scrollhint-bob 2.4s ease-in-out infinite;
  }
}

@keyframes main-hero-scrollhint-bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 6px);
  }
}

/* --- Buttons --- */

.main-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: var(--sb-radius-pill);
  font-weight: 600;
  font-size: var(--sb-font-size-base);
  border: 1px solid transparent;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.main-hero__btn--primary {
  background-color: rgba(11, 16, 32, 0.55);
  background-image: linear-gradient(160deg, rgba(139, 92, 246, 0.22), rgba(85, 221, 251, 0.15));
  border-color: rgba(139, 92, 246, 0.5);
  color: var(--sb-color-text);
  box-shadow: 0 0 18px -8px rgba(139, 92, 246, 0.28);
}

.main-hero__btn--primary:hover,
.main-hero__btn--primary:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(85, 221, 251, 0.65);
  box-shadow: 0 0 30px -6px rgba(139, 92, 246, 0.48);
}

.main-hero__btn--secondary {
  background-color: transparent;
  color: var(--sb-color-text);
  border-color: var(--sb-color-border-strong);
}

.main-hero__btn--secondary:hover,
.main-hero__btn--secondary:focus-visible {
  border-color: var(--sb-color-mist-gray);
  transform: translateY(-1px);
}

/* --- First continuation section copy: serif headline continues the
   hero's editorial language; points use a thin accent mark instead of
   an icon/card, kept deliberately small and low-opacity so it reads as
   a subtle detail, not a bright gradient block. --- */

.main-continuation__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.main-continuation__body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.main-continuation__point-mark {
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-bottom: var(--sb-space-sm);
  background: linear-gradient(90deg, var(--sb-color-accent), var(--sb-color-accent-alt));
  opacity: 0.75;
}

.main-continuation__point-title {
  font-size: var(--sb-font-size-lg);
  font-weight: 650;
  color: var(--sb-color-text);
  margin-bottom: var(--sb-space-xs);
}

.main-continuation__point-body {
  font-size: var(--sb-font-size-base);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
  max-width: 30rem;
}

/* --- Second continuation section copy: same eyebrow/serif-headline
   language as the sections above it, scaled down slightly since this is
   the most concrete/quietest of the three so far. --- */

.main-platform__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.main-platform__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.main-platform__body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.main-platform__case-title {
  font-size: var(--sb-font-size-base);
  font-weight: 650;
  color: var(--sb-color-text);
  margin-bottom: var(--sb-space-xs);
}

.main-platform__case-body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

/* --- Final CTA copy. The button reuses `.main-hero__btn`/`--primary`
   directly (see public/main/index.php) rather than duplicating that
   visual language under a new name — same restrained dark-glass +
   violet/cyan border treatment used everywhere else this page has a
   primary action. Panel gets a soft glass tint (no blur — nothing
   scrolls behind it to blur) so it reads as one deliberate closing
   moment, not a flat continuation of the page background. --- */

.main-cta__inner {
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-lg);
  background-color: var(--sb-color-surface-glass);
}

.main-cta__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.main-cta__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.main-cta__body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
  max-width: 30rem;
}

/* --- Early-access form (Main only). Inputs reuse the panel's own glass
   tone, one step darker, so they read as recessed fields inside the
   panel rather than separate cards; focus/error states use the existing
   accent tokens (Lucid Cyan for focus, the feedback-error token from
   tokens.css for validation) instead of introducing a new color theme. --- */

.main-cta__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-md);
  text-align: left;
}

.main-cta__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sb-space-md);
}

.main-cta__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.main-cta__label {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  color: var(--sb-color-text-secondary);
}

.main-cta__input {
  width: 100%;
  font: inherit;
  font-size: var(--sb-font-size-base);
  color: var(--sb-color-text);
  background-color: rgba(5, 7, 13, 0.4);
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-sm);
  padding: 0.65rem 0.85rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.main-cta__textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.main-cta__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sb-color-mist-gray) 50%), linear-gradient(135deg, var(--sb-color-mist-gray) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) center, calc(100% - 0.75rem) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.main-cta__input::placeholder {
  color: var(--sb-color-text-muted);
}

.main-cta__input:hover {
  border-color: var(--sb-color-border-strong);
}

.main-cta__input:focus-visible {
  outline: none;
  border-color: var(--sb-color-accent-alt);
  box-shadow: 0 0 0 3px rgba(85, 221, 251, 0.16);
}

.main-cta__input--error {
  border-color: var(--sb-color-feedback-error);
}

.main-cta__field-error,
.main-cta__form-error {
  font-size: 0.875rem;
  color: var(--sb-color-feedback-error);
}

.main-cta__form-error {
  margin: 0;
}

.main-cta__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.main-cta__checkbox {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--sb-color-accent-alt);
  flex-shrink: 0;
}

.main-cta__consent label {
  font-size: 0.9375rem;
  color: var(--sb-color-text-secondary);
}

.main-cta__submit {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Honeypot: visually hidden but still present/focusable in the DOM so
   simple bots that fill every input still trip it; real users never
   see or reach it via normal tab order in practice (off-screen + not a
   real tab stop). */
.main-cta__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.main-cta__success {
  width: 100%;
  padding: var(--sb-space-md) var(--sb-space-lg);
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-sm);
  background-color: rgba(85, 221, 251, 0.08);
}

.main-cta__success-text {
  color: var(--sb-color-text);
  font-size: var(--sb-font-size-lg);
}

@media (max-width: 640px) {
  .main-cta__row {
    grid-template-columns: 1fr;
  }
}

/* --- Real footer copy (Main only) --- */

.main-footer__name {
  font-weight: 650;
  color: var(--sb-color-text);
}

.main-footer__tagline,
.main-footer__copyright {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
}

.main-footer__nav a {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-secondary);
  transition: color 200ms ease;
}

.main-footer__nav a:hover,
.main-footer__nav a:focus-visible {
  color: var(--sb-color-text);
}

/* --- Quiet footer legal links (Main only) — deliberately smaller and
   more muted than .main-footer__nav above, so they read as a quiet
   utility row, not a second primary nav. --- */

.main-footer__legal a {
  font-size: 0.8125rem;
  color: var(--sb-color-text-muted);
  transition: color 200ms ease;
}

.main-footer__legal a:hover,
.main-footer__legal a:focus-visible {
  color: var(--sb-color-text-secondary);
}

/* --- Legal page copy (Main only) — Privacy, Cookies, AI Notice, Terms,
   Do Not Sell or Share. Same restrained dark/glass language as the rest
   of Main: serif title matching other section headlines, Mist Gray body
   text, a thin border separating the title block from the long-form
   content instead of a heavier card/panel treatment. --- */

.main-legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-secondary);
  text-decoration: none;
  margin-bottom: var(--sb-space-lg);
  transition: color 200ms ease;
}

.main-legal__back:hover,
.main-legal__back:focus-visible {
  color: var(--sb-color-text);
}

.main-legal__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.main-legal__title {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
  margin-top: var(--sb-space-xs);
}

.main-legal__updated {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
  margin-top: var(--sb-space-sm);
  margin-bottom: var(--sb-space-lg);
  padding-bottom: var(--sb-space-lg);
  border-bottom: 1px solid var(--sb-color-border);
}

.main-legal__content h2 {
  font-size: var(--sb-font-size-lg);
  font-weight: 650;
  color: var(--sb-color-text);
  margin-top: var(--sb-space-xl);
  margin-bottom: var(--sb-space-sm);
}

.main-legal__content h2:first-child {
  margin-top: 0;
}

.main-legal__content p,
.main-legal__content li {
  font-size: var(--sb-font-size-base);
  line-height: 1.6;
  color: var(--sb-color-text-secondary);
}

.main-legal__content p + p,
.main-legal__content ul {
  margin-top: var(--sb-space-sm);
}

.main-legal__content ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 1.25rem;
}

.main-legal__content a {
  color: var(--sb-color-accent-alt);
  text-underline-offset: 0.15em;
}

.main-legal__content a:hover,
.main-legal__content a:focus-visible {
  color: var(--sb-color-text);
}

/* --- Reveal-on-scroll (progressive enhancement, JS-driven, see main.js) --- */

@media (prefers-reduced-motion: no-preference) {
  .main-hero-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .main-hero-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --- Responsive: keep the larger logo from feeling oversized on a
   narrow, already-compact mobile header (see layout.css for the matching
   header/content padding adjustments at this breakpoint). --- */

@media (max-width: 640px) {
  .main-hero__logo-img {
    height: 2.5rem;
  }
}

/* ==========================================================================
   Worlds hero v1 — scoped to Worlds only, see layout.css for the
   `.sb-site--worlds` scoping note. Namespaced under `.worlds-*`.

   Reuses the exact same hero-background video assets as Main on purpose
   (per project direction), but reads as a distinct, cooler space through
   colour only: Lucid Cyan leads here instead of Aurora Violet (which is
   secondary/restrained), the base overlay is pushed a little darker than
   Main's, and a faint cyan-tinted construction-grid texture sits between
   the overlay and the glow — a quiet nod to "building/reshaping a
   space" without becoming a literal UI grid or cyberpunk noise.
   ========================================================================== */

.worlds-hero__header::before {
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.6) 0%, rgba(5, 7, 13, 0.32) 45%, rgba(5, 7, 13, 0) 100%);
}

.worlds-hero__header-inner {
  border-radius: var(--sb-radius-md);
  /* No scroll-linked "is-scrolled" state here (see layout.css) — uses the
     slightly firmer of Main's two glass states as its single resting
     look, so it stays legible over the bright parts of the video at any
     scroll position. */
  background-color: var(--sb-color-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(244, 239, 230, 0.12);
  box-shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.5);
}

.worlds-hero__logo {
  display: inline-flex;
  align-items: center;
}

.worlds-hero__logo-img {
  display: block;
  height: 3rem;
  width: auto;
}

/* Persistent brand/tag pair for the fixed header — unlike the hero
   eyebrow (`.worlds-hero__eyebrow`), this stays visible while scrolled
   past the hero, since the header itself is `position: fixed`. Sits
   between the logo and the CTA via `flex: 1` on the centered text
   column, so it self-centers in whatever space is left regardless of
   how wide the logo/CTA happen to be. Hidden at narrower widths below —
   where there isn't room for it next to the logo and "Request Access"
   pill without crowding. The responsive overrides live here rather than
   in layout.css because this file loads after layout.css: an override
   of equal specificity placed in layout.css would lose the cascade tie
   to this file's unconditional base rule regardless of the media query. */
.worlds-hero__brand {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  line-height: 1.3;
  text-align: center;
}

.worlds-hero__brand-name {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  color: var(--sb-color-text);
}

.worlds-hero__brand-tag {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--sb-color-text-secondary);
}

/* Tablet: the logo + "Request Access" pill already take up enough of
   the header row that the tag line is the first thing to go — the
   brand name alone still fits without crowding. */
@media (max-width: 768px) {
  .worlds-hero__brand-tag {
    display: none;
  }
}

/* Narrow phones: logo + CTA pill alone already fill the row; drop the
   whole brand block rather than let it wrap or squeeze. */
@media (max-width: 640px) {
  .worlds-hero__brand {
    display: none;
  }
}

.worlds-hero__nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.05rem;
  border-radius: var(--sb-radius-pill);
  background-color: rgba(11, 16, 32, 0.5);
  border: 1px solid rgba(85, 221, 251, 0.4);
  color: var(--sb-color-text);
  font-weight: 600;
  font-size: var(--sb-font-size-sm);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.worlds-hero__nav-cta:hover,
.worlds-hero__nav-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 20px -6px rgba(85, 221, 251, 0.4);
}

/* --- Hero overlays --- */

.worlds-hero__overlay {
  /* Pushed a little darker/cooler than Main's equivalent overlay
     (higher opacity stops, slightly bluer tone) per "darker Deep Void
     base" direction. */
  background:
    linear-gradient(
      100deg,
      rgba(4, 6, 11, 0.95) 0%,
      rgba(5, 8, 15, 0.7) 38%,
      rgba(6, 10, 18, 0.36) 65%,
      rgba(6, 10, 18, 0.2) 100%
    ),
    linear-gradient(180deg, rgba(4, 6, 11, 0.1) 0%, rgba(5, 8, 15, 0.4) 65%, rgba(3, 5, 9, 0.97) 100%);
}

/* Faint construction-grid texture — two repeating hairline gradients
   tinted Lucid Cyan, kept just barely visible (low opacity + screen
   blend) so it reads as atmosphere/depth, never as an actual UI grid or
   neon cyberpunk line-work. Overall opacity trimmed further (0.5 -> 0.32,
   ~36%) per v1 polish feedback — same line/gap contrast as before
   (rgba alpha inside the gradients is unchanged), just dimmer overall so
   it's barely felt rather than noticed. */

.worlds-hero__grid {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(85, 221, 251, 0.05) 0,
      rgba(85, 221, 251, 0.05) 1px,
      transparent 1px,
      transparent 64px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(85, 221, 251, 0.05) 0,
      rgba(85, 221, 251, 0.05) 1px,
      transparent 1px,
      transparent 64px
    );
  mix-blend-mode: screen;
  opacity: 0.32;
}

.worlds-hero__glow {
  /* Lucid Cyan leads, Aurora Violet is the restrained secondary accent —
     the reverse priority from Main's glow, per the accepted per-site
     accent direction (docs/09_visual_direction.md). */
  background:
    radial-gradient(circle at 78% 22%, rgba(85, 221, 251, 0.26), transparent 55%),
    radial-gradient(circle at 58% 80%, rgba(139, 92, 246, 0.14), transparent 50%);
  mix-blend-mode: screen;
}

/* --- Hero copy --- */

.worlds-hero__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.worlds-hero__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.worlds-hero__subheadline {
  font-size: var(--sb-font-size-lg);
  line-height: 1.45;
  color: var(--sb-color-text-secondary);
  max-width: 34rem;
}

.worlds-hero__supporting {
  font-size: 0.9375rem;
  color: rgba(174, 182, 200, 0.65);
}

.worlds-hero__scrollhint {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .worlds-hero__scrollhint {
    animation: main-hero-scrollhint-bob 2.4s ease-in-out infinite;
  }
}

/* --- Buttons. Same shape/sizing language as Main's `.main-hero__btn`,
   but the primary variant swaps which accent leads — cyan border/glow
   here instead of violet — to match the glow treatment above. --- */

.worlds-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: var(--sb-radius-pill);
  font-weight: 600;
  font-size: var(--sb-font-size-base);
  border: 1px solid transparent;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.worlds-hero__btn--primary {
  background-color: rgba(11, 16, 32, 0.55);
  background-image: linear-gradient(160deg, rgba(85, 221, 251, 0.24), rgba(139, 92, 246, 0.14));
  border-color: rgba(85, 221, 251, 0.5);
  color: var(--sb-color-text);
  box-shadow: 0 0 18px -8px rgba(85, 221, 251, 0.3);
}

.worlds-hero__btn--primary:hover,
.worlds-hero__btn--primary:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 30px -6px rgba(85, 221, 251, 0.48);
}

.worlds-hero__btn--secondary {
  background-color: transparent;
  color: var(--sb-color-text);
  border-color: var(--sb-color-border-strong);
}

.worlds-hero__btn--secondary:hover,
.worlds-hero__btn--secondary:focus-visible {
  border-color: var(--sb-color-mist-gray);
  transform: translateY(-1px);
}

/* --- Value proposition copy ("From a word to a world.") and its three
   step cards — same cyan-tinted glass treatment as `.worlds-cta__inner`
   below, deliberately identical values, just applied again. --- */

.worlds-value__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.worlds-value__body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.worlds-value__step {
  border: 1px solid rgba(85, 221, 251, 0.16);
  background-color: var(--sb-color-surface-glass);
  box-shadow: 0 0 40px -22px rgba(85, 221, 251, 0.28);
}

.worlds-value__step-index {
  display: block;
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
  margin-bottom: var(--sb-space-sm);
}

.worlds-value__step-title {
  font-size: var(--sb-font-size-lg);
  font-weight: 650;
  color: var(--sb-color-text);
  margin-bottom: var(--sb-space-xs);
}

.worlds-value__step-body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

/* --- Restored immersive-creation visual: same cyan-tinted glass
   treatment as `.worlds-value__step`/`.worlds-cta__inner` elsewhere on
   this page, deliberately identical values, just applied again. --- */

.worlds-details__visual {
  border: 1px solid rgba(85, 221, 251, 0.16);
  background-color: var(--sb-color-surface-glass);
  box-shadow: 0 0 40px -22px rgba(85, 221, 251, 0.28);
}

/* --- Closing CTA text (after "Who it's for") — same weight/size as
   `.worlds-value__step-title` (a subhead, not a section headline) so it
   reads as a calm closing line rather than a second hero. --- */

.worlds-final-cta__text {
  font-size: var(--sb-font-size-lg);
  font-weight: 650;
  color: var(--sb-color-text);
}

.worlds-final-cta__subtext {
  font-size: var(--sb-font-size-base);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

/* --- Detailed "how it works" content copy. Numbered steps reuse the
   same hairline-divider/index-column language as the value prop's
   process steps elsewhere on the page; list items use a small dot mark
   (same gradient as the old conversation/cases point marks) plus a bold
   lead-in label so the lists read as scannable rows, not a wall of
   text. --- */

.worlds-details__group-headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.worlds-details__group-body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.worlds-details__step-index {
  font-family: var(--sb-font-serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--sb-color-accent-alt);
  opacity: 0.55;
}

.worlds-details__step-title {
  font-size: var(--sb-font-size-base);
  font-weight: 650;
  color: var(--sb-color-text);
  margin-bottom: var(--sb-space-xs);
}

.worlds-details__step-body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.worlds-details__item-mark {
  background: linear-gradient(135deg, var(--sb-color-accent-alt), var(--sb-color-accent));
  opacity: 0.75;
}

.worlds-details__item-body {
  font-size: var(--sb-font-size-base);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.worlds-details__item-body strong {
  color: var(--sb-color-text);
  font-weight: 650;
}

/* --- Early-access form field copy (Worlds only). Form field styling
   intentionally mirrors Main's `.main-cta__*` values exactly (border,
   background, focus ring are already Lucid Cyan on Main too), so
   reusing the same numbers here doesn't make the hero form "louder"
   than Main's — only the submit button (which reuses
   `.worlds-hero__btn--primary`) carries the Worlds-specific cyan-led
   treatment already established above. --- */

.worlds-cta__input {
  width: 100%;
  font: inherit;
  font-size: var(--sb-font-size-base);
  color: var(--sb-color-text);
  background-color: rgba(5, 7, 13, 0.4);
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-sm);
  padding: 0.65rem 0.85rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.worlds-cta__input::placeholder {
  color: var(--sb-color-text-muted);
}

.worlds-cta__input:hover {
  border-color: var(--sb-color-border-strong);
}

.worlds-cta__input:focus-visible {
  outline: none;
  border-color: var(--sb-color-accent-alt);
  box-shadow: 0 0 0 3px rgba(85, 221, 251, 0.16);
}

.worlds-cta__input--error {
  border-color: var(--sb-color-feedback-error);
}

.worlds-cta__field-error,
.worlds-cta__form-error {
  font-size: 0.875rem;
  color: var(--sb-color-feedback-error);
}

.worlds-cta__form-error {
  margin: 0;
}

.worlds-cta__submit {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.worlds-hero__form-microcopy {
  font-size: 0.8125rem;
  color: var(--sb-color-text-muted);
  margin: 0;
}

.worlds-cta__success-text {
  color: var(--sb-color-text);
  font-size: var(--sb-font-size-lg);
}

/* --- Footer copy --- */

.worlds-footer__name {
  font-weight: 650;
  color: var(--sb-color-text);
}

.worlds-footer__tagline,
.worlds-footer__copyright {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
}

/* "part of" + logo lockup (same asset as the header logo, smaller and
   quieter here, now also a link to simbrace.com) instead of a second
   plain-text "Simbrace" — `aria-label` on the link is the link's
   accessible name (so it announces as "Go to Simbrace", not duplicated
   with the image's own `alt`), and the surrounding "part of" text
   doesn't repeat the brand name either way. Height has gone
   0.9rem -> 1.25rem -> 1.75rem across rounds of feedback (each prior
   size still read as too small) — still well under the header logo's
   3rem / 2.5rem (mobile), but now unmistakably an intentional lockup.
   Alignment is via `inline-flex` centering on the link wrapper, not an
   em-based nudge on the image, since the wrapper is what now sits
   inline with the "part of" text. */
.worlds-footer__tagline-link {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border-radius: var(--sb-radius-sm);
  text-decoration: none;
}

.worlds-footer__tagline-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(85, 221, 251, 0.16);
}

.worlds-footer__tagline-logo {
  display: block;
  height: 1.75rem;
  width: auto;
}

.worlds-footer__nav a {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-secondary);
  transition: color 200ms ease;
}

.worlds-footer__nav a:hover,
.worlds-footer__nav a:focus-visible {
  color: var(--sb-color-text);
}

.worlds-footer__legal a {
  font-size: 0.8125rem;
  color: var(--sb-color-text-muted);
  transition: color 200ms ease;
}

.worlds-footer__legal a:hover,
.worlds-footer__legal a:focus-visible {
  color: var(--sb-color-text-secondary);
}

/* --- Worlds responsive: same logo-size trim as Main at the same
   breakpoint, for the same reason (compact mobile header). --- */

@media (max-width: 640px) {
  .worlds-hero__logo-img {
    height: 2.5rem;
  }

  /* Mobile-only: lighten the dark overlay so the hero video reads as
     brighter on small screens, per v1 polish feedback. Same gradient
     shape/angles as the desktop overlay above, alpha stops scaled down
     ~25-30% — the bottom stop (where hero copy/form sit) is trimmed the
     least so text/field contrast holds up. */
  .worlds-hero__overlay {
    background:
      linear-gradient(
        100deg,
        rgba(4, 6, 11, 0.7) 0%,
        rgba(5, 8, 15, 0.5) 38%,
        rgba(6, 10, 18, 0.26) 65%,
        rgba(6, 10, 18, 0.14) 100%
      ),
      linear-gradient(180deg, rgba(4, 6, 11, 0.07) 0%, rgba(5, 8, 15, 0.3) 65%, rgba(3, 5, 9, 0.8) 100%);
  }
}