/* =====================================================================
   Website theme — dark hero, glowing course tiles, green actions
   (look & feel only; all content still comes from the admin panel)
   ===================================================================== */
:root {
    --g: var(--blue);               /* main action colour (Website Builder → Main color) */
    --g-dark: color-mix(in srgb, var(--blue) 80%, black);
    --hot1: #ff512f;                /* hero glow / ribbons */
    --hot2: #ff9a44;
    --ink-dark: #050507;
    --card-dark: #111114;
    --line-dark: rgba(255, 255, 255, .09);
}

body { background: #fff; color: #111827; }

/* ---------- buttons ---------- */
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary, .btn-brand { background: var(--g); border-color: var(--g); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-brand:hover { background: var(--g-dark); border-color: var(--g-dark); color: #fff; }
.btn-outline-primary { color: var(--g); border-color: var(--g); }
.btn-outline-primary:hover { background: var(--g); border-color: var(--g); color: #fff; }
.btn-pill { border-radius: 99px; padding: .55rem 1.3rem; }
a { color: var(--g); }

/* ---------- top bar ---------- */
.topbar { background: #f7f7f8; color: #6b7280; border-bottom: 1px solid #ececf0; font-size: 13px; }
.topbar a { color: #4b5563; } .topbar a:hover { color: var(--g); }

/* ---------- header ---------- */
.site-nav { background: #fff; box-shadow: none; border-bottom: 1px solid #ececf0; padding: 6px 0; }
.site-nav .brand { font-size: 18px; color: #111827; gap: 8px; }
.site-nav .brand img { height: 38px; }
.site-nav .brand .mark { width: 38px; height: 38px; border-radius: 10px; background: #111827; font-size: 19px; }
.site-nav .nav-link { color: #374151 !important; font-size: 14.5px; font-weight: 500; padding: .45rem .65rem !important; border-radius: 6px; }
.site-nav .nav-link:hover { color: var(--g) !important; background: transparent; }
.site-nav .nav-link.active { color: var(--g) !important; background: transparent; position: relative; }
.site-nav .nav-link.active::after { content: ""; position: absolute; left: .65rem; right: .65rem; bottom: 0; height: 2px; border-radius: 2px; background: var(--g); }
.site-nav .lang { display: inline-flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 99px; padding: 2px; }
.site-nav .lang a { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; color: #6b7280; }
.site-nav .lang a.on { background: var(--g); color: #fff; }
.site-nav .hdr-phone { color: var(--g); font-weight: 600; font-size: 14px; white-space: nowrap; }
.site-nav .hdr-phone:hover { color: var(--g-dark); }
.site-nav .btn { padding: .42rem 1rem; font-size: 14px; }
.site-nav .btn-login { background: var(--g); color: #fff; border: 0; }
.site-nav .btn-login:hover { background: var(--g-dark); color: #fff; }
.site-nav .btn-amber { background: #fff; color: #111827; border: 1px solid #e5e7eb; }
.site-nav .btn-amber:hover { border-color: var(--g); color: var(--g); background: #fff; }

/* ---------- generic sections ---------- */
.section-title { color: #111827; font-weight: 700; }
.eyebrow { background: color-mix(in srgb, var(--g) 12%, white); color: var(--g); }
.card-x { border-radius: 16px; border-color: #ececf0; }
.card-x:hover { box-shadow: 0 12px 30px rgba(17, 24, 39, .08); }
.grad-text { background: linear-gradient(90deg, var(--hot1), var(--hot2) 55%, #ffd1a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-text-pink { background: linear-gradient(90deg, #ff6a88, #ff99ac 50%, #fcb69f); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- page header (inner pages) ---------- */
.page-head { background: var(--ink-dark) !important; padding: 64px 0 52px; text-align: center; }
.page-head::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; background: radial-gradient(closest-side, rgba(255, 81, 47, .45), rgba(255, 81, 47, .12) 55%, transparent 75%); pointer-events: none; }
.page-head::after { background-image: radial-gradient(rgba(255, 255, 255, .5) .6px, transparent .8px) !important; background-size: 46px 46px !important; opacity: .35; }
.page-head h1 { background: linear-gradient(90deg, var(--hot1), var(--hot2) 55%, #ffd1a6); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.page-head .crumb { justify-content: center; }
.page-head .container { position: relative; z-index: 1; }

/* =====================================================================
   HERO (dark, centered)
   ===================================================================== */
.hero.hero-10 { background: var(--ink-dark) !important; color: #fff; text-align: center; position: relative; overflow: hidden; }
.hero.hero-10::before { content: ""; position: absolute; inset: 0; background-image:
        radial-gradient(rgba(255, 255, 255, .55) .7px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, .35) .6px, transparent .9px);
    background-size: 90px 90px, 53px 53px; background-position: 0 0, 25px 35px; opacity: .45; }
.hero-10 .glow { position: absolute; left: 50%; top: -38%; width: 135%; aspect-ratio: 2.2 / 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 70, 40, .75), rgba(200, 25, 25, .38) 45%, rgba(120, 10, 10, .12) 70%, transparent 80%); filter: blur(6px); }
.hero-10 .planet { position: absolute; left: 50%; top: 20%; width: 120%; aspect-ratio: 3 / 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
    box-shadow: 0 -6px 60px rgba(255, 90, 60, .55), inset 0 10px 30px rgba(255, 120, 90, .35); background: radial-gradient(ellipse at 50% 0%, rgba(40, 6, 6, .9), var(--ink-dark) 70%); }
.hero-10 .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .18; }
.hero-10 .container { position: relative; z-index: 2; padding-top: 72px !important; padding-bottom: 64px !important; }
.hero-10 .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 600;
    color: #ffd7c2; background: rgba(255, 81, 47, .14); border: 1px solid rgba(255, 120, 80, .35); }
.hero-10 h1 { font-weight: 800; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.2; margin: 18px auto 12px; max-width: 900px;
    background: linear-gradient(180deg, #ffe0c7 0%, #ff9a5a 45%, #ff5a36 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 18px rgba(255, 80, 40, .35)); }
.hero-10 .lead { color: rgba(255, 255, 255, .88); font-size: clamp(1rem, 2vw, 1.2rem); max-width: 640px; margin: 0 auto; }
.hero-10 .hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero-10 .btn-cta { background: var(--g); color: #fff; border-radius: 99px; padding: .65rem 1.5rem; font-weight: 700; border: 0; box-shadow: 0 8px 24px color-mix(in srgb, var(--g) 45%, transparent); }
.hero-10 .btn-cta:hover { background: var(--g-dark); color: #fff; }
.hero-10 .btn-ghost-10 { color: #fff; border: 1px solid rgba(255, 255, 255, .28); border-radius: 99px; padding: .65rem 1.4rem; font-weight: 600; background: rgba(255, 255, 255, .04); }
.hero-10 .btn-ghost-10:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-10 .hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.hero-10 .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.hero-10 .chip i { color: var(--hot2); }
.hero-10 .call { margin-top: 18px; color: rgba(255, 255, 255, .6); font-size: 14px; }
.hero-10 .call a { color: #fff; font-weight: 600; }

/* ---------- course tiles on the banner ---------- */
.hero-tiles { gap: 14px !important; margin-top: 34px; }
.hero-tiles .tile { width: 128px !important; color: #fff; }
.hero-tiles .tile-card { display: block; padding: 10px 10px 12px; border-radius: 22px; background: linear-gradient(180deg, #17171b, #0b0b0e); position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55); transition: transform .2s, box-shadow .2s; }
.hero-tiles .tile-card::before { content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1.5px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.hero-tiles .tile.hot .tile-card::before { background: linear-gradient(180deg, #ffb46b, #ff4b2b); }
.hero-tiles .tile.hot .tile-card { box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 80, 40, .35); }
.hero-tiles .tile:hover .tile-card { transform: translateY(-4px); }
.hero-tiles .tile-box { height: 78px !important; border-radius: 14px !important; box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .35) !important; }
.hero-tiles .tile-title { font-size: 1.25rem !important; letter-spacing: .3px; }
.hero-tiles .tile-label { margin-top: 9px !important; font-size: .9rem !important; color: #fff; }
.hero-tiles .tile-ribbon { margin-top: 10px !important; padding: 4px 10px !important; border-radius: 10px !important; font-size: .72rem !important; line-height: 1.3;
    background: linear-gradient(90deg, #c2181f, #ff6a2b) !important; box-shadow: 0 6px 16px rgba(220, 38, 38, .45) !important; }
@media (max-width: 575px) { .hero-tiles .tile { width: calc(33.33% - 10px) !important; } .hero-tiles .tile-box { height: 62px !important; } .hero-tiles .tile-card { padding: 7px 7px 9px; border-radius: 16px; } }

/* slider version */
.slider .carousel-item::before { background: linear-gradient(180deg, rgba(5, 5, 7, .55), rgba(5, 5, 7, .85)) !important; }
.slider .cap { justify-content: center; text-align: center; }
.slider .cap > div { margin: 0 auto; }
.slider h1 { margin-left: auto; margin-right: auto; background: linear-gradient(180deg, #ffe0c7, #ff9a5a 50%, #ff5a36); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slider p { margin-left: auto; margin-right: auto; }
.slider .btn-amber { background: var(--g); color: #fff; border-radius: 99px; }

/* =====================================================================
   HOME PAGE — dark sections like the reference design
   ===================================================================== */
.theme-home { background: var(--ink-dark); }
.theme-home .section, .theme-home .section-alt { background: var(--ink-dark); color: #e5e7eb; }
.theme-home .section-title { color: #fff; }
.theme-home .section-sub, .theme-home .text-secondary { color: rgba(255, 255, 255, .62) !important; }
.theme-home .eyebrow { background: rgba(255, 255, 255, .07); color: var(--hot2); border: 1px solid var(--line-dark); }
.theme-home .card-x { background: var(--card-dark); border-color: var(--line-dark); color: #e5e7eb; }
.theme-home .card-x:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, .6); border-color: rgba(255, 255, 255, .16); }
.theme-home .btn-outline-primary { color: #fff; border-color: rgba(255, 255, 255, .3); }
.theme-home .btn-outline-primary:hover { background: #fff; color: #111; border-color: #fff; }

/* big rounded dark panels (like the reference "classroom" panel) */
.theme-home .section > .container > .row, .theme-home .section > .container { position: relative; }
.theme-home .section-title { background: linear-gradient(90deg, #ff6a88, #ff9a8b 45%, #ffd3a5); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* stats bar */
.theme-home .stats { margin-top: 0 !important; padding-top: 10px; }
.theme-home .stats .box { background: linear-gradient(180deg, #16161a, #0e0e11); border: 1px solid var(--line-dark); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); border-radius: 22px; }
.theme-home .stats .n { background: linear-gradient(180deg, #fff, #ffb48a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-home .stats .l { color: rgba(255, 255, 255, .62); }
@media (min-width: 768px) { .theme-home .stats .col-md + .col-md { border-left-color: var(--line-dark) !important; } }

/* notice + result */
.theme-home .notice-item { color: #e5e7eb; border-bottom-color: var(--line-dark); }
.theme-home .notice-item .date { background: rgba(255, 255, 255, .07); color: #fff; }
.theme-home .notice-item:hover .t { color: var(--hot2); }
.theme-home h2[style*="navy"], .theme-home .h4[style*="navy"] { color: #fff !important; }
.theme-home .result-box { background: linear-gradient(140deg, #2a0b0b, #120607 60%, #0b0b0e); border: 1px solid rgba(255, 90, 60, .35); box-shadow: 0 0 40px rgba(255, 70, 40, .15) inset; }
.theme-home .result-box .btn-amber { background: var(--g); color: #fff; border-radius: 10px; }
.theme-home .result-box .form-control { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid var(--line-dark); }
.theme-home .result-box .form-control::placeholder { color: rgba(255, 255, 255, .5); }

/* course cards */
.course-card { border-radius: 18px !important; }
.course-card .top { background: linear-gradient(135deg, #1f1f26, #101014) !important; position: relative; overflow: hidden; }
.course-card .top::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 90, 50, .55), transparent); }
.course-card .top > * { position: relative; z-index: 1; }
.course-card .top h3 { color: #fff; }
.course-card .meta i { color: var(--g) !important; }
.course-card .price { color: inherit; }
.theme-home .course-card .meta, .theme-home .course-card .price small { color: rgba(255, 255, 255, .62); }
.theme-home .course-card .foot { border-top-color: var(--line-dark); }
.theme-home .course-card .price { color: #fff; }
.course-card .foot .btn-primary { border-radius: 99px; }
.mode-toggle { background: #f1f1f4 !important; }
.mode-toggle button.active { background: var(--g) !important; }
.theme-home .mode-toggle { background: rgba(255, 255, 255, .07) !important; border: 1px solid var(--line-dark); }
.theme-home .mode-toggle button { color: rgba(255, 255, 255, .7); }

/* features / about */
.theme-home .feature .ic { background: linear-gradient(135deg, rgba(255, 90, 50, .22), rgba(255, 154, 68, .12)); color: var(--hot2); }
.theme-home .about-photo { box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }

/* teachers, toppers, testimonials, reviews */
.theme-home .avatar { border-color: rgba(255, 255, 255, .12); }
.theme-home .avatar-ph { background: rgba(255, 255, 255, .08); color: #fff; }
.theme-home .teacher-card .text-secondary, .theme-home .topper .text-secondary { color: rgba(255, 255, 255, .55) !important; }
.theme-home .teacher-card [style*="color:var(--blue)"] { color: var(--hot2) !important; }
.theme-home .topper .num, .theme-home .topper [style*="navy"] { color: #fff !important; }
.theme-home .review-card .body { color: rgba(255, 255, 255, .82); }
.theme-home .rating-big { color: #fff; }
.theme-home .quote .mark { color: rgba(255, 255, 255, .08); }

/* success wall — matches the reference exactly: black, laurels, gradient words */
.success-wall { background: var(--ink-dark) !important; }
.success-wall .section-title { background: linear-gradient(90deg, #fff 0%, #fff 40%, #ff6a88 60%, #c084fc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.success-wall .lf { color: #3f3f46 !important; opacity: 1 !important; }

/* CTA band */
.theme-home .cta-band { background: linear-gradient(120deg, #2a0b0b, #0e0e11 55%) !important; border: 1px solid rgba(255, 90, 60, .35); box-shadow: 0 0 60px rgba(255, 70, 40, .18); }
.theme-home .cta-band::after { background: radial-gradient(closest-side, rgba(255, 90, 50, .45), transparent) !important; }
.theme-home .cta-band h2 { background: linear-gradient(90deg, #ffe0c7, #ff9a5a 50%, #ff5a36); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-home .cta-band .btn-amber { background: var(--g); color: #fff; border-radius: 99px; }

/* =====================================================================
   FOOTER (light, like the reference)
   ===================================================================== */
footer.site-foot { background: #fff !important; color: #4b5563 !important; border-top: 1px solid #ececf0; }
footer.site-foot h5 { color: #111827 !important; }
footer.site-foot a { color: #4b5563 !important; } footer.site-foot a:hover { color: var(--g) !important; }
footer.site-foot .bottom { border-top-color: #ececf0 !important; color: #6b7280; }
footer.site-foot .social a { background: #f3f4f6 !important; color: #111827 !important; }
footer.site-foot .social a:hover { background: var(--g) !important; color: #fff !important; }
.theme-home footer.site-foot { border-top: 0; }

/* inner pages keep a clean white look with green accents */
.auth-tabs a.on { color: var(--g) !important; }
.notice-item .date { background: color-mix(in srgb, var(--g) 10%, white); }
.result-box { background: linear-gradient(140deg, #1a1a1f, #0b0b0e); }

@media (max-width: 1199px) {
    .site-nav .navbar-collapse { border-top: 1px solid #ececf0; margin-top: 8px; }
    .site-nav .nav-link.active::after { display: none; }
}

/* keep the header on one line on laptop screens */
@media (min-width: 1200px) and (max-width: 1399px) {
    .site-nav .hdr-phone { display: none; }
    .site-nav .brand span { font-size: 16px; }
    .site-nav .nav-link { padding: .45rem .45rem !important; font-size: 14px; }
}

/* =====================================================================
   BANNER / SLIDER ANIMATIONS
   ===================================================================== */
@keyframes fx-up      { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fx-pop     { 0% { opacity: 0; transform: translateY(26px) scale(.86); } 70% { opacity: 1; transform: translateY(-4px) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes fx-zoom    { from { opacity: 0; transform: scale(.92); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fx-glow    { 0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
@keyframes fx-rise    { from { transform: translateX(-50%) translateY(60px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes fx-stars   { from { background-position: 0 0, 25px 35px; } to { background-position: 0 -900px, 25px -495px; } }
@keyframes fx-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: .2; } }
@keyframes fx-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fx-shine   { 0% { background-position: -150% 0; } 60%, 100% { background-position: 250% 0; } }
@keyframes fx-pulse   { 0%, 100% { box-shadow: 0 8px 24px color-mix(in srgb, var(--g) 45%, transparent), 0 0 0 0 color-mix(in srgb, var(--g) 55%, transparent); }
                        60% { box-shadow: 0 8px 24px color-mix(in srgb, var(--g) 45%, transparent), 0 0 0 12px transparent; } }
@keyframes fx-kenburns { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes fx-bar     { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- static banner: entrance + ambient motion ---- */
.hero-10::before   { animation: fx-stars 120s linear infinite, fx-twinkle 4s ease-in-out infinite; }
.hero-10 .glow     { animation: fx-glow 7s ease-in-out infinite; }
.hero-10 .planet   { animation: fx-rise 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.hero-10 .pill     { animation: fx-up .7s .1s both; }
.hero-10 h1        { animation: fx-zoom .9s .2s cubic-bezier(.2, .8, .2, 1) both; }
.hero-10 .lead     { animation: fx-up .8s .45s both; }
.hero-10 .hero-tiles .tile { animation: fx-pop .7s cubic-bezier(.2, .8, .2, 1) both; }
.hero-10 .hero-tiles .tile:nth-child(1) { animation-delay: .6s; }
.hero-10 .hero-tiles .tile:nth-child(2) { animation-delay: .7s; }
.hero-10 .hero-tiles .tile:nth-child(3) { animation-delay: .8s; }
.hero-10 .hero-tiles .tile:nth-child(4) { animation-delay: .9s; }
.hero-10 .hero-tiles .tile:nth-child(5) { animation-delay: 1s; }
.hero-10 .hero-tiles .tile:nth-child(6) { animation-delay: 1.1s; }
.hero-10 .hero-tiles .tile:nth-child(n+7) { animation-delay: 1.2s; }
.hero-10 .hero-actions { animation: fx-up .7s 1.15s both; }
.hero-10 .hero-chips   { animation: fx-up .7s 1.3s both; }
.hero-10 .call         { animation: fx-up .7s 1.4s both; }
.hero-10 .btn-cta      { animation: fx-pulse 2.4s 2.2s ease-out infinite; }

/* tiles keep gently floating after they appear; ribbons shine */
.hero-tiles .tile .tile-card { animation: fx-float 5s ease-in-out infinite; }
.hero-tiles .tile:nth-child(2n) .tile-card { animation-delay: -2.5s; }
.hero-tiles .tile:nth-child(3n) .tile-card { animation-delay: -1.2s; }
.hero-tiles .tile:hover .tile-card { animation-play-state: paused; transform: translateY(-6px) scale(1.04); }
.hero-tiles .tile-ribbon { background-size: 200% 100% !important; position: relative; overflow: hidden; }
.hero-tiles .tile-ribbon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    background-size: 220% 100%; animation: fx-shine 3.2s ease-in-out infinite; }

/* ---- photo slider (Website Builder → Slider) ---- */
.slider .carousel-item { overflow: hidden; background-image: none !important; }
.slider .carousel-item .slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.slider .carousel-item::before { z-index: 1; }
.slider .carousel-item .cap { z-index: 2; }
.slider .carousel-item.active .slide-bg { animation: fx-kenburns 7s ease-out both; }
.slider .carousel-item .cap h1, .slider .carousel-item .cap p, .slider .carousel-item .cap .btn { opacity: 0; }
.slider .carousel-item.active .cap h1  { animation: fx-zoom .9s .25s cubic-bezier(.2, .8, .2, 1) both; }
.slider .carousel-item.active .cap p   { animation: fx-up .8s .55s both; }
.slider .carousel-item.active .cap .btn { animation: fx-up .7s .85s both, fx-pulse 2.4s 2s ease-out infinite; }
.slider .carousel-item::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); z-index: 3;
    background: linear-gradient(90deg, var(--hot1), var(--hot2)); }
.slider .carousel-item.active::after { animation: fx-bar 5.5s linear both; }
.slider:hover .carousel-item.active::after, .slider:hover .carousel-item.active .slide-bg { animation-play-state: paused; }
.slider .carousel-indicators [data-bs-target] { width: 26px; height: 5px; border-radius: 3px; border: 0; transition: width .3s, background .3s; }
.slider .carousel-indicators .active { width: 46px; background: var(--hot2); }
.slider .slider-tiles .tile { animation: fx-pop .7s cubic-bezier(.2, .8, .2, 1) both; }
.slider .slider-tiles .tile:nth-child(2) { animation-delay: .1s; } .slider .slider-tiles .tile:nth-child(3) { animation-delay: .2s; }
.slider .slider-tiles .tile:nth-child(4) { animation-delay: .3s; } .slider .slider-tiles .tile:nth-child(5) { animation-delay: .4s; }
.slider .slider-tiles .tile:nth-child(n+6) { animation-delay: .5s; }

/* home sections fade up as they scroll into view (modern browsers; others just show them) */
@supports (animation-timeline: view()) {
    @keyframes fx-reveal { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
    .theme-home .section .container > .row > [class*="col"], .theme-home .section .container > .d-flex,
    .theme-home .section .container > .text-center, .theme-home .stats .box, .theme-home .cta-band, .success-wall .marquee {
        animation: fx-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
}

/* respect "reduce motion" setting on phones / computers */
@media (prefers-reduced-motion: reduce) {
    .hero-10 *, .hero-10::before, .slider *, .slider .carousel-item::after, .hero-tiles * { animation: none !important; opacity: 1 !important; }
    .theme-home * { animation-timeline: auto !important; }
}

/* ---------- banner course tiles: course name always on ONE line ---------- */
.hero-tiles .tile { width: auto !important; min-width: 128px; max-width: 340px; }
.hero-tiles .tile-box { padding: 10px 14px !important; }
.hero-tiles .tile-title, .hero-tiles .tile-label { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal !important; }
.hero-tiles .tile-title { line-height: 1.2 !important; }
@media (max-width: 575px) {
    .hero-tiles .tile { width: auto !important; min-width: calc(50% - 8px); max-width: 100%; flex: 0 1 auto; }
}