:root {
  --bg: #05070d;
  --bg-soft: #0a0e18;
  --panel: rgba(15, 20, 34, .72);
  --line: rgba(255,255,255,.10);
  --text: #f6f8ff;
  --muted: #8e98ad;
  --accent: #9d8cff;
  --accent-two: #79a9ff;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.noise { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(123,104,255,.12), transparent 68%); transform: translate(-50%,-50%); transition: opacity .3s; }

.topbar { height: 86px; padding: 0 clamp(24px,5vw,76px); display: flex; align-items: center; justify-content: space-between; position: absolute; inset: 0 0 auto; z-index: 10; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; font: 700 18px var(--font-display); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.03)); box-shadow: inset 0 1px rgba(255,255,255,.15); }
.brand-copy { display: flex; flex-direction: column; line-height: .95; gap: 5px; }
.brand-copy strong { font: 700 15px var(--font-display); letter-spacing: .18em; }
.brand-copy small { font-size: 7px; letter-spacing: .34em; color: var(--muted); }
.desktop-nav { display: flex; gap: 38px; font-size: 13px; color: #bac2d1; }
.desktop-nav a { transition: color .25s; }
.desktop-nav a:hover { color: white; }
.menu-button { display: none; background: none; border: 0; padding: 8px; }
.menu-button span { display: block; width: 22px; height: 1px; background: #fff; margin: 5px; }

.hero { min-height: 100svh; padding: 132px clamp(24px,5vw,76px) 64px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; position: relative; isolation: isolate; overflow: hidden; }
.grid { position: absolute; inset: 0; z-index: -3; background-image: linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.027) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 95%); }
.aurora { position: absolute; border-radius: 50%; filter: blur(100px); z-index: -2; opacity: .36; }
.aurora-one { width: 550px; height: 550px; background: #3c26ad; top: -230px; right: 6%; }
.aurora-two { width: 450px; height: 450px; background: #0d63a9; bottom: -250px; left: 30%; }
.hero-copy { max-width: 650px; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #aab4c7; font-size: 11px; letter-spacing: .22em; margin-bottom: 30px; }
.eyebrow span { width: 34px; height: 1px; background: linear-gradient(90deg,var(--accent-two),var(--accent)); }
.hero h1 { font: 700 clamp(64px,7.6vw,126px)/.86 var(--font-display); letter-spacing: -.065em; margin: 0; }
.hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px rgba(230,235,255,.5); }
.hero-copy > p { max-width: 590px; color: #a7b0c2; font-size: clamp(16px,1.4vw,20px); line-height: 1.75; margin: 34px 0; }
.hero-actions { display: flex; gap: 12px; }
.button { min-height: 52px; padding: 0 23px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; transition: .25s; }
.button-primary { background: #f3f6ff; color: #090c14; }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(176,190,255,.2); }
.button-secondary { border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.button-secondary:hover { background: rgba(255,255,255,.08); }
.hero-stats { display: flex; gap: 50px; margin-top: 54px; }
.hero-stats div { display: flex; flex-direction: column; gap: 7px; }
.hero-stats strong { font: 600 24px var(--font-display); }
.hero-stats span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #758096; }

.beast-stage { position: relative; display: grid; place-items: center; min-width: 0; }
.beast { width: min(680px, 100%); filter: drop-shadow(0 30px 70px rgba(0,0,0,.7)); animation: float 6s ease-in-out infinite; }
.beast-halo { position: absolute; width: 65%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(189,202,255,.13); box-shadow: 0 0 130px rgba(92,72,255,.2), inset 0 0 80px rgba(137,182,255,.06); }
.beast-halo:before,.beast-halo:after { content:""; position:absolute; border-radius:50%; inset:8%; border:1px solid rgba(255,255,255,.06); }
.beast-halo:after { inset:17%; }
.beast-caption { position: absolute; bottom: 5%; font-size: 9px; letter-spacing: .28em; color: #68748b; }
.scroll-hint { position: absolute; left: clamp(24px,5vw,76px); bottom: 26px; display: flex; align-items: center; gap: 12px; color: #657087; font-size: 10px; text-transform: uppercase; letter-spacing: .17em; }
.scroll-hint span { width: 38px; height: 1px; background: #556078; }
@keyframes float { 50% { transform: translateY(-14px) scale(1.01); } }

.projects-section { min-height: 100vh; padding: 120px clamp(24px,7vw,110px) 90px; background: radial-gradient(circle at 50% 80%,rgba(87,63,197,.17),transparent 34%),#070a12; position: relative; }
.section-heading { max-width: 760px; }
.section-heading > span,.contact-inner > span { font-size: 10px; letter-spacing: .25em; color: #7f8aa0; }
.section-heading h2 { font: 600 clamp(42px,5vw,76px)/1.02 var(--font-display); letter-spacing: -.05em; margin: 18px 0 22px; }
.section-heading p { color: #8e98aa; font-size: 17px; line-height: 1.7; max-width: 600px; }
.project-display { margin: 76px auto 54px; width: min(1040px,100%); min-height: 250px; padding: 36px; display: grid; grid-template-columns: 80px 1fr auto; gap: 30px; align-items: center; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); box-shadow: inset 0 1px rgba(255,255,255,.08),0 35px 90px rgba(0,0,0,.28); transition: opacity .2s, transform .2s; }
.project-display.is-changing { opacity: .35; transform: translateY(8px); }
.project-index { font: 600 46px var(--font-display); color: #31384a; align-self: start; }
.project-category { font-size: 9px; letter-spacing: .22em; color: #8590a7; }
.project-display h3 { font: 600 clamp(30px,4vw,52px) var(--font-display); margin: 10px 0 14px; letter-spacing: -.04em; }
.project-display p { color: #9ca6b8; line-height: 1.7; max-width: 650px; margin: 0; }
.project-link { font-size: 12px; color: #d9dff0; white-space: nowrap; }
.project-link span { margin-left: 8px; }
.dock-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dock-label { font-size: 8px; letter-spacing: .25em; color: #5e687e; }
.dock { min-height: 104px; padding: 14px 18px 20px; display: flex; align-items: flex-end; gap: 10px; border: 1px solid rgba(255,255,255,.13); background: rgba(20,24,38,.62); backdrop-filter: blur(22px) saturate(140%); border-radius: 27px; box-shadow: inset 0 1px rgba(255,255,255,.15),0 30px 70px rgba(0,0,0,.38); }
.dock-item { position: relative; border: 0; background: none; padding: 0; cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.dock-item:hover { transform: translateY(-10px) scale(1.13); z-index: 3; }
.dock-icon { width: 64px; height: 64px; border-radius: 17px; display: grid; place-items: center; color: #fff; font: 700 25px var(--font-display); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px rgba(255,255,255,.28),0 10px 20px rgba(0,0,0,.25); }
.nexus-icon { background: linear-gradient(145deg,#486cff,#131b5b); }
.meme-icon { background: linear-gradient(145deg,#d05cff,#541781); }
.shop-icon { background: linear-gradient(145deg,#15cfa2,#07534d); }
.orvio-icon { background: linear-gradient(145deg,#ff9a55,#8d3523); }
.future-icon { background: linear-gradient(145deg,#596377,#1c2230); }
.dock-divider { width: 1px; height: 54px; background: rgba(255,255,255,.12); margin: 0 5px 5px; }
.active-dot { position: absolute; left: 50%; bottom: -11px; width: 4px; height: 4px; border-radius: 50%; background: transparent; transform: translateX(-50%); }
.dock-item.active .active-dot { background: white; }
.dock-tooltip { position: absolute; left: 50%; top: -39px; transform: translateX(-50%) translateY(6px); padding: 7px 10px; background: #eef2ff; color: #0a0d15; border-radius: 7px; font-size: 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .18s; }
.dock-item:hover .dock-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

.vision-section { padding: 130px clamp(24px,7vw,110px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 110px; background: #05070d; }
.vision-card { position: sticky; top: 120px; align-self: start; }
.vision-number { font: 600 12px var(--font-display); color: #616c82; margin-bottom: 45px; }
.vision-card h3 { font: 600 clamp(40px,5vw,72px)/1.05 var(--font-display); letter-spacing: -.05em; margin: 0 0 30px; }
.vision-card p { max-width: 680px; color: #909bad; font-size: 18px; line-height: 1.8; }
.principles { display: grid; }
.principles article { padding: 42px 0; border-top: 1px solid var(--line); }
.principles article:last-child { border-bottom: 1px solid var(--line); }
.principles span { color: #5d687c; font-size: 10px; }
.principles h4 { font: 600 26px var(--font-display); margin: 17px 0 10px; }
.principles p { color: #8994a7; line-height: 1.7; margin: 0; }
.contact-section { padding: 70px clamp(24px,7vw,110px) 110px; }
.contact-inner { min-height: 440px; border-radius: 34px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 50px 24px; background: radial-gradient(circle at 50% 10%,rgba(117,92,255,.28),transparent 50%),linear-gradient(145deg,#101525,#090c14); border: 1px solid rgba(255,255,255,.1); }
.contact-inner h2 { font: 600 clamp(45px,6vw,86px)/1 var(--font-display); letter-spacing: -.055em; margin: 20px 0 34px; }
.contact-inner a { padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.3); color: #cbd3e3; }
.contact-inner a span { margin-left: 8px; }
footer { min-height: 120px; padding: 30px clamp(24px,5vw,76px); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #6f798d; font-size: 11px; }
.footer-brand { opacity: .72; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 950px) {
  .hero { grid-template-columns: 1fr; padding-top: 140px; }
  .hero-copy { text-align: center; margin: 0 auto; }
  .eyebrow,.hero-actions,.hero-stats { justify-content: center; }
  .beast-stage { margin-top: 20px; }
  .beast { width: min(600px,100%); }
  .vision-section { grid-template-columns: 1fr; gap: 50px; }
  .vision-card { position: static; }
}
@media (max-width: 720px) {
  .desktop-nav { display: none; }
  .menu-button { display: block; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: clamp(56px,18vw,82px); }
  .hero-copy > p { font-size: 15px; }
  .hero-stats { gap: 24px; }
  .hero-stats span { font-size: 8px; }
  .beast-caption { bottom: 0; letter-spacing: .16em; }
  .project-display { grid-template-columns: 1fr; padding: 28px; }
  .project-index { font-size: 28px; }
  .project-link { margin-top: 10px; }
  .dock { width: 100%; overflow-x: auto; justify-content: flex-start; border-radius: 22px; }
  .dock-icon { width: 56px; height: 56px; border-radius: 15px; }
  footer { flex-direction: column; gap: 22px; text-align: center; }
}