:root {
  --ink: #111318;
  --muted: #606774;
  --paper: #f7f9fc;
  --surface: #ffffff;
  --line: #dfe5ee;
  --blue: #1f6bff;
  --coral: #f06b4f;
  --green: #2fb884;
  --yellow: #f3bd3e;
  --shadow: 0 18px 48px rgba(17, 19, 24, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
main,
section,
article,
aside,
div,
form,
nav,
header,
footer {
  min-width: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
  background: rgba(247, 249, 252, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: white;
  background: var(--ink);
  border-radius: 8px;
  font-size: 13px;
}

.menu-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px;
  background: var(--ink);
}

.main-nav {
  display: none;
  grid-column: 1 / -1;
  gap: 2px;
  padding: 10px 0 6px;
}

.main-nav a {
  padding: 13px 4px;
  border-top: 1px solid var(--line);
  color: #303744;
  font-weight: 800;
}

.main-nav a.active { color: var(--blue); }
.site-header.nav-open .main-nav { display: grid; }

.btn,
.small-btn,
.video-link,
.card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  font-weight: 900;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}

.btn {
  width: 100%;
  padding: 0 18px;
}

.small-btn,
.video-link,
.card-action {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

.primary {
  color: white;
  background: var(--blue);
  box-shadow: 0 14px 30px rgba(31, 107, 255, 0.24);
}

.secondary {
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
}

.dark { color: white; background: var(--ink); }
.coral { color: white; background: var(--coral); }

.hero,
.page-hero,
.section,
.split-section,
.video-section,
.contact-section {
  padding: 38px 16px;
}

.hero {
  display: grid;
  gap: 26px;
  background:
    linear-gradient(160deg, rgba(47, 184, 132, 0.14), transparent 36%),
    linear-gradient(330deg, rgba(240, 107, 79, 0.12), transparent 36%),
    #f6f9fd;
}

.page-hero {
  background: #edf4ff;
  border-bottom: 1px solid var(--line);
}

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  margin-bottom: 16px;
  font-size: clamp(38px, 13vw, 72px);
  line-height: 0.96;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 9vw, 46px);
  line-height: 1.05;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 21px;
  line-height: 1.18;
}

p { color: var(--muted); }

.lead {
  max-width: 680px;
  font-size: 18px;
}

.hero-actions,
.page-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.proof-row {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.proof-row span,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #424a58;
  font-size: 13px;
  font-weight: 800;
}

.phone-preview {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: var(--ink);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.preview-screen {
  padding: 18px;
  background: white;
  border-radius: 14px;
}

.camera-visual,
.editing-visual,
.lighting-visual,
.wedding-visual {
  min-height: 230px;
  border-radius: 8px;
}

.camera-visual {
  background:
    radial-gradient(circle at 52% 46%, #9bd4ff 0 9%, #111318 10% 21%, transparent 22%),
    linear-gradient(90deg, transparent 18%, #111318 19% 78%, transparent 79%),
    linear-gradient(180deg, transparent 28%, #303846 29% 70%, transparent 71%),
    #eaf1fb;
}

.editing-visual {
  background:
    linear-gradient(90deg, var(--blue) 0 34%, var(--green) 34% 63%, var(--coral) 63% 100%) 28px 170px / calc(100% - 56px) 18px no-repeat,
    linear-gradient(#ffffff, #ffffff) 24px 32px / calc(100% - 48px) 130px no-repeat,
    #101722;
}

.lighting-visual {
  background:
    radial-gradient(circle at 70% 28%, rgba(255,255,255,0.95) 0 16%, transparent 17%),
    linear-gradient(135deg, #fff4dd, #eaf6ff);
}

.wedding-visual {
  background:
    radial-gradient(circle at 70% 42%, var(--green) 0 17%, transparent 18%),
    linear-gradient(135deg, #ffffff 0 40%, transparent 41%) 36px 56px / 150px 96px no-repeat,
    linear-gradient(135deg, #f8eff0, #edf8f2);
}

.section-head {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}

.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  background: #eaf0f8;
  border-radius: 8px;
}

.filters button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #4d5668;
  font-weight: 900;
}

.filters button.active { color: var(--ink); background: white; }

.grid,
.course-grid,
.workshop-grid,
.path-grid,
.video-grid,
.testimonial-grid {
  display: grid;
  gap: 14px;
}

.card,
.course-card,
.workshop-card,
.path-card,
.video-card,
.testimonial,
.faq-card,
.contact-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(17, 19, 24, 0.06);
  overflow: hidden;
}

.course-card.is-hidden { display: none; }

.course-art { min-height: 190px; }
.card-body { padding: 18px; }
.tag {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.meta span {
  padding: 10px;
  background: #f4f7fb;
  border-radius: 8px;
  color: #363d4a;
  font-size: 13px;
  font-weight: 800;
}

.workshop-card {
  padding: 18px;
  color: var(--ink);
}

.workshop-card p { color: var(--muted); }

.workshop-date {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 64px;
  margin-bottom: 14px;
  color: white;
  background: var(--ink);
  border-radius: 8px;
  font-weight: 900;
  text-align: center;
}

.dark-band {
  color: white;
  background: #111722;
}

.dark-band p { color: #b8c0cc; }

.path-card {
  padding: 18px;
}

.path-card strong {
  color: var(--coral);
  font-size: 13px;
}

.video-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111722;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card .card-body {
  display: grid;
  gap: 10px;
}

.youtube-url {
  display: block;
  overflow-wrap: anywhere;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.split-section {
  display: grid;
  gap: 22px;
  background: #eef8f3;
}

.feature-list {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.feature-list li {
  padding: 13px 14px;
  background: rgba(255,255,255,0.78);
  border: 1px solid #d3e8dd;
  border-radius: 8px;
  font-weight: 800;
}

.mentor-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: white;
  border: 1px solid #d3e8dd;
  border-radius: 8px;
}

.mentor-avatar {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: white;
  background:
    radial-gradient(circle at 50% 34%, #ffd7b5 0 12%, transparent 13%),
    linear-gradient(145deg, var(--coral), var(--blue));
  border-radius: 8px;
  font-weight: 900;
}

.testimonial {
  padding: 18px;
}

.testimonial blockquote {
  margin: 0 0 14px;
  color: #202633;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.faq-card details {
  padding: 16px;
  border-top: 1px solid var(--line);
}

.faq-card details:first-child { border-top: 0; }
.faq-card summary { font-weight: 900; cursor: pointer; }
.faq-card p { margin: 10px 0 0; }

.contact-section {
  display: grid;
  gap: 16px;
  background: #eef3fa;
}

.contact-card {
  padding: 20px;
}

.contact-form {
  display: grid;
  gap: 13px;
}

.contact-form label {
  display: grid;
  gap: 7px;
  color: #3d4655;
  font-weight: 900;
}

input,
textarea,
select {
  width: 100%;
  min-height: 46px;
  padding: 12px 13px;
  border: 1px solid #ccd5e1;
  border-radius: 8px;
  background: #fbfcff;
  color: var(--ink);
}

textarea { min-height: 120px; resize: vertical; }

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(31, 107, 255, 0.16);
  border-color: var(--blue);
}

.form-note {
  min-height: 24px;
  margin: 0;
  color: var(--green);
  font-weight: 900;
}

.whatsapp-float {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: white;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 18px 34px rgba(37, 211, 102, 0.34);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.whatsapp-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(37, 211, 102, 0.42);
}

.whatsapp-float svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}

.site-footer {
  display: grid;
  gap: 18px;
  padding: 28px 16px;
  color: white;
  background: var(--ink);
}

.site-footer p { margin-bottom: 0; color: #b9c1cf; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 900; }

.admin-body {
  background:
    linear-gradient(135deg, rgba(31, 107, 255, 0.08), transparent 28%),
    linear-gradient(315deg, rgba(47, 184, 132, 0.08), transparent 30%),
    #eef3f8;
}

.admin-header {
  background: rgba(238, 243, 248, 0.94);
}

.admin-body.admin-locked .admin-header,
.admin-body.admin-locked .admin-shell {
  display: none;
}

.admin-access-gate {
  display: grid;
  min-height: 100vh;
  padding: 18px;
  background:
    radial-gradient(circle at 20% 12%, rgba(124, 58, 237, 0.18), transparent 30%),
    linear-gradient(135deg, #f8f9fd 0%, #eef3f8 100%);
}

.admin-body:not(.admin-locked) .admin-access-gate {
  display: none;
}

.admin-access-card {
  align-self: center;
  display: grid;
  gap: 18px;
  width: min(100%, 460px);
  margin: 0 auto;
  padding: 22px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 54px rgba(17, 19, 24, 0.1);
}

.admin-access-card h1 {
  margin: 0 0 8px;
  font-size: clamp(34px, 9vw, 52px);
}

.admin-access-card p {
  margin: 0;
}

.admin-access-card label {
  display: grid;
  gap: 8px;
  color: #3d4655;
  font-weight: 900;
}

.admin-access-card .form-note {
  color: #ef4444;
}

.gate-back-link {
  color: #6d28d9;
  font-weight: 900;
  text-align: center;
}

.admin-shell {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.admin-sidebar,
.admin-main,
.admin-card,
.metric-card,
.student-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(17, 19, 24, 0.06);
}

.admin-sidebar {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.admin-kicker {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-sidebar h1 {
  margin-bottom: 0;
  font-size: clamp(30px, 9vw, 44px);
}

.admin-sidebar-copy {
  margin: 10px 0 0;
  font-size: 14px;
}

.admin-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-tabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8fb;
  color: #3b4351;
  font-weight: 900;
  cursor: pointer;
}

.admin-tabs button.active {
  color: white;
  background: linear-gradient(135deg, var(--ink), #243042);
  border-color: #243042;
}

.admin-profile {
  display: grid;
  gap: 2px;
  padding: 14px;
  background: #f5f8fc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-profile span,
.admin-profile small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-profile strong {
  font-size: 15px;
}

.admin-profile button {
  min-height: 34px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #2b3342;
  background: white;
  font-weight: 900;
  cursor: pointer;
}

.admin-main {
  min-width: 0;
  padding: 16px;
}

.admin-command {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-search {
  display: grid;
  gap: 7px;
  color: #3d4655;
  font-weight: 900;
}

.admin-search input {
  min-height: 44px;
  background: #f8fbff;
}

.admin-command-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-section {
  display: none;
}

.admin-section.active {
  display: grid;
  gap: 16px;
}

.admin-top {
  display: grid;
  gap: 14px;
}

.admin-top h2 {
  font-size: clamp(26px, 8vw, 40px);
}

.admin-hero-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  color: white;
  background:
    linear-gradient(135deg, rgba(31, 107, 255, 0.92), rgba(17, 19, 24, 0.96)),
    var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.admin-hero-card h2 {
  margin-top: 8px;
  color: white;
}

.admin-hero-card p {
  color: rgba(255, 255, 255, 0.74);
}

.admin-chip {
  display: inline-flex;
  width: max-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.admin-chip.live {
  color: #063f2a;
  background: #b9f8d5;
}

.admin-hero-stat {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  text-align: center;
}

.admin-hero-stat span,
.admin-hero-stat small {
  color: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.admin-hero-stat strong {
  color: white;
  font-size: 56px;
  line-height: 1;
}

.metric-grid,
.admin-grid,
.student-grid {
  display: grid;
  gap: 12px;
}

.metric-card,
.student-card,
.admin-card {
  padding: 16px;
}

.metric-card {
  position: relative;
  display: grid;
  gap: 4px;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -28px;
  width: 86px;
  height: 86px;
  background: rgba(31, 107, 255, 0.1);
  border-radius: 50%;
}

.metric-card span,
.metric-card small,
.student-card span,
.student-card small {
  color: var(--muted);
  font-weight: 800;
}

.metric-card strong {
  font-size: 36px;
  line-height: 1;
}

.pipeline-card,
.quick-actions-card {
  min-height: 190px;
}

.pipeline-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.pipeline-cols div {
  display: grid;
  gap: 6px;
  padding: 14px 10px;
  background: #f4f7fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.pipeline-cols span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.pipeline-cols strong {
  font-size: 28px;
}

.quick-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.quick-actions button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  color: #283241;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.admin-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.admin-list li {
  display: grid;
  gap: 3px;
  padding: 12px;
  background: #f5f8fc;
  border-radius: 8px;
}

.admin-list span,
.admin-list em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.progress-row {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.progress-row span {
  color: #374151;
  font-weight: 900;
}

.progress-row::after {
  content: "";
  display: block;
  height: 10px;
  background: #e7edf5;
  border-radius: 999px;
}

.progress-row b {
  display: block;
  height: 10px;
  margin-bottom: -18px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 999px;
  z-index: 1;
}

.admin-table {
  display: grid;
  gap: 10px;
}

.admin-row {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-row.head {
  display: none;
}

.admin-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.admin-row button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.status {
  width: max-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
}

.status.live {
  color: #067647;
  background: #dff8eb;
}

.status.draft {
  color: #8a4b00;
  background: #fff1cf;
}

.status.review {
  color: #1f55bd;
  background: #e2ebff;
}

.lesson-card {
  display: grid;
  gap: 10px;
}

.student-card {
  display: grid;
  gap: 8px;
}

.student-card strong {
  font-size: 20px;
}

.admin-form {
  display: grid;
  gap: 12px;
}

.admin-form label {
  display: grid;
  gap: 7px;
  color: #3d4655;
  font-weight: 900;
}

.admin-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: white;
  background: transparent;
  border-radius: 8px;
  font-weight: 900;
  pointer-events: none;
}

.admin-toast.show {
  padding: 12px 14px;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.admin-crud-grid {
  display: grid;
  gap: 18px;
}

.admin-crud-form {
  display: grid;
  gap: 14px;
  align-self: start;
}

.admin-crud-form h3 {
  margin-bottom: 0;
}

.admin-crud-form label,
.form-grid label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.inline-check {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  gap: 10px !important;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #eaecf0;
  border-radius: 8px;
}

.inline-check input {
  width: 18px;
  min-height: 18px;
}

.form-actions {
  display: grid;
  gap: 10px;
}

.admin-thumb {
  flex: 0 0 auto;
  width: 54px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #f2f4f7;
  border: 1px solid #eaecf0;
}

.admin-thumb.empty {
  display: inline-grid;
  place-items: center;
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

.live-admin-table .admin-row span:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.live-admin-table small {
  display: block;
  width: 100%;
  color: #667085;
  font-weight: 700;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.table-actions button {
  min-height: 34px;
}

.admin-crud-form button:disabled,
.admin-access-card button:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.admin-crud-form .form-note[data-tone="error"],
.admin-access-card .form-note[data-tone="error"] {
  color: #d92d20;
}

.curriculum-builder {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f9fafb;
  border: 1px solid #eaecf0;
  border-radius: 8px;
}

.curriculum-builder h4 {
  margin: 0;
  font-size: 16px;
}

.curriculum-modules,
.lesson-builder-list {
  display: grid;
  gap: 12px;
}

.module-builder-card,
.lesson-builder-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

.module-builder-card.dragging,
.lesson-builder-card.dragging {
  opacity: 0.55;
}

.builder-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.builder-row-head button {
  min-height: 34px;
  padding: 0 10px;
  color: #4f1ab6;
  background: #f4f1ff;
  border: 1px solid #e6ddff;
  border-radius: 7px;
  font-weight: 900;
}

.lesson-access {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
}

.lesson-access.unlocked {
  color: #ffffff;
  background: #4f1ab6;
}

.lesson-access.locked {
  color: #6941c6;
  background: #f4f1ff;
  border: 1px solid #e6ddff;
}

.continue-thumb {
  width: 100%;
  min-height: 180px;
  border-radius: 8px;
  object-fit: cover;
  background: #101828;
}

.certificate-status-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
}

.certificate-status-card button,
.certificate-status-card a {
  display: inline-flex;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  color: #ffffff;
  background: #4f1ab6;
  border: 0;
  border-radius: 7px;
  font-weight: 900;
}

.mentor-photo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

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

.profile-body {
  background: #f8f9fd;
}

.profile-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 72px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.profile-logo {
  display: grid;
  line-height: 0.9;
}

.profile-logo strong {
  color: #6d32e8;
  font-size: 28px;
  letter-spacing: 0;
}

.profile-logo span {
  color: #1f2430;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.26em;
}

.profile-menu-toggle {
  justify-self: end;
}

.profile-nav {
  display: none;
  grid-column: 1 / -1;
  gap: 8px;
}

.profile-topbar.nav-open .profile-nav {
  display: grid;
}

.profile-nav a {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-weight: 900;
}

.profile-nav a.active {
  color: #6d32e8;
}

.profile-search {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.profile-search input {
  border-radius: 999px;
}

.profile-mini {
  display: none;
}

.profile-shell {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.profile-sidebar,
.profile-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.profile-card,
.creator-hero,
.profile-tabs,
.learning-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(17, 19, 24, 0.06);
}

.identity-card {
  position: relative;
  overflow: hidden;
  padding: 0 18px 18px;
  text-align: center;
}

.profile-cover {
  height: 116px;
  margin: 0 -18px;
  background: linear-gradient(135deg, #8d48f5, #c56aff);
}

.avatar-xl,
.avatar-sm {
  background:
    radial-gradient(circle at 50% 32%, #ffd3b0 0 19%, transparent 20%),
    radial-gradient(circle at 50% 100%, #111318 0 46%, transparent 47%),
    linear-gradient(135deg, #f3f4f8, #dfe4ee);
}

.avatar-xl {
  width: 120px;
  height: 120px;
  margin: -62px auto 12px;
  border: 5px solid white;
  border-radius: 50%;
  box-shadow: var(--shadow);
}

.avatar-sm {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.identity-card h1 {
  margin: 0 0 4px;
  font-size: 24px;
}

.identity-card p,
.identity-card small,
.identity-card span {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-weight: 700;
}

.outline-action {
  width: 100%;
  min-height: 42px;
  margin: 10px 0 14px;
  border: 1px solid #6d32e8;
  border-radius: 8px;
  color: #6d32e8;
  background: white;
  font-weight: 900;
  cursor: pointer;
}

.social-row {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.social-row i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d32e8, #ff426a);
}

.stat-list-card,
.achievement-card,
.level-card {
  padding: 18px;
}

.profile-card h2 {
  font-size: 18px;
}

.stat-list-card dl,
.achievement-card ul,
.course-list,
.activity-card ul,
.wishlist-card ul,
.project-card ul {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.stat-list-card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.stat-list-card dt,
.achievement-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.stat-list-card dd {
  margin: 0;
  font-weight: 900;
}

.achievement-card li {
  display: grid;
  gap: 3px;
  padding-left: 38px;
  position: relative;
}

.achievement-card li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffd166, #6d32e8);
}

.level-card strong {
  color: #6d32e8;
  font-size: 26px;
}

.level-bar,
.course-progress {
  display: grid;
  gap: 8px;
}

.level-bar {
  height: 12px;
  background: #e9e2ff;
  border-radius: 999px;
}

.level-bar b {
  display: block;
  height: 12px;
  background: #6d32e8;
  border-radius: 999px;
}

.creator-hero {
  display: grid;
  gap: 20px;
  padding: 22px;
}

.creator-hero h2 {
  font-size: clamp(30px, 8vw, 42px);
}

.creator-hero h2 span {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: white;
  background: #6d32e8;
  font-size: 12px;
  vertical-align: middle;
}

.creator-badge {
  display: inline-flex;
  width: max-content;
  padding: 7px 12px;
  border-radius: 999px;
  color: #6d32e8;
  background: #efe7ff;
  font-weight: 900;
}

.creator-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.creator-stats span {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-weight: 800;
}

.creator-stats b {
  color: var(--ink);
  font-size: 22px;
}

.creator-visual {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #fbfbff, #f2edff);
  border-radius: 8px;
}

.creator-visual .camera-visual {
  min-height: 180px;
}

.creator-visual span {
  color: #6d32e8;
  font-weight: 900;
  text-align: center;
}

.profile-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
}

.profile-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #303744;
  font-weight: 900;
  cursor: pointer;
}

.profile-tabs button.active {
  color: #6d32e8;
  background: #efe7ff;
}

.profile-panel {
  display: none;
}

.profile-panel.active {
  display: grid;
  gap: 16px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.panel-head h2 {
  margin: 0;
  font-size: 20px;
}

.panel-head a {
  color: #6d32e8;
  font-weight: 900;
}

.learning-grid,
.profile-lower-grid,
.profile-widget-grid {
  display: grid;
  gap: 16px;
}

.learning-card {
  position: relative;
  overflow: hidden;
}

.learning-card .thumb {
  min-height: 170px;
}

.thumb,
.mini-thumb {
  display: block;
  border-radius: 8px;
}

.wedding-thumb {
  background:
    radial-gradient(circle at 72% 25%, #ffbd66 0 8%, transparent 9%),
    linear-gradient(135deg, #171a22, #7b3fe4);
}

.drone-thumb {
  background:
    radial-gradient(circle at 72% 34%, #111318 0 8%, transparent 9%),
    linear-gradient(135deg, #c7e7ff, #e9bd69);
}

.edit-thumb {
  background:
    linear-gradient(90deg, #6d32e8 0 40%, #32c28b 40% 70%, #f06b4f 70% 100%) 24px 120px / calc(100% - 48px) 14px no-repeat,
    linear-gradient(135deg, #111318, #32384b);
}

.learning-card > span {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  color: white;
  background: #6d32e8;
  font-size: 12px;
  font-weight: 900;
}

.learning-card h3,
.learning-card p,
.learning-card .course-progress,
.learning-card button {
  margin-left: 16px;
  margin-right: 16px;
}

.learning-card h3 {
  margin-top: 16px;
}

.course-progress strong {
  font-size: 13px;
}

.course-progress::after {
  content: "";
  height: 8px;
  background: #e7e1fb;
  border-radius: 999px;
}

.course-progress b {
  display: block;
  height: 8px;
  margin-bottom: -16px;
  background: #6d32e8;
  border-radius: 999px;
  z-index: 1;
}

.learning-card button,
.certificate-actions button {
  min-height: 42px;
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid #6d32e8;
  border-radius: 8px;
  color: #6d32e8;
  background: white;
  font-weight: 900;
  cursor: pointer;
}

.completed-card,
.certificate-card,
.activity-card,
.wishlist-card,
.project-card,
.reviews-card,
.profile-settings-form {
  padding: 18px;
}

.course-list li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.mini-thumb {
  width: 64px;
  height: 52px;
}

.course-list small,
.course-list em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.course-list em {
  color: #13a566;
}

.certificate-preview {
  display: grid;
  place-items: center;
  min-height: 230px;
  padding: 20px;
  border: 8px solid #e8cf9a;
  background: #fffdf8;
  text-align: center;
}

.certificate-preview strong {
  font-size: 26px;
  letter-spacing: 0.12em;
}

.certificate-preview span {
  font-weight: 900;
}

.certificate-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.profile-widget-grid .profile-card ul {
  display: grid;
  gap: 12px;
}

.profile-widget-grid li,
.reviews-card p {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.profile-widget-grid b {
  display: block;
  color: #6d32e8;
}

.profile-settings-form {
  display: grid;
  gap: 12px;
}

.profile-settings-form label {
  display: grid;
  gap: 7px;
  font-weight: 900;
}

.profile-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  margin: 0;
  padding: 0;
  color: white;
  border-radius: 8px;
  font-weight: 900;
  pointer-events: none;
}

.profile-toast.show {
  padding: 12px 14px;
  background: #111318;
  box-shadow: var(--shadow);
}

/* Academy public redesign */
.academy-body {
  --purple: #6d32e8;
  --purple-dark: #4f19c9;
  --academy-bg: #f5f7fb;
  background:
    linear-gradient(180deg, rgba(109, 50, 232, 0.05), transparent 420px),
    var(--academy-bg);
}

.academy-header {
  grid-template-columns: 1fr auto;
  min-height: 72px;
  background: rgba(255, 255, 255, 0.96);
}

.academy-logo {
  display: grid;
  gap: 0;
  line-height: 0.9;
}

.academy-logo .brand-mark {
  display: none;
}

.academy-logo strong {
  color: var(--purple);
  font-size: 30px;
  letter-spacing: 0;
}

.academy-logo span {
  color: #151827;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.28em;
}

.academy-search {
  display: none;
}

.academy-nav a.active {
  color: var(--purple);
}

.academy-shell,
.academy-page {
  display: grid;
  gap: 16px;
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 16px;
}

.academy-rail {
  order: 2;
  display: grid;
  gap: 16px;
}

.academy-card,
.academy-hero-card,
.academy-cta,
.academy-page-hero {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(17, 24, 39, 0.06);
}

.academy-card {
  min-width: 0;
  padding: 16px;
}

.learner-card {
  padding: 0 16px 16px;
  overflow: hidden;
  text-align: center;
}

.learner-cover {
  height: 96px;
  margin: 0 -16px 0;
  background: linear-gradient(135deg, #7c3aed, #c45cff);
}

.learner-avatar {
  width: 108px;
  height: 108px;
  margin: -54px auto 12px;
}

.learner-card h2 {
  margin-bottom: 4px;
  font-size: 24px;
}

.learner-card p {
  margin-bottom: 16px;
  font-weight: 800;
}

.rail-stat-card dl {
  display: grid;
  gap: 14px;
  margin: 0;
}

.rail-stat-card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.rail-stat-card dt {
  color: var(--muted);
  font-weight: 800;
}

.rail-stat-card dd {
  margin: 0;
  color: #111318;
  font-weight: 950;
}

.academy-main {
  order: 1;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.academy-hero-card {
  display: grid;
  gap: 24px;
  padding: 22px;
}

.hero-copy h1,
.academy-page-hero h1 {
  max-width: 780px;
  margin-bottom: 14px;
  font-size: clamp(34px, 10vw, 58px);
  line-height: 1.02;
}

.hero-copy p,
.academy-page-hero p {
  max-width: 720px;
  color: #4b5565;
  font-size: 17px;
  font-weight: 600;
}

.hero-lens-panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 18px;
  overflow: hidden;
  background: #f3edff;
  border-radius: 8px;
}

.hero-lens-panel .camera-visual {
  width: min(100%, 380px);
  min-height: 220px;
  border-radius: 8px;
}

.hero-lens-panel strong {
  color: var(--purple);
  font-size: 18px;
}

.tool-chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: white;
  background: linear-gradient(135deg, #20124d, #7c3aed);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(58, 20, 140, 0.24);
  font-weight: 950;
}

.tool-chip.ae { left: 18%; top: 18%; }
.tool-chip.ps { left: 12%; bottom: 26%; }
.tool-chip.lr { right: 14%; bottom: 30%; }

.academy-body .primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  box-shadow: 0 14px 30px rgba(109, 50, 232, 0.24);
}

.academy-body .secondary,
.academy-body .outline-action,
.academy-body .learning-card button,
.academy-body .learning-card a,
.profile-body .learning-card a,
.student-body .learning-card a,
.certificate-actions a,
.academy-body .card-action {
  color: var(--purple);
  background: white;
  border: 1px solid var(--purple);
}

.academy-body .learning-card a,
.profile-body .learning-card a,
.student-body .learning-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 14px 16px 16px;
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 900;
}

.academy-body .dark {
  color: white;
  background: #111318;
  border-color: #111318;
}

.academy-body .creator-stats {
  margin-top: 20px;
}

.academy-body .creator-stats span {
  min-width: 0;
}

.continue-section {
  padding: 14px;
}

.academy-grid,
.academy-widget-grid,
.page-hero-stats {
  display: grid;
  gap: 16px;
}

.rich-list em {
  color: #21a76a;
  background: #e4f9ee;
  border-radius: 999px;
  padding: 5px 9px;
  font-style: normal;
  font-weight: 900;
}

.video-section-clean {
  padding: 16px;
}

.video-section-clean .video-grid,
.compact-video-grid {
  gap: 14px;
}

.video-card {
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.05);
}

.video-card .card-body {
  padding: 14px;
}

.academy-cta {
  display: grid;
  gap: 16px;
  padding: 22px;
  color: white;
  background:
    linear-gradient(135deg, rgba(109, 50, 232, 0.94), rgba(17, 19, 24, 0.96)),
    #111318;
}

.academy-cta h2,
.academy-cta p {
  color: white;
}

.academy-cta p {
  opacity: 0.8;
}

.academy-page {
  max-width: 1280px;
}

.academy-page-hero {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.page-hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-hero-stats article {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: 12px;
  background: #f7f3ff;
  border: 1px solid #e4dcff;
  border-radius: 8px;
  text-align: center;
}

.page-hero-stats b {
  color: var(--purple);
  font-size: 30px;
  line-height: 1;
}

.page-hero-stats span {
  color: #5e6676;
  font-weight: 900;
}

.academy-page .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.academy-page .panel-head,
.academy-main .panel-head {
  display: grid;
  justify-content: stretch;
  align-items: start;
}

.academy-page .filters button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #4b5565;
  font-size: 13px;
  font-weight: 900;
}

.academy-page .filters button.active {
  color: white;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  border-color: transparent;
}

.academy-page .course-card.is-hidden {
  display: none;
}

.academy-workshop-grid .workshop-card {
  color: #111318;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.05);
}

.academy-workshop-grid .workshop-date {
  color: white;
  background: linear-gradient(135deg, var(--purple), #b34cff);
}

.workshop-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
  object-fit: cover;
  border-radius: 8px;
  background: #f2f4f7;
}

.about-certificate {
  min-height: 220px;
}

.academy-contact {
  padding: 0;
}

.academy-contact .academy-card {
  box-shadow: 0 10px 32px rgba(17, 24, 39, 0.06);
}

.contact-mini-stats {
  margin-top: 18px;
}

.academy-footer {
  margin-top: 24px;
  background:
    linear-gradient(160deg, rgba(109, 50, 232, 0.28), transparent 38%),
    #111318;
}

.login-page {
  display: grid;
  width: min(100%, 1120px);
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  padding: 16px;
}

.login-card {
  align-self: center;
  display: grid;
  gap: 18px;
  padding: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.08);
}

.login-copy,
.login-form {
  display: grid;
  gap: 16px;
}

.login-copy h1 {
  margin-bottom: 10px;
  font-size: clamp(36px, 11vw, 58px);
}

.login-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.login-benefits span {
  display: grid;
  gap: 3px;
  padding: 12px;
  background: #f7f3ff;
  border: 1px solid #e4dcff;
  border-radius: 8px;
  color: #5e6676;
  font-size: 12px;
  font-weight: 900;
}

.login-benefits b {
  color: var(--purple);
  font-size: 24px;
  line-height: 1;
}

.login-form {
  padding: 16px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.auth-provider-stack,
.phone-login {
  display: grid;
  gap: 12px;
}

.auth-provider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  color: #182230;
  background: white;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-weight: 900;
  cursor: pointer;
}

.auth-provider-btn span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #4f1ab6;
  background: #f4f1ff;
  border: 1px solid #e6ddff;
  border-radius: 50%;
  font-weight: 950;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: #e4e7ec;
}

.phone-login {
  margin-top: 2px;
  padding: 14px;
  background: white;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
}

.phone-login .small-btn {
  width: 100%;
}

.recaptcha-box {
  min-height: 0;
  overflow: hidden;
}

.login-form button:disabled {
  opacity: 0.68;
  cursor: wait;
}

.login-form label {
  display: grid;
  gap: 8px;
  color: #3d4655;
  font-weight: 900;
}

.login-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  color: var(--purple);
  font-weight: 900;
}

.login-links button {
  padding: 0;
  border: 0;
  color: var(--purple);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.login-form .form-note[data-tone="error"] {
  color: #ef4444;
}

/* Reference-led homepage */
.home-body {
  background:
    radial-gradient(circle at 78% 8%, rgba(109, 50, 232, 0.16), transparent 30%),
    linear-gradient(180deg, #fbfaff 0%, #ffffff 55%);
}

.home-header {
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.04);
}

.category-menu,
.home-actions {
  display: none;
}

.home-search {
  position: relative;
  color: transparent;
}

.home-search input {
  color: var(--ink);
}

.notification-dot {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  position: relative;
  box-shadow: var(--shadow-soft);
}

.notification-dot::before {
  content: "";
  position: absolute;
  inset: 10px 12px 11px;
  border: 2px solid #111827;
  border-bottom: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.notification-dot::after {
  content: "2";
  position: absolute;
  top: -5px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #6d28d9;
  color: white;
  font-size: 11px;
  font-weight: 900;
}

.home-page {
  display: grid;
  gap: 28px;
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 18px 16px 32px;
}

.home-hero {
  display: grid;
  gap: 28px;
  min-height: 620px;
  align-items: center;
  padding: 34px 0 8px;
}

.home-pill {
  width: max-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 9px 13px;
  color: #5f25e8;
  background: #f0e8ff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.home-hero h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(44px, 12vw, 76px);
  line-height: 1.02;
}

.home-hero h1 span {
  display: block;
  color: #6d32e8;
}

.home-hero-copy > p:not(.home-pill) {
  max-width: 560px;
  color: #4f586b;
  font-size: 18px;
  font-weight: 600;
}

.learner-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 24px;
}

.learner-proof span {
  width: 28px;
  height: 28px;
  margin-right: -12px;
  border: 2px solid white;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #ffd4b5 0 23%, transparent 24%),
    radial-gradient(circle at 50% 95%, #161820 0 47%, transparent 48%),
    #efe7ff;
}

.learner-proof span:nth-child(2) { background-color: #eaf4ff; }
.learner-proof span:nth-child(3) { background-color: #fff0e4; }

.learner-proof b {
  margin-left: 12px;
  color: #2d3340;
  font-size: 13px;
}

.home-hero-visual {
  position: relative;
  display: grid;
  min-height: 420px;
  place-items: center;
}

.home-hero-visual::before {
  content: "";
  position: absolute;
  width: min(76vw, 420px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(135deg, #8d49ff, #6230d7);
  border-radius: 50%;
  box-shadow: 0 26px 70px rgba(109, 50, 232, 0.22);
}

.creator-cutout {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(76vw, 380px);
  min-height: 420px;
}

.creator-cutout::before {
  content: "";
  position: absolute;
  bottom: 12px;
  width: 250px;
  height: 280px;
  background:
    radial-gradient(circle at 50% 0%, #ffd0ad 0 15%, transparent 16%),
    linear-gradient(135deg, #0e1118 0 48%, #232938 49% 100%);
  border-radius: 120px 120px 34px 34px;
  box-shadow: 0 24px 56px rgba(17, 24, 39, 0.26);
}

.creator-face {
  position: absolute;
  top: 58px;
  width: 124px;
  height: 124px;
  background:
    radial-gradient(circle at 38% 42%, #111318 0 4%, transparent 5%),
    radial-gradient(circle at 62% 42%, #111318 0 4%, transparent 5%),
    radial-gradient(circle at 50% 76%, #d6825d 0 12%, transparent 13%),
    #ffd0ad;
  border-radius: 50%;
  border-top: 24px solid #15151b;
  z-index: 2;
}

.creator-camera {
  position: absolute;
  top: 210px;
  width: 190px;
  height: 126px;
  background:
    radial-gradient(circle at 52% 58%, #6d32e8 0 20%, #171a22 21% 35%, transparent 36%),
    linear-gradient(#1d2230, #050816);
  border-radius: 22px;
  z-index: 3;
  box-shadow: 0 18px 42px rgba(17, 24, 39, 0.4);
}

.creator-camera::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -22px;
  width: 72px;
  height: 32px;
  background: #171a22;
  border-radius: 12px 12px 0 0;
}

.float-card {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 4px;
  width: 138px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.1);
  backdrop-filter: blur(14px);
}

.float-card b {
  font-size: 13px;
}

.float-card span {
  color: #4f586b;
  font-size: 12px;
  font-weight: 800;
}

.float-card.photo { left: 0; top: 46px; }
.float-card.drone { right: 0; top: 72px; }
.float-card.video { left: 8px; bottom: 64px; }
.float-card.market { right: 4px; bottom: 36px; }

.category-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: -18px;
  padding: 14px;
  background: white;
  border: 1px solid #e8ecf4;
  border-radius: 14px;
  box-shadow: 0 20px 56px rgba(17, 24, 39, 0.09);
}

.category-strip article,
.benefit-grid article,
.review-grid article,
.popular-card {
  min-width: 0;
  background: white;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
}

.category-strip article {
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: 12px 8px;
  text-align: center;
}

.category-strip span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #6d32e8;
  background: #f2ecff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 950;
}

.category-strip b {
  font-size: 13px;
}

.category-strip small {
  color: #667085;
  font-weight: 700;
}

.home-section {
  display: grid;
  gap: 18px;
}

.home-section-head {
  display: grid;
  gap: 10px;
}

.home-section-head h2,
.center-head h2 {
  margin-bottom: 6px;
  font-size: clamp(26px, 7vw, 34px);
}

.home-section-head p,
.center-head p {
  margin-bottom: 0;
  color: #667085;
  font-weight: 600;
}

.home-section-head a {
  color: #6d32e8;
  font-weight: 900;
}

.popular-grid {
  display: grid;
  gap: 16px;
}

.popular-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.07);
}

.popular-thumb {
  min-height: 190px;
  border-radius: 0;
}

.marketing-thumb {
  background:
    radial-gradient(circle at 24% 62%, #f7d8ff 0 20%, transparent 21%),
    linear-gradient(135deg, #6840df, #f0b3df);
}

.design-thumb {
  background:
    radial-gradient(circle at 50% 45%, #ffd0ad 0 14%, transparent 15%),
    radial-gradient(circle at 50% 95%, #162033 0 35%, transparent 36%),
    linear-gradient(135deg, #1d1737, #fe4c7a);
}

.popular-card > span {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 6px 9px;
  color: white;
  background: #6d32e8;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.popular-card h3,
.popular-card p,
.popular-card strong,
.popular-card div:not(.popular-thumb) {
  margin-left: 16px;
  margin-right: 16px;
}

.popular-card h3 {
  margin-top: 16px;
  font-size: 19px;
}

.popular-card p {
  margin-bottom: 10px;
}

.popular-card strong {
  display: block;
  margin-bottom: 12px;
  color: #111318;
}

.popular-card div:not(.popular-thumb) {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 16px;
}

.popular-card small {
  color: #667085;
  text-decoration: line-through;
  font-weight: 800;
}

.home-stats {
  display: grid;
  gap: 12px;
  padding: 22px;
  color: white;
  background:
    radial-gradient(circle at 16% 50%, rgba(255,255,255,0.12), transparent 18%),
    linear-gradient(135deg, #130c35, #2d1768);
  border-radius: 12px;
  box-shadow: 0 20px 42px rgba(45, 23, 104, 0.22);
}

.home-stats article {
  display: grid;
  gap: 4px;
}

.home-stats span {
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.home-stats small {
  color: rgba(255,255,255,0.78);
  font-weight: 800;
}

.trust-section,
.process-section {
  display: grid;
  gap: 18px;
}

.trust-logo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.trust-logo-row span,
.success-strip article,
.process-list li {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.05);
}

.trust-logo-row span {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 10px;
  color: #4f19c9;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.success-strip,
.process-list {
  display: grid;
  gap: 12px;
}

.success-strip article {
  padding: 16px;
}

.success-strip b {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
}

.success-strip p {
  margin: 0;
  font-weight: 600;
}

.process-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.process-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 13px;
}

.process-list span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: white;
  background: linear-gradient(135deg, #6d32e8, #4f19c9);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 950;
}

.process-list b {
  line-height: 1.2;
}

.center-head {
  text-align: center;
}

.benefit-grid,
.review-grid {
  display: grid;
  gap: 14px;
}

.benefit-grid article {
  padding: 18px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.04);
}

.benefit-grid b {
  display: block;
  margin-bottom: 8px;
}

.benefit-grid p {
  margin: 0;
  font-size: 14px;
}

.review-grid article {
  display: grid;
  gap: 8px;
  padding: 18px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.06);
}

.reviewer-avatar {
  width: 56px;
  height: 56px;
  background:
    radial-gradient(circle at 50% 34%, #ffd0ad 0 24%, transparent 25%),
    radial-gradient(circle at 50% 98%, #111318 0 48%, transparent 49%),
    #efe7ff;
  border: 3px solid #f0e8ff;
  border-radius: 50%;
}

.reviewer-avatar.alt {
  background:
    radial-gradient(circle at 50% 34%, #ffd0ad 0 24%, transparent 25%),
    radial-gradient(circle at 50% 98%, #8f2f6e 0 48%, transparent 49%),
    #fff0f5;
}

.review-grid small {
  color: #667085;
  font-weight: 800;
}

.review-grid p {
  margin: 8px 0 0;
}

.home-bottom-cta {
  display: grid;
  gap: 18px;
  padding: 24px;
  color: white;
  background:
    linear-gradient(135deg, rgba(28, 12, 73, 0.92), rgba(98, 48, 215, 0.98)),
    #2d1768;
  border-radius: 12px;
  overflow: hidden;
}

.home-bottom-cta h2,
.home-bottom-cta p {
  color: white;
}

.home-bottom-cta p {
  opacity: 0.82;
}

.home-bottom-cta > div:last-child {
  display: grid;
  gap: 10px;
}

@media (max-width: 1039px) {
  .academy-header .small-btn,
  .academy-header .academy-search {
    display: none;
  }
}

@media (min-width: 720px) {
  .academy-page .panel-head,
  .academy-main .panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .academy-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .academy-widget-grid,
  .page-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .academy-cta,
  .academy-page-hero {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .academy-cta .btn {
    width: max-content;
  }
  .compact-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .login-card {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-items: center;
    padding: 28px;
  }
  .category-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .popular-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
  }
  .trust-logo-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .success-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .process-list {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .process-list li {
    grid-template-columns: 1fr;
    align-content: start;
    min-height: 116px;
  }
  .benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-bottom-cta {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .home-bottom-cta > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (min-width: 1040px) {
  .academy-header {
    grid-template-columns: auto minmax(300px, 520px) 1fr auto;
    gap: 24px;
    padding: 10px 48px;
  }
  .academy-header .menu-toggle {
    display: none;
  }
  .academy-nav {
    order: 2;
    justify-content: flex-end;
    gap: 20px;
  }
  .academy-search {
    order: 1;
    display: grid;
    gap: 4px;
    color: #5f6676;
    font-size: 11px;
    font-weight: 900;
  }
  .academy-search input {
    min-height: 44px;
    padding: 0 44px 0 16px;
    background:
      radial-gradient(circle at calc(100% - 22px) 50%, transparent 0 7px, #111318 8px 9px, transparent 10px),
      #fbfcff;
    border: 1px solid #d5dceb;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
  }
  .academy-header .small-btn {
    order: 3;
  }
  .academy-shell {
    grid-template-columns: 320px 1fr;
    align-items: start;
    padding: 24px;
  }
  .academy-rail {
    order: 1;
  }
  .academy-main {
    order: 2;
  }
  .academy-rail {
    position: sticky;
    top: 96px;
  }
  .academy-hero-card {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    min-height: 360px;
    padding: 34px;
  }
  .academy-page {
    padding: 24px;
  }
  .academy-page-hero {
    padding: 34px;
  }
  .home-header.site-header {
    grid-template-columns: auto auto minmax(260px, 410px) minmax(0, 1fr) auto;
    gap: 16px;
    min-height: 74px;
    padding: 10px 42px;
  }
  .home-header .category-menu {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #d5dceb;
    border-radius: 8px;
    color: #111318;
    background: white;
    font-weight: 900;
    cursor: pointer;
  }
  .home-header .home-search {
    display: grid;
    grid-column: 3;
    order: 1;
    gap: 0;
    color: transparent;
    font-size: 0;
  }
  .home-header .home-search input {
    font-size: 14px;
  }
  .home-header .academy-nav {
    display: flex;
    grid-column: 4;
    order: 2;
    justify-content: flex-end;
    gap: 14px;
  }
  .home-header .academy-nav a[href="login.html"] {
    display: none;
  }
  .home-header .home-actions {
    display: flex;
    grid-column: auto;
    gap: 8px;
  }
  .home-page {
    gap: 52px;
    padding: 0 58px 56px;
  }
  .home-hero {
    grid-template-columns: 1fr minmax(420px, 0.95fr);
    min-height: 620px;
    padding: 48px 0 0;
  }
  .home-hero h1 {
    font-size: clamp(64px, 5.4vw, 88px);
  }
  .home-hero-visual {
    min-height: 560px;
  }
  .creator-cutout {
    width: min(100%, 480px);
    min-height: 560px;
  }
  .creator-cutout::before {
    width: 320px;
    height: 370px;
  }
  .creator-face {
    top: 58px;
    width: 152px;
    height: 152px;
  }
  .creator-camera {
    top: 250px;
    width: 240px;
    height: 154px;
  }
  .float-card {
    width: 170px;
    padding: 20px;
  }
  .float-card.photo { left: 4%; top: 82px; }
  .float-card.drone { right: 2%; top: 108px; }
  .float-card.video { left: 0; bottom: 110px; }
  .float-card.market { right: 4%; bottom: 82px; }
  .category-strip {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin-top: -44px;
    padding: 24px;
  }
  .home-section-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .popular-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .benefit-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .btn { width: auto; }
  .hero-actions,
  .page-actions,
  .proof-row { display: flex; flex-wrap: wrap; }
  .course-grid,
  .workshop-grid,
  .path-grid,
  .video-grid,
  .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-section,
  .split-section { grid-template-columns: 1fr 1fr; align-items: start; }
  .metric-grid,
  .student-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid.two { grid-template-columns: 1fr 1fr; }
  .admin-row {
    grid-template-columns: 1.2fr 1fr 0.8fr auto;
    align-items: center;
  }
  .admin-row.head {
    display: grid;
    color: var(--muted);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .hero,
  .page-hero,
  .section,
  .split-section,
  .video-section,
  .contact-section { padding: 58px 36px; }
  .profile-shell {
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
  .profile-sidebar {
    position: sticky;
    top: 90px;
  }
  .creator-hero {
    grid-template-columns: 1.3fr 0.8fr;
    align-items: center;
  }
  .learning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .profile-lower-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
  .profile-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    min-height: 76px;
    padding: 14px 56px;
  }
  .menu-toggle { display: none; }
  .main-nav {
    display: flex;
    grid-column: auto;
    justify-content: center;
    gap: 26px;
    padding: 0;
  }
  .main-nav a { border-top: 0; padding: 0; }
  .hero {
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    min-height: calc(100vh - 76px);
    padding: 84px 72px 64px;
  }
  .page-hero,
  .section,
  .split-section,
  .video-section,
  .contact-section { padding: 86px 72px; }
  .section-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .workshop-grid,
  .video-grid,
  .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .path-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer {
    grid-template-columns: 1fr auto;
    padding: 34px 72px;
  }
  .admin-shell {
    grid-template-columns: 280px 1fr;
    align-items: start;
    padding: 24px;
  }
  .admin-sidebar {
    position: sticky;
    top: 100px;
    min-height: calc(100vh - 124px);
    align-content: start;
    color: white;
    background:
      linear-gradient(160deg, rgba(126, 58, 242, 0.34), transparent 26%),
      linear-gradient(180deg, #11124a 0%, #071234 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 22px 48px rgba(17, 24, 39, 0.18);
  }
  .admin-kicker,
  .admin-sidebar-copy {
    color: rgba(255, 255, 255, 0.72);
  }
  .admin-sidebar h1 {
    color: white;
    font-size: 36px;
  }
  .admin-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }
  .admin-tabs button {
    justify-content: start;
    min-height: 46px;
    color: rgba(255, 255, 255, 0.86);
    background: transparent;
    border-color: transparent;
    text-align: left;
  }
  .admin-tabs button.active {
    color: white;
    background: linear-gradient(135deg, #7c3aed, #551cf2);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .admin-profile {
    margin-top: auto;
    color: white;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .admin-profile span,
  .admin-profile small {
    color: rgba(255, 255, 255, 0.68);
  }
  .admin-main {
    padding: 24px;
  }
  .admin-command {
    grid-template-columns: minmax(260px, 460px) auto;
    justify-content: space-between;
    align-items: end;
  }
  .admin-command-actions {
    min-width: 240px;
  }
  .admin-toast {
    left: auto;
    right: 24px;
    max-width: 420px;
  }
  .admin-top {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .admin-hero-card {
    grid-template-columns: 1fr 220px;
    align-items: center;
    padding: 28px;
  }
  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-crud-grid {
    grid-template-columns: minmax(340px, 0.42fr) minmax(0, 0.58fr);
    align-items: start;
  }
  .admin-crud-grid.compact {
    grid-template-columns: minmax(320px, 0.36fr) minmax(0, 0.64fr);
  }
  .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-actions {
    grid-template-columns: 1fr 1fr;
  }
  .student-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .profile-topbar {
    grid-template-columns: auto 1fr auto;
    padding: 10px 48px;
  }
  .profile-menu-toggle {
    display: none;
  }
  .profile-nav {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) repeat(5, auto);
    grid-column: auto;
    align-items: center;
    gap: 22px;
  }
  .profile-nav a {
    padding: 0;
    border-top: 0;
  }
  .profile-search {
    min-width: 360px;
  }
  .profile-mini {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .notif {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: white;
    background: #ff3152;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
  }
  .profile-shell {
    grid-template-columns: 300px 1fr;
    padding: 22px;
  }
  .profile-tabs {
    grid-template-columns: repeat(6, auto);
    justify-content: start;
    gap: 16px;
  }
  .profile-widget-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .profile-toast {
    left: auto;
    right: 24px;
    max-width: 420px;
  }
}

@media (min-width: 1040px) {
  .academy-header.site-header {
    grid-template-columns: auto minmax(300px, 520px) 1fr auto;
    gap: 24px;
    min-height: 72px;
    padding: 10px 48px;
  }
  .academy-header .academy-search {
    display: grid;
    grid-column: auto;
    order: 1;
    gap: 0;
    color: transparent;
    font-size: 0;
  }
  .academy-header .academy-search input {
    font-size: 14px;
  }
  .academy-header .academy-nav {
    display: flex;
    grid-column: auto;
    order: 2;
    justify-content: flex-end;
    gap: 18px;
  }
  .academy-header .academy-nav a[href="login.html"] {
    display: none;
  }
  .academy-header .small-btn {
    grid-column: auto;
    order: 3;
  }
}

/* Student dashboard, course detail, and lesson player */
.student-body,
.learn-body {
  margin: 0;
  background: #f7f8fc;
}

.student-sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(180deg, #6d28d9, #4f19c9);
}

.student-sidebar .profile-logo strong,
.student-sidebar .profile-logo span {
  color: white;
}

.student-nav {
  display: none;
  grid-column: 1 / -1;
  gap: 6px;
}

.student-sidebar.nav-open .student-nav {
  display: grid;
}

.student-nav a {
  padding: 12px;
  color: rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  font-weight: 900;
}

.student-nav button {
  padding: 12px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-weight: 900;
  text-align: left;
}

.student-nav a.active,
.student-nav a:hover,
.student-nav button:hover {
  color: #6d28d9;
  background: white;
}

.student-main {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.student-topbar,
.student-welcome,
.student-card,
.student-stat-grid article,
.streak-card,
.course-detail-hero,
.price-card,
.learn-header,
.lesson-sidebar,
.lesson-stage,
.lesson-tools {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(17, 24, 39, 0.06);
}

.student-topbar {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.student-search {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.student-search input {
  min-height: 44px;
  border-radius: 999px;
  background: #fbfcff;
}

.student-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.student-icons span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: white;
  background: #ef4444;
  border-radius: 50%;
  font-weight: 900;
}

.student-icons span:nth-child(2) {
  width: 28px;
  height: 28px;
  border: 2px solid #d9e0ec;
  border-radius: 50%;
}

.student-welcome {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.student-welcome h1 {
  margin-bottom: 4px;
  font-size: clamp(30px, 9vw, 42px);
}

.streak-card {
  display: grid;
  gap: 4px;
  min-width: 130px;
  padding: 14px;
}

.streak-card strong {
  color: #6d28d9;
  font-size: 24px;
}

.student-stat-grid,
.student-layout {
  display: grid;
  gap: 16px;
}

.student-stat-grid article {
  padding: 16px;
}

.student-stat-grid span,
.student-stat-grid small {
  color: var(--muted);
  font-weight: 800;
}

.student-stat-grid strong {
  display: block;
  margin: 6px 0;
  font-size: 32px;
}

.student-primary,
.student-secondary {
  display: grid;
  gap: 16px;
}

.student-card {
  min-width: 0;
  padding: 16px;
}

.student-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  background: #f3f0ff;
  border-radius: 8px;
}

.student-tabs button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  color: #4b5565;
  background: transparent;
  font-weight: 900;
}

.student-tabs button.active {
  color: white;
  background: #6d32e8;
}

.recent-activity-card {
  margin-top: 16px;
}

.activity-timeline {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.activity-timeline li {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.activity-timeline b {
  color: #6d32e8;
}

.activity-timeline span {
  color: var(--muted);
  font-weight: 800;
}

.continue-row,
.certificate-row,
.mentor-line {
  display: grid;
  gap: 16px;
}

.course-video-thumb {
  overflow: hidden;
  border-radius: 8px;
  background: #111318;
}

.dashboard-course-list,
.compact-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dashboard-course-list li,
.compact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dashboard-course-list a,
.compact-list button {
  grid-column: 1 / -1;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: #6d28d9;
  font-weight: 900;
}

.dashboard-course-list small,
.compact-list small {
  display: block;
  margin-top: 2px;
}

.course-detail-page {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
}

.course-detail-hero {
  display: grid;
  gap: 18px;
  padding: 22px;
  min-width: 0;
}

.price-card {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.price-card span {
  width: max-content;
  padding: 6px 10px;
  color: white;
  background: #6d28d9;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.price-card strong {
  font-size: 36px;
}

.course-detail-grid,
.learn-shell {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.access-columns,
.related-row {
  display: grid;
  gap: 12px;
}

.access-columns div {
  padding: 14px;
  background: #f8f6ff;
  border: 1px solid #e5ddff;
  border-radius: 8px;
}

.access-columns h3 {
  font-size: 18px;
}

.access-columns ul {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.access-columns li {
  color: #465064;
  font-weight: 800;
}

.security-card .feature-list li {
  background: #f7fbff;
  border-color: #dae8ff;
}

.related-row a {
  min-height: 44px;
  padding: 12px;
  color: #6d32e8;
  background: #f8f6ff;
  border: 1px solid #d9caff;
  border-radius: 8px;
  font-weight: 900;
  text-align: center;
}

.curriculum-card ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.curriculum-card li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.learn-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 0;
}

.learn-shell {
  padding: 16px;
}

.lesson-sidebar,
.lesson-stage,
.lesson-tools {
  min-width: 0;
  padding: 16px;
}

.lesson-sidebar h2 {
  font-size: 24px;
  line-height: 1.1;
}

.lesson-stage h1 {
  font-size: clamp(34px, 6vw, 64px);
}

.lesson-sidebar ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lesson-sidebar li {
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lesson-sidebar li.active {
  color: white;
  background: #6d28d9;
}

.lesson-sidebar li.locked {
  opacity: 0.56;
}

.secure-player {
  position: relative;
  overflow: hidden;
  background: #050816;
  border-radius: 8px;
}

.student-watermark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.secure-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  color: white;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.lesson-controls,
.lesson-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.lesson-controls button,
.lesson-tabs button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #4b5565;
  font-weight: 900;
}

.lesson-tabs button.active {
  color: white;
  background: #6d28d9;
}

.lesson-tool {
  display: none;
}

.lesson-tool.active {
  display: grid;
  gap: 12px;
}

.lesson-tool textarea {
  min-height: 160px;
}

@media (min-width: 720px) {
  .student-topbar,
  .student-welcome,
  .continue-row,
  .certificate-row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .student-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .student-layout,
  .course-detail-grid {
    grid-template-columns: 1.3fr 0.8fr;
    align-items: start;
  }
  .access-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .related-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dashboard-course-list li {
    grid-template-columns: auto 1fr auto;
  }
  .dashboard-course-list a {
    grid-column: auto;
    padding: 0 12px;
  }
}

@media (min-width: 1040px) {
  .student-body {
    display: grid;
    grid-template-columns: 260px 1fr;
  }
  .student-sidebar {
    min-height: 100vh;
    align-content: start;
    grid-template-columns: 1fr;
  }
  .student-menu-toggle {
    display: none;
  }
  .student-nav {
    display: grid;
  }
  .student-main {
    padding: 22px;
  }
  .student-layout {
    grid-template-columns: 1fr 360px;
  }
  .course-detail-hero {
    grid-template-columns: 1fr 360px;
    align-items: center;
    padding: 34px;
  }
  .learn-shell {
    grid-template-columns: 280px minmax(0, 1fr) 340px;
    align-items: start;
  }
  .lesson-sidebar,
  .lesson-tools {
    position: sticky;
    top: 88px;
  }
}

@media (min-width: 1040px) {
  .home-header.site-header {
    grid-template-columns: auto auto minmax(260px, 410px) minmax(0, 1fr) auto;
    gap: 16px;
    min-height: 74px;
    padding: 10px 42px;
  }
  .home-header .category-menu {
    display: inline-flex;
  }
  .home-header .home-search {
    display: grid;
    grid-column: 3;
    order: 1;
    gap: 0;
    color: transparent;
    font-size: 0;
  }
  .home-header .home-search input {
    font-size: 14px;
  }
  .home-header .academy-nav {
    display: flex;
    grid-column: 4;
    order: 2;
    justify-content: flex-end;
    gap: 14px;
  }
  .home-header .academy-nav a[href="login.html"] {
    display: none;
  }
  .home-header .home-actions {
    display: flex;
    grid-column: 5;
    order: 3;
  }
}

/* Professional visual refinement */
:root {
  --ink: #101828;
  --muted: #667085;
  --paper: #f6f7fb;
  --surface: #ffffff;
  --line: #e4e7ec;
  --blue: #2563eb;
  --shadow: 0 18px 44px rgba(16, 24, 40, 0.08);
}

.academy-body {
  --purple: #5b21b6;
  --purple-dark: #3f1688;
  --academy-bg: #f7f8fb;
  background: #f7f8fb;
}

.home-body {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 48%, #ffffff 100%);
}

.site-header,
.home-header,
.academy-header {
  border-color: #eaecf0;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.04);
}

.academy-logo strong,
.profile-logo strong {
  color: #4f1ab6;
}

.btn,
.small-btn,
.card-action,
.menu-toggle,
.category-menu,
input,
textarea,
select {
  border-radius: 6px;
}

.primary,
.academy-body .primary,
.academy-page .filters button.active {
  background: #4f1ab6;
  box-shadow: 0 12px 24px rgba(79, 26, 182, 0.18);
}

.secondary,
.academy-body .secondary {
  border-color: #d0d5dd;
  color: #182230;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.home-page {
  gap: 44px;
}

.home-hero {
  min-height: auto;
  padding: 42px 0 8px;
}

.home-pill {
  color: #4f1ab6;
  background: #f4f1ff;
  border: 1px solid #e6ddff;
  border-radius: 6px;
}

.home-hero h1 {
  max-width: 720px;
  color: #101828;
  letter-spacing: 0;
}

.home-hero h1 span {
  color: #4f1ab6;
}

.home-hero-copy > p:not(.home-pill) {
  color: #475467;
}

.learner-proof span,
.reviewer-avatar,
.reviewer-avatar.alt,
.avatar-xl,
.avatar-sm,
.student-icons span:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(16, 24, 40, 0.08), rgba(16, 24, 40, 0.18)),
    url("https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=240&q=75") center / cover;
  border-radius: 50%;
}

.learner-proof span:nth-child(2),
.reviewer-avatar.alt {
  background:
    linear-gradient(180deg, rgba(16, 24, 40, 0.06), rgba(16, 24, 40, 0.14)),
    url("https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=240&q=75") center / cover;
}

.learner-proof span:nth-child(3) {
  background:
    linear-gradient(180deg, rgba(16, 24, 40, 0.06), rgba(16, 24, 40, 0.14)),
    url("https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=240&q=75") center / cover;
}

.professional-hero-media {
  position: relative;
  min-height: 460px;
  align-items: end;
  padding: 22px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(16, 24, 40, 0.72), rgba(16, 24, 40, 0.08) 62%),
    url("https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1200&q=82") center / cover;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 26px 70px rgba(16, 24, 40, 0.13);
}

.professional-hero-media::before,
.creator-cutout,
.creator-cutout::before,
.creator-face,
.creator-camera {
  display: none;
}

.hero-media-card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  width: min(100%, 360px);
  padding: 18px;
  color: white;
  background: rgba(16, 24, 40, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  backdrop-filter: blur(16px);
}

.hero-media-card strong {
  font-size: 24px;
  line-height: 1.08;
}

.hero-media-card small,
.media-label {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 800;
}

.media-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.float-card {
  width: 150px;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.13);
}

.float-card.photo { left: 22px; top: 22px; }
.float-card.drone { right: 22px; top: 24px; }
.float-card.video { left: 22px; bottom: 132px; }
.float-card.market { right: 22px; bottom: 96px; }

.academy-card,
.academy-hero-card,
.academy-cta,
.academy-page-hero,
.student-card,
.student-topbar,
.student-welcome,
.student-stat-grid article,
.streak-card,
.course-detail-hero,
.price-card,
.lesson-sidebar,
.lesson-stage,
.lesson-tools,
.popular-card,
.category-strip article,
.benefit-grid article,
.review-grid article,
.trust-logo-row span,
.success-strip article,
.process-list li,
.video-card,
.login-card,
.admin-main,
.admin-card,
.metric-card {
  border-color: #e4e7ec;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.055);
}

.category-strip {
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.08);
}

.category-strip span {
  color: #4f1ab6;
  background: #f4f1ff;
  border: 1px solid #e6ddff;
  border-radius: 8px;
}

.thumb,
.popular-thumb,
.mini-thumb,
.camera-visual,
.editing-visual,
.lighting-visual,
.wedding-visual {
  position: relative;
  overflow: hidden;
  background-color: #111827;
  background-size: cover;
  background-position: center;
}

.thumb::after,
.popular-thumb::after,
.mini-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 24, 40, 0.02), rgba(16, 24, 40, 0.28));
}

.wedding-thumb,
.camera-visual {
  background-image:
    linear-gradient(180deg, rgba(16, 24, 40, 0.08), rgba(16, 24, 40, 0.24)),
    url("https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=900&q=78");
}

.drone-thumb {
  background-image:
    linear-gradient(180deg, rgba(16, 24, 40, 0.04), rgba(16, 24, 40, 0.18)),
    url("https://images.unsplash.com/photo-1508614589041-895b88991e3e?auto=format&fit=crop&w=900&q=78");
}

.edit-thumb,
.editing-visual {
  background-image:
    linear-gradient(180deg, rgba(16, 24, 40, 0.08), rgba(16, 24, 40, 0.34)),
    url("https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=900&q=78");
}

.marketing-thumb {
  background-image:
    linear-gradient(180deg, rgba(16, 24, 40, 0.04), rgba(16, 24, 40, 0.26)),
    url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=900&q=78");
}

.design-thumb,
.lighting-visual {
  background-image:
    linear-gradient(180deg, rgba(16, 24, 40, 0.03), rgba(16, 24, 40, 0.24)),
    url("https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=900&q=78");
}

.popular-card > span,
.learning-card > span,
.price-card span,
.status {
  border-radius: 5px;
}

.popular-card > span,
.learning-card > span {
  background: rgba(16, 24, 40, 0.82);
}

.home-stats,
.home-bottom-cta,
.academy-cta {
  background: #101828;
  border-radius: 10px;
  box-shadow: 0 24px 56px rgba(16, 24, 40, 0.18);
}

.process-list span,
.student-tabs button.active,
.lesson-sidebar li.active,
.lesson-tabs button.active,
.dashboard-course-list a,
.compact-list button,
.streak-card strong,
.page-hero-stats b,
.login-benefits b,
.activity-timeline b {
  color: #4f1ab6;
}

.process-list span,
.student-tabs button.active,
.lesson-sidebar li.active,
.lesson-tabs button.active,
.dashboard-course-list a,
.compact-list button {
  color: white;
  background: #4f1ab6;
}

.access-columns div,
.student-tabs,
.activity-timeline li,
.curriculum-card li,
.dashboard-course-list li,
.compact-list li,
.login-benefits span,
.page-hero-stats article,
.trust-logo-row span {
  background: #f9fafb;
  border-color: #eaecf0;
}

.review-grid article {
  padding: 22px;
}

.reviewer-avatar {
  border: 0;
}

.admin-body {
  background: #f6f7fb;
}

@media (min-width: 1040px) {
  .home-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
    min-height: 580px;
  }

  .professional-hero-media {
    min-height: 560px;
  }
}

.data-state {
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: 24px;
  color: #667085;
  background: #f9fafb;
  border: 1px dashed #d0d5dd;
  border-radius: 8px;
  font-weight: 800;
  text-align: center;
}

.empty-state {
  color: #475467;
  background: #ffffff;
}

.lms-courses-page {
  display: grid;
  gap: 24px;
  padding: 18px 14px 32px;
}

.courses-hero {
  display: grid;
  gap: 24px;
  padding: 28px 16px;
  background:
    linear-gradient(135deg, rgba(79, 26, 182, 0.1), rgba(79, 26, 182, 0) 42%),
    linear-gradient(315deg, rgba(31, 107, 255, 0.08), rgba(31, 107, 255, 0) 40%),
    #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.06);
}

.courses-hero h1 {
  max-width: 720px;
  font-size: clamp(38px, 11vw, 72px);
  line-height: 0.98;
}

.course-hero-search {
  display: grid;
  gap: 8px;
  max-width: 560px;
  margin-top: 20px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.course-hero-search input {
  min-height: 58px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
}

.course-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.course-hero-stats article,
.course-support-strip article {
  padding: 16px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
}

.course-hero-stats b {
  display: block;
  color: #4f1ab6;
  font-size: 22px;
}

.course-hero-stats span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.courses-hero-media {
  display: grid;
  gap: 12px;
}

.courses-hero-media article {
  min-height: 150px;
  padding: 18px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(16, 24, 40, 0.08), rgba(16, 24, 40, 0.78)),
    url("https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=900&q=78");
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 18px 34px rgba(16, 24, 40, 0.16);
}

.courses-hero-media article:nth-child(2) {
  background-image:
    linear-gradient(180deg, rgba(16, 24, 40, 0.08), rgba(16, 24, 40, 0.78)),
    url("https://images.unsplash.com/photo-1508614589041-895b88991e3e?auto=format&fit=crop&w=900&q=78");
}

.courses-hero-media article:nth-child(3) {
  background-image:
    linear-gradient(180deg, rgba(16, 24, 40, 0.08), rgba(16, 24, 40, 0.78)),
    url("https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=900&q=78");
}

.courses-hero-media span,
.courses-hero-media strong {
  display: block;
}

.courses-hero-media span {
  color: #d9d6fe;
  font-weight: 900;
}

.courses-hero-media strong {
  max-width: 180px;
  margin-top: 74px;
  font-size: 21px;
  line-height: 1.05;
}

.course-browser {
  display: grid;
  gap: 18px;
}

.course-filter-panel,
.course-results-panel {
  padding: 16px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.05);
}

.course-filter-panel {
  display: grid;
  gap: 14px;
  align-self: start;
}

.course-filter-panel label,
.course-results-top label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.course-filter-panel .panel-head button {
  min-height: 36px;
  padding: 0 10px;
  color: #4f1ab6;
  background: #f4f1ff;
  border: 1px solid #e6ddff;
  border-radius: 7px;
  font-weight: 900;
}

.course-results-top {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.course-results-top h2,
.course-results-top p {
  margin-bottom: 0;
}

.dynamic-course-grid {
  display: grid;
  gap: 16px;
}

.dynamic-course-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.06);
}

.dynamic-course-media {
  position: relative;
  display: block;
  min-height: 190px;
  background: #111827;
}

.dynamic-course-media img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.dynamic-course-media > span {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  color: #ffffff;
  background: #4f1ab6;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.course-no-image {
  display: grid;
  place-items: center;
  min-height: 210px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(79, 26, 182, 0.7), rgba(16, 24, 40, 0.92)),
    #111827;
}

.course-no-image span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  font-weight: 900;
}

.dynamic-course-body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.dynamic-course-body small {
  color: #4f1ab6;
  font-weight: 900;
}

.dynamic-course-body h3 {
  margin-bottom: 0;
  font-size: 18px;
}

.dynamic-course-body p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 48px;
  margin-bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.course-meta-row,
.course-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.course-meta-row span {
  color: #667085;
  font-size: 13px;
  font-weight: 800;
}

.course-price-row {
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #eaecf0;
}

.course-price-row strong {
  color: #101828;
  font-size: 18px;
}

.course-price-row small {
  color: #98a2b3;
  text-decoration: line-through;
}

.course-price-row a {
  min-height: 36px;
  padding: 8px 12px;
  color: #ffffff;
  background: #4f1ab6;
  border-radius: 7px;
  font-weight: 900;
}

.course-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.course-pagination span {
  color: #667085;
  font-weight: 900;
}

.course-pagination button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.course-support-strip {
  display: grid;
  gap: 14px;
}

.dynamic-detail-hero {
  display: grid;
  gap: 20px;
  padding: 26px 16px;
  background:
    linear-gradient(135deg, rgba(79, 26, 182, 0.12), transparent 42%),
    #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.06);
}

.dynamic-detail-hero > div > small {
  color: #4f1ab6;
  font-weight: 900;
}

.detail-price-card {
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #101828;
  border-radius: 10px;
  color: #ffffff;
}

.detail-price-card .course-no-image,
.detail-price-card img {
  width: 100%;
  min-height: 220px;
  height: 220px;
  border-radius: 8px;
  object-fit: cover;
}

.detail-price-card strong {
  font-size: 28px;
}

.detail-price-card small {
  color: #d0d5dd;
  font-weight: 800;
}

@media (min-width: 760px) {
  .lms-courses-page {
    padding: 28px 32px 46px;
  }

  .courses-hero {
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    padding: 42px;
  }

  .courses-hero-media {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
  }

  .courses-hero-media article:nth-child(2) {
    min-height: 250px;
  }

  .course-browser {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .course-results-top {
    grid-template-columns: 1fr 220px;
    align-items: center;
  }

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

  .course-support-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .dynamic-detail-hero {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: center;
    padding: 42px;
  }
}

@media (min-width: 1120px) {
  .dynamic-course-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

/* Homepage reference replication */
.home-body {
  --ref-purple: #6b2cf5;
  --ref-purple-dark: #24006c;
  --ref-ink: #071024;
  --ref-muted: #687085;
  background: #ffffff;
}

.home-body .home-header {
  display: grid;
  grid-template-columns: auto minmax(520px, 1fr) minmax(230px, 270px) auto;
  gap: 22px;
  min-height: 72px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #edeff5;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
}

.global-public-shell .home-header {
  display: grid;
  grid-template-columns: auto minmax(480px, 1fr) minmax(230px, 270px) auto;
  gap: 22px;
  min-height: 72px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #edeff5;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
}

.home-body .menu-toggle {
  display: none;
}

.global-public-shell .menu-toggle {
  display: none;
}

.home-body .academy-logo {
  order: 0;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  min-width: 130px;
  line-height: 0.88;
}

.global-public-shell .academy-logo {
  order: 0;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  min-width: 130px;
  line-height: 0.88;
}

.home-body .academy-logo strong {
  color: var(--ref-purple);
  font-size: 30px;
  letter-spacing: -1px;
}

.global-public-shell .academy-logo strong {
  color: var(--ref-purple, #6b2cf5);
  font-size: 30px;
  letter-spacing: -1px;
}

.home-body .academy-logo span {
  color: #111827;
  font-size: 9px;
  letter-spacing: 4px;
}

.global-public-shell .academy-logo span {
  color: #111827;
  font-size: 9px;
  letter-spacing: 4px;
}

.home-body .home-header .academy-nav {
  order: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  gap: 34px;
}

.global-public-shell .home-header .academy-nav {
  order: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  gap: 34px;
}

.home-body .home-header .academy-nav a {
  position: relative;
  color: #0d1324;
  font-size: 14px;
  font-weight: 900;
}

.global-public-shell .home-header .academy-nav a {
  position: relative;
  color: #0d1324;
  font-size: 14px;
  font-weight: 900;
}

.home-body .home-header .academy-nav a.active,
.home-body .home-header .academy-nav a:hover {
  color: var(--ref-purple);
}

.global-public-shell .home-header .academy-nav a.active,
.global-public-shell .home-header .academy-nav a:hover {
  color: var(--ref-purple, #6b2cf5);
}

.home-body .home-header .academy-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -27px;
  height: 3px;
  background: var(--ref-purple);
  border-radius: 999px 999px 0 0;
}

.global-public-shell .home-header .academy-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -27px;
  height: 3px;
  background: var(--ref-purple, #6b2cf5);
  border-radius: 999px 999px 0 0;
}

.home-body .home-search {
  order: 0;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: 100%;
  min-height: 42px;
  padding: 0;
  color: transparent;
}

.global-public-shell .home-search {
  order: 0;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: 100%;
  min-height: 42px;
  padding: 0;
  color: transparent;
}

.home-body .home-search input {
  min-height: 42px;
  padding: 0 44px 0 20px;
  background: #f7f7fb;
  border: 1px solid #edf0f7;
  border-radius: 999px;
  box-shadow: none;
}

.global-public-shell .home-search input {
  min-height: 42px;
  padding: 0 44px 0 20px;
  background: #f7f7fb;
  border: 1px solid #edf0f7;
  border-radius: 999px;
  box-shadow: none;
}

.home-body .home-actions {
  order: 0;
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  display: flex;
  gap: 18px;
  align-items: center;
}

.global-public-shell .home-actions {
  order: 0;
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  display: flex;
  gap: 12px;
  align-items: center;
}

.auth-logged-out,
.auth-logged-in {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-logged-out[hidden],
.auth-logged-in[hidden],
.avatar-dropdown[hidden] {
  display: none;
}

.auth-login,
.auth-signup {
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.auth-login {
  color: #101828;
  background: #ffffff;
  border: 1px solid #e5e7ef;
}

.avatar-trigger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 3px solid #f3f4f8;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}

.avatar-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-logged-in {
  position: relative;
}

.avatar-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  display: grid;
  min-width: 210px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.avatar-dropdown a,
.avatar-dropdown button {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding: 11px 12px;
  color: #111827;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.avatar-dropdown a:hover,
.avatar-dropdown button:hover {
  color: var(--ref-purple, #6b2cf5);
  background: #f5f1ff;
}

.header-avatar {
  width: 40px;
  height: 40px;
  background:
    radial-gradient(circle at 50% 34%, #f6c49b 0 17%, transparent 18%),
    linear-gradient(180deg, #111827 42%, #0f172a 43%);
  border: 3px solid #f3f4f8;
  border-radius: 50%;
}

.home-body .home-page {
  max-width: none;
  padding: 0;
  background: #ffffff;
}

.home-body .home-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 36px;
  min-height: 460px;
  padding: 62px clamp(24px, 5vw, 78px) 48px;
  color: #ffffff;
  background:
    radial-gradient(circle at 72% 52%, rgba(110, 48, 255, 0.58) 0 13%, transparent 14%),
    radial-gradient(circle at 91% 28%, rgba(98, 32, 197, 0.32) 0 8%, transparent 18%),
    radial-gradient(circle at 55% 72%, rgba(99, 40, 210, 0.2), transparent 28%),
    linear-gradient(135deg, #050b24 0%, #0c052a 45%, #11002f 100%);
}

.home-body .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.16;
}

.home-body .home-hero > * {
  position: relative;
}

.home-body .home-pill {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 20px;
  padding: 7px 12px;
  color: #d6c8ff;
  background: rgba(107, 44, 245, 0.28);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-body .home-hero h1 {
  max-width: 610px;
  margin-bottom: 22px;
  color: #ffffff;
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 0.98;
  font-weight: 900;
}

.home-body .home-hero h1 span {
  display: block;
  color: var(--ref-purple);
}

.home-body .home-hero-copy > p:not(.home-pill) {
  max-width: 540px;
  margin-bottom: 26px;
  color: #f0f2ff;
  font-size: 18px;
  line-height: 1.65;
}

.hero-search-form {
  display: grid;
  grid-template-columns: 1fr 96px;
  width: min(100%, 560px);
  min-height: 58px;
  overflow: hidden;
  background: #ffffff;
  border: 4px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}

.hero-search-form input {
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #111827;
}

.hero-search-form button {
  color: #ffffff;
  background: var(--ref-purple);
  border: 0;
  font-weight: 900;
}

.hero-metric-row {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: clamp(18px, 4vw, 42px);
  margin-top: 30px;
}

.hero-metric-row article {
  display: grid;
  gap: 2px;
  padding-left: 36px;
  color: #ffffff;
}

.hero-metric-row b {
  font-size: 25px;
  line-height: 1;
}

.hero-metric-row span {
  color: #e5e7ff;
  font-size: 12px;
  font-weight: 800;
}

.home-body .professional-hero-media {
  position: relative;
  display: grid;
  grid-template-columns: 0.75fr 0.98fr 0.75fr;
  align-items: end;
  min-height: 330px;
  padding: 0;
  overflow: visible;
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.home-body .professional-hero-media::-webkit-scrollbar {
  display: none;
}

.hero-course-card {
  display: grid;
  align-content: end;
  min-height: 250px;
  padding: 18px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.02), rgba(2, 6, 23, 0.78)),
    url("https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=700&q=78") center / cover;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.34);
}

.hero-course-card b {
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.05;
}

.hero-course-card span {
  color: #facc15;
  font-size: 12px;
  font-weight: 900;
}

.hero-photo {
  min-height: 340px;
  transform: translateY(-22px);
}

.hero-drone {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 23, 0.02), rgba(2, 6, 23, 0.78)),
    url("https://images.unsplash.com/photo-1508614589041-895b88991e3e?auto=format&fit=crop&w=700&q=78");
}

.hero-edit {
  background-image:
    linear-gradient(180deg, rgba(2, 6, 23, 0.02), rgba(2, 6, 23, 0.78)),
    url("https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=700&q=78");
}

.home-body .home-section {
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px 24px;
}

.home-body .home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.home-body .home-section-head h2,
.home-body .center-head h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.15;
}

.home-body .home-section-head a {
  color: var(--ref-purple);
  font-size: 14px;
  font-weight: 900;
}

.home-categories {
  padding-top: 30px !important;
}

.home-body .category-strip,
.home-body .review-grid {
  position: relative;
}

.home-body .category-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.category-slider-viewport,
.testimonial-slider-viewport {
  overflow: hidden;
  width: 100%;
}

.category-slider-track,
.testimonial-slider-track {
  --visible-slides: 4;
  --slider-index: 0;
  display: flex;
  gap: 14px;
  transition: transform 420ms ease;
  transform: translate3d(calc(var(--slider-index) * -1 * ((100% - (var(--visible-slides) - 1) * 14px) / var(--visible-slides) + 14px)), 0, 0);
  will-change: transform;
}

.category-slider-track > *,
.testimonial-slider-track > * {
  flex: 0 0 calc((100% - (var(--visible-slides) - 1) * 14px) / var(--visible-slides));
}

.home-body .category-slide-card {
  min-height: 104px;
  padding: 17px 10px 14px;
  background: #fbfbfe;
  border: 1px solid #edf0f7;
  border-radius: 9px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-body .category-slide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(107, 44, 245, 0.13);
}

.home-body .category-slide-card span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  color: var(--ref-purple);
  background: transparent;
  border: 0;
  font-size: 18px;
}

.home-body .category-slide-card img {
  max-width: 26px;
  max-height: 26px;
  object-fit: contain;
}

.home-body .category-slide-card b {
  display: block;
  color: #121827;
  font-size: 12px;
}

.home-body .category-slide-card small {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 11px;
}

.slider-nav {
  align-self: center;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--ref-purple);
  background: #ffffff;
  border: 1px solid #e8eaf2;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.slider-nav:hover {
  color: #ffffff;
  background: var(--ref-purple);
  transform: translateY(-1px);
}

.home-body .popular-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1180px) {
  .home-body .popular-grid,
  .home-body .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-body .dynamic-course-card {
  overflow: hidden;
  border: 1px solid #e7eaf2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.home-body .dynamic-course-card:hover {
  transform: translateY(-5px);
  border-color: rgba(107, 44, 245, 0.22);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.12);
}

.home-body .dynamic-course-media {
  min-height: auto;
}

.home-body .dynamic-course-media img,
.home-body .course-no-image {
  height: 150px;
  min-height: 150px;
}

.home-body .dynamic-course-media > span {
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #7c3aed, #5523e8);
  border-radius: 6px;
  font-size: 11px;
}

.home-body .dynamic-course-body {
  gap: 9px;
  padding: 16px;
}

.home-body .dynamic-course-body small {
  color: #647084;
  font-size: 12px;
}

.home-body .dynamic-course-body h3 {
  min-height: 42px;
  color: #121827;
  font-size: 17px;
  line-height: 1.18;
}

.home-body .dynamic-course-body p {
  min-height: 42px;
  color: #667085;
  font-size: 13px;
}

.home-body .course-meta-row {
  gap: 8px;
  font-size: 12px;
}

.home-body .course-meta-row span:first-child {
  color: #334155;
}

.home-body .course-meta-row:nth-of-type(2) span:first-child {
  color: #f59e0b;
}

.home-body .course-price-row {
  border: 0;
  padding-top: 4px;
}

.home-body .course-price-row strong {
  color: #b42318;
  font-size: 16px;
}

.home-body .course-price-row a {
  min-height: 28px;
  padding: 6px 9px;
  color: #067647;
  background: #dcfae6;
  border-radius: 6px;
  font-size: 11px;
}

.home-body .home-bottom-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  max-width: 1112px;
  width: min(calc(100% - 48px), 1112px);
  margin: 0 auto 12px;
  padding: 26px 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 70% 50%, rgba(255,255,255,0.15), transparent 20%),
    linear-gradient(135deg, #4b17cf 0%, #7c2ff2 52%, #4b17cf 100%);
  border-radius: 10px;
  box-shadow: 0 20px 42px rgba(91, 34, 220, 0.24);
}

.home-body .home-bottom-cta .cta-icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  color: var(--ref-purple);
  background: #ffffff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.home-body .home-bottom-cta h2 {
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 25px;
}

.home-body .home-bottom-cta p {
  color: #eee8ff;
}

.home-body .home-bottom-cta .btn {
  width: auto;
  min-width: 190px;
  color: #4f1ab6;
}

.is-hidden-home-extra {
  display: none !important;
}

.home-body .home-benefits {
  padding-top: 28px;
  padding-bottom: 58px;
}

.home-body .center-head {
  margin-bottom: 28px;
  text-align: center;
}

.home-body .benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-body .benefit-grid article {
  min-height: 166px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e8eaf2;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
  text-align: left;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.home-body .benefit-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(107, 44, 245, 0.22);
  box-shadow: 0 20px 44px rgba(107, 44, 245, 0.11);
}

.home-body .benefit-grid span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: var(--ref-purple);
  background: #f4f0ff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
}

.home-body .benefit-grid b {
  display: block;
  min-height: 38px;
  color: #111827;
  font-size: 14px;
  line-height: 1.25;
}

.home-body .benefit-grid p {
  color: #667085;
  font-size: 12px;
}

.home-body .home-section:has([data-home-testimonials]) {
  max-width: none;
  padding: 46px clamp(24px, 5vw, 78px) 56px;
  background:
    radial-gradient(circle at 18% 20%, rgba(107, 44, 245, 0.08), transparent 28%),
    #f7f8fc;
}

.home-body .review-grid {
  max-width: 1112px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
}

.home-body .review-grid .data-state {
  grid-column: 1 / -1;
  max-width: 620px;
  min-height: 148px;
  margin: 0 auto;
  padding: 34px 38px;
  color: #475467;
  background: #ffffff;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.home-body .testimonial-card {
  min-height: 132px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e9edf5;
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.testimonial-person {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.testimonial-person img,
.testimonial-person span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: var(--ref-purple);
  border-radius: 50%;
  object-fit: cover;
  font-weight: 900;
}

.home-body .review-grid b {
  display: block;
  color: #111827;
  font-size: 14px;
}

.home-body .review-grid strong {
  display: block;
  color: #f59e0b;
  font-size: 13px;
}

.home-body .review-grid p {
  margin-top: 12px;
  color: #475467;
  font-size: 13px;
}

.home-body footer.premium-footer {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr) 1.35fr;
  gap: 44px;
  margin-top: 0;
  padding: 48px clamp(32px, 5vw, 78px) 38px;
  color: #ffffff;
  background:
    radial-gradient(circle at 0 0, rgba(107, 44, 245, 0.22), transparent 30%),
    #071221;
}

.global-public-shell footer.premium-footer {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr) 1.35fr;
  gap: 44px;
  margin-top: 0;
  padding: 48px clamp(32px, 5vw, 78px) 38px;
  color: #ffffff;
  background:
    radial-gradient(circle at 0 0, rgba(107, 44, 245, 0.22), transparent 30%),
    #071221;
}

.home-body footer.premium-footer > div,
.home-body footer.premium-footer > nav,
.home-body footer.premium-footer > form {
  min-width: 0;
}

.global-public-shell footer.premium-footer > div,
.global-public-shell footer.premium-footer > nav,
.global-public-shell footer.premium-footer > form {
  min-width: 0;
}

.home-body footer.premium-footer strong {
  color: #7c3aed;
  font-size: 27px;
  line-height: 0.8;
}

.global-public-shell footer.premium-footer strong {
  color: #7c3aed;
  font-size: 27px;
  line-height: 0.8;
}

.home-body footer.premium-footer strong span {
  color: #ffffff;
  font-size: 8px;
  letter-spacing: 4px;
}

.global-public-shell footer.premium-footer strong span {
  color: #ffffff;
  font-size: 8px;
  letter-spacing: 4px;
}

.home-body footer.premium-footer p {
  color: #c7cfdd;
  font-size: 13px;
}

.global-public-shell footer.premium-footer p {
  color: #c7cfdd;
  font-size: 13px;
}

.home-body footer.premium-footer > nav {
  display: grid !important;
  gap: 8px;
  align-content: start;
  font-weight: 700;
}

.global-public-shell footer.premium-footer > nav {
  display: grid !important;
  gap: 8px;
  align-content: start;
  font-weight: 700;
}

.home-body footer.premium-footer h3,
.home-body footer.premium-footer .footer-subscribe h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 15px;
}

.global-public-shell footer.premium-footer h3,
.global-public-shell footer.premium-footer .footer-subscribe h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 15px;
}

.home-body footer.premium-footer a {
  display: inline-flex;
  width: fit-content;
  color: #c7cfdd;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.global-public-shell footer.premium-footer a {
  display: inline-flex;
  width: fit-content;
  color: #c7cfdd;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}

.home-body footer.premium-footer .footer-subscribe {
  display: grid;
  align-content: start;
  gap: 10px;
}

.global-public-shell footer.premium-footer .footer-subscribe {
  display: grid;
  align-content: start;
  gap: 10px;
}

.home-body footer.premium-footer .footer-subscribe div {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.global-public-shell footer.premium-footer .footer-subscribe div {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.home-body footer.premium-footer .footer-subscribe input {
  min-height: 42px;
  color: #ffffff;
  background: #0d1a2d;
  border-color: #26364d;
  border-radius: 7px;
}

.global-public-shell footer.premium-footer .footer-subscribe input {
  min-height: 42px;
  color: #ffffff;
  background: #0d1a2d;
  border-color: #26364d;
  border-radius: 7px;
}

.home-body footer.premium-footer .footer-subscribe button {
  padding: 0 14px;
  color: #ffffff;
  background: var(--ref-purple);
  border: 0;
  border-radius: 7px;
  font-weight: 900;
}

.global-public-shell footer.premium-footer .footer-subscribe button {
  padding: 0 14px;
  color: #ffffff;
  background: var(--ref-purple, #6b2cf5);
  border: 0;
  border-radius: 7px;
  font-weight: 900;
}

@media (max-width: 980px) {
  .home-body .home-header,
  .global-public-shell .home-header {
    grid-template-columns: 1fr auto;
    min-height: 66px;
  }

  .global-public-shell .academy-logo,
  .home-body .academy-logo {
    grid-column: 1;
    grid-row: 1;
  }

  .global-public-shell .menu-toggle,
  .home-body .menu-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .home-body .menu-toggle,
  .global-public-shell .menu-toggle {
    display: grid;
  }

  .home-body .home-header .academy-nav,
  .home-body .home-search,
  .home-body .home-actions,
  .global-public-shell .home-header .academy-nav,
  .global-public-shell .home-search,
  .global-public-shell .home-actions {
    grid-column: 1 / -1;
  }

  .global-public-shell .home-header .academy-nav,
  .home-body .home-header .academy-nav {
    grid-row: 2;
  }

  .global-public-shell .home-search,
  .home-body .home-search {
    grid-row: 3;
  }

  .global-public-shell .home-actions,
  .home-body .home-actions {
    grid-row: 4;
  }

  .home-body .home-header.nav-open .academy-nav,
  .global-public-shell .home-header.nav-open .academy-nav {
    display: grid;
    gap: 0;
    justify-self: stretch;
  }

  .home-body .home-header .academy-nav a.active::after,
  .global-public-shell .home-header .academy-nav a.active::after {
    display: none;
  }

  .home-body .home-search,
  .home-body .home-actions,
  .global-public-shell .home-search,
  .global-public-shell .home-actions {
    display: none;
  }

  .global-public-shell .home-header.nav-open .home-search {
    display: block;
  }

  .global-public-shell .home-header.nav-open .home-actions {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 12px;
  }

  .global-public-shell .home-header.nav-open .auth-logged-out a {
    display: flex;
  }

  .home-body .home-hero {
    gap: 24px;
    padding: 30px 18px 30px;
  }

  .home-body .home-pill {
    margin-bottom: 14px;
    font-size: 10px;
  }

  .home-body .home-hero h1 {
    margin-bottom: 16px;
    font-size: 40px;
    line-height: 1.02;
  }

  .home-body .home-hero-copy > p:not(.home-pill) {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.5;
  }

  .hero-search-form {
    grid-template-columns: 1fr 82px;
    min-height: 52px;
  }

  .home-body .professional-hero-media {
    grid-template-columns: repeat(3, minmax(148px, 1fr));
    min-height: 196px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .home-body .hero-course-card {
    min-height: 180px;
    scroll-snap-align: center;
  }

  .hero-photo {
    min-height: 196px;
    transform: none;
  }

  .hero-metric-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 22px;
  }

  .hero-metric-row article {
    padding-left: 0;
  }

  .hero-metric-row b {
    font-size: 21px;
  }

  .home-body .category-strip,
  .home-body .review-grid {
    grid-template-columns: auto 1fr auto;
  }

  .home-body .popular-grid,
  .home-body .benefit-grid,
  .home-body .premium-footer,
  .global-public-shell .premium-footer {
    grid-template-columns: 1fr !important;
  }

  .global-public-shell footer.premium-footer > div,
  .global-public-shell footer.premium-footer > nav,
  .global-public-shell footer.premium-footer > form,
  .home-body footer.premium-footer > div,
  .home-body footer.premium-footer > nav,
  .home-body footer.premium-footer > form {
    width: 100%;
  }

  .global-public-shell footer.premium-footer a,
  .home-body footer.premium-footer a {
    display: inline-flex;
  }

  .home-body .home-bottom-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .home-body .home-bottom-cta .cta-icon {
    margin: 0 auto;
  }

  .home-body .benefit-grid article {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .global-public-shell .home-header,
  .home-body .home-header {
    padding: 0 16px;
  }

  .auth-logged-out {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .auth-login,
  .auth-signup {
    justify-content: center;
  }

  .home-body .home-section {
    padding-inline: 16px;
  }

  .home-body .category-strip,
  .home-body .review-grid {
    gap: 8px;
  }

  .slider-nav {
    width: 34px;
    height: 34px;
    font-size: 22px;
  }

  .home-body .popular-grid {
    gap: 16px;
  }

  .home-body .home-bottom-cta {
    width: calc(100% - 32px);
    padding: 24px 18px;
  }

  .global-public-shell footer.premium-footer,
  .home-body footer.premium-footer {
    padding: 34px 20px 28px;
  }

  .global-public-shell footer.premium-footer .footer-subscribe div,
  .home-body footer.premium-footer .footer-subscribe div {
    grid-template-columns: 1fr;
  }
}