/*
 * SEVEN — marketing site. Same identity as the app: navy (#1e2a6b), ink
 * outlines, pastel tones, hand-drawn cards; Nunito / IBM Plex Sans Arabic.
 * Logical properties only (the Arabic page is right-to-left).
 * Scroll scenes: site.js writes --p (0 → 1) on every [data-scene].
 */
:root {
    --navy: #1e2a6b;
    --navy-700: #2c3c83;
    --navy-900: #131b48;
    --navy-950: #0b1030;
    --gold: #b0925e;
    --lavender: #e9e7f6; /* the logo's colours */
    --lavender-shadow: #9b93c9;
    --ink: #1c1c1e;
    --text: #2e3440;
    --muted: #5d6880;
    --page: #f4f6fa;
    --surface: #ffffff;
    --line: #dde2e9;
    --tone-navy: #e9ecf6;
    --tone-violet: #f1e9f6;
    --tone-mint: #e3f4ed;
    --tone-sun: #fdf2d8;
    --tone-coral: #fde7e1;
    --tone-sky: #e4effa;
    --tone-rose: #fbe8f1;
    --acc-navy: #c3cae6;
    --acc-violet: #d9c6e4;
    --acc-mint: #bfe6d6;
    --acc-sun: #f8dc9b;
    --acc-coral: #f6c2b4;
    --acc-sky: #c3dcf4;
    --acc-rose: #f2c6dc;
    --good: #1a8a5a;
    --bad: #c2412d;
    --radius: 28px 22px 30px 20px / 22px 30px 20px 28px;
    --radius-sm: 18px 14px 20px 13px / 14px 20px 13px 18px;
    --dir: 1;
    --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wrap: min(1180px, 100% - 2.5rem);
    color-scheme: light;
}
[dir='rtl'] {
    --dir: -1;
    --font: 'IBM Plex Sans Arabic', 'Nunito', system-ui, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img,
svg {
    display: block;
    max-width: 100%;
}
a {
    color: inherit;
}
h1,
h2,
h3 {
    color: var(--ink);
    line-height: 1.12;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.02em;
}
[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3 {
    letter-spacing: 0;
    line-height: 1.3;
}
p {
    margin: 0;
}
.wrap {
    width: var(--wrap);
    margin-inline: auto;
}
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}
.skip {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -4rem;
    z-index: 100;
    background: var(--navy);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 12px;
}
.skip:focus {
    inset-block-start: 1rem;
}
:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

/* ---------- Buttons ----------
 * Drawn like the logo and the cards: ink outline, uneven corners, solid offset
 * shadow; lift on hover, press flat on click. Primary = the logo's lavender. */
.btn {
    --btn-shadow: var(--lavender-shadow);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    font: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 2px solid var(--ink);
    cursor: pointer;
    box-shadow: calc(4px * var(--dir)) 4px 0 0 var(--btn-shadow);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}
.btn:hover {
    transform: translate(calc(-2px * var(--dir)), -2px);
    box-shadow: calc(6px * var(--dir)) 6px 0 0 var(--btn-shadow);
}
.btn:active {
    transform: translate(calc(2px * var(--dir)), 2px);
    box-shadow: calc(1px * var(--dir)) 1px 0 0 var(--btn-shadow);
}
.btn-primary {
    background: var(--lavender);
    color: var(--ink);
}
.btn-ghost {
    --btn-shadow: var(--acc-navy);
    background: var(--surface);
    color: var(--ink);
}
.btn-ghost:hover {
    background: var(--tone-navy);
}
.btn .arrow {
    transform: scaleX(var(--dir));
}
.btn-light {
    background: var(--lavender);
    color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .btn:active {
        transform: none;
    }
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--page) 94%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-block-end: 2px solid transparent;
    transition: border-color 0.2s;
}
.site-header.scrolled {
    border-block-end-color: var(--ink);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    block-size: 4.25rem;
}
.logo {
    color: var(--navy);
    display: inline-flex;
    flex-shrink: 0;
}
.logo svg {
    block-size: 26px;
    inline-size: auto;
}
.nav {
    display: flex;
    gap: 1.6rem;
    margin-inline-start: auto;
    font-weight: 700;
    font-size: 0.98rem;
}
.nav a {
    text-decoration: none;
    color: var(--muted);
}
.nav a:hover {
    color: var(--navy);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.lang {
    font-weight: 700;
    text-decoration: none;
    color: var(--navy);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1.6px solid transparent;
}
.lang:hover {
    border-color: var(--ink);
    background: var(--tone-navy);
}
.header-actions .btn {
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
}
@media (max-width: 860px) {
    .nav {
        display: none;
    }
    .header-actions {
        margin-inline-start: auto;
    }
}
@media (max-width: 420px) {
    .header-actions .signin {
        display: none;
    }
}

/* ---------- Scenes (pinned scroll) ---------- */
.scene {
    position: relative;
    --p: 0;
}
.sticky {
    position: sticky;
    inset-block-start: 0;
    block-size: 100vh;
    block-size: 100svh;
    overflow: hidden;
}

/* ---------- Hero ---------- */
.hero {
    block-size: 175vh;
}
.hero .sticky {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block-start: clamp(2.5rem, 7vh, 5rem);
    text-align: center;
}
.hero-glow {
    position: absolute;
    inset: -20% -10% auto;
    block-size: 80%;
    background:
        radial-gradient(40% 50% at 20% 30%, var(--tone-sky), transparent 70%),
        radial-gradient(35% 45% at 80% 25%, var(--tone-rose), transparent 70%),
        radial-gradient(40% 50% at 50% 70%, var(--tone-sun), transparent 70%);
    opacity: 0.9;
    pointer-events: none;
}
.hero-copy {
    position: relative;
    max-inline-size: 52rem;
    padding-inline: 1.25rem;
    transform: translateY(calc(var(--p) * -6vh)) scale(calc(1 - var(--p) * 0.08));
    opacity: calc(1 - max(0, var(--p) - 0.45) * 2.4);
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--navy);
    background: var(--surface);
    border: 1.6px solid var(--ink);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    box-shadow: calc(3px * var(--dir)) 3px 0 0 var(--acc-sun);
}
.eyebrow .seven {
    display: inline-grid;
    place-items: center;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border-radius: 7px;
    background: var(--navy);
    color: #fff;
    font-size: 0.8rem;
}
.hero h1 {
    margin-block: 1.2rem 1rem;
    font-size: clamp(2.6rem, 7vw, 5.4rem);
}
.hero h1 .accent {
    color: var(--navy);
    background: linear-gradient(transparent 62%, var(--acc-sun) 62%, var(--acc-sun) 90%, transparent 90%);
    padding-inline: 0.1em;
}
.hero .lead {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--muted);
    max-inline-size: 40rem;
    margin-inline: auto;
}
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin-block: 1.8rem 0.8rem;
}
.hero-note {
    font-size: 0.95rem;
    color: var(--muted);
    font-weight: 700;
}
.laptop {
    position: relative;
    margin-block-start: clamp(1.5rem, 4vh, 3rem);
    inline-size: min(1040px, 92vw);
    perspective: 1800px;
}
.laptop-tilt {
    transform-origin: 50% 100%;
    transform: rotateX(calc((1 - var(--p)) * 26deg)) scale(calc(0.9 + var(--p) * 0.12)) translateY(calc(var(--p) * -30vh));
    will-change: transform;
}
.laptop-screen {
    background: #0f1222;
    padding: 1.1% 1.1% 1.6%;
    border-radius: 22px 22px 6px 6px;
    border: 2px solid var(--ink);
    box-shadow: 0 40px 80px -40px rgba(19, 27, 72, 0.55);
}
.laptop-screen img {
    border-radius: 10px 10px 2px 2px;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
}
.laptop-base {
    block-size: 14px;
    margin-inline: -5%;
    background: linear-gradient(#d6dbe5, #aeb6c6);
    border: 2px solid var(--ink);
    border-radius: 0 0 22px 22px;
}

/* ---------- Statement (words light up) ---------- */
.statement {
    block-size: 240vh;
    background: var(--navy-950);
}
.statement .sticky {
    display: grid;
    place-items: center;
}
.statement p {
    inline-size: var(--wrap);
    max-inline-size: 60rem;
    font-size: clamp(1.8rem, 4.3vw, 3.4rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.16);
}
[dir='rtl'] .statement p {
    line-height: 1.55;
    letter-spacing: 0;
}
.statement .w {
    transition: color 0.25s;
}
.statement .w.lit {
    color: #fff;
}
.statement .w.gold.lit {
    color: var(--acc-sun);
}

/* ---------- Numbers ---------- */
.numbers {
    background: var(--navy-950);
    color: #fff;
    padding-block: 0 clamp(4rem, 10vh, 7rem);
}
.numbers ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-inline: auto;
}
.numbers li {
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    box-shadow: calc(5px * var(--dir)) 5px 0 0 var(--navy-700);
}
.numbers .n {
    display: block;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--acc-sun);
}
.numbers .l {
    display: block;
    margin-block-start: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
}
@media (max-width: 760px) {
    .numbers ul {
        grid-template-columns: 1fr 1fr;
    }
    .numbers li {
        padding: 1.1rem;
    }
}

/* ---------- Section headings ---------- */
.section {
    padding-block: clamp(5rem, 12vh, 8rem);
}
.kicker {
    display: inline-block;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-block-end: 0.8rem;
}
[dir='rtl'] .kicker {
    text-transform: none;
    letter-spacing: 0;
}
.h2 {
    font-size: clamp(2rem, 4.6vw, 3.6rem);
}
.sub {
    margin-block-start: 1rem;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--muted);
    max-inline-size: 42rem;
}
.center {
    text-align: center;
}
.center .sub {
    margin-inline: auto;
}

/* ---------- Hand-drawn card ---------- */
.sketch {
    background: var(--surface);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: calc(6px * var(--dir)) 6px 0 0 var(--accent, var(--acc-navy));
}

/* ---------- Interactive lesson scene ---------- */
.lesson {
    block-size: 420vh;
}
.lesson .sticky {
    display: grid;
    align-items: center;
}
.lesson-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.steps {
    position: relative;
    min-block-size: 22rem;
}
.step {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
    pointer-events: none;
}
.step.on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.step .num {
    display: inline-grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border: 2px solid var(--ink);
    border-radius: 12px 9px 13px 8px;
    background: var(--tone-sun);
    font-weight: 800;
    margin-block-end: 1rem;
}
.step h3 {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}
.step p {
    margin-block-start: 0.9rem;
    font-size: 1.15rem;
    color: var(--muted);
}
.dots {
    display: flex;
    gap: 0.5rem;
    margin-block-start: 1.5rem;
}
.dots i {
    inline-size: 2.2rem;
    block-size: 0.35rem;
    border-radius: 999px;
    background: var(--line);
    transition: background 0.3s;
}
.dots i.on {
    background: var(--navy);
}
.demo {
    --accent: var(--acc-sky);
    padding: clamp(1.1rem, 2.2vw, 1.75rem);
}
.demo-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-end: 0.4rem;
}
.tag {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--navy);
    background: var(--tone-sky);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
[dir='rtl'] .tag {
    text-transform: none;
    letter-spacing: 0;
}
.demo-title {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ink);
}
.demo-hint {
    font-size: 0.92rem;
    color: var(--muted);
}
.demo-body {
    font-size: 1.02rem;
    margin-block: 0.6rem 0.8rem;
}
.demo svg {
    inline-size: 100%;
    block-size: auto;
    direction: ltr;
}
.demo .axis {
    stroke: #8a94a6;
    stroke-width: 1.5;
}
.demo .grid {
    stroke: #ebeef2;
    stroke-width: 1;
}
.demo .tick {
    font: 600 12px var(--font);
    fill: #6b7991;
}
.demo .line-a {
    stroke: #2a78d6;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
}
.demo .line-b {
    stroke: #eb6834;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 7 6;
}
.control {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.3rem 1rem;
    margin-block: 0.75rem;
    font-weight: 700;
}
.control output {
    font-weight: 800;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.control input {
    grid-column: 1 / -1;
    inline-size: 100%;
    accent-color: var(--navy);
}
.readout {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.readout div {
    flex: 1;
    min-inline-size: 9rem;
    background: var(--page);
    border-radius: 14px;
    padding: 0.55rem 0.8rem;
}
.readout small {
    display: block;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.82rem;
}
.readout b {
    font-size: 1.2rem;
    color: var(--ink);
}
.demo-part {
    display: none;
}
.lesson[data-step='1'] .part-1,
.lesson[data-step='2'] .part-2,
.lesson[data-step='3'] .part-3 {
    display: block;
}
.part-1 .formula {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-block: 1rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink);
}
.frac {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
}
.frac > span:first-child {
    border-block-end: 2px solid var(--ink);
    padding-inline: 0.3rem;
}
.lang-pill {
    display: inline-flex;
    border: 1.6px solid var(--ink);
    border-radius: 999px;
    overflow: hidden;
    font-weight: 800;
    font-size: 0.9rem;
}
.lang-pill button {
    font: inherit;
    border: 0;
    background: transparent;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    color: var(--muted);
}
.lang-pill button[aria-pressed='true'] {
    background: var(--navy);
    color: #fff;
}
.bi {
    transition: opacity 0.3s;
}
.choices {
    display: grid;
    gap: 0.6rem;
    margin-block-start: 0.9rem;
}
.choice {
    font: inherit;
    font-weight: 700;
    text-align: start;
    padding: 0.75rem 1rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.choice .sw {
    inline-size: 1.6rem;
    block-size: 0.3rem;
    border-radius: 2px;
}
.choice.ok {
    background: #e3f4ed;
    border-color: var(--good);
}
.choice.bad {
    background: #fde7e1;
    border-color: var(--bad);
}
.feedback {
    margin-block-start: 0.8rem;
    font-weight: 700;
    min-block-size: 1.6em;
}
.feedback.ok {
    color: var(--good);
}
.feedback.bad {
    color: var(--bad);
}
@media (max-width: 900px) {
    .lesson {
        block-size: 460vh;
    }
    .lesson .sticky {
        align-items: start;
        padding-block-start: 4.75rem;
    }
    .lesson-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .steps {
        order: 2;
        min-block-size: 10.5rem;
    }
    .step h3 {
        font-size: 1.45rem;
    }
    .step p {
        font-size: 1rem;
        margin-block-start: 0.4rem;
    }
    .step .num {
        display: none;
    }
    .demo {
        padding: 0.9rem;
    }
    .demo-hint {
        display: none;
    }
}

/* ---------- Flashcards scene ---------- */
.cards-scene {
    block-size: 340vh;
    background: var(--tone-navy);
}
.cards-scene .sticky {
    display: grid;
    align-items: center;
}
.cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.levels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1.4rem;
}
.levels span {
    font-weight: 800;
    font-size: 0.92rem;
    border: 1.6px solid var(--ink);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    background: var(--surface);
}
.levels span:nth-child(2) {
    background: var(--navy);
    color: #fff;
}
.deck {
    position: relative;
    block-size: clamp(18rem, 48vh, 24rem);
    perspective: 1400px;
}
.fcard {
    --flip: 0;
    --fly: 0;
    position: absolute;
    inset: 0;
    cursor: pointer;
    transform: translateX(calc(var(--fly) * 120% * var(--dir))) rotate(calc(var(--tilt, 0deg) + var(--fly) * 18deg * var(--dir)));
    opacity: calc(1 - var(--fly));
    z-index: var(--z);
}
.fcard-inner {
    position: relative;
    block-size: 100%;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--flip) * 180deg));
}
.fcard.flipped .fcard-inner {
    transform: rotateY(180deg);
}
.fface {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 1.75rem;
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--tint);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: calc(7px * var(--dir)) 7px 0 0 var(--acc);
}
.fback {
    transform: rotateY(180deg);
}
.fword {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--ink);
}
.fhint {
    color: var(--muted);
    font-weight: 700;
}
.fdef {
    font-weight: 700;
    color: var(--text);
}
.far {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
}
.fdef-ar {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    color: var(--muted);
}
@media (max-width: 900px) {
    .cards-scene .sticky {
        align-items: start;
        padding-block-start: 5rem;
    }
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .cards-copy .sub {
        font-size: 1rem;
    }
    .deck {
        block-size: 17rem;
    }
}

/* ---------- Quizzes ---------- */
.quiz-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.result {
    --accent: var(--acc-mint);
    padding: 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.75rem;
    align-items: center;
}
.ring {
    inline-size: 9rem;
    block-size: 9rem;
    position: relative;
}
.ring svg {
    inline-size: 100%;
    block-size: 100%;
    transform: rotate(-90deg);
}
.ring circle {
    fill: none;
    stroke-width: 10;
}
.ring .bg {
    stroke: var(--line);
}
.ring .fg {
    stroke: var(--navy);
    stroke-linecap: round;
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.in .ring .fg {
    stroke-dashoffset: calc(327 * (1 - 0.85));
}
.ring b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--ink);
}
.rating {
    display: inline-block;
    font-weight: 800;
    background: var(--tone-mint);
    border: 1.6px solid var(--ink);
    border-radius: 999px;
    padding: 0.15rem 0.8rem;
    margin-block-end: 0.75rem;
}
.bars {
    display: grid;
    gap: 0.8rem;
}
.bar-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr 3rem;
    gap: 0.75rem;
    align-items: center;
    font-weight: 700;
    font-size: 0.95rem;
}
.bar-row .bar-track {
    block-size: 0.55rem;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.bar-row .fill {
    display: block;
    block-size: 100%;
    inline-size: 0;
    border-radius: 999px;
    background: var(--navy);
    transition: inline-size 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}
.in .bar-row .fill {
    inline-size: var(--v);
}
.bar-row span:last-child {
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.checks {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: grid;
    gap: 0.75rem;
}
.checks li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-weight: 600;
}
.checks svg {
    flex-shrink: 0;
    margin-block-start: 0.25rem;
}
@media (max-width: 900px) {
    .quiz-grid {
        grid-template-columns: 1fr;
    }
    .result {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .bars {
        inline-size: 100%;
        text-align: start;
    }
}

/* ---------- Phones (parallax) ---------- */
.phones-section {
    overflow: hidden;
    background: linear-gradient(var(--page), var(--tone-sky));
}
.phones {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    margin-block-start: 3.5rem;
}
.phone {
    inline-size: clamp(200px, 26vw, 290px);
    background: #0f1222;
    border: 2px solid var(--ink);
    border-radius: 44px;
    padding: 10px;
    box-shadow: calc(8px * var(--dir)) 8px 0 0 var(--acc-navy);
}
.phone img {
    border-radius: 34px;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 390 / 844;
    object-fit: cover;
    object-position: top;
}
.phone:nth-child(1) {
    transform: translateY(calc((0.5 - var(--p)) * 14vh)) rotate(calc(-4deg * var(--dir)));
}
.phone:nth-child(2) {
    transform: translateY(calc((var(--p) - 0.5) * 14vh)) rotate(calc(3deg * var(--dir)));
}

/* ---------- Bento ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    margin-block-start: 3rem;
}
.tile {
    grid-column: span 2;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--tint, var(--surface));
}
.tile.wide {
    grid-column: span 3;
}
.tile.big {
    grid-column: span 4;
}
.tile h3 {
    font-size: 1.3rem;
}
.tile p {
    color: var(--muted);
}
.tile .icon {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--surface);
    border: 1.6px solid var(--ink);
}
@media (max-width: 960px) {
    .bento {
        grid-template-columns: 1fr 1fr;
    }
    .tile,
    .tile.wide,
    .tile.big {
        grid-column: span 1;
    }
}
@media (max-width: 600px) {
    .bento {
        grid-template-columns: 1fr;
    }
}

/* ---------- Courses (horizontal) ---------- */
.courses {
    --dist: 0px;
    background: var(--navy-950);
    color: #fff;
}
.courses .sticky {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
}
.courses .h2,
.courses .kicker {
    color: #fff;
}
.courses .sub {
    color: rgba(255, 255, 255, 0.75);
}
.track {
    display: flex;
    gap: 1.5rem;
    padding-inline: max(1.25rem, (100vw - 1180px) / 2);
    transform: translateX(calc(var(--p) * var(--dist) * -1 * var(--dir)));
    will-change: transform;
}
.course {
    flex: 0 0 min(30rem, 84vw);
    color: var(--text);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    --accent: var(--gold);
}
.course-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.course h3 {
    font-size: 1.5rem;
}
.course .chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.course .chips span {
    font-size: 0.82rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    background: var(--tone-navy);
    color: var(--navy);
}
.course ol {
    margin: 0;
    padding-inline-start: 1.4rem;
    columns: 2;
    column-gap: 1.5rem;
    font-size: 0.93rem;
    font-weight: 600;
}
.course li {
    break-inside: avoid;
    padding-block: 0.1rem;
}
.course li.soon {
    color: var(--muted);
    font-weight: 500;
}
.course .counts {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted);
}
.course .counts b {
    color: var(--ink);
}
.course-foot {
    margin-block-start: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--line);
}
.price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink);
}
.price small {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 700;
}
.course.next {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.85);
    border-style: dashed;
    box-shadow: none;
    justify-content: center;
}
.course.next h3 {
    color: #fff;
}
.course.next p {
    color: rgba(255, 255, 255, 0.75);
}
.scroll-hint {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

/* ---------- Steps / pricing ---------- */
.how {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-block-start: 3rem;
    counter-reset: how;
}
.how li {
    list-style: none;
    padding: 1.75rem;
}
.how li::before {
    counter-increment: how;
    content: counter(how);
    display: inline-grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: 12px 9px 13px 8px;
    border: 2px solid var(--ink);
    background: var(--tone-sun);
    font-weight: 800;
    margin-block-end: 1rem;
}
.how ol {
    padding: 0;
}
.how h3 {
    font-size: 1.3rem;
    margin-block-end: 0.5rem;
}
.how p {
    color: var(--muted);
}
@media (max-width: 860px) {
    .how {
        grid-template-columns: 1fr;
    }
}
.plan {
    --accent: var(--acc-sun);
    max-inline-size: 44rem;
    margin: 3rem auto 0;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.plan .big {
    font-size: clamp(2.8rem, 6vw, 4rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}
.plan .per {
    color: var(--muted);
    font-weight: 700;
    margin-block: 0.4rem 1.4rem;
}
@media (max-width: 700px) {
    .plan {
        grid-template-columns: 1fr;
    }
}

/* ---------- FAQ ---------- */
.faq {
    max-inline-size: 52rem;
    margin: 3rem auto 0;
    display: grid;
    gap: 1rem;
}
.faq details {
    padding: 0;
    --accent: var(--acc-navy);
}
.faq summary {
    cursor: pointer;
    list-style: none;
    padding: 1.2rem 1.5rem;
    font-weight: 800;
    font-size: 1.12rem;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary::after {
    content: '+';
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s;
}
.faq details[open] summary::after {
    transform: rotate(45deg);
}
.faq .answer {
    padding: 0 1.5rem 1.4rem;
    color: var(--muted);
}

/* ---------- Final CTA ---------- */
.final {
    background: var(--navy);
    color: #fff;
    text-align: center;
    padding-block: clamp(5rem, 14vh, 9rem);
    position: relative;
    overflow: hidden;
}
.final .big-seven {
    position: absolute;
    inset-inline-end: -4vw;
    inset-block-end: -8vw;
    font-size: 42vw;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    font-family: 'Nunito', sans-serif;
}
.final h2 {
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 5.5rem);
}
.final p {
    margin: 1rem auto 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    max-inline-size: 36rem;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--navy-950);
    color: rgba(255, 255, 255, 0.75);
    padding-block: 3.5rem 2.5rem;
    font-size: 0.95rem;
}
.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
}
.site-footer .logo {
    color: #fff;
    margin-block-end: 0.9rem;
}
.site-footer h2 {
    color: #fff;
    font-size: 1rem;
    margin-block-end: 0.8rem;
}
.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}
.site-footer a {
    text-decoration: none;
}
.site-footer a:hover {
    color: #fff;
}
.legal {
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    display: grid;
    gap: 0.4rem;
}
@media (max-width: 760px) {
    .foot-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(2.2rem);
    transition:
        opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].in {
    opacity: 1;
    transform: none;
}

/* ---------- Less motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .hero-copy,
    .laptop-tilt,
    .phone:nth-child(1),
    .phone:nth-child(2) {
        transform: none !important;
        opacity: 1 !important;
    }
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .fcard {
        transition: none;
    }
    .ring .fg,
    .bar-row .fill,
    .step {
        transition: none;
    }
}

/* Phones: courses stack instead of sliding sideways (a card is taller than the screen) */
@media (max-width: 760px) {
    .courses .sticky {
        position: relative;
        block-size: auto;
        overflow: visible;
        padding-block: 4.5rem 3rem;
    }
    .track {
        flex-direction: column;
        transform: none;
        padding-inline: 1.25rem;
    }
    .course {
        flex: none;
    }
    .course ol {
        columns: 1;
    }
}