@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap');

:root {
    --bg: #0a0e1a;
    --bg-gradient-end: #1a1f36;
    --text: #f0f0f5;
    --text-muted: rgba(240, 240, 245, 0.55);
    --text-dim: rgba(240, 240, 245, 0.35);
    --accent: #e8d4a0;
    --border: rgba(255, 255, 255, 0.08);
    --font-rounded: -apple-system-rounded, ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-rounded);
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-gradient-end) 100%);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
}

/* Starfield background */
.stars,
.stars-medium,
.stars-bright {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    z-index: 0;
}

.stars {
    box-shadow:
        42px 128px rgba(255,255,255,0.5), 183px 234px rgba(255,255,255,0.6), 298px 92px rgba(255,255,255,0.4),
        411px 342px rgba(255,255,255,0.7), 528px 178px rgba(255,255,255,0.5), 649px 421px rgba(255,255,255,0.4),
        762px 74px rgba(255,255,255,0.6), 83px 498px rgba(255,255,255,0.5), 246px 612px rgba(255,255,255,0.7),
        372px 537px rgba(255,255,255,0.4), 489px 703px rgba(255,255,255,0.5), 612px 596px rgba(255,255,255,0.6),
        738px 812px rgba(255,255,255,0.4), 57px 841px rgba(255,255,255,0.7), 198px 927px rgba(255,255,255,0.5),
        334px 758px rgba(255,255,255,0.4), 451px 1023px rgba(255,255,255,0.6), 576px 968px rgba(255,255,255,0.5),
        691px 1127px rgba(255,255,255,0.4), 128px 1204px rgba(255,255,255,0.7), 273px 1092px rgba(255,255,255,0.5),
        398px 1283px rgba(255,255,255,0.6), 524px 1179px rgba(255,255,255,0.4), 648px 1347px rgba(255,255,255,0.5),
        771px 1236px rgba(255,255,255,0.7), 93px 1419px rgba(255,255,255,0.4), 219px 1502px rgba(255,255,255,0.6),
        346px 1384px rgba(255,255,255,0.5), 471px 1568px rgba(255,255,255,0.4), 598px 1456px rgba(255,255,255,0.7),
        723px 1623px rgba(255,255,255,0.5), 68px 1721px rgba(255,255,255,0.4), 211px 1812px rgba(255,255,255,0.6),
        358px 1689px rgba(255,255,255,0.5), 483px 1892px rgba(255,255,255,0.4), 612px 1756px rgba(255,255,255,0.7),
        742px 1934px rgba(255,255,255,0.5), 105px 2042px rgba(255,255,255,0.4), 259px 2127px rgba(255,255,255,0.6),
        384px 1997px rgba(255,255,255,0.5), 509px 2198px rgba(255,255,255,0.4), 635px 2076px rgba(255,255,255,0.7),
        762px 2249px rgba(255,255,255,0.5), 129px 2312px rgba(255,255,255,0.4), 275px 2398px rgba(255,255,255,0.6),
        402px 2278px rgba(255,255,255,0.5), 526px 2467px rgba(255,255,255,0.4), 651px 2342px rgba(255,255,255,0.7),
        775px 2524px rgba(255,255,255,0.5), 48px 2612px rgba(255,255,255,0.4), 192px 2698px rgba(255,255,255,0.6),
        319px 2578px rgba(255,255,255,0.5), 445px 2767px rgba(255,255,255,0.4), 572px 2642px rgba(255,255,255,0.7),
        698px 2824px rgba(255,255,255,0.5), 845px 187px rgba(255,255,255,0.5), 924px 412px rgba(255,255,255,0.4),
        1018px 298px rgba(255,255,255,0.6), 1127px 548px rgba(255,255,255,0.5), 1234px 376px rgba(255,255,255,0.4),
        1342px 624px rgba(255,255,255,0.7), 872px 789px rgba(255,255,255,0.4), 986px 912px rgba(255,255,255,0.5),
        1098px 836px rgba(255,255,255,0.6), 1217px 1024px rgba(255,255,255,0.4), 1329px 948px rgba(255,255,255,0.7),
        897px 1178px rgba(255,255,255,0.5), 1013px 1267px rgba(255,255,255,0.4), 1142px 1143px rgba(255,255,255,0.6),
        1256px 1348px rgba(255,255,255,0.5), 1378px 1234px rgba(255,255,255,0.4), 912px 1467px rgba(255,255,255,0.7),
        1042px 1549px rgba(255,255,255,0.5), 1167px 1423px rgba(255,255,255,0.4), 1289px 1612px rgba(255,255,255,0.6),
        1408px 1497px rgba(255,255,255,0.5), 934px 1748px rgba(255,255,255,0.4), 1076px 1834px rgba(255,255,255,0.7),
        1198px 1712px rgba(255,255,255,0.5), 1321px 1902px rgba(255,255,255,0.4), 1443px 1778px rgba(255,255,255,0.6),
        968px 2034px rgba(255,255,255,0.5), 1092px 2124px rgba(255,255,255,0.4), 1214px 1998px rgba(255,255,255,0.7),
        1337px 2189px rgba(255,255,255,0.5), 1458px 2067px rgba(255,255,255,0.4), 982px 2312px rgba(255,255,255,0.6),
        1104px 2398px rgba(255,255,255,0.5), 1228px 2276px rgba(255,255,255,0.4), 1351px 2467px rgba(255,255,255,0.7),
        1472px 2346px rgba(255,255,255,0.5), 998px 2589px rgba(255,255,255,0.4), 1118px 2678px rgba(255,255,255,0.6),
        1243px 2558px rgba(255,255,255,0.5), 1367px 2748px rgba(255,255,255,0.4), 1487px 2628px rgba(255,255,255,0.7);
    animation: twinkle 8s ease-in-out infinite;
}

.stars-medium {
    width: 2px;
    height: 2px;
    box-shadow:
        167px 289px rgba(255,255,255,0.7), 412px 456px rgba(255,255,255,0.8), 689px 234px rgba(255,255,255,0.6),
        234px 612px rgba(255,255,255,0.7), 523px 723px rgba(255,255,255,0.8), 789px 534px rgba(255,255,255,0.6),
        112px 891px rgba(255,255,255,0.7), 389px 978px rgba(255,255,255,0.8), 645px 1089px rgba(255,255,255,0.6),
        298px 1234px rgba(255,255,255,0.7), 567px 1345px rgba(255,255,255,0.8), 812px 1456px rgba(255,255,255,0.6),
        145px 1567px rgba(255,255,255,0.7), 423px 1678px rgba(255,255,255,0.8), 689px 1789px rgba(255,255,255,0.6),
        234px 1923px rgba(255,255,255,0.7), 523px 2034px rgba(255,255,255,0.8), 789px 2145px rgba(255,255,255,0.6),
        356px 2289px rgba(255,255,255,0.7), 612px 2398px rgba(255,255,255,0.8), 945px 378px rgba(255,255,255,0.7),
        1178px 512px rgba(255,255,255,0.8), 1389px 678px rgba(255,255,255,0.6), 1089px 823px rgba(255,255,255,0.7),
        1312px 934px rgba(255,255,255,0.8), 1467px 1078px rgba(255,255,255,0.6), 998px 1289px rgba(255,255,255,0.7),
        1234px 1412px rgba(255,255,255,0.8), 1423px 1567px rgba(255,255,255,0.6), 1089px 1745px rgba(255,255,255,0.7),
        1298px 1889px rgba(255,255,255,0.8), 1478px 2034px rgba(255,255,255,0.6), 1123px 2234px rgba(255,255,255,0.7),
        1345px 2378px rgba(255,255,255,0.8), 1489px 2534px rgba(255,255,255,0.6);
    animation: twinkle 6s ease-in-out infinite 2s;
}

.stars-bright {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    box-shadow:
        312px 378px rgba(255,255,255,0.9), 589px 612px rgba(255,255,255,0.9), 178px 834px rgba(255,255,255,0.9),
        456px 1123px rgba(255,255,255,0.9), 712px 1389px rgba(255,255,255,0.9), 234px 1645px rgba(255,255,255,0.9),
        523px 1923px rgba(255,255,255,0.9), 378px 2234px rgba(255,255,255,0.9), 1056px 512px rgba(255,255,255,0.9),
        1334px 845px rgba(255,255,255,0.9), 1189px 1234px rgba(255,255,255,0.9), 1412px 1567px rgba(255,255,255,0.9),
        1245px 1889px rgba(255,255,255,0.9), 1398px 2234px rgba(255,255,255,0.9);
    animation: twinkle 4s ease-in-out infinite 1s;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.container-narrow {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* Navigation */
nav {
    padding: 28px 0;
    position: relative;
    z-index: 2;
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--text);
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 28px;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--text);
}

/* Hero */
.hero {
    padding: 100px 0 100px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero .app-icon {
    width: 128px;
    height: 128px;
    border-radius: 28px;
    margin-bottom: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 80px rgba(232, 212, 160, 0.08);
}

.hero h1 {
    font-size: 56px;
    font-weight: 200;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.hero .tagline {
    font-size: 20px;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 48px;
}

.download-btn {
    display: inline-block;
    padding: 16px 36px;
    background: var(--text);
    color: var(--bg);
    text-decoration: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: transform 0.2s, opacity 0.2s;
}

.download-btn:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.platforms {
    margin-top: 28px;
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Features */
.features {
    padding: 80px 0;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
}

.features h2 {
    font-size: 32px;
    font-weight: 200;
    letter-spacing: 0.08em;
    text-align: center;
    margin-bottom: 64px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 48px;
}

.feature {
    text-align: center;
}

.feature .icon {
    font-size: 32px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.feature h3 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
}

.feature p {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 300;
}

/* Presets section */
.presets {
    padding: 80px 0;
    border-top: 1px solid var(--border);
    text-align: center;
    position: relative;
    z-index: 1;
}

.presets h2 {
    font-size: 32px;
    font-weight: 200;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.presets p {
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 auto 48px;
    font-weight: 300;
}

.preset-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}

.preset-card {
    padding: 28px 26px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: background 0.2s, border-color 0.2s;
}

.preset-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.preset-card h3 {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    color: var(--text);
}

.preset-card p {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
    margin: 0;
    max-width: none;
}

/* Footer */
footer {
    padding: 60px 0 40px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    position: relative;
    z-index: 1;
    font-weight: 300;
}

footer .footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
}

footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

footer a:hover {
    color: var(--text);
}

/* Content pages (privacy, support) */
.content-page {
    padding: 40px 0 80px;
}

.content-page h1 {
    font-size: 36px;
    font-weight: 200;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.content-page .updated {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 40px;
    font-weight: 300;
}

.content-page h2 {
    font-size: 20px;
    font-weight: 400;
    margin-top: 40px;
    margin-bottom: 12px;
    color: var(--text);
}

.content-page p {
    color: var(--text-muted);
    margin-bottom: 16px;
    font-weight: 300;
}

.content-page a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 212, 160, 0.3);
    transition: border-color 0.2s;
}

.content-page a:hover {
    border-bottom-color: var(--accent);
}

/* Responsive */
@media (max-width: 600px) {
    .hero {
        padding: 60px 0 60px;
    }

    .hero .app-icon {
        width: 96px;
        height: 96px;
        border-radius: 22px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero .tagline {
        font-size: 17px;
    }

    .features, .presets {
        padding: 60px 0;
    }

    nav {
        padding: 20px 0;
    }

    .nav-links {
        gap: 18px;
    }
}