:root {
    --bg: #050507;
    --surface: #0d0d11;
    --surface-2: #121218;
    --line: rgba(255,255,255,.10);
    --text: #f5f5f7;
    --muted: #9c9ca7;
    --muted-2: #686873;
    --accent: #e50914;
    --accent-2: #ff3340;
    --max: 1180px;
    --radius: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }

.site-glow { position: fixed; width: 560px; height: 560px; border-radius: 50%; filter: blur(100px); pointer-events: none; opacity: .12; z-index: -2; }
.site-glow-a { background: var(--accent); top: -280px; left: -240px; }
.site-glow-b { background: #7b0cff; right: -300px; top: 900px; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(5,5,7,.78); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.07); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 900; letter-spacing: .14em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); font-size: 14px; letter-spacing: 0; box-shadow: 0 7px 28px rgba(229,9,20,.28); }
.desktop-nav { display: flex; gap: 30px; margin-left: auto; }
.desktop-nav a { color: #a7a7b0; font-size: 13px; font-weight: 600; transition: color .2s ease; }
.desktop-nav a:hover { color: #fff; }
.nav-cta { border: 1px solid var(--line); border-radius: 999px; padding: 10px 15px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.035); }
.nav-cta span { color: var(--accent-2); margin-left: 5px; }

.hero { min-height: 780px; display: flex; align-items: center; padding: 82px 0 92px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr .88fr; align-items: center; gap: 70px; }
.eyebrow { color: #8f8f99; font-size: 10px; font-weight: 900; letter-spacing: .22em; display: flex; align-items: center; gap: 9px; }
.pulse-dot, .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(229,9,20,.8); }
.hero h1 { font-size: clamp(62px, 8vw, 112px); line-height: .88; letter-spacing: -.065em; margin: 26px 0 30px; font-weight: 900; }
h1 span, h2 span { color: var(--accent-2); }
.hero-text { max-width: 540px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 0 20px; border-radius: 13px; font-size: 12px; font-weight: 900; letter-spacing: .01em; transition: transform .2s ease, background .2s ease, opacity .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: #fff; box-shadow: 0 16px 40px rgba(229,9,20,.23); }
.button-primary:hover { background: var(--accent-2); }
.button-ghost { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #e9e9ed; }
.hero-meta { display: flex; gap: 30px; margin-top: 54px; }
.hero-meta div { display: grid; gap: 4px; }
.hero-meta strong { font-size: 9px; letter-spacing: .16em; }
.hero-meta span { font-size: 10px; color: var(--muted-2); }

.hero-visual { min-height: 590px; position: relative; display: grid; place-items: center; }
.visual-backdrop { position: absolute; width: 430px; height: 500px; background: radial-gradient(circle, rgba(229,9,20,.18), transparent 68%); filter: blur(4px); }
.phone-frame { width: 290px; height: 570px; border: 7px solid #202026; border-radius: 42px; background: #020203; padding: 8px; position: relative; z-index: 3; box-shadow: 0 40px 100px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.07); transform: rotate(4deg); }
.phone-notch { position: absolute; width: 90px; height: 22px; border-radius: 0 0 16px 16px; background: #020203; top: -1px; left: 50%; transform: translateX(-50%); z-index: 4; }
.phone-screen { height: 100%; border-radius: 33px; overflow: hidden; padding: 28px 17px 15px; background: linear-gradient(160deg,#17171d 0%,#0b0b0e 58%,#16090b 100%); display: flex; flex-direction: column; }
.screen-top { display: flex; justify-content: space-between; font-size: 8px; font-weight: 900; letter-spacing: .13em; color: #ddd; }
.screen-title { margin-top: 70px; font-size: 25px; line-height: 1.05; letter-spacing: -.04em; }
.screen-title b { color: #fff; }
.screen-card { margin-top: 25px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.05); display: flex; gap: 10px; }
.screen-thumb { width: 60px; height: 76px; border-radius: 9px; background: linear-gradient(145deg,#5a0b10,#16161c); display: grid; place-items: center; font-size: 12px; }
.screen-card div:last-child { display: grid; align-content: center; gap: 2px; }
.screen-card small { font-size: 6px; color: #ff5660; font-weight: 900; letter-spacing: .14em; }
.screen-card strong { font-size: 12px; }
.screen-card span { font-size: 8px; color: #85858f; }
.screen-row { display: flex; gap: 7px; margin-top: 30px; }
.screen-row i { display: block; width: 52px; height: 72px; border-radius: 8px; background: linear-gradient(145deg,#24242a,#101014); border: 1px solid rgba(255,255,255,.05); }
.screen-nav { margin-top: auto; display: flex; justify-content: space-around; color: #777781; font-size: 13px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.screen-nav span:first-child { color: #fff; }
.poster { position: absolute; width: 155px; height: 230px; border-radius: 17px; display: flex; align-items: end; padding: 17px; font-weight: 900; font-size: 11px; letter-spacing: .15em; overflow: hidden; }
.poster::after { content:""; position:absolute; inset:0; background: linear-gradient(transparent 35%,rgba(0,0,0,.8)); }
.poster span { position:relative; z-index:1; }
.poster-one { right: 5px; top: 72px; transform: rotate(15deg); background: linear-gradient(140deg,#26070a,#a41520 55%,#0b0b0e); }
.poster-two { left: 12px; bottom: 70px; transform: rotate(-14deg); background: linear-gradient(140deg,#111,#563a10 55%,#0b0b0e); }
.floating-card { position: absolute; z-index: 5; display:flex; align-items:center; gap:10px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(16,16,20,.88); backdrop-filter: blur(15px); box-shadow: 0 15px 40px rgba(0,0,0,.35); }
.floating-card b, .floating-card small { display:block; }
.floating-card b { font-size: 10px; }
.floating-card small { font-size: 8px; color:#777781; margin-top:2px; }
.mini-icon { width: 23px; height:23px; display:grid; place-items:center; border-radius:8px; background:rgba(229,9,20,.16); color:#ff4a54; font-size:8px; }
.floating-card-top { right: -20px; top: 145px; }
.floating-card-bottom { left: -15px; bottom: 125px; }

.trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 19px 0; background:rgba(255,255,255,.018); }
.trust-inner { display:flex; justify-content:space-between; align-items:center; gap:15px; color:#6f6f79; font-size:8px; font-weight:900; letter-spacing:.18em; }
.trust-inner i { width:4px; height:4px; border-radius:50%; background:#36363d; }

.section { padding: 140px 0; }
.section-heading { max-width: 750px; }
.section-heading h2, .social-section h2, .big-screen h2, .download-card h2, .final-cta h2 { font-size: clamp(44px, 6vw, 72px); line-height: .96; letter-spacing:-.055em; margin: 18px 0 25px; font-weight:900; }
.section-heading p { color:var(--muted); max-width:630px; font-size:15px; line-height:1.8; }
.feature-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; margin-top:55px; }
.feature-card { min-height:350px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); position:relative; overflow:hidden; }
.feature-card::before { content:""; position:absolute; width:180px;height:180px;border-radius:50%;background:rgba(229,9,20,.08);filter:blur(50px);right:-80px;bottom:-80px; }
.feature-number { color:#5f5f68; font-size:10px; font-weight:900; }
.feature-icon { width:46px;height:46px;border:1px solid var(--line);border-radius:13px;display:grid;place-items:center;margin:65px 0 22px;color:#ff4650;background:rgba(229,9,20,.07); }
.feature-card h3 { font-size:22px; letter-spacing:-.03em; }
.feature-card p { color:#85858e; font-size:13px; line-height:1.7; margin-top:10px; max-width:350px; }
.feature-label { position:absolute; left:28px; bottom:25px; color:#575761; font-size:8px; letter-spacing:.16em; font-weight:900; }
.feature-line { position:absolute; left:28px; bottom:52px; width:calc(100% - 56px); height:1px; background:var(--line); }
.feature-card-large { min-height:390px; }

.social-section { padding: 110px 0 150px; background: linear-gradient(180deg,transparent,rgba(255,255,255,.018),transparent); }
.social-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:100px; }
.social-art { min-height:500px; position:relative; display:grid;place-items:center; }
.orbit { position:absolute; border:1px solid rgba(255,255,255,.08); border-radius:50%; transform:rotate(-18deg); }
.orbit-one { width:430px;height:220px; }
.orbit-two { width:330px;height:170px; transform:rotate(25deg); }
.social-panel { position:relative; z-index:2; border:1px solid var(--line); background:rgba(14,14,18,.9); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.panel-main { width:310px; min-height:330px; border-radius:28px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(-4deg); }
.panel-main small { color:#686873;font-size:8px;letter-spacing:.18em;font-weight:900; }
.panel-main strong { font-size:36px; line-height:1;letter-spacing:-.05em; }
.panel-main strong span { color:#ff3340; }
.avatar-row { display:flex; }
.avatar-row b { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px solid #101014;margin-left:-6px;background:#25252b;font-size:11px; }
.avatar-row b:first-child { margin-left:0;background:#3b0c10; }
.panel-mini { position:absolute; right:10px; bottom:70px; border-radius:14px;padding:13px 16px;font-size:9px;font-weight:800; }
.panel-mini span { color:#5cff8a; margin-right:5px; }
.check-list { list-style:none; display:grid; gap:13px; margin:28px 0; }
.check-list li { color:#b0b0b8; font-size:13px; }
.check-list span { display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:rgba(229,9,20,.12);color:#ff4a54;font-size:9px;margin-right:8px; }
.text-link { font-size:11px;font-weight:900;letter-spacing:.04em; }
.text-link span { color:#ff3d47;margin-left:8px; }

.big-screen { padding: 130px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.big-screen-inner { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:70px; }
.big-screen-copy p { color:var(--muted); max-width:530px;font-size:15px;line-height:1.8; }
.device-tags { display:flex;flex-wrap:wrap;gap:8px;margin-top:30px; }
.device-tags span { border:1px solid var(--line);padding:8px 11px;border-radius:999px;color:#777781;font-size:8px;font-weight:900;letter-spacing:.14em; }
.tv-visual { min-height:390px;display:grid;place-items:center;position:relative; }
.tv-screen { width:min(100%,580px);aspect-ratio:16/9;border:8px solid #1d1d23;border-radius:18px;background:radial-gradient(circle at 50% 40%,rgba(229,9,20,.18),transparent 40%),linear-gradient(145deg,#101014,#050507);box-shadow:0 35px 100px rgba(0,0,0,.6);display:grid;place-items:center;position:relative;overflow:hidden; }
.tv-logo { font-size:34px;font-weight:900;letter-spacing:.14em;color:#fff; }
.tv-play { position:absolute;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--accent);box-shadow:0 0 40px rgba(229,9,20,.35);font-size:13px; }
.tv-caption { position:absolute;bottom:22px;left:25px;font-size:8px;letter-spacing:.2em;font-weight:900;color:#777781; }
.tv-stand { position:absolute;bottom:3px;width:150px;height:18px;background:#19191f;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%); }

.download-section { padding:140px 0; }
.download-card { min-height:510px; border:1px solid var(--line); border-radius:32px; background:linear-gradient(125deg,#121217,#0b0b0e 65%,#16080a); display:grid;grid-template-columns:1.2fr .8fr;overflow:hidden;position:relative; }
.download-card::after { content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(229,9,20,.13);filter:blur(80px);right:-220px;bottom:-260px; }
.download-copy { padding:65px;position:relative;z-index:1; }
.download-copy h2 { margin-bottom:20px; }
.download-copy p { color:var(--muted);max-width:570px;font-size:14px;line-height:1.8; }
.download-status-box { display:flex;align-items:center;gap:12px;margin-top:30px;border:1px solid var(--line);border-radius:15px;padding:14px 16px;width:fit-content;background:rgba(0,0,0,.15); }
.download-status-box strong,.download-status-box span { display:block; }
.download-status-box strong { font-size:10px; }
.download-status-box div span { color:#6f6f79;font-size:9px;margin-top:2px; }
.version-info { margin-top:24px;display:flex;gap:12px;align-items:center; }
.version-info span { font-size:8px;letter-spacing:.17em;color:#5e5e67;font-weight:900; }
.version-info strong { font-size:11px; }
.download-action { position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px; }
.download-orb { width:130px;height:130px;border-radius:40px;background:linear-gradient(145deg,#ee1b26,#9e050c);display:grid;place-items:center;font-size:58px;font-weight:900;letter-spacing:-.08em;box-shadow:0 30px 70px rgba(229,9,20,.25);margin-bottom:30px;transform:rotate(-7deg); }
.download-button { min-width:260px; }
.download-button.disabled { opacity:.45;pointer-events:none; }
.download-action small { margin-top:12px;color:#65656e;font-size:9px;letter-spacing:.12em; }
.release-notes { color:#777781;text-align:center;font-size:9px;max-width:260px;margin-top:18px; }

.faq-section { padding:90px 0 140px; }
.faq-grid { display:grid;grid-template-columns:.7fr 1.3fr;gap:100px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line);padding:21px 0; }
summary { cursor:pointer;list-style:none;font-size:14px;font-weight:800;display:flex;justify-content:space-between;gap:20px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+";color:#686873;font-weight:400; }
details[open] summary::after { content:"−";color:#ff3d47; }
details p { color:#777781;font-size:12px;line-height:1.8;max-width:680px;padding-top:13px; }

.final-cta { padding:110px 0;border-top:1px solid var(--line); }
.final-cta-inner { display:flex;align-items:center;justify-content:space-between;gap:30px; }
.final-cta h2 { margin-bottom:0; }

.site-footer { border-top:1px solid var(--line);background:#030304; }
.footer-top { padding:60px 0;display:flex;justify-content:space-between;gap:60px; }
.footer-brand p { color:#55555e;font-size:11px;margin-top:15px; }
.footer-links { display:flex;gap:80px; }
.footer-links div { display:grid;align-content:start;gap:9px;min-width:100px; }
.footer-links span { color:#55555e;font-size:8px;font-weight:900;letter-spacing:.17em;margin-bottom:5px; }
.footer-links a { color:#898991;font-size:10px; }
.footer-links a:hover { color:#fff; }
.footer-bottom { padding:18px 0;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;color:#494950;font-size:9px; }

@media (max-width: 950px) {
    .desktop-nav { display:none; }
    .hero-grid,.big-screen-inner { grid-template-columns:1fr; }
    .hero { padding-top:60px; }
    .hero-visual { margin-top:15px; }
    .feature-grid { grid-template-columns:1fr 1fr; }
    .feature-card-large { grid-column:1/-1; }
    .social-grid,.faq-grid { grid-template-columns:1fr;gap:60px; }
    .social-art { order:2; }
    .download-card { grid-template-columns:1fr; }
    .download-action { padding-top:0; }
    .footer-top { flex-direction:column; }
}

@media (max-width: 620px) {
    .container { width:min(calc(100% - 30px),var(--max)); }
    .nav-wrap { min-height:65px; }
    .nav-cta { display:none; }
    .hero { min-height:auto;padding:65px 0 75px; }
    .hero h1 { font-size:64px; }
    .hero-text { font-size:14px; }
    .hero-actions { flex-direction:column;align-items:stretch; }
    .button { width:100%; }
    .hero-meta { gap:14px;flex-wrap:wrap;margin-top:35px; }
    .hero-visual { min-height:500px;transform:scale(.9);margin-left:-20px;margin-right:-20px; }
    .phone-frame { width:250px;height:490px; }
    .floating-card-top { right:0;top:95px; }
    .floating-card-bottom { left:0;bottom:80px; }
    .poster { width:125px;height:190px; }
    .trust-inner { overflow:hidden;white-space:nowrap;justify-content:flex-start; }
    .trust-inner span:nth-of-type(3),.trust-inner span:nth-of-type(4),.trust-inner i:nth-of-type(3) { display:none; }
    .section,.social-section,.big-screen,.download-section { padding:85px 0; }
    .section-heading h2,.social-section h2,.big-screen h2,.download-card h2,.final-cta h2 { font-size:43px; }
    .feature-grid { grid-template-columns:1fr; }
    .feature-card-large { grid-column:auto; }
    .feature-card,.feature-card-large { min-height:320px; }
    .social-art { min-height:400px;transform:scale(.8);margin:-45px -70px; }
    .big-screen-inner { gap:35px; }
    .tv-visual { min-height:250px; }
    .download-copy { padding:35px 25px; }
    .download-action { padding:10px 25px 45px; }
    .download-orb { width:105px;height:105px;font-size:46px; }
    .download-button { min-width:0; }
    .final-cta-inner { flex-direction:column;align-items:flex-start; }
    .footer-links { gap:30px;flex-wrap:wrap; }
    .footer-bottom { flex-direction:column;gap:7px; }
}
