:root {
    color-scheme: dark;
    --ink: #f8fafc;
    --muted: #b9c2ce;
    --soft: #7f8b9a;
    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.22);
    --panel: rgba(10, 14, 22, 0.72);
    --panel-strong: rgba(13, 18, 28, 0.92);
    --orange: #ff7a1a;
    --gold: #ffc247;
    --red: #f23b2f;
    --cyan: #77d8ff;
    --green: #74f1a3;
    --purple: #b58dff;
    --night: #070a10;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 88px; }

body {
    margin: 0;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--night);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: rgba(255, 122, 26, 0.4); color: #fff; }

.page {
    position: relative;
    min-height: 100vh;
    background: var(--night);
}

.shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Nav ===== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(7, 10, 16, 0.55);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease, background 200ms ease;
}
.topbar.scrolled {
    background: rgba(7, 10, 16, 0.82);
    border-bottom-color: var(--line);
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.brand img {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    box-shadow: none;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}
.nav-links a {
    text-decoration: none;
    transition: color 160ms ease;
}
.nav-links a:not(.app-button):hover { color: var(--ink); }
.section-menu { display: none; }
.section-menu summary {
    min-height: 44px;
    padding: 10px 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
}
.section-menu summary::marker { color: var(--gold); }
.section-menu-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    padding-bottom: 12px;
}
.section-menu-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--panel-strong);
    color: var(--ink);
    font-size: 14px;
    text-decoration: none;
}
.section-menu-links a:hover { color: var(--gold); }
.nav-links a:focus-visible,
.section-menu summary:focus-visible,
.section-menu-links a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

.app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--night);
    color: var(--night);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.app-button:hover {
    transform: none;
    box-shadow: none;
}
.app-button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}
.app-button svg { flex-shrink: 0; }

/* ===== Hero ===== */
.hero {
    position: relative;
    padding: 56px 0 80px;
    isolation: isolate;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--night);
}


.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 56px;
    padding: 36px 0 8px;
}


h1 {
    margin: 0;
    font-size: clamp(42px, 6.2vw, 78px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 400;
}

.hero-copy { max-width: 700px; }
.hero-copy .lede {
    max-width: 600px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.55;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
}
.secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    transition: background 160ms ease, border-color 160ms ease;
}
.secondary-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
}

.invite-hint {
    display: none;
    margin: 18px 0 0;
    color: var(--soft);
    font-size: 14px;
}
.invite-hint a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 194, 71, 0.4);
    transition: color 160ms ease, border-color 160ms ease;
}
.invite-hint a:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.7);
}
body.is-invite .invite-hint { display: block; }

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    margin-top: 28px;
    color: var(--soft);
    font-size: 13.5px;
}
.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero-meta svg { flex-shrink: 0; }

/* ===== Published product preview ===== */

.screenshot-link { display: block; border-radius: var(--radius-md); }




.product-map { width: min(300px, 100%); margin: 0 auto; }
.product-map .screenshot-link { aspect-ratio: 600 / 940; overflow: hidden; }
.product-map img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.preview-label { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.product-map figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; }

/* ===== Sections ===== */
section { padding: 88px 0; position: relative; }

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(240px, 0.5fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 44px;
}
.section-heading h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}

/* ===== Features ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.feature {
    position: relative;
    min-height: 240px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--night);
    overflow: hidden;
    transition: transform 240ms ease, border-color 240ms ease;
}
.feature:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 194, 71, 0.32);
}


.feature-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 22px;
    border: 1px solid rgba(255, 194, 71, 0.36);
    border-radius: 12px;
    background: var(--night);
    color: var(--gold);
}
.feature h3 {
    margin: 0 0 8px;
    font-size: 19px;
    letter-spacing: -0.01em;
    font-weight: 700;
}
.feature p {
    margin: 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.55;
}

/* ===== Activity chips ===== */
.band {
    background: var(--night);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.activities {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.activity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}
.activity:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line-strong);
}
.activity .emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 22px;
    flex-shrink: 0;
}








.activity strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.activity span {
    color: var(--soft);
    font-size: 13px;
}

/* ===== Product walkthrough ===== */
.walkthrough-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.walkthrough-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.walkthrough-nav a:hover { border-color: var(--ink); }
.walkthrough-nav a:focus-visible,
.screenshot-link:focus-visible,
.secondary-link:focus-visible,
.product-steps:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}
.product-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.product-step {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel);
    scroll-margin-top: 88px;
    scroll-margin-inline: 4px;
}
.product-step-copy { flex: 1; }
.step-number { display: block; margin-bottom: 12px; color: var(--gold); font-size: 13px; font-weight: 700; }
.product-step h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.25; }
.product-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.product-step figure { max-width: 300px; margin: 24px auto 0; }
.product-step img { width: 100%; height: auto; border-radius: var(--radius-md); }
.product-step figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* ===== Showcase (split) ===== */
.showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.showcase-copy h3 {
    margin: 0 0 14px;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 800;
}
.showcase-copy p {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 17px;
}
.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--ink);
    font-size: 15px;
}
.check-list .tick {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(116, 241, 163, 0.14);
    border: 1px solid rgba(116, 241, 163, 0.35);
    color: var(--green);
    margin-top: 1px;
}
.check-list li span { color: var(--muted); }

.visual-card {
    position: relative;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--night);
    overflow: hidden;
}
.visual-card.chat {
    padding: 24px;
}
.chat-line {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(8px);
    animation: chat-in 600ms ease forwards;
}
.chat-line:nth-child(1) { animation-delay: 0.1s; }
.chat-line:nth-child(2) { animation-delay: 0.3s; }
.chat-line:nth-child(3) { animation-delay: 0.5s; }
.chat-line:nth-child(4) { animation-delay: 0.7s; }
@keyframes chat-in {
    to { opacity: 1; transform: translateY(0); }
}
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
    color: #fff;
}
.avatar.a1 { background: var(--night); }
.avatar.a2 { background: var(--night); }
.avatar.a3 { background: var(--night); }
.avatar.a4 { background: var(--night); }
.bubble {
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink);
    max-width: 80%;
}
.bubble .name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 2px;
}

/* ===== Manifesto ===== */
.manifesto-section {
    background: var(--night);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
    overflow: hidden;
    position: relative;
}

.manifesto-inner {
    max-width: 920px;
    margin: 0 auto;
}
.manifesto-headline {
    margin: 0 0 22px;
    font-size: clamp(38px, 6vw, 70px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 400;
}
.manifesto-lede {
    max-width: 660px;
    margin: 0 auto 44px;
    color: var(--muted);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.6;
}
.pains {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    text-align: left;
    margin-bottom: 48px;
}
.pain {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 18px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--night);
    transition: border-color 240ms ease, transform 240ms ease;
}
.pain:hover {
    border-color: rgba(242, 59, 47, 0.32);
    transform: none;
}

.pain strong {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.pain .pain-sub {
    display: block;
    color: var(--muted);
    font-size: 14px;
    margin-top: 2px;
}
.manifesto-close {
    margin: 0 auto;
    max-width: 760px;
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}


/* ===== Privacy ===== */
.privacy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.privacy-item {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
}
.privacy-item .ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: rgba(119, 216, 255, 0.12);
    color: var(--cyan);
}
.privacy-item h3 {
    margin: 0 0 8px;
    font-size: 17px;
    letter-spacing: -0.01em;
}
.privacy-item p {
    margin: 0;
    color: var(--muted);
    font-size: 14.5px;
}

/* ===== FAQ ===== */
.faq {
    display: grid;
    gap: 10px;
    max-width: 820px;
    margin: 0 auto;
}
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
    transition: border-color 200ms ease, background 200ms ease;
}
.faq-item[open] {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line-strong);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 220ms ease;
}
.faq-item[open] summary::after {
    transform: rotate(-135deg);
}
.faq-item p {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

/* ===== Download CTA ===== */
.download { padding-bottom: 96px; }
.download-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    padding: 44px;
    border: 1px solid rgba(255, 194, 71, 0.28);
    border-radius: var(--radius-lg);
    background: var(--night);
    position: relative;
    overflow: hidden;
}

.download-panel h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 800;
}
.download-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}
.download-panel .app-button {
    min-height: 52px;
    padding: 0 28px;
    font-size: 15.5px;
}

/* ===== Footer ===== */
footer {
    padding: 36px 0 42px;
    border-top: 1px solid var(--line);
    color: var(--soft);
    font-size: 14px;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-weight: 700;
}
.footer-brand img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}
.footer-meta { color: var(--soft); }
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    width: 100%;
}
.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    text-underline-offset: 4px;
}
.footer-links a:hover { color: var(--gold); }
.footer-links a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Content remains visible; one-time entrances are owned by the controller. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .hero-glow, .chat-line { animation: none; }
    .chat-line { opacity: 1; transform: none; }
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .nav-links a:not(.app-button) { display: none; }
    .section-menu { display: block; border-top: 1px solid var(--line); }
    section[id] { scroll-margin-top: 132px; }
    .hero { padding: 36px 0 48px; }

    .product-steps {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(100%, 340px);
        gap: 16px;
        overflow-x: auto;
        padding: 4px 4px 16px;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 4px;
        overscroll-behavior-x: contain;
    }
    .product-step { scroll-snap-align: start; scroll-margin-top: 132px; }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-top: 28px;
    }
    .section-heading,
    .showcase {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .showcase { gap: 36px; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .activities { grid-template-columns: repeat(2, 1fr); }
    .privacy-grid { grid-template-columns: 1fr; }
    .pains { grid-template-columns: 1fr; }
    .download-panel {
        grid-template-columns: 1fr;
        padding: 32px;
    }
}

@media (max-width: 620px) {
    .shell { padding: 0 18px; }
    section { padding: 64px 0; }
    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .app-button,
    .secondary-link {
        width: 100%;
    }
    .feature-grid,
    .activities {
        grid-template-columns: 1fr;
    }
    .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Motion and finish, composed within the deployed Flare visual world. */
:root { --ease:cubic-bezier(.16,1,.3,1); --motion-press:120ms; --motion-feedback:180ms; --motion-shift:480ms; }
@font-face { font-family:Inter; src:url('/assets/fonts/inter-latin.woff2') format('woff2'); font-style:normal; font-weight:100 900; font-display:swap; }
button { font:inherit; }
.avatar { color:var(--night); }
.chat-line { opacity:1; transform:none; animation:none; }
a,button,summary { -webkit-tap-highlight-color:rgba(255,194,71,.18); }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:10px; left:16px; z-index:100; padding:12px 18px; border-radius:10px; color:var(--night); background:var(--gold); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.nav-links { gap:24px; }
.nav-links a { display:inline-flex; align-items:center; min-height:44px; }
.nav-actions { display:flex; align-items:center; gap:14px; }
.nav-actions .app-button { width:auto; white-space:nowrap; }
.motion-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 10px; border:0; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; white-space:nowrap; transition:color var(--motion-feedback) ease,transform var(--motion-press) var(--ease); }
.motion-toggle:hover { color:var(--gold); }
.motion-toggle:disabled { cursor:default; color:var(--soft); }
.js-control { display:none!important; }
.js-ready .js-control:not([hidden]) { display:inline-flex!important; }
.app-button { transition:background 240ms var(--ease),transform var(--motion-press) var(--ease); }
.app-button:hover { background:#ff923d; transform:none; }
.app-button:active { transform:scale(.99); transition-duration:var(--motion-press); }
.secondary-link { transition:background var(--motion-feedback),border-color var(--motion-feedback),transform 280ms var(--ease); }
.secondary-link svg { transition:transform 320ms var(--ease); }
.secondary-link:hover svg { transform:translateX(2px); }
.secondary-link:active { transform:scale(.99); }
/* Photographic depth: city, flare light, near roof, then readable content. */
.hero { --scene-progress:.5; --flare-light:.84; --city-shade:linear-gradient(90deg,rgba(7,10,16,.84),rgba(7,10,16,.65) 35%,rgba(7,10,16,.18) 70%,rgba(7,10,16,.08)),linear-gradient(180deg,rgba(7,10,16,.08) 50%,rgba(7,10,16,.25) 78%,#070a10); }
.hero-city { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.hero-bg,.city-foreground { position:absolute; inset:-40px; background-position:70% center; background-size:cover; background-repeat:no-repeat; }
.hero-bg { z-index:0; background-image:url('/assets/hero-city/city-distance.webp'); transform:translateY(calc((var(--scene-progress) - .5) * 12px)); }
.city-foreground { z-index:2; background-image:url('/assets/hero-city/city-rooftop.webp'); transform:translateY(calc((var(--scene-progress) - .5) * -32px)); }
.city-foreground { pointer-events:none; }
.city-foreground::before { content:""; position:absolute; z-index:1; inset:0; background:var(--city-shade); -webkit-mask:url('/assets/hero-city/city-rooftop.webp') 70% center / cover no-repeat; mask:url('/assets/hero-city/city-rooftop.webp') 70% center / cover no-repeat; }
.city-foreground::after { content:""; position:absolute; inset:0; background:inherit; filter:sepia(1) saturate(2) brightness(1.4); mix-blend-mode:screen; opacity:calc(var(--flare-light) * .28); }
.city-grade { position:absolute; z-index:3; inset:0; background:var(--city-shade); }
.flare-backdrop { display:none; position:absolute; z-index:1; top:0; bottom:0; left:50%; width:min(1440px,100%); transform:translateX(-50%); pointer-events:none; }
.has-flare .flare-backdrop { display:block; }
#hero-flare { display:block; width:100%; height:100%; }
.hero-copy { position:relative; z-index:3; transform:none; }
.headline-stop { text-shadow:none; }
.headline-start { color:var(--orange); filter:none; }
/* The title is the one requested gradient; supporting accents stay flat. */
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .headline-start { background:linear-gradient(135deg,var(--gold) 0%,var(--orange) 45%,var(--red) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
/* One signal opens into the compact native-style event card. */
.hero-grid { grid-template-areas:"copy story" "meta story"; row-gap:0; align-items:center; }
.hero-copy { grid-area:copy; align-self:end; }
.hero-meta { grid-area:meta; align-self:start; position:relative; z-index:3; }
.flare-story { grid-area:story; --card-rest-top:64px; position:relative; width:100%; margin:0; padding-top:var(--card-rest-top); min-height:440px; text-align:center; }
.event-depth { position:relative; z-index:3; transform:translateY(calc((var(--scene-progress,.5) - .5) * -10px)); }
.has-flare-story .event-depth { z-index:1; }
.event-drop { position:relative; width:min(380px,100%); margin:auto; --card-sway-range:12px; }
.sky-flare-card { display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; align-items:center; padding:16px; border-radius:12px; background:#191d24; box-shadow:0 18px 42px rgba(0,0,0,.35); text-align:left; }
.event-photo { width:76px; height:104px; border-radius:10px; object-fit:cover; }
.event-copy { min-width:0; }
.event-category { margin:0 0 4px; color:var(--cyan); font-size:11px; font-weight:700; line-height:1.3; letter-spacing:.045em; text-transform:uppercase; }
.sky-flare-card h2 { margin:0 0 5px; color:var(--ink); font-size:16px; line-height:1.25; letter-spacing:-.015em; font-weight:700; }
.event-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.event-host { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }
.event-details { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.event-details > span { display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border-radius:999px; }
.event-time { color:var(--gold); background:rgba(255,194,71,.1); }
.event-distance { color:var(--cyan); background:rgba(119,216,255,.1); }
.event-details .event-guests { margin-left:auto; padding-right:0; color:var(--purple); }
.has-flare-story .event-drop { opacity:var(--card-opacity,0); visibility:var(--card-visibility,hidden); transform:translate(calc(var(--card-sway,0) * var(--card-sway-range)),calc((var(--card-progress,0) - 1) * 140px + var(--card-fall,0) * var(--card-exit-distance,720px))) scale(calc(.86 + var(--card-progress,0) * .14)) rotate(calc((1 - var(--card-progress,0)) * -4deg + var(--card-sway,0) * 1.2deg)); filter:blur(calc((1 - var(--card-progress,0)) * 3px)); transform-origin:50% 50%; }
.feature { transition:transform 320ms var(--ease),border-color var(--motion-feedback); }

.activity { transition:border-color var(--motion-feedback),background var(--motion-feedback); }
.product-step figure { transform:none; }
.product-steps { overflow:visible; }
.product-step .screenshot-link { display:block; width:min(250px,100%); margin:auto; }
.product-step img { width:100%; height:auto; }
.product-step { padding:24px; }
.product-step figure { margin:24px 0 0; }
.product-step figcaption { min-height:54px; margin-top:16px; line-height:1.6; font-size:12px; }
.walkthrough-nav { margin-bottom:24px; }
.walkthrough-nav a { min-height:44px; }
.showcase { align-items:center; }
.footer-links a { min-height:44px; display:inline-flex; align-items:center; }
.pain-sub { color:var(--muted); }
.hero-meta { color:var(--muted); font-size:13px; gap:14px 22px; }
.manifesto-headline { transform:none; }
.faq-item { transition:border-color var(--motion-feedback); }
.faq-item[open] { border-color:rgba(255,194,71,.35); }
html { scrollbar-color:#5e6570 var(--night); scrollbar-width:thin; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--night); }
::-webkit-scrollbar-thumb { background:#5e6570; border:2px solid var(--night); border-radius:8px; }
@media (max-width:1100px) { .nav-links { gap:16px; } .nav-actions { gap:6px; } }
@media (max-width:960px) {
  .nav-links { display:none; }
  .nav { padding-right:74px; }
  .topbar .shell { position:relative; }
  .section-menu { position:absolute; display:block; top:10px; right:24px; }
  .section-menu summary { list-style:none; min-width:44px; text-align:center; padding:10px 0; }
  .section-menu summary::-webkit-details-marker { display:none; }
  .section-menu-links { position:absolute; top:54px; right:0; width:min(360px,calc(100vw - 36px)); padding:12px; border:1px solid var(--line); border-radius:14px; background:#0d121c; box-shadow:0 16px 32px rgba(0,0,0,.3); }
  section[id],.product-step { scroll-margin-top:88px; }
  .hero-grid { grid-template-areas:"copy" "story" "meta"; gap:0; }
  .hero-copy { align-self:auto; }
  .flare-story { --card-rest-top:72px; min-height:300px; margin-top:20px; }
  .hero-meta { margin-top:8px; }
  /* Keep the first readable card above the roof before its descent. */
  .event-depth { top:-72px; transform:none; }
  .event-drop { --card-sway-range:5px; }
  .hero-city { height:auto; bottom:0; }
  .hero-bg,.city-foreground { background-position:70% center; }
  .hero { --city-shade:linear-gradient(90deg,rgba(7,10,16,.82),rgba(7,10,16,.55) 65%,rgba(7,10,16,.35)),linear-gradient(180deg,rgba(7,10,16,.04) 48%,rgba(7,10,16,.18) 75%,#070a10); }
  .hero-copy { transform:none; }
  .product-steps { grid-auto-flow:initial; grid-auto-columns:auto; grid-template-columns:1fr; overflow:visible; padding:0; }
  .product-step { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
  .product-step figure { margin:0; }
  .product-step figure { transform:none; }
}
@media (max-width:620px) {
  .section-menu { right:18px; }
  .nav { gap:8px; padding-right:56px; }
  .brand { gap:8px; }
  .brand img { width:32px; height:32px; }
  .nav-actions .app-button { padding:0 14px; font-size:13px; }
  .motion-toggle { font-size:0; width:44px; padding:0; }
  .motion-toggle::before { content:""; display:block; width:9px; height:12px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
  body[data-motion="paused"] .motion-toggle::before { width:0; height:0; border-left:10px solid currentColor; border-right:0; border-top:7px solid transparent; border-bottom:7px solid transparent; }
  body[data-motion="reduced"] .motion-toggle::before { width:12px; height:2px; border:0; background:currentColor; }
  .product-step { grid-template-columns:1fr; padding:22px; }
  .product-step .screenshot-link { width:min(240px,100%); }
  .product-step figcaption { min-height:0; }
  .hero { padding-bottom:56px; }
}
@media (max-width:350px) {
  .shell { padding:0 16px; }
  .section-menu { right:16px; }
  .brand { font-size:16px; gap:6px; }
  .brand img { width:28px; height:28px; }
  .nav-actions .app-button { padding:0 11px; font-size:12px; }
  .nav { padding-right:50px; gap:6px; }
  h1 { font-size:44px; }

  .sky-flare-card { grid-template-columns:62px minmax(0,1fr); gap:10px; padding:12px; }
  .event-photo { width:62px; height:94px; }
  .sky-flare-card h2 { font-size:14px; }
  .event-details { gap:4px; }
  .event-details > span { padding:4px 5px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .event-depth,.hero-bg,.city-foreground,.hero-copy,.manifesto-headline,.product-step figure,.app-button:hover,.app-button:active,.secondary-link:active,.secondary-link:hover svg,.feature:hover { transform:none!important; }
}
body[data-motion="reduced"] .event-depth,body[data-motion="reduced"] .hero-bg,body[data-motion="reduced"] .manifesto-headline,body[data-motion="reduced"] .product-step figure { transform:none; }
html:has(body[data-motion="paused"]),html:has(body[data-motion="reduced"]) { scroll-behavior:auto; }

body[data-motion="reduced"] .city-foreground,body[data-motion="reduced"] .hero-copy { transform:none; }
body[data-motion="reduced"] .event-depth { z-index:3; }
@media (prefers-reduced-motion:reduce) { .has-flare-story .event-depth { z-index:3; } }

@media (prefers-reduced-motion:reduce) { .has-flare-story .event-drop { opacity:1; visibility:visible; transform:none; filter:none; } }
body[data-motion="reduced"] .has-flare-story .event-drop { opacity:1; visibility:visible; transform:none; filter:none; }

/* Quiet lower-page rhythm, with one scroll-linked product scene. */
main > section:not(.hero) { padding-block:104px; }
.section-heading { gap:56px; margin-bottom:56px; }
.section-heading h2 { font-weight:400; line-height:1.14; letter-spacing:-.025em; text-wrap:balance; }
.section-heading p,.showcase-copy p { max-width:60ch; line-height:1.65; }
.manifesto-headline { font-weight:400; line-height:1.12; text-wrap:balance; }
.manifesto-lede { line-height:1.65; }
.pains { gap:0 40px; }
.pain { padding:24px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; }
.pain:hover { transform:none; border-color:var(--line-strong); }
.pain strong { font-weight:500; }
.pain-sub { font-size:16px; line-height:1.65; }
.feature-grid { gap:40px; }
.feature { min-height:0; padding:0; border:0; border-radius:0; background:none; overflow:visible; }
.feature:hover { transform:none; }

.feature-mark { margin-bottom:24px; }
.feature h3 { font-size:20px; font-weight:500; }
.feature p,.product-step p,.privacy-item p { font-size:16px; line-height:1.65; }
.activities { gap:16px; }
.activity { background:rgba(255,255,255,.025); }
.product-steps { gap:40px; margin-top:40px; }
.product-step { padding:0; border:0; border-radius:0; background:none; }
.product-step h3 { font-size:24px; font-weight:500; letter-spacing:-.015em; }
.product-step figure { transform:none; margin-top:32px; }
.product-step .screenshot-link { border-radius:var(--radius-md); box-shadow:0 16px 36px rgba(0,0,0,.2); transform-origin:50% 70%; }
.product-step figcaption { position:relative; margin-top:24px; }
.walkthrough-nav a { border-color:transparent; background:rgba(255,255,255,.035); }
.showcase { gap:80px; }
.showcase-copy h3 { font-weight:400; line-height:1.16; letter-spacing:-.025em; text-wrap:balance; }
.visual-card { background:rgba(255,255,255,.025); box-shadow:none; }
.privacy-item { background:none; }
.faq-item p { font-size:16px; line-height:1.65; }
.download-panel h2 { font-weight:400; line-height:1.14; text-wrap:balance; }
@media (max-width:960px) {
  main > section:not(.hero) { padding-block:80px; }
  .section-heading { gap:24px; }
  .feature-grid { gap:40px 32px; }
  .showcase { gap:48px; }
  .product-step { gap:40px; }
  .product-step figure { margin:0; }
}
@media (max-width:620px) {
  main > section:not(.hero) { padding-block:64px; }
  .section-heading { margin-bottom:40px; }
  .feature-grid { gap:40px; }
  .pains { grid-template-columns:1fr; gap:0; }
  .product-steps { gap:56px; }
  .product-step { gap:28px; }
  .showcase { gap:40px; }
}

/* One retained progress track per item. Stationary parents measure native scroll;
   only their contents move. Defaults are fully readable before JavaScript. */
.reveal-ready { --reveal-progress:1; }
.js-ready .manifesto-inner.reveal-ready {
  transform:translateY(calc((1 - var(--reveal-progress,1)) * 12px));
}
.js-ready .feature-content.reveal-ready {
  transform:translateY(calc((1 - var(--reveal-progress,1)) * 32px));
}
.js-ready .preview-motion.reveal-ready {
  --preview-x:0px;
  --preview-tilt:0deg;
  opacity:calc(.7 + var(--reveal-progress,1) * .3);
  transform:translate(calc((1 - var(--reveal-progress,1)) * var(--preview-x)),calc((1 - var(--reveal-progress,1)) * 40px)) rotate(calc((1 - var(--reveal-progress,1)) * var(--preview-tilt))) scale(calc(.96 + var(--reveal-progress,1) * .04));
  transform-origin:50% 70%;
}
.js-ready .product-step:nth-child(1) .preview-motion.reveal-ready { --preview-x:100px; --preview-tilt:-1.4deg; }
.js-ready .product-step:nth-child(3) .preview-motion.reveal-ready { --preview-x:-100px; --preview-tilt:1.4deg; }
.js-ready .map-motion.reveal-ready {
  opacity:calc(.8 + var(--reveal-progress,1) * .2);
  transform:translateY(calc((1 - var(--reveal-progress,1)) * 48px)) scale(calc(.98 + var(--reveal-progress,1) * .02));
  transform-origin:50% 70%;
}
.js-ready .chat-line.reveal-ready {
  opacity:calc(.85 + var(--reveal-progress,1) * .15);
  transform:translateY(calc((1 - var(--reveal-progress,1)) * 24px));
}
@media (max-width:960px) {
  .js-ready .manifesto-inner.reveal-ready { transform:translateY(calc((1 - var(--reveal-progress,1)) * 8px)); }
  .js-ready .feature-content.reveal-ready { transform:translateY(calc((1 - var(--reveal-progress,1)) * 24px)); }
  .js-ready .product-step .preview-motion.reveal-ready {
    opacity:calc(.7 + var(--reveal-progress,1) * .3);
    transform:translateY(calc((1 - var(--reveal-progress,1)) * 36px)) rotate(calc((1 - var(--reveal-progress,1)) * var(--preview-tilt) * .428571)) scale(calc(.98 + var(--reveal-progress,1) * .02));
  }
  .js-ready .map-motion.reveal-ready { transform:translateY(calc((1 - var(--reveal-progress,1)) * 32px)) scale(calc(.98 + var(--reveal-progress,1) * .02)); }
  .js-ready .chat-line.reveal-ready { transform:translateY(calc((1 - var(--reveal-progress,1)) * 16px)); }
}
@media (prefers-reduced-motion:reduce) {
  .js-ready .reveal-ready { opacity:1!important; transform:none!important; }
}
body[data-motion="reduced"] .reveal-ready { opacity:1!important; transform:none!important; }

/* Flat surfaces and deliberate type: the city carries the atmosphere. */
.page,.band,.manifesto-section { background:var(--night); }
.band,.manifesto-section { border-color:transparent; }
.hero { padding-block:72px 88px; }
.hero-copy .lede { max-width:46ch; font-size:18px; line-height:1.65; }
.hero-actions { gap:24px; margin-top:32px; }
.app-button { background:var(--orange); font-weight:500; letter-spacing:0; border-radius:10px; }
.secondary-link { padding-inline:0; border:0; border-radius:0; background:transparent; font-weight:500; }
.secondary-link:hover { background:transparent; }
.feature-mark { width:24px; height:24px; justify-content:flex-start; border:0; border-radius:0; background:none; color:var(--orange); }
.activities { gap:0 28px; }
.activity { padding:22px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; }
.activity:hover { background:none; border-color:var(--line); }
.activity .emoji { width:28px; height:32px; border-radius:0; background:none; font-size:20px; }
.activity strong { font-weight:500; }
.activity span { color:var(--muted); font-size:14px; }
.pain { grid-template-columns:20px minmax(0,1fr); gap:16px; }
.principle-mark { margin-top:3px; color:var(--orange); }
.manifesto-close { font-size:24px; font-weight:400; line-height:1.4; }
.step-number { color:var(--muted); font-weight:500; letter-spacing:.02em; }
.walkthrough-nav a { padding-inline:0; margin-right:24px; border-radius:0; background:none; color:var(--muted); font-weight:400; }
.walkthrough-nav a:hover { background:none; color:var(--ink); }
.visual-card { border:0; border-radius:0; background:none; }
.avatar.a1,.avatar.a2,.avatar.a3,.avatar.a4 { background:#202a35; color:var(--ink); font-weight:500; }
.bubble { background:#111923; border:0; }
.bubble .name { color:var(--muted); font-weight:500; }
.privacy-grid { gap:40px; }
.privacy-item { padding:24px 0; border:0; border-top:1px solid var(--line); border-radius:0; }
.privacy-item .ic { width:24px; height:24px; justify-content:flex-start; border-radius:0; background:none; color:var(--muted); }
.privacy-item h3 { font-weight:500; }
.faq { gap:0; }
.faq-item { border:0; border-top:1px solid var(--line); border-radius:0; background:none; }
.faq-item[open] { background:none; }
.faq-item summary { padding-inline:0; font-weight:500; }
.faq-item p { padding-inline:0; }
.download-panel { padding:0; border:0; border-radius:0; background:none; }
.download-panel p { font-size:16px; line-height:1.65; }
/* Brand color marks the plan, the sequence, and the final action. */
.brand-accent,.step-number,.privacy-item .ic { color:var(--orange); }
.walkthrough-nav a:hover,.walkthrough-nav a:focus-visible { color:var(--orange); }
.faq-item[open] { border-color:var(--orange); }
.download-panel { padding:48px 0 0; border-top:1px solid var(--line); border-radius:0; background:none; color:var(--ink); overflow:visible; }
.download-panel p { color:var(--muted); }
.download-panel .app-button { background:var(--ink); color:var(--night); gap:12px; }
.download-panel .app-button:hover { background:#e4e9ef; }
.download-panel .download-arrow { margin-left:8px; color:var(--orange); }
.download-panel a:focus-visible { outline-color:var(--orange); }
@media (max-width:960px) { .hero { padding-block:48px 64px; } }
@media (max-width:620px) {
  h1 { font-size:clamp(34px,10vw,54px); }
  .hero { padding-block:36px 56px; }
  .hero-copy .lede { font-size:17px; }
  .hero-actions { gap:12px; }
  .secondary-link { justify-content:center; }
  .privacy-grid { gap:24px; }
  .download-panel { padding:32px 0 0; gap:28px; }
}