/*
 * ============================================================
 * PAGE SECTIONS — HOMEPAGE
 * Hero, Cinematic Scroll, Features, Info Cards,
 * Placement Banner, Self-Study Card.
 * ============================================================
 */

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-scroll-track {
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 0;
}

.hero-section {
    width: 100%;
    height: 100vh;
    min-height: 800px;
    position: relative;
    z-index: 10;
}

/* Static end-state layout (the scroll-driven pinned shrink animation that
   used to bring the hero here — .hero-visual-card, .hero-visual-card-
   backdrop and .unified-poster-container all starting large and shrinking
   into these exact dimensions on scroll — has been removed entirely; see
   js/animations.js. These are the same literal values that transform used
   to land on, so the homepage always renders straight into what was
   previously the *post-scroll* appearance, breakpoint-for-breakpoint,
   unchanged.) Below the 992px breakpoint these rules don't apply — the
   ≤991px rules in responsive.css own the (already-static) mobile/tablet
   layout instead. */
.hero-visual-card {
    width: 950px;
    height: 440px;
    border-radius: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* Purely decorative — the glass background/border/shadow, on its own
   sibling rather than directly on .hero-visual-card so a border-radius/
   background change here never risks affecting that element's children
   (.hero-content-panel, .unified-poster-container). No backdrop-filter
   (removed) — --glass-bg is a plain translucent solid color now, opacity
   raised in tokens.css to compensate for the lost blur softening on
   what's often a busy photographic background behind it. */
.hero-visual-card-backdrop {
    width: 950px;
    height: 440px;
    background-color: var(--glass-bg);
    border: 1px solid var(--neutral-border);
    border-top: 1px solid var(--glass-border-highlight);
    border-radius: 36px;
    box-shadow: var(--glass-shadow);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.unified-poster-container {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 360px;
    height: 360px;
    border-radius: 24px;
    overflow: hidden;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    /* Centers .hero-banner-img (which is deliberately wider/taller than
       this box — see the comment above it) horizontally, top-aligned.
       Flexbox rather than absolute-positioning-and-transform for the
       image itself: sizing a replaced element from an explicit `height`
       plus `width: auto` is unambiguous as a flex child (the flex
       algorithm resolves it straight from the image's intrinsic aspect
       ratio), whereas relying on that same auto-width to also come out
       of the more obscure "abs-pos replaced element, left set, right
       unset" resolution path is exactly the kind of edge case engines
       have historically disagreed on. */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Single composed banner photo (bannerrr.webp, 1800×890 — a real photo, not
   a background+cutout composite, so it replaces both the old
   .hero-bg-layer and .hero-character-layer with one <img>).
   Framing requirement: at every container size the crop should stay
   anchored to the TOP of the photo and read as "head → roughly waist",
   horizontally centered — only ever *revealing more* of the surrounding
   scene as the container gets wider, never cutting the character's head
   or sliding the framing down.
   Plain `object-fit: cover` can't do this alone: for every container
   aspect ratio narrower than the photo's own 2:1 (i.e. every realistic
   size .unified-poster-container ever takes, at any breakpoint), `cover`
   scales to the container's HEIGHT and only ever crops WIDTH — so it
   would always reveal the photo's full height (hallway floor included)
   instead of stopping above it, regardless of how the container's own
   aspect ratio is tuned per breakpoint.
   Fix: force the image taller than its container by a fixed factor
   instead. 890 / 800 ≈ 1.11 is the ratio between the photo's real pixel
   height and the height of its "head → waist" region (measured directly
   against the source file). Setting height to that fixed percentage —
   with width left to follow the image's own intrinsic ratio via
   `width: auto` — means exactly the bottom ~13% (the empty floor below
   the waist) always overflows the container and gets clipped by its
   `overflow: hidden`, independent of the container's own aspect ratio.
   The container's width then does the rest for free, with zero JS: a
   near-square box (mobile, and every current desktop breakpoint) crops
   in tight on the centered head-to-waist column; a wider box (tablet)
   reveals proportionally more of the hallway on each side — exactly the
   "770×770 on narrow screens, more of the artwork as it widens"
   behavior, fluid between breakpoints rather than snapping at exact
   widths. See the ≤991px/≤768px .unified-poster-container aspect-ratio
   overrides in responsive.css for the container side of this. */
.hero-banner-img {
    flex-shrink: 0;
    width: auto;
    max-width: none;
    height: 111.2%;
}

@media (min-width: 1401px) {
    .hero-visual-card { width: 1350px; height: 600px; }
    .hero-visual-card-backdrop { width: 1350px; height: 600px; }
    .unified-poster-container { width: 520px; height: 520px; }
}
@media (min-width: 1751px) {
    .hero-visual-card { width: 1700px; height: 750px; }
    .hero-visual-card-backdrop { width: 1700px; height: 750px; }
    .unified-poster-container { width: 670px; height: 670px; }
}

.hero-content-panel {
    position: absolute;
    left: 50px;
    /* Sits a bit above dead-center — with the statement box below the
       buttons, centering the whole group exactly would visually crowd the
       bottom of the card; a slightly higher anchor reads as more intentional. */
    top: 44%;
    transform: translateY(-50%);
    width: calc(100% - 550px);
    max-width: 690px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

.hero-title {
    font-family: var(--font-display-fa);
    font-size: 30px;
    font-weight: 800;
    color: var(--primary-navy);
    line-height: 1.5;
    margin-bottom: 15px;
}

.hero-description {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 2.1;
    color: var(--ink-soft);
    margin-bottom: 25px;
    text-align: justify;
}

/* The hero actions: book the intro session (primary), or browse the free
   lessons / blog articles (outline) — same .btn-cta family as the header, a size up. */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.hero-actions .btn-cta { padding: 12px 28px; font-size: 14px; text-decoration: none; }

/* A short philosophy statement below the hero description. Sitting inside the
   flex-column, centered content-panel, it naturally shifts the title/
   description/buttons upward as a group. Deep navy — the same family as
   the placement banner / footer / learning CTA — so it reads as part of
   the same "always-dark accent" surface, in both Light and Dark mode. */
.hero-placeholder-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 620px;
    margin-top: 22px;
    /* Wider horizontal padding, not taller — more breathing room for a
       multi-line statement without the box growing tall. */
    padding: 20px 28px;
    border-radius: var(--radius-md);
    background-color: var(--primary-navy-dark);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.hero-placeholder-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--accent-gold-hover);
    transition: background-color 0.4s ease, color 0.4s ease;
}
.hero-placeholder-icon svg { width: 17px; height: 17px; }
.hero-placeholder-text {
    margin: 0;
    padding-top: 2px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 2;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.4s ease;
}


/* ============================================================
   CINEMATIC SCROLL SECTION
   ============================================================ */
#cinematic-wrapper,
#cinematic-wrapper * { box-sizing: border-box; }

#cinematic-wrapper {
    background-color: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    position: relative;
    width: 100%;
}

#cinematic-wrapper .benefit-section {
    padding: 40px 0 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Floating decorative 3D icons */
/* The two floating glass icons deliberately hang past the screen edges
   (left/right: -10%); clip them here so they can never widen the page
   and shift everything — the header included — sideways. */
#cinematic-wrapper { overflow-x: clip; }

.glass-3d-icon {
    position: absolute;
    top: 50%;
    width: clamp(200px, 28vw, 400px);
    height: auto;
    z-index: 5;
    pointer-events: none;
    opacity: 0.85;
}
/* animation-play-state starts paused — js/animations.js's
   initOffscreenAnimationPausing() adds .in-view only while an
   IntersectionObserver reports this element is actually on screen, so the
   browser isn't compositing this every frame for the large stretches of a
   visit where it's scrolled out of view (see that function's comment for
   the measured cost). Visual behavior once visible is unchanged. */
.glass-3d-icon.left-icon  { left: -10%;  animation: slow-float-left  14s ease-in-out infinite; animation-play-state: paused; }
.glass-3d-icon.right-icon { right: -10%; animation: slow-float-right 12s ease-in-out infinite; animation-play-state: paused; }
.glass-3d-icon.in-view { animation-play-state: running; }

@keyframes slow-float-left {
    0%, 100% { transform: translateY(-50%) rotate(-5deg); }
    50%       { transform: translateY(-42%) rotate(2deg);  }
}
@keyframes slow-float-right {
    0%, 100% { transform: translateY(-50%) rotate(5deg);  }
    50%       { transform: translateY(-58%) rotate(-2deg); }
}

#cinematic-wrapper .container {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

#cinematic-wrapper .title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

#cinematic-wrapper .clip-title-wrapper { margin-top: 2px; position: relative; }

/* No backdrop-filter here (removed) — every .theme-* variant below sets a
   fully OPAQUE hex background-color, so this blur had nothing translucent
   to actually soften; it was pure wasted GPU cost with zero visible
   effect, at up to 4 of these on screen at once (one per benefit tag). */
#cinematic-wrapper .clip-title {
    font-family: var(--font-display-fa);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.4;
    padding: 12px 30px;
    width: fit-content;
    display: inline-block;
    color: var(--primary-navy);
    margin: 0;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(26, 54, 93, 0.05);
    clip-path: inset(-40% -20% -40% 120%);
    will-change: clip-path;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Clip-title color themes */
#cinematic-wrapper .clip-title.theme-blue   { background-color: #EBF4FF; border-right: 4px solid #4299E1; }
#cinematic-wrapper .clip-title.theme-red    { background-color: #FFF5F5; border-right: 4px solid #FC8181; }
#cinematic-wrapper .clip-title.theme-green  { background-color: #F0FFF4; border-right: 4px solid #68D391; }
#cinematic-wrapper .clip-title.theme-purple { background-color: #FAF5FF; border-right: 4px solid #B794F4; }

/* Decorative ribbon corners on each clip-title */
#cinematic-wrapper .ribbon-attachment {
    position: absolute;
    width: 32px;
    height: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--neutral-border);
    border-radius: 2px;
    z-index: 10;
    pointer-events: none;
}
#cinematic-wrapper .ribbon-attachment.top-right    { top: -4px;    right: -10px; transform: rotate(45deg);   }
#cinematic-wrapper .ribbon-attachment.top-left     { top: -4px;    left: -10px;  transform: rotate(-45deg);  }
#cinematic-wrapper .ribbon-attachment.bottom-right { bottom: -4px; right: -10px; transform: rotate(-45deg);  }
#cinematic-wrapper .ribbon-attachment.bottom-left  { bottom: -4px; left: -10px;  transform: rotate(45deg);   }


/* ============================================================
   FEATURES SECTION (4 hover cards)
   Each card carries its own accent color (nth-child below) reused by
   the icon badge, the title's accent word, and the oversized watermark
   icon — so "brand identity → icon → glow" stays one visual thread
   instead of an unrelated decorative blob.
   ============================================================ */
.features-section {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 30px;
    margin-bottom: 5vh;
}

/* برگ برنده cards — purely informational (no links, no buttons, the card
   itself never focusable). Everything sits in normal flow: icon, heading
   and sub-heading centred at rest; hovering opens the description row
   underneath (a 0fr→1fr grid-row transition), which glides the icon and
   heading up to make room. Nothing is absolutely positioned over anything
   else, so no text can ever overlap, whatever its length or the card's
   width. min-height is sized for the opened state, so opening doesn't
   resize the row. Phones/tablets and touch screens show the description
   permanently (see responsive.css). */
.feature-card {
    position: relative;
    z-index: 20;
    min-height: 264px;
    padding: 26px 22px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--neutral-soft-bg);
    border: 1px solid var(--neutral-border);
    border-top: 1px solid var(--glass-border-highlight);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    contain: layout paint;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                background-color 0.4s ease,
                border-color 0.4s ease;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-hover);
    background-color: var(--color-surface-elevated);
    border-color: var(--feature-accent, var(--accent-gold));
}

/* Per-card accent — the icon badge, the watermark and the top rule. */
.feature-card:nth-child(1) { --feature-accent: #2C7A7B; }
.feature-card:nth-child(2) { --feature-accent: #B7791F; }
.feature-card:nth-child(3) { --feature-accent: #6B46C1; }
.feature-card:nth-child(4) { --feature-accent: var(--accent-gold); }

.feature-icon-badge {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-soft-bg); /* fallback for browsers without color-mix() */
    background-color: color-mix(in srgb, var(--feature-accent) 12%, transparent);
    color: var(--feature-accent);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-icon-badge svg { width: 22px; height: 22px; }
.feature-card:hover .feature-icon-badge { transform: scale(0.92); }

/* The same icon, large and very faint, tucked into the bottom-left corner
   — kept well below text contrast so it never competes with the copy. */
.feature-glow-icon {
    position: absolute;
    bottom: -26px;
    left: -26px;
    width: 120px;
    height: 120px;
    color: var(--feature-accent);
    opacity: 0.06;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover .feature-glow-icon {
    opacity: 0.1;
    transform: rotate(-8deg) scale(1.08);
}

.feature-title {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 240px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--primary-navy);
    text-wrap: balance;
}

.feature-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease,
                margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover .feature-content {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 12px;
    transition-delay: 0s, 0.1s, 0s;
}
.feature-desc {
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--feature-accent) 22%, transparent);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.95;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* A quiet "there's more" cue at the bottom centre, gone once opened. */
.feature-more-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 1;
    display: flex;
    color: var(--ink-muted);
    opacity: 0.7;
    transform: translateX(-50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.feature-more-hint svg { width: 14px; height: 14px; }
.feature-card:hover .feature-more-hint {
    opacity: 0;
    transform: translate(-50%, 4px);
}

/* Carousel chrome (arrows + dots) only appears at the ≤768px breakpoint
   (see responsive.css) where .features-section itself becomes the
   scrolling track — desktop/tablet render it as a plain grid and never
   see these controls. `display: contents` keeps the wrapper invisible to
   layout on wider screens so the grid behaves exactly as it did before. */
.features-carousel-wrap { display: contents; }
.features-arrow,
.features-dots { display: none; }


/* ============================================================
   INFO CARDS — SHARED BASE STYLES
   ============================================================ */
.extra-info-section {
    width: 100%;
    max-width: 1280px;
    padding: 0 30px;
    margin: 0 auto 5vh auto;
    position: relative;
    z-index: 20;
}

.info-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: var(--neutral-soft-bg);
    border-radius: 32px;
    padding: 45px 60px 45px 120px;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--neutral-border);
    box-shadow: 0 20px 40px rgba(26, 54, 93, 0.04);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease, background-color 0.4s ease, border-color 0.4s ease;
}
.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(26, 54, 93, 0.08);
}

.info-header-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 30px;
}

.info-title {
    font-family: var(--font-display-fa);
    font-size: 42px;
    font-weight: 900;
    color: var(--primary-navy);
    margin: 0;
    letter-spacing: -1.5px;
}

.info-subtitle {
    font-family: var(--font-display-fa);
    font-size: 22px;
    font-weight: 800;
    color: var(--accent-gold);
    margin: 0;
}


.info-body-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: 20px;
}

.info-body-text-block {
    display: flex;
    gap: 18px;
    flex: 1;
    align-items: stretch;
}

.info-vertical-line {
    width: 6px;
    background: linear-gradient(to bottom, var(--primary-navy), var(--accent-gold));
    border-radius: 6px;
    flex-shrink: 0;
}

.info-body-text {
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    line-height: 2.1;
    margin: 0;
    text-align: right;
}

/* Decorative rotated background text (hidden on mobile) */
.info-content-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}
.vertical-text {
    font-family: var(--font-display-fa);
    font-size: 110px;
    font-weight: 900;
    transform: rotate(-90deg) translateY(-20px);
    white-space: nowrap;
    position: absolute;
    color: var(--neutral-border);
    opacity: 0.6;
    letter-spacing: -2px;
}


/* ============================================================
   ONLINE CLASS CARD
   ============================================================ */
.online-class-card {
    overflow: visible !important;
    padding: 45px 50px 45px 350px !important;
    /* The character is sized as a % of this card's height, so the card keeps
       a fixed minimum (its height with the original copy) — shorter copy
       must not shrink the character. */
    min-height: 374px !important;
    align-items: center;
}
.online-class-card .info-header-row { margin-bottom: 15px; }
.online-class-card .info-body-text  { font-size: 17px; line-height: 1.9; }

.online-kid-wrapper {
    position: absolute;
    left: -40px;
    bottom: -95px;
    height: 145%;
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
}
.online-kid-image {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom left;
    filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.15));
}

.online-class-body  { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin-top: 15px; }
.online-class-action { width: auto; display: flex; justify-content: flex-start; flex-shrink: 0; z-index: 1; }


/* ============================================================
   SELF-STUDY CARD
   ============================================================ */
.self-study-card {
    overflow: visible !important;
    padding: 45px 50px 45px 310px !important;
    min-height: 374px !important; /* see .online-class-card */
    align-items: center;
}
.self-study-card .info-header-row { margin-bottom: 15px; }
.self-study-card .info-body-text  { font-size: 17px; line-height: 1.9; }

.kid-image-wrapper {
    position: absolute;
    left: -25px;
    bottom: 0;
    height: 110%;
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
}
.kid-image {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom left;
    filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.1));
}

.self-study-body   { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin-top: 15px; }
.self-study-action { width: auto; display: flex; justify-content: flex-start; padding-right: 0; flex-shrink: 0; }


/* ============================================================
   PLACEMENT TEST BANNER
   ============================================================ */
.placement-banner-section {
    width: 100%;
    max-width: 1150px;
    padding: 0 30px;
    margin: 0 auto 8vh auto;
    position: relative;
    z-index: 20;
}

.placement-card {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(248, 80, 248, 0.16), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(76, 141, 255, 0.2), transparent 46%),
        var(--primary-navy-dark);
    border-radius: 32px;
    padding: 44px 52px;
    text-decoration: none;
    cursor: pointer;
    /* A subtly accent-tinted border at rest so the card already reads as
       "framed/interactive" before the user hovers. */
    border: 1px solid rgba(248, 80, 248, 0.2);
    box-shadow: 0 20px 40px rgba(26, 54, 93, 0.15);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease, border-color 0.5s ease, background-color 0.4s ease;
    position: relative;
    overflow: hidden;
}
.placement-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 25px 50px rgba(26, 54, 93, 0.25), 0 0 30px rgba(248, 80, 248, 0.16);
    border-color: rgba(248, 80, 248, 0.55);
}

.placement-content-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: start;
    position: relative;
    z-index: 1;
}

/* «تعیین سطح» — real text in the Potk face (it used to be a picture), same
   size and the same magenta as the old graphic. */
.placement-heading {
    display: block;
    font-family: 'Potk', var(--font-display-fa);
    font-weight: 400;
    font-size: clamp(64px, 9vw, 104px);
    line-height: 1.15;
    color: #F850F8;
    text-shadow: 0 0 34px rgba(248, 80, 248, 0.3);
    transition: text-shadow 0.4s ease, transform 0.4s ease;
}
.placement-card:hover .placement-heading {
    text-shadow: 0 0 38px rgba(248, 80, 248, 0.55);
    transform: scale(1.03);
    transform-origin: right center;
}

.placement-title {
    margin: 0;
    font-family: var(--font-display-fa);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.5;
    color: #F8FAFC;
}

.placement-subtitle {
    font-family: var(--font-body);
    font-size: 15.5px;
    font-weight: 500;
    color: rgba(248, 250, 252, 0.88);
    line-height: 2;
    margin: 0;
    max-width: 560px;
}

/* The call to action: a pill with its own icon disc and an arrow that slides on hover.
   It keeps the site's .btn-cta colours; only the shape is richer. */
.placement-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 8px 10px 8px 22px;
    font-size: 15px;
    font-weight: 800;
}
.placement-cta-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}
.placement-cta-icon svg { width: 17px; height: 17px; }
.placement-cta-arrow { width: 18px; height: 18px; transition: transform 0.25s ease; }
.placement-card:hover .placement-cta {
    box-shadow: 0 12px 25px rgba(93, 13, 24, 0.45);
    transform: translateY(-2px);
}
.placement-card:hover .placement-cta-arrow { transform: translateX(-5px); }

/* Vector side: rings and a swoosh, an emblem tile and floating chips (like the teach banner). */
.placement-visual { position: relative; height: 240px; }
.placement-rings { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(248, 250, 252, 0.22); }
.placement-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
    border-radius: 34px;
    transform: translate(-50%, -50%) rotate(-6deg);
    background: linear-gradient(140deg, #4C8DFF 0%, #7B3FE4 52%, #F850F8 100%);
    color: #FFFFFF;
    box-shadow: 0 24px 50px -16px rgba(248, 80, 248, 0.55);
    transition: transform 0.5s ease;
}
.placement-emblem svg { width: 58px; height: 58px; }
.placement-card:hover .placement-emblem { transform: translate(-50%, -50%) rotate(2deg) scale(1.05); }
.placement-chip {
    position: absolute;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    font-size: 12.5px;
    font-weight: 700;
    color: #F8FAFC;
    white-space: nowrap;
}
.placement-chip--a { top: 10%; right: 6%; color: #FF9CFF; }
.placement-chip--b { bottom: 12%; left: 0; font-family: 'Inter', var(--font-body); }
.placement-chip--c { top: 22%; left: 4%; font-family: 'Inter', var(--font-body); }
@media (max-width: 991px) {
    .placement-card { grid-template-columns: 1fr; padding: 36px 28px; }
    .placement-visual { display: none; }
}


/* ============================================================
   FEEDBACK & SUGGESTIONS BANNER
   A quieter sibling of .placement-card, same dark-navy "framed link"
   family and hover lift, but text-only (no title graphic) and a plain
   .btn-cta instead of a full-bleed image — this is an invitation to talk,
   not a feature to sell, so it stays understated on the homepage rather
   than competing with the placement-test banner above it.
   ============================================================ */
.feedback-banner-section {
    width: 100%;
    max-width: 1150px;
    padding: 0 30px;
    margin: 0 auto 8vh auto;
    position: relative;
    z-index: 20;
}

.feedback-banner-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background-color: var(--primary-navy-dark);
    border-radius: 32px;
    padding: 38px 50px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(227, 0, 15, 0.16);
    box-shadow: 0 20px 40px rgba(26, 54, 93, 0.15);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}
.feedback-banner-card:hover {
    transform: translateY(-6px) scale(1.005);
    box-shadow: 0 25px 50px rgba(26, 54, 93, 0.25), 0 0 30px rgba(227, 0, 15, 0.12);
    border-color: rgba(227, 0, 15, 0.55);
}

.feedback-banner-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: right;
}
/* The card is dark navy in BOTH themes, so the shared .badge (burgundy on a
   pale tint) all but vanished here — a light, translucent chip instead. */
.feedback-banner-card .badge {
    background-color: rgba(248, 250, 252, 0.08);
    border-color: rgba(248, 250, 252, 0.16);
    color: #F5C2CC;
}
.feedback-banner-title {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.6;
    color: #F8FAFC;
    margin: 0;
    text-wrap: balance;
}
.feedback-banner-subtitle {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.95;
    color: rgba(248, 250, 252, 0.84);
    margin: 0;
    max-width: 520px;
    text-wrap: pretty;
}

.feedback-banner-cta { flex-shrink: 0; white-space: nowrap; padding: 13px 26px; font-size: 14px; }
.feedback-banner-cta svg { width: 15px; height: 15px; margin-left: 8px; }
.feedback-banner-card:hover .feedback-banner-cta {
    box-shadow: 0 12px 25px rgba(93, 13, 24, 0.45);
    transform: translateY(-2px);
}

/* ============================================================
   TEACHER RECRUITMENT BANNER (index.html → teach.html)
   A light glass card — distinct from the dark placement/feedback
   banners around it: text + the two tracks + CTA on one side, a
   small emblem with floating chips on the other.
   ============================================================ */
.teach-banner-section {
    width: 100%;
    max-width: 1150px;
    padding: 0 30px;
    margin: 0 auto 6vh;
    position: relative;
    z-index: 20;
}
.teach-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 40px 48px;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at 0% 100%, var(--accent-soft-bg), transparent 45%),
        var(--glass-bg);
}
.teach-banner-content { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.teach-banner-title {
    margin: 0;
    font-family: var(--font-display-fa);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--primary-navy);
}
.teach-banner-text { margin: 0; max-width: 560px; font-size: 14.5px; line-height: 2.05; color: var(--ink-soft); }
.teach-banner-tracks { display: flex; flex-wrap: wrap; gap: 10px; }
.teach-banner-track {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--neutral-border);
    background-color: var(--color-surface);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}
.teach-banner-track-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--neutral-soft-bg);
    color: var(--primary-navy);
}
.teach-banner-track-icon.is-accent { background-color: var(--accent-soft-bg); color: var(--accent-gold); }
.teach-banner-track-icon svg { width: 15px; height: 15px; }
.teach-banner-cta { margin-top: 6px; gap: 8px; padding: 13px 26px; font-size: 14.5px; font-weight: 700; }
.teach-banner-cta svg { width: 17px; height: 17px; transition: transform 0.25s ease; }
.teach-banner-cta:hover svg { transform: translateX(-4px); }

.teach-banner-visual { position: relative; height: 220px; }
.teach-banner-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
    border-radius: 34px;
    transform: translate(-50%, -50%) rotate(-6deg);
    background: linear-gradient(140deg, #1A365D 0%, #3A2347 55%, #6B1422 100%);
    color: #FFFFFF;
    box-shadow: 0 24px 50px -18px rgba(26, 54, 93, 0.55);
}
.teach-banner-emblem svg { width: 58px; height: 58px; }
.teach-banner-chip {
    position: absolute;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    border: 1px solid var(--neutral-border);
    box-shadow: var(--glass-shadow);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-navy);
    white-space: nowrap;
}
.teach-banner-chip--a { top: 12%; right: 4%; }
.teach-banner-chip--b { bottom: 10%; left: 2%; color: var(--accent-gold); }
.teach-banner-chip--c { top: 22%; left: 6%; font-family: 'Inter', var(--font-body); }
@media (max-width: 991px) {
    .teach-banner { grid-template-columns: 1fr; padding: 32px 26px; }
    .teach-banner-visual { display: none; }
}
@media (max-width: 768px) {
    .teach-banner-section { padding: 0 16px; }
    .teach-banner { padding: 28px 20px; border-radius: 26px; }
    .teach-banner-title { font-size: 22px; }
    .teach-banner-text { font-size: 14px; }
    .teach-banner-cta { width: 100%; justify-content: center; }
}