/* UX Overrides - delivered last to ensure section-scoped improvements take effect */
:root {
    --ux-gap-vertical: 28px;
    --ux-max-width: 1100px;

    /* ── NEW UX TOKENS ── */
    --glow-orange:   0 0 0 0 rgba(255,106,0,0.55);
    --shadow-card:   0 8px 32px rgba(6,9,22,0.07);
    --shadow-card-hover: 0 22px 56px rgba(6,9,22,0.13);
    --radius-card:   20px;
    --gradient-hero: linear-gradient(135deg,#ff6a00 0%,#ff8c3a 55%,#ff9f1c 100%);
    --gradient-cool: linear-gradient(135deg,#6366f1,#06b6d4);
    --gradient-warm: linear-gradient(135deg,#f97316,#facc15);
    --transition-bounce: all 360ms cubic-bezier(0.34,1.56,0.64,1);
}

/* =========================================
   SECTION SCROLL-REVEAL
========================================= */
.section-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2,0.9,0.2,1);
}
.section-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* stagger children inside any .stagger-children parent */
.stagger-children > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms ease, transform 500ms cubic-bezier(0.2,0.9,0.2,1);
}
.stagger-children.is-visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: 0ms; }
.stagger-children.is-visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: 90ms; }
.stagger-children.is-visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay: 180ms; }
.stagger-children.is-visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay: 270ms; }
.stagger-children.is-visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay: 360ms; }
.stagger-children.is-visible > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay: 450ms; }

/* =========================================
   RIPPLE EFFECT — all primary buttons
========================================= */
.ripple-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ripple-btn .ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transform: scale(0);
    animation: rippleExpand 600ms linear forwards;
    pointer-events: none;
    z-index: 9;
}
@keyframes rippleExpand {
    to { transform: scale(4); opacity: 0; }
}

/* =========================================
   CARD UPGRADE — gradient border on hover
========================================= */
.card-clean,
.curriculum-card-v2,
.testimonials-card,
.ta-card,
.instructors-card-v2 {
    box-shadow: var(--shadow-card);
    transition: var(--transition-bounce);
}
.card-clean:hover,
.curriculum-card-v2:hover,
.testimonials-card:hover,
.ta-card:hover,
.instructors-card-v2:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-8px);
}

/* Gradient top-border accent on hover */
.curriculum-card-v2::before,
.testimonials-card::before,
.ta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient-hero);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 320ms ease;
    pointer-events: none;
}
.curriculum-card-v2:hover::before,
.testimonials-card:hover::before,
.ta-card:hover::before { opacity: 1; }

/* =========================================
   BUTTON GLOW PULSE — primary CTA buttons
========================================= */
@keyframes glowPulse {
    0%   { box-shadow: var(--glow-orange); }
    70%  { box-shadow: 0 0 0 14px rgba(255,106,0,0); }
    100% { box-shadow: 0 0 0 0   rgba(255,106,0,0); }
}
.btn-glow {
    animation: glowPulse 2.2s ease-out infinite;
}

/* =========================================
   NAVBAR — gradient underline on active link
========================================= */
.navbar-nav .nav-link {
    position: relative;
}
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-hero);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 280ms cubic-bezier(0.2,0.9,0.2,1);
}
.navbar-nav .nav-link:hover::after { transform: scaleX(1); }

/* Fallback toggler icon to keep mobile hamburger visible in bundled mode */
.navbar-toggler-icon {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    position: relative;
    background: none !important;
}

.navbar-toggler-icon::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 6px;
    height: 2px;
    background: rgba(33, 37, 41, 0.9);
    border-radius: 2px;
    box-shadow: 0 6px 0 rgba(33, 37, 41, 0.9), 0 -6px 0 rgba(33, 37, 41, 0.9);
}

.navbar-toggler-fallback {
    display: inline-block;
    font-size: 1.45rem;
    line-height: 1;
    color: rgba(33, 37, 41, 0.9);
    font-weight: 700;
}

/* =========================================
   PRICING CARD — animated gradient border + glow
========================================= */
.pricing-card-featured {
    background: linear-gradient(160deg, #fff 0%, #fff8f4 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 0 2px rgba(255,106,0,0.12), var(--shadow-card);
    transition: var(--transition-bounce);
}
.pricing-card-featured:hover {
    box-shadow: 0 0 0 2px rgba(255,106,0,0.35), var(--shadow-card-hover);
    transform: translateY(-10px);
}

/* Pricing feature list check icons */
.pricing-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(6,9,22,0.04);
    font-weight: 600;
    color: #1a1a2e;
    transition: background 220ms ease;
    border-radius: 8px;
    padding-left: 8px;
}
.pricing-features-list li:hover { background: rgba(255,106,0,0.04); }
.pricing-features-list li i { color: #10b981; font-size: 1rem; flex-shrink: 0; }

/* =========================================
   FAQ — richer accordion hover
========================================= */
.accordion-item {
    border-radius: 16px !important;
    box-shadow: var(--shadow-card);
    transition: box-shadow 260ms ease;
}
.accordion-item:hover {
    box-shadow: var(--shadow-card-hover);
}
.accordion-button {
    border-radius: 16px !important;
}
.accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, #fff8f4, #fff);
    color: var(--primary-orange);
    box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
    filter: invert(48%) sepia(99%) saturate(799%) hue-rotate(346deg);
}

/* Fallback FAQ chevrons in case Bootstrap pseudo-element icon rules are missing */
.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(33, 37, 41, 0.85);
    background-image: none !important;
    transition: transform .2s ease-in-out, color .2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    content: "−";
    transform: none;
    color: #ff6a00;
}

/* Use explicit icon node in FAQ buttons for resilient rendering. */
.accordion-button::after {
    display: none !important;
    content: none !important;
}

.accordion-button .faq-toggle-icon {
    margin-left: auto;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.accordion-button .faq-toggle-icon::before {
    content: "+";
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(33, 37, 41, 0.85);
}

.accordion-button:not(.collapsed) .faq-toggle-icon::before {
    content: "−";
    color: #ff6a00;
}

/* =========================================
   TESTIMONIALS — salary badge gradient
========================================= */
.testimonials-salary-badge {
    background: linear-gradient(135deg, rgba(255,106,0,0.06), rgba(255,179,71,0.08));
    border-left: 4px solid var(--primary-orange);
}
.testimonials-card.highlighted {
    background: linear-gradient(160deg, #fff9f5 0%, #fff 100%);
    border-color: rgba(255,106,0,0.22);
    box-shadow: 0 18px 48px rgba(255,106,0,0.10);
}

/* =========================================
   SECTION HEADERS — gradient text accent
========================================= */
.testimonials-header h2 span,
.faq-header h2 span {
    background: linear-gradient(135deg,#ff6a00,#ff8c3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================
   SECTION BACKGROUND STRIPES — subtle zebra
========================================= */
#curriculum  { background: radial-gradient(circle at 90% 10%, rgba(255,106,0,0.04) 0%, transparent 55%), #fff; }
#testimonials { background: radial-gradient(circle at 10% 80%, rgba(99,102,241,0.04) 0%, transparent 55%), #fff; }
#faq          { background: linear-gradient(180deg, #f9fafc 0%, #fff 100%); }

/* =========================================
   SMOOTH SCROLL SNAP (optional but nice)
========================================= */
html { scroll-padding-top: 80px; }

/* =========================================
   MOBILE BOTTOM CTA — sticky "Join Demo Class" bar
========================================= */

/* Hidden by default on desktop */
.mobile-bottom-cta {
    display: none;
}

@media (max-width: 768px) {

    /* Make room so content isn't hidden behind the bar */
    body.has-mobile-bottom-cta { padding-bottom: 96px; }

    /* Push WhatsApp button above the mobile CTA bar — solid base, no env() dependency */
    body.has-mobile-bottom-cta .whatsapp-float {
        bottom: 96px;
    }

    /* The sticky container */
    .mobile-bottom-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        padding: 10px 16px 14px; /* extra bottom for safe-area on iOS */
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 106, 0, 0.12);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.07);

        /* Wrapper should not block taps outside the CTA button */
        pointer-events: none;
    }

    /* The anchor / button */
    .mobile-bottom-cta__button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 14px 20px;
        border-radius: 14px;
        background: linear-gradient(135deg, #ff6a00, #ff7a1a);
        color: #fff;
        text-decoration: none;
        font-weight: 800;
        font-size: 1rem;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        box-shadow: 0 10px 28px rgba(255, 106, 0, 0.30), 0 0 0 0 rgba(255,106,0,0.45);
        animation: glowPulse 2.4s ease-out infinite;
        transition: transform 220ms cubic-bezier(.2,.9,.2,1);

        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transform: translateZ(0);
    }

    .mobile-bottom-cta__button:hover,
    .mobile-bottom-cta__button:active {
        color: #fff;
        transform: translateY(-2px);
    }

    /* Text stack */
    .mobile-bottom-cta__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.25;
    }

    /* Price context shown above the CTA text */
    .mobile-bottom-cta__eyebrow {
        font-size: 0.68rem;
        font-weight: 600;
        opacity: 0.78;
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }

    .mobile-bottom-cta__text {
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .mobile-bottom-cta__subtext {
        font-size: 0.75rem;
        font-weight: 600;
        opacity: 0.82;
        letter-spacing: 0.2px;
    }

    /* Animated ripple rings */
    .mobile-bottom-cta__ripple {
        position: absolute;
        inset: 0;
        border-radius: 14px;
        border: 2px solid rgba(255, 255, 255, 0.35);
        animation: mobileCTARipple 2.2s ease-out infinite;
        pointer-events: none;
    }

    .mobile-bottom-cta__ripple--two {
        animation-delay: 1.1s;
    }

    @keyframes mobileCTARipple {
        0%   { transform: scale(1);    opacity: 0.6; }
        100% { transform: scale(1.12); opacity: 0; }
    }
}

/* =========================================
   REDUCED MOTION SAFETY
========================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Standardize section containers */
.container, .cp-container, .certificate-grid, .instructors-section .container {
    max-width: var(--ux-max-width);
}
/* Make section overlay much lighter so content reads clearly */
section::before { opacity: 0.12 !important; }
/* Navbar tweaks: increase hit area and spacing */
.navbar, .nav { padding-top: 10px; padding-bottom: 10px; }
.navbar .nav-link { padding: 10px 12px; }
/* Footer */
footer { padding: clamp(28px,4vw,56px) 0; background:#071022; color: #e6eef6; }
footer a { color: #ffd2b3; }
/* Ensure buttons align center across many sections */
section .actions, .section-actions, .cta-row { display:flex; justify-content:center; gap:12px; }
/* Slightly larger, more legible body copy on desktop */
@media (min-width: 992px) { p { font-size: 1.03rem; } }
/* Reduce heavy overlay on small screens */
@media (max-width:768px) { section::before { opacity: 0.06 !important; } }
/* Make CTA micro-animation subtle across site */
.site-cta, .hp-btn-shiny, .pricing-btn-primary, .cp-main-button, .certificate-btn-primary { transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease; }
/* Utility */
.visual-center { display:flex; justify-content:center; align-items:center; }
/* Decorative glows */
.hp-orb, .cp-bg-glow, .instructors-bg-glow, .cta-glow { opacity: 0.28 !important; }
/* Responsive headings */
h2 { font-size: clamp(1.35rem, 2.6vw, 2.2rem); line-height:1.08; }
/* Footer copyright */
.footer-copyright { margin-top: 18px; opacity: 0.85; }


/* =========================================
   MOBILE UX — COMPREHENSIVE IMPROVEMENTS
   Applied after all other CSS for max specificity
   ========================================= */

/* ── 1. iOS Safe-Area Insets ─────────────────────────────────
   Prevents bottom sheet content from hiding behind the iOS
   home indicator on iPhone X and newer devices.
   ──────────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        /* Mobile sticky CTA bar */
        .mobile-bottom-cta {
            padding-bottom: calc(10px + env(safe-area-inset-bottom));
        }
        /* Body offset to clear the sticky bar */
        body.has-mobile-bottom-cta {
            padding-bottom: calc(96px + env(safe-area-inset-bottom));
        }
        /* Enrollment confirm bar */
        .enroll-confirm-bar {
            padding-bottom: calc(14px + env(safe-area-inset-bottom));
        }
        /* (WhatsApp float is handled separately below) */
    }
}

/* ── 2. Disable card-lift hover effects on touch devices ─────
   On touchscreens, :hover fires on tap and never un-fires,
   leaving cards in a permanently "lifted" state. We keep
   colour/border transitions but strip translateY lifts.
   ──────────────────────────────────────────────────────────── */
@media (hover: none) {
    .card-clean:hover,
    .curriculum-card-v2:hover,
    .testimonials-card:hover,
    .ta-card:hover,
    .instructors-card-v2:hover,
    .workshop-card-home:hover,
    .diff-card:hover,
    .why-card:hover,
    .audience-card-course:hover,
    .include-card:hover,
    .faq-card:hover,
    .req-item:hover,
    .cp-logo-card:hover,
    .pricing-card:hover,
    .pricing-card-featured:hover,
    .day-item:hover {
        transform: none !important;
        box-shadow: var(--shadow-card) !important;
    }
    /* Hero/section buttons: keep glow but remove the lift */
    .hp-btn-shiny:hover,
    .hp-btn-outline:hover,
    .hero-v3-btn-primary:hover,
    .hero-v3-btn-outline:hover,
    .course-btn-primary:hover,
    .course-btn-outline:hover,
    .cp-main-button:hover,
    .btn-main-premium:hover { transform: none !important; }
}

/* ── 3. Testimonials — reduce oversized vertical whitespace ──
   margin-bottom: 80px and padding: 80px 0 are desktop values;
   mobile needs tighter rhythm.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .testimonials-section { padding: 44px 0 !important; }
    .testimonials-header  { margin-bottom: 36px !important; }
    .testimonials-grid    { margin-bottom: 40px !important; gap: 20px; }
    .testimonials-cta-box { padding: 32px 24px !important; gap: 20px !important; }
}

@media (max-width: 576px) {
    .testimonials-section { padding: 32px 0 !important; }
    .testimonials-header  { margin-bottom: 24px !important; }
    .testimonials-header p { font-size: 1rem !important; }
    .testimonials-cta-box { padding: 22px 16px !important; border-radius: 20px !important; }
    .testimonials-cta-content h3 { font-size: 1.25rem; }
    .testimonials-card-inner { padding: 18px 16px; }
}

/* ── 4. Curriculum — fix oversized spacing ───────────────────*/
@media (max-width: 768px) {
    .curriculum-header  { margin-bottom: 36px !important; }
    .curriculum-cta-v2  { margin-top: 44px !important; }
    .cta-box-premium    { padding: 32px 24px !important; }
    .info-pill-wrapper  { padding: 10px 18px !important; }
}

@media (max-width: 576px) {
    .curriculum-header  { margin-bottom: 24px !important; }
    .curriculum-cta-v2  { margin-top: 28px !important; }
    .cta-box-premium    { padding: 22px 14px !important; border-radius: 22px !important; }
    .subtitle-p         { font-size: 1.05rem !important; }
}

/* ── 5. Footer — reduce excessive top padding on mobile ──────*/
@media (max-width: 576px) {
    .footer-section { padding: 44px 0 24px !important; }
    .footer-grid    { gap: 32px !important; margin-bottom: 32px !important; }
}

/* ── 6. Touch target sizes (min 44 × 44 px per WCAG 2.5.5) ──*/
@media (max-width: 768px) {
    /* Footer social icons */
    .footer-social a {
        width: 44px !important;
        height: 44px !important;
    }
    /* My Account nav link */
    .nav-account-link { min-height: 44px; }
}

/* Ensure collapsed nav links always meet 44 px tap height */
@media (max-width: 991px) {
    .navbar-nav .nav-link  { min-height: 44px; display: flex; align-items: center; }
    .nav-dropdown-item     { min-height: 44px !important; }
}

/* ── 7. Typography: improve readability on narrow screens ────*/
@media (max-width: 576px) {
    /* Workshop cards */
    .wch-desc          { font-size: 0.88rem; }
    .wch-topics li     { font-size: 0.84rem; }
    /* Why section cards */
    .why-card p        { font-size: 0.9rem; }
    /* Day items on live course */
    .day-content p     { font-size: 0.86rem; }
    /* Diff cards */
    .diff-card p       { font-size: 0.9rem; }
}

/* Extra-small phones (≤ 375 px) */
@media (max-width: 375px) {
    .hp-main-title         { font-size: 1.3rem !important; line-height: 1.2 !important; }
    .hero-v3-content h1    { font-size: 1.5rem !important; }
    .course-hero-content h1 { font-size: 1.7rem !important; }
    .hp-description        { font-size: 0.95rem !important; }
    .hero-premium-v2       { padding: 24px 12px !important; }
    .container             { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ── 8. Live course code preview — scrollable on small screens*/
@media (max-width: 480px) {
    .hero-code-card,
    .project-preview-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hero-code-body,
    .preview-body {
        font-size: 11px;
        overflow-x: auto;
    }
}

/* ── 9. Why section — tighter on mobile ─────────────────────*/
@media (max-width: 576px) {
    .why-heading     { margin-bottom: 28px !important; }
    .why-card        { padding: 20px 16px !important; }
}

/* ── 10. Sticky CTA button — better text layout on 320 px ───*/
@media (max-width: 360px) {
    .mobile-bottom-cta__text    { font-size: 0.92rem; }
    .mobile-bottom-cta__subtext { font-size: 0.68rem; }
}

/* ── 11. Hero action buttons — always full-width below 400 px */
@media (max-width: 400px) {
    .hero-v3-actions { flex-direction: column; }
    .hero-v3-btn-primary,
    .hero-v3-btn-outline { width: 100%; justify-content: center; }
    .course-hero-actions { flex-direction: column; align-items: stretch; }
    .course-btn-primary,
    .course-btn-outline { justify-content: center; }
}

/* ── 12. Companies logos — prevent overflow on tiny screens ──*/
@media (max-width: 360px) {
    .cp-logos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
}

/* =========================================
   DESIGN SYSTEM POLISH — Final Pass
========================================= */

/* ── Inter font variable when loaded ─── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Headings: consistent across all pages ─ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Section: consistent vertical rhythm ── */
.faq-section,
.pricing-section,
.testimonials-section {
    padding: clamp(48px, 7vw, 80px) 0;
}

/* ── Input & form consistency ────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
    font-family: 'Inter', -apple-system, sans-serif;
}

/* ── Smooth scroll snap for anchor links ── */
html { scroll-padding-top: 80px; }

/* ── Page transition fade ─────────────── */
.page-transition-in {
    animation: fadeUp 320ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

/* ── Focus ring: consistent orange glow ─ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(255, 106, 0, 0.35);
    outline-offset: 2px;
}

/* ── Auth/form page shell polish ──────── */
.enroll-shell {
    /* Subtle gradient background for depth */
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

/* ── Enrollment + auth page background ─ */
.enrollment-page-main {
    background:
        radial-gradient(circle at 5%  0%,  rgba(255,106,0,0.06) 0%, transparent 40%),
        radial-gradient(circle at 95% 10%, rgba(255,140,50,0.04) 0%, transparent 36%),
        linear-gradient(180deg, #f4f6fb 0%, #f8fafc 100%);
}

/* ── Auth shell card gradient accent ─── */
.enroll-shell::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6a00, #ff9f1c, #ff6a00);
    background-size: 200% auto;
    animation: shimmerSlide 3s linear infinite;
    border-radius: 24px 24px 0 0;
}

.enroll-shell {
    position: relative;
    overflow: hidden;
}

/* ── Section badge consistency ───────── */
.section-badge,
.faq-top-badge,
.pricing-top-badge,
.course-hero-badge,
.hero-badge,
.showcase-label,
.section-heading-dark .section-badge {
    letter-spacing: 0.07em;
    font-weight: 800;
}

/* ── Card hover lift: remove on touch ── */
@media (hover: none) {
    .accordion-item:hover {
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    }
}

/* ── Accordion: smooth height transition */
.accordion-collapse {
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Scrollbar: subtle on webkit ──────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.25);
}

/* ── Selection color ───────────────────── */
::selection {
    background: rgba(255, 106, 0, 0.18);
    color: #0f172a;
}

/* ── Table: consistent across admin ─── */
.admin-table th,
.my-enrollments-table thead th {
    font-family: 'Inter', -apple-system, sans-serif;
}

/* ── Admin page: Inter for all text ─── */
.admin-main,
.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea {
    font-family: 'Inter', -apple-system, sans-serif;
}

/* ── Pricing: subtle entrance ──────────── */
.pricing-card:hover {
    border-color: rgba(255, 106, 0, 0.20) !important;
}

/* ── Footer price tag alignment ─────── */
.footer-price-tag {
    vertical-align: middle;
}

/* ── Mobile: auth form padding ───────── */
@media (max-width: 576px) {
    .enroll-shell {
        padding: 24px 20px 32px !important;
        border-radius: 20px !important;
    }

    .enroll-header h1 { font-size: 1.4rem !important; }
    .enroll-btn-primary { font-size: 0.9rem !important; }
}

/* ── Mobile: otp card spacing ──────────── */
@media (max-width: 480px) {
    .otp-card { padding: 14px; }
    .otp-row { flex-direction: column; }
    .otp-row input { width: 100%; }
    .enroll-btn-secondary { width: 100%; }
}

/* =============================================
   UX PHASE 2 — Enhanced Gradients, Animations
   & Transitions
============================================= */

/* ─ New keyframes ─────────────────────────── */
@keyframes gradientRotate {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes borderGlowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,106,0,0.18); }
    50%       { box-shadow: 0 0 0 4px rgba(255,106,0,0.08); }
}
@keyframes iconBounceIn {
    0%   { transform: scale(1) rotate(0deg); }
    40%  { transform: scale(1.18) rotate(-6deg); }
    70%  { transform: scale(0.96) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ─ Reveal variants: slide from sides ─────── */
.reveal-left {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.reveal-right {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 480ms ease, transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
    opacity: 1;
    transform: none;
}

/* ─ Stagger — extended to 9 items ────────── */
.stagger-children.is-visible > *:nth-child(7) { opacity:1; transform:translateY(0); transition-delay:540ms; }
.stagger-children.is-visible > *:nth-child(8) { opacity:1; transform:translateY(0); transition-delay:630ms; }
.stagger-children.is-visible > *:nth-child(9) { opacity:1; transform:translateY(0); transition-delay:720ms; }

/* ─ Main content entrance ─────────────────── */
#main-content {
    animation: fadeUp 400ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

/* ─ Stats panel — animated top accent ──────── */
.stats-panel {
    border: 1px solid rgba(255,106,0,0.14) !important;
    position: relative;
    overflow: hidden;
}
.stats-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff6a00 25%, #ffbc00 60%, #ff6a00 85%, transparent);
    background-size: 200% auto;
    animation: shimmerSlide 3s linear infinite;
    border-radius: 20px 20px 0 0;
    pointer-events: none;
}

/* ─ Stat numbers — gradient text + entrance ─ */
.stat-number {
    background: linear-gradient(135deg, #ff6a00 0%, #ffcb47 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: translateY(14px) scale(0.92);
    transition: opacity 480ms cubic-bezier(0.2, 0.9, 0.2, 1),
                transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat-number.stat-counted {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* Stagger each stat item's number */
.stat-item:nth-child(1) .stat-number { transition-delay: 0ms; }
.stat-item:nth-child(2) .stat-number { transition-delay: 100ms; }
.stat-item:nth-child(3) .stat-number { transition-delay: 200ms; }
.stat-item:nth-child(4) .stat-number { transition-delay: 300ms; }

/* ─ Hero — richer layered background ─────── */
.hero-v3 {
    background:
        radial-gradient(circle at 75% 15%, rgba(255,106,0,0.10), transparent 46%),
        radial-gradient(circle at 10% 85%, rgba(255,179,71,0.06), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255,106,0,0.02), transparent 70%),
        linear-gradient(180deg, #fffbf7 0%, #ffffff 100%) !important;
}

/* ─ Hero live badge — pulsing dot glow ───── */
.hero-v3-live-dot {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}
.hero-float-card.bottom-right {
    animation-direction: reverse;
    animation-delay: 2.5s;
}

/* ─ Hero CTA arrow — bounce on hover ─────── */
.hero-v3-btn-primary i,
.lcb-btn i {
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-v3-btn-primary:hover i,
.lcb-btn:hover i { transform: translateX(5px); }

/* ─ Why section — richer gradient bg ─────── */
.why-section {
    background:
        radial-gradient(circle at 20% 50%, rgba(255,106,0,0.12), transparent 48%),
        radial-gradient(circle at 85% 15%, rgba(99,102,241,0.07), transparent 38%),
        #0f172a !important;
}

/* ─ Why cards — brighter hover border ────── */
.why-card {
    transition: border-color 240ms ease, background 240ms ease, transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1) !important;
}
.why-card:hover {
    border-color: rgba(255,106,0,0.30) !important;
    background: rgba(255,106,0,0.05) !important;
    transform: translateY(-5px) !important;
}

/* ─ WIQ cards — orange top accent on hover ─ */
.wiq-card {
    overflow: hidden;
    position: relative;
}
.wiq-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff6a00, #ffbc00);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms cubic-bezier(0.2, 0.9, 0.2, 1);
    border-radius: 16px 16px 0 0;
}
.wiq-card:hover::before { transform: scaleX(1); }

/* ─ WIQ icon — playful bounce on card hover ─ */
.wiq-icon {
    display: block;
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wiq-card:hover .wiq-icon { transform: scale(1.18) rotate(-6deg); }

/* ─ Workshop cards — gradient glow on hover ─ */
.workshop-card-home {
    position: relative;
    overflow: hidden;
}
.workshop-card-home::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,106,0,0.06) 0%, transparent 58%);
    opacity: 0;
    transition: opacity 280ms ease;
    pointer-events: none;
    border-radius: inherit;
}
.workshop-card-home:hover::after { opacity: 1; }

/* Workshop card arrow icon hover */
.wch-link i {
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wch-link:hover i { transform: translateX(5px); }

/* ─ Diff cards — icon lift + overlay ─────── */
.diff-card {
    overflow: hidden;
    position: relative;
}
.diff-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,106,0,0.05) 0%, transparent 58%);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
    border-radius: inherit;
}
.diff-card:hover::after { opacity: 1; }

.diff-icon {
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.diff-card:hover .diff-icon { transform: scale(1.14) translateY(-3px); }

/* ─ Pop card — shimmer shine sweep on hover ─ */
.pop-card::after {
    content: '';
    position: absolute;
    top: -80%; left: -60%;
    width: 35%; height: 260%;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.16) 50%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-20deg) translateX(-120%);
    transition: transform 0.80s ease;
    pointer-events: none;
    z-index: 3;
}
.pop-card:hover::after {
    transform: skewX(-20deg) translateX(480%);
}

/* ─ Pop section top accent — animated shimmer ─ */
.pop-section::before {
    background: linear-gradient(90deg, transparent, #ff6a00 30%, #ffbc00 60%, transparent 100%);
    background-size: 200% auto;
    animation: shimmerSlide 3.5s linear infinite;
}

/* View-all link arrow bounce */
.pop-view-all i {
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pop-view-all:hover i { transform: translateX(4px); }

/* ─ Offering listing header — static gradient ─
   (gradientRotate animation removed: background-position
    animation triggers CPU repaint every frame)            */
.of-hdr {
    background:
        linear-gradient(135deg, #0f172a 0%, #172038 50%, #0f172a 100%) !important;
}

/* ─ Offering card — gradient bottom glow ─── */
.of-card {
    position: relative;
}

/* ─ Navbar — enhanced scrolled state ────────── */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.06),
        0 4px 28px rgba(15, 23, 42, 0.09) !important;
}

/* ─ Footer — gradient animated top border ─── */
footer {
    position: relative;
}
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #ff6a00 20%, #ffbc00 55%, #ff6a00 80%, transparent 100%);
    background-size: 200% auto;
    animation: shimmerSlide 4s linear infinite;
    pointer-events: none;
    z-index: 2;
}

/* ─ Live course banner — pulsing glow ───────── */
.live-course-banner {
    box-shadow: 0 8px 40px rgba(15,23,42,0.25), 0 0 0 1px rgba(255,106,0,0.08) !important;
    transition: box-shadow 320ms ease !important;
}
.live-course-banner:hover {
    box-shadow: 0 16px 56px rgba(15,23,42,0.32), 0 0 0 1px rgba(255,106,0,0.16) !important;
}

/* ─ Testimonials card — stronger hover ─────── */
.testimonials-card {
    transition: var(--transition-bounce) !important;
}
.testimonials-card:hover {
    transform: translateY(-10px) !important;
}

/* ─ Offering detail thumbnail zoom ─────────── */
.pop-thumb img,
.of-thumb img {
    will-change: transform;
}

/* ─ Button icon arrows — bounce on hover ───── */
.hp-btn-shiny i,
.hero-v3-btn-primary i,
.mobile-bottom-cta__button i {
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hp-btn-shiny:hover i { transform: translateX(4px); }

/* ─ Pricing card — glow border animation ───── */
.pricing-card-featured {
    animation: borderGlowPulse 3s ease-in-out infinite;
}

/* ─ Reduce motion on mobile — keep CPU cool ─ */
@media (max-width: 768px) {
    .wiq-card:hover .wiq-icon  { transform: none; }
    .diff-card:hover .diff-icon { transform: none; }
    .pop-card::after            { display: none; }
    .of-hdr                    { animation: none; }
    .live-course-banner        { animation: none !important; }
    .stats-panel::before       { animation: none; }
    footer::before             { animation: none; }
    #main-content              { animation: none; }
}

/* =============================================
   PROFESSIONAL POLISH — Depth, Texture,
   Refined Shadows & Interaction Quality
============================================= */

/* ── 1. Hero: subtle dot-grid texture ───────
   Adds professional depth without clutter.   */
.hero-v3 {
    background-image:
        radial-gradient(ellipse at 72% 14%, rgba(255,106,0,0.09) 0%, transparent 46%),
        radial-gradient(ellipse at  5% 82%, rgba(99,102,241,0.05) 0%, transparent 38%),
        radial-gradient(rgba(15,23,42,0.048) 1px, transparent 1px),
        linear-gradient(180deg, #fffdf9 0%, #ffffff 100%) !important;
    background-size: auto, auto, 26px 26px, auto !important;
}

/* ── 2. Hero h1 highlight — animated shimmer */
.h1-highlight {
    background: linear-gradient(110deg, #e85500 0%, #ff9f1c 35%, #ff6a00 55%, #ff9f1c 80%, #e85500 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerSlide 5s linear infinite;
}

/* ── 3. Hero live badge — elevated glow ──────── */
.hero-v3-live-badge {
    background: linear-gradient(135deg, #ffffff 0%, #fffbf5 100%) !important;
    border: 1px solid rgba(255,106,0,0.18) !important;
    box-shadow:
        0 2px 14px rgba(255,106,0,0.12),
        0 1px 4px rgba(15,23,42,0.06),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* ── 4. Hero float cards — premium glass ──────── */
.hero-float-card {
    background: rgba(255,255,255,0.94) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
    border: 1px solid rgba(255,255,255,0.88) !important;
    box-shadow:
        0 8px 32px rgba(15,23,42,0.11),
        0 2px 8px rgba(15,23,42,0.06),
        inset 0 1px 0 rgba(255,255,255,0.98) !important;
}

/* ── 5. Hero outline button — glass look ─────── */
.hero-v3-btn-outline {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(15,23,42,0.12) !important;
}
.hero-v3-btn-outline:hover {
    background: rgba(255,251,247,0.96) !important;
    border-color: rgba(255,106,0,0.38) !important;
    box-shadow: 0 0 0 3px rgba(255,106,0,0.07) !important;
}

/* ── 6. Stats panel — layered gradient + depth ── */
.stats-panel {
    background: linear-gradient(160deg, #101828 0%, #162038 50%, #0d1526 100%) !important;
    box-shadow:
        0 4px 24px rgba(15,23,42,0.22),
        0 1px 4px rgba(15,23,42,0.14),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.stat-item:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.055) !important;
}

/* ── 7. Why section — richer layered dark bg ──── */
.why-section {
    background:
        radial-gradient(ellipse at 18% 50%, rgba(255,106,0,0.13) 0%, transparent 50%),
        radial-gradient(ellipse at 86% 12%, rgba(99,102,241,0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 100%, rgba(255,179,71,0.05) 0%, transparent 38%),
        #0c1526 !important;
}

/* ── 8. Why cards — better contrast ─────────── */
.why-card {
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.065) !important;
}
.why-card:hover {
    background: rgba(255,255,255,0.065) !important;
    border-color: rgba(255,106,0,0.28) !important;
}

/* ── 9. Live course banner — richer bg ───────── */
.live-course-banner {
    background:
        radial-gradient(ellipse at 92% 50%, rgba(255,106,0,0.20) 0%, transparent 52%),
        radial-gradient(ellipse at 8% 20%, rgba(99,102,241,0.07) 0%, transparent 40%),
        linear-gradient(135deg, #0f172a 0%, #131f30 50%, #0c1320 100%) !important;
}

/* ── 10. WIQ section — subtle warm texture ───── */
.wiq-section {
    background:
        radial-gradient(ellipse at 4% 50%, rgba(255,106,0,0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 96% 30%, rgba(99,102,241,0.025) 0%, transparent 36%),
        #f8fafc !important;
}

/* ── 11. Offering detail hero — deeper dark ───── */
.od-hero {
    background: linear-gradient(160deg, #0a1020 0%, #111d2e 45%, #0a1020 100%) !important;
}

/* ── 12. Navbar scrolled — enhanced glass ─────── */
.navbar.scrolled {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(28px) saturate(220%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(220%) !important;
    box-shadow:
        0 1px 0 rgba(15,23,42,0.05),
        0 4px 24px rgba(15,23,42,0.07) !important;
}

/* ── 13. Navbar brand — tighter tracking ─────── */
.nav-brand-text { letter-spacing: -0.03em; }

/* ── 14. Dropdown shadow — deeper, crisper ───── */
.nav-dropdown-menu {
    box-shadow:
        0 4px 8px rgba(15,23,42,0.06),
        0 20px 56px rgba(15,23,42,0.16),
        0 0 0 1px rgba(15,23,42,0.06) !important;
}

/* ── 15. Cards — unified layered shadow system ── */
.workshop-card-home {
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 3px 12px rgba(15,23,42,0.05) !important;
}
.workshop-card-home:hover {
    box-shadow:
        0 6px 24px rgba(15,23,42,0.09),
        0 2px 8px rgba(255,106,0,0.07) !important;
    transform: translateY(-5px) !important;
}

.pop-card {
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 3px 12px rgba(15,23,42,0.04) !important;
}
.pop-card:hover {
    box-shadow:
        0 6px 24px rgba(15,23,42,0.08),
        0 14px 40px rgba(255,106,0,0.09) !important;
    transform: translateY(-5px) !important;
}

.of-card {
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 3px 12px rgba(15,23,42,0.04) !important;
}
.of-card:hover {
    box-shadow:
        0 6px 24px rgba(15,23,42,0.09),
        0 14px 40px rgba(255,106,0,0.08),
        0 0 0 1px rgba(255,106,0,0.10) !important;
}

.wiq-card {
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 3px 12px rgba(15,23,42,0.04) !important;
}
.wiq-card:hover {
    box-shadow:
        0 6px 24px rgba(15,23,42,0.08),
        0 2px 6px rgba(255,106,0,0.06) !important;
}

/* ── 16. Thumbnail placeholder bg — polished ─── */
.of-thumb,
.pop-thumb {
    background: linear-gradient(135deg, #e8ecf5 0%, #eef1f9 100%) !important;
}

/* ── 17. Card transition consistency ────────── */
.workshop-card-home,
.pop-card,
.of-card,
.wiq-card,
.od-exp-card,
.testimonials-card {
    transition:
        transform 260ms cubic-bezier(0.2,0.9,0.2,1),
        box-shadow 260ms cubic-bezier(0.2,0.9,0.2,1),
        border-color 220ms ease !important;
}

/* ── 18. Testimonials — refined shadow ───────── */
.testimonials-card {
    box-shadow:
        0 1px 3px rgba(15,23,42,0.04),
        0 4px 16px rgba(15,23,42,0.05) !important;
}
.testimonials-card:hover {
    box-shadow:
        0 8px 28px rgba(15,23,42,0.10),
        0 2px 6px rgba(15,23,42,0.05) !important;
    transform: translateY(-6px) !important;
}

/* ── 19. CTA / live course banner button ─────── */
.lcb-btn {
    transition:
        transform 200ms cubic-bezier(0.2,0.9,0.2,1),
        box-shadow 200ms ease !important;
}

/* ── 20. Section heading badge — unified size ─── */
.wiq-badge,
.section-badge,
.why-badge,
.pop-label-badge,
.od-section-badge {
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
}

/* ── 21. Offering detail exp cards — depth ───── */
.od-exp-card {
    box-shadow:
        0 2px 8px rgba(15,23,42,0.05),
        0 8px 32px rgba(15,23,42,0.07) !important;
}
.od-exp-card:hover {
    box-shadow:
        0 4px 16px rgba(15,23,42,0.08),
        0 20px 56px rgba(15,23,42,0.10) !important;
}

/* ── 22. Reduced dot-grid & shimmer on mobile ─── */
@media (max-width: 768px) {
    .hero-v3 {
        background-image:
            radial-gradient(ellipse at 72% 14%, rgba(255,106,0,0.08) 0%, transparent 46%),
            linear-gradient(180deg, #fffdf9 0%, #ffffff 100%) !important;
        background-size: auto, auto !important;
    }
    .h1-highlight { animation: none; }
}

/* =============================================
   PRICE UX — Premium Visual Treatment
   Gradient text, context labels, emphasis
============================================= */

/* ── Listing cards (.of-price-val) ──────────
   Plain dark #0f172a → striking orange gradient */
.of-price-val {
    background: linear-gradient(135deg, #d94f00 0%, #ff7a00 45%, #ffaa2b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
    line-height: 1 !important;
    display: inline-block;
}

/* ── Popular offerings cards — price row ────
   Price was missing entirely; now shows above
   the enroll button with consistent styling    */
.pop-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid rgba(15,23,42,0.07);
    margin-bottom: 10px;
}
.pop-price-val {
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
    background: linear-gradient(135deg, #d94f00 0%, #ff7a00 45%, #ffaa2b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.pop-price-note {
    font-size: 0.67rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Offering detail hero (.od-price) ────────
   White flat → warm white-to-amber gradient
   with a soft orange glow                      */
.od-price {
    background: linear-gradient(135deg, #ffffff 0%, #ffe0a0 55%, #ffb347 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    line-height: 1 !important;
    display: inline-block;
    filter: drop-shadow(0 2px 8px rgba(255,140,50,0.28));
}

/* ── Home workshop cards (.wch-price) ────────
   Basic orange → richer gradient + larger     */
.wch-price {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(135deg, #d94f00 0%, #ff7a00 50%, #ffaa2b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
/* "per session" sub-label — force its own color */
.wch-price span {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

/* ── Live course banner (.lcb-price) ─────────
   Flat white → warm white-to-amber gradient   */
.lcb-price {
    background: linear-gradient(135deg, #ffffff 10%, #ffd98a 65%, #ffb347 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 2.3rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    display: inline-block;
    filter: drop-shadow(0 2px 10px rgba(255,140,50,0.25));
}

/* ── Live course pricing card (.price-amount) */
.price-amount {
    background: linear-gradient(135deg, #ffffff 0%, #ffd98a 60%, #ffb347 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0 2px 14px rgba(255,140,50,0.30));
}
.price-currency {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,210,130,0.95) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ── Enrollment listing page (.ep-price) ─────
   Plain dark → orange gradient                */
.ep-price {
    background: linear-gradient(135deg, #d94f00 0%, #ff7a00 50%, #ffaa2b 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* ── Enroll modal (.em-price-val) ───────────── */
.em-price-val {
    background: linear-gradient(135deg, #d94f00 0%, #ff7a00 50%, #ffaa2b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
    display: inline-block;
}

/* ── Mobile: keep gradients, clip text size ── */
@media (max-width: 580px) {
    .of-price-val   { font-size: 1.55rem !important; }
    .pop-price-val  { font-size: 1.45rem !important; }
    .od-price       { font-size: 2rem !important; }
    .lcb-price      { font-size: 1.9rem !important; }
    .ep-price       { font-size: 1.35rem !important; }
    .em-price-val   { font-size: 1.75rem !important; }
}

/* End overrides */