:root {
  --navy: #062a40;
  --navy-2: #0b3e5b;
  --blue: #0a6f98;
  --turquoise: #08a7a5;
  --turquoise-dark: #078a89;
  --sky: #eaf7fb;
  --sand: #f7f2e8;
  --white: #ffffff;
  --ink: #102532;
  --muted: #5d6d77;
  --line: #d8e4e9;
  --success: #1c7c54;
  --warning: #a65d00;
  --shadow: 0 18px 55px rgba(2, 35, 55, .12);
  --radius: 22px;
  --radius-sm: 14px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(8,167,165,.45);
  outline-offset: 3px;
}

.container { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }
.section { padding: 92px 0; }
.section-sm { padding: 64px 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--turquoise); }
h1, h2, h3 { line-height: 1.12; margin: 0; color: var(--navy); }
h1 { font-size: clamp(2.55rem, 6vw, 5.3rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.035em; }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); max-width: 740px; }
.section-heading { display: grid; gap: 18px; margin-bottom: 44px; }
.center { text-align: center; justify-items: center; }
.home-page .section-heading { text-align: center; justify-items: center; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

.skip-link {
  position: absolute; left: 16px; top: -80px; background: var(--navy); color: white; padding: 10px 14px; z-index: 1000;
}
.skip-link:focus { top: 16px; }

.topbar { background: var(--navy); color: rgba(255,255,255,.9); font-size: .9rem; }
.topbar .container { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.topbar strong { color: white; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(216,228,233,.8);
}
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 900; color: var(--navy); }
.brand-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg,var(--navy),var(--blue)); color: white; box-shadow: 0 10px 25px rgba(6,42,64,.2); }
.brand-text span { display: block; line-height: 1.05; }
.brand-text small { color: var(--muted); font-weight: 650; font-size: .71rem; letter-spacing: .04em; }
.nav-menu { display: flex; align-items: center; gap: 25px; }
.nav-menu a { font-weight: 750; color: #2d4655; font-size: .94rem; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; color: var(--navy); }

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 850;
  transition: .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: white; background: linear-gradient(135deg,var(--turquoise),var(--blue)); box-shadow: 0 12px 24px rgba(8,167,165,.24); }
.btn-primary:hover { box-shadow: 0 16px 30px rgba(8,167,165,.32); }
.btn-secondary { color: var(--navy); background: white; border-color: var(--line); }
.btn-secondary:hover { border-color: var(--turquoise); }
.access-link { color: #3b2a00; background: #ffd447; border-color: #e6b900; box-shadow: 0 10px 22px rgba(230,185,0,.28); }
.access-link:hover { background: #ffca18; border-color: #cda500; box-shadow: 0 14px 26px rgba(230,185,0,.36); }
.btn-dark { background: var(--navy); color: white; }
.btn-sm { min-height: 42px; padding-inline: 17px; font-size: .88rem; }
.btn-block { width: 100%; }

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, rgba(8,167,165,.22), transparent 30%),
    linear-gradient(180deg,#f6fcfe 0%,#fff 100%);
  padding: 84px 0 54px;
}
.hero::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -95px;
  height: 170px;
  background: var(--sky);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: .7;
}
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 64px; position: relative; z-index: 1; }
.hero-copy { display: grid; gap: 26px; }
.hero-copy h1 span { color: var(--turquoise-dark); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 18px; color: #3a5665; font-size: .92rem; font-weight: 700; }
.proof-item { display: flex; align-items: center; gap: 8px; }
.proof-icon { width: 22px; height: 22px; border-radius: 50%; background: #dff5ef; color: var(--success); display: grid; place-items: center; font-size: .75rem; }

.hero-visual { position: relative; min-height: 510px; display: grid; place-items: center; }
.nautical-orbit { width: min(100%, 480px); aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(10,111,152,.26); display: grid; place-items: center; position: relative; }
.nautical-orbit::before, .nautical-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(8,167,165,.16); }
.nautical-orbit::before { inset: 52px; }
.nautical-orbit::after { inset: 105px; }
.course-card-visual {
  width: 315px;
  padding: 28px;
  border-radius: 28px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
  position: relative;
  z-index: 3;
}
.course-card-visual .mini-label { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: #def7f4; color: #087b79; font-size: .75rem; font-weight: 850; }
.course-card-visual h3 { font-size: 2rem; margin: 18px 0 8px; }
.visual-price { font-size: 2.4rem; font-weight: 950; color: var(--navy); margin: 16px 0; }
.visual-price small { font-size: .9rem; color: var(--muted); font-weight: 650; }
.progress { height: 9px; border-radius: 999px; background: #e6eff2; overflow: hidden; margin: 18px 0 10px; }
.progress span { display: block; width: 72%; height: 100%; background: linear-gradient(90deg,var(--turquoise),var(--blue)); border-radius: inherit; }
.float-card { position: absolute; background: white; border: 1px solid #edf3f5; border-radius: 16px; box-shadow: 0 16px 35px rgba(5,42,64,.14); padding: 14px 16px; font-weight: 850; color: var(--navy); z-index: 4; }
.float-card small { display: block; color: var(--muted); font-weight: 650; }
.float-one { top: 46px; left: 0; }
.float-two { right: 0; bottom: 80px; }
.compass { position: absolute; right: 34px; top: 90px; width: 84px; height: 84px; border-radius: 50%; background: var(--navy); color: white; display: grid; place-items: center; box-shadow: 0 18px 30px rgba(6,42,64,.2); z-index: 2; }
.compass::after { content: "N"; position: absolute; top: 8px; font-size: .65rem; font-weight: 900; }
.compass-needle { width: 15px; height: 48px; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); background: linear-gradient(to bottom,#ff765e 0 50%,#c7eaf3 50%); transform: rotate(25deg); }

.trust-strip { position: relative; z-index: 2; padding: 35px 0 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); border-radius: var(--radius); background: white; box-shadow: 0 15px 40px rgba(6,42,64,.08); border: 1px solid #edf3f5; overflow: hidden; }
.trust-item { padding: 23px; display: flex; gap: 13px; align-items: center; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.trust-item strong { display: block; color: var(--navy); }
.trust-item small { display: block; color: var(--muted); margin-top: 6px; }
.icon-box { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: var(--sky); color: var(--blue); display: grid; place-items: center; font-weight: 950; }

.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
.card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 10px 28px rgba(6,42,64,.055); }
.feature-card { display: grid; gap: 15px; }
.feature-card .icon-box { width: 52px; height: 52px; border-radius: 16px; }
.feature-card p { color: var(--muted); }

.bg-soft { background: var(--sky); }
.bg-navy { background: var(--navy); color: white; }
.bg-navy h2, .bg-navy h3 { color: white; }
.bg-navy .lead, .bg-navy .muted { color: rgba(255,255,255,.72); }

.course-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: start; }
.module-list { display: grid; gap: 12px; }
.module {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white;
}
.module-num { width: 42px; height: 42px; border-radius: 13px; background: var(--sky); color: var(--blue); display: grid; place-items: center; font-weight: 900; }
.module strong { display: block; }
.module small { display: block; color: var(--muted); margin-top: 6px; }
.module-time { font-weight: 800; font-size: .82rem; color: var(--muted); }

.pricing-card { position: sticky; top: 108px; padding: 32px; border-radius: 28px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.pricing-card .price { font-size: 3.4rem; line-height: 1; font-weight: 950; color: var(--navy); margin: 16px 0 7px; }
.pricing-card .price small { font-size: 1rem; color: var(--muted); font-weight: 650; }
.check-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 13px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list li::before { content: "✓"; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; display: grid; place-items: center; background: #dff5ef; color: var(--success); font-size: .75rem; font-weight: 950; margin-top: 1px; }
.notice { padding: 15px 17px; border-radius: 13px; background: #fff8e8; color: #76510a; font-size: .89rem; }

.teacher { display: grid; grid-template-columns: .78fr 1.22fr; gap: 60px; align-items: center; }
.teacher-portrait { min-height: 470px; border-radius: 32px; background: linear-gradient(145deg,var(--navy),#0a7893); position: relative; overflow: hidden; display: grid; place-items: center; color: white; }
.teacher-portrait::before { content: ""; position: absolute; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.teacher-portrait::after { content: ""; position: absolute; width: 240px; height: 240px; border: 1px dashed rgba(255,255,255,.2); border-radius: 50%; }
.teacher-initials { position: relative; z-index: 2; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; font-size: 3.3rem; font-weight: 950; }
.teacher-badge { position: absolute; bottom: 25px; left: 25px; right: 25px; background: rgba(255,255,255,.95); color: var(--navy); border-radius: 18px; padding: 17px; z-index: 3; }
.teacher-copy { display: grid; gap: 21px; }
.credential-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.credential { padding: 14px; background: var(--sky); border-radius: 13px; color: var(--navy); font-weight: 750; font-size: .93rem; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.step { position: relative; padding: 26px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.step::before { counter-increment: step; content: counter(step); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--turquoise); color: white; font-weight: 950; margin-bottom: 20px; }
.step p { color: rgba(255,255,255,.7); margin-top: 8px; }

.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; }
.price-box { position: relative; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: white; display: grid; align-content: start; gap: 17px; }
.price-box.featured { border: 2px solid var(--turquoise); transform: translateY(-10px); box-shadow: var(--shadow); }
.popular { position: absolute; right: 18px; top: 18px; padding: 6px 10px; border-radius: 999px; background: var(--turquoise); color: white; font-size: .72rem; font-weight: 900; }
.price-box .price { font-size: 2.8rem; font-weight: 950; color: var(--navy); }
.price-box .price small { font-size: .9rem; color: var(--muted); font-weight: 650; }

.chart-exercise-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.chart-exercise { padding: 0; overflow: hidden; }
.chart-exercise img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; background: #dce8eb; }
.chart-exercise > div { padding: 22px; display: grid; grid-template-columns: 42px 1fr; gap: 8px 14px; align-items: center; }
.chart-exercise h3 { grid-column: 2; }
.chart-exercise p { grid-column: 1/-1; margin-top: 4px; }

.faq { display: grid; gap: 12px; max-width: 850px; margin-inline: auto; }
.faq-item { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: white; }
.faq-question { width: 100%; border: 0; background: white; text-align: left; padding: 20px 22px; display: flex; justify-content: space-between; gap: 20px; color: var(--navy); font-weight: 850; }
.faq-question span:last-child { transition: transform .2s ease; }
.faq-item.open .faq-question span:last-child { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 22px 22px; color: var(--muted); }
.faq-item.open .faq-answer { display: block; }

.cta-panel { padding: clamp(35px,6vw,70px); border-radius: 32px; background: linear-gradient(135deg,var(--navy),#0b6681); color: white; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 35px; overflow: hidden; position: relative; }
.cta-panel::after { content: ""; width: 270px; height: 270px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); position: absolute; right: -80px; top: -90px; }
.cta-panel h2 { color: white; }
.cta-panel p { color: rgba(255,255,255,.72); margin-top: 12px; max-width: 700px; }
.cta-panel .btn { position: relative; z-index: 2; }

.page-hero { padding: 74px 0 58px; background: linear-gradient(180deg,#effafd,#fff); }
.page-hero-grid { display: grid; grid-template-columns: 1fr .7fr; align-items: center; gap: 45px; }
.breadcrumb { display: flex; gap: 8px; color: var(--muted); font-size: .9rem; margin-bottom: 16px; }
.breadcrumb a { color: var(--blue); font-weight: 750; }
.metric-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.metric { padding: 20px; background: white; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 10px 25px rgba(6,42,64,.06); }
.metric strong { display: block; font-size: 1.8rem; color: var(--navy); }
.metric small { color: var(--muted); }

.quiz-wrap { max-width: 850px; margin-inline: auto; }
.quiz-card { background: white; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: clamp(24px,5vw,48px); }
.quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.quiz-progress { flex: 1; height: 9px; background: #e6eff2; border-radius: 999px; overflow: hidden; }
.quiz-progress span { display: block; height: 100%; background: linear-gradient(90deg,var(--turquoise),var(--blue)); width: 5%; transition: width .25s ease; }
.answer-list { display: grid; gap: 12px; margin: 25px 0; }
.answer-option { display: flex; gap: 12px; align-items: flex-start; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; transition: .2s; }
.answer-option:hover { border-color: var(--turquoise); background: #f4fcfc; }
.answer-option input { width: auto; flex: 0 0 auto; margin: 5px 0 0; padding: 0; accent-color: var(--turquoise); }
.answer-option span { min-width: 0; overflow-wrap: anywhere; }
.quiz-actions { display: flex; justify-content: space-between; gap: 12px; }
.quiz-result { display: none; text-align: center; }
.result-score { width: 150px; height: 150px; border-radius: 50%; margin: 22px auto; display: grid; place-items: center; background: var(--sky); color: var(--navy); font-size: 2.3rem; font-weight: 950; border: 8px solid white; box-shadow: 0 0 0 2px var(--turquoise); }
.bank-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 34px; align-items: start; }
.bank-selector { display: grid; gap: 18px; position: sticky; top: 108px; }
.bank-buttons { display: grid; gap: 10px; }
.bank-button { width: 100%; text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--navy); }
.bank-button strong, .bank-button small { display: block; }
.bank-button small { color: var(--muted); margin-top: 3px; }
.bank-button.active { border-color: var(--turquoise); background: var(--sky); box-shadow: 0 0 0 2px rgba(8,167,165,.12); }
.bank-quiz { min-width: 0; }
.official-buttons { max-height: 520px; overflow-y: auto; padding-right: 4px; }
.official-meta { display: inline-flex; margin-bottom: 15px; padding: 7px 11px; border-radius: 999px; background: var(--sky); color: var(--blue); font-size: .78rem; font-weight: 800; }
.review-list { display: grid; gap: 12px; margin-top: 30px; text-align: left; }
.review-item { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: white; }
.review-item.correct { border-left: 5px solid var(--success); }
.review-item.incorrect { border-left: 5px solid #c7473b; }
.review-item p { margin-top: 7px; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: grid; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
label { color: var(--navy); font-weight: 800; font-size: .92rem; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; color: var(--ink); background: white; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--turquoise); box-shadow: 0 0 0 3px rgba(8,167,165,.12); }
textarea { min-height: 145px; resize: vertical; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--muted); }
.consent input { width: auto; margin-top: 5px; }
.form-status { display: none; padding: 13px; border-radius: 12px; background: #dff5ef; color: var(--success); font-weight: 750; }

.legal { max-width: 900px; }
.legal h2 { font-size: 1.65rem; margin: 34px 0 12px; }
.legal h3 { margin: 24px 0 8px; }
.legal p, .legal li { color: #405866; }
.legal ul { padding-left: 22px; }
.placeholder { display: inline-block; padding: 1px 5px; border-radius: 5px; background: #fff1cf; color: #7c5200; font-weight: 750; }

.site-footer { background: #041e2e; color: rgba(255,255,255,.72); padding: 68px 0 25px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid h3 { color: white; font-size: 1rem; margin-bottom: 17px; }
.footer-links { display: grid; gap: 10px; }
.footer-links a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 18px; font-size: .86rem; }
.footer-brand .brand { color: white; margin-bottom: 15px; }
.footer-brand p { max-width: 360px; }

.toast { position: fixed; right: 20px; bottom: 20px; background: var(--navy); color: white; padding: 15px 18px; border-radius: 13px; box-shadow: var(--shadow); z-index: 200; transform: translateY(130%); transition: .25s ease; max-width: 340px; }
.toast.show { transform: translateY(0); }

.cookie-banner { position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 300; max-width: 980px; margin-inline: auto; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 18px; padding: 18px; display: none; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.cookie-banner.show { display: grid; }
.cookie-actions { display: flex; gap: 9px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .nav-menu { position: fixed; inset: 78px 16px auto; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; display: none; flex-direction: column; align-items: stretch; }
  .nav-menu.open { display: flex; }
  .menu-toggle { display: block; }
  .nav-actions .btn-secondary { display: none; }
  .nav-actions a[href="login.html"] { display: inline-flex; }
  .hero-grid, .course-layout, .teacher, .page-hero-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 58px; }
  .hero-visual { min-height: 460px; }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .trust-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .trust-item:nth-child(4) { border-top: 1px solid var(--line); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-card { position: static; }
  .bank-layout { grid-template-columns: 1fr; }
  .bank-selector { position: static; }
  .bank-buttons { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 720px) {
  .section { padding: 70px 0; }
  .grid-3, .grid-2, .price-grid { grid-template-columns: 1fr; }
  .price-box.featured { transform: none; }
  .chart-exercise-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item + .trust-item { border-left: 0; border-top: 1px solid var(--line); }
  .hero-visual { min-height: 420px; }
  .nautical-orbit { width: 380px; max-width: 100%; }
  .course-card-visual { width: 270px; padding: 22px; }
  .float-one { left: 4px; top: 30px; }
  .float-two { right: 3px; bottom: 50px; }
  .compass { right: 12px; top: 75px; }
  .steps { grid-template-columns: 1fr; }
  .credential-grid, .metric-grid, .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: auto; }
  .cta-panel { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .cookie-banner { grid-template-columns: 1fr; }
  .quiz-card { padding: 22px 16px; }
  .quiz-top { align-items: flex-start; flex-direction: column; gap: 10px; }
  .quiz-progress { width: 100%; flex: none; }
  .answer-option { padding: 14px 12px; }
  .quiz-actions .btn { min-width: 0; padding-inline: 17px; }
  .bank-buttons { grid-template-columns: 1fr; }
  .module { grid-template-columns: 42px 1fr; }
  .module-time { grid-column: 2; }
  .nav-actions .btn-primary { display: none; }
}
/* Private access */
.auth-hero{min-height:calc(100vh - 170px);display:grid;align-items:center}.auth-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}.auth-card,.admin-card{background:#fff;border:1px solid rgba(8,43,60,.12);border-radius:24px;padding:32px;box-shadow:0 20px 60px rgba(8,43,60,.12)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#eef7f8;border-radius:12px;padding:4px;margin-bottom:24px}.auth-tab{border:0;background:transparent;padding:12px;border-radius:9px;font:inherit;font-weight:700;color:#48636e;cursor:pointer}.auth-tab.active{background:#fff;color:#07384b;box-shadow:0 3px 12px rgba(8,43,60,.1)}.auth-card form{display:grid;gap:18px}.auth-card label{display:grid;gap:7px;font-weight:700;color:#173f4e}.auth-card input{width:100%;padding:14px;border:1px solid #bfd0d5;border-radius:10px;font:inherit}.form-status{margin-top:18px;color:#087e84;font-weight:700}.form-status.error{color:#b42318}.admin-toolbar,.user-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.user-list{display:grid;margin-top:20px}.user-row{padding:18px 0;border-top:1px solid #dce8eb}.user-row small{display:block;margin-top:5px;color:#607782}.access-switch{display:flex;align-items:center;gap:9px;font-weight:700}.access-switch input{width:20px;height:20px;accent-color:#079ba1}@media(max-width:760px){.auth-grid{grid-template-columns:1fr;gap:28px}.auth-card,.admin-card{padding:22px}.user-row{align-items:flex-start;flex-direction:column}}
.admin-stack{display:grid;gap:32px}.admin-controls{display:flex;align-items:center;gap:10px}.admin-controls select{min-width:150px}.contact-list{display:grid;gap:18px;margin-top:24px}.contact-item{border:1px solid var(--line);border-radius:18px;padding:22px;background:#fbfdfe}.contact-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.contact-heading h3{margin-top:8px}.contact-heading small{color:var(--muted)}.contact-heading select{width:auto;min-width:140px}.contact-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:900}.status-new{background:#dff5ef;color:#176a49}.status-pending{background:#fff1cf;color:#805600}.status-answered{background:#dceefa;color:#185f86}.status-archived{background:#e8ecee;color:#51626b}.contact-data{display:flex;flex-wrap:wrap;gap:10px 20px;margin:16px 0;color:var(--blue);font-weight:750}.contact-message{white-space:pre-wrap;padding:16px;border-radius:12px;background:white;border:1px solid var(--line);margin-bottom:16px}.contact-item label{display:grid;gap:7px}.contact-item textarea{min-height:90px}.contact-item .btn{margin-top:12px}@media(max-width:760px){.admin-toolbar,.contact-heading{align-items:flex-start;flex-direction:column}.admin-controls{width:100%;flex-wrap:wrap}.contact-heading select{width:100%}}
.password-form{display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:end;margin-top:22px}.password-form label{display:grid;gap:7px}.password-form .form-status{grid-column:1/-1}@media(max-width:760px){.password-form{grid-template-columns:1fr}}