:root {
  --primary:#173f67;
  --primary2:#75AB95;
  --accent:#75AB95;
  --success:#173f67;
  --danger:#DC2626;
  --ink:#0F172A;
  --muted:#475569;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --line:#E2E8F0;
  --nav:#0F172A;
  --shadow:0 24px 60px rgba(0,0,0,.12);
  --radius:24px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  transition:.25s
}
body.dark {
  --ink:#F1F5F9;
  --muted:rgba(241,245,249,.7);
  --bg:#0F172A;
  --surface:#1E293B;
  --line:rgba(148,163,184,.25);
  --nav:#0F172A;
  --shadow:0 24px 60px rgba(0,0,0,.35)
}
a {
  text-decoration:none;
  color:inherit
}
img {
  max-width:100%;
  display:block
}
.container {
  width:min(1180px,92%);
  margin:auto
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border-radius:14px;
  padding:.82rem 1.05rem;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  transition:.2s
}
.btn:hover {
  transform:translateY(-2px)
}
.btn-primary {
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#FFFFFF;
  box-shadow:0 12px 28px rgba(23,60,53,.24)
}
.btn-light {
  background:var(--surface);
  border-color:var(--line)
}
.btn-outline {
  border-color:var(--line);
  background:transparent
}
.btn-accent {
  background:var(--accent);
  color:#000000
}
.eyebrow {
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--primary);
  font-weight:900
}
.section {
  padding:86px 0
}
.section-sm {
  padding:56px 0
}
.section-title {
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.05;
  margin:.35rem 0 1rem;
  letter-spacing:-.04em
}
.lead {
  font-size:1.05rem;
  color:var(--muted);
  max-width:700px
}
.muted {
  color:var(--muted)
}
.small {
  font-size:.88rem
}
.top-strip {
  background:var(--nav);
  color:#FFFFFF;
  font-size:.85rem
}
.top-strip .container {
  display:flex;
  justify-content:space-between;
  padding:.52rem 0;
  gap:1rem
}
.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}
.nav {
  min-height:78px;
  display:flex;
  align-items:center;
  gap:1.2rem
}
.brand {
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:1.2rem;
  font-weight:950;
  letter-spacing:-.04em;
  white-space:nowrap;
  flex-shrink:0
}
.brand-mark {
  width:39px;
  height:39px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#FFFFFF;
  display:grid;
  place-items:center;
  font-weight:950;
  transform:none
}
.navlinks {
  display:flex;
  gap:.15rem;
  margin-inline-start:auto;
  flex-wrap:nowrap;
  white-space:nowrap
}
.navlinks a {
  padding:.55rem .55rem;
  border-radius:10px;
  font-weight:700;
  font-size:.88rem;
  color:var(--muted);
  white-space:nowrap
}
.navlinks a:hover,.navlinks a.active {
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));
  color:var(--primary)
}
.nav-actions {
  display:flex;
  gap:.5rem;
  align-items:center
}
.icon-btn {
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer
}
.menu-toggle {
  display:none
}
.mobile-menu {
  display:none
}
.hero {
  padding:72px 0 54px;
  overflow:hidden;
  position:relative
}
.hero:before {
  content:'';
  position:absolute;
  width:480px;
  height:480px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(23,60,53,.14),transparent 68%);
  right:-120px;
  top:-80px;
  pointer-events:none
}
.hero-grid {
  display:grid;
  grid-template-columns:1.03fr .97fr;
  align-items:center;
  gap:54px
}
.hero h1 {
  font-size:clamp(3rem,6.4vw,6.1rem);
  line-height:.93;
  letter-spacing:-.065em;
  margin:.6rem 0 1.4rem;
  max-width:760px
}
.gradient-text {
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  -webkit-background-clip:text;
  color:transparent
}
.hero-actions {
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin:1.8rem 0
}
.trust-row {
  display:flex;
  gap:1.6rem;
  flex-wrap:wrap;
  margin-top:2.1rem
}
.trust-item strong {
  display:block;
  font-size:1.35rem
}
.trust-item span {
  color:var(--muted);
  font-size:.84rem
}
.dashboard-preview {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:32px;
  padding:18px;
  box-shadow:var(--shadow);
  transform:none;
  position:relative
}
.dashboard-preview:after {
  content:'LIVE';
  position:absolute;
  top:22px;
  right:22px;
  background:#FFFFFF;
  color:#173f67;
  border-radius:999px;
  padding:.3rem .62rem;
  font-size:.72rem;
  font-weight:900
}
.preview-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px
}
.preview-chart {
  height:210px;
  border-radius:24px;
  padding:22px;
  background:linear-gradient(135deg,#000000,#000000);
  color:white;
  position:relative;
  overflow:hidden
}
.preview-chart .line {
  position:absolute;
  left:8%;
  right:8%;
  bottom:34%;
  height:70px;
  border-bottom:4px solid #173f67;
  border-radius:50%;
  transform:none
}
.metric-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px
}
.metric {
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface)
}
.metric b {
  display:block;
  font-size:1.15rem
}
.metric span {
  font-size:.76rem;
  color:var(--muted)
}
.logo-cloud {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px
}
.pill {
  padding:.85rem 1rem;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:999px;
  text-align:center;
  font-weight:800
}
.exam-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.exam-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  transition:.2s
}
.exam-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line))
}
.exam-icon {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
  font-size:1.4rem
}
.exam-card h3 {
  margin:1rem 0 .3rem
}
.chip-row {
  display:flex;
  gap:.45rem;
  flex-wrap:wrap
}
.chip {
  font-size:.76rem;
  padding:.28rem .55rem;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--muted)
}
.process {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px
}
.process-step {
  background:var(--surface);
  border:1px solid var(--line);
  padding:23px;
  border-radius:22px;
  min-height:190px;
  position:relative
}
.process-step .num {
  font-size:2.5rem;
  font-weight:950;
  color:color-mix(in srgb,var(--primary) 55%,#64748B);
  line-height:1
}
.process-step:not(:last-child):after {
  content:'→';
  position:absolute;
  right:-16px;
  top:45%;
  z-index:3;
  color:var(--primary);
  font-weight:900
}
.filters {
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin:1.3rem 0
}
.filter-btn {
  border:1px solid var(--line);
  background:var(--surface);
  padding:.6rem .8rem;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  color:var(--ink)
}
.filter-btn.active {
  background:var(--ink);
  color:var(--surface)
}
.course-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.course-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  transition:.2s
}
.course-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow)
}
.course-cover {
  height:180px;
  padding:20px;
  background:linear-gradient(135deg,#000000,#173f67);
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.course-cover.alt {
  background:linear-gradient(135deg,#000000,#173f67)
}
.course-cover.gold {
  background:linear-gradient(135deg,#000000,#173f67)
}
.course-body {
  padding:21px
}
.course-meta {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.8rem;
  color:var(--muted)
}
.price {
  font-size:1.25rem;
  font-weight:950
}
.old-price {
  text-decoration:line-through;
  color:var(--muted);
  font-size:.82rem;
  margin-left:.35rem
}
.dark-band {
  background:linear-gradient(135deg,#000000,#000000);
  color:#FFFFFF
}
.dark-band .muted,.dark-band .lead {
  color:#FFFFFF
}
.test-promo {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center
}
.test-ui {
  background:#FFFFFF;
  color:#000000;
  border-radius:28px;
  padding:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.25)
}
.question-box {
  padding:20px;
  background:#FFFFFF;
  border-radius:18px
}
.answer {
  padding:12px 14px;
  border:2px solid var(--line);
  border-radius:12px;
  margin-top:8px;
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease
}
.answer:hover {
  border-color:color-mix(in srgb, var(--primary) 45%, var(--line));
  background:color-mix(in srgb, var(--primary) 6%, var(--surface))
}
.answer.active {
  border-color:#173f67;
  background:rgba(23,60,53,.1);
  box-shadow:0 0 0 1px rgba(23,60,53,.15)
}
.progressbar {
  height:8px;
  background:var(--line);
  border-radius:20px;
  overflow:hidden
}
.progressbar span {
  height:100%;
  display:block;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  border-radius:20px
}
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center
}
.analytics-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--shadow)
}
.bar-row {
  display:grid;
  grid-template-columns:150px 1fr 55px;
  gap:12px;
  align-items:center;
  margin:14px 0
}
.bar {
  height:10px;
  background:var(--line);
  border-radius:10px;
  overflow:hidden
}
.bar i {
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  border-radius:10px
}
.faculty-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}
.faculty-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px
}
.avatar {
  width:72px;
  height:72px;
  border-radius:22px;
  background:linear-gradient(135deg,#FFFFFF,#FFFFFF);
  display:grid;
  place-items:center;
  font-size:2rem
}
.result-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.result-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px
}
.rank {
  font-size:2rem;
  font-weight:950;
  color:var(--primary)
}
.price-grid {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center;
  align-items:stretch
}
.price-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:26px;
  padding:22px;
  position:relative;
  flex:1 1 280px;
  max-width:360px;
  min-width:0
}
.price-card.popular {
  border:2px solid var(--primary);
  transform:translateY(-8px)
}
.popular-tag {
  position:absolute;
  right:18px;
  top:18px;
  background:var(--primary);
  color:#FFFFFF;
  padding:.3rem .62rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:900
}
.feature-list {
  padding:0;
  list-style:none;
  margin:0 0 1rem
}
.feature-list li {
  padding:.38rem 0;
  border-bottom:1px dashed var(--line)
}
.feature-list li:before {
  content:'✓';
  color:var(--success);
  font-weight:900;
  margin-right:.55rem
}
/* Full-width CTA section */
.cta-section {
  width:100%;
  background:linear-gradient(135deg,#173f67 0%,#173f67 100%);
  color:#FFFFFF;
  padding:64px 0;
  margin:0;
  border:none;
  border-radius:0;
  position:relative;
  overflow:hidden
}
.cta-section::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.12),transparent 50%),
              radial-gradient(circle at 80% 20%,rgba(255,255,255,.08),transparent 40%);
  pointer-events:none
}
.cta-section .container {
  position:relative;
  z-index:1
}
.cta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap
}
.cta-content {
  flex:1 1 320px;
  max-width:640px
}
.cta-content .eyebrow {
  display:inline-block;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.9;
  margin-bottom:.6rem
}
.cta-content h2 {
  font-size:clamp(1.85rem,4vw,2.75rem);
  line-height:1.15;
  margin:0 0 .75rem;
  color:#FFFFFF;
  font-weight:900
}
.cta-content p {
  margin:0;
  font-size:1.05rem;
  opacity:.92;
  max-width:480px;
  line-height:1.5
}
.cta .btn {
  flex-shrink:0;
  background:#FFFFFF !important;
  color:#173f67 !important;
  border:none !important;
  font-weight:900;
  padding:1rem 1.6rem;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  white-space:nowrap
}
.cta .btn:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(0,0,0,.22)
}
/* Keep old .cta class working when nested */
.cta-section .cta {
  border-radius:0;
  padding:0;
  background:transparent;
  color:inherit
}
.site-footer {
  padding:36px 0 18px;
  background:var(--nav);
  color:#FFFFFF
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:18px 20px;
  align-items:start
}
.footer-brand p {
  margin:.4rem 0 .7rem;
  max-width:240px;
  line-height:1.45;
  opacity:.88;
  font-size:.86rem
}
.footer-grid h4 {
  color:#FFFFFF;
  font-size:.82rem;
  margin:0 0 .5rem;
  letter-spacing:.03em;
  text-transform:uppercase
}
.footer-grid a {
  display:block;
  color:rgba(255,255,255,.8);
  margin:.22rem 0;
  font-size:.86rem;
  transition:color .2s
}
.footer-grid a:hover {
  color:#173f67
}
.footer-social {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:.25rem
}
.footer-social a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:9px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#FFFFFF;
  font-size:0;
  margin:0;
  transition:all .2s;
  position:relative
}
.footer-social a svg {
  width:15px;
  height:15px;
  fill:currentColor
}
.footer-social a:hover {
  background:#173f67;
  border-color:#173f67;
  color:#FFFFFF;
  transform:translateY(-2px)
}
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:22px;
  padding-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.68);
  font-size:.8rem
}
.page-hero {
  padding:65px 0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--bg)),var(--bg));
  border-bottom:1px solid var(--line)
}
.breadcrumbs {
  font-size:.82rem;
  color:var(--muted)
}
.content-grid {
  display:grid;
  grid-template-columns:270px 1fr;
  gap:24px;
  align-items:stretch
}
.sidebar-card,.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px
}
/* Courses catalog filter: fill height to match the course grid column */
.content-grid > .sidebar-card.filter-panel {
  display:flex;
  flex-direction:column;
  height:100%;
  padding:18px 16px 20px;
  box-sizing:border-box
}
.content-grid > .sidebar-card h3 {
  margin:0 0 12px;
  font-size:1.05rem
}
.content-grid > .sidebar-card h4 {
  margin:14px 0 6px;
  font-size:.92rem
}
.content-grid > .sidebar-card p {
  margin:0 0 4px
}
.content-grid > .sidebar-card .search {
  margin-bottom:4px
}
.content-grid > .sidebar-card .filter-promo {
  margin-top:auto
}
@media (max-width:900px) {
  .content-grid {
    grid-template-columns:1fr;
    align-items:start
  }
  .content-grid > .sidebar-card.filter-panel {
    height:auto
  }
}
.search {
  width:100%;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  padding:.85rem 1rem;
  border-radius:14px;
  outline:none
}
.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.blog-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden
}
.blog-image {
  height:180px;
  background:linear-gradient(135deg,#173f67,#173f67);
  display:grid;
  place-items:center;
  color:white;
  font-size:3rem
}
.blog-body {
  padding:20px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.field {
  display:flex;
  flex-direction:column;
  gap:.35rem
}
.field.full {
  grid-column:1/-1
}
.field input,.field select,.field textarea {
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  padding:.85rem 1rem;
  border-radius:14px;
  outline:none
}
.map-box {
  min-height:430px;
  border-radius:26px;
  background:linear-gradient(135deg,#FFFFFF,#FFFFFF);
  display:grid;
  place-items:center;
  color:#000000;
  padding:30px;
  text-align:center
}
.auth-wrap {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr
}
.auth-art {
  background:linear-gradient(135deg,#000000,#173f67);
  color:white;
  padding:8vw;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.auth-form {
  display:grid;
  place-items:center;
  padding:40px
}
.auth-card {
  width:min(460px,100%);
  background:var(--surface);
  border:1px solid var(--line);
  padding:30px;
  border-radius:28px;
  box-shadow:var(--shadow)
}
/* dashboards */.app-shell {
  display:grid;
  grid-template-columns:250px 1fr;
  min-height:100vh
}
.app-sidebar {
  background:#000000;
  color:#FFFFFF;
  padding:24px 16px;
  position:sticky;
  top:0;
  height:100vh
}
.app-sidebar .brand {
  padding:0 8px 22px
}
.side-label {
  font-size:.68rem;
  color:#000000;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin:20px 10px 7px;
  font-weight:900
}
.side-nav a {
  display:flex;
  gap:.7rem;
  align-items:center;
  padding:.72rem .8rem;
  border-radius:12px;
  color:#FFFFFF;
  font-weight:700;
  font-size:.9rem
}
.side-nav a.active,.side-nav a:hover {
  background:#000000;
  color:#FFFFFF
}
.app-main {
  min-width:0
}
.app-topbar {
  height:72px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  position:sticky;
  top:0;
  z-index:50
}
.app-content {
  padding:26px
}
.stat-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px
}
.stat {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px
}
.stat .big {
  font-size:1.85rem;
  font-weight:950
}
.dash-grid {
  display:grid;
  grid-template-columns:1.5fr .8fr;
  gap:18px;
  margin-top:18px
}
.schedule-item {
  display:grid;
  grid-template-columns:82px 1fr auto;
  gap:12px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid var(--line)
}
.table-wrap {
  overflow:auto
}
.table {
  width:100%;
  border-collapse:collapse;
  min-width:700px
}
.table th,.table td {
  padding:13px;
  border-bottom:1px solid var(--line);
  text-align:start
}
.table th {
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted)
}
.badge {
  display:inline-flex;
  border-radius:999px;
  padding:.26rem .54rem;
  font-size:.72rem;
  font-weight:850;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
  color:var(--primary)
}
.badge.green {
  color:var(--success);
  background:color-mix(in srgb,var(--success) 10%,var(--surface))
}
.badge.red {
  color:var(--danger);
  background:color-mix(in srgb,var(--danger) 10%,var(--surface))
}
.chart-box {
  height:260px;
  display:flex;
  align-items:end;
  gap:14px;
  padding:24px 10px 5px
}
.chart-col {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.75rem
}
.chart-col i {
  display:block;
  width:100%;
  max-width:42px;
  background:linear-gradient(var(--primary2),var(--primary));
  border-radius:10px 10px 3px 3px
}
.bottom-nav {
  display:none
}
.test-layout {
  display:grid;
  grid-template-columns:1fr 310px;
  gap:20px
}
.question-palette {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px
}
.qnum {
  aspect-ratio:1;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  border-radius:10px;
  font-weight:800;
  cursor:pointer
}
.qnum.answered {
  background:var(--success);
  color:white
}
.qnum.review {
  background:var(--primary2);
  color:white
}
.qnum.current {
  outline:3px solid color-mix(in srgb,var(--primary) 25%,transparent)
}
.empty-state {
  text-align:center;
  padding:70px 20px
}
.empty-code {
  font-size:clamp(6rem,20vw,14rem);
  font-weight:950;
  letter-spacing:-.1em;
  color:color-mix(in srgb,var(--primary) 18%,var(--bg));
  line-height:.8
}
.countdown {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:30px 0
}
.count-box {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  text-align:center
}
.count-box b {
  display:block;
  font-size:2rem
}
[dir="rtl"] .brand-mark {
  transform:none
}
[dir="rtl"] .process-step:not(:last-child):after {
  content:'←';
  right:auto;
  left:-16px
}
[dir="rtl"] .dashboard-preview:after {
  right:auto;
  left:22px
}
@media(max-width:1050px) {
  .navlinks {
    display:none
  }
  .menu-toggle {
    display:inline-grid;
    place-items:center
  }
  .hero-grid,.two-col,.test-promo {
    grid-template-columns:1fr
  }
  .hero h1 {
    max-width:900px
  }
  .dashboard-preview {
    max-width:760px
  }
  .exam-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .process {
    grid-template-columns:repeat(2,1fr)
  }
  .process-step:after {
    display:none
  }
  .course-grid,.blog-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .faculty-grid {
    grid-template-columns:1fr 1fr
  }
  .result-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .price-card.popular {
    transform:none
  }
  .footer-grid {
    grid-template-columns:1.4fr 1fr 1fr;
    gap:24px
  }
  .app-shell {
    grid-template-columns:76px 1fr
  }
  .app-sidebar .brand span,.side-label,.side-nav a span {
    display:none
  }
  .app-sidebar .brand {
    justify-content:center
  }
  .side-nav a {
    justify-content:center
  }
  .stat-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .dash-grid {
    grid-template-columns:1fr
  }
  .test-layout {
    grid-template-columns:1fr
  }
  .content-grid {
    grid-template-columns:1fr
  }
  .sidebar-card {
    display:none
  }
}
@media(max-width:700px) {
  .top-strip {
    display:none
  }
  .nav {
    min-height:68px
  }
  .nav-actions .btn {
    display:none
  }
  .mobile-menu.open {
    display:flex;
    position:absolute;
    left:4%;
    right:4%;
    top:73px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:14px;
    flex-direction:column
  }
  .mobile-menu a {
    padding:.75rem;
    border-radius:10px;
    font-weight:800
  }
  .hero {
    padding-top:45px
  }
  .hero h1 {
    font-size:clamp(2.8rem,15vw,4.6rem)
  }
  .section {
    padding:65px 0
  }
  .metric-grid {
    grid-template-columns:1fr
  }
  .logo-cloud,.exam-grid,.course-grid,.blog-grid,.result-grid,.faculty-grid,.process {
    grid-template-columns:1fr
  }
  .bar-row {
    grid-template-columns:105px 1fr 42px;
    font-size:.82rem
  }
  .cta-section {
    padding:42px 0
  }
  .cta {
    flex-direction:column;
    align-items:stretch;
    gap:14px
  }
  .cta-content {
    max-width:100%
  }
  .cta-content p {
    margin-bottom:0
  }
  .cta .btn {
    width:100%;
    justify-content:center;
    margin-top:2px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:16px 14px
  }
  .footer-grid>div:first-child {
    grid-column:1/-1
  }
  .footer-brand p {
    max-width:100%;
    margin-bottom:.5rem
  }
  .footer-social {
    margin-top:.15rem
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin-top:16px;
    padding-top:12px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .field.full {
    grid-column:auto
  }
  .auth-wrap {
    grid-template-columns:1fr
  }
  .auth-art {
    display:none
  }
  .app-shell {
    display:block
  }
  .app-sidebar {
    display:none
  }
  .app-content {
    padding:17px 14px 90px
  }
  .app-topbar {
    height:62px;
    padding:0 14px
  }
  .stat-grid {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .stat {
    padding:14px
  }
  .stat .big {
    font-size:1.35rem
  }
  .bottom-nav {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    background:var(--surface);
    border-top:1px solid var(--line);
    z-index:100;
    padding:7px 4px calc(7px + env(safe-area-inset-bottom))
  }
  .bottom-nav a {
    text-align:center;
    font-size:.66rem;
    color:var(--muted)
  }
  .bottom-nav b {
    display:block;
    font-size:1.1rem
  }
  .test-layout {
    display:block
  }
  .test-layout aside {
    margin-top:16px
  }
  .countdown {
    grid-template-columns:1fr 1fr
  }
  .schedule-item {
    grid-template-columns:70px 1fr
  }
  .schedule-item .btn {
    grid-column:2
  }
  .section-title {
    letter-spacing:-.03em
  }
}
/* =========================================================
   EXAMORA 2.0 — STRICT THREE-COLOR SYSTEM
   Signature: #173f67 | White: #FFFFFF | Black: #000000
   All visual neutrals are opacity variants of black/white.
   ========================================================= */
body {
  background:var(--bg);
  color:var(--ink)
}
.top-strip {
  background:#000000;
  color:#FFFFFF;
  border-bottom:1px solid rgba(255,255,255,.12)
}
.site-header {
  background:color-mix(in srgb,var(--surface) 94%,transparent)
}
.brand-mark {
  background:#173f67;
  color:#FFFFFF;
  box-shadow:none
}
.navlinks a:hover,.navlinks a.active {
  background:rgba(23,60,53,.1);
  color:#173f67
}
.btn-primary {
  background:#173f67;
  color:#FFFFFF;
  box-shadow:0 12px 28px rgba(23,60,53,.22)
}
.btn-primary:hover {
  background:#173f67;
  color:#FFFFFF
}
body.dark .btn-primary:hover {
  background:#FFFFFF;
  color:#000000
}
.btn-accent {
  background:#173f67;
  color:#FFFFFF
}
.eyebrow,.rank {
  color:#173f67
}
.gradient-text {
  background:none;
  color:#173f67;
  -webkit-text-fill-color:#173f67
}
.exam-card:hover {
  border-color:#173f67
}
.exam-icon {
  background:rgba(23,60,53,.12)
}
.process-step .num {
  color:rgba(23,60,53,.55)
}
.process-step:not(:last-child):after {
  color:#173f67
}
.course-cover,.course-cover.alt,.course-cover.gold,.blog-image,.auth-art,.dark-band {
  background:#000000;
  color:#FFFFFF
}
.course-cover {
  border-bottom:5px solid #173f67
}
.progressbar span,.bar i,.chart-col i {
  background:#173f67
}
.answer.active {
  border-color:#173f67;
  background:rgba(23,60,53,.1);
  color:var(--ink)
}
.feature-list li:before {
  color:#173f67
}
.price-card.popular {
  border-color:#173f67
}
.popular-tag {
  background:#173f67;
  color:#FFFFFF
}
.page-hero {
  background:linear-gradient(135deg,rgba(23,60,53,.08),transparent);
  border-color:var(--line)
}
.map-box {
  background:rgba(23,60,53,.08);
  color:var(--ink);
  border:1px solid var(--line)
}
.app-sidebar {
  background:#000000;
  color:#FFFFFF
}
.side-label {
  color:rgba(255,255,255,.5)
}
.side-nav a {
  color:rgba(255,255,255,.68)
}
.side-nav a.active,.side-nav a:hover {
  background:#173f67;
  color:#FFFFFF
}
.badge,.badge.green,.badge.red {
  background:rgba(23,60,53,.11);
  color:#173f67
}
.qnum.answered,.qnum.review {
  background:#173f67;
  color:#FFFFFF
}
.qnum.current {
  outline-color:rgba(23,60,53,.28)
}
.empty-code {
  color:rgba(23,60,53,.14)
}
.site-footer {
  background:#000000;
  color:#FFFFFF
}
.footer-grid a,.footer-bottom {
  color:rgba(255,255,255,.62)
}
.footer-bottom {
  border-color:rgba(255,255,255,.15)
}
.test-ui {
  background:#FFFFFF;
  color:#000000
}
.question-box {
  background:rgba(0,0,0,.04)
}
.dark-band .muted,.dark-band .lead {
  color:rgba(255,255,255,.67)
}
/* Home 1 — new asymmetric command-center hero */
.hero-v2 {
  padding:0 0 32px;
  overflow:hidden;
  background:#FFFFFF;
  color:#000000;
  border-bottom:1px solid rgba(0,0,0,.12)
}
body.dark .hero-v2 {
  background:#000000;
  color:#FFFFFF;
  border-bottom-color:rgba(255,255,255,.18)
}
.hero-v2:before {
  display:none
}
.hero-marquee {
  display:none;
  background:#173f67;
  color:#FFFFFF;
  overflow:hidden;
  border-bottom:1px solid #000000
}
.hero-marquee-track {
  width:max-content;
  display:flex;
  align-items:center;
  gap:24px;
  padding:10px 0;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.2em;
  animation:none
}
.hero-marquee-track i {
  font-style:normal;
  color:#000000;
  font-size:.9rem
}
.hero-v2-grid {
  min-height:690px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:64px;
  padding-top:58px;
  padding-bottom:52px;
  position:relative
}
.hero-copy {
  position:relative;
  z-index:2
}
.hero-kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px;
  padding:8px 12px 8px 9px;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase
}
body.dark .hero-kicker {
  border-color:rgba(255,255,255,.2)
}
.kicker-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#173f67;
  box-shadow:0 0 0 5px rgba(23,60,53,.12);
  animation:none
}
.hero-v2 h1 {
  font-size:clamp(3.8rem,7.2vw,7rem);
  line-height:.86;
  letter-spacing:-.075em;
  margin:1.1rem 0 1.55rem;
  max-width:780px;
  font-weight:950
}
.hero-v2 h1 em {
  font-style:normal;
  -webkit-text-stroke:2px #000000;
  color:transparent
}
body.dark .hero-v2 h1 em {
  -webkit-text-stroke-color:#FFFFFF
}
.hero-v2 h1 span {
  color:#173f67;
  position:relative;
  display:inline-block
}
.hero-v2 h1 span:after {
  content:'';
  position:absolute;
  left:3%;
  right:-2%;
  bottom:-5px;
  height:8px;
  background:#173f67;
  transform:none;
  animation:none
}
.hero-v2-lead {
  font-size:1.08rem;
  line-height:1.75;
  max-width:610px;
  color:rgba(0,0,0,.64)
}
body.dark .hero-v2-lead {
  color:rgba(255,255,255,.67)
}
.hero-v2 .hero-actions {
  align-items:center;
  margin:2rem 0 2.25rem
}
.hero-main-cta {
  padding:1rem 1.25rem;
  border-radius:0;
  box-shadow:8px 8px 0 #000000;
  transition:.22s
}
.hero-main-cta:hover {
  transform:translate(-2px,-2px);
  box-shadow:11px 11px 0 #000000;
  background:#173f67;
  color:#FFFFFF
}
body.dark .hero-main-cta {
  box-shadow:8px 8px 0 #FFFFFF
}
body.dark .hero-main-cta:hover {
  box-shadow:11px 11px 0 #FFFFFF
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:850;
  padding:.75rem .3rem
}
.play-dot {
  width:34px;
  height:34px;
  border:1px solid currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.65rem;
  transition:.2s
}
.text-link:hover .play-dot {
  background:#000000;
  color:#FFFFFF;
  transform:scale(1.08)
}
body.dark .text-link:hover .play-dot {
  background:#FFFFFF;
  color:#000000
}
.hero-proof {
  display:flex;
  gap:0;
  border-top:1px solid rgba(0,0,0,.15);
  max-width:610px;
  padding-top:18px
}
.hero-proof>div {
  padding:0 24px;
  border-left:1px solid rgba(0,0,0,.15)
}
.hero-proof>div:first-child {
  padding-left:0;
  border-left:0
}
.hero-proof b {
  display:block;
  font-size:1.35rem
}
.hero-proof span {
  display:block;
  font-size:.72rem;
  color:rgba(0,0,0,.58);
  text-transform:uppercase;
  letter-spacing:.08em
}
body.dark .hero-proof {
  border-color:rgba(255,255,255,.18)
}
body.dark .hero-proof>div {
  border-color:rgba(255,255,255,.18)
}
body.dark .hero-proof span {
  color:rgba(255,255,255,.6)
}
.exam-command {
  position:relative;
  min-height:520px;
  display:grid;
  place-items:center
}
.exam-command:before {
  content:'08';
  position:absolute;
  right:-20px;
  top:-82px;
  font-size:14rem;
  font-weight:950;
  line-height:1;
  color:rgba(0,0,0,.035);
  letter-spacing:-.1em;
  pointer-events:none
}
body.dark .exam-command:before {
  color:rgba(255,255,255,.04)
}
.command-frame {
  width:min(510px,100%);
  background:#000000;
  color:#FFFFFF;
  border:1px solid #000000;
  padding:22px;
  position:relative;
  box-shadow:18px 18px 0 #173f67;
  overflow:hidden;
  animation:none
}
body.dark .command-frame {
  border-color:#FFFFFF;
  box-shadow:18px 18px 0 #173f67
}
.command-header {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.18)
}
.command-label {
  display:block;
  color:#173f67;
  font-size:.65rem;
  letter-spacing:.18em;
  font-weight:950;
  margin-bottom:5px
}
.command-header strong {
  font-size:1rem
}
.live-pulse {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.12em
}
.live-pulse i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#173f67;
  animation:none
}
.score-stage {
  min-height:235px;
  display:grid;
  place-items:center;
  position:relative
}
.score-orbit {
  width:182px;
  height:182px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative
}
.score-orbit:before,.score-orbit:after {
  content:'';
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.16)
}
.score-orbit:before {
  inset:-19px
}
.score-orbit:after {
  inset:24px
}
.orbit-dot {
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#173f67;
  top:-7px;
  left:calc(50% - 6px);
  transform-origin:6px 98px;
  animation:none
}
.score-core {
  text-align:center;
  position:relative;
  z-index:2
}
.score-core small {
  display:block;
  font-size:.58rem;
  letter-spacing:.18em;
  color:rgba(255,255,255,.55)
}
.score-core strong {
  display:block;
  font-size:4.3rem;
  line-height:.9;
  color:#173f67;
  letter-spacing:-.08em
}
.score-core span {
  font-size:.72rem;
  color:rgba(255,255,255,.55)
}
.score-note {
  position:absolute;
  right:4px;
  bottom:24px;
  border-left:2px solid #173f67;
  padding-left:10px
}
.score-note span {
  display:block;
  color:#173f67;
  font-weight:950;
  font-size:1.25rem
}
.score-note small {
  display:block;
  color:rgba(255,255,255,.55);
  line-height:1.2
}
.command-bars {
  display:grid;
  gap:10px
}
.command-bar {
  display:grid;
  grid-template-columns:94px 1fr 42px;
  gap:10px;
  align-items:center;
  font-size:.7rem
}
.command-bar>span {
  color:rgba(255,255,255,.65)
}
.command-bar>i {
  height:5px;
  background:rgba(255,255,255,.12);
  overflow:hidden
}
.command-bar>i b {
  display:block;
  height:100%;
  background:#173f67;
  transform-origin:left;
  animation:none
}
.command-bar>strong {
  text-align:right;
  font-size:.68rem
}
.command-footer {
  margin-top:19px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18);
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
  align-items:end
}
.command-footer small {
  display:block;
  color:rgba(255,255,255,.45);
  font-size:.55rem;
  letter-spacing:.1em
}
.command-footer b {
  font-size:.85rem
}
.command-footer a {
  color:#173f67;
  font-size:.72rem;
  font-weight:850
}
.scan-line {
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:#173f67;
  box-shadow:0 0 14px #173f67;
  opacity:.65;
  animation:none;
  pointer-events:none
}
.floating-tag {
  position:absolute;
  background:#FFFFFF;
  color:#000000;
  border:2px solid #000000;
  padding:12px 14px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:8px;
  align-items:center;
  box-shadow:7px 7px 0 #173f67;
  animation:none
}
.floating-tag>span {
  grid-row:1/3;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#173f67;
  color:#FFFFFF;
  display:grid;
  place-items:center
}
.floating-tag b {
  font-size:.8rem;
  line-height:1
}
.floating-tag small {
  font-size:.62rem;
  color:rgba(0,0,0,.58)
}
.tag-one {
  left:-34px;
  top:80px
}
.tag-two {
  right:-30px;
  bottom:62px;
  animation-delay:-2s
}
body.dark .floating-tag {
  border-color:#FFFFFF
}
.hero-bottom-note {
  display:flex;
  align-items:center;
  gap:20px;
  border-top:1px solid rgba(0,0,0,.14);
  padding-top:18px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.12em
}
.hero-bottom-note>span {
  font-weight:850
}
.note-rule {
  height:1px;
  flex:1;
  background:rgba(0,0,0,.18)
}
.hero-bottom-note>b {
  font-size:.68rem;
  color:#173f67
}
body.dark .hero-bottom-note {
  border-color:rgba(255,255,255,.18)
}
body.dark .note-rule {
  background:rgba(255,255,255,.2)
}
.reveal-up {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.delay-1 {
  animation-delay:.22s
}
@keyframes revealUp {
  to {
    opacity:1;
    transform:none
  }
}
@keyframes drawLine {
  from {
    transform:scaleX(0) rotate(-1.5deg);
    transform-origin:left
  }
  to {
    transform:scaleX(1) rotate(-1.5deg);
    transform-origin:left
  }
}
@keyframes kickerPulse {
  0%,100% {
    box-shadow:0 0 0 0 rgba(23,60,53,.32)
  }
  50% {
    box-shadow:0 0 0 8px rgba(23,60,53,0)
  }
}
@keyframes commandFloat {
  0%,100% {
    transform:translateY(0) rotate(.4deg)
  }
  50% {
    transform:translateY(-10px) rotate(-.4deg)
  }
}
@keyframes orbitSpin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes scanMove {
  0%,100% {
    top:18%;
    opacity:0
  }
  18% {
    opacity:.65
  }
  80% {
    opacity:.65
  }
  100% {
    top:82%;
    opacity:0
  }
}
@keyframes barGrow {
  from {
    transform:scaleX(0)
  }
  to {
    transform:scaleX(1)
  }
}
@keyframes tagBob {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-9px)
  }
}
@keyframes examoraMarquee {
  to {
    transform:translateX(-50%)
  }
}
@media(max-width:1050px) {
  .hero-v2-grid {
    grid-template-columns:1fr;
    min-height:auto;
    gap:20px
  }
  .hero-v2 h1 {
    max-width:820px
  }
  .exam-command {
    min-height:570px
  }
  .command-frame {
    width:min(560px,90%)
  }
  .tag-one {
    left:5%
  }
  .tag-two {
    right:5%
  }
  .hero-bottom-note {
    flex-wrap:wrap
  }
  .note-rule {
    min-width:120px
  }
}
@media(max-width:700px) {
  .hero-v2 {
    padding-bottom:20px
  }
  .hero-v2-grid {
    padding-top:38px;
    padding-bottom:24px;
    gap:30px
  }
  .hero-v2 h1 {
    font-size:clamp(3.25rem,17vw,5rem);
    line-height:.88
  }
  .hero-v2 h1 em {
    -webkit-text-stroke-width:1.4px
  }
  .hero-v2 h1 span:after {
    height:5px
  }
  .hero-kicker {
    font-size:.59rem
  }
  .hero-v2-lead {
    font-size:.98rem
  }
  .hero-proof {
    justify-content:space-between;
    gap:0
  }
  .hero-proof>div {
    padding:0 10px
  }
  .hero-proof b {
    font-size:1.1rem
  }
  .hero-proof span {
    font-size:.56rem
  }
  .exam-command {
    min-height:510px
  }
  .command-frame {
    width:calc(100% - 18px);
    padding:17px;
    box-shadow:10px 10px 0 #173f67
  }
  .score-stage {
    min-height:210px
  }
  .score-orbit {
    width:158px;
    height:158px
  }
  .orbit-dot {
    transform-origin:6px 86px
  }
  .score-core strong {
    font-size:3.7rem
  }
  .score-note {
    right:0
  }
  .command-bar {
    grid-template-columns:78px 1fr 38px
  }
  .command-footer {
    grid-template-columns:1fr 1fr
  }
  .command-footer a {
    grid-column:1/-1
  }
  .floating-tag {
    padding:9px 10px;
    box-shadow:5px 5px 0 #173f67
  }
  .tag-one {
    left:0;
    top:40px
  }
  .tag-two {
    right:0;
    bottom:15px
  }
  .floating-tag>span {
    width:26px;
    height:26px
  }
  .hero-bottom-note {
    gap:10px
  }
  .hero-bottom-note .note-rule {
    display:none
  }
  .hero-bottom-note>b {
    width:100%;
    margin-top:4px
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-marquee-track,.kicker-dot,.command-frame,.orbit-dot,.scan-line,.command-bar>i b,.floating-tag,.reveal-up,.hero-v2 h1 span:after {
    animation:none!important
  }
  .reveal-up {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
}
.section-reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)
}
.section-reveal.is-visible {
  opacity:1;
  transform:none
}
@media(prefers-reduced-motion:reduce) {
  .section-reveal {
    opacity:1;
    transform:none
  }
}
/* =========================================================
   GLOBAL BUTTON CONTRAST FIX — LIGHT / DARK / BLACK SECTIONS
   Keeps every action visible using the strict 3-color system:
   #173f67, #FFFFFF, #000000
   ========================================================= */

/* Base button text must never depend on an accidental parent color. */
.btn {
  color:#000000;
  -webkit-tap-highlight-color:transparent;
}
/* Primary actions: orange is always readable in both themes. */
.btn-primary,
a.btn-primary,
button.btn-primary {
  background:#173f67;
  color:#FFFFFF;
  border-color:#173f67;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background:#000000;
  color:#FFFFFF;
  border-color:#000000;
}
body.dark .btn-primary:hover,
body.dark a.btn-primary:hover,
body.dark button.btn-primary:hover {
  background:#FFFFFF;
  color:#000000;
  border-color:#FFFFFF;
}
/* Light/secondary actions remain solid white even in dark mode. */
.btn-light,
a.btn-light,
button.btn-light {
  background:#FFFFFF;
  color:#000000;
  border-color:#000000;
}
body.dark .btn-light,
body.dark a.btn-light,
body.dark button.btn-light {
  background:#FFFFFF;
  color:#000000;
  border-color:#FFFFFF;
}
.btn-light:hover,
a.btn-light:hover,
button.btn-light:hover,
body.dark .btn-light:hover,
body.dark a.btn-light:hover,
body.dark button.btn-light:hover {
  background:#173f67;
  color:#FFFFFF;
  border-color:#173f67;
}
/* Outline actions use an explicit foreground and border per theme. */
.btn-outline,
a.btn-outline,
button.btn-outline {
  background:transparent;
  color:#000000;
  border-color:#000000;
}
body.dark .btn-outline,
body.dark a.btn-outline,
body.dark button.btn-outline {
  background:transparent;
  color:#FFFFFF;
  border-color:#FFFFFF;
}
.btn-outline:hover,
a.btn-outline:hover,
button.btn-outline:hover {
  background:#000000;
  color:#FFFFFF;
  border-color:#000000;
}
body.dark .btn-outline:hover,
body.dark a.btn-outline:hover,
body.dark button.btn-outline:hover {
  background:#FFFFFF;
  color:#000000;
  border-color:#FFFFFF;
}
/* Accent buttons use the signature color consistently. */
.btn-accent,
a.btn-accent,
button.btn-accent {
  background:#173f67;
  color:#FFFFFF;
  border-color:#173f67;
}
.btn-accent:hover,
a.btn-accent:hover,
button.btn-accent:hover {
  background:#FFFFFF;
  color:#000000;
  border-color:#FFFFFF;
}
/* Black sections need explicit inverse secondary controls. */
.dark-band .btn-light,
.cta .btn-light,
.site-footer .btn-light,
.auth-art .btn-light,
.course-cover .btn-light,
.blog-image .btn-light,
.command-frame .btn-light {
  background:#FFFFFF;
  color:#000000;
  border-color:#FFFFFF;
}
.dark-band .btn-outline,
.cta .btn-outline,
.site-footer .btn-outline,
.auth-art .btn-outline,
.course-cover .btn-outline,
.blog-image .btn-outline,
.command-frame .btn-outline {
  background:transparent;
  color:#FFFFFF;
  border-color:#FFFFFF;
}
.dark-band .btn-outline:hover,
.cta .btn-outline:hover,
.site-footer .btn-outline:hover,
.auth-art .btn-outline:hover,
.course-cover .btn-outline:hover,
.blog-image .btn-outline:hover,
.command-frame .btn-outline:hover {
  background:#FFFFFF;
  color:#000000;
  border-color:#FFFFFF;
}
/* Header and dashboard icon controls must stay visible in both themes. */
.icon-btn {
  background:#FFFFFF;
  color:#000000;
  border-color:#000000;
}
body.dark .icon-btn {
  background:#000000;
  color:#FFFFFF;
  border-color:#FFFFFF;
}
.icon-btn:hover {
  background:#173f67;
  color:#FFFFFF;
  border-color:#173f67;
}
/* Filter chips must never disappear when theme variables invert. */
.filter-btn {
  background:#FFFFFF;
  color:#000000;
  border-color:#000000;
}
body.dark .filter-btn {
  background:#000000;
  color:#FFFFFF;
  border-color:#FFFFFF;
}
.filter-btn.active,
body.dark .filter-btn.active {
  background:#173f67;
  color:#FFFFFF;
  border-color:#173f67;
}
.filter-btn:hover {
  border-color:#173f67;
  color:#173f67;
}
.filter-btn.active:hover,
body.dark .filter-btn.active:hover {
  color:#FFFFFF;
}
/* Quiz/palette buttons also need explicit contrast. */
.qnum {
  background:#FFFFFF;
  color:#000000;
  border-color:#000000;
}

/* Mock test answer options — light & dark contrast */
body.dark .answer {
  background:#0a0a0a;
  border-color:rgba(255,255,255,.22);
  color:#FFFFFF
}
body.dark .answer:hover {
  border-color:rgba(23,60,53,.55);
  background:rgba(23,60,53,.12)
}
body.dark .answer.active {
  border-color:#173f67;
  background:rgba(23,60,53,.18);
  color:#FFFFFF
}

body.dark .qnum {
  background:#000000;
  color:#FFFFFF;
  border-color:#FFFFFF;
}
.qnum.answered,
.qnum.review,
body.dark .qnum.answered,
body.dark .qnum.review {
  background:#173f67;
  color:#FFFFFF;
  border-color:#173f67;
}
/* Keyboard focus should be visible regardless of theme. */
.btn:focus-visible,
.icon-btn:focus-visible,
.filter-btn:focus-visible,
.qnum:focus-visible {
  outline:3px solid #173f67;
  outline-offset:3px;
}
/* =========================================================
   QUALITY PASS — 2PX CONTENT BORDERS, ALIGNMENT & MOTION
   ========================================================= */
:root {
  --line:rgba(0,0,0,.14)
}
body.dark {
  --line:rgba(255,255,255,.22)
}
/* Major boxes use a consistent 2px outline. */
.dashboard-preview,.metric,.pill,.exam-card,.process-step,.course-card,
.analytics-card,.faculty-card,.result-card,.price-card,.sidebar-card,.panel,
.blog-card,.auth-card,.stat,.count-box,.map-box,.test-ui,.question-box {
  border:2px solid var(--line);
}
.price-card.popular {
  border-width:2px
}
.course-cover {
  border-bottom-width:5px
}
/* Popular Courses labels — visible in light and dark modes. */
.course-label {
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  background:#FFFFFF;
  color:#000000;
  border:2px solid #FFFFFF;
  border-radius:999px;
  padding:.34rem .68rem;
  font-size:.74rem;
  font-weight:900;
  line-height:1.15;
  letter-spacing:.01em;
  box-shadow:4px 4px 0 rgba(0,0,0,.22);
}
body.dark .course-label {
  background:#FFFFFF;
  color:#000000;
  border-color:#FFFFFF
}
/* Better card alignment and equal-height content. */
.course-grid,.exam-grid,.result-grid,.price-grid,.faculty-grid,.blog-grid {
  align-items:stretch
}
.course-card,.exam-card,.result-card,.price-card,.faculty-card,.blog-card {
  height:100%
}
.course-card {
  display:flex;
  flex-direction:column
}
.course-body {
  display:flex;
  flex-direction:column;
  flex:1
}
.course-body>div:last-child {
  margin-top:auto;
  padding-top:14px
}
.course-cover h3 {
  margin:0;
  line-height:1.2
}
.course-meta {
  align-items:center;
  flex-wrap:wrap
}
.price-card {
  display:flex;
  flex-direction:column
}
.price-card .btn {
  margin-top:auto
}
/* Dashboard/content alignment refinements. */
.panel,.stat {
  min-width:0
}
.schedule-item>* {
  min-width:0
}
.table-wrap {
  border-radius:16px
}
.app-content h1,.app-content h2,.app-content h3 {
  overflow-wrap:anywhere
}
/* Small interaction polish. */
.exam-card,.course-card,.faculty-card,.result-card,.price-card,.blog-card,.stat,.panel {
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.exam-card:hover,.course-card:hover,.faculty-card:hover,.result-card:hover,.blog-card:hover,.stat:hover {
  transform:translateY(-5px);
  border-color:#173f67;
  box-shadow:0 18px 45px rgba(0,0,0,.12);
}
body.dark .exam-card:hover,body.dark .course-card:hover,body.dark .faculty-card:hover,
body.dark .result-card:hover,body.dark .blog-card:hover,body.dark .stat:hover {
  box-shadow:0 18px 45px rgba(255,255,255,.05);
}
.course-cover {
  position:relative;
  overflow:hidden
}
.course-cover:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);
  transform:translateX(-130%);
  transition:transform .65s ease;
  pointer-events:none;
}
.course-card:hover .course-cover:after {
  transform:translateX(130%)
}
.chart-col i,.bar i,.progressbar span {
  transform-origin:bottom;
  animation:metricRise .8s cubic-bezier(.22,1,.36,1) both
}
@keyframes metricRise {
  from {
    transform:scaleY(.15);
    opacity:.35
  }
  to {
    transform:scaleY(1);
    opacity:1
  }
}
/* Keep desktop/tablet spacing balanced and prevent overlap. */
@media(max-width:1050px) {
  .course-grid,.blog-grid {
    align-items:stretch
  }
  .price-grid,.result-grid {
    align-items:stretch
  }
}
@media(max-width:700px) {
  .course-cover {
    height:auto;
    min-height:170px
  }
  .course-label {
    font-size:.68rem;
    padding:.3rem .58rem
  }
  .course-meta {
    gap:.45rem
  }
  .schedule-item {
    align-items:start
  }
  .schedule-item .btn {
    justify-self:start
  }
  .app-topbar>div:last-child {
    flex-shrink:0
  }
  .stat-grid {
    align-items:stretch
  }
  .stat {
    height:100%
  }
}
@media(max-width:420px) {
  .stat-grid {
    grid-template-columns:1fr
  }
  .footer-grid {
    grid-template-columns:1fr
  }
  .hero-actions,.filters {
    gap:.55rem
  }
  .btn {
    width:100%
  }
  .nav-actions .icon-btn,.icon-btn {
    width:40px;
    height:40px
  }
  .schedule-item {
    grid-template-columns:62px 1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  .exam-card,.course-card,.faculty-card,.result-card,.price-card,.blog-card,.stat,.panel,
  .course-cover:after,.chart-col i,.bar i,.progressbar span {
    animation:none!important;
    transition:none!important
  }
}
/* ============================================================
   HOME DROPDOWN + RTL LAYOUT-ONLY MIRROR
   ============================================================ */
.nav-dropdown {
  position:relative;
  display:flex;
  align-items:center
}
.nav-drop-trigger {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.65rem .72rem;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.93rem;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease
}
.nav-drop-trigger:hover,.nav-drop-trigger.active,.nav-dropdown:focus-within .nav-drop-trigger {
  background:rgba(23,60,53,.1);
  color:#173f67
}
.drop-arrow {
  font-size:.78rem;
  transition:transform .2s ease
}
.nav-dropdown:hover .drop-arrow,.nav-dropdown:focus-within .drop-arrow,.nav-dropdown.open .drop-arrow {
  transform:rotate(180deg)
}
.nav-dropdown-menu {
  position:absolute;
  top:calc(100% + 12px);
  inset-inline-start:0;
  min-width:290px;
  padding:10px;
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index:1200
}
.nav-dropdown-menu:before {
  content:'';
  position:absolute;
  inset-inline-start:18px;
  top:-13px;
  width:70px;
  height:13px
}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto
}
.nav-dropdown-menu a {
  display:block;
  padding:.78rem .85rem;
  border-radius:12px;
  color:var(--ink)!important;
  background:transparent!important
}
.nav-dropdown-menu a span {
  display:block;
  font-weight:900
}
.nav-dropdown-menu a small {
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap
}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a.active {
  background:rgba(23,60,53,.1)!important;
  color:#173f67!important
}
.nav-dropdown-menu a.active small {
  color:inherit
}
.mobile-home-group {
  display:grid;
  border-bottom:2px solid var(--line);
  padding-bottom:8px;
  margin-bottom:4px
}
.mobile-home-label {
  padding:.45rem .75rem .2rem;
  color:var(--muted);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em
}
.mobile-home-group a {
  padding-inline-start:1.1rem
}
.mobile-home-group a.active {
  background:rgba(23,60,53,.1);
  color:#173f67
}
/* RTL is intentionally layout-only: containers/navigation can mirror,
   while readable text keeps its original left alignment and LTR flow. */
html[dir="rtl"] body {
  text-align:left
}
html[dir="rtl"] :where(h1,h2,h3,h4,h5,h6,p,li,label,input,textarea,select,td,th,.muted,.lead,.small,.eyebrow,.section-title,.course-meta,.command-label,.side-label) {
  direction:ltr
}
html[dir="rtl"] .nav-dropdown-menu {
  direction:ltr
}
html[dir="rtl"] .mobile-menu {
  direction:ltr
}
html[dir="rtl"] .btn,html[dir="rtl"] button,html[dir="rtl"] a {
  direction:ltr
}
html[dir="rtl"] .score-core,html[dir="rtl"] .score-core * {
  text-align:center
}
html[dir="rtl"] .command-bar>strong {
  text-align:right
}
html[dir="rtl"] .bottom-nav a {
  text-align:center
}
@media(max-width:1050px) {
  .nav-dropdown {
    display:none
  }
}


/* ============================================================
   IMAGE-READY CONTENT + LIGHT/DARK CONTRAST FIX
   ============================================================ */
/* Stable light-mode tokens: prevent white-on-white cards. */
:root {
  --ink:#0F172A;
  --muted:rgba(0,0,0,.68);
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --line:rgba(0,0,0,.16);
}
body.dark {
  --ink:#F1F5F9;
  --muted:rgba(255,255,255,.70);
  --bg:#0F172A;
  --surface:#1E293B;
  --line:rgba(255,255,255,.24);
}
.exam-card,.course-card,.faculty-card,.result-card,.price-card,.blog-card,.panel,.analytics-card,.stat,.sidebar-card,.auth-card {
  color:var(--ink);
}
/* Critical fix: panels inside black bands must remain black in light mode,
   otherwise white muted text disappears on white cards. */
.dark-band .panel {
  background:#000000;
  color:#FFFFFF;
  border-color:rgba(255,255,255,.34);
}
.dark-band .panel .muted,.dark-band .panel p,.dark-band .panel small {
  color:rgba(255,255,255,.78)
}
.dark-band .panel:hover {
  border-color:#173f67;
  box-shadow:0 18px 45px rgba(0,0,0,.28)
}
/* Explicit light mode text contrast for common card contents. */
body:not(.dark) .course-body,body:not(.dark) .exam-card,body:not(.dark) .faculty-card,
body:not(.dark) .result-card,body:not(.dark) .price-card,body:not(.dark) .blog-card,
body:not(.dark) .analytics-card,body:not(.dark) .panel:not(.dark-band .panel) {
  color:#000000
}
body:not(.dark) .muted {
  color:rgba(0,0,0,.68)
}
/* Replaceable image slots. */
.image-slot {
  position:relative;
  overflow:hidden;
  background:#000000;
  border:2px solid var(--line)
}
.image-slot img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.22,1,.36,1)
}
.image-slot:hover img,.course-card:hover .course-thumb,.faculty-card:hover .avatar-image img,.result-card:hover .student-photo img {
  transform:scale(1.045)
}
.course-cover-image {
  padding:0;
  height:220px;
  position:relative;
  background:#000000
}
.course-cover-image .course-thumb {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.course-cover-image:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.04) 62%);
  z-index:1;
  pointer-events:none
}
.course-cover-image .course-label,.course-cover-image h3 {
  position:relative;
  z-index:2
}
.course-cover-image .course-label {
  margin:18px
}
.course-cover-image h3 {
  margin:auto 20px 20px;
  color:#FFFFFF;
  text-shadow:0 2px 14px rgba(0,0,0,.45)
}
.avatar.avatar-image {
  padding:0;
  overflow:hidden;
  background:#000000;
  border:2px solid var(--line)
}
.avatar.avatar-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease
}
.avatar-large {
  width:120px!important;
  height:120px!important;
  border-radius:28px
}
.student-photo {
  height:190px;
  margin:-24px -24px 20px;
  border-width:0 0 2px;
  border-radius:22px 22px 0 0
}
.blog-image.image-slot {
  border:0;
  border-bottom:2px solid var(--line);
  height:210px;
  padding:0
}
.blog-image.image-slot img {
  width:100%;
  height:100%;
  object-fit:cover
}
.about-image-grid {
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:20px
}
.about-image {
  height:380px;
  border-radius:28px
}
.about-image:nth-child(2) {
  height:310px;
  align-self:end
}
.home2-hero-image {
  margin-top:24px;
  height:260px;
  border-radius:28px
}
.home2-hero-image span {
  position:absolute;
  left:14px;
  bottom:14px;
  background:#000000;
  color:#FFFFFF;
  padding:.38rem .62rem;
  border-radius:10px;
  font-size:.72rem;
  font-weight:800
}
.course-detail-image {
  margin-top:24px;
  height:min(420px,48vw);
  min-height:260px;
  border-radius:28px
}
.course-detail-image img {
  width:100%;
  height:100%;
  object-fit:cover
}
@media(max-width:700px) {
  .course-cover-image {
    height:205px
  }
  .about-image-grid {
    grid-template-columns:1fr
  }
  .about-image,.about-image:nth-child(2) {
    height:260px
  }
  .home2-hero-image {
    height:220px
  }
  .student-photo {
    height:175px
  }
}
/* =========================================================
   EXAMORA FUTURE-LAB — additive exam-tech visual layer
   Orange + Black + White only. Existing content/layout preserved.
   ========================================================= */
.page-hero:has(.exam-tech-visual) {
  overflow:hidden;
  position:relative;
  min-height:390px
}
.page-hero:has(.exam-tech-visual) .container {
  position:relative;
  min-height:285px;
  padding-inline-end:min(43vw,500px)
}
.exam-tech-visual {
  position:absolute;
  inset-inline-end:0;
  top:50%;
  width:min(39vw,440px);
  height:285px;
  transform:translateY(-50%);
  pointer-events:none;
  perspective:900px
}
.exam-tech-visual * {
  box-sizing:border-box
}
.tech-device {
  position:absolute;
  inset:18px 18px 24px 10px;
  background:#000;
  border:2px solid #000;
  border-radius:22px;
  padding:12px;
  box-shadow:16px 16px 0 #173f67;
  animation:techFloat 5.8s ease-in-out infinite
}
body.dark .tech-device {
  border-color:#FFF;
  box-shadow:16px 16px 0 #173f67
}
.tech-screen {
  height:100%;
  border:2px solid #FFF;
  border-radius:13px;
  overflow:hidden;
  position:relative;
  background:#000;
  color:#FFF;
  padding:20px
}
.tech-screen:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 49%,rgba(255,255,255,.055) 50%,transparent 51%);
  background-size:100% 8px;
  opacity:.45;
  pointer-events:none
}
.tech-screen:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#173f67;
  box-shadow:0 0 16px #173f67;
  animation:techScan 3.1s linear infinite
}
.tech-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:2px solid rgba(255,255,255,.25);
  padding-bottom:9px;
  margin-bottom:13px;
  font-size:.61rem;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase
}
.tech-live {
  color:#173f67
}
.tech-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}
.tech-tile {
  border:2px solid rgba(255,255,255,.32);
  padding:11px;
  border-radius:10px;
  min-height:62px;
  position:relative;
  overflow:hidden
}
.tech-tile b {
  display:block;
  font-size:.85rem;
  line-height:1.15
}
.tech-tile small {
  font-size:.58rem;
  color:rgba(255,255,255,.65);
  letter-spacing:.04em
}
.tech-tile i {
  display:block;
  height:4px;
  background:#FFF;
  margin-top:9px;
  position:relative
}
.tech-tile i:after {
  content:'';
  display:block;
  height:100%;
  width:var(--p,70%);
  background:#173f67;
  animation:techLoad 2.7s ease-in-out infinite alternate
}
.tech-orbit {
  position:absolute;
  width:118px;
  height:118px;
  border:2px solid #173f67;
  border-radius:50%;
  right:18px;
  bottom:17px;
  display:grid;
  place-items:center;
  animation:techRotate 9s linear infinite
}
.tech-orbit:before,.tech-orbit:after {
  content:'';
  position:absolute;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.45)
}
.tech-orbit:before {
  inset:12px
}
.tech-orbit:after {
  inset:28px;
  border-color:#FFF
}
.tech-orbit b {
  font-size:1.6rem;
  color:#173f67;
  animation:counterRotate 9s linear infinite
}
.tech-tag {
  position:absolute;
  background:#FFF;
  color:#000;
  border:2px solid #000;
  border-radius:999px;
  padding:8px 11px;
  font-size:.62rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:5px 5px 0 #173f67;
  z-index:3;
  animation:tagDrift 4s ease-in-out infinite
}
.tech-tag.one {
  left:-5px;
  top:4px
}
.tech-tag.two {
  right:-4px;
  bottom:7px;
  animation-delay:-1.8s
}
body.dark .tech-tag {
  border-color:#FFF
}
.tech-device.laptop:after {
  content:'';
  position:absolute;
  left:7%;
  right:7%;
  bottom:-14px;
  height:14px;
  background:#000;
  border:2px solid #000;
  border-radius:0 0 18px 18px
}
.tech-device.tablet {
  inset:8px 48px 8px 48px;
  border-radius:28px;
  transform:rotate(2deg);
  box-shadow:12px 12px 0 #173f67
}
.tech-device.tablet .tech-screen {
  border-radius:20px
}
.tech-device.mobile {
  inset:5px 110px 5px 110px;
  border-radius:32px;
  box-shadow:10px 10px 0 #173f67
}
.tech-device.mobile:before {
  content:'';
  position:absolute;
  width:54px;
  height:6px;
  border-radius:999px;
  background:#FFF;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:3
}
.tech-device.mobile .tech-screen {
  padding:25px 12px 12px;
  border-radius:23px
}
/* page-specific flavors */
.tech-about .tech-screen {
  display:grid;
  place-items:center
}
.tech-about .tech-core {
  width:155px;
  height:155px;
  border:2px solid #173f67;
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center
}
.tech-about .tech-core:before,.tech-about .tech-core:after {
  content:'';
  position:absolute;
  border:2px dashed #FFF;
  border-radius:50%;
  animation:techRotate 8s linear infinite
}
.tech-about .tech-core:before {
  inset:14px
}
.tech-about .tech-core:after {
  inset:34px;
  animation-direction:reverse
}
.tech-core span {
  font-weight:950;
  font-size:1rem;
  letter-spacing:.12em;
  text-align:center
}
.tech-core em {
  display:block;
  color:#173f67;
  font-style:normal;
  font-size:1.7rem
}
.tech-results .score-radar {
  height:150px;
  position:relative;
  margin-top:5px
}
.score-radar:before {
  content:'';
  position:absolute;
  width:145px;
  height:145px;
  border:2px solid #173f67;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 24px rgba(23,60,53,.08),0 0 0 48px rgba(255,255,255,.08)
}
.score-radar strong {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#173f67;
  font-size:2.2rem
}
.score-radar .radar-hand {
  position:absolute;
  width:65px;
  height:2px;
  background:#FFF;
  left:50%;
  top:50%;
  transform-origin:left center;
  animation:radarSweep 3.2s linear infinite
}
.tech-resources .file-stack {
  display:grid;
  gap:9px
}
.tech-resources .file-row {
  border:2px solid rgba(255,255,255,.35);
  padding:9px 10px;
  display:grid;
  grid-template-columns:31px 1fr auto;
  align-items:center;
  gap:8px;
  border-radius:9px
}
.file-icon {
  width:31px;
  height:31px;
  border:2px solid #173f67;
  display:grid;
  place-items:center;
  font-size:.62rem;
  font-weight:950
}
.file-row b {
  font-size:.68rem
}
.file-row small {
  font-size:.55rem;
  color:rgba(255,255,255,.65)
}
.tech-pricing .plan-chip {
  border:2px solid #FFF;
  border-radius:12px;
  padding:11px;
  margin-top:8px
}
.tech-pricing .plan-chip.active {
  background:#173f67;
  border-color:#173f67
}
.tech-pricing .plan-chip b {
  font-size:.8rem
}
.tech-pricing .plan-chip span {
  float:right;
  font-weight:950
}
.tech-blog .story-line {
  display:flex;
  gap:9px;
  align-items:center;
  border-bottom:2px solid rgba(255,255,255,.22);
  padding:10px 0
}
.story-dot {
  width:30px;
  height:30px;
  border:2px solid #173f67;
  border-radius:50%;
  flex:0 0 auto
}
.story-line b {
  font-size:.67rem;
  display:block
}
.story-line small {
  font-size:.54rem;
  color:rgba(255,255,255,.6)
}
.tech-contact .signal {
  display:grid;
  place-items:center;
  height:160px;
  position:relative
}
.signal-ring {
  position:absolute;
  border:2px solid #173f67;
  border-radius:50%;
  animation:signalPulse 2.4s ease-out infinite
}
.signal-ring:nth-child(1) {
  width:55px;
  height:55px
}
.signal-ring:nth-child(2) {
  width:105px;
  height:105px;
  animation-delay:.6s
}
.signal-ring:nth-child(3) {
  width:155px;
  height:155px;
  animation-delay:1.2s
}
.signal strong {
  z-index:2;
  font-size:.72rem;
  letter-spacing:.12em
}
.tech-instructor .avatar-hud {
  width:112px;
  height:112px;
  margin:5px auto 14px;
  border:2px solid #173f67;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  font-size:2rem;
  font-weight:950
}
.avatar-hud:before {
  content:'';
  position:absolute;
  inset:-10px;
  border:2px dashed #FFF;
  border-radius:50%;
  animation:techRotate 7s linear infinite
}
.tech-instructor .bio-line {
  height:7px;
  background:rgba(255,255,255,.2);
  margin:8px 0;
  border-radius:99px;
  overflow:hidden
}
.tech-instructor .bio-line:after {
  content:'';
  display:block;
  height:100%;
  width:var(--w,70%);
  background:#173f67;
  animation:techLoad 2.6s ease-in-out infinite alternate
}
.tech-test .question-ui {
  border:2px solid #FFF;
  padding:12px;
  border-radius:12px
}
.question-ui h4 {
  font-size:.72rem;
  margin:0 0 10px
}
.question-ui span {
  display:block;
  border:2px solid rgba(255,255,255,.32);
  padding:7px 8px;
  margin:6px 0;
  border-radius:7px;
  font-size:.61rem
}
.question-ui span:nth-of-type(2) {
  border-color:#173f67;
  color:#173f67
}
.tech-progressline {
  height:5px;
  background:#FFF;
  margin-top:13px;
  overflow:hidden
}
.tech-progressline:after {
  content:'';
  display:block;
  height:100%;
  background:#173f67;
  width:64%;
  animation:techLoad 2.4s ease-in-out infinite alternate
}
/* added device lab on home pages */
.device-lab {
  padding:48px 0;
  border-block:2px solid var(--line);
  overflow:hidden
}
.device-lab-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px
}
.device-lab-stage {
  position:relative;
  min-height:430px;
  max-width:1050px;
  margin:auto
}
.lab-laptop,.lab-tablet,.lab-mobile {
  position:absolute;
  background:#000;
  border:2px solid #000;
  box-shadow:12px 12px 0 #173f67;
  padding:10px;
  animation:techFloat 6s ease-in-out infinite
}
.lab-laptop {
  width:62%;
  height:340px;
  left:7%;
  top:20px;
  border-radius:22px
}
.lab-laptop:after {
  content:'';
  position:absolute;
  left:8%;
  right:8%;
  height:16px;
  bottom:-18px;
  background:#000;
  border-radius:0 0 16px 16px
}
.lab-tablet {
  width:30%;
  height:290px;
  right:10%;
  top:78px;
  border-radius:28px;
  transform:rotate(4deg);
  animation-delay:-2s
}
.lab-mobile {
  width:15%;
  height:245px;
  right:1%;
  top:160px;
  border-radius:28px;
  animation-delay:-3.4s
}
.lab-screen {
  height:100%;
  border:2px solid #FFF;
  border-radius:13px;
  color:#FFF;
  padding:16px;
  overflow:hidden;
  position:relative
}
.lab-screen:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#173f67;
  animation:techScan 3s linear infinite
}
.lab-nav {
  display:flex;
  gap:6px;
  margin-bottom:14px
}
.lab-nav i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#FFF
}
.lab-nav i:first-child {
  background:#173f67
}
.lab-topic {
  border:2px solid rgba(255,255,255,.3);
  border-radius:8px;
  padding:8px;
  margin:8px 0;
  font-size:.62rem;
  font-weight:850
}
.lab-topic.active {
  border-color:#173f67;
  color:#173f67
}
.lab-bars {
  display:grid;
  gap:8px;
  margin-top:14px
}
.lab-bars i {
  height:8px;
  background:#FFF;
  position:relative
}
.lab-bars i:after {
  content:'';
  display:block;
  height:100%;
  background:#173f67;
  width:var(--w,70%);
  animation:techLoad 2.5s ease-in-out infinite alternate
}
.lab-mobile .lab-screen {
  padding:10px
}
.lab-mobile .lab-topic {
  font-size:.48rem;
  padding:6px
}
.lab-mobile .lab-nav {
  margin-top:9px
}
.lab-device-label {
  position:absolute;
  background:#FFF;
  color:#000;
  border:2px solid #000;
  box-shadow:5px 5px 0 #173f67;
  padding:7px 9px;
  font-size:.6rem;
  font-weight:950;
  text-transform:uppercase;
  z-index:5
}
.lab-label-1 {
  left:2%;
  top:4px
}
.lab-label-2 {
  right:22%;
  top:52px
}
.lab-label-3 {
  right:0;
  bottom:2px
}
/* app/dashboard ambient HUD: decorative only */
.app-content {
  position:relative
}
.app-content:before {
  content:'EXAMORA // LIVE LEARNING SYSTEM';
  display:block;
  margin-bottom:12px;
  color:var(--primary);
  font-size:.61rem;
  font-weight:950;
  letter-spacing:.17em;
  opacity:.8
}
.app-content:after {
  content:'';
  position:fixed;
  right:18px;
  bottom:18px;
  width:52px;
  height:52px;
  border:2px solid rgba(23,60,53,.38);
  border-radius:50%;
  box-shadow:0 0 0 10px rgba(23,60,53,.06);
  pointer-events:none;
  animation:techRotate 10s linear infinite;
  z-index:2
}
@keyframes techFloat {
  0%,100% {
    transform:translateY(-2px) rotateX(0deg)
  }
  50% {
    transform:translateY(8px) rotateX(1.2deg)
  }
}
@keyframes techScan {
  0% {
    top:7%;
    opacity:0
  }
  10% {
    opacity:1
  }
  90% {
    opacity:1
  }
  100% {
    top:94%;
    opacity:0
  }
}
@keyframes techRotate {
  to {
    transform:rotate(360deg)
  }
}
@keyframes counterRotate {
  to {
    transform:rotate(-360deg)
  }
}
@keyframes tagDrift {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-8px)
  }
}
@keyframes techLoad {
  from {
    width:25%
  }
  to {
    width:var(--p,var(--w,78%))
  }
}
@keyframes radarSweep {
  to {
    transform:rotate(360deg)
  }
}
@keyframes signalPulse {
  0% {
    transform:scale(.72);
    opacity:1
  }
  100% {
    transform:scale(1.12);
    opacity:.1
  }
}
@media(max-width:1050px) {
  .page-hero:has(.exam-tech-visual) .container {
    padding-inline-end:390px
  }
  .exam-tech-visual {
    width:360px
  }
  .tech-device.mobile {
    inset:5px 82px
  }
  .device-lab-stage {
    min-height:390px
  }
}
@media(max-width:800px) {
  .page-hero:has(.exam-tech-visual) {
    padding-bottom:36px
  }
  .page-hero:has(.exam-tech-visual) .container {
    padding-inline-end:0;
    min-height:0
  }
  .exam-tech-visual {
    position:relative;
    inset:auto!important;
    top:auto;
    width:min(100%,520px);
    height:280px;
    transform:none;
    margin:28px auto 0
  }
  .device-lab-head {
    align-items:start;
    flex-direction:column
  }
  .device-lab-stage {
    min-height:560px
  }
  .lab-laptop {
    width:88%;
    left:2%;
    height:300px
  }
  .lab-tablet {
    width:43%;
    right:3%;
    top:270px;
    height:260px
  }
  .lab-mobile {
    width:24%;
    right:45%;
    top:315px;
    height:220px
  }
  .lab-label-2 {
    right:3%;
    top:250px
  }
}
@media(max-width:520px) {
  .exam-tech-visual {
    height:260px
  }
  .tech-device {
    inset:14px 8px 20px 4px
  }
  .tech-device.tablet {
    inset:8px 28px
  }
  .tech-device.mobile {
    inset:4px 72px
  }
  .tech-screen {
    padding:14px
  }
  .tech-orbit {
    width:92px;
    height:92px
  }
  .device-lab {
    padding:38px 0
  }
  .device-lab-stage {
    min-height:525px
  }
  .lab-laptop {
    width:96%;
    left:0;
    height:270px
  }
  .lab-tablet {
    width:52%;
    right:0;
    top:250px;
    height:230px
  }
  .lab-mobile {
    width:30%;
    right:55%;
    top:294px;
    height:205px
  }
  .lab-device-label {
    font-size:.52rem
  }
  .app-content:after {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  .tech-device,.tech-screen:after,.tech-orbit,.tech-orbit b,.tech-tag,.score-radar .radar-hand,.signal-ring,.avatar-hud:before,.tech-tile i:after,.bio-line:after,.tech-progressline:after,.lab-laptop,.lab-tablet,.lab-mobile,.lab-screen:after,.lab-bars i:after,.app-content:after {
    animation:none!important
  }
}
/* Future-Lab bands for pages whose original hero already has a special split/center layout. */
.future-tech-band {
  padding:24px 0 42px;
  overflow:hidden
}
.future-tech-band .future-band-shell {
  position:relative;
  min-height:310px;
  border:2px solid var(--line);
  border-radius:28px;
  background:var(--surface);
  overflow:hidden
}
.future-tech-band .future-band-copy {
  position:absolute;
  left:30px;
  top:28px;
  z-index:4;
  max-width:340px
}
.future-tech-band .future-band-copy b {
  display:block;
  font-size:.68rem;
  letter-spacing:.16em;
  color:#173f67;
  text-transform:uppercase;
  margin-bottom:7px
}
.future-tech-band .future-band-copy span {
  font-size:clamp(1.15rem,2.2vw,1.8rem);
  font-weight:950;
  line-height:1.1
}
.future-tech-band .exam-tech-visual {
  right:24px;
  left:auto;
  width:min(55%,560px);
  height:280px
}
[dir="rtl"] .future-tech-band .exam-tech-visual {
  left:24px;
  right:auto
}
[dir="rtl"] .future-tech-band .future-band-copy {
  left:auto;
  right:30px
}
.auth-art {
  position:relative;
  overflow:hidden
}
.auth-art .auth-tech-wrap {
  margin-top:32px;
  position:relative;
  min-height:260px;
  width:min(100%,560px)
}
.auth-art .exam-tech-visual {
  position:absolute;
  inset:0!important;
  top:0;
  width:100%;
  height:255px;
  transform:none
}
.auth-art .tech-device {
  box-shadow:12px 12px 0 #173f67
}
.auth-art .tech-tag {
  display:none
}
@media(max-width:800px) {
  .future-tech-band .future-band-shell {
    min-height:420px
  }
  .future-tech-band .future-band-copy {
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    padding:24px 22px 0
  }
  .future-tech-band .exam-tech-visual {
    position:relative;
    inset:auto!important;
    transform:none;
    width:min(94%,520px);
    height:275px;
    margin:16px auto 0
  }
  .auth-art .auth-tech-wrap {
    display:none
  }
}
/* =========================================================
   TABLET RESPONSIVE PASS — 701px to 1050px
   Keeps desktop and mobile behavior unchanged.
   ========================================================= */
@media (min-width:701px) and (max-width:1050px) {
  .container {
    width:min(94%,960px)
  }
  /* Header / navigation */
  .nav {
    min-height:72px;
    gap:.8rem
  }
  .brand {
    font-size:1.08rem
  }
  .nav-actions {
    margin-inline-start:auto
  }
  .nav-actions .btn {
    padding:.7rem .82rem;
    font-size:.84rem
  }
  .mobile-menu.open {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    position:absolute;
    left:3%;
    right:3%;
    top:76px;
    background:var(--surface);
    border:2px solid var(--ink);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:14px;
    gap:6px;
  }
  body.dark .mobile-menu.open {
    border-color:#FFF
  }
  .mobile-menu a {
    padding:.72rem .78rem;
    border-radius:10px;
    font-weight:800;
    min-width:0
  }
  /* Generic section rhythm */
  .section {
    padding:72px 0
  }
  .section-sm {
    padding:48px 0
  }
  .section-title {
    font-size:clamp(2rem,5.2vw,3.1rem)
  }
  .lead {
    font-size:1rem
  }
  /* Home hero */
  .hero {
    padding:58px 0 46px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:32px
  }
  .hero h1 {
    font-size:clamp(3.5rem,9vw,5.6rem);
    max-width:900px
  }
  .dashboard-preview {
    width:min(760px,100%);
    margin-inline:auto;
    transform:none
  }
  .metric-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .trust-row {
    gap:1rem 1.8rem
  }
  /* Main content grids */
  .logo-cloud {
    grid-template-columns:repeat(3,1fr)
  }
  .exam-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .process {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .course-grid,.blog-grid,.result-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .faculty-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .course-card,.blog-card,.result-card,.price-card,.faculty-card,.exam-card,.process-step {
    min-width:0
  }
  .course-meta {
    flex-wrap:wrap;
    gap:.4rem .8rem
  }
  /* Split sections */
  .two-col,.test-promo {
    grid-template-columns:1fr;
    gap:28px
  }
  .analytics-card,.test-ui {
    width:min(760px,100%);
    margin-inline:auto
  }
  .bar-row {
    grid-template-columns:135px minmax(0,1fr) 48px
  }
  .cta-section {
    padding:52px 0
  }
  .cta {
    gap:18px
  }
  /* Page content/sidebar */
  .content-grid {
    grid-template-columns:1fr
  }
  .sidebar-card {
    display:block
  }
  .content-grid>.sidebar-card {
    max-width:none
  }
  .form-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .map-box {
    min-height:360px
  }
  /* Footer */
  .footer-grid {
    grid-template-columns:1.3fr 1fr 1fr;
    gap:22px
  }
  /* Auth pages */
  .auth-wrap {
    grid-template-columns:.9fr 1.1fr
  }
  .auth-art {
    padding:6vw 4vw
  }
  .auth-form {
    padding:28px
  }
  .auth-card {
    padding:26px
  }
  /* Dashboards */
  .app-shell {
    grid-template-columns:76px minmax(0,1fr)
  }
  .app-content {
    padding:22px 18px
  }
  .app-topbar {
    padding-inline:18px
  }
  .stat-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .dash-grid {
    grid-template-columns:1fr
  }
  .panel,.stat {
    min-width:0
  }
  .table-wrap {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
  }
  .table {
    min-width:620px
  }
  .test-layout {
    grid-template-columns:1fr
  }
  .test-layout aside {
    margin-top:16px
  }
  .question-palette {
    grid-template-columns:repeat(8,minmax(0,1fr))
  }
  /* Futuristic page hero: tablet gets stacked visual, not squeezed desktop overlay */
  .page-hero:has(.exam-tech-visual) {
    padding:52px 0 38px;
    min-height:0
  }
  .page-hero:has(.exam-tech-visual) .container {
    padding-inline-end:0;
    min-height:0
  }
  .page-hero:has(.exam-tech-visual) .container>div:first-child {
    max-width:760px
  }
  .exam-tech-visual {
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    width:min(620px,92%)!important;
    height:300px;
    transform:none!important;
    margin:30px auto 0;
  }
  .tech-device.laptop {
    inset:12px 16px 24px
  }
  .tech-device.tablet {
    inset:12px 72px 12px
  }
  .tech-device.mobile {
    inset:7px 150px
  }
  /* Home futuristic multi-device lab */
  .device-lab {
    padding:46px 0
  }
  .device-lab-head {
    align-items:flex-start;
    gap:18px
  }
  .device-lab-head>* {
    min-width:0
  }
  .device-lab-stage {
    min-height:520px;
    max-width:820px
  }
  .lab-laptop {
    width:78%;
    height:320px;
    left:0;
    top:28px
  }
  .lab-tablet {
    width:38%;
    height:250px;
    right:0;
    top:275px
  }
  .lab-mobile {
    width:22%;
    height:215px;
    right:40%;
    top:330px
  }
  .lab-label-1 {
    left:0;
    top:8px
  }
  .lab-label-2 {
    right:2%;
    top:255px
  }
  .lab-label-3 {
    right:38%;
    bottom:0
  }
  /* Hero V2 / command center */
  .hero-v2-grid {
    grid-template-columns:1fr;
    min-height:auto;
    gap:30px
  }
  .hero-v2 h1 {
    font-size:clamp(4rem,10vw,6.3rem);
    max-width:900px
  }
  .exam-command {
    min-height:545px;
    width:min(720px,100%);
    margin-inline:auto
  }
  .command-frame {
    width:min(590px,88%)
  }
  .hero-bottom-note {
    flex-wrap:wrap
  }
  /* Prevent long text/buttons from causing horizontal overflow */
  .btn,.filter-btn,.chip,.badge {
    max-width:100%
  }
  h1,h2,h3,h4,p,a,span,strong {
    overflow-wrap:anywhere
  }
  img,svg,video,iframe {
    max-width:100%
  }
}
/* Portrait tablet refinements */
@media (min-width:701px) and (max-width:820px) {
  .container {
    width:92%
  }
  .top-strip .container {
    font-size:.78rem
  }
  .nav-actions .btn {
    display:none
  }
  .mobile-menu.open {
    grid-template-columns:1fr 1fr
  }
  .course-grid,.blog-grid,.result-grid,.faculty-grid,.exam-grid,.process {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .footer-grid {
    grid-template-columns:1fr 1fr
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .field.full {
    grid-column:auto
  }
  .auth-wrap {
    grid-template-columns:1fr
  }
  .auth-art {
    min-height:360px;
    padding:50px 7vw
  }
  .exam-tech-visual {
    width:min(560px,100%)!important;
    height:285px
  }
  .tech-device.mobile {
    inset:7px 120px
  }
  .device-lab-stage {
    min-height:555px
  }
  .lab-laptop {
    width:88%;
    height:300px;
    left:0
  }
  .lab-tablet {
    width:43%;
    right:0;
    top:280px;
    height:250px
  }
  .lab-mobile {
    width:25%;
    right:46%;
    top:330px;
    height:215px
  }
  .question-palette {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }
}
/* =========================================================
   TABLET NAVIGATION TOGGLE FIX — 701px to 1050px
   Keeps desktop and phone layouts intact while giving tablets
   a stable, full-width menu anchored to the header container.
   ========================================================= */
@media (min-width:701px) and (max-width:1050px) {
  .site-header {
    overflow:visible
  }
  .site-header .nav {
    position:relative;
    min-height:72px;
    flex-wrap:nowrap;
  }
  .site-header .brand {
    flex:0 0 auto;
    min-width:0
  }
  .site-header .navlinks {
    display:none!important
  }
  .site-header .nav-actions {
    margin-inline-start:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.45rem;
    flex:0 0 auto;
  }
  /* Login / signup already exist inside the opened tablet menu. */
  .site-header .nav-actions>a.btn {
    display:none!important
  }
  .site-header .icon-btn {
    width:42px;
    height:42px;
    min-width:42px;
    flex:0 0 42px;
  }
  .site-header .menu-toggle {
    display:inline-grid!important;
    place-items:center;
    position:relative;
    z-index:1003;
  }
  .site-header .mobile-menu {
    display:none;
  }
  .site-header .mobile-menu.open {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    width:100%;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:1002;
    background:var(--surface);
    color:var(--ink);
    border:2px solid var(--ink);
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    padding:14px;
    gap:7px;
  }
  body.dark .site-header .mobile-menu.open {
    border-color:#FFF
  }
  .site-header .mobile-menu a,
  .site-header .mobile-home-label {
    min-width:0;
    width:100%;
  }
  .site-header .mobile-menu a {
    display:flex;
    align-items:center;
    min-height:46px;
    padding:.72rem .8rem;
    border-radius:10px;
    font-weight:800;
    background:transparent;
  }
  .site-header .mobile-menu a:hover,
  .site-header .mobile-menu a:focus-visible {
    background:var(--primary);
    color:#000;
    outline:none;
  }
  .site-header .mobile-home-group {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:auto 1fr 1fr;
    align-items:center;
    gap:7px;
    padding-bottom:8px;
    margin-bottom:2px;
    border-bottom:2px solid var(--line);
  }
  .site-header .mobile-home-label {
    padding:.72rem .8rem;
    font-weight:950;
    color:var(--primary);
  }
}
@media (min-width:701px) and (max-width:820px) {
  .site-header .mobile-menu.open {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .site-header .mobile-home-group {
    grid-template-columns:1fr 1fr
  }
  .site-header .mobile-home-label {
    grid-column:1/-1;
    padding-bottom:.25rem
  }
}
/* ===== Expanded content sections v2 ===== */
.feature-band {
  background:#000;
  color:#fff
}
.feature-band .muted,.feature-band .lead {
  color:rgba(255,255,255,.72)
}
.story-grid,.membership-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px
}
.info-card,.mentor-card,.elite-grid article,.book-card,.exam-result-grid article,.vip-card,.return-card {
  border:2px solid var(--line);
  border-radius:22px;
  padding:24px;
  background:var(--surface);
  transition:.3s ease
}
.info-card:hover,.mentor-card:hover,.book-card:hover,.exam-result-grid article:hover,.elite-grid article:hover {
  transform:translateY(-6px);
  border-color:var(--primary)
}
.info-card>b {
  font-size:2rem;
  color:var(--primary)
}
.mini-progress {
  height:8px;
  background:rgba(0,0,0,.12);
  overflow:hidden;
  border-radius:20px
}
.mini-progress i {
  display:block;
  height:100%;
  width:var(--p);
  background:var(--primary);
  animation:growBar 1.4s ease both
}
.benefit-pills,.book-categories {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.benefit-pills span,.book-categories span {
  border:2px solid var(--line);
  padding:7px 11px;
  border-radius:999px;
  font-weight:800
}
.step-line {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  position:relative
}
.step-line article {
  border-top:2px solid var(--primary);
  padding:18px 12px
}
.step-line span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  background:var(--primary);
  color:#000;
  border:2px solid #000;
  border-radius:50%;
  font-weight:950
}
.faq-list {
  display:grid;
  gap:12px
}
.faq-list details {
  border:2px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  background:var(--surface)
}
.faq-list summary {
  font-weight:900;
  cursor:pointer
}
.faq-list details[open] {
  border-color:var(--primary)
}
.mentor-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.mentor-card {
  display:grid;
  grid-template-columns:88px 1fr;
  gap:16px;
  align-items:center
}
.mentor-card img {
  width:88px;
  height:88px;
  object-fit:cover;
  border-radius:18px;
  border:2px solid var(--line)
}
.state-teacher-grid,.elite-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.state-teacher-grid article {
  border:2px solid #fff;
  border-radius:18px;
  padding:20px
}
.state-teacher-grid span {
  color:var(--primary);
  font-weight:950;
  font-size:1.5rem
}
.elite-grid strong {
  color:var(--primary)
}
.book-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:26px
}
.book-card {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:20px;
  align-items:center
}
.book-cover {
  aspect-ratio:3/4;
  background:#000;
  color:#fff;
  border:2px solid var(--primary);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:18px;
  font-size:1.25rem;
  box-shadow:10px 10px 0 var(--primary);
  transition:.35s ease
}
.book-card:hover .book-cover {
  transform:rotate(-2deg) translateY(-5px)
}
.impact-stats,.selection-counts {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:24px 0
}
.impact-stats article,.selection-counts article {
  border:2px solid var(--line);
  border-radius:18px;
  padding:22px;
  background:var(--surface)
}
.impact-stats strong,.selection-counts strong {
  display:block;
  font-size:2rem;
  color:var(--primary)
}
.exam-result-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.scoreboard {
  border:2px solid var(--line);
  border-radius:18px;
  overflow:hidden
}
.student-score {
  width:100%;
  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  gap:16px;
  text-align:left;
  padding:17px 20px;
  border:0;
  border-bottom:2px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  cursor:pointer;
  transition:.25s
}
.student-score:last-child {
  border-bottom:0
}
.student-score:hover {
  background:var(--primary);
  color:#000;
  padding-inline-start:28px
}
.result-modal,.journey-modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:grid;
  place-items:center;
  padding:20px;
  z-index:3000;
  opacity:0;
  pointer-events:none;
  transition:.3s
}
.result-modal.open,.journey-modal.open {
  opacity:1;
  pointer-events:auto
}
.result-modal-card {
  width:min(520px,100%);
  border:2px solid var(--primary);
  border-radius:24px;
  background:var(--surface);
  color:var(--ink);
  padding:28px;
  transform:translateY(20px) scale(.97);
  transition:.3s;
  position:relative
}
.open .result-modal-card {
  transform:none
}
.modal-close {
  position:absolute;
  right:16px;
  top:12px;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:2rem;
  cursor:pointer
}
.modal-score {
  display:flex;
  gap:14px;
  align-items:end
}
.modal-score strong {
  font-size:2.5rem;
  color:var(--primary)
}
.pass-layout {
  display:grid;
  grid-template-columns:.95fr 1.15fr;
  gap:42px;
  align-items:start
}
.pass-benefits ul {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px
}
.pass-benefits li {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:4px 16px;
  align-items:center;
  padding:12px 0
}
.pass-benefits li span {
  grid-row:1/3;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:2px solid var(--primary);
  border-radius:12px;
  color:var(--primary);
  font-weight:950
}
.pass-benefits li small {
  color:var(--muted)
}
.offer-panel {
  border:2px solid var(--line);
  border-radius:24px;
  padding:26px;
  background:var(--surface)
}
.offer-strip {
  border:2px dashed var(--primary);
  padding:14px;
  border-radius:12px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:22px
}
.plan-choice {
  position:relative;
  border:2px solid var(--primary);
  border-radius:18px;
  padding:22px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:14px;
  align-items:center
}
.radio-dot {
  width:24px;
  height:24px;
  border:6px solid var(--primary);
  border-radius:50%
}
.plan-choice em {
  position:absolute;
  right:18px;
  top:-14px;
  background:var(--primary);
  color:#000;
  padding:7px 11px;
  border-radius:8px;
  font-style:normal;
  font-weight:900
}
.plan-price {
  text-align:right
}
.plan-price strong {
  display:block;
  font-size:2rem
}
.pay-row {
  display:flex;
  justify-content:space-between;
  padding:24px 0;
  font-size:1.2rem
}
.btn-wide {
  width:100%;
  text-align:center
}
.offer-timeline {
  display:grid;
  gap:12px
}
.offer-timeline article {
  display:grid;
  grid-template-columns:110px 1fr auto;
  gap:18px;
  align-items:center;
  border:2px solid #fff;
  border-radius:18px;
  padding:18px
}
.offer-timeline time {
  color:var(--primary);
  font-weight:950;
  font-size:1.3rem
}
.vip-card,.return-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px
}
.vip-card>span,.return-card>span {
  background:var(--primary);
  color:#000;
  font-weight:950;
  padding:7px 10px;
  border-radius:8px
}
.discount-meter {
  width:100%;
  border:2px solid var(--line);
  border-radius:999px;
  padding:5px;
  position:relative;
  overflow:hidden
}
.discount-meter i {
  display:block;
  width:72%;
  height:12px;
  background:var(--primary);
  border-radius:999px;
  animation:growBar 1.3s ease
}
.discount-meter b {
  position:relative;
  z-index:2;
  padding-left:9px
}
.journey-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.journey-strip article {
  text-align:center;
  border:2px solid var(--line);
  border-radius:22px;
  padding:22px;
  background:var(--surface)
}
.journey-strip img {
  width:130px;
  height:130px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid var(--primary);
  transition:.35s
}
.journey-strip article:hover img {
  transform:scale(1.06) rotate(2deg)
}
.selection-counts article span {
  display:block;
  font-weight:950
}
.fame-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px
}
.fame-grid article {
  text-align:center
}
.fame-avatar {
  width:130px;
  height:130px;
  margin:auto;
  border-radius:50%;
  padding:7px;
  border:2px solid var(--primary);
  position:relative
}
.fame-avatar:after {
  content:"";
  position:absolute;
  inset:-7px;
  border:2px dashed var(--primary);
  border-radius:50%;
  animation:spinSlow 12s linear infinite
}
.fame-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%
}
.fame-grid strong,.fame-grid small {
  display:block
}
.fame-grid strong {
  color:var(--primary)
}
.map-wrap {
  display:grid;
  grid-template-columns:1.4fr .6fr;
  border:2px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  min-height:390px
}
.map-wrap iframe {
  width:100%;
  height:100%;
  border:0;
  filter:grayscale(1) contrast(1.05)
}
.map-card {
  padding:30px;
  background:var(--surface)
}
@keyframes growBar {
  from {
    width:0
  }
}
@keyframes spinSlow {
  to {
    transform:rotate(360deg)
  }
}
@media(max-width:1050px) {
  .state-teacher-grid,.elite-grid,.exam-result-grid,.fame-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .mentor-grid {
    grid-template-columns:1fr 1fr
  }
  .pass-layout {
    grid-template-columns:1fr
  }
  .impact-stats,.selection-counts {
    grid-template-columns:repeat(2,1fr)
  }
  .step-line {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:760px) {
  .story-grid,.membership-grid,.book-grid,.journey-strip,.mentor-grid,.map-wrap {
    grid-template-columns:1fr
  }
  .state-teacher-grid,.elite-grid,.exam-result-grid,.fame-grid,.impact-stats,.selection-counts,.step-line {
    grid-template-columns:1fr
  }
  .book-card {
    grid-template-columns:90px 1fr
  }
  .offer-timeline article {
    grid-template-columns:1fr
  }
  .student-score {
    grid-template-columns:1fr
  }
  .plan-choice {
    grid-template-columns:28px 1fr
  }
  .plan-price {
    grid-column:2
  }
  .offer-strip {
    flex-direction:column
  }
  .map-wrap iframe {
    min-height:320px
  }
}
/* =========================================================
   FULL-SITE STABILITY & POLISH AUDIT — 2026-09-08
   Keeps the existing design while preventing overlap, clipping,
   low-contrast borders and motion-related layout shifts.
   ========================================================= */
:root {
  --line:rgba(0,0,0,.22)
}
body.dark {
  --line:rgba(255,255,255,.26)
}
html,body {
  max-width:100%;
  overflow-x:hidden
}
:where(.container,.course-card,.faculty-card,.result-card,.price-card,.blog-card,.panel,.analytics-card,.stat,.sidebar-card,.auth-card,.info-card,.mentor-card,.book-card,.vip-card,.return-card,.exam-result-grid article,.elite-grid article,.journey-strip article,.impact-stats article,.selection-counts article) {
  min-width:0
}
:where(h1,h2,h3,h4,h5,h6,p,li,small,strong,span,a,button,label,td,th) {
  overflow-wrap:anywhere
}
/* Maintain the requested 2px visual border on content boxes. */
:where(.exam-card,.course-card,.faculty-card,.result-card,.price-card,.blog-card,.panel,.analytics-card,.stat,.sidebar-card,.auth-card,.info-card,.mentor-card,.book-card,.vip-card,.return-card,.journey-strip article,.impact-stats article,.selection-counts article,.faq-list details,.scoreboard,.offer-panel,.plan-choice,.discount-meter,.image-slot) {
  border-width:2px
}
/* New content sections: reliable contrast and equal-height alignment. */
.story-grid,.membership-grid,.mentor-grid,.state-teacher-grid,.elite-grid,.book-grid,.exam-result-grid,.journey-strip,.fame-grid,.impact-stats,.selection-counts {
  align-items:stretch
}
.story-grid>*,.membership-grid>*,.mentor-grid>*,.state-teacher-grid>*,.elite-grid>*,.book-grid>*,.exam-result-grid>*,.journey-strip>*,.fame-grid>*,.impact-stats>*,.selection-counts>* {
  height:100%
}
.feature-band :where(.info-card,.mentor-card,.elite-grid article,.book-card) {
  background:#000;
  color:#fff;
  border-color:rgba(255,255,255,.32)
}
.feature-band :where(.info-card,.mentor-card,.elite-grid article,.book-card) :where(p,small) {
  color:rgba(255,255,255,.76)
}
.feature-band .benefit-pills span,.feature-band .book-categories span {
  border-color:rgba(255,255,255,.34);
  color:#fff
}
body:not(.dark) .section:not(.feature-band) :where(.info-card,.mentor-card,.elite-grid article,.book-card,.exam-result-grid article,.vip-card,.return-card,.journey-strip article,.impact-stats article,.selection-counts article) {
  background:#fff;
  color:#000
}
/* Prevent text from colliding with badges, prices and floating labels. */
.course-card,.price-card,.elite-grid article,.exam-result-grid article,.journey-strip article {
  position:relative
}
.course-body {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:235px
}
.course-body .btn {
  margin-top:auto
}
.elite-grid article {
  padding-top:28px
}
.plan-choice {
  padding-top:30px
}
.plan-choice em {
  max-width:calc(100% - 36px);
  white-space:normal;
  line-height:1.15;
  text-align:center
}
.plan-price {
  min-width:max-content
}
.offer-timeline article>* {
  min-width:0
}
.offer-timeline article>span {
  text-align:end;
  font-weight:800
}
.student-score>* {
  min-width:0
}
.student-score strong:last-child {
  text-align:end
}
/* Animation safety: animate transforms/opacity, never layout dimensions. */
.mini-progress i,.discount-meter i {
  transform-origin:left center;
  animation:stableGrow 1.15s cubic-bezier(.22,1,.36,1) both
}
@keyframes stableGrow {
  from {
    transform:scaleX(0)
  }
  to {
    transform:scaleX(1)
  }
}
.fame-avatar:after {
  will-change:transform
}
.info-card,.mentor-card,.book-card,.exam-result-grid article,.elite-grid article,.journey-strip article {
  will-change:transform
}
.section-reveal {
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1)
}
/* Modal text and controls remain readable in both themes. */
.result-modal-card {
  max-height:min(720px,88vh);
  overflow:auto
}
.modal-close {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:2px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  line-height:1
}
.modal-close:hover {
  border-color:var(--primary);
  color:var(--primary)
}
/* Tablet and small-screen stabilization for recently added sections. */
@media (min-width:761px) and (max-width:1050px) {
  .mentor-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .state-teacher-grid,.elite-grid,.exam-result-grid,.fame-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .book-grid {
    grid-template-columns:1fr
  }
  .book-card {
    grid-template-columns:120px minmax(0,1fr)
  }
  .offer-timeline article {
    grid-template-columns:90px minmax(0,1fr);
    align-items:start
  }
  .offer-timeline article>span {
    grid-column:2;
    text-align:start
  }
  .plan-choice {
    grid-template-columns:28px minmax(0,1fr) auto
  }
}
@media (max-width:760px) {
  .info-card,.mentor-card,.book-card,.vip-card,.return-card,.exam-result-grid article,.elite-grid article,.journey-strip article {
    padding:20px
  }
  .book-card {
    grid-template-columns:82px minmax(0,1fr);
    gap:16px
  }
  .book-cover {
    padding:12px;
    font-size:1rem;
    box-shadow:6px 6px 0 var(--primary)
  }
  .impact-stats strong,.selection-counts strong {
    font-size:1.65rem
  }
  .fame-avatar {
    width:112px;
    height:112px
  }
  .student-score {
    padding:15px 16px;
    gap:6px
  }
  .student-score:hover {
    padding-inline-start:16px
  }
  .plan-choice {
    padding:30px 16px 18px;
    gap:10px
  }
  .plan-price {
    grid-column:2;
    text-align:start;
    min-width:0
  }
  .offer-panel {
    padding:20px
  }
}
@media (max-width:430px) {
  .book-card {
    grid-template-columns:1fr
  }
  .book-cover {
    width:92px
  }
  .benefit-pills,.book-categories {
    gap:6px
  }
  .benefit-pills span,.book-categories span {
    font-size:.75rem;
    padding:6px 9px
  }
  .result-modal-card {
    padding:24px 18px
  }
}
@media(prefers-reduced-motion:reduce) {
  .mini-progress i,.discount-meter i,.fame-avatar:after,.info-card,.mentor-card,.book-card,.exam-result-grid article,.elite-grid article,.journey-strip article {
    animation:none!important;
    transition:none!important;
    transform:none!important
  }
}
/* =========================================================
   FINAL COMPONENT POLISH — Requested refinements
   ========================================================= */
/* Limited-time offer cards: smooth lift + sweep, without layout movement. */
.offer-timeline-card {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
  animation:offerEnter .55s ease both;
  animation-delay:var(--delay,0ms)
}
.offer-timeline-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(23,60,53,.18) 48%,transparent 76%);
  transform:translateX(-115%);
  transition:transform .65s cubic-bezier(.22,1,.36,1)
}
.offer-timeline-card:hover {
  transform:translateY(-5px);
  border-color:var(--primary);
  box-shadow:0 16px 34px rgba(0,0,0,.16)
}
.offer-timeline-card:hover::before {
  transform:translateX(115%)
}
.offer-timeline-card time,.offer-timeline-card h3,.offer-timeline-card p,.offer-timeline-card>span {
  position:relative;
  z-index:1
}
@keyframes offerEnter {
  from {
    opacity:0;
    transform:translateY(14px)
  }
  to {
    opacity:1;
    transform:none
  }
}
/* Alumni discount: label and percentage sit on one baseline; bar is separate. */
.alumni-discount {
  width:100%;
  display:grid;
  gap:9px;
  margin-top:4px
}
.alumni-discount-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  width:100%
}
.alumni-discount-head b {
  font-size:.9rem
}
.alumni-discount-head strong {
  color:var(--primary);
  white-space:nowrap
}
.alumni-discount .discount-meter {
  height:20px;
  padding:3px;
  display:flex;
  align-items:center
}
.alumni-discount .discount-meter i {
  width:var(--discount,35%);
  height:10px;
  display:block;
  background:var(--primary);
  border-radius:999px;
  transform-origin:left center
}
html[dir="rtl"] .alumni-discount .discount-meter i {
  transform-origin:right center
}
/* Results: three image-ready Exam Performance cards. */
.exam-performance-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch
}
.exam-performance-card {
  border:2px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  overflow:hidden;
  min-width:0;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease
}
.exam-performance-card:hover {
  transform:translateY(-6px);
  border-color:var(--primary);
  box-shadow:0 16px 34px rgba(0,0,0,.12)
}
.exam-performance-media {
  height:285px;
  position:relative;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#000
}
.exam-performance-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.22,1,.36,1)
}
.exam-performance-card:hover .exam-performance-media img {
  transform:scale(1.045)
}
.exam-performance-media::after {
  content:"";
  position:absolute;
  inset:35% 0 0;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
  pointer-events:none
}
.exam-performance-overlay {
  position:absolute;
  z-index:2;
  inset:auto 18px 18px;
  color:#fff
}
.exam-performance-overlay .rank {
  display:inline-flex;
  margin-bottom:8px;
  background:var(--primary);
  color:#000;
  border-radius:999px;
  padding:5px 9px;
  font-weight:900
}
.exam-performance-overlay h3 {
  margin:0 0 3px
}
.exam-performance-overlay p {
  margin:0;
  color:rgba(255,255,255,.8)
}
.exam-performance-body {
  padding:18px;
  display:grid;
  gap:10px
}
.performance-label {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.performance-label strong {
  color:var(--primary)
}
.exam-performance-body small {
  color:var(--muted);
  line-height:1.45
}
/* Dashboard navigation: hover rows never touch or merge. */
.side-nav {
  display:grid;
  gap:7px;
  margin:0
}
.side-nav a {
  margin:0;
  border:2px solid transparent;
  min-height:46px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease!important;
  transform:none!important
}
.side-nav a:hover,.side-nav a.active {
  transform:none!important;
  border-color:rgba(255,255,255,.22);
  box-shadow:none
}
.side-label+.side-nav {
  margin-top:4px
}
/* My Courses: fill the former empty cover/body space with meaningful content. */
.dashboard-course-grid .course-card,.app-content .course-grid .course-card {
  height:100%
}
.app-content .course-cover {
  min-height:165px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  gap:8px;
  padding:22px;
  background:#000;
  color:#fff;
  border-bottom:2px solid var(--primary)
}
.app-content .course-cover.alt {
  background:#000
}
.app-content .course-cover p {
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:.88rem
}
.course-status {
  font-size:.68rem;
  letter-spacing:.1em;
  font-weight:950;
  color:#000;
  background:var(--primary);
  padding:5px 8px;
  border-radius:999px
}
.course-learning-meta {
  display:grid;
  gap:8px;
  margin-bottom:12px
}
.course-learning-meta p {
  margin:0;
  color:var(--muted);
  font-size:.86rem
}
.course-learning-meta b {
  color:var(--ink)
}
.course-progress-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto
}
/* Instructors: intentionally different visual languages, all image-replaceable. */
.gov-notes-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch
}
.gov-note-card {
  position:relative;
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:28px 20px 20px;
  border:2px solid var(--line);
  border-radius:8px 24px 24px 8px;
  background:var(--surface);
  box-shadow:8px 8px 0 rgba(23,60,53,.12);
  min-width:0;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease
}
.gov-note-card::after {
  content:"";
  position:absolute;
  left:12px;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(23,60,53,.35)
}
.gov-note-card:hover {
  transform:translateY(-5px) rotate(-.35deg);
  border-color:var(--primary);
  box-shadow:10px 12px 0 rgba(23,60,53,.2)
}
.note-tab {
  position:absolute;
  top:0;
  right:16px;
  transform:translateY(-40%);
  background:var(--primary);
  color:#000;
  padding:5px 9px;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.08em
}
.gov-note-photo {
  width:92px;
  height:112px;
  border:2px solid var(--line);
  border-radius:14px;
  overflow:hidden
}
.gov-note-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}
.gov-note-card h3,.gov-note-card p {
  margin-block:0 5px
}
.state-book-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:stretch
}
.state-book-card {
  display:grid;
  grid-template-columns:22px 90px minmax(0,1fr);
  min-height:190px;
  border:2px solid rgba(255,255,255,.34);
  background:#000;
  color:#fff;
  border-radius:6px 20px 20px 6px;
  overflow:hidden;
  transition:transform .32s ease,border-color .32s ease;
  min-width:0
}
.state-book-card:hover {
  transform:translateY(-6px) perspective(600px) rotateY(-2deg);
  border-color:var(--primary)
}
.state-book-spine {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  display:grid;
  place-items:center;
  background:var(--primary);
  color:#000;
  font-weight:950;
  letter-spacing:.12em
}
.state-book-cover {
  height:100%;
  border:0;
  border-radius:0;
  background:#000;
  overflow:hidden
}
.state-book-cover img {
  width:100%;
  height:100%;
  object-fit:cover
}
.state-book-info {
  padding:18px 14px;
  align-self:center;
  min-width:0
}
.state-book-info h3 {
  margin:0 0 6px
}
.state-book-info p {
  margin:0 0 10px;
  color:rgba(255,255,255,.76);
  font-size:.84rem
}
.state-book-info small {
  color:var(--primary)
}
.elite-dossier-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-items:stretch
}
.elite-dossier {
  position:relative;
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:0;
  border:2px solid var(--line);
  background:var(--surface);
  border-radius:24px;
  overflow:hidden;
  min-height:230px;
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease
}
.elite-dossier:nth-child(even) {
  grid-template-columns:minmax(0,1fr) 132px
}
.elite-dossier:nth-child(even) .dossier-photo {
  order:2
}
.elite-dossier:nth-child(even) .dossier-info {
  order:1
}
.elite-dossier:hover {
  transform:translateY(-5px);
  border-color:var(--primary);
  box-shadow:0 14px 30px rgba(0,0,0,.12)
}
.dossier-number {
  position:absolute;
  z-index:3;
  top:12px;
  left:12px;
  background:var(--primary);
  color:#000;
  font-weight:950;
  padding:5px 8px;
  border-radius:8px
}
.elite-dossier:nth-child(even) .dossier-number {
  left:auto;
  right:12px
}
.dossier-photo {
  height:100%;
  border:0;
  border-radius:0;
  background:#000;
  overflow:hidden
}
.dossier-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}
.dossier-info {
  padding:24px;
  align-self:center;
  min-width:0
}
.dossier-info h3 {
  margin:0 0 7px
}
.dossier-info>strong {
  color:var(--primary);
  display:block;
  margin-bottom:14px
}
.dossier-info ul {
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color:var(--muted)
}
.dossier-info li b {
  color:var(--ink)
}
html[dir="rtl"] .dossier-info ul {
  padding-left:0;
  padding-right:18px
}
/* Alignment safety for all cards and text created in the latest passes. */
.offer-timeline-card,.exam-performance-card,.gov-note-card,.state-book-card,.elite-dossier,.course-card {
  box-sizing:border-box
}
.offer-timeline-card h3,.offer-timeline-card p,.exam-performance-card h3,.exam-performance-card p,.gov-note-card h3,.gov-note-card p,.state-book-card h3,.state-book-card p,.elite-dossier h3,.elite-dossier p {
  overflow-wrap:anywhere
}
@media(min-width:761px) and (max-width:1050px) {
  .exam-performance-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .exam-performance-card:last-child {
    grid-column:1/-1;
    max-width:calc(50% - 10px);
    width:100%;
    justify-self:center
  }
  .gov-notes-grid {
    grid-template-columns:1fr
  }
  .gov-note-card {
    grid-template-columns:110px minmax(0,1fr)
  }
  .gov-note-photo {
    width:110px;
    height:125px
  }
  .state-book-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .elite-dossier-grid {
    grid-template-columns:1fr
  }
}
@media(max-width:760px) {
  .offer-timeline-card:hover,.gov-note-card:hover,.state-book-card:hover,.elite-dossier:hover,.exam-performance-card:hover {
    transform:none
  }
  .alumni-discount-head {
    align-items:flex-start
  }
  .alumni-discount-head strong {
    white-space:normal;
    text-align:end
  }
  .exam-performance-grid,.gov-notes-grid,.state-book-grid,.elite-dossier-grid {
    grid-template-columns:1fr
  }
  .exam-performance-media {
    height:260px
  }
  .gov-note-card {
    grid-template-columns:82px minmax(0,1fr);
    padding-inline:18px
  }
  .gov-note-photo {
    width:82px;
    height:102px
  }
  .state-book-card {
    grid-template-columns:20px 88px minmax(0,1fr)
  }
  .elite-dossier,.elite-dossier:nth-child(even) {
    grid-template-columns:105px minmax(0,1fr)
  }
  .elite-dossier:nth-child(even) .dossier-photo {
    order:0
  }
  .elite-dossier:nth-child(even) .dossier-info {
    order:0
  }
  .dossier-info {
    padding:18px
  }
}
@media(max-width:460px) {
  .alumni-discount-head {
    display:grid;
    gap:4px
  }
  .alumni-discount-head strong {
    text-align:start
  }
  .gov-note-card {
    grid-template-columns:1fr
  }
  .gov-note-photo {
    width:100%;
    height:190px
  }
  .gov-note-card::after {
    display:none
  }
  .state-book-card {
    grid-template-columns:18px 1fr
  }
  .state-book-cover {
    height:180px
  }
  .state-book-info {
    grid-column:2
  }
  .elite-dossier,.elite-dossier:nth-child(even) {
    grid-template-columns:1fr
  }
  .dossier-photo {
    height:230px
  }
  .elite-dossier:nth-child(even) .dossier-photo {
    order:0
  }
  .dossier-info {
    order:1!important
  }
}
@media(prefers-reduced-motion:reduce) {
  .offer-timeline-card,.offer-timeline-card::before,.exam-performance-card,.exam-performance-media img,.gov-note-card,.state-book-card,.elite-dossier {
    animation:none!important;
    transition:none!important;
    transform:none!important
  }
}
/* =========================================================
   RESULTS — Highest scorers contrast fix
   Light and dark mode keep the feature-band cards readable.
   ========================================================= */
.feature-band .exam-result-grid article {
  background:#000 !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.34) !important;
}
.feature-band .exam-result-grid article h3,
.feature-band .exam-result-grid article p,
.feature-band .exam-result-grid article b,
.feature-band .exam-result-grid article strong,
.feature-band .exam-result-grid article span {
  color:#fff !important;
}
.feature-band .exam-result-grid article:hover {
  border-color:#173f67 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
body.dark .feature-band .exam-result-grid article {
  background:#000 !important;
  color:#fff !important;
}
/* =========================================================
   PAGE BACKGROUND IMAGE SYSTEM
   Each HTML page has its own replaceable image under:
   assets/images/heading-backgrounds/
   ========================================================= */
body.page-background {
  background-color:#fff;
  background-image:
    linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.88)),
    var(--page-bg-image);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body.page-background.dark {
  background-color:#000;
  background-image:
    linear-gradient(rgba(0,0,0,.84),rgba(0,0,0,.84)),
    var(--page-bg-image);
}
/* Keep transparent sections readable while allowing the background to show through. */
body.page-background main > .section:not(.feature-band):not(.dark-band):not(.cta-section):not(.cta):not(.auth-art):not(.auth-form),
body.page-background main > section:not(.feature-band):not(.hero):not(.page-hero):not(.dark-band):not(.cta-section):not(.cta):not(.auth-art):not(.auth-form) {
  background-color:rgba(255,255,255,.78);
  backdrop-filter:blur(2px);
}
body.page-background.dark main > .section:not(.feature-band):not(.dark-band):not(.cta-section):not(.cta):not(.auth-art):not(.auth-form),
body.page-background.dark main > section:not(.feature-band):not(.hero):not(.page-hero):not(.dark-band):not(.cta-section):not(.cta):not(.auth-art):not(.auth-form) {
  background-color:rgba(0,0,0,.74);
}
/* Auth pages: keep left art panel dark with readable light text */
body.page-background .auth-art,
body.page-background section.auth-art {
  background-color:#000000 !important;
  background-image:linear-gradient(135deg,#000000 0%,#1a0800 50%,#173f67 160%) !important;
  color:#FFFFFF !important;
}
body.page-background .auth-art h1,
body.page-background .auth-art .eyebrow {
  color:#FFFFFF !important;
}
body.page-background .auth-art p {
  color:rgba(255,255,255,.88) !important;
}
body.page-background .auth-form {
  background-color:transparent !important;
  background-image:none !important;
}
body.page-background .auth-wrap {
  min-height:100vh;
  background-color:var(--bg);
  background-image:none;
}
/* Feature-band selection community: readable cards in light & dark mode */
.feature-band .selection-counts article,
.feature-band .impact-stats article {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.28);
  color:#FFFFFF
}
.feature-band .selection-counts article span,
.feature-band .selection-counts article small,
.feature-band .impact-stats article span,
.feature-band .impact-stats article small {
  color:rgba(255,255,255,.82)
}
.feature-band .selection-counts article strong,
.feature-band .impact-stats article strong {
  color:#173f67
}
.feature-band .section-title,
.feature-band .eyebrow {
  color:#FFFFFF
}
body.page-background .feature-band,
body.page-background section.feature-band {
  background:#000000 !important;
  background-image:none !important;
  color:#FFFFFF
}
body.page-background .feature-band .section-title,
body.page-background .feature-band .eyebrow,
body.page-background .feature-band .lead {
  color:#FFFFFF !important
}
body.page-background .feature-band .lead {
  color:rgba(255,255,255,.78) !important
}

/* Keep true dark bands solid black so light text stays readable in light mode */
body.page-background .dark-band,
body.page-background section.dark-band {
  background:#000000 !important;
  background-image:none !important;
  color:#FFFFFF;
}
body.page-background .dark-band .muted,
body.page-background .dark-band .lead,
body.page-background .dark-band .section-title,
body.page-background .dark-band p,
body.page-background .dark-band li {
  color:rgba(255,255,255,.88);
}
body.page-background .dark-band .section-title {
  color:#FFFFFF;
}
body.page-background .dark-band .feature-list li {
  border-bottom-color:rgba(255,255,255,.2);
}
body.page-background .dark-band .feature-list li:before {
  color:#173f67;
}
/* Hero/page-hero gets a slightly stronger view of the page image. */
body.page-background .page-hero {
  background-image:
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),
    var(--page-bg-image);
  background-size:cover;
  background-position:center;
}
body.page-background.dark .page-hero {
  background-image:
    linear-gradient(rgba(0,0,0,.66),rgba(0,0,0,.66)),
    var(--page-bg-image);
}
/* Mobile/tablet performance: fixed backgrounds can stutter on some browsers. */
@media (max-width:1050px) {
  body.page-background {
    background-attachment:scroll
  }
}
/* =========================================================
   ELITE FACULTY — four-card alignment stabilization
   ========================================================= */
.elite-dossier-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}
.elite-dossier,
.elite-dossier:nth-child(even) {
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  min-width:0;
  min-height:245px;
  height:100%;
  overflow:hidden;
  align-items:stretch;
}
.elite-dossier:nth-child(even) .dossier-photo,
.elite-dossier:nth-child(even) .dossier-info {
  order:initial;
}
.elite-dossier .dossier-number,
.elite-dossier:nth-child(even) .dossier-number {
  left:12px;
  right:auto;
}
.elite-dossier .dossier-photo {
  width:100%;
  min-width:0;
  height:100%;
  min-height:245px;
}
.elite-dossier .dossier-info {
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  min-width:0;
  padding:24px;
}
.elite-dossier .dossier-info h3,
.elite-dossier .dossier-info strong,
.elite-dossier .dossier-info li {
  overflow-wrap:break-word;
  word-break:normal;
}
.elite-dossier .dossier-info ul {
  width:100%
}
body.dark .elite-dossier {
  border-color:rgba(255,255,255,.28);
}
@media(min-width:761px) and (max-width:1050px) {
  .elite-dossier-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .elite-dossier,.elite-dossier:nth-child(even) {
    grid-template-columns:110px minmax(0,1fr);
    min-height:225px
  }
  .elite-dossier .dossier-photo {
    min-height:225px
  }
  .elite-dossier .dossier-info {
    padding:20px 18px
  }
}
@media(max-width:760px) {
  .elite-dossier-grid {
    grid-template-columns:1fr
  }
  .elite-dossier,.elite-dossier:nth-child(even) {
    grid-template-columns:112px minmax(0,1fr);
    min-height:215px
  }
  .elite-dossier .dossier-photo {
    min-height:215px
  }
  .elite-dossier .dossier-info {
    padding:18px
  }
}
@media(max-width:460px) {
  .elite-dossier,.elite-dossier:nth-child(even) {
    grid-template-columns:1fr
  }
  .elite-dossier .dossier-photo {
    height:220px;
    min-height:220px
  }
  .elite-dossier .dossier-info {
    padding:20px
  }
}


/* =========================================================
   RESPONSIVE SAFETY PATCH
   Layout-only fixes for desktop, tablet and mobile.
   No content, colors, components or page structure changed.
   ========================================================= */

/* Global overflow / sizing safety */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
iframe,
canvas {
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

table {
  max-width: 100%;
}

.container,
.app-shell,
.app-content,
.content-grid,
.course-grid,
.cards,
.story-grid,
.result-grid,
.exam-result-grid,
.exam-performance-grid,
.gov-notes-grid,
.state-book-grid,
.elite-dossier-grid,
.book-grid,
.footer-grid {
  min-width: 0;
}

.course-card,
.panel,
.info-card,
.sidebar-card,
.elite-dossier,
.gov-note-card,
.state-book-card,
.book-card,
.exam-performance-card,
.exam-result-grid article {
  min-width: 0;
}

.course-card h3,
.course-card p,
.panel h3,
.panel p,
.info-card h3,
.info-card p,
.sidebar-card,
.elite-dossier,
.book-card,
.exam-result-grid article {
  overflow-wrap: break-word;
}

/* Desktop */
@media (min-width: 1051px) {
  .container {
    width: min(1120px, 92%);
  }

  .content-grid {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .catalog-footer-note {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Tablet */
@media (min-width: 701px) and (max-width: 1050px) {
  .container {
    width: min(94%, 960px);
  }

  .content-grid {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 22px;
  }

  .course-grid,
  .cards,
  .book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-footer-note {
    grid-column: 1 / -1;
    width: 100%;
  }

  .hero,
  .page-hero,
  .section {
    max-width: 100%;
    overflow: hidden;
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-shell {
    max-width: 100%;
  }

  .app-content {
    min-width: 0;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .container {
    width: min(92%, 100%);
  }

  .section {
    padding-left: 0;
    padding-right: 0;
  }

  .content-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .sidebar-card {
    width: 100%;
  }

  .course-grid,
  .cards,
  .story-grid,
  .result-grid,
  .exam-result-grid,
  .exam-performance-grid,
  .gov-notes-grid,
  .state-book-grid,
  .elite-dossier-grid,
  .book-grid {
    grid-template-columns: 1fr;
  }

  .catalog-footer-note {
    grid-column: 1;
    width: 100%;
  }

  .filters {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .filters .filter-btn {
    flex: 1 1 auto;
  }

  .course-card,
  .panel,
  .info-card,
  .sidebar-card,
  .book-card {
    width: 100%;
  }

  .btn {
    max-width: 100%;
  }

  .page-hero .section-title,
  .hero h1,
  .section-title {
    overflow-wrap: break-word;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-wrap: wrap;
    gap: 10px;
  }

  .app-shell {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .app-content {
    width: 100%;
    min-width: 0;
  }

  .side-nav {
    width: 100%;
  }

  .tech-device,
  .tech-screen,
  .exam-tech-visual {
    max-width: 100%;
  }
}

/* Small phones */
@media (max-width: 460px) {
  .container {
    width: 94%;
  }

  .section-title,
  .hero h1 {
    max-width: 100%;
  }

  .course-body,
  .panel,
  .info-card,
  .sidebar-card,
  .dossier-info,
  .state-book-info {
    min-width: 0;
  }

  .search,
  select.search {
    width: 100% !important;
  }

  .btn {
    white-space: normal;
    text-align: center;
  }
}


/* =========================================================
   MOBILE / TABLET NAV — requested alignment + current page
   ========================================================= */
@media (max-width:1050px){
  .site-header .mobile-menu,
  .site-header .mobile-menu.open{
    text-align:right;
  }

  .site-header .mobile-menu > a,
  .site-header .mobile-home-group,
  .site-header .mobile-home-group > a,
  .site-header .mobile-home-label{
    text-align:right;
  }

  .site-header .mobile-menu > a{
    justify-content:flex-end;
  }

  .site-header .mobile-menu a.active{
    background:rgba(23,60,53,.10);
    color:#173f67;
    border-color:#173f67;
  }
}


/* =========================================================
   MOBILE / TABLET HEADER ICON POSITION — requested correction
   Keep menu text normal; move only RTL/theme/hamburger icons right.
   ========================================================= */
@media (max-width:1050px){
  .site-header .nav{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
  }

  .site-header .brand{
    flex:0 1 auto;
    min-width:0;
  }

  .site-header .nav-actions{
    margin-left:auto !important;
    margin-right:0 !important;
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
    justify-content:flex-end !important;
    flex:0 0 auto;
  }

  /* Restore normal menu text alignment. */
  .site-header .mobile-menu,
  .site-header .mobile-menu.open,
  .site-header .mobile-menu > a,
  .site-header .mobile-home-group,
  .site-header .mobile-home-group > a,
  .site-header .mobile-home-label{
    text-align:left;
  }

  .site-header .mobile-menu > a{
    justify-content:flex-start;
  }
}

/* Very small phones: keep the logo and all three controls on one row. */
@media (max-width:460px){
  .site-header .nav{
    gap:8px;
  }

  .site-header .brand{
    font-size:1rem;
  }

  .site-header .brand-mark{
    width:42px;
    height:42px;
    min-width:42px;
  }

  .site-header .nav-actions{
    gap:6px;
  }

  .site-header .icon-btn{
    width:42px;
    height:42px;
    min-width:42px;
    flex:0 0 42px;
  }
}


/* =========================================================
   COURSES PAGE — tablet empty-space fix only
   Keep desktop and mobile layouts unchanged.
   ========================================================= */
@media (min-width:701px) and (max-width:900px){
  .content-grid{
    grid-template-columns:1fr;
    align-items:start;
  }

  .content-grid > .sidebar-card.filter-panel{
    height:auto;
    width:100%;
  }
}


/* =========================================================
   STUDENT ANALYTICS — Score History visibility fix
   Existing score data retained; only make the bars render.
   ========================================================= */
.chart-col{
  height:100%;
  justify-content:flex-end;
}
.chart-col i{
  flex:0 0 auto;
  min-height:8px;
}
.chart-col span{
  flex:0 0 auto;
}


/* =========================================================
   TARGETED GRID ALIGNMENT FIX
   Sections shown in the supplied screenshots:
   - Home exam pills
   - Home "How Examora Works"
   - Home popular courses
   - Home student results
   - Blog article grid
   Content/design unchanged; only responsive grid alignment.
   ========================================================= */

/* Exam pills: use all available width without leaving a dead grid cell. */
body[style*="backgrounds/index.jpg"] .logo-cloud{
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  align-items:stretch;
}

/* Home preparation process: there are four steps, so use four columns on desktop. */
body[style*="backgrounds/index.jpg"] .process{
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
}

body[style*="backgrounds/index.jpg"] .process-step{
  height:100%;
}

/* Home currently has four popular-course cards and four result cards.
   Keep all four aligned in one row on desktop instead of wrapping one card. */
@media (min-width:1051px){
  body[style*="backgrounds/index.jpg"] .course-grid,
  body[style*="backgrounds/index.jpg"] .result-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  body[style*="backgrounds/blog.jpg"] .blog-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Tablet: clean 2 x 2 card layouts with no large unused column. */
@media (min-width:701px) and (max-width:1050px){
  body[style*="backgrounds/index.jpg"] .process,
  body[style*="backgrounds/index.jpg"] .course-grid,
  body[style*="backgrounds/index.jpg"] .result-grid,
  body[style*="backgrounds/blog.jpg"] .blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[style*="backgrounds/index.jpg"] .logo-cloud{
    grid-template-columns:repeat(auto-fit,minmax(115px,1fr));
  }
}

/* Mobile: one card per row; pills continue to auto-fit and fill the row. */
@media (max-width:700px){
  body[style*="backgrounds/index.jpg"] .process,
  body[style*="backgrounds/index.jpg"] .course-grid,
  body[style*="backgrounds/index.jpg"] .result-grid,
  body[style*="backgrounds/blog.jpg"] .blog-grid{
    grid-template-columns:1fr;
  }

  body[style*="backgrounds/index.jpg"] .logo-cloud{
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr));
  }
}

/* Equal-height visual alignment inside the affected grids. */
body[style*="backgrounds/index.jpg"] .course-card,
body[style*="backgrounds/index.jpg"] .result-card,
body[style*="backgrounds/blog.jpg"] .blog-card{
  min-width:0;
  height:100%;
}

body[style*="backgrounds/blog.jpg"] .blog-card{
  display:flex;
  flex-direction:column;
}

body[style*="backgrounds/blog.jpg"] .blog-body{
  display:flex;
  flex-direction:column;
  flex:1;
}

body[style*="backgrounds/blog.jpg"] .blog-body > a:last-child{
  margin-top:auto;
}


/* =========================================================
   HOME MOBILE SPACING + EXAM PILL FIT
   Mobile only. Tablet and desktop remain unchanged.
   ========================================================= */
@media (max-width:700px){

  /* Reduce the large blank gaps between the Home page card sections. */
  body[style*="backgrounds/index.jpg"] .section{
    padding-top:36px;
    padding-bottom:36px;
  }

  /* The exam-name pill strip needs less vertical whitespace on phones. */
  body[style*="backgrounds/index.jpg"] .section-sm{
    padding-top:24px;
    padding-bottom:24px;
  }

  /* Keep the five exam pills balanced and center the second row. */
  body[style*="backgrounds/index.jpg"] .logo-cloud{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
  }

  body[style*="backgrounds/index.jpg"] .logo-cloud .pill{
    flex:0 1 calc(33.333% - 8px);
    min-width:100px;
    max-width:150px;
  }
}

@media (max-width:430px){
  body[style*="backgrounds/index.jpg"] .section{
    padding-top:30px;
    padding-bottom:30px;
  }

  body[style*="backgrounds/index.jpg"] .section-sm{
    padding-top:20px;
    padding-bottom:20px;
  }

  body[style*="backgrounds/index.jpg"] .logo-cloud .pill{
    flex-basis:calc(33.333% - 8px);
    min-width:0;
    padding:.78rem .45rem;
  }
}


/* ===== Contact page: form above + full-width GMap with device IN FRONT ===== */
.contact-form-panel {
  max-width:720px;
  margin:0 auto;
}
.contact-intro {
  text-align:center;
  margin-bottom:1.25rem
}
.contact-intro .section-title {
  margin-bottom:.4rem
}

.map-full-section {
  width:100%;
  margin:0;
  padding:0;
  position:relative;
  background:#0a0a0a;
}

.map-embed-wrap {
  width:100%;
  height:min(480px, 58vh);
  min-height:320px;
  position:relative;
  overflow:hidden;
  border-top:3px solid #173f67;
}

.map-embed-wrap iframe {
  width:100%;
  height:100%;
  border:0;
  display:block;
  filter:grayscale(0.1) contrast(1.05);
}

/* Overlay sitting IN FRONT of the map */
.map-overlay {
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:24px 5%;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 40%, transparent 70%);
}

.map-overlay > * {
  pointer-events:auto;
}

.map-address-block {
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(23,60,53,.45);
  border-radius:16px;
  padding:16px 20px;
  max-width:280px;
  color:#FFFFFF;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}

.map-address-block h3 {
  margin:0 0 .35rem;
  font-size:1.1rem;
  color:#FFFFFF;
  font-weight:800;
}

.map-address-block p {
  margin:.15rem 0;
  color:rgba(255,255,255,.88);
  font-size:.9rem;
  line-height:1.45;
}

.map-address-block .small {
  color:rgba(255,255,255,.65);
  font-size:.8rem;
  margin-top:.4rem;
}

/* Device animation in front of map */
.map-locate-device {
  flex-shrink:0;
}

.locate-device-frame {
  width:200px;
  height:132px;
  background:#141414;
  border-radius:12px;
  border:2px solid #173f67;
  box-shadow:0 14px 36px rgba(23,60,53,.3), 0 0 0 6px rgba(23,60,53,.1);
  padding:7px;
  position:relative;
  animation:deviceFloat 4s ease-in-out infinite;
}

.locate-device-frame::after {
  content:"";
  position:absolute;
  bottom:-9px;
  left:50%;
  transform:translateX(-50%);
  width:56px;
  height:5px;
  background:#333;
  border-radius:0 0 5px 5px;
}

.locate-device-screen {
  width:100%;
  height:100%;
  background:linear-gradient(160deg,#0d0d0d,#1a120e);
  border-radius:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.locate-device-top {
  position:absolute;
  top:6px;
  left:8px;
  right:8px;
  display:flex;
  justify-content:space-between;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.06em;
  color:rgba(255,255,255,.7);
}

.locate-device-top .tech-live {
  color:#173f67;
}

.locate-pin-wrap {
  position:relative;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.locate-pin {
  width:13px;
  height:13px;
  background:#173f67;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 0 0 3px rgba(23,60,53,.35);
  z-index:2;
  animation:pinBounce 1.6s ease-in-out infinite;
}

.locate-pulse {
  position:absolute;
  width:26px;
  height:26px;
  border:2px solid #173f67;
  border-radius:50%;
  opacity:.6;
  animation:pulseRing 2s ease-out infinite;
}

.locate-pulse.delay {
  animation-delay:.7s;
}

.locate-label {
  margin-top:8px;
  font-size:.7rem;
  font-weight:800;
  color:#FFFFFF;
  letter-spacing:.02em;
}

@keyframes deviceFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-7px); }
}

@keyframes pinBounce {
  0%,100% { transform:rotate(-45deg) translateY(0); }
  50% { transform:rotate(-45deg) translateY(-3px); }
}

@keyframes pulseRing {
  0% { transform:scale(0.6); opacity:0.7; }
  100% { transform:scale(1.7); opacity:0; }
}

/* Strong CTA mobile fixes */
@media (max-width:700px) {
  .cta-section {
    padding:36px 0 !important;
  }
  .cta {
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }
  .cta-content {
    max-width:100% !important;
    flex:none !important;
  }
  .cta-content h2 {
    font-size:1.55rem !important;
    margin-bottom:.4rem !important;
  }
  .cta-content p {
    font-size:.95rem !important;
    margin:0 !important;
  }
  .cta .btn {
    width:100% !important;
    margin-top:6px !important;
    padding:.9rem 1.2rem !important;
  }

  .map-embed-wrap {
    height:min(380px, 52vh);
    min-height:280px;
  }
  .map-overlay {
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    padding:16px 4%;
    gap:12px;
  }
  .locate-device-frame {
    width:160px;
    height:108px;
  }
  .map-address-block {
    max-width:100%;
    width:100%;
  }
}

/* Footer force tighter + consistent */
.site-footer {
  padding:32px 0 16px !important;
}
.footer-grid {
  gap:16px 18px !important;
}
@media (max-width:700px) {
  .footer-grid {
    grid-template-columns:1fr 1fr !important;
    gap:14px 12px !important;
  }
  .footer-grid > div:first-child {
    grid-column:1 / -1 !important;
  }
  .footer-bottom {
    margin-top:14px !important;
    padding-top:12px !important;
  }
}

/* ========== FORCE FOOTER SIDE-BY-SIDE + TIGHT SPACING (final) ========== */
.site-footer {
  padding: 28px 0 14px !important;
  background: #000000 !important;
  color: #FFFFFF !important;
}
.site-footer .container {
  width: min(1180px, 92%);
  margin: 0 auto;
}
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: 16px 20px !important;
  align-items: start !important;
}
.footer-brand p {
  margin: 0.35rem 0 0.6rem !important;
  max-width: 240px !important;
  line-height: 1.4 !important;
  font-size: 0.85rem !important;
  opacity: 0.88;
}
.footer-grid h4 {
  color: #FFFFFF !important;
  font-size: 0.8rem !important;
  margin: 0 0 0.45rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer-grid a {
  display: block !important;
  color: rgba(255,255,255,0.8) !important;
  margin: 0.18rem 0 !important;
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
}
.footer-grid a:hover {
  color: #173f67 !important;
}
.footer-social {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 0.2rem !important;
}
.footer-social a {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.footer-social a svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}
.footer-social a:hover {
  background: #173f67 !important;
  border-color: #173f67 !important;
  color: #FFFFFF !important;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  margin-top: 16px !important;
  padding-top: 12px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.65) !important;
}

/* Tablet: still side-by-side (brand + 3 cols become 2+2) */
@media (max-width: 1050px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr !important;
    gap: 14px 16px !important;
  }
}

/* Small tablet / large phone: 2 columns side-by-side */
@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
  .footer-brand p {
    max-width: 100% !important;
  }
}

/* Mobile: still 2-column side-by-side for links (not stacked line-by-line) */
@media (max-width: 700px) {
  .site-footer {
    padding: 24px 0 12px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 14px !important;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 4px !important;
  }
  .footer-grid h4 {
    font-size: 0.76rem !important;
    margin-bottom: 0.35rem !important;
  }
  .footer-grid a {
    font-size: 0.82rem !important;
    margin: 0.14rem 0 !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
  }
}

/* ========== CTA MOBILE FIX (final override) ========== */
@media (max-width: 700px) {
  .cta-section {
    padding: 32px 0 !important;
  }
  .cta-section .container {
    width: 92% !important;
  }
  .cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cta-content {
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  .cta-content .eyebrow {
    margin-bottom: 0.35rem !important;
    font-size: 0.72rem !important;
  }
  .cta-content h2 {
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
    margin: 0 0 0.3rem !important;
  }
  .cta-content p {
    font-size: 0.9rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    opacity: 0.9;
  }
  .cta .btn {
    width: 100% !important;
    margin-top: 4px !important;
    padding: 0.85rem 1.1rem !important;
    font-size: 0.95rem !important;
    white-space: normal !important;
  }
}

/* ========== Daily Study Plan – center 4th box on desktop ========== */
.study-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  justify-items: stretch;
}

/* When the last item is alone on the second row (4th item), put it in the middle column */
.study-plan-grid > :last-child:nth-child(3n + 1) {
  grid-column: 2;
}

/* Tablet: 2 columns – last item can stay left or center if alone */
@media (max-width: 1050px) {
  .study-plan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .study-plan-grid > :last-child:nth-child(3n + 1) {
    grid-column: auto; /* reset */
  }
  /* If odd number and last is alone on a row of 2, center it */
  .study-plan-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin-inline: auto;
    width: 100%;
  }
}

/* Mobile: single column */
@media (max-width: 700px) {
  .study-plan-grid {
    grid-template-columns: 1fr !important;
  }
  .study-plan-grid > :last-child:nth-child(odd),
  .study-plan-grid > :last-child:nth-child(3n + 1) {
    grid-column: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
}

/* ========== GLOBAL 3-COLOR ICON SYSTEM (Black / White / Orange) ========== */
:root {
  --icon-primary: #173f67;
  --icon-black: #000000;
  --icon-white: #FFFFFF;
}

/* All inline & external SVGs stick to brand colors */
svg {
  color: inherit;
}
svg [fill]:not([fill="none"]):not([fill="currentColor"]) {
  /* leave explicit brand fills; override others via parent color where possible */
}
.footer-social a svg,
.icon-btn svg,
.brand svg,
nav svg,
.side-nav svg {
  fill: currentColor !important;
}

/* Feature checkmarks = primary orange only */
.feature-list li:before,
.feature-list li::before {
  color: #173f67 !important;
  content: "✓" !important;
}

/* Star ratings */
.rating,
.stars,
[class*="star"],
.course-meta span:has(+ *),
.faculty-card span {
  color: #173f67;
}
/* Force star character color */
.course-card span,
.faculty-card span,
.blog-card span {
  /* stars often inline – target common patterns */
}

/* Live indicators */
.tech-live,
.live-dot,
[class*="live"] {
  color: #173f67 !important;
}

/* Exam icons & icon buttons */
.exam-icon {
  background: rgba(23,60,53, 0.12) !important;
  color: #173f67 !important;
}
.icon-btn {
  color: #000000 !important;
  border-color: #000000 !important;
  background: #FFFFFF !important;
}
body.dark .icon-btn {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.35) !important;
  background: #000000 !important;
}
.icon-btn:hover {
  color: #173f67 !important;
  border-color: #173f67 !important;
}

/* Process numbers / arrows */
.process-step .num {
  color: rgba(23,60,53, 0.35) !important;
}
.process-step:not(:last-child):after {
  color: #173f67 !important;
}

/* Any remaining emoji-like symbols used as icons */
.panel b,
.price-card .eyebrow,
.popular-tag {
  /* keep existing */
}

/* Social icons already use currentColor – force brand on hover */
.footer-social a {
  color: #FFFFFF !important;
}
.footer-social a:hover {
  background: #173f67 !important;
  border-color: #173f67 !important;
  color: #FFFFFF !important;
}

/* Ensure progress / chart bars stay brand */
.progressbar span,
.bar i,
.chart-col i,
.progress span {
  background: #173f67 !important;
}

/* Dark mode consistency for icons */
body.dark .exam-icon {
  background: rgba(23,60,53, 0.18) !important;
  color: #173f67 !important;
}
body.dark .feature-list li:before {
  color: #173f67 !important;
}

/* ========== Mono icons (3-color only: Black / White / Orange) ========== */
.exam-icon {
  background: rgba(23,60,53, 0.12) !important;
  color: #173f67 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}
.exam-icon .icon-mono,
.icon-mono {
  color: #173f67 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  filter: none !important;
  /* Force single color rendering where possible */
  -webkit-text-fill-color: #173f67 !important;
}

/* Faculty avatars – letter monograms in brand colors */
.avatar,
.avatar-mono {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: #000000 !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.02em;
  border: 2px solid #173f67 !important;
}
body.dark .avatar,
body.dark .avatar-mono {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #173f67 !important;
}

/* Floating tags */
.floating-tag .icon-mono {
  color: #173f67 !important;
  -webkit-text-fill-color: #173f67 !important;
}

/* Prevent any emoji color bleed */
.exam-icon,
.avatar,
.avatar-mono,
.icon-mono {
  text-shadow: none !important;
  background-image: none !important;
}


/* =========================================================
   BACKGROUND TEXT READABILITY + ENTRANCE ANIMATION
   Only affects areas that directly use a page background image.
   ========================================================= */

/* Background-image sections/containers need a local stacking context */
body.page-background .hero-v2,
body.page-background .hero,
body.page-background .page-hero,
body.page-background .auth-wrap,
body.page-background main[style*="background-image"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Dark contrast layer so text stays readable on every JPG */
body.page-background .hero-v2::after,
body.page-background .hero::after,
body.page-background .page-hero::after,
body.page-background .auth-wrap::after,
body.page-background main[style*="background-image"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.56) 48%,
      rgba(0,0,0,.34) 100%);
}

/* Keep readable hero/page text white while preserving orange accents/buttons */
body.page-background .hero-v2 h1,
body.page-background .hero-v2 h2,
body.page-background .hero-v2 h3,
body.page-background .hero-v2 p,
body.page-background .hero-v2 .lead,
body.page-background .hero h1,
body.page-background .hero h2,
body.page-background .hero h3,
body.page-background .hero p,
body.page-background .hero .lead,
body.page-background .page-hero h1,
body.page-background .page-hero h2,
body.page-background .page-hero h3,
body.page-background .page-hero p,
body.page-background .page-hero .lead,
body.page-background .auth-wrap h1,
body.page-background .auth-wrap h2,
body.page-background .auth-wrap h3,
body.page-background .auth-wrap p,
body.page-background main[style*="background-image"] h1,
body.page-background main[style*="background-image"] h2,
body.page-background main[style*="background-image"] h3,
body.page-background main[style*="background-image"] p {
  color: #FFFFFF !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.72);
}

/* Muted supporting text gets softer white */
body.page-background .hero-v2 .muted,
body.page-background .hero .muted,
body.page-background .page-hero .muted,
body.page-background .auth-wrap .muted,
body.page-background main[style*="background-image"] .muted {
  color: rgba(255,255,255,.86) !important;
}

/* Preserve brand orange for eyebrows/accent text */
body.page-background .hero-v2 .eyebrow,
body.page-background .hero .eyebrow,
body.page-background .page-hero .eyebrow,
body.page-background .auth-wrap .eyebrow,
body.page-background main[style*="background-image"] .eyebrow {
  color: #173f67 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Smooth text entrance animation */
@keyframes examoraBgTextIn {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

body.page-background .hero-v2 > *:not(.hero-marquee),
body.page-background .hero > *,
body.page-background .page-hero > *,
body.page-background .auth-wrap > *,
body.page-background main[style*="background-image"] > * {
  animation: examoraBgTextIn .8s cubic-bezier(.2,.7,.2,1) both;
}

body.page-background .hero-v2 > *:nth-child(2),
body.page-background .hero > *:nth-child(2),
body.page-background .page-hero > *:nth-child(2),
body.page-background .auth-wrap > *:nth-child(2),
body.page-background main[style*="background-image"] > *:nth-child(2) {
  animation-delay: .10s;
}

body.page-background .hero-v2 > *:nth-child(3),
body.page-background .hero > *:nth-child(3),
body.page-background .page-hero > *:nth-child(3),
body.page-background .auth-wrap > *:nth-child(3),
body.page-background main[style*="background-image"] > *:nth-child(3) {
  animation-delay: .18s;
}

/* Respect reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  body.page-background .hero-v2 > *,
  body.page-background .hero > *,
  body.page-background .page-hero > *,
  body.page-background .auth-wrap > *,
  body.page-background main[style*="background-image"] > * {
    animation: none !important;
  }
}

/* === HEADER TEXT VISIBILITY FIX ONLY ===
   Replace dark/black header text with the existing orange accent. */
.site-header .brand,
.site-header .navlinks a,
.site-header .icon-btn,
.site-header .menu-toggle,
.site-header .mobile-menu a {
  color: #173f67 !important;
}

.site-header .navlinks a:hover,
.site-header .navlinks a.active {
  color: #173f67 !important;
}

/* =========================================================
   BACKGROUND AREA DARK-TEXT VISIBILITY FIX
   Only changes hard-to-see dark text that sits over background images.
   Navbar/header colors are not part of this rule.
   ========================================================= */

/* Home hero: dark supporting text -> brand orange */
body.page-background .hero-v2 .hero-copy .hero-kicker,
body.page-background .hero-v2 .hero-copy .text-link,
body.page-background .hero-v2 .hero-copy .hero-proof b,
body.page-background .hero-v2 .hero-copy .hero-proof span,
body.page-background .hero-v2 .hero-bottom-note span,
body.page-background .hero-v2 .hero-bottom-note b {
  color: #173f67 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}

/* The outlined word "study." was using a black stroke and disappearing */
body.page-background .hero-v2 h1 em {
  color: transparent !important;
  -webkit-text-stroke: 2px #173f67 !important;
  text-shadow: none !important;
}

/* Keep the free-test play circle visible against the photo */
body.page-background .hero-v2 .hero-copy .play-dot {
  color: #173f67 !important;
  border-color: #173f67 !important;
  background: rgba(0,0,0,.22);
}

/* Keep dividers visible in the statistics row */
body.page-background .hero-v2 .hero-proof,
body.page-background .hero-v2 .hero-proof > div {
  border-color: rgba(23,60,53,.55) !important;
}

/* Equivalent text in other image-backed hero/page-header areas */
body.page-background .hero .eyebrow,
body.page-background .hero .text-link,
body.page-background .page-hero .eyebrow,
body.page-background .page-hero .text-link,
body.page-background .auth-wrap .eyebrow,
body.page-background main[style*="background-image"] .eyebrow,
body.page-background main[style*="background-image"] .text-link {
  color: #173f67 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.72);
}

/* =========================================================
   REQUESTED CONTRAST + THREE-COLOR SECTION FIX
   Scope: auth, instructor details, student/instructor/admin workspaces.
   Palette for section/card backgrounds: #FFFFFF, #000000, #173f67 only.
   Layout, sizing, content and responsiveness are untouched.
   ========================================================= */

/* 1) AUTH CARDS: text sits on a white card, so keep it dark and readable. */
body[style*="backgrounds/login.jpg"] .auth-card,
body[style*="backgrounds/register.jpg"] .auth-card {
  background:#FFFFFF !important;
  color:#000000 !important;
}
body[style*="backgrounds/login.jpg"] .auth-card h1,
body[style*="backgrounds/login.jpg"] .auth-card h2,
body[style*="backgrounds/login.jpg"] .auth-card h3,
body[style*="backgrounds/login.jpg"] .auth-card p,
body[style*="backgrounds/login.jpg"] .auth-card .muted,
body[style*="backgrounds/login.jpg"] .auth-card label,
body[style*="backgrounds/login.jpg"] .auth-card .field > span,
body[style*="backgrounds/register.jpg"] .auth-card h1,
body[style*="backgrounds/register.jpg"] .auth-card h2,
body[style*="backgrounds/register.jpg"] .auth-card h3,
body[style*="backgrounds/register.jpg"] .auth-card p,
body[style*="backgrounds/register.jpg"] .auth-card .muted,
body[style*="backgrounds/register.jpg"] .auth-card label,
body[style*="backgrounds/register.jpg"] .auth-card .field > span {
  color:#000000 !important;
  text-shadow:none !important;
}
body[style*="backgrounds/login.jpg"] .auth-card a:not(.brand),
body[style*="backgrounds/register.jpg"] .auth-card a:not(.brand) {
  color:#173f67 !important;
  text-shadow:none !important;
}
body[style*="backgrounds/login.jpg"] .auth-card input,
body[style*="backgrounds/register.jpg"] .auth-card input {
  background:#FFFFFF !important;
  color:#000000 !important;
  border-color:#000000 !important;
}

/* 2) INSTRUCTOR DETAILS: white philosophy card must use black readable text. */
body[style*="backgrounds/instructor-details.jpg"] .page-hero .analytics-card {
  background:#FFFFFF !important;
  color:#000000 !important;
  border-color:#000000 !important;
}
body[style*="backgrounds/instructor-details.jpg"] .page-hero .analytics-card h1,
body[style*="backgrounds/instructor-details.jpg"] .page-hero .analytics-card h2,
body[style*="backgrounds/instructor-details.jpg"] .page-hero .analytics-card h3,
body[style*="backgrounds/instructor-details.jpg"] .page-hero .analytics-card p,
body[style*="backgrounds/instructor-details.jpg"] .page-hero .analytics-card .muted {
  color:#000000 !important;
  text-shadow:none !important;
}
body[style*="backgrounds/instructor-details.jpg"] main > section:not(.page-hero):not(.future-tech-band):not(.dark-band):not(.cta-section):not(.cta) {
  background:#FFFFFF !important;
}
body[style*="backgrounds/instructor-details.jpg"] .future-tech-band,
body[style*="backgrounds/instructor-details.jpg"] .dark-band {
  background:#000000 !important;
}

/* 3) DASHBOARD / ADMIN / INSTRUCTOR WORKSPACES: remove gray section surfaces. */
body[style*="backgrounds/dashboard-"] .app-shell,
body[style*="backgrounds/admin-"] .app-shell,
body[style*="backgrounds/instructor-instructor-"] .app-shell {
  background:#FFFFFF !important;
}
body[style*="backgrounds/dashboard-"] .app-sidebar,
body[style*="backgrounds/admin-"] .app-sidebar,
body[style*="backgrounds/instructor-instructor-"] .app-sidebar {
  background:#000000 !important;
  color:#FFFFFF !important;
}
body[style*="backgrounds/dashboard-"] .side-label,
body[style*="backgrounds/admin-"] .side-label,
body[style*="backgrounds/instructor-instructor-"] .side-label {
  color:#173f67 !important;
}
body[style*="backgrounds/dashboard-"] .side-nav a,
body[style*="backgrounds/admin-"] .side-nav a,
body[style*="backgrounds/instructor-instructor-"] .side-nav a {
  background:#000000 !important;
  color:#FFFFFF !important;
}
body[style*="backgrounds/dashboard-"] .side-nav a.active,
body[style*="backgrounds/dashboard-"] .side-nav a:hover,
body[style*="backgrounds/admin-"] .side-nav a.active,
body[style*="backgrounds/admin-"] .side-nav a:hover,
body[style*="backgrounds/instructor-instructor-"] .side-nav a.active,
body[style*="backgrounds/instructor-instructor-"] .side-nav a:hover {
  background:#173f67 !important;
  color:#FFFFFF !important;
}

body[style*="backgrounds/dashboard-"] .app-topbar,
body[style*="backgrounds/admin-"] .app-topbar,
body[style*="backgrounds/instructor-instructor-"] .app-topbar {
  background:#FFFFFF !important;
  color:#000000 !important;
  border-color:#000000 !important;
}

/* White content surfaces: no gray/pale-gray fills. */
body[style*="backgrounds/dashboard-"] .app-content :where(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card,.table-wrap,.filter-panel,.profile-card,.resource-card),
body[style*="backgrounds/admin-"] .app-content :where(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card,.table-wrap,.filter-panel,.profile-card,.resource-card),
body[style*="backgrounds/instructor-instructor-"] .app-content :where(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card,.table-wrap,.filter-panel,.profile-card,.resource-card) {
  background:#FFFFFF !important;
  color:#000000 !important;
  border-color:#000000 !important;
}

/* Any native tables/controls in those white surfaces stay white, black, or orange. */
body[style*="backgrounds/dashboard-"] .app-content :where(table,thead,tbody,tr,th,td,input,select,textarea),
body[style*="backgrounds/admin-"] .app-content :where(table,thead,tbody,tr,th,td,input,select,textarea),
body[style*="backgrounds/instructor-instructor-"] .app-content :where(table,thead,tbody,tr,th,td,input,select,textarea) {
  background-color:#FFFFFF !important;
  color:#000000 !important;
}

/* Accent-only small status backgrounds instead of gray/translucent fills. */
body[style*="backgrounds/dashboard-"] .app-content :where(.badge,.tag,.pill),
body[style*="backgrounds/admin-"] .app-content :where(.badge,.tag,.pill),
body[style*="backgrounds/instructor-instructor-"] .app-content :where(.badge,.tag,.pill) {
  background:#173f67 !important;
  color:#FFFFFF !important;
  border-color:#173f67 !important;
}

/* Chart / progress visuals stay in the third brand color, not gray. */
body[style*="backgrounds/dashboard-"] .app-content :where(.chart-col i,.bar i,.progressbar span),
body[style*="backgrounds/admin-"] .app-content :where(.chart-col i,.bar i,.progressbar span),
body[style*="backgrounds/instructor-instructor-"] .app-content :where(.chart-col i,.bar i,.progressbar span) {
  background:#173f67 !important;
}

/* Readability inside white workspace cards. */
body[style*="backgrounds/dashboard-"] .app-content :where(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card) .muted,
body[style*="backgrounds/admin-"] .app-content :where(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card) .muted,
body[style*="backgrounds/instructor-instructor-"] .app-content :where(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card) .muted {
  color:#000000 !important;
}

/* Dark-mode versions still use only black / white / orange surfaces. */
body.dark[style*="backgrounds/dashboard-"] .app-topbar,
body.dark[style*="backgrounds/admin-"] .app-topbar,
body.dark[style*="backgrounds/instructor-instructor-"] .app-topbar,
body.dark[style*="backgrounds/dashboard-"] .app-content :where(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card,.table-wrap,.filter-panel,.profile-card,.resource-card),
body.dark[style*="backgrounds/admin-"] .app-content :where(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card,.table-wrap,.filter-panel,.profile-card,.resource-card),
body.dark[style*="backgrounds/instructor-instructor-"] .app-content :where(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card,.table-wrap,.filter-panel,.profile-card,.resource-card) {
  background:#000000 !important;
  color:#FFFFFF !important;
  border-color:#FFFFFF !important;
}
body.dark[style*="backgrounds/dashboard-"] .app-content .muted,
body.dark[style*="backgrounds/admin-"] .app-content .muted,
body.dark[style*="backgrounds/instructor-instructor-"] .app-content .muted {
  color:#FFFFFF !important;
}

/* =========================================================
   TEXT VISIBILITY FIX — HOME 2 + ALL PAGE BREADCRUMBS ONLY
   ========================================================= */

/* Home Page 2: keep text inside the white countdown/analytics card readable. */
body.page-background .hero .analytics-card h1,
body.page-background .hero .analytics-card h2,
body.page-background .hero .analytics-card h3,
body.page-background .hero .analytics-card p,
body.page-background .hero .analytics-card .muted,
body.page-background .hero .analytics-card .small,
body.page-background .hero .analytics-card .count-box,
body.page-background .hero .analytics-card .count-box b,
body.page-background .hero .analytics-card .count-box span {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Preserve the orange accent label inside the Home 2 analytics card. */
body.page-background .hero .analytics-card .eyebrow {
  color: #173f67 !important;
  text-shadow: none !important;
}

/* All inner-page breadcrumb text: Home / Courses, Home / Resources, etc. */
body.page-background .page-hero .breadcrumbs,
body.page-background .page-hero .breadcrumbs a,
.page-hero .breadcrumbs,
.page-hero .breadcrumbs a {
  color: #173f67 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.85) !important;
  font-weight: 800;
}


/* =========================================================
   REQUESTED UPDATE — ABOUT / WORKSPACE WHITE BG / PRICING
   ========================================================= */

/* About: Vision + Why Choose Us. Existing global section reveal JS
   automatically gives these sections the same smooth reveal animation. */
.examora-vision-card {
  border:2px solid #173f67;
}
.examora-vision-card h3 {
  margin:.55rem 0 .65rem;
  font-size:1.5rem;
}
.examora-why-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:28px;
}
.examora-why-grid .process-step {
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.examora-why-grid .process-step:hover {
  transform:translateY(-7px);
  border-color:#173f67;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}
@media(max-width:1050px) {
  .examora-why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .examora-why-grid { grid-template-columns:1fr; }
}

/* Dashboard, admin and instructor workspace main backgrounds: pure white. */
body[style*="backgrounds/dashboard-"],
body[style*="backgrounds/admin-"],
body[style*="backgrounds/instructor-instructor-"],
body[style*="backgrounds/dashboard-"] .app-main,
body[style*="backgrounds/admin-"] .app-main,
body[style*="backgrounds/instructor-instructor-"] .app-main,
body[style*="backgrounds/dashboard-"] .app-content,
body[style*="backgrounds/admin-"] .app-content,
body[style*="backgrounds/instructor-instructor-"] .app-content {
  background:#FFFFFF !important;
  background-image:none !important;
  color:#000000 !important;
}

/* Keep the requested white workspace background even when dark mode is toggled. */
body.dark[style*="backgrounds/dashboard-"] .app-main,
body.dark[style*="backgrounds/admin-"] .app-main,
body.dark[style*="backgrounds/instructor-instructor-"] .app-main,
body.dark[style*="backgrounds/dashboard-"] .app-content,
body.dark[style*="backgrounds/admin-"] .app-content,
body.dark[style*="backgrounds/instructor-instructor-"] .app-content {
  background:#FFFFFF !important;
  color:#000000 !important;
}

/* Pricing: Starter / Pro / Ultimate remain exactly equal height on the same row. */
.price-grid {
  align-items:stretch !important;
}
.price-grid > .price-card {
  min-height:520px;
  align-self:stretch;
}
.price-grid > .price-card .feature-list {
  flex:1 0 auto;
}
.price-grid > .price-card .btn {
  margin-top:auto;
}
@media(max-width:700px) {
  .price-grid > .price-card { min-height:0; }
}


/* =========================================================
   FINAL QA FIX — requested only
   1. White workspaces for Student/Admin/Instructor
   2. Clear text on white cards over image-backed areas
   3. Equal-height pricing cards
   ========================================================= */

/* Student / Admin / Instructor workspace canvas must be pure white. */
body.page-background[style*="backgrounds/dashboard-"],
body.page-background[style*="backgrounds/admin-"],
body.page-background[style*="backgrounds/instructor-instructor-"] {
  background:#FFFFFF !important;
  background-image:none !important;
  color:#000000 !important;
}
body.page-background[style*="backgrounds/dashboard-"] .app-shell,
body.page-background[style*="backgrounds/dashboard-"] .app-main,
body.page-background[style*="backgrounds/dashboard-"] .app-content,
body.page-background[style*="backgrounds/admin-"] .app-shell,
body.page-background[style*="backgrounds/admin-"] .app-main,
body.page-background[style*="backgrounds/admin-"] .app-content,
body.page-background[style*="backgrounds/instructor-instructor-"] .app-shell,
body.page-background[style*="backgrounds/instructor-instructor-"] .app-main,
body.page-background[style*="backgrounds/instructor-instructor-"] .app-content {
  background:#FFFFFF !important;
  background-image:none !important;
  color:#000000 !important;
}

/* Main workspace cards remain white with readable black text. */
body.page-background[style*="backgrounds/dashboard-"] .app-content :is(.stat,.panel,.analytics-card,.course-card,.result-card,.exam-card,.sidebar-card,.profile-card,.resource-card,.table-wrap),
body.page-background[style*="backgrounds/admin-"] .app-content :is(.stat,.panel,.analytics-card,.course-card,.result-card,.exam-card,.sidebar-card,.profile-card,.resource-card,.table-wrap),
body.page-background[style*="backgrounds/instructor-instructor-"] .app-content :is(.stat,.panel,.analytics-card,.course-card,.result-card,.exam-card,.sidebar-card,.profile-card,.resource-card,.table-wrap) {
  background:#FFFFFF !important;
  color:#000000 !important;
}
body.page-background[style*="backgrounds/dashboard-"] .app-content :is(.muted,.small,p,span,td,th,label),
body.page-background[style*="backgrounds/admin-"] .app-content :is(.muted,.small,p,span,td,th,label),
body.page-background[style*="backgrounds/instructor-instructor-"] .app-content :is(.muted,.small,p,span,td,th,label) {
  color:#000000;
}
body.page-background[style*="backgrounds/dashboard-"] .app-sidebar :is(span,a,.brand,.side-label),
body.page-background[style*="backgrounds/admin-"] .app-sidebar :is(span,a,.brand,.side-label),
body.page-background[style*="backgrounds/instructor-instructor-"] .app-sidebar :is(span,a,.brand,.side-label) {
  text-shadow:none !important;
}

/* White cards placed over hero/background images must never inherit white text. */
body.page-background :is(.hero,.page-hero,.auth-wrap) :is(.analytics-card,.auth-card,.count-card,.countdown-card,.white-card) {
  background:#FFFFFF !important;
  color:#000000 !important;
}
body.page-background :is(.hero,.page-hero,.auth-wrap) :is(.analytics-card,.auth-card,.count-card,.countdown-card,.white-card)
:is(h1,h2,h3,h4,h5,h6,p,span,small,label,strong,b,.muted,.small) {
  color:#000000 !important;
  text-shadow:none !important;
}
body.page-background :is(.hero,.page-hero,.auth-wrap) :is(.analytics-card,.auth-card,.count-card,.countdown-card,.white-card) .eyebrow,
body.page-background :is(.hero,.page-hero,.auth-wrap) :is(.analytics-card,.auth-card,.count-card,.countdown-card,.white-card) a:not(.brand) {
  color:#173f67 !important;
}

/* Instructor-details philosophy card: explicit readable contrast. */
body.page-background[style*="backgrounds/instructor-details.jpg"] .analytics-card {
  background:#FFFFFF !important;
  color:#000000 !important;
}
body.page-background[style*="backgrounds/instructor-details.jpg"] .analytics-card :is(h1,h2,h3,h4,p,span,small,.muted) {
  color:#000000 !important;
  text-shadow:none !important;
}
body.page-background[style*="backgrounds/instructor-details.jpg"] .analytics-card .eyebrow {
  color:#173f67 !important;
}

/* Pricing: Starter, Pro and Ultimate equal height with aligned buttons. */
.price-grid {
  align-items:stretch !important;
}
.price-grid > .price-card {
  display:flex !important;
  flex-direction:column !important;
  height:auto !important;
  min-height:520px !important;
}
.price-grid > .price-card .feature-list {
  flex:1 1 auto !important;
}
.price-grid > .price-card > .btn {
  margin-top:auto !important;
}
@media (max-width:700px) {
  .price-grid > .price-card {
    min-height:0 !important;
  }
}


/* =========================================================
   WORKSPACE FINAL WHITE + TEXT VISIBILITY FIX
   Scope only: Student dashboard, Admin, Instructor workspaces.
   ========================================================= */
body.page-background[style*="backgrounds/dashboard-"] .app-main,
body.page-background[style*="backgrounds/admin-"] .app-main,
body.page-background[style*="backgrounds/instructor-instructor-"] .app-main,
body.page-background[style*="backgrounds/dashboard-"] .app-content,
body.page-background[style*="backgrounds/admin-"] .app-content,
body.page-background[style*="backgrounds/instructor-instructor-"] .app-content {
  background:#FFFFFF !important;
  background-image:none !important;
  color:#000000 !important;
}

body.page-background[style*="backgrounds/dashboard-"] .app-content :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,b,label,td,th,.muted,.small),
body.page-background[style*="backgrounds/admin-"] .app-content :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,b,label,td,th,.muted,.small),
body.page-background[style*="backgrounds/instructor-instructor-"] .app-content :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,b,label,td,th,.muted,.small) {
  color:#000000 !important;
  text-shadow:none !important;
}

body.page-background[style*="backgrounds/dashboard-"] .app-content :is(.badge,.eyebrow),
body.page-background[style*="backgrounds/admin-"] .app-content :is(.badge,.eyebrow),
body.page-background[style*="backgrounds/instructor-instructor-"] .app-content :is(.badge,.eyebrow) {
  color:#FFFFFF !important;
  background:#173f67 !important;
  text-shadow:none !important;
}

body.page-background[style*="backgrounds/dashboard-"] .app-topbar,
body.page-background[style*="backgrounds/admin-"] .app-topbar,
body.page-background[style*="backgrounds/instructor-instructor-"] .app-topbar {
  background:#FFFFFF !important;
  color:#000000 !important;
}

body.page-background[style*="backgrounds/dashboard-"] .app-topbar :is(b,.small,.muted),
body.page-background[style*="backgrounds/admin-"] .app-topbar :is(b,.small,.muted),
body.page-background[style*="backgrounds/instructor-instructor-"] .app-topbar :is(b,.small,.muted) {
  color:#000000 !important;
  text-shadow:none !important;
}

/* ========== FOOTER COMPACT RESPONSIVE SPACING FIX ========== */
.site-footer {
  padding: 24px 0 12px !important;
}
.site-footer .container {
  width: min(1060px, 92%) !important;
}
.footer-grid {
  grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(130px, .7fr)) !important;
  column-gap: 28px !important;
  row-gap: 10px !important;
}
.footer-brand p {
  max-width: 320px !important;
  margin-bottom: .55rem !important;
}
.footer-bottom {
  margin-top: 12px !important;
  padding-top: 10px !important;
}

@media (max-width: 900px) {
  .site-footer .container {
    width: min(760px, 92%) !important;
  }
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px 22px !important;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 2px !important;
  }
  .footer-brand p {
    max-width: 560px !important;
  }
}

@media (max-width: 620px) {
  .site-footer {
    padding: 20px 0 10px !important;
  }
  .site-footer .container {
    width: 90% !important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 16px !important;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 0 !important;
  }
  .footer-grid > div:nth-child(4) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
  }
  .footer-grid > div:nth-child(4) h4 {
    grid-column: 1 / -1 !important;
  }
  .footer-brand p {
    max-width: 100% !important;
    margin-bottom: .45rem !important;
  }
  .footer-grid h4 {
    margin-bottom: .25rem !important;
  }
  .footer-grid a {
    margin: .1rem 0 !important;
    line-height: 1.3 !important;
  }
  .footer-bottom {
    margin-top: 10px !important;
    padding-top: 8px !important;
    gap: 2px !important;
  }
}


/* ========== FOOTER NEWSLETTER ========== */
.footer-grid {
  grid-template-columns: 1.35fr .72fr .72fr .72fr 1.45fr !important;
}
.footer-newsletter {
  min-width:0;
  animation:footerNewsletterIn .7s cubic-bezier(.22,1,.36,1) both;
}
.footer-newsletter p {
  margin:0 0 .65rem !important;
  max-width:300px;
  color:rgba(255,255,255,.72) !important;
  font-size:.82rem !important;
  line-height:1.45 !important;
}
.newsletter-form {
  width:100%;
}
.newsletter-input-wrap {
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.newsletter-input-wrap:focus-within {
  border-color:#173f67;
  box-shadow:0 0 0 3px rgba(23,60,53,.16);
  transform:translateY(-2px);
}
.newsletter-input-wrap input {
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#FFFFFF;
  padding:.62rem .65rem;
  font:inherit;
  font-size:.82rem;
}
.newsletter-input-wrap input::placeholder {
  color:rgba(255,255,255,.5);
}
.newsletter-input-wrap button {
  flex:0 0 auto;
  border:0;
  border-radius:9px;
  background:#173f67;
  color:#FFFFFF;
  padding:.65rem .78rem;
  font-weight:850;
  font-size:.78rem;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.newsletter-input-wrap button:hover {
  transform:translateY(-1px) scale(1.02);
  background:#FFFFFF;
  color:#000000;
}
.newsletter-form.is-sent .newsletter-input-wrap {
  border-color:#173f67;
  animation:newsletterSuccess .45s ease;
}
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
@keyframes footerNewsletterIn {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes newsletterSuccess {
  0% { transform:scale(1); }
  50% { transform:scale(1.015); }
  100% { transform:scale(1); }
}

@media (max-width:1050px) {
  .footer-grid {
    grid-template-columns:1.25fr 1fr 1fr 1fr !important;
  }
  .footer-newsletter {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(180px,.8fr) minmax(320px,1.5fr);
    align-items:end;
    gap:18px;
    padding-top:4px;
  }
  .footer-newsletter h4,
  .footer-newsletter p {
    grid-column:1;
  }
  .footer-newsletter h4 {
    margin-bottom:.25rem !important;
  }
  .footer-newsletter p {
    margin-bottom:0 !important;
  }
  .footer-newsletter .newsletter-form {
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
  }
}

@media (max-width:700px) {
  .site-footer {
    padding:24px 0 12px !important;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr !important;
    gap:16px 16px !important;
  }
  .footer-grid > .footer-brand,
  .footer-newsletter {
    grid-column:1 / -1 !important;
  }
  .footer-newsletter {
    display:block;
    padding-top:2px;
  }
  .footer-newsletter p {
    max-width:none;
    margin-bottom:.6rem !important;
  }
  .newsletter-input-wrap {
    width:100%;
  }
}

@media (max-width:430px) {
  .footer-grid {
    grid-template-columns:1fr 1fr !important;
    gap:14px 12px !important;
  }
  .newsletter-input-wrap {
    gap:5px;
  }
  .newsletter-input-wrap input {
    padding:.58rem .55rem;
    font-size:.78rem;
  }
  .newsletter-input-wrap button {
    padding:.6rem .65rem;
    font-size:.74rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .footer-newsletter,
  .newsletter-form.is-sent .newsletter-input-wrap {
    animation:none !important;
  }
  .newsletter-input-wrap,
  .newsletter-input-wrap button {
    transition:none !important;
  }
}


/* =========================================================
   WORKSPACE DARK MODE VISIBILITY + BORDER FIX
   Scope: Student dashboard, Admin and Instructor workspaces only
   ========================================================= */
body.dark .app-main,
body.dark .app-content {
  background:#000000 !important;
  color:#FFFFFF !important;
}

body.dark .app-topbar {
  background:#000000 !important;
  color:#FFFFFF !important;
  border-bottom:1px solid #FFFFFF !important;
}

body.dark .app-topbar :is(b,.small,.muted,span,strong) {
  color:#FFFFFF !important;
  text-shadow:none !important;
}

body.dark .app-content :is(.stat,.panel,.analytics-card,.sidebar-card,.course-card,.result-card,.exam-card,.price-card,.info-card,.table-wrap,.filter-panel,.profile-card,.resource-card) {
  background:#000000 !important;
  color:#FFFFFF !important;
  border:1px solid #FFFFFF !important;
}

body.dark .app-content :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,b,label,td,th,.muted,.small) {
  color:#FFFFFF !important;
  text-shadow:none !important;
}

body.dark .app-content :is(table,thead,tbody,tr,th,td,input,select,textarea) {
  background-color:#000000 !important;
  color:#FFFFFF !important;
  border-color:#FFFFFF !important;
}

body.dark .app-content .table th,
body.dark .app-content .table td,
body.dark .app-content .schedule-item {
  border-color:rgba(255,255,255,.45) !important;
}

body.dark .app-content :is(.badge,.eyebrow,.tag,.pill) {
  background:#173f67 !important;
  color:#FFFFFF !important;
  border-color:#173f67 !important;
}

/* =========================================================
   FINAL WORKSPACE DARK MODE OVERRIDE
   Fixes earlier high-specificity white workspace rules.
   Scope: Student Dashboard, Admin, Instructor workspaces only.
   ========================================================= */
body.dark.page-background[style*="backgrounds/dashboard-"],
body.dark.page-background[style*="backgrounds/admin-"],
body.dark.page-background[style*="backgrounds/instructor-instructor-"] {
  background:#000000 !important;
  background-image:none !important;
  color:#FFFFFF !important;
}

body.dark.page-background[style*="backgrounds/dashboard-"] :is(.app-shell,.app-main,.app-content),
body.dark.page-background[style*="backgrounds/admin-"] :is(.app-shell,.app-main,.app-content),
body.dark.page-background[style*="backgrounds/instructor-instructor-"] :is(.app-shell,.app-main,.app-content) {
  background:#000000 !important;
  background-image:none !important;
  color:#FFFFFF !important;
}

body.dark.page-background[style*="backgrounds/dashboard-"] .app-topbar,
body.dark.page-background[style*="backgrounds/admin-"] .app-topbar,
body.dark.page-background[style*="backgrounds/instructor-instructor-"] .app-topbar {
  background:#000000 !important;
  color:#FFFFFF !important;
  border-bottom-color:#FFFFFF !important;
}

body.dark.page-background[style*="backgrounds/dashboard-"] .app-content :is(.stat,.panel,.analytics-card,.course-card,.result-card,.exam-card,.sidebar-card,.profile-card,.resource-card,.table-wrap,.filter-panel,.info-card),
body.dark.page-background[style*="backgrounds/admin-"] .app-content :is(.stat,.panel,.analytics-card,.course-card,.result-card,.exam-card,.sidebar-card,.profile-card,.resource-card,.table-wrap,.filter-panel,.info-card),
body.dark.page-background[style*="backgrounds/instructor-instructor-"] .app-content :is(.stat,.panel,.analytics-card,.course-card,.result-card,.exam-card,.sidebar-card,.profile-card,.resource-card,.table-wrap,.filter-panel,.info-card) {
  background:#000000 !important;
  color:#FFFFFF !important;
  border-color:#FFFFFF !important;
}

body.dark.page-background[style*="backgrounds/dashboard-"] .app-content :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,b,label,td,th,.muted,.small),
body.dark.page-background[style*="backgrounds/admin-"] .app-content :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,b,label,td,th,.muted,.small),
body.dark.page-background[style*="backgrounds/instructor-instructor-"] .app-content :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,b,label,td,th,.muted,.small) {
  color:#FFFFFF !important;
  text-shadow:none !important;
}

body.dark.page-background[style*="backgrounds/dashboard-"] .app-content :is(table,thead,tbody,tr,th,td,input,select,textarea),
body.dark.page-background[style*="backgrounds/admin-"] .app-content :is(table,thead,tbody,tr,th,td,input,select,textarea),
body.dark.page-background[style*="backgrounds/instructor-instructor-"] .app-content :is(table,thead,tbody,tr,th,td,input,select,textarea) {
  background:#000000 !important;
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.55) !important;
}

body.dark.page-background[style*="backgrounds/dashboard-"] .app-content :is(.table th,.table td,.schedule-item),
body.dark.page-background[style*="backgrounds/admin-"] .app-content :is(.table th,.table td,.schedule-item),
body.dark.page-background[style*="backgrounds/instructor-instructor-"] .app-content :is(.table th,.table td,.schedule-item) {
  border-color:rgba(255,255,255,.42) !important;
}

body.dark.page-background[style*="backgrounds/dashboard-"] .app-content :is(.badge,.eyebrow,.tag),
body.dark.page-background[style*="backgrounds/admin-"] .app-content :is(.badge,.eyebrow,.tag),
body.dark.page-background[style*="backgrounds/instructor-instructor-"] .app-content :is(.badge,.eyebrow,.tag) {
  color:#FFFFFF !important;
}

/* === Login role buttons hover visibility fix === */
.auth-card a.btn.btn-light[href*="instructor/"],
.auth-card a.btn.btn-light[href*="admin/"] {
  background:#FFFFFF !important;
  color:#000000 !important;
  border-color:#000000 !important;
}
.auth-card a.btn.btn-light[href*="instructor/"]:hover,
.auth-card a.btn.btn-light[href*="admin/"]:hover,
body.dark .auth-card a.btn.btn-light[href*="instructor/"]:hover,
body.dark .auth-card a.btn.btn-light[href*="admin/"]:hover {
  background:#173f67 !important;
  color:#FFFFFF !important;
  border-color:#173f67 !important;
}
.auth-card a.btn.btn-light[href*="instructor/"]:focus-visible,
.auth-card a.btn.btn-light[href*="admin/"]:focus-visible {
  outline:3px solid rgba(23,60,53,.35);
  outline-offset:2px;
}

/* === Compact auth-page footer === */
.auth-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 5%;
  background:#000000;
  color:#FFFFFF;
  font-size:.82rem;
  border-top:1px solid rgba(255,255,255,.14);
}
@media (max-width:700px){
  .auth-footer{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:4px;
  }
}


/* ===== READABILITY FIXES (post color update) ===== */
.section-title,
h1.section-title,
h2.section-title {
  color: var(--ink) !important;
}
.lead,
.muted,
.small.muted,
p.muted {
  color: #475569 !important;
}
body.dark .lead,
body.dark .muted,
body.dark .small.muted {
  color: rgba(241,245,249,.75) !important;
}
.process-step h3,
.exam-card h3,
.course-body h3,
.faculty-card h3,
.result-card h3,
.price-card h3 {
  color: var(--ink) !important;
}
.process-step .num {
  color: #173f67 !important;
  opacity: 0.7;
}
.course-cover h3,
.course-cover span {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.filter-btn {
  color: #334155 !important;
}
.filter-btn.active {
  background: #173f67 !important;
  color: #FFFFFF !important;
  border-color: #173f67 !important;
}
.eyebrow {
  color: #173f67 !important;
  font-weight: 800;
}
.chip {
  background: #F3F7F4 !important;
  color: #173f67 !important;
}
/* Better card readability */
.exam-card, .course-card, .process-step, .price-card, .faculty-card, .result-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}
.course-body p,
.course-body .muted,
.exam-card .muted {
  color: #475569 !important;
}




/* ===== ULTRA-SPECIFIC CONTRAST FIX (wins over three-color system) ===== */
html body .section .section-title,
html body .section h2.section-title,
html body main .section-title {
  color: #0F172A !important;
  opacity: 1 !important;
}
html body .section .lead,
html body .section .muted,
html body .section p.muted,
html body .process-step p.muted,
html body .process-step h3,
html body .exam-card h3,
html body .exam-card p,
html body .course-card .course-body h3,
html body .course-card .course-body p,
html body .faculty-card h3,
html body .faculty-card p.muted,
html body .price-card h2,
html body .price-card p.muted,
html body .price-card li {
  color: #334155 !important;
  opacity: 1 !important;
}
html body .process-step .num {
  color: #173f67 !important;
  opacity: 0.9 !important;
}
html body .eyebrow {
  color: #173f67 !important;
  opacity: 1 !important;
}
html body .filter-btn {
  color: #1E293B !important;
}
html body .filter-btn.active {
  background: #173f67 !important;
  color: #FFFFFF !important;
}


/* =========================================================
   PROFESSIONAL DESIGN SYSTEM UPGRADE
   Clean, trustworthy, education-focused aesthetic
   ========================================================= */

:root {
  --primary: #173f67;
  --primary2: #173f67;
  --accent: #173f67;
  --ink: #0F172A;
  --muted: #64748B;
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --line: #E2E8F0;
  --shadow: 0 4px 6px -1px rgba(0,0,0,.06), 0 10px 20px -5px rgba(0,0,0,.08);
  --radius: 16px;
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* Cleaner header */
.site-header {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.brand {
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}
.brand-mark {
  border-radius: 10px !important;
  transform: none !important;
  background: #173f67 !important;
}
.navlinks a {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: #475569 !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
}
.navlinks a:hover,
.navlinks a.active {
  background: #F3F7F4 !important;
  color: #173f67 !important;
}

/* Professional buttons */
.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  padding: 0.75rem 1.25rem !important;
  transition: all 0.2s ease !important;
}
.btn-primary {
  background: #173f67 !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(30,58,138,.2) !important;
}
.btn-primary:hover {
  background: #173f67 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(30,58,138,.25) !important;
}
.btn-light {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
}
.btn-light:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

/* Section titles - refined */
.section {
  padding: 80px 0 !important;
}
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: #0F172A !important;
  margin-bottom: 0.75rem !important;
}
.eyebrow {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #173f67 !important;
}
.lead {
  font-size: 1.05rem !important;
  color: #64748B !important;
  line-height: 1.65 !important;
  max-width: 640px;
}

/* Professional cards */
.exam-card,
.course-card,
.process-step,
.price-card,
.faculty-card,
.result-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transition: all 0.25s ease !important;
}
.exam-card:hover,
.course-card:hover,
.process-step:hover,
.price-card:hover,
.faculty-card:hover {
  border-color: #DCEBE4 !important;
  box-shadow: 0 8px 24px rgba(30,58,138,.08) !important;
  transform: translateY(-3px) !important;
}

/* Process steps cleaner */
.process-step {
  padding: 28px 24px !important;
}
.process-step .num {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #173f67 !important;
  opacity: 0.9 !important;
}
.process-step h3 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 12px 0 8px !important;
}
.process-step p {
  font-size: 0.9rem !important;
  color: #64748B !important;
  line-height: 1.5 !important;
}

/* Exam goal cards */
.exam-card {
  padding: 28px 24px !important;
  text-align: left !important;
}
.exam-card h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 16px 0 8px !important;
}
.exam-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #F3F7F4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  color: #173f67 !important;
}

/* Course cards */
.course-card {
  overflow: hidden !important;
}
.course-cover {
  border-bottom: 3px solid #173f67 !important;
}
.course-body {
  padding: 20px !important;
}
.course-body h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

/* Hero refinements for professional look */
.hero-v2 {
  padding: 40px 0 60px !important;
}
.hero-v2 h1 {
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
}
.hero-kicker {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

/* Top strip cleaner */
.top-strip {
  background: #0F172A !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

/* Filter buttons */
.filter-btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #475569 !important;
}
.filter-btn.active {
  background: #173f67 !important;
  color: #FFFFFF !important;
  border-color: #173f67 !important;
}

/* Chips */
.chip {
  background: #F3F7F4 !important;
  color: #173f67 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}

/* Dark band sections */
.dark-band {
  background: #0F172A !important;
  color: #F8FAFC !important;
}
.dark-band .section-title {
  color: #FFFFFF !important;
}
.dark-band .lead,
.dark-band .muted {
  color: rgba(248,250,252,.75) !important;
}

/* Footer cleaner */
.site-footer {
  background: #0F172A !important;
  color: #94A3B8 !important;
  border-top: none !important;
}
.site-footer a {
  color: #CBD5E1 !important;
}
.site-footer a:hover {
  color: #FFFFFF !important;
}

/* Better focus states */
.btn:focus-visible,
.icon-btn:focus-visible,
a:focus-visible {
  outline: 2px solid #173f67 !important;
  outline-offset: 2px !important;
}

/* Reduce radius extremes for more professional feel */
.hero-v2 .command-frame,
.score-core,
.exam-command {
  border-radius: 16px !important;
}


/* Fix header CTA button sizes */
.nav-actions .btn {
  white-space: nowrap !important;
  padding: 0.55rem 1rem !important;
  font-size: 0.875rem !important;
  min-width: auto !important;
}
.nav-actions {
  gap: 0.4rem !important;
  flex-shrink: 0 !important;
}
.site-header .nav {
  flex-wrap: nowrap !important;
}
.navlinks {
  flex-wrap: nowrap !important;
  gap: 0.1rem !important;
}
.navlinks a {
  white-space: nowrap !important;
  font-size: 0.85rem !important;
  padding: 0.45rem 0.6rem !important;
}


/* Logo cloud / exam pills - make visible and professional */
.logo-cloud {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}
.logo-cloud .pill {
  background: #F3F7F4 !important;
  color: #173f67 !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  border: 1px solid #DCEBE4 !important;
}
.section-sm {
  padding: 32px 0 !important;
}
/* Reduce excessive empty space */
.device-lab {
  padding-bottom: 40px !important;
}


/* =========================================================
   IMAGE BOXES (replaced animated SVG / tech visuals)
   Easy to swap: just change the <img src="...">
   ========================================================= */
.visual-image-box {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.visual-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 220px;
}
.visual-image-box .visual-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15,23,42,.85);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  letter-spacing: 0.03em;
}

/* Grid for multiple image boxes */
.visual-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .visual-image-grid {
    grid-template-columns: 1fr;
  }
}

/* Hero right-side image box */
.hero-image-box {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  max-width: 480px;
  margin-inline-start: auto;
}
.hero-image-box img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}
.hero-image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 22px;
  background: linear-gradient(transparent, rgba(15,23,42,.9));
  color: #FFFFFF;
}
.hero-image-caption span {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-image-caption strong {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Page hero visual image (replaces old tech visuals) */
.page-hero .visual-image-box,
.auth-form .visual-image-box,
.auth-art .visual-image-box {
  max-width: 420px;
  margin: 0 auto;
}
.page-hero .visual-image-box img {
  min-height: 260px;
  max-height: 320px;
}

/* Showcase section */
.visual-showcase {
  background: #F8FAFC;
  padding: 70px 0;
}


/* =========================================================
   SMOOTH ANIMATIONS + DROPDOWN ALIGNMENT + OVERLAY FIXES
   ========================================================= */

/* --- Dropdown menu: better alignment + smooth open --- */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.nav-drop-trigger:hover,
.nav-drop-trigger.active,
.nav-dropdown:focus-within .nav-drop-trigger {
  background: #F3F7F4;
  color: #173f67;
}
.drop-arrow {
  font-size: 0.7rem;
  transition: transform 0.25s ease;
  display: inline-block;
}
.nav-dropdown:hover .drop-arrow,
.nav-dropdown:focus-within .drop-arrow,
.nav-dropdown.open .drop-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 1200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav-dropdown-menu a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 8px;
  color: #0F172A !important;
  background: transparent !important;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-dropdown-menu a span {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
}
.nav-dropdown-menu a small {
  display: block;
  margin-top: 2px;
  color: #64748B;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: normal;
  line-height: 1.35;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: #F3F7F4 !important;
  color: #173f67 !important;
}
.nav-dropdown-menu a:hover small,
.nav-dropdown-menu a.active small {
  color: #75AB95;
}

/* RTL dropdown alignment */
html[dir="rtl"] .nav-dropdown-menu {
  left: auto;
  right: 0;
  transform-origin: top right;
}

/* --- Text overlays: readable and aligned --- */
.hero-image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 22px 20px;
  background: linear-gradient(to top, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.55) 60%, transparent 100%);
  color: #FFFFFF;
  text-align: left;
}
.hero-image-caption span {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero-image-caption strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.exam-performance-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(to top, rgba(15,23,42,0.88) 0%, rgba(15,23,42,0.3) 50%, transparent 100%);
  color: #FFFFFF;
  border-radius: inherit;
}
.exam-performance-overlay .rank {
  display: inline-block;
  background: #173f67;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
  width: fit-content;
}
.exam-performance-overlay h3 {
  margin: 0 0 2px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFFFFF;
}
.exam-performance-overlay p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
  color: #E2E8F0;
}

.visual-image-box .visual-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15,23,42,0.88);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  letter-spacing: 0.03em;
}

/* --- Smooth animations throughout --- */
.exam-card,
.course-card,
.process-step,
.price-card,
.faculty-card,
.result-card,
.visual-image-box,
.hero-image-box,
.stat {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.exam-card:hover,
.course-card:hover,
.process-step:hover,
.price-card:hover,
.faculty-card:hover,
.result-card:hover,
.visual-image-box:hover,
.hero-image-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

.btn {
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.icon-btn {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.icon-btn:hover {
  transform: scale(1.05);
}

/* Smooth page section fade-in */
.section,
.visual-showcase {
  animation: sectionFadeIn 0.5s ease both;
}
@keyframes sectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile menu smooth */
.mobile-menu {
  transition: opacity 0.25s ease, transform 0.25s ease;
}


/* =========================================================
   BETTER CARD SIZING & READABILITY
   Instructors / Resources / Results / Pricing
   ========================================================= */
.faculty-grid,
.price-grid,
.result-grid,
.exam-performance-grid,
.course-grid {
  display: grid !important;
  gap: 20px !important;
  align-items: stretch !important;
}
@media (min-width: 900px) {
  .faculty-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .price-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .exam-performance-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .course-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .faculty-grid,
  .price-grid,
  .exam-performance-grid,
  .course-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.faculty-card,
.price-card,
.exam-performance-card,
.panel {
  padding: 22px 20px !important;
  min-height: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.faculty-card .btn,
.price-card .btn,
.panel .btn {
  margin-top: auto !important;
}
.faculty-card h3,
.price-card h2,
.panel h3 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 10px 0 6px !important;
  color: #0F172A !important;
}
.faculty-card p,
.panel p,
.price-card p,
.price-card li {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: #475569 !important;
}
.price-card .feature-list {
  margin: 12px 0 18px !important;
  padding-left: 1.1rem !important;
  flex: 1 !important;
}
.price-card .feature-list li {
  margin-bottom: 8px !important;
}
.exam-performance-card {
  overflow: hidden !important;
  padding: 0 !important;
}
.exam-performance-body {
  padding: 16px 18px 18px !important;
}
.exam-performance-body small {
  display: block !important;
  margin-top: 8px !important;
  font-size: 0.8rem !important;
  color: #64748B !important;
  line-height: 1.4 !important;
}
.panel .muted.small,
.faculty-card .muted.small {
  font-size: 0.82rem !important;
  color: #64748B !important;
}


/* Student achiever image cards */
.exam-performance-media {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  background: #E2E8F0;
}
.exam-performance-media img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.exam-performance-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
}


/* =========================================================
   REMOVE EXCESSIVE DECORATIVE ANIMATIONS
   Keep only subtle hover transitions for reliability
   ========================================================= */
.hero-marquee,
.scan-line,
.floating-tag,
.orbit-dot,
.live-pulse i,
.score-orbit:before,
.score-orbit:after {
  display: none !important;
  animation: none !important;
}
.reveal-up,
.delay-1,
.delay-2 {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
/* Keep only calm professional transitions */
.btn,
.icon-btn,
.exam-card,
.course-card,
.process-step,
.price-card,
.faculty-card,
.result-card,
.visual-image-box,
.nav-dropdown-menu,
.nav-drop-trigger,
.drop-arrow {
  /* subtle only - already defined */
}
/* Disable section entrance animations */
.section,
.visual-showcase {
  animation: none !important;
}


/* =========================================================
   OVERLAY TEXT FIXES — Light Mode + Dark Mode
   Readable text on images, dark bands, heroes, cards
   ========================================================= */

/* --- Page heroes (image backgrounds) --- */
.page-hero,
.page-hero .section-title,
.page-hero h1 {
  color: #FFFFFF !important;
}
.page-hero .eyebrow {
  color: #173f67 !important;
}
.page-hero .lead,
.page-hero .muted,
.page-hero p {
  color: rgba(255, 255, 255, 0.9) !important;
}
.page-hero .breadcrumbs {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Dark band sections --- */
.dark-band,
.dark-band .section-title,
.dark-band h2 {
  color: #FFFFFF !important;
}
.dark-band .eyebrow {
  color: #173f67 !important;
}
.dark-band .lead,
.dark-band .muted,
.dark-band p,
.dark-band li {
  color: rgba(255, 255, 255, 0.85) !important;
}
.dark-band .btn-accent,
.dark-band .btn-primary {
  color: #FFFFFF !important;
}

/* --- Hero image caption overlay --- */
.hero-image-caption {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 55%, transparent 100%) !important;
  color: #FFFFFF !important;
}
.hero-image-caption span {
  color: rgba(255, 255, 255, 0.9) !important;
}
.hero-image-caption strong {
  color: #FFFFFF !important;
}

/* --- Student / exam performance overlays --- */
.exam-performance-overlay {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.35) 55%, transparent 100%) !important;
  color: #FFFFFF !important;
}
.exam-performance-overlay .rank {
  background: #173f67 !important;
  color: #FFFFFF !important;
}
.exam-performance-overlay h3 {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.exam-performance-overlay p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* --- Course cover text on images --- */
.course-cover,
.course-cover h3,
.course-cover span {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.course-cover span {
  background: rgba(15, 23, 42, 0.75) !important;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* --- Visual image box labels --- */
.visual-image-box .visual-label {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #FFFFFF !important;
}

/* --- Auth pages left panel --- */
.auth-art,
.auth-art h1,
.auth-art .eyebrow,
.auth-art p {
  color: #FFFFFF !important;
}
.auth-art .eyebrow {
  color: #173f67 !important;
}
.auth-art p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* --- Map overlay --- */
.map-overlay {
  background: rgba(15, 23, 42, 0.85) !important;
  color: #FFFFFF !important;
}
.map-overlay * {
  color: #FFFFFF !important;
}

/* --- CTA section --- */
.cta-section,
.cta-section .section-title,
.cta-section h2,
.cta-section .eyebrow,
.cta-section p,
.cta-section .lead {
  color: #FFFFFF !important;
}
.cta-section .eyebrow {
  color: #173f67 !important;
}

/* --- Footer --- */
.site-footer {
  color: #94A3B8 !important;
}
.site-footer h4,
.site-footer a {
  color: #E2E8F0 !important;
}
.site-footer a:hover {
  color: #FFFFFF !important;
}
.site-footer .muted,
.site-footer p {
  color: #94A3B8 !important;
}

/* ========== DARK MODE overrides ========== */
body.dark .page-hero .section-title,
body.dark .page-hero h1 {
  color: #FFFFFF !important;
}
body.dark .page-hero .lead,
body.dark .page-hero p {
  color: rgba(255, 255, 255, 0.88) !important;
}
body.dark .dark-band {
  background: #020617 !important;
}
body.dark .exam-performance-overlay h3,
body.dark .exam-performance-overlay p {
  color: #FFFFFF !important;
}
body.dark .course-cover h3,
body.dark .course-cover span {
  color: #FFFFFF !important;
}
body.dark .hero-image-caption,
body.dark .hero-image-caption strong,
body.dark .hero-image-caption span {
  color: #FFFFFF !important;
}
body.dark .visual-image-box .visual-label {
  color: #FFFFFF !important;
}
body.dark .auth-art h1,
body.dark .auth-art p {
  color: #FFFFFF !important;
}
/* Dark mode: ensure light text on light cards still works */
body.dark .exam-performance-body,
body.dark .exam-performance-body small,
body.dark .exam-performance-body .performance-label {
  color: var(--ink) !important;
}
body.dark .course-body,
body.dark .course-body h3,
body.dark .course-body p,
body.dark .course-body .muted {
  color: var(--ink) !important;
}
body.dark .faculty-card h3,
body.dark .faculty-card p,
body.dark .price-card h2,
body.dark .price-card p,
body.dark .price-card li,
body.dark .panel h3,
body.dark .panel p {
  color: var(--ink) !important;
}
body.dark .section-title {
  color: var(--ink) !important;
}
body.dark .lead,
body.dark .muted {
  color: var(--muted) !important;
}
/* Dark band stays light text even in dark mode */
body.dark .dark-band .section-title,
body.dark .dark-band .lead,
body.dark .dark-band .muted,
body.dark .dark-band p {
  color: rgba(255, 255, 255, 0.9) !important;
}
body.dark .cta-section .section-title,
body.dark .cta-section h2,
body.dark .cta-section p {
  color: #FFFFFF !important;
}