:root {
  --v3-primary: #1A8A8A;
  --v3-primary-dark: #126868;
  --v3-primary-light: #4FB3B3;
  --v3-accent: #FF7A59;
  --v3-accent-dark: #E55A3C;
  --v3-neutral-950: #0E1B1B;
  --v3-neutral-700: #4A5757;
  --v3-neutral-500: #8895A3;
  --v3-neutral-200: #E2E8E8;
  --v3-neutral-50: #F7FAFA;
  --v3-white: #FFFFFF;
  --v3-success: #16A34A;
  --v3-warning: #F59E0B;
  --v3-danger: #DC2626;
  --v3-info: #2563EB;

  --v3-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v3-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --v3-font-ar: 'Cairo', var(--v3-font-sans);

  --v3-space-1: 4px;
  --v3-space-2: 8px;
  --v3-space-3: 12px;
  --v3-space-4: 16px;
  --v3-space-5: 24px;
  --v3-space-6: 32px;
  --v3-space-7: 48px;
  --v3-space-8: 64px;
  --v3-space-9: 96px;
  --v3-space-10: 128px;

  --v3-radius-sm: 4px;
  --v3-radius-md: 8px;
  --v3-radius-lg: 12px;
  --v3-radius-xl: 16px;
  --v3-radius-pill: 999px;

  --v3-shadow-sm: 0 8px 20px rgba(14, 27, 27, 0.08);
  --v3-shadow-md: 0 18px 40px rgba(14, 27, 27, 0.12);
  --v3-shadow-lg: 0 28px 60px rgba(14, 27, 27, 0.16);

  --v3-hover: 180ms ease-out;
  --v3-modal: 240ms ease-out;
}

html {
  font-family: var(--v3-font-sans);
}

body {
  background: linear-gradient(180deg, #eef7f7 0%, var(--v3-neutral-50) 20%, #fdfefe 100%);
  color: var(--v3-neutral-950);
}

code,
pre,
.admin-code,
textarea[data-code='true'] {
  font-family: var(--v3-font-mono);
}

[lang='ar'],
.rtl,
.font-ar {
  font-family: var(--v3-font-ar);
}

.admin-dashboard,
.admin-v3-page {
  width: min(1240px, calc(100% - 2rem));
  margin: var(--v3-space-5) auto 0;
}

.admin-v3-shell,
.hero-shell,
.admin-panel,
.filter-bar,
.admin-card,
.admin-table-wrap,
.admin-stat,
.admin-feed-block,
.admin-list-card,
.admin-detail-card,
.admin-form-card,
.empty-state,
.mode-banner {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(26, 138, 138, 0.12);
  border-radius: var(--v3-radius-xl);
  box-shadow: var(--v3-shadow-sm);
}

.hero-shell {
  padding: clamp(24px, 3vw, 40px);
  margin-bottom: var(--v3-space-5);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(26, 138, 138, 0.12), rgba(79, 179, 179, 0.08) 45%, rgba(255, 122, 89, 0.12));
}

.hero-shell::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 89, 0.18), transparent 68%);
  pointer-events: none;
}

.section-kicker,
.card-kicker,
.tag,
.filter-pill,
.status-pill,
.metric-pill,
.count-badge,
.mode-badge,
.admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--v3-radius-pill);
  border: 1px solid rgba(26, 138, 138, 0.14);
  background: rgba(26, 138, 138, 0.08);
  color: var(--v3-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.section-title,
.admin-dashboard h1,
.admin-v3-page h1 {
  color: var(--v3-neutral-950);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 14px 0 12px;
  font-weight: 800;
}

.section-subtitle,
.admin-muted,
.empty-state p,
.admin-card-description,
.admin-table td,
.admin-field-help {
  color: var(--v3-neutral-700);
}

.admin-v3-stack {
  display: grid;
  gap: var(--v3-space-5);
}

.admin-section {
  display: grid;
  gap: var(--v3-space-4);
}

.admin-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v3-space-3);
}

.admin-section-heading h2,
.admin-section-title {
  margin: 0;
  font-size: 1.45rem;
  color: var(--v3-neutral-950);
  font-weight: 800;
}

.admin-section-heading p,
.admin-section-caption {
  margin: 6px 0 0;
  color: var(--v3-neutral-700);
}

.admin-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v3-space-4);
}

.admin-grid,
.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: var(--v3-space-4);
}

.filter-pill.active,
.filter-pill:hover,
.tag:hover {
  background: var(--v3-primary);
  color: var(--v3-white);
  border-color: var(--v3-primary);
}

.admin-card {
  min-height: 220px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  transition: transform var(--v3-hover), box-shadow var(--v3-hover), border-color var(--v3-hover);
}

.admin-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--v3-shadow-md);
  border-color: rgba(26, 138, 138, 0.26);
}

.admin-card-header,
.admin-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v3-space-3);
}

.admin-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--v3-radius-lg);
  display: inline-grid;
  place-items: center;
  background: rgba(26, 138, 138, 0.12);
  color: var(--v3-primary-dark);
  font-size: 1.6rem;
  flex-shrink: 0;
}

.admin-card h3 {
  margin: 0;
  font-size: 1.12rem;
  color: var(--v3-neutral-950);
  font-weight: 800;
}

.admin-card p {
  margin: 10px 0 0;
  font-size: 0.98rem;
}

.admin-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v3-space-3);
  margin-top: var(--v3-space-4);
}

.count-badge.is-danger,
.status-pill.is-danger,
.metric-pill.is-danger {
  background: rgba(220, 38, 38, 0.1);
  color: var(--v3-danger);
  border-color: rgba(220, 38, 38, 0.18);
}

.count-badge.is-success,
.status-pill.is-success,
.metric-pill.is-success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--v3-success);
  border-color: rgba(22, 163, 74, 0.18);
}

.count-badge.is-warning,
.status-pill.is-warning,
.metric-pill.is-warning,
.mode-badge.mode-test {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.22);
}

.mode-badge.mode-live,
.status-pill.is-live {
  background: rgba(22, 163, 74, 0.12);
  color: var(--v3-success);
  border-color: rgba(22, 163, 74, 0.22);
}

.admin-link,
.btn-v3,
.btn-v22,
.btn-refresh,
.admin-actions a,
.admin-actions button,
.admin-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: var(--v3-radius-md);
  border: 1px solid var(--v3-primary);
  background: var(--v3-primary);
  color: var(--v3-white);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--v3-hover), background var(--v3-hover), border-color var(--v3-hover), box-shadow var(--v3-hover);
  cursor: pointer;
}

.admin-link:hover,
.btn-v3:hover,
.btn-v22:hover,
.btn-refresh:hover,
.admin-actions a:hover,
.admin-actions button:hover,
.admin-card-link:hover {
  background: var(--v3-primary-dark);
  border-color: var(--v3-primary-dark);
  color: var(--v3-white);
  transform: translateY(-1px);
  box-shadow: var(--v3-shadow-sm);
}

.btn-v3-ghost,
.btn-v22-ghost,
.admin-actions .btn-v3-ghost,
.admin-actions .btn-v22-ghost {
  background: rgba(26, 138, 138, 0.06);
  border-color: rgba(26, 138, 138, 0.18);
  color: var(--v3-primary-dark);
}

.btn-v3-ghost:hover,
.btn-v22-ghost:hover {
  background: rgba(26, 138, 138, 0.12);
  color: var(--v3-primary-dark);
  border-color: rgba(26, 138, 138, 0.28);
}

.btn-v3-danger,
.danger-link,
.admin-actions .danger-link {
  background: rgba(220, 38, 38, 0.08);
  color: var(--v3-danger);
  border-color: rgba(220, 38, 38, 0.18);
}

.btn-v3-danger:hover,
.danger-link:hover,
.admin-actions .danger-link:hover {
  background: rgba(220, 38, 38, 0.14);
  color: var(--v3-danger);
  border-color: rgba(220, 38, 38, 0.28);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v3-space-2);
}

.admin-stats-row,
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v3-space-2);
}

.admin-table-wrap {
  overflow: hidden;
}

.admin-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: transparent;
}

.admin-table th,
.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(136, 149, 163, 0.18);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  background: rgba(26, 138, 138, 0.07);
  color: var(--v3-neutral-950);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table td code,
.admin-code {
  background: rgba(14, 27, 27, 0.05);
  border-radius: var(--v3-radius-sm);
  padding: 2px 6px;
  color: var(--v3-neutral-950);
}

.admin-form,
.admin-form-grid,
.form-grid,
.filter-grid {
  display: grid;
  gap: var(--v3-space-4);
}

.form-grid,
.filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form label,
.admin-form-card label,
.filter-bar label {
  display: block;
  margin-bottom: 6px;
  color: var(--v3-neutral-950);
  font-weight: 700;
}

.admin-form input,
.admin-form textarea,
.admin-form select,
.filter-bar input,
.filter-bar textarea,
.filter-bar select,
.admin-input,
.admin-select,
.admin-textarea {
  width: 100%;
  border: 1px solid rgba(136, 149, 163, 0.4);
  border-radius: var(--v3-radius-md);
  padding: 12px 14px;
  background: var(--v3-white);
  color: var(--v3-neutral-950);
  transition: border-color var(--v3-hover), box-shadow var(--v3-hover);
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus,
.filter-bar input:focus,
.filter-bar textarea:focus,
.filter-bar select:focus,
.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
  outline: none;
  border-color: var(--v3-primary-light);
  box-shadow: 0 0 0 4px rgba(79, 179, 179, 0.16);
}

.admin-form textarea,
.admin-textarea {
  min-height: 120px;
  resize: vertical;
}

.filter-bar {
  padding: 18px;
}

.admin-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: var(--v3-space-4);
}

.admin-list-stack {
  display: grid;
  gap: var(--v3-space-3);
}

.admin-list-item,
.admin-feed-block,
.admin-detail-card,
.admin-form-card,
.admin-stat {
  padding: 18px;
}

.admin-list-item {
  border: 1px solid rgba(136, 149, 163, 0.18);
  border-radius: var(--v3-radius-lg);
  background: rgba(247, 250, 250, 0.9);
}

.admin-feed-grid,
.admin-health-grid,
.admin-settings-grid {
  display: grid;
  gap: var(--v3-space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-kv {
  display: grid;
  gap: var(--v3-space-2);
}

.admin-kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v3-space-3);
  padding: 12px 0;
  border-bottom: 1px solid rgba(136, 149, 163, 0.18);
}

.admin-kv-row:last-child {
  border-bottom: 0;
}

.admin-empty,
.empty-state {
  padding: 32px 24px;
  text-align: center;
}

.admin-empty h3,
.empty-state h3 {
  margin-top: 12px;
  margin-bottom: 10px;
  font-size: 1.15rem;
  font-weight: 800;
}

.admin-modal {
  transition: opacity var(--v3-modal), transform var(--v3-modal);
}

.admin-note {
  padding: 12px 14px;
  border-radius: var(--v3-radius-md);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
}

.admin-note.warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
  color: #b45309;
}

.admin-note.danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: var(--v3-danger);
}

@media (max-width: 1200px) {
  .admin-hub-grid,
  .admin-grid,
  .admin-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .admin-hub-grid,
  .admin-grid,
  .admin-card-grid,
  .admin-feed-grid,
  .admin-health-grid,
  .admin-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-split,
  .form-grid,
  .filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-dashboard,
  .admin-v3-page {
    width: min(100% - 1rem, 1240px);
  }

  .admin-hub-grid,
  .admin-feed-grid,
  .admin-health-grid,
  .admin-settings-grid,
  .admin-grid,
  .admin-card-grid {
    grid-template-columns: 1fr;
  }

  .admin-table-wrap {
    overflow-x: auto;
  }

  .admin-section-heading,
  .admin-card-footer,
  .admin-kv-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 27, 27, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.modal-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--v3-shadow-lg);
}

.modal-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-ghost {
  background: rgba(26, 138, 138, 0.06);
  border-color: rgba(26, 138, 138, 0.18);
  color: var(--v3-primary-dark);
}

.sandbox-page {
  padding-bottom: var(--v3-space-8);
}

.sandbox-hero {
  margin-top: var(--v3-space-5);
}

.sandbox-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: var(--v3-space-5);
  align-items: start;
}

.sandbox-main {
  min-width: 0;
}

.sandbox-sidebar,
.sandbox-card {
  padding: 24px;
}

.sandbox-sidebar-header h2,
.sandbox-card h3,
.sandbox-card-title {
  margin: 0;
  color: var(--v3-neutral-950);
  font-weight: 800;
}

.sandbox-sidebar-header p {
  margin: 8px 0 0;
}

.sandbox-challenge-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.sandbox-list-item {
  width: 100%;
  border: 1px solid rgba(26, 138, 138, 0.14);
  border-radius: var(--v3-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  padding: 14px 16px;
  text-align: left;
  display: grid;
  gap: 6px;
  color: var(--v3-neutral-950);
  transition: border-color var(--v3-hover), transform var(--v3-hover), box-shadow var(--v3-hover);
}

.sandbox-list-item span {
  color: var(--v3-neutral-700);
  font-size: 0.94rem;
}

.sandbox-list-item:hover,
.sandbox-list-item.active {
  border-color: rgba(26, 138, 138, 0.38);
  transform: translateY(-1px);
  box-shadow: var(--v3-shadow-sm);
}

.sandbox-toolbar,
.sandbox-output-header,
.maze-controls,
.robotics-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sandbox-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.sandbox-code-editor,
.sandbox-output-panel {
  width: 100%;
  border-radius: var(--v3-radius-lg);
  border: 1px solid rgba(26, 138, 138, 0.18);
  background: #0f1720;
  color: #ecfdfd;
  padding: 18px;
  font-family: var(--v3-font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
}

.sandbox-code-editor {
  min-height: 360px;
  margin-top: 20px;
  resize: vertical;
}

.sandbox-output-panel {
  min-height: 180px;
  margin: 0;
  white-space: pre-wrap;
}

.sandbox-progress {
  border-top: 1px solid rgba(26, 138, 138, 0.14);
  padding-top: 16px;
}

.sandbox-status-copy {
  margin: 0;
  color: var(--v3-neutral-700);
}

.maze-board {
  margin-top: 20px;
  display: grid;
  gap: 6px;
  width: min(100%, 540px);
}

.maze-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(26, 138, 138, 0.08);
  border: 1px solid rgba(26, 138, 138, 0.08);
  font-weight: 700;
}

.maze-cell.wall {
  background: #294444;
}

.maze-cell.start {
  background: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}

.maze-cell.goal {
  background: rgba(245, 158, 11, 0.2);
}

.maze-cell.player {
  background: rgba(22, 163, 74, 0.2);
}

.robotics-sandbox-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 20px;
  margin-top: 20px;
}

.robotics-stage {
  align-items: stretch;
}

.robotics-indicator {
  flex: 1;
  min-width: 120px;
  padding: 16px;
  border-radius: var(--v3-radius-lg);
  background: rgba(26, 138, 138, 0.08);
  text-align: center;
}

.robotics-led {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
}

.robotics-led.active {
  background: #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.7);
}

.robotics-chip {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: var(--v3-radius-pill);
  background: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

@media (max-width: 992px) {
  .sandbox-layout,
  .robotics-sandbox-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-dashboard,
  .admin-v3-page {
    width: min(100% - 1rem, 1240px);
  }

  .admin-hub-grid,
  .admin-feed-grid,
  .admin-health-grid,
  .admin-settings-grid,
  .admin-grid,
  .admin-card-grid {
    grid-template-columns: 1fr;
  }

  .admin-table-wrap {
    overflow-x: auto;
  }

  .admin-section-heading,
  .admin-card-footer,
  .admin-kv-row,
  .sandbox-toolbar,
  .sandbox-output-header,
  .maze-controls,
  .robotics-stage {
    flex-direction: column;
    align-items: flex-start;
  }

  .sandbox-sidebar,
  .sandbox-card {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


:root {
  --color-primary: var(--v3-primary);
  --color-coral: var(--v3-accent);
  --color-surface: var(--v3-white);
  --color-text: var(--v3-neutral-950);
  --color-muted: var(--v3-neutral-700);
}

.landing-shell,
.v22-page {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.v3-section {
  padding: 0 0 var(--v3-space-7);
}

.landing-page-v3 {
  padding-bottom: var(--v3-space-8);
}

.toolbar-v3 {
  position: sticky;
  top: 0;
  z-index: 1100;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(26, 138, 138, 0.12);
}

.toolbar-v3__inner,
.toolbar-v3__brand,
.toolbar-nav,
.hero-v3__actions,
.hero-v3__trust,
.social-proof-strip__inner,
.section-heading-inline,
.kit-section__footer,
.blog-byline,
.page-footer-v3__links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-v3__inner {
  justify-content: space-between;
  min-height: 76px;
}

.toolbar-v3__brand img {
  width: auto;
  height: 40px;
}

.toolbar-nav a,
.page-footer-v3__links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
}

.page-footer-v3__links a,
.page-footer-v3 a {
  color: rgba(255, 255, 255, 0.9);
}

.toolbar-nav a:hover,
.page-footer-v3__links a:hover,
.page-footer-v3 a:hover {
  color: var(--color-primary);
}

.toolbar-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(26, 138, 138, 0.14);
  background: rgba(26, 138, 138, 0.06);
  color: var(--color-primary);
}

.hero-v3 {
  background: linear-gradient(180deg, #F7FAFA 0%, #FFFFFF 100%);
  padding: var(--v3-space-6) 0 var(--v3-space-7);
}

.hero-v3__grid,
.kit-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.hero-v3__copy h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.02;
  margin: 18px 0 16px;
  font-weight: 800;
  color: var(--color-text);
}

.hero-v3__lead {
  font-size: 1.1rem;
  color: var(--color-muted);
  max-width: 42rem;
}

.hero-v3__primary {
  background: var(--color-coral);
  border-color: var(--color-coral);
}

.hero-v3__primary:hover {
  background: var(--v3-accent-dark);
  border-color: var(--v3-accent-dark);
}

.hero-v3__secondary {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--v3-radius-md);
  text-decoration: none;
  font-weight: 700;
}

.hero-v3__trust {
  margin-top: 12px;
  color: var(--color-muted);
  font-weight: 600;
}

.hero-v3__video-card,
.course-card-v3,
.feature-v3-card,
.story-card,
.kit-section,
.final-cta,
.faq-item,
.testimonial-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(26, 138, 138, 0.12);
  border-radius: 24px;
  box-shadow: var(--v3-shadow-sm);
}

.hero-v3__video-card {
  min-height: 100%;
  padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(160deg, rgba(26, 138, 138, 0.08), rgba(14, 27, 27, 0.04));
}

.hero-v3__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.hero-v3__video-card ul {
  margin: 16px 0 0;
  padding-left: 18px;
  color: var(--color-muted);
}

.social-proof-strip {
  padding: 0 0 var(--v3-space-6);
}

.social-proof-strip__inner {
  justify-content: center;
  color: rgba(14, 27, 27, 0.62);
  font-weight: 600;
  gap: 18px;
}

.section-heading-inline {
  justify-content: space-between;
  margin-bottom: 20px;
}

.features-v3-grid,
.courses-grid,
.stories-grid {
  display: grid;
  gap: var(--v3-space-4);
}

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

.feature-v3-card {
  padding: 24px;
  display: grid;
  gap: 12px;
}

.feature-v3-card h3,
.course-card-v3 h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.feature-v3-card p,
.course-card-v3 p,
.testimonial-card figcaption {
  margin: 0;
  color: var(--color-muted);
}

.page-footer-v3 p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.feature-v3-card a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
}

.feature-v3-card--muted {
  background: linear-gradient(180deg, rgba(14, 27, 27, 0.98), rgba(14, 27, 27, 0.9));
}

.feature-v3-card--muted h3,
.feature-v3-card--muted p,
.feature-v3-card--muted a {
  color: #fff;
}

.kit-section {
  padding: clamp(20px, 3vw, 28px);
}

.kit-section__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.kit-section__content {
  display: grid;
  gap: 18px;
}

.kit-section__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
}

.kit-section__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--color-muted);
}

.kit-section__price-label {
  display: block;
  font-size: 0.82rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kit-section__price {
  font-size: 1.7rem;
  color: var(--color-text);
}

.testimonials-band {
  background: #0E1B1B;
  color: #fff;
  padding: var(--v3-space-7) 0;
}

.testimonials-band__title {
  color: #fff;
}

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

.testimonial-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.testimonial-card img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: #132828;
}

.testimonial-card--empty {
  display: grid;
  place-items: center;
  min-height: 280px;
}

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

.course-card-v3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.course-card-v3__body {
  padding: 24px;
  display: grid;
  gap: 14px;
}

.course-card-v3__header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.course-card-v3 dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.course-card-v3 dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(26, 138, 138, 0.08);
}

.course-card-v3 dt {
  color: var(--color-muted);
  font-weight: 600;
}

.course-card-v3 dd {
  margin: 0;
  font-weight: 700;
}

.course-card-v3__cta {
  width: calc(100% - 32px);
  margin: 0 16px 16px;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  padding: 0 18px;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  color: var(--color-primary);
  font-size: 1.4rem;
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item p {
  margin: 0 0 18px;
  color: var(--color-muted);
}

.final-cta {
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
  display: grid;
  gap: 14px;
}

.final-cta h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
}

.final-cta p {
  margin: 0 auto;
  max-width: 44rem;
  color: var(--color-muted);
}

.page-footer-v3 {
  padding-top: var(--v3-space-7);
  background: var(--v3-neutral-950, #0E1B1B);
  color: #fff;
  padding-bottom: var(--v3-space-5);
}

.page-footer-v3__inner {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--v3-space-5);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.avatar {
  display: inline-block;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(26, 138, 138, 0.14);
  flex-shrink: 0;
}

.nav-avatar .avatar,
.dashboard-avatar .avatar,
.profile-avatar .avatar,
.table-avatar .avatar {
  border: 2px solid rgba(255, 255, 255, 0.92);
}

.dashboard-avatar,
.profile-avatar,
.table-avatar {
  display: inline-flex;
  align-items: center;
}

.blog-byline {
  color: var(--color-muted);
  font-weight: 600;
}

.blog-byline--stacked {
  align-items: flex-start;
}

.faq-page-hero {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .features-v3-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .courses-grid,
  .testimonials-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .toolbar-toggle {
    display: inline-grid;
    place-items: center;
  }

  .toolbar-nav {
    display: none;
    width: 100%;
    padding-bottom: 12px;
  }

  .toolbar-nav.show {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-v3__grid,
  .kit-section,
  .page-footer-v3__inner {
    grid-template-columns: 1fr;
    display: grid;
  }

  .hero-v3__copy {
    order: 1;
  }

  .hero-v3__media {
    order: 2;
  }

  .features-v3-grid,
  .courses-grid,
  .stories-grid,
  .testimonials-carousel {
    grid-template-columns: 1fr;
  }

  .testimonials-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
  }

  .testimonial-card {
    min-width: min(88vw, 340px);
    scroll-snap-align: start;
  }

  .social-proof-strip__inner,
  .section-heading-inline,
  .kit-section__footer,
  .hero-v3__actions,
  .hero-v3__trust {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-card-v3 dl div {
    flex-direction: column;
  }
}

.story-media-card {
  padding: 0;
  overflow: hidden;
}

.story-card-trigger {
  width: 100%;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: left;
}

.story-card-media {
  position: relative;
}

.story-card-media img,
.success-media-preview img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.success-media-preview {
  margin-top: 12px;
}

.success-media-preview img {
  max-height: 220px;
  border-radius: 18px;
  border: 1px solid rgba(26, 138, 138, 0.14);
}

.story-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.story-card-meta span,
.story-card-link,
.youtube-status {
  font-size: 0.92rem;
  color: var(--v3-primary-dark);
}

.story-card-link {
  font-weight: 700;
}

.story-play-badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: var(--v3-shadow-md);
}

.yt-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 27, 27, 0.82);
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.yt-lightbox-content {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--v3-shadow-lg);
}

.yt-lightbox-content iframe {
  width: 100%;
  height: 100%;
}

.yt-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem;
}

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


/* Instagram feed */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.instagram-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px;
  min-height: 220px;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(236, 72, 153, 0.22));
  text-decoration: none;
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.12);
}

.instagram-card img,
.instagram-card__placeholder {
  width: 100%;
  height: 100%;
}

.instagram-card img {
  object-fit: cover;
  transition: transform 0.3s ease;
}

.instagram-card__placeholder {
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  color: #4338ca;
}

.instagram-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.88));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.instagram-card__meta {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.instagram-card:hover img,
.instagram-card:focus-visible img {
  transform: scale(1.05);
}

.instagram-card:hover .instagram-card__overlay,
.instagram-card:focus-visible .instagram-card__overlay {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .instagram-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .instagram-card {
    min-height: 180px;
  }

  .instagram-card__overlay {
    opacity: 1;
    transform: none;
    padding: 0.8rem;
  }
}

/* ─── v3.1 Bilingual marketing polish ───────────────────────── */

/* Arabic typography — slightly larger, tighter line, Cairo if available */
[lang="ar"] {
  font-family: "Cairo", "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  letter-spacing: 0;
}

.hero-v3__h1-ar {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.25;
  font-weight: 800;
  color: var(--ink-950, #0E1B1B);
  margin: 0 0 .25rem;
}

.hero-v3__h1-en {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.18;
  font-weight: 700;
  color: var(--ink-700, #4A5757);
  margin: 0 0 1.1rem;
  opacity: .92;
}

.hero-v3__lead-ar {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--ink-700, #4A5757);
  margin: 0 0 .35rem;
}

.hero-v3__trust {
  flex-wrap: wrap;
  gap: .55rem 1.1rem;
}
.hero-v3__trust span {
  background: rgba(26,138,138,.07);
  border: 1px solid rgba(26,138,138,.18);
  padding: .3rem .65rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
}

/* Section subtitle below Arabic h2 */
.section-subtitle {
  margin: .35rem 0 0;
  color: var(--ink-500, #8895A3);
  font-size: 1rem;
}

/* Feature cards — give Arabic h3 prominence */
.feature-v3-card h3[lang="ar"] {
  font-size: 1.25rem;
  margin: 0 0 .15rem;
  color: var(--ink-950, #0E1B1B);
}
.feature-v3-card h3:not([lang]) {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-500, #8895A3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .65rem;
}
.feature-v3-card p[lang="ar"] {
  font-size: 1rem;
  margin: 0 0 .3rem;
}
.feature-v3-card p:not([lang]) {
  font-size: .9rem;
  color: var(--ink-500, #8895A3);
  margin: 0 0 .8rem;
}

/* Kit section bilingual */
.kit-section__title[lang="ar"] {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0;
}
.kit-section h3.section-title {
  font-size: 1.15rem;
  color: var(--ink-500, #8895A3);
  font-weight: 600;
  margin: .2rem 0 .9rem;
}
.kit-section__list li {
  font-size: 1rem;
  padding-block: .35rem;
}

/* Stories teaser & success card stays as-is; titles get Arabic */
.section-title[lang="ar"] {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.3;
  margin: 0;
}

/* FAQ — make summary bilingual & readable */
.faq-item summary {
  font-size: 1.05rem;
  font-weight: 600;
  padding: 1rem 1.1rem;
}
.faq-item[open] summary {
  background: rgba(26,138,138,.06);
}
.faq-item p {
  font-size: 1rem;
  line-height: 1.7;
  padding: 0 1.1rem 1rem;
  color: var(--ink-700, #4A5757);
}

/* Final CTA — emotional close */
.final-cta {
  text-align: center;
  padding: 4rem 1.5rem;
  background: linear-gradient(180deg, #F7FAFA 0%, #FFFFFF 100%);
  border-top: 1px solid rgba(26,138,138,.12);
  border-bottom: 1px solid rgba(26,138,138,.12);
  margin-top: 2rem;
  border-radius: 24px;
}
.final-cta h2[lang="ar"] {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 800;
  color: var(--ink-950, #0E1B1B);
  margin: 0 0 .25rem;
  line-height: 1.3;
}
.final-cta h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 600;
  color: var(--ink-700, #4A5757);
  margin: 0 0 1.1rem;
  opacity: .9;
}
.final-cta p {
  max-width: 640px;
  margin: 0 auto .5rem;
  color: var(--ink-700, #4A5757);
  font-size: 1.02rem;
  line-height: 1.6;
}
.final-cta .btn-v3 {
  margin-top: 1.4rem;
  font-size: 1.05rem;
  padding: .95rem 2rem;
}
.final-cta__micro {
  margin-top: 1rem;
  font-size: .9rem;
  opacity: .8;
}
.final-cta__micro a {
  text-decoration: underline;
}

/* Toolbar — bilingual chip spacing */
.toolbar-nav a span[lang="ar"] {
  font-weight: 600;
}
.toolbar-cta-free,
.toolbar-cta-login {
  background: rgba(26,138,138,.08);
  border-radius: 999px;
  padding: .35rem .85rem !important;
}
.toolbar-cta-login {
  background: #FF7A59;
  color: white !important;
}

/* Footer bilingual */
.page-footer-v3 p[lang="ar"] {
  margin: .25rem 0;
  opacity: .9;
}
.page-footer-v3__links strong {
  display: block;
  margin-bottom: .5rem;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .7;
  color: #fff;
}

/* Hero buttons — let bilingual text breathe */
.hero-v3__actions .btn-v3,
.hero-v3__actions .btn-v22-ghost {
  font-size: 1rem;
  padding: .9rem 1.5rem;
  white-space: nowrap;
}

/* Testimonials — caption visible if present */
.testimonials-band__title[lang="ar"] {
  color: #FFFFFF;
}
.testimonials-band .section-subtitle {
  color: rgba(255,255,255,.75);
}

/* Mobile: stack bilingual lines, ease density */
@media (max-width: 640px) {
  .hero-v3__h1-ar { font-size: 1.75rem; }
  .hero-v3__h1-en { font-size: 1.15rem; }
  .final-cta { padding: 3rem 1.1rem; }
  .feature-v3-card h3[lang="ar"] { font-size: 1.1rem; }
}

/* ─── v3.2 Story rich card · social band · contact band ──── */

.story-card--rich {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(26,138,138,.14);
  background: #fff;
  box-shadow: 0 4px 14px rgba(14,27,27,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.story-card--rich:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(14,27,27,.10);
}
.story-card__photo {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, #1A8A8A 0%, #126868 100%);
}
.story-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-card-body {
  padding: 1rem 1.1rem 1.1rem;
}
.story-card-body p[lang="ar"] {
  font-size: 1rem;
  line-height: 1.55;
  margin: .25rem 0 .85rem;
  color: var(--ink-950,#0E1B1B);
}
.story-card-body .quote-mark {
  font-size: 2.2rem;
  color: #1A8A8A;
  line-height: 0.5;
  margin-bottom: .4rem;
}
.story-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  padding-top: .5rem;
  border-top: 1px dashed rgba(26,138,138,.18);
}
.story-card-footer strong { font-size: 1rem; color: var(--ink-950,#0E1B1B); margin-inline-end: .35rem; }
.story-card-footer .tag {
  background: rgba(26,138,138,.10);
  color: #126868;
  font-size: .8rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-weight: 500;
}
.story-card-footer .tag--age {
  background: rgba(255,122,89,.12);
  color: #C84527;
}

/* Social band */
.social-band-v3 {
  margin-top: 1rem;
}
.social-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
.social-tile {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-decoration: none;
  color: #fff;
  padding: 1.4rem 1.2rem;
  border-radius: 16px;
  text-align: start;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 16px rgba(14,27,27,.10);
}
.social-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(14,27,27,.14); color:#fff; }
.social-tile strong { font-size: 1.15rem; }
.social-tile span { font-size: .95rem; opacity: .92; }
.social-tile em { font-size: .82rem; font-style: normal; opacity: .8; }
.social-tile__icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.18);
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: .35rem;
}
.social-tile--yt { background: linear-gradient(135deg, #FF0000 0%, #B91C1C 100%); }
.social-tile--ig { background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100%); }
.social-tile--fb { background: linear-gradient(135deg, #1877F2 0%, #0D5DBE 100%); }

.social-band-embed-wrap {
  margin-top: 1rem;
}
.social-band-embed {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgba(14,27,27,.18);
}
.social-band-embed iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
}
.social-band-embed__caption {
  margin: .7rem 0 0;
  text-align: center;
  font-size: .9rem;
  color: var(--ink-500,#8895A3);
}

/* Contact band */
.contact-band-v3 {
  margin-top: 1rem;
}
.contact-band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  background: linear-gradient(135deg, #F7FAFA 0%, #ffffff 100%);
  border-radius: 24px;
  padding: 2.5rem;
  border: 1px solid rgba(26,138,138,.16);
}
.contact-band__copy h2 { margin: 0 0 .4rem; }
.contact-band__copy p { margin: .35rem 0; color: var(--ink-700,#4A5757); }
.contact-band__info { display: flex; flex-direction: column; gap: .9rem; }
.contact-line {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  text-decoration: none;
  color: var(--ink-950,#0E1B1B);
  padding: .85rem 1rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(26,138,138,.14);
  transition: background .18s ease, transform .18s ease;
}
.contact-line:hover {
  background: rgba(26,138,138,.06);
  transform: translateX(4px);
  color: var(--ink-950,#0E1B1B);
}
.contact-line__icon {
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  background: rgba(26,138,138,.10);
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-line strong { display: block; font-size: 1rem; }
.contact-line em { display: block; font-size: .82rem; color: var(--ink-500,#8895A3); font-style: normal; margin-top: .15rem; line-height: 1.4; }

@media (max-width: 768px) {
  .social-band-grid { grid-template-columns: 1fr; }
  .contact-band-grid { grid-template-columns: 1fr; padding: 1.5rem; }
}

/* ─── v3.3 Courses prominent band · cascaded stories · about ── */

/* Courses hero band — sits right after hero, highlighted */
.courses-hero-band {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
  padding: 1.6rem 1.8rem;
  background: linear-gradient(135deg, rgba(255,122,89,.08) 0%, rgba(26,138,138,.08) 100%);
  border: 1px solid rgba(255,122,89,.25);
  border-radius: 20px;
  position: relative;
}
.courses-hero-band::before {
  content: "🔥";
  position: absolute;
  top: -16px;
  inset-inline-start: 1.5rem;
  font-size: 1.6rem;
  background: #fff;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,122,89,.3);
}
.courses-hero-band__text { flex: 1; }
.courses-hero-band .section-title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin: 0;
  color: var(--ink-950, #0E1B1B);
}
.courses-hero-band__all {
  white-space: nowrap;
  flex-shrink: 0;
}

.courses-grid--prominent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.course-card-v3--highlight {
  border: 1px solid rgba(26,138,138,.18);
  box-shadow: 0 6px 18px rgba(14,27,27,.08);
  border-radius: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}
.course-card-v3--highlight:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(14,27,27,.13);
  border-color: rgba(255,122,89,.4);
}
.course-card-v3__icon {
  font-size: 1.6rem;
  margin-inline-end: .4rem;
}
.tag--accent {
  background: rgba(255,122,89,.15);
  color: #C84527;
}
.course-card-v3__cta {
  margin: 0 1rem 1rem;
  font-weight: 700;
}

/* Cascaded / mosaic success stories */
.success-mosaic-section { margin-top: 1.5rem; }

.success-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.mosaic-card {
  margin: 0;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(26,138,138,.14);
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 3px 10px rgba(14,27,27,.05);
}
.mosaic-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(14,27,27,.12);
}
/* Cascaded stagger — each card slightly offset for "mosaic" feel */
.mosaic-card--1 { transform: translateY(0); }
.mosaic-card--2 { transform: translateY(18px); }
.mosaic-card--3 { transform: translateY(8px); }
.mosaic-card--4 { transform: translateY(24px); }
.mosaic-card--1:hover { transform: translateY(-6px); }
.mosaic-card--2:hover { transform: translateY(12px); }
.mosaic-card--3:hover { transform: translateY(2px); }
.mosaic-card--4:hover { transform: translateY(18px); }

.mosaic-card__photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #1A8A8A, #126868);
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(26,138,138,.25);
  flex-shrink: 0;
}
.mosaic-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mosaic-card__photo--placeholder {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 800;
}
.mosaic-card figcaption {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.mosaic-card strong {
  font-size: 1.02rem;
  color: var(--ink-950, #0E1B1B);
}
.mosaic-card em {
  font-style: normal;
  font-size: .78rem;
  color: var(--ink-500, #8895A3);
  font-weight: 500;
}
.mosaic-card p {
  margin: .35rem 0 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-700, #4A5757);
  font-style: italic;
}

@media (max-width: 1024px) {
  .success-mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic-card--1, .mosaic-card--3 { transform: translateY(0); }
  .mosaic-card--2, .mosaic-card--4 { transform: translateY(14px); }
}
@media (max-width: 560px) {
  .success-mosaic { grid-template-columns: 1fr; }
  .mosaic-card { transform: none !important; }
  .courses-hero-band { flex-direction: column; align-items: flex-start; padding: 1.4rem; }
}

/* About / Backed by Learn-in-Depth */
.about-band-v3 { margin-top: 1.2rem; }
.about-band-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  padding: 2.2rem;
  border-radius: 24px;
  background: linear-gradient(135deg, #0E1B1B 0%, #126868 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.about-band-grid::before {
  content: '';
  position: absolute;
  top: -120px;
  inset-inline-end: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
}
.about-band__copy .section-kicker {
  color: rgba(255,255,255,.7);
}
.about-band__copy .section-title {
  color: #fff;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.3;
}
.about-band__copy p {
  color: rgba(255,255,255,.92);
  font-size: 1rem;
  line-height: 1.7;
}
.about-band__copy .btn-v22-ghost {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
}
.about-band__copy .btn-v22-ghost:hover { background: rgba(255,255,255,.18); }

.about-band__proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-content: center;
  position: relative;
  z-index: 1;
}
.proof-stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 1.2rem;
  text-align: center;
}
.proof-stat strong {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #FF9B7A;
  line-height: 1;
  margin-bottom: .35rem;
}
.proof-stat em {
  display: block;
  font-style: normal;
  font-size: .85rem;
  color: rgba(255,255,255,.88);
  line-height: 1.4;
}
.proof-stat em + em { font-size: .75rem; color: rgba(255,255,255,.65); margin-top: .15rem; }
.proof-stat--accent {
  background: rgba(255,122,89,.22);
  border-color: rgba(255,122,89,.4);
}
.proof-stat--accent strong { color: #FFD4C2; }

@media (max-width: 880px) {
  .about-band-grid { grid-template-columns: 1fr; padding: 1.6rem; }
  .about-band__proof { grid-template-columns: 1fr 1fr; }
}

/* ─── v3.4 Play Hub · Circuit Lab · Arduino Lab ────────── */

.play-hub-hero {
  text-align: center;
  padding: 3rem 1.5rem 2rem;
  background: radial-gradient(circle at 50% 0%, rgba(26,138,138,.10) 0%, transparent 60%);
}
.play-hub-trust {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  font-size: .92rem;
}
.play-hub-trust span {
  background: rgba(26,138,138,.08);
  border: 1px solid rgba(26,138,138,.2);
  padding: .35rem .8rem;
  border-radius: 999px;
}

.play-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.play-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink-950,#0E1B1B);
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(26,138,138,.16);
  padding: 1.4rem 1.3rem 1.2rem;
  box-shadow: 0 4px 14px rgba(14,27,27,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.play-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(14,27,27,.14);
  color: var(--ink-950,#0E1B1B);
  border-color: rgba(26,138,138,.4);
}
.play-card__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(26,138,138,.10);
  font-size: 1.9rem;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.play-card--python .play-card__icon { background: rgba(54,153,84,.14); }
.play-card--maze   .play-card__icon { background: rgba(252,180,69,.16); }
.play-card--robot  .play-card__icon { background: rgba(99,102,241,.14); }
.play-card--circuits .play-card__icon { background: rgba(255,122,89,.16); }
.play-card--arduino .play-card__icon { background: rgba(56,182,255,.16); }
.play-card--cert   .play-card__icon { background: rgba(168,85,247,.14); }

.play-card__tag {
  display: inline-block;
  background: rgba(26,138,138,.12);
  color: #126868;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: .15rem .55rem;
  border-radius: 999px;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.play-card__tag--new { background: rgba(255,122,89,.16); color: #C84527; }
.play-card__body h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.play-card__body h3 { margin: 0 0 .35rem; font-size: .9rem; font-weight: 600; color: var(--ink-500,#8895A3); text-transform: uppercase; letter-spacing: .04em; }
.play-card__body p { margin: .2rem 0; font-size: .95rem; line-height: 1.55; color: var(--ink-700,#4A5757); }
.play-card__body p[lang="ar"] { color: var(--ink-950,#0E1B1B); }
.play-card__cta {
  display: inline-block;
  margin-top: auto;
  font-weight: 700;
  color: #1A8A8A;
  padding-top: .3rem;
}
.play-card:hover .play-card__cta { color: #C84527; }

/* Unlock CTA at bottom of hub */
.play-hub-unlock {
  background: linear-gradient(135deg, rgba(26,138,138,.07) 0%, rgba(255,122,89,.07) 100%);
  border: 1px solid rgba(26,138,138,.20);
  border-radius: 24px;
  padding: 2rem;
}
.play-hub-unlock__inner {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.play-hub-unlock__icon {
  font-size: 3rem;
  flex-shrink: 0;
}
.play-hub-unlock h2 { margin: 0 0 .2rem; font-size: clamp(1.25rem, 2.3vw, 1.7rem); }
.play-hub-unlock h3 { margin: 0 0 .6rem; color: var(--ink-700,#4A5757); font-weight: 600; }
.play-hub-unlock p { margin: .3rem 0; color: var(--ink-700,#4A5757); }

/* Circuit Lab */
.circuit-lab {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.2rem;
  align-items: start;
}
.circuit-lab__palette {
  position: sticky;
  top: 80px;
  padding: 1.1rem;
}
.circuit-lab__palette h3 { margin: 0 0 .25rem; }
.circuit-lab__palette hr { border: 0; border-top: 1px solid rgba(26,138,138,.16); margin: .9rem 0; }
.circuit-part-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: start;
  padding: .65rem .9rem;
  background: #fff;
  border: 1px solid rgba(26,138,138,.18);
  border-radius: 10px;
  margin-bottom: .5rem;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-950,#0E1B1B);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.circuit-part-btn:hover {
  background: rgba(26,138,138,.06);
  border-color: rgba(26,138,138,.4);
  transform: translateX(2px);
}
.circuit-part-btn.active {
  background: rgba(255,122,89,.12);
  border-color: rgba(255,122,89,.5);
  color: #C84527;
}
.circuit-action-btn {
  width: 100%;
  padding: .7rem;
  border-radius: 10px;
  border: 1px solid rgba(26,138,138,.3);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: .5rem;
  font-size: 1rem;
}
.circuit-action-btn:hover { background: rgba(26,138,138,.08); }
.circuit-action-btn--primary {
  background: #1A8A8A;
  color: #fff;
  border-color: #1A8A8A;
}
.circuit-action-btn--primary:hover { background: #126868; }

.circuit-lab__canvas {
  padding: 1rem;
}
.circuit-svg {
  width: 100%;
  aspect-ratio: 5/3;
  background: #F7FAFA;
  border-radius: 12px;
  display: block;
  border: 1px solid rgba(26,138,138,.18);
}
.circuit-status {
  margin-bottom: .6rem;
  padding: .55rem .8rem;
  background: rgba(26,138,138,.07);
  border-radius: 8px;
  font-size: .92rem;
  color: var(--ink-700,#4A5757);
}
.circuit-status--ok  { background: rgba(22,163,74,.10); color: #166534; font-weight: 600; }
.circuit-status--err { background: rgba(220,38,38,.10); color: #991B1B; }

@media (max-width: 880px) {
  .circuit-lab { grid-template-columns: 1fr; }
  .circuit-lab__palette { position: static; }
  .play-hub-unlock__inner { flex-direction: column; text-align: center; }
}

/* ─── v3.5 Arduino Lab · Robotics Flowchart ───────────── */

.arduino-lab-v3 {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.2rem;
  align-items: start;
}
.arduino-lab__sidebar { padding: 1.1rem; position: sticky; top: 80px; }
.arduino-lab__sidebar h3 { margin: 0 0 .5rem; }
.arduino-example-btn {
  display: block;
  width: 100%;
  text-align: start;
  padding: .6rem .85rem;
  background: #fff;
  border: 1px solid rgba(26,138,138,.18);
  border-radius: 10px;
  margin-bottom: .45rem;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-950,#0E1B1B);
  transition: background .15s ease, transform .15s ease;
}
.arduino-example-btn:hover { background: rgba(26,138,138,.06); transform: translateX(2px); }
.arduino-lab__sidebar hr { border: 0; border-top: 1px solid rgba(26,138,138,.16); margin: .9rem 0; }

.arduino-editor-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1rem;
  background: rgba(26,138,138,.06);
  border-bottom: 1px solid rgba(26,138,138,.14);
}
.arduino-status {
  display: inline-block;
  font-size: .82rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: rgba(26,138,138,.10);
  color: #126868;
  font-weight: 600;
}
.arduino-status--ok   { background: rgba(22,163,74,.12); color: #166534; }
.arduino-status--err  { background: rgba(220,38,38,.12); color: #991B1B; }
.arduino-status--warn { background: rgba(245,158,11,.14); color: #92400E; }

.arduino-svg {
  width: 100%;
  aspect-ratio: 18/7;
  background: #F7FAFA;
  border-radius: 12px;
  margin-top: .6rem;
  border: 1px solid rgba(26,138,138,.16);
}
.arduino-console pre {
  background: #0E1B1B;
  color: #a8e6e6;
  padding: .8rem;
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: .85rem;
  margin: .5rem 0 0;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
}
.sandbox-code-editor {
  width: 100%;
  min-height: 220px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: .92rem;
  line-height: 1.55;
  padding: 1rem;
  border: 0;
  background: #0E1B1B;
  color: #d9f1f1;
  resize: vertical;
}

/* Robotics flowchart */
.robotics-lab {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.2rem;
  align-items: start;
}
.robotics-lab__toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1rem;
  background: rgba(26,138,138,.06);
  border-bottom: 1px solid rgba(26,138,138,.14);
}
.robotics-lab__blocks { padding: 0; overflow: hidden; }
.robotics-lab__stage { position: sticky; top: 80px; }

@media (max-width: 1024px) {
  .arduino-lab-v3 { grid-template-columns: 1fr; }
  .arduino-lab__sidebar { position: static; }
  .robotics-lab { grid-template-columns: 1fr; }
  .robotics-lab__stage { position: static; }
}