:root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    --bg: #faf6f1;
    --card: #fff;
    --ink: #2b2622;
    --mute: #6f645c;
    --accent: #8f7668;
    --acc2: #6b5347;
    --line: #e8dfd6;
    --soft: #f1e9e0
}

@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --bg: #171412;
        --card: #211d1a;
        --ink: #f3ece5;
        --mute: #a99b91;
        --accent: #b89a89;
        --acc2: #d2b8a8;
        --line: #352e29;
        --soft: #1f1a17
    }
}

:root[data-theme="dark"] {
    --bg: #171412;
    --card: #211d1a;
    --ink: #f3ece5;
    --mute: #a99b91;
    --accent: #b89a89;
    --acc2: #d2b8a8;
    --line: #352e29;
    --soft: #1f1a17
}

html {
    scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px))
}

*,
*:before,
*:after {
    box-sizing: inherit
}

html {
    overflow-x: clip
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.6 Geist, system-ui, sans-serif;
    overflow-x: clip
}

main {
    min-height: calc(100dvh - 160px)
}

img {
    max-width: 100%;
    height: auto
}

h1,
h2,
h3 {
    font-family: Libre Bodoni, Georgia, serif;
    line-height: 1.15;
    margin: 0
}

a {
    color: inherit
}

.wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px
}

header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line)
}

header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 12px
}

.logo {
    height: 40px;
    width: auto;
    max-width: none;
    color: var(--ink);
    display: block
}

nav {
    display: flex;
    gap: 4px;
    align-items: center
}

nav a {
    padding: 8px 12px;
    border-radius: 99px;
    text-decoration: none;
    font-size: 14px;
    color: var(--mute);
    font-weight: 500
}

nav a:hover {
    color: var(--ink);
    background: var(--soft)
}

:root:not(:has(#v-about:target, #v-download:target, #v-roadmap:target, #v-privacy:target)) nav a[href="#v-home"],
:root:has(#v-about:target) nav a[href="#v-about"],
:root:has(#v-download:target) nav a[href="#v-download"],
:root:has(#v-roadmap:target) nav a[href="#v-roadmap"] {
    color: var(--ink);
    background: color-mix(in srgb, var(--c1) 14%, transparent)
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    background: var(--acc2);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    font-size: 15px
}

:root[data-theme="dark"] .btn,
:root:not([data-theme="light"]) .btn {
    color: #1a1512
}

@media (prefers-color-scheme:light) {
    :root:not([data-theme]) .btn {
        color: #fff
    }
}

.btn.ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line)
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--c2);
    color: #2b2622
}

.pill svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round
}

.hero {
    padding: 72px 20px 48px;
    text-align: center;
    background: radial-gradient(420px 260px at 12% 8%, color-mix(in srgb, var(--c2) 22%, transparent), transparent), radial-gradient(460px 300px at 88% 0%, color-mix(in srgb, var(--c1) 20%, transparent), transparent), radial-gradient(380px 260px at 60% 100%, color-mix(in srgb, var(--c4) 14%, transparent), transparent)
}

.hero h1 {
    font-size: clamp(34px, 6vw, 60px);
    margin: 20px auto 16px;
    max-width: 780px
}

.hero h1 em {
    font-style: normal;
    color: var(--c1);
    background: linear-gradient(90deg, var(--c1), var(--c4) 60%, var(--c3));
    -webkit-background-clip: text;
    background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero h1 em {
        color: transparent
    }
}

.hero p {
    max-width: 600px;
    margin: 0 auto 28px;
    color: var(--mute);
    font-size: 18px
}

.hero-visual {
    max-width: 880px;
    margin: 40px auto 0;
    width: 100%;
}

.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px
}

.cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

section {
    padding: 56px 0
}

.sub {
    color: var(--mute);
    max-width: 600px;
    margin: 10px 0 32px
}

h2 {
    font-size: clamp(26px, 4vw, 38px)
}

.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch
}

.grid.stats {
    grid-template-columns: repeat(3, 1fr)
}

@media (min-width: 720px) {
    .grid.pair {
        grid-template-columns: repeat(2, 1fr)
    }

    #about .grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.stats {
    padding: 32px 0
}

.icon {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    color: var(--ink);
    background: color-mix(in srgb, var(--k) 18%, transparent)
}

.icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    stroke-linecap: round
}

.icon.fill svg {
    fill: currentColor;
    stroke: none;
    width: 30px;
    height: 30px
}

.card {
    --k: var(--c1);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    transition: transform .2s;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-3px)
}

.card a {
    color: var(--c1);
    text-underline-offset: 3px
}

.card h3 {
    font-size: 20px;
    margin-bottom: 8px
}

.card p {
    margin: 0;
    color: var(--mute);
    font-size: 15px
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--k);
}

.band {
    background: var(--soft);
    border-block: 1px solid var(--line)
}

.stat {
    text-align: center
}

.stat b {
    display: block;
    font: 700 34px Libre Bodoni, serif;
    color: var(--accent)
}

.dl {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
}

.dl .card {
    text-align: center;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.card.price {
    text-align: center
}

.card.price h3 {
    font-size: 44px;
    color: var(--k);
    margin: 8px 0 12px
}

.card.price h3 small {
    font-size: 16px;
    color: var(--mute)
}

.closer {
    text-align: center
}

.closer .sub {
    margin-inline: auto
}

.dl .os {
    font-size: 44px
}

.dl small {
    display: block;
    color: var(--mute);
    margin: 8px 0 18px
}

.road {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr)
}

.soon {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px
}

.req {
    margin-top: 28px;
    font-size: 14px;
    color: var(--mute);
    text-align: center
}

footer {
    border-top: 1px solid var(--line);
    padding: 32px 0;
    color: var(--mute);
    font-size: 14px;
    text-align: center
}

.view {
    display: none
}

.view.on {
    display: block;
    animation: in .35s
}

@keyframes in {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1
    }
}

.prose {
    max-width: 640px;
    color: var(--mute)
}

.prose p {
    margin: 0 0 16px
}

.prose a {
    color: var(--c1);
    text-underline-offset: 3px
}

.btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: .7;
    cursor: default
}

@media(max-width:600px) {
    html {
        scroll-padding-top: calc(108px + env(safe-area-inset-top, 0px))
    }

    #v-home,
    #v-download,
    #v-roadmap,
    #v-about,
    #v-privacy,
    #features {
        scroll-margin-top: calc(108px + env(safe-area-inset-top, 0px))
    }

    header .wrap {
        height: auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 12px 8px;
        gap: 4px
    }

    nav {
        flex: 0 0 auto;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0
    }

    nav a {
        padding: 6px 10px;
        font-size: 13px
    }

    .logo {
        height: 28px
    }

    .hero {
        padding: 48px 20px 32px
    }

    .road,
    #about .grid {
        grid-template-columns: 1fr
    }

    .grid.stats .stat b {
        font-size: 26px
    }
}

@media (prefers-reduced-motion: reduce) {
    .card {
        transition: none
    }

    .card:hover {
        transform: none
    }

    .view.on {
        animation: none
    }

    .btn:hover {
        filter: none
    }
}

:root {
    --c1: #23807a;
    --c2: #d98a2b;
    --c3: #d0674f;
    --c4: #5b6bc0;
    --c5: #6a9a5b
}

@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --c1: #2f9a92;
        --c2: #e8a04a;
        --c3: #e07f68;
        --c4: #8090dd;
        --c5: #8ab97a
    }
}

:root[data-theme="dark"] {
    --c1: #2f9a92;
    --c2: #e8a04a;
    --c3: #e07f68;
    --c4: #8090dd;
    --c5: #8ab97a
}

:root .btn {
    background: var(--c1);
    color: #fff
}

:root .btn.ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line)
}

:root .btn:hover {
    filter: brightness(1.1)
}

.grid>.card:nth-child(2),
.road>.card:nth-child(2) {
    --k: var(--c2)
}

.grid>.card:nth-child(3),
.road>.card:nth-child(3) {
    --k: var(--c3)
}

.grid>.card:nth-child(4),
.road>.card:nth-child(4) {
    --k: var(--c4)
}

.grid>.card:nth-child(5) {
    --k: var(--c5)
}

.soon {
    color: var(--k)
}

.stat:nth-child(1) b {
    color: var(--c1)
}

.stat:nth-child(2) b {
    color: var(--c2)
}

.stat:nth-child(3) b {
    color: var(--c3)
}

.band {
    background: color-mix(in srgb, var(--c1) 7%, var(--soft))
}

.dl .card:nth-child(2) {
    --k: var(--c4)
}

nav a,
.btn {
    border-radius: 6px
}

/* Page-level view switching */
.view {
    display: none;
}

/* Default view when no hash, #home, or an in-page section (#features) is active */
#v-home,
#v-download,
#v-roadmap,
#v-about,
#v-privacy,
#features {
    scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px))
}

#v-home,
:target#v-home {
    display: block;
}

/* Show specific page views when targeted */
:target#v-download,
:target#v-roadmap,
:target#v-about,
:target#v-privacy {
    display: block;
}

/* Hide Home view when another main view is explicitly targeted */
:root:has(#v-download:target, #v-roadmap:target, #v-about:target, #v-privacy:target) #v-home {
    display: none;
}