/*
 * special_program.css — dedicated stylesheet for the FRJ-27 ("SSC-27")
 * flagship landing page (resources/views/frontend/default/course/
 * landing_frj27.blade.php) ONLY. Scoped entirely under .frj so nothing
 * here can ever leak onto another page; loaded via a single @push('css')
 * link on that view, served/compressed through CompressedAssetController
 * like the site's other big stylesheets.
 *
 * Structural change from the previous inline version: a persistent
 * two-column layout (.frj-layout) — marketing content scrolls in
 * .frj-main, a pricing/enroll widget stays pinned in .frj-sidebar via
 * position:sticky for the full height of the content, not just the hero.
 * Collapses to a single column (sidebar first, non-sticky) below 980px.
 */

.frj {
    /* Dark theme throughout, on purpose - every background in this file
       (card fills, section tints, borders) reads off these variables, so
       redefining them here is what actually flips the whole page instead
       of hunting down every individual #fff. The few remaining hardcoded
       #fff rules below (cards, buttons, countdown units) are converted to
       translucent light-on-dark fills matching the glass-card look the
       hero already uses for its pills/instructor chips. */
    --frj-dark: var(--dark-bg, #050328);
    --frj-dark-soft: #120d3f;
    --frj-card: rgba(255, 255, 255, 0.045);
    --frj-card-hover: rgba(255, 255, 255, 0.08);
    --frj-ink: #f5f4fb;
    --frj-muted: rgba(245, 244, 251, 0.62);
    --frj-muted-light: rgba(245, 244, 251, 0.42);
    --frj-border: rgba(255, 255, 255, 0.12);
    --frj-tint: #0d0a30;
    --frj-success: #22c55e;
    --frj-success-bg: rgba(22, 163, 74, 0.1);
    --frj-urgent: #dc2626;
    --frj-urgent-2: #f59e0b;
    --frj-urgent-grad: linear-gradient(100deg, var(--frj-urgent), var(--frj-urgent-2));
    --frj-gold-grad: var(--gradient-primary, linear-gradient(100deg, #efcc2f, #ffdd64 55%, #fff264));
    --frj-radius-sm: 10px;
    --frj-radius: 16px;
    --frj-radius-lg: 22px;
    --frj-shadow-card: 0 2px 10px rgba(18, 13, 63, 0.05), 0 1px 2px rgba(18, 13, 63, 0.04);
    --frj-shadow-lifted: 0 24px 60px -16px rgba(5, 3, 40, 0.28);
    color: var(--frj-ink);
    font-family: 'Poppins', 'Anek Bangla', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.frj .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.frj img,
.frj svg {
    max-width: 100%;
}

/* ───────────────────── Section rhythm ───────────────────── */

.frj-section {
    padding: 72px 0;
    background: var(--frj-dark);
}

.frj-section--tint {
    background: var(--frj-tint);
}

.frj-section--dark {
    background: var(--frj-dark);
    color: #fff;
}

.frj-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 44px;
}

.frj-section-head h2 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 10px 0 10px;
    text-wrap: balance;
}

.frj-section-head p {
    color: var(--frj-muted);
    margin: 0;
    line-height: 1.7;
}

.frj-section-head--light p {
    color: rgba(255, 255, 255, 0.6);
}

.frj-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    padding: 6px 14px;
    border-radius: 20px;
}

.frj-eyebrow--light {
    color: #ffd666;
    background: rgba(255, 214, 102, 0.12);
}

/* ───────────────────── Page layout (sticky sidebar) ───────────────────── */

.frj-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
}

.frj-main {
    min-width: 0;
}

.frj-sidebar {
    position: sticky;
    top: 24px;
}

/* ───────────────────── Hero ───────────────────── */

.frj-hero {
    /* The site's fixed, translucent .glass-nav floats over every page via
       position:fixed, and body itself carries padding-top: var(--nav-
       height) to push normal content clear of it - .breadcum-area
       (app.min.css) is the established pattern for a section that wants
       its own background to extend up behind that glass nav instead of
       leaving a plain gap: pull the box back up by the nav's height, then
       hand that same amount straight back as extra padding-top so the
       actual content still lands where it should, just with the
       background (not the content) sitting behind the nav. */
    margin-top: calc(-1 * var(--nav-height));
    padding-top: calc(var(--nav-height) + 48px);
    background:
        radial-gradient(circle at 12% 15%, rgba(255, 214, 102, 0.14), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(220, 38, 38, 0.18), transparent 50%),
        linear-gradient(180deg, var(--frj-dark-soft) 0%, var(--frj-dark) 60%);
    color: #fff;
    overflow: hidden;
}

.frj-hero .frj-layout {
    padding-bottom: 56px;
}

.frj-hero-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.18;
    margin: 16px 0 18px;
    text-wrap: balance;
}

.frj-hero-sub {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.75;
    max-width: 560px;
    margin: 0 0 26px;
}

/* Mobile-only re-statement of the hero excerpt, shown below the sidebar
   instead of under the title — see @media (max-width: 980px) below for
   the actual display:block + layout-reorder. */
.frj-hero-sub-mobile {
    display: none;
}

.frj-hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ───────────────────── Buttons ───────────────────── */

.frj-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--frj-gold-grad);
    color: var(--frj-dark) !important;
    font-weight: 700;
    font-size: 15px;
    padding: 15px 30px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(255, 214, 102, 0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.frj-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(255, 214, 102, 0.65);
    color: var(--frj-dark) !important;
}

.frj-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 15px 26px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.frj-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.frj-btn-block {
    display: flex;
    width: 100%;
    margin-top: 0;
}

.frj-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--frj-card);
    color: var(--frj-ink);
    font-weight: 600;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1.5px solid var(--frj-border);
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.frj-btn-outline:hover {
    border-color: var(--frj-urgent);
    color: #fff;
    background: var(--frj-urgent);
}

/* ───────────────────── Sidebar card ───────────────────── */

.frj-sidebar-card {
    background: var(--frj-dark-soft);
    border: 1px solid var(--frj-border);
    color: var(--frj-ink);
    border-radius: var(--frj-radius-lg);
    overflow: hidden;
    box-shadow: var(--frj-shadow-lifted);
}

/* Course thumbnail, full-bleed across the card's own rounded top corners
   (clipped by .frj-sidebar-card's overflow: hidden) rather than inset
   with padding — no text overlays this anymore, so there's no reason to
   leave any gap around it. */
.frj-sidebar-banner {
    position: relative;
    line-height: 0;
}

.frj-sidebar-banner-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

.frj-sidebar-body {
    padding: 22px 24px 26px;
}

.frj-sidebar-enrolled {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--frj-tint);
    border: 1px solid var(--frj-border);
    border-radius: var(--frj-radius-sm);
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--frj-ink);
    margin-bottom: 18px;
}

.frj-sidebar-enrolled strong {
    color: var(--frj-urgent);
    font-weight: 800;
}

.frj-sidebar-checklist {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.frj-sidebar-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--frj-ink);
}

.frj-sidebar-checklist i {
    color: var(--frj-success);
    font-size: 13px;
    margin-top: 3px;
    flex-shrink: 0;
}

.frj-sidebar-checklist-more {
    font-size: 12.5px;
    color: var(--frj-muted);
    margin: -4px 0 20px;
    padding-left: 22px;
}

/* ─── Price/countdown block — lives in the hero's main column (not the
   sidebar), right after the instructor row. The explicit Bangla end date
   sits BELOW the box, as its own caption line, not inside it. ─── */

.frj-hero-pricebox {
    max-width: 460px;
    margin-bottom: 28px;
}

/* Sits on the dark hero background now (not the white sidebar card it
   used to live in) — a solid white/amber wash instead of a low-opacity
   tint, or it would read as barely-there against var(--frj-dark).
   position:relative + overflow:hidden contain the ::before sweep below. */
.frj-early-bird {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--frj-radius);
    padding: 32px 26px 26px;
    box-shadow: 0 8px 28px -10px rgba(245, 158, 11, 0.25);
}

/* Continuous diagonal light sweep — one pass every ~4.5s, then a brief
   hold before repeating, so it reads as a deliberate premium accent
   rather than a frantic loop. */
.frj-early-bird::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    transform: skewX(-20deg);
    animation: frj-price-sweep 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes frj-price-sweep {
    0% {
        left: -60%;
    }
    40%, 100% {
        left: 130%;
    }
}

/* Sits inside .frj-early-bird now, between the price row and the
   countdown, not below the box as its own outside caption. */
.frj-early-bird-date-below {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 16px;
    line-height: 1.5;
}

.frj-early-bird-date-below strong {
    color: #ffd666;
}

.frj-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    line-height: 1.3;
}

.frj-price-label {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--frj-muted);
    flex-shrink: 0;
}

.frj-price-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

/* Animated gradient-glow price text — background-clip:text means a
   child span (.frj-taka) does NOT inherit this rendering automatically,
   so the taka symbol gets its own solid color instead, deliberately
   distinct from the digits rather than trying to match the animation. */
.frj-price-now {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    background-image: linear-gradient(90deg, #f59e0b, #ffd666, #f97316, #ffd666, #f59e0b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: frj-price-gradient-shift 3.5s ease-in-out infinite, frj-price-glow-pulse 2.2s ease-in-out infinite;
}

@keyframes frj-price-gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes frj-price-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.35));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.65));
    }
}

.frj-taka {
    font-size: 0.55em;
    font-weight: 700;
    margin-left: 3px;
    color: #ffd666;
    -webkit-text-fill-color: #ffd666;
}

.frj-price-row--lg .frj-price-now {
    font-size: 52px;
}

.frj-price-was {
    font-size: 16px;
    color: var(--frj-muted-light);
    text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
    .frj-early-bird::before {
        animation: none;
        display: none;
    }

    .frj-price-now {
        animation: none;
        filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.45));
    }
}

.frj-price-save {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--frj-success);
    background: var(--frj-success-bg);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.frj-countdown {
    display: flex;
    gap: 7px;
}

.frj-cd-unit {
    flex: 1;
    text-align: center;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    padding: 8px 4px;
}

.frj-cd-unit span {
    display: block;
    font-weight: 800;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: var(--frj-ink);
}

.frj-cd-unit small {
    font-size: 9.5px;
    color: var(--frj-muted);
    font-weight: 600;
}

.frj-price-facts {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--frj-muted);
}

.frj-price-facts li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.frj-price-facts i {
    color: var(--frj-muted-light);
    width: 14px;
}

.frj-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

/* ───────────────────── Sidebar "watch before enrolling" video card ───────────────────── */
/* Reuses .frj-sidebar-card/.frj-sidebar-body chrome (border, radius,
   shadow, padding) from frj_sidebar_card.blade.php's styles so it stays
   visually aligned with the card stacked above it. */

.frj-video-card {
    margin-top: 18px;
}

.frj-video-card-body {
    text-align: center;
}

.frj-video-card-body > i {
    font-size: 26px;
    color: var(--frj-urgent-2);
    margin-bottom: 10px;
}

.frj-video-card-body h4 {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.5;
}

.frj-video-card-body p {
    font-size: 12.5px;
    color: var(--frj-muted);
    margin: 0 0 16px;
    line-height: 1.6;
}

.frj-btn-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--frj-urgent-grad);
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    padding: 13px 24px;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.18s ease;
}

.frj-btn-video:hover {
    transform: translateY(-2px);
    color: #fff !important;
}

/* ───────────────────── Pain points ───────────────────── */

.frj-pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.frj-pain-card {
    background: var(--frj-card);
    border: 1px solid var(--frj-border);
    border-radius: var(--frj-radius);
    padding: 22px;
    box-shadow: var(--frj-shadow-card);
}

.frj-pain-card i {
    color: var(--frj-urgent);
    font-size: 20px;
    margin-bottom: 10px;
    display: block;
}

.frj-pain-card p {
    margin: 0;
    font-weight: 600;
    line-height: 1.65;
}

/* ───────────────────── Timeline ───────────────────── */

.frj-timeline {
    max-width: 100%;
    position: relative;
}

.frj-timeline::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(255, 255, 255, 0.12);
}

.frj-timeline-item {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 30px;
}

.frj-timeline-item:last-child {
    padding-bottom: 0;
}

.frj-timeline-marker {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--frj-gold-grad);
    color: var(--frj-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    z-index: 1;
}

.frj-timeline-body h4 {
    margin: 6px 0 6px;
    font-size: 17px;
    font-weight: 700;
}

.frj-timeline-body p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.65;
    font-size: 14.5px;
}

/* ───────────────────── Subjects ───────────────────── */

.frj-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.frj-subject-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--frj-card);
    border: 1px solid var(--frj-border);
    border-radius: var(--frj-radius);
    padding: 16px 20px;
    font-weight: 700;
    font-size: 14.5px;
    box-shadow: var(--frj-shadow-card);
    /* Guarantees every card matches height regardless of row (grid's
       default row-stretch only equalizes cards within the same row, not
       across the whole 2-row grid) or how many lines the subject name
       wraps to. */
    min-height: 84px;
}

.frj-subject-card i {
    font-size: 20px;
    color: var(--frj-urgent);
    flex-shrink: 0;
}

/* Real NCTB textbook cover art — portrait, so width (not height) is
   fixed and the cover's natural aspect ratio does the rest. */
.frj-subject-card img {
    width: 42px;
    height: auto;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ───────────────────── Features ───────────────────── */

.frj-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.frj-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--frj-card);
    border: 1px solid var(--frj-border);
    border-radius: var(--frj-radius);
    padding: 17px 19px;
    box-shadow: var(--frj-shadow-card);
}

.frj-feature-card i {
    color: var(--frj-success);
    font-size: 17px;
    margin-top: 2px;
    flex-shrink: 0;
}

.frj-feature-card p {
    margin: 0;
    line-height: 1.6;
    font-size: 14.5px;
}

/* ───────────────────── Instructors ───────────────────── */

.frj-instructor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.frj-instructor-card {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    background: var(--frj-card);
    border: 1px solid var(--frj-border);
    border-radius: var(--frj-radius);
    padding: 22px;
    box-shadow: var(--frj-shadow-card);
}

.frj-instructor-card img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid rgba(255, 214, 102, 0.3);
}

.frj-instructor-info {
    min-width: 0;
}

.frj-instructor-card h4 {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 700;
}

.frj-instructor-institution {
    margin: 0 0 3px;
    font-size: 12.5px;
    color: var(--frj-muted-light);
}

.frj-instructor-subjects {
    margin: 0;
    font-size: 13px;
    color: var(--frj-muted);
}

/* ───────────────────── Prerequisite checklist ───────────────────── */

.frj-checklist {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.frj-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--frj-card);
    border: 1px solid var(--frj-border);
    border-radius: var(--frj-radius-sm);
    padding: 14px 18px;
    box-shadow: var(--frj-shadow-card);
}

.frj-checklist-item i {
    color: var(--frj-success);
    margin-top: 3px;
    flex-shrink: 0;
}

/* ───────────────────── FAQ ───────────────────── */

.frj-faq {
    max-width: 760px;
    margin: 0 auto;
}

.frj-faq-item {
    border-bottom: 1px solid var(--frj-border);
}

.frj-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    padding: 19px 4px;
    text-align: left;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    color: var(--frj-ink);
}

.frj-faq-q i {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--frj-urgent);
}

.frj-faq-item.is-open .frj-faq-q i {
    transform: rotate(45deg);
}

.frj-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.frj-faq-a-inner {
    padding: 0 4px 19px;
    color: var(--frj-muted);
    line-height: 1.75;
    font-size: 14.5px;
}

.frj-faq-a-inner p {
    margin: 0 0 10px;
}

/* ───────────────────── Final CTA ───────────────────── */

/* The shared footer (footer.blade.php) carries Bootstrap's mt-5, which
   sits outside this page's own dark background and exposes the site's
   default white body background as a gap before the footer's own
   background starts. special_program.css only ever loads on this one
   page, so overriding it here is safe — it can't affect any other
   page that uses the same shared footer. */
footer.footer-area-new {
    margin-top: 0 !important;
}

.frj-final-cta {
    background: var(--frj-dark);
    padding: 64px 0;
}

.frj-final-cta-inner {
    background: var(--frj-gold-grad);
    border-radius: var(--frj-radius-lg);
    padding: 56px 40px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    color: var(--frj-dark);
}

.frj-final-cta h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px;
    text-wrap: balance;
}

.frj-final-cta p {
    max-width: 680px;
    margin: 0 auto 26px;
    opacity: 0.8;
    line-height: 1.6;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .frj-final-cta p {
        max-width: 90%;
        white-space: normal;
    }
}

.frj-final-cta .frj-btn-primary {
    background: var(--frj-dark);
    color: #fff !important;
    box-shadow: 0 10px 24px -8px rgba(5, 3, 40, 0.4);
}

/* ───────────────────── Mobile floating enroll bar ───────────────────── */
/* Hidden by default (desktop already has the persistent sticky sidebar
   CTA) — switched to display:flex only under 980px, see media query
   below. z-index sits under --z-fixed (1030, the site nav) on purpose;
   they never overlap spatially but this keeps the stacking order sane. */
.frj-float-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(8, 10, 20, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--frj-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}

.frj-float-cta-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.frj-float-cta-label {
    font-size: 11px;
    color: var(--frj-muted);
}

.frj-float-cta-amount-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.frj-float-cta-amount {
    font-size: 19px;
    font-weight: 800;
    color: var(--frj-ink);
}

.frj-float-cta-was {
    font-size: 13px;
    font-weight: 600;
    color: var(--frj-muted);
    text-decoration: line-through;
}

.frj-float-cta .frj-btn-primary {
    padding: 12px 22px;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ───────────────────── Responsive ───────────────────── */

@media (max-width: 980px) {
    .frj-layout {
        grid-template-columns: 1fr;
    }

    .frj-sidebar {
        position: static;
        margin-bottom: 20px;
    }

    .frj-float-cta {
        display: flex;
    }

    /* Clearance so the floating bar never covers the real Final CTA
       button once the visitor scrolls all the way down. */
    .frj-final-cta {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .frj-hero {
        padding-top: calc(var(--nav-height) + 32px);
    }

    /* Reordered mobile hero: centered title, no excerpt directly under
       it (the price box already follows in DOM order). The hero's own
       enroll button was removed from the markup entirely (site-wide,
       not just mobile) — the sidebar's enroll button is the only one
       anywhere now. .frj-hero-cta (just the "কীভাবে কাজ করে দেখো"
       ghost button now) stays visible here. Excerpt re-appears in its
       own box below the sidebar instead. */
    .frj-eyebrow {
        display: block;
        width: fit-content;
        margin: 0 auto 10px;
    }

    .frj-hero-title {
        text-align: center;
    }

    .frj-hero-sub {
        display: none;
    }

    .frj-hero-sub-mobile {
        display: block;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--frj-radius);
        padding: 18px 20px;
        margin-bottom: 32px;
    }

    .frj-hero-sub-mobile p {
        margin: 0;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.75;
    }

    .frj-pain-grid,
    .frj-feature-grid {
        grid-template-columns: 1fr;
    }

    .frj-subject-grid,
    .frj-instructor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .frj-section {
        padding: 52px 0;
    }

    .frj-hero-title {
        font-size: 30px;
    }

    .frj-hero-sub {
        font-size: 15.5px;
    }

    .frj-subject-grid,
    .frj-instructor-grid {
        grid-template-columns: 1fr;
    }

    .frj-cd-unit span {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .frj-btn-primary,
    .frj-btn-ghost,
    .frj-btn-outline {
        transition: none;
    }
}