/* ==========================================================================
   ELS Sales Kit — module "home" (Beranda). Every selector is scoped to .m-home; tokens only.
   Mobile: one flex column, visual order via `order` (column wrappers use display:contents).
   Desktop >= 1024px: 2-column grid, areas computed in JS (--home-areas).
   ========================================================================== */

/* ---------- Layout ---------- */
.m-home .home { display: flex; flex-direction: column; gap: var(--space-4); }
.m-home .home > *, .m-home .home-col > * { margin-top: 0; min-width: 0; }
.m-home .home-col { display: contents; }

.m-home .home-hero { order: 10; }
.m-home .home-team { order: 15; }
.m-home .home-quote { order: 20; }
.m-home .home-focus { order: 30; }
.m-home .home-eval.is-urgent { order: 35; }
.m-home .home-kpis { order: 40; }
.m-home .home-follow { order: 50; }
.m-home .home-learn { order: 60; }
.m-home .home-eval { order: 70; }
.m-home .home-activity { order: 80; }
.m-home .home-fears { order: 90; }
.m-home .home-install { order: 100; }

/* entrance (first render only): soft staggered fade-up */
.m-home .home.is-first .home-block {
  animation: homeIn var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes homeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.m-home .home-hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 4px;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(110% 130% at 0% 0%, var(--cyan-soft) 0%, transparent 55%),
    radial-gradient(90% 120% at 100% 0%, var(--violet-soft) 0%, transparent 60%),
    radial-gradient(70% 90% at 85% 115%, var(--pink-soft) 0%, transparent 65%),
    var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 var(--highlight);
}
.m-home .home-hero::before {
  content: ""; position: absolute; z-index: -1; right: -80px; top: -100px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, var(--cyan-glow) 0%, transparent 68%); opacity: .4; pointer-events: none;
}
.m-home .home-hero::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), var(--pink), transparent); opacity: .75;
}
.m-home .home-hero-main { display: flex; flex-direction: column; gap: var(--space-5); }
.m-home .home-hero-text { min-width: 0; }
.m-home .home-date {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-ink);
}
.m-home .home-date .badge { letter-spacing: .04em; }
.m-home .home-hello {
  margin-top: 10px; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.12;
  overflow-wrap: anywhere;
}
.m-home .home-name {
  background: linear-gradient(90deg, var(--cyan), var(--violet) 60%, var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m-home .home-wave { display: inline-block; transform-origin: 70% 75%; animation: homeWave 1.9s var(--ease) .45s 1 both; }
@keyframes homeWave {
  0%, 62%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}
.m-home .home-hero-sub { margin-top: 10px; color: var(--muted); max-width: 54ch; }

.m-home .home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.m-home .home-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0;
  padding: 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--stroke);
}
.m-home .home-stat .tile { width: 30px; height: 30px; border-radius: 10px; }
.m-home .home-stat-text { display: flex; flex-direction: column; min-width: 0; }
.m-home .home-stat-value { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.m-home .home-stat-label { margin-top: 2px; font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--muted); }
.m-home .home-stat-streak .tile .ico { animation: homeFlicker 2.8s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes homeFlicker { 0%, 100% { transform: scale(1) rotate(0); } 40% { transform: scale(1.08) rotate(-3deg); } 70% { transform: scale(.97) rotate(2deg); } }

.m-home .home-level {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  margin-top: var(--space-4); padding: 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--stroke); color: var(--text); text-align: left;
}
.m-home button.home-level { cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.m-home button.home-level:hover { border-color: var(--violet-glow); background: var(--violet-soft); }
.m-home button.home-level:active { transform: scale(.99); }
.m-home .home-level-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-home .home-level-text { flex: 1; min-width: 0; }
.m-home .home-level-name { font-weight: 800; line-height: 1.25; }
.m-home .home-level-sub { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.m-home .home-level-pct { flex: none; font-size: var(--fs-sm); font-weight: 800; color: var(--violet-ink); }
.m-home .home-level-chev { flex: none; color: var(--dim); transition: transform var(--dur) var(--ease); }
.m-home button.home-level:hover .home-level-chev { transform: translateX(2px); color: var(--muted); }

/* ---------- Quote ---------- */
.m-home .home-quote { overflow: hidden; }
.m-home .home-quote::after {
  content: "\201D"; position: absolute; right: 14px; bottom: -46px; pointer-events: none;
  font-size: 150px; font-weight: 800; line-height: 1; color: var(--violet-soft);
}
.m-home .home-quote-body { position: relative; z-index: 1; margin: 0; }
.m-home .home-quote-text { font-size: var(--fs-md); font-weight: 650; line-height: 1.5; letter-spacing: -.005em; color: var(--text); }
.m-home .home-quote-by { margin-top: 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--violet-ink); }
.m-home .home-quote-body.is-swap { animation: homeSwap var(--dur-slow) var(--ease-out); }
@keyframes homeSwap { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.m-home .home-quote-next .ico { transition: transform var(--dur-slow) var(--ease-spring); }
.m-home .home-quote-next:active .ico { transform: rotate(160deg); }

/* ---------- Focus ---------- */
.m-home .home-focus-row { display: flex; align-items: center; gap: var(--space-5); }
.m-home .home-focus-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.m-home .home-focus-title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.m-home .home-focus-count { font-variant-numeric: tabular-nums; }
.m-home p.home-focus-count { font-size: var(--fs-sm); font-weight: 750; color: var(--green-ink); }
.m-home .home-focus-next {
  display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-4); padding: 12px 14px;
  border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--stroke);
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.4;
}
.m-home .home-focus-check {
  margin-top: var(--space-4); padding: 8px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--stroke);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.m-home .home-focus-check:hover { border-color: var(--accent-glow); }
.m-home .home-focus-check.is-checked { background: var(--accent-soft); border-color: var(--accent-glow); }
.m-home .home-focus-check .check-sub { font-size: var(--fs-xs); font-weight: 650; color: var(--accent-ink); }
.m-home .home-focus-next .ico { flex: none; margin-top: 2px; color: var(--accent-ink); }
.m-home .home-focus-next strong { font-weight: 700; color: var(--text); }
.m-home .home-focus-sub { font-size: var(--fs-sm); color: var(--muted); }
.m-home .home-focus .btn { margin-top: 8px; }
.m-home .home-focus.is-done {
  border-color: var(--green-glow);
  background: radial-gradient(120% 120% at 0% 0%, var(--green-soft) 0%, transparent 60%), var(--surface);
}

/* ---------- KPIs ---------- */
.m-home .home-kpi { cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.m-home .home-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent-glow); }
.m-home .home-kpi:active { transform: scale(.98); }
.m-home .home-kpi-link { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: inherit; background: transparent; cursor: pointer; }
.m-home .home-kpi-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-lg); }
.m-home .home-kpi .kpi-label { white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-home .home-kpi .kpi-sub { line-height: 1.35; }
.m-home .home-kpi .kpi-sub .btn, .m-home .home-kpi .trend { position: relative; z-index: 2; }
.m-home .home-kpi .kpi-sub .btn { margin-top: 2px; }
.m-home .home-kpi-bar { margin-top: auto; padding-top: 4px; }
.m-home .home-kpi.is-done .kpi-value { color: var(--green-ink); }
@media (max-width: 719.98px) {
  .m-home .home-kpis .grid > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Follow-up ---------- */
.m-home .home-overdue {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-bottom: 4px; padding: 10px 12px;
  border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-glow);
  color: var(--accent-ink); font-size: var(--fs-sm); line-height: 1.35; text-align: left; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease);
}
.m-home .home-overdue:hover { border-color: var(--accent); }
.m-home .home-overdue:active { transform: scale(.99); }
.m-home .home-overdue-text { flex: 1; min-width: 0; color: var(--text); }
.m-home .home-overdue-text strong { color: var(--accent-ink); font-weight: 800; }
.m-home .home-overdue-chev { flex: none; }
.m-home .home-fu .li-meta { align-self: center; }
.m-home .home-fu-name { display: inline-flex; align-items: center; gap: 6px; }
.m-home .home-fu-hot { color: var(--amber); }
.m-home .home-fu-type {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 750; white-space: nowrap;
}
.m-home .home-more { margin-top: 6px; font-size: var(--fs-xs); font-weight: 650; color: var(--dim); text-align: center; }

/* ---------- Learning ---------- */
.m-home .home-learn .card-body > * + * { margin-top: var(--space-4); }
.m-home .home-next {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px;
  border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--stroke);
  color: var(--text); text-align: left; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.m-home .home-next:hover { border-color: var(--accent-glow); background: var(--accent-soft); }
.m-home .home-next:active { transform: scale(.99); }
.m-home .home-next-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.m-home .home-next-kicker { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.m-home .home-next-title { font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.m-home .home-next-sub { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.m-home .home-next-go {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  box-shadow: 0 8px 18px -8px var(--accent-glow);
  transition: transform var(--dur) var(--ease-spring);
}
.m-home .home-next:hover .home-next-go { transform: scale(1.08); }
.m-home .home-pledge .callout-text { font-weight: 650; color: var(--text); }
.m-home .home-pledge .btn { margin-top: 10px; }

/* ---------- Evaluation ---------- */
.m-home .home-eval-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.m-home .home-eval-days { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.m-home .home-eval.is-urgent .card-title { font-size: var(--fs-lg); }
.m-home .home-eval.is-urgent .card-head .tile { animation: homePulse 2.4s ease-in-out infinite; }
@keyframes homePulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 9px transparent; } }
.m-home .home-eval.is-done .card-body > * + * { margin-top: var(--space-4); }
.m-home .home-avg { display: flex; align-items: center; gap: var(--space-4); }
.m-home .home-avg-num { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--violet-ink); }
.m-home .home-avg-max { font-size: var(--fs-md); font-weight: 700; color: var(--dim); margin-left: 2px; }
.m-home .home-avg-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m-home .home-avg-label { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.m-home .home-stars { display: inline-flex; gap: 2px; color: var(--stroke-strong); }
.m-home .home-stars .is-on { color: var(--amber); fill: currentColor; }

/* ---------- Activity ---------- */
.m-home .home-active-pill {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--green-soft); color: var(--green-ink); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
}
.m-home .home-activity .chart-heat { margin-left: auto; margin-right: auto; }
.m-home .home-activity-empty { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.m-home .home-activity-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.m-home .home-mini { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.m-home .home-mini .tile { width: 30px; height: 30px; border-radius: 10px; }
.m-home .home-mini-text { display: flex; flex-direction: column; min-width: 0; }
.m-home .home-mini-value { font-weight: 800; line-height: 1.2; }
.m-home .home-mini-label { font-size: 11px; font-weight: 650; color: var(--muted); line-height: 1.25; }

/* ---------- Tiga Jawaban ---------- */
.m-home .home-fears-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.m-home .home-fear {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0;
  min-height: 96px; padding: 12px 6px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--stroke); color: var(--text); text-align: center; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.m-home .home-fear:hover { border-color: var(--accent-glow); }
.m-home .home-fear:active { transform: scale(.97); }
.m-home .home-fear.is-open { background: var(--accent-soft); border-color: var(--accent-glow); box-shadow: 0 10px 22px -14px var(--accent-glow); }
.m-home .home-fear.is-open .tile { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.m-home .home-fear-title { font-size: var(--fs-sm); font-weight: 800; line-height: 1.2; }
.m-home .home-fear-short { font-size: 11px; font-weight: 650; line-height: 1.2; color: var(--muted); }
.m-home .home-fear-panel { margin-top: var(--space-3); }
.m-home .home-fear-hint { font-size: var(--fs-xs); font-weight: 600; color: var(--dim); text-align: center; }
.m-home .home-fear-answer {
  padding: 14px var(--space-4); border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent-glow);
  animation: homeReveal var(--dur) var(--ease-out);
}
@keyframes homeReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.m-home .home-fear-voice { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.m-home .home-fear-text { margin-top: 6px; font-weight: 650; color: var(--text); }
.m-home .home-fear-owner {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: var(--fs-xs); font-weight: 750; color: var(--accent-ink);
}

/* ---------- Install tip ---------- */
.m-home .home-install { border-style: dashed; border-color: var(--blue-glow); }
.m-home .home-install .card-body > * + * { margin-top: var(--space-3); }
.m-home .home-steps { display: flex; flex-direction: column; gap: 10px; }
.m-home .home-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); line-height: 1.45; color: var(--text); }
.m-home .home-step-n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800;
}

/* ---------- Online: hero sync chip ---------- */
.m-home .home-sync {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px 0 8px;
  border-radius: var(--radius-pill); border: 1px solid var(--stroke); background: var(--surface-2);
  font-size: 11px; font-weight: 750; letter-spacing: .02em; text-transform: none; color: var(--muted); cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
/* the chip stays compact, its tap target does not: invisible 44px hit area (SPEC §2), inside the hero's padding */
.m-home .home-sync::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%);
}
.m-home .home-sync[hidden] { display: none; }
.m-home .home-sync:hover { border-color: var(--stroke-strong); }
.m-home .home-sync:active { transform: scale(.96); }
.m-home .home-sync.is-ok { color: var(--green-ink); background: var(--green-soft); border-color: var(--green-glow); }
.m-home .home-sync.is-busy { color: var(--blue-ink); background: var(--blue-soft); border-color: var(--blue-glow); }
.m-home .home-sync.is-busy .ico { animation: spin 1.1s linear infinite; }
.m-home .home-sync.is-wait { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-glow); }
.m-home .home-sync.is-error { color: var(--red-ink); background: var(--red-soft); border-color: var(--red-glow); }

/* ---------- Online: Tim cabang hari ini (leader / gm) ---------- */
.m-home .home-team .card-body > * + * { margin-top: var(--space-4); }
.m-home .home-team-rev { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 12px; }
.m-home .home-team-rev-main { display: flex; flex-direction: column; min-width: 0; }
.m-home .home-team-rev-label { font-size: var(--fs-xs); font-weight: 750; color: var(--muted); }
.m-home .home-team-rev-value { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.m-home .home-team-rev-pct { font-size: var(--fs-sm); font-weight: 750; color: var(--blue-ink); }
.m-home .home-team-rev-pct.is-done { color: var(--green-ink); }
.m-home .home-team-rev + .home-team-bar { margin-top: var(--space-2); }
.m-home .home-team-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.m-home .home-team-mini { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid transparent; }
.m-home .home-team-mini .tile { width: 30px; height: 30px; border-radius: 10px; }
.m-home .home-team-mini-text { display: flex; flex-direction: column; min-width: 0; }
.m-home .home-team-mini-value { font-size: var(--fs-md); font-weight: 800; line-height: 1.2; }
.m-home .home-team-mini-label { font-size: 11px; font-weight: 650; color: var(--muted); line-height: 1.25; }
.m-home .home-team-mini.is-alert { background: var(--accent-soft); border-color: var(--accent-glow); }
.m-home .home-team-mini.is-alert .home-team-mini-value { color: var(--accent-ink); }
.m-home .home-team-branches { display: flex; flex-direction: column; }
.m-home .home-team-branches li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 3.4em; align-items: center; gap: 10px;
  min-height: 40px; font-size: var(--fs-sm);
}
.m-home .home-team-branches li + li { border-top: 1px solid var(--stroke); }
.m-home .home-team-branches .ico { color: var(--accent-ink); }
.m-home .home-team-branch-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-home .home-team-branch-val { font-weight: 750; }
.m-home .home-team-branch-pct { justify-self: end; font-size: var(--fs-xs); font-weight: 800; color: var(--muted); }
.m-home .home-team-branch-pct.is-done { color: var(--green-ink); }
.m-home .home-team-foot { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; color: var(--dim); }
.m-home .home-team-skel { display: grid; gap: 10px; }
.m-home .home-team-skel i {
  display: block; height: 14px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%;
  animation: homeShimmer 1.4s ease-in-out infinite;
}
.m-home .home-team-skel i:nth-child(1) { width: 45%; height: 26px; }
.m-home .home-team-skel i:nth-child(3) { width: 70%; }
@keyframes homeShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 720px) {
  .m-home .home-hero { padding: var(--space-7); }
  .m-home .home-hello { font-size: var(--fs-3xl); }
  .m-home .home-hero-main { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
  .m-home .home-hero-text { flex: 1; }
  .m-home .home-stats { flex: none; width: min(400px, 48%); }
  .m-home .home-stat-value { font-size: var(--fs-xl); }
  .m-home .home-level { margin-top: var(--space-5); }
  .m-home .home-team-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .m-home .home {
    display: grid; gap: var(--space-5);
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas: var(--home-areas, "hero hero" "focus quote" "kpis kpis" "main side");
  }
  .m-home .home-hero { grid-area: hero; }
  .m-home .home-team { grid-area: team; }
  .m-home .home-focus { grid-area: focus; display: flex; flex-direction: column; justify-content: center; }
  .m-home .home-quote { grid-area: quote; }
  .m-home .home-kpis { grid-area: kpis; }
  .m-home .home-col { display: flex; flex-direction: column; gap: var(--space-5); align-self: start; min-width: 0; }
  .m-home .home-col-main { grid-area: main; }
  .m-home .home-col-side { grid-area: side; }
  .m-home .home-focus-row { gap: var(--space-6); }
}

/* Reduced motion: base.css (.reduce-motion * and prefers-reduced-motion) already collapses every animation,
   including the infinite loops above, to a single near-zero iteration. */