:root { color-scheme: dark; --ink:#080806; --surface:#12120f; --surface-2:#1b1a15; --text:#f7f2e8; --muted:#bbb4a6; --gold:#d6ad61; --gold-bright:#f5d58e; --line:rgba(246,221,169,.16); --max:1180px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--ink); } body { margin:0; background:radial-gradient(circle at 82% 10%, #312715 0, transparent 26rem), var(--ink); color:var(--text); font-family:Manrope, Avenir Next, Avenir, Helvetica, Arial, sans-serif; line-height:1.55; } a { color:inherit; } .skip-link { position:absolute; left:-999px; top:0; z-index:4; padding:.7rem 1rem; background:var(--gold); color:#171207; } .skip-link:focus { left:1rem; top:1rem; }
.site-header { width:min(var(--max), calc(100% - 3rem)); min-height:84px; margin:auto; display:flex; align-items:center; gap:2rem; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; letter-spacing:.17em; font-weight:700; font-size:.85rem; } .brand img { width:30px; height:30px; object-fit:cover; border-radius:8px; } nav { margin-left:auto; display:flex; gap:1.5rem; } nav a,.footer-links a { color:var(--muted); text-decoration:none; font-size:.9rem; } nav a:hover,.footer-links a:hover,.support-main a { color:var(--gold-bright); } .header-download,.play-button { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #f4d58f, #b78337); color:#140e05; font-weight:800; border-radius:999px; box-shadow:0 10px 38px rgba(217,170,84,.16); } .header-download { margin-left:auto; padding:.65rem 1rem; font-size:.8rem; } .menu-button { display:none; }
.hero { min-height:690px; width:min(var(--max), calc(100% - 3rem)); margin:auto; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:3rem; padding:5rem 0 4rem; overflow:hidden; } .eyebrow { color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; font-weight:800; } h1,h2 { margin:.25rem 0 1.25rem; font-family:Georgia, Times, serif; font-weight:400; letter-spacing:-.045em; line-height:.98; } h1 { font-size:clamp(3.6rem, 7vw, 6.7rem); } h2 { font-size:clamp(2.8rem, 5.2vw, 5rem); } .lede { max-width:33rem; color:var(--muted); font-size:1.08rem; } .play-button { gap:.65rem; width:max-content; margin-top:1.7rem; min-height:56px; padding:.56rem 1.2rem .56rem 1rem; line-height:1.05; } .play-button small { display:block; font-size:.58rem; letter-spacing:.09em; } .play-triangle { width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:16px solid #1e1407; } .availability { color:#8f897d; font-size:.75rem; margin:1rem .7rem; } .hero-art { min-height:590px; position:relative; display:grid; place-items:center; } .glow { position:absolute; border-radius:999px; filter:blur(8px); } .glow-one { width:390px; height:390px; background:radial-gradient(circle, rgba(232,184,91,.43), rgba(122,58,20,.08) 50%, transparent 71%); } .glow-two { width:510px; height:510px; border:1px solid rgba(244,213,142,.18); } .phone { position:relative; overflow:hidden; border:7px solid #2c2b26; background:#111; box-shadow:0 30px 60px rgba(0,0,0,.56), inset 0 0 0 1px #6f654e; border-radius:38px; } .phone:after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 28px rgba(0,0,0,.35); } .phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .phone-hero { width:min(310px, 72vw); aspect-ratio:9/17.3; transform:rotate(4deg); animation:float 6s ease-in-out infinite; } .phone-speaker { position:absolute; z-index:1; left:50%; top:9px; width:74px; height:17px; border-radius:99px; background:#20201c; transform:translateX(-50%); } @keyframes float { 50% { transform:translateY(-12px) rotate(2.5deg); } }
.feature { width:min(var(--max), calc(100% - 3rem)); min-height:570px; margin:auto; padding:7rem 0; display:grid; align-items:center; gap:4rem; border-top:1px solid var(--line); } .feature-copy { max-width:520px; } .feature-copy > p:not(.eyebrow) { color:var(--muted); font-size:1.05rem; } .feature-discover { grid-template-columns:1fr 1fr; } .device-pair { min-height:380px; display:flex; align-items:center; justify-content:center; gap:1.4rem; } .phone-small { width:175px; aspect-ratio:9/17.4; transform:rotate(-7deg); } .phone-offset { margin-top:5rem; transform:rotate(7deg); } .feature-brand { position:relative; overflow:hidden; grid-template-columns:1fr 1fr; background:radial-gradient(circle at 75% 52%, rgba(198,135,48,.2), transparent 29rem); } .feature-brand .feature-copy { grid-column:2; } .scent-orbit { position:absolute; left:4%; width:430px; aspect-ratio:1; border:1px solid rgba(225,185,108,.27); border-radius:50%; } .scent-orbit:before,.scent-orbit:after,.scent-orbit span { content:""; position:absolute; border-radius:50%; background:linear-gradient(145deg,#f0cd7f,#87551c); box-shadow:0 0 50px rgba(214,173,97,.32); } .scent-orbit:before { width:98px; height:98px; left:20%; top:21%; } .scent-orbit:after { width:51px; height:51px; right:15%; bottom:21%; } .scent-orbit span:nth-child(1) { width:20px; height:20px; right:28%; top:18%; } .scent-orbit span:nth-child(2) { width:14px; height:14px; left:16%; bottom:22%; } .scent-orbit span:nth-child(3) { width:7px; height:7px; right:9%; top:46%; }
.feature-collection { grid-template-columns:1fr 1fr; } .phone-collection { justify-self:center; width:220px; aspect-ratio:9/17.3; transform:rotate(-4deg); } .feature-wear { min-height:460px; width:100%; max-width:none; padding-left:max(1.5rem, calc((100% - var(--max))/2)); padding-right:max(1.5rem, calc((100% - var(--max))/2)); background:linear-gradient(105deg, rgba(85,39,30,.58), rgba(12,11,9,.95)), radial-gradient(circle at 70% 45%, rgba(239,184,111,.2), transparent 24rem); } .feature-community { justify-content:center; text-align:center; min-height:470px; } .feature-community .feature-copy { margin:auto; } .download-section { text-align:center; padding:6rem 1.5rem 7rem; background:radial-gradient(circle at 50% 25%, rgba(196,142,63,.25), transparent 28rem); border-top:1px solid var(--line); } .download-section .play-button { margin-left:auto; margin-right:auto; } .download-mark { display:block; width:54px; height:54px; object-fit:cover; border-radius:15px; margin:0 auto 1.5rem; }
.site-footer { width:min(var(--max), calc(100% - 3rem)); margin:auto; padding:3rem 0 2rem; display:grid; grid-template-columns:1fr 2fr; gap:2rem; color:var(--muted); font-size:.82rem; } .site-footer p { margin:.6rem 0; } .footer-links { display:flex; flex-wrap:wrap; align-content:start; justify-content:flex-end; gap:.65rem 1rem; } .copyright { grid-column:1/-1; padding-top:1.5rem; border-top:1px solid var(--line); }
.support-main { width:min(760px, calc(100% - 3rem)); margin:0 auto; padding:6rem 0 7rem; } .support-main h1 { font-size:clamp(3.2rem, 7vw, 5.4rem); } .support-main h2 { font-size:2rem; margin-top:3.5rem; } .support-email { display:inline-block; margin-top:1rem; font-weight:800; font-size:1.1rem; } .support-main section { padding-top:1rem; border-top:1px solid var(--line); margin-top:2rem; color:var(--muted); } .support-main strong { color:var(--text); }
@media (max-width:760px) { .site-header { width:calc(100% - 2rem); min-height:70px; gap:.7rem; } .header-download { display:none; } .menu-button { display:block; margin-left:auto; border:1px solid var(--line); background:transparent; color:var(--text); border-radius:99px; padding:.5rem .75rem; } nav { display:none; position:absolute; top:70px; left:1rem; right:1rem; z-index:2; margin:0; padding:1rem; background:#1a1915; border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.45); } nav[data-open="true"] { display:grid; gap:.7rem; } .hero { width:calc(100% - 2rem); grid-template-columns:1fr; padding-top:3.6rem; min-height:0; } .hero-art { min-height:470px; overflow:hidden; } .feature { width:calc(100% - 2rem); min-height:0; padding:4.5rem 0; grid-template-columns:1fr; } .device-pair { overflow:hidden; gap:.5rem; } .phone-small { width:42vw; } .feature-brand .feature-copy { grid-column:auto; } .scent-orbit { opacity:.45; left:28%; width:370px; } .feature-collection .phone-collection { order:-1; } .feature-wear { width:100%; padding:4.5rem 1rem; } .site-footer { width:calc(100% - 2rem); grid-template-columns:1fr; } .footer-links { justify-content:flex-start; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .phone-hero { animation:none; } }