/* ============================================================
   IBM TVET Digital Talent Accelerator — FOW Youth landing page
   Built on the Mereka Design System (colors_and_type.css).
   Brand brief overrides: Strategy Teal #009B8D (dominant),
   Momentum Gold #F5A623 (energy accent), IBM Blue #006699 (trust).
   ============================================================ */
@import url('colors_and_type.css');

:root {
  /* Brief-exact brand colours, layered over Mereka neutrals/type/spacing */
  --dta-teal:      #009B8D;
  --dta-teal-700:  #00786d;
  --dta-teal-50:   #e4f4f2;
  --dta-teal-100:  #c3e8e3;
  --dta-gold:      #F5A623;
  --dta-gold-600:  #d98b08;
  --dta-gold-50:   #fdf2dd;
  --dta-gold-100:  #fbe4b8;
  --dta-blue:      #006699;
  --dta-blue-50:   #e3eff5;
  --dta-ink:       #1a1623;

  /* Active accent (tweakable: teal-led <-> gold-led) */
  --dta-accent:      var(--dta-teal);
  --dta-accent-700:  var(--dta-teal-700);
  --dta-accent-50:   var(--dta-teal-50);
  --dta-accent-100:  var(--dta-teal-100);

  /* Button corner radius (tweakable: pill <-> rounded) */
  --dta-btn-radius: 999px;

  /* ---- Semantic surfaces / shape / type (driven by Design direction) ---- */
  --dta-surface:      #ffffff;   /* page base + light sections */
  --dta-surface-alt:  #f5f6f7;   /* alternating sections */
  --dta-surface-dark: #1a1623;   /* dramatic dark sections */
  --dta-card-bg:      #ffffff;
  --dta-card-radius:  20px;
  --dta-card-border:  #e3e0e7;
  --dta-well-radius:  16px;
  --dta-h-weight:     800;
  --dta-h-spacing:    -0.02em;
  --dta-section-pad:  104px;
  --dta-text-on-surface: #1a1623;
  --dta-text-muted: #6b6678;
  --dta-text-soft: #3a3547;
  --dta-decor: var(--dta-teal-50);     /* hero decorative tint */
  --dta-sel-bg: var(--dta-ink);        /* selected tab / calendar day */
  --dta-sel-fg: #ffffff;
  --dta-inset-bg: var(--dta-surface-alt); /* inset panels inside cards */
  --dta-ghost-hover: var(--mk-grey);
  --dta-btn-dark-bg: var(--dta-ink);
  --dta-btn-dark-fg: #ffffff;
  --dta-btn-ghost-border: #d9d6df;
  --dta-logo-ink: #1b1830;   /* D-monogram ink (flips light on dark themes) */
}

/* =========================================================
   DESIGN DIRECTIONS — same layout & content, different skin.
   Toggle via the "Design direction" tweak (sets html[data-theme]).
   ========================================================= */

/* A · Bright Candid (default) — airy white, soft rounded, energetic */
:root[data-theme="bright"] {
  --dta-surface:#ffffff; --dta-surface-alt:#f5f6f7; --dta-surface-dark:#1a1623;
  --dta-card-bg:#ffffff; --dta-card-radius:20px; --dta-card-border:#e3e0e7; --dta-well-radius:16px;
  --dta-h-weight:800; --dta-h-spacing:-0.02em; --dta-text-on-surface:#1a1623; --dta-text-muted:#6b6678; --dta-text-soft:#3a3547;
}

/* B · Warm Candid — warm off-white paper, rounder, friendly */
:root[data-theme="warm"] {
  --dta-surface:#fffaf3; --dta-surface-alt:#f8efe2; --dta-surface-dark:#241a15;
  --dta-card-bg:#fffdf9; --dta-card-radius:26px; --dta-card-border:#efe3d3; --dta-well-radius:18px;
  --dta-h-weight:700; --dta-h-spacing:-0.018em; --dta-text-on-surface:#2a201a; --dta-text-muted:#7a6a5b; --dta-text-soft:#4a3c30;
}
:root[data-theme="warm"] body { background: var(--dta-surface); }

/* C · Bold Editorial — crisp paper, sharp corners, heavy type, hairlines */
:root[data-theme="editorial"] {
  --dta-surface:#ffffff; --dta-surface-alt:#f1efe9; --dta-surface-dark:#121016;
  --dta-card-bg:#ffffff; --dta-card-radius:6px; --dta-card-border:#d9d6cf; --dta-well-radius:8px;
  --dta-btn-radius:8px; --dta-h-weight:800; --dta-h-spacing:-0.035em;
  --dta-text-on-surface:#15131a; --dta-text-muted:#5c5866; --dta-text-soft:#2e2a38;
}
:root[data-theme="editorial"] body { background: var(--dta-surface); }
:root[data-theme="editorial"] .dta-card { border-width:1.5px; }
:root[data-theme="editorial"] .dta-eyebrow { letter-spacing:0.18em; }

/* D · Teal Immersive — teal-tinted surfaces, calm, on-brand FOW */
:root[data-theme="teal"] {
  --dta-surface:#f2faf9; --dta-surface-alt:#e2f3f1; --dta-surface-dark:#072e2a;
  --dta-card-bg:#ffffff; --dta-card-radius:24px; --dta-card-border:#cbe7e4; --dta-well-radius:16px;
  --dta-h-weight:700; --dta-h-spacing:-0.02em; --dta-text-on-surface:#0c2a27; --dta-text-muted:#4a6b67; --dta-text-soft:#1d4742;
}
:root[data-theme="teal"] body { background: var(--dta-surface); }

/* E · Night Shift — dark-first, dramatic Off Black surfaces */
:root[data-theme="night"] {
  --dta-surface:#16121f; --dta-surface-alt:#1e1929; --dta-surface-dark:#0c4a4c;
  --dta-card-bg:#241e31; --dta-card-radius:20px; --dta-card-border:#37304a; --dta-well-radius:16px;
  --dta-h-weight:800; --dta-h-spacing:-0.02em;
  --dta-text-on-surface:#f5f3f7; --dta-text-muted:#a59fb3; --dta-text-soft:#d4cfdf;
  --dta-decor: rgba(0,155,141,0.12);
  --dta-sel-bg:#ffffff; --dta-sel-fg:#16121f;
  --dta-inset-bg: rgba(255,255,255,0.05);
  --dta-ghost-hover: rgba(255,255,255,0.08);
  --dta-btn-dark-bg:#ffffff; --dta-btn-dark-fg:#16121f;
  --dta-btn-ghost-border: rgba(255,255,255,0.3);
  --dta-logo-ink:#ffffff;
}
:root[data-theme="night"] body { background: var(--dta-surface); }
:root[data-theme="night"] .dta-well--teal { background: rgba(0,155,141,0.2); color:#56d0c2; }
:root[data-theme="night"] .dta-well--gold { background: rgba(245,166,35,0.18); color:#f7bb55; }
:root[data-theme="night"] .dta-well--blue { background: rgba(77,166,214,0.16); color:#6db8e0; }
:root[data-theme="night"] .dta-chip--ink { background: rgba(255,255,255,0.1); color:#d4cfdf; }
:root[data-theme="night"] .dta-plogo img { filter: grayscale(1) invert(1) brightness(1.8); mix-blend-mode: screen; }
:root[data-theme="night"] .dta-navlogo img { filter: invert(1) hue-rotate(180deg) brightness(1.45) saturate(1.2); }
@media (max-width: 480px){ .dta-navlogo img[alt="IBM"], .dta-navlogo span { display: none !important; } }
:root[data-theme="night"] .dta-ibm { color:#4da6d6; }
:root[data-theme="night"] .dta-card--hover:hover { border-color: rgba(0,155,141,0.5); }

/* F · Teal Block — poster-style solid Strategy Teal colour-block sections */
:root[data-theme="block"] {
  --dta-surface:#ffffff; --dta-surface-alt:#009B8D; --dta-surface-dark:#1a1623;
  --dta-card-bg:#ffffff; --dta-card-radius:20px; --dta-card-border:#e3e0e7; --dta-well-radius:16px;
  --dta-h-weight:800; --dta-h-spacing:-0.025em; --dta-text-on-surface:#1a1623; --dta-text-muted:#6b6678; --dta-text-soft:#3a3547;
  --dta-inset-bg:#eef6f5;
}
/* teal-band sections: headers go white, cards stay white with dark text */
:root[data-theme="block"] #programme,
:root[data-theme="block"] #pathways,
:root[data-theme="block"] #bootcamps {
  --dta-text-on-surface:#ffffff; --dta-text-muted:rgba(255,255,255,0.78); --dta-text-soft:rgba(255,255,255,0.88);
  color:#fff;
}
:root[data-theme="block"] #programme .dta-eyebrow,
:root[data-theme="block"] #pathways .dta-eyebrow,
:root[data-theme="block"] #bootcamps .dta-eyebrow { color:#fff; }
:root[data-theme="block"] #programme .dta-card,
:root[data-theme="block"] #pathways .dta-card,
:root[data-theme="block"] #pathways .dta-pathtab,
:root[data-theme="block"] #bootcamps .dta-card {
  --dta-text-on-surface:#1a1623; --dta-text-muted:#6b6678; --dta-text-soft:#3a3547;
  color: var(--dta-text-on-surface);
}
:root[data-theme="block"] .dta-tcard {
  --dta-text-on-surface:#ffffff; --dta-text-muted:rgba(255,255,255,0.78); --dta-text-soft:rgba(255,255,255,0.88);
  color:#fff;
}
:root[data-theme="block"] .dta-tcard .dta-calnav { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); color:#fff; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mk-font-body);
  color: var(--dta-text-on-surface);
  background: var(--dta-surface);
  -webkit-font-smoothing: antialiased;
}
/* let section/card scopes recolour type (dark + colour-block themes) */
h1, h2, h3, h4, h5, h6, p { color: inherit; }

/* ---------- layout ---------- */
.dta-shell { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px){ .dta-shell { padding: 0 48px; } }
.dta-section { padding: 72px 0; }
@media (min-width: 768px){ .dta-section { padding: 104px 0; } }
.dta-section--tight { padding: 56px 0; }

.dta-eyebrow {
  font-family: var(--mk-font-ui);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dta-accent);
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px; white-space: nowrap;
}
.dta-eyebrow--gold { color: var(--dta-gold-600); }

h1,h2,h3,h4 { font-family: var(--mk-font-display); letter-spacing: var(--dta-h-spacing); margin: 0; text-wrap: balance; }
.dta-h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: var(--dta-h-weight); line-height: 1.05; letter-spacing: var(--dta-h-spacing); }
.dta-h3 { font-size: clamp(22px, 2.6vw, 32px); font-weight: var(--dta-h-weight); line-height: 1.12; letter-spacing: var(--dta-h-spacing); }
.dta-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--dta-text-soft); text-wrap: pretty; }
.dta-muted { color: var(--dta-text-muted); }

/* ---------- buttons (pill, mereka.io style) ---------- */
.dta-btn {
  font-family: var(--mk-font-ui); font-weight: 700; font-size: 15px;
  border: 1.5px solid transparent; cursor: pointer;
  padding: 15px 26px; border-radius: var(--dta-btn-radius);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background var(--mk-dur) var(--mk-ease), color var(--mk-dur) var(--mk-ease),
              border-color var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease),
              box-shadow var(--mk-dur) var(--mk-ease);
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.dta-btn svg, .dta-btn i { width: 18px; height: 18px; }
.dta-btn:active { transform: translateY(1px); }
.dta-btn--dark   { background: var(--dta-btn-dark-bg); color: var(--dta-btn-dark-fg); }
.dta-btn--dark:hover   { background: var(--dta-accent); color: #fff; }
.dta-btn--gold   { background: var(--dta-gold); color: var(--dta-ink); }
.dta-btn--gold:hover   { background: var(--dta-gold-600); color:#fff; }
.dta-btn--accent { background: var(--dta-accent); color:#fff; }
.dta-btn--accent:hover { background: var(--dta-accent-700); }
.dta-btn--ghost  { background: transparent; color: var(--dta-text-on-surface); border-color: var(--dta-btn-ghost-border); }
.dta-btn--ghost:hover  { background: var(--dta-ghost-hover); }
.dta-btn--ghost-light { background: transparent; color:#fff; border-color: rgba(255,255,255,.45); }
.dta-btn--ghost-light:hover { background: rgba(255,255,255,.12); }
.dta-btn--sm { padding: 11px 18px; font-size: 14px; }
.dta-btn--lg { padding: 18px 32px; font-size: 16px; }

/* ---------- pills / chips ---------- */
.dta-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  font-family: var(--mk-font-ui); font-size: 13px; font-weight: 600;
  background: var(--dta-accent-50); color: var(--dta-accent-700);
}
.dta-chip--gold { background: var(--dta-gold-50); color: var(--dta-gold-600); }
.dta-chip--blue { background: var(--dta-blue-50); color: var(--dta-blue); }
.dta-chip--ink  { background: #efeef2; color: var(--mk-ink-700); }

/* ---------- card ---------- */
.dta-card {
  background: var(--dta-card-bg); border:1px solid var(--dta-card-border); border-radius: var(--dta-card-radius);
  transition: box-shadow var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease),
              border-color var(--mk-dur) var(--mk-ease);
}
.dta-card--hover:hover { box-shadow: var(--mk-shadow-md); transform: translateY(-3px); border-color: var(--dta-accent-100); }

/* ---------- icon well ---------- */
.dta-well {
  width: 52px; height: 52px; border-radius: var(--dta-well-radius); flex-shrink: 0;
  display:inline-flex; align-items:center; justify-content:center;
}
.dta-well svg { width: 26px; height: 26px; stroke-width: 1.6; }
.dta-well--teal { background: var(--dta-teal-50); color: var(--dta-teal-700); }
.dta-well--gold { background: var(--dta-gold-50); color: var(--dta-gold-600); }
.dta-well--blue { background: var(--dta-blue-50); color: var(--dta-blue); }
.dta-well--ink  { background: var(--dta-ink); color:#fff; }

/* ---------- partner logo strip (official assets) ---------- */
.dta-partners { display:flex; align-items:center; flex-wrap:wrap; gap: 14px 30px; }
.dta-plogo { display:inline-flex; align-items:center; }
.dta-plogo img { display:block; width:auto; mix-blend-mode: multiply; }
.dta-plogo--ibm img    { height: 26px; }
.dta-plogo--biji img   { height: 38px; }
.dta-plogo--mereka img { height: 58px; margin: -10px 0; }  /* file has generous padding */
.dta-plogo--mdec img   { height: 22px; }
.dta-ibm {
  font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 30px;
  letter-spacing: 1px; line-height: 1; color: var(--dta-blue);
  background-image: repeating-linear-gradient(0deg, currentColor 0 2.4px, transparent 2.4px 4px);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dta-wordmark { font-family: var(--mk-font-display); font-weight: 800; font-size: 22px; letter-spacing:-.01em; color: var(--dta-text-soft); }
.dta-wordmark .dot { color: var(--dta-teal); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--mk-ease-out), transform .6s var(--mk-ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* ---------- hero entrance — staggered rise on load ---------- */
@keyframes dtaRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .dta-hero-copy > * { animation: dtaRise .55s var(--mk-ease-out) both; }
  .dta-hero-copy > *:nth-child(1) { animation-delay: .04s; }
  .dta-hero-copy > *:nth-child(2) { animation-delay: .12s; }
  .dta-hero-copy > *:nth-child(3) { animation-delay: .2s; }
  .dta-hero-copy > *:nth-child(4) { animation-delay: .28s; }
  .dta-hero-copy > *:nth-child(5) { animation-delay: .36s; }
  .dta-hero-media { animation: dtaRise .65s var(--mk-ease-out) .3s both; }
}

/* ---------- scroll progress bar ---------- */
.dta-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; background: transparent; }
.dta-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dta-teal), var(--dta-gold)); transition: width .12s linear; }

/* ---------- theme cross-fade ---------- */
body, section, .dta-card { transition: background-color .36s var(--mk-ease), border-color .36s var(--mk-ease), color .36s var(--mk-ease); }

/* ---------- image slot media hover (lift, no scale — brand rule) ---------- */
.dta-card--hover image-slot::part(frame) { transition: opacity .2s var(--mk-ease); }
.dta-card--hover:hover image-slot::part(frame) { opacity: .92; }

/* ---------- misc ---------- */
.dta-divider { height:1px; background: var(--mk-border); border:0; margin:0; }
::selection { background: color-mix(in oklab, var(--dta-teal) 28%, transparent); }
a { color: var(--dta-accent); }
.dta-grid { display:grid; gap: 20px; }
@keyframes mkFade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- journey scenes (animated SVG illustrations) ---------- */
.jsc { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }
.jsc g, .jsc path, .jsc circle, .jsc rect, .jsc line { transform-box: fill-box; }
.jsc-float { animation: jscFloat 4.5s ease-in-out infinite; }
@keyframes jscFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.jsc-swing { transform-origin: 50% 0%; animation: jscSwing 2.8s ease-in-out infinite; }
@keyframes jscSwing { 0%,100% { transform: rotate(7deg); } 50% { transform: rotate(-9deg); } }
.jsc-spark { transform-origin: center; animation: jscSpark 2.6s ease-in-out infinite; opacity: 0; }
.jsc-spark--2 { animation-delay: .9s; }
.jsc-spark--3 { animation-delay: 1.7s; }
@keyframes jscSpark { 0%,100% { opacity: 0; transform: scale(.55); } 50% { opacity: 1; transform: scale(1); } }
.jsc-pulse { transform-origin: center; animation: jscPulse 3s var(--mk-ease) infinite; }
@keyframes jscPulse { 0% { transform: scale(.9); opacity: .65; } 75% { transform: scale(1.12); opacity: 0; } 100% { opacity: 0; } }
.jsc-slideL { animation: jscInL .7s var(--mk-ease-out) both; }
.jsc-slideR { animation: jscInR .7s var(--mk-ease-out) both; }
.jsc-rise   { animation: jscInU .7s var(--mk-ease-out) both; }
@keyframes jscInL { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes jscInR { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes jscInU { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.jsc-bubble { animation: jscInU .6s var(--mk-ease-out) .55s both; }
.jsc-dot { animation: jscBlink 1.6s ease-in-out infinite; }
.jsc-dot--2 { animation-delay: .25s; }
.jsc-dot--3 { animation-delay: .5s; }
@keyframes jscBlink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.jsc-card { animation: jscInR .7s var(--mk-ease-out) .15s both; }
.jsc-stamp { transform-origin: center; animation: jscStamp .5s var(--mk-ease-out) .85s both; }
@keyframes jscStamp { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce){
  .jsc-float, .jsc-swing, .jsc-spark, .jsc-pulse, .jsc-dot,
  .jsc-slideL, .jsc-slideR, .jsc-rise, .jsc-bubble, .jsc-card, .jsc-stamp { animation: none; opacity: 1; }
}

/* update card → popup link */
.dta-uplink { display: block; text-decoration: none; color: inherit; border-bottom: none; cursor: pointer; width: 100%; text-align: left; padding: 0; font-family: inherit; font-size: inherit; }

/* ---------- image gallery wall (mosaic) ---------- */
.dta-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 158px);
  grid-template-areas:
    "a a b c"
    "a a d e"
    "f f g h";
  gap: 12px;
}
.dta-gallery image-slot { border-radius: var(--dta-card-radius); overflow: hidden; min-height: 0; min-width: 0; }
@media (max-width: 720px){
  .dta-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 130px);
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f f"
      "g h";
  }
}

/* ---------- update popup modal ---------- */
.dta-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26,22,35,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 20px; overflow-y: auto;
  animation: mkFade .22s var(--mk-ease-out) both;
}
.dta-modal {
  position: relative; width: 100%; max-width: 760px;
  background: var(--dta-card-bg); color: var(--dta-text-on-surface);
  border: 1px solid var(--dta-card-border); border-radius: 24px; overflow: hidden;
  box-shadow: var(--mk-shadow-lg); margin: auto 0;
  animation: dtaModalIn .36s var(--mk-ease-out) both;
}
@keyframes dtaModalIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .dta-modal-overlay, .dta-modal { animation: none; } }
.dta-modal-body { padding: clamp(22px, 3.5vw, 36px); }
.dta-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 999px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(26,22,35,0.55); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--mk-dur) var(--mk-ease);
}
.dta-modal-close:hover { background: rgba(26,22,35,0.8); }

/* ---------- registration popup ---------- */
.dta-regmodal { max-width: 540px; }
.dta-regmodal-head {
  padding: clamp(26px, 3.5vw, 36px) clamp(26px, 3.5vw, 36px) 0;
  text-align: center;
}
.dta-regmodal-head .dta-chip { margin: 0 auto; }
.dta-regmodal-title {
  font-family: var(--mk-font-display); font-weight: 800; font-size: clamp(24px, 3vw, 30px);
  line-height: 1.12; letter-spacing: -0.02em; margin: 16px 0 8px; color: var(--dta-text-on-surface);
}
.dta-regmodal-sub { font-size: 15.5px; line-height: 1.5; color: var(--dta-text-muted); margin: 0; }
.dta-regmodal-body { padding: clamp(22px, 3vw, 30px) clamp(26px, 3.5vw, 36px) clamp(26px, 3.5vw, 36px); }
.dta-regform { display: flex; flex-direction: column; gap: 16px; }
.dta-field { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.dta-field-row { display: flex; gap: 14px; }
@media (max-width: 480px){ .dta-field-row { flex-direction: column; } }
.dta-field-label { font-family: var(--mk-font-ui); font-size: 13px; font-weight: 700; color: var(--dta-text-on-surface); }
.dta-field-opt { font-weight: 500; color: var(--dta-text-muted); }
.dta-input {
  width: 100%; font-family: var(--mk-font-ui); font-size: 15px; color: var(--dta-text-on-surface);
  background: var(--dta-inset-bg); border: 1.5px solid var(--dta-card-border); border-radius: 12px;
  padding: 13px 15px; outline: none; transition: border-color var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease);
}
.dta-input::placeholder { color: var(--dta-text-muted); opacity: 0.7; }
.dta-input:focus { border-color: var(--dta-accent); box-shadow: 0 0 0 3px var(--dta-accent-100); }
select.dta-input { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b6678' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 42px; }
.dta-regform-fine { font-size: 12.5px; line-height: 1.5; color: var(--dta-text-muted); text-align: center; margin: 2px 0 0; }
.dta-regdone { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; }
.dta-regdone .dta-well { margin-bottom: 10px; }
.dta-regdone-title { font-family: var(--mk-font-display); font-weight: 800; font-size: 24px; margin: 0; color: var(--dta-text-on-surface); }
.dta-regdone-text { font-size: 15.5px; line-height: 1.55; color: var(--dta-text-muted); margin: 0; max-width: 38ch; }

/* auto-playing pulse dot (Ambassador points tracker) */
.dta-autodot { width:8px; height:8px; border-radius:50%; background: var(--dta-gold); box-shadow:0 0 0 0 rgba(245,166,35,.5); animation: dtaPulse 1.6s var(--mk-ease) infinite; }
@keyframes dtaPulse { 0%{ box-shadow:0 0 0 0 rgba(245,166,35,.5);} 70%{ box-shadow:0 0 0 7px rgba(245,166,35,0);} 100%{ box-shadow:0 0 0 0 rgba(245,166,35,0);} }
@media (prefers-reduced-motion: reduce){ .dta-autodot { animation:none; } }

/* gentle float for hero accent badges */
@keyframes dtaFloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-7px);} }
.dta-float { animation: dtaFloat 5s ease-in-out infinite; }
.dta-float--b { animation: dtaFloat 6.2s ease-in-out infinite; animation-delay: .6s; }
@media (prefers-reduced-motion: reduce){ .dta-float, .dta-float--b { animation:none; } }

/* ---------- hero impact panel (animated journey → opportunity) ---------- */
.dta-impact {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #241f30, #1a1623);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 28px;
  padding: clamp(20px, 2.4vw, 30px); color: #fff; overflow: hidden;
  box-shadow: var(--mk-shadow-lg); min-height: 540px;
}
.dta-imp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dta-imp-label { font-family: var(--mk-font-ui); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.dta-imp-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.dta-imp-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dta-teal), var(--dta-gold)); transition: width .5s var(--mk-ease-out); }
.dta-imp-learner {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
}
.dta-imp-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dta-teal); color: #fff;
  font-family: var(--mk-font-display); font-weight: 700; font-size: 22px;
  transition: box-shadow .5s var(--mk-ease);
}
.dta-imp-learner[data-hired="true"] .dta-imp-avatar { box-shadow: 0 0 0 3px var(--dta-gold); }
.dta-imp-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-family: var(--mk-font-ui); font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);
  transition: background .4s var(--mk-ease), color .4s var(--mk-ease);
}
.dta-imp-learner[data-hired="true"] .dta-imp-status { background: var(--dta-gold); color: var(--dta-ink); }
.dta-imp-rows { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dta-imp-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--mk-ease-out), transform .45s var(--mk-ease-out), border-color .45s var(--mk-ease), background .45s var(--mk-ease);
}
.dta-imp-row.on { opacity: 1; transform: none; }
.dta-imp-row[data-hi="true"].on { border-color: rgba(245,166,35,.55); background: rgba(245,166,35,.08); }
.dta-imp-pts { margin-left: auto; font-family: var(--mk-font-display); font-weight: 800; font-size: 14px; color: var(--dta-gold); white-space: nowrap; }
@media (prefers-reduced-motion: reduce){ .dta-imp-row { opacity: 1; transform: none; } }

/* expandable capability card (Programme overview) */
.dta-cap { cursor: pointer; }
.dta-cap-detail { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .38s var(--mk-ease), opacity .3s var(--mk-ease), margin-top .38s var(--mk-ease); }
.dta-cap[data-open="true"] .dta-cap-detail { max-height: 200px; opacity: 1; margin-top: 16px; }
.dta-cap-plus { color: var(--dta-text-muted); transition: transform .32s var(--mk-ease), color var(--mk-dur) var(--mk-ease); }
.dta-cap[data-open="true"] .dta-cap-plus { transform: rotate(135deg); color: var(--dta-accent); }

/* ---------- programme feature grid (colour-fill on hover) ---------- */
.dta-prog-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px;
  align-items: end; margin-bottom: 48px;
}
.dta-prog-head-copy { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 820px){
  .dta-prog-head { grid-template-columns: 1fr; align-items: start; gap: 20px; margin-bottom: 36px; }
}
.dta-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px){ .dta-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .dta-feat-grid { grid-template-columns: 1fr; } }
.dta-feat {
  position: relative; overflow: hidden; min-height: 230px;
  display: flex; flex-direction: column;
  background: var(--dta-card-bg); border: 1px solid var(--dta-card-border);
  border-radius: var(--dta-card-radius); padding: 28px;
  transition: background .35s var(--mk-ease), border-color .35s var(--mk-ease),
              transform .35s var(--mk-ease), box-shadow .35s var(--mk-ease);
}
.dta-feat:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lg); background: var(--feat-c); border-color: var(--feat-c); }
.dta-feat-num {
  position: absolute; top: 20px; right: 26px; pointer-events: none;
  font-family: var(--mk-font-display); font-weight: 800; font-size: 48px; line-height: 1;
  letter-spacing: -0.04em; color: var(--feat-num-rest); transition: color .35s var(--mk-ease);
}
.dta-feat:hover .dta-feat-num { color: var(--feat-num-hov); }
.dta-feat .dta-feat-well { transition: background .35s var(--mk-ease), color .35s var(--mk-ease); }
.dta-feat:hover .dta-feat-well { background: var(--feat-well-hov); color: var(--feat-fg); }
.dta-feat-title {
  font-family: var(--mk-font-display); font-weight: 700; font-size: 21px; margin: 0 0 8px;
  color: var(--dta-text-on-surface); transition: color .3s var(--mk-ease);
}
.dta-feat-desc {
  font-size: 15px; line-height: 1.55; margin: 0 0 18px; max-width: 32ch;
  color: var(--dta-text-muted); transition: color .3s var(--mk-ease);
}
.dta-feat:hover .dta-feat-title { color: var(--feat-fg); }
.dta-feat:hover .dta-feat-desc { color: var(--feat-fg-soft); }
.dta-feat-tag {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start; padding: 5px 12px; border-radius: 999px;
  font-family: var(--mk-font-ui); font-size: 12.5px; font-weight: 700;
  background: var(--feat-num-rest); color: var(--dta-text-soft);
  transition: background .3s var(--mk-ease), color .3s var(--mk-ease);
}
.dta-feat:hover .dta-feat-tag { background: var(--feat-well-hov); color: var(--feat-fg); }

/* card grids */
.dta-cards-3 { grid-template-columns: repeat(3, 1fr); }
.dta-cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .dta-cards-3, .dta-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .dta-cards-3, .dta-cards-4 { grid-template-columns: 1fr; } }

/* hero */
.dta-hero-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center; }
@media (max-width: 940px){ .dta-hero-grid { grid-template-columns: 1fr; gap: 48px; } .dta-hero-media { max-width: 460px; } }
.dta-nav-cta { }
@media (max-width: 720px){
  .dta-navlinks, .dta-nav-cta { display:none !important; }
  .dta-burger { display:inline-flex !important; margin-left:auto; }
}

/* journey timeline */
.dta-timeline { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px){ .dta-timeline { grid-template-columns: 1fr; } }
.dta-tl-node {
  display:flex; flex-direction: column; align-items: stretch; gap: 12px; cursor:pointer;
  border:1.5px solid var(--mk-border); border-radius: 16px; padding: 16px 18px; background: var(--mk-grey);
  transition: all var(--mk-dur) var(--mk-ease); font-family: inherit;
}
.dta-tl-node:hover { transform: translateY(-2px); }
.dta-tl-row { display:flex; gap: 14px; align-items:center; text-align:left; }
.dta-tl-prog { display:block; height: 4px; border-radius: 999px; background: color-mix(in oklab, var(--dta-text-muted) 22%, transparent); overflow: hidden; }
.dta-tl-prog span { display:block; height:100%; width:0; border-radius: 999px; background: var(--dta-accent); }
.dta-tl-prog span.full { width:100%; }
.dta-tl-prog span.run { animation: tlRun 5s linear forwards; }
@keyframes tlRun { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce){ .dta-tl-prog span.run { animation: none; width: 100%; } }
.dta-journey-panel { display:grid; grid-template-columns: 0.8fr 1.2fr; }
@media (max-width: 760px){ .dta-journey-panel { grid-template-columns: 1fr; } }
.dta-jp-side { padding: clamp(28px,4vw,44px); display:flex; flex-direction:column; min-height: 260px; }
.dta-jp-body { padding: clamp(28px,4vw,44px); }

/* pathways */
.dta-pathways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 860px){ .dta-pathways-grid { grid-template-columns: 1fr; } }
.dta-pathpanel { display: flex; flex-direction: column; }
.dta-pathtabs { display:flex; gap: 12px; flex-wrap:wrap; }
.dta-pathtab {
  display:flex; align-items:center; gap: 12px; cursor:pointer; font-family: var(--mk-font-ui);
  font-weight: 700; font-size: 15px; padding: 12px 20px 12px 12px; border-radius: 999px;
  border:1.5px solid var(--mk-border); transition: all var(--mk-dur) var(--mk-ease);
}
.dta-pathtab:hover { transform: translateY(-1px); }

/* ambassador tracker */
.dta-tracker { display:grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items:start; }
@media (max-width: 860px){ .dta-tracker { grid-template-columns: 1fr; } }
.dta-meter { padding: clamp(24px,3vw,36px); border-radius: 22px; }
.dta-actions { display:flex; flex-direction:column; gap: 12px; }
.dta-action {
  display:flex; align-items:center; gap: 14px; cursor:pointer; text-align:left;
  border:1.5px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 14px 18px;
  transition: all var(--mk-dur) var(--mk-ease); font-family: inherit;
}
.dta-action:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3); }

/* bootcamp */
.dta-bootcamp { display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items:start; }
@media (max-width: 860px){ .dta-bootcamp { grid-template-columns: 1fr; } }
.dta-sesrow {
  display: flex; align-items: center; gap: 16px; width: 100%; cursor: pointer;
  font-family: inherit; text-align: left; padding: 12px 14px;
  background: transparent; border: 1.5px solid transparent; border-radius: 16px;
  transition: background .2s var(--mk-ease), border-color .2s var(--mk-ease), transform .2s var(--mk-ease);
}
.dta-sesrow:hover { background: var(--dta-inset-bg); transform: translateY(-1px); }
.dta-sesrow[data-on="true"] { background: var(--dta-inset-bg); border-color: var(--dta-accent); }
.dta-sesdate {
  flex-shrink: 0; width: 58px; height: 64px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--dta-accent-50); color: var(--dta-accent-700);
  transition: background .2s var(--mk-ease), color .2s var(--mk-ease);
}
.dta-sesdate[data-on="true"] { background: var(--dta-sel-bg); color: var(--dta-sel-fg); }
.dta-sesdate-dow { font-family: var(--mk-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: .8; }
.dta-sesdate-day { font-family: var(--mk-font-display); font-weight: 800; font-size: 24px; line-height: 1; }
.dta-sesdate-mon { font-family: var(--mk-font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: .8; }
.dta-cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dta-cal-cell {
  position:relative; aspect-ratio: 1; border-radius: 12px; font-family: var(--mk-font-ui);
  font-size: 15px; display:flex; align-items:center; justify-content:center;
  transition: all var(--mk-dur) var(--mk-ease);
}
.dta-cal-cell:not(:disabled):hover { transform: scale(1.04); }
.dta-calnav {
  width: 38px; height: 38px; border-radius: 999px; border:1px solid var(--dta-card-border); background: var(--dta-card-bg);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color: var(--dta-text-on-surface);
  transition: all var(--mk-dur) var(--mk-ease);
}
.dta-calnav:hover { background: var(--dta-ghost-hover); }

/* register + footer */
.dta-register-form { display:flex; gap: 12px; max-width: 560px; margin: 0 auto; }
@media (max-width: 540px){ .dta-register-form { flex-direction: column; } }
/* ---------- Mereka ecosystem footer ---------- */
.mfoot { background: #1c1925; color: #fff; padding: 52px 0 36px; }
.mfoot-top { display:flex; align-items:center; gap: 24px 36px; flex-wrap: wrap; }
.mfoot-logo { height: 34px; width:auto; display:block; }
.mfoot-nav { display:flex; align-items:center; gap: 12px 28px; flex-wrap: wrap; flex: 1; }
.mfoot-nav a { color:#fff; font-family: var(--mk-font-display); font-weight: 500; font-size: 17px; text-decoration:none; border-bottom:none; opacity:.94; transition: color var(--mk-dur) var(--mk-ease); }
.mfoot-nav a:hover { color: var(--dta-teal); }
.mfoot-contact { display:inline-flex; align-items:center; justify-content:center; padding: 11px 24px; border-radius: 999px; border:1.5px solid rgba(255,255,255,.55); color:#fff; font-family: var(--mk-font-display); font-weight:600; font-size:15px; text-decoration:none; border-bottom:none; transition: all var(--mk-dur) var(--mk-ease); white-space:nowrap; }
.mfoot-contact:hover { background:#fff; color: var(--dta-ink); border-color:#fff; }
.mfoot-socials { display:flex; gap: 16px; align-items:center; }
.mfoot-social { display:inline-flex; align-items:center; justify-content:center; color: rgba(255,255,255,.72); border-bottom:none; transition: color var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease); }
.mfoot-social:hover { color:#fff; transform: translateY(-2px); }
.mfoot-rule { height:1px; background: rgba(255,255,255,.13); border:0; margin: 26px 0 42px; }

.mfoot-grid { display:grid; grid-template-columns: 1fr 2.1fr 1.1fr 1.2fr; gap: 36px; }
.mfoot-col h4 { font-family: var(--mk-font-display); font-weight:700; font-size: 21px; color:#fff; margin: 0 0 20px; }
.mfoot-link { display:block; color: rgba(255,255,255,.6); text-decoration:none; border-bottom:none; font-size: 16px; padding: 8px 0; transition: color var(--mk-dur) var(--mk-ease); }
.mfoot-link:hover { color:#fff; }
.mfoot-sublabel { font-family: var(--mk-font-ui); font-size: 12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.4); margin: 4px 0 10px; }
.mfoot-market { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mfoot-store { display:flex; flex-direction:column; gap: 12px; margin-top: 18px; }
.mfoot-storebadge { display:inline-flex; align-items:center; gap: 11px; background:#000; border:1px solid rgba(255,255,255,.28); border-radius: 10px; padding: 8px 16px; width: 176px; color:#fff; text-decoration:none; border-bottom:none; transition: border-color var(--mk-dur) var(--mk-ease); }
.mfoot-storebadge:hover { border-color: rgba(255,255,255,.6); }
.mfoot-storebadge small { display:block; font-size: 9.5px; letter-spacing:.04em; opacity:.9; line-height:1.1; font-family: var(--mk-font-ui); }
.mfoot-storebadge b { display:block; font-family: var(--mk-font-display); font-weight:700; font-size: 16px; line-height:1.2; }
.mfoot-getline { font-size: 15px; color: rgba(255,255,255,.6); margin: 18px 0 0; max-width: 230px; }
.mfoot-listcta { display:inline-flex; align-items:center; justify-content:center; margin-top: 14px; padding: 14px 28px; border-radius: 999px; background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff; font-family: var(--mk-font-display); font-weight:700; font-size:15px; cursor:pointer; text-decoration:none; border-bottom:none; transition: background var(--mk-dur) var(--mk-ease); }
.mfoot-listcta:hover { background: rgba(255,255,255,.14); }

.mfoot-bottomrule { height:1px; background: rgba(255,255,255,.13); border:0; margin: 44px 0 24px; }
.mfoot-bottom { display:flex; align-items:center; gap: 18px 32px; flex-wrap: wrap; }
.mfoot-bottom a, .mfoot-copy { font-family: var(--mk-font-ui); font-size: 13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,.5); text-decoration:none; border-bottom:none; }
.mfoot-bottom a:hover { color:#fff; }
.mfoot-copy { display:inline-flex; align-items:center; gap: 10px; }

@media (max-width: 920px){ .mfoot-grid { grid-template-columns: 1fr 1fr; } .mfoot-nav { order: 3; flex-basis: 100%; } }
@media (max-width: 560px){ .mfoot-grid { grid-template-columns: 1fr; } .mfoot-market { grid-template-columns: 1fr 1fr; } }