:root {
  --bg: #050a10;
  --bg-2: #070e17;
  --panel: rgba(9, 18, 29, 0.72);
  --panel-strong: #09131f;
  --line: rgba(133, 234, 248, 0.16);
  --line-strong: rgba(133, 234, 248, 0.34);
  --text: #f7fbff;
  --muted: #98a9bb;
  --cyan: #09f5ff;
  --ice: #85eaf8;
  --violet: #9474f5;
  --kick: #53fc18;
  --twitch: #9146ff;
  --radius: 22px;
  --shell: min(1180px, calc(100% - 40px));
  --display: "Exo 2", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  background: var(--bg);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(9, 245, 255, .08), transparent 26rem),
    radial-gradient(circle at 90% 45%, rgba(148, 116, 245, .08), transparent 24rem),
    var(--bg);
  font-family: var(--body);
  line-height: 1.6;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Keep decorative transforms and full-bleed backgrounds from creating a
   horizontal scroll area on narrow screens. */
main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(rgba(133,234,248,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133,234,248,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 0 65%, transparent);
}

::selection { background: rgba(9,245,255,.25); color: #fff; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }

.page-noise {
  position: fixed;
  inset: 0;
  opacity: .055;
  pointer-events: none;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.section-shell {
  width: var(--shell);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}
.section-pad { padding-block: 112px; }

.site-header {
  position: fixed;
  z-index: 50;
  top: 18px;
  left: 50%;
  width: min(1180px, calc(100% - 28px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 11px 12px 11px 16px;
  border: 1px solid rgba(133,234,248,.14);
  border-radius: 999px;
  background: rgba(5,10,16,.74);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 14px 50px rgba(0,0,0,.28);
}
.brand, .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 600 .92rem/1 var(--display);
  letter-spacing: .19em;
}
.brand img { filter: drop-shadow(0 0 12px rgba(9,245,255,.28)); }
.nav { justify-self: right; display: flex; gap: 28px; }
.nav a {
  color: #a9b7c6;
  text-decoration: none;
  font-size: .83rem;
  transition: color .2s ease;
}
.nav a:hover { color: #fff; }
.nav-cta {
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 999px;
  background: #effdff;
  color: #071018;
  font-size: .78rem;
  font-weight: 700;
}

.hero {
  position: relative;
  min-height: 820px;
  display: flex;
  align-items: center;
  padding-top: 125px;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  z-index: -4;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  width: 100dvw;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(5,10,16,.98) 0%, rgba(5,10,16,.88) 38%, rgba(5,10,16,.72) 70%, rgba(5,10,16,.92) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 36%),
    radial-gradient(circle at 72% 38%, rgba(9,245,255,.09), transparent 27rem),
    radial-gradient(circle at 88% 58%, rgba(148,116,245,.07), transparent 23rem),
    linear-gradient(rgba(133,234,248,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133,234,248,.055) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, auto, auto, 48px 48px, 48px 48px, auto;
  background-position: center;
}
.hero-grid {
  position: absolute;
  z-index: -3;
  inset: 12% 0 0;
  background: radial-gradient(ellipse at 65% 45%, rgba(9,245,255,.12), transparent 33%);
}
.hero-copy { width: min(760px, 70%); min-width: 0; position: relative; z-index: 2; }
.eyebrow, .section-kicker, .project-label, .org-eyebrow {
  font: 600 .72rem/1.1 var(--display);
  letter-spacing: .22em;
  color: var(--ice);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 8px 10px;
  margin-top: 20px;
}
.eyebrow span { width: 4px; height: 4px; border-radius: 99px; background: var(--violet); box-shadow: 0 0 9px var(--violet); }
.hero-logo {
  width: clamp(300px, 42vw, 560px);
  margin: 28px 0 26px;
  /* The source SVG includes intentional whitespace on its left side. Offset the
     image by that same proportion so the visible mark aligns with the hero copy
     at every rendered size without modifying the logo artwork. */
  transform: translateX(-14.5%);
  filter: drop-shadow(0 0 24px rgba(9,245,255,.08));
}
.hero h1, .about h2, .live h2, .project h2, .socials h2, .org-card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
}
.hero h1 {
  font-size: clamp(3.3rem, 7vw, 6.7rem);
  line-height: .98;
  text-wrap: balance;
}
.hero h1 span {
  /* Keep the outlined look, but use an opaque interior so the animated
     orbit/grid can never show through the letterforms. */
  display: inline-block;
  position: relative;
  color: #c9f8ff;
  -webkit-text-fill-color: #c9f8ff;
  -webkit-text-stroke: 1px rgba(9,245,255,.88);
  paint-order: stroke fill;
  letter-spacing: -.025em;
  text-shadow: 0 0 22px rgba(9,245,255,.20), 0 0 2px rgba(255,255,255,.28);
  white-space: nowrap;
}
.hero h1 span::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.06em -.10em;
  border-radius: .16em;
  background: rgba(5,10,16,.68);
  filter: blur(12px);
  pointer-events: none;
}
.hero-lede { max-width: 640px; margin: 27px 0 0; color: #b2c0cf; font-size: clamp(1rem, 1.7vw, 1.14rem); }
.hero-actions, .project-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-lede,
.about-copy,
.project-copy,
.social-card,
.org-card,
.site-footer {
  overflow-wrap: anywhere;
}
.hero-actions .btn,
.project-actions .btn {
  max-width: 100%;
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 0 19px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 650;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: #051016;
  background: linear-gradient(135deg, #eaffff, #8df3ff);
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(9,245,255,.12);
}
.btn-primary:hover { box-shadow: 0 14px 35px rgba(9,245,255,.21); }
.btn-ghost { color: #e9f7fa; background: rgba(7,14,23,.62); }
.btn-ghost:hover { border-color: rgba(133,234,248,.58); background: rgba(12,27,40,.82); }
.hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; margin-top: 45px; color: #708397; font: 500 .67rem/1 var(--display); letter-spacing: .16em; }
.hero-meta i { display: block; width: 3px; height: 3px; background: var(--cyan); border-radius: 100%; box-shadow: 0 0 7px var(--cyan); }

/* Adjust this opacity to make the full-width background more or less visible. */
.hero-media {
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  opacity: .18;
  background: url("assets/hero-background.jpg") center / cover no-repeat;
}
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 700px) {
  .hero-media { background-position: 30% center; }
  .hero-video { object-position: 30% center; }
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(0deg, var(--bg), transparent 28%),
    linear-gradient(90deg, rgba(5,10,16,.35), transparent 75%);
}
.hero-motion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 18px;
  z-index: 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5,10,16,.75);
  color: #b2c0cf;
  padding: 7px 10px;
  font: inherit;
  font-size: .7rem;
  cursor: pointer;
}
.hero-motion[hidden] { display: none; }
.hero-motion:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 700px) {
  .hero-motion {
    padding: 4px 7px;
    font-size: .625rem;
    line-height: 1.4;
    border-radius: 6px;
  }
}

.section-kicker { margin-bottom: 22px; }
.about { border-top: 1px solid var(--line); }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 120px); }
.about-layout > *, .live-head > *, .project-card > *, .socials > *, .org-card > * { min-width: 0; }
.about h2, .live h2, .socials h2 { font-size: clamp(2.5rem, 5vw, 4.8rem); }
.about-copy { color: #aab9c8; font-size: 1.02rem; }
.about-copy p:first-child { margin-top: 0; }
.about-copy strong { color: #fff; font-weight: 600; }
.pill-row, .tech-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.pill-row span, .tech-row span {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #a8bacb;
  background: rgba(7,14,23,.52);
  font-size: .72rem;
}

.live { border-top: 1px solid var(--line); }
.live-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.live-head p { margin: 12px 0 0; color: var(--muted); }
.platform-toggle {
  display: inline-flex;
  gap: 5px;
  padding: 5px;
  background: rgba(8,17,27,.8);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.platform-btn {
  border: 0;
  background: transparent;
  color: #8293a4;
  font: 600 .82rem/1 var(--body);
  padding: 11px 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.platform-btn.active { color: #fff; background: rgba(255,255,255,.07); }
.platform-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; }
.kick-dot { background: var(--kick); box-shadow: 0 0 10px rgba(83,252,24,.55); }
.twitch-dot { background: var(--twitch); box-shadow: 0 0 10px rgba(145,70,255,.55); }
.stream-shell {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #020509;
  box-shadow: 0 40px 100px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.025);
}
.stream-toolbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.065);
  background: linear-gradient(90deg, rgba(9,245,255,.025), rgba(148,116,245,.025));
}
.stream-status { display: flex; align-items: center; gap: 9px; color: #8fa2b4; font: 600 .68rem/1 var(--display); letter-spacing: .13em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff3e69; box-shadow: 0 0 10px rgba(255,62,105,.65); }
.open-platform { color: #8497a9; text-decoration: none; font-size: .72rem; }
.open-platform:hover { color: #fff; }
.stream-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; min-height: 540px; }
.player-frame, .chat-frame { min-width: 0; background: #000; }
.chat-frame { border-left: 1px solid rgba(255,255,255,.065); background: #0b0d0f; }
.player-frame iframe, .chat-frame iframe { width: 100%; height: 100%; min-height: 540px; display: block; border: 0; }
.embed-note { color: var(--muted); padding: 20px; }

.project { border-top: 1px solid var(--line); }
.project-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, .8fr) 1.35fr;
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  background: linear-gradient(130deg, rgba(9,22,34,.88), rgba(6,12,20,.98));
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(9,245,255,.035), transparent 38%, rgba(148,116,245,.04));
}
.project-visual { min-height: 440px; position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--line); }
.project-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(133,234,248,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133,234,248,.04) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle, #000, transparent 72%);
}
.project-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; background: rgba(9,245,255,.12); filter: blur(55px); }
.project-visual img { position: relative; width: min(62%, 235px); border-radius: 30px; box-shadow: 0 35px 90px rgba(0,0,0,.5), 0 0 50px rgba(9,245,255,.10); }
.project-copy { position: relative; z-index: 1; padding: clamp(38px, 5vw, 66px); align-self: center; }
.project h2 { font-size: clamp(2.7rem, 5vw, 5rem); margin-top: 14px; }
.project-copy > p { color: #a9bac9; max-width: 670px; }
.project-note { font-size: .72rem; color: #64778a !important; margin-top: 26px; }

.socials { border-top: 1px solid var(--line); }
.socials { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.socials-copy { position: static; }
.socials-copy p { color: var(--muted); }
.social-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.social-card {
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8,17,27,.67);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.social-card:hover { transform: translateY(-3px); border-color: rgba(133,234,248,.42); background: rgba(11,26,39,.88); }
.social-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.social-name { font: 600 .78rem/1 var(--display); letter-spacing: .12em; }
.social-arrow { color: #6e8296; }
.social-handle { color: #93a5b7; font-size: .78rem; }
.social-accent { width: 24px; height: 2px; border-radius: 99px; margin-top: 14px; background: var(--social-color, var(--cyan)); box-shadow: 0 0 12px var(--social-color, var(--cyan)); }
.org-card {
  grid-column: 1 / -1;
  margin-top: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 34px;
  padding: 28px;
  border: 1px solid rgba(148,116,245,.25);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(148,116,245,.06), rgba(9,245,255,.035));
}
.org-card h3 { margin: 9px 0; font-size: clamp(1.6rem, 3vw, 2.7rem); }
.org-card p { margin: 0; color: var(--muted); }
.org-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.org-links a { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: #b7c5d2; text-decoration: none; font-size: .76rem; }
.org-links a:hover { color: #fff; border-color: var(--line-strong); }

.site-footer {
  min-height: 150px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
  color: #687b8e;
  font-size: .76rem;
}
.site-footer p { justify-self: center; }
.footer-mark { justify-self: end; color: #7f96a8; font: 500 .67rem/1 var(--display); letter-spacing: .2em; }

.reveal { opacity: 0; transform: translateY(16px); animation: reveal .7s ease forwards; }
.delay-1 { animation-delay: .12s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero-copy { width: 82%; }
  .stream-layout { grid-template-columns: 1fr; }
  .chat-frame { border-left: 0; border-top: 1px solid rgba(255,255,255,.065); }
  .chat-frame iframe { min-height: 470px; }
  .project-card { grid-template-columns: 1fr; }
  .project-visual { min-height: 320px; border-right: 0; border-bottom: 1px solid var(--line); }
  .project-visual img { width: min(40%, 190px); }
  .socials { grid-template-columns: 1fr; gap: 32px; }
  .socials-copy { position: static; }
}

@media (max-width: 720px) {
  :root { --shell: min(100% - 24px, 1180px); }
  .section-pad { padding-block: 78px; }
  .site-header { top: 10px; width: calc(100% - 18px); }
  .brand span { font-size: .76rem; }
  .nav-cta { padding-inline: 13px; }
  .hero { min-height: 760px; padding-top: 112px; align-items: flex-start; }
  .hero-copy { width: 100%; }
  .hero-logo { width: 88%; margin-top: 24px; }
  .hero h1 {
    margin-top: 10px;
    font-size: clamp(2.75rem, 14vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.025em;
  }
  .hero h1 span {
    max-width: 100%;
    white-space: normal;
  }
  .hero-lede { font-size: .96rem; }
  .hero-meta { gap: 8px; font-size: .58rem; }
  .about-layout { grid-template-columns: 1fr; gap: 28px; }
  .live-head { align-items: flex-start; flex-direction: column; }
  .platform-toggle { width: 100%; }
  .platform-btn { flex: 1; }
  .stream-toolbar { align-items: flex-start; flex-direction: column; padding: 13px 14px; gap: 7px; }
  .player-frame iframe { min-height: 300px; aspect-ratio: 16 / 9; }
  .chat-frame iframe { min-height: 520px; }
  .project-copy { padding: 30px 22px 35px; }
  .project-visual { min-height: 255px; }
  .project-visual img { width: 145px; border-radius: 22px; }
  .social-grid { grid-template-columns: 1fr; }
  .org-card { align-items: flex-start; flex-direction: column; }
  .org-links { justify-content: flex-start; }
  .site-footer { grid-template-columns: 1fr; padding-block: 35px; gap: 14px; }
  .site-footer p, .footer-mark { justify-self: start; margin: 0; }
}

@media (max-width: 420px) {
  :root { --shell: calc(100% - 20px); }
  .site-header { width: calc(100% - 12px); gap: 10px; padding-inline: 10px; }
  .brand { gap: 7px; letter-spacing: .14em; }
  .brand img { width: 30px; height: 30px; }
  .nav-cta { padding: 7px 11px; font-size: .72rem; }
  .hero-logo { width: 92%; }
  .hero h1 { font-size: clamp(2.55rem, 13vw, 3.5rem); }
  .hero-actions .btn, .project-actions .btn { flex: 1 1 100%; }
  .org-links { width: 100%; }
  .org-links a { max-width: 100%; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}