:root {
    --space-1: #0d0a3a;
    --space-2: #1d1a7a;
    --space-3: #3530b0;
    --cyan: #9ff3ff;
    --ice: #d8f6ff;
    --gold: #f2c14e;
    --gold-dark: #8a5a12;
    --chrome: linear-gradient(180deg, #ffffff 0%, #c9dcff 38%, #6f86d6 49%, #1b2470 50%, #8ea6f0 56%, #ffffff 78%, #a9b8ee 100%);
    --osd: #f4f4ff;
    --text: #e6e8ff;
    --muted: #a9acdf;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--space-1);
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
    overflow-x: hidden;
  }

  /* ---------- Starfield canvas (fixed behind everything) ---------- */
  #stars {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 45%, #3a36b8 0%, #24208c 40%, #120f55 80%, #0a0830 100%);
  }

  /* ---------- VHS / CRT overlay ---------- */
  .vhs { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
  .vhs.scan {
    background: repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
  }
  .vhs.vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%); }
  #noise { width: 100%; height: 100%; opacity: .045; image-rendering: pixelated; }
  .vhs.tracking::before {
    content: ""; position: absolute; left: 0; right: 0; height: 9vh; top: -10vh;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.07) 40%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.07) 60%, transparent);
    filter: blur(1px);
    animation: tracking 30s linear infinite;
  }
  @keyframes tracking { 0% { top: -10vh; } 14%, 100% { top: 110vh; } }

  /* On-screen display, VCR style */
  .osd {
    position: fixed; z-index: 60; font-family: VT323, monospace; color: var(--osd);
    font-size: clamp(18px, 2.4vw, 28px); letter-spacing: 2px;
    text-shadow: 2px 0 rgba(242,193,78,.65), -2px 0 rgba(0,220,255,.6);
    pointer-events: none;
  }
  .osd.tl { top: 14px; left: 18px; }
  .osd.tr { top: 14px; right: 18px; }
  .osd.bl { bottom: 14px; left: 18px; }
  .osd.br { bottom: 14px; right: 18px; }
  .osd.tc { top: 54px; left: 50%; translate: -50% 0; white-space: pre; opacity: 0; transition: opacity .6s; }
  .osd.tc.on { opacity: 1; }
  .osd.tc.on.away { opacity: 0; }          /* only on the first screen */

  /* top menu, VCR text style */
  .menu ul { list-style: none; display: flex; gap: clamp(14px, 2.2vw, 30px); }
  .menu a { pointer-events: auto; color: inherit; text-decoration: none; }
  .menu a:hover, .menu a:focus-visible { color: var(--cyan); }
  .menu-toggle { display: none; }
  .osd.tc.bump { animation: bump .3s ease-out; }
  @keyframes bump { 40% { transform: scale(1.18); color: var(--cyan); } }
  .osd .blink { animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .osd button {
    pointer-events: auto; font: inherit; color: inherit; background: none; border: 0;
    cursor: pointer; letter-spacing: inherit; text-shadow: inherit;
  }
  .osd button:hover { color: var(--cyan); }
  .osd.lang button { opacity: .45; }
  .osd.lang button[aria-pressed="true"] { opacity: 1; }

  /* ---------- Page wrapper (receives glitch effects) ---------- */
  #screen { position: relative; z-index: 1; }
  body.glitch #screen { animation: glitch-shake .45s steps(2) 1; }
  body.glitch #stars { filter: hue-rotate(80deg) saturate(2); }
  @keyframes glitch-shake {
    0%   { transform: translate(0,0); filter: none; }
    20%  { transform: translate(-14px, 3px) skewX(6deg); filter: hue-rotate(90deg) contrast(1.6); }
    40%  { transform: translate(12px,-2px) skewX(-4deg); filter: saturate(3) brightness(1.4); }
    60%  { transform: translate(-6px, 0) ; filter: hue-rotate(-60deg); clip-path: inset(20% 0 30% 0); }
    80%  { transform: translate(4px, 1px); filter: none; clip-path: none; }
    100% { transform: none; }
  }
  .glitch-bars {
    position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0;
    background:
      linear-gradient(180deg, transparent 0 22%, rgba(0,255,120,.35) 22% 24%, transparent 24% 61%, rgba(242,193,78,.35) 61% 63.5%, transparent 63.5%),
      linear-gradient(90deg, rgba(242,193,78,.08), rgba(0,255,255,.08));
  }
  body.glitch .glitch-bars { animation: bars .45s steps(3) 1; }
  @keyframes bars { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; transform: translateY(-6%); } 50% { transform: translateY(9%); } }

  /* ---------- Hero / ident ---------- */
  .hero {
    min-height: 100svh; display: grid; place-items: center; position: relative;
    padding: 70px 16px 40px; text-align: center; overflow: hidden;
  }
  .stage { position: relative; width: min(92vw, 72vh, 760px); aspect-ratio: 4 / 3; }
  .stage > * { position: absolute; inset: 0; }

  /* Reveal, after the ident: a sparkle swells into a cloud of icy light, the logo shows faintly
     through it, the glow shrinks onto the letter, then a ring at its base flashes and births the star. */

  /* bloom: cloudy ball of icy light, screened over the logo so the 2 reads faintly through it */
  .bloom {
    z-index: 2; mix-blend-mode: screen;
    inset: 46% auto auto 66%; width: 10%; height: 10%; translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(225,252,255,.88) 0%, rgba(200,246,255,.82) 35%, rgba(140,225,255,.65) 55%, rgba(110,130,255,.35) 68%, transparent 74%);
    filter: blur(9px);
    opacity: 0;
  }
  .bloom::before, .bloom::after {
    content: ""; position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(220,250,255,.7) 0%, rgba(150,225,255,.4) 50%, transparent 70%);
  }
  .bloom::before { inset: -6% 30% 20% -14%; animation: wobble 2.3s ease-in-out infinite alternate; }
  .bloom::after  { inset: 25% -12% -8% 35%; animation: wobble 1.9s ease-in-out infinite alternate-reverse; }
  @keyframes wobble { from { transform: translate(-4%, 3%) scale(.92); } to { transform: translate(5%, -4%) scale(1.08); } }
  .play .bloom { animation: bloom 3.4s linear .5s forwards; }
  @keyframes bloom {
    0%   { opacity: 0;  width: 3%;  height: 4%; animation-timing-function: cubic-bezier(.2,.6,.3,1); }
    35%  { opacity: 1;  width: 68%; height: 86%; border-radius: 52% 48% 50% 50%; animation-timing-function: cubic-bezier(.45,0,.3,1); }
    100% { opacity: 0;  width: 34%; height: 58%; border-radius: 46% 54% 50% 50%; }
  }

  /* chrome "2": ghosts in inside the light, then its glow tightens onto the letter */
  .two { opacity: 0; }
  .two svg { width: 100%; height: 100%; overflow: visible; }
  .play .two { animation: two-fade 1.2s ease-out 1.3s forwards, two-focus 2.6s cubic-bezier(.45,0,.25,1) 1.3s forwards; }
  @keyframes two-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes two-focus {
    from { filter: brightness(3) blur(8px) drop-shadow(0 0 40px rgba(170,240,255,.9)); }
    to   { filter: brightness(1) blur(0)   drop-shadow(0 0 0 rgba(170,240,255,0)); }
  }
  .sheen { transform: translateX(-420px); }
  .play .sheen { animation: sheen 1.2s ease-in-out 4.7s forwards, sheen-loop 1.4s ease-in-out 14s infinite; }
  @keyframes sheen { to { transform: translateX(520px); } }
  @keyframes sheen-loop { 0% { transform: translateX(-420px); } 15%, 100% { transform: translateX(520px); } }

  /* the flash: a glowing ring at the base of the 2 swells into a burst that births the star */
  .flash {
    z-index: 4;
    inset: 73% auto auto 66%; width: 9%; height: 12%; translate: -50% -50%;
    border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, rgba(210,240,255,.35) 0 26%, #fff 38% 54%, rgba(200,230,255,.7) 63%, transparent 72%);
    filter: blur(2px);
  }
  .play .flash { animation: flash 1.3s linear 3.3s forwards; }
  @keyframes flash {
    0%   { opacity: 0; width: 3%;  height: 4%;  top: 73%; filter: blur(2px);  animation-timing-function: cubic-bezier(.5,0,.9,.6); }
    30%  { opacity: 1; width: 12%; height: 16%; top: 71%; filter: blur(3px);  animation-timing-function: cubic-bezier(.1,.5,.4,1); }
    70%  { opacity: 1; width: 70%; height: 94%; top: 47%; filter: blur(9px);  animation-timing-function: ease-in; }
    100% { opacity: 0; width: 72%; height: 96%; top: 46%; filter: blur(12px); }
  }

  /* Starlight-Express-style star: comet trail of outlines + light beam, sharing the 2's SVG.
     Like the wreath in the ident, it simply emerges white-hot out of the flash. */
  .star { filter: drop-shadow(0 0 5px rgba(255,210,110,.75)) drop-shadow(0 0 18px rgba(230,160,40,.45)); }
  .star .copy { fill: none; stroke-width: 2.4; opacity: 0; vector-effect: non-scaling-stroke; }
  .play .star .copy { animation: pop .7s ease-out forwards; animation-delay: calc(4s + var(--i) * 5ms); }
  @keyframes pop { from { opacity: 0; } to { opacity: var(--o); } }
  .star .front { opacity: 0; }
  .play .star .front { animation: emerge .8s ease-out 4.05s forwards; }
  @keyframes emerge { from { opacity: 0; filter: brightness(4) blur(5px); } to { opacity: 1; filter: none; } }
  .beam { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); filter: blur(5px); }
  .play .beam { animation: beam .8s cubic-bezier(.2,.7,.2,1) 4.35s forwards; }
  @keyframes beam { to { transform: scaleX(1); } }

  /* "Estudio": airbrushed pink neon, no outline, also born from the flash */
  .script { font-family: "Mr Dafoe", cursive; font-size: 178px; opacity: 0; }
  .play .script { animation: emerge .9s ease-out 4.1s forwards; }
  .script .face { filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 9px rgba(190,230,255,.8)) drop-shadow(0 0 26px rgba(50,120,240,.65)); }
  .play .script .face { animation: neon 1.6s steps(1) 5s 1; }
  @keyframes neon { 0%, 20%, 40%, 100% { opacity: 1; } 10%, 30% { opacity: .45; } }

  /* glints: 4-point stars */
  .glint {
    inset: auto; width: 16%; aspect-ratio: 1; opacity: 0; translate: -50% -50%;
    background:
      radial-gradient(circle, #fff 0 6%, rgba(255,255,255,.6) 12%, transparent 30%),
      linear-gradient(90deg, transparent 47%, #fff 50%, transparent 53%) center / 100% 8% no-repeat,
      linear-gradient(0deg,  transparent 47%, #fff 50%, transparent 53%) center / 8% 100% no-repeat;
  }
  .glint.g0 { left: 66%; top: 46%; width: 14%; z-index: 3; }
  .glint.g1 { left: 83%; top: 19%; }
  .glint.g2 { left: 66%; top: 4%; width: 10%; }
  .play .glint { animation: glint 1.1s ease-in-out forwards; }
  .play .glint.g0 { animation: glint .9s ease-in-out .2s forwards; }
  .play .glint.g1 { animation: glint 1.1s ease-in-out 5.1s forwards, glint 1.1s ease-in-out 10s infinite; }
  .play .glint.g2 { animation: glint 1.1s ease-in-out 5.6s forwards, glint 1.4s ease-in-out 13s infinite; }
  @keyframes glint { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.1) rotate(45deg); } 100% { opacity: 0; transform: scale(.3) rotate(90deg); } }

  .chrome-text {
    font-family: "Russo One", sans-serif; text-transform: uppercase;
    background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 #1a1f66) drop-shadow(0 0 14px rgba(120,170,255,.45));
  }
  .cta {
    display: inline-block; margin-top: 22px; opacity: 0;
    font-family: VT323, monospace; font-size: 26px; letter-spacing: 4px; color: #fff; text-decoration: none;
    padding: 8px 22px; border: 2px solid rgba(200,220,255,.7);
    background: rgba(20,20,90,.45); box-shadow: 0 0 18px rgba(120,200,255,.35), inset 0 0 12px rgba(120,200,255,.25);
  }
  .cta:hover { background: rgba(160,230,255,.15); color: var(--cyan); }
  .play .cta { animation: fade .8s ease-out 5.4s forwards, pulse 1.6s ease-in-out 6.4s infinite; }
  @keyframes fade { to { opacity: 1; } }
  @keyframes pulse { 50% { box-shadow: 0 0 34px rgba(150,230,255,.7), inset 0 0 18px rgba(150,230,255,.4); } }

  /* ---------- Content sections ---------- */
  section.panel {
    position: relative; padding: clamp(70px, 12vh, 130px) 16px;
    max-width: 1100px; margin: 0 auto;
  }
  h2 {
    font-family: "Russo One", sans-serif; font-size: clamp(34px, 6vw, 64px); line-height: 1.05;
    margin: 8px 0 22px; letter-spacing: .04em; text-transform: uppercase; color: #fff;
    text-shadow: 3px 0 rgba(242,193,78,.6), -3px 0 rgba(0,220,255,.55), 0 0 22px rgba(130,160,255,.5);
  }
  p.lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.65; color: var(--text); max-width: 64ch; }

  /* reveal with RGB-split glitch */
  .reveal { opacity: 0; transform: translateY(24px); }
  .reveal.in { animation: reveal .9s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes reveal {
    0%   { opacity: 0; transform: translate(-10px, 24px) skewX(8deg); filter: drop-shadow(8px 0 #f2c14e) drop-shadow(-8px 0 #0ff); }
    30%  { opacity: 1; transform: translate(8px, 6px) skewX(-4deg); }
    50%  { transform: translate(-3px, 0); filter: drop-shadow(3px 0 #f2c14e) drop-shadow(-3px 0 #0ff); }
    100% { opacity: 1; transform: none; filter: none; }
  }

  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-top: 40px; }
  .stat {
    border: 1px solid rgba(170,190,255,.35); padding: 22px;
    background: linear-gradient(180deg, rgba(40,40,140,.55), rgba(15,12,60,.55));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  }
  .stat b { display: block; font-family: "Russo One", sans-serif; font-size: 44px; line-height: 1; }
  .stat span { font-family: VT323, monospace; font-size: 22px; color: var(--muted); letter-spacing: 2px; }

  /* program guide */
  .guide { margin-top: 36px; display: grid; gap: 18px; }
  .show {
    display: grid; grid-template-columns: 170px 1fr auto; gap: 22px; align-items: center;
    padding: 18px; border: 1px solid rgba(170,190,255,.3);
    background: rgba(18,16,70,.6); backdrop-filter: blur(2px);
    transition: transform .25s, border-color .25s, box-shadow .25s;
  }
  .show:hover { transform: translateX(6px); border-color: var(--cyan); box-shadow: -6px 0 0 var(--cyan), 0 0 30px rgba(120,220,255,.25); }
  .cover {
    aspect-ratio: 4/3; position: relative; overflow: hidden; border: 2px solid rgba(255,255,255,.25);
    display: grid; place-items: center; font-family: "Russo One", sans-serif; font-size: 34px; color: #fff;
    text-shadow: 0 0 12px rgba(255,255,255,.7);
  }
  .cover::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); }
  .c1 { background: linear-gradient(180deg, #1b0b4a 0%, #e0337a 55%, #ffb347 56%, #2a0f5a 57%, #12082f 100%); }
  .c2 { background: radial-gradient(circle at 50% 60%, #8df 0%, #2a5bd7 35%, #0d0a3a 75%); }
  .c3 { background: conic-gradient(from 45deg, #f2c14e, #8a5a12, #f2c14e, #3a2a08, #f2c14e); }
  .c4 { background: linear-gradient(135deg, #0d2a63 0%, #2f6fd6 49%, #dcecff 50%, #3f78d0 51%, #120f55 100%); }
  .show h3 { font-family: "Russo One", sans-serif; font-size: 24px; letter-spacing: .05em; text-transform: uppercase; }
  .show p { color: var(--muted); margin-top: 6px; line-height: 1.5; }
  .time { font-family: VT323, monospace; font-size: 20px; color: var(--cyan); letter-spacing: 2px; }
  .status {
    font-family: VT323, monospace; font-size: 20px; letter-spacing: 2px; padding: 4px 10px; white-space: nowrap;
    border: 1px solid currentColor;
  }
  .status.live { color: #ff5f8a; } .status.live::before { content: "● "; animation: blink 1s steps(1) infinite; }
  .status.soon { color: var(--gold); }
  .status.idea { color: var(--muted); }

  /* contact */
  .signup { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; max-width: 560px; }
  .signup input {
    flex: 1 1 260px; padding: 14px 16px; font-family: VT323, monospace; font-size: 24px; letter-spacing: 2px;
    background: rgba(5,5,30,.7); color: #fff; border: 2px solid rgba(170,190,255,.5); outline: none;
  }
  .signup input:focus { border-color: var(--cyan); box-shadow: 0 0 16px rgba(120,220,255,.4); }
  .signup button { flex: 0 0 auto; cursor: pointer; opacity: 1; margin: 0; animation: none !important; }
  .msg { font-family: VT323, monospace; font-size: 24px; color: var(--cyan); margin-top: 14px; min-height: 1.2em; letter-spacing: 2px; }
  .mail { color: var(--ice); }

  footer { position: relative; z-index: 1; text-align: center; padding: 0 16px 70px; }
  .bars { display: flex; height: 70px; max-width: 1100px; margin: 0 auto 22px; }
  .bars i { flex: 1; }
  footer p { font-family: VT323, monospace; font-size: 22px; letter-spacing: 3px; color: var(--muted); }
  .social { display: flex; justify-content: center; gap: 22px; margin: 0 0 22px; }
  .social a { color: var(--osd); display: grid; place-items: center; width: 44px; height: 44px;
    filter: drop-shadow(1.5px 0 rgba(242,193,78,.65)) drop-shadow(-1.5px 0 rgba(0,220,255,.6)); transition: color .2s, transform .2s; }
  .social a:hover, .social a:focus-visible { color: var(--cyan); transform: translateY(-2px); }
  .social svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  @media (max-width: 680px) {
    .show { grid-template-columns: 1fr; }
    .osd.bl { display: none; }
    .osd.tc { top: 44px; font-size: 18px; }
  }
  @media (max-width: 760px) {
    .menu-toggle { display: inline; }
    .menu ul { display: none; flex-direction: column; gap: 10px; text-align: right; margin-top: 10px;
      background: rgba(10,8,48,.85); border: 1px solid rgba(170,190,255,.35); padding: 12px 16px; }
    .menu.open ul { display: flex; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
    .reveal { opacity: 1; transform: none; }
    .osd.tc { display: none; }
  }

  /* ---------- shared across pages ---------- */
  .osd.tl a { pointer-events: auto; color: inherit; text-decoration: none; }
  .osd.tl a:hover { color: var(--cyan); }
  .menu a[aria-current="page"] { color: var(--cyan); }
  /* subpages: one section, clear of the top bar */
  .page { min-height: 72vh; padding-top: clamp(110px, 16vh, 160px); }

  /* about: team profiles */
  .label { font-family: VT323, monospace; font-weight: 400; font-size: 26px; letter-spacing: 4px; color: var(--cyan); margin: 48px 0 18px; }
  .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
  .member { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; padding: 20px;
    border: 1px solid rgba(170,190,255,.3); background: rgba(18,16,70,.6); }
  .avatar { aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--gold);
    background: radial-gradient(circle at 50% 40%, #3a36b8, #120f55 75%); box-shadow: 0 0 18px rgba(242,193,78,.35); }
  .avatar span { font-size: 40px; }
  .member h4 { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; }
  .member .role { font-family: VT323, monospace; font-size: 21px; letter-spacing: 2px; color: var(--cyan); margin: 4px 0 8px; }
  .member .mail { font-size: 15px; }

  /* contact: message form */
  .message { display: grid; gap: 12px; margin-top: 28px; max-width: 640px; }
  .message input, .message textarea {
    width: 100%; padding: 14px 16px; font-family: VT323, monospace; font-size: 24px; letter-spacing: 2px;
    background: rgba(5,5,30,.7); color: #fff; border: 2px solid rgba(170,190,255,.5); outline: none; resize: vertical; }
  .message input:focus, .message textarea:focus { border-color: var(--cyan); box-shadow: 0 0 16px rgba(120,220,255,.4); }
  .message button { justify-self: start; cursor: pointer; opacity: 1; margin: 0; animation: none !important; }
  .message button:disabled { opacity: .5; cursor: wait; }

  /* investors: deck button */
  .cta.deck { opacity: 1; animation: none; margin-top: 32px; }
  @media (max-width: 680px) { .member { grid-template-columns: 80px 1fr; } .avatar span { font-size: 30px; } }