/* =====================================================================
   Tutioney - public website design system
   Navy #0B1F5B · Blue #087CF0 · Teal #00BFA5 · white / pale-blue surfaces
   ===================================================================== */
:root {
    --navy: #0B1F5B;
    --navy-deep: #081748;
    --blue: #087CF0;
    --blue-dark: #0663c4;
    --teal: #00BFA5;
    --teal-dark: #00917d;
    --purple: #6a5ae0;
    --pale: #EAF6FF;
    --pale-2: #F4FAFF;
    --ink: #1b2a4a;
    --muted: #55637d;
    --line: #dbe8f5;
    --white: #fff;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow-sm: 0 2px 10px rgba(11, 31, 91, .06);
    --shadow: 0 10px 30px rgba(11, 31, 91, .09);
    --shadow-lg: 0 22px 50px rgba(11, 31, 91, .16);
    --grad: linear-gradient(135deg, var(--blue) 0%, #0aa0d8 55%, var(--teal) 100%);
    --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bs-primary: #087CF0;
    --bs-primary-rgb: 8, 124, 240;
    --bs-link-color: #0663c4;
    --bs-link-color-rgb: 6, 99, 196;
    --bs-link-hover-color: #0B1F5B;
    --bs-link-hover-color-rgb: 11, 31, 91;
    --bs-body-color: #1b2a4a;
    --bs-body-font-family: var(--font-body);
    --bs-border-color: #dbe8f5;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--font-head); color: var(--navy); font-weight: 700; line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(8, 124, 240, .55); outline-offset: 2px; border-radius: 6px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .15s; }
.skip-link:focus { top: 12px; color: #fff; }
.text-muted { color: var(--muted) !important; }
.text-navy { color: var(--navy); }
.text-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-blue { color: var(--blue); }
.text-teal { color: var(--teal-dark); }
.bg-pale { background: var(--pale-2); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- buttons ---------- */
.btn { font-family: var(--font-head); font-weight: 600; border-radius: 999px; padding: .62rem 1.35rem; font-size: .95rem; }
.btn-lg { padding: .85rem 1.8rem; font-size: 1rem; }
.btn-sm { padding: .4rem .95rem; font-size: .85rem; }
.btn-brand { background: var(--blue); border: 1px solid var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(8, 124, 240, .28); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-teal { background: var(--teal); border: 1px solid var(--teal); color: #06302b; }
.btn-teal:hover, .btn-teal:focus-visible { background: #19d1b8; border-color: #19d1b8; color: #06302b; }
.btn-outline-brand { background: #fff; border: 1.5px solid var(--blue); color: var(--navy); }
.btn-outline-brand:hover, .btn-outline-brand:focus-visible { background: var(--pale); color: var(--navy); border-color: var(--blue); }
.btn-white { background: #fff; color: var(--navy); border: 1px solid #fff; }
.btn-white:hover { background: var(--pale); color: var(--navy); }
.btn-icon { width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; color: var(--navy); border-radius: 50%; font-size: 1.15rem; }
.btn-icon:hover { background: var(--pale); }

/* ---------- header ---------- */
.site-header { background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--line); z-index: 1030; }
.navbar { padding: .55rem 0; }
.navbar-brand img { height: 54px; width: auto; }
.navbar .nav-link { font-family: var(--font-head); font-weight: 500; color: var(--navy); font-size: .95rem; padding: .5rem .85rem !important; position: relative; }
.navbar .nav-link:hover { color: var(--blue); }
.navbar .nav-link.active { color: var(--blue); }
.navbar .nav-link.active::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 0; height: 2px; background: var(--blue); border-radius: 2px; }
.navbar .dropdown-toggle.active::after { position: static; height: auto; background: none; }
.dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .5rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .8rem; color: var(--navy); font-size: .94rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--pale); color: var(--navy); }
.navbar-toggler { border: 1px solid var(--line); border-radius: 12px; padding: .45rem .6rem; }
.header-search { background: var(--pale-2); border-top: 1px solid var(--line); }
.search-box { position: relative; display: flex; gap: .5rem; align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: .35rem .35rem .35rem 2.9rem; box-shadow: var(--shadow-sm); }
.search-box:focus-within { border-color: var(--blue); }
.search-box > .bi-search { position: absolute; left: 1.15rem; color: var(--muted); }
.search-box .form-control { border: 0; box-shadow: none; padding-left: 0; background: transparent; min-width: 0; }
.search-box .btn { flex-shrink: 0; }
@media (max-width: 991.98px) {
    .navbar-brand img { height: 46px; }
    .navbar-collapse { padding: .75rem 0 1rem; }
    .navbar .nav-link.active::after { display: none; }
    .header-actions { margin-top: .5rem; }
    .header-actions .btn-brand { flex: 1; }
}

/* ---------- breadcrumbs ---------- */
.breadcrumb-bar { background: var(--pale-2); border-bottom: 1px solid var(--line); padding: .6rem 0; font-size: .87rem; }
.breadcrumb-item a { color: var(--muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--blue); }
.breadcrumb-item.active { color: var(--navy); font-weight: 500; }

/* ---------- sections ---------- */
.section { padding: 4.5rem 0; }
.section-sm { padding: 3rem 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin: 0 0 .3rem; }
.section-head p { color: var(--muted); margin: 0; }
.link-more { font-family: var(--font-head); font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-more i { transition: transform .15s; display: inline-block; }
.link-more:hover i { transform: translateX(4px); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: var(--pale); color: var(--navy); font-family: var(--font-head); font-weight: 600; font-size: .86rem; padding: .45rem 1rem; border-radius: 999px; }
.eyebrow i { color: var(--blue); }
@media (max-width: 767.98px) { .section { padding: 3.2rem 0; } }

/* ---------- hero ---------- */
.hero { position: relative; background: radial-gradient(1200px 520px at 85% -10%, #d6f3ff 0%, rgba(214, 243, 255, 0) 60%), linear-gradient(180deg, #f6fbff 0%, #eaf6ff 100%); padding: 3.5rem 0 6.5rem; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 90px; background: #fff; border-radius: 100% 100% 0 0 / 100% 100% 0 0; }
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; margin: 1.1rem 0 1.1rem; }
.hero h1 .line-2 { color: var(--blue); display: block; }
.hero h1 .accent { color: var(--teal); }
.hero-text { font-size: 1.08rem; color: var(--muted); max-width: 34rem; }
.hero-search { max-width: 34rem; margin-top: 1.6rem; }
.hero-visual { position: relative; }
.hero-visual img { border-radius: 22px; box-shadow: var(--shadow-lg); width: 100%; display: block; }
.hero-chips { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.hero-chip { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 999px; padding: .5rem 1rem .5rem .5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.hero-chip .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); flex-shrink: 0; font-size: 1.05rem; }
.hero-chip:nth-child(even) .ico { background: var(--teal); }
.hero-chip strong { display: block; font-family: var(--font-head); font-size: .88rem; color: var(--navy); line-height: 1.2; }
.hero-chip span { font-size: .78rem; color: var(--muted); line-height: 1.2; }
@media (max-width: 575.98px) { .hero { padding: 2.2rem 0 5rem; } .hero-chips { grid-template-columns: 1fr; } }

/* ---------- benefit strip ---------- */
.benefit-strip { position: relative; z-index: 2; margin-top: -4.2rem; }
.benefit-strip .inner { background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 1.4rem 1rem; display: grid; grid-template-columns: repeat(5, 1fr); }
.benefit { display: flex; gap: .9rem; align-items: center; padding: .4rem 1.1rem; border-left: 1px solid var(--line); }
.benefit:first-child { border-left: 0; }
.benefit i { font-size: 1.9rem; color: var(--navy); line-height: 1; }
.benefit strong { display: block; font-family: var(--font-head); font-size: .93rem; color: var(--navy); line-height: 1.25; }
.benefit span { font-size: .8rem; color: var(--muted); line-height: 1.3; display: block; }
@media (max-width: 1199.98px) { .benefit-strip .inner { grid-template-columns: repeat(3, 1fr); row-gap: 1rem; } .benefit:nth-child(4) { border-left: 0; } }
@media (max-width: 767.98px) { .benefit-strip .inner { grid-template-columns: 1fr 1fr; } .benefit { border-left: 0; padding: .4rem .6rem; } }
@media (max-width: 479.98px) { .benefit-strip .inner { grid-template-columns: 1fr; } }

/* ---------- category cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.cat-card { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; text-decoration: none; color: var(--navy); box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; height: 100%; }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #b9dcfb; color: var(--navy); }
.cat-ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.3rem; flex-shrink: 0; background: var(--blue); }
.cat-ico.teal { background: var(--teal); }
.cat-ico.purple { background: var(--purple); }
.cat-card strong { font-family: var(--font-head); font-weight: 600; font-size: .95rem; display: block; line-height: 1.25; }
.cat-card small { color: var(--muted); }
.cat-card .go { margin-left: auto; color: var(--blue); font-size: 1.1rem; }

/* ---------- cards: course / tutor / post ---------- */
.t-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; position: relative; }
.t-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.t-thumb { aspect-ratio: 16 / 9; background: var(--grad); position: relative; display: grid; place-items: center; color: rgba(255, 255, 255, .92); font-size: 3rem; overflow: hidden; }
.t-thumb.teal { background: linear-gradient(135deg, #00a892, #2fd6a8); }
.t-thumb.purple { background: linear-gradient(135deg, #5a4bd6, #8b7cf0); }
.t-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-badge { position: absolute; top: .7rem; left: .7rem; z-index: 2; background: #fff; color: var(--navy); font-family: var(--font-head); font-weight: 600; font-size: .72rem; padding: .28rem .7rem; border-radius: 999px; box-shadow: var(--shadow-sm); }
.t-badge.rank { background: var(--navy); color: #fff; }
.t-badge.featured { background: #fff4d6; color: #7a5200; left: auto; right: .7rem; }
.t-body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; gap: .45rem; }
.t-cat { font-size: .76rem; font-weight: 600; color: var(--teal-dark); text-transform: uppercase; letter-spacing: .04em; }
.t-title { font-family: var(--font-head); font-weight: 600; font-size: 1.04rem; color: var(--navy); line-height: 1.3; margin: 0; }
.t-title a { color: inherit; text-decoration: none; }
.t-title a::after { content: ""; position: absolute; inset: 0; }
.t-title a:hover { color: var(--blue); }
.t-meta { font-size: .84rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.t-meta i { margin-right: .25rem; }
.t-foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); }
.t-price { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.08rem; }
.t-price.free { color: var(--teal-dark); }
.rating { color: #a86a00; font-weight: 600; font-size: .85rem; }
.rating i { color: #f5a623; }
.t-cta { font-family: var(--font-head); font-weight: 600; font-size: .86rem; color: var(--blue); position: relative; z-index: 1; }

.tutor-card { text-align: center; padding: 1.5rem 1.2rem 1.3rem; align-items: center; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 2rem; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--line); flex-shrink: 0; }
.avatar.lg { width: 150px; height: 150px; font-size: 3rem; }
.tutor-card .t-title { margin-top: .8rem; }
.tag { display: inline-block; background: var(--pale); color: var(--navy); border-radius: 999px; font-size: .78rem; font-weight: 500; padding: .2rem .7rem; margin: .12rem; text-decoration: none; }
a.tag:hover { background: #d4ebff; color: var(--navy); }
.tag.teal { background: #dff8f3; color: #046b5d; }
.tag.verified { background: #dff8f3; color: #046b5d; }

/* ---------- page hero ---------- */
.page-hero { background: radial-gradient(900px 300px at 90% 0%, #d6f3ff 0%, rgba(214, 243, 255, 0) 65%), linear-gradient(180deg, #f6fbff, #eaf6ff); padding: 3rem 0 3.2rem; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem); font-weight: 800; margin: .8rem 0 .6rem; }
.page-hero p.lead { color: var(--muted); font-size: 1.08rem; max-width: 44rem; margin: 0; }
.page-hero-img { border-radius: 20px; box-shadow: var(--shadow); width: 100%; }

/* ---------- filters ---------- */
.filter-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.filter-card h2 { font-size: 1rem; margin-bottom: .9rem; }
.form-label { font-weight: 600; color: var(--navy); font-size: .9rem; margin-bottom: .35rem; }
.form-control, .form-select { border-radius: 12px; border: 1.5px solid var(--line); padding: .62rem .9rem; color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .22rem rgba(8, 124, 240, .16); }
.form-check-input { border: 1.5px solid #9db4cc; }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.result-count { color: var(--muted); font-size: .93rem; }
.pagination { gap: .3rem; margin-top: 2.2rem; }
.page-link { border-radius: 10px !important; border: 1px solid var(--line); color: var(--navy); min-width: 40px; text-align: center; font-weight: 500; }
.page-item.active .page-link { background: var(--blue); border-color: var(--blue); }
.empty-state { text-align: center; background: var(--pale-2); border: 1.5px dashed #bcd9f3; border-radius: var(--radius); padding: 3rem 1.5rem; }
.empty-state i { font-size: 2.6rem; color: var(--blue); }
.empty-state h2, .empty-state h3 { font-size: 1.25rem; margin: .8rem 0 .4rem; }
.empty-state p { color: var(--muted); max-width: 34rem; margin: 0 auto 1.1rem; }

/* ---------- content (CMS rich text) ---------- */
.content { font-size: 1.03rem; max-width: 48rem; }
.content h2 { font-size: 1.45rem; margin: 2.1rem 0 .8rem; }
.content h2:first-child { margin-top: 0; }
.content h3 { font-size: 1.18rem; margin: 1.6rem 0 .6rem; }
.content ul, .content ol { padding-left: 1.3rem; }
.content li { margin-bottom: .45rem; }
.content li::marker { color: var(--blue); font-weight: 600; }
.content blockquote { border-left: 4px solid var(--teal); background: var(--pale-2); padding: .9rem 1.2rem; border-radius: 0 12px 12px 0; margin: 1.2rem 0; }
.content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.content th, .content td { border: 1px solid var(--line); padding: .55rem .8rem; text-align: left; }
.content th { background: var(--pale); }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.side-card h2, .side-card h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 1.8rem; margin-bottom: .55rem; }
.check-list li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05rem; color: var(--teal-dark); font-weight: 700; }

/* ---------- info cards / steps ---------- */
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; height: 100%; box-shadow: var(--shadow-sm); }
.info-card .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; background: var(--pale); color: var(--blue); margin-bottom: 1rem; }
.info-card.teal .ico { background: #dff8f3; color: var(--teal-dark); }
.info-card h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.info-card p { color: var(--muted); margin: 0; font-size: .96rem; }
.split-card { border-radius: 24px; padding: 2.2rem; height: 100%; }
.split-card.students { background: linear-gradient(160deg, #eaf6ff, #f6fbff); border: 1px solid #cfe6fb; }
.split-card.tutors { background: linear-gradient(160deg, #e3faf5, #f5fffc); border: 1px solid #c2efe6; }
.split-card h3 { font-size: 1.4rem; }

/* ---------- plans ---------- */
.plan-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; height: 100%; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow-sm); }
.plan-card.highlight { border-color: var(--blue); box-shadow: var(--shadow); }
.plan-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #fff; font-family: var(--font-head); font-size: .74rem; font-weight: 600; padding: .25rem .9rem; border-radius: 999px; white-space: nowrap; }
.plan-name { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.15rem; }
.plan-price { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 2rem; line-height: 1.1; margin-top: .5rem; }
.plan-price small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.plan-share { background: #dff8f3; color: #046b5d; border-radius: 10px; padding: .45rem .7rem; font-weight: 600; font-size: .88rem; margin: .9rem 0; }
.plan-card .check-list { font-size: .92rem; }

/* ---------- stat / CTA bands ---------- */
.band { background: linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #0d3a8c); color: #fff; border-radius: 26px; padding: 2.2rem 2.4rem; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; right: -80px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 191, 165, .38), rgba(0, 191, 165, 0) 70%); }
.band > * { position: relative; }
.band h2 { color: #fff; font-size: clamp(1.35rem, 1rem + 1.3vw, 1.85rem); margin-bottom: .35rem; }
.band p { color: #cfe0ff; margin: 0; }
.band-stats { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; }
.band-stat { display: flex; align-items: center; gap: .8rem; }
.band-stat i { font-size: 2rem; color: #7fe6d6; }
.band-stat strong { font-family: var(--font-head); font-size: 1.5rem; display: block; line-height: 1.1; }
.band-stat span { color: #cfe0ff; font-size: .85rem; }
.dot-list { color: #cfe0ff; font-weight: 500; }
.dot-list b { color: #7fe6d6; margin: 0 .5rem; }

/* ---------- announcements / testimonials ---------- */
.notice { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: var(--radius-sm); padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); }
.notice time { font-size: .8rem; color: var(--muted); }
.notice h3 { font-size: 1.02rem; margin: .1rem 0 .25rem; }
.notice p { margin: 0; color: var(--muted); font-size: .93rem; }
.quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; height: 100%; box-shadow: var(--shadow-sm); }
.quote-card .bi-quote { font-size: 2rem; color: var(--teal); line-height: 1; }
.quote-card blockquote { margin: .4rem 0 1rem; font-size: .98rem; }
.quote-card cite { font-style: normal; font-weight: 600; color: var(--navy); font-family: var(--font-head); }
.quote-card cite span { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; font-family: var(--font-body); }

/* ---------- FAQ ---------- */
.accordion-item { border: 1px solid var(--line); border-radius: var(--radius-sm) !important; margin-bottom: .7rem; overflow: hidden; }
.accordion-button { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1rem; padding: 1.05rem 1.25rem; }
.accordion-button:not(.collapsed) { background: var(--pale); color: var(--navy); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 .22rem rgba(8, 124, 240, .18); }
.accordion-body { color: var(--muted); }

/* ---------- YouTube lite embed / map ---------- */
.yt-lite { border-radius: var(--radius); overflow: hidden; background: #0b1530; box-shadow: var(--shadow-sm); }
.yt-lite-btn { border: 0; padding: 0; background: none; cursor: pointer; width: 100%; height: 100%; position: absolute; inset: 0; }
.yt-lite-btn img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .15s; }
.yt-lite-btn:hover img { opacity: 1; }
.yt-lite-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 2.2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); padding-left: 4px; }
.yt-lite iframe { border: 0; }
.video-caption { font-size: .92rem; margin-top: .6rem; }
.video-caption strong { color: var(--navy); font-family: var(--font-head); font-weight: 600; display: block; }
.map-box { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, #eaf6ff, #dff8f3); min-height: 340px; position: relative; display: grid; place-items: center; text-align: center; padding: 1.5rem; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-box .bi-geo-alt-fill { font-size: 2.6rem; color: var(--blue); }

/* ---------- contact ---------- */
.contact-item { display: flex; gap: .9rem; margin-bottom: 1.2rem; }
.contact-item .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--pale); color: var(--blue); display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.contact-item strong { font-family: var(--font-head); color: var(--navy); display: block; }
.contact-item address { margin: 0; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 2rem; box-shadow: var(--shadow); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.invalid-feedback { font-size: .85rem; }
.required::after { content: " *"; color: #c62828; }
@media (max-width: 575.98px) { .form-card { padding: 1.3rem; } .band { padding: 1.7rem 1.4rem; } }

/* ---------- course detail ---------- */
.detail-hero { background: linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, #0d3a8c); color: #fff; padding: 2.8rem 0 3rem; }
.detail-hero h1 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); font-weight: 700; margin: .8rem 0; }
.detail-hero p { color: #d5e3ff; }
.detail-hero .t-meta { color: #d5e3ff; font-size: .93rem; }
.detail-hero a { color: #9fe9dc; }
.detail-hero .tag { background: rgba(255, 255, 255, .14); color: #fff; }
.enrol-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; }
.enrol-card .t-thumb { border-radius: 0; }
.enrol-card .inner { padding: 1.4rem; }
.enrol-card .t-price { font-size: 1.9rem; }
.spec-list { list-style: none; padding: 0; margin: 1rem 0 0; font-size: .93rem; }
.spec-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.spec-list li span:first-child { color: var(--muted); }
.spec-list li span:last-child { color: var(--navy); font-weight: 600; text-align: right; }
@media (min-width: 992px) { .enrol-wrap { margin-top: -11rem; position: sticky; top: 96px; } }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: #c6d6f5; padding: 4rem 0 1.5rem; margin-top: 4.5rem; font-size: .94rem; }
.footer-logo { display: inline-block; background: #fff; border-radius: 16px; padding: .5rem .9rem; }
.footer-logo img { height: 52px; width: auto; display: block; }
.footer-title { font-family: var(--font-head); color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.footer-links li { margin-bottom: .5rem; }
.site-footer a { color: #c6d6f5; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #7fe6d6; text-decoration: underline; }
.footer-contact p { display: flex; gap: .7rem; margin-bottom: .7rem; }
.footer-contact i { color: #7fe6d6; margin-top: .15rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: inline-grid; place-items: center; font-size: 1.05rem; }
.footer-social a:hover { background: var(--teal); color: #06302b; text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .86rem; }
.footer-bottom .list-inline-item:not(:last-child) { margin-right: 1.1rem; }
.no-footer-gap + .site-footer, main > .section-flush:last-child { margin-bottom: 0; }

/* wide Bootstrap gutters must not exceed the container padding on small screens */
@media (max-width: 991.98px) { .row.g-5 { --bs-gutter-x: 1.5rem; } }