:root {
  --bg: #080a0f;
  --surface: #10131a;
  --surface-2: #171b24;
  --text: #f8f9fc;
  --muted: #adb4c1;
  --faint: #747d8c;
  --line: rgba(255,255,255,.105);
  --line-strong: rgba(255,255,255,.18);
  --cyan: #6ce8ff;
  --pink: #ff64c8;
  --violet: #ad86ff;
  --gold: #ffd36e;
  --green: #73f0b0;
  --shadow: 0 34px 90px rgba(0,0,0,.42);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --max: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(circle at 8% -8%, rgba(255,100,200,.13), transparent 33%),
    radial-gradient(circle at 100% 12%, rgba(108,232,255,.11), transparent 31%),
    linear-gradient(180deg, #080a0f, #0a0d13 52%, #07090d);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { color: #06070a; background: var(--cyan); }
.section-shell { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.site-grid { position: fixed; inset: 0; z-index: -3; pointer-events: none; opacity: .65; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom,rgba(0,0,0,.9),transparent 82%); }
.site-aurora { position: fixed; inset: 0; z-index: -4; overflow: hidden; pointer-events: none; }
.site-aurora i { position: absolute; width: 44vw; aspect-ratio: 1; border-radius: 50%; filter: blur(105px); opacity: .11; }
.site-aurora i:nth-child(1){left:-20vw;top:-18vw;background:var(--pink)}
.site-aurora i:nth-child(2){right:-20vw;top:4vw;background:var(--cyan)}
.site-aurora i:nth-child(3){left:36vw;bottom:-28vw;background:var(--violet)}
.skip-link { position: fixed; left: 15px; top: 10px; z-index: 500; padding: 10px 14px; border-radius: 10px; color: #05060a; background: var(--cyan); font-weight: 850; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: none; }
.eyebrow { margin: 0 0 12px; color: var(--cyan); font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }

.site-header {
  position: fixed;
  left: 50%;
  top: max(12px, env(safe-area-inset-top));
  z-index: 100;
  display: flex;
  align-items: center;
  width: min(var(--max), calc(100% - 24px));
  min-height: 72px;
  padding: 10px 12px 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(10,12,17,.8);
  box-shadow: 0 16px 50px rgba(0,0,0,.3);
  backdrop-filter: blur(22px) saturate(140%);
  transform: translateX(-50%);
  transition: background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.site-header.scrolled { background: rgba(8,10,15,.95); border-color: rgba(255,255,255,.18); box-shadow: 0 20px 55px rgba(0,0,0,.44); }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; }
.brand-mark img { width: 38px; height: 38px; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: .9rem; letter-spacing: .13em; }
.brand-copy em { margin-top: 5px; color: var(--faint); font-size: .62rem; font-style: normal; }
.main-nav { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.main-nav a { padding: 10px 11px; border-radius: 10px; color: #c7ccd5; font-size: .72rem; font-weight: 760; transition: color .2s ease,background .2s ease; }
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.main-nav .nav-cta { margin-left: 4px; color: #07080c; background: linear-gradient(110deg,var(--cyan),var(--gold)); }
.main-nav .nav-cta:hover { color: #07080c; background: linear-gradient(110deg,#8ef0ff,#ffe39b); }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); }
.menu-toggle span { display: block; width: 18px; height: 2px; margin: 4px auto; border-radius: 999px; background: #fff; }

.hero { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(430px,.9fr); align-items: center; gap: clamp(34px,4vw,58px); min-height: 760px; padding-top: 122px; padding-bottom: 58px; }
.hero-copy { min-width: 0; max-width: 640px; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; padding: 8px 12px; border: 1px solid rgba(115,240,176,.2); border-radius: 999px; color: #ddffed; background: rgba(115,240,176,.055); font-size: .67rem; font-weight: 820; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px rgba(115,240,176,.72); }
.hero h1 { margin: 0; max-width: 640px; font-size: clamp(4rem,5.5vw,5.55rem); line-height: .9; letter-spacing: -.067em; text-wrap: balance; }
.hero h1 span { color: transparent; background: linear-gradient(100deg,var(--pink),#e7c5ff 48%,var(--cyan)); background-clip: text; -webkit-background-clip: text; }
.hero-lede { max-width: 630px; margin: 27px 0 30px; color: var(--muted); font-size: clamp(1rem,1.5vw,1.13rem); line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 49px; padding: 12px 19px; border: 1px solid transparent; border-radius: 13px; font-size: .82rem; font-weight: 850; transition: transform .2s var(--ease),background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #07080c; background: linear-gradient(110deg,var(--cyan),var(--gold)); box-shadow: 0 14px 32px rgba(108,232,255,.15); }
.button.secondary { border-color: var(--line-strong); background: rgba(255,255,255,.045); }
.button:focus-visible,.main-nav a:focus-visible { outline: 3px solid rgba(108,232,255,.4); outline-offset: 3px; }
.hero-signals { display: flex; flex-wrap: wrap; gap: 12px 19px; margin-top: 27px; color: #c6cbd4; font-size: .68rem; font-weight: 730; }
.hero-signals span { display: inline-flex; align-items: center; gap: 7px; }
.hero-signals b { color: var(--pink); font-size: .61rem; }
.hero-dashboard { min-width: 0; }
.live-card { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 25px; background: linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.018)); box-shadow: var(--shadow); }
.live-card > header,.live-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; color: var(--faint); font-size: .66rem; font-weight: 760; }
.live-card > header { border-bottom: 1px solid var(--line); }
.live-card > footer { border-top: 1px solid var(--line); }
.live-card > header span { display: inline-flex; align-items: center; gap: 8px; color: #eceef4; }
.live-card > header i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.live-card > header i.live { background: var(--green); box-shadow: 0 0 13px rgba(115,240,176,.72); }
.live-card > header a:hover { color: var(--cyan); }
.live-body { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; padding: 20px; }
.live-art { display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: radial-gradient(circle,rgba(255,100,200,.16),rgba(108,232,255,.05)); box-shadow: 0 18px 45px rgba(0,0,0,.36); }
.live-art img { width: 54px; transition: opacity .2s ease; }
.live-copy { min-width: 0; display: grid; }
.live-copy small { color: var(--cyan); font-size: .61rem; font-weight: 900; letter-spacing: .11em; }
.live-copy strong { margin-top: 10px; overflow: hidden; font-size: clamp(1.45rem,3vw,2.45rem); line-height: 1.03; letter-spacing: -.045em; text-overflow: ellipsis; }
.live-copy em { margin-top: 8px; overflow: hidden; color: var(--muted); font-size: .82rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.live-progress { height: 4px; margin: 0 20px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.live-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--pink),var(--cyan)); }
.dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 11px; }
.dash-card { display: flex; min-height: 155px; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.027); transition: transform .25s var(--ease),border-color .25s ease,background .25s ease; }
.dash-card:hover { transform: translateY(-3px); border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.dash-card:last-child { grid-column: 1/-1; min-height: 125px; }
.dash-card > span { color: var(--cyan); font-size: .61rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.dash-card strong { margin-top: 12px; font-size: 1.25rem; letter-spacing: -.035em; }
.dash-card em { margin-top: 5px; color: var(--muted); font-size: .72rem; font-style: normal; }
.dash-card b { margin-top: auto; color: var(--gold); font-size: .66rem; }
.retrowave-dash { background: radial-gradient(circle at 100% 0,rgba(255,100,200,.1),transparent 42%),rgba(255,255,255,.027); }
.youtube-dash { background: radial-gradient(circle at 100% 0,rgba(108,232,255,.09),transparent 42%),rgba(255,255,255,.027); }
.signal-strip { overflow: hidden; border-block: 1px solid var(--line); background: rgba(255,255,255,.018); }
.signal-strip .section-shell { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 18px; color: #aab1bd; font-size: .64rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.signal-strip i { color: var(--pink); font-size: .52rem; font-style: normal; }
.projects,.approach { padding-top: 92px; }
.section-heading { display: grid; grid-template-columns: 1.18fr .82fr; align-items: end; gap: 40px; margin-bottom: 40px; }
.section-heading h2 { margin: 0; font-size: clamp(3.1rem,6vw,6rem); line-height: .9; letter-spacing: -.07em; }
.section-heading > p { margin: 0 0 6px; color: var(--muted); line-height: 1.72; }
.project-card { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; min-height: 620px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.016)); box-shadow: var(--shadow); }
.project-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(34px,5vw,64px); }
.project-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--cyan); font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.project-meta b { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: #dbe0e8; font-size: .58rem; }
.project-meta b.live { color: #ddffed; border-color: rgba(115,240,176,.24); background: rgba(115,240,176,.055); }
.project-card h3 { margin: 26px 0 15px; font-size: clamp(3.1rem,6vw,6.2rem); line-height: .88; letter-spacing: -.075em; }
.project-card p { max-width: 610px; margin: 0; color: var(--muted); line-height: 1.72; }
.project-card ul { margin: 24px 0 26px; padding-left: 18px; color: #d4d8df; }
.project-card li + li { margin-top: 7px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--cyan); font-size: .78rem; font-weight: 850; }
.text-link:hover { color: #a3f3ff; }
.project-visual { position: relative; display: grid; min-width: 0; place-items: center; overflow: hidden; border-left: 1px solid var(--line); background: radial-gradient(circle at 50% 50%,rgba(255,100,200,.14),transparent 44%),linear-gradient(150deg,#17131d,#0d1017); }
.retrowave-visual img { position: relative; z-index: 2; width: min(420px,76%); max-height: 560px; object-fit: contain; filter: drop-shadow(0 35px 50px rgba(0,0,0,.5)); transform: rotate(2deg); }
.phone-halo { position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid rgba(108,232,255,.14); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,100,200,.035),0 0 0 90px rgba(108,232,255,.025); }
.project-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.project-card.compact { display: flex; min-height: 510px; flex-direction: column; }
.project-card.compact .project-copy { position: relative; z-index: 2; min-height: 100%; justify-content: flex-start; }
.project-card.compact h3 { font-size: clamp(2.7rem,5vw,4.8rem); }
.project-radio { background: radial-gradient(circle at 85% 85%,rgba(255,100,200,.16),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.016)); }
.radio-disc { position: absolute; right: -80px; bottom: -110px; display: grid; width: 370px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle,#141820 0 9px,#222833 10px 12px); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.radio-disc::after { position: absolute; width: 100px; aspect-ratio: 1; border: 16px solid var(--gold); border-radius: 50%; content: ""; background: var(--pink); }
.radio-disc span { position: relative; z-index: 2; display: grid; width: 70px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: #090b0f; }
.radio-disc img { width: 44px; }
.project-gaming { background: radial-gradient(circle at 80% 80%,rgba(108,232,255,.14),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.016)); }
.gaming-panel { position: absolute; right: -15px; bottom: -20px; display: grid; gap: 3px; transform: rotate(-7deg); }
.gaming-panel span { display: block; padding: 3px 15px; color: transparent; background: linear-gradient(90deg,var(--pink),var(--cyan)); background-clip: text; -webkit-background-clip: text; font-size: clamp(3rem,6vw,5.8rem); font-weight: 950; line-height: .82; letter-spacing: -.07em; opacity: .85; }
.principle-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.principle-grid article { min-height: 285px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.016)); }
.principle-grid span { color: var(--pink); font-size: .65rem; font-weight: 900; }
.principle-grid h3 { margin: 65px 0 10px; font-size: 1.7rem; letter-spacing: -.04em; }
.principle-grid p { margin: 0; color: var(--muted); }
.closing { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 125px; margin-bottom: 100px; padding: 58px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: radial-gradient(circle at 90% 0,rgba(108,232,255,.12),transparent 35%),radial-gradient(circle at 0 100%,rgba(255,100,200,.1),transparent 36%),linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.017)); }
.closing > div:first-child { max-width: 760px; }
.closing h2 { margin: 7px 0 12px; font-size: clamp(3rem,6vw,5.8rem); line-height: .9; letter-spacing: -.07em; }
.closing p:not(.eyebrow) { margin: 0; color: var(--muted); }
.site-footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 32px; padding: 34px 0 44px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 39px; height: 39px; }
.footer-brand strong { color: #fff; letter-spacing: .12em; }
.footer-brand p { margin: 3px 0 0; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a:hover { color: var(--cyan); }
.reveal { opacity: 1; transform: none; }
.reveal.reveal-pending { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease),transform .75s var(--ease); }
.reveal.reveal-pending.visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 150px; }
  .hero-copy { max-width: 820px; }
  .hero-dashboard { max-width: 780px; }
  .project-card { grid-template-columns: 1fr; }
  .project-visual { min-height: 520px; border-top: 1px solid var(--line); border-left: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 14px; }
  .closing { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 760px) {
  .site-header { top: max(7px,env(safe-area-inset-top)); width: calc(100% - 14px); min-height: 63px; border-radius: 17px; }
  .brand-copy em { display: none; }
  .menu-toggle { display: block; }
  .main-nav { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: none; flex-direction: column; align-items: stretch; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(8,10,15,.98); box-shadow: var(--shadow); backdrop-filter: blur(22px); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 13px; font-size: .76rem; }
  .main-nav .nav-cta { margin: 5px 0 0; }
  .section-shell { width: calc(100% - 28px); }
  .hero { gap: 45px; padding-top: 126px; padding-bottom: 60px; }
  .hero h1 { font-size: clamp(3.6rem,17vw,5.3rem); }
  .hero-actions .button { width: 100%; }
  .live-body { grid-template-columns: 100px 1fr; gap: 15px; padding: 15px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dash-card:last-child { grid-column: auto; }
  .signal-strip .section-shell { justify-content: flex-start; overflow: hidden; }
  .signal-strip i:nth-of-type(n+3),.signal-strip span:nth-of-type(n+4){display:none}
  .projects,.approach { padding-top: 76px; }
  .section-heading h2 { font-size: clamp(2.9rem,13vw,4.2rem); }
  .project-card { min-height: auto; }
  .project-copy { padding: 30px 22px; }
  .project-card h3 { font-size: clamp(3rem,14vw,4.7rem); }
  .project-visual { min-height: 420px; }
  .project-pair { grid-template-columns: 1fr; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid article { min-height: 220px; }
  .principle-grid h3 { margin-top: 35px; }
  .closing { margin-top: 95px; margin-bottom: 75px; padding: 38px 24px; }
  .site-footer { grid-template-columns: 1fr; align-items: start; }
  .site-footer nav { flex-wrap: wrap; }
}
@media (max-width: 430px) {
  .live-card > header a { display: none; }
  .live-body { grid-template-columns: 80px 1fr; }
  .live-copy strong { font-size: 1.25rem; }
  .project-visual { min-height: 350px; }
  .retrowave-visual img { width: 82%; max-height: 330px; }
  .radio-disc { width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal,.reveal.reveal-pending { opacity: 1; transform: none; }
}
@media (max-width: 520px) {
  .hero-copy { min-width: 0; }
  .hero h1 { font-size: clamp(3.1rem, 14vw, 4.15rem); line-height: .89; letter-spacing: -.08em; }
  .hero-lede { max-width: 100%; }
  .hero-signals { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .live-card, .hero-dashboard, .dashboard-grid, .dash-card { min-width: 0; max-width: 100%; }
}

/* Rerraseth Site Spacing v3.1.2 */
:root {
  --layout-gutter: clamp(14px, 2.4vw, 28px);
  --section-space: clamp(72px, 8vw, 98px);
  --section-space-compact: clamp(32px, 4vw, 54px);
}

.section-shell {
  width: min(var(--max), calc(100% - (var(--layout-gutter) * 2)));
}

.hero {
  gap: clamp(32px, 4vw, 54px);
  min-height: 700px;
  padding-top: clamp(120px, 11vw, 136px);
  padding-bottom: clamp(48px, 5vw, 62px);
}

.hero-lede {
  margin-top: 22px;
  margin-bottom: 26px;
}

.hero-signals {
  margin-top: 22px;
}

.signal-strip .section-shell {
  min-height: 56px;
}

.projects,
.approach {
  padding-top: var(--section-space);
}

.section-heading {
  gap: clamp(18px, 3vw, 34px);
  margin-bottom: clamp(26px, 3.5vw, 36px);
}

.project-card {
  min-height: 580px;
}

.project-copy {
  padding: clamp(32px, 4.5vw, 56px);
}

.project-card h3 {
  margin-top: 22px;
  margin-bottom: 14px;
}

.project-card ul {
  margin-top: 20px;
  margin-bottom: 22px;
}

.project-pair,
.principle-grid {
  gap: 16px;
}

.project-pair {
  margin-top: 16px;
}

.principle-grid article {
  min-height: 260px;
  padding: 26px;
}

.principle-grid h3 {
  margin-top: 48px;
}

.closing {
  gap: 34px;
  margin-top: var(--section-space);
  margin-bottom: clamp(68px, 7vw, 88px);
  padding: clamp(34px, 4.5vw, 50px);
}

.site-footer {
  gap: 28px;
  padding-top: 30px;
  padding-bottom: 38px;
}

@media (max-width: 1120px) {
  .hero {
    padding-top: 138px;
  }

  .project-card {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  :root {
    --layout-gutter: 14px;
    --section-space: 66px;
  }

  .hero {
    gap: 38px;
    padding-top: 116px;
    padding-bottom: 52px;
  }

  .projects,
  .approach {
    padding-top: 66px;
  }

  .section-heading {
    margin-bottom: 24px;
  }

  .project-copy {
    padding: 28px 20px;
  }

  .principle-grid article {
    min-height: 205px;
    padding: 22px;
  }

  .principle-grid h3 {
    margin-top: 30px;
  }

  .closing {
    margin-top: 66px;
    margin-bottom: 58px;
    padding: 32px 22px;
  }

  .site-footer {
    gap: 20px;
    padding-top: 28px;
    padding-bottom: 34px;
  }
}