/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%);
  overflow: hidden;
  padding-top: 100px;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201,151,26,0.18), transparent 55%);
}
.hero-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: var(--space-16); align-items: center; position: relative; z-index: 1; }
.hero-content .eyebrow { color: var(--gold-500); }
.hero-content .eyebrow::before { background: var(--gold-500); }
.hero-content h1 { color: var(--white); margin: var(--space-5) 0 var(--space-6); }
.hero-content p { color: rgba(255,255,255,0.78); font-size: 1.05rem; max-width: 460px; margin-bottom: var(--space-8); }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero-visual { position: relative; }
.hero-visual__frame { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/4.6; box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
.hero-visual__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-floating-card {
  position: absolute; left: -40px; bottom: 40px;
  background: var(--white); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-card-hover);
  display: flex; align-items: center; gap: var(--space-4);
  width: 260px;
}
.hero-floating-card .ring { width: 52px; height: 52px; border-radius: 50%; background: var(--gold-100); display: flex; align-items: center; justify-content: center; color: var(--gold-700); font-weight: 700; }
.hero-gold-line { position: absolute; top: -24px; right: 30px; width: 90px; height: 3px; background: var(--gold-500); }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-content p { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { max-width: 420px; margin: 0 auto; }
  .hero-floating-card { left: 50%; transform: translateX(-50%); bottom: -30px; }
}

/* ===================== ABOUT / INTRO (asymmetric editorial) ===================== */
.editorial { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-16); align-items: center; }
.editorial__media { position: relative; }
.editorial__media img { border-radius: var(--radius-lg); aspect-ratio: 4/5; object-fit: cover; }
.editorial__media-accent { position: absolute; bottom: -24px; right: -24px; width: 60%; aspect-ratio: 4/3; border: 3px solid var(--gold-500); border-radius: var(--radius-lg); z-index: -1; }
.editorial__body h2 { margin: var(--space-4) 0 var(--space-5); }
.editorial__body p { margin-bottom: var(--space-6); max-width: 520px; }
.editorial-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--gray-200); }
@media (max-width: 1023px) { .editorial { grid-template-columns: 1fr; } .editorial-stats { grid-template-columns: repeat(2,1fr); } }

/* ===================== FEATURED COURSES ===================== */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-10); gap: var(--space-6); flex-wrap: wrap; }
.section-head h2 { margin-top: var(--space-3); }
.featured-courses-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); }
.featured-courses-side { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 1023px) { .featured-courses-grid { grid-template-columns: 1fr; } }

/* ===================== LECTURES SECTION ===================== */
.lectures-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); }
.lecture-featured { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/11; }
.lecture-featured img { width: 100%; height: 100%; object-fit: cover; }
.lecture-featured__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,27,58,0.88), transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-8); }
.lecture-featured__overlay h3 { color: var(--white); }
.lecture-featured__overlay p { color: rgba(255,255,255,0.75); font-size: 0.85rem; }
.lecture-list-side { display: flex; flex-direction: column; gap: var(--space-4); }
.lecture-row { display: flex; gap: var(--space-4); align-items: center; }
.lecture-row__thumb { width: 96px; aspect-ratio: 16/10; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; position: relative; }
.lecture-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lecture-row h5 { font-family: var(--font-heading); font-size: 0.98rem; color: var(--primary-900); }
.lecture-row span { font-size: 0.78rem; color: var(--gray-600); }
@media (max-width: 1023px) { .lectures-split { grid-template-columns: 1fr; } }

/* ===================== LECTURERS SHOWCASE ===================== */
.lecturers-scroll { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 1023px) { .lecturers-scroll { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .lecturers-scroll { grid-template-columns: 1fr; } }

/* ===================== TESTIMONIAL ===================== */
.testimonial-section { background: var(--gray-50); }
.testimonial-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-16); align-items: center; }
.testimonial-main blockquote { font-family: var(--font-heading); font-size: 1.6rem; color: var(--primary-900); line-height: 1.45; margin: var(--space-4) 0 var(--space-6); }
.testimonial-person { display: flex; align-items: center; gap: var(--space-4); }
.testimonial-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial-person strong { display: block; color: var(--primary-900); }
.testimonial-person span { font-size: 0.82rem; color: var(--gray-600); }
.testimonial-mini { background: var(--white); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-card); }
.testimonial-mini p { font-size: 0.88rem; margin-bottom: var(--space-3); }
@media (max-width: 1023px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ===================== FINAL CTA ===================== */
.final-cta { background: var(--primary-900); text-align: center; position: relative; overflow: hidden; padding: var(--space-24) 0; }
.final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(201,151,26,0.15), transparent 60%); }
.final-cta h2 { color: var(--white); position: relative; }
.final-cta p { color: rgba(255,255,255,0.75); max-width: 520px; margin: var(--space-4) auto var(--space-8); position: relative; }
.final-cta .hero-actions { justify-content: center; position: relative; }

/* ===================== INNER PAGE HERO (About / Courses / Lectures / Contact) ===================== */
.page-hero { background: var(--primary-900); padding: 160px 0 var(--space-16); text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(201,151,26,0.14), transparent 50%); }
.page-hero h1 { color: var(--white); position: relative; }
.page-hero p { color: rgba(255,255,255,0.75); max-width: 560px; margin: var(--space-4) auto 0; position: relative; }
.page-hero .breadcrumb { position: relative; }
.breadcrumb { display: flex; gap: var(--space-2); font-size: 0.82rem; color: rgba(255,255,255,0.6); justify-content: center; margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--gold-400, var(--gold-500)); }

.page-search {
  max-width: 560px; margin: var(--space-8) auto 0; position: relative;
  display: flex; background: var(--white); border-radius: var(--radius-pill); padding: 6px;
}
.page-search input { flex: 1; border: none; padding: 12px 20px; font-size: 0.95rem; }
.page-search input:focus { outline: none; }
.page-search button { background: var(--gold-600); color: var(--primary-900); border-radius: var(--radius-pill); padding: 12px 24px; font-weight: 700; }

/* ===================== WHY CHOOSE (about) ===================== */
.feature-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.feature-block { padding: var(--space-8) var(--space-6); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); transition: var(--transition-normal); }
.feature-block:hover { border-color: var(--gold-500); box-shadow: var(--shadow-card); }
.feature-block .icon-wrap { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--gold-100); color: var(--gold-700); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.feature-block h4 { margin-bottom: var(--space-2); }
.feature-block p { font-size: 0.88rem; }
@media (max-width: 1023px) { .feature-blocks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-blocks { grid-template-columns: 1fr; } }

/* Mission / Vision panels */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.mv-panel { padding: var(--space-10); border-radius: var(--radius-lg); }
.mv-panel.mission { background: var(--primary-900); color: var(--white); }
.mv-panel.mission h3 { color: var(--white); }
.mv-panel.mission p { color: rgba(255,255,255,0.8); }
.mv-panel.vision { background: var(--gold-100); }
.mv-panel.vision h3 { color: var(--primary-900); }
.mv-panel .eyebrow { margin-bottom: var(--space-4); }
@media (max-width: 767px) { .mv-grid { grid-template-columns: 1fr; } }

/* Timeline */
.timeline { position: relative; padding-left: var(--space-8); border-left: 2px solid var(--gray-200); }
.timeline-item { position: relative; padding-bottom: var(--space-10); }
.timeline-item::before { content: ""; position: absolute; left: -41px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-500); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--gold-500); }
.timeline-item .year { font-family: var(--font-heading); color: var(--gold-700); font-size: 1.1rem; }

/* Stats band */
.stats-band { background: var(--primary-900); }
.stats-band .stat-block .num { color: var(--gold-500); }
.stats-band .stat-block .label { color: rgba(255,255,255,0.7); }
.stats-band-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
@media (max-width: 767px) { .stats-band-grid { grid-template-columns: repeat(2,1fr); } }

/* ===================== COURSES DISCOVERY ===================== */
.category-nav { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-10); }
.category-pill { padding: 10px 22px; border-radius: var(--radius-pill); border: 1.5px solid var(--gray-200); font-size: 0.85rem; font-weight: 600; color: var(--gray-600); white-space: nowrap; transition: var(--transition-fast); }
.category-pill.active, .category-pill:hover { background: var(--primary-900); color: var(--white); border-color: var(--primary-900); }

.discovery-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-10); align-items: start; }
.filter-sidebar { background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--space-6); position: sticky; top: 110px; }
.filter-group { padding: var(--space-5) 0; border-bottom: 1px solid var(--gray-200); }
.filter-group:last-child { border-bottom: none; }
.filter-group h5 { font-size: 0.85rem; color: var(--primary-900); margin-bottom: var(--space-3); text-transform: uppercase; letter-spacing: 0.04em; }
.filter-option { display: flex; align-items: center; gap: var(--space-2); font-size: 0.88rem; color: var(--gray-600); padding: var(--space-1) 0; }
.filter-option input { accent-color: var(--gold-600); }
.results-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); font-size: 0.88rem; color: var(--gray-600); flex-wrap: wrap; gap: var(--space-3); }
.results-toolbar select { border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.85rem; }
.course-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 1200px) and (min-width: 1024px) { .course-results-grid { grid-template-columns: 1fr; } }
@media (max-width: 1023px) { .discovery-layout { grid-template-columns: 1fr; } .filter-sidebar { position: static; } }
@media (max-width: 600px) { .course-results-grid { grid-template-columns: 1fr; } }

/* ===================== COURSE DETAILS ===================== */
.course-details-hero { background: var(--gray-50); padding: 140px 0 var(--space-16); }
.cd-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }
.cd-info h1 { margin: var(--space-4) 0 var(--space-5); }
.cd-meta-row { display: flex; gap: var(--space-6); flex-wrap: wrap; font-size: 0.88rem; color: var(--gray-600); margin-top: var(--space-5); }
.cd-meta-row strong { color: var(--primary-900); }
.enrollment-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); overflow: hidden; position: sticky; top: 110px; }
.enrollment-card__media { aspect-ratio: 16/10; overflow: hidden; }
.enrollment-card__media img { width: 100%; height: 100%; object-fit: cover; }
.enrollment-card__body { padding: var(--space-6); }
.enrollment-card .price { font-family: var(--font-heading); font-size: 2rem; color: var(--primary-900); margin-bottom: var(--space-4); }
.enrollment-card .price.free { color: var(--success); }
.enrollment-list { list-style: none; margin-bottom: var(--space-6); }
.enrollment-list li { display: flex; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--gray-100); font-size: 0.88rem; color: var(--gray-600); }
.enrollment-list li strong { color: var(--primary-900); }
@media (max-width: 1023px) { .cd-grid { grid-template-columns: 1fr; } .enrollment-card { position: static; } }

.outcomes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-8); }
.outcome-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.92rem; color: var(--gray-800); }
.outcome-item svg { flex-shrink: 0; margin-top: 3px; color: var(--gold-600); }
@media (max-width: 600px) { .outcomes-grid { grid-template-columns: 1fr; } }

.instructor-card { display: flex; gap: var(--space-6); align-items: flex-start; background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--space-8); }
.instructor-card img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@media (max-width: 600px) { .instructor-card { flex-direction: column; text-align: center; align-items: center; } }

.review-summary { display: flex; align-items: center; gap: var(--space-8); background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--space-8); margin-bottom: var(--space-8); }
.review-summary .score { font-family: var(--font-heading); font-size: 3rem; color: var(--primary-900); }
.stars { color: var(--gold-500); letter-spacing: 2px; }
.review-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--gray-100); }
.review-item__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.review-item__person { display: flex; align-items: center; gap: var(--space-3); }
.review-item__person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ===================== LECTURE DETAILS ===================== */
.video-player { aspect-ratio: 16/9; background: var(--primary-900); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.video-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.video-player .play-btn { width: 76px; height: 76px; position: relative; z-index: 1; }
.material-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.material-row__info { display: flex; align-items: center; gap: var(--space-4); }
.material-row__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--gold-100); color: var(--gold-700); display: flex; align-items: center; justify-content: center; }
.material-row small { color: var(--gray-400); display: block; }

/* ===================== LECTURER PROFILE ===================== */
.profile-hero { background: var(--primary-900); padding: 150px 0 var(--space-16); }
.profile-hero-grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-10); align-items: center; }
.profile-hero-grid img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 4px solid var(--gold-500); }
.profile-hero-grid h1 { color: var(--white); }
.profile-hero-grid .role { color: var(--gold-500); font-weight: 600; margin: var(--space-2) 0 var(--space-4); }
.profile-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.profile-links a { color: rgba(255,255,255,0.85); font-size: 0.88rem; display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 767px) { .profile-hero-grid { grid-template-columns: 1fr; text-align: center; } .profile-hero-grid img { margin: 0 auto; } .profile-links { justify-content: center; } }

/* ===================== AUTH (login/register) ===================== */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: var(--space-10); }
.auth-form-wrap { width: 100%; max-width: 400px; }
.auth-form-wrap .logo { margin-bottom: var(--space-8); }
.auth-form-wrap h1 { font-size: 1.9rem; margin-bottom: var(--space-2); }
.auth-form-wrap > p { margin-bottom: var(--space-8); }
.auth-visual-side { position: relative; background: var(--primary-900); display: flex; align-items: flex-end; }
.auth-visual-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.auth-visual-content { position: relative; padding: var(--space-16); color: var(--white); }
.auth-visual-content h3 { color: var(--white); font-size: 1.6rem; }
.auth-row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); font-size: 0.85rem; }
.auth-row-between a { color: var(--gold-700); font-weight: 600; }
.auth-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; color: var(--gray-400); font-size: 0.8rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--gray-200); }
.btn-social { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: 13px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); font-weight: 600; font-size: 0.9rem; }
.auth-footer-link { text-align: center; margin-top: var(--space-6); font-size: 0.88rem; color: var(--gray-600); }
.auth-footer-link a { color: var(--gold-700); font-weight: 700; }
@media (max-width: 1023px) { .auth-split { grid-template-columns: 1fr; } .auth-visual-side { display: none; } }

/* ===================== CERTIFICATE ===================== */
.certificate-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.certificate-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition-normal); }
.certificate-card:hover { box-shadow: var(--shadow-card-hover); }
.certificate-card__preview { aspect-ratio: 4/3; background: var(--gold-100); position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.certificate-card__preview .mini-cert { border: 2px solid var(--gold-600); border-radius: var(--radius-sm); background: var(--white); width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-4); }
.certificate-card__preview .mini-cert .crest { width: 30px; height: 30px; margin-bottom: var(--space-2); }
.certificate-card__preview .mini-cert p { font-family: var(--font-heading); font-size: 0.72rem; color: var(--primary-900); }
.certificate-card__body { padding: var(--space-6); }
.certificate-card__actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 1023px) { .certificate-gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .certificate-gallery-grid { grid-template-columns: 1fr; } }

.certificate-doc {
  background: var(--white); border: 3px solid var(--gold-600); border-radius: var(--radius-md);
  padding: var(--space-16) var(--space-10); text-align: center; position: relative;
  max-width: 900px; margin: 0 auto;
}
.certificate-doc::before {
  content: ""; position: absolute; inset: 14px; border: 1px solid var(--gold-300, var(--gold-200));
  pointer-events: none;
}
.certificate-doc .crest { width: 76px; margin: 0 auto var(--space-5); }
.certificate-doc .brand-name { font-family: var(--font-heading); letter-spacing: 0.1em; color: var(--primary-900); font-size: 1.4rem; margin-bottom: var(--space-1); }
.certificate-doc .brand-sub { font-size: 0.7rem; letter-spacing: 0.25em; color: var(--gold-700); margin-bottom: var(--space-8); text-transform: uppercase; }
.certificate-doc .cert-title { font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); margin-bottom: var(--space-6); }
.certificate-doc .cert-name { font-family: var(--font-heading); font-size: 2.6rem; color: var(--primary-900); margin-bottom: var(--space-6); border-bottom: 1px solid var(--gold-200); display: inline-block; padding-bottom: var(--space-3); }
.certificate-doc .cert-course { font-family: var(--font-heading); font-size: 1.5rem; color: var(--gold-700); margin-bottom: var(--space-10); }
.certificate-doc .cert-footer { display: flex; justify-content: space-around; font-size: 0.78rem; color: var(--gray-600); flex-wrap: wrap; gap: var(--space-4); }
.certificate-doc .cert-footer strong { display: block; color: var(--primary-900); font-family: var(--font-heading); font-size: 0.95rem; }

.verify-box { max-width: 560px; margin: 0 auto; background: var(--white); box-shadow: var(--shadow-card-hover); border-radius: var(--radius-lg); padding: var(--space-10); text-align: center; }
.verify-input-row { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.verify-input-row input { flex: 1; }
.verify-result { margin-top: var(--space-8); text-align: left; border-top: 1px solid var(--gray-100); padding-top: var(--space-6); display: none; }
.verify-result.show { display: block; }
.verify-result-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); color: var(--success); font-weight: 700; }
.verify-result-header.invalid { color: var(--error); }
.verify-result dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); font-size: 0.9rem; }
.verify-result dt { color: var(--gray-600); }
.verify-result dd { color: var(--primary-900); font-weight: 600; }

/* ===================== CONTACT ===================== */
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-16); }
.contact-info-card { text-align: center; padding: var(--space-8); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.contact-info-card .icon-wrap { width: 50px; height: 50px; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.map-placeholder { aspect-ratio: 4/3.4; background: var(--gray-100); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--gray-400); font-size: 0.85rem; background-image: linear-gradient(45deg, var(--gray-50) 25%, transparent 25%), linear-gradient(-45deg, var(--gray-50) 25%, transparent 25%); }
@media (max-width: 1023px) { .contact-info-grid { grid-template-columns: 1fr; } .contact-layout { grid-template-columns: 1fr; } }

/* ===================== CHECKOUT ===================== */
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-10); align-items: start; }
.checkout-steps { display: flex; justify-content: center; gap: var(--space-8); margin-bottom: var(--space-12); flex-wrap: wrap; }
.checkout-step { display: flex; align-items: center; gap: var(--space-2); font-size: 0.82rem; color: var(--gray-400); font-weight: 600; }
.checkout-step .step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--gray-200); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; }
.checkout-step.active { color: var(--primary-900); }
.checkout-step.active .step-num { background: var(--gold-600); color: var(--primary-900); }
.checkout-step.done .step-num { background: var(--success); color: var(--white); }
.order-summary { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); position: sticky; top: 110px; }
.order-summary__course { display: flex; gap: var(--space-4); align-items: center; padding-bottom: var(--space-5); border-bottom: 1px solid var(--gray-100); margin-bottom: var(--space-5); }
.order-summary__course img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; }
.order-summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--gray-600); padding: var(--space-2) 0; }
.order-summary-row.total { border-top: 1px solid var(--gray-100); margin-top: var(--space-3); padding-top: var(--space-4); font-weight: 700; color: var(--primary-900); font-size: 1.05rem; }
.card-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.payment-success { text-align: center; max-width: 480px; margin: 0 auto; padding: var(--space-10) 0; }
.payment-success .check-ring { width: 84px; height: 84px; border-radius: 50%; background: #E4F5EC; color: var(--success); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); font-size: 2.4rem; }
@media (max-width: 1023px) { .checkout-grid { grid-template-columns: 1fr; } .order-summary { position: static; } }

/* ===================== SEARCH OVERLAY ===================== */
.search-overlay { position: fixed; inset: 0; background: rgba(7,27,58,0.92); z-index: var(--z-modal); display: none; padding-top: 100px; }
.search-overlay.open { display: block; }
.search-overlay-inner { max-width: 700px; margin: 0 auto; padding: 0 var(--space-6); position: relative; }
.search-overlay input { width: 100%; background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,0.3); color: var(--white); font-family: var(--font-heading); font-size: 1.6rem; padding: var(--space-4) 0; }
.search-overlay input::placeholder { color: rgba(255,255,255,0.4); }
.search-overlay input:focus { outline: none; border-color: var(--gold-500); }
.search-overlay-close { position: absolute; top: -60px; right: 0; color: var(--white); font-size: 1.8rem; }
.search-results-group { margin-top: var(--space-8); }
.search-results-group h5 { color: var(--gold-500); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-4); }
.search-result-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; color: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(255,255,255,0.08); }
.search-result-row img { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; }
.search-empty-hint { color: rgba(255,255,255,0.4); margin-top: var(--space-8); font-size: 0.9rem; }

/* ===================== SETTINGS TOGGLE ROW ===================== */
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) 0; border-bottom: 1px solid var(--gray-100); }
.settings-row:last-child { border-bottom: none; }
.settings-row h5 { color: var(--primary-900); font-size: 0.95rem; margin-bottom: var(--space-1); }
.settings-row p { font-size: 0.82rem; }
.switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--gray-200); border-radius: var(--radius-pill); transition: var(--transition-fast); cursor: pointer; }
.switch .track::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--white); border-radius: 50%; transition: var(--transition-fast); }
.switch input:checked + .track { background: var(--gold-600); }
.switch input:checked + .track::before { transform: translateX(20px); }