/* ===================== FONTS ===================== */
@font-face { font-family: 'Frank'; src: url('../assets/fonts/Frank-Black.ttf') format('truetype'); font-weight: 900; }
@font-face { font-family: 'Frank'; src: url('../assets/fonts/Frank-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Frank'; src: url('../assets/fonts/Frank-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Frank'; src: url('../assets/fonts/Frank-Light.ttf') format('truetype'); font-weight: 300; }
@font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype'); font-weight: 500; }
@font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk-Light.ttf') format('truetype'); font-weight: 300; }

/* ===================== TOKENS ===================== */
:root{
  --bg: #060608;
  --bg-raised: #0d0d11;
  --line: rgba(255,255,255,.1);
  --text: #f2f2f5;
  --text-dim: #8b8b93;
  --pink: #ff1e56;
  --magenta: #f50076;
  --purple: #9d00ff;
  --cyan: #00e5ff;
  --grad: linear-gradient(120deg, var(--pink), var(--magenta), var(--purple), var(--cyan));
  --ease: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:auto;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
  overflow-y: visible;
  cursor: none;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:none; border:none; background:none; color:inherit;}
h1,h2,h3{font-family:'Frank', sans-serif; font-weight:900; line-height:1.02; letter-spacing:-.01em;}
::selection{ background: var(--purple); color:#fff; }

/* film grain overlay for texture */
.grain{
  position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* custom cursor */
.cursor-dot{
  position:fixed; top:0; left:0; width:18px; height:18px; border-radius:50%;
  background: var(--grad); pointer-events:none; z-index:9999; mix-blend-mode:screen;
  transform:translate(-50%,-50%); transition: width .2s var(--ease), height .2s var(--ease), opacity .2s;
  filter: blur(.5px);
}
.cursor-dot.active{ width:44px; height:44px; }
@media (hover:none){ .cursor-dot{display:none;} body{cursor:auto;} }

/* ===================== HEADER ===================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 28px clamp(20px,5vw,64px);
  background: linear-gradient(180deg, rgba(6,6,8,.75), rgba(6,6,8,0));
}
.logo{ display:flex; align-items:center; }
.logo-img{ height:34px; width:auto; display:block; }
.logo-img--footer{ height:26px; }
.btn-ghost{
  border:1px solid rgba(255,255,255,.35); padding:11px 22px; border-radius:999px; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; transition: all .3s var(--ease);
}
.btn-ghost:hover{ border-color:#fff; background:#fff; color:#000; }

/* ===================== RADIAL NAV ===================== */
.radial-nav{
  position:fixed; z-index:90; right:clamp(16px,3vw,40px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:26px; align-items:flex-end;
}
.radial-item{
  display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--text-dim); opacity:.55; transition: all .4s var(--ease); white-space:nowrap;
}
.radial-item .ri-index{ font-family:'Frank'; font-weight:700; font-size:11px; }
.radial-item .ri-label{
  max-width:0; overflow:hidden; opacity:0; transition: all .4s var(--ease);
}
.radial-item:hover .ri-label, .radial-item.active .ri-label{ max-width:140px; opacity:1; }
.radial-item.active{ opacity:1; color:#fff; }
.radial-item.active .ri-index{
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width: 860px){ .radial-nav{ display:none; } }

/* ===================== HERO ===================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding: 0 clamp(20px,6vw,80px); overflow:hidden;
}
.webgl-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; max-width:760px; }
.eyebrow{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; color: var(--text-dim); margin-bottom:22px;
  font-weight:500;
}
.hero-title{
  font-size: clamp(3.2rem, 9vw, 7.5rem); text-transform:uppercase;
}
.cursor-blink{
  display:inline-block; color: var(--pink); animation: blink 1s step-end infinite;
}
@keyframes blink{ 50%{opacity:0;} }
.hero-sub{
  font-family:'Space Grotesk'; font-weight:300; font-size: clamp(1rem,2vw,1.3rem); text-transform:lowercase;
  letter-spacing:.06em; color: var(--text-dim); margin-top:18px;
}
.hero-copy{
  font-size: clamp(.95rem,1.3vw,1.1rem); line-height:1.6; color:#c8c8ce; max-width:480px; margin-top:22px;
}
.hero-cta{ display:flex; align-items:center; gap:28px; margin-top:40px; flex-wrap:wrap;}
.btn-primary{
  padding:16px 34px; border-radius:999px; background: var(--grad); background-size:220% 220%;
  font-weight:600; font-size:14px; letter-spacing:.03em; color:#fff; transition: background-position .5s var(--ease), transform .3s var(--ease);
  animation: gradmove 6s ease infinite;
}
.btn-primary:hover{ transform: translateY(-2px) scale(1.02); }
@keyframes gradmove{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.btn-text{ font-size:14px; color: var(--text-dim); border-bottom:1px solid transparent; transition:.3s; }
.btn-text:hover{ color:#fff; border-color:#fff; }
.btn-large{ padding:20px 46px; font-size:16px; }

.scroll-cue{
  position:absolute; bottom:40px; left:clamp(20px,6vw,80px); z-index:2;
  display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--text-dim);
}
.scroll-line{ width:1px; height:40px; background: rgba(255,255,255,.15); position:relative; overflow:hidden;}
.scroll-line i{ position:absolute; top:-40px; left:0; width:100%; height:40px; background: var(--grad); animation: scrolldrop 2s var(--ease) infinite; }
@keyframes scrolldrop{ to{ top:40px; } }

/* reveal-on-load */
.reveal{ opacity:0; transform: translateY(24px); animation: revealUp 1s var(--ease) forwards; }
.reveal:nth-child(1){animation-delay:.1s;}
.reveal:nth-child(2){animation-delay:.25s;}
.reveal:nth-child(3){animation-delay:.4s;}
.reveal:nth-child(4){animation-delay:.55s;}
.reveal:nth-child(5){animation-delay:.7s;}
@keyframes revealUp{ to{ opacity:1; transform:none; } }

/* ===================== STORY / STAGE (pinned scroll sections) ===================== */
.story{ position:relative; }
.story[data-frames="6"]{ height: 600vh; }
.story[data-frames="5"]{ height: 500vh; }
.story--single{ height: 100svh; }

.stage{
  position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding: 0 clamp(20px,6vw,80px); overflow:hidden;
}
.stage-heading{ position:absolute; top:clamp(90px,12vh,140px); left:clamp(20px,6vw,80px); z-index:3; max-width:600px;}
.stage-kicker{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--text-dim); margin-bottom:14px;}
.stage-title{ font-size: clamp(1.8rem, 4vw, 3rem); text-transform:uppercase; }

.frames{ position:relative; z-index:2; max-width:640px; }
.frame{
  position:absolute; top:36px; left:0; transform: translateY(-50%) translateX(0); width:100%;
  opacity:0; pointer-events:none; transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.frame[data-active]{ opacity:1; pointer-events:auto; transform: translateY(-50%) translateX(0); }
.frame-tag{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600;
}
.frame-title{ font-size: clamp(1.5rem, 3.4vw, 2.4rem); text-transform:none; margin-bottom:18px; max-width:560px; }
.frame-copy{ font-size: clamp(.95rem,1.2vw,1.05rem); line-height:1.65; color:#c8c8ce; max-width:480px; }
.frame-copy--wide{ max-width:640px; font-size: clamp(1.1rem,1.6vw,1.4rem); font-weight:300; }

.frame-stats{ display:flex; gap:clamp(20px,3vw,44px); margin-top:40px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family:'Frank'; font-weight:900; font-size:clamp(1.6rem,3vw,2.2rem); }
.stat-label{ font-size:11px; letter-spacing:.05em; color: var(--text-dim); text-transform:uppercase; margin-top:6px; max-width:110px;}

.frame-progress{
  position:absolute; bottom:clamp(30px,6vh,56px); left:clamp(20px,6vw,80px); z-index:3;
  display:flex; gap:8px;
}
.frame-progress i{ width:26px; height:2px; background: rgba(255,255,255,.15); display:block; position:relative; overflow:hidden; }
.frame-progress i[data-active]{ background: rgba(255,255,255,.15); }
.frame-progress i[data-active]::after{ content:''; position:absolute; inset:0; background: var(--grad); }

/* orbit tags (ecosystem) */
.orbit-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; max-width:640px; }
.orbit-tags span{
  padding:10px 18px; border:1px solid var(--line); border-radius:999px; font-size:12px;
  letter-spacing:.03em; color:#d8d8dc; transition: all .3s var(--ease);
}
.orbit-tags span:hover{ border-color: var(--purple); color:#fff; box-shadow: 0 0 20px -6px var(--purple); }

/* ===================== SIMPLE FLOW SECTION (ecosystem) ===================== */
.section-flow{
  position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding: 140px clamp(20px,6vw,80px) 80px; max-width:900px;
}
.section-flow .stage-title{ margin-bottom:28px; }

/* ===================== CONTACT ===================== */
.contact{
  min-height:100svh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding: 0 clamp(20px,6vw,80px); gap:36px; position:relative;
}
.contact-title{ font-size: clamp(2.4rem,7vw,5rem); text-transform:uppercase; max-width:560px; }

.site-footer{
  display:flex; align-items:center; justify-content:space-between; padding: 40px clamp(20px,6vw,80px) 60px;
  border-top:1px solid var(--line); color: var(--text-dim); font-size:13px;
}
/* ===================== MODAL ===================== */
.modal-overlay{
  position:fixed; inset:0; z-index:200; background: rgba(2,2,4,.75); backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .4s var(--ease);
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  width:min(480px,90vw); background: var(--bg-raised); border:1px solid var(--line); border-radius:20px; padding:40px;
  position:relative; transform: translateY(16px) scale(.98); transition: transform .4s var(--ease);
}
.modal-overlay.open .modal{ transform:none; }
.modal-close{ position:absolute; top:20px; right:20px; font-size:16px; color: var(--text-dim); }
.modal-close:hover{ color:#fff; }
.modal-title{ font-size:1.6rem; margin: 8px 0 26px; text-transform:none; }
#contactForm{ display:flex; flex-direction:column; gap:16px; }
#contactForm label{ font-size:12px; color: var(--text-dim); display:flex; flex-direction:column; gap:8px; letter-spacing:.03em; }
#contactForm input, #contactForm textarea{
  background: #16161b; border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:#fff; font-size:14px; font-family:inherit;
  resize:vertical;
}
#contactForm input:focus, #contactForm textarea:focus{ outline:none; border-color: var(--purple); }
.modal-note{ font-size:11px; color: var(--text-dim); text-align:center; margin-top:4px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 720px){
  .radial-nav{ display:none; }
  .webgl-canvas{ opacity:.55; }
  .frame-stats{ gap:22px; }
  .frame-progress{ display:none; }
  .stage-heading{ position:relative; top:auto; left:auto; margin-bottom:40px; padding-top:130px; }
  .stage{ justify-content:flex-start; padding-top:20px; position:relative; height:auto; min-height:0; }
  .frames{ position:relative; display:flex; flex-direction:column; gap:70px; padding-bottom:60px; }
  .frame{ position:relative; top:auto; opacity:1; pointer-events:auto; transform:none !important; }
  .story[data-frames]{ height:auto; }
  .story--single{ height:auto; padding: 60px 0; }
}