:root {
    --bg: #0b0b0c;
    --ink: #f2f2f0;
    --dim: #6b6b6e;
    --hairline: rgba(242,242,240,0.18);
    --shadowBg: rgba(11,11,12,0.95);
    --chipBg: rgba(11,11,12,0.55);
    --chipBgHover: rgba(11,11,12,0.75);
  }
  html[data-theme="light"] {
    --bg: #f4f3ee;
    --ink: #0b0b0c;
    --dim: #6e6e72;
    --hairline: rgba(11,11,12,0.18);
    --shadowBg: rgba(244,243,238,0.95);
    --chipBg: rgba(244,243,238,0.6);
    --chipBgHover: rgba(244,243,238,0.85);
  }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    height: 100%; width: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background 260ms ease, color 260ms ease;
  }
  .stage { position: fixed; inset: 0; overflow: hidden; }

  canvas#scene {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
  }

  /* World-positioned wordmark (moves with the space). */
  .world-content {
    position: absolute;
    left: 0; top: 0;
    transform: translate3d(-9999px, -9999px, 0);
    will-change: transform;
    z-index: 3;
    text-align: center;
    pointer-events: none;
  }
  .world-content .inner { transform: translate(-50%, -50%); max-width: min(92vw, 820px); }

  .eyebrow {
    font-weight: 500;
    font-size: clamp(10px, 1vw, 11px);
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 0 0 clamp(20px, 3vh, 28px);
    text-shadow: 0 0 18px var(--shadowBg);
  }

  h1 {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: clamp(38px, 6.6vw, 92px);
    line-height: 1;
    letter-spacing: -0.035em;
    margin: 0;
    color: var(--ink);
    white-space: nowrap;
    text-shadow: 0 0 30px var(--shadowBg), 0 0 2px var(--shadowBg);
  }
  h1 .llc {
    display: inline-block;
    font-weight: 500;
    font-size: 0.26em;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    vertical-align: 0.9em;
    color: var(--dim);
    margin-left: 0.7em;
  }
  /* The V is a spacer that reserves room — canvas renders the rocket in its slot. */
  h1 .vslot {
    display: inline-block;
    position: relative;
    /* width measured dynamically; keep padding so the slot is always present */
  }
  h1 .vslot .vChar {
    visibility: hidden; /* reserves width; ship replaces it on canvas */
  }

  .cta-wrap { margin-top: clamp(28px, 4.6vh, 44px); display: flex; justify-content: center; }
  .cta {
    pointer-events: auto;
    position: relative;
    display: inline-flex; align-items: center; gap: 14px;
    padding: 13px 24px;
    background: var(--chipBg);
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font: 500 11.5px/1 "Inter", sans-serif;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(2px);
    transition: border-color 240ms ease, color 240ms ease, transform 240ms cubic-bezier(.2,.7,.2,1), background 240ms ease;
  }
  .cta:hover { border-color: var(--ink); transform: translateY(-1px); background: var(--chipBgHover); }
  .cta .arrow { width: 12px; height: 12px; transition: transform 220ms ease; }
  .cta:hover .arrow { transform: translateX(3px); }

  /* Corner marks */
  .mark {
    position: fixed;
    font: 500 10px/1 "Inter", sans-serif;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dim);
    z-index: 4;
    pointer-events: none;
  }
  .mark.tl { top: 22px; left: 24px; }
  .mark.bl { bottom: 22px; left: 24px; }
  .mark.br { bottom: 22px; right: 24px; }
  .mark .v { color: var(--ink); font-weight: 500; }

  .controls {
    position: fixed;
    top: 16px; right: 20px;
    z-index: 5;
    display: flex; gap: 8px;
  }
  .chip {
    background: var(--chipBg);
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 9px 14px;
    font: 500 10.5px/1 "Inter", sans-serif;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 9px;
    backdrop-filter: blur(2px);
    transition: border-color 200ms ease, transform 200ms ease, background 200ms ease, color 200ms ease;
  }
  .chip:hover { border-color: var(--ink); transform: translateY(-1px); background: var(--chipBgHover); }
  .chip .ring {
    width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 999px;
    display: inline-block; position: relative;
  }
  .chip .ring::before {
    content: ''; position: absolute; inset: 2px; border-radius: 999px; background: currentColor;
  }
  .chip .sun {
    width: 10px; height: 10px; border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px currentColor;
    display: inline-block;
  }
  html[data-theme="light"] .chip .sun {
    background: transparent;
    box-shadow: inset 0 0 0 1.25px currentColor;
  }

  /* Contact modal */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 10; opacity: 0;
    transition: opacity 220ms ease;
  }
  html[data-theme="light"] .modal-backdrop { background: rgba(244,243,238,0.7); }
  .modal-backdrop.open { display: flex; opacity: 1; }
  .modal {
    background: var(--bg);
    border: 1px solid var(--hairline);
    padding: 34px 34px 28px;
    width: min(92vw, 440px);
    text-align: left;
    transform: translateY(8px);
    transition: transform 260ms cubic-bezier(.2,.7,.2,1);
    font-family: "Inter", sans-serif;
  }
  .modal-backdrop.open .modal { transform: translateY(0); }
  .modal h2 { margin: 0 0 6px; font-weight: 400; font-size: 26px; letter-spacing: -0.02em; }
  .modal p { margin: 0 0 22px; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
  .row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 12.5px; }
  .row:last-of-type { border-bottom: 1px solid var(--hairline); }
  .row .k { text-transform: uppercase; letter-spacing: 0.24em; font-size: 10.5px; color: var(--dim); }
  .row .v { font-weight: 500; }
  .row a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
  .row a:hover { border-bottom-color: var(--ink); }
  .close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: 0; cursor: pointer;
    font: 500 10.5px/1 "Inter", sans-serif;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink); padding: 8px;
  }
  .modal-shell { position: relative; }

  /* ---------- Mobile (coarse pointer or narrow viewport) ---------- */
  /* All mobile styling is scoped under body.is-mobile so desktop is untouched. */
  .mobile-only { display: none; }
  body.is-mobile .mobile-only { display: block; }

  body.is-mobile .mark.tl,
  body.is-mobile .mark.bl,
  body.is-mobile .controls,
  body.is-mobile .eyebrow,
  body.is-mobile .cta-wrap { display: none; }

  body.is-mobile .world-content .inner { max-width: 92vw; }
  body.is-mobile h1 { font-size: clamp(48px, 16vw, 104px); letter-spacing: -0.04em; white-space: nowrap; }
  body.is-mobile h1 .wm-rest { display: none; }
  body.is-mobile h1 .llc { font-size: 11px; margin-left: 6px; vertical-align: top; margin-top: 6px; }
  body.is-mobile .mark.br { top: auto; bottom: 12px; right: 12px; font-size: 9.5px; }

  /* Mobile menu button + panel (top-right) */
  .m-menu { position: absolute; top: 14px; right: 14px; z-index: 6; }
  .m-menu-btn {
    width: 40px; height: 40px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; background: none; border: 1px solid var(--hairline); cursor: pointer;
    color: var(--ink); padding: 0;
  }
  .m-menu-btn span { display: block; width: 16px; height: 1px; background: currentColor; }
  .m-menu-panel {
    position: absolute; top: 48px; right: 0;
    min-width: 220px;
    background: var(--bg);
    border: 1px solid var(--hairline);
    padding: 10px;
    display: none;
    font-family: "Inter", sans-serif;
  }
  .m-menu.open .m-menu-panel { display: block; }
  .m-menu-panel .eyebrow-m {
    font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--dim); padding: 6px 8px 10px;
    border-bottom: 1px solid var(--hairline);
  }
  .m-menu-panel .m-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 8px;
    background: none; border: 0; cursor: pointer;
    color: var(--ink); text-align: left;
    font: 500 11.5px/1 "Inter", sans-serif; letter-spacing: 0.08em;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
  }
  .m-menu-panel .m-item:last-child { border-bottom: 0; }
  .m-menu-panel .m-item .arrow { width: 10px; height: 10px; opacity: 0.6; }

  /* Virtual joystick (bottom-left) */
  .joystick {
    position: absolute; left: 22px; bottom: 22px;
    width: 120px; height: 120px;
    border: 1px solid var(--hairline); border-radius: 50%;
    touch-action: none;
    z-index: 5;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
  }
  .joystick .knob {
    position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px;
    margin-left: -22px; margin-top: -22px;
    border: 1px solid var(--ink); border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    pointer-events: none;
    transition: transform 60ms linear;
  }
  .joystick .axis {
    position: absolute; inset: 0;
    background:
      linear-gradient(to right, transparent 49.5%, var(--hairline) 49.5%, var(--hairline) 50.5%, transparent 50.5%),
      linear-gradient(to bottom, transparent 49.5%, var(--hairline) 49.5%, var(--hairline) 50.5%, transparent 50.5%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
  }

  /* Fire button (bottom-right) */
  .fire-btn {
    position: absolute; right: 22px; bottom: 22px;
    width: 84px; height: 84px;
    border: 1px solid var(--ink); border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    color: var(--ink);
    font: 500 10.5px/1 "Inter", sans-serif; letter-spacing: 0.28em; text-transform: uppercase;
    cursor: pointer; touch-action: none;
    z-index: 5;
  }
  .fire-btn:active { background: color-mix(in srgb, var(--ink) 18%, transparent); }

  /* Desktop hint for mobile users */
  .desktop-hint { display: none; }
  body.is-mobile .desktop-hint {
    display: block;
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    font: 500 9.5px/1 "Inter", sans-serif; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--dim); z-index: 4; pointer-events: none; white-space: nowrap;
  }

  /* Modal as bottom sheet on mobile */
  body.is-mobile .modal-backdrop { align-items: flex-end; }
  body.is-mobile .modal {
    width: 100vw; max-width: 100vw;
    padding: 24px 22px 34px;
    border-left: 0; border-right: 0; border-bottom: 0;
    transform: translateY(40px);
  }
  body.is-mobile .modal-backdrop.open .modal { transform: translateY(0); }

  /* Landscape phone: slightly tighter controls */
  @media (max-height: 520px) and (orientation: landscape) {
    body.is-mobile .joystick { width: 96px; height: 96px; left: 16px; bottom: 16px; }
    body.is-mobile .joystick .knob { width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; }
    body.is-mobile .fire-btn { width: 68px; height: 68px; right: 16px; bottom: 16px; }
    body.is-mobile h1 { font-size: clamp(40px, 10vw, 72px); }
  }