/* ===== Tokens ===== */
:root{
  --black:#0a0a0a;
  --void:#000000;
  --panel:#151515;
  --white:#f7f6f4;
  --red:#e2131f;
  --red-dim:#4d0a10;
  --steel:#93949a;
  --line: rgba(247,246,244,0.12);

  --display: 'Archivo Black', sans-serif;
  --body: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --wrap: min(1200px, 92vw);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* adaptive — flip with theme */
  --page-bg: var(--black);
  --page-bg-alt: var(--void);
  --ink: var(--white);
  --ink-dim: var(--steel);
  --glass-bg: rgba(24,24,26,.46);
  --glass-bg-strong: rgba(18,18,20,.7);
  --glass-border: rgba(247,246,244,.14);
  --glass-highlight: rgba(255,255,255,.14);
  --text-soft: rgba(247,246,244,.78);
  --text-softer: rgba(247,246,244,.62);

  /* fixed — nav / hero / accent chrome, never flips */
  --gdark-bg: rgba(24,24,26,.46);
  --gdark-bg-strong: rgba(18,18,20,.7);
  --gdark-border: rgba(247,246,244,.14);
  --gdark-highlight: rgba(255,255,255,.14);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow-1: 0 1px 1px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35);
  --shadow-2: 0 2px 2px rgba(0,0,0,.3), 0 18px 44px rgba(0,0,0,.5);
  --shadow-red: 0 10px 30px rgba(226,19,31,.35);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin:0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .4s var(--ease), color .4s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--display); margin:0; font-weight:400; }
:focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }
.wrap{ width: var(--wrap); margin: 0 auto; }
#scrollContent{ position:relative; z-index:1; }

/* ===== Cursor light (desktop only) ===== */
.cursor-light{
  position:fixed; top:0; left:0; width:420px; height:420px; z-index:2;
  pointer-events:none; border-radius:50%; opacity:0;
  background: radial-gradient(circle, rgba(226,19,31,.16), transparent 65%);
  transform: translate(-50%,-50%); transition: opacity .3s;
  will-change: transform;
}
@media (hover:hover){ .cursor-light.on{ opacity:1; } }

/* ===== Buttons ===== */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  font-family: var(--mono); font-weight:600; font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding: 15px 28px; border-radius: var(--r-pill); text-decoration:none;
  border:1px solid transparent;
  transition: transform .35s var(--ease), background .35s, border-color .35s, color .35s, box-shadow .35s var(--ease);
  cursor:pointer;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background: linear-gradient(155deg, rgba(255,255,255,.35), rgba(255,255,255,0) 42%);
  opacity:.7; mix-blend-mode: overlay;
}
.btn > *{ position:relative; z-index:2; }
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px); }
.btn-primary{ background: linear-gradient(160deg, #ff3b46, var(--red) 60%); color:#fff; box-shadow: var(--shadow-1), var(--shadow-red); }
.btn-primary:hover{ box-shadow: var(--shadow-2), 0 14px 40px rgba(226,19,31,.5); }
.btn-ghost{
  background: var(--gdark-bg); color: var(--white); border-color: var(--gdark-border);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--gdark-highlight);
}
.btn-ghost:hover{ border-color: rgba(247,246,244,.35); box-shadow: var(--shadow-2), inset 0 1px 0 var(--gdark-highlight); }
.btn-lg{ padding: 18px 36px; font-size:.86rem; }

/* ===== Nav ===== */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  padding: 18px 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
  transition: background .35s var(--ease), padding .35s var(--ease), backdrop-filter .35s;
}
.nav.scrolled{
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  padding: 10px 0;
  border-bottom: 1px solid var(--gdark-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px rgba(0,0,0,.35);
}
.nav-inner{ width: var(--wrap); margin:0 auto; display:flex; align-items:center; gap: 28px; }
.nav-logo img{ height: 40px; width:auto; transition: height .35s var(--ease); }
.nav.scrolled .nav-logo img{ height: 32px; }
.nav-links{ display:flex; gap: 28px; margin-right:auto; margin-left: 16px; }
.nav-icon-link{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--gdark-border); border-radius:50%; color: var(--white);
  background: var(--gdark-bg); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--gdark-highlight);
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.nav-icon-link:hover{ border-color: rgba(247,246,244,.35); transform: translateY(-2px); }
.nav-icon-link svg{ width:18px; height:18px; }
@media (max-width: 860px){ .nav-icon-link{ display:none; } }

.nav-links a{
  font-family: var(--mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color: var(--steel); position:relative; padding: 4px 0;
}
.nav-links a:hover{ color: var(--white); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background: var(--red);
  transition: right .25s var(--ease);
}
.nav-links a:hover::after{ right:0; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 40px; height: 36px; background: transparent; border:none; cursor:pointer; margin-left:auto;
}
.nav-toggle span{ display:block; height:2px; width:100%; background: var(--white); }
.mobile-menu{
  display:none; flex-direction:column; gap: 2px;
  background: rgba(10,10,10,.75); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--gdark-border); box-shadow: var(--shadow-2);
}
.mobile-menu a{
  padding: 16px 6vw; text-decoration:none; color: var(--white); font-family: var(--mono);
  text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; border-bottom: 1px solid var(--gdark-border);
}
.mobile-menu .btn{ margin: 16px 6vw; }
@media (max-width: 860px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-menu.open{ display:flex; }
}

/* ===== Stage (hero) ===== */
.stage{
  position: relative; min-height: 100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.stage-frames{ position:absolute; inset:0; z-index:0; }
.stage-frame{
  position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s;
}
.stage-frame.active{ opacity:1; visibility:visible; z-index:1; transition: opacity 1.1s var(--ease); }
.stage-frame img{
  width:100%; height:100%; object-fit:cover;
  animation: stagezoom 6.5s ease-out forwards;
}
@keyframes stagezoom{ from{ transform: scale(1.06);} to{ transform: scale(1);} }
.stage-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 32%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.95) 100%),
    linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.05) 50%, rgba(0,0,0,.4) 100%);
}
.stage-spot{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  transition: opacity .4s;
  background: radial-gradient(560px circle at var(--sx,50%) var(--sy,40%), rgba(226,19,31,.22), transparent 62%);
}
.stage:hover .stage-spot{ opacity:1; }

.stage-content{ position:relative; z-index:3; width: var(--wrap); margin: 0 auto 64px; max-width: 760px; }
.eyebrow{
  display:flex; align-items:center; gap:10px; font-family: var(--mono); font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; color: rgba(247,246,244,.82); margin: 0 0 18px;
}
.dot{ width:7px; height:7px; border-radius:50%; background: var(--red); box-shadow: 0 0 0 4px rgba(226,19,31,.22); flex:none; }
.stage-title{
  font-family: var(--display); font-size: clamp(2.6rem, 7.6vw, 5.4rem);
  text-transform: uppercase; line-height: .98; letter-spacing: -0.01em;
}
.stage-sub{ margin: 20px 0 0; max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.1rem); color: rgba(247,246,244,.8); }
.stage-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 32px; }

.stage-now-wrap{ width: var(--wrap); margin: 0 auto 34px; position:relative; z-index:3; }
.stage-now{
  display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; max-width:100%;
  font-family: var(--mono); text-transform:uppercase;
  background: var(--gdark-bg); border: 1px solid var(--gdark-border); border-radius: var(--r-pill);
  padding: 14px 22px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--gdark-highlight);
}
.stage-now-label{ font-size:.68rem; letter-spacing:.16em; color: var(--red); }
.stage-now strong{ font-size:.95rem; letter-spacing:.03em; }
.stage-now span:not(.stage-now-label){ font-size:.72rem; color: var(--steel); letter-spacing:.02em; }
.stage-dashes{ display:flex; gap:8px; margin-left:auto; }
.stage-dash{
  width:30px; height:3px; border:none; padding:0; cursor:pointer; background: rgba(247,246,244,.25);
  transition: background .3s, width .3s;
}
.stage-dash.active{ background: var(--red); width:46px; }

@media (max-width: 700px){
  .stage-now{ gap:10px; }
  .stage-dashes{ width:100%; margin-left:0; order:3; }
}

/* ===== Ticker ===== */
.ticker{ position:relative; background: var(--page-bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow:hidden; }
.ticker-track{
  display:flex; width:max-content; gap: 22px; padding: 15px 0;
  animation: ticker 30s linear infinite;
  font-family: var(--mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; color: var(--ink-dim);
}
.ticker-track span{ color: var(--ink); }
.ticker-track i{ color: var(--red); font-style:normal; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ===== Sections ===== */
.section{ padding: clamp(64px, 11vw, 130px) 0; scroll-margin-top: 90px; }
.section-dark{ background: var(--page-bg-alt); }
.tag{
  font-family: var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color: var(--red); margin: 0 0 16px;
}
.tag-chip{
  border: 1px solid rgba(226,19,31,.5); border-left: 4px solid var(--red);
  padding: 3px 9px; border-radius:2px; background: rgba(226,19,31,.08);
}
.h2{
  font-size: clamp(2rem, 4.4vw, 3.2rem); text-transform:uppercase; line-height:1.04;
  letter-spacing:-.01em; margin-bottom: 18px; max-width: 16ch;
}
.p-lead{ font-size: 1.08rem; color: var(--text-soft); max-width: 56ch; margin: 0 0 8px; }
.p-body{ color: var(--text-softer); max-width: 56ch; }

.reveal{
  opacity:0; transform: translateY(38px) scale(.97); filter: blur(7px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

.follow-grid .follow-card:nth-child(2){ transition-delay: .12s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  .stage-frame img{ animation:none; }
  .ticker-track{ animation:none; }
  .wall-row{ animation:none !important; }
}

.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:600;
  background: linear-gradient(90deg, var(--red-dim), var(--red));
  box-shadow: 0 0 12px rgba(226,19,31,.6); transition: width .1s linear;
}

/* ===== About ===== */
.about-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items:center; }
.fact-row{ display:flex; gap: 34px; margin: 36px 0 32px; flex-wrap:wrap; }
.fact{ display:flex; flex-direction:column; gap:4px; }
.fact strong{ font-family: var(--display); font-size:2.3rem; color:var(--red); line-height:1; }
.fact span{ font-family: var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color: var(--ink-dim); max-width:17ch; }

.founder{ display:flex; align-items:center; gap:16px; padding-top: 24px; border-top: 1px solid var(--line); }
.founder img{ width:54px; height:54px; border-radius:50%; object-fit:cover; object-position: top center; border: 2px solid var(--red); }
.founder div{ display:flex; flex-direction:column; }
.founder strong{ font-size:.94rem; }
.founder span{ font-family: var(--mono); font-size:.7rem; color: var(--ink-dim); text-transform:uppercase; letter-spacing:.03em; }

.about-visual{ position:relative; }
.about-main{ width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.about-inset{
  position:absolute; right:-8%; bottom:-9%; width: 52%; aspect-ratio: 4/3; object-fit:cover;
  border-radius: var(--r-md); border: 4px solid var(--page-bg); box-shadow: var(--shadow-2);
  transition: border-color .4s var(--ease);
}
@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; gap: 60px; }
  .about-visual{ order:-1; max-width: 380px; margin: 0 auto 20px; }
}

/* ===== Photo wall ===== */
.wall-head{ margin-bottom: 40px; }
.wall{ display:flex; flex-direction:column; gap: 14px; }
.wall-row{ display:flex; gap:14px; width:max-content; }
.wall-row[data-dir="left"]{ animation: wallLeft 52s linear infinite; }
.wall-row[data-dir="right"]{ animation: wallRight 52s linear infinite; }
.wall-row.paused{ animation-play-state: paused; }
@keyframes wallLeft{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes wallRight{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
.wall-tile{
  display:block; width: 300px; aspect-ratio: 4/3; border-radius: var(--r-md); overflow:hidden; flex:none; position:relative;
  box-shadow: var(--shadow-1); transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.wall-tile img{ width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.03); transition: transform .5s var(--ease), filter .5s; }
.wall-tile::after{ content:''; position:absolute; inset:0; background: rgba(226,19,31,0); transition: background .3s; }
.wall-tile:hover{ box-shadow: var(--shadow-2); transform: translateY(-6px); }
.wall-tile:hover img{ transform: scale(1.06); }
.wall-tile:hover::after{ background: rgba(226,19,31,.12); }
@media (max-width: 640px){ .wall-tile{ width: 210px; } }

.wall-foot{ margin-top: 40px; display:flex; justify-content:center; }

/* ===== Reel ===== */
.reel{ position:relative; margin-top: 44px; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow:hidden; border: 1px solid var(--glass-border); background: var(--page-bg-alt); box-shadow: var(--shadow-2); }
.reel video, .reel > img{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-play{
  position:absolute; inset:0; margin:auto; width:80px; height:80px; border-radius:50%;
  background: var(--gdark-bg-strong); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--gdark-border); color: var(--white);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--gdark-highlight);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .3s var(--ease), background .3s, border-color .3s;
}
.reel-play:hover{ transform: scale(1.08); border-color: var(--red); }
.reel-play svg{ width:34px; height:34px; }
.reel.playing .reel-play{ opacity:0; pointer-events:none; }

/* ===== Follow ===== */
.follow-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.follow-card{
  display:flex; flex-direction:column; gap:12px; text-decoration:none; color: var(--ink);
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: 40px 34px; position:relative; overflow:hidden;
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--glass-highlight);
  transition: opacity 1.1s var(--ease), filter 1.1s var(--ease), transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease);
}
.follow-card:hover{ border-color: rgba(226,19,31,.6); transform: translateY(-6px); box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-highlight); }
.follow-card::before{
  content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle, rgba(226,19,31,.25), transparent 70%);
}
.follow-icon{ width:52px; height:52px; border:1px solid var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--red); }
.follow-icon svg{ width:26px; height:26px; }
.follow-card h3{ font-size:1.6rem; text-transform:uppercase; }
.follow-stat{ font-family: var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color: var(--red); }
.follow-card p{ color: var(--text-softer); max-width: 40ch; }
.follow-cta{ font-family: var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color: var(--red); margin-top:auto; }
.follow-cta i{ display:inline-block; transition: transform .3s var(--ease); }
.follow-card:hover .follow-cta i{ transform: translateX(6px); }
@media (max-width: 760px){ .follow-grid{ grid-template-columns: 1fr; } }

/* ===== Contact ===== */
.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; margin-top: 44px; align-items:stretch; }
.contact-info{ display:flex; flex-direction:column; }
.contact-line{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration:none; color: var(--ink); }
.contact-line:not(.contact-line-static):hover{ color: var(--red); }
.contact-label{ font-family: var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-dim); }
.contact-value{ font-size: 1.04rem; text-align:right; }
.map-frame{ margin-top: 24px; border: 1px solid var(--glass-border); border-radius: var(--r-md); overflow:hidden; aspect-ratio: 16/10; filter: grayscale(.35) contrast(1.1); box-shadow: var(--shadow-1); }
.map-frame iframe{ width:100%; height:100%; border:0; }

.contact-cta{
  background: linear-gradient(160deg, rgba(226,19,31,.28), rgba(0,0,0,.5)), var(--gdark-bg);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(226,19,31,.35); border-radius: var(--r-lg); padding: 44px 38px;
  display:flex; flex-direction:column; justify-content:center; color: var(--white);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--gdark-highlight);
}
.contact-cta-eyebrow{ font-family: var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color: rgba(247,246,244,.7); margin:0 0 14px; }
.contact-cta h3{ font-size: 1.8rem; text-transform:uppercase; margin-bottom: 14px; line-height:1.05; }
.contact-cta p{ color: rgba(247,246,244,.8); margin-bottom: 28px; }
.contact-socials{ display:flex; gap:14px; margin-top: 28px; }
.contact-socials a{
  width:42px; height:42px; border:1px solid var(--gdark-border); border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--gdark-bg); backdrop-filter: blur(14px); box-shadow: var(--shadow-1), inset 0 1px 0 var(--gdark-highlight);
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.contact-socials a:hover{ border-color: var(--white); color: var(--white); transform: translateY(-3px); }
.contact-socials svg{ width:20px; height:20px; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ===== Footer ===== */
.footer{ background: var(--page-bg-alt); border-top: 1px solid var(--line); padding: 44px 0 26px; }
.footer-inner{ display:flex; align-items:center; gap: 28px; flex-wrap:wrap; justify-content:space-between; }
.footer-logo{ height: 32px; width:auto; }
.footer-links{ display:flex; gap: 22px; flex-wrap:wrap; }
.footer-links a{ font-family: var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; color: var(--ink-dim); }
.footer-links a:hover{ color: var(--ink); }
.footer-socials{ display:flex; gap:12px; }
.footer-socials a{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--ink-dim); }
.footer-socials a:hover{ color: var(--ink); border-color: var(--ink); }
.footer-socials svg{ width:17px; height:17px; }
.footer-copy{ width: var(--wrap); margin: 30px auto 0; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--mono); font-size:.72rem; color: var(--ink-dim); text-transform:uppercase; letter-spacing:.04em; }