/* Heroica landing. Colors and the display font follow the app (student page "hero lobby"). */
:root{
  --bg:#070d1a;--bg2:#0b1428;--ink:#eef4fb;--muted:#a9bbd2;--card:#16243f;--card2:#0f1b33;--edge:#2c4268;
  --gold:#f2b705;--goldtxt:#ffd24a;--teal:#3fd0c0;--blue:#4c8dff;--violet:#9b7bff;--red:#ff5a4f;--green:#4cd07a;--orange:#ff8a2a;
  --focus:#ffe14d;--dark:#1b1424;
  --display:"Lilita One","Arial Black","Segoe UI Black",sans-serif;
  --body:"Nunito Sans","Segoe UI","Trebuchet MS",system-ui,sans-serif;
  --wrap:1180px;--pad:clamp(16px,4vw,40px);--ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
/* a fine film grain over everything, drawn here */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
main{overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:calc(820px + 2*var(--pad))}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--dark);padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute}
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--teal),var(--gold),var(--orange))}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:24px;height:64px;padding:0 var(--pad);
  background:linear-gradient(#070d1ae6,#070d1a00);transition:background .5s ease,backdrop-filter .5s ease}
.top.solid{background:#070d1ad9;backdrop-filter:blur(12px);box-shadow:0 1px 0 #ffffff14}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:26px;letter-spacing:.02em;color:var(--goldtxt);text-shadow:0 2px 0 var(--dark)}
.brand svg{width:28px;height:32px}
.links{display:flex;gap:2px;margin-left:auto}
.links a{position:relative;padding:8px 11px;border-radius:10px;text-decoration:none;font-weight:700;font-size:15px;color:var(--ink);opacity:.86;transition:opacity .3s}
.links a::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.links a:hover,.links a.here{opacity:1}.links a:hover::after,.links a.here::after{transform:scaleX(1)}
.lang{display:flex;border:2px solid #ffffff33;border-radius:999px;overflow:hidden;background:#070d1a99}
.lang button{padding:7px 13px;min-height:36px;font-weight:800;font-size:14px;letter-spacing:.04em;color:var(--muted);transition:background .4s,color .4s}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--dark)}
@media (max-width:1040px){.links{display:none}.lang{margin-left:auto}}

/* hero */
.hero{position:relative;min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:flex-end;padding:96px 0 28px;isolation:isolate;
  background:linear-gradient(#0b1a3a 0,#13295a 45%,#1d2f63 70%,var(--bg) 100%)}
.hero-art{position:absolute;inset:0;z-index:-1;overflow:hidden}
.scene,.keyart,.embers{position:absolute;inset:0;width:100%;height:100%}
.scene,.keyart{object-fit:cover}
.keyart{object-position:72% 40%;transform-origin:70% 45%}
img.missing{display:none}
.embers{pointer-events:none;mix-blend-mode:screen}
.veil{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 78% 40%,#070d1a00 30%,#070d1a99 100%),
  linear-gradient(90deg,#070d1af2 0,#070d1ac4 30%,#070d1a40 58%,#070d1a00 78%),
  linear-gradient(0deg,var(--bg) 0,#070d1ad9 18%,#070d1a00 50%)}
.hero-in{position:relative;padding-bottom:clamp(28px,5vh,56px)}
.eyebrow{display:inline-block;font-weight:800;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--dark);background:var(--teal);padding:5px 12px;border-radius:6px;transform:skewX(-8deg)}
.wordmark{font-family:var(--display);font-weight:400;font-size:clamp(76px,15vw,200px);line-height:.92;letter-spacing:.01em;margin:14px 0 10px -4px;text-transform:uppercase;width:max-content;max-width:100%;
  background:linear-gradient(100deg,#fff0 42%,#fffffff2 50%,#fff0 58%) 100% 0/260% 100% no-repeat,linear-gradient(#fff3c0 8%,#ffd24a 42%,#f2a005 78%,#c96a00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #3a1d05) drop-shadow(0 10px 22px #000000aa)}
.promise{font-family:var(--display);font-size:clamp(25px,3.300vw,44px);line-height:1.12;max-width:17em;text-shadow:0 2px 0 var(--dark),0 6px 18px #000a}
.promise b{font-weight:400;color:var(--goldtxt)}
.sub{margin-top:14px;max-width:34em;font-size:clamp(16px,1.400vw,19px);color:#d6e2f2;text-shadow:0 1px 8px #000c}
.trailer-btn{position:relative;margin-top:24px;display:inline-flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;border-radius:999px;font-weight:800;font-size:17px;
  background:#ffffff1c;border:2px solid #ffffff59;backdrop-filter:blur(6px);transition:background .4s ease,border-color .4s ease}
.trailer-btn:hover{background:#ffffff33;border-color:#fff}
.play{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--dark)}
.play svg{width:24px;height:24px;margin-left:2px}
.play::before,.play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;opacity:0;animation:ring 3.200s ease-out infinite}
.play::after{animation-delay:1.600s}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.100);opacity:0}}

/* the two doors */
.doors{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.door{--c:var(--teal);position:relative;display:flex;align-items:center;gap:18px;padding:16px 20px 16px 16px;text-decoration:none;border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,#0c1730) 0,#0c1730 62%);border:2px solid color-mix(in srgb,var(--c) 70%,#0c1730);
  box-shadow:0 6px 0 color-mix(in srgb,var(--c) 34%,#050912),0 18px 40px #0009}
.door.teacher{--c:var(--gold)}
/* a slow light sweeps across each door */
.door::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#fff0 40%,#ffffff26 50%,#fff0 60%);transform:translateX(-120%);animation:sweep 6s var(--ease) infinite}
.door.teacher::before{animation-delay:3s}
@keyframes sweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.doors.ready .door{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.door:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 10px 0 color-mix(in srgb,var(--c) 34%,#050912),0 26px 50px #000b,0 0 44px color-mix(in srgb,var(--c) 40%,transparent)}
.door:active{transform:translateY(2px);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 34%,#050912),0 10px 24px #0009}
.arch{flex:none;width:64px;position:relative}
.arch svg{width:64px;height:80px;overflow:visible}
.a-frame{fill:#0a1226;stroke:var(--c);stroke-width:3;stroke-linejoin:round}
.a-light{fill:var(--c);filter:drop-shadow(0 0 10px var(--c));transition:filter .6s var(--ease)}
.door:hover .a-light{filter:drop-shadow(0 0 22px var(--c)) brightness(1.2)}
.door-tx{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.door-tx strong{font-family:var(--display);font-weight:400;font-size:clamp(25px,2.600vw,34px);line-height:1.05;color:#fff}
.door-tx small{font-size:15.500px;line-height:1.35;color:#d6e2f2}
.go{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--c);color:var(--dark);transition:transform .5s var(--ease)}
.go svg{width:24px;height:24px}
.door:hover .go{transform:translateX(5px)}
.door-note{grid-column:1/-1;text-align:center;font-size:14.500px;color:var(--muted);margin-top:4px}
@media (max-width:760px){
  .hero{padding-top:84px}
  .keyart{object-position:62% 30%}
  .veil{background:linear-gradient(0deg,var(--bg) 0,#070d1af2 38%,#070d1aa6 64%,#070d1a4d 100%)}
  .doors{grid-template-columns:1fr;gap:14px}
  .door{padding:12px 14px 12px 12px;gap:14px}
  .arch,.arch svg{width:52px}.arch svg{height:65px}
  .go{width:40px;height:40px}
  .trailer-btn{margin-top:18px}
}

/* numbers strip */
.stats{border-block:1px solid #ffffff14;background:linear-gradient(90deg,#0b1428,#101d3a,#0b1428)}
.stats ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-block:26px}
.stats li{display:flex;align-items:center;gap:14px;justify-content:center}
.stats b{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,64px);line-height:1;color:var(--goldtxt);text-shadow:0 3px 0 #3a1d05;font-variant-numeric:tabular-nums;min-width:1.2em;text-align:right}
.stats span{font-weight:800;font-size:15px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);max-width:9em}
@media (max-width:760px){.stats ul{grid-template-columns:1fr 1fr;gap:18px 8px}.stats li{justify-content:flex-start}}

/* sections */
.band{position:relative;padding:clamp(64px,9vw,120px) 0}
.band.dark{background:radial-gradient(90% 60% at 50% 0,#13234a 0,transparent 70%),var(--bg2);border-block:1px solid #ffffff10}
.kicker{font-weight:800;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:28px;height:3px;border-radius:2px;background:currentColor}
.kicker.red{color:var(--red)}.kicker.gold{color:var(--goldtxt)}.kicker.green{color:var(--green)}
.band h2,.reel h2,.end h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.04;margin-top:8px;text-shadow:0 3px 0 var(--dark);max-width:16em;text-wrap:balance}
.lead{margin-top:14px;max-width:38em;font-size:19px;color:#cfdcee}
.h3big{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.1;margin-bottom:10px}

/* pointer light on cards */
.glow{position:relative;overflow:hidden}
.glow::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c,#7fa8ff) 30%,transparent),transparent 70%)}
.glow:hover::after{opacity:1}

.steps{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps li{padding:26px 22px 24px;border-radius:20px;background:linear-gradient(160deg,var(--card),var(--card2));border:2px solid var(--edge);overflow:visible}
.steps .num{position:absolute;top:-16px;left:20px;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--dark);font-family:var(--display);font-size:22px;box-shadow:0 3px 0 #8a5a00}
.st-ico{width:64px;height:64px;margin:6px 0 12px}
.steps h3{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.15}
.steps p{margin-top:6px;color:var(--muted)}
.steps li+li::before{content:"";position:absolute;left:-17px;top:50%;width:12px;height:12px;border:solid var(--gold);border-width:3px 3px 0 0;transform:translateY(-50%) rotate(45deg)}
.steps li.glow::after{border-radius:18px}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:30px}.steps li+li::before{left:50%;top:-22px;transform:translateX(-50%) rotate(135deg)}}

/* pictures: a striped stand-in shows until the file exists */
.shot{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:18px;
  background:repeating-linear-gradient(135deg,#ffffff0a 0 14px,transparent 14px 28px),linear-gradient(135deg,color-mix(in srgb,var(--c,#5f7fae) 46%,#0c1730),#0c1730 80%)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* world cards */
.world{position:relative;border-radius:20px;overflow:hidden;border:2px solid color-mix(in srgb,var(--c) 55%,#0c1730);background:#0c1730;isolation:isolate;
  box-shadow:0 18px 44px #0008;transition:border-color .5s,box-shadow .6s var(--ease)}
.world .shot{border-radius:0}
.world .shot img{transition:transform 1.400s var(--ease)}
.world:hover{border-color:var(--c);box-shadow:0 22px 60px #000a,0 0 50px color-mix(in srgb,var(--c) 30%,transparent)}
.world:hover .shot img{transform:scale(1.06)}
.world::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#060b17f5 0,#060b17b3 30%,#060b1700 62%)}
.w-tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,2.200vw,26px)}
.w-tx h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.200vw,44px);line-height:1;color:#fff;text-shadow:0 3px 0 var(--dark)}
.w-tx p{margin-top:6px;max-width:30em;color:#dbe6f5;font-size:clamp(15px,1.300vw,17px);line-height:1.35}
.boss{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:5px 12px 5px 8px;border-radius:999px;font-size:14.500px;background:#070d1ad9;border:1.500px solid var(--c);color:#fff}
.boss svg{width:20px;height:20px;color:var(--c)}
.w-n{position:absolute;top:8px;right:16px;z-index:2;font-family:var(--display);font-size:clamp(44px,6vw,84px);line-height:1;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--c) 80%,#fff);opacity:.85}
.soon{position:absolute;top:14px;left:14px;z-index:2;padding:4px 12px;border-radius:6px;background:var(--gold);color:var(--dark);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;transform:skewX(-8deg)}
.cards{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.cards{grid-template-columns:1fr;gap:16px}.w-tx p{font-size:14.500px}}
.tilt{transform-style:preserve-3d;will-change:transform}

/* the worlds reel: scrolls sideways as the page scrolls down (wide screens with motion), a swipe row elsewhere */
.reel{position:relative;padding:clamp(64px,9vw,110px) 0}
.reel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.reel-count{font-family:var(--display);color:var(--muted);font-size:22px;white-space:nowrap}
.reel-count b{font-weight:400;font-size:clamp(44px,5vw,68px);color:var(--goldtxt);margin-right:8px;font-variant-numeric:tabular-nums}
.reel-view{margin-top:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reel-view::-webkit-scrollbar{display:none}
.reel-track{display:flex;gap:22px;width:max-content;padding:8px max(var(--pad),calc((100vw - var(--wrap))/2)) 26px}
.reel .world{flex:none;width:min(84vw,800px);scroll-snap-align:center}
.reel-bar{height:4px;border-radius:4px;background:#ffffff1c;overflow:hidden}
.reel-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(.125);background:linear-gradient(90deg,var(--teal),var(--gold))}
.reel.pinned{padding:0}
.reel.pinned .reel-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:64px}
.reel.pinned .reel-view{overflow:visible;scroll-snap-type:none}
.reel.pinned .reel-track{will-change:transform}
.reel.pinned .world{width:auto;height:min(58vh,470px);aspect-ratio:16/9}
.reel.pinned .world .shot{height:100%}
@media (max-width:760px){.reel-count{display:none}}

/* bosses */
.bosses{margin-top:34px}
.b-stage{display:grid;gap:18px}
.b-panel{position:relative;border-radius:22px;overflow:hidden;border:2px solid color-mix(in srgb,var(--c) 60%,#0c1730);isolation:isolate;background:#0c1730}
.b-panel .shot{border-radius:0}
.b-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#060b17f0 0,#060b1799 34%,#060b1700 64%),linear-gradient(0deg,#060b17d9 0,#060b1700 40%)}
.b-tx{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(16px,3.400vw,44px);max-width:min(560px,92%)}
.b-where{font-weight:800;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.b-tx h3{font-family:var(--display);font-weight:400;font-size:clamp(40px,7vw,96px);line-height:.92;margin:6px 0 10px;color:#fff;text-shadow:0 4px 0 var(--dark),0 0 40px color-mix(in srgb,var(--c) 50%,transparent)}
.b-tx h3 span{display:block;font-size:.34em;line-height:1.2;color:var(--c);text-shadow:0 2px 0 var(--dark);margin-top:6px}
.b-tx p:last-child{color:#dbe6f5;font-size:clamp(15px,1.400vw,18px)}
.js .b-stage{display:block;position:relative;aspect-ratio:16/9;border-radius:22px}
.js .b-panel{position:absolute;inset:0;visibility:hidden}
.js .b-panel.on{visibility:visible;z-index:1}
.js .b-panel.in{visibility:visible;z-index:2}
.b-tabs{display:none}
.js .b-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.b-tabs button{position:relative;padding:12px 8px 14px;border-radius:14px;font-family:var(--display);font-size:clamp(16px,2vw,24px);color:var(--muted);background:#ffffff0d;border:2px solid #ffffff1c;overflow:hidden;transition:color .4s,border-color .4s,background .4s}
.b-tabs button:hover{color:#fff;border-color:#ffffff59}
.b-tabs button[aria-pressed="true"]{color:#fff;border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,#0c1730)}
.b-tabs i{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:0 50%}
@media (max-width:760px){
  .js .b-stage{aspect-ratio:4/5}
  .b-panel:not(.js *) .shot{aspect-ratio:4/5}
  .b-panel::after{background:linear-gradient(0deg,#060b17f5 0,#060b17a6 42%,#060b1700 72%)}
  .js .b-panel .shot{height:100%;aspect-ratio:auto}
  .b-tabs button{padding:10px 2px 12px;font-size:15px}
}

/* text beside a picture */
.split{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:1.150fr 1fr;gap:clamp(22px,4vw,56px);align-items:center}
.split.flip>.shot{order:2}
.split .shot{border:2px solid color-mix(in srgb,var(--c) 55%,#0c1730);box-shadow:0 24px 60px #0009}
.split p{color:#cfdcee;font-size:18px}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.flip>.shot{order:0}}
.ticks{margin-top:16px;display:grid;gap:10px}
.ticks li{position:relative;padding-left:34px;color:#dbe6f5}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--green)}
.ticks li::after{content:"";position:absolute;left:6px;top:7px;width:9px;height:5px;border:solid var(--dark);border-width:0 0 3px 3px;transform:rotate(-45deg)}
.btn{display:inline-block;margin-top:20px;padding:12px 24px;border-radius:14px;background:var(--gold);color:var(--dark);font-weight:800;text-decoration:none;box-shadow:0 5px 0 #8a5a00;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #8a5a00}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #8a5a00}

/* class names passing by */
.marquee{overflow:hidden;padding:18px 0;border-block:1px solid #ffffff14;background:#0b1428;transform:rotate(-1.200deg) scale(1.02);margin:-8px 0}
.mq-track{display:flex;gap:44px;width:max-content;animation:mq 46s linear infinite}
.mq-track span{font-family:var(--display);font-size:clamp(26px,3.400vw,44px);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.500px #6f8fc4;white-space:nowrap}
.mq-track span:nth-child(3n+1){color:var(--goldtxt);-webkit-text-stroke:0}
.mq-track span::after{content:"✦";margin-left:44px;color:var(--teal);-webkit-text-stroke:0;font-size:.6em;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}

/* hero section */
.feat{display:grid;gap:18px}
.feat li{display:flex;gap:16px;align-items:flex-start}
.feat svg{flex:none;width:44px;height:44px;padding:9px;border-radius:14px;color:var(--dark);background:var(--goldtxt);box-shadow:0 3px 0 #8a5a00}
.feat b{display:block;font-family:var(--display);font-weight:400;font-size:23px;line-height:1.1}
.feat span{color:#cfdcee}
.rar-t{margin-top:26px;font-weight:800;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)!important}
.rar{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.rar li{position:relative;padding:6px 14px;border-radius:999px;font-weight:800;font-size:14.500px;color:var(--r);border:2px solid var(--r);background:color-mix(in srgb,var(--r) 12%,#0c1730);overflow:hidden}
.rar li::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#fff0 35%,#ffffff59 50%,#fff0 65%);transform:translateX(-130%);animation:sweep 5s var(--ease) infinite;animation-delay:calc(var(--i,0)*.35s)}
.phones{margin-top:clamp(44px,7vw,90px);display:grid;grid-template-columns:1.200fr repeat(3,1fr);gap:clamp(12px,3vw,36px);align-items:center}
.phone{position:relative;aspect-ratio:390/844;border-radius:clamp(16px,2.600vw,34px);overflow:hidden;border:clamp(3px,.500vw,6px) solid #26365a;background:repeating-linear-gradient(135deg,#ffffff0a 0 14px,transparent 14px 28px),linear-gradient(160deg,#1b2a55,#0c1730);box-shadow:0 26px 60px #000a,0 0 0 1px #ffffff14}
.phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-tx p{color:#cfdcee;font-size:18px}
@media (max-width:760px){.phones{grid-template-columns:repeat(3,1fr)}.ph-tx{grid-column:1/-1}}

/* tiles */
.tiles{margin-top:clamp(36px,5vw,60px);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tiles li{padding:22px 20px;border-radius:18px;background:linear-gradient(160deg,var(--card),var(--card2));border:2px solid var(--edge);transition:border-color .5s,transform .6s var(--ease)}
.tiles li:hover{border-color:var(--c,#7fa8ff);transform:translateY(-4px)}
.tiles svg{width:40px;height:40px;color:var(--c,var(--green));margin-bottom:12px;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c,var(--green)) 50%,transparent))}
.tiles b{display:block;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.15}
.tiles span{display:block;margin-top:6px;color:var(--muted);font-size:15.500px;line-height:1.45}
.tiles.safe{grid-template-columns:repeat(3,1fr)}
.tiles.safe li{--c:var(--green)}
@media (max-width:1000px){.tiles{grid-template-columns:1fr 1fr}.tiles.safe{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tiles,.tiles.safe{grid-template-columns:1fr}}

/* videos and gallery */
.vids{margin-top:36px;display:grid;grid-template-columns:1.700fr 1fr;gap:18px;align-items:stretch}
.vid{border:2px solid color-mix(in srgb,var(--c) 60%,#0c1730);text-align:left;height:100%;min-height:200px;transition:border-color .5s,box-shadow .6s var(--ease)}
.vid img{transition:transform 1.400s var(--ease)}
.vid:hover{border-color:var(--c);box-shadow:0 0 60px color-mix(in srgb,var(--c) 30%,transparent)}
.vid:hover img{transform:scale(1.05)}
.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#060b17e6 0,#060b1700 50%)}
.play.big{position:absolute;left:50%;top:50%;z-index:2;width:clamp(64px,7vw,92px);height:clamp(64px,7vw,92px);margin:calc(clamp(64px,7vw,92px)/-2) 0 0 calc(clamp(64px,7vw,92px)/-2);background:var(--gold);box-shadow:0 0 0 8px #f2b70540}
.play.big svg{width:46%;height:46%}
.play.big::before,.play.big::after{border-color:var(--gold)}
.v-cap{position:absolute;left:18px;bottom:14px;z-index:2;display:flex;flex-direction:column}
.v-cap b{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.400vw,30px);line-height:1.1}
.v-cap small{color:#cfdcee;font-size:14.500px}
@media (max-width:760px){.vids{grid-template-columns:1fr}.vid{aspect-ratio:16/9}}
.gal{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g{border:2px solid #ffffff1f;cursor:zoom-in;transition:border-color .5s,transform .6s var(--ease)}
.g img{transition:transform 1.400s var(--ease)}
.g:hover{border-color:var(--c);transform:translateY(-4px)}.g:hover img{transform:scale(1.06)}
@media (max-width:760px){.gal{grid-template-columns:1fr 1fr;gap:10px}.g{border-radius:12px}}

/* questions */
.faq{margin-top:34px;display:grid;gap:12px}
.faq details{border-radius:16px;background:linear-gradient(160deg,var(--card),var(--card2));border:2px solid var(--edge);transition:border-color .4s}
.faq details[open]{border-color:var(--gold)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:18px 58px 18px 22px;font-family:var(--display);font-size:clamp(19px,2vw,23px);line-height:1.2;border-radius:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:12px;height:12px;margin-top:-9px;border:solid var(--gold);border-width:0 3px 3px 0;transform:rotate(45deg);transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.faq details p{padding:0 22px 20px;color:#cfdcee;max-width:44em}

/* the end: the doors again */
.end{position:relative;padding:clamp(70px,10vw,130px) 0 clamp(60px,8vw,100px);text-align:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 90% at 50% 100%,#3a2408 0,transparent 70%),radial-gradient(60% 80% at 50% 110%,#f2b70526 0,transparent 70%),var(--bg)}
.end .embers{z-index:-1}
.end h2{margin:0 auto 34px;font-size:clamp(44px,8vw,104px);
  background:linear-gradient(#fff3c0 8%,#ffd24a 45%,#f2a005 85%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 0 #3a1d05)}
.end .doors{text-align:left;max-width:980px;margin:0 auto}
.foot{border-top:1px solid #ffffff14;padding:26px 0 34px;color:var(--muted);font-size:14.500px}
.foot .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot .brand{font-size:22px}.foot .brand svg{width:22px;height:26px}
.foot p{flex:1;min-width:240px}
.foot a{font-weight:700}

/* trailer and picture window */
.cine{width:min(1100px,94vw);max-height:94vh;padding:0;border:2px solid var(--edge);border-radius:18px;background:#050912;color:var(--ink);overflow:hidden}
.cine.tall{width:min(440px,94vw)}
.cine::backdrop{background:#03060ee6;backdrop-filter:blur(6px)}
.cine[open]{animation:cin .6s var(--ease)}
@keyframes cin{from{opacity:0;transform:translateY(18px) scale(.98)}}
.cine-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 18px}
.cine-bar h2{font-family:var(--display);font-weight:400;font-size:22px;color:var(--goldtxt)}
.x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ffffff1c;transition:background .3s}
.x:hover{background:#ffffff33}.x svg{width:22px;height:22px}
.cine video,.cine>img{width:100%;max-height:calc(94vh - 64px);background:#000;object-fit:contain}
.cine-none{padding:60px 20px;text-align:center;color:var(--muted)}

/* later adjustments */
.veil{background:
  radial-gradient(120% 90% at 78% 40%,#070d1a00 34%,#070d1a80 100%),
  linear-gradient(90deg,#070d1ae6 0,#070d1aa6 30%,#070d1a26 58%,#070d1a00 78%),
  linear-gradient(0deg,var(--bg) 0,#070d1acc 18%,#070d1a00 48%)}
.js .b-stage{width:min(100%,calc(74vh*16/9));margin-inline:auto}
@media (max-width:760px){
  .veil{background:linear-gradient(0deg,var(--bg) 0,#070d1aeb 34%,#070d1a8c 62%,#070d1a40 100%)}
  .js .b-stage{width:100%}
  .cards .world .shot,.reel:not(.pinned) .world .shot{aspect-ratio:4/3}
}
@media (max-width:560px){
  .tiles li{display:grid;grid-template-columns:40px 1fr;column-gap:14px;padding:16px}
  .tiles svg{grid-row:1/3;margin:2px 0 0}
  .tiles span{grid-column:2}
}

/* motion off: everything shows, nothing moves */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .embers{display:none}
  .mq-track{flex-wrap:wrap;width:auto;justify-content:center;gap:10px 30px;padding:0 var(--pad)}
  .mq-track span:nth-child(n+15){display:none}
  .marquee{transform:none}
}