/* ============================================================
   QuantumLeafHub — Main Stylesheet
   ============================================================ */

/* ===========================
   Custom Properties
   =========================== */
:root {
  --clr-dark:        #0b1929;
  --clr-dark-2:      #0d2a50;
  --clr-green:       #4ec914;
  --clr-green-dark:  #3aad0e;
  --clr-green-light: #edf9e5;
  --clr-text:        #1a2b3c;
  --clr-muted:       #5a6a7e;
  --clr-border:      #e4eaf2;
  --clr-bg:          #ffffff;
  --clr-bg-alt:      #f5f8fd;

  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  24px;

  --shadow:       0 2px 16px rgba(11, 25, 41, 0.07);
  --shadow-md:    0 6px 32px rgba(11, 25, 41, 0.10);
  --shadow-hover: 0 12px 48px rgba(11, 25, 41, 0.14);

  --transition: 0.22s ease;
  --container:  1160px;
  --header-h:   72px;
}

/* ===========================
   Reset
   =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--clr-text);
  background: var(--clr-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ===========================
   Layout Utilities
   =========================== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--clr-dark);
}

.section-subtitle {
  margin-top: 12px;
  font-size: 17px;
  color: var(--clr-muted);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================
   Buttons
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background: var(--clr-green);
  color: #0b1929;
}
.btn--primary:hover {
  background: var(--clr-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(78, 201, 20, 0.38);
}

.btn--outline {
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn--outline:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.07);
}

.btn--lg {
  padding: 14px 30px;
  font-size: 16px;
  border-radius: 10px;
}

/* ===========================
   Header
   =========================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  background: rgba(11, 25, 41, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: box-shadow var(--transition);
}
.header--scrolled {
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.28);
}

.header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: 8px;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header__logo-img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: contain;
}
.header__logo-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.header__nav-link {
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  border-radius: 7px;
  transition: color var(--transition), background-color var(--transition);
}
.header__nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.header__cta {
  margin-left: 16px;
  flex-shrink: 0;
  padding: 9px 20px;
  font-size: 14px;
}

/* Language Switch */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  padding: 3px;
  flex-shrink: 0;
}

.lang-btn {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.42);
  border-radius: 5px;
  transition: color var(--transition), background-color var(--transition);
  line-height: 1;
}
.lang-btn.is-active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.lang-btn:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.78);
}

/* Burger button */
.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 6px;
  margin-left: 6px;
  flex-shrink: 0;
}
.header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}
.header__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================
   Hero
   =========================== */
.hero {
  padding: calc(var(--header-h) + 72px) 0 96px;
  background: linear-gradient(140deg, #0b1929 0%, #0d2a50 55%, #071e0f 100%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%; right: 10%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(78, 201, 20, 0.07) 0%, transparent 68%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* ── Two-column layout ── */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 460px;
  grid-template-rows: auto auto;
  column-gap: 48px;
  align-items: center;
}

.hero__left {
  min-width: 0;
}

.hero__badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(78, 201, 20, 0.13);
  border: 1px solid rgba(78, 201, 20, 0.28);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-green);
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}

.hero__title {
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 22px;
}

.hero__subtitle {
  font-size: clamp(16px, 1.8vw, 18px);
  color: rgba(255, 255, 255, 0.62);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 40px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Right visual scene ── */
.hero__visual {
  position: relative;
  align-self: center;
}
.hero-scene {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ── Stats bar ── */
.hero__stats {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hero__stat {
  flex: 1;
  padding: 0 32px;
}
.hero__stat:first-child { padding-left: 0; }
.hero__stat:last-child  { padding-right: 0; }
.hero__stat-sep {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
  align-self: center;
}
.hero__stat-num {
  font-size: 38px;
  font-weight: 800;
  color: var(--clr-green);
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero__stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.48);
  margin-top: 5px;
}

/* ── Hero visual scene animations ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hv-levitate-1 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
  }
  @keyframes hv-levitate-2 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
  }
  @keyframes hv-levitate-3 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-4px); }
  }
  @keyframes hv-cursor-blink {
    0%, 45%  { opacity: 0.85; }
    55%, 100% { opacity: 0; }
  }
  @keyframes hv-node-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.55; }
    50%       { transform: scale(1.45); opacity: 0.9; }
  }
  @keyframes hv-particle-drift-1 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(5px, -7px); }
  }
  @keyframes hv-particle-drift-2 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(-6px, 5px); }
  }
  @keyframes hv-particle-drift-3 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(4px, -5px); }
  }

  .hv-code-win    { animation: hv-levitate-1 9s  ease-in-out infinite; }
  .hv-design-card { animation: hv-levitate-2 11s ease-in-out infinite; animation-delay: -4s; }
  .hv-video       { animation: hv-levitate-3 8s  ease-in-out infinite; animation-delay: -2s; }
  .hv-cube        { animation: hv-levitate-1 10s ease-in-out infinite; animation-delay: -6s; }

  .hv-cursor      { animation: hv-cursor-blink 1.1s step-end infinite; animation-delay: 0.3s; }

  .hv-node--1 { animation: hv-node-pulse 3.2s ease-in-out infinite; }
  .hv-node--2 { animation: hv-node-pulse 2.8s ease-in-out infinite; animation-delay: -1.1s; }
  .hv-node--3 { animation: hv-node-pulse 3.5s ease-in-out infinite; animation-delay: -2.3s; }

  .hv-particle--1 { animation: hv-particle-drift-1 12s ease-in-out infinite; }
  .hv-particle--2 { animation: hv-particle-drift-2 14s ease-in-out infinite; animation-delay: -5s; }
  .hv-particle--3 { animation: hv-particle-drift-3 10s ease-in-out infinite; animation-delay: -3s; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-code-win, .hv-design-card, .hv-cube, .hv-video,
  .hv-cursor, .hv-node, .hv-particle { animation: none !important; }
  .hv-signal-dot { display: none; }
}

/* ===========================
   Directions
   =========================== */
.directions {
  padding: 96px 0;
  background: var(--clr-bg);
  position: relative;
  overflow: hidden;
}
.directions::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  top: -100px; left: -90px;
  background: radial-gradient(circle, rgba(124,108,248,.055) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.directions::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  bottom: -80px; right: -70px;
  background: radial-gradient(circle, rgba(6,182,212,.05) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.directions .container {
  position: relative;
  z-index: 1;
}

.directions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* Base card */
.direction-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  background: var(--clr-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Higher specificity (2 classes) beats .reveal.is-visible for transition */
.directions__grid .direction-card {
  transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* Visual zone */
.direction-card__visual {
  position: relative;
  height: 170px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.direction-card__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.direction-card__main-icon {
  position: relative;
  z-index: 2;
  transition: transform 0.32s cubic-bezier(.34, 1.56, .64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card body */
.direction-card__body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.direction-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.direction-card__text {
  font-size: 15px;
  color: var(--clr-muted);
  line-height: 1.65;
  flex-grow: 1;
  margin-bottom: 24px;
}

.direction-card__link {
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.22s ease;
}
.direction-card__link:hover { gap: 10px; }

/* Card theme gradients */
.direction-card--roblox .direction-card__visual { background: linear-gradient(140deg, #1e1060 0%, #2e4a9e 100%); }
.direction-card--roblox .direction-card__link   { color: #7C6CF8; }

.direction-card--prog .direction-card__visual   { background: linear-gradient(140deg, #061422 0%, #0d3b52 100%); }
.direction-card--prog .direction-card__link     { color: #06B6D4; }

.direction-card--design .direction-card__visual { background: linear-gradient(140deg, #2d0c24 0%, #4a1420 45%, #7a2712 100%); }
.direction-card--design .direction-card__link   { color: #F97316; }

.direction-card--video .direction-card__visual  { background: linear-gradient(140deg, #1a0830 0%, #420812 100%); }
.direction-card--video .direction-card__link    { color: #E879A8; }

/* Hover — 2 classes + pseudo (0,3,0) beats .reveal.is-visible (0,2,0) */
.direction-card.direction-card--roblox:hover {
  transform: translateY(-8px);
  border-color: rgba(124, 108, 248, .38);
  box-shadow: 0 16px 48px rgba(124, 108, 248, .18);
}
.direction-card.direction-card--prog:hover {
  transform: translateY(-8px);
  border-color: rgba(6, 182, 212, .38);
  box-shadow: 0 16px 48px rgba(6, 182, 212, .15);
}
.direction-card.direction-card--design:hover {
  transform: translateY(-8px);
  border-color: rgba(249, 115, 22, .38);
  box-shadow: 0 16px 48px rgba(249, 115, 22, .15);
}
.direction-card.direction-card--video:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 121, 168, .38);
  box-shadow: 0 16px 48px rgba(232, 121, 168, .15);
}

/* Hover: main icon transforms */
.direction-card--video:hover  .direction-card__main-icon { transform: scale(1.15); }
/* Roblox: idle float lives on the outer wrapper, hover scale/tilt lives on the inner logo image (kept separate so they never fight over the same transform) */
.direction-card--roblox:hover .dcr-logo { transform: scale(1.12) rotate(-9deg); }
/* Programming: idle float lives on the outer wrapper, hover scale lives on the inner Python logo (kept separate so they never fight over the same transform) */
.direction-card--prog:hover .dcp-logo { transform: scale(1.08); }
/* Design: gentle hover lift on the whole composition; the brush's own idle sway stays on the brush image itself */
.direction-card--design:hover .direction-card__main-icon--design { transform: scale(1.05); }

/* Hover: video play glow */
.deco-play-circle { transition: filter 0.3s ease; }
.direction-card--video:hover .deco-play-circle {
  filter: drop-shadow(0 0 14px rgba(232, 121, 168, .55));
}

/* ── Roblox card: real logo + light checkpoint signal ── */
.direction-card__main-icon--roblox {
  position: relative;
}
.dcr-logo {
  display: block;
  width: 95px;
  height: auto;
  transform: rotate(-9deg);
  filter: drop-shadow(0 4px 10px rgba(13,42,80,0.28));
  transition: transform 0.3s ease;
}
.dcr-signal {
  position: absolute;
  right: -11px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5EE9F5;
}
.dcr-platform {
  position: absolute;
  left: -18px;
  bottom: -2px;
  width: 20px;
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(160,145,255,.55), rgba(90,70,200,.4));
  border: 1px solid rgba(200,185,255,.35);
}
.dcr-cursor {
  position: absolute;
  left: -15px;
  top: -10px;
  width: 10px;
  height: 12px;
  background: rgba(222,212,255,.8);
  clip-path: polygon(0 0, 100% 65%, 55% 65%, 70% 100%, 55% 92%, 40% 65%, 0 100%);
}

/* ── Programming card: Python logo (existing asset, recoloured via mask to fit the cyan/navy palette) ── */
.dcp-logo {
  display: block;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #22D3EE 0%, #06B6D4 100%);
  -webkit-mask-image: url('../images/python-logo-icon.svg');
  mask-image: url('../images/python-logo-icon.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 4px 10px rgba(6,20,34,0.35));
  transition: transform 0.3s ease;
}

/* ── Design card: real easel / palette / brush composition ── */
.direction-card__main-icon--design {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}
.dcd-easel, .dcd-palette, .dcd-brush {
  position: absolute;
  display: block;
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(13,42,80,0.22));
}
.dcd-easel   { left: 12%; top: 14px;  height: 128px; }
.dcd-palette { right: 7%; top: 40px;  height: 92px; }
.dcd-brush   { right: 6%; top: 12px;  height: 78px; transform-origin: 20% 20%; }
.dcd-palette-glow {
  position: absolute;
  right: 7%;
  top: 40px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,63,0.38) 0%, transparent 70%);
  pointer-events: none;
}

/* Decorative element base */
.deco-cube, .deco-pixel, .deco-node,
.deco-wave-bar, .deco-code-line, .deco-cursor {
  transform-box: fill-box;
}
.deco-wave-bar { transform-origin: center bottom; }

/* ── Animations (prefers-reduced-motion safe) ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dc-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
  }
  @keyframes dc-twinkle {
    0%, 100% { opacity: .4; }
    50%       { opacity: 1;  }
  }
  @keyframes dc-cursor-pulse {
    0%, 100% { opacity: .88; }
    50%       { opacity: .22; }
  }
  @keyframes dc-code-slide {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(5px); }
  }
  @keyframes dc-node-pulse {
    0%, 100% { transform: scale(1);   opacity: .55; }
    50%       { transform: scale(1.3); opacity: .9;  }
  }
  @keyframes dc-wave {
    0%, 100% { transform: scaleY(.45); }
    50%       { transform: scaleY(1); }
  }

  @keyframes dcr-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-6px) rotate(-2deg); }
  }
  @keyframes dcr-signal-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%       { transform: scale(1.8); opacity: 0.15; }
  }
  @keyframes dcr-platform-drift {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(-3px, 2px); }
  }
  @keyframes dcr-cursor-blink {
    0%, 100% { opacity: .85; }
    50%       { opacity: .15; }
  }
  @keyframes dcd-brush-sway {
    0%, 100% { transform: translate(0, 0)     rotate(-10deg); }
    50%       { transform: translate(-2px, 2px) rotate(-16deg); }
  }
  @keyframes dcd-color-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.35; }
    50%       { transform: scale(1.15); opacity: 0.65; }
  }
  @keyframes dcp-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
  }
  @keyframes dc-code-highlight {
    0%, 100% { opacity: .22; }
    50%       { opacity: .55; }
  }

  /* Roblox */
  .deco-cube--1 { animation: dc-float  8s ease-in-out infinite; }
  .deco-cube--2 { animation: dc-float 10s ease-in-out infinite 1.5s; }
  .deco-cube--3 { animation: dc-float 12s ease-in-out infinite 3s; }
  .deco-pixel   { animation: dc-twinkle 5s ease-in-out infinite; }
  .direction-card__main-icon--roblox { animation: dcr-float 6.5s ease-in-out infinite; }
  .dcr-signal   { animation: dcr-signal-pulse 3s ease-in-out infinite; }
  .dcr-platform { animation: dcr-platform-drift 9s ease-in-out infinite; }
  .dcr-cursor   { animation: dcr-cursor-blink 4s ease-in-out infinite 1s; }

  /* Programming */
  .deco-cursor    { animation: dc-cursor-pulse 2s ease-in-out infinite; }
  .deco-code-line { animation: dc-code-slide 20s ease-in-out infinite; }
  .deco-code-line--sweep { animation: dc-code-slide 20s ease-in-out infinite, dc-code-highlight 5s ease-in-out infinite; }
  .deco-node      { animation: dc-node-pulse 4s ease-in-out infinite; }
  .deco-node:nth-child(2) { animation-delay: 1.5s; }
  .deco-node:nth-child(3) { animation-delay: 3s; }
  .direction-card--prog .direction-card__main-icon { animation: dcp-float 6s ease-in-out infinite; }

  /* Design */
  .dcd-brush        { animation: dcd-brush-sway 6s ease-in-out infinite; }
  .dcd-palette-glow { animation: dcd-color-pulse 3.2s ease-in-out infinite; }

  /* Video waveform */
  .deco-waveform .deco-wave-bar:nth-child(1) { animation: dc-wave 3.0s ease-in-out infinite 0.0s; }
  .deco-waveform .deco-wave-bar:nth-child(2) { animation: dc-wave 3.5s ease-in-out infinite 0.2s; }
  .deco-waveform .deco-wave-bar:nth-child(3) { animation: dc-wave 2.8s ease-in-out infinite 0.4s; }
  .deco-waveform .deco-wave-bar:nth-child(4) { animation: dc-wave 4.0s ease-in-out infinite 0.1s; }
  .deco-waveform .deco-wave-bar:nth-child(5) { animation: dc-wave 3.2s ease-in-out infinite 0.6s; }
  .deco-waveform .deco-wave-bar:nth-child(6) { animation: dc-wave 3.8s ease-in-out infinite 0.3s; }
  .deco-waveform .deco-wave-bar:nth-child(7) { animation: dc-wave 2.9s ease-in-out infinite 0.5s; }
  .deco-waveform .deco-wave-bar:nth-child(8) { animation: dc-wave 3.6s ease-in-out infinite 0.7s; }
  .deco-waveform .deco-wave-bar:nth-child(9) { animation: dc-wave 3.3s ease-in-out infinite 0.9s; }

  /* Background floating elements */
  @keyframes dc-float-bg {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
  }
  @keyframes dc-cbk-drift-1 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(3px, -4px); }
  }
  @keyframes dc-cbk-drift-2 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(-3px, 3px); }
  }
  @keyframes dc-cbk-drift-3 {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(2px, -3px); }
  }

  .deco-cbk    { transform-box: fill-box; }
  .deco-cbk--1 { animation: dc-cbk-drift-1 18s ease-in-out infinite; }
  .deco-cbk--2 { animation: dc-cbk-drift-2 22s ease-in-out infinite; }
  .deco-cbk--3 { animation: dc-cbk-drift-3 14s ease-in-out infinite; }
  .deco-platform    { transform-box: fill-box; animation: dc-float-bg 16s ease-in-out infinite 2s; }
  .deco-mini-blocks { transform-box: fill-box; animation: dc-float-bg 20s ease-in-out infinite 5s; }
  .deco-filmstrip   { transform-box: fill-box; animation: dc-float-bg 20s ease-in-out infinite 3s; }
}

/* Mobile */
@media (max-width: 480px) {
  .direction-card__visual { height: 130px; }
  .direction-card__body   { padding: 22px 22px 26px; }
  .direction-card__main-icon svg { width: 56px; height: 56px; }
  .deco-cbk--1, .deco-mini-blocks, .deco-filmstrip { display: none; }

  .dcr-logo { width: 77px; }
  .dcr-platform, .dcr-cursor { display: none; }
  .dcp-logo { width: 56px; height: 56px; }
  .dcd-easel        { height: 98px; }
  .dcd-palette      { height: 72px; }
  .dcd-brush        { height: 66px; }
  .dcd-palette-glow { width: 72px; height: 72px; }
}

/* ===========================
   Why Us
   =========================== */
.why-us {
  padding: 96px 0;
  background: var(--clr-bg-alt);
  position: relative;
  overflow: hidden;
}
.why-us::before {
  content: '';
  position: absolute;
  width: 360px; height: 360px;
  top: -100px; right: -90px;
  background: radial-gradient(circle, rgba(78,201,20,.058) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.why-us::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  bottom: -70px; left: -60px;
  background: radial-gradient(circle, rgba(78,201,20,.042) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.why-us__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* ── Base card ──────────────────────────────────────────── */
.feature-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  background: var(--clr-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.why-us__grid .feature-card {
  transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* ── Visual zone ─────────────────────────────────────────── */
.feature-card__visual {
  position: relative;
  height: 140px;
  overflow: hidden;
  flex-shrink: 0;
}

.feature-card__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Body ────────────────────────────────────────────────── */
.feature-card__body {
  padding: 24px 26px 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.feature-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.feature-card__text {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.65;
}

/* ── Card themes ─────────────────────────────────────────── */
.feature-card--individual .feature-card__visual {
  background: linear-gradient(140deg, #061a0c 0%, #0d3320 55%, #082b18 100%);
  color: #4ec914;
}
.feature-card--plan .feature-card__visual {
  background: linear-gradient(140deg, #061422 0%, #062e40 55%, #053040 100%);
  color: #38bdf8;
}
.feature-card--lang .feature-card__visual {
  background: linear-gradient(140deg, #071c1a 0%, #063a30 55%, #053026 100%);
  color: #2dd4bf;
}
.feature-card--result .feature-card__visual {
  background: linear-gradient(140deg, #071e0f 0%, #0f3a20 55%, #0b2a16 100%);
  color: #86efac;
}

/* ── Hover per card ──────────────────────────────────────── */
.feature-card.feature-card--individual:hover {
  transform: translateY(-7px);
  border-color: rgba(78, 201, 20, 0.35);
  box-shadow: 0 14px 44px rgba(78, 201, 20, 0.13);
}
.feature-card.feature-card--plan:hover {
  transform: translateY(-7px);
  border-color: rgba(2, 132, 199, 0.32);
  box-shadow: 0 14px 44px rgba(2, 132, 199, 0.11);
}
.feature-card.feature-card--lang:hover {
  transform: translateY(-7px);
  border-color: rgba(5, 150, 105, 0.32);
  box-shadow: 0 14px 44px rgba(5, 150, 105, 0.11);
}
.feature-card.feature-card--result:hover {
  transform: translateY(-7px);
  border-color: rgba(78, 201, 20, 0.38);
  box-shadow: 0 14px 44px rgba(78, 201, 20, 0.15);
}

/* ── Animations ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes whu-i-ring-outer {
    0%, 100% { opacity: 0.24; transform: scale(1); }
    50%       { opacity: 0;    transform: scale(1.3); }
  }
  @keyframes whu-i-ring-inner {
    0%, 100% { opacity: 0.4;  transform: scale(1); }
    50%       { opacity: 0.12; transform: scale(1.1); }
  }
  @keyframes whu-i-spark {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.5); }
  }
  @keyframes whu-p-block-pulse {
    0%, 100% { opacity: 0.9; }
    50%       { opacity: 1; }
  }
  @keyframes whu-p-gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes whu-bubble-lift {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
  }
  @keyframes whu-glow-pulse {
    0%, 100% { opacity: 0.07; transform: scale(1); }
    50%       { opacity: 0.2;  transform: scale(1.2); }
  }

  .whu-i-ring-outer {
    animation: whu-i-ring-outer 3.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .whu-i-ring-inner {
    animation: whu-i-ring-inner 3.4s ease-in-out infinite;
    animation-delay: -1.2s;
    transform-box: fill-box;
    transform-origin: center;
  }
  .whu-i-spark {
    animation: whu-i-spark 2.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .whu-p-active {
    animation: whu-p-block-pulse 3s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .whu-p-gear {
    animation: whu-p-gear-spin 16s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .whu-lang-bubble {
    animation: whu-bubble-lift 3.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .whu-r-glow {
    animation: whu-glow-pulse 3s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whu-p-marker { display: none; }
}

/* ===========================
   How It Works
   =========================== */
.how-it-works {
  padding: 96px 0;
  background: var(--clr-bg);
  position: relative;
  overflow: hidden;
}
.how-it-works::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  top: -90px; right: -80px;
  background: radial-gradient(circle, rgba(78,201,20,.05) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.how-it-works::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  bottom: -70px; left: -70px;
  background: radial-gradient(circle, rgba(20,184,166,.045) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.how-it-works .container {
  position: relative;
  z-index: 1;
}

/* ── Steps grid ── */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ── Route connector (desktop only) ── */
.steps__route {
  position: absolute;
  top: 80px;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
}
.steps__route-inner {
  position: relative;
  margin: 0 12.5%;
}
.steps__route-line {
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(78,201,20,.1) 0px, rgba(78,201,20,.1) 5px,
    transparent 5px, transparent 12px
  );
}
.steps__route-signal {
  position: absolute;
  top: -3px; left: 0; right: 0;
  height: 8px;
  background: radial-gradient(ellipse 28px 8px at left center, rgba(78,201,20,.75) 0%, transparent 100%);
  background-size: 56px 8px;
  background-repeat: no-repeat;
  background-position: -56px center;
}

/* ── Step card ── */
.step {
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  background: var(--clr-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}
.steps .step {
  transition: opacity 0.55s ease, transform 0.55s ease,
              box-shadow 0.28s ease, border-color 0.28s ease;
}
.steps .step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(78,201,20,.2);
}

/* ── Visual zone ── */
.step__visual {
  position: relative;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
}
.step__deco {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.step--1 .step__visual { background: linear-gradient(140deg, #071e0f 0%, #0d3320 55%, #0b2a18 100%); }
.step--2 .step__visual { background: linear-gradient(140deg, #061422 0%, #062e40 55%, #053040 100%); }
.step--3 .step__visual { background: linear-gradient(140deg, #071c1a 0%, #063a30 55%, #053026 100%); }
.step--4 .step__visual { background: linear-gradient(140deg, #071e0f 0%, #0f3a20 55%, #0b2a16 100%); }

/* ── Card body ── */
.step__body {
  padding: 20px 22px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.step__number {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--clr-green-light);
  color: var(--clr-green-dark);
  font-size: 16px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  transition: background .28s ease, color .28s ease, box-shadow .28s ease;
}
.step__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 7px;
}
.step__text {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.65;
}
.steps .step:hover .step__number {
  background: var(--clr-green);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(78,201,20,.14);
}

/* ── SVG animation base ── */
.s2-dot--1, .s2-dot--2, .s2-dot--3,
.s4-badge {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Animations ── */
@media (prefers-reduced-motion: no-preference) {

  @keyframes hiw-signal {
    0%   { background-position: -56px center; }
    100% { background-position: calc(100% + 56px) center; }
  }
  .steps__route-signal { animation: hiw-signal 5s linear infinite; }

  @keyframes hiw-glow-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1; }
  }
  .s1-glow { animation: hiw-glow-pulse 3s ease-in-out infinite; }

  @keyframes hiw-live {
    0%, 100% { opacity: 1; }
    45%, 55% { opacity: 0.15; }
  }
  .s2-live-dot { animation: hiw-live 2.8s ease-in-out infinite; }

  @keyframes hiw-dot-wave {
    0%, 100% { transform: scale(1);    opacity: 0.5; }
    50%       { transform: scale(1.45); opacity: 1; }
  }
  .s2-dot--1 { animation: hiw-dot-wave 3s ease-in-out infinite; }
  .s2-dot--2 { animation: hiw-dot-wave 3s ease-in-out infinite; animation-delay: -1s; }
  .s2-dot--3 { animation: hiw-dot-wave 3s ease-in-out infinite; animation-delay: -2s; }

  @keyframes hiw-slot-pulse {
    0%, 100% { opacity: 0.75; }
    50%       { opacity: 1; }
  }
  .s3-slot { animation: hiw-slot-pulse 3s ease-in-out infinite; animation-delay: -0.8s; }

  @keyframes hiw-badge-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.88; }
    50%       { transform: scale(1.06); opacity: 1; }
  }
  .s4-badge { animation: hiw-badge-pulse 3.2s ease-in-out infinite; animation-delay: -1.6s; }
}

@media (prefers-reduced-motion: reduce) {
  .steps__route-signal { display: none; }
}

/* ── Responsive ── */
@media (min-width: 768px) {
  .steps__route { display: block; }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 519px) {
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .step__visual { height: 136px; }
}

/* ===========================
   Reviews — marquee carousel
   =========================== */
.reviews {
  padding: 96px 0 80px;
  background: var(--clr-bg-alt);
  position: relative;
  overflow: hidden;
}
.reviews::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  top: -90px; left: -80px;
  background: radial-gradient(circle, rgba(78,201,20,.05) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.reviews::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  bottom: -80px; right: -70px;
  background: radial-gradient(circle, rgba(124,108,248,.045) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.reviews .container {
  position: relative;
  z-index: 1;
}

.reviews__marquee {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8vw, #000 calc(100% - 8vw), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8vw, #000 calc(100% - 8vw), transparent 100%);
}

.reviews__belt {
  display: flex;
  width: max-content;
  padding: 16px 0 24px;
  animation: reviews-scroll 50s linear infinite;
}
.reviews__belt:hover {
  animation-play-state: paused;
}

@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.review-shot {
  flex-shrink: 0;
  width: 340px;
  height: 520px;
  margin-right: 24px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px dashed var(--clr-border);
  background: var(--clr-bg);
  position: relative;
  box-shadow: var(--shadow);
}

.review-shot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  background: var(--clr-bg);
  display: block;
}
.review-shot__img[src=""],
.review-shot__img:not([src]) {
  opacity: 0;
  pointer-events: none;
}

.review-shot__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #c5cfda;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  pointer-events: none;
}

/* Filled review cards — real screenshots vary in height/crop, so the
   card gets its own backdrop + inset frame instead of a flat white box. */
.review-shot--filled {
  --review-inset: 8px;
  border: 1px solid var(--clr-border);
  background:
    radial-gradient(circle at 22% 18%, rgba(78, 201, 20, .08) 0%, transparent 55%),
    radial-gradient(circle at 82% 88%, rgba(124, 108, 248, .08) 0%, transparent 55%),
    var(--clr-bg-alt);
  box-shadow: var(--shadow-md);
}
.review-shot--filled .review-shot__placeholder {
  display: none;
}

.review-shot--filled .review-shot__img {
  inset: var(--review-inset, 14px);
  width: calc(100% - var(--review-inset, 14px) * 2);
  height: calc(100% - var(--review-inset, 14px) * 2);
  border-radius: 10px;
  object-position: center;
  background: transparent;
}

/* ===========================
   Background particles (shared across sections; colour/position set per section)
   =========================== */
.bg-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-particle {
  position: absolute;
  border-radius: 50%;
}

.bg-particles--directions .bg-particle--1 { top: 9%;    left: 3%;    width: 5px; height: 5px; background: rgba(124,108,248,.4); }
.bg-particles--directions .bg-particle--2 { top: 78%;   right: 5%;   width: 4px; height: 4px; background: rgba(6,182,212,.4); }
.bg-particles--directions .bg-particle--3 { top: 46%;   left: 1.5%;  width: 3px; height: 3px; background: rgba(249,115,22,.35); }

.bg-particles--why .bg-particle--1 { top: 12%;  right: 4%;   width: 5px; height: 5px; background: rgba(78,201,20,.4); }
.bg-particles--why .bg-particle--2 { top: 82%;  left: 4%;    width: 4px; height: 4px; background: rgba(6,182,212,.35); }
.bg-particles--why .bg-particle--3 { top: 50%;  right: 1.5%; width: 3px; height: 3px; background: rgba(78,201,20,.3); }

.bg-particles--how .bg-particle--1 { top: 8%;   left: 4%;    width: 5px; height: 5px; background: rgba(78,201,20,.4); }
.bg-particles--how .bg-particle--2 { top: 85%;  right: 4%;   width: 4px; height: 4px; background: rgba(20,184,166,.4); }
.bg-particles--how .bg-particle--3 { top: 48%;  right: 1.5%; width: 3px; height: 3px; background: rgba(78,201,20,.3); }

.bg-particles--reviews .bg-particle--1 { top: 14%; left: 3%;   width: 5px; height: 5px; background: rgba(124,108,248,.35); }
.bg-particles--reviews .bg-particle--2 { top: 80%; right: 5%;  width: 4px; height: 4px; background: rgba(78,201,20,.4); }
.bg-particles--reviews .bg-particle--3 { top: 45%; left: 1.5%; width: 3px; height: 3px; background: rgba(78,201,20,.3); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes bgp-drift-1 {
    0%, 100% { transform: translate(0,0); }
    50%       { transform: translate(6px,-8px); }
  }
  @keyframes bgp-drift-2 {
    0%, 100% { transform: translate(0,0); }
    50%       { transform: translate(-7px,6px); }
  }
  @keyframes bgp-drift-3 {
    0%, 100% { transform: translate(0,0); }
    50%       { transform: translate(5px,7px); }
  }
  @keyframes bgp-twinkle {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1; }
  }

  .bg-particle--1 { animation: bgp-drift-1 13s ease-in-out infinite, bgp-twinkle 6s   ease-in-out infinite; }
  .bg-particle--2 { animation: bgp-drift-2 15s ease-in-out infinite 2s, bgp-twinkle 7s   ease-in-out infinite 1.5s; }
  .bg-particle--3 { animation: bgp-drift-3 11s ease-in-out infinite 4s, bgp-twinkle 5.5s ease-in-out infinite 3s; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-particles { display: none; }
}

/* ===========================
   FAQ
   =========================== */
.faq {
  padding: 96px 0;
  background: var(--clr-bg);
}

.faq__list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item { border-bottom: 1px solid var(--clr-border); }
.faq-item:first-child { border-top: 1px solid var(--clr-border); }

.faq-item__question {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-dark);
  transition: color var(--transition);
}
.faq-item__question:hover { color: var(--clr-green-dark); }

.faq-item__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-muted);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.faq-item__icon svg {
  display: block;
  width: 12px; height: 12px;
  flex-shrink: 0;
  overflow: visible;
  transition: transform 0.22s ease;
}
.faq-item.open .faq-item__icon {
  background: var(--clr-green);
  border-color: var(--clr-green);
  color: var(--clr-dark);
}
.faq-item.open .faq-item__icon svg {
  transform: rotate(45deg);
}
.faq-item.open .faq-item__question { color: var(--clr-green-dark); }

.faq-item__answer {
  display: none;
  padding: 0 40px 24px 0;
  font-size: 15px;
  color: var(--clr-muted);
  line-height: 1.72;
}
.faq-item.open .faq-item__answer { display: block; }

/* ===========================
   CTA Section
   =========================== */
.cta-section {
  padding: 96px 0;
  background: linear-gradient(140deg, var(--clr-dark) 0%, var(--clr-dark-2) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  bottom: -20%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(78, 201, 20, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section__title {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.03em;
  position: relative;
}
.cta-section__subtitle {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.56);
  margin-bottom: 40px;
  position: relative;
}

/* ===========================
   Footer
   =========================== */
.footer {
  background: #060f1a;
  color: rgba(255, 255, 255, 0.55);
  padding: 48px 0 24px;
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
  align-items: start;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer__logo-img {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: contain;
}
.footer__logo-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.footer__tagline {
  font-size: 14px;
  line-height: 1.65;
  max-width: 280px;
}

.footer__socials {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.footer__social-link {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  transition: color var(--transition), background-color var(--transition);
}
.footer__social-link:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.footer__col-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 18px;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__nav-link {
  font-size: 14px;
  transition: color var(--transition);
}
.footer__nav-link:hover { color: #fff; }

.footer__contact-item {
  font-size: 14px;
  margin-bottom: 8px;
}

.footer__bottom {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
  :root { --header-h: 64px; }

  .header__nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(11, 25, 41, 0.98);
    backdrop-filter: blur(14px);
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: none;
  }
  .header__nav.is-open { display: flex; }

  .header__nav-link {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 10px;
  }

  .lang-switch { margin-left: auto; }
  .header__cta { margin-left: 8px; padding: 8px 14px; font-size: 13px; }
  .header__burger { display: flex; }

  .hero { padding: calc(var(--header-h) + 48px) 0 64px; }
  .hero__inner { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px; }
  .hero__visual { width: 100%; max-width: 380px; margin: 0 auto; }
  .hero-scene { height: 174px; overflow: hidden; }
  .hv-node--1, .hv-link-deep, .hv-particle--2 { display: none; }
  .hero__stats { gap: 0; margin-top: 0; padding-top: 24px; flex-wrap: wrap; }
  .hero__stat { padding: 0 20px; }
  .hero__stat:first-child { padding-left: 0; }
  .hero__stat-sep { height: 36px; }
  .hero__stat-num { font-size: 30px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  .section-header { margin-bottom: 36px; }

  .directions,
  .why-us,
  .how-it-works,
  .reviews,
  .faq,
  .cta-section { padding: 64px 0; }

  .review-shot { width: 280px; height: 420px; margin-right: 20px; }
  .review-shot--filled { --review-inset: 8px; }

  .faq-item__answer { padding-right: 0; }

  .footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .footer__brand { grid-column: auto; }
  .footer__bottom { flex-direction: column; gap: 6px; text-align: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .feature-card__visual { height: 118px; }
  .feature-card__body { padding: 18px 18px 24px; }
  .header__logo-name { display: none; }

  .review-shot { width: min(88vw, 340px); height: 600px; margin-right: 20px; }
  .review-shot--filled { --review-inset: 5px; }
}

/* ===========================
   Course Pages
   =========================== */
.course-hero {
  padding: calc(var(--header-h) + 56px) 0 80px;
  background: linear-gradient(140deg, #0b1929 0%, #0d2a50 55%, #071e0f 100%);
  position: relative;
  overflow: hidden;
}
.course-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -8%;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(78, 201, 20, 0.09) 0%, transparent 68%);
  pointer-events: none;
}
.course-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.course-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.course-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.course-breadcrumb a {
  color: rgba(255, 255, 255, 0.42);
  transition: color var(--transition);
}
.course-breadcrumb a:hover { color: rgba(255, 255, 255, 0.78); }
.course-breadcrumb__sep { color: rgba(255, 255, 255, 0.22); }

.course-hero__title {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 18px;
}

.course-hero__subtitle {
  font-size: clamp(15px, 1.7vw, 17px);
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.72;
  margin-bottom: 36px;
  max-width: 500px;
}

.photo-placeholder {
  border: 2px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  min-height: 320px;
}
.photo-placeholder--light {
  border-color: var(--clr-border);
  color: #b0bbc9;
  background: var(--clr-bg-alt);
  min-height: 220px;
}

/* Course content sections */
.course-section {
  padding: 80px 0;
  background: var(--clr-bg);
}
.course-section--alt {
  background: var(--clr-bg-alt);
}

/* Who it's for */
.who-for-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.who-for-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 22px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.who-for-card:hover {
  border-color: rgba(78, 201, 20, 0.28);
  box-shadow: var(--shadow);
}
.who-for-card__icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--clr-green-light);
  color: var(--clr-green-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.who-for-card__text {
  font-size: 15px;
  color: var(--clr-text);
  line-height: 1.6;
  font-weight: 500;
}

/* Skills list */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 48px;
}
.skill-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--clr-bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.skill-item__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-green);
  flex-shrink: 0;
  margin-top: 7px;
}
.skill-item__text {
  font-size: 15px;
  color: var(--clr-text);
  line-height: 1.55;
}

/* Projects */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.project-card {
  padding: 32px 28px;
  background: var(--clr-bg);
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  transition: background-color var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.project-card:hover {
  border-color: rgba(78, 201, 20, 0.28);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.project-card__num {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-green-dark);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.project-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.project-card__text {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.65;
  flex-grow: 1;
}
.project-card__photo {
  margin-top: 20px;
}

/* Format / how it works */
.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.format-item {
  text-align: center;
  padding: 28px 20px;
  background: var(--clr-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.format-item__icon {
  width: 48px; height: 48px;
  background: var(--clr-dark);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-green);
  margin: 0 auto 14px;
}
.format-item__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.format-item__value {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.3;
}

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

@media (prefers-reduced-motion: no-preference) {
  .format-item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease;
  }
  .format-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .format-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .format-item.is-visible .format-item__icon {
    animation: formatIconFloat 3.5s ease-in-out infinite;
  }
}

/* ===========================
   Lead Form
   =========================== */
.lead-form {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  max-width: 660px;
  margin: 44px auto 0;
  text-align: left;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

.lead-form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
  pointer-events: none;
}

.lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lead-form__group {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.lead-form__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-dark);
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}

.lead-form__input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--clr-text);
  background: var(--clr-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.lead-form__input:focus {
  border-color: var(--clr-green);
  box-shadow: 0 0 0 3px rgba(78, 201, 20, 0.14);
}

.lead-form__input::placeholder {
  color: #aab5c3;
}

.lead-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a7e' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.lead-form__textarea {
  resize: vertical;
  min-height: 90px;
}

.lead-form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}

.lead-form__checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--clr-border);
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--clr-bg);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}

.lead-form__checkbox:checked {
  background: var(--clr-green);
  border-color: var(--clr-green);
}

.lead-form__checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.lead-form__check-label {
  font-size: 13px;
  color: var(--clr-muted);
  line-height: 1.55;
  cursor: pointer;
}

.lead-form__privacy-link {
  color: var(--clr-green-dark);
  text-decoration: underline;
}

.lead-form__submit {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 14px 24px;
}

.lead-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.lead-form__msg {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.lead-form__msg--success {
  background: #edf9e5;
  color: #2a7a06;
  border: 1px solid rgba(78, 201, 20, 0.3);
}

.lead-form__msg--error {
  background: #fff3f3;
  color: #c0392b;
  border: 1px solid rgba(192, 57, 43, 0.22);
}

@media (max-width: 600px) {
  .lead-form {
    padding: 28px 20px;
    margin-top: 32px;
    border-radius: var(--radius);
  }
  .lead-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Course page responsive */
@media (max-width: 900px) {
  .course-hero__inner { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  .course-hero { padding: calc(var(--header-h) + 40px) 0 56px; }
  .photo-placeholder { min-height: 200px; }
  .course-section { padding: 56px 0; }
  .who-for-grid, .skills-grid, .projects-grid { margin-top: 32px; }
}

/* ===========================
   Leaf Decorations
   =========================== */
.leaf-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.leaf {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

@keyframes leafFall {
  0%   { transform: translateY(-5vh)   translateX(0px)   rotate(-6deg); opacity: 0; }
  8%   {                                                                 opacity: 1; }
  30%  { transform: translateY(22vh)   translateX(14px)  rotate(8deg);  opacity: 1; }
  55%  { transform: translateY(48vh)   translateX(-8px)  rotate(-3deg); opacity: 1; }
  80%  { transform: translateY(75vh)   translateX(12px)  rotate(13deg); opacity: 1; }
  92%  {                                                                 opacity: 1; }
  100% { transform: translateY(100vh)  translateX(4px)   rotate(7deg);  opacity: 0; }
}

@keyframes leafFloat {
  0%, 100% { transform: translateY(0px)   translateX(0px)  rotate(0deg);  }
  30%      { transform: translateY(-13px) translateX(8px)  rotate(5deg);  }
  65%      { transform: translateY(10px)  translateX(-6px) rotate(-4deg); }
}

/* Hero leaves */
.leaf--fall-1 {
  width: 26px;
  left: 72%;
  top: 0;
  color: rgba(78, 201, 20, 0.11);
  animation: leafFall 28s linear infinite;
}
.leaf--fall-2 {
  width: 18px;
  left: 89%;
  top: 0;
  color: rgba(78, 201, 20, 0.09);
  animation: leafFall 35s linear infinite;
  animation-delay: -17s;
}
.leaf--float-1 {
  width: 36px;
  left: 3%;
  top: 62%;
  color: rgba(78, 201, 20, 0.09);
  animation: leafFloat 20s ease-in-out infinite;
  animation-delay: -7s;
}
.leaf--float-2 {
  width: 19px;
  left: 80%;
  top: 18%;
  color: rgba(78, 201, 20, 0.08);
  animation: leafFloat 25s ease-in-out infinite;
  animation-delay: -13s;
}
.leaf--float-3h {
  width: 22px;
  left: 62%;
  top: 70%;
  color: rgba(78, 201, 20, 0.08);
  animation: leafFloat 23s ease-in-out infinite;
  animation-delay: -9s;
}

/* CTA leaves */
.leaf--fall-3 {
  width: 25px;
  left: 81%;
  top: 0;
  color: rgba(78, 201, 20, 0.12);
  animation: leafFall 31s linear infinite;
  animation-delay: -9s;
}
.leaf--float-3 {
  width: 33px;
  left: 4%;
  top: 36%;
  color: rgba(78, 201, 20, 0.10);
  animation: leafFloat 22s ease-in-out infinite;
  animation-delay: -5s;
}

/* CTA container content above leaf layer */
.cta-section > .container {
  position: relative;
  z-index: 1;
}

/* ===========================
   Scroll Reveal
   =========================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================
   Reduced Motion
   =========================== */
@media (prefers-reduced-motion: reduce) {
  .leaf {
    animation: none !important;
    opacity: 0.07 !important;
  }
}

@media (max-width: 768px) {
  .leaf--fall-2,
  .leaf--float-2,
  .leaf--float-3h {
    display: none;
  }
  /* Simplify visual scene on mobile: hide cube and video */
  .hv-cube,
  .hv-video { display: none; }
}

@media (max-width: 480px) {
  .hero__visual { max-width: 300px; }
  .hero-scene { height: 137px; }
  .hero__stat-sep { display: none; }
  .hero__stat { flex: 1; padding: 0; min-width: 0; }
  .hero__stats { gap: 8px; }
  .hero__stat-num { font-size: 26px; }
}

/* ===========================
   Theme: Roblox Studio (.theme-roblox)
   =========================== */

.theme-roblox {
  --rb-primary:  #7C6CF8;
  --rb-blue:     #60A5FA;
  --rb-lavender: #F4F4FF;
}

/* ── Hero ── */
.theme-roblox .course-hero {
  background: linear-gradient(140deg, #10063E 0%, #1E1060 52%, #2A3D9E 100%);
}
.theme-roblox .course-hero::before {
  background: radial-gradient(circle, rgba(124, 108, 248, 0.13) 0%, transparent 68%);
}
.theme-roblox .hero__badge {
  background: rgba(124, 108, 248, 0.15);
  border-color: rgba(124, 108, 248, 0.40);
  color: #b3acff;
}

/* ── Hero SVG scene ── */
.rb-hero-scene {
  width: 100%;
  height: auto;
  max-height: 340px;
  display: block;
  overflow: visible;
}
@media (max-width: 900px) {
  .rb-hero-scene { max-height: 260px; }
}
@media (max-width: 480px) {
  .rb-hero-scene { max-height: 200px; }
}

/* ── Who For ── */
.theme-roblox .who-for-card {
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.24s ease;
}
.theme-roblox .who-for-card:hover {
  border-color: rgba(124, 108, 248, 0.38);
  box-shadow: 0 6px 24px rgba(124, 108, 248, 0.11);
  transform: translateY(-5px);
}
.theme-roblox .who-for-card__icon {
  background: rgba(124, 108, 248, 0.12);
  color: var(--rb-primary);
}

/* ── Alt sections (lavender tint) ── */
.theme-roblox .course-section--alt {
  background: var(--rb-lavender);
}

/* ── Skills ── */
.theme-roblox .skill-item__dot { background: var(--rb-primary); }
/* ── Projects ── */
.theme-roblox .project-card__num { color: var(--rb-primary); }
.theme-roblox .project-card:hover {
  border-color: rgba(124, 108, 248, 0.35);
  box-shadow: 0 12px 40px rgba(124, 108, 248, 0.13);
  transform: translateY(-4px);
}

/* ── Format icons ── */
.theme-roblox .format-item__icon {
  background: linear-gradient(135deg, #1E1060 0%, #2A3D9E 100%);
  color: #a89ff9;
}

/* ── FAQ ── */
.theme-roblox .faq-item__question:hover { color: var(--rb-primary); }
.theme-roblox .faq-item.open .faq-item__question { color: var(--rb-primary); }
.theme-roblox .faq-item.open .faq-item__icon {
  background: var(--rb-primary);
  border-color: var(--rb-primary);
  color: #fff;
}

/* ── CTA section ── */
.theme-roblox .cta-section {
  background: linear-gradient(140deg, #10063E 0%, #1E1060 100%);
}
.theme-roblox .cta-section::before {
  background: radial-gradient(ellipse, rgba(124, 108, 248, 0.10) 0%, transparent 70%);
}
.theme-roblox .rb-cta-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.rb-cta-px {
  position: absolute;
}
.rb-cta-px--tl {
  left: 36px;
  top: 32px;
  width: 64px;
  opacity: 0.16;
}
.rb-cta-px--br {
  right: 44px;
  bottom: 40px;
  width: 48px;
  opacity: 0.14;
}
@media (max-width: 600px) {
  .rb-cta-px--br { display: none; }
  .rb-cta-px--tl { opacity: 0.10; }
}

/* ── Animations ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rb-float-soft {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-4px); }
  }
  @keyframes rb-breathe {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.035); }
  }
  @keyframes rb-glow-pulse {
    0%, 100% { opacity: 0.75; }
    50%       { opacity: 1; }
  }
  @keyframes rb-beam-pulse {
    0%, 100% { opacity: 0.14; }
    50%       { opacity: 0.30; }
  }
  @keyframes rb-ghost-pulse {
    0%, 100% { opacity: 0.32; }
    50%       { opacity: 0.75; }
  }
  @keyframes rb-tool-dot-pulse {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 1; }
  }
  @keyframes rb-cursor-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  @keyframes rb-block-cycle {
    0%        { transform: translateY(-52px); opacity: 0; }
    10%       { opacity: 1; }
    42%       { transform: translateY(0px);    opacity: 1; }
    47%       { transform: translateY(-3px);   opacity: 1; }
    52%, 82%  { transform: translateY(0px);    opacity: 1; }
    96%, 100% { opacity: 0; }
  }
  @keyframes rb-click-pulse {
    0%, 38%   { transform: scale(1);    opacity: 0; }
    46%       { transform: scale(1);    opacity: 0.85; }
    68%, 100% { transform: scale(2.1);  opacity: 0; }
  }
  @keyframes rb-float-2 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-4px); }
  }
  @keyframes rb-float-3 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
  }

  /* "Who it's for" section deco cubes (unrelated to hero scene) */
  .rb-cube--deco-a {
    animation: rb-float-2 11s ease-in-out infinite 4s;
    transform-box: fill-box;
    transform-origin: center;
  }
  .rb-cube--deco-b {
    animation: rb-float-3 14s ease-in-out infinite 7s;
    transform-box: fill-box;
    transform-origin: center;
  }

  .rb-bg-cube--a { animation: rb-float-soft 12s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .rb-bg-cube--b { animation: rb-float-soft 14s ease-in-out infinite 3s; transform-box: fill-box; transform-origin: center; }

  .rb-logo-mark { animation: rb-breathe 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .rb-logo-glow { animation: rb-glow-pulse 5s ease-in-out infinite; }

  .rb-beam { animation: rb-beam-pulse 4s ease-in-out infinite; }

  .rb-target-ghost { animation: rb-ghost-pulse 3s ease-in-out infinite; }

  .rb-accent-block--a { animation: rb-float-soft 8s ease-in-out infinite 1s; transform-box: fill-box; transform-origin: center; }
  .rb-accent-block--b { animation: rb-float-soft 9s ease-in-out infinite 3.5s; transform-box: fill-box; transform-origin: center; }

  .rb-build-block {
    animation: rb-block-cycle 6.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center bottom;
  }
  .rb-click-ring {
    animation: rb-click-pulse 6.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  .rb-script-cursor { animation: rb-cursor-blink 1.1s step-end infinite; }
  .rb-tool-dot { animation: rb-tool-dot-pulse 3s ease-in-out infinite 1s; }
}

/* ── Skills grid: 2 cols tablet, 3 cols desktop (prevents 4+2 layout) ── */
@media (min-width: 700px) {
  .theme-roblox .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .theme-roblox .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Projects grid: 3 cols at 700px+ (prevents 2+1 layout) ── */
@media (min-width: 700px) {
  .theme-roblox .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Format grid: 3 cols (prevents 5+1 layout at 1160px container) ── */
@media (min-width: 700px) {
  .theme-roblox .format-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Project card photo area: dark Roblox theme ── */
.theme-roblox .project-card__photo {
  border-radius: 10px;
  overflow: hidden;
}
.theme-roblox .photo-placeholder--light.rb-proj-ph {
  background: linear-gradient(155deg, #0e0535 0%, #180948 55%, #1a0e5e 100%);
  border-color: rgba(124, 108, 248, 0.28);
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  color: rgba(124, 108, 248, 0.45);
  flex-direction: column;
  gap: 10px;
  height: 200px;
  padding: 0;
}
.rb-proj-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.theme-roblox .project-card:hover .rb-proj-img {
  transform: scale(1.06);
}
/* Final project screenshot: square image, framed via object-position (no zoom, no dimming,
   no overlay) so the hero, the "ЧЕЛОВЕК-СЛОВАРЬ" title and the question speech bubble stay
   in frame — the photo box is landscape on most breakpoints (crops from the bottom, keeps
   the top) but turns portrait in the squeezed 481–1159px tablet range (crops the sides instead). */
.rb-proj-img--final {
  object-position: 50% 6%;
}
@media (max-width: 1159px) and (min-width: 481px) {
  .rb-proj-img--final {
    object-position: 50% 50%;
  }
}
/* ── Section art decorations ── */
.rb-who-sec,
.rb-skills-sec,
.rb-fmt-sec {
  position: relative;
  overflow: hidden;
}
.rb-sec-art {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.rb-sec-art--who {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  opacity: 0.50;
}
.rb-sec-art--skills {
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  opacity: 0.38;
}
.rb-sec-art--skills-r {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  opacity: 0.38;
}
.rb-proj-sec {
  position: relative;
  overflow: hidden;
}
.rb-sec-art--proj {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 82px;
  opacity: 0.38;
}
.rb-cta-scene {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: min(380px, 88%);
  opacity: 0.20;
  pointer-events: none;
  z-index: 0;
}
.rb-sec-art--fmt {
  right: 10px;
  bottom: 12px;
  width: 120px;
  opacity: 0.42;
}
.rb-sec-art--fmt-l {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  opacity: 0.42;
}

/* ── Format section game path strip ── */
.rb-fmt-path {
  position: relative;
  margin: 22px 0 6px;
  height: 36px;
}
.rb-fmt-path-line {
  position: absolute;
  top: 50%;
  left: 3%;
  right: 3%;
  border-top: 1px dashed rgba(124, 108, 248, 0.24);
  transform: translateY(-50%);
}
.rb-fmt-path-nodes {
  display: flex;
  justify-content: space-between;
  padding: 0 3%;
  height: 100%;
  align-items: center;
}
.rb-fmt-node {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rb-primary);
  opacity: 0.58;
  position: relative;
  flex-shrink: 0;
}
.rb-fmt-node:nth-child(1) { width: 10px; height: 10px; opacity: 0.68; }
.rb-fmt-node:nth-child(2) { background: var(--rb-blue); opacity: 0.55; }
.rb-fmt-node:nth-child(4) { background: var(--rb-blue); opacity: 0.55; }
.rb-fmt-node:nth-child(5) { opacity: 0.60; }
.rb-fmt-node--goal {
  width: 10px;
  height: 10px;
  background: transparent;
  border: 1.5px solid rgba(96, 165, 250, 0.65);
  opacity: 1;
}
.rb-fmt-node--pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(124, 108, 248, 0.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ── Who-for icon: border + hover glow ── */
.theme-roblox .who-for-card__icon {
  border: 1px solid rgba(124, 108, 248, 0.22);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-roblox .who-for-card:hover .who-for-card__icon {
  background: rgba(124, 108, 248, 0.22);
  border-color: rgba(124, 108, 248, 0.50);
  box-shadow: 0 0 14px rgba(124, 108, 248, 0.20);
}

/* ── Skill items: subtle purple border ── */
.theme-roblox .skill-item {
  border: 1px solid rgba(124, 108, 248, 0.08);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.theme-roblox .skill-item:hover {
  border-color: rgba(124, 108, 248, 0.24);
  box-shadow: 0 4px 20px rgba(124, 108, 248, 0.12);
}

/* ── Format label color ── */
.theme-roblox .format-item__label {
  color: rgba(124, 108, 248, 0.68);
}

/* ── Format section: game path + card hover + animations ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rb-fmt-tile-float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-5px); }
  }
  @keyframes rb-fmt-cp-expand {
    0%, 100% { transform: scale(1);    opacity: 0.38; }
    50%      { transform: scale(1.40); opacity: 0.10; }
  }
  @keyframes rb-fmt-cp-inner-pulse {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1.00; }
  }
  @keyframes rb-fmt-marker-move {
    0%, 8%    { transform: translateY(0px);  opacity: 0; }
    20%       { opacity: 0.82; }
    74%       { transform: translateY(16px); opacity: 0.82; }
    88%, 100% { transform: translateY(16px); opacity: 0; }
  }
  @keyframes rb-fmt-node-ring {
    0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.35; }
    50%      { transform: translate(-50%, -50%) scale(1.65); opacity: 0.08; }
  }

  .rb-fmt-tile {
    animation: rb-fmt-tile-float 6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center bottom;
  }
  .rb-fmt-cp-ring {
    animation: rb-fmt-cp-expand 3s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .rb-fmt-cp-inner {
    animation: rb-fmt-cp-inner-pulse 3s ease-in-out infinite 1.2s;
  }
  .rb-fmt-marker {
    animation: rb-fmt-marker-move 5s ease-in-out infinite 1.2s;
    transform-box: fill-box;
    transform-origin: center;
  }
  .rb-fmt-node--pulse::after {
    animation: rb-fmt-node-ring 3.2s ease-in-out infinite 0.8s;
  }

}
.theme-roblox .format-item:hover {
  border-color: rgba(124, 108, 248, 0.28);
  box-shadow: 0 10px 36px rgba(124, 108, 248, 0.14);
}

/* ── Mobile: hide section art ── */
@media (max-width: 768px) {
  .rb-sec-art { display: none; }
  .rb-fmt-path { display: none; }
}

/* ── Skills / projects / CTA scenes ── */
@media (prefers-reduced-motion: no-preference) {
  /* Skills: signal dot travels code→trigger→HP-bar (78px down) */
  @keyframes rb-sk-signal-move {
    0%, 5%    { transform: translateY(0px);  opacity: 0; }
    15%       { opacity: 0.82; }
    78%       { transform: translateY(78px); opacity: 0.82; }
    92%, 100% { transform: translateY(78px); opacity: 0; }
  }
  /* HP bar fill scaleX loop */
  @keyframes rb-sk-hp-anim {
    0%        { transform: scaleX(0.22); }
    44%, 60%  { transform: scaleX(1.00); }
    100%      { transform: scaleX(0.22); }
  }
  /* Skill badge levitation */
  @keyframes rb-sk-badge-float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-6px); }
  }
  /* Skill badge pulse ring */
  @keyframes rb-sk-badge-pulse-exp {
    0%, 100% { transform: scale(1);    opacity: 0.28; }
    50%      { transform: scale(1.48); opacity: 0.06; }
  }
  /* Projects: done-node pulse ring */
  @keyframes rb-proj-done-exp {
    0%, 100% { transform: scale(1);    opacity: 0.32; }
    50%      { transform: scale(1.52); opacity: 0.07; }
  }
  /* Projects: signal travels idea→mechanic→game (92px down) */
  @keyframes rb-proj-sig-move {
    0%, 5%    { transform: translateY(0px);  opacity: 0; }
    14%       { opacity: 0.82; }
    80%       { transform: translateY(92px); opacity: 0.82; }
    94%, 100% { transform: translateY(92px); opacity: 0; }
  }
  /* Projects: moving object bounces horizontally */
  @keyframes rb-proj-mover-move {
    0%, 100% { transform: translateX(0px); }
    50%      { transform: translateX(14px); }
  }
  /* CTA: spawn ring pulse */
  @keyframes rb-cta-spawn-exp {
    0%, 100% { transform: scale(1);    opacity: 0.38; }
    50%      { transform: scale(1.56); opacity: 0.08; }
  }
  /* CTA: signal travels path (212px right) */
  @keyframes rb-cta-sig-move {
    0%, 6%    { transform: translateX(0px);   opacity: 0; }
    14%       { opacity: 0.86; }
    84%       { transform: translateX(212px); opacity: 0.86; }
    96%, 100% { transform: translateX(212px); opacity: 0; }
  }

  .rb-sk-signal {
    animation: rb-sk-signal-move 5s ease-in-out infinite 1.5s;
    transform-box: fill-box;
    transform-origin: center;
  }
  .rb-sk-hp-fill, .rb-sk-hp-hl {
    animation: rb-sk-hp-anim 7s ease-in-out infinite 2s;
    transform-box: fill-box;
    transform-origin: left center;
  }
  .rb-sk-badge {
    animation: rb-sk-badge-float 6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center bottom;
  }
  .rb-sk-badge-pulse {
    animation: rb-sk-badge-pulse-exp 3s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .rb-proj-done-pulse {
    animation: rb-proj-done-exp 3s ease-in-out infinite 0.8s;
    transform-box: fill-box;
    transform-origin: center;
  }
  .rb-proj-path-signal {
    animation: rb-proj-sig-move 5.5s ease-in-out infinite 2s;
    transform-box: fill-box;
    transform-origin: center;
  }
  .rb-proj-mover {
    animation: rb-proj-mover-move 4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .rb-cta-spawn {
    animation: rb-cta-spawn-exp 3s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .rb-cta-signal {
    animation: rb-cta-sig-move 6s ease-in-out infinite 2s;
    transform-box: fill-box;
    transform-origin: center;
  }
}

@media (max-width: 768px) {
  .rb-cta-scene { display: none; }
}

/* ============================================================
   THEME-ROBLOX — «Чому навчиться дитина» та «Як проходять заняття»
   переходять у палітру hero (navy/indigo/purple/cyan), а не
   світлий lavender-блок курсу.
   ============================================================ */

.theme-roblox .rb-skills-sec,
.theme-roblox .rb-fmt-sec {
  background: linear-gradient(140deg, #10063E 0%, #1E1060 52%, #2A3D9E 100%);
}

.theme-roblox .rb-skills-sec .section-title,
.theme-roblox .rb-fmt-sec .section-title { color: #fff; }
.theme-roblox .rb-skills-sec .section-subtitle,
.theme-roblox .rb-fmt-sec .section-subtitle { color: rgba(210, 205, 255, 0.66); }

/* ── Skill cards: dark game-panel cards ── */
.theme-roblox .rb-skills-sec .skill-item {
  position: relative;
  padding-right: 46px;
  background: linear-gradient(155deg, #150A46 0%, #1B0F52 100%);
  border-color: rgba(124, 108, 248, 0.16);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.theme-roblox .rb-skills-sec .skill-item:hover {
  background: linear-gradient(155deg, #1B0F52 0%, #221465 100%);
  border-color: rgba(124, 108, 248, 0.34);
  box-shadow: 0 6px 26px rgba(124, 108, 248, 0.18);
}
.theme-roblox .rb-skills-sec .skill-item__text { color: rgba(224, 222, 255, 0.84); }

/* Per-card mini game-scene accents — build-grid / script-tag / checkpoint /
   HP-bar / trigger / skill-badge — cycled so neighbours never repeat. */
.theme-roblox .rb-skills-sec .skill-item::before {
  content: '';
  position: absolute;
  top: 14px; right: 16px;
  pointer-events: none;
  opacity: 0.60;
}
/* 1: build-grid (interface / scene tiles) */
.theme-roblox .rb-skills-sec .skill-item:nth-child(1)::before {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #7C6CF8;
  box-shadow: 8px 0 0 #7C6CF8, 0 8px 0 #7C6CF8, 8px 8px 0 #7C6CF8;
}
/* 2: script tag (Lua basics) */
.theme-roblox .rb-skills-sec .skill-item:nth-child(2)::before {
  content: '</>';
  font: 700 11px/1 monospace;
  color: #93C5FD;
}
/* 3: platform tile + checkpoint dot (maps / mechanics) — dosed green status marker */
.theme-roblox .rb-skills-sec .skill-item:nth-child(3)::before {
  width: 11px; height: 11px;
  border: 1.5px solid #60A5FA;
  transform: rotate(45deg);
  background: radial-gradient(circle 2px at 50% 50%, #4ADE80 96%, transparent 100%);
}
/* 4: HP / energy bar (in-game UI) */
.theme-roblox .rb-skills-sec .skill-item:nth-child(4)::before {
  width: 20px; height: 6px;
  border: 1px solid #A5B4FC;
  border-radius: 3px;
  background: linear-gradient(#A5B4FC, #A5B4FC) no-repeat;
  background-size: 55% 100%;
}
/* 5: trigger / switch (testing) */
.theme-roblox .rb-skills-sec .skill-item:nth-child(5)::before {
  width: 12px; height: 12px;
  border: 1.5px solid #7C6CF8;
  border-radius: 3px;
  background: radial-gradient(circle 2.5px at 50% 50%, #7C6CF8 96%, transparent 100%);
}
/* 6: skill badge (publishing / progress) */
.theme-roblox .rb-skills-sec .skill-item:nth-child(6)::before {
  content: '★';
  font-size: 12px;
  line-height: 1;
  color: #C4B5FD;
}

/* ── Format cards: dark game-panel cards ── */
.theme-roblox .rb-fmt-sec .format-item {
  background: linear-gradient(155deg, #150A46 0%, #1B0F52 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.theme-roblox .rb-fmt-sec .format-item__value { color: #fff; }
.theme-roblox .rb-fmt-sec .format-item__icon {
  box-shadow: 0 0 0 1px rgba(124, 108, 248, 0.30);
}
@media (prefers-reduced-motion: no-preference) {
  .theme-roblox .rb-fmt-sec .format-item:hover {
    background: linear-gradient(155deg, #1B0F52 0%, #221465 100%);
  }
}

/* ── Brighten side-scene decorations now that these two sections are dark ── */
.rb-sec-art--skills,
.rb-sec-art--skills-r {
  opacity: 0.62;
}
.rb-sec-art--fmt,
.rb-sec-art--fmt-l {
  opacity: 0.64;
}

/* Retime HP-fill into the "progress" band (2.5–3.5s) */
@media (prefers-reduced-motion: no-preference) {
  .rb-sk-hp-fill, .rb-sk-hp-hl {
    animation-duration: 3.2s;
  }
}

/* Mobile: drop the small card-corner accents to keep dense grids clean */
@media (max-width: 480px) {
  .theme-roblox .rb-skills-sec .skill-item::before {
    display: none;
  }
  .theme-roblox .rb-skills-sec .skill-item {
    padding-right: 20px;
  }
}

/* ===========================
   Theme: Programming (.theme-prog)
   =========================== */

.theme-prog {
  --prog-cyan:   #06B6D4;
  --prog-cyan-2: #22D3EE;
  --prog-bg-alt: #F0FBFF;
}

/* ── Hero ── */
.theme-prog .course-hero {
  background: linear-gradient(140deg, #020E1A 0%, #061422 55%, #0D3B52 100%);
}
.theme-prog .course-hero::before {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.10) 0%, transparent 68%);
}
.theme-prog .hero__badge {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.35);
  color: #22D3EE;
}

/* ── Hero SVG scene ── */
.prog-hero-illustration {
  position: relative;
}

.prog-hero-scene {
  width: 100%;
  height: auto;
  max-height: 340px;
  display: block;
  transition: filter 0.3s ease;
}

.prog-hero-scene:hover {
  filter: brightness(1.05) saturate(1.1);
}

@media (max-width: 900px) {
  .prog-hero-scene { max-height: 260px; }
}

@media (max-width: 480px) {
  .prog-hero-scene    { max-height: 200px; }
  .prog-bg-code--1,
  .prog-bg-code--2    { display: none; }
}

/* ── Animations ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes prog-drift-1 {
    0%, 100% { transform: translate(0px, 0px); }
    50%       { transform: translate(2px, -4px); }
  }
  @keyframes prog-drift-2 {
    0%, 100% { transform: translate(0px, 0px); }
    50%       { transform: translate(-3px, 3px); }
  }
  @keyframes prog-node-pulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%       { opacity: 0.88; transform: scale(1.45); }
  }
  @keyframes prog-cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
  }

  .prog-bg-code--1 {
    animation: prog-drift-1 12s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .prog-bg-code--2 {
    animation: prog-drift-2 16s ease-in-out infinite 2s;
    transform-box: fill-box;
    transform-origin: center;
  }

  .prog-node {
    transform-box: fill-box;
    transform-origin: center;
  }
  .prog-node--1 { animation: prog-node-pulse 3.0s ease-in-out infinite; }
  .prog-node--2 { animation: prog-node-pulse 2.7s ease-in-out infinite 0.8s; }
  .prog-node--3 { animation: prog-node-pulse 3.4s ease-in-out infinite 1.6s; }
  .prog-node--4 { animation: prog-node-pulse 2.5s ease-in-out infinite 0.4s; }
  .prog-node--5 { animation: prog-node-pulse 3.2s ease-in-out infinite 1.2s; }
  .prog-node--6 { animation: prog-node-pulse 2.9s ease-in-out infinite 2.0s; }

  .prog-cursor {
    animation: prog-cursor-blink 1.1s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prog-signals { display: none; }
  .prog-cursor  { opacity: 0.8; }
}

/* ── Project preview mini-apps (cards 1-2): idle animations ── */
@media (prefers-reduced-motion: no-preference) {
  .pg-p1-cursor,
  .pg-p1-pulse,
  .pg-p1-drift,
  .pg-p2-status,
  .pg-p2-msg,
  .pg-p2-cursor,
  .pg-p2-drift,
  .pg-p3-signal,
  .pg-p3-badge,
  .pg-p3-complete {
    transform-box: fill-box;
    transform-origin: center;
  }

  @keyframes pg-p1-blink-kf {
    0%, 46%, 100% { opacity: 1; }
    50%, 92%       { opacity: 0; }
  }
  @keyframes pg-p1-pulse-kf {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.045); }
  }
  @keyframes pg-p1-drift-kf {
    0%, 100% { transform: translate(0, 0); opacity: 0.30; }
    50%       { transform: translate(-2px, 2px); opacity: 0.5; }
  }
  @keyframes pg-p2-status-kf {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.2); }
  }
  @keyframes pg-p2-msg-kf {
    0%, 100% { transform: translateY(0); opacity: 0.94; }
    50%       { transform: translateY(-1.4px); opacity: 1; }
  }
  @keyframes pg-p2-drift-kf {
    0%, 100% { transform: translate(0, 0); opacity: 0.24; }
    50%       { transform: translate(2px, -2px); opacity: 0.4; }
  }
  @keyframes pg-p3-signal-kf {
    0%   { transform: translateX(0); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateX(102px); opacity: 0; }
  }
  @keyframes pg-p3-badge-kf {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-2px); }
  }
  @keyframes pg-p3-complete-kf {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.06); }
  }

  .pg-p1-cursor { animation: pg-p1-blink-kf 1.1s ease-in-out infinite; }
  .pg-p1-pulse  { animation: pg-p1-pulse-kf 2.6s ease-in-out infinite; }
  .pg-p1-drift  { animation: pg-p1-drift-kf 8s ease-in-out infinite; }

  .pg-p2-status { animation: pg-p2-status-kf 2.4s ease-in-out infinite; }
  .pg-p2-msg    { animation: pg-p2-msg-kf 4.5s ease-in-out infinite; }
  .pg-p2-cursor { animation: pg-p1-blink-kf 1.1s ease-in-out infinite 0.3s; }
  .pg-p2-drift  { animation: pg-p2-drift-kf 9s ease-in-out infinite 1.5s; }

  .pg-p3-signal   { animation: pg-p3-signal-kf 4.5s ease-in-out infinite; }
  .pg-p3-badge    { animation: pg-p3-badge-kf 4s ease-in-out infinite; }
  .pg-p3-complete { animation: pg-p3-complete-kf 2.8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-p1-cursor, .pg-p2-cursor { opacity: 0.85; }
}

/* ── Alt sections ── */
.theme-prog .course-section--alt { background: #F0FBFF; }

/* ── Who-for cards ── */
.theme-prog .who-for-grid .who-for-card {
  border-color: rgba(6, 182, 212, 0.15);
  transition: opacity 0.5s ease, transform 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-prog .who-for-grid .who-for-card:hover {
  border-color: rgba(6, 182, 212, 0.42);
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.10);
  transform: translateY(-5px);
}
.theme-prog .who-for-card__icon {
  background: rgba(6, 182, 212, 0.10);
  color: #06B6D4;
}

/* ── Skills list ── */
.theme-prog .skill-item__dot { background: #06B6D4; }
.theme-prog .skills-grid .skill-item {
  border-left: 2px solid rgba(6, 182, 212, 0.18);
  transition: opacity 0.5s ease, transform 0.3s ease, box-shadow 0.25s ease, border-left-color 0.25s ease;
}
.theme-prog .skills-grid .skill-item:hover {
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.09);
  border-left-color: rgba(6, 182, 212, 0.50);
}

/* Code deco on skills section */
#prog-skills-sec { position: relative; overflow: hidden; }
#prog-skills-sec::before {
  content: '</>';
  position: absolute;
  right: max(40px, 5%);
  top: 44px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 58px;
  font-weight: 700;
  letter-spacing: -2px;
  color: #06B6D4;
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}

/* ── Project cards ── */
.theme-prog .project-card__num { color: #06B6D4; }
.theme-prog .projects-grid .project-card {
  border-color: rgba(6, 182, 212, 0.13);
  position: relative;
  transition: opacity 0.5s ease, transform 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-prog .projects-grid .project-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #06B6D4, #22D3EE);
  border-radius: 14px 14px 0 0;
  opacity: 0.35;
  pointer-events: none;
}

/* ── Format icons ── */
.theme-prog .format-item__icon {
  background: linear-gradient(135deg, #061828 0%, #0D3B52 100%);
  color: #06B6D4;
}
@media (prefers-reduced-motion: no-preference) {
  .theme-prog .format-item:hover {
    box-shadow: 0 10px 32px rgba(6, 182, 212, 0.13);
  }
}

/* ── CTA section ── */
.theme-prog .cta-section {
  background: linear-gradient(140deg, #020E1A 0%, #061422 58%, #0D3B52 100%);
}
.theme-prog .cta-section::before {
  background: radial-gradient(ellipse, rgba(6, 182, 212, 0.08) 0%, transparent 68%);
}

/* CTA deco layer */
.prog-cta-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.prog-cta-scene {
  width: 100%;
  height: 100%;
  display: block;
}

/* CTA animations */
@keyframes prog-cta-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(3px, -4px); }
}
@keyframes prog-cta-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-4px, 3px); }
}
@keyframes prog-cta-node-pulse {
  0%, 100% { opacity: 0.40; transform: scale(1); }
  50%       { opacity: 0.82; transform: scale(1.5); }
}

@media (prefers-reduced-motion: no-preference) {
  .prog-cta-code--1 {
    animation: prog-cta-drift-1 12s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .prog-cta-code--2 {
    animation: prog-cta-drift-2 14s ease-in-out infinite 3s;
    transform-box: fill-box;
    transform-origin: center;
  }
  .prog-cta-node { transform-box: fill-box; transform-origin: center; }
  .prog-cta-node--1 { animation: prog-cta-node-pulse 3.0s ease-in-out infinite; }
  .prog-cta-node--2 { animation: prog-cta-node-pulse 3.5s ease-in-out infinite 1.2s; }
  .prog-cta-node--3 { animation: prog-cta-node-pulse 2.8s ease-in-out infinite 2.1s; }
}

@media (prefers-reduced-motion: reduce) {
  .prog-cta-signal { display: none; }
  .prog-cta-code--1,
  .prog-cta-code--2 { animation: none; }
  .prog-cta-node { animation: none !important; }
}

/* CTA mobile */
@media (max-width: 600px) {
  .prog-cta-code--2,
  .prog-cta-node--2 { display: none; }
}

/* ── Grid centering: Format «Як проходять» 5+1 → centre 6th card ──
   5 cols fit from viewport 1028px (container 980px = 5×180 + 4×20).
   Container max is 1160px, so 6 cols never fit → no upper bound needed. */
@media (min-width: 1028px) {
  .theme-prog .format-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .theme-prog .format-item:last-child {
    grid-column: 3;
  }
}

/* ================================================================
   Theme: Design (.theme-design)
   ================================================================ */

.theme-design {
  --ds-coral:   #FF6B47;
  --ds-orange:  #FF8C3F;
  --ds-magenta: #D946EF;
  --ds-purple:  #8B5CF6;
  --ds-amber:   #F59E0B;
  --ds-cream:   #FFF8F5;
}

/* ── Hero ── */
.theme-design .course-hero {
  background: linear-gradient(140deg, #1E0A14 0%, #2E1220 55%, #1C0D00 100%);
}
.theme-design .course-hero::before {
  background: radial-gradient(circle at 30% 50%, rgba(255,107,71,0.12) 0%, transparent 65%);
}
.theme-design .course-hero::after {
  content: '';
  position: absolute;
  bottom: -15%; right: 5%;
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(217,70,239,0.07) 0%, transparent 68%);
  pointer-events: none;
}
.theme-design .hero__badge {
  background: rgba(255,107,71,0.14);
  border-color: rgba(255,107,71,0.40);
  color: #FF8C3F;
}

/* ── Hero SVG scene ── */
.design-hero-scene {
  width: 100%;
  height: auto;
  max-height: 340px;
  display: block;
  overflow: visible;
}
@media (max-width: 900px) {
  .design-hero-scene { max-height: 260px; }
}
@media (max-width: 480px) {
  .design-hero-scene { max-height: 200px; }
}

/* ── Hero SVG animations ── */
@media (prefers-reduced-motion: no-preference) {
  .ds-shape-drift-1,
  .ds-shape-drift-2,
  .ds-shape-drift-3,
  .ds-shape-float-1,
  .ds-shape-float-2,
  .ds-shape-float-3,
  .ds-shape-spin,
  .ds-shape-pulse-1 {
    transform-box: fill-box;
    transform-origin: center;
  }

  @keyframes ds-drift-a {
    0%, 100% { transform: translate(0, 0); }
    30%  { transform: translate(4px, -6px); }
    70%  { transform: translate(-3px, 4px); }
  }
  @keyframes ds-drift-b {
    0%, 100% { transform: translate(0, 0); }
    40%  { transform: translate(-5px, 5px); }
    75%  { transform: translate(3px, -3px); }
  }
  @keyframes ds-float-a {
    0%, 100% { transform: translateY(0); }
    50%  { transform: translateY(-7px); }
  }
  @keyframes ds-float-b {
    0%, 100% { transform: translateY(0); }
    50%  { transform: translateY(6px); }
  }
  @keyframes ds-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes ds-pulse-a {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50%       { opacity: 0.60; transform: scale(1.15); }
  }

  .ds-shape-drift-1 { animation: ds-drift-a 14s ease-in-out infinite; }
  .ds-shape-drift-2 { animation: ds-drift-b 11s ease-in-out infinite; }
  .ds-shape-drift-3 { animation: ds-drift-a 17s ease-in-out infinite 2s; }
  .ds-shape-float-1 { animation: ds-float-a 9s ease-in-out infinite; }
  .ds-shape-float-2 { animation: ds-float-a 12s ease-in-out infinite 1.2s; }
  .ds-shape-float-3 { animation: ds-float-b 10s ease-in-out infinite 0.6s; }
  .ds-shape-spin    { animation: ds-spin-slow 26s linear infinite; }
  .ds-shape-pulse-1 { animation: ds-pulse-a 3.2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-shape-drift-1, .ds-shape-drift-2, .ds-shape-drift-3,
  .ds-shape-float-1, .ds-shape-float-2, .ds-shape-float-3,
  .ds-shape-spin, .ds-shape-pulse-1 { animation: none; }
}

/* ── Alt sections: warm cream ── */
.theme-design .course-section--alt {
  background: #FFF8F5;
}

/* ── Who-for cards ── */
.theme-design .who-for-card {
  border-color: rgba(255,107,71,0.14);
  position: relative;
  overflow: hidden;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease,
              opacity 0.55s ease, translate 0.55s ease;
}
.theme-design .who-for-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-coral), var(--ds-magenta));
  border-radius: 14px 14px 0 0;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.theme-design .who-for-card:hover {
  border-color: rgba(255,107,71,0.36);
  box-shadow: 0 6px 24px rgba(255,107,71,0.10);
  transform: translateY(-5px);
}
.theme-design .who-for-card:hover::before { opacity: 1; }
.theme-design .who-for-card__icon {
  background: rgba(255,107,71,0.10);
  color: var(--ds-coral);
  border: 1px solid rgba(255,107,71,0.20);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.theme-design .who-for-card:hover .who-for-card__icon {
  background: rgba(255,107,71,0.18);
  border-color: rgba(255,107,71,0.40);
}

/* ── Skills section: palette accent ── */
#ds-skills-sec { position: relative; overflow: hidden; }
#ds-skills-sec::after {
  content: '';
  position: absolute;
  right: max(28px, 4%);
  top: 40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,71,0.07) 0%, transparent 72%);
  pointer-events: none;
}

/* ── Skills items: styled card strip ── */
.theme-design .skill-item {
  border: 1px solid rgba(255,107,71,0.10);
  border-left: 3px solid rgba(255,107,71,0.28);
  padding: 18px 20px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: border-left-color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.25s ease,
              opacity 0.55s ease, translate 0.55s ease;
}
.theme-design .skill-item::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  background: radial-gradient(circle, rgba(255,107,71,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.theme-design .skill-item:hover {
  border-left-color: var(--ds-coral);
  border-color: rgba(255,107,71,0.22);
  box-shadow: 0 4px 20px rgba(255,107,71,0.10);
  transform: translateX(3px);
}
.theme-design .skill-item__dot {
  background: var(--ds-coral);
  width: 10px; height: 10px;
  flex-shrink: 0;
  margin-top: 5px;
}

/* ── Projects section ── */
#ds-projects-sec { position: relative; overflow: hidden; }
#ds-projects-sec::before {
  content: '';
  position: absolute;
  left: -48px; top: 40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,70,239,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.theme-design .project-card__num { color: var(--ds-coral); }
.theme-design .projects-grid .project-card {
  border-color: rgba(255,107,71,0.12);
  position: relative;
  overflow: hidden;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease,
              opacity 0.55s ease, translate 0.55s ease;
}
.theme-design .projects-grid .project-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ds-coral), var(--ds-orange), var(--ds-magenta));
  border-radius: 14px 14px 0 0;
  opacity: 0.45;
  pointer-events: none;
}
.theme-design .projects-grid .project-card:hover {
  border-color: rgba(255,107,71,0.38);
  box-shadow: 0 10px 36px rgba(255,107,71,0.12);
  transform: translateY(-5px);
}
.theme-design .project-card__photo {
  border-radius: 10px;
  overflow: hidden;
}
.theme-design .ds-proj-ph {
  background: linear-gradient(155deg, #2A0E20 0%, #1C0A18 55%, #1E0A00 100%);
  border-style: solid;
  border-width: 1px;
  border-color: rgba(255,107,71,0.22);
  border-radius: 10px;
  min-height: 110px;
  padding: 0;
  display: flex;
  align-items: stretch;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}
.theme-design .project-card:hover .ds-proj-ph {
  box-shadow: 0 0 26px rgba(255,107,71,0.20);
}
.ds-proj-deco {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.3s ease;
}
.theme-design .project-card:hover .ds-proj-deco {
  filter: brightness(1.06) saturate(1.08);
}

/* ── Project preview scenes: idle animation ── */
@media (prefers-reduced-motion: no-preference) {
  .ds-p1-pulse,
  .ds-p1-drift,
  .ds-p1-cursor,
  .ds-p1-shine,
  .ds-p2-pulse,
  .ds-p2-line,
  .ds-p2-tile,
  .ds-p2-badge,
  .ds-p3-drift-a,
  .ds-p3-drift-b,
  .ds-p3-glow,
  .ds-p3-ring,
  .ds-p3-icon-pulse {
    transform-box: fill-box;
    transform-origin: center;
  }

  @keyframes ds-p1-cursor-kf {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(3px, -2px); }
  }
  @keyframes ds-p1-shine-kf {
    0%, 100% { opacity: 0.22; transform: scale(1); }
    50%       { opacity: 0.42; transform: scale(1.08); }
  }
  @keyframes ds-p2-shine-kf {
    0%   { transform: translateX(0); }
    100% { transform: translateX(96px); }
  }
  @keyframes ds-p2-tile-kf {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-2.5px); }
  }
  @keyframes ds-p2-badge-kf {
    0%, 100% { opacity: 0.92; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.05); }
  }
  @keyframes ds-p3-reveal-kf {
    0%, 100% { opacity: 0.82; }
    50%       { opacity: 1; }
  }
  @keyframes ds-p3-icon-pulse-kf {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.1); }
  }

  .ds-p1-pulse  { animation: ds-pulse-a 3.4s ease-in-out infinite; }
  .ds-p1-drift  { animation: ds-drift-b 9s ease-in-out infinite; }
  .ds-p1-cursor { animation: ds-p1-cursor-kf 4.2s ease-in-out infinite; }
  .ds-p1-shine  { animation: ds-p1-shine-kf 4s ease-in-out infinite; }

  .ds-p2-pulse { animation: ds-pulse-a 3.6s ease-in-out infinite; }
  .ds-p2-line  { animation: ds-p2-shine-kf 5s ease-in-out infinite alternate; }
  .ds-p2-tile  { animation: ds-p2-tile-kf 6s ease-in-out infinite; }
  .ds-p2-badge { animation: ds-p2-badge-kf 3.8s ease-in-out infinite; }

  .ds-p3-drift-a   { animation: ds-drift-a 16s ease-in-out infinite; }
  .ds-p3-drift-b   { animation: ds-drift-b 13s ease-in-out infinite 1s; }
  .ds-p3-glow      { animation: ds-pulse-a 3.2s ease-in-out infinite; }
  .ds-p3-reveal    { animation: ds-p3-reveal-kf 4.5s ease-in-out infinite; }
  .ds-p3-ring      { animation: ds-spin-slow 24s linear infinite; }
  .ds-p3-icon-pulse { animation: ds-p3-icon-pulse-kf 3.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-p1-pulse, .ds-p1-drift, .ds-p1-cursor, .ds-p1-shine,
  .ds-p2-pulse, .ds-p2-line, .ds-p2-tile, .ds-p2-badge,
  .ds-p3-drift-a, .ds-p3-drift-b, .ds-p3-glow, .ds-p3-reveal, .ds-p3-ring, .ds-p3-icon-pulse {
    animation: none;
  }
}

/* ── Format section: design accent ── */
#ds-format-sec { position: relative; overflow: hidden; }
#ds-format-sec::after {
  content: '';
  position: absolute;
  right: -40px; bottom: 20px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,70,239,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.theme-design .format-item__icon {
  background: linear-gradient(135deg, #2E1220 0%, #200A00 100%);
  color: var(--ds-coral);
}
.theme-design .format-item__label {
  color: rgba(255,107,71,0.72);
}
@media (prefers-reduced-motion: no-preference) {
  .theme-design .format-item:hover {
    box-shadow: 0 10px 32px rgba(255,107,71,0.12);
  }
}

/* ── FAQ ── */
.theme-design .faq-item__question:hover { color: var(--ds-coral); }
.theme-design .faq-item.open .faq-item__question { color: var(--ds-coral); }
.theme-design .faq-item.open .faq-item__icon {
  background: var(--ds-coral);
  border-color: var(--ds-coral);
}

/* ── CTA section ── */
.theme-design .cta-section {
  background: linear-gradient(140deg, #1E0A14 0%, #2E1220 55%, #1C0D00 100%);
}
.theme-design .cta-section::before {
  background: radial-gradient(ellipse, rgba(255,107,71,0.10) 0%, transparent 68%);
}

/* ── Who-for cards: per-card icon + strip color ── */
.theme-design .who-for-card:nth-child(1) .who-for-card__icon { background: rgba(255,107,71,0.12); color: #FF6B47; border-color: rgba(255,107,71,0.28); }
.theme-design .who-for-card:nth-child(2) .who-for-card__icon { background: rgba(217,70,239,0.10); color: #D946EF; border-color: rgba(217,70,239,0.24); }
.theme-design .who-for-card:nth-child(3) .who-for-card__icon { background: rgba(139,92,246,0.10); color: #8B5CF6; border-color: rgba(139,92,246,0.24); }
.theme-design .who-for-card:nth-child(4) .who-for-card__icon { background: rgba(245,158,11,0.10); color: #F59E0B; border-color: rgba(245,158,11,0.24); }
.theme-design .who-for-card:nth-child(1)::before { background: linear-gradient(90deg, #FF6B47, #FF8C3F); }
.theme-design .who-for-card:nth-child(2)::before { background: linear-gradient(90deg, #D946EF, #8B5CF6); }
.theme-design .who-for-card:nth-child(3)::before { background: linear-gradient(90deg, #8B5CF6, #D946EF); }
.theme-design .who-for-card:nth-child(4)::before { background: linear-gradient(90deg, #F59E0B, #FF8C3F); }

/* ── Skill items: per-item color accent ── */
.theme-design .skill-item:nth-child(1) { border-left-color: rgba(255,107,71,0.60); }
.theme-design .skill-item:nth-child(2) { border-left-color: rgba(217,70,239,0.50); }
.theme-design .skill-item:nth-child(3) { border-left-color: rgba(139,92,246,0.48); }
.theme-design .skill-item:nth-child(4) { border-left-color: rgba(245,158,11,0.48); }
.theme-design .skill-item:nth-child(5) { border-left-color: rgba(255,140,63,0.55); }
.theme-design .skill-item:nth-child(6) { border-left-color: rgba(255,107,71,0.60); }
.theme-design .skill-item:nth-child(1) .skill-item__dot { background: #FF6B47; }
.theme-design .skill-item:nth-child(2) .skill-item__dot { background: #D946EF; }
.theme-design .skill-item:nth-child(3) .skill-item__dot { background: #8B5CF6; }
.theme-design .skill-item:nth-child(4) .skill-item__dot { background: #F59E0B; }
.theme-design .skill-item:nth-child(5) .skill-item__dot { background: #FF8C3F; }
.theme-design .skill-item:nth-child(6) .skill-item__dot { background: #FF6B47; }

/* ── Format items: per-item icon color + hover lift ── */
.theme-design .format-item__icon {
  transition: transform 0.26s ease, box-shadow 0.26s ease;
}
.theme-design .format-item:nth-child(1) .format-item__icon { color: var(--ds-coral); }
.theme-design .format-item:nth-child(2) .format-item__icon { color: var(--ds-magenta); }
.theme-design .format-item:nth-child(3) .format-item__icon { color: var(--ds-purple); }
.theme-design .format-item:nth-child(4) .format-item__icon { color: var(--ds-orange); }
.theme-design .format-item:nth-child(5) .format-item__icon { color: var(--ds-amber); }
.theme-design .format-item:nth-child(6) .format-item__icon { color: var(--ds-coral); }
.theme-design .format-item:hover .format-item__icon {
  transform: scale(1.10);
  box-shadow: 0 4px 16px rgba(255,107,71,0.16);
}

/* ── Who-for section: position context ── */
#ds-who-sec { position: relative; overflow: hidden; }

/* ── Container z-lift so decos stay behind content ── */
#ds-who-sec > .container,
#ds-skills-sec > .container,
#ds-projects-sec > .container,
#ds-format-sec > .container { position: relative; z-index: 1; }

/* ── Section deco wrappers ── */
.ds-deco-wrap {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.ds-deco-wrap svg { width: 100%; height: 100%; display: block; }
.ds-deco-wrap--who    { top: 8px;    right: 8px;  width: 200px; height: 72px; }
.ds-deco-wrap--skills { bottom: 8px; left: 8px;   width: 220px; height: 72px; }
.ds-deco-wrap--proj   { top: 10px;   right: 8px;  width: 180px; height: 64px; }
.ds-deco-wrap--fmt    { bottom: 8px; left: 8px;   width: 260px; height: 64px; }

/* ── Section deco animations ── */
@media (prefers-reduced-motion: no-preference) {
  .ds-who-swatches {
    transform-box: fill-box;
    transform-origin: center;
    animation: ds-sec-floaty 7s ease-in-out infinite;
  }
  .ds-sec-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: ds-sec-pulse-b 2.8s ease-in-out infinite;
  }
  .ds-sec-float-a {
    transform-box: fill-box;
    transform-origin: center;
    animation: ds-sec-floaty 6s ease-in-out infinite;
  }
  .ds-sec-float-b {
    transform-box: fill-box;
    transform-origin: center;
    animation: ds-sec-floaty 8s ease-in-out infinite 1.5s;
  }
  .ds-sec-float-c {
    transform-box: fill-box;
    transform-origin: center;
    animation: ds-sec-floaty-b 7s ease-in-out infinite 0.8s;
  }
  .ds-proj-flow-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: ds-proj-walk 5s ease-in-out alternate infinite;
  }
  .ds-fmt-marker {
    transform-box: fill-box;
    transform-origin: center;
    animation: ds-fmt-walk 5s ease-in-out alternate infinite;
  }

  @keyframes ds-sec-floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }
  @keyframes ds-sec-floaty-b {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
  }
  @keyframes ds-sec-pulse-b {
    0%, 100% { opacity: 0.22; transform: scale(1); }
    50%      { opacity: 0.70; transform: scale(1.22); }
  }
  @keyframes ds-proj-walk {
    0%   { transform: translateX(0); }
    100% { transform: translateX(56px); }
  }
  @keyframes ds-fmt-walk {
    0%   { transform: translateX(0); }
    100% { transform: translateX(180px); }
  }
}

/* ── Mobile: hide section decos ── */
@media (max-width: 768px) {
  .ds-deco-wrap { display: none; }
}

/* ── Grid column counts: prevent orphaned items ── */
@media (min-width: 700px) {
  .theme-design .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .theme-design .format-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .theme-design .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .theme-design .who-for-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .theme-design .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .theme-design .who-for-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .theme-design .who-for-grid,
  .theme-design .skills-grid,
  .theme-design .format-grid,
  .theme-design .projects-grid {
    grid-template-columns: 1fr;
  }
  .theme-design .skill-item:hover { transform: none; }
  .theme-design .who-for-card:hover { transform: none; }
  .theme-design .projects-grid .project-card:hover { transform: none; }
}
@media (max-width: 480px) {
  .theme-design .course-hero::after { display: none; }
}

/* ============================================================
   THEME-DESIGN — «Чому навчиться дитина» та «Як проходять заняття»
   переходять у палітру hero (тепла coral/orange/magenta/purple
   основа), а не світлий кремовий блок курсу.
   ============================================================ */

#ds-skills-sec,
#ds-format-sec {
  background: linear-gradient(140deg, #1E0A14 0%, #2E1220 55%, #1C0D00 100%);
}

#ds-skills-sec .section-title,
#ds-format-sec .section-title { color: #fff; }
#ds-skills-sec .section-subtitle,
#ds-format-sec .section-subtitle { color: rgba(255, 226, 214, 0.66); }

/* ── Skill cards: dark studio-panel cards ── */
.theme-design #ds-skills-sec .skill-item {
  background: linear-gradient(155deg, #2A0E20 0%, #241026 100%);
  border-color: rgba(255, 107, 71, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  padding-right: 44px;
}
.theme-design #ds-skills-sec .skill-item:hover {
  background: linear-gradient(155deg, #341227 0%, #2C132F 100%);
  border-color: rgba(255, 107, 71, 0.36);
  box-shadow: 0 6px 26px rgba(255, 107, 71, 0.18);
}
.theme-design #ds-skills-sec .skill-item__text { color: rgba(255, 232, 224, 0.86); }

/* Per-card mini design-scene accents — cycled so neighbours never repeat */
.theme-design #ds-skills-sec .skill-item::before {
  content: '';
  position: absolute;
  top: 14px; right: 16px;
  pointer-events: none;
  opacity: 0.62;
}
/* 1: shape composition (small triangle) */
.theme-design #ds-skills-sec .skill-item:nth-child(1)::before {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--ds-coral);
}
/* 2: colour chips / palette swatches — centre chip pulses */
.theme-design #ds-skills-sec .skill-item:nth-child(2)::before {
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--ds-magenta);
  box-shadow: 9px 0 0 var(--ds-purple), -9px 0 0 var(--ds-coral);
}
/* 3: artboard / layout grid */
.theme-design #ds-skills-sec .skill-item:nth-child(3)::before {
  width: 18px; height: 13px;
  border: 1.5px solid var(--ds-purple);
  border-radius: 2px;
  background:
    linear-gradient(var(--ds-purple), var(--ds-purple)) no-repeat center / 100% 1px,
    linear-gradient(var(--ds-purple), var(--ds-purple)) no-repeat center / 1px 100%;
}
/* 4: crop / frame guides */
.theme-design #ds-skills-sec .skill-item:nth-child(4)::before {
  width: 12px; height: 12px;
  border-top: 2px solid var(--ds-amber);
  border-right: 2px solid var(--ds-amber);
}
/* 5: layer cards (stacked) */
.theme-design #ds-skills-sec .skill-item:nth-child(5)::before {
  width: 14px; height: 8px;
  border-radius: 2px;
  background: var(--ds-orange);
  box-shadow: -3px 5px 0 -1px rgba(255, 140, 63, 0.55);
}
/* 6: selection cursor */
.theme-design #ds-skills-sec .skill-item:nth-child(6)::before {
  width: 12px; height: 12px;
  background: var(--ds-coral);
  clip-path: polygon(0 0, 100% 38%, 40% 40%, 55% 100%, 38% 82%, 0 100%);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ds-card-swatch-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%       { opacity: 0.95; transform: scale(1.22); }
  }
  @keyframes ds-card-layer-shift {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(2px, -2px); }
  }
  @keyframes ds-card-cursor-tilt {
    0%, 100% { transform: rotate(0deg); }
    50%       { transform: rotate(-8deg); }
  }
  .theme-design #ds-skills-sec .skill-item:nth-child(2)::before {
    animation: ds-card-swatch-pulse 3s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .theme-design #ds-skills-sec .skill-item:nth-child(5)::before {
    animation: ds-card-layer-shift 6.5s ease-in-out infinite;
  }
  .theme-design #ds-skills-sec .skill-item:nth-child(6)::before {
    animation: ds-card-cursor-tilt 6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 20% 20%;
  }
}

/* ── Format cards: dark studio-panel cards ── */
.theme-design #ds-format-sec .format-item {
  background: linear-gradient(155deg, #2A0E20 0%, #241026 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.theme-design #ds-format-sec .format-item__value { color: #fff; }
.theme-design #ds-format-sec .format-item__icon {
  box-shadow: 0 0 0 1px rgba(255, 107, 71, 0.28);
}
@media (prefers-reduced-motion: no-preference) {
  .theme-design #ds-format-sec .format-item:hover {
    background: linear-gradient(155deg, #341227 0%, #2C132F 100%);
  }
}

/* Mobile: drop the small card-corner accents to keep dense grids clean */
@media (max-width: 480px) {
  .theme-design #ds-skills-sec .skill-item::before {
    display: none;
  }
  .theme-design #ds-skills-sec .skill-item {
    padding-right: 20px;
  }
}

/* ================================================================
   ABOUT PAGE — .about-page specific styles
   ================================================================ */

/* ── Hero ── */
.about-hero {
  background: linear-gradient(145deg, #0b1929 0%, #0d2a50 55%, #091e3b 100%);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 28px) 0 36px;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  top: -10%; left: -8%;
  width: 820px; height: 620px;
  background: radial-gradient(ellipse, rgba(78,201,20,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.about-hero::after {
  content: '';
  position: absolute;
  bottom: -18%; right: 4%;
  width: 520px; height: 520px;
  background: radial-gradient(ellipse, rgba(34,211,238,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) minmax(110px, 170px);
  grid-template-areas: "left text right";
  align-items: center;
  justify-items: center;
  column-gap: 28px;
  row-gap: 24px;
  position: relative;
  z-index: 1;
}
.about-hero__text {
  grid-area: text;
  max-width: 660px;
  text-align: center;
}
.about-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(78,201,20,0.10);
  border: 1px solid rgba(78,201,20,0.25);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #4ec914;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.about-hero__badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ec914;
  flex-shrink: 0;
}
.about-hero__title {
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.16;
  margin-bottom: 18px;
}
.about-hero__subtitle {
  font-size: 16.5px;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  margin: 0 auto 26px;
  max-width: 560px;
}
.about-hero__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Side scenes: "an idea appears" (left) → "it becomes a result" (right) ── */
.about-hero__scene {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-hero__scene--left  { grid-area: left; }
.about-hero__scene--right { grid-area: right; }
.ahn-svg {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
  overflow: visible;
}

/* ── Scene element transforms ── */
.ahn-spark, .ahn-spark-ring, .ahn-node, .ahn-card,
.ahn-particle, .ahn-project, .ahn-complete, .ahn-detail {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Scene animations (motion-safe) ── */
@keyframes ahn-spark-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.25); }
}
@keyframes ahn-node-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%       { opacity: 0.9;  transform: scale(1.35); }
}
@keyframes ahn-card-levitate {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes ahn-particle-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.32; }
  50%       { transform: translate(3px, -4px); opacity: 0.55; }
}
@keyframes ahn-project-rise {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes ahn-complete-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 0.95; transform: scale(1.16); }
}
@keyframes ahn-detail-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.30; }
  50%       { transform: translate(-3px, 3px); opacity: 0.52; }
}

@media (prefers-reduced-motion: no-preference) {
  .ahn-spark       { animation: ahn-spark-pulse 3s ease-in-out infinite; }
  .ahn-spark-ring  { animation: ahn-spark-pulse 3s ease-in-out infinite; }
  .ahn-node        { animation: ahn-node-pulse 2.8s ease-in-out infinite 0.4s; }
  .ahn-card        { animation: ahn-card-levitate 6.5s ease-in-out infinite; }
  .ahn-particle--a { animation: ahn-particle-drift 10s ease-in-out infinite; }
  .ahn-particle--b { animation: ahn-particle-drift 12s ease-in-out infinite 2s; }
  .ahn-project     { animation: ahn-project-rise 7s ease-in-out infinite; }
  .ahn-complete    { animation: ahn-complete-pulse 3.2s ease-in-out infinite; }
  .ahn-detail      { animation: ahn-detail-drift 9s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .ahn-spark, .ahn-spark-ring, .ahn-node, .ahn-card,
  .ahn-particle--a, .ahn-particle--b,
  .ahn-project, .ahn-complete, .ahn-detail {
    animation: none !important;
  }
  .ahn-signal { display: none; }
}

/* ── Mobile: simplify side scenes to their essential shapes ── */
@media (max-width: 480px) {
  .ahn-decor { display: none; }
}

/* ── About Quantum section ("Що таке QuantumLeafHub") ── */
.about-quantum {
  padding: 100px 0 96px;
  background: var(--clr-bg-alt);
  overflow: hidden;
}
.about-quantum__stage {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(300px, 420px) minmax(160px, 1fr);
  grid-template-rows: auto auto;
  column-gap: 36px;
  row-gap: 44px;
  align-items: center;
  justify-items: center;
}
.about-quantum__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0;
}
.about-quantum__center {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  text-align: center;
  box-shadow: 0 20px 44px -20px rgba(13,42,80,0.20);
  z-index: 2;
}
.about-quantum__title {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 800;
  color: var(--clr-dark);
  letter-spacing: -0.02em;
  line-height: 1.28;
  margin-bottom: 8px;
}
.about-quantum__subtitle {
  font-size: 16px;
  font-weight: 700;
  color: #4ec914;
  margin-bottom: 14px;
}
.about-quantum__text {
  font-size: 14.5px;
  color: var(--clr-muted);
  line-height: 1.65;
}
.about-quantum__panel {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid var(--clr-border);
  padding: 18px 18px;
  z-index: 2;
  box-shadow: 0 12px 28px -18px rgba(13,42,80,0.18);
}
.about-quantum__panel--interest { grid-column: 1; grid-row: 1; }
.about-quantum__panel--learning { grid-column: 3; grid-row: 1; }
.about-quantum__panel--result   { grid-column: 2; grid-row: 2; max-width: 320px; }

.about-quantum__panel-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.about-quantum__panel--interest .about-quantum__panel-icon { background: rgba(34,211,238,0.12); }
.about-quantum__panel--learning .about-quantum__panel-icon { background: rgba(78,201,20,0.12); }
.about-quantum__panel--result   .about-quantum__panel-icon { background: rgba(168,85,247,0.12); }

.about-quantum__panel-title {
  font-size: 14.5px; font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 5px;
}
.about-quantum__panel-text {
  font-size: 13px; color: var(--clr-muted); line-height: 1.55;
}

@keyframes aqp-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: no-preference) {
  .about-quantum__panel--result { animation: aqp-float 7.5s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .aqp-anim-layer { display: none; }
}

/* ── About Format section (learning path: focus → practice → result) ── */
.about-format {
  padding: 96px 0;
  background: #fff;
  overflow: hidden;
}
.about-format__subtitle {
  font-size: 17px;
  color: var(--clr-muted);
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  line-height: 1.6;
}
.about-format-path {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-top: 60px;
}
.about-format-path::before {
  content: '';
  position: absolute;
  top: 55px;
  left: 16%;
  right: 16%;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, rgba(13,42,80,0.16) 0 6px, transparent 6px 13px);
  z-index: 0;
}
.about-format-step {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.about-format-step__scene {
  width: 100%;
  max-width: 200px;
  margin-bottom: 22px;
}
.about-format-scene {
  width: 100%;
  height: auto;
  overflow: visible;
}
.about-format-step__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 8px;
}
.about-format-step__text {
  font-size: 14.5px;
  color: var(--clr-muted);
  line-height: 1.6;
  max-width: 240px;
}

/* ── Scene 2: cube levitation ── */
.afs-cube { transform-box: fill-box; transform-origin: center; }
@keyframes afs-cube-float {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(0, -6px); }
}
@media (prefers-reduced-motion: no-preference) {
  .afs-cube { animation: afs-cube-float 6.5s ease-in-out infinite; }
}

/* ── Scene 3: one-shot completion pulse on reveal ── */
.afs-marker-badge { transform-box: fill-box; transform-origin: center; }
@keyframes afs-pulse-once {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.35); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .about-format-step--result.is-visible .afs-marker-badge {
    animation: afs-pulse-once 1.6s ease-out 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .afs-anim-layer { display: none; }
}

/* ── Directions overview ── */
.about-dirs {
  padding: 96px 0;
  background: #fff;
}
.about-dirs__subtitle {
  font-size: 17px;
  color: var(--clr-muted);
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  line-height: 1.6;
}
.about-dirs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 52px;
}
@media (min-width: 1100px) {
  .about-dirs-grid { grid-template-columns: repeat(4, 1fr); }
}
.about-dir-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--clr-border);
  text-decoration: none; color: inherit;
  background: #fff;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.about-dir-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.about-dir-card--roblox { border-color: rgba(139,92,246,0.20); background: linear-gradient(160deg, #fff 0%, rgba(139,92,246,0.05) 100%); }
.about-dir-card--prog   { border-color: rgba(34,211,238,0.20); background: linear-gradient(160deg, #fff 0%, rgba(13,42,80,0.05) 100%); }
.about-dir-card--design { border-color: rgba(251,113,133,0.22); background: linear-gradient(160deg, #fff 0%, rgba(251,113,133,0.06) 100%); }
.about-dir-card--video  { border-color: rgba(236,72,153,0.20); background: linear-gradient(160deg, #fff 0%, rgba(168,85,247,0.05) 100%); }
.about-dir-card--roblox:hover { border-color: rgba(139,92,246,0.55); box-shadow: 0 14px 30px -16px rgba(139,92,246,0.35); }
.about-dir-card--prog:hover   { border-color: rgba(34,211,238,0.55); box-shadow: 0 14px 30px -16px rgba(34,211,238,0.32); }
.about-dir-card--design:hover { border-color: rgba(251,113,133,0.55); box-shadow: 0 14px 30px -16px rgba(251,113,133,0.32); }
.about-dir-card--video:hover  { border-color: rgba(236,72,153,0.55); box-shadow: 0 14px 30px -16px rgba(236,72,153,0.32); }

.about-dir-card__scene {
  position: relative;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 16px;
  background: rgba(13,42,80,0.03);
  transition: background 0.3s ease;
}
.about-dir-card--roblox .about-dir-card__scene { background: radial-gradient(circle at 60% 30%, rgba(139,92,246,0.09), rgba(139,92,246,0.02) 70%); }
.about-dir-card--prog   .about-dir-card__scene { background: radial-gradient(circle at 60% 30%, rgba(34,211,238,0.08), rgba(13,42,80,0.02) 70%); }
.about-dir-card--design .about-dir-card__scene { background: radial-gradient(circle at 60% 30%, rgba(251,113,133,0.09), rgba(251,113,133,0.02) 70%); }
.about-dir-card--video  .about-dir-card__scene { background: radial-gradient(circle at 60% 30%, rgba(236,72,153,0.09), rgba(168,85,247,0.02) 70%); }
.about-dir-card:hover .about-dir-card__scene { filter: saturate(1.15) brightness(1.03); }

.about-dir-scene { width: 100%; height: auto; display: block; overflow: visible; }

.about-dir-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.about-dir-card__name {
  font-size: 16px; font-weight: 700; color: var(--clr-dark);
}
.about-dir-card__arrow {
  font-size: 18px; color: var(--clr-muted);
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}
.about-dir-card:hover .about-dir-card__arrow {
  transform: translateX(5px);
  color: var(--clr-green);
}
.about-dir-card__desc {
  font-size: 13.5px; color: var(--clr-muted); line-height: 1.5;
}

/* ── Direction scene: idle micro-animations (one per card) ── */
.ads-brush { transform-box: fill-box; transform-origin: center; }

@keyframes ads-brush-sway {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(-5deg); }
}
@keyframes ads-cursor-blink {
  0%, 45%   { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes ads-logo-pop {
  from { opacity: 0; transform: scale(0.85) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ads-logo-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-5px) rotate(2deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .about-dir-card--prog   .ads-cursor { animation: ads-cursor-blink 1.1s steps(1) infinite; }
  .about-dir-card--design .ads-brush  { animation: ads-brush-sway 6s ease-in-out infinite; }
  .ads-logo-float--roblox { animation: ads-logo-pop 0.6s ease-out both, ads-logo-float 6.5s ease-in-out 0.6s infinite; }
  .ads-logo-float--python { animation: ads-logo-pop 0.6s ease-out 0.15s both, ads-logo-float 7s ease-in-out 1s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .ads-anim-layer { display: none; }
  .ads-cursor { opacity: 1; }
  .ads-logo-float--roblox, .ads-logo-float--python { animation: none !important; opacity: 1; }
}

/* ── Real brand logos (Roblox / Python) inside direction cards ── */
.ads-logo-float {
  position: absolute;
  pointer-events: none;
}
.ads-logo-float--roblox { inset: 0; }
.ads-logo-float--python { left: 2%; top: 8%; width: 46%; height: 84%; }
.ads-logo-float {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ads-logo {
  display: block;
  height: auto;
  filter: drop-shadow(0 3px 8px rgba(13,42,80,0.16));
  transition: transform 0.3s ease;
}
.ads-logo-float--roblox .ads-logo { width: 53%; max-width: 88px; }
.ads-logo-float--python .ads-logo { width: 85%; max-width: 68px; }
.about-dir-card:hover .ads-logo { transform: scale(1.045); }

/* ── Design card: three independent real assets (easel / brush / palette) ── */
.about-dir-card__scene--design {
  position: relative;
  aspect-ratio: 160 / 96;
}
.ads-design-easel,
.ads-design-palette,
.ads-design-brush {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  filter: drop-shadow(0 3px 8px rgba(13,42,80,0.14));
  transition: transform 0.3s ease;
}
.ads-design-easel {
  left: 4%;
  top: 10%;
  width: 40%;
}
.ads-design-palette {
  right: 4%;
  top: 20%;
  width: 38%;
}
.ads-design-brush {
  left: 32%;
  top: 0%;
  width: 32%;
}
.about-dir-card:hover .ads-design-easel,
.about-dir-card:hover .ads-design-palette { transform: scale(1.03); }

/* ── Results section: calm route from idea to finished work ── */
.about-results {
  padding: 96px 0;
  background: var(--clr-bg-alt);
}
.about-results__subtitle {
  font-size: 17px;
  color: var(--clr-muted);
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  line-height: 1.6;
}
.about-results-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 56px auto 0;
  padding-top: 34px;
}
.about-results-path__line {
  position: absolute;
  top: 7px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(78,201,20,0.4) 0%,
    rgba(34,211,238,0.45) 50%,
    rgba(78,201,20,0.22) 100%);
  border-radius: 2px;
  z-index: 0;
  overflow: visible;
}
.about-results-path__line::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 6px rgba(34,211,238,0.55);
  opacity: 0;
}
@keyframes arp-signal {
  0%   { left: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .about-results-path__line::before { animation: arp-signal 5s ease-in-out infinite; }
}

.about-results-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.about-results-stage__node {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(78,201,20,0.5);
  box-shadow: 0 0 0 5px var(--clr-bg-alt);
  margin-bottom: 24px;
}
.about-results-stage__scene {
  width: 100%;
  max-width: 140px;
  margin-bottom: 18px;
}
.about-results-stage__scene svg { width: 100%; height: auto; overflow: visible; }
.about-results-stage__title {
  font-size: 18px; font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.about-results-stage__text {
  font-size: 14.5px; color: var(--clr-muted); line-height: 1.6;
  max-width: 230px;
}

/* ── Stage 3: preview levitation + completion pulse ── */
.ars-preview { transform-box: fill-box; transform-origin: center; }
.ars-marker-badge { transform-box: fill-box; transform-origin: center; }
@keyframes ars-preview-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes ars-badge-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.22); opacity: 0.75; }
}
@media (prefers-reduced-motion: no-preference) {
  .ars-preview { animation: ars-preview-float 7s ease-in-out infinite; }
  .ars-marker-badge { animation: ars-badge-pulse 3s ease-in-out infinite; }
}

/* ── For Parents section: calm, trustworthy, low on game-like decor ── */
.about-parents {
  padding: 96px 0;
  background: #fff;
}
.about-parents__layout {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 64px;
  align-items: center;
}
.about-parents__title {
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 800;
  color: var(--clr-dark);
  letter-spacing: -0.02em;
  line-height: 1.28;
  margin-bottom: 14px;
}
.about-parents__text {
  font-size: 15.5px;
  color: var(--clr-muted);
  line-height: 1.72;
  max-width: 420px;
}

.about-parents__panels {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 46px;
}
.about-parents__panels::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px; left: 15px;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(13,42,80,0.16) 0%,
    rgba(34,211,238,0.38) 50%,
    rgba(78,201,20,0.18) 100%);
  border-radius: 2px;
  z-index: 0;
}
.about-parents__panels::after {
  content: '';
  position: absolute;
  left: 15px; top: 0;
  width: 8px; height: 8px;
  margin-left: -3px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 6px rgba(34,211,238,0.5);
  opacity: 0;
}
@keyframes apr-signal-down {
  0%   { top: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .about-parents__panels::after { animation: apr-signal-down 5.5s ease-in-out infinite; }
}

.about-parents__panel {
  position: relative;
  z-index: 1;
  background: var(--clr-bg-alt);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.about-parents__panel::before {
  content: '';
  position: absolute;
  left: -37px; top: 22px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(34,211,238,0.45);
  box-shadow: 0 0 0 4px #fff;
}
.about-parents__panel-index {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em;
  color: #22d3ee;
  margin-bottom: 6px;
}
.about-parents__panel-title {
  font-size: 16px; font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 6px;
}
.about-parents__panel-text {
  font-size: 14px; color: var(--clr-muted); line-height: 1.55;
}

@keyframes apr-node-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.7; }
}
@media (prefers-reduced-motion: no-preference) {
  .about-parents__panel--2::before { animation: apr-node-pulse 3s ease-in-out infinite; }
}

/* ── About CTA section ── */
.about-cta-section {
  padding: 100px 0;
  background: linear-gradient(140deg, #0b1929 0%, #0d2a50 100%);
  text-align: center;
  position: relative; overflow: hidden;
}
.about-cta-section::before {
  content: '';
  position: absolute; bottom: -15%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 420px;
  background: radial-gradient(ellipse, rgba(78,201,20,0.09) 0%, transparent 70%);
  pointer-events: none;
}
/* Subtle CTA decoration dots */
.about-cta-section::after {
  content: '';
  position: absolute; top: 20px; right: 10%;
  width: 300px; height: 300px;
  background: radial-gradient(ellipse, rgba(34,211,238,0.05) 0%, transparent 70%);
  pointer-events: none;
}
/* "First step" scene: start-node fanning out to four tiny direction marks, strictly behind the text/form */
.about-cta-scene {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 86%);
  z-index: 0;
  pointer-events: none;
}
.about-cta-scene svg { width: 100%; height: auto; overflow: visible; display: block; }
@media (prefers-reduced-motion: reduce) {
  .acs-anim-layer { display: none; }
}

/* ================================================================
   Theme: Video (.theme-video)
   ================================================================ */

.theme-video {
  --vd-magenta:  #E8097A;
  --vd-pink:     #FF4D9E;
  --vd-rose:     #FF1A78;
  --vd-purple:   #9B4DE0;
  --vd-lavender: #C084FC;
  --vd-plum:     #3B0764;
}

/* ── Hero ── */
.theme-video .course-hero {
  background: linear-gradient(140deg, #12000E 0%, #1E0519 55%, #0E0028 100%);
}
.theme-video .course-hero::before {
  background: radial-gradient(circle at 30% 50%, rgba(232,9,122,0.13) 0%, transparent 65%);
}
.theme-video .course-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 72% 28%, rgba(155,77,224,0.09) 0%, transparent 55%);
  pointer-events: none;
}
.theme-video .hero__badge {
  background: rgba(232,9,122,0.14);
  border-color: rgba(232,9,122,0.40);
  color: rgba(255,168,210,0.90);
}
.theme-video .course-hero__title   { color: #fff; }
.theme-video .course-hero__subtitle { color: rgba(255,220,238,0.76); }

/* ── Hero SVG ── */
.video-hero-scene {
  width: 100%;
  height: auto;
  max-height: 340px;
  display: block;
  overflow: visible;
}
@media (max-width: 900px) {
  .video-hero-scene { max-height: 260px; }
}
@media (max-width: 480px) {
  .video-hero-scene { max-height: 200px; }
}

/* ── Hero SVG animations ── */
@media (prefers-reduced-motion: no-preference) {
  .vd-bg-a, .vd-bg-b, .vd-bg-c,
  .vd-card-drift, .vd-clip-float,
  .vd-playhead, .vd-signal-a, .vd-signal-b,
  .vd-wa, .vd-wb {
    transform-box: fill-box;
    transform-origin: center;
  }

  @keyframes vd-drift-a {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(6px, -10px) scale(1.04); }
    66%  { transform: translate(-5px, 8px) scale(0.97); }
    100% { transform: translate(0, 0) scale(1); }
  }
  @keyframes vd-drift-b {
    0%   { transform: translate(0, 0) scale(1); }
    40%  { transform: translate(-8px, 6px) scale(1.06); }
    80%  { transform: translate(5px, -8px) scale(0.96); }
    100% { transform: translate(0, 0) scale(1); }
  }
  @keyframes vd-card-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-9px); }
  }
  @keyframes vd-clip-bob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-3px); }
  }
  @keyframes vd-playhead-sweep {
    0%   { transform: translateX(-38px); }
    100% { transform: translateX(38px); }
  }
  @keyframes vd-wave-a {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(1.70); }
  }
  @keyframes vd-wave-b {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(0.42); }
  }
  @keyframes vd-signal-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.30; transform: scale(0.60); }
  }

  .vd-bg-a { animation: vd-drift-a 13s ease-in-out infinite; }
  .vd-bg-b { animation: vd-drift-b 11s ease-in-out infinite 1.5s; }
  .vd-bg-c { animation: vd-drift-a 16s ease-in-out infinite 3s; }

  .vd-card-drift  { animation: vd-card-float 7s ease-in-out infinite; }
  .vd-clip-float  { animation: vd-clip-bob 6s ease-in-out infinite 1.2s; }
  .vd-playhead    { animation: vd-playhead-sweep 5s ease-in-out infinite alternate; }

  .vd-wa { animation: vd-wave-a 2.8s ease-in-out infinite; }
  .vd-wb { animation: vd-wave-b 2.4s ease-in-out infinite 0.6s; }

  .vd-signal-a { animation: vd-signal-pulse 2.5s ease-in-out infinite; }
  .vd-signal-b { animation: vd-signal-pulse 3.0s ease-in-out infinite 0.8s; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-bg-a, .vd-bg-b, .vd-bg-c,
  .vd-card-drift, .vd-clip-float, .vd-playhead,
  .vd-wa, .vd-wb, .vd-signal-a, .vd-signal-b {
    animation: none !important;
  }
}

/* ── Alt sections ── */
.theme-video .course-section--alt {
  background: #FFF5FA;
}

/* ── Who-for cards ── */
.theme-video .who-for-card {
  border-color: rgba(232,9,122,0.13);
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform 0.28s ease, opacity 0.50s ease, translate 0.50s ease;
  overflow: hidden;
}
.theme-video .who-for-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 0 0 var(--radius) var(--radius);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.theme-video .who-for-card:hover {
  border-color: rgba(232,9,122,0.34);
  box-shadow: 0 6px 24px rgba(232,9,122,0.09);
  transform: translateY(-5px);
}
.theme-video .who-for-card:hover::before { opacity: 1; }
.theme-video .who-for-card__icon {
  background: rgba(232,9,122,0.09);
  color: var(--vd-magenta);
  border: 1px solid rgba(232,9,122,0.20);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.theme-video .who-for-card:hover .who-for-card__icon {
  background: rgba(232,9,122,0.17);
  border-color: rgba(232,9,122,0.40);
}

/* Per-card accent colors */
.theme-video .who-for-card:nth-child(1)::before { background: linear-gradient(90deg, #E8097A, #FF4D9E); }
.theme-video .who-for-card:nth-child(2)::before { background: linear-gradient(90deg, #9B4DE0, #C084FC); }
.theme-video .who-for-card:nth-child(3)::before { background: linear-gradient(90deg, #FF1A78, #9B4DE0); }
.theme-video .who-for-card:nth-child(4)::before { background: linear-gradient(90deg, #C084FC, #E8097A); }
.theme-video .who-for-card:nth-child(1) .who-for-card__icon { background: rgba(232,9,122,0.10); color: #E8097A; border-color: rgba(232,9,122,0.25); }
.theme-video .who-for-card:nth-child(2) .who-for-card__icon { background: rgba(155,77,224,0.09); color: #9B4DE0; border-color: rgba(155,77,224,0.22); }
.theme-video .who-for-card:nth-child(3) .who-for-card__icon { background: rgba(255,77,158,0.09); color: #FF4D9E; border-color: rgba(255,77,158,0.22); }
.theme-video .who-for-card:nth-child(4) .who-for-card__icon { background: rgba(192,132,252,0.09); color: #C084FC; border-color: rgba(192,132,252,0.22); }

/* ── Skill items (timeline-clip style) ── */
.theme-video .skill-item {
  border: 1px solid rgba(232,9,122,0.10);
  border-left: 3px solid rgba(232,9,122,0.32);
  border-radius: var(--radius);
  padding: 14px 18px;
  background: #fff;
  position: relative;
  transition: border-left-color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.28s ease,
              opacity 0.50s ease, translate 0.50s ease;
}
.theme-video .skill-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(232,9,122,0.04), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.theme-video .skill-item:hover {
  border-left-color: var(--vd-magenta);
  border-color: rgba(232,9,122,0.22);
  box-shadow: 0 4px 18px rgba(232,9,122,0.08);
  transform: translateX(3px);
}
.theme-video .skill-item:hover::after { opacity: 1; }
.theme-video .skill-item__dot {
  background: var(--vd-magenta);
  width: 10px; height: 10px;
  flex-shrink: 0;
}

/* Per-skill border color */
.theme-video .skill-item:nth-child(1) { border-left-color: rgba(232,9,122,0.60); }
.theme-video .skill-item:nth-child(2) { border-left-color: rgba(155,77,224,0.55); }
.theme-video .skill-item:nth-child(3) { border-left-color: rgba(255,77,158,0.55); }
.theme-video .skill-item:nth-child(4) { border-left-color: rgba(192,132,252,0.55); }
.theme-video .skill-item:nth-child(5) { border-left-color: rgba(232,9,122,0.60); }
.theme-video .skill-item:nth-child(6) { border-left-color: rgba(155,77,224,0.55); }
.theme-video .skill-item:nth-child(1) .skill-item__dot { background: #E8097A; }
.theme-video .skill-item:nth-child(2) .skill-item__dot { background: #9B4DE0; }
.theme-video .skill-item:nth-child(3) .skill-item__dot { background: #FF4D9E; }
.theme-video .skill-item:nth-child(4) .skill-item__dot { background: #C084FC; }
.theme-video .skill-item:nth-child(5) .skill-item__dot { background: #E8097A; }
.theme-video .skill-item:nth-child(6) .skill-item__dot { background: #9B4DE0; }

/* ── Project cards ── */
.theme-video .project-card__num { color: var(--vd-magenta); }
.theme-video .projects-grid .project-card {
  border-color: rgba(232,9,122,0.12);
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform 0.28s ease, opacity 0.50s ease, translate 0.50s ease;
}
.theme-video .projects-grid .project-card::before {
  content: '';
  position: absolute;
  inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(232,9,122,0.04), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.theme-video .projects-grid .project-card:hover {
  border-color: rgba(232,9,122,0.36);
  box-shadow: 0 10px 36px rgba(232,9,122,0.11);
  transform: translateY(-5px);
}
.theme-video .projects-grid .project-card:hover::before { opacity: 1; }

/* Project photo areas: stylized video preview */
.theme-video .project-card__photo { border-radius: 10px; overflow: hidden; }
.theme-video .vd-proj-ph {
  background: linear-gradient(155deg, #1E0018 0%, #140012 55%, #0E0024 100%);
  border: 1px solid rgba(232,9,122,0.22);
  border-radius: 10px;
  color: rgba(232,9,122,0.38);
  font-size: 12px;
  position: relative;
  min-height: 120px;
}
.theme-video .vd-proj-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 18%, rgba(232,9,122,0.05) 18%, rgba(232,9,122,0.05) 20%, transparent 20%),
    linear-gradient(90deg, transparent 40%, rgba(155,77,224,0.04) 40%, rgba(155,77,224,0.04) 42%, transparent 42%),
    linear-gradient(90deg, transparent 62%, rgba(232,9,122,0.04) 62%, rgba(232,9,122,0.04) 64%, transparent 64%),
    linear-gradient(90deg, transparent 80%, rgba(192,132,252,0.04) 80%, rgba(192,132,252,0.04) 82%, transparent 82%);
  pointer-events: none;
  border-radius: 10px;
}
.theme-video .vd-proj-ph::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(to top, rgba(0,0,0,0.32), transparent);
  border-radius: 0 0 10px 10px;
  pointer-events: none;
}

/* ── Project preview mini-scenes: sizing + hover ── */
.theme-video .vd-proj-ph {
  padding: 0;
  display: flex;
  align-items: stretch;
  transition: box-shadow 0.3s ease;
}
.theme-video .project-card:hover .vd-proj-ph {
  box-shadow: 0 0 26px rgba(232,9,122,0.20);
}
.vd-card-scene {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 0;
  transition: filter 0.3s ease;
}
.theme-video .project-card:hover .vd-card-scene {
  filter: brightness(1.06) saturate(1.08);
}

/* ── Project preview mini-scenes: idle animations ── */
@media (prefers-reduced-motion: no-preference) {
  .vd-p1-play, .vd-p1-eqa, .vd-p1-eqb, .vd-p1-float, .vd-p1-head,
  .vd-p2-rec, .vd-p2-lower, .vd-p2-va, .vd-p2-vb, .vd-p2-active,
  .vd-p3-play-glow, .vd-p3-badge, .vd-p3-clip-pulse, .vd-p3-head, .vd-p3-sweep {
    transform-box: fill-box;
    transform-origin: center;
  }
  .vd-p1-eqa, .vd-p1-eqb, .vd-p2-va, .vd-p2-vb {
    transform-origin: center bottom;
  }

  @keyframes vd-p1-play-kf {
    0%, 100% { transform: scale(1);   opacity: 0.88; }
    50%       { transform: scale(1.08); opacity: 1; }
  }
  @keyframes vd-p1-eqa-kf {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(1.35); }
  }
  @keyframes vd-p1-eqb-kf {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(0.7); }
  }
  @keyframes vd-p1-float-kf {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-3px); }
  }
  @keyframes vd-p1-head-kf {
    0%   { transform: translateX(0); }
    100% { transform: translateX(74px); }
  }

  .vd-p1-play  { animation: vd-p1-play-kf 2.6s ease-in-out infinite; }
  .vd-p1-eqa   { animation: vd-p1-eqa-kf 1.1s ease-in-out infinite; }
  .vd-p1-eqb   { animation: vd-p1-eqb-kf 1.3s ease-in-out infinite 0.2s; }
  .vd-p1-float { animation: vd-p1-float-kf 4.5s ease-in-out infinite; }
  .vd-p1-head  { animation: vd-p1-head-kf 4s ease-in-out infinite alternate; }

  @keyframes vd-p2-rec-kf {
    0%, 80%, 100% { opacity: 1; }
    90%            { opacity: 0.25; }
  }
  @keyframes vd-p2-lower-kf {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(3px); }
  }
  @keyframes vd-p2-va-kf {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(1.4); }
  }
  @keyframes vd-p2-vb-kf {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(0.65); }
  }
  @keyframes vd-p2-active-kf {
    0%, 100% { transform: scale(1);    opacity: 0.9; }
    50%       { transform: scale(1.04); opacity: 1; }
  }

  .vd-p2-rec    { animation: vd-p2-rec-kf 2.4s ease-in-out infinite; }
  .vd-p2-lower  { animation: vd-p2-lower-kf 5s ease-in-out infinite; }
  .vd-p2-va     { animation: vd-p2-va-kf 1.15s ease-in-out infinite; }
  .vd-p2-vb     { animation: vd-p2-vb-kf 1.35s ease-in-out infinite 0.2s; }
  .vd-p2-active { animation: vd-p2-active-kf 2.6s ease-in-out infinite; }

  @keyframes vd-p3-play-glow-kf {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 0.9; transform: scale(1.08); }
  }
  @keyframes vd-p3-badge-kf {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.05); }
  }
  @keyframes vd-p3-clip-pulse-kf {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.035); }
  }
  @keyframes vd-p3-head-kf {
    0%   { transform: translateX(0); }
    100% { transform: translateX(78px); }
  }
  @keyframes vd-p3-sweep-kf {
    0%, 8%   { transform: translateX(0);     opacity: 0; }
    22%      { opacity: 0.9; }
    45%      { opacity: 0.9; }
    60%, 100% { transform: translateX(130px); opacity: 0; }
  }

  .vd-p3-play-glow  { animation: vd-p3-play-glow-kf 3s ease-in-out infinite; }
  .vd-p3-badge      { animation: vd-p3-badge-kf 3.4s ease-in-out infinite; }
  .vd-p3-clip-pulse { animation: vd-p3-clip-pulse-kf 3s ease-in-out infinite; }
  .vd-p3-head       { animation: vd-p3-head-kf 4.5s ease-in-out infinite alternate; }
  .vd-p3-sweep      { animation: vd-p3-sweep-kf 6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-p1-play, .vd-p1-eqa, .vd-p1-eqb, .vd-p1-float, .vd-p1-head,
  .vd-p2-rec, .vd-p2-lower, .vd-p2-va, .vd-p2-vb, .vd-p2-active,
  .vd-p3-play-glow, .vd-p3-badge, .vd-p3-clip-pulse, .vd-p3-head, .vd-p3-sweep {
    animation: none;
  }
}

/* ── Format items ── */
.theme-video .format-item__icon {
  background: linear-gradient(135deg, #1E0519 0%, #120010 100%);
  color: var(--vd-magenta);
}
.theme-video .format-item__label { color: rgba(232,9,122,0.70); }
@media (prefers-reduced-motion: no-preference) {
  .theme-video .format-item:hover {
    box-shadow: 0 10px 32px rgba(232,9,122,0.11);
  }
}

/* Per-item icon color */
.theme-video .format-item:nth-child(1) .format-item__icon { color: var(--vd-magenta); }
.theme-video .format-item:nth-child(2) .format-item__icon { color: var(--vd-lavender); }
.theme-video .format-item:nth-child(3) .format-item__icon { color: var(--vd-purple); }
.theme-video .format-item:nth-child(4) .format-item__icon { color: var(--vd-pink); }
.theme-video .format-item:nth-child(5) .format-item__icon { color: var(--vd-magenta); }
.theme-video .format-item:nth-child(6) .format-item__icon { color: var(--vd-lavender); }

/* ── FAQ ── */
.theme-video .faq-item__question:hover { color: var(--vd-magenta); }
.theme-video .faq-item.open .faq-item__question { color: var(--vd-magenta); }
.theme-video .faq-item.open .faq-item__icon {
  background: var(--vd-magenta);
  border-color: var(--vd-magenta);
}

/* ── CTA section ── */
.theme-video .cta-section {
  background: linear-gradient(140deg, #12000E 0%, #1E0519 55%, #0E0028 100%);
}
.theme-video .cta-section::before {
  background: radial-gradient(ellipse, rgba(232,9,122,0.11) 0%, transparent 68%);
}

/* ── Scroll reveal: cards ── */
@media (prefers-reduced-motion: no-preference) {
  .theme-video .who-for-card,
  .theme-video .skill-item,
  .theme-video .project-card {
    opacity: 0;
    translate: 0 22px;
  }
  .theme-video .who-for-card.vd-visible,
  .theme-video .skill-item.vd-visible,
  .theme-video .project-card.vd-visible {
    opacity: 1;
    translate: 0 0;
  }
}

/* ── Grid: column counts (no orphaned rows) ── */
@media (min-width: 700px) {
  .theme-video .who-for-grid    { grid-template-columns: repeat(2, 1fr); }
  .theme-video .skills-grid     { grid-template-columns: repeat(2, 1fr); }
  .theme-video .projects-grid   { grid-template-columns: repeat(3, 1fr); }
  .theme-video .format-grid     { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .theme-video .who-for-grid { grid-template-columns: repeat(4, 1fr); }
  .theme-video .skills-grid  { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .theme-video .who-for-grid,
  .theme-video .skills-grid,
  .theme-video .format-grid,
  .theme-video .projects-grid { grid-template-columns: 1fr; }
  .theme-video .skill-item:hover { transform: none; }
  .theme-video .who-for-card:hover { transform: none; }
  .theme-video .projects-grid .project-card:hover { transform: none; }
}
@media (max-width: 480px) {
  .theme-video .course-hero::after { display: none; }
}
.about-cta-section__title {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 800; color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.03em; position: relative;
}
.about-cta-section__subtitle {
  font-size: 17px; color: rgba(255,255,255,0.56);
  margin-bottom: 40px; position: relative;
}
.about-cta-section > .container { position: relative; z-index: 1; }

/* ── Mobile breakpoints ── */
@media (max-width: 960px) {
  .about-hero { min-height: auto; padding: calc(var(--header-h) + 24px) 0 36px; }
  .about-hero__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text text"
      "left right";
    gap: 8px 20px;
  }
  .about-hero__text { text-align: center; max-width: 100%; margin-bottom: 8px; }
  .about-hero__actions { justify-content: center; }
  .about-hero__scene { max-width: 130px; margin: 0 auto; }
  .about-hero__subtitle { max-width: 100%; margin: 0 auto 22px; }
  .about-dirs-grid { grid-template-columns: 1fr; }
  .about-dirs  { padding: 64px 0; }
  .about-results { padding: 64px 0; }
  .about-cta-section { padding: 72px 0; }

  /* Quantum section: drop the connecting-line composition, stack as a clear vertical flow */
  .about-quantum { padding: 64px 0; }
  .about-quantum__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .about-quantum__lines { display: none; }
  .about-quantum__center,
  .about-quantum__panel {
    width: 100%;
    max-width: 440px;
  }
  .about-quantum__panel--result { animation: none; }

  /* Format section: path becomes a vertical flow, connector runs down the left of each scene */
  .about-format { padding: 64px 0; }
  .about-format-path {
    flex-direction: column;
    align-items: stretch;
    gap: 44px;
    margin-top: 44px;
  }
  .about-format-path::before {
    top: 0;
    bottom: 0;
    left: 55px;
    right: auto;
    width: 1px;
    height: auto;
    background-image: repeating-linear-gradient(180deg, rgba(13,42,80,0.16) 0 6px, transparent 6px 13px);
  }
  .about-format-step {
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 20px;
    row-gap: 6px;
    align-items: start;
    text-align: left;
  }
  .about-format-step__scene {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 110px; max-width: 110px; margin-bottom: 0;
  }
  .about-format-step__title { grid-column: 2; grid-row: 1; }
  .about-format-step__text { grid-column: 2; grid-row: 2; max-width: none; }

  /* Directions grid: card padding stays comfortable on tablet-width single/2-col layout */
  .about-dir-card { padding: 20px 20px 22px; }

  /* Results path: drop the connecting line, stack the three stages vertically */
  .about-results-path {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 0;
    margin-top: 40px;
  }
  .about-results-path__line { display: none; }
  .about-results-stage__node { margin-bottom: 18px; }

  /* Parents section: intro stacks above the panel list */
  .about-parents { padding: 64px 0; }
  .about-parents__layout { grid-template-columns: 1fr; gap: 36px; }
  .about-parents__text { max-width: 100%; }

  /* CTA scene: secondary decor hidden so the form gets full breathing room */
  .about-cta-scene { display: none; }
}
@media (max-width: 540px) {
  .about-hero__actions { flex-direction: column; align-items: stretch; }
  .about-hero__actions .btn { justify-content: center; }
  .about-hero__scene { max-width: 100px; }
  .about-quantum__center { padding: 28px 24px; }
  .about-quantum__panel { padding: 16px; }
  .about-parents__panels { padding-left: 38px; gap: 20px; }
  .about-parents__panel { padding: 18px 18px; }
  .about-parents__panel::before { left: -30px; }
  .about-parents__panels::before { left: 12px; }
  .about-parents__panels::after { left: 12px; }
}
@media (max-width: 375px) {
  .about-format-path::before { display: none; }
  .about-format-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .about-format-step__scene {
    grid-column: auto; grid-row: auto;
    width: 100%; max-width: 160px;
  }
  .about-format-step__title,
  .about-format-step__text { grid-column: auto; grid-row: auto; }
}

/* ── Grid centering: Skills «Чому навчиться» 4+2 → centre items 5 & 6 ──
   4 cols fit from viewport 1124px (container 1076px = 4×260 + 3×12).
   Below this auto-fit gives 3 cols (3+3), which already looks balanced. */
@media (min-width: 1124px) {
  .theme-prog .skills-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .theme-prog .skills-grid .skill-item:nth-child(5) { grid-column: 2; }
  .theme-prog .skills-grid .skill-item:nth-child(6) { grid-column: 3; }
}

/* ── FAQ: cyan instead of green ── */
.theme-prog .faq-item__question:hover { color: #06B6D4; }
.theme-prog .faq-item__question:focus-visible { color: #06B6D4; }
.theme-prog .faq-item__question:hover .faq-item__icon {
  border-color: rgba(6, 182, 212, 0.45);
  color: #06B6D4;
}
.theme-prog .faq-item.open .faq-item__question { color: #06B6D4; }
.theme-prog .faq-item.open .faq-item__icon {
  background: #06B6D4;
  border-color: #06B6D4;
  color: #fff;
}

/* ── Who-for section deco ── */
#prog-who-sec { position: relative; overflow: hidden; }
#prog-who-sec > .container,
#prog-skills-sec > .container { position: relative; z-index: 1; }

.prog-who-deco,
.prog-skills-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.prog-who-scene,
.prog-skills-scene { width: 100%; height: 100%; display: block; }

/* Node pulse (shared) — stronger amplitude */
@keyframes prog-sec-node-pulse {
  0%, 100% { opacity: 0.38; transform: scale(1); }
  50%       { opacity: 0.75; transform: scale(1.65); }
}
@keyframes prog-tag-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(3px, -3px); }
}
@keyframes prog-tag-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-3px, 3px); }
}
@keyframes prog-sym-drift {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(3px, -2px); }
  66%       { transform: translate(-2px, 3px); }
}
@keyframes prog-code-card-drift {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-2px, 2px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Who-for nodes — faster (2.2–2.9s) */
  .prog-who-node { transform-box: fill-box; transform-origin: center; }
  .prog-who-node--1 { animation: prog-sec-node-pulse 2.4s ease-in-out infinite; }
  .prog-who-node--2 { animation: prog-sec-node-pulse 2.2s ease-in-out infinite 0.9s; }
  .prog-who-node--3 { animation: prog-sec-node-pulse 2.8s ease-in-out infinite 0.5s; }
  .prog-who-node--4 { animation: prog-sec-node-pulse 2.5s ease-in-out infinite 1.6s; }
  .prog-who-node--5 { animation: prog-sec-node-pulse 2.3s ease-in-out infinite 2.1s; }
  .prog-who-node--6 { animation: prog-sec-node-pulse 2.7s ease-in-out infinite 0.8s; }
  .prog-who-node--7 { animation: prog-sec-node-pulse 2.6s ease-in-out infinite 1.4s; }
  .prog-who-node--8 { animation: prog-sec-node-pulse 2.9s ease-in-out infinite 0.3s; }
  /* Who-for tags drift (7–9s) */
  .prog-who-tag { transform-box: fill-box; transform-origin: center; }
  .prog-who-tag--1 { animation: prog-tag-drift-a 8s ease-in-out infinite; }
  .prog-who-tag--2 { animation: prog-tag-drift-b 9s ease-in-out infinite 1.5s; }
  /* Who-for code card drift */
  .prog-who-code-card { transform-box: fill-box; transform-origin: center; animation: prog-code-card-drift 10s ease-in-out infinite 3s; }
  /* Skills nodes — faster (2.2–3.0s) */
  .prog-skills-node { transform-box: fill-box; transform-origin: center; }
  .prog-skills-node--1 { animation: prog-sec-node-pulse 2.5s ease-in-out infinite; }
  .prog-skills-node--2 { animation: prog-sec-node-pulse 2.2s ease-in-out infinite 1.3s; }
  .prog-skills-node--3 { animation: prog-sec-node-pulse 2.8s ease-in-out infinite 0.7s; }
  .prog-skills-node--4 { animation: prog-sec-node-pulse 2.4s ease-in-out infinite 1.9s; }
  .prog-skills-node--5 { animation: prog-sec-node-pulse 3.0s ease-in-out infinite 0.4s; }
  /* Skills code symbols drift (7–11s) */
  .prog-skills-sym { transform-box: fill-box; transform-origin: center; }
  .prog-skills-sym--1 { animation: prog-sym-drift 9s ease-in-out infinite; }
  .prog-skills-sym--2 { animation: prog-sym-drift 11s ease-in-out infinite 2.5s; }
  .prog-skills-sym--3 { animation: prog-sym-drift 8s ease-in-out infinite 1.2s; }
  .prog-skills-sym--4 { animation: prog-sym-drift 10s ease-in-out infinite 3.5s; }
}

@media (prefers-reduced-motion: reduce) {
  .prog-who-signal,
  .prog-skills-signal { display: none; }
}

/* Mobile: hide deco entirely */
@media (max-width: 600px) {
  .prog-who-deco,
  .prog-skills-deco { display: none; }
}

/* ─────────────────────────────────────────
   Projects section deco
───────────────────────────────────────── */
#prog-proj-sec { position: relative; overflow: hidden; }
#prog-proj-sec > .container { position: relative; z-index: 1; }
.prog-proj-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.prog-proj-scene { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .prog-proj-node { transform-box: fill-box; transform-origin: center; }
  .prog-proj-node--1 { animation: prog-sec-node-pulse 2.6s ease-in-out infinite; }
  .prog-proj-node--2 { animation: prog-sec-node-pulse 2.3s ease-in-out infinite 0.8s; }
  .prog-proj-node--3 { animation: prog-sec-node-pulse 2.8s ease-in-out infinite 0.3s; }
  .prog-proj-node--4 { animation: prog-sec-node-pulse 2.4s ease-in-out infinite 1.4s; }
  .prog-proj-node--5 { animation: prog-sec-node-pulse 2.7s ease-in-out infinite 1.0s; }
  .prog-proj-label { transform-box: fill-box; transform-origin: center; }
  .prog-proj-label--1 { animation: prog-tag-drift-a 9s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) { .prog-proj-signal { display: none; } }
@media (max-width: 600px) { .prog-proj-deco { display: none; } }

/* ─────────────────────────────────────────
   Format section deco
───────────────────────────────────────── */
#prog-fmt-sec { position: relative; overflow: hidden; }
#prog-fmt-sec > .container { position: relative; z-index: 1; }
.prog-fmt-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.prog-fmt-scene { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .prog-fmt-node { transform-box: fill-box; transform-origin: center; }
  .prog-fmt-node--1 { animation: prog-sec-node-pulse 2.5s ease-in-out infinite; }
  .prog-fmt-node--2 { animation: prog-sec-node-pulse 2.2s ease-in-out infinite 0.9s; }
  .prog-fmt-node--3 { animation: prog-sec-node-pulse 2.8s ease-in-out infinite 0.4s; }
  .prog-fmt-node--4 { animation: prog-sec-node-pulse 2.4s ease-in-out infinite 1.6s; }
  .prog-fmt-node--5 { animation: prog-sec-node-pulse 2.6s ease-in-out infinite 2.1s; }
  .prog-fmt-node--6 { animation: prog-sec-node-pulse 3.0s ease-in-out infinite 0.7s; }
  .prog-fmt-label { transform-box: fill-box; transform-origin: center; }
  .prog-fmt-label--1 { animation: prog-tag-drift-a 10s ease-in-out infinite 2s; }
}

@media (prefers-reduced-motion: reduce) { .prog-fmt-signal { display: none; } }
@media (max-width: 600px) { .prog-fmt-deco { display: none; } }

/* ══════════════════════════════════════════════
   Dark navy theme — skills / projects / format
   (overrides light defaults for these 3 sections)
══════════════════════════════════════════════ */

/* Section backgrounds */
.theme-prog #prog-skills-sec { background: #071827; }
.theme-prog #prog-proj-sec   { background: #05111f; }
.theme-prog #prog-fmt-sec    { background: #0a2136; }

/* Section-header text → light on dark */
.theme-prog #prog-skills-sec .section-title,
.theme-prog #prog-proj-sec   .section-title,
.theme-prog #prog-fmt-sec    .section-title { color: #DFF2FA; }

.theme-prog #prog-skills-sec .section-subtitle,
.theme-prog #prog-proj-sec   .section-subtitle,
.theme-prog #prog-fmt-sec    .section-subtitle { color: rgba(183, 224, 240, 0.60); }

/* ── Skill items → dark cards ── */
.theme-prog .skills-grid .skill-item {
  background: #0a2136;
  border: 1px solid rgba(6, 182, 212, 0.10);
  border-left: 2px solid rgba(6, 182, 212, 0.40);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.theme-prog .skills-grid .skill-item:hover {
  background: #0d2b45;
  border-left-color: rgba(6, 182, 212, 0.72);
  box-shadow: 0 4px 22px rgba(6, 182, 212, 0.16);
}
.theme-prog .skill-item__text { color: rgba(210, 238, 250, 0.82); }

/* Skills section </> pseudo stronger on dark bg */
#prog-skills-sec::before { opacity: 0.09; }

/* ── Project cards → dark ── */
.theme-prog .projects-grid .project-card {
  background: #0a2136;
  border-color: rgba(6, 182, 212, 0.18);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.40);
}
.theme-prog .projects-grid .project-card:hover {
  background: #0d2b45;
  border-color: rgba(6, 182, 212, 0.52);
  box-shadow: 0 12px 40px rgba(6, 182, 212, 0.20);
  transform: translateY(-5px);
}
.theme-prog .project-card__num   { color: #22D3EE; }
.theme-prog .project-card__title { color: #DFF2FA; }
.theme-prog .project-card__text  { color: rgba(180, 224, 240, 0.70); }
.theme-prog .project-card .photo-placeholder,
.theme-prog .project-card .photo-placeholder--light {
  background: rgba(6, 182, 212, 0.04);
  border-color: rgba(6, 182, 212, 0.18);
  color: rgba(6, 182, 212, 0.40);
}
.theme-prog .projects-grid .project-card::before { opacity: 0.55; }
.theme-prog .projects-grid .project-card:hover::before { opacity: 0.90; }

/* ── Project preview mini-apps (cards 1-2): calculator & chat ── */
.theme-prog .project-card .pg-proj-ph {
  background: transparent;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: stretch;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  transition: box-shadow 0.3s ease;
}
.theme-prog .project-card:hover .pg-proj-ph {
  box-shadow: 0 0 26px rgba(6, 182, 212, 0.20);
}
.pg-proj-deco {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.3s ease;
}
.theme-prog .project-card:hover .pg-proj-deco {
  filter: brightness(1.06) saturate(1.1);
}

/* ── Format items → dark ── */
.theme-prog #prog-fmt-sec .format-item {
  background: #0d2b45;
  border: 1px solid rgba(6, 182, 212, 0.14);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32);
}
.theme-prog #prog-fmt-sec .format-item__label { color: rgba(6, 182, 212, 0.78); }
.theme-prog #prog-fmt-sec .format-item__value { color: #DFF2FA; }
.theme-prog #prog-fmt-sec .format-item__icon {
  background: linear-gradient(135deg, #020E1A 0%, #071827 100%);
  color: #22D3EE;
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.14);
}
@media (prefers-reduced-motion: no-preference) {
  .theme-prog #prog-fmt-sec .format-item:hover {
    box-shadow: 0 10px 32px rgba(6, 182, 212, 0.18);
    border-color: rgba(6, 182, 212, 0.30);
  }
}

/* Mobile: no side scroll, readable dark sections */
@media (max-width: 600px) {
  .theme-prog #prog-skills-sec .section-title,
  .theme-prog #prog-proj-sec   .section-title,
  .theme-prog #prog-fmt-sec    .section-title { font-size: clamp(20px, 5vw, 28px); }
}

/* ============================================================
   THEME-VIDEO — final pass: section decorations (below hero)
   ============================================================ */
.theme-video .vd-section-deco {
  pointer-events: none;
  user-select: none;
}
.theme-video .vd-who-deco,
.theme-video .vd-skills-deco,
.theme-video .vd-proj-deco {
  max-width: 480px;
  margin: 28px auto 0;
}
.theme-video .vd-fmt-deco { margin-top: 32px; }
.theme-video .vd-section-deco > svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes vd-sub-drift {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(6px); }
  }
  @keyframes vd-fmt-ph-move {
    0%   { transform: translateX(-60px); }
    100% { transform: translateX(160px); }
  }
  @keyframes vd-dot-travel {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 354; }
  }
  @keyframes vd-proj-ring-anim {
    0%, 100% { transform: scale(1);   opacity: 0.72; }
    50%       { transform: scale(1.8); opacity: 0.15; }
  }

  .theme-video .vd-sub-shift {
    animation: vd-sub-drift 4.5s ease-in-out infinite 0.8s;
  }
  .theme-video .vd-fmt-ph {
    animation: vd-fmt-ph-move 5s ease-in-out infinite alternate;
  }
  .theme-video .vd-proj-signal-line {
    animation: vd-dot-travel 4s ease-in-out infinite alternate 1.2s;
  }
  .theme-video .vd-proj-ring-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: vd-proj-ring-anim 2.4s ease-in-out infinite 0.4s;
  }
}

/* Hide secondary section decor on mobile: no overlaps, no side scroll */
@media (max-width: 768px) {
  .theme-video .vd-who-deco,
  .theme-video .vd-skills-deco,
  .theme-video .vd-proj-deco,
  .theme-video .vd-fmt-deco {
    display: none;
  }
}

/* ============================================================
   THEME-VIDEO — «Чому навчиться дитина» и «Як проходять заняття»
   переходят в палитру hero (navy/magenta/purple), а не светлые
   секции курса.
   ============================================================ */

.theme-video .vd-skills-sec,
.theme-video .vd-format-sec {
  background: linear-gradient(140deg, #12000E 0%, #1E0519 55%, #0E0028 100%);
  position: relative;
}

.theme-video .vd-skills-sec .section-title,
.theme-video .vd-format-sec .section-title { color: #fff; }
.theme-video .vd-skills-sec .section-subtitle,
.theme-video .vd-format-sec .section-subtitle { color: rgba(255,220,238,0.68); }

/* ── Skill cards: dark clip-style cards ── */
.theme-video .vd-skills-sec .skill-item {
  background: linear-gradient(155deg, #1E0519 0%, #170013 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  padding-right: 46px;
}
.theme-video .vd-skills-sec .skill-item:hover {
  background: linear-gradient(155deg, #26071F 0%, #1D0018 100%);
  box-shadow: 0 6px 26px rgba(232,9,122,0.16);
}
.theme-video .vd-skills-sec .skill-item__text { color: rgba(255,226,240,0.82); }

/* Per-card video-editing accents (frame-corner / cue-marker / mini waveform),
   cycled so neighbouring cards never repeat the same motif. */
.theme-video .vd-skills-sec .skill-item::before {
  content: '';
  position: absolute;
  top: 12px; right: 14px;
  pointer-events: none;
  opacity: 0.55;
}
.theme-video .vd-skills-sec .skill-item:nth-child(1)::before,
.theme-video .vd-skills-sec .skill-item:nth-child(4)::before {
  width: 12px; height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.theme-video .vd-skills-sec .skill-item:nth-child(1)::before { color: var(--vd-magenta); }
.theme-video .vd-skills-sec .skill-item:nth-child(4)::before { color: var(--vd-lavender); }

.theme-video .vd-skills-sec .skill-item:nth-child(2)::before,
.theme-video .vd-skills-sec .skill-item:nth-child(5)::before {
  width: 6px; height: 16px;
  background:
    radial-gradient(circle 3px at 3px 3px, currentColor 98%, transparent 100%),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 6px 6px, 2px 9px;
  background-position: top center, bottom center;
}
.theme-video .vd-skills-sec .skill-item:nth-child(2)::before { color: var(--vd-purple); }
.theme-video .vd-skills-sec .skill-item:nth-child(5)::before { color: var(--vd-magenta); }

.theme-video .vd-skills-sec .skill-item:nth-child(3)::before,
.theme-video .vd-skills-sec .skill-item:nth-child(6)::before {
  width: 18px; height: 12px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 2px 6px, 2px 11px, 2px 4px, 2px 8px;
  background-position: 0 bottom, 5px bottom, 10px bottom, 15px bottom;
}
.theme-video .vd-skills-sec .skill-item:nth-child(3)::before { color: var(--vd-pink); }
.theme-video .vd-skills-sec .skill-item:nth-child(6)::before { color: var(--vd-purple); }

/* ── Format cards: dark workflow cards ── */
.theme-video .vd-format-sec .format-item {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #1E0519 0%, #170013 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.theme-video .vd-format-sec .format-item__value { color: #fff; }
.theme-video .vd-format-sec .format-item__icon {
  box-shadow: 0 0 0 1px rgba(232,9,122,0.24);
}
@media (prefers-reduced-motion: no-preference) {
  .theme-video .vd-format-sec .format-item:hover {
    background: linear-gradient(155deg, #26071F 0%, #1D0018 100%);
  }
}

/* Per-card accents: frame-corner / subtitle-strip / cue-marker, cycled */
.theme-video .vd-format-sec .format-item::before {
  content: '';
  position: absolute;
  top: 10px; right: 12px;
  pointer-events: none;
  opacity: 0.50;
}
.theme-video .vd-format-sec .format-item:nth-child(1)::before,
.theme-video .vd-format-sec .format-item:nth-child(4)::before {
  width: 11px; height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.theme-video .vd-format-sec .format-item:nth-child(1)::before { color: var(--vd-magenta); }
.theme-video .vd-format-sec .format-item:nth-child(4)::before { color: var(--vd-pink); }

.theme-video .vd-format-sec .format-item:nth-child(2)::before,
.theme-video .vd-format-sec .format-item:nth-child(5)::before {
  width: 20px; height: 8px;
  border-radius: 3px;
  background: currentColor;
}
.theme-video .vd-format-sec .format-item:nth-child(2)::before { color: rgba(192,132,252,0.55); }
.theme-video .vd-format-sec .format-item:nth-child(5)::before { color: rgba(232,9,122,0.55); }

.theme-video .vd-format-sec .format-item:nth-child(3)::before,
.theme-video .vd-format-sec .format-item:nth-child(6)::before {
  width: 6px; height: 14px;
  background:
    radial-gradient(circle 3px at 3px 3px, currentColor 98%, transparent 100%),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 6px 6px, 2px 7px;
  background-position: top center, bottom center;
}
.theme-video .vd-format-sec .format-item:nth-child(3)::before { color: var(--vd-purple); }
.theme-video .vd-format-sec .format-item:nth-child(6)::before { color: var(--vd-lavender); }

/* Brighten the below-grid deco strips now that these two sections are dark */
.theme-video .vd-skills-deco,
.theme-video .vd-fmt-deco {
  filter: brightness(1.55) saturate(1.15);
}

/* Mobile: drop the small card-corner accents to keep dense grids clean */
@media (max-width: 480px) {
  .theme-video .vd-skills-sec .skill-item::before,
  .theme-video .vd-format-sec .format-item::before {
    display: none;
  }
}