@font-face{font-family:'Hermes';src:url(fonts/Hermes.otf) format('opentype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Roboto';src:url(fonts/Roboto-Medium.ttf) format('truetype');font-weight:100 600;font-display:swap}
@font-face{font-family:'Roboto';src:url(fonts/Roboto-Bold.ttf) format('truetype');font-weight:700 900;font-display:swap}
@font-face{font-family:'Tilda Script';src:url(fonts/TildaScriptSemibold.otf) format('opentype');font-weight:100 900;font-display:swap}
:root{
  --red:#E1251B; --maroon:#A8140F; --ink:#B8140F; --bg:#E1251B; --cream:#FFFFFF; --pink:#FFB0B5; --green:#1E9E4A;
  --glow:#FF5A3C;
  --display:'Hermes','Roboto Condensed',Impact,system-ui,sans-serif; --body:'Roboto',system-ui,sans-serif; --script:'Tilda Script','Hermes',cursive;
  --pad:clamp(16px,5vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--cream);font-weight:500;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}

/* LAYERS: bg 0 · main 1 · canvas 2 · ui 10 */
.bg{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,#EC3A2B 0%,#E1251B 55%,#CC1B14 100%);overflow:hidden}
.bg__glow{position:absolute;inset:-20%;background:
  radial-gradient(48% 52% at 50% 50%,color-mix(in srgb,var(--glow) 85%,transparent) 0%,transparent 72%),
  radial-gradient(70% 60% at 50% 120%,color-mix(in srgb,var(--glow) 55%,transparent) 0%,transparent 70%);
  }
.bg__grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:2;pointer-events:none}
main{position:relative;z-index:1}

/* LOADER */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .8s,visibility .8s}
.loader__logo{width:min(260px,60vw)}
.loader__bar{width:160px;height:3px;background:rgba(255,255,255,.28);border-radius:3px;overflow:hidden}
.loader__bar i{display:block;height:100%;width:40%;background:#fff;animation:load 1s ease-in-out infinite}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
body.ready .loader{opacity:0;visibility:hidden}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad)}
.nav__logo img{height:44px;width:auto}
.nav__right{display:flex;align-items:center;gap:10px}
.nav__soon,.nav__ig{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;border-radius:999px;text-decoration:none}
.nav__soon{background:var(--cream);color:var(--red)}
.nav__soon i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
.nav__ig{border:2px solid rgba(255,255,255,.75);color:#fff;background:transparent;cursor:pointer}
.nav__ig:hover{background:rgba(255,255,255,.18)}
@keyframes pulse{50%{opacity:.2;transform:scale(.6)}}

/* SIDE DOTS */
.dots{position:fixed;right:calc(var(--pad) - 4px);top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:14px}
.dots a{position:relative;width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.8);transition:all .3s}
.dots a.on{background:var(--cream);border-color:var(--cream);transform:scale(1.3)}
.dots a::after{content:attr(data-label);position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none}
.dots a:hover::after{opacity:1}

/* SECTIONS */
.sec{position:relative;min-height:100vh;min-height:100svh;padding:110px var(--pad) 60px;display:flex}
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:22px}
.kicker i{width:36px;height:3px;background:var(--cream);border-radius:2px}
h2{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:0;line-height:.92}

/* HERO */
.hero{flex-direction:column;justify-content:center;align-items:center;text-align:center}
.hero__title{font-family:var(--display);font-weight:900;font-size:clamp(80px,12.5vw,240px);line-height:.84;letter-spacing:.005em;color:var(--cream)}
.hero__title .line{display:block;overflow:hidden;padding-top:.04em}
.hero__soon{font-family:var(--script);font-weight:600;font-size:clamp(30px,4.4vw,76px);line-height:1.1;margin-top:clamp(10px,2vw,28px);color:#fff;text-shadow:0 2px 24px rgba(120,10,6,.35)}
.hero__title .line span{display:block;transform:translateY(105%);transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.hero__title .line + .line span{transition-delay:.12s;color:transparent;-webkit-text-stroke:3px var(--cream)}
body.ready .hero__title .line span{transform:none}
.hero__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:48px;display:flex;justify-content:space-between;align-items:flex-end;text-align:left}
.hero__sub{font-size:clamp(17px,1.6vw,24px);line-height:1.3;max-width:26ch;font-weight:500}
.hero__sub b{font-weight:800;color:#fff}
.hero__meta{display:flex;gap:22px;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.95}
.scroll-cue{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.scroll-cue span{width:1px;height:46px;background:linear-gradient(var(--cream),transparent);animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* LINEUP */
.lineup{flex-direction:column;justify-content:space-between;align-items:center;text-align:center}
.lineup h2{font-size:clamp(56px,9vw,150px)}
.lineup .kicker{justify-content:center}
.lineup__labels{display:grid;grid-template-columns:1fr 1fr;width:min(1100px,100%);gap:20px}
.lineup__labels a{text-decoration:none;font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,54px);text-transform:uppercase;display:flex;flex-direction:column;gap:8px;align-items:center}
.lineup__labels small{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.16em;opacity:.95}

/* DETAIL */
.detail{display:grid;grid-template-columns:minmax(300px,540px) 1fr 200px;padding-right:calc(var(--pad) + 44px);gap:24px;align-items:center}
.detail h2{font-size:clamp(52px,6vw,96px);white-space:nowrap}
.detail__tag{font-family:var(--script);font-size:32px;font-weight:600;color:#fff;margin:12px 0 20px;line-height:1.1}
.detail__text>p{font-size:17px;line-height:1.6;color:#fff}
.detail .fine{font-size:14px;margin-top:18px;color:rgba(255,255,255,.88)}
.drag-zone{align-self:stretch;min-height:60vh;cursor:grab;position:relative;touch-action:pan-y}
.drag-zone:active{cursor:grabbing}
.drag-zone span{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;border-radius:999px;border:2px solid rgba(255,255,255,.75);background:rgba(160,16,12,.35);backdrop-filter:blur(8px);white-space:nowrap}
.specs{list-style:none;display:flex;flex-direction:column;gap:12px}
.specs li{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.specs b{display:block;font-family:var(--display);font-weight:800;font-size:38px;line-height:1;color:#fff}
.specs span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.95}

/* COMPANY */
.company{align-items:center}
.company__text{max-width:720px}
.company h2{font-size:clamp(46px,5.4vw,84px)}
.company__text>p{margin-top:24px;font-size:18px;line-height:1.6;color:#fff}
blockquote{margin-top:28px;padding:20px 24px;border-left:5px solid #fff;background:rgba(255,255,255,.16);border-radius:0 18px 18px 0;font-size:19px;font-weight:700;line-height:1.45}
blockquote small{display:block;font-family:var(--display);font-size:15px;letter-spacing:.14em;text-transform:uppercase;opacity:.95;margin-bottom:6px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
.stats div{padding:16px 14px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4)}
.stats div:nth-child(2){background:var(--green);border-color:var(--green)}
.stats b{display:block;font-family:var(--display);font-weight:800;font-size:34px;line-height:1;color:#fff}
.stats span{display:block;margin-top:6px;font-size:13px;font-weight:500;opacity:.95;line-height:1.3}
.values{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.values li{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:999px;border:2px solid rgba(255,255,255,.75)}

/* CONTACT */
.contact{flex-direction:column;justify-content:flex-end}
.contact__big{font-size:clamp(56px,13vw,220px);line-height:.84}
.contact__big span{color:transparent;-webkit-text-stroke:3px var(--cream)}
.contact__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px;padding-top:32px;border-top:2px solid rgba(255,255,255,.5)}
.contact h4{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.95;margin-bottom:10px}
.contact p{font-size:18px;font-weight:500;line-height:1.5}
.contact a{text-decoration:none;border-bottom:2px solid rgba(255,255,255,.6)}
.contact__bottom{display:flex;justify-content:space-between;margin-top:56px;font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}

/* REVEAL */
.rv{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* MOBILE */
@media (max-width:900px){
  .bg__grain{display:none}
  .specs li,.drag-zone span,.stats div{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .bg__glow{inset:0}
  .nav{padding:16px}
  .nav__logo img{height:34px}
  .nav__ig,.nav__soon{display:none}
  .dots{display:none}
  .sec{padding:96px 16px 40px}
  .hero__foot{left:16px;right:16px;bottom:28px;flex-direction:column;align-items:flex-start;gap:10px}
  .scroll-cue{display:none}
  .hero__soon{font-size:8vw}
  .hero__title{font-size:17vw;white-space:nowrap}
  .hero{justify-content:flex-start;padding-top:130px}
  .detail{padding-right:16px}
  .detail h2{font-size:15vw}
  .company h2{font-size:11vw}
  .lineup h2{font-size:15vw}
  .contact__big{font-size:17vw}
  .detail__tag{font-size:26px}
  .detail{grid-template-columns:1fr;align-content:end;gap:16px}
  .detail .drag-zone{order:-1;min-height:46vh}
  .detail__text>p:not(.fine){font-size:16px}
  .specs{flex-direction:row;flex-wrap:wrap}
  .specs li{flex:1 1 calc(50% - 6px);padding:12px 14px}
  .specs b{font-size:30px}
  .stats{grid-template-columns:1fr 1fr}
  .contact__grid{grid-template-columns:1fr 1fr}
  .contact__bottom{flex-direction:column;gap:8px}
}
@media (max-width:480px){.contact__grid{grid-template-columns:1fr}}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lineup__lead{margin-top:18px;font-size:clamp(16px,1.5vw,22px);font-weight:500;max-width:34ch;margin-inline:auto;color:#fff}