:root { --ink:#05070D; --cream:#F2F5FA; --lime:#2BF0C6; --orange:#57C7FF; --deep:#0E1420; --gold:#C9A24B; --mountain:#9AA3B2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--cream); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.nav { height:82px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff26; position:absolute; inset:0 0 auto; z-index:10; }
.logo { display:flex; align-items:center; width:230px; }
.logo img { display:block; width:100%; height:auto; }
.navLinks { display:flex; gap:36px; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:1.5px; }
.navLinks a:hover { color:var(--lime); }
.button { background:var(--lime); color:#050505; display:inline-flex; align-items:center; justify-content:space-between; gap:40px; padding:19px 22px; min-width:260px; font-size:12px; font-weight:1000; letter-spacing:1px; transition:.2s; }
.button:hover { background:white; transform:translateY(-2px); }
.button span { font-size:20px; }
.buttonSmall { min-width:170px; padding:12px 16px; gap:18px; }
.hero { min-height:760px; height:100vh; position:relative; overflow:hidden; display:grid; grid-template-columns:55% 45%; align-items:center; padding:100px 5vw 60px; background:radial-gradient(circle at 82% 45%,#103944 0,transparent 34%),linear-gradient(135deg,#05070D,#0E1420); }
.heroGrid { position:absolute; inset:0; opacity:.08; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(to right,black,transparent 85%); }
.heroCopy { position:relative; z-index:2; max-width:760px; }
.eyebrow,.kicker { font-size:11px; font-weight:900; letter-spacing:2px; }
.eyebrow { color:#ccc; margin-bottom:25px; }.eyebrow i { width:8px; height:8px; background:var(--lime); border-radius:50%; display:inline-block; margin-right:9px; box-shadow:0 0 15px var(--lime); }
h1,h2 { margin:0; font-weight:1000; letter-spacing:-.065em; line-height:.84; text-transform:uppercase; }
h1 { font-size:clamp(72px,9.3vw,150px); }
h1 em,h2 em { color:var(--lime); font-style:normal; }
.heroCopy > p { color:#bcbcbc; max-width:520px; font-size:18px; line-height:1.55; margin:30px 0; }
.heroActions { display:flex; align-items:center; gap:32px; }.textLink { font-size:11px; font-weight:900; letter-spacing:1.5px; border-bottom:1px solid #777; padding:16px 0; }.textLink span { color:var(--lime); margin-left:20px; }
.heroArt { height:550px; position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:center; perspective:800px; }
.heroArt:before { content:""; position:absolute; width:430px; height:430px; background:var(--lime); border-radius:50%; filter:blur(100px); opacity:.14; top:40px; }
.orbit { position:absolute; border:1px solid #2BF0C655; border-radius:50%; transform:rotate(-18deg); }.orbitOne { width:510px;height:270px;top:130px; }.orbitTwo { width:400px;height:500px;top:15px; transform:rotate(38deg); }
.bottle,.cola,.ice { position:relative; box-shadow:0 35px 70px #000; }
.bottle { width:145px; height:390px; border-radius:30px 30px 18px 18px; background:linear-gradient(100deg,#151510,#454524 45%,#10100d 75%); border:2px solid #777749; transform:rotate(-7deg); z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.bottle:before { content:""; position:absolute; width:62px;height:95px;top:-80px;background:#202019;border:2px solid #777749;border-radius:8px 8px 2px 2px; }
.bottle span { border:2px solid var(--lime); color:var(--lime); padding:4px; font-weight:1000; font-size:21px; }.bottle b { font-size:58px; color:var(--lime); }.bottle small { letter-spacing:3px; }
.cola { width:120px;height:335px;margin-left:-10px;border-radius:45px 45px 20px 20px;background:linear-gradient(90deg,#180506,#4b090b,#170405);border:2px solid #8f3434;transform:rotate(9deg);z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;font-weight:1000;font-size:27px; }.cola small {font-size:11px;letter-spacing:2px;margin-top:8px;}
.ice { width:145px;height:120px;margin-left:-55px;background:#dbeceaaa;border:1px solid white;backdrop-filter:blur(4px);transform:rotate(-4deg);z-index:4;color:#111;font-size:20px;font-weight:1000;display:grid;place-items:center;clip-path:polygon(4% 14%,91% 0,100% 87%,10% 100%); }
.stamp { position:absolute; right:0; top:80px; width:115px;height:115px;border:1px solid var(--lime);border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--lime);font-size:9px;line-height:1.7;letter-spacing:1px;transform:rotate(10deg); }.stamp b{font-size:12px;}
.heroBottom { position:absolute;bottom:0;left:0;right:0;padding:20px 5vw;border-top:1px solid #ffffff26;display:flex;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:1.5px;color:#999; }.heroBottom span:first-child{color:var(--lime);}
.section { padding:110px 5vw; }.combos { background:var(--cream); color:var(--ink); }.sectionHead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:55px; }.kicker { color:#6f6f69; display:block; margin-bottom:20px; }.section h2,.ctaSection h2 { font-size:clamp(56px,7vw,110px); }.sectionHead p { font-size:14px;line-height:1.7;color:#666; }
.comboGrid { display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#c9c6be; }.comboCard { background:#e8e5dc;padding:20px 22px 25px;position:relative;overflow:hidden;min-height:480px;display:flex;flex-direction:column;transition:.25s; }.comboCard:hover{transform:translateY(-6px);z-index:2;box-shadow:0 20px 40px #0002;}.cardNumber{font-size:10px;font-weight:900;color:#888;}.glass{height:200px;width:105px;border:2px solid #aaa;border-radius:10px 10px 25px 25px;margin:20px auto 15px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#ffffff33,#fff8,#ffffff22);transform:rotate(-4deg);}.glass:before{content:"";position:absolute;inset:45% 7px 7px;background:var(--accent);border-radius:2px 2px 18px 18px;opacity:.82}.glassLabel{position:relative;z-index:2;border:2px solid #111;padding:4px;font-size:12px;font-weight:1000}.comboCard h3{font-size:19px;letter-spacing:-.5px;margin:0 0 12px}.comboCard ul{list-style:none;margin:0;padding:0;font-size:11px;line-height:1.8;color:#696963}.comboCard li:before{content:"+";font-weight:900;color:#111;margin-right:7px}.priceRow{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #c4c1ba;padding-top:16px}.priceRow strong{font-size:25px}.priceRow a{width:38px;height:38px;background:var(--accent);display:grid;place-items:center;font-size:19px}.lime{--accent:#cce900}.orange{--accent:#ff642e}.violet{--accent:#a77cff}.red{--accent:#ff3a32}
.steps { background:#111; }.steps h2 { margin-bottom:70px; }.stepGrid { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff2c; }.stepGrid>div{padding:40px 4vw 20px 0;border-right:1px solid #ffffff2c;}.stepGrid>div+div{padding-left:4vw}.stepGrid b{color:var(--lime);font-size:12px}.stepGrid h3{font-size:23px;margin:35px 0 10px}.stepGrid p{color:#888;font-size:13px}.ctaSection { background:var(--lime); color:var(--ink);padding:90px 5vw;display:flex;align-items:center;justify-content:space-between; }.kicker.dark{color:#303025}.ctaSection h2 em{color:white;-webkit-text-stroke:2px var(--ink)}.buttonDark{background:var(--ink);color:white;}.buttonDark:hover{background:white;color:var(--ink)}
footer{padding:65px 5vw 30px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start}footer p{color:#888;font-size:13px;line-height:1.7;margin:0}footer>div{display:flex;justify-content:flex-end;gap:25px;font-size:10px;text-transform:uppercase;font-weight:900;letter-spacing:1px}footer small{grid-column:1/-1;border-top:1px solid #ffffff1c;padding-top:25px;color:#666;font-size:9px;letter-spacing:1px}
@media(max-width:900px){.navLinks{display:none}.hero{height:auto;min-height:900px;grid-template-columns:1fr;padding-top:140px}.heroArt{position:absolute;opacity:.32;right:-130px;bottom:80px;transform:scale(.8)}.heroCopy>p{max-width:420px}.comboGrid{grid-template-columns:repeat(2,1fr)}.sectionHead{align-items:flex-start;gap:30px;flex-direction:column}.ctaSection{align-items:flex-start;gap:45px;flex-direction:column}}
@media(max-width:560px){.nav{height:70px}.buttonSmall{min-width:0;padding:10px 12px;font-size:9px}.hero{min-height:780px;padding-inline:22px}.heroCopy>p{font-size:15px;max-width:310px}.heroActions{align-items:flex-start;flex-direction:column;gap:10px}.heroArt{right:-190px;transform:scale(.65)}.heroBottom{display:none}.section{padding:80px 22px}.comboGrid{grid-template-columns:1fr}.comboCard{min-height:440px}.stepGrid{grid-template-columns:1fr}.stepGrid>div,.stepGrid>div+div{padding:28px 0;border-right:0;border-bottom:1px solid #ffffff2c}.ctaSection{padding:70px 22px}.ctaSection h2{font-size:52px}footer{grid-template-columns:1fr;padding:50px 22px 25px}footer>div{justify-content:flex-start}footer small{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.comboCard,.button{transition:none}}

/* Official BASE 24 brand system */
.steps{background:var(--deep)}
.comboGrid{background:#c4cad2}
.comboCard{background:#e9edf2}
.lime{--accent:#2BF0C6}.orange{--accent:#57C7FF}.violet{--accent:#31597A}.red{--accent:#C9A24B}
.ctaSection{background:#2BF0C6}
@media(max-width:560px){.logo{width:145px}footer .logo{width:230px}}

/* Real product photography */
.heroBackground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.heroShade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,7,13,.98) 0%,rgba(5,7,13,.9) 30%,rgba(5,7,13,.3) 62%,rgba(5,7,13,.05) 100%)}
.heroGrid{z-index:1;opacity:.055;mask-image:linear-gradient(to right,black,transparent 70%)}
.heroCopy,.heroArt{z-index:2}
.heroArt:before,.orbit,.bottle,.cola,.ice{display:none}
.comboProductImage{display:block;width:100%;height:220px;object-fit:contain;margin:8px auto 18px;mix-blend-mode:multiply}
@media(max-width:900px){.heroBackground{object-position:64% center}.heroShade{background:linear-gradient(90deg,rgba(5,7,13,.98),rgba(5,7,13,.78) 68%,rgba(5,7,13,.35))}.heroArt{right:12px;opacity:1}}
@media(max-width:560px){.heroBackground{object-position:69% center}.heroShade{background:linear-gradient(90deg,rgba(5,7,13,.98),rgba(5,7,13,.84) 75%,rgba(5,7,13,.4))}.comboProductImage{height:250px}}