:root { color-scheme: dark; font-family: Arial, sans-serif; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: #fff4cf; background: #061b19; }
.site-header { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; min-height: 72px; margin: auto; padding: 7px clamp(20px, 6vw, 78px); }
.brand-logo { width: min(176px, 42vw); height: auto; filter: drop-shadow(0 4px 6px #0009); }
.coming { color: #eecd58; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: minmax(290px, .88fr) minmax(430px, 1.12fr); min-height: 620px; padding: 25px clamp(20px, 7vw, 110px) 0; overflow: hidden; background: radial-gradient(circle at 73% 45%, #dfb63237, transparent 23%), linear-gradient(118deg, #071d1a 0%, #0b4538 56%, #12372f 100%); }
.hero-copy { align-self: center; max-width: 465px; padding: 0 0 64px; }
.eyebrow { margin: 0 0 13px; color: #61e5d2; font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.hero h1, .worlds h2, h3, .availability b { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; }
.hero h1 { margin: 0; color: #fff0a6; font-size: clamp(55px, 6.2vw, 83px); line-height: .79; letter-spacing: -.025em; text-shadow: 0 4px #71341c, 0 8px #2d1811, 0 12px 15px #0007; }
.hero-copy > p:not(.eyebrow) { max-width: 390px; margin: 25px 0; color: #d5e5c6; font-size: 17px; font-weight: 700; line-height: 1.45; }
.availability { display: flex; flex-wrap: wrap; gap: 9px; }
.availability div { min-width: 156px; padding: 9px 12px 8px; border-radius: 5px; background: #061614ba; box-shadow: inset 0 0 0 1px #f5d77377; }
.availability small { display: block; color: #a9cdb5; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.availability b { display: block; margin-top: 2px; color: #fff3ca; font-size: 19px; letter-spacing: .025em; }
.hero-visual { position: relative; align-self: end; height: 595px; }
.glow { position: absolute; right: 10%; bottom: 15%; width: 360px; height: 360px; border-radius: 50%; background: #ffc73521; filter: blur(24px); }
.phone { position: relative; overflow: hidden; aspect-ratio: 220 / 345; margin: 0; border: 8px solid #142c25; border-radius: 29px; background: #10251f; box-shadow: 0 18px 42px #000a, inset 0 0 0 1px #f5d77d59; }
.phone::before { position: absolute; z-index: 2; top: 7px; left: 50%; width: 34%; height: 4px; border-radius: 99px; background: #07100d; content: ""; transform: translateX(-50%); }.phone img { position: absolute; top: 0; left: 50%; width: auto; height: 139%; max-width: none; transform: translateX(-50%); }
.phone-hero { position: absolute; z-index: 2; right: 16%; bottom: 18px; width: min(298px, 52%); }.monkee { position: absolute; z-index: 1; right: -5%; bottom: 0; width: min(390px, 68%); height: auto; filter: drop-shadow(0 14px 16px #020d0aaa); }
.worlds { padding: 89px clamp(20px, 7vw, 110px) 102px; background: #f3eed8; color: #18392f; }.section-intro { max-width: 650px; margin: 0 auto 50px; text-align: center; }.section-intro .eyebrow { color: #167b70; }.worlds h2 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: .84; letter-spacing: -.02em; }.screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(19px, 4vw, 68px); max-width: 1150px; margin: auto; }.screen-grid article { display: grid; gap: 15px; align-content: start; }.screen-grid .phone { width: 100%; max-width: 260px; justify-self: center; border-color: #25493d; border-radius: 23px; box-shadow: 0 13px 24px #2244384d; }.screen-grid .phone::before { top: 5px; }.screen-grid span { color: #168a7d; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 13px; letter-spacing: .08em; }.screen-grid h3 { margin: 3px 0 0; color: #17372d; font-size: 26px; letter-spacing: .02em; }
footer { padding: 20px; color: #86a99a; background: #04120f; font-size: 12px; font-weight: 700; text-align: center; }
@media (max-width: 800px) { .site-header { min-height: 70px; padding: 7px 21px; }.hero { grid-template-columns: 1fr; min-height: 0; padding: 22px 22px 0; text-align: center; }.hero-copy { justify-self: center; padding: 0; }.hero h1 { font-size: 54px; }.hero-copy > p:not(.eyebrow) { margin: 14px auto; font-size: 15px; }.availability { justify-content: center; }.availability div { min-width: 142px; }.availability b { font-size: 17px; }.hero-visual { width: min(570px, 100%); height: 390px; justify-self: center; }.phone-hero { right: 50%; bottom: 8px; width: 220px; transform: translateX(50%); }.monkee { display: none; }.worlds { padding: 67px 22px; }.screen-grid { grid-template-columns: 1fr; max-width: 310px; }.screen-grid article { grid-template-columns: 124px 1fr; align-items: center; }.screen-grid .phone { width: 124px; }.screen-grid .phone::before { display: none; } }
@media (max-width: 430px) { .coming { font-size: 9px; }.brand-logo { width: 164px; }.hero h1 { font-size: 50px; }.hero-visual { height: 360px; }.phone-hero { width: 205px; } }