:root {
    --ink: #f6f7fb;
    --muted: #8d93a6;
    --muted-strong: #b7bdce;
    --bg: #070911;
    --panel: rgba(19, 23, 37, .78);
    --border: rgba(255, 255, 255, .1);
    --cyan: #79e8ff;
    --lilac: #a99cff;
    --green: #82e6b4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--bg);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.android-landing {
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 70% 12%, rgba(100,90,255,.18), transparent 28rem),
                radial-gradient(circle at 8% 44%, rgba(25,189,220,.1), transparent 24rem),
                linear-gradient(145deg, #070911, #0a0e1b 50%, #080a12);
}
.android-topbar, .android-hero, .features-section, .release-section, .android-footer {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
}
.android-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.back-link, .android-footer a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted-strong);
    font-size: .86rem;
    text-decoration: none;
    transition: color 180ms ease;
}
.back-link:hover, .android-footer a:hover { color: var(--ink); }
.back-link > span:first-child { color: var(--cyan); font-size: 1.2rem; }
.topbar-label { color: #6e7488; font-size: .67rem; font-weight: 700; letter-spacing: .18em; }
.android-hero {
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr);
    align-items: center;
    gap: clamp(40px,8vw,112px);
    min-height: 690px;
    padding: 90px 0 110px;
}
.eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.4;
    text-transform: uppercase;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(130,230,180,.1), 0 0 18px rgba(130,230,180,.7); }
.hero-copy h1 { max-width: 690px; margin: 0; color: #fff; font-size: clamp(3.2rem,6.5vw,6rem); font-weight: 650; letter-spacing: -.075em; line-height: .98; }
.hero-copy h1 span { color: transparent; background: linear-gradient(105deg,var(--cyan),#b9a8ff 75%); -webkit-background-clip: text; background-clip: text; }
.hero-lead { max-width: 590px; margin: 29px 0 0; color: var(--muted); font-size: clamp(1rem,1.7vw,1.18rem); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 37px; }
.download-group { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.download-button, .outline-button { min-height: 54px; border-radius: 15px; font-size: .9rem; font-weight: 700; text-decoration: none; }
.download-button { display: inline-flex; align-items: center; gap: 12px; padding: 0 19px; color: #071019; background: linear-gradient(105deg,var(--cyan),#c4b9ff); box-shadow: 0 12px 30px rgba(121,232,255,.18); transition: transform 180ms ease, box-shadow 180ms ease; }
.download-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(121,232,255,.3); }
.download-button-disabled { color: #9ba2b5; background: rgba(134,143,169,.16); box-shadow: none; cursor: not-allowed; }
.android-glyph { display: inline-grid; width: 25px; height: 25px; place-items: center; border: 1px solid currentColor; border-radius: 8px; font-size: 1.1rem; line-height: 1; }
.button-arrow { margin-left: 5px; font-size: 1.15rem; }
.button-status { margin-left: 5px; color: #747b8e; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.download-note { margin: 0; color: #6e7589; font-size: .68rem; }
.download-note-warning { max-width: 270px; color: #a6a0c5; line-height: 1.45; }
.outline-button { display: inline-flex; align-items: center; gap: 12px; padding: 0 18px; border: 1px solid var(--border); color: var(--muted-strong); transition: border-color 180ms ease, color 180ms ease, background 180ms ease; }
.outline-button:hover { border-color: rgba(121,232,255,.5); color: #fff; background: rgba(121,232,255,.06); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.hero-tags span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #858ca0; font-size: .68rem; }
.device-stage { position: relative; display: grid; min-height: 530px; place-items: center; }
.stage-orbit { position: absolute; border: 1px solid rgba(152,146,255,.2); border-radius: 50%; transform: rotate(-22deg); }
.stage-orbit-one { width: 470px; height: 190px; }
.stage-orbit-two { width: 390px; height: 460px; border-color: rgba(121,232,255,.12); transform: rotate(24deg); }
.device-shadow { position: absolute; bottom: 40px; width: 230px; height: 76px; border-radius: 50%; background: rgba(0,0,0,.65); filter: blur(24px); }
.phone { position: relative; z-index: 2; width: 258px; height: 518px; padding: 8px; border: 1px solid rgba(255,255,255,.26); border-radius: 39px; background: linear-gradient(145deg,#30374c,#111522 45%,#252a3a); box-shadow: 16px 22px 50px rgba(0,0,0,.5), -10px -12px 40px rgba(130,126,255,.12); transform: rotate(5deg); }
.phone::after { position: absolute; top: 112px; right: -4px; width: 3px; height: 56px; border-radius: 4px; background: #5b6378; content: ""; }
.phone-speaker { position: absolute; z-index: 3; top: 17px; left: 50%; width: 67px; height: 17px; border-radius: 20px; background: #070911; transform: translateX(-50%); }
.phone-screen { position: relative; height: 100%; overflow: hidden; padding: 25px 15px 12px; border-radius: 32px; background: linear-gradient(160deg,#11172a,#0c1020 65%,#11132a); }
.screen-status, .screen-brand, .screen-bottom-nav { display: flex; align-items: center; justify-content: space-between; }
.screen-status { color: #848ca3; font-size: .52rem; }
.screen-brand { justify-content: flex-start; gap: 7px; margin-top: 23px; color: #e3e8f7; font-size: .75rem; font-weight: 700; }
.brand-mark { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; color: #08101a; background: linear-gradient(135deg,var(--cyan),var(--lilac)); font-size: .7rem; }
.screen-menu { margin-left: auto; color: #6d758c; letter-spacing: 2px; }
.screen-greeting { margin-top: 29px; color: #a7aec3; font-size: .67rem; }
.screen-greeting strong { color: #f3f5fc; font-weight: 600; }
.screen-card { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); }
.screen-card-primary { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 13px 11px; border-color: rgba(121,232,255,.24); border-radius: 15px; background: linear-gradient(110deg,rgba(121,232,255,.14),rgba(169,156,255,.07)); }
.screen-card-icon { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 11px; color: #08101a; background: var(--cyan); }
.screen-card strong, .screen-card span { display: block; }
.screen-card strong { color: #eef3ff; font-size: .64rem; }
.screen-card-primary div:nth-child(2) span, .screen-card-small > span:last-child { margin-top: 4px; color: #8790aa; font-size: .52rem; }
.recording-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #ff758b; box-shadow: 0 0 0 4px rgba(255,117,139,.12); }
.screen-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.screen-card-small { min-height: 103px; padding: 11px; border-radius: 14px; }
.small-icon { margin-bottom: 15px; color: var(--lilac); font-size: 1rem; }
.tunnel-icon, .tunnel-state { color: var(--green) !important; }
.screen-bottom-nav { position: absolute; right: 15px; bottom: 12px; left: 15px; padding: 13px 11px 7px; border-top: 1px solid rgba(255,255,255,.08); color: #586078; font-size: .9rem; }
.screen-bottom-nav .active { color: var(--cyan); }
.floating-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; color: #b8bed0; background: rgba(16,20,34,.86); box-shadow: 0 10px 25px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .63rem; white-space: nowrap; }
.floating-chip span { color: var(--cyan); }
.chip-voice { top: 112px; left: -10px; }
.chip-tunnel { right: -4px; bottom: 105px; }
.chip-tunnel span { color: var(--green); }
.features-section { padding: 38px 0 110px; }
.section-heading { margin-bottom: 32px; }
.section-heading .eyebrow { margin-bottom: 17px; }
.section-heading h2, .release-copy h2 { max-width: 560px; margin: 0; color: #f7f8fc; font-size: clamp(1.7rem,3.2vw,2.7rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.06; }
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.feature-card { position: relative; min-height: 255px; padding: 23px 21px; overflow: hidden; border: 1px solid var(--border); border-radius: 21px; background: var(--panel); }
.feature-card::before { position: absolute; top: -40px; right: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(169,156,255,.08); content: ""; filter: blur(8px); }
.feature-card-accent { border-color: rgba(121,232,255,.28); background: linear-gradient(160deg,rgba(24,55,70,.68),var(--panel)); }
.feature-number { color: #5f667b; font-size: .65rem; font-weight: 700; letter-spacing: .12em; }
.feature-icon { display: grid; width: 42px; height: 42px; margin-top: 32px; place-items: center; border: 1px solid rgba(121,232,255,.22); border-radius: 13px; color: var(--cyan); background: rgba(121,232,255,.09); font-size: 1.12rem; }
.feature-card h3 { margin: 19px 0 9px; color: #f0f2fa; font-size: 1rem; font-weight: 650; }
.feature-card p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.65; }
.release-section { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 65px; padding: 49px; border: 1px solid rgba(169,156,255,.2); border-radius: 28px; background: linear-gradient(112deg,rgba(44,39,86,.48),rgba(19,25,41,.78)); }
.release-copy .eyebrow { color: var(--lilac); }
.release-copy > p:last-child { max-width: 490px; margin: 20px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.release-checklist { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.check-row { display: flex; align-items: center; gap: 15px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #a7aec1; font-size: .78rem; line-height: 1.4; }
.check-row:last-child { border-bottom: 0; }
.check-row > span:first-child { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #777f95; font-size: .62rem; font-weight: 700; }
.check-row-done { color: #d2f8e4; }
.check-row-done > span:first-child { border-color: rgba(130,230,180,.5); color: var(--green); background: rgba(130,230,180,.1); }
.android-footer { display: flex; align-items: center; justify-content: space-between; padding: 36px 0 42px; color: #676e81; font-size: .72rem; }

@media (max-width: 930px) {
    .android-hero { grid-template-columns: 1fr; padding-top: 72px; }
    .hero-copy { max-width: 720px; }
    .device-stage { min-height: 570px; }
    .feature-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
    .android-topbar, .android-hero, .features-section, .release-section, .android-footer { width: min(100% - 32px,560px); }
    .android-topbar { padding: 22px 0; }
    .topbar-label { font-size: .58rem; }
    .android-hero { min-height: auto; padding: 66px 0 70px; }
    .hero-copy h1 { font-size: clamp(3rem,14vw,4.3rem); }
    .hero-actions { align-items: stretch; flex-direction: column; }
    .download-group, .download-button, .outline-button { width: 100%; }
    .download-button, .outline-button { justify-content: center; }
    .download-note { align-self: center; text-align: center; }
    .device-stage { min-height: 500px; transform: scale(.88); }
    .chip-voice { left: -24px; }
    .chip-tunnel { right: -22px; }
    .section-heading .eyebrow { margin-bottom: 17px; }
    .feature-grid, .release-section { grid-template-columns: 1fr; }
    .feature-card { min-height: auto; }
    .release-section { gap: 28px; padding: 27px 22px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .download-button, .back-link, .android-footer a, .outline-button { transition: none; }
}
