@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap');

:root{--bg:#07070a;--fg:#f7f3ed;--muted:#aaa6a0;--accent:#a88bff;--accent2:#ff6da8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"DM Sans",sans-serif;overflow-x:hidden}
::selection{background:var(--accent);color:#000}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.hero{min-height:100svh;position:relative;display:grid;place-items:center;padding:28px;overflow:hidden}
.noise{position:absolute;inset:0;opacity:.06;pointer-events:none;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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;animation:drift 8s ease-in-out infinite alternate}
.orb-a{width:45vw;height:45vw;background:var(--accent);top:-20%;left:-10%}
.orb-b{width:38vw;height:38vw;background:var(--accent2);right:-12%;bottom:-15%;animation-delay:-3s}
@keyframes drift{to{transform:translate(8vw,8vh) scale(1.2)}}
.intro{font-family:"Space Grotesk",sans-serif;font-size:clamp(2rem,7vw,6rem);font-weight:700;text-align:center;max-width:1100px;letter-spacing:-.05em;z-index:2;transition:.55s opacity,.55s transform}
.intro.out{opacity:0;transform:translateY(-15px)}
.reveal{opacity:0;transform:scale(.96);position:absolute;text-align:center;z-index:3;transition:1s opacity,.9s transform}
.reveal.show{opacity:1;transform:scale(1)}
.eyebrow{font-size:.72rem;letter-spacing:.28em;font-weight:700;color:var(--accent);text-transform:uppercase}
h1,h2{font-family:"Space Grotesk",sans-serif;letter-spacing:-.06em;margin:.1em 0}
h1{font-size:clamp(4rem,14vw,12rem);line-height:.72}
h1 span{color:transparent;-webkit-text-stroke:1px var(--fg)}
.hero-sub{letter-spacing:.16em;font-size:.8rem;margin-top:2.5rem}
.scroll-cue{display:inline-block;color:var(--fg);text-decoration:none;border-bottom:1px solid #444;padding:14px 0;margin-top:2rem;font-size:.75rem;letter-spacing:.12em}
.section{max-width:1200px;margin:auto;padding:110px 28px;position:relative}
.section-number{position:absolute;right:28px;top:90px;color:#38383e;font:700 clamp(3rem,9vw,8rem)/1 "Space Grotesk"}
h2{font-size:clamp(3rem,8vw,7rem);line-height:.92;max-width:950px}
.muted{color:var(--muted)}
.photo-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:60px}
.photo{min-height:330px;border-radius:18px;overflow:hidden;background:#111;position:relative}
.photo:nth-child(1){grid-column:span 7}.photo:nth-child(2){grid-column:span 5}.photo:nth-child(3){grid-column:3/span 8}
.photo img{width:100%;height:100%;object-fit:cover;position:absolute;transition:.5s transform}
.photo:hover img{transform:scale(1.025)}
.placeholder{height:100%;min-height:330px;display:grid;place-items:center;color:#555;font-weight:700;letter-spacing:.1em;border:1px dashed #333}
.message{min-height:85svh;display:flex;flex-direction:column;justify-content:center}
blockquote{font:500 clamp(2rem,5vw,4.7rem)/1.12 "Space Grotesk";letter-spacing:-.04em;margin:35px 0 0;max-width:1050px}
.level{text-align:center}
.level-card{margin:55px auto 0;border:1px solid #28282f;border-radius:30px;padding:55px 30px;max-width:650px;background:linear-gradient(145deg,#111116,#09090c);box-shadow:0 30px 90px #000}
.level-card span,.level-card small{display:block;letter-spacing:.25em;color:var(--muted)}
.level-card strong{display:block;font:700 clamp(8rem,25vw,15rem)/.9 "Space Grotesk";background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent}
.finale{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.finale p:not(.eyebrow):not(.tiny){font-size:1.2rem;color:var(--muted);max-width:600px}
button{margin-top:35px;padding:20px 30px;border:0;border-radius:999px;background:var(--fg);color:#09090c;font-weight:800;letter-spacing:.1em;cursor:pointer;transition:.2s transform,.2s box-shadow}
button:hover{transform:translateY(-3px);box-shadow:0 10px 50px color-mix(in srgb,var(--accent) 35%,transparent)}
button:active{transform:scale(.97)}
.tiny{font-size:.7rem!important;margin-top:14px!important}
@media(max-width:700px){.section{padding:85px 20px}.section-number{top:65px;right:20px}.photo-grid{display:block}.photo{margin:12px 0;min-height:380px}h1{line-height:.8}.hero-sub{line-height:1.8}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}