/* ==========================================================================
   SyllabitEdu — coaching section stylesheet
   Loaded AFTER styles.css, which owns the design tokens and the base
   typography. Every colour below resolves through those tokens, so there is
   one palette for the whole site rather than two that drift.
   The site is light-only and uses no gradients anywhere — see the notes on
   both below before adding a colour.
   ========================================================================== */

/* ---------- Palette bridge ----------
   These are the names the coaching components were written against. Each one
   now points at a token from styles.css instead of a literal, so the whole
   site restyles from one place. Do not reintroduce literal colours here, and
   do not reintroduce a gradient — flat colour is a deliberate choice.

   On the rgba(255,255,255,…) values further down: they are low-alpha overlays
   — hairline borders, hover washes, the code-editor chrome — sitting on the
   dark bands, where a white overlay is what you want. Anything
   sitting on the page ground should use a token, not a literal. */
:root {
    --primary: var(--wine);
    --primary-dark: var(--wine-deep);
    --primary-light: var(--rose);
    /* colour-mix keeps the glow tied to the brand colour rather than
       hardcoding a second maroon that has to be kept in sync. */
    --primary-glow: color-mix(in srgb, var(--wine) 12%, transparent);
    --secondary: var(--ink);
    --accent: var(--rose);
    --accent-dark: var(--wine-deep);
    /* Bitwise aliased --success to the brand colour, which flattened the
       results page. A real positive colour, tuned for both grounds. */
    --success: #2f7d5f;
    --purple: var(--rose);
    --moonstone-dark: color-mix(in srgb, var(--moonstone) 85%, var(--ink));
    --moonstone-light: color-mix(in srgb, var(--moonstone) 45%, var(--surface));
    --white: var(--surface);
    --gray-50: var(--paper);
    --gray-100: var(--surface-2);
    --gray-200: var(--line);
    --gray-300: var(--line);
    --gray-400: var(--ink-soft);
    --gray-500: var(--ink-soft);
    --gray-600: var(--ink-soft);
    --gray-700: var(--ink);
    --gray-800: var(--ink);
    --gray-900: var(--ink);
    --font-primary: var(--serif);
    --font-body: var(--sans);
    /* Five shadow steps collapse onto the base pair, which is tinted plum. */
    --shadow-md: var(--shadow);
    --shadow-lg: var(--shadow);
    --shadow-xl: var(--shadow);
    --radius-sm: 10px;
    --radius-xl: var(--radius-lg);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Dark bands — the CTA banner, the results strip, the video frame and the
       profile header. A deliberate contrast device against the light page, and
       the only dark surfaces on the site. The footer used to be one; it is now
       the shared light `.site-footer`, so that both halves of the site end the
       same way. Kept as their own tokens rather
       than reusing --wine so that restyling the brand colour cannot
       accidentally turn a band pale and strand the white text on it. */
    --band: #48182f;
    --band-deep: #2d0f1e;
    --band-accent: #8b3a5c;
}

/* Applied to the band elements themselves. Rebinds the light-text names for
   every descendant in one place, instead of overriding each child rule.
   NOTE .hero-section is deliberately absent — it is a light ground, not a band.
   Adding it here would put white text on cream. */
.profile-header-bg,
.cta-banner,
.video-wrapper,
.results {
    /* EVERY alias a band descendant might use has to be listed here, not just
       the base token it points at. `--gray-400: var(--ink-soft)` up in :root
       is substituted *at :root*, so what inherits down is the literal
       #6a4a57 — rebinding --ink-soft on the band cannot reach back and change
       it. Miss one alias and its text quietly goes dark-on-dark. */
    --white: #ffffff;
    --gray-900: #ffffff;
    --gray-800: #ffffff;
    --gray-700: rgba(255, 255, 255, 0.9);
    --gray-600: rgba(255, 255, 255, 0.82);
    --gray-500: rgba(255, 255, 255, 0.75);
    --gray-400: rgba(255, 255, 255, 0.75);
    --gray-300: rgba(255, 255, 255, 0.6);
    --primary-light: #e7a9c0;

    /* The base tokens too, because components shared with /app/ resolve
       against these directly at the element. Without them a .btn-outline
       dropped on a band takes --brand-on-surface for its label — dark wine on
       a dark ground — and renders as an outline with invisible text. */
    --ink: #ffffff;
    --ink-soft: rgba(255, 255, 255, 0.8);
    --line: rgba(255, 255, 255, 0.3);
    --brand-on-surface: #ffffff;
    --rose: #e7a9c0;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

/* Font family, size, line-height, colour and ground all come from styles.css,
   so both halves of the site share one base. The ported sheet used to set
   16px/1.7 and a --surface ground here; the app side is 17px/1.6 on --paper,
   and that near-white-vs-greige ground was the single most visible reason the
   two halves looked like different products. Only the overflow guard is
   coaching-specific — several hero elements are positioned outside the flow. */
body {
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--gray-900);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
    font-weight: 600;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

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

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Section Base ---------- */
.section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 60px;
}

.section-tag {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-glow);
    padding: 6px 16px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.section-header h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    margin-bottom: 16px;
    color: var(--gray-900);
}

.section-header p {
    font-size: 1.1rem;
    color: var(--gray-500);
}




.btn-outline {
    background: transparent;
    color: var(--brand-on-surface);
    border-color: var(--line);
}

.btn-outline:hover {
    border-color: var(--rose);
    color: var(--brand-on-surface);
    transform: translateY(-1px);
}

.btn-white {
    background: #ffffff;
    color: #48182f;
    border-color: #ffffff;
}

.btn-white:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}


.btn-full {
    width: 100%;
    justify-content: center;
}


















/* ========== HERO ========== */
/* `.hero-section`, not `.hero`. styles.css defines .hero for /app/ — a section
   in a two-column grid — and the coaching pages load that sheet too, so the two
   components were sharing a name for entirely different things. This one only
   rendered correctly because coaching.css loads second and happened to redeclare
   every property styles.css set; the padding was the near miss, where declaring
   padding-top alone let the app's bottom clamp leak through. Renamed rather than
   kept working around, the same way .faq became .faq-section. The .hero-* names
   below are unique to this sheet and do not collide. */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--paper);
    overflow: hidden;
    padding: 80px 0 0;
}




.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: var(--white);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    animation: fadeInDown 0.8s ease;
}

.hero-badge i {
    font-size: 0.8rem;
}

.hero-section h1 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 20px;
    animation: fadeInUp 0.8s ease 0.1s both;
}

.hero-title-line {
    display: block;
    color: var(--gray-900);
}

/* The hero headline is one colour. This was a maroon -> rose gradient clipped
   to the text, then a solid accent; both made the second line read as a
   different colour from the first. It now just breaks the line. */
.hero-title-accent {
    display: block;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--gray-700);
    font-weight: 500;
    margin-bottom: 16px;
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-description {
    font-size: 1.05rem;
    color: var(--gray-500);
    margin-bottom: 32px;
    max-width: 520px;
    animation: fadeInUp 0.8s ease 0.3s both;
}

.hero-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
    animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-stats {
    display: flex;
    gap: 40px;
    animation: fadeInUp 0.8s ease 0.5s both;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
}

.hero-image {
    display: flex;
    justify-content: center;
    animation: fadeInRight 1s ease 0.3s both;
}

.hero-image-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    max-width: 480px;
}

.hero-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    border: 2px solid rgba(255,255,255,0.3);
    pointer-events: none;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========== CODE EDITOR (Hero) ========== */
.code-editor {
    position: relative;
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius-lg);
    overflow: visible;
    box-shadow: 0 30px 60px rgba(72, 24, 47, 0.25), 0 0 0 1px rgba(72, 24, 47, 0.08);
    animation: fadeInRight 1s ease 0.3s both;
}

.editor-header {
    background: #1e0a14;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.editor-dots {
    display: flex;
    gap: 7px;
}

.editor-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.editor-dot-red { background: #ff5f57; }
.editor-dot-yellow { background: #ffbd2e; }
.editor-dot-green { background: #28c840; }

.editor-tab {
    background: rgba(255,255,255,0.08);
    padding: 5px 16px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--moonstone);
    font-weight: 500;
}

.editor-body {
    background: #2d0f1e;
    padding: 20px 0;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.75;
    min-height: 280px;
}

.code-line {
    padding: 0 20px;
    display: flex;
    white-space: pre;
    transition: background 0.2s;
}

.code-line:hover {
    background: rgba(255,255,255,0.03);
}

.line-num {
    display: inline-block;
    width: 32px;
    color: rgba(212, 203, 196, 0.25);
    text-align: right;
    margin-right: 16px;
    flex-shrink: 0;
    user-select: none;
    font-size: 0.8rem;
}

.code-keyword { color: #e06c9a; font-weight: 600; }
.code-class { color: #f0c674; }
.code-func { color: #81a2be; }
.code-param { color: #cc6666; }
.code-string { color: #b5bd68; }
.code-comment { color: rgba(212, 203, 196, 0.35); font-style: italic; }

.cursor-blink {
    color: var(--moonstone);
    animation: blink 1s step-end infinite;
    font-weight: 300;
}

.editor-terminal {
    background: #1a0812;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 1px solid rgba(212, 203, 196, 0.08);
    font-family: monospace;
    font-size: 0.85rem;
}

.terminal-prompt {
    color: #e06c9a;
    font-weight: 700;
}

.terminal-output {
    animation: fadeInUp 0.5s ease 1.5s both;
}

/* Floating language badges */
.floating-badge {
    position: absolute;
    padding: 8px 18px;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: var(--shadow-md);
    z-index: 2;
    animation: float 4s ease-in-out infinite;
}

.badge-py {
    top: -16px;
    right: -20px;
    background: #3572A5;
    color: #fff;
    animation-delay: 0s;
}

.badge-java {
    top: 50%;
    right: -40px;
    background: #f89820;
    color: #fff;
    animation-delay: 1s;
}

.badge-sql {
    bottom: 60px;
    left: -30px;
    background: #336791;
    color: #fff;
    animation-delay: 2s;
}

.badge-ai {
    top: 20%;
    left: -35px;
    background: var(--primary);
    color: var(--btn-text);
    animation-delay: 0.5s;
}

@keyframes blink {
    50% { opacity: 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.hero-scroll-indicator a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    box-shadow: var(--shadow-md);
    animation: bounce 2s infinite;
}

/* ========== BOARDS TICKER ========== */
.boards-ticker {
    background: var(--primary);
    padding: 16px 0;
    overflow: hidden;
    position: relative;
}

.ticker-track {
    display: flex;
    gap: 50px;
    animation: ticker 25s linear infinite;
    width: max-content;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

.ticker-item i {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* ========== COURSES ========== */
.courses {
    background: var(--gray-50);
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.course-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--gray-200);
}

.course-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.course-card-featured {
    border-color: var(--primary);
    background: var(--surface);
}

.course-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius);
    background: var(--primary-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.course-icon i {
    font-size: 1.5rem;
    color: var(--primary);
}

.course-card-featured .course-icon {
    background: rgba(72, 24, 47, 0.1);
}

.course-card-featured .course-icon i {
    color: var(--primary);
}

.course-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

/* One badge, one colour. There used to be -green, -purple and -gold variants
   that recoloured this per board, which made a row of course cards read as
   four unrelated labels. The board name is the information; the chip is just
   the frame for it. */

.course-card h3 {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.course-classes {
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 14px;
}

.course-card p {
    color: var(--gray-500);
    font-size: 0.95rem;
    margin-bottom: 18px;
}

.course-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.course-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 5px 12px;
    border-radius: 50px;
}

.course-meta-item i {
    font-size: 0.7rem;
    color: var(--primary);
}

.course-highlights {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.course-highlights li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.course-highlights li i {
    color: var(--success);
    font-size: 0.8rem;
}

/* ========== WHY US / FEATURES ========== */
.why-us {
    background: var(--white);
}

/* Four cards, one row. This was auto-fit with a 260px minimum, which fitted
   four while the measure was 1200px but drops to three at 1120 — four columns
   would need 4x260 + 3x24 = 1112 in a 1072px content width, so the fourth card
   wrapped onto a row of its own. The count here is deliberate rather than
   emergent: there are exactly four reasons on this section, and they read as a
   set. minmax(0, 1fr) lets the columns shrink below their content width
   instead of overflowing. */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.feature-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    transition: var(--transition);
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.feature-number {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 900;
    color: var(--gray-100);
    line-height: 1;
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.feature-icon i {
    font-size: 1.3rem;
    color: var(--white);
}

.feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.feature-card p {
    color: var(--gray-500);
    font-size: 0.95rem;
}

/* ========== ABOUT ========== */
.about {
    background: var(--gray-50);
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}


.about-image img {
    width: 100%;
    height: auto;
}

/* ========== ABOUT — Profile Card Creative ========== */
.about-visual {
    display: flex;
    justify-content: center;
}

.profile-card-creative {
    width: 100%;
    max-width: 400px;
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(72, 24, 47, 0.15), 0 0 0 1px rgba(72, 24, 47, 0.06);
    text-align: center;
    position: relative;
}

.profile-header-bg {
    height: 90px;
    background: var(--band);
    position: relative;
    overflow: hidden;
}

.profile-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -40px auto 12px;
    position: relative;
    z-index: 2;
    border: 4px solid var(--white);
    box-shadow: var(--shadow-md);
}

.profile-avatar i {
    font-size: 2rem;
    color: var(--white);
}

.profile-name {
    font-size: 1.3rem;
    color: var(--gray-900);
    margin-bottom: 2px;
}

.profile-title {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 24px;
}

/* Tech orbit */
.profile-tech-stack {
    padding: 10px 24px 24px;
}

.tech-orbit {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.tech-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 20px rgba(72, 24, 47, 0.3);
}

.tech-center span {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--white);
    line-height: 1;
}

.tech-center small {
    font-size: 0.65rem;
    color: var(--moonstone);
    font-weight: 500;
}

.tech-orbit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1.5px dashed var(--gray-200);
    animation: spin 20s linear infinite;
}

.tech-item {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    z-index: 3;
    animation: spin-reverse 20s linear infinite;
}

.tech-1 { top: 0; left: 50%; transform: translateX(-50%); }
.tech-2 { top: 25%; right: 0; }
.tech-3 { bottom: 25%; right: 0; }
.tech-4 { bottom: 0; left: 50%; transform: translateX(-50%); }
.tech-5 { bottom: 25%; left: 0; }
.tech-6 { top: 25%; left: 0; }

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin-reverse {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Degree chips */
.profile-degrees {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 24px 20px;
}

.degree-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--gray-50);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
}

.degree-chip i {
    font-size: 0.7rem;
    color: var(--primary);
}

.degree-chip-highlight {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.degree-chip-highlight i {
    color: var(--moonstone);
}

/* Activity bars */
.profile-activity {
    padding: 20px 24px 28px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.activity-bar {
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.activity-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 1.5s ease;
}

.activity-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-bottom: 14px;
}

.activity-labels:last-child {
    margin-bottom: 0;
}

.about-content .section-tag {
    margin-bottom: 8px;
}

.about-content h2 {
    font-size: 2.5rem;
    margin-bottom: 6px;
    background: none;
    -webkit-text-fill-color: var(--gray-900);
}

.about-role {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 20px;
}

.about-description {
    color: var(--gray-600);
    font-size: 1.05rem;
    margin-bottom: 28px;
}

.about-qualifications {
    margin-bottom: 28px;
}

.about-qualifications h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--gray-800);
    margin-bottom: 12px;
}

.about-qualifications h4 i {
    color: var(--primary);
}

.about-qualifications ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.about-qualifications li {
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
}

.about-experience {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.exp-item {
    text-align: center;
    padding: 16px 20px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    flex: 1;
}

.exp-number {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    display: block;
}

.exp-text {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* ========== TESTIMONIALS ========== */
.testimonials {
    background: var(--white);
}

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

.testimonial-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: var(--transition);
}

.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.testimonial-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
}

.testimonial-stars i {
    color: #8B3A5C;
    font-size: 0.9rem;
}

.testimonial-card > p {
    color: var(--gray-600);
    font-size: 1rem;
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.7;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-glow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-avatar i {
    color: var(--primary);
    font-size: 1rem;
}

.testimonial-author strong {
    display: block;
    color: var(--gray-800);
    font-size: 0.95rem;
}

.testimonial-author span {
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* ========== FAQ ========== */
/* Renamed from .faq: styles.css styles that name as the app's FAQ list — a
   760px centred grid — and the coaching pages load that sheet too, so the bare
   name clamped this whole section. See the class-collision note in CLAUDE.md. */
.faq-section {
    background: var(--gray-50);
}

.faq-list {
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.faq-item[open] {
    border-color: var(--primary-light);
    box-shadow: 0 4px 12px rgba(72, 24, 47, 0.08);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--gray-800);
    list-style: none;
    transition: var(--transition);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    color: var(--primary);
}

.faq-item summary i {
    font-size: 0.8rem;
    color: var(--gray-400);
    transition: var(--transition);
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-item[open] summary i {
    transform: rotate(180deg);
    color: var(--primary);
}

.faq-answer {
    padding: 0 24px 20px;
}

.faq-answer p {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.7;
}

.faq-answer a {
    color: var(--primary);
    font-weight: 600;
}

.faq-answer ul {
    list-style: none;
    margin: 14px 0 0;
    display: grid;
    gap: 8px;
}

.faq-answer ul li {
    position: relative;
    padding-left: 26px;
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
}

.faq-answer ul li i {
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--primary);
    font-size: 0.85rem;
}

/* ---------- Class Mode Note (Offline & Online) ---------- */
.mode-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    padding: 20px 24px;
    margin-bottom: 40px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
}

.mode-note-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--gray-600);
}

.mode-note-item i {
    color: var(--primary);
    font-size: 1rem;
}

.mode-note-item strong {
    color: var(--gray-900);
}

.mode-note-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
}

.mode-note-link:hover {
    color: var(--accent);
}

@media (max-width: 768px) {
    .mode-note { flex-direction: column; align-items: flex-start; }
    .mode-note-link { margin-left: 0; }
}

/* ========== CONTACT ========== */
.contact {
    background: var(--white);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.contact-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}

.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius);
    background: var(--primary-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon i {
    font-size: 1.2rem;
    color: var(--primary);
}

.contact-card h4 {
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.contact-card a {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.contact-card a:hover {
    text-decoration: underline;
}

.contact-card p {
    color: var(--gray-500);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Cards now stack two details (phone + WhatsApp, address + timings) */
.contact-card a + p,
.contact-card p + p {
    margin-top: 6px;
}

.contact-card p > i {
    color: var(--primary);
    margin-right: 6px;
}

.contact-map {
    margin-top: 8px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

/* Contact sections: the info column is shorter than the form, so the map
   absorbs the leftover height and both columns end level. */
.contact-grid-stretch .contact-map {
    flex: 1;
    min-height: 250px;
}

.contact-grid-stretch .contact-map iframe {
    display: block;
    height: 100%;
}

/* Contact Form */
.contact-form-wrapper {
    position: relative;
}

.contact-form {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 36px;
}

.contact-form h3 {
    font-size: 1.3rem;
    margin-bottom: 24px;
    color: var(--gray-800);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--gray-800);
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(72, 24, 47, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* ========== CTA BANNER ========== */
.cta-banner {
    background: var(--band);
    padding: 60px 0;
}

/* Every coaching page ends flush against the footer.
   `.site-footer` carries `margin-top: 20px` in styles.css, and margin paints
   whatever is behind the element — the body's --paper (#f5f1ec), never the
   footer's own --surface (#fbf9f6). While the sections were plain those two
   greiges were near enough to pass for space; now that every band carries a
   pattern, the strip reads as an unpatterned seam on all seven pages.

   This started as `.cta-banner + .site-footer`, which closed the seam only
   under the home page's dark band. It is general now because the cause is
   general. The 20px is NOT removed from the component in styles.css, because
   /app/ still wants it: there the CTA is `.cta-band`, a rounded inset card
   whose breathing room this is, and /app/ never loads this sheet. So the
   coaching side cancels it for itself and the product side keeps it.

   Nothing is lost by closing it: the footer's own 56px padding-top and its
   border-top hairline already do the separating. */
.site-footer {
    margin-top: 0;
}

.cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.cta-content h2 {
    font-size: 2rem;
    color: var(--white);
    margin-bottom: 8px;
}

.cta-content p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.8);
}

/* ========== FOOTER ========== */
/* The coaching footer used to be a dark --band-deep slab with its own grid,
   list and logo rules — a lookalike of /app/'s footer that had drifted into a
   different component. It is now the shared `.site-footer` from styles.css, so
   both halves of the site render the same footer from the same source. Its
   rules live there; nothing coaching-specific is needed here. */

/* ========== BACK TO TOP ========== */
.back-to-top {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition);
    z-index: 99;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
}

/* ========== WHATSAPP FLOAT ========== */
.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5);
    z-index: 99;
    transition: var(--transition);
    animation: pulse-green 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
}

/* ========== SEO CONTENT BLOCK ========== */
.seo-content {
    background: var(--gray-50);
    padding: 80px 0;
}

.seo-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.seo-content-card {
    background: var(--white);
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.seo-content-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.seo-content-card h2,
.seo-content-card h3 {
    font-size: 1.2rem;
    color: var(--gray-900);
    margin-bottom: 12px;
    line-height: 1.4;
}

.seo-content-card h2 strong,
.seo-content-card h3 strong {
    color: var(--primary);
    font-weight: 700;
}

.seo-content-card p {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.7;
}

.seo-content-card p strong {
    color: var(--gray-800);
    font-weight: 600;
}

@media (max-width: 768px) {
    .seo-content-grid { grid-template-columns: 1fr; }
    .seo-content { padding: 60px 0; }
}

/* ========== VIDEO SHOWCASE ========== */
.video-showcase {
    background: var(--white);
}

.video-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(72, 24, 47, 0.2), 0 0 0 1px rgba(72, 24, 47, 0.06);
    background: var(--band-deep);
    aspect-ratio: 16 / 9;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* YouTube iframe: upscale to crop out hover title + any residual UI */
.video-wrapper #ytPlayer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 115%;
    height: 130%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}

/* Transparent overlay prevents clicks reaching the iframe (blocks YouTube's own pause/title UI) */
.video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: default;
}

.video-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    border: 2px solid rgba(255,255,255,0.08);
    pointer-events: none;
}

.video-unmute-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(72, 24, 47, 0.92);
    color: var(--white);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition);
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    animation: pulse-btn 2.5s ease-in-out infinite;
}

.video-unmute-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.video-unmute-btn i {
    font-size: 1rem;
}

.video-unmute-btn.is-playing {
    animation: none;
}

.video-unmute-btn.is-playing span {
    display: none;
}

.video-unmute-btn.is-playing {
    padding: 12px;
}

@keyframes pulse-btn {
    0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
    50% { box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 0 8px rgba(72, 24, 47, 0.15); }
}

@media (max-width: 768px) {
    .video-wrapper { border-radius: var(--radius-lg); }
}

/* ========== PAGE HEADER (standalone pages) ========== */
.page-header {
    padding: 140px 0 60px;
    background: var(--paper);
    text-align: center;
    position: relative;
    overflow: hidden;
}


.page-header .container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.page-header h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin-bottom: 16px;
    color: var(--gray-900);
}

.page-header p {
    font-size: 1.15rem;
    color: var(--gray-600);
    max-width: 650px;
    margin: 0 auto;
}

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 18px;
    font-weight: 500;
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb i {
    font-size: 0.7rem;
    color: var(--gray-400);
}

.breadcrumb span {
    color: var(--gray-700);
}

@media (max-width: 768px) {
    .page-header { padding: 110px 0 50px; }
    .page-header h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin-bottom: 16px;
    color: var(--gray-900);
}
    .page-header p { font-size: 1rem; }
}

/* ========== HERO HIGHLIGHTS ========== */
/* A fixed two-up grid rather than a wrapping flex row. The four chips are
   225-274px wide, so in the 506px hero column a wrapping row misses a pair by
   a couple of pixels and collapses all four into a single stack. A grid pairs
   them deterministically and lets the longest label wrap inside its own cell
   instead of dictating the layout. */
.hero-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
    animation: fadeInUp 0.8s ease 0.3s both;
}

@media (max-width: 560px) {
    .hero-highlights {
        grid-template-columns: 1fr;
    }
}

.hero-highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid var(--gray-200);
}

.hero-highlight i {
    color: var(--primary);
    font-size: 0.85rem;
}

/* ========== RESULTS SECTION ========== */
.results {
    background: var(--band);
    position: relative;
    overflow: hidden;
}

.results::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
}

.results .section-tag {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

.results .section-header h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    margin-bottom: 16px;
    color: var(--gray-900);
}

.results .section-header p {
    color: rgba(255,255,255,0.7);
}

.results-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.result-stat-card {
    text-align: center;
    padding: 32px 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.result-stat-card:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-4px);
}

.result-stat-icon {
    font-size: 1.5rem;
    color: var(--moonstone);
    margin-bottom: 12px;
}

.result-stat-number {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 6px;
}

.result-stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

.top-performers {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-xl);
    padding: 40px;
}

.performers-title {
    text-align: center;
    color: var(--white);
    font-size: 1.3rem;
    margin-bottom: 32px;
}

.performers-title i {
    color: var(--moonstone);
    margin-right: 6px;
}

.performers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
}

.performer-card {
    text-align: center;
    padding: 24px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    transition: var(--transition);
}

.performer-card:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-3px);
}

.performer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.performer-avatar i {
    color: var(--moonstone);
    font-size: 1.1rem;
}

.performer-score {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 900;
    color: var(--white);
    line-height: 1;
    margin-bottom: 4px;
}

.performer-score::after {
    content: '/100';
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    margin-left: 2px;
}

.performer-card strong {
    display: block;
    color: var(--white);
    font-size: 0.9rem;
    margin-top: 8px;
}

.performer-card span {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

/* ========== DEMO SECTION ========== */
.demo-section {
    background: var(--gray-50);
}

.demo-card {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    align-items: center;
    background: var(--white);
    border: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.demo-content .section-tag {
    margin-bottom: 12px;
}

.demo-content h2 {
    font-size: 2rem;
    margin-bottom: 16px;
    background: none;
    -webkit-text-fill-color: var(--gray-900);
}

.demo-content > p {
    color: var(--gray-500);
    font-size: 1.05rem;
    margin-bottom: 24px;
}

.demo-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.demo-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-700);
}

.demo-features li i {
    color: var(--primary);
    font-size: 0.85rem;
}

.demo-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.demo-icon-big {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--primary-glow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-icon-big i {
    font-size: 4rem;
    color: var(--primary);
}

.demo-badge-float {
    position: absolute;
    top: 10px;
    right: 30px;
    background: var(--primary);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(72, 24, 47, 0.3);
    animation: bounce 2s infinite;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes pulse-green {
    0% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.3), 0 0 0 12px rgba(37, 211, 102, 0.1); }
    100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5); }
}

/* Scroll reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .hero-section h1 { font-size: 2.8rem; }
    .hero-container { gap: 40px; }
    .about-container { gap: 40px; }
}

@media (max-width: 768px) {
    /* Results */
    .results-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .top-performers { padding: 24px; }
    .performers-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Demo */
    .demo-card { grid-template-columns: 1fr; padding: 32px; text-align: center; }
    .demo-features { grid-template-columns: 1fr; text-align: left; }
    .demo-visual { display: none; }

    /* Hero highlights */
    .hero-highlights { justify-content: center; }

    /* Nav: nothing here. The header is the shared .site-header component in
       styles.css, which shows .nav-toggle as an inline-grid at <=900px and
       drops .nav-links into a panel. This block used to re-declare a slide-in
       .nav-menu / .nav-link / .nav-cta from the old Bitwise nav -- none of
       which exist in the markup any more -- plus a `.nav-toggle { display:
       flex }` that quietly broke the toggle: place-items:center only supplies
       align-items under flex, so the icon lost its horizontal centring and sat
       against the left edge of its box. */

    /* Hero */
    .hero-section { min-height: auto; padding: 120px 0 60px; }
    .hero-container { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .hero-section h1 { font-size: 2.4rem; }
    .hero-description { margin: 0 auto 32px; }
    .hero-actions { justify-content: center; flex-wrap: wrap; }
    .hero-stats { justify-content: center; gap: 28px; }
    .hero-image-wrapper { max-width: 360px; margin: 0 auto; }
    .code-editor { max-width: 100%; margin: 0 auto; }
    .floating-badge { display: none; }
    .hero-scroll-indicator { display: none; }

    /* Sections */
    .section { padding: 70px 0; }
    .section-header h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    margin-bottom: 16px;
    color: var(--gray-900);
}
    .section-header { margin-bottom: 40px; }

    /* Buttons: .btn is nowrap by default, which pushed long labels past the
       viewport on narrow phones. Let them wrap instead of overflowing. */
    .btn { white-space: normal; text-align: center; max-width: 100%; }
    .btn-lg { padding: 15px 24px; font-size: 1rem; }

    /* About */
    .about-container { grid-template-columns: 1fr; text-align: center; }
    .about-image { max-width: 400px; margin: 0 auto; }
    .about-visual { margin: 0 auto; }
    .about-qualifications ul { justify-content: center; }
    .about-content .btn { display: inline-flex; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }

    /* CTA */
    .cta-container { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .hero-section h1 { font-size: 1.9rem; }
    .hero-subtitle { font-size: 1rem; }
    .hero-stats { flex-direction: column; gap: 16px; align-items: center; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-highlights { flex-direction: column; align-items: center; }
    .about-experience { flex-direction: column; gap: 12px; }
    .contact-form { padding: 24px; }
    .courses-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .results-stats { grid-template-columns: 1fr 1fr; }
    .result-stat-number { font-size: 2rem; }
    .editor-body { font-size: 0.75rem; min-height: 220px; }
    .code-line { padding: 0 12px; }
    .line-num { width: 24px; margin-right: 10px; }
    .performers-grid { grid-template-columns: repeat(2, 1fr); }
    .demo-card { padding: 24px; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ========== TOAST NOTIFICATIONS ========== */
.toast-notification {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    z-index: 9999;
    box-shadow: var(--shadow-lg);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 420px;
}

.toast-notification.toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.toast-success {
    background: #48182f;
}

.toast-error {
    background: #dc2626;
}

.toast-notification i:first-child {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.toast-notification span {
    flex: 1;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.toast-close:hover {
    color: var(--white);
}

@media (max-width: 480px) {
    .toast-notification {
        top: auto;
        bottom: 24px;
        right: 16px;
        left: 16px;
        max-width: none;
    }
}

/* A pointer across to the app side. Used on /faq, whose URL previously served
   the app's FAQ, so an old bookmark lands here and needs a way over. */
.page-header-aside {
    margin-top: 14px;
    font-size: 0.95rem;
    opacity: 0.85;
}

.page-header-aside a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ========== SECTION PATTERNS ========================================
   A flat geometric tile behind every band on every coaching page, so a page
   reads as a sequence of distinct rooms rather than one scroll of alternating
   off-whites. Keyed on the section class, not on a per-page body hook: a band
   called .courses should look the same wherever it appears, and the sub-pages
   are each a header plus one or two of the same sections the home page uses.

   No page scoping is needed. /app/ loads styles.css only and never this sheet,
   so nothing here can reach the product side; the coaching pages are the whole
   audience for this file.

   `.section` comes FIRST on purpose. It is the fallback for a band with no
   modifier — the "Where To Next?" block on 404 — and the modifier rules below
   carry identical specificity, so they override it on source order alone.
   Moving them above it would silently blank every pattern on the page.

   These are SVG tiles with FLAT fills, never gradients. The obvious way to
   draw a dot grid in CSS is `radial-gradient`, and stripes are
   `repeating-linear-gradient`; both are banned by the no-gradients rule, which
   covers anything that merely reads as one. A tiled data URI draws the same
   shapes out of flat colour and costs no extra request.

   Only `background-image` is set. Each section's existing `background:`
   shorthand keeps supplying the colour underneath, so the light/dark rhythm
   survives and so does the alias rebinding inside .results and .cta-banner
   that keeps their text white — a shorthand here would wipe the colour and
   strand that text. Wine at 4.5-10% on the light bands, white at 10-20% on
   the dark ones.

   Tiles are vector and sized in px, so they need no breakpoint and render
   identically at 390px.
   ==================================================================== */
.section {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Ccircle%20cx%3D%273%27%20cy%3D%273%27%20r%3D%271.3%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.06%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%271.3%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.06%27%2F%3E%3C%2Fsvg%3E");
    background-size: 30px 30px;
}

.page-header {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M0%2020%20L20%200%20M-5%205%20L5%20-5%20M15%2025%20L25%2015%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.06%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M0%200%20L20%2020%20M15%20-5%20L25%205%20M-5%2015%20L5%2025%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.06%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
    background-size: 20px 20px;
}

.hero-section {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2022%2022%27%3E%3Ccircle%20cx%3D%271.5%27%20cy%3D%271.5%27%20r%3D%271.5%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.07%27%2F%3E%3C%2Fsvg%3E");
    background-size: 22px 22px;
}

.boards-ticker {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%3E%3Cpath%20d%3D%27M-2%202%20L2%20-2%20M0%2014%20L14%200%20M12%2016%20L16%2012%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%27.16%27%20stroke-width%3D%271.4%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
    background-size: 14px 14px;
}

.video-showcase {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2728%27%20height%3D%2728%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cpath%20d%3D%27M-4%204%20L4%20-4%20M0%2028%20L28%200%20M24%2032%20L32%2024%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.07%27%20stroke-width%3D%271.2%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
    background-size: 28px 28px;
}

.courses {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M32%200%20H0%20V32%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.08%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
    background-size: 32px 32px;
}

.results {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726%27%20height%3D%2726%27%20viewBox%3D%270%200%2026%2026%27%3E%3Ccircle%20cx%3D%272%27%20cy%3D%272%27%20r%3D%271.6%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%27.10%27%2F%3E%3C%2Fsvg%3E");
    background-size: 26px 26px;
}

.seo-content {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2744%27%20height%3D%2744%27%20viewBox%3D%270%200%2044%2044%27%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%2722%27%20r%3D%279%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.075%27%20stroke-width%3D%271.1%27%2F%3E%3C%2Fsvg%3E");
    background-size: 44px 44px;
}

.why-us {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Cpath%20d%3D%27M15%2010%20V20%20M10%2015%20H20%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.10%27%20stroke-width%3D%271.3%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
    background-size: 30px 30px;
}

.about {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2720%27%20viewBox%3D%270%200%2034%2020%27%3E%3Cpath%20d%3D%27M0%2014%20L8.5%206%20L17%2014%20L25.5%206%20L34%2014%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.085%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E");
    background-size: 34px 20px;
}

.testimonials {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2740%27%20height%3D%2740%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M10%208%20L15%2017%20L5%2017%20Z%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.06%27%2F%3E%3Cpath%20d%3D%27M30%2024%20L35%2033%20L25%2033%20Z%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.045%27%2F%3E%3C%2Fsvg%3E");
    background-size: 40px 40px;
}

.faq-section {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2748%27%20height%3D%2716%27%20viewBox%3D%270%200%2048%2016%27%3E%3Cpath%20d%3D%27M0%2012%20C%208%2012%2C%208%204%2C%2016%204%20S%2024%2012%2C%2032%2012%20S%2040%204%2C%2048%204%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.09%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E");
    background-size: 48px 16px;
}

.contact {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Cpath%20d%3D%27M15%202%20L28%2015%20L15%2028%20L2%2015%20Z%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.075%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
    background-size: 30px 30px;
}

.cta-banner {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cpath%20d%3D%27M0%2018%20H12%20M24%2018%20H36%20M18%200%20V12%20M18%2024%20V36%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%27.13%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%272.4%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%27.20%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
    background-size: 36px 36px;
}