/* =========================================================
   ITIExam.com – main stylesheet (mobile-first, responsive)
   ========================================================= */
:root {
  /* Palette taken from the logo: navy + royal blue gear, orange gear, green page */
  --navy: #0b2a6f;
  --navy-2: #071a4a;
  --blue: #1f4fd6;
  --blue-d: #173fb0;
  --blue-l: #3d6ff0;
  --violet: #0f3ba8;
  --orange: #f7740f;
  --amber: #fbb117;
  --green: #2aa63a;
  --ink: #0b1430;
  --text: #3b4763;
  --muted: #6b7690;
  --line: #e4e9f4;
  --bg: #f4f7fe;
  --card: #ffffff;
  --tint: #edf2ff;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(11, 20, 48, .04), 0 6px 20px rgba(31, 79, 214, .07);
  --shadow-h: 0 2px 4px rgba(11, 20, 48, .05), 0 16px 36px rgba(31, 79, 214, .16);
  --ease: cubic-bezier(.22, .8, .32, 1);
  /* Type: Inter for reading, Poppins for headings and buttons */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Open Sans", Arial, sans-serif;
  --font-head: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat", "Segoe Script", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 100% 0, #e6efff 0, transparent 65%),
    radial-gradient(900px 520px at 0 45%, #f1ecff 0, transparent 60%),
    radial-gradient(900px 520px at 100% 85%, #e9fbf5 0, transparent 60%),
    var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { letter-spacing: -.3px; }
::selection { background: #bfdbfe; color: var(--ink); }
h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--blue); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 999; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* ---------- colour chips ---------- */
.c-blue   { --c: var(--blue); } .c-green { --c: #16a34a; } .c-orange { --c: #f97316; }
.c-purple { --c: #7c3aed; } .c-red   { --c: #e11d48; } .c-teal   { --c: #0d9488; }
.c-navy   { --c: #0b2a6f; } .c-pink  { --c: #ec4899; } .c-yellow { --c: #f59e0b; }
.c-indigo { --c: #4f46e5; } .c-cyan  { --c: #0891b2; }

/* =================== HEADER =================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  box-shadow: 0 1px 0 var(--line), 0 4px 14px rgba(15, 42, 111, .05);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo-mark { width: 42px; height: 36px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text strong { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; }
.logo-text strong span { color: var(--navy); }
.logo-text small { font-size: 10px; color: var(--muted); font-weight: 500; }
.logo.light strong, .logo.light strong span { color: #fff; }
.logo.light small { color: #cbd5e1; }

.nav-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: transparent; color: var(--ink); border-radius: 10px; font-size: 22px; }
.icon-btn:hover { background: #eef4ff; }

/* mobile nav (off-canvas) */
.main-nav {
  position: fixed; inset: 64px 0 0 0;
  background: #fff;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s ease;
  padding: 8px 16px 40px;
}
.main-nav.open { transform: none; }
.main-nav > ul > li { border-bottom: 1px solid var(--line); }
.main-nav a, .main-nav button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 13px 6px; background: none; border: 0; color: var(--ink); font-size: 15px; font-weight: 500; text-align: left;
}
.main-nav a.active { color: var(--blue); }
.main-nav .dd { display: none; padding: 0 0 8px 12px; }
.main-nav .has-dd.open .dd { display: block; }
.main-nav .has-dd.open > button .ic { transform: rotate(180deg); }
.main-nav .dd a { padding: 9px 6px; font-size: 14px; color: var(--text); font-weight: 400; }
body.nav-open { overflow: hidden; }

@media (min-width: 1280px) {
  .menu-toggle { display: none; }
  .main-nav { position: static; transform: none; padding: 0; overflow: visible; background: none; }
  .main-nav > ul { display: flex; align-items: center; gap: 0; }
  .main-nav button .ic { font-size: 12px; }
  .main-nav .has-dd:nth-last-child(-n+3) .dd { left: auto; right: 0; }
  .main-nav > ul > li { border: 0; position: relative; }
  .main-nav a, .main-nav button { padding: 8px 6px; font-size: 12.5px; width: auto; gap: 2px; border-radius: 8px; white-space: nowrap; }
  .main-nav > ul > li > a.active { background: var(--blue); color: #fff; padding: 8px 14px; margin-right: 4px; }
  .main-nav > ul > li > a:hover, .main-nav button:hover { color: var(--blue); }
  .main-nav .dd {
    display: block; position: absolute; top: 100%; left: 0; min-width: 220px;
    background: #fff; border-radius: 12px; box-shadow: var(--shadow-h); padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s;
  }
  .main-nav .has-dd:hover .dd, .main-nav .has-dd:focus-within .dd, .main-nav .has-dd.open .dd { opacity: 1; visibility: visible; transform: none; }
  .main-nav .dd a { padding: 9px 12px; border-radius: 8px; width: 100%; }
  .main-nav .dd a:hover { background: #eef4ff; color: var(--blue); }
}

/* =================== HERO =================== */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 75% 30%, rgba(59, 130, 246, .45), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(37, 99, 235, .35), transparent 40%),
    linear-gradient(120deg, #06163f 0%, #0b2a6f 55%, #0a3a9e 100%);
  color: #e2e8f0;
  padding: 36px 0 40px;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 28px; }
.hero-grid > * { min-width: 0; }
.hero h1 { color: #fff; font-size: clamp(32px, 7vw, 58px); font-weight: 800; letter-spacing: -.5px; }
.hero .h1-sm { display: block; font-size: .55em; font-weight: 700; margin-bottom: 4px; }
.grad { background: linear-gradient(90deg, #60a5fa, #3b82f6 50%, #93c5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: 14px; font-size: clamp(15px, 2.4vw, 18px); color: #dbeafe; max-width: 620px; }
.lead strong { color: #fff; font-weight: 600; }

.search {
  margin-top: 22px; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 12px; padding: 6px 6px 6px 14px; max-width: 640px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.search > .ic { color: var(--ink); font-size: 20px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 14px; color: var(--ink); padding: 10px 2px; background: none; }
.search button { display: flex; align-items: center; gap: 6px; border: 0; background: var(--blue); color: #fff; padding: 11px 18px; border-radius: 9px; font-weight: 600; }
.search button { flex-shrink: 0; }
@media (max-width: 420px) { .search button span { display: none; } .search button { padding: 11px 13px; } }
.search button:hover { background: var(--blue-d); }
.search button .ic { font-size: 18px; }

.hero-stats { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
.hero-stats a { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; border-radius: 12px; transition: transform .2s; }
.hero-stats a:hover { transform: translateY(-2px); }
.hero-stats .si { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--c); color: #fff; font-size: 20px; }
.hero-stats b { color: #fff; font-size: 15px; line-height: 1.1; }
.hero-stats small { font-size: 11px; color: #cbd5e1; }

.hero-art { display: none; }
.quick-links { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.quick-links a {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--ink); border-radius: 12px; padding: 10px 14px 10px 10px;
  transition: transform .2s, box-shadow .2s;
}
.quick-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }
.quick-links .qi { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--c); color: #fff; font-size: 18px; flex-shrink: 0; }
.quick-links b { display: block; font-size: 13px; }
.quick-links small { display: block; font-size: 11px; color: var(--muted); }

@media (min-width: 640px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .hero { padding: 44px 0 48px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 300px 230px; align-items: center; }
  .hero-stats { grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px 30px; }
  .hero-stats a { grid-template-columns: 38px auto; }
  .hero-art { display: block; position: relative; height: 380px; }
  .quick-links { flex-direction: column; overflow: visible; background: #fff; border-radius: 14px; padding: 10px; gap: 2px; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); }
  .quick-links a { padding: 8px; border-radius: 10px; }
  .quick-links a:hover { transform: none; box-shadow: none; background: #eef4ff; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 230px; }
  .hero-art { display: none; }
}

/* hero illustration (pure CSS) */
.quote { position: absolute; top: 0; right: 0; z-index: 2; font-family: var(--hand); font-size: 30px; line-height: 1.05; color: #fff; transform: rotate(-8deg); text-align: center; }
.art-circle { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 270px; height: 270px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3b82f6, #1e40af 70%); box-shadow: 0 0 0 14px rgba(59, 130, 246, .18), 0 0 0 30px rgba(59, 130, 246, .08); }
.art-book { position: absolute; left: 50%; top: 50%; width: 120px; height: 150px; transform: translate(-50%, -50%) rotate(-6deg);
  border-radius: 6px 14px 14px 6px; background: linear-gradient(135deg, #f8fafc, #cbd5e1); box-shadow: -8px 0 0 var(--blue-d) inset, 0 18px 30px rgba(0, 0, 0, .35);
  display: grid; place-items: center; animation: float 4s ease-in-out infinite; }
.art-book span { font-size: 42px; font-weight: 800; color: var(--blue); }
.art-badge { position: absolute; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; box-shadow: var(--shadow-h); animation: float 5s ease-in-out infinite; }
.b1 { top: 22px; left: -20px; } .b2 { bottom: 30px; right: -16px; animation-delay: 1.2s; }
.art-thumb { position: absolute; bottom: 70px; left: 6px; font-size: 44px; animation: float 3.5s ease-in-out infinite .6s; }
@keyframes float { 50% { translate: 0 -8px; } }

/* =================== SECTIONS =================== */
.section { padding: 32px 0; }
.section.pt0 { padding-top: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sec-head h2 { font-size: clamp(20px, 3.2vw, 24px); font-weight: 700; position: relative; padding-bottom: 6px; }
.sec-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), #7c3aed); }
.sec-head.sm h2 { font-size: 20px; }
.view-all { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-size: 13px; font-weight: 600; white-space: nowrap; }
.view-all:hover { text-decoration: underline; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; border: 1px solid rgba(15, 42, 111, .06); }

/* trades */
.trades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.trade {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 10px 46px; border-radius: var(--radius); background: var(--tbg, #eef4ff);
  border: 1px solid rgba(15, 42, 111, .06); transition: transform .2s, box-shadow .2s;
}
.trade:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.trade .emo { font-size: 52px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .15)); }
.trade h3 { font-size: 16px; font-weight: 700; }
.trade p { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.trade .go, .job .go {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 14px;
}
.t1 { --tbg: #f5f0ff; } .t2 { --tbg: #fff8e6; } .t3 { --tbg: #eef4ff; } .t4 { --tbg: #f1f5f9; }
.t5 { --tbg: #fff1f2; } .t6 { --tbg: #f0f9ff; } .t7 { --tbg: #ecfeff; } .t8 { --tbg: #fff7ed; }
@media (min-width: 560px) { .trades { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .trades { grid-template-columns: repeat(8, 1fr); } }

/* column layouts */
.cols-3, .cols-2-1 { display: grid; gap: 20px; }
@media (min-width: 768px) { .cols-3 { grid-template-columns: repeat(2, 1fr); } .cols-3 > :last-child { grid-column: span 2; } }
@media (min-width: 1100px) {
  .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-3 > :last-child { grid-column: auto; }
  .cols-2-1 { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}

/* list rows */
.rows li + li { border-top: 1px solid var(--line); }
.rows a { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-radius: 10px; transition: background .2s; }
.rows a:hover { background: #f5f8ff; }
.ri { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); font-size: 22px; }
.rt { flex: 1; min-width: 0; }
.rt b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.rt small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.rt small .ic { font-size: 13px; }
.new { font-style: normal; background: #16a34a; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 4px; }
.chev { font-size: 16px; color: var(--blue); background: #eef4ff; border-radius: 50%; padding: 5px; width: 26px; height: 26px; }

/* study material */
.study { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.st { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 10px; text-align: center; transition: transform .2s, box-shadow .2s; }
.st:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.sti { width: 52px; height: 52px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 12px; background: var(--c); color: #fff; font-size: 26px; }
.st h3 { font-size: 13.5px; font-weight: 700; }
.st p { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
@media (min-width: 560px) { .study { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .study { grid-template-columns: repeat(6, 1fr); } }

/* exam update dates */
.date { width: 44px; flex-shrink: 0; text-align: center; border-radius: 8px; padding: 4px 0; font-size: 10px; font-weight: 600; line-height: 1.1; color: var(--dc); background: color-mix(in srgb, var(--dc) 12%, #fff); }
.date b { display: block; font-size: 18px; }
.d-blue { --dc: var(--blue); } .d-red { --dc: #e11d48; } .d-orange { --dc: #ea580c; } .d-teal { --dc: #0d9488; }

/* jobs */
.jobs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.job { position: relative; display: flex; gap: 12px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 50px; transition: transform .2s, box-shadow .2s; }
.job:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.jl { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; font-size: 14px; }
.job h3 { font-size: 15px; font-weight: 700; }
.job .role { font-size: 13px; color: var(--text); }
.job .muted { font-size: 12px; color: var(--muted); margin-top: 4px; }
.job .last { font-size: 12px; color: var(--ink); font-weight: 500; margin-top: 6px; }
@media (min-width: 560px) { .jobs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .jobs { grid-template-columns: repeat(3, 1fr); } .job { flex-direction: column; } }

/* articles */
.thumb { width: 64px; height: 50px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; font-size: 24px; }
.th1 { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } .th2 { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.th3 { background: linear-gradient(135deg, #fef3c7, #fde68a); } .th4 { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }

/* seo text & faq */
.seo-text h2, .faq h2 { font-size: 20px; margin-bottom: 12px; }
.seo-text p + p { margin-top: 10px; }
.seo-text strong { color: var(--ink); font-weight: 600; }
.faq details { border-top: 1px solid var(--line); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { font-size: 13.5px; margin-top: 6px; }

/* =================== CTA =================== */
.cta { background: linear-gradient(90deg, #eaf1ff, #f3edff 60%, #eaf1ff); padding: 26px 0; margin-top: 8px; }
.cta-grid { display: grid; gap: 18px; align-items: center; text-align: center; }
.cta-art { font-size: 64px; line-height: 1; }
.cta h2 { font-size: clamp(19px, 3vw, 23px); color: var(--navy); }
.cta p { margin-top: 6px; font-size: 14px; }
.rocket { display: none; font-size: 48px; }
.cta-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cta-stats li { color: #fff; border-radius: 12px; padding: 12px 10px; text-align: center; box-shadow: var(--shadow); }
.cta-stats b { display: block; font-size: 20px; font-weight: 800; }
.cta-stats small { font-size: 11px; }
.s-blue { background: var(--blue); } .s-green { background: #16a34a; } .s-orange { background: #f97316; } .s-purple { background: #7c3aed; }
@media (min-width: 640px) { .cta-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) {
  .cta-grid { grid-template-columns: 90px minmax(0, 1fr) 60px auto; text-align: left; }
  .rocket { display: block; animation: float 3s ease-in-out infinite; }
  .cta-stats li { min-width: 110px; }
}

/* =================== FOOTER =================== */
.site-footer { background: linear-gradient(160deg, #061433, #0b2a6f); color: #cbd5e1; padding: 40px 0 0; font-size: 14px; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); }
.foot-brand { grid-column: 1 / -1; }
.foot-brand p { margin-top: 14px; max-width: 340px; font-size: 13.5px; }
.site-footer h3 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.site-footer nav li { margin: 3px 0; }
.site-footer nav a:hover { color: #fff; text-decoration: underline; }
.social { display: flex; gap: 12px; margin-top: 18px; }
.social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 20px; transition: transform .2s; }
.social a:hover { transform: translateY(-3px); }
.yt { background: #ff0000; } .fb { background: #1877f2; } .tg { background: #229ed9; } .wa { background: #25d366; }
.foot-quote { display: none; font-family: var(--hand); color: #fff; font-size: 30px; line-height: 1.15; transform: rotate(-6deg); align-self: center; }
.foot-bottom { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; margin-top: 32px; padding: 18px 16px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.foot-bottom ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.foot-bottom a:hover { color: #fff; }
@media (min-width: 768px) {
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-bottom { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 1100px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; }
  .foot-brand { grid-column: auto; }
  .foot-quote { display: block; }
}

/* back to top */
.to-top { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 20px; box-shadow: var(--shadow-h); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
.to-top .ic { transform: rotate(180deg); }
.to-top.show { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Trade page, trades list, custom pages
   ========================================================= */
.main-nav .has-dd.is-active > button { color: var(--blue); }
@media (min-width: 1280px) { .main-nav .has-dd.is-active > button { background: #eef4ff; } }
.trade .timg { width: 64px; height: 64px; object-fit: contain; margin-bottom: 10px; }
.trade h2 { font-size: 16px; font-weight: 700; }

.btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; white-space: nowrap; transition: background .2s; }
a:hover .btn-sm, .btn-sm:hover { background: var(--blue-d); }
.btn-sm.big { padding: 12px 20px; font-size: 14px; }
.btn-sm.ghost { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); }

/* hero */
.thero { padding: 18px 0 30px; }
.thero.slim { padding: 22px 0 34px; }
.thero.slim h1 { font-size: clamp(28px, 5vw, 42px); }
.thero.nf { padding: 60px 0; text-align: center; }
.thero.nf p { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: #cbd5e1; margin-bottom: 14px; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs .ic { font-size: 12px; }
.crumbs span { color: #fff; }
.tbadge { display: inline-block; background: #14b8a6; color: #fff; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 6px; }
.thero h1 { margin-top: 10px; }
.tname { display: block; font-size: clamp(44px, 10vw, 84px); font-weight: 800; line-height: 1; letter-spacing: -1px; }
.tname.long { font-size: clamp(36px, 6.5vw, 60px); }
.tfull { display: block; font-size: clamp(18px, 3vw, 27px); font-weight: 600; margin-top: 8px; }
.tstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.tstats li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tstats .si { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--c); color: #fff; font-size: 21px; }
.tstats small { display: block; font-size: 12px; color: #cbd5e1; }
.tstats b { display: block; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.25; }
.tart { display: none; position: relative; }
.tart img { width: 100%; height: auto; max-height: 340px; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }
.tart .art-circle { position: relative; display: grid; place-items: center; margin: 0 auto; width: 240px; height: 240px; }
.tart-emo { font-size: 110px; line-height: 1; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); animation: float 4s ease-in-out infinite; }
.qcard { background: #fff; color: var(--ink); border-radius: 14px; padding: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); }
.qcard h2 { font-size: 18px; margin: 0 0 6px 4px; }
.qcard ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; }
.qcard a { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; font-size: 13.5px; font-weight: 500; }
.qcard a:hover { background: #eef4ff; }
.qcard .qi { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); font-size: 16px; }
.qcard .qchev { margin-left: auto; color: var(--blue); font-size: 15px; }
@media (min-width: 640px) { .tstats { display: flex; flex-wrap: wrap; gap: 16px 26px; } .tstats li { flex: 0 0 auto; } .tstats small, .tstats b { white-space: nowrap; } }
@media (min-width: 1024px) {
  .thero .hero-grid { grid-template-columns: minmax(0, 1fr) 270px; align-items: center; }
  .qcard ul { grid-template-columns: 1fr; }
}
@media (min-width: 1200px) {
  .thero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px) 270px; }
  .tart { display: block; }
}

/* tabs bar */
.trade-tabs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 40; background: #fff; box-shadow: 0 4px 16px rgba(15, 42, 111, .08); }
.trade-tabs ul { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.trade-tabs ul::-webkit-scrollbar { display: none; }
.trade-tabs a { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.trade-tabs a .ic { font-size: 17px; color: var(--blue); }
.trade-tabs a:hover { background: #eef4ff; }
.trade-tabs a.on { background: var(--blue); color: #fff; }
.trade-tabs a.on .ic { color: #fff; }
.tsec { scroll-margin-top: 140px; }

/* layout */
.tlayout { display: grid; gap: 20px; padding-top: 22px; padding-bottom: 10px; }
.tmain { display: grid; gap: 20px; min-width: 0; align-content: start; }
.tmenu { display: none; }
@media (min-width: 1100px) {
  .tlayout { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  .tmenu { display: block; position: sticky; top: 140px; padding: 14px 10px; }
}
.tmenu h2 { font-size: 19px; padding: 4px 8px 10px; }
.tmenu a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; font-size: 14px; color: var(--ink); }
.tmenu a + a, .tmenu li + li { border-top: 1px solid var(--line); }
.tmenu a:hover { background: #f5f8ff; }
.tmenu a.on { background: #eef4ff; color: var(--blue); font-weight: 600; }
.tmenu .ri { width: 32px; height: 32px; font-size: 17px; border-radius: 8px; }
.tmenu .mchev { margin-left: auto; font-size: 15px; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 10px; text-align: center; transition: transform .2s, box-shadow .2s; }
a.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.tile:nth-child(6n+1) { background: #effcf5; } .tile:nth-child(6n+2) { background: #f3f0ff; } .tile:nth-child(6n+3) { background: #fff8eb; }
.tile:nth-child(6n+4) { background: #fff1f2; } .tile:nth-child(6n+5) { background: #eff6ff; } .tile:nth-child(6n+6) { background: #ecfeff; }
.tile h3 { font-size: 14px; font-weight: 700; }
.tile p { font-size: 12px; color: var(--muted); margin-top: 3px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.trow { display: grid; gap: 20px; align-items: start; }
@media (min-width: 768px) { .trow.n2, .trow.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trow.n3 > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .trow.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trow.n3 > :last-child { grid-column: auto; } }

.rows .ri.solid { background: var(--c); color: #fff; }
.rows .row-mock .btn-sm { margin-left: auto; }
.num { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; font-weight: 700; font-size: 14px; }
.year { flex-shrink: 0; min-width: 62px; text-align: center; padding: 6px 8px; border-radius: 8px; background: #eef4ff; color: var(--blue); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.rows .row-num, .rows .row-year { padding-block: 8px; }
.rows div[class^="row-"] { display: flex; align-items: center; gap: 12px; padding: 11px 2px; }

.empty { text-align: center; padding: 34px 18px; }
.empty h2 { font-size: 20px; margin-bottom: 6px; }

.prose { font-size: 15px; line-height: 1.75; }
.prose h2 { font-size: 22px; margin-bottom: 12px; }
.prose h3 { font-size: 18px; margin: 18px 0 8px; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 12px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose a { color: var(--blue); text-decoration: underline; }
.prose strong { color: var(--ink); }
.prose img { border-radius: 10px; height: auto; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.page-body { max-width: 860px; }
.updated { font-size: 13px; color: var(--muted); margin-top: 18px !important; }

/* related trades carousel */
.related { padding-top: 14px; }
.carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.ctrack { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; flex: 1; min-width: 0; }
.ctrack::-webkit-scrollbar { display: none; }
.rtrade { flex: 0 0 112px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); text-align: center; font-size: 12.5px; color: var(--ink); transition: transform .2s; }
.rtrade:hover { transform: translateY(-3px); }
.rtrade .emo { font-size: 36px; line-height: 1; }
.rtrade img { width: 48px; height: 48px; object-fit: contain; }
.cbtn { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 18px; box-shadow: var(--shadow); }
.cbtn:hover { color: var(--blue); }
@media (max-width: 560px) { .cbtn { display: none; } }

/* =========================================================
   Jobs
   ========================================================= */
.grad-y { background: linear-gradient(90deg, #fbbf24, #f59e0b 60%, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted-row { padding: 14px 4px; color: var(--muted); font-size: 13.5px; }
.h-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #eef4ff; color: var(--blue); font-size: 17px; margin-right: 8px; vertical-align: -6px; }
.side-h { font-size: 18px; margin-bottom: 10px; display: flex; align-items: center; }

/* logos */
.jl { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; background: var(--c, var(--blue)); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .3px; box-shadow: 0 6px 14px color-mix(in srgb, var(--c, var(--blue)) 30%, transparent); }
.jl.img, .elogo.img { background: #fff; border: 1px solid var(--line); box-shadow: none; padding: 6px; }
.jl img, .elogo img { width: 100%; height: 100%; object-fit: contain; }
.jl.big { width: 76px; height: 76px; font-size: 17px; border-radius: 18px; }
.jl.sm { width: 40px; height: 40px; font-size: 11px; border-radius: 10px; }

/* hero */
.jhero { padding-bottom: 34px; }
.jhero h1 { font-size: clamp(34px, 6.5vw, 54px); }
.jcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 22px; }
.jcats a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #e2e8f0; font-size: 12.5px; font-weight: 500; padding: 8px 4px; border-radius: 12px; transition: background .2s; }
.jcats a:hover, .jcats a.on { background: rgba(255, 255, 255, .1); color: #fff; }
.jcats .si { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--c); color: #fff; font-size: 24px; box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
.hero-art .tart-emo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 120px; }
@media (min-width: 1024px) { .jhero .hero-grid { grid-template-columns: minmax(0, 1fr) 260px; } .jcats { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .jhero .hero-grid { grid-template-columns: minmax(0, 1fr) 300px 260px; } }

/* stats */
.jstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: -18px; position: relative; z-index: 2; }
.jstat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); border: 1px solid rgba(15, 42, 111, .06); transition: transform .2s, box-shadow .2s; }
.jstat:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.jstat .si { grid-row: span 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); font-size: 23px; }
.jstat b { font-size: 21px; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.jstat small { font-size: 12px; color: var(--muted); }
.jstat:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .jstats { grid-template-columns: repeat(5, 1fr); } .jstat:last-child { grid-column: auto; } }

/* layout */
.jlayout { display: grid; gap: 20px; padding-top: 22px; padding-bottom: 10px; align-items: start; }
.jlayout > * { min-width: 0; }
.jside { display: grid; gap: 20px; }
@media (min-width: 900px) { .jlayout { grid-template-columns: minmax(0, 1fr) 270px; } .jfilter { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .jlayout { grid-template-columns: 250px minmax(0, 1fr) 270px; } .jfilter { grid-column: auto; position: sticky; top: 80px; } }

/* filters */
.jfilter { padding: 0; overflow: hidden; }
.jfilter summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; cursor: pointer; border-bottom: 1px solid var(--line); }
.jfilter summary::-webkit-details-marker { display: none; }
.jfilter summary h2 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.jfilter summary h2 .ic { color: var(--blue); }
.ftoggle { font-size: 12.5px; color: var(--blue); font-weight: 600; }
details[open] .ftoggle { font-size: 0; }
details[open] .ftoggle::after { content: "Hide"; font-size: 12.5px; }
.jfilter form { padding: 6px 18px 18px; display: grid; gap: 4px; }
.jfilter fieldset { border: 0; padding: 0; margin: 10px 0 4px; display: grid; gap: 2px; }
.jfilter legend, .jfilter .fl { font-weight: 600; color: var(--ink); font-size: 14px; margin: 10px 0 6px; padding: 0; }
.ck { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 3px 0; cursor: pointer; }
.ck input { width: 16px; height: 16px; accent-color: var(--blue); }
.jfilter select, .sortf select { width: 100%; font: inherit; font-size: 13.5px; color: var(--ink); padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; }
.btn-full { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font: 600 14px var(--font); cursor: pointer; }
.btn-full:hover { background: var(--blue-d); }
.btn-full.ghost { background: #fff; color: var(--blue); border: 1px solid #bfdbfe; margin-top: 6px; }
.btn-full.ghost:hover { background: #eef4ff; }
@media (min-width: 1200px) { .jfilter summary { cursor: default; pointer-events: none; } .ftoggle { display: none; } }

/* list */
.jlist-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.jlist-head h2 { font-size: 20px; display: flex; align-items: center; }
.sortf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.sortf small { width: 100%; text-align: right; color: var(--muted); }
.sortf select { width: auto; }
.qinfo { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.qinfo a { color: var(--blue); }
.job-list { display: grid; gap: 12px; }
.jcard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.jcard:hover { border-color: #bfdbfe; box-shadow: var(--shadow-h); transform: translateY(-2px); }
.jcard.expired { opacity: .7; }
.jbody { min-width: 0; }
.jco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--ink); }
.jcard h3 { font-size: 15.5px; margin-top: 3px; }
.jcard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.jmeta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.jmeta span { display: inline-flex; align-items: center; gap: 5px; }
.jcard .last { font-size: 12.5px; margin-top: 6px; color: var(--text); }
.jcard .last b { color: var(--ink); }
.btn-out { grid-column: 1 / -1; justify-self: start; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; border: 1.5px solid var(--blue); color: var(--blue); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.btn-out:hover { background: var(--blue); color: #fff; }
@media (min-width: 640px) { .jcard { grid-template-columns: auto minmax(0, 1fr) auto; } .btn-out { grid-column: auto; } }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; color: #fff; background: var(--blue); }
.tag.t-government { background: #0284c7; } .tag.t-private { background: #6366f1; } .tag.t-campus { background: #16a34a; } .tag.t-walk-in { background: #ea580c; }
.tag.t-apprentice { background: #0d9488; } .tag.t-contract { background: #64748b; } .tag.t-fresher { background: #db2777; }
.tag.new { background: #ef4444; } .tag.off { background: #94a3b8; }
.empty h3 { font-size: 18px; margin-bottom: 6px; }
.empty a:not(.btn-sm) { color: var(--blue); text-decoration: underline; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.pager a { display: inline-flex; align-items: center; gap: 4px; min-width: 38px; justify-content: center; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--ink); background: #fff; }
.pager a:hover { border-color: var(--blue); color: var(--blue); }
.pager a.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* sidebar lists */
.clist li + li { border-top: 1px solid var(--line); }
.clist a { display: flex; align-items: center; gap: 6px; padding: 9px 2px; font-size: 13.5px; color: var(--ink); }
.clist a .ic { font-size: 13px; color: var(--muted); }
.clist a:hover, .clist a.on { color: var(--blue); }
.clist em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--blue); background: #eef4ff; padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }

/* employers */
.emp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.emp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 12px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink); transition: border-color .2s, transform .2s; }
.emp:hover { border-color: #bfdbfe; transform: translateY(-2px); }
.elogo { width: 56px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--c, var(--blue)); color: #fff; font-weight: 800; font-size: 13px; }

/* job detail */
.jdhero { padding-bottom: 34px; }
.jd-head { display: flex; gap: 18px; align-items: flex-start; }
.jd-head .jl { background: var(--c, #fff); }
.jd-head .jl.img { background: #fff; }
.jd-tags { display: flex; gap: 6px; margin-bottom: 8px; }
.jdhero h1 { font-size: clamp(24px, 4.2vw, 38px); }
.jd-co { display: block; font-size: .62em; color: #bfdbfe; font-weight: 600; margin-bottom: 4px; }
.jd-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.jd-closed { margin-top: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); padding: 10px 14px; border-radius: 10px; color: #fff; }
.jd-closed a { text-decoration: underline; }
.jd-layout { display: grid; gap: 20px; padding-top: 24px; padding-bottom: 10px; align-items: start; }
.jd-main, .jd-side { display: grid; gap: 20px; min-width: 0; }
@media (min-width: 1000px) { .jd-layout { grid-template-columns: minmax(0, 1fr) 320px; } .jd-side { position: sticky; top: 80px; } }
@media (max-width: 560px) { .jd-head { flex-direction: column; } }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 0; }
.facts div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: #f8faff; border: 1px solid var(--line); }
.facts .ri { grid-row: span 2; width: 40px; height: 40px; font-size: 19px; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.35; }
.apply-card { background: linear-gradient(135deg, var(--blue-d), #7c3aed); color: #e0e7ff; border: 0; }
.apply-card h2 { color: #fff; font-size: 19px; margin-bottom: 4px; }
.apply-card b { color: #fff; }
.apply-card .btn-full { background: #fff; color: var(--blue); }
.apply-card .btn-full:hover { background: #eef4ff; }
.jd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jd-share p { width: 100%; font-size: 14px; }
.sh { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; color: #fff; font-size: 13.5px; font-weight: 600; }
.sh.wa { background: #25d366; } .sh.tg { background: #229ed9; } .sh.fb { background: #1877f2; }
.sh:hover { filter: brightness(.94); }
.disclaimer { font-size: 12.5px; color: var(--muted); padding: 0 4px; }
.jd-side .view-all { margin-top: 10px; }

/* posts & search */
.post-meta { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #cbd5e1; font-size: 14px; }
.post-layout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .post-layout { grid-template-columns: minmax(0, 1fr) 330px; } }
.prose .cover { width: 100%; border-radius: 12px; margin-bottom: 16px; }
.prose .trades.sc, .prose .job-list.sc { margin: 14px 0 20px; }
.prose .rows.sc { padding: 0; list-style: none; margin: 10px 0 18px; }
.prose .rows.sc a, .prose .trades.sc a, .prose .job-list.sc a { text-decoration: none; }
.trades.sc .trade { padding: 16px 8px 46px; }
.trades.sc .emo { font-size: 40px; }
.tt { font-size: 15px; color: var(--ink); }
.search-res { display: grid; gap: 14px; }
.res-h { font-size: 19px; margin-top: 8px; }
img.thumb { object-fit: cover; }

/* jobs: phone tweaks */
@media (max-width: 1023px) {
  .jhero .qcard { display: none; }
  .jcats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .jcats a { font-size: 11px; padding: 6px 2px; }
  .jcats .si { width: 44px; height: 44px; font-size: 20px; }
  .jstats { margin-top: 16px; }
}
@media (max-width: 767px) {
  .jstat:last-child { display: none; }
  .jstat { padding: 12px; }
  .jstat .si { width: 40px; height: 40px; font-size: 20px; }
  .jcard { align-items: start; padding: 14px; }
  .jcard .jl { width: 44px; height: 44px; font-size: 11px; border-radius: 12px; }
}

/* =========================================================
   Ads – space is reserved so the page does not jump when an ad loads
   ========================================================= */
.ad-box { margin: 20px 0; text-align: center; min-height: 120px; }
.ad-box.wide { margin: 8px 0 24px; min-height: 100px; }
.ad-box.side { margin: 0; min-height: 250px; background: #fff; border-radius: var(--radius); padding: 8px; border: 1px solid rgba(15, 42, 111, .06); }
.ad-box.in-content { margin: 18px 0; }
.ad-label { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tmain > .ad-box, .job-list > .ad-box, .jd-main > .ad-box { margin: 0; }
.post-side { display: grid; gap: 20px; align-content: start; }
/* Hide the reserved space when Google has no ad to show */
.ad-box:has(ins[data-ad-status="unfilled"]) { display: none; }

/* =========================================================
   UI v2 – typography, colour, motion and mobile app feel
   ========================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
.site-header { view-transition-name: site-header; }
.bnav { view-transition-name: bottom-nav; }

html { -webkit-tap-highlight-color: transparent; overflow-x: clip; }
body { font-size: 15.5px; line-height: 1.6; color: var(--text); text-rendering: optimizeLegibility; }
h1, h2, h3, .logo-text strong, .btn-sm, .btn-full, .btn-out, .search button, .tag, .view-all,
.hero-stats b, .jstat b, .cta-stats b, .main-nav > ul > li > a, .main-nav button, .trade-tabs a, .tname, .tfull, .year, .num { font-family: var(--font-head); }
h1, h2 { letter-spacing: -.02em; text-wrap: balance; }
h3 { letter-spacing: -.01em; }
p, li { text-wrap: pretty; }
a, button { transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 45%, #fff); outline-offset: 2px; border-radius: 8px; }
::selection { background: color-mix(in srgb, var(--blue) 22%, #fff); }

/* background */
body {
  background:
    radial-gradient(900px 480px at 105% -5%, #e3ebff 0, transparent 60%),
    radial-gradient(800px 480px at -10% 40%, #efe9ff 0, transparent 60%),
    radial-gradient(800px 480px at 110% 90%, #e5faf3 0, transparent 60%),
    var(--bg);
}

/* header: frosted glass, shadow after scroll */
/* The blur sits on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile menu inside it */
.site-header { background: transparent; box-shadow: 0 1px 0 rgba(11, 20, 48, .06); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
.site-header.scrolled { box-shadow: 0 1px 0 rgba(11, 20, 48, .06), 0 8px 24px rgba(11, 20, 48, .08); }
.logo-text strong { letter-spacing: -.02em; }
.logo-text strong span { background: linear-gradient(90deg, var(--blue), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo.light strong span { background: linear-gradient(90deg, #8fb0ff, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.icon-btn:active { transform: scale(.92); }
@media (min-width: 1280px) {
  .main-nav > ul > li > a.active { background: linear-gradient(135deg, var(--blue), var(--blue-d)); box-shadow: 0 6px 14px rgba(31, 79, 214, .3); }
  .main-nav .dd { border: 1px solid var(--line); }
}

/* mobile drawer */
@media (max-width: 1279px) {
  .main-nav { inset: 64px 0 0 auto; width: min(86vw, 360px); border-radius: 20px 0 0 0; box-shadow: -20px 0 40px rgba(11, 20, 48, .18); transition: transform .32s var(--ease), visibility 0s linear .32s; padding-bottom: 96px; visibility: hidden; }
  .main-nav.open { visibility: visible; transition: transform .32s var(--ease), visibility 0s; }
  .main-nav > ul > li { border-color: #eef1f8; }
  .main-nav a, .main-nav button { padding: 14px 8px; font-size: 15px; border-radius: 10px; }
  .main-nav a:active, .main-nav button:active { background: var(--tint); }
  .main-nav a.active { background: var(--tint); }
  .main-nav .dd a { padding: 10px 8px; }
  .nav-overlay { position: fixed; inset: 64px 0 0 0; background: rgba(6, 18, 58, .35); backdrop-filter: blur(2px); z-index: 90; animation: fade .25s var(--ease); }
  .main-nav { z-index: 95; }
}
@keyframes fade { from { opacity: 0; } }

/* hero */
.hero {
  background:
    radial-gradient(600px 340px at 85% 20%, rgba(79, 124, 255, .55), transparent 70%),
    radial-gradient(520px 320px at 10% 100%, rgba(124, 58, 237, .38), transparent 70%),
    linear-gradient(135deg, #050f33 0%, #0a1f5c 45%, #1a43d1 100%);
}
.grad { background: linear-gradient(90deg, #8fb0ff, #6c8dff 45%, #c4b5fd); -webkit-background-clip: text; background-clip: text; }
.search { border-radius: 14px; box-shadow: 0 18px 40px rgba(2, 8, 30, .35); border: 1px solid rgba(255, 255, 255, .6); }
.search:focus-within { box-shadow: 0 0 0 4px rgba(143, 176, 255, .45), 0 18px 40px rgba(2, 8, 30, .35); }
.search button { background: linear-gradient(135deg, var(--blue), var(--violet)); border-radius: 10px; letter-spacing: .01em; }
.search button:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--blue), var(--violet)); }
.search button:active { transform: scale(.96); }
.hero-stats .si, .jcats .si, .tstats .si { box-shadow: 0 8px 18px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25); }
.quick-links a, .qcard { border-radius: 16px; }
.qcard { box-shadow: 0 20px 50px rgba(2, 8, 30, .35); }

/* cards and lists */
.card, .st, .tile, .job, .jstat, .trade, .rtrade, .jcard { border-radius: var(--radius); }
.card { box-shadow: var(--shadow); border: 1px solid rgba(11, 20, 48, .05); }
.trade, .st, .tile, .job, .jstat, .rtrade { box-shadow: var(--shadow); }
.trade:hover, .st:hover, a.tile:hover, .job:hover, .jstat:hover, .rtrade:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.trade:active, .st:active, a.tile:active, .job:active, .jstat:active, .rtrade:active, .jcard:active, .rows a:active, .clist a:active, .quick-links a:active, .qcard a:active { transform: scale(.98); }
.trade .go, .job .go { background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 4px 10px rgba(31, 79, 214, .35); transition: transform .25s var(--ease); }
.trade:hover .go, .job:hover .go { transform: translateX(-50%) scale(1.1); }
.rows a { padding: 11px 6px; }
.rows a:hover { background: var(--tint); }
.chev { background: var(--tint); transition: transform .2s var(--ease), background .2s; }
.rows a:hover .chev { transform: translateX(3px); background: color-mix(in srgb, var(--blue) 16%, #fff); }
.ri { border-radius: 12px; }
.sec-head h2 { font-weight: 700; }
.view-all { padding: 6px 10px; border-radius: 999px; background: var(--tint); }
.view-all:hover { text-decoration: none; background: color-mix(in srgb, var(--blue) 14%, #fff); }
.new, .tag.new { background: linear-gradient(135deg, #ef4444, #f97316); }
.btn-sm { background: linear-gradient(135deg, var(--blue), var(--blue-d)); border-radius: 10px; box-shadow: 0 6px 14px rgba(31, 79, 214, .28); }
a:hover .btn-sm, .btn-sm:hover { background: linear-gradient(135deg, var(--blue-l), var(--blue)); }
.btn-sm:active, .btn-full:active, .btn-out:active { transform: scale(.96); }
.btn-full { background: linear-gradient(135deg, var(--blue), var(--violet)); border-radius: 12px; font-family: var(--font-head); }
.btn-full:hover { filter: brightness(1.07); background: linear-gradient(135deg, var(--blue), var(--violet)); }
.btn-out { border-radius: 10px; }
.jcard { border-color: #e8edf8; }
.jcard:hover { border-color: color-mix(in srgb, var(--blue) 35%, #fff); }
.tmenu a.on, .trade-tabs a.on { box-shadow: 0 6px 14px rgba(31, 79, 214, .25); }
.trade-tabs a.on { background: linear-gradient(135deg, var(--blue), var(--blue-d)); }
.trade-tabs { background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.faq details { transition: background .2s; }
.faq summary { padding: 4px 0; }
.faq details[open] p { animation: fade .3s var(--ease); }
.cta-stats li { border-radius: 16px; box-shadow: 0 10px 22px rgba(11, 20, 48, .12); }
.s-blue { background: linear-gradient(135deg, var(--blue), #4f7cff); } .s-green { background: linear-gradient(135deg, #059669, #22c55e); }
.s-orange { background: linear-gradient(135deg, #ea580c, #fb923c); } .s-purple { background: linear-gradient(135deg, #6d28d9, #a855f7); }
.site-footer { background: radial-gradient(700px 300px at 90% 0, rgba(79, 124, 255, .25), transparent 70%), linear-gradient(160deg, #040b26, #0a1f5c); }

/* gentle reveal while scrolling (only in browsers that support scroll-driven animation; content is never hidden) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card, .trade, .st, .tile, .job, .jcard, .jstat, .rtrade {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%;
    }
  }
}
@keyframes rise { from { opacity: .35; transform: translateY(18px); } }

/* ---------- phone: app-style bottom navigation ---------- */
.bnav { display: none; }
@media (max-width: 1023px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .bnav {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 80;
    height: 66px; padding: 0 6px 8px; border-radius: 24px;
    background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 10px 30px rgba(11, 20, 48, .16), 0 2px 6px rgba(11, 20, 48, .06);
    transition: transform .35s var(--ease), opacity .35s var(--ease);
  }
  .bnav.hide { transform: translateY(calc(100% + 24px)); opacity: 0; }
  .bnav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; color: var(--muted); font: 600 10.5px/1 var(--font-head); letter-spacing: .01em; }
  .bnav .bi { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 999px; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
  .bnav .bi .ic { font-size: 21px; stroke-width: 2.1; }
  .bnav a.on { color: var(--blue); }
  .bnav a.on .bi { background: var(--tint); color: var(--blue); animation: pop .4s var(--ease); }
  .bnav a.on::after { content: ""; position: absolute; bottom: -6px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
  .bnav a:active .bi { transform: scale(.86); }
  /* raised centre button */
  .bnav a.fab { color: var(--ink); }
  .bnav a.fab .bi {
    width: 58px; height: 58px; margin-top: -30px; border-radius: 50%; color: #fff;
    background: linear-gradient(140deg, var(--blue) 0%, var(--violet) 100%);
    box-shadow: 0 10px 22px rgba(31, 79, 214, .45), 0 0 0 5px #fff;
  }
  .bnav a.fab .bi .ic { font-size: 25px; }
  .bnav a.fab.on .bi { background: linear-gradient(140deg, var(--violet), var(--blue)); color: #fff; }
  .bnav a.fab.on::after { display: none; }
  .bnav a.fab.on { color: var(--blue); }
  .to-top { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: 18px; }
}
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------- phone layout polish ---------- */
@media (max-width: 559px) {
  .section { padding: 24px 0; }
  .hero h1 { font-size: 34px; }
  .hero .h1-sm { font-size: 17px; }
  .lead { font-size: 15px; }
  .search { padding: 5px 5px 5px 12px; }
  .search input { font-size: 14px; }
  .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .trade { padding: 14px 6px 40px; }
  .trade .emo { font-size: 38px; margin-bottom: 6px; }
  .trade .timg { width: 44px; height: 44px; }
  .trade h3, .trade h2 { font-size: 13.5px; }
  .trade p { display: none; }
  .trade .go { width: 24px; height: 24px; bottom: 10px; }
  .study { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .st { padding: 14px 6px; }
  .sti { width: 44px; height: 44px; font-size: 22px; }
  .st h3 { font-size: 12.5px; }
  .st p { display: none; }
  .card { padding: 16px; }
  .sec-head h2 { font-size: 20px; }
  .hero-stats { gap: 12px 10px; }
  .jobs { grid-template-columns: 1fr; }
  .job { padding: 14px 14px 46px; }
  .tiles { gap: 10px; }
  .tile { padding: 14px 8px; }
  .cta-art { font-size: 52px; }
  .foot-grid { gap: 22px; }
}


/* =========================================================
   Brand v3 – logo colours, logo, WhatsApp, contact
   ========================================================= */
/* logo */
.logo { gap: 10px; }
.logo-img { width: 46px; height: 46px; object-fit: contain; border-radius: 12px; flex-shrink: 0; }
.logo.light .logo-img { background: #fff; padding: 3px; }
.logo-text strong { font-size: 23px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: baseline; }
.logo-text strong b { font-weight: 800; }
.logo-text strong .l-i1 { color: var(--orange); } .logo-text strong .l-t { color: var(--blue); } .logo-text strong .l-i2 { color: var(--green); }
.logo-text strong span, .logo.light strong span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--navy); margin-left: 2px; }
.logo.light strong span { color: #fff; }
.logo-text small { font: 600 9.5px/1.2 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.logo.light small { color: #c7d2fe; }
@media (max-width: 380px) { .logo-text small { display: none; } .logo-img { width: 40px; height: 40px; } }

/* brand accents */
.grad { background: linear-gradient(90deg, #ffb347, var(--amber) 40%, #ff8a1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero {
  background:
    radial-gradient(560px 320px at 88% 18%, rgba(61, 111, 240, .55), transparent 70%),
    radial-gradient(480px 300px at 6% 100%, rgba(247, 116, 15, .28), transparent 70%),
    linear-gradient(135deg, #061436 0%, #0b2a6f 48%, #1f4fd6 100%);
}
.search button, .search button:hover { background: linear-gradient(135deg, var(--orange), #ff9a2e); }
.search button { box-shadow: 0 8px 18px rgba(247, 116, 15, .35); }
.sec-head h2::after { background: linear-gradient(90deg, var(--orange), var(--amber) 45%, var(--blue)); width: 52px; }
.tbadge { background: var(--green); }
.btn-full { background: linear-gradient(135deg, var(--blue), var(--blue-d)); }
.btn-full:hover { background: linear-gradient(135deg, var(--blue-l), var(--blue)); }
.apply-card { background: linear-gradient(135deg, var(--navy), var(--blue)); }
.trade .go, .job .go { background: linear-gradient(135deg, var(--blue), var(--blue-d)); }
.new, .tag.new { background: linear-gradient(135deg, var(--orange), #ff9a2e); }
.s-blue { background: linear-gradient(135deg, var(--blue-d), var(--blue-l)); }
.s-orange { background: linear-gradient(135deg, var(--orange), var(--amber)); }
.s-green { background: linear-gradient(135deg, #1f8f2e, #3fbf4e); }
.s-purple { background: linear-gradient(135deg, var(--navy), #2a4fb8); }
@media (max-width: 1023px) {
  .bnav a.fab .bi { background: linear-gradient(140deg, var(--orange) 0%, var(--amber) 100%); box-shadow: 0 10px 22px rgba(247, 116, 15, .45), 0 0 0 5px #fff; }
  .bnav a.fab.on .bi { background: linear-gradient(140deg, var(--amber), var(--orange)); }
}

/* WhatsApp: join box, floating button, footer link */
.wa-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin: 8px 0 26px; padding: 18px 20px; border-radius: var(--radius);
  background: linear-gradient(135deg, #e9fbef, #f2fff6); border: 1px solid #bfe9cb; box-shadow: var(--shadow); }
.wa-cta.inline { margin: 18px 0; }
.wa-ic { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; background: #25d366; color: #fff; font-size: 28px; box-shadow: 0 8px 18px rgba(37, 211, 102, .35); }
.wa-txt { flex: 1; min-width: 200px; }
.wa-txt b { display: block; font: 700 17px/1.3 var(--font-head); color: #0b3d1f; }
.wa-txt small { color: #2f6b45; font-size: 13.5px; }
.wa-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-btn, .tg-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; color: #fff !important; font: 600 14px var(--font-head); text-decoration: none !important; white-space: nowrap; }
.wa-btn { background: #25d366; box-shadow: 0 8px 18px rgba(37, 211, 102, .35); }
.tg-btn { background: #229ed9; }
.wa-btn:hover, .tg-btn:hover { filter: brightness(.95); transform: translateY(-1px); }
.wa-btn .ic, .tg-btn .ic { font-size: 18px; }
.wa-float { position: fixed; left: 16px; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 13px; border-radius: 999px;
  background: #25d366; color: #fff; font: 600 14px var(--font-head); box-shadow: 0 10px 24px rgba(37, 211, 102, .45); animation: waPulse 2.6s ease-in-out infinite; }
.wa-float .ic { font-size: 24px; }
.wa-float:hover { transform: translateY(-2px); }
@keyframes waPulse { 0%, 100% { box-shadow: 0 10px 24px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .5); } 50% { box-shadow: 0 10px 24px rgba(37, 211, 102, .45), 0 0 0 10px rgba(37, 211, 102, 0); } }
@media (max-width: 1023px) {
  .wa-float { left: auto; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); padding: 12px; }
  .wa-float span { display: none; }
  .to-top { right: auto; left: 16px; }
}
.foot-mail { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; }
.foot-mail a { color: #fff; }
.foot-mail a:hover { text-decoration: underline; }
.foot-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 14px; border-radius: 10px; background: #25d366; color: #fff; font: 600 13.5px var(--font-head); }
.foot-wa:hover { filter: brightness(.95); }

/* contact boxes ([contact] shortcode) */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.prose .cbox { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); }
.prose .cbox:hover { border-color: color-mix(in srgb, var(--blue) 35%, #fff); box-shadow: var(--shadow); }
.cbox small { display: block; color: var(--muted); font-size: 12.5px; }
.cbox b { display: block; font-size: 15px; overflow-wrap: anywhere; }

/* 404 */
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.nf-links a { padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font: 600 13.5px var(--font-head); }
.nf-links a:hover { background: rgba(255, 255, 255, .22); }
.thero.nf .search { margin: 20px auto 0; }
.wa-txt small { display: block; line-height: 1.5; margin-top: 2px; }
/* admin-uploaded hero photo */
.hero-photo { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }

/* =========================================================
   HTML CBT test page
   ========================================================= */
.cbt-hero { padding-bottom: 26px; }
.cbt-hero h1 { font-size: clamp(24px, 4vw, 36px); }
.cbt-trade { display: inline-block; font-size: .5em; vertical-align: middle; background: var(--green); color: #fff; padding: 4px 12px; border-radius: 8px; margin-right: 6px; }
.cbt-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; color: #dbeafe; font-size: 14px; }
.cbt-meta span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .1); padding: 6px 12px; border-radius: 999px; }
.cbt-sec { padding-top: 20px; }
.cbt-sec .container { display: grid; gap: 16px; }
.cbt-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-sm.ghost-b { background: #fff; color: var(--blue); border: 1px solid #c7d6fb; box-shadow: none; }
.btn-sm.ghost-b:hover { background: var(--tint); }
.cbt-frame { position: relative; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.cbt-frame iframe { display: block; width: 100%; height: max(620px, calc(100vh - 170px)); border: 0; background: #fff; }
.cbt-frame:fullscreen, .cbt-frame.max { border-radius: 0; }
.cbt-frame:fullscreen iframe { height: 100vh; }
.cbt-frame.max { position: fixed; inset: 0; z-index: 200; }
.cbt-frame.max iframe { height: 100%; }
.cbt-desc { color: var(--text); }
@media (max-width: 1023px) { .cbt-frame iframe { height: calc(100vh - 150px); min-height: 560px; } }
.cbt-close { display: none; position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(11, 20, 48, .75); color: #fff; font-size: 18px; cursor: pointer; }
.cbt-frame:fullscreen .cbt-close, .cbt-frame.max .cbt-close { display: block; }

/* =========================================================
   Hero illustration: logo emblem with orbiting icons and floating cards
   ========================================================= */
.c-amber { --c: var(--amber); }
.art-stage { position: absolute; inset: 0; }
.art-glow { position: absolute; left: 50%; top: 56%; width: 280px; height: 280px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .35), rgba(79, 124, 255, .35) 45%, transparent 70%); filter: blur(6px); }
.art-ring { position: absolute; left: 50%; top: 56%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .28); transform: translate(-50%, -50%); }
.art-ring.r1 { width: 250px; height: 250px; animation: spin 40s linear infinite; }
.art-ring.r2 { width: 310px; height: 310px; border-style: solid; border-color: rgba(255, 255, 255, .12); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.art-emblem { position: absolute; left: 50%; top: 56%; width: 205px; height: 205px; transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .18), 0 24px 50px rgba(2, 8, 30, .45); animation: emblemFloat 6s ease-in-out infinite; }
@keyframes emblemFloat { 50% { transform: translate(-50%, calc(-50% - 8px)); } }
.orb { position: absolute; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 19px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .3); animation: float 4.5s ease-in-out infinite; }
.orb.o1 { left: 2%; top: 50%; background: linear-gradient(135deg, var(--orange), var(--amber)); }
.orb.o2 { right: 3%; top: 36%; background: linear-gradient(135deg, var(--blue-l), var(--blue-d)); animation-delay: .8s; }
.orb.o3 { left: 46%; bottom: -1%; background: linear-gradient(135deg, var(--green), #46c95a); animation-delay: 1.6s; }
.fcard { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .96);
  color: var(--ink); box-shadow: 0 12px 28px rgba(2, 8, 30, .3); white-space: nowrap; animation: float 5s ease-in-out infinite; }
.fcard .fi { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--c); font-size: 17px; }
.fcard b { display: block; font: 700 13px/1.1 var(--font-head); }
.fcard small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.fcard.f1 { left: -22px; top: 14%; }
.fcard.f2 { right: -26px; bottom: 15%; animation-delay: 1.2s; }
.fcard.f4 { left: -30px; bottom: 9%; animation-delay: .6s; }
.hero-art .quote { z-index: 3; right: 0; top: -10px; font-size: 25px; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.hero-art { height: 400px; }
@media (min-width: 1200px) and (max-width: 1340px) { .fcard.f2 { right: -10px; } .fcard.f1, .fcard.f4 { left: -10px; } }

/* =========================================================
   Full-width pages with sidebar (no empty space on the right)
   ========================================================= */
.page-body { max-width: none; }
.post-layout { display: grid; gap: 22px; align-items: start; }
.post-layout > * { min-width: 0; }
@media (min-width: 1000px) { .post-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.post-side { display: grid; gap: 18px; align-content: start; }
.post-side .card { padding: 16px; }
.post-side .view-all { margin-top: 10px; }
.side-trades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.side-trades a { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--tbg, var(--tint)); font: 600 13.5px var(--font-head); color: var(--ink); border: 1px solid rgba(11, 20, 48, .05); }
.side-trades a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.side-trades span { font-size: 20px; line-height: 1; }
.wa-cta.side { flex-direction: column; align-items: flex-start; margin: 0; }
.wa-cta.side .wa-txt { min-width: 0; }
.wa-cta.side .wa-btns, .wa-cta.side .wa-btn { width: 100%; justify-content: center; }
.prose .trades.sc { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.prose .trades.sc .trade { padding: 14px 8px 44px; }

/* =========================================================
   Desktop menu bar also on laptops (1024px – 1279px)
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  .menu-toggle { display: none; }
  .nav-overlay { display: none !important; }
  .main-nav { position: static; transform: none; visibility: visible; width: auto; padding: 0; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .main-nav > ul { display: flex; align-items: center; gap: 0; }
  .main-nav > ul > li { border: 0; position: relative; }
  .main-nav a, .main-nav button { padding: 8px 5px; font-size: 12px; width: auto; gap: 1px; border-radius: 8px; white-space: nowrap; }
  .main-nav button .ic { font-size: 10px; }
  .main-nav > ul > li > a.active { background: linear-gradient(135deg, var(--blue), var(--blue-d)); color: #fff; padding: 7px 10px; margin-right: 2px; }
  .main-nav .dd { display: block; position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-h); border: 1px solid var(--line); padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; }
  .main-nav .has-dd:nth-last-child(-n+3) .dd { left: auto; right: 0; }
  .main-nav .has-dd:hover .dd, .main-nav .has-dd:focus-within .dd, .main-nav .has-dd.open .dd { opacity: 1; visibility: visible; transform: none; }
  .main-nav .dd a { padding: 9px 12px; width: 100%; font-size: 13px; }
  .main-nav .dd a:hover { background: var(--tint); color: var(--blue); }
  .nav-wrap { gap: 10px; }
  .logo-img { width: 40px; height: 40px; }
  .logo-text strong { font-size: 20px; }
  .logo-text small { display: none; }
  .nav-actions .icon-btn { width: 38px; }
}

/* Trade cards inside pages ([trades] shortcode): 4 per row, bigger */
.prose .trades.sc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.prose .trades.sc .trade { padding: 22px 12px 58px; min-height: 210px; justify-content: flex-start; }
.prose .trades.sc .emo { font-size: 62px; margin-bottom: 12px; }
.prose .trades.sc .timg { width: 72px; height: 72px; margin-bottom: 12px; }
.prose .trades.sc .tt { font-size: 18px; line-height: 1.25; }
.prose .trades.sc .td { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.prose .trades.sc .go { width: 32px; height: 32px; bottom: 16px; }
@media (max-width: 899px) { .prose .trades.sc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .prose .trades.sc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .prose .trades.sc .trade { min-height: 180px; padding: 18px 10px 52px; }
  .prose .trades.sc .emo { font-size: 50px; }
  .prose .trades.sc .tt { font-size: 16px; }
  .prose .trades.sc .td { font-size: 12px; }
}

/* Homepage Study Material: 3 per row, bigger cards */
@media (min-width: 560px) {
  .study { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .st { padding: 24px 16px; display: flex; flex-direction: column; align-items: center; }
  .sti { width: 64px; height: 64px; font-size: 30px; border-radius: 16px; margin-bottom: 14px; }
  .st h3 { font-size: 17px; }
  .st p { font-size: 13.5px; margin-top: 6px; }
}
/* footer credit */
.foot-credit { color: #cbd5e1; }
.foot-credit b { color: #fff; font-weight: 600; }
@media (min-width: 768px) { .foot-bottom p { text-align: left; line-height: 1.7; } }

/* All Trades page: 4 bigger cards per row */
.trades.big { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.trades.big .trade { padding: 26px 16px 62px; min-height: 230px; }
.trades.big .emo { font-size: 70px; margin-bottom: 14px; }
.trades.big .timg { width: 80px; height: 80px; margin-bottom: 14px; }
.trades.big h2 { font-size: 20px; }
.trades.big p { font-size: 14px; margin-top: 6px; }
.trades.big .go { width: 34px; height: 34px; bottom: 18px; }
@media (max-width: 899px) { .trades.big { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .trades.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .trades.big .trade { min-height: 190px; padding: 18px 10px 54px; }
  .trades.big .emo { font-size: 52px; }
  .trades.big h2 { font-size: 16px; }
  .trades.big p { display: block; font-size: 12px; }
}
/* footer: copyright and credit on one line */
.foot-bottom p { line-height: 1.6; }
.foot-bottom .sep { color: rgba(255, 255, 255, .35); margin: 0 6px; }
@media (max-width: 767px) { .foot-bottom .sep { display: none; } .foot-credit { display: block; } }

/* ===== Homepage: Popular ITI Trades v2 (5 big cards, swipe on phones) ===== */
.sec-sub { margin-top: 6px; font-size: 14px; color: var(--muted); }
.htrades-sec .sec-head { align-items: flex-end; margin-bottom: 22px; }
.va-btn {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 7px 7px 7px 18px; border-radius: 999px; font: 600 14px/1 var(--font-head); color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--navy)); box-shadow: 0 8px 20px rgba(31, 79, 214, .28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.va-btn .va-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--blue); transition: transform .25s var(--ease); }
.va-btn .va-ic .ic { width: 16px; height: 16px; }
.va-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31, 79, 214, .36); }
.va-btn:hover .va-ic { transform: translateX(3px); }

.htrades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.htrade {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  padding: 22px 20px 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow); overflow: hidden; color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.htrade::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(180deg, var(--tbg, #eef3ff) 0%, var(--tbg, #eef3ff) 30%, #fff 74%);
}
.htrade::after {
  content: ""; position: absolute; z-index: -1; width: 120px; height: 120px; right: -42px; top: -42px; border-radius: 50%;
  background: #fff; opacity: .55; transition: transform .45s var(--ease);
}
.ht-ic {
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: #fff; font-size: 42px; line-height: 1;
  box-shadow: 0 10px 24px rgba(11, 20, 48, .10), inset 0 0 0 1px rgba(11, 20, 48, .04);
  transition: transform .35s var(--ease);
}
.ht-ic img { width: 52px; height: 52px; object-fit: contain; }
.ht-ic .ic { width: 34px; height: 34px; }
.htrade h3 { margin-top: 18px; font-size: 19px; font-weight: 700; line-height: 1.2; }
.htrade p {
  margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ht-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; padding-top: 18px; }
.ht-tag {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 10px; border-radius: 999px;
  background: var(--tint); color: var(--blue); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ht-tag .ic { width: 13px; height: 13px; flex-shrink: 0; }
.ht-go {
  display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--navy)); box-shadow: 0 6px 14px rgba(31, 79, 214, .32);
  transition: transform .3s var(--ease);
}
.ht-go .ic { width: 17px; height: 17px; }
.htrade:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); box-shadow: var(--shadow-h); }
.htrade:hover .ht-ic { transform: scale(1.06) rotate(-4deg); }
.htrade:hover::after { transform: scale(1.25); }
.htrade:hover .ht-go { transform: translateX(4px); }
.htrade:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 3px; }
/* "All trades" card: only where the grid has room for it (tablet) or in the phone carousel */
.ht-all { display: none; color: #fff; border-color: transparent; background: linear-gradient(150deg, var(--blue) 0%, var(--navy) 100%); }
.ht-all::before { display: none; }
.ht-all::after { background: rgba(255, 255, 255, .10); }
.ht-all .ht-ic { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
.ht-all h3 { color: #fff; }
.ht-all p { color: rgba(255, 255, 255, .78); }
.ht-all .ht-tag { background: rgba(255, 255, 255, .16); color: #fff; }
.ht-all .ht-go { background: #fff; color: var(--blue); }

@media (max-width: 1279px) and (min-width: 1024px) {
  .htrades { gap: 14px; }
  .htrade { padding: 18px 16px 16px; }
  .ht-ic { width: 64px; height: 64px; font-size: 36px; }
  .htrade h3 { font-size: 17px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .htrades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ht-all { display: flex; }
}
/* Phones: app-like swipe row, about 2 cards visible, snap to each card */
@media (max-width: 767px) {
  .htrades-sec .sec-head { align-items: center; margin-bottom: 14px; }
  .sec-sub { font-size: 12.5px; margin-top: 4px; }
  .va-btn { padding: 5px 5px 5px 12px; gap: 6px; font-size: 12.5px; }
  .va-btn .va-ic { width: 26px; height: 26px; }
  .htrades {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 4px 16px 18px; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .htrades::-webkit-scrollbar { display: none; }
  .htrade { flex: 0 0 min(46%, 190px); scroll-snap-align: start; padding: 16px 14px 14px; border-radius: 20px; }
  .htrade:hover { transform: none; }
  .ht-all { display: flex; }
  .ht-ic { width: 58px; height: 58px; border-radius: 18px; font-size: 32px; }
  .ht-ic img { width: 40px; height: 40px; }
  .ht-ic .ic { width: 28px; height: 28px; }
  .htrade h3 { margin-top: 14px; font-size: 16px; }
  .htrade p { font-size: 12px; }
  .ht-foot { padding-top: 14px; }
  .ht-tag { font-size: 10.5px; padding: 4px 8px; }
  .ht-tag .ic { display: none; }
  .ht-go { width: 32px; height: 32px; }
}
@media (max-width: 380px) { .sec-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .htrade, .ht-ic, .ht-go, .htrade::after, .va-btn, .va-ic { transition: none; } }

/* =====================================================================
   Theme v6 – one card system for every page: trustworthy blue + logo
   orange, coloured accents, lively hover on computers, press on phones
   ===================================================================== */
:root {
  --teal: #0e9f8e;
  --grad-brand: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
  --grad-warm: linear-gradient(135deg, var(--orange) 0%, var(--amber) 100%);
  --ring: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent);
}
body {
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(31, 79, 214, .06), transparent 60%),
    radial-gradient(700px 420px at 0% 40%, rgba(247, 116, 15, .045), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: color-mix(in srgb, var(--blue) 22%, #fff); }

/* ---- Trust bar under the homepage hero ---- */
.trust { position: relative; z-index: 3; margin-top: -26px; }
.trust-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 6px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(11, 20, 48, .08);
}
.trust-row li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 0; }
.trust-row li + li { border-left: 1px solid var(--line); }
.trust-row b { display: block; font: 600 14.5px/1.25 var(--font-head); color: var(--ink); }
.trust-row small { display: block; font-size: 12.5px; color: var(--muted); }
.tr-ic { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.tr-ic .ic { width: 21px; height: 21px; }
@media (max-width: 899px) {
  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-row li:nth-child(3) { border-left: 0; }
  .trust-row li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .trust { margin-top: -18px; }
  .trust-row { padding: 4px; border-radius: 16px; }
  .trust-row li { gap: 9px; padding: 10px; }
  .tr-ic { width: 34px; height: 34px; border-radius: 10px; }
  .tr-ic .ic { width: 17px; height: 17px; }
  .trust-row b { font-size: 12.5px; }
  .trust-row small { font-size: 11px; }
}

/* ---- Cards: coloured top accent, softer depth, lift on hover ---- */
.card:not(.tmenu):not(.jfilter):not(.jd-side) { position: relative; }
.card { border: 1px solid var(--line); border-radius: 20px; transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.card::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 4px 4px;
  background: var(--accent, linear-gradient(90deg, var(--blue), #6d8cff)); opacity: .9; pointer-events: none;
}
.card:hover { box-shadow: var(--shadow-h); border-color: color-mix(in srgb, var(--blue) 18%, var(--line)); }
.card.prose::before, .card.page-body::before, .card.empty::before { display: none; }
.card.prose:hover, .card.page-body:hover { box-shadow: var(--shadow); border-color: var(--line); }
/* three-in-a-row homepage cards each get their own colour */
.cols-3 > .card:nth-child(3n+1) { --accent: linear-gradient(90deg, var(--blue), #6d8cff); }
.cols-3 > .card:nth-child(3n+2) { --accent: var(--grad-warm); }
.cols-3 > .card:nth-child(3n+3) { --accent: linear-gradient(90deg, var(--teal), #34d399); }
.cols-2-1 > .card:nth-child(2) { --accent: linear-gradient(90deg, #7c3aed, #c084fc); }

/* ---- List rows (mock tests, jobs, articles, menus) ---- */
.rows a { position: relative; padding-inline: 10px; margin-inline: -8px; transition: background .25s var(--ease), transform .25s var(--ease); }
.rows a::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px;
  background: var(--blue); transform: scaleY(0); transition: transform .25s var(--ease);
}
.rows a:hover { background: linear-gradient(90deg, #eef3ff, #f7f9ff 70%, transparent); }
.rows a:hover::before { transform: scaleY(1); }
.rows a:hover .rt b, .rows a:hover h3 { color: var(--blue); }
.rows .ri { transition: transform .3s var(--ease); }
.rows a:hover .ri { transform: scale(1.08) rotate(-4deg); }

/* ---- Buttons ---- */
.btn-sm, .btn-full { background: var(--grad-brand); box-shadow: 0 6px 16px rgba(31, 79, 214, .26); transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s; }
.btn-sm:hover, .btn-full:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(31, 79, 214, .34); filter: saturate(1.1); }
.btn-sm.ghost-b, .btn-out { background: #fff; box-shadow: none; }
.view-all { transition: background .2s, color .2s, transform .2s var(--ease); }
.view-all:hover { background: var(--blue); color: #fff; }
.view-all:hover .ic { transform: translateX(2px); }
.view-all .ic { transition: transform .2s var(--ease); }

/* ---- Study material tiles ---- */
.st { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.st::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c, var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.st:has(.c-red) { --c: #e11d48; } .st:has(.c-purple) { --c: #7c3aed; } .st:has(.c-blue) { --c: var(--blue); }
.st:has(.c-green) { --c: #16a34a; } .st:has(.c-orange) { --c: #f97316; } .st:has(.c-cyan) { --c: #0891b2; }
.st:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c, var(--blue)) 35%, var(--line)); box-shadow: 0 18px 36px color-mix(in srgb, var(--c, var(--blue)) 18%, transparent); }
.st:hover::after { transform: scaleX(1); }
.sti { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); box-shadow: 0 10px 20px color-mix(in srgb, var(--c) 32%, transparent); transition: transform .35s var(--ease); }
.st:hover .sti { transform: translateY(-3px) scale(1.06); }

/* ---- Trade page quick tiles & menu ---- */
.tile { border: 1px solid rgba(11, 20, 48, .05); border-radius: 18px; }
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-h); border-color: color-mix(in srgb, var(--blue) 25%, transparent); }
.tmenu a { transition: background .2s, color .2s, padding .2s var(--ease); }
.tmenu a:hover { padding-left: 12px; }
.tmenu a.on { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 18px rgba(31, 79, 214, .25); }
.tmenu a.on .ri { background: rgba(255, 255, 255, .18); color: #fff; }
.tmenu a.on .mchev { color: #fff; }

/* ---- All Trades page cards ---- */
.trades .trade { border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.trades .trade:hover { transform: translateY(-6px); box-shadow: var(--shadow-h); border-color: color-mix(in srgb, var(--blue) 28%, var(--line)); }
.trades .trade .emo, .trades .trade .timg { transition: transform .35s var(--ease); }
.trades .trade:hover .emo, .trades .trade:hover .timg { transform: scale(1.08) rotate(-4deg); }
.trades .trade:hover .go { transform: translateX(-50%) scale(1.1); }

/* ---- Jobs ---- */
.job { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.job::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-warm); }
.job:hover { border-color: color-mix(in srgb, var(--orange) 35%, var(--line)); box-shadow: 0 18px 36px rgba(247, 116, 15, .14); }
.jcard { overflow: hidden; border-radius: 16px; }
.jcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-warm); transform: scaleY(0); transition: transform .3s var(--ease); }
.jcard:hover::before { transform: scaleY(1); }
.jcard:hover h3 a { color: var(--blue); }
.jstat { border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--blue)) 7%, #fff), #fff 60%); }
.jstat:has(.c-blue) { --c: var(--blue); } .jstat:has(.c-orange) { --c: #f97316; } .jstat:has(.c-purple) { --c: #7c3aed; }
.jstat:has(.c-green) { --c: #16a34a; } .jstat:has(.c-indigo) { --c: #4f46e5; }

/* ---- Inner page heroes and article cards ---- */
.thero {
  background:
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(560px 320px at 88% 18%, rgba(61, 111, 240, .55), transparent 70%),
    radial-gradient(480px 300px at 6% 100%, rgba(247, 116, 15, .28), transparent 70%),
    linear-gradient(135deg, #061436 0%, #0b2a6f 48%, #1f4fd6 100%);
}
.crumbs a:hover { color: #fff; text-decoration: underline; }
.prose h2 { position: relative; padding-left: 14px; }
.prose h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--orange), var(--blue)); }
.prose blockquote { border-left: 4px solid var(--orange); background: #fff8f1; border-radius: 0 12px 12px 0; }

/* ---- Feel "alive" on phones: press-in when tapped ---- */
@media (hover: none) {
  .htrade:active, .st:active, .tile:active, .job:active, .jcard:active, .trades .trade:active, .jstat:active,
  .rows a:active, .btn-sm:active, .btn-full:active, .va-btn:active, .view-all:active { transform: scale(.97); transition-duration: .08s; }
  .rows a:active { background: #eef3ff; }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  .card, .rows a, .st, .tile, .trades .trade, .jcard, .job { transition: none; }
}

/* ===== All Trades page: cards in the Study Material style ===== */
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 28px 18px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 92px; z-index: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, #fff), transparent);
}
.tcard::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.tcard > * { position: relative; z-index: 1; }
.tci {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; font-size: 40px; line-height: 1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--c) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .35s var(--ease);
}
.tci > span { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.tci img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .2)); }
.tcard h2 { margin-top: 18px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.tcard p { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.tc-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 8px 14px; border-radius: 999px;
  font: 600 13px/1 var(--font-head); color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff);
  transition: background .25s, color .25s;
}
.tcard p { margin-bottom: 16px; }
.tc-cta .ic { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.tcard:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 35%, var(--line)); box-shadow: 0 18px 36px color-mix(in srgb, var(--c) 18%, transparent); }
.tcard:hover::after { transform: scaleX(1); }
.tcard:hover .tci { transform: translateY(-3px) scale(1.06) rotate(-3deg); }
.tcard:hover .tc-cta { background: var(--c); color: #fff; }
.tcard:hover .tc-cta .ic { transform: translateX(3px); }
.tcard:focus-visible { box-shadow: var(--ring); }
.tgrid-ad { grid-column: 1 / -1; }
@media (max-width: 1023px) { .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 640px) {
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tcard { padding: 20px 10px 16px; border-radius: 18px; }
  .tci { width: 60px; height: 60px; border-radius: 18px; font-size: 31px; }
  .tci img { width: 36px; height: 36px; }
  .tcard h2 { margin-top: 13px; font-size: 15.5px; }
  .tcard p { font-size: 12px; }
  .tc-cta { padding: 7px 11px; font-size: 11.5px; }
  .tcard p { margin-bottom: 12px; }
}
@media (hover: none) { .tcard:active { transform: scale(.97); transition-duration: .08s; } }
@media (prefers-reduced-motion: reduce) { .tcard, .tci, .tcard::after { transition: none; } }

/* ===== Trade page: exam guide ===== */
.exam-guide .eg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 6px; }
.eg-facts div { padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, #eef3ff, #fff); border: 1px solid var(--line); }
.eg-facts span { display: block; font-size: 12px; color: var(--muted); }
.eg-facts b { display: block; margin-top: 3px; font-size: 14px; color: var(--ink); line-height: 1.35; }
.eg-lang { padding: 10px 14px; border-radius: 12px; background: #fff8f1; border-left: 4px solid var(--orange); }
.eg-note { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .exam-guide .eg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Footer: popular searches ===== */
.foot-search { padding-top: 18px; padding-bottom: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.foot-search h2 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.foot-search p { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-search a {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s, color .2s;
}
.foot-search a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.mt-empty { display: grid; justify-items: start; gap: 12px; padding: 6px 2px 4px; }
.mt-empty .sti { margin: 0; }
.mt-empty p { font-size: 14px; color: var(--text); line-height: 1.55; }

/* ===== ITI Syllabus page ===== */
.syl-hero { padding-bottom: 42px; }
.syl-hero .tbadge { display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 12.5px; font-weight: 600; }
.syl-hero h1 { margin-top: 10px; }
.syl-hero .grad-y { background: linear-gradient(90deg, #ffb347, #ffd166); -webkit-background-clip: text; background-clip: text; color: transparent; }
.syl-search { position: relative; max-width: 620px; margin-top: 20px; }
.syl-search input {
  width: 100%; height: 56px; padding: 0 18px 0 52px; border-radius: 16px; border: 0; font: 500 16px var(--font); color: var(--ink);
  background: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}
.syl-search .ss-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--blue); display: grid; }
.syl-search .ss-ic .ic { width: 20px; height: 20px; }
.syl-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.syl-stats li { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); font-size: 13px; }
.syl-stats b { font: 700 18px var(--font-head); color: #fff; }

.syl-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.syl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.syl-chips .chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text);
  font: 600 13px var(--font); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.syl-chips .chip:hover { border-color: var(--blue); color: var(--blue); }
.syl-chips .chip.on { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(31, 79, 214, .25); }
.syl-src {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font: 600 13.5px var(--font-head);
  color: var(--blue); background: var(--tint); transition: background .2s, color .2s;
}
.syl-src .ic { width: 16px; height: 16px; }
.syl-src:hover { background: var(--blue); color: #fff; }

.syl-table { padding: 8px 10px; }
.syl-head, .syl-row { display: grid; grid-template-columns: 64px minmax(0, 1.25fr) minmax(0, 1.4fr) 210px; gap: 18px; align-items: center; }
.syl-head { padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, #0b2a6f, #1f4fd6); color: #fff; font: 600 13px var(--font-head); letter-spacing: .02em; }
.syl-row { position: relative; padding: 16px 14px; border-radius: 14px; transition: background .25s var(--ease), transform .25s var(--ease); }
.syl-row + .syl-row { border-top: 1px solid var(--line); }
.syl-row::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 4px; border-radius: 4px; background: var(--grad-warm); transform: scaleY(0); transition: transform .25s var(--ease); }
.syl-row:hover { background: linear-gradient(90deg, #f1f5ff, #fff 80%); }
.syl-row:hover::before { transform: scaleY(1); }
.syl-no {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font: 700 15px var(--font-head);
  color: var(--blue); background: var(--tint);
}
.syl-row:hover .syl-no { background: var(--grad-brand); color: #fff; }
.syl-trade h2 { font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.syl-pop { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--grad-warm); vertical-align: 2px; }
.syl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.syl-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.syl-tags .ic { width: 12px; height: 12px; }
.t-sector { background: #eef3ff; color: var(--blue); } .t-dur { background: #ecfdf5; color: #047857; } .t-nsqf { background: #fff7ed; color: #c2410c; }
.syl-det { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.syl-det a { color: var(--blue); font-weight: 600; white-space: nowrap; }
.syl-acts { display: grid; gap: 6px; justify-items: stretch; }
.syl-dl {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: 12px;
  font: 600 14px var(--font-head); color: #fff; background: linear-gradient(135deg, #e11d48, #f97316);
  box-shadow: 0 8px 18px rgba(225, 29, 72, .28); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.syl-dl .ic { width: 17px; height: 17px; }
.syl-dl:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(225, 29, 72, .36); }
.syl-hi { text-align: center; padding: 8px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--blue); background: var(--tint); }
.syl-by { text-align: center; font-size: 11px; color: var(--muted); }
.syl-none { padding: 26px; text-align: center; color: var(--muted); }
.syl-info { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-top: 22px; }
.syl-note { margin-top: 16px; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (max-width: 1023px) {
  .syl-head, .syl-row { grid-template-columns: 52px minmax(0, 1fr) 190px; }
  .syl-head span:nth-child(3), .syl-det { display: none; }
  .syl-info { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .syl-search input { height: 50px; font-size: 15px; }
  .syl-bar { flex-direction: column; align-items: stretch; }
  .syl-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .syl-chips::-webkit-scrollbar { display: none; }
  .syl-chips .chip { white-space: nowrap; }
  .syl-bar > * { min-width: 0; }
  .syl-chips { max-width: none; width: calc(100% + 32px); }
  .syl-src { justify-content: center; width: 100%; }
  .syl-table { padding: 6px; background: transparent; border: 0; box-shadow: none; }
  .syl-table::before { display: none; }
  .syl-head { display: none; }
  .syl-row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
  .syl-row + .syl-row { border-top: 1px solid var(--line); }
  .syl-no { width: 36px; height: 36px; font-size: 14px; align-self: start; }
  .syl-acts { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
  .syl-acts .syl-by { grid-column: 1 / -1; }
  .syl-trade h2 { font-size: 15.5px; }
}
@media (hover: none) { .syl-dl:active, .chip:active, .syl-src:active { transform: scale(.97); } }
.syl-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.syl-filter select {
  height: 44px; padding: 0 40px 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: 600 14px var(--font); box-shadow: var(--shadow); cursor: pointer; max-width: 100%;
}
.syl-filter select:focus { outline: none; box-shadow: var(--ring); }
.syl-count { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.syl-dl.alt { background: var(--grad-brand); box-shadow: 0 8px 18px rgba(31, 79, 214, .26); }
.syl-dl.alt:hover { box-shadow: 0 12px 24px rgba(31, 79, 214, .34); }
@media (max-width: 640px) { .syl-filter select { flex: 1 1 100%; } }
.tr-search { margin-top: 18px; }
.tr-none { margin-bottom: 16px; padding: 16px 18px; border-radius: 14px; background: #fff8f1; border: 1px solid #fed7aa; color: var(--text); }
.tr-none a { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--blue); }
.tcard[hidden], .syl-row[hidden] { display: none !important; }

/* =========================================================
   v24 – Live search panel, search page tabs, recently viewed,
   foldable footer (mobile-first)
   ========================================================= */
body.sov-on { overflow: hidden; }
.sov { position: fixed; inset: 0; z-index: 300; background: rgba(7, 18, 50, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s var(--ease); }
.sov.in { opacity: 1; }
.sov[hidden] { display: none; }
.sov-box { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column;
  transform: translateY(14px); transition: transform .22s var(--ease); }
.sov.in .sov-box { transform: none; }
.sov-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
  background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 4px 18px rgba(11, 20, 48, .06); }
.sov-back, .sov-clear { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); flex-shrink: 0; }
.sov-back .ic { font-size: 22px; } .sov-clear .ic { font-size: 18px; color: var(--muted); }
.sov-back:active, .sov-clear:active { background: var(--tint); }
.sov-ic { font-size: 19px; color: var(--muted); margin-left: 2px; }
.sov-bar input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; font: 500 16px var(--font); color: var(--ink); }
.sov-bar input::-webkit-search-cancel-button { display: none; }
.sov-bar input::placeholder { color: #98a2b8; }
.sov.busy .sov-ic { animation: sovspin .8s linear infinite; color: var(--blue); }
@keyframes sovspin { to { transform: rotate(360deg); } }
.sov-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 14px calc(30px + env(safe-area-inset-bottom)); }
.sov-sec + .sov-sec { margin-top: 22px; }
.sov-sec h3 { display: flex; align-items: center; justify-content: space-between; font: 600 12.5px var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sov-x { border: 0; background: none; color: var(--blue); font: 600 12.5px var(--font); text-transform: none; letter-spacing: 0; padding: 4px 6px; }
.sov-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sov-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  color: var(--ink); font-weight: 500; font-size: 14px; box-shadow: 0 1px 2px rgba(11, 20, 48, .04); }
.sov-chips a .ic { font-size: 14px; color: var(--muted); }
.sov-chips a:active { background: var(--tint); border-color: #c9d7fb; }
.sov-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sov-quick a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  font: 600 12px var(--font-head); color: var(--ink); text-align: center; }
.sov-quick span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.sov-quick .ic { font-size: 20px; }
.sov-list { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.sov-list li + li { border-top: 1px solid var(--line); }
.sov-list a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 60px; }
.sov-list li.on a, .sov-list a:hover { background: #f6f9ff; }
.sov-list a:active { background: var(--tint); }
.sov-list .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sov-list .rt b { color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sov-list .rt small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sov-list mark, .search-res mark { background: #fff1c2; color: inherit; border-radius: 3px; padding: 0 1px; }
.sov-list .chev { color: #a7b1c7; font-size: 18px; }
.sov-emo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); font-size: 20px; flex-shrink: 0; }
.sov-k { flex-shrink: 0; font: 600 10.5px var(--font-head); padding: 4px 8px; border-radius: 999px; background: #eef2fb; color: var(--muted); }
.sov-k.k-trade { background: #e8efff; color: var(--blue); } .sov-k.k-test { background: #fff1e6; color: #c2570c; }
.sov-k.k-syllabus { background: #e9f8ee; color: #15803d; } .sov-k.k-job { background: #f3ecff; color: #6d28d9; }
.sov-msg { text-align: center; color: var(--muted); padding: 30px 10px; font-size: 14.5px; }
.sov-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 13px; border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; font: 600 14.5px var(--font-head); box-shadow: 0 8px 20px rgba(31, 79, 214, .25); }
.sov-all[hidden], .sov-res[hidden], .sov-msg[hidden], .sov-start[hidden], .sov-sec[hidden] { display: none; }
@media (min-width: 768px) {
  .sov-box { inset: 7vh auto auto 50%; width: min(680px, calc(100% - 40px)); max-height: 80vh; transform: translate(-50%, 14px); border-radius: 22px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(2, 8, 30, .35); }
  .sov.in .sov-box { transform: translate(-50%, 0); }
  .sov-bar { padding: 12px 14px; }
  .sov-body { padding: 16px 18px 22px; }
}

/* Search page */
.sr-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; position: sticky; top: 62px; z-index: 5;
  background: linear-gradient(var(--bg) 80%, transparent); }
.sr-tabs::-webkit-scrollbar { display: none; }
.sr-tabs button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: 600 13px var(--font-head); }
.sr-tabs button .ic { font-size: 15px; color: var(--muted); }
.sr-tabs button span { font: 600 11px var(--font); background: var(--tint); color: var(--blue); border-radius: 999px; padding: 2px 7px; }
.sr-tabs button.on { background: linear-gradient(135deg, var(--blue), var(--violet)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(31, 79, 214, .25); }
.sr-tabs button.on .ic { color: #fff; } .sr-tabs button.on span { background: rgba(255, 255, 255, .22); color: #fff; }
.sr-grp[hidden] { display: none; }
.sr-grp { display: grid; gap: 10px; }
.sr-list .sr-emo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--tbg, var(--tint)); font-size: 22px; flex-shrink: 0; }
.sr-list .rt small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sr-broad { color: var(--orange); font-weight: 500; }
.sr-start h2 { font-size: 19px; margin-bottom: 4px; }
.sr-start p { color: var(--muted); margin-bottom: 14px; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: var(--tint); color: var(--blue); font-weight: 600; font-size: 13.5px; }
.sr-chips .ic { font-size: 13px; }
.sr-none { text-align: center; }
.sr-none-ic { font-size: 44px; display: block; margin-bottom: 6px; }
.sr-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.sr-quick a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 12px; background: var(--tint); color: var(--blue); font: 600 13.5px var(--font-head); }
@media (min-width: 640px) { .sr-quick { grid-template-columns: repeat(4, 1fr); } }

/* Recently viewed – homepage strip */
.rv-home { padding: 18px 0 4px; }
.rv-home[hidden] { display: none; }
.rv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rv-head h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.rv-head h2 .ic { color: var(--orange); }
.rv-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 10px; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { flex: 0 0 auto; width: 200px; scroll-snap-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.rv-card:active { transform: scale(.98); }
.rv-emo { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--tint); font-size: 21px; }
.rv-card b { color: var(--ink); font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-card small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Footer link groups fold up on phones */
@media (max-width: 767px) {
  .foot-grid.facc { gap: 0; grid-template-columns: 1fr; }
  .foot-grid.facc .foot-brand { margin-bottom: 18px; }
  .foot-grid.facc > nav { border-top: 1px solid rgba(255, 255, 255, .12); }
  .foot-grid.facc > nav > h3 { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; margin: 0; cursor: pointer; }
  .foot-grid.facc > nav > h3::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); opacity: .7; }
  .foot-grid.facc > nav.fopen > h3::after { transform: rotate(-135deg) translateY(-2px); }
  .foot-grid.facc > nav > ul { display: none; padding-bottom: 14px; }
  .foot-grid.facc > nav.fopen > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .foot-grid.facc .foot-quote { display: none; }
}

/* Small touch polish on phones */
@media (max-width: 767px) {
  a, button { -webkit-tap-highlight-color: transparent; }
  .card.rows a, .rows a { min-height: 52px; }
}
.sov-bar input:focus-visible { box-shadow: none; outline: none; }
.sov-bar:focus-within { box-shadow: 0 4px 18px rgba(11, 20, 48, .06), inset 0 -2px 0 var(--blue); }

/* Trade page – mock tests by year and semester */
.yr-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 5px; margin: 4px 0 12px; background: var(--tint); border-radius: 14px; }
.yr-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); font: 600 14px var(--font-head); transition: background .2s var(--ease), color .2s var(--ease); }
.yr-tabs button span { font: 600 11px var(--font); background: #fff; color: var(--blue); border-radius: 999px; padding: 2px 8px; }
.yr-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(31, 79, 214, .15); }
.yr-tabs button.on span { background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; }
.yr-pane[hidden] { display: none; }
.yr-h { font-size: 15px; margin: 6px 0 4px; color: var(--blue); }
.sem-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; font: 600 13px var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--orange); }
.sem-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sem-h small { font: 500 11.5px var(--font); text-transform: none; letter-spacing: 0; color: var(--muted); order: 2; }
.yr-pane > .sem-h:first-child { margin-top: 2px; }

/* ===== Student login (header) ===== */
.st-login { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; margin-left: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 14px var(--font-head); white-space: nowrap; transition: box-shadow .2s, border-color .2s; }
.st-login:hover { border-color: #c7d6fb; box-shadow: var(--shadow); }
.st-menu { position: relative; margin-left: 4px; }
.st-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 3px 12px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 14px var(--font-head); cursor: pointer; }
.st-chip:hover { box-shadow: var(--shadow); }
.st-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.st-av-txt, .sd-av.st-av-txt { display: inline-grid; place-items: center; background: var(--grad-brand, var(--blue)); color: #fff; font: 700 15px var(--font-head); }
.st-chip-n { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.st-dd { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-h); padding: 6px; display: none; z-index: 60; }
.st-menu.open .st-dd { display: block; animation: stdd .16s var(--ease); }
@keyframes stdd { from { opacity: 0; transform: translateY(-4px); } }
.st-dd-h { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.st-dd-h b, .st-dd-h small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dd-h small { color: var(--muted); font-size: 12px; }
.st-dd a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 500; }
.st-dd a:hover { background: var(--tint); }
.st-dd .st-out { color: #c2410c; }
@media (max-width: 600px) {
  .st-chip-n { display: none; }
  .st-chip { padding: 3px; height: 38px; }
  .st-login { padding: 0 10px; height: 36px; font-size: 13px; }
}

/* ===== CBT page: result saved / login to save ===== */
.cbt-save { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 44px 14px 16px; border-radius: 14px; border: 1px solid; font-size: 14px; box-shadow: var(--shadow-h); animation: stdd .25s var(--ease); }
.cbt-save-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.cbt-save-x:hover { background: rgba(0, 0, 0, .06); }
.cbt-save[hidden] { display: none; }
.cbt-save span { flex: 1 1 220px; color: var(--text); }
.cbt-save.ok { background: #effaf2; border-color: #b7e4c2; }
.cbt-save.guest { background: #eef4ff; border-color: #c7d6fb; }
.cbt-save.err { background: #fff4ed; border-color: #fdcfae; }

/* ===== Student dashboard ===== */
.sd-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: #fff; padding: 26px 0 0; }
.sd-hero-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sd-av { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .5); font-size: 28px; }
.sd-hi { flex: 1 1 240px; min-width: 0; }
.sd-hi h1 { color: #fff; font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 4px; }
.sd-hi p { color: #dbeafe; margin: 0; font-size: 14px; }
.sd-hero-act { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-hero-act .btn-sm { background: var(--orange); }
.sd-hero-act .btn-sm:hover { background: #e0650a; }
.sd-hero-act .ghost-w { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); }
.sd-hero-act .ghost-w:hover { background: rgba(255, 255, 255, .24); }
.sd-tabs { display: flex; gap: 4px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; }
.sd-tabs a { color: #dbeafe; padding: 10px 16px; border-radius: 12px 12px 0 0; font: 600 14px var(--font-head); white-space: nowrap; }
.sd-tabs a.on, .sd-tabs a:hover { background: var(--bg); color: var(--navy); }
.sd-body { display: grid; gap: 18px; padding-top: 20px; padding-bottom: 40px; }
.sd .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sd-card { padding: 18px 20px; min-width: 0; }
.sd-card h2 { font-size: 17px; margin: 0 0 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sd-card h2 small { font: 500 12px var(--font); color: var(--muted); }
.sd-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; scroll-margin-top: 90px; }
.sd-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 4px; min-width: 0; }
.sd-stat b { font: 700 26px var(--font-head); color: var(--ink); line-height: 1.1; }
.sd-stat small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-si { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.sd-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.sd-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sd-bars li { display: grid; grid-template-columns: minmax(0, 42%) 1fr 42px; align-items: center; gap: 10px; font-size: 13px; }
.sd-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.sd-bt { height: 10px; background: var(--tint); border-radius: 999px; overflow: hidden; }
.sd-bt i { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.sd-bars b { text-align: right; color: var(--ink); }
.sd-donut { position: relative; width: 170px; margin: 0 auto; }
.sd-donut svg { display: block; width: 100%; }
.sd-donut circle { transition: opacity .2s; }
.sd-dc { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.sd-dc b { font: 700 26px var(--font-head); color: var(--ink); }
.sd-dc small { color: var(--muted); font-size: 12px; }
.sd-legend { list-style: none; display: flex; justify-content: center; gap: 18px; margin: 14px 0 0; padding: 0; font-size: 13px; color: var(--text); }
.sd-legend li { display: flex; align-items: center; gap: 6px; }
.sd-legend i { width: 10px; height: 10px; border-radius: 3px; }
.sd-trend { display: block; width: 100%; height: auto; }
.sd-trend .g { stroke: var(--line); stroke-width: 1; }
.sd-trend .ax { fill: var(--muted); font-size: 11px; }
.sd-trend .ln { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sd-trend .ar { fill: var(--blue); opacity: .08; }
.sd-trend .pt circle { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.sd-trend .pt .hit { fill: transparent; stroke: none; cursor: pointer; }
.sd-trend .pt:hover circle:first-child { r: 6.5; }
.sd-trend .lv { fill: var(--ink); font: 700 13px var(--font-head); }
.sd-big { font: 600 18px var(--font-head); margin: 0 0 12px; color: var(--ink); }
.sd-big b { font-size: 34px; }
.sd-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.sd-week i { display: grid; place-items: center; aspect-ratio: 1; max-width: 34px; margin: 0 auto 4px; border-radius: 50%; background: var(--tint); color: #fff; font-style: normal; font-weight: 700; font-size: 13px; }
.sd-week .on i { background: var(--orange); }
.sd-week small { color: var(--muted); font-size: 11px; }
.sd-note { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.sd-next { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 20px; background: linear-gradient(135deg, #fff7ed, #fff) !important; border-color: #fed7aa !important; }
.sd-next > div { flex: 1 1 240px; min-width: 0; }
.sd-next h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #c2410c; margin: 0 0 4px; }
.sd-next b { display: block; color: var(--ink); font-size: 16px; }
.sd-next small { color: var(--muted); }
.sd-next-i { font-size: 34px; }
.sd-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sd-filters input, .sd-filters select { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.sd-filters input { flex: 1 1 200px; }
.sd-filters input:focus, .sd-filters select:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring, 0 0 0 3px rgba(31, 79, 214, .2)); }
.sd-tw { overflow-x: auto; }
.sd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sd-table th { text-align: left; font: 600 12px var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 10px; background: var(--bg); }
.sd-table td { padding: 12px 10px; border-top: 1px solid var(--line); vertical-align: middle; color: var(--text); }
.sd-table tr[hidden] { display: none; }
.sd-tn b { display: block; color: var(--ink); }
.sd-tn small { color: var(--muted); font-size: 12px; }
.sd-pct { color: var(--muted); }
.sd-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sd-badge.pass { background: #dcfce7; color: #15803d; }
.sd-badge.fail { background: #ffe4e6; color: #be123c; }
.sd-retake { color: var(--blue); font-weight: 600; white-space: nowrap; }
.sd-none { text-align: center; color: var(--muted); padding: 16px; }
.sd-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sd-badges li { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px; text-align: center; display: grid; gap: 2px; background: var(--bg); }
.sd-badges li span { font-size: 28px; filter: grayscale(1); opacity: .45; }
.sd-badges li b { font-size: 14px; color: var(--muted); }
.sd-badges li small { font-size: 12px; color: var(--muted); }
.sd-badges li em { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 12px; }
.sd-badges li.got { background: #fffbeb; border-color: #fde68a; }
.sd-badges li.got span { filter: none; opacity: 1; }
.sd-badges li.got b { color: var(--ink); }
.sd-empty { text-align: center; padding: 34px 20px; }
.sd-empty-i { font-size: 46px; }
.sd-empty h2 { margin: 6px 0; }
.sd-empty p { color: var(--muted); max-width: 440px; margin: 0 auto 16px; }
#history, #achievements { scroll-margin-top: 90px; }
@media (max-width: 960px) {
  .sd-stats { grid-template-columns: repeat(3, 1fr); }
  .sd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sd-hero { padding-top: 18px; }
  .sd-av { width: 54px; height: 54px; }
  .sd-hero-act { width: 100%; }
  .sd-hero-act .btn-sm { flex: 1; }
  .sd-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sd-stats .sd-stat:last-child { grid-column: 1 / -1; }
  .sd-card { padding: 16px 14px; }
  .sd-bars li { grid-template-columns: 1fr 42px; }
  .sd-bars .sd-bl { grid-column: 1 / -1; }
  /* history rows become cards */
  .sd-table thead { display: none; }
  .sd-table, .sd-table tbody, .sd-table tr, .sd-table td { display: block; }
  .sd-table tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .sd-table td { border: 0; padding: 0; font-size: 13px; }
  .sd-table td.sd-tn { grid-column: 1 / -1; }
  .sd-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; }
  .sd-table td:last-child { grid-column: 1 / -1; text-align: right; }
  .sd-table td:last-child:empty { display: none; }
  .sd-trend .ax { font-size: 19px; }
  .sd-trend .lv { font-size: 22px; }
  .sd-trend .ln { stroke-width: 3.5; }
  .sd-trend .pt circle:first-child { r: 7; stroke-width: 3; }
  .sd-badges { grid-template-columns: 1fr 1fr; }
}

/* ===== CBT page: login needed ===== */
.cbt-gate { text-align: center; background: linear-gradient(160deg, #fff 0%, #eef4ff 100%); border: 1px solid #c7d6fb; border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px 20px; }
.cbt-gate-i { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; background: #fff; box-shadow: var(--shadow); }
.cbt-gate h2 { font-size: clamp(20px, 3vw, 26px); margin: 0 0 8px; }
.cbt-gate p { color: var(--text); max-width: 520px; margin: 0 auto 20px; }
.cbt-gate-btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border: 1px solid #dadce0; border-radius: 999px; padding: 13px 26px; font: 600 16px var(--font-head); box-shadow: 0 2px 6px rgba(11, 20, 48, .12); transition: box-shadow .2s, transform .2s; }
.cbt-gate-btn:hover { box-shadow: 0 6px 18px rgba(31, 79, 214, .22); transform: translateY(-1px); }
.cbt-gate-pts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; color: var(--muted); font-size: 14px; }

/* ===== Header fit: the logo and the buttons are never squeezed under the menu ===== */
@media (min-width: 1024px) {
  .site-header .logo, .nav-actions { flex-shrink: 0; }
  .site-header .logo-text small { white-space: nowrap; }
  .main-nav { min-width: 0; }
}
@media (min-width: 1280px) {
  .site-header .container { max-width: 1320px; }
  .site-header .nav-wrap { gap: 12px; }
}
/* small laptops: logo mark only and a round Google button */
@media (min-width: 1024px) and (max-width: 1179px) {
  .site-header .logo-text { display: none; }
  .main-nav a, .main-nav button { padding-left: 4px; padding-right: 4px; }
  .st-login { width: 38px; padding: 0; justify-content: center; }
  .st-login span { display: none; }
}
/* safety net when the admin adds more menu items than fit (set by main.js) */
.nav-tight .site-header .logo-text small { display: none; }
.nav-tight .st-login { width: 38px; padding: 0; justify-content: center; }
.nav-tight .st-login span, .nav-tight .st-chip-n { display: none; }
.nav-tight .st-chip { padding: 3px; }
.nav-tight .main-nav a, .nav-tight .main-nav button { padding-left: 4px; padding-right: 4px; }
.nav-tight.nav-tight2 .site-header .logo-text { display: none; }

/* ===== New wide ITIExam logo ===== */
.logo .logo-full { display: block; height: 42px; width: auto; max-width: 62vw; object-fit: contain; }
.logo picture { display: block; }
@media (max-width: 380px) { .logo .logo-full { height: 36px; } }
@media (min-width: 1024px) and (max-width: 1179px) { .site-header .logo .logo-full { height: 46px; } }
@media (min-width: 1180px) { .site-header .logo .logo-full { height: 46px; } }
@media (min-width: 1366px) { .site-header .logo .logo-full { height: 52px; } }
.nav-tight .site-header .logo .logo-full { height: 40px; }
.nav-tight.nav-tight2 .site-header .logo .logo-full { height: 34px; }
/* footer: the logo sits on its own white card */
.logo.light .logo-full { height: 64px; max-width: 100%; background: #fff; padding: 8px 12px; border-radius: 14px; box-sizing: content-box; }

/* ===== Android app ===== */
.play-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 18px 8px 14px; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; line-height: 1.1; transition: transform .2s, box-shadow .2s; }
.play-badge:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); color: #fff; }
.play-badge small { display: block; font-size: 10px; letter-spacing: .06em; opacity: .85; }
.play-badge b { display: block; font: 600 18px var(--font-head); }
.app-back { max-width: 520px; margin: 30px auto; text-align: center; }
.app-back-i { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #15803d; font-size: 36px; font-weight: 700; }
.app-back h1 { font-size: 24px; margin-bottom: 6px; }
.app-back p { margin-bottom: 18px; }
/* inside the app: no "open in a new tab" (the app has no tabs) */
.in-app .cbt-bar a[target="_blank"] { display: none; }

/* ===== "Get the app" bar (Android phones) ===== */
.app-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(11, 20, 48, .06); position: relative; z-index: 61; }
.app-bar[hidden] { display: none; }
.app-bar img { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.app-bar-x { border: 0; background: none; color: var(--muted); font-size: 14px; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; cursor: pointer; }
.app-bar-t { flex: 1; min-width: 0; line-height: 1.2; }
.app-bar-t b { display: block; font: 700 14px var(--font-head); color: var(--ink); }
.app-bar-t small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar-go { background: linear-gradient(135deg, var(--orange), #fb9a1f); color: #fff; font: 700 13px var(--font-head); padding: 8px 16px; border-radius: 999px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(247, 116, 15, .3); }
.app-bar-go:hover { color: #fff; }

/* footer "Download ITI Exam App" */
.foot-app { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; margin-right: 8px; padding: 8px 18px 8px 12px; border-radius: 12px; background: linear-gradient(135deg, var(--orange), #fb9a1f); color: #fff; line-height: 1.15; box-shadow: 0 8px 20px rgba(247, 116, 15, .3); transition: transform .2s; }
.foot-app:hover { transform: translateY(-1px); color: #fff; }
.foot-app > span:first-child { font-size: 24px; }
.foot-app small { display: block; font-size: 11px; opacity: .9; }
.foot-app b { display: block; font: 700 15px var(--font-head); }

/* ===== /app/ download page ===== */
.appp-hero { background: radial-gradient(circle at 85% 15%, rgba(61, 111, 240, .55) 0, transparent 45%), linear-gradient(135deg, #071a4a 0%, var(--navy) 50%, var(--blue) 100%); color: #fff; padding: 48px 0 0; overflow: hidden; }
.appp-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: end; }
.appp-copy { padding-bottom: 56px; }
.appp-tag { display: inline-block; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.appp-hero h1 { color: #fff; font-size: clamp(36px, 6vw, 60px); line-height: 1.05; margin: 14px 0 12px; }
.appp-hero h1 span { color: var(--amber); }
.appp-lead { color: #dbeafe; font-size: 17px; max-width: 520px; margin: 0 0 22px; }
.appp-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.appp-meta span { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 8px 14px; font-size: 12px; color: #c7d2fe; text-align: center; min-width: 74px; }
.appp-meta b { display: block; color: #fff; font: 700 16px var(--font-head); }
.appp-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.appp-dl { display: inline-flex; align-items: center; gap: 12px; padding: 12px 26px 12px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--orange), #fb9a1f); color: #fff; line-height: 1.15; box-shadow: 0 14px 30px rgba(247, 116, 15, .45); transition: transform .2s, box-shadow .2s; }
.appp-dl:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 18px 36px rgba(247, 116, 15, .55); }
.appp-dl small { display: block; font-size: 12px; opacity: .9; }
.appp-dl b { display: block; font: 800 20px var(--font-head); }
.appp-dl.sm { padding: 12px 24px; font: 700 15px var(--font-head); }
.play-badge.big { margin-top: 0; padding: 10px 20px 10px 16px; }
.appp-safe { color: #c7d2fe; font-size: 13px; margin: 16px 0 0; }
.appp-soon, .appp-inapp { background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 12px 16px; display: inline-block; font-weight: 600; }
.appp-phone { position: relative; height: 470px; }
.appp-frame { position: absolute; width: 240px; border-radius: 34px; padding: 10px; background: #0b1430; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 2px #2a3558; }
.appp-frame img { display: block; width: 100%; height: auto; border-radius: 26px; }
.appp-phone .appp-frame { left: 50%; bottom: -60px; transform: translateX(-30%); z-index: 2; }
.appp-phone .appp-frame.back { transform: translateX(-95%) rotate(-8deg) scale(.88); bottom: -90px; z-index: 1; opacity: .9; }
.appp-badge-float { position: absolute; right: 4%; top: 70px; z-index: 3; background: #fff; color: var(--ink); font: 700 14px var(--font-head); padding: 10px 16px; border-radius: 14px; box-shadow: var(--shadow-h); animation: appfloat 3s ease-in-out infinite; }
@keyframes appfloat { 50% { transform: translateY(-8px); } }
.appp .sec-head.center { justify-content: center; text-align: center; }
.appp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.appp-feat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; transition: transform .2s, box-shadow .2s; }
.appp-feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.appp-fi { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: color-mix(in srgb, var(--c) 14%, #fff); margin-bottom: 12px; }
.appp-feat b { display: block; font: 700 17px var(--font-head); color: var(--ink); margin-bottom: 4px; }
.appp-feat p { margin: 0; color: var(--muted); font-size: 14px; }
.appp-shots-sec { background: linear-gradient(180deg, transparent, var(--tint)); }
.appp-shots { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 22px; scroll-snap-type: x mandatory; justify-content: safe center; }
.appp-shots figure { margin: 0; flex: 0 0 auto; scroll-snap-align: center; text-align: center; }
.appp-frame.sm { position: relative; width: 190px; border-radius: 28px; padding: 8px; box-shadow: 0 16px 34px rgba(11, 20, 48, .25), inset 0 0 0 2px #2a3558; }
.appp-frame.sm img { border-radius: 21px; }
.appp-shots figcaption { margin-top: 10px; font: 600 14px var(--font-head); color: var(--ink); }
.appp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.appp-steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.appp-steps span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; font: 700 18px var(--font-head); margin-bottom: 10px; }
.appp-steps li > b { display: block; font: 700 17px var(--font-head); color: var(--ink); margin-bottom: 4px; }
.appp-steps p b { color: var(--ink); }
.appp-steps p { margin: 0; color: var(--muted); font-size: 14px; }
.appp-again { text-align: center; margin-top: 22px; }
.appp-faq { max-width: 760px; }
.appp-faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 10px; box-shadow: var(--shadow); }
.appp-faq summary { font: 600 16px var(--font-head); color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.appp-faq summary::-webkit-details-marker { display: none; }
.appp-faq summary::after { content: "+"; color: var(--blue); font-size: 20px; line-height: 1; }
.appp-faq details[open] summary::after { content: "–"; }
.appp-faq details p { margin: 10px 0 0; color: var(--text); }
@media (max-width: 899px) {
  .appp-hero { padding-top: 30px; }
  .appp-hero-in { grid-template-columns: 1fr; gap: 0; }
  .appp-copy { padding-bottom: 20px; }
  .appp-phone { height: 290px; }
  .appp-frame { width: 200px; }
  .appp-phone .appp-frame { bottom: -120px; }
  .appp-phone .appp-frame.back { bottom: -150px; }
  .appp-badge-float { top: 0; right: 2%; }
  .appp-feats, .appp-steps { grid-template-columns: 1fr; }
  .appp-dl { width: 100%; justify-content: center; }
  .appp-shots { justify-content: flex-start; }
}

/* ===== Video Learning (trade pages) ===== */
.vsec .sec-head h2 { display: flex; align-items: center; gap: 8px; }
.vsec .sec-head h2 .ic { color: #e11d48; }
.vcount { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--tint); padding: 4px 12px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.vtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.vtabs button { border: 1px solid var(--line); background: #fff; color: var(--text); font: 600 13px var(--font-head); padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: .2s; }
.vtabs button.on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 14px rgba(31, 79, 214, .25); }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vcard { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s; }
.vcard[hidden] { display: none; }
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); color: var(--ink); }
.vsec:not(.expanded):not(.filtered) .vcard.vmore { display: none; }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--navy), var(--blue)); overflow: hidden; }
.vthumb img, .vthumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); pointer-events: none; }
.vcard:hover .vthumb img, .vcard:hover .vthumb video { transform: scale(1.05); }
.vph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .25); font-size: 64px; }
.vplay { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(225, 29, 72, .92); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); transition: transform .2s; }
.vplay svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.vcard:hover .vplay { transform: scale(1.1); }
.vdur { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.vsrc-yt { position: absolute; left: 8px; top: 8px; background: rgba(255, 255, 255, .92); color: #e11d48; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.vbody { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.vbody b { font: 600 15px/1.35 var(--font-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vbody small { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vbody em { align-self: flex-start; font-style: normal; font-size: 11px; font-weight: 700; color: var(--blue); background: var(--tint); padding: 2px 8px; border-radius: 6px; margin-top: 2px; }
.vall { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 16px; padding: 12px; border: 1px dashed #c7d6fb; border-radius: 12px; background: var(--tint); color: var(--blue); font: 600 14px var(--font-head); cursor: pointer; }
.vall:hover { background: #e3ebff; }
/* player pop-up */
.vmodal { position: fixed; inset: 0; z-index: 200; background: rgba(4, 10, 30, .82); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: fade .2s var(--ease); }
.vmodal[hidden] { display: none; }
body.vm-open { overflow: hidden; }
.vm-box { width: min(960px, 100%); background: #0b1430; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.vm-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; color: #fff; }
.vm-head b { flex: 1; min-width: 0; font: 600 15px var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.vm-x:hover { background: rgba(255, 255, 255, .22); }
.vm-frame { aspect-ratio: 16 / 9; background: #000; }
.vm-frame iframe, .vm-frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.vm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; color: #c7d2fe; font-size: 13px; }
.vm-foot span { display: inline-flex; align-items: center; gap: 6px; }
.vm-yt { color: #fff; font-weight: 600; }
.vm-yt[hidden] { display: none; }
@media (max-width: 899px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .vgrid { grid-template-columns: 1fr; gap: 12px; }
  .vcard { flex-direction: row; align-items: stretch; }
  .vcard .vthumb { width: 46%; flex-shrink: 0; aspect-ratio: 16 / 10; }
  .vplay { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .vplay svg { width: 20px; height: 20px; }
  .vsrc-yt { display: none; }
  .vbody { padding: 10px 12px; }
  .vbody b { font-size: 14px; }
  .vbody small { -webkit-line-clamp: 1; }
  .vmodal { padding: 0; place-items: center; }
  .vm-box { border-radius: 0; }
}
.cbt-admin-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 14px; }
.cbt-admin-note a { color: #c2410c; font-weight: 600; text-decoration: underline; }

/* =========================================================
   Animated homepage hero
   ========================================================= */
.hero-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-fx .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.hero-fx .b1 { width: 420px; height: 420px; right: -80px; top: -120px; background: #3d6ff0; animation: blobA 16s ease-in-out infinite; }
.hero-fx .b2 { width: 360px; height: 360px; left: -120px; bottom: -160px; background: #f7740f; opacity: .35; animation: blobB 19s ease-in-out infinite; }
.hero-fx .b3 { width: 260px; height: 260px; left: 38%; top: 30%; background: #7c3aed; opacity: .25; animation: blobC 22s ease-in-out infinite; }
@keyframes blobA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-90px, 70px) scale(1.15); } }
@keyframes blobB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(120px, -60px) scale(1.2); } }
@keyframes blobC { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-80px, 40px); } 66% { transform: translate(60px, -50px); } }
/* a soft light sweeping across now and then */
.hero-fx .beam { position: absolute; top: -40%; left: -30%; width: 30%; height: 180%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); animation: beam 9s ease-in-out infinite 2s; }
@keyframes beam { 0% { left: -30%; } 45%, 100% { left: 130%; } }
.hero-live .hero-grid { z-index: 1; }

/* everything comes in one after another */
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } }
.hero-live .hero-copy > * { animation: heroIn .7s var(--ease) both; }
.hero-live .hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-live .hero-copy > :nth-child(2) { animation-delay: .18s; }
.hero-live .hero-copy > :nth-child(3) { animation-delay: .3s; }
.hero-live .hero-copy > :nth-child(4) { animation-delay: .42s; }
.hero-live .hero-stats li { animation: heroIn .6s var(--ease) both; }
.hero-live .hero-stats li:nth-child(1) { animation-delay: .5s; } .hero-live .hero-stats li:nth-child(2) { animation-delay: .58s; }
.hero-live .hero-stats li:nth-child(3) { animation-delay: .66s; } .hero-live .hero-stats li:nth-child(4) { animation-delay: .74s; }
.hero-live .hero-stats li:nth-child(5) { animation-delay: .82s; } .hero-live .hero-stats li:nth-child(6) { animation-delay: .9s; }
.hero-live .hero-art { animation: heroArt 1s var(--ease) both .2s; }
@keyframes heroArt { from { opacity: 0; transform: scale(.9); } }
.hero-live .quick-links { animation: heroIn .8s var(--ease) both .35s; }
.hero-live .quick-links a { animation: qlIn .5s var(--ease) both; }
@keyframes qlIn { from { opacity: 0; transform: translateX(16px); } }
.hero-live .quick-links a:nth-child(1) { animation-delay: .55s; } .hero-live .quick-links a:nth-child(2) { animation-delay: .62s; }
.hero-live .quick-links a:nth-child(3) { animation-delay: .69s; } .hero-live .quick-links a:nth-child(4) { animation-delay: .76s; }
.hero-live .quick-links a:nth-child(5) { animation-delay: .83s; } .hero-live .quick-links a:nth-child(6) { animation-delay: .9s; }
.hero-live .quick-links a:nth-child(7) { animation-delay: .97s; }

/* shining, changing highlight word (the wrapper moves, the word itself only shines – gradient text
   does not draw well while the same element fades) */
.hero-live .rotw { display: inline-block; transition: opacity .35s, transform .35s var(--ease); }
.hero-live .rotw.out { opacity: 0; transform: translateY(-14px); }
.hero-live .rotw.in { opacity: 0; transform: translateY(14px); transition: none; }
.hero-live .grad.rot { background-size: 220% 100%; animation: shine 4s linear infinite; }
@keyframes shine { to { background-position: -220% 0; } }

/* logo: second ring turns the other way, two dots orbit it */
.hero-live .art-ring.r2 { animation: spin 70s linear infinite reverse; border-style: dashed; }
.art-orbit { position: absolute; left: 50%; top: 56%; border-radius: 50%; transform: translate(-50%, -50%); animation: spin 9s linear infinite; }
.art-orbit.o-a { width: 250px; height: 250px; }
.art-orbit.o-b { width: 310px; height: 310px; animation-duration: 14s; animation-direction: reverse; }
.art-orbit i { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px 3px rgba(251, 177, 23, .7); }
.art-orbit.o-b i { background: #7dd3fc; box-shadow: 0 0 12px 3px rgba(125, 211, 252, .7); }
.hero-live .art-glow { animation: glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.12); } }

/* floating cards pop in, then keep floating */
@keyframes popIn { from { opacity: 0; transform: scale(.6) translateY(10px); } }
.hero-live .fcard.f1 { animation: popIn .6s cubic-bezier(.34, 1.56, .64, 1) both 1s, float 5s ease-in-out infinite 1.6s; }
.hero-live .fcard.f2 { animation: popIn .6s cubic-bezier(.34, 1.56, .64, 1) both 1.3s, float 5s ease-in-out infinite 1.9s; }
.hero-live .fcard.f4 { animation: popIn .6s cubic-bezier(.34, 1.56, .64, 1) both 1.6s, float 5s ease-in-out infinite 2.2s; }
.hero-live .quote { animation: heroIn .8s var(--ease) both 1.1s; }

/* search box: a soft glow while it is waiting */
.hero-live .hero-copy > .search { animation: heroIn .7s var(--ease) both .3s, searchGlow 3.5s ease-in-out infinite 1.5s; }
@keyframes searchGlow { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 18px 40px rgba(2, 8, 30, .35); } }

/* ===== Trade MCQ dashboard (top of the Mock Tests card) ===== */
.mtd { display: grid; gap: 10px; margin: 2px 0 12px; }
.mtd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.mtd-stats li { position: relative; overflow: hidden; padding: 10px 12px; border-radius: 12px; background: var(--grad-brand); color: #fff; }
.mtd-stats li:nth-child(2) { background: linear-gradient(135deg, #0e9f8e, #12708f); }
.mtd-stats li:last-child { background: var(--grad-warm); }
.mtd-stats li::after { content: ""; position: absolute; right: -18px; top: -18px; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.mtd-stats b { display: block; font: 700 20px/1.15 var(--font-head); }
.mtd-stats small { font-size: 11.5px; opacity: .9; }
.mtd-me { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint); }
.mtd-me .btn-sm { margin-left: auto; flex: none; }
.mtd-ring { --p: 0; flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), #dfe6f5 0); }
.mtd-ring b { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font: 700 15px var(--font-head); color: var(--ink); }
.mtd-ring b small { font-size: 10px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.mtd-txt { display: grid; min-width: 0; }
.mtd-txt b { font: 600 14px var(--font-head); color: var(--ink); }
.mtd-txt small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.mine { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.mine.ok { background: #dcfce7; color: #15803d; }
.mine.low { background: #fee2e2; color: #b91c1c; }
@media (max-width: 480px) {
  .mtd-stats { gap: 6px; }
  .mtd-stats li { padding: 9px 10px; }
  .mtd-stats b { font-size: 18px; }
  .mtd-stats small { font-size: 11px; white-space: nowrap; }
  .mtd-me { display: grid; grid-template-columns: auto 1fr; }
  .mtd-me .btn-sm { grid-column: 1 / -1; margin: 0; justify-content: center; }
}
.rt small .nw { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ===== CBT test page: one dark "exam hall" around the test ===== */
.cbt-stage { position: relative; overflow: hidden; color: #e2e8f0; padding: 22px 0 34px;
  background:
    radial-gradient(620px 340px at 88% 0%, rgba(61, 111, 240, .45), transparent 70%),
    radial-gradient(520px 320px at 0% 100%, rgba(247, 116, 15, .16), transparent 70%),
    linear-gradient(160deg, #06143c 0%, #0a1f5c 55%, #0b2a6f 100%); }
.cbt-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.cbt-stage > .container { position: relative; display: grid; gap: 16px; }
.cbt-stage .crumbs { margin: 0; }
.cbt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.cbt-head h1 { margin: 0; color: #fff; font-size: clamp(24px, 3.6vw, 36px); line-height: 1.15; }
.cbt-stage .cbt-trade { background: linear-gradient(135deg, #22c55e, var(--green)); box-shadow: 0 6px 16px rgba(42, 166, 58, .35); }
.cbt-stage .cbt-meta { margin-top: 12px; gap: 8px; }
.cbt-stage .cbt-meta span { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; padding: 5px 12px; }
.cbt-stage .cbt-meta .free { background: rgba(251, 177, 23, .16); border-color: rgba(251, 177, 23, .4); color: #fde68a; }
.cbt-stage .cbt-bar { gap: 8px; }
.cbt-act { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font: 600 14px var(--font-head); transition: background .2s, transform .2s; }
.cbt-act:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.cbt-act.main { background: var(--grad-warm); border-color: transparent; color: #2a1600; box-shadow: 0 8px 20px rgba(247, 116, 15, .35); }
.cbt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.cbt-stage .cbt-frame { background: #0b1d4f; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; box-shadow: 0 24px 60px rgba(2, 8, 30, .55); }
.cbt-win { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; color: #cbd5e1; }
.cbt-win i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.cbt-win i:nth-child(2) { background: #f59e0b; } .cbt-win i:nth-child(3) { background: #22c55e; }
.cbt-win span { flex: 1; min-width: 0; margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cbt-win b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #86efac; }
.cbt-win .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.cbt-stage .cbt-frame iframe { background: #0b1d4f; height: max(600px, calc(100vh - 150px)); }
.cbt-frame:fullscreen .cbt-win, .cbt-frame.max .cbt-win { display: none; }
.cbt-stage .cbt-frame:fullscreen iframe { height: 100vh; }
.cbt-stage .cbt-frame.max iframe { height: 100%; }
.cbt-side { display: grid; gap: 12px; position: sticky; top: 84px; }
.cs-card { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }
.cs-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #fff; font-size: 15px; }
.cs-card h2 .ic { color: var(--amber); }
.cs-dl { display: grid; gap: 0; margin: 0; }
.cs-dl div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px dashed rgba(255, 255, 255, .12); font-size: 13.5px; }
.cs-dl div:first-child { border-top: 0; }
.cs-dl dt { color: #94a3b8; } .cs-dl dd { margin: 0; color: #fff; font-weight: 600; text-align: right; }
.cs-dl dd.ok { color: #86efac; }
.cs-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 9px; font-size: 13px; color: #cbd5e1; line-height: 1.45; }
.cs-steps li { counter-increment: st; display: grid; grid-template-columns: 22px 1fr; gap: 9px; }
.cs-steps li::before { content: counter(st); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(251, 177, 23, .18); color: var(--amber); font: 700 11.5px var(--font-head); }
.cs-me { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(34, 197, 94, .16), rgba(255, 255, 255, .05)); }
.cs-me div { display: grid; }
.cs-me b { color: #fff; font: 700 18px var(--font-head); }
.cs-me small { color: #cbd5e1; font-size: 12px; }
.cs-me a { color: #fde68a; text-decoration: underline; }
.cs-me .mtd-ring { background: conic-gradient(#22c55e calc(var(--p) * 1%), rgba(255, 255, 255, .15) 0); }
.cs-all { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; color: var(--blue); font: 600 14px var(--font-head); box-shadow: 0 10px 24px rgba(2, 8, 30, .35); transition: transform .2s; }
.cs-all:hover { transform: translateY(-2px); }
.cbt-stage .cbt-gate { padding: 56px 20px; }
.cbt-stage .cbt-admin-note { margin: 0; }
.cbt-more .cm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.cm-grid a { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.cm-grid a:hover { border-color: #c7d6fb; box-shadow: var(--shadow); transform: translateY(-2px); }
.cm-grid .ri.solid { background: var(--c); color: #fff; }
.cm-grid .rt { min-width: 0; flex: 1; }
.cm-grid .rt small { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 12.5px; }
.cm-grid .btn-sm { flex: none; }
@media (max-width: 1023px) {
  .cbt-layout { grid-template-columns: 1fr; }
  .cbt-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .cbt-stage .cbt-frame iframe { height: calc(100vh - 120px); min-height: 560px; }
}
@media (max-width: 560px) {
  .cbt-stage { padding: 16px 0 24px; }
  .cbt-head { align-items: stretch; }
  .cbt-stage .cbt-bar { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .cbt-act { justify-content: center; }
  .cbt-stage .cbt-frame { border-radius: 14px; margin-inline: -6px; }
  .cbt-more .cm-grid { grid-template-columns: 1fr; }
}
.in-app .cbt-bar a[target="_blank"] { display: none; }
.in-app .cbt-stage .cbt-bar { grid-template-columns: 1fr; }
.cs-me .mtd-ring b { color: var(--ink); font-size: 14px; }
.cbt-gate p.cbt-gate-mr { margin-top: -10px; font-size: 14px; color: var(--muted); }