:root { --ink:#f7f6f0; --night:#11110f; --muted:#a7a7a0; --orange:#fd600a; --line:rgba(247,246,240,.18); --display:'Noto Sans SC',sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--night); }
body { margin:0; color:var(--ink); background:var(--night); font-family:var(--display); overflow-x:hidden; }
button, a { font:inherit; } a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:10; top:0; left:0; right:0; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 5.5vw; border-bottom:1px solid rgba(255,255,255,.16); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:0; }.brand img { width:31px; height:31px; border-radius:8px; object-fit:cover; }
nav { display:flex; gap:34px; margin-left:95px; }nav a,.header-link { font-size:13px; color:rgba(247,246,240,.76); transition:color .25s ease; }nav a:hover,.header-link:hover { color:#fff; }.header-link { display:flex; align-items:center; gap:7px; }.header-link svg { width:15px; }
.menu-button { display:none; border:0; background:transparent; color:#fff; padding:8px; }
.hero { min-height:100svh; position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(280px, .9fr) minmax(480px, 1.1fr); align-items:center; overflow:hidden; padding:104px 5.5vw 48px; }
.hero::after { content:""; position:absolute; z-index:-2; inset:0; background:linear-gradient(104deg, #14130f 0%, #15140f 42%, #292111 100%); }.hero::before { content:""; position:absolute; z-index:-1; width:65vw; height:65vw; left:35%; top:-13%; background:radial-gradient(circle,rgba(245,152,30,.31),transparent 62%); filter:blur(25px); }
.hero-copy { max-width:560px; padding-top:20px; }.eyebrow,.section-index { font:500 11px/1.3 var(--mono); letter-spacing:1.2px; color:#d5d3ca; margin:0; }.eyebrow { display:flex; gap:9px; align-items:center; }.eyebrow span { width:20px; height:1px; display:inline-block; background:var(--orange); }
h1,h2 { margin:24px 0 0; letter-spacing:0; font-weight:800; line-height:1.08; }h1 { font-size:clamp(48px,5.2vw,82px); }h1 span,.statement h2 span { color:var(--orange); }.hero-summary { max-width:380px; margin:25px 0 0; font-size:16px; line-height:1.8; color:#c1c0b8; }.hero-actions { display:flex; align-items:center; gap:29px; margin-top:37px; }
.button { display:inline-flex; align-items:center; gap:10px; min-height:49px; padding:0 20px; font-size:14px; font-weight:700; transition:transform .25s ease, background .25s ease; }.button:hover { transform:translateY(-3px); }.button svg { width:17px; }.button-primary { background:var(--orange); color:#1b120b; }.text-action { display:inline-flex; gap:9px; align-items:center; font-size:14px; font-weight:600; }.text-action svg { width:16px; transition:transform .25s ease; }.text-action:hover svg { transform:translate(3px,3px); }
.hero-visual { height:calc(100svh - 100px); min-height:620px; position:relative; display:flex; justify-content:center; align-items:center; }.sun-disc { position:absolute; width:min(44vw,640px); aspect-ratio:1; border-radius:50%; background:#f2a81c; box-shadow:0 0 80px rgba(255,184,41,.22); }.phone { position:relative; z-index:2; width:315px; aspect-ratio: .483; transform:rotate(8deg) translateY(10px); transition:transform .6s cubic-bezier(.2,.8,.2,1); }.phone:hover { transform:rotate(3deg) translateY(-10px); }.phone-frame { position:absolute; inset:0; padding:10px; background:#090909; border:2px solid #5b5b58; border-radius:46px; box-shadow:22px 28px 55px rgba(0,0,0,.43), -6px 0 10px rgba(255,255,255,.15); }.phone-screen { position:relative; width:100%; height:100%; overflow:hidden; border-radius:37px; background:#111; }.phone-wallpaper { width:100%; height:100%; object-fit:cover; transition:opacity .35s ease, transform .7s ease; }.phone-wallpaper.changing { opacity:.45; transform:scale(1.05); }.screen-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 35%,rgba(0,0,0,.09) 60%,rgba(0,0,0,.72)); }.dynamic-island { position:absolute; width:102px; height:28px; top:16px; left:50%; transform:translateX(-50%); z-index:3; border-radius:18px; background:#020202; }.app-status,.screen-title,.screen-details,.app-tabs { position:absolute; z-index:2; left:19px; right:19px; display:flex; justify-content:space-between; align-items:center; }.app-status { top:17px; padding:0 6px; font:500 10px var(--mono); }.app-status span:last-child { display:flex; gap:4px; }.app-status svg { width:11px; }.screen-title { display:block; bottom:119px; }.screen-title p { margin:0 0 4px; color:rgba(255,255,255,.77); font-size:12px; }.screen-title strong { font-size:29px; letter-spacing:0; }.screen-details { bottom:79px; }.screen-details span { font:10px var(--mono); color:rgba(255,255,255,.8); }.screen-details button { width:31px; height:31px; border:1px solid rgba(255,255,255,.45); border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.15); }.screen-details svg { width:14px; }.app-tabs { bottom:16px; height:44px; padding:0 7px; border-radius:16px; background:rgba(21,21,21,.75); backdrop-filter:blur(8px); }.app-tabs svg { width:17px; color:rgba(255,255,255,.68); }.app-tabs svg:first-child { color:var(--orange); }
.thumbnail-stack { position:absolute; z-index:3; right:2%; bottom:10%; display:flex; flex-direction:column; gap:11px; }.wallpaper-choice { width:58px; height:76px; padding:3px; border:1px solid transparent; background:rgba(255,255,255,.08); cursor:pointer; transition:transform .25s ease, border-color .25s; }.wallpaper-choice:hover,.wallpaper-choice.active { border-color:#fff; transform:translateX(-5px); }.wallpaper-choice img { width:100%; height:100%; object-fit:cover; }.visual-label { position:absolute; z-index:3; font:500 10px/1.45 var(--mono); letter-spacing:1.1px; color:rgba(255,255,255,.65); }.label-left { left:1%; top:18%; }.label-right { right:3%; top:17%; text-align:right; }.scroll-mark { position:absolute; left:5.5vw; bottom:25px; display:flex; align-items:center; gap:12px; color:#a4a49d; font:500 10px var(--mono); letter-spacing:1.3px; }.scroll-mark span { display:block; position:relative; height:40px; width:1px; background:var(--line); overflow:hidden; }.scroll-mark span::after { content:""; position:absolute; width:1px; height:19px; background:var(--orange); animation:scroll 1.7s infinite ease-in-out; }@keyframes scroll { 0%{transform:translateY(-24px)} 100%{transform:translateY(44px)} }
.section-shell { padding-left:10vw; padding-right:10vw; }.statement { min-height:650px; display:grid; grid-template-columns:1fr 3fr; padding-top:130px; padding-bottom:115px; background:#eeece5; color:#151511; }.section-index { color:#77756e; }.statement h2,.feature-copy h2 { font-size:clamp(36px,4.3vw,65px); }.statement-foot { grid-column:2; display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-top:100px; }.statement-foot p { max-width:400px; margin:0; font-size:16px; line-height:1.9; color:#535149; }.gallery-section { padding:116px 0 155px; background:#171713; }.gallery-header { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:62px; }.gallery-header p:last-child { font-size:17px; line-height:1.8; color:#d8d6cd; margin:0; }.gallery-grid { display:grid; grid-template-columns:1.02fr .8fr 1.2fr; grid-template-rows:210px 260px; gap:14px; padding:0 5.5vw; }.gallery-item { margin:0; min-height:0; position:relative; overflow:hidden; background:#292924; }.gallery-item.tall { grid-row:span 2; }.gallery-item.wide { grid-column:span 2; }.gallery-item img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.86); transition:transform .7s ease, filter .7s ease; }.gallery-item:hover img { transform:scale(1.05); filter:saturate(1.15); }.gallery-item figcaption { position:absolute; left:17px; bottom:14px; font:11px var(--mono); letter-spacing:1px; text-shadow:0 1px 6px #000; }
.feature-band { display:grid; grid-template-columns:.95fr 1.05fr; gap:10vw; padding-top:150px; padding-bottom:145px; background:var(--night); }.feature-copy p:last-child { max-width:360px; color:var(--muted); line-height:1.85; margin:26px 0 0; font-size:15px; }.feature-list { border-top:1px solid var(--line); }.feature-list > div { min-height:103px; display:grid; grid-template-columns:48px 1fr 1.4fr 24px; align-items:center; border-bottom:1px solid var(--line); column-gap:8px; transition:padding .3s ease, background .3s ease; }.feature-list > div:hover { padding-left:12px; background:rgba(255,255,255,.03); }.feature-list span { font:11px var(--mono); color:var(--orange); }.feature-list h3 { margin:0; font-size:17px; }.feature-list p { margin:0; font-size:13px; color:var(--muted); }.feature-list svg { width:18px; color:#dddcd5; }
.download-section { min-height:640px; position:relative; display:grid; place-items:center; overflow:hidden; background:#d44e0b; }.download-backdrop { position:absolute; inset:-15%; opacity:.55; background-image:linear-gradient(rgba(39,18,7,.25),rgba(39,18,7,.25)),url('https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=1800&q=88'); background-size:cover; background-position:center; filter:blur(4px); transform:scale(1.1); }.download-content { position:relative; text-align:center; }.download-content > img { width:78px; height:78px; object-fit:cover; border-radius:20px; margin-bottom:26px; box-shadow:0 10px 28px rgba(0,0,0,.24); }.download-content .eyebrow { justify-content:center; }.download-content h2 { margin-top:18px; font-size:65px; }.download-content p { font-size:16px; margin:10px 0 28px; }.button-light { background:#fff; color:#191612; }.site-footer { min-height:120px; display:flex; align-items:center; justify-content:space-between; padding:0 5.5vw; background:#11110f; border-top:1px solid var(--line); color:#c8c7be; }.site-footer p { margin:0; font-size:12px; }.site-footer .brand { color:#fff; }
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }[data-reveal].visible { opacity:1; transform:none; }
@media (max-width: 800px) { .site-header { height:68px; padding:0 20px; }.site-header nav,.header-link { display:none; }.menu-button { display:block; }.site-header.nav-open nav { display:flex; position:absolute; top:68px; left:0; right:0; margin:0; padding:22px 20px 26px; flex-direction:column; gap:22px; background:#11110f; border-bottom:1px solid var(--line); }.hero { display:block; padding:112px 20px 30px; }.hero-copy { padding-top:0; }.hero-summary { font-size:14px; }.hero-actions { margin-top:28px; }.hero-visual { margin-top:20px; height:510px; min-height:0; }.sun-disc { width:350px; }.phone { width:237px; }.phone-frame { border-radius:36px; padding:8px; }.phone-screen { border-radius:29px; }.dynamic-island { top:13px; width:78px; height:22px; }.screen-title { bottom:94px; }.screen-title strong { font-size:22px; }.screen-details { bottom:59px; }.app-tabs { bottom:12px; height:36px; }.thumbnail-stack { right:0; bottom:6%; }.wallpaper-choice { width:45px; height:58px; }.visual-label { font-size:8px; }.label-left { left:0; top:12%; }.label-right { right:0; top:13%; }.scroll-mark { display:none; }.section-shell { padding-left:20px; padding-right:20px; }.statement { min-height:520px; display:block; padding-top:80px; padding-bottom:70px; }.statement h2 { margin-top:42px; }.statement-foot { display:block; margin-top:55px; }.statement-foot .text-action { margin-top:25px; }.gallery-section { padding:75px 0 90px; }.gallery-header { display:block; padding-bottom:35px; }.gallery-header p:last-child { margin-top:25px; font-size:14px; }.gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:195px 165px 145px; gap:8px; padding:0 20px; }.gallery-item.tall { grid-row:span 2; }.gallery-item.wide { grid-column:span 2; }.feature-band { display:block; padding-top:85px; padding-bottom:90px; }.feature-list { margin-top:50px; }.feature-list > div { min-height:82px; grid-template-columns:35px 1fr 20px; }.feature-list p { display:none; }.download-section { min-height:540px; }.download-content h2 { font-size:52px; }.site-footer { min-height:160px; padding:28px 20px; align-items:flex-start; flex-direction:column; gap:15px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }