:root { --page-background:#1b0935; --page-background-deep:#0b0619; --card-background:rgba(34,17,64,.72); --primary:#ffc83d; --text:#fffdf9; --muted-text:#c4b8d5; --quiet-text:#8d81a6; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; overflow-x:hidden; color:var(--text); font-family:"DM Sans",system-ui,sans-serif; background:radial-gradient(circle at 50% 22%,rgba(126,66,217,.22),transparent 26rem),radial-gradient(circle at 12% 93%,rgba(237,121,37,.12),transparent 26rem),linear-gradient(145deg,var(--page-background) 0%,var(--page-background-deep) 82%); }
body::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.32; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.ambient { position:fixed; z-index:-1; border-radius:50%; filter:blur(10px); pointer-events:none; }.ambient-one { width:17rem; height:17rem; top:-9rem; right:-8rem; background:rgba(127,58,216,.23); }.ambient-two { width:13rem; height:13rem; bottom:-5rem; left:-5rem; background:rgba(255,180,40,.11); }
.page-shell { min-height:100vh; display:grid; place-items:center; padding:36px 20px; }
.download-card { position:relative; width:min(100%,456px); padding:23px 28px 27px; overflow:hidden; text-align:center; border:1px solid rgba(255,255,255,.11); border-radius:30px; background:linear-gradient(145deg,rgba(62,38,99,.74),var(--card-background)); box-shadow:0 28px 75px rgba(2,0,12,.5),inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter:blur(18px); }
.download-card::before { content:""; position:absolute; width:260px; height:260px; top:-180px; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(255,211,72,.16),transparent 66%); pointer-events:none; }
.card-topline { display:flex; align-items:center; justify-content:space-between; color:#cfc5dd; font-size:.63rem; font-weight:700; letter-spacing:.11em; }.brand-mark { display:inline-flex; align-items:center; gap:7px; }.brand-mark span { width:8px; height:8px; border:2px solid var(--primary); border-radius:50%; box-shadow:0 0 12px var(--primary); }.live-status { display:inline-flex; align-items:center; gap:5px; color:#a9ffbf; font-size:.57rem; letter-spacing:.075em; }.live-status i { width:5px; height:5px; border-radius:50%; background:#70f691; box-shadow:0 0 8px #70f691; }
.hero-content { position:relative; }.logo-stage { position:relative; width:142px; height:142px; display:grid; place-items:center; margin:12px auto 13px; }.logo-glow { position:absolute; inset:20px; border-radius:50%; background:var(--primary); opacity:.3; filter:blur(22px); }.logo-wrap { position:relative; z-index:1; width:104px; height:104px; overflow:hidden; border:4px solid rgba(255,255,255,.9); border-radius:32px; background:#160c2b; box-shadow:0 13px 28px rgba(0,0,0,.34),0 0 0 5px rgba(255,197,56,.12); transform:rotate(-5deg); }.logo-wrap img { width:100%; height:100%; display:block; object-fit:cover; }.logo-orbit { position:absolute; border-radius:50%; border:1px solid rgba(255,207,89,.46); }.orbit-one { width:132px; height:132px; border-right-color:transparent; transform:rotate(22deg); }.orbit-two { width:143px; height:143px; border-left-color:transparent; border-bottom-color:rgba(255,255,255,.14); transform:rotate(-32deg); }
.eyebrow { margin:0 0 7px; color:var(--primary); font-size:.61rem; font-weight:700; letter-spacing:.16em; } h1 { margin:0; font-family:Outfit,sans-serif; font-size:clamp(2rem,7.5vw,2.65rem); font-weight:800; line-height:1; letter-spacing:-.055em; }.app-name-accent { color:var(--primary); }.tagline { min-height:43px; margin:11px auto 19px; color:var(--muted-text); font-size:.86rem; font-weight:500; line-height:1.56; }
.download-button { display:flex; align-items:center; gap:11px; width:100%; min-height:75px; padding:11px 15px 11px 12px; border:1px solid rgba(255,255,255,.28); border-radius:18px; color:#261106; text-align:left; text-decoration:none; background:linear-gradient(115deg,#ffe273,#ffbc25 68%,#f2a619); box-shadow:0 13px 25px rgba(238,161,20,.22),inset 0 1px 0 rgba(255,255,255,.62); transition:transform 180ms ease,box-shadow 180ms ease; }.download-button:hover { transform:translateY(-3px); box-shadow:0 18px 32px rgba(238,161,20,.3),inset 0 1px 0 rgba(255,255,255,.62); }.download-button:focus-visible { outline:3px solid #fff; outline-offset:4px; }.button-icon { width:49px; height:49px; display:grid; flex:0 0 auto; place-items:center; border-radius:14px; color:#fff7df; background:#371a10; box-shadow:inset 0 1px rgba(255,255,255,.14); }.button-icon svg { width:22px; height:22px; }.button-copy { display:grid; gap:2px; min-width:0; }.button-copy strong { font-size:.95rem; font-weight:800; letter-spacing:-.02em; }.button-copy small { color:rgba(51,22,6,.7); font-size:.64rem; font-weight:600; }.arrow-icon { width:19px; height:19px; margin-left:auto; flex:0 0 auto; }
.app-meta { display:grid; grid-template-columns:repeat(3,1fr); margin:24px 0 0; padding:16px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }.meta-item { padding:0 8px; border-left:1px solid rgba(255,255,255,.1); }.meta-item:first-child { border-left:0; }.meta-value { color:#fff; font-size:.87rem; font-weight:700; }.meta-label { margin-top:2px; color:var(--quiet-text); font-size:.62rem; font-weight:600; letter-spacing:.02em; }.app-note { margin:17px 0 0; color:var(--quiet-text); font-size:.67rem; font-weight:600; }
@media (max-width:430px) { .page-shell { padding:16px 12px; }.download-card { padding:20px 20px 23px; border-radius:25px; }.logo-stage { width:132px; height:132px; margin-top:8px; }.logo-wrap { width:96px; height:96px; }.orbit-one { width:122px; height:122px; }.orbit-two { width:132px; height:132px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }