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

:root {
    /* Brand */
    --navy:   #050567;
    --cream:  #EEE9E6;
    --blue:   #0089FF;
    /* Extended palette derived from the brand */
    --ink:    #030329;
    --iris:   #6C6BFF;
    --text:   #EEE9E6;
    --muted:  rgba(238,233,230,0.62);
    --faint:  rgba(238,233,230,0.40);
    --line:   rgba(238,233,230,0.10);
    --line-2: rgba(238,233,230,0.18);
    --surface:      rgba(238,233,230,0.035);
    --surface-lift: rgba(238,233,230,0.06);
    --shell: 1180px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Ambient aurora — the whole page sits on one continuous light field */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    will-change: transform;
}
.aurora .a1 {
    width: 780px; height: 780px; top: -280px; left: -180px;
    background: radial-gradient(circle, rgba(5,5,103,0.95), transparent 68%);
    animation: drift1 22s var(--ease) infinite alternate;
}
.aurora .a2 {
    width: 620px; height: 620px; top: -120px; right: -160px;
    background: radial-gradient(circle, rgba(0,137,255,0.40), transparent 68%);
    animation: drift2 26s var(--ease) infinite alternate;
}
.aurora .a3 {
    width: 700px; height: 700px; bottom: -260px; left: 40%;
    background: radial-gradient(circle, rgba(108,107,255,0.34), transparent 68%);
    animation: drift3 30s var(--ease) infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(140px, 90px, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-120px, 140px, 0) scale(1.08); } }
@keyframes drift3 { to { transform: translate3d(90px, -110px, 0) scale(1.14); } }

/* Film grain — keeps the large flat fields from banding */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(0,137,255,0.32); color: #fff; }

a { color: inherit; }
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
}
.skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--cream); color: var(--navy);
    padding: 12px 20px; border-radius: 0 0 12px 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ── Logo mark: rendered as an app-icon tile ───────────────── */
.mark {
    display: block;
    border-radius: 26%;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(238,233,230,0.14),
        0 10px 30px -8px rgba(3,3,41,0.9);
}
/* Round the image itself rather than relying on the wrapper to clip it.
   The hero mark has to run overflow:visible so its glow can escape (see
   .hero-mark), which leaves nothing to clip the square PNG — inheriting
   the radius keeps every mark rounded whether or not the wrapper clips. */
.mark img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ── Navigation ────────────────────────────────────────────── */
#nav {
    position: fixed;
    top: 18px; left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: calc(100% - 32px);
    max-width: var(--shell);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(3,3,41,0.55);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
#nav.scrolled {
    background: rgba(3,3,41,0.82);
    border-color: var(--line-2);
    box-shadow: 0 12px 40px -12px rgba(0,0,0,0.7);
}
.nav-inner {
    padding: 0 12px 0 16px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-logo .mark { width: 32px; height: 32px; }
.nav-logo span {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    color: var(--cream);
}
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
    display: block;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--cream); background: var(--surface-lift); }
.nav-cta {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--cream); color: var(--navy);
    font-size: 0.85rem; font-weight: 600;
    padding: 9px 18px; border-radius: 999px;
    text-decoration: none; white-space: nowrap;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 26px rgba(238,233,230,0.26),
        0 6px 18px -10px rgba(238,233,230,0.30);
}

.hamburger {
    display: none;
    background: none; border: 1px solid var(--line); cursor: pointer;
    width: 40px; height: 40px; border-radius: 999px;
    align-items: center; justify-content: center;
}
.hamburger svg { width: 18px; height: 18px; stroke: var(--cream); fill: none; stroke-width: 2; stroke-linecap: round; }

/* ── Layout ────────────────────────────────────────────────── */
.container { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
section { position: relative; padding: 130px 0; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    border-radius: 999px;
    padding: 7px 16px 7px 10px;
    font-size: 0.78rem; font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.01em;
}
.eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(0,137,255,0.18);
}

h1, h2, h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; }

.section-label {
    font-size: 0.75rem; font-weight: 600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
}
.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin-bottom: 20px;
}
.section-subtitle {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 560px;
    line-height: 1.75;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 150px 0 110px;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; }

.hero-mark {
    width: 92px; height: 92px;
    margin-bottom: 34px;
    position: relative;
    animation: floaty 7s ease-in-out infinite;
    /* The glow below is a child, so the wrapper must not clip it. iOS
       Safari clips a blurred child to the SQUARE border-box rather than
       the rounded one, which painted the glow into the corners as a
       visible rectangle. Letting it overflow also means the halo finally
       shows at all — it was previously clipped to the tile and hidden
       behind the opaque icon. The icon stays rounded via its own radius. */
    overflow: visible;
}
.hero-mark::before {
    content: '';
    position: absolute; inset: -40%;
    background: radial-gradient(circle, rgba(0,137,255,0.5), transparent 65%);
    filter: blur(30px);
    z-index: -1;
}
@keyframes floaty { 50% { transform: translateY(-10px); } }

.hero h1 {
    font-size: clamp(2.2rem, 7.2vw, 5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin: 26px 0 0;
    max-width: 15ch;
    text-wrap: balance;
}
.hero h1 .accent {
    background: linear-gradient(100deg, var(--cream) 0%, #9CB4FF 45%, var(--blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hero p {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--muted);
    max-width: 54ch;
    margin: 26px auto 0;
    line-height: 1.75;
}
.hero-actions {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center;
    margin-top: 40px;
}
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.94rem; font-weight: 600;
    padding: 15px 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
                background 0.25s, border-color 0.25s;
}
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Cream pills should read as if they emit light, so the glow is an even
   halo with no vertical offset, plus a lighter grounding pass beneath.
   A single offset shadow made the bloom look like it was sliding off the
   bottom edge rather than surrounding the button. */
.btn-primary {
    background: var(--cream); color: var(--navy);
    box-shadow:
        0 0 30px rgba(238,233,230,0.20),
        0 6px 22px -10px rgba(238,233,230,0.28);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 46px rgba(238,233,230,0.32),
        0 10px 30px -12px rgba(238,233,230,0.36);
}
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary svg { transition: transform 0.25s var(--ease); }
.btn-ghost {
    border: 1px solid var(--line-2);
    color: var(--cream);
    background: var(--surface);
}
.btn-ghost:hover { background: var(--surface-lift); border-color: rgba(238,233,230,0.3); transform: translateY(-2px); }

/* ── Category ticker ───────────────────────────────────────── */
.ticker {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: slide 32s linear infinite;
}
/* Two identical groups sit side by side and the track slides exactly one
   group width, so the loop is seamless. The spacing has to live inside a
   group (gap plus a trailing pad) — a gap on the track itself would also
   apply between the halves, and -50% would then land mid-gap and jump. */
.ticker-group {
    display: flex; align-items: center; gap: 44px;
    padding-right: 44px;
}
.ticker-track span {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 0.95rem; font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--faint);
    white-space: nowrap;
}
.ticker-track i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--blue); opacity: 0.55; flex: none;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Bento cards ───────────────────────────────────────────── */
.build-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px; margin-bottom: 56px; flex-wrap: wrap;
}
.cards {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}
.card {
    position: relative;
    grid-column: span 6;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(238,233,230,0.05), rgba(238,233,230,0.015));
    padding: 34px 32px 36px;
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.card:nth-child(1), .card:nth-child(4) { grid-column: span 7; }
.card:nth-child(2), .card:nth-child(3) { grid-column: span 5; }
/* Cursor-tracking sheen — shared by the pillar cards, the stat tiles and the
   contact panel so every surface lights up the same way. The radius is tuned
   per surface via --sheen, since one size does not read the same on a small
   tile as on a full-width panel. isolation + z-index:-1 keeps the glow above
   each surface's own background but beneath its text, so labels and the cream
   email button stay clean instead of picking up a blue wash. */
.card, .stat, .contact-panel { isolation: isolate; }
.card::before, .stat::before, .contact-panel::before {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background: radial-gradient(var(--sheen, 420px) circle at var(--mx, 50%) var(--my, 0%),
                rgba(0,137,255,0.16), transparent 68%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.card:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
    box-shadow: 0 24px 60px -24px rgba(0,0,0,0.85);
}
.card:hover::before, .stat:hover::before, .contact-panel:hover::before { opacity: 1; }
.card-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
    background: linear-gradient(150deg, rgba(0,137,255,0.28), rgba(108,107,255,0.16));
    border: 1px solid var(--line-2);
}
.card-icon svg { width: 21px; height: 21px; stroke: var(--cream); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.card p { font-size: 0.94rem; color: var(--muted); line-height: 1.7; max-width: 46ch; }

/* ── About ─────────────────────────────────────────────────── */
.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 72px;
    align-items: start;
}
.about-text { font-size: 1.02rem; color: var(--muted); line-height: 1.85; }
.about-text p + p { margin-top: 18px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat {
    --sheen: 260px;
    position: relative;
    overflow: hidden;
    padding: 28px 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    transition: border-color 0.3s, background 0.3s;
}
.stat:hover { border-color: var(--line-2); background: var(--surface-lift); }
.stat-number {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1.6rem; font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 6px;
    background: linear-gradient(120deg, var(--cream), #9CB4FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-label { font-size: 0.83rem; color: var(--faint); font-weight: 500; }

/* ── Contact ───────────────────────────────────────────────── */
.contact-panel {
    --sheen: 640px;
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: 32px;
    padding: 84px 40px 88px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(900px circle at 50% -20%, rgba(0,137,255,0.20), transparent 62%),
        linear-gradient(180deg, rgba(238,233,230,0.06), rgba(238,233,230,0.02));
}
.contact-panel .section-subtitle { margin: 0 auto 40px; }
.contact-email {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--navy);
    background: var(--cream);
    padding: 18px 36px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow:
        0 0 40px rgba(238,233,230,0.20),
        0 8px 26px -10px rgba(238,233,230,0.28);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.contact-email svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-email:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 60px rgba(238,233,230,0.32),
        0 12px 34px -12px rgba(238,233,230,0.36);
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--line);
    padding: 56px 0 44px;
}
.footer-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
    padding-bottom: 36px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .mark { width: 34px; height: 34px; }
.footer-brand span {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em;
}
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a {
    color: var(--faint); text-decoration: none;
    font-size: 0.875rem; font-weight: 500;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--cream); }
.footer-legal {
    border-top: 1px solid var(--line);
    padding-top: 28px;
    font-size: 0.775rem;
    line-height: 1.7;
    color: var(--faint);
}
.footer-legal .legal-name { display: block; opacity: 0.75; margin-bottom: 3px; }

/* ── Scroll reveal ─────────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ── Cookie banner: match the dark shell (cookie.js injects its
      own <style> after ours, so these need body-level specificity) ── */
body #rl-cookie-banner {
    background: rgba(3,3,41,0.72);
    color: var(--text);
    border: 1px solid var(--line-2);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 20px 60px -16px rgba(0,0,0,0.8);
}
body #rl-cookie-banner a { color: #7FC0FF; }
body #rl-cookie-banner .rl-cookie-btn { border-radius: 999px; padding: 9px 20px; }
body #rl-cookie-banner .rl-cookie-reject { background: var(--surface-lift); color: var(--text); }
body #rl-cookie-banner .rl-cookie-accept { background: var(--cream); color: var(--navy); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 940px) {
    section { padding: 100px 0; }
    .card, .card:nth-child(1), .card:nth-child(2),
    .card:nth-child(3), .card:nth-child(4) { grid-column: span 12; }
    .about-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 720px) {
    .nav-links, .nav-cta { display: none; }
    .hamburger { display: flex; }
    #nav.open .nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: calc(100% + 10px); left: 0; right: 0;
        background: #0A0A30;
        border: 1px solid var(--line-2);
        box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85);
        border-radius: 22px;
        padding: 12px;
        gap: 2px;
    }
    #nav.open .nav-links a { padding: 13px 16px; font-size: 0.95rem; }
    .hero { padding: 132px 0 84px; }
    .hero h1 { max-width: none; }
    .hero-mark { width: 76px; height: 76px; margin-bottom: 26px; }
    .contact-panel { padding: 60px 24px 64px; border-radius: 26px; }
    .stats { gap: 12px; }
    .footer-top { flex-direction: column; gap: 26px; }
}
@media (max-width: 420px) {
    .stats { grid-template-columns: 1fr; }
    .btn { width: 100%; justify-content: center; }
}

/* Image protection */
img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Legal / content pages (privacy, terms, 404)
   ══════════════════════════════════════════════════════════════════ */

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 148px 24px 110px;
}
.page-header { margin-bottom: 52px; }
.page-header h1 {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin-bottom: 14px;
}
.page-updated {
    font-size: 0.85rem;
    color: var(--faint);
}

.prose { font-size: 1rem; line-height: 1.8; color: var(--muted); }
.prose h2 {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 44px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text);
    margin: 30px 0 10px;
}
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: #7FC0FF; text-decoration: none; border-bottom: 1px solid rgba(127,192,255,0.35); }
.prose a:hover { border-bottom-color: #7FC0FF; }
.prose strong { color: var(--text); font-weight: 600; }
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
    font-size: 0.92rem;
}
.prose th, .prose td {
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--line);
}
.prose th { background: var(--surface); color: var(--text); font-weight: 600; }

/* Wide content must scroll inside itself, never the page */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 404 */
.notfound {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 150px 24px 110px;
}
.notfound-code {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(4.5rem, 16vw, 9rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    background: linear-gradient(120deg, var(--cream) 0%, #9CB4FF 55%, var(--blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 18px;
}
.notfound h1 {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}
.notfound p {
    color: var(--muted);
    max-width: 46ch;
    margin: 0 auto 34px;
}

@media (max-width: 720px) {
    .page { padding: 124px 20px 84px; }
}

/* Content pages carry a single "Back to home" action instead of a menu,
   so it must survive the mobile breakpoint that hides the main nav CTA. */
@media (max-width: 720px) {
    #nav.nav-simple .nav-cta { display: inline-flex; }
}

/* ══════════════════════════════════════════════════════════════════
   Apps — cards on the home page, one per shipped app
   ══════════════════════════════════════════════════════════════════ */

/* An arrow has to nudge the way it points, not the way a forward arrow
   does: back on the 404, down for the in-page jump to Contact. */
.btn-back:hover svg { transform: translateX(-3px); }

.app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.app-card {
    --sheen: 520px;
    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(238,233,230,0.05), rgba(238,233,230,0.015));
    padding: 34px 32px 32px;
    text-decoration: none;
    transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.app-card::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(var(--sheen) circle at var(--mx, 50%) var(--my, 0%),
                rgba(0,137,255,0.16), transparent 68%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.app-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
    box-shadow: 0 24px 60px -24px rgba(0,0,0,0.85);
}
.app-card:hover::before { opacity: 1; }

.app-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.app-icon {
    /* Explicitly block: this is a <span>, and outside a flex parent an
       inline box ignores width/height, which lets the icon blow up to the
       container width. */
    display: block;
    width: 62px; height: 62px; flex: none;
}
/* The app icons ship with their own rounded shape and transparency, taken
   straight from the apps. Rounding them again in CSS would clip the corners
   twice, so the shadow follows the artwork instead of a square box. */
.app-icon img { display: block; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(3,3,41,0.85)); }
.app-name {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1.3rem; font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 4px;
}
.app-meta { font-size: 0.8rem; color: var(--faint); }
.app-card > p { font-size: 0.95rem; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.chip {
    font-size: 0.73rem; font-weight: 500;
    color: var(--muted);
    border: 1px solid var(--line-2);
    background: var(--surface);
    border-radius: 999px;
    padding: 5px 12px;
}

/* Screenshot strip inside a card — peeks above the fold of the card */
.app-shots {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 -32px -32px;
    padding: 4px 32px 0;
    overflow: hidden;
}
.app-shots img {
    /* height:auto is load-bearing: the markup carries width/height
       attributes so the browser can reserve space, and without it the
       attribute height wins over the aspect ratio and the shot renders
       full size. flex:none stops the row from shrinking them. */
    flex: none;
    width: 116px;
    height: auto;
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--line);
    border-bottom: none;
    display: block;
}

.app-actions { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.app-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.88rem; font-weight: 600;
    color: var(--cream);
}
.app-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.app-card:hover .app-link svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════
   App landing pages
   ══════════════════════════════════════════════════════════════════ */

.app-hero { padding: 150px 0 70px; text-align: center; }
.app-hero .app-icon {
    width: 104px; height: 104px;
    margin: 0 auto 26px;
    position: relative;
}
.app-hero .app-icon img { filter: drop-shadow(0 12px 30px rgba(3,3,41,0.9)); }
.app-hero .app-icon::before {
    content: '';
    position: absolute; inset: -38%;
    background: radial-gradient(circle, rgba(0,137,255,0.45), transparent 65%);
    filter: blur(30px);
    z-index: -1;
}
.app-hero h1 {
    font-size: clamp(2.3rem, 6vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.04;
    margin-bottom: 18px;
    text-wrap: balance;
}
.app-hero .lede {
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: var(--muted);
    max-width: 56ch;
    margin: 0 auto 14px;
    line-height: 1.75;
    text-wrap: pretty;
}
.app-hero .chips { justify-content: center; margin-bottom: 30px; }
.app-hero .hero-actions { margin-top: 6px; }

/* Apple's badge guidelines want clear space and a minimum height; this
   keeps the pill visually equivalent to our own buttons. */
.appstore-badge {
    display: inline-flex; align-items: center; gap: 11px;
    background: var(--cream); color: var(--navy);
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 0 30px rgba(238,233,230,0.20), 0 6px 22px -10px rgba(238,233,230,0.28);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.appstore-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 46px rgba(238,233,230,0.32), 0 10px 30px -12px rgba(238,233,230,0.36);
}
.appstore-badge svg { width: 22px; height: 22px; fill: currentColor; }
.appstore-badge .small { display: block; font-size: 0.62rem; font-weight: 500; opacity: 0.7; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
.appstore-badge .big { display: block; font-size: 1rem; line-height: 1.15; }

/* Screenshot gallery — scrolls horizontally, never the page */
.shots {
    display: flex;
    gap: 20px;
    /* Centre the row when it fits. `safe` makes the browser fall back to
       flex-start once the shots overflow, so the first one never gets
       clipped past the left edge of the scroll container. */
    justify-content: center;
    justify-content: safe center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 24px 28px;
    margin: 0 -24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shots figure { flex: none; width: 250px; scroll-snap-align: center; }
.shots img {
    display: block; width: 100%; height: auto;
    border-radius: 22px;
    border: 1px solid var(--line-2);
    box-shadow: 0 24px 60px -28px rgba(0,0,0,0.9);
}
.shots figcaption {
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--faint);
    text-align: center;
}

/* Feature list */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
    --sheen: 300px;
    position: relative; isolation: isolate; overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    padding: 26px 24px;
    transition: border-color 0.3s, background 0.3s;
}
.feature::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(var(--sheen) circle at var(--mx, 50%) var(--my, 0%),
                rgba(0,137,255,0.16), transparent 68%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.feature:hover { border-color: var(--line-2); background: var(--surface-lift); }
.feature:hover::before { opacity: 1; }
.feature h3 {
    font-size: 1rem; font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
}
.feature p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }

/* Spec table, shared by app pages and the press kit */
.spec { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.spec th, .spec td { text-align: left; padding: 13px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { color: var(--faint); font-weight: 500; width: 38%; }
.spec td { color: var(--text); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════════
   Press kit
   ══════════════════════════════════════════════════════════════════ */

.press-panel {
    --sheen: 640px;
    position: relative; isolation: isolate; overflow: hidden;
    border: 1px solid var(--line-2);
    border-radius: 28px;
    padding: 44px 40px;
    background:
        radial-gradient(800px circle at 50% -30%, rgba(0,137,255,0.18), transparent 62%),
        linear-gradient(180deg, rgba(238,233,230,0.06), rgba(238,233,230,0.02));
}
.press-panel::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(var(--sheen) circle at var(--mx, 50%) var(--my, 0%),
                rgba(0,137,255,0.16), transparent 68%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.press-panel:hover::before { opacity: 1; }
.press-dl { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.press-dl .meta { font-size: 0.85rem; color: var(--faint); margin-top: 6px; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.asset {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    padding: 18px;
    text-align: center;
    transition: border-color 0.3s, background 0.3s;
}
.asset:hover { border-color: var(--line-2); background: var(--surface-lift); }
.asset img { width: 84px; height: 84px; margin: 0 auto 12px; display: block; }
.asset .n { font-size: 0.86rem; font-weight: 600; }
.asset .d { font-size: 0.75rem; color: var(--faint); margin-top: 3px; }

.boiler {
    border-left: 2px solid var(--line-2);
    padding: 4px 0 4px 20px;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════════
   Blog
   ══════════════════════════════════════════════════════════════════ */

.posts { display: flex; flex-direction: column; gap: 16px; }
.post-card {
    --sheen: 520px;
    position: relative; isolation: isolate; overflow: hidden;
    display: block;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(238,233,230,0.05), rgba(238,233,230,0.015));
    padding: 28px 30px;
    text-decoration: none;
    transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.post-card::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(var(--sheen) circle at var(--mx, 50%) var(--my, 0%),
                rgba(0,137,255,0.16), transparent 68%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.post-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 20px 50px -24px rgba(0,0,0,0.85); }
.post-card:hover::before { opacity: 1; }
.post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.post-date { font-size: 0.78rem; color: var(--faint); }
.tag {
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--blue);
    border: 1px solid rgba(0,137,255,0.32);
    background: rgba(0,137,255,0.10);
    border-radius: 999px;
    padding: 3px 10px;
}
.post-card h2, .post-card h3 {
    font-size: 1.22rem; font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    line-height: 1.3;
}
.post-card p { font-size: 0.93rem; color: var(--muted); line-height: 1.7; }

.post-header { margin-bottom: 44px; }
.post-header h1 {
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 14px 0 12px;
    text-wrap: balance;
}
.post-header .lede { font-size: 1.06rem; color: var(--muted); line-height: 1.75; }

.backlink {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.85rem; font-weight: 500;
    color: var(--faint);
    text-decoration: none;
    margin-bottom: 26px;
    transition: color 0.2s;
}
.backlink:hover { color: var(--cream); }
.backlink svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.backlink:hover svg { transform: translateX(-3px); }

.empty-note {
    border: 1px dashed var(--line-2);
    border-radius: 18px;
    padding: 34px 30px;
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}

/* ══════════════════════════════════════════════════════════════════
   Responsive for the above
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 940px) {
    .app-grid { grid-template-columns: 1fr; }
    .features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .app-hero { padding: 128px 0 54px; }
    .features { grid-template-columns: 1fr; }
    .press-panel { padding: 32px 24px; border-radius: 22px; }
    .shots figure { width: 210px; }
    .app-card { padding: 28px 24px 26px; }
    .app-shots { margin: 0 -24px -26px; padding: 4px 24px 0; }
}

/* Screenshots inside a blog post. Sits full-bleed of the prose column so
   the phones have room to breathe without the text getting wider. */
.post-shots {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 34px 0 38px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.post-shots::-webkit-scrollbar { display: none; }
.post-shots img {
    flex: none;
    width: 190px;
    height: auto;
    border-radius: 18px;
    border: 1px solid var(--line-2);
    box-shadow: 0 20px 50px -26px rgba(0,0,0,0.9);
}
@media (max-width: 720px) {
    .post-shots { gap: 12px; justify-content: flex-start; }
    .post-shots img { width: 150px; }
}

/* About reads as one column now that it carries no stat tiles. */
.about-single { max-width: 680px; }

/* Each mark is its own download, so the card is a link. */
a.asset { display: block; text-decoration: none; color: inherit; }

/* The press page runs a narrower column than the site default so the
   fact tables stay readable. Every block on it shares this width —
   a section left on the default --shell reads as misaligned. */
.container.press-col, .page.press-col { max-width: 900px; }