/*
 * Braintide - landing page only
 *
 * Loaded by index.html on top of braintide.css; the legal and support pages
 * never load it. Surfaces here are translucent on purpose (BRANDING.md sec.3.1):
 * the ambient orbs paint behind everything and cards let a hint of that colour
 * through, which is where the depth comes from. Domain accents are used for
 * dots, icons and borders only - at 14px on the night ground several sit under
 * 4.5:1, so none of them is ever text colour.
 */
:root {
    --bt-glass: rgba(255, 255, 255, 0.045);
    --bt-glass-raised: rgba(255, 255, 255, 0.07);
    --bt-glass-border: rgba(255, 255, 255, 0.09);
    --bt-neuro-green: #34E39B;
    --bt-coral: #FB6F92;

    --dom-memory: #7B61FF;
    --dom-attention: #4F9BFF;
    --dom-speed: #3BE7F0;
    --dom-logic: #34E39B;
    --dom-language: #FFB259;
    --dom-flex: #FB6F92;
    --dom-numeracy: #F0B23B;
    --dom-spatial: #5FD3B5;
    --dom-coord: #FF8A5B;
    --dom-listening: #9D7BFF;
}

.bt-landing { position: relative; overflow: hidden; }
.bt-landing section { position: relative; }
.bt-landing h2 { margin-top: 0; letter-spacing: -0.02em; }

.bt-landing .bt-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 13px;
    font-weight: 600;
    color: var(--bt-lavender-dim);
    margin: 0 0 12px;
}

.bt-section { padding: 96px 0; }
@media (max-width: 720px) { .bt-section { padding: 64px 0; } }

.bt-section-head { max-width: 680px; margin-bottom: 48px; }
.bt-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.bt-section-head p { color: var(--bt-text-secondary); font-size: clamp(17px, 1.6vw, 19px); margin: 0; }

/* Ambient orbs: blurred gradients, not images, so they cost nothing. */
.bt-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: 0.55;
}
.bt-orb--violet { background: rgba(123, 97, 255, 0.45); }
.bt-orb--blue { background: rgba(79, 123, 255, 0.35); }
.bt-orb--cyan { background: rgba(59, 231, 240, 0.22); }

/* Top bar */
.bt-topbar--landing {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(12, 10, 22, 0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.bt-nav .bt-nav-cta {
    color: var(--bt-night);
    background: var(--bt-lavender);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
}
.bt-nav .bt-nav-cta:hover, .bt-nav .bt-nav-cta:focus { background: var(--bt-lavender-dim); color: var(--bt-night); }
/* On a phone the bar wraps to three rows; pinned, that is 40% of the screen.
   The hero carries the same CTA, so the bar goes static and the pill goes. */
@media (max-width: 720px) {
    .bt-topbar--landing { position: static; }
    .bt-nav .bt-nav-cta { display: none; }
}

/* Device frame. Padding is the bezel; the island pill sits in the status bar's
   empty centre, which the repainted iOS captures leave clear. */
.bt-phone {
    position: relative;
    width: 100%;
    border-radius: 11% / 5.1%;
    padding: 1.9%;
    background: linear-gradient(160deg, #1d1b33, #0c0b16);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.bt-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 9.6% / 4.4%;
    background: var(--bt-night-surface);
}
.bt-phone::after {
    content: "";
    position: absolute;
    top: 4.2%;
    left: 50%;
    width: 27%;
    height: 2.9%;
    transform: translateX(-50%);
    background: #000;
    border-radius: 999px;
}

/* Hero */
.bt-hero-landing { padding: 72px 0 40px; }
.bt-hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) {
    .bt-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; min-height: 640px; }
}
.bt-hero-landing h1 {
    font-size: clamp(42px, 6.4vw, 84px);
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin-bottom: 24px;
}
.bt-hero-landing h1 .bt-accent {
    background: linear-gradient(90deg, #9A85FF, #4F9BFF 55%, #3BE7F0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bt-hero-landing .bt-lede { font-size: clamp(18px, 2vw, 21px); color: var(--bt-text-secondary); max-width: 560px; margin: 0; }
.bt-hero-landing .bt-hero-cta { margin-top: 32px; }
.bt-hero-landing .bt-hero-meta { margin-top: 20px; font-size: 15px; color: var(--bt-text-muted); }
.bt-hero-meta span + span::before { content: "\00b7"; margin: 0 10px; }

/* Two-phone composition, sized off its column so it never overflows. */
.bt-hero-devices { position: relative; aspect-ratio: 1 / 1.05; max-width: 560px; margin: 0 auto; width: 100%; }
.bt-hero-devices .bt-phone { position: absolute; width: 54%; }
.bt-hero-devices .bt-phone--front { left: 30%; top: 4%; z-index: 2; transform: rotate(-3deg); }
.bt-hero-devices .bt-phone--back { left: 2%; top: 16%; width: 46%; z-index: 1; transform: rotate(6deg); opacity: 0.92; }
.bt-hero-devices .bt-orb { width: 70%; height: 70%; left: 15%; top: 15%; }
@media (max-width: 600px) {
    .bt-hero-devices { aspect-ratio: auto; max-width: 320px; }
    .bt-hero-devices .bt-phone { position: relative; width: 82%; margin: 0 auto; left: auto; top: auto; }
    .bt-hero-devices .bt-phone--front { transform: none; }
    .bt-hero-devices .bt-phone--back { display: none; }
}

/* Stat strip */
.bt-stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--bt-glass-border);
    border: 1px solid var(--bt-glass-border);
    border-radius: 20px;
    overflow: hidden;
    margin: 24px 0 0;
    padding: 0;
}
@media (min-width: 720px) { .bt-stats { grid-template-columns: repeat(5, 1fr); } }
.bt-stat { margin: 0; background: var(--bt-night-surface); padding: 24px 20px; text-align: center; }
.bt-stat strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 700;
    color: var(--bt-cream);
    letter-spacing: -0.02em;
    line-height: 1;
}
.bt-stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--bt-text-muted); }

/* Feature rows: text one side, device the other, alternating */
.bt-feature { display: grid; gap: 40px; align-items: center; padding: 56px 0; }
@media (min-width: 900px) {
    .bt-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; padding: 72px 0; }
    .bt-feature--flip .bt-feature-text { order: 2; }
    .bt-feature--flip .bt-feature-media { order: 1; }
}
.bt-feature h3 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 0; letter-spacing: -0.02em; }
.bt-feature p { color: var(--bt-text-secondary); font-size: clamp(16px, 1.5vw, 18px); }
.bt-feature p:last-child { margin-bottom: 0; }
.bt-feature ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.bt-feature li { position: relative; padding-left: 30px; color: var(--bt-text-secondary); margin: 0; }
.bt-feature li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--bt-moon), var(--bt-lavender));
    box-shadow: 0 0 12px rgba(59, 231, 240, 0.4);
}
.bt-feature-media { position: relative; display: flex; justify-content: center; }
.bt-feature-media .bt-orb { width: 80%; height: 80%; left: 10%; top: 10%; }
.bt-feature-media .bt-phone { width: min(100%, 300px); z-index: 1; }
.bt-feature-media--pair .bt-phone { width: 46%; }
.bt-feature-media--pair .bt-phone + .bt-phone { margin-left: 4%; margin-top: 12%; }

/* A pull-quote taken from the app's own copy */
.bt-quote {
    margin: 24px 0 0;
    padding: 18px 22px;
    border-left: 3px solid var(--bt-moon);
    background: var(--bt-glass);
    border-radius: 0 14px 14px 0;
    color: var(--bt-cream);
    font-size: 17px;
}
.bt-quote p { color: var(--bt-cream); margin: 0; font-size: 17px; }
.bt-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--bt-text-muted); }

/* Skills grid */
.bt-skills { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .bt-skills { grid-template-columns: repeat(5, 1fr); } }
.bt-skill {
    --dom: var(--bt-lavender);
    position: relative;
    margin: 0;
    padding: 20px 18px 18px;
    border-radius: 18px;
    background: var(--bt-glass);
    border: 1px solid var(--bt-glass-border);
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.bt-skill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
    pointer-events: none;
}
.bt-skill:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--dom) 60%, transparent); }
.bt-skill-dot {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--dom) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dom) 45%, transparent);
    margin-bottom: 14px;
}
.bt-skill-dot svg { width: 20px; height: 20px; stroke: var(--dom); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bt-skill strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 17px; color: var(--bt-cream); }
.bt-skill-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--bt-text-muted); }

/* Game gallery: a scroll-snapping strip that bleeds to the shell's edges */
.bt-gallery {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 240px);
    gap: 20px;
    overflow-x: auto;
    padding: 8px 24px 24px;
    margin: 0 -24px;
    scroll-snap-type: x mandatory;
    scroll-padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--bt-night-raised) transparent;
}
@media (min-width: 720px) { .bt-gallery { padding: 8px 48px 24px; margin: 0 -48px; scroll-padding: 48px; } }
@media (min-width: 1024px) { .bt-gallery { padding: 8px 80px 24px; margin: 0 -80px; scroll-padding: 80px; } }
.bt-game { --dom: var(--bt-lavender); margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; }
.bt-game .bt-phone {
    padding: 1.6%;
    border-radius: 10% / 4.6%;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.bt-game .bt-phone::after { display: none; }
.bt-game-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bt-text-muted);
}
.bt-game-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dom); box-shadow: 0 0 10px var(--dom); }
.bt-game strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 18px; color: var(--bt-cream); }
.bt-game-how { display: block; font-size: 14px; color: var(--bt-text-secondary); margin-top: 2px; }
.bt-gallery-hint { text-align: center; font-size: 14px; color: var(--bt-text-muted); margin: 0; }

/* Ways to answer */
.bt-ways { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.bt-ways li {
    margin: 0;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--bt-glass-border);
    background: var(--bt-glass);
    font-size: 14px;
    font-weight: 500;
    color: var(--bt-cream);
}
.bt-ways li.bt-ways--voice { border-color: rgba(157, 123, 255, 0.5); background: rgba(157, 123, 255, 0.12); }

/* Honesty band */
.bt-band {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(123, 97, 255, 0.16), transparent),
        var(--bt-night-surface);
    border-top: 1px solid var(--bt-border);
    border-bottom: 1px solid var(--bt-border);
}
.bt-nots { display: grid; gap: 16px; margin-top: 28px; }
.bt-not { padding: 22px 24px; border-radius: 18px; background: var(--bt-glass); border: 1px solid var(--bt-glass-border); display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.bt-not-x {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(251, 111, 146, 0.14);
    box-shadow: inset 0 0 0 1px rgba(251, 111, 146, 0.4);
    color: var(--bt-coral);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
}
.bt-not h3 { font-size: 19px; margin: 0 0 4px; }
.bt-not p { color: var(--bt-text-secondary); margin: 0; font-size: 15px; }

/* Fit cards */
.bt-fit { display: grid; gap: 20px; }
@media (min-width: 720px) { .bt-fit { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bt-fit { grid-template-columns: repeat(4, 1fr); } }
.bt-fit-card { padding: 26px 24px; border-radius: 20px; background: var(--bt-glass); border: 1px solid var(--bt-glass-border); }
.bt-fit-card h3 { font-size: 20px; margin: 0 0 8px; }
.bt-fit-card p { color: var(--bt-text-secondary); margin: 0; font-size: 15px; }
.bt-langs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.bt-langs li { margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(123, 97, 255, 0.16); color: var(--bt-cream); font-size: 13px; }

/* Pricing */
.bt-plans { display: grid; gap: 24px; max-width: 880px; margin: 0 auto; }
@media (min-width: 720px) { .bt-plans { grid-template-columns: 1fr 1fr; } }
.bt-plan {
    position: relative;
    padding: 32px 30px;
    border-radius: 24px;
    background: var(--bt-glass);
    border: 1px solid var(--bt-glass-border);
    display: flex;
    flex-direction: column;
}
.bt-plan--pro {
    border-color: rgba(123, 97, 255, 0.55);
    background: linear-gradient(180deg, rgba(123, 97, 255, 0.14), rgba(123, 97, 255, 0.02)), var(--bt-glass);
    box-shadow: 0 30px 60px -30px rgba(123, 97, 255, 0.5);
}
.bt-plan-badge {
    position: absolute;
    top: -13px;
    right: 24px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bt-moon);
    color: var(--bt-night);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bt-plan h3 { margin: 0; font-size: 24px; }
.bt-plan-price {
    margin: 14px 0 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--bt-cream);
    letter-spacing: -0.02em;
    line-height: 1;
}
.bt-plan-price small { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; color: var(--bt-text-muted); letter-spacing: 0; }
.bt-plan-sub { color: var(--bt-text-muted); font-size: 14px; margin: 0 0 20px; }
.bt-plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; flex: 1; }
.bt-plan li { margin: 0; padding-left: 28px; position: relative; color: var(--bt-text-secondary); font-size: 16px; }
.bt-plan li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(52, 227, 155, 0.18);
    box-shadow: inset 0 0 0 1px rgba(52, 227, 155, 0.6);
}
.bt-plan li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: calc(0.42em + 4px);
    width: 6px;
    height: 3px;
    border-left: 2px solid var(--bt-neuro-green);
    border-bottom: 2px solid var(--bt-neuro-green);
    transform: rotate(-45deg);
}
.bt-plan-note { font-size: 13px; color: var(--bt-text-muted); margin: 0; }

/* FAQ */
.bt-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.bt-faq details { border-radius: 16px; background: var(--bt-glass); border: 1px solid var(--bt-glass-border); padding: 0 22px; }
.bt-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 32px 18px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--bt-cream);
    position: relative;
}
.bt-faq summary::-webkit-details-marker { display: none; }
.bt-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 500;
    color: var(--bt-lavender-dim);
    transition: transform 0.2s ease;
}
.bt-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.bt-faq details p { margin: 0 0 20px; color: var(--bt-text-secondary); font-size: 16px; }

/* Closing CTA */
.bt-final { text-align: center; padding: 96px 0 80px; }
.bt-final .bt-shell { position: relative; }
.bt-final .bt-orb { width: 60%; height: 60%; left: 20%; top: 20%; }
.bt-final h2 { font-size: clamp(32px, 5vw, 56px); }
.bt-final .bt-lede { color: var(--bt-text-secondary); max-width: 560px; margin: 0 auto; font-size: clamp(17px, 1.8vw, 20px); }
.bt-final .bt-stores { justify-content: center; margin-top: 32px; }
.bt-final .bt-disclaimer { margin-top: 40px; }

/* Scroll reveal. Only hides content once the reveal script has run (html.js),
   so a blocked script costs nothing. */
html.js .bt-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .bt-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html.js .bt-reveal { opacity: 1; transform: none; transition: none; }
    .bt-skill, .bt-faq summary::after { transition: none; }
    .bt-skill:hover { transform: none; }
}