/* ============================================================================
   Home page
   ----------------------------------------------------------------------------
   All .hm- prefixed. The page still loads Phoenix's theme for the navbar, footer
   and the subscribe modal, so nothing here uses a bare element selector.
   ========================================================================= */

:root {
  --hm-ink:    #131a33;
  /* Was #6b7794, which lands at 4.48:1 on white - just under AA for the small print it is
     used for (card descriptions, stat labels, panel subtitles). This is the same grey two shades
     down, at 4.73:1. */
  --hm-muted:  #68738f;
  --hm-line:   rgba(27, 45, 90, .09);
  --hm-card:   #fff;
  --hm-soft:   #f7f8fc;
  --hm-violet: #5b4bd6;
}
[data-bs-theme="dark"] {
  --hm-ink:   #f2f4fb;
  --hm-muted: #98a2be;
  --hm-line:  #2b3247;
  --hm-card:  #171c2c;
  --hm-soft:  #1c2233;
}

.hm-panel {
  background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: 1.25rem;
  padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; box-shadow: 0 1px 2px rgba(22, 20, 58, .04);
}
.hm-panel-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.hm-panel-head b { font-size: 1rem; font-weight: 750; color: var(--hm-ink); }
.hm-panel-head i { display: block; font-style: normal; font-size: .8rem; color: var(--hm-muted);
  margin-top: .12rem; }
.hm-panel-head > a {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; font-size: .8rem; font-weight: 650; color: var(--hm-violet);
  white-space: nowrap;
}
.hm-panel-head > a:hover { filter: brightness(1.1); }

/* ---------- hero ---------- */
.hm-hero {
  position: relative; overflow: hidden; border-radius: 1.5rem;
  background: linear-gradient(120deg, #fcfbff 0%, #f8f9ff 55%, #f5f6ff 100%);
  border: 1px solid rgba(99, 102, 241, .10);
  padding: 2.2rem 2rem 1.6rem; margin-bottom: 1.2rem;
}
.hm-hero-grid { display: grid; gap: 1.5rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
@media (max-width: 1199.98px) {
  .hm-hero-grid { grid-template-columns: 1fr; }
  .hm-hero-art { display: none; }
}

.hm-badge {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem;
  padding: .42rem .95rem; border-radius: 2rem; font-size: .78rem; font-weight: 700;
  color: #15803d; background: rgba(22, 163, 74, .10); border: 1px solid rgba(22, 163, 74, .22);
}
.hm-badge .fa-circle-check { font-size: .95rem; }
/* Amber while the catalogue is still being filled, so "in progress" never wears the done colour */
.hm-badge.building { color: #b45309; background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .3); }
.hm-badge .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #f59e0b; }

.hm-hero-copy h1 {
  margin: 0 0 .8rem; font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.08; color: var(--hm-ink);
}
.hm-hero-copy h1 .hl { color: var(--hm-violet); }
.hm-lede { margin: 0; max-width: 34rem; font-size: .95rem; line-height: 1.65; color: var(--hm-muted); }

.hm-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.hm-cta, .hm-cta2 {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  /* Square, matching sign-in, the tools, topics and projects. Both CTAs together: they sit
     side by side, and squaring only the primary would read as a mistake. */
  padding: .8rem 1.5rem; border-radius: 0; font-size: .92rem; font-weight: 700;
  white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hm-cta { color: #fff; border: 0; background: linear-gradient(135deg, #7c6cf3, #5b4bd6);
  box-shadow: 0 .35rem .9rem rgba(91, 75, 214, .32); }
.hm-cta:hover { color: #fff; filter: brightness(1.07); transform: translateY(-1px); }
.hm-cta2 { background: var(--hm-card); color: #3a4668; border: 1px solid var(--hm-line);
  box-shadow: 0 1px 2px rgba(22, 20, 58, .05); }
.hm-cta2:hover { color: var(--hm-violet); border-color: rgba(91, 75, 214, .45);
  transform: translateY(-1px); }

/* ---- the laptop ---- */
.hm-hero-art { position: relative; }
.hm-laptop { position: relative; }
.hm-screen {
  border-radius: .9rem; overflow: hidden; background: #12172b;
  box-shadow: 0 1.2rem 2.4rem rgba(19, 26, 51, .22);
}
.hm-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; background: #1b2138; }
.hm-bar .d { width: .6rem; height: .6rem; border-radius: 50%; }
.hm-bar .d.r { background: #ff5f57; } .hm-bar .d.y { background: #febc2e; }
.hm-bar .d.g { background: #28c840; }
.hm-file { margin-left: .5rem; font-size: .7rem; color: #9aa3c7; }

.hm-code {
  margin: 0; padding: .8rem 1rem; font-size: .72rem; line-height: 1.75; color: #c3cbef;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: auto;
}
.hm-code .ln { display: inline-block; width: 1.4rem; color: #4d5680; user-select: none; }
.hm-code .k { color: #ff7b72; } .hm-code .c { color: #7ee787; } .hm-code .f { color: #d2a8ff; }
.hm-code .s { color: #a5d6ff; } .hm-code .n { color: #79c0ff; }

.hm-out { border-top: 1px solid #262d47; background: #161b30; }
.hm-out-head { display: flex; align-items: center; padding: .5rem .9rem; font-size: .72rem;
  font-weight: 700; color: #c3cbef; }
.hm-out-head .ok { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 650; color: #4ade80; }
.hm-out pre { margin: 0; padding: 0 .9rem .8rem; font-size: .7rem; line-height: 1.7; color: #9aa3c7;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hm-deck { display: block; height: .55rem; margin: 0 auto; width: 86%;
  background: linear-gradient(180deg, #dfe3f3, #c9cfe6); border-radius: 0 0 .5rem .5rem; }

/* Floating technology cards. Absolute so they sit off the laptop's corners the way the
   reference has them; they are decoration and vanish with the artwork below 1200px. */
.hm-float {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .55rem .7rem; border-radius: .8rem; font-size: .68rem; font-weight: 700;
  color: var(--hm-ink); background: var(--hm-card); border: 1px solid var(--hm-line);
  box-shadow: 0 .5rem 1.1rem rgba(19, 26, 51, .10);
}
.hm-float-ico { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-size: 1.1rem; }
.hm-float-ico svg { width: 100%; height: 100%; }
.hm-float.f1 { top: -.5rem;   left: -3.2rem; }
.hm-float.f2 { top: 5.2rem;   left: -4.4rem; }
.hm-float.f3 { top: 10.8rem;  left: -3.2rem; }
.hm-float.f4 { top: -.5rem;   right: -3.2rem; }
.hm-float.f5 { top: 5.6rem;   right: -3.8rem; }
@media (max-width: 1399.98px) { .hm-float { display: none; } }

/* ---- trust row ---- */
.hm-trust { display: flex; flex-wrap: wrap; gap: 1.6rem; list-style: none; margin: 1.6rem 0 0;
  padding: 0; }
.hm-trust li { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem;
  font-weight: 650; color: var(--hm-ink); }
.hm-trust .ok { color: #16a34a; } .hm-trust .doc { color: #d97706; }
.hm-trust .test { color: #2563eb; } .hm-trust .work { color: #7c3aed; }

/* ---------- the two runnable things ---------- */
.hm-duo { display: grid; gap: 1rem; margin-bottom: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.hm-duo-card {
  display: flex; align-items: flex-start; gap: .9rem; text-decoration: none;
  padding: 1.2rem 1.3rem; border-radius: 1.1rem; border: 1px solid var(--hm-line);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hm-duo-card:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.3rem rgba(22, 20, 58, .1); }
.hm-duo-card.violet { background: #f5f3ff; }
.hm-duo-card.green  { background: #f0fdf4; }
[data-bs-theme="dark"] .hm-duo-card.violet { background: #1e1b3a; }
[data-bs-theme="dark"] .hm-duo-card.green  { background: #14251d; }
.hm-duo-ico { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: .9rem; display: grid;
  place-items: center; font-size: 1.15rem; background: var(--hm-card); }
.hm-duo-card.violet .hm-duo-ico { color: #6d28d9; }
.hm-duo-card.green  .hm-duo-ico { color: #15803d; }
.hm-duo-txt b { display: block; font-size: 1rem; font-weight: 750; color: var(--hm-ink); }
.hm-duo-txt i { display: block; font-style: normal; font-size: .82rem; line-height: 1.55;
  color: var(--hm-muted); margin: .2rem 0 .6rem; }
.hm-duo-txt em { display: inline-flex; align-items: center; gap: .4rem; font-style: normal;
  font-size: .8rem; font-weight: 700; padding: .35rem .8rem; border-radius: .6rem;
  background: var(--hm-card); }
.hm-duo-card.violet em { color: #6d28d9; }
.hm-duo-card.green  em { color: #15803d; }

/* ---------- counters ---------- */
.hm-stats {
  display: grid; gap: 0; margin-bottom: 1.2rem; padding: 1.3rem .4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(22, 20, 58, .04);
}
.hm-stat { position: relative; display: flex; align-items: center; gap: .85rem; padding: 0 1.1rem;
  min-width: 0; }
.hm-stat + .hm-stat::before { content: ""; position: absolute; left: 0; top: .1rem; bottom: .1rem;
  width: 1px; background: var(--hm-line); }
.hm-stat-ico { flex: 0 0 auto; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid;
  place-items: center; font-size: 1.25rem; }
.hm-stat.t1 .hm-stat-ico { color: #e8642f; background: rgba(232, 100, 47, .12); }
.hm-stat.t2 .hm-stat-ico { color: #16a34a; background: rgba(22, 163, 74, .12); }
.hm-stat.t3 .hm-stat-ico { color: #6d5ae6; background: rgba(109, 90, 230, .12); }
.hm-stat.t4 .hm-stat-ico { color: #d97706; background: rgba(245, 158, 11, .14); }
.hm-stat.t5 .hm-stat-ico { color: #2563eb; background: rgba(37, 99, 235, .11); }
.hm-stat-txt { min-width: 0; }
.hm-stat-txt b { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--hm-ink); }
.hm-stat.t1 b { color: #e8642f; } .hm-stat.t2 b { color: #16a34a; }
.hm-stat.t3 b { color: #6d5ae6; } .hm-stat.t4 b { color: #d97706; }
.hm-stat.t5 b { color: #2563eb; }
.hm-stat-txt i { display: block; font-style: normal; font-size: .82rem; font-weight: 750;
  color: var(--hm-ink); margin-top: .1rem; }
.hm-stat-txt em { display: block; font-style: normal; font-size: .72rem; line-height: 1.4;
  color: var(--hm-muted); margin-top: .15rem; }

/* ---------- technologies ---------- */
.hm-techs { display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.hm-tech {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  padding: .8rem .9rem; border-radius: .8rem; font-size: .85rem; font-weight: 700;
  color: var(--hm-ink); background: var(--hm-card); border: 1px solid var(--hm-line);
  box-shadow: 0 1px 2px rgba(22, 20, 58, .04);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hm-tech:hover { color: var(--hm-ink); transform: translateY(-2px);
  border-color: rgba(91, 75, 214, .35); box-shadow: 0 .4rem .9rem rgba(22, 20, 58, .08); }
.hm-tech-ico { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  font-size: 1.15rem; }
.hm-tech-ico svg { width: 100%; height: 100%; display: block; }
.hm-tech.more { border-style: dashed; color: var(--hm-muted); }

/* ---------- learning path ---------- */
.hm-path { display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.hm-stage {
  position: relative; display: flex; flex-direction: column; gap: .3rem; text-decoration: none;
  padding: 1.4rem 1rem 1rem; border-radius: 1rem; border: 1px solid var(--hm-line);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hm-stage:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.1rem rgba(22, 20, 58, .09); }
.hm-stage-n {
  position: absolute; top: -.7rem; left: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff;
}
.hm-stage-ico { width: 2.6rem; height: 2.6rem; border-radius: .8rem; margin-bottom: .3rem;
  display: grid; place-items: center; font-size: 1rem; background: var(--hm-card); }
.hm-stage b { font-size: .92rem; font-weight: 750; }
.hm-stage i { font-style: normal; font-size: .76rem; line-height: 1.45; color: var(--hm-muted);
  flex: 1 1 auto; }
.hm-stage-bar { display: block; height: .3rem; border-radius: 999px; overflow: hidden;
  background: rgba(27, 45, 90, .1); margin-top: .5rem; }
.hm-stage-bar em { display: block; height: 100%; border-radius: 999px;
  transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.hm-stage-n2 { font-size: .72rem; font-weight: 650; color: var(--hm-muted); margin-top: .35rem; }

.hm-stage.t1 { background: #fef2f2; } .hm-stage.t1 b { color: #b91c1c; }
.hm-stage.t1 .hm-stage-n, .hm-stage.t1 .hm-stage-bar em { background: #dc2626; }
.hm-stage.t1 .hm-stage-ico { color: #dc2626; }
.hm-stage.t2 { background: #eff6ff; } .hm-stage.t2 b { color: #1d4ed8; }
.hm-stage.t2 .hm-stage-n, .hm-stage.t2 .hm-stage-bar em { background: #2563eb; }
.hm-stage.t2 .hm-stage-ico { color: #2563eb; }
.hm-stage.t3 { background: #f0fdf4; } .hm-stage.t3 b { color: #15803d; }
.hm-stage.t3 .hm-stage-n, .hm-stage.t3 .hm-stage-bar em { background: #16a34a; }
.hm-stage.t3 .hm-stage-ico { color: #16a34a; }
.hm-stage.t4 { background: #fff7ed; } .hm-stage.t4 b { color: #b45309; }
.hm-stage.t4 .hm-stage-n, .hm-stage.t4 .hm-stage-bar em { background: #f59e0b; }
.hm-stage.t4 .hm-stage-ico { color: #d97706; }
.hm-stage.t5 { background: #fdf2f8; } .hm-stage.t5 b { color: #a3405a; }
.hm-stage.t5 .hm-stage-n, .hm-stage.t5 .hm-stage-bar em { background: #ec4899; }
.hm-stage.t5 .hm-stage-ico { color: #a3405a; }
.hm-stage.t6 { background: #f5f3ff; } .hm-stage.t6 b { color: #6d28d9; }
.hm-stage.t6 .hm-stage-n, .hm-stage.t6 .hm-stage-bar em { background: #7c3aed; }
.hm-stage.t6 .hm-stage-ico { color: #6d28d9; }

[data-bs-theme="dark"] .hm-stage.t1 { background: #2a1717; }
[data-bs-theme="dark"] .hm-stage.t2 { background: #172136; }
[data-bs-theme="dark"] .hm-stage.t3 { background: #14251d; }
[data-bs-theme="dark"] .hm-stage.t4 { background: #2a1f14; }
[data-bs-theme="dark"] .hm-stage.t5 { background: #2a1722; }
[data-bs-theme="dark"] .hm-stage.t6 { background: #1e1b3a; }
[data-bs-theme="dark"] .hm-stage-ico { background: #1c2233; }
[data-bs-theme="dark"] .hm-stage-bar { background: #2b3247; }

/* ---------- tools + featured ---------- */
.hm-split { display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.hm-tools { display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.hm-tool {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center;
  padding: .9rem .5rem; border-radius: .9rem; text-decoration: none;
  font-size: .72rem; font-weight: 650; color: var(--hm-ink);
  border: 1px solid var(--hm-line); background: var(--hm-card);
  transition: transform .15s ease, border-color .15s ease;
}
.hm-tool:hover { color: var(--hm-violet); transform: translateY(-2px);
  border-color: rgba(91, 75, 214, .35); }
.hm-tool-ico { width: 2.3rem; height: 2.3rem; border-radius: .7rem; display: grid;
  place-items: center; font-size: .95rem; color: var(--hm-violet);
  background: rgba(91, 75, 214, .1); }

.hm-feat { display: flex; flex-direction: column; gap: .5rem; }
.hm-feat-row {
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
  padding: .7rem .8rem; border-radius: .8rem; border: 1px solid var(--hm-line);
  background: var(--hm-card); transition: border-color .15s ease, transform .15s ease;
}
.hm-feat-row:hover { transform: translateY(-1px); border-color: rgba(91, 75, 214, .3); }
.hm-feat-ico { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: .65rem;
  display: grid; place-items: center; font-size: .85rem; }
.hm-feat-txt { flex: 1 1 auto; min-width: 0; }
.hm-feat-txt b { display: block; font-size: .84rem; font-weight: 700; color: var(--hm-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-feat-tag { display: inline-block; margin-top: .2rem; font-size: .66rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 999px; }
.hm-feat-votes { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700; color: #16a34a; }

/* ---------- newsletter ---------- */
.hm-sub {
  display: grid; gap: 1.4rem; align-items: center; margin: 1.2rem 0;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 22rem);
  padding: 1.6rem 1.8rem; border-radius: 1.5rem;
  background: linear-gradient(120deg, #f3f0ff 0%, #efeeff 60%, #f6f3ff 100%);
  border: 1px solid rgba(99, 102, 241, .16);
}
@media (max-width: 1199.98px) { .hm-sub { grid-template-columns: 1fr; } }
.hm-sub-art { flex: 0 0 auto; }
.hm-sub-box {
  width: 5.5rem; height: 5.5rem; border-radius: 1.2rem; display: grid; place-items: center;
  background: linear-gradient(135deg, #a78bfa, #6d28d9);
  box-shadow: 0 .7rem 1.6rem rgba(109, 40, 217, .32);
}
.hm-sub-box b { font-size: 2rem; font-weight: 800; color: #fff; }
.hm-sub-txt h2 { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.65rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.25; color: var(--hm-ink); }
.hm-sub-txt h2 .free { color: #16a34a; }
.hm-sub-txt h2 .hl { color: var(--hm-violet); }
.hm-sub-txt p { margin: .5rem 0 .8rem; font-size: .85rem; color: var(--hm-muted); }
.hm-sub-notes { display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.hm-sub-notes li { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem;
  font-weight: 650; color: var(--hm-ink); }
.hm-sub-notes .fa-circle-xmark { color: #dc2626; }
.hm-sub-notes .fa-circle-check { color: #2563eb; }
.hm-sub-notes .fa-bolt { color: #16a34a; }

.hm-sub-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.hm-sub-input {
  flex: 1 1 12rem; min-width: 0; padding: .8rem 1rem; border-radius: .8rem;
  background: var(--hm-card); border: 1px solid var(--hm-line); color: var(--hm-ink);
  font-size: .88rem;
}
.hm-sub-input:focus { outline: none; border-color: rgba(91, 75, 214, .45);
  box-shadow: 0 0 0 .18rem rgba(91, 75, 214, .12); }
.hm-sub-btn {
  flex: 0 0 auto; padding: .8rem 1.6rem; border: 0; border-radius: 0; cursor: pointer;
  font-size: .88rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7c6cf3, #5b4bd6);
  box-shadow: 0 .3rem .8rem rgba(91, 75, 214, .3);
}
.hm-sub-btn:hover { filter: brightness(1.07); }
.hm-sub-btn:disabled { opacity: .65; cursor: default; }
.hm-sub-msg { flex: 1 1 100%; min-height: 1.2rem; font-size: .8rem; }

/* ---------- closing strip ---------- */
.hm-perks {
  display: grid; gap: 0; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border: 1px solid var(--hm-line); border-radius: 1.25rem; overflow: hidden;
}
.hm-perk { display: flex; align-items: flex-start; gap: .8rem; padding: 1.15rem 1.2rem;
  min-width: 0; background: var(--hm-card); }
.hm-perk + .hm-perk { border-left: 1px solid var(--hm-line); }
@media (max-width: 991.98px) {
  .hm-perk + .hm-perk { border-left: 0; border-top: 1px solid var(--hm-line); }
}
.hm-perk-ico { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: .8rem;
  display: grid; place-items: center; font-size: .95rem; }
.hm-perk.t1 .hm-perk-ico { color: #16a34a; background: rgba(22, 163, 74, .12); }
.hm-perk.t2 .hm-perk-ico { color: #2563eb; background: rgba(37, 99, 235, .11); }
.hm-perk.t3 .hm-perk-ico { color: #d97706; background: rgba(245, 158, 11, .14); }
.hm-perk.t4 .hm-perk-ico { color: #6d28d9; background: rgba(109, 40, 217, .12); }
.hm-perk-txt b { display: block; font-size: .86rem; font-weight: 750; color: var(--hm-ink); }
.hm-perk-txt i { display: block; font-style: normal; font-size: .78rem; line-height: 1.5;
  color: var(--hm-muted); margin-top: .15rem; }

@media (max-width: 767.98px) {
  .hm-hero { padding: 1.5rem 1.15rem 1.2rem; }
  .hm-ctas .hm-cta, .hm-ctas .hm-cta2 { flex: 1 1 12rem; justify-content: center; }
  .hm-trust { gap: .8rem 1.2rem; }
  .hm-sub { padding: 1.3rem 1.15rem; }
  .hm-sub-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-cta, .hm-cta2, .hm-tech, .hm-tool, .hm-stage, .hm-duo-card, .hm-feat-row { transition: none; }
  .hm-cta:hover, .hm-cta2:hover, .hm-tech:hover, .hm-tool:hover, .hm-stage:hover,
  .hm-duo-card:hover, .hm-feat-row:hover { transform: none; }
  .hm-stage-bar em { transition: none; }
}

/* The hero and the newsletter band are authored light-first with literal gradients, so each
   needs restating in dark - a token swap cannot reach inside a gradient. */
[data-bs-theme="dark"] .hm-hero {
  background: linear-gradient(120deg, #1b1936 0%, #181c30 55%, #1a182e 100%);
  border-color: rgba(129, 140, 248, .18);
}
[data-bs-theme="dark"] .hm-sub {
  background: linear-gradient(120deg, #1d1b3c, #191d33);
  border-color: rgba(129, 140, 248, .2);
}
[data-bs-theme="dark"] .hm-badge { background: rgba(22, 163, 74, .14);
  border-color: rgba(74, 222, 128, .28); color: #4ade80; }
[data-bs-theme="dark"] .hm-badge.building { background: rgba(245, 158, 11, .14);
  border-color: rgba(251, 191, 36, .3); color: #fbbf24; }
[data-bs-theme="dark"] .hm-cta2 { background: #171c2c; color: #d5dbf0; border-color: #2b3247; }
[data-bs-theme="dark"] .hm-duo-txt em { background: #171c2c; }
[data-bs-theme="dark"] .hm-duo-ico { background: #171c2c; }
[data-bs-theme="dark"] .hm-float { background: #171c2c; border-color: #2b3247; }
[data-bs-theme="dark"] .hm-sub-txt h2 .free { color: #4ade80; }

/* ============================================================================
   Spacing + counter marks
   ========================================================================= */

/* The theme puts 56px of padding on a bare <section>, top AND bottom. Every band here that
   declares its own padding already overrides it, but .hm-duo and .hm-perks are layout grids
   with none of their own - so each was carrying 112px of dead space, which is the gap between
   the hero, the two run cards and the counters. Stated explicitly rather than left to inherit. */
.hm-hero, .hm-duo, .hm-stats, .hm-panel, .hm-sub, .hm-perks { padding-block: 0; }
.hm-hero  { padding: 2.2rem 2rem 1.6rem; }
.hm-duo   { padding: 0; }
.hm-stats { padding: 1.3rem .4rem; }
.hm-panel { padding: 1.2rem 1.3rem; }
.hm-sub   { padding: 1.6rem 1.8rem; }
.hm-perks { padding: 0; }

/* Tighter rhythm between bands: the reference stacks them close so the page reads as one
   surface rather than a column of separated slabs. */
.hm-hero, .hm-duo, .hm-stats, .hm-panel { margin-bottom: 1rem; }
.hm-sub { margin: 1rem 0; }
.hm-perks { margin-bottom: 1.5rem; }
.hm-split { margin-bottom: 1rem; }

/* The marks are inline SVG now, so font-size no longer sizes them; the badge sets the box and
   the stroke inherits the tone's colour. */
.hm-stat-ico svg { width: 55%; height: 55%; display: block; }

/* Tones matched to the reference: the rocket is warm red rather than orange. The fifth badge
   stays blue - violet would repeat the Maven/Gradle hue two places along, and five counters in
   a row only work as a legend if no two share a colour. */
.hm-stat.t1 .hm-stat-ico { color: #e8642f; background: rgba(232, 100, 47, .12); }
.hm-stat.t1 b { color: #e8642f; }
.hm-stat.t5 .hm-stat-ico { color: #2563eb; background: rgba(37, 99, 235, .11); }
.hm-stat.t5 b { color: #2563eb; }

@media (max-width: 767.98px) {
  .hm-hero { padding: 1.5rem 1.15rem 1.2rem; }
  .hm-sub  { padding: 1.3rem 1.15rem; }
}

/* ============================================================================
   Hero artwork as a real three-column row, and the connector arrows
   ============================================================================
   The technology cards used to be position:absolute off the laptop's corners, which meant they
   had to be hidden as soon as the artwork narrowed - so on a 1280px screen, which is most of
   them, they simply were not on the page. As columns they shrink with the artwork instead. */
.hm-hero-art { display: flex; align-items: center; gap: .8rem; }
.hm-laptop { flex: 1 1 auto; min-width: 0; }
.hm-techcol { flex: 0 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.hm-techcol.right { align-items: center; }

/* Static, in the flow - the absolute placement and its media-query hide are both gone. */
.hm-float {
  position: static; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  width: 4.6rem; padding: .55rem .4rem; border-radius: .8rem;
  font-size: .66rem; font-weight: 700; text-align: center; line-height: 1.2;
  color: var(--hm-ink); background: var(--hm-card); border: 1px solid var(--hm-line);
  box-shadow: 0 .4rem .9rem rgba(19, 26, 51, .08);
}
.hm-plant { width: 3rem; height: auto; margin-top: .3rem; }

/* Below 1200px the whole artwork is hidden anyway; this only governs the band above it. */
@media (max-width: 1399.98px) {
  .hm-float { width: 4.1rem; font-size: .62rem; }
  .hm-plant { width: 2.4rem; }
}

/* ---- Kong and Kafka beside the two run cards ---- */
.hm-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: stretch; }
.hm-duo-side { display: flex; gap: .7rem; align-items: center; }
@media (max-width: 1199.98px) {
  .hm-duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .hm-duo-side { display: none; }
}

/* ---- learning path connectors ---- */
.hm-path { display: flex; flex-wrap: wrap; align-items: stretch; gap: .8rem; }
.hm-path .hm-stage { flex: 1 1 12rem; min-width: 0; }
.hm-stage-arrow {
  flex: 0 0 auto; align-self: center; display: grid; place-items: center;
  width: 1.6rem; color: #b8c0d8; font-size: .8rem;
}
/* The arrow says "then this one". Once the cards wrap it stops meaning that, so it goes. */
@media (max-width: 1199.98px) { .hm-stage-arrow { display: none; } }
[data-bs-theme="dark"] .hm-stage-arrow { color: #4a5474; }

/* ============================================================================
   Second pass: editor toolbar, three feature cards, richer featured rows
   ========================================================================= */

/* ---- editor toolbar ---- */
.hm-bar { gap: .45rem; padding: .5rem .7rem; }
.hm-file { margin-left: .45rem; padding: .2rem .55rem; border-radius: .35rem;
  background: #2a3050; color: #c3cbef; font-size: .66rem; }

/* ---- three feature cards ---- */
.hm-duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.hm-duo-card.amber { background: #fff7ed; }
[data-bs-theme="dark"] .hm-duo-card.amber { background: #2a1f14; }
.hm-duo-card.amber .hm-duo-ico,
.hm-duo-card.amber em { color: #c2670a; }

/* Three abreast means less room per card, so the copy tightens rather than the card growing. */
.hm-duo-card { padding: 1.1rem 1.15rem; }
.hm-duo-txt b { font-size: .95rem; }
.hm-duo-txt i { font-size: .78rem; margin: .18rem 0 .55rem; }

/* ---- hero columns now carry three a side ---- */
.hm-techcol { gap: .55rem; }

/* ---- tools: the "more" tile reads as a way out, not a seventh tool ---- */
.hm-tool.more { border-style: dashed; }
.hm-tool.more .hm-tool-ico { color: var(--hm-muted); background: rgba(27, 45, 90, .06); }
[data-bs-theme="dark"] .hm-tool.more .hm-tool-ico { background: rgba(255, 255, 255, .06); }

/* ---- featured rows ---- */
.hm-feat-row { align-items: flex-start; padding: .85rem .9rem; }
.hm-feat-ico { width: 2.4rem; height: 2.4rem; font-size: .9rem; margin-top: .1rem; }
.hm-feat-txt i { display: block; font-style: normal; font-size: .74rem; line-height: 1.45;
  color: var(--hm-muted); margin: .15rem 0 .35rem; }
.hm-feat-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.hm-feat-tag { margin-top: 0; }
.hm-feat-end { flex: 0 0 auto; display: flex; align-items: center; gap: .7rem; margin-top: .15rem; }
/* A real affordance: the catalogue page is where the download lives, and that is where the row
   goes - the icon says what you will find, it does not pretend to download from here. */
.hm-feat-dl { display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: .5rem; color: var(--hm-muted); background: rgba(27, 45, 90, .06);
  font-size: .75rem; }
.hm-feat-row:hover .hm-feat-dl { color: var(--hm-violet); background: rgba(91, 75, 214, .12); }
[data-bs-theme="dark"] .hm-feat-dl { background: rgba(255, 255, 255, .06); }

/* ============================================================================
   Third pass: light editor, checklist cards, dashed path arrows
   ========================================================================= */

/* ---- badge: a line of text with a mark, not a filled pill ---- */
.hm-badge { background: none; border: 0; padding: 0; margin-bottom: 1.2rem;
  color: #15803d; font-weight: 650; font-size: .82rem; }
.hm-badge.building { background: none; border: 0; color: #b45309; }
[data-bs-theme="dark"] .hm-badge { background: none; border: 0; color: #4ade80; }
[data-bs-theme="dark"] .hm-badge.building { background: none; border: 0; color: #fbbf24; }

.hm-hero-copy h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.hm-lede { font-size: 1rem; }

/* ---- hero trust line ---- */
.hm-trust { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none;
  margin: 1.5rem 0 0; padding: 0; }
.hm-trust li { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem;
  font-weight: 600; color: var(--hm-muted); }
.hm-trust .fa-circle-check { color: #16a34a; font-size: .85rem; }

/* ---- the editor, light ----
   The reference shows a light editor, not a terminal. Everything inside is restated because the
   previous pass painted this panel dark and none of those colours read on white. */
.hm-hero-art { display: block; position: relative; }
.hm-editor {
  position: relative; z-index: 1; border-radius: 1rem; overflow: hidden;
  background: var(--hm-card); border: 1px solid var(--hm-line);
  box-shadow: 0 1rem 2.2rem rgba(19, 26, 51, .10);
}
.hm-bar { display: flex; align-items: center; gap: .55rem; padding: .7rem .9rem;
  background: var(--hm-card); border-bottom: 1px solid var(--hm-line); }
.hm-bar .d.g { width: .65rem; height: .65rem; border-radius: 50%; background: #22c55e; }
.hm-file { margin-left: 0; padding: 0; background: none; font-size: .82rem; font-weight: 700;
  color: var(--hm-ink); }

.hm-code { background: var(--hm-card); color: #3a4668; padding: .9rem 1rem; font-size: .74rem;
  line-height: 1.85; }
.hm-code .ln { width: 1.6rem; color: #b3bad2; }
.hm-code .k { color: #7c3aed; } .hm-code .c { color: #0891b2; } .hm-code .f { color: #2563eb; }
.hm-code .s { color: #15803d; } .hm-code .n { color: #b45309; }

.hm-out { background: var(--hm-soft); border-top: 1px solid var(--hm-line); }
.hm-out-head { display: flex; align-items: center; padding: .6rem .95rem .3rem;
  font-size: .78rem; font-weight: 700; color: var(--hm-ink); }
.hm-clear { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; color: var(--hm-muted); }
.hm-out pre { padding: .1rem .95rem .5rem; font-size: .74rem; line-height: 1.75;
  color: #56658a; }
.hm-out-foot { padding: 0 .95rem .8rem; text-align: right; font-size: .74rem; font-weight: 700;
  color: #16a34a; }

/* Decorative dot grids either side, the way the reference frames the editor. */
.hm-dots { position: absolute; width: 5rem; height: 6rem; opacity: .8; pointer-events: none;
  background-image: radial-gradient(circle, #cfd6ee 1.5px, transparent 1.6px);
  background-size: 13px 13px; }
.hm-dots.l { left: -3.2rem; top: 3rem; }
.hm-dots.r { right: -3.2rem; bottom: 1.5rem; }
@media (max-width: 1399.98px) { .hm-dots { display: none; } }
[data-bs-theme="dark"] .hm-dots {
  background-image: radial-gradient(circle, #39415f 1.5px, transparent 1.6px); }

/* ---- the three cards, now checklists ---- */
.hm-duo-card { display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 1.3rem 1.35rem; }
.hm-duo-card:hover { transform: none; box-shadow: none; }
.hm-duo-ico { width: 2.8rem; height: 2.8rem; border-radius: .8rem; margin-bottom: .8rem; }
.hm-duo-card > b { font-size: 1.02rem; font-weight: 750; color: var(--hm-ink);
  margin-bottom: .7rem; }
.hm-duo-card ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.hm-duo-card li { display: flex; align-items: flex-start; gap: .5rem; padding: .22rem 0;
  font-size: .82rem; line-height: 1.5; color: var(--hm-muted); }
.hm-duo-card li .fa-check { margin-top: .2rem; font-size: .7rem; }
.hm-duo-card > a { margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; font-size: .84rem; font-weight: 700; }
.hm-duo-card.violet li .fa-check, .hm-duo-card.violet > a { color: #6d28d9; }
.hm-duo-card.green  li .fa-check, .hm-duo-card.green  > a { color: #15803d; }
.hm-duo-card.amber  li .fa-check, .hm-duo-card.amber  > a { color: #c2670a; }

/* ---- dashed connectors, as the reference draws them ---- */
.hm-stage-arrow { color: #b8c0d8; font-size: .75rem; letter-spacing: -.1em; }
.hm-stage-arrow::before { content: "- - "; }
.hm-stage-arrow .fa-arrow-right { font-size: .7rem; }

/* ---- subscribe: the gift box, and the notes as a row under both columns ---- */
.hm-sub { grid-template-columns: auto minmax(0, 1fr) minmax(0, 24rem); row-gap: .9rem; }
.hm-sub-art { width: 9rem; grid-row: span 2; align-self: center; }
.hm-sub-art svg { display: block; width: 100%; height: auto; }
/* The notes sit beneath the copy and the form, spanning both, rather than tucked under one. */
.hm-sub-notes { grid-column: 2 / -1; margin-top: 0; }
@media (max-width: 1199.98px) {
  .hm-sub { grid-template-columns: auto minmax(0, 1fr); }
  .hm-sub-art { grid-row: span 3; width: 7rem; }
  .hm-sub-notes { grid-column: 2 / -1; }
}
@media (max-width: 767.98px) {
  .hm-sub { grid-template-columns: 1fr; }
  .hm-sub-art { grid-row: auto; width: 6.5rem; margin: 0 auto; }
  .hm-sub-notes { grid-column: 1; justify-content: center; }
}

/* The light editor's ink and syntax palette are chosen against white. In dark the card flips to
   #171c2c and every one of them has to be lifted, or the snippet is dark-on-dark. */
[data-bs-theme="dark"] .hm-code { color: #c3cbef; }
[data-bs-theme="dark"] .hm-code .ln { color: #4d5680; }
[data-bs-theme="dark"] .hm-code .k { color: #c4b5fd; }
[data-bs-theme="dark"] .hm-code .c { color: #67e8f9; }
[data-bs-theme="dark"] .hm-code .f { color: #93c5fd; }
[data-bs-theme="dark"] .hm-code .s { color: #6ee7b7; }
[data-bs-theme="dark"] .hm-code .n { color: #fbbf24; }
[data-bs-theme="dark"] .hm-out pre { color: #98a2be; }
[data-bs-theme="dark"] .hm-out-foot { color: #4ade80; }
[data-bs-theme="dark"] .hm-file { color: #f2f4fb; }
[data-bs-theme="dark"] .hm-clear { color: #98a2be; }

/* ---- Ada, at the editor's top-right corner ----
   Positioned over the artwork rather than in the flow: she overlaps the editor's corner in the
   reference, and giving her a column of her own would push the editor narrower on every screen.
   The artwork is already position:relative, so this anchors to it. */
.hm-ada {
  position: absolute; top: -3.2rem; right: -1.2rem; z-index: 2;
  width: 10rem; pointer-events: none;
}
.hm-ada svg { display: block; width: 100%; height: auto; }
/* A soft disc behind her so she reads against both the page and the editor she overlaps. */
.hm-ada::before {
  content: ""; position: absolute; inset: 12% 8% 22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 243, .16), rgba(124, 108, 243, 0) 70%);
}
@media (max-width: 1399.98px) { .hm-ada { width: 8rem; top: -2.4rem; right: -.6rem; } }
/* Below 1200px the artwork itself is hidden, so she goes with it. */

/* ============================================================================
   "Everything you can do here" - the eight ways in
   ----------------------------------------------------------------------------
   Replaces the old three-card hm-duo strip, which still described a site with a
   compiler, a sandbox and a project list on it. There are eight rooms now, and a
   visitor landing on the home page had no way of learning about six of them.

   Every card carries a small looping MOTIF that acts out what the thing does -
   code typing itself, a call crossing the wire and coming back 200, rows landing
   in a table. A row of eight icons says "eight features"; eight little scenes say
   what each one IS, which is the job an icon cannot do. CSS only, transform and
   opacity only: no script, no image requests, no layout thrash while they loop.

   PAUSED UNTIL SEEN. The motifs run only while .hm-ways carries .in, which the
   observer adds when the section scrolls into view. Eight infinite animations
   ticking away below the fold is a battery cost paid by every visitor, including
   the one who never scrolls this far.

   The accent is one custom property per card (--a / --a-soft), used by the disc,
   the motif, the CTA and the hover edge, so the colour is a property of the card
   rather than four rules to keep in step.
   ========================================================================== */
.hm-ways { margin-bottom: 1.2rem; padding: 0; }

.hm-ways-head { text-align: center; max-width: 44rem; margin: 0 auto 1.5rem; }
.hm-ways-kicker {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--hm-violet);
  padding: .35rem .8rem; border-radius: 2rem; background: rgba(91, 75, 214, .1);
}
[data-bs-theme="dark"] .hm-ways-kicker { color: #c4b5fd; background: rgba(139, 92, 246, .16); }
.hm-ways-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 800;
  letter-spacing: -.02em; color: var(--hm-ink); margin: .7rem 0 .4rem; }
.hm-ways-head p { font-size: .95rem; line-height: 1.65; color: var(--hm-muted); margin: 0; }

.hm-ways-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
/* Four across, so the two sandboxes and the database sit on the first row with the
   things people already come for, rather than below where a first visit stops reading. */
@media (min-width: 1200px) { .hm-ways-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- the card ---- */
.way {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  border-radius: 1.1rem; border: 1px solid var(--hm-line); background: var(--hm-card);
  /* The reveal. Cards start displaced and .in releases them on a stagger, so the strip
     assembles in reading order instead of appearing all at once. --d is each card's place
     in that order, set in the markup. */
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease, border-color .18s ease, box-shadow .18s ease;
}
.hm-ways.in .way {
  opacity: 1; transform: none;
  transition-delay: calc(var(--d, 0) * 70ms), calc(var(--d, 0) * 70ms), 0s, 0s;
}
.way:hover { border-color: var(--a); box-shadow: 0 .8rem 1.6rem rgba(22, 20, 58, .1); }
.way:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

/* ---- the motif window ---- */
.way-art {
  position: relative; display: block; height: 5.4rem; overflow: hidden;
  background: radial-gradient(12rem 6rem at 78% -30%, var(--a-soft), transparent 70%), var(--hm-soft);
  border-bottom: 1px solid var(--hm-line);
}
/* Every motif is one span filling the same box, so eight different scenes still line up. */
.way-art > span { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: .3rem; }

/* Scoped to .way-body, NOT .way: the motifs below are built from bare b / i / u elements,
   and a descendant rule on .way would reach into them and hand the scenery the description's
   margins. */
.way-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.way-ico {
  width: 2.4rem; height: 2.4rem; border-radius: .75rem; display: grid; place-items: center;
  font-size: .95rem; background: var(--a-soft); color: var(--a); margin-bottom: .6rem;
  transition: transform .18s ease;
}
.way:hover .way-ico { transform: scale(1.08) rotate(-4deg); }
.way-body b { display: block; font-size: .98rem; font-weight: 780; letter-spacing: -.01em;
  color: var(--hm-ink); }
.way-body i { display: block; font-style: normal; font-size: .82rem; line-height: 1.6;
  color: var(--hm-muted); margin: .3rem 0 .8rem; flex: 1 1 auto; }
.way-body em {
  display: inline-flex; align-items: center; gap: .4rem; font-style: normal; font-size: .8rem;
  font-weight: 750; color: var(--a); margin-top: auto;
}
.way-body em > span { transition: transform .18s ease; }
.way:hover .way-body em > span { transform: translateX(4px); }

/* ---- accents ---- */
.way-learn     { --a: #6d28d9; --a-soft: rgba(139, 92, 246, .14); }
.way-topics    { --a: #0369a1; --a-soft: rgba(14, 165, 233, .14); }
.way-runner    { --a: #b45309; --a-soft: rgba(245, 158, 11, .16); }
.way-api       { --a: #15803d; --a-soft: rgba(34, 197, 94, .14); }
.way-db        { --a: #0f766e; --a-soft: rgba(20, 184, 166, .15); }
.way-projects  { --a: #be123c; --a-soft: rgba(244, 63, 94, .13); }
.way-interview { --a: #a21caf; --a-soft: rgba(192, 38, 211, .13); }
.way-tools     { --a: #4338ca; --a-soft: rgba(99, 102, 241, .14); }
/* The same indigo the two Kafka tools and both Kafka Lab pages carry. Close to way-tools above it
   on purpose rather than by accident: on this site indigo means Kafka, and a card that introduces
   the feature should wear the colour the reader will meet on the other side of the click. */
.way-kafka     { --a: #4f46e5; --a-soft: rgba(79, 70, 229, .14); }
[data-bs-theme="dark"] .way-learn     { --a: #c4b5fd; }
[data-bs-theme="dark"] .way-topics    { --a: #7dd3fc; }
[data-bs-theme="dark"] .way-runner    { --a: #fcd34d; }
[data-bs-theme="dark"] .way-api       { --a: #86efac; }
[data-bs-theme="dark"] .way-db        { --a: #5eead4; }
[data-bs-theme="dark"] .way-projects  { --a: #fda4af; }
[data-bs-theme="dark"] .way-interview { --a: #f0abfc; }
[data-bs-theme="dark"] .way-tools     { --a: #a5b4fc; }
[data-bs-theme="dark"] .way-kafka     { --a: #a5b4fc; }

/* ============================ the motifs ============================
   All nine are paused by default and released together by .hm-ways.in. */
.way-art *, .way-art *::after { animation-play-state: paused; }
.hm-ways.in .way-art *, .hm-ways.in .way-art *::after { animation-play-state: running; }

/* 1. Learn - a track filling, its stops lighting one after another. */
.m-track { gap: 1.7rem !important; }
.m-track u { position: absolute; top: 50%; left: 50%; width: 7.8rem; height: 2px;
  margin-top: -1px; transform: translateX(-50%); text-decoration: none;
  background: var(--hm-line); border-radius: 2px; }
.m-track u::after { content: ""; position: absolute; inset: 0; border-radius: 2px;
  background: var(--a); transform-origin: left center; transform: scaleX(0);
  animation: trackFill 4.4s ease-in-out infinite; }
.m-track i { position: relative; z-index: 1; width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--hm-card); border: 2px solid var(--hm-line);
  animation: stopOn 4.4s ease-in-out infinite; }
.m-track i:nth-child(1) { animation-delay: .1s; }
.m-track i:nth-child(2) { animation-delay: 1.1s; }
.m-track i:nth-child(3) { animation-delay: 2.1s; }
.m-track i:nth-child(4) { animation-delay: 3.1s; }
@keyframes trackFill { 0% { transform: scaleX(0); } 75%, 100% { transform: scaleX(1); } }
@keyframes stopOn {
  0%, 8%   { background: var(--hm-card); border-color: var(--hm-line); transform: scale(1); }
  16%, 92% { background: var(--a); border-color: var(--a); transform: scale(1.25); }
  100%     { background: var(--hm-card); border-color: var(--hm-line); transform: scale(1); }
}

/* 2. Topics - a shelf of subjects, one lighting at a time, the way you pick one. */
.m-chips { flex-wrap: wrap; padding: 0 1rem; gap: .26rem !important; }
.m-chips i { font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .02em;
  padding: .2rem .45rem; border-radius: .4rem; background: var(--hm-card);
  border: 1px solid var(--hm-line); color: var(--hm-muted);
  animation: chipOn 5s ease-in-out infinite; }
.m-chips i:nth-child(1) { animation-delay: 0s; }
.m-chips i:nth-child(2) { animation-delay: .8s; }
.m-chips i:nth-child(3) { animation-delay: 1.6s; }
.m-chips i:nth-child(4) { animation-delay: 2.4s; }
.m-chips i:nth-child(5) { animation-delay: 3.2s; }
@keyframes chipOn {
  0%, 10%, 26%, 100% { background: var(--hm-card); color: var(--hm-muted);
                       border-color: var(--hm-line); transform: translateY(0); }
  14%, 22%           { background: var(--a); color: #fff; border-color: var(--a);
                       transform: translateY(-2px); }
}

/* 3. Java Sandbox - three lines type themselves, then the run comes back green. */
.m-code { flex-direction: column; align-items: flex-start !important; gap: .28rem !important;
  padding-left: 1.7rem; }
.m-code i { display: block; height: .34rem; border-radius: .2rem; background: var(--hm-line);
  width: 0; animation: typeLine 4.6s ease-in-out infinite; }
.m-code i:nth-child(1) { --w: 4.6rem; animation-delay: .2s; }
.m-code i:nth-child(2) { --w: 6.2rem; animation-delay: .8s; background: var(--a); opacity: .55; }
.m-code i:nth-child(3) { --w: 3.4rem; animation-delay: 1.4s; }
.m-code u { position: absolute; right: .7rem; bottom: .6rem; font-size: .55rem; font-weight: 800;
  letter-spacing: .04em; text-decoration: none; color: #15803d; padding: .12rem .35rem;
  border-radius: .3rem; background: rgba(34, 197, 94, .16); opacity: 0;
  animation: okFlash 4.6s ease-in-out infinite; }
[data-bs-theme="dark"] .m-code u { color: #86efac; }
@keyframes typeLine { 0%, 4% { width: 0; } 24%, 82% { width: var(--w); } 100% { width: 0; } }
@keyframes okFlash { 0%, 42% { opacity: 0; transform: translateY(3px); }
                     52%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 4. Spring Boot Sandbox - a call leaves, crosses the wire, comes back 200. */
.m-api { gap: .45rem !important; }
.m-api b, .m-api u { font-size: .55rem; font-weight: 800; letter-spacing: .04em;
  text-decoration: none; padding: .2rem .4rem; border-radius: .35rem; background: var(--hm-card);
  border: 1px solid var(--hm-line); color: var(--hm-muted); }
.m-api u { color: var(--a); border-color: var(--a); animation: okPop 3.6s ease-in-out infinite; }
.m-api s { position: relative; display: block; width: 3.2rem; height: 2px; border-radius: 2px;
  background: var(--hm-line); text-decoration: none; }
.m-api s::after { content: ""; position: absolute; top: 50%; left: 0; width: .5rem; height: .5rem;
  margin-top: -.25rem; border-radius: 50%; background: var(--a);
  box-shadow: 0 0 0 .25rem var(--a-soft); animation: wire 3.6s ease-in-out infinite; }
@keyframes wire { 0%, 6% { left: 0; opacity: 0; } 12% { opacity: 1; }
                  56% { left: calc(100% - .5rem); opacity: 1; }
                  66%, 100% { left: calc(100% - .5rem); opacity: 0; } }
@keyframes okPop { 0%, 60% { transform: scale(1); } 68% { transform: scale(1.18); }
                   78%, 100% { transform: scale(1); } }

/* 5. Spring Boot + Database - rows landing in a table that is still there tomorrow. */
.m-db { flex-direction: column; gap: .22rem !important; }
.m-db b { width: 3.6rem; height: .5rem; border-radius: .3rem; background: var(--a); opacity: .85; }
.m-db i { display: block; width: 3.6rem; height: .34rem; border-radius: .2rem;
  background: var(--hm-line); animation: rowIn 3.8s ease-in-out infinite; }
.m-db i:nth-child(2) { animation-delay: .25s; }
.m-db i:nth-child(3) { animation-delay: .55s; }
.m-db i:nth-child(4) { animation-delay: .85s; }
@keyframes rowIn { 0%, 6% { opacity: 0; transform: translateX(-6px); }
                   20%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 6. Kafka Lab - a record leaving the producer and landing across the partitions.
   The dot reuses the `wire` keyframe the API motif already defines: it is the same idea, a message
   crossing a link, and a second animation that did the same thing slightly differently would read
   as an inconsistency rather than as variety. */
.m-kafka { flex-direction: column; gap: .26rem !important; }
.m-kafka s {
  position: relative; display: block; width: 3.6rem; height: 2px; border-radius: 2px;
  background: var(--hm-line); text-decoration: none; margin-bottom: .12rem;
}
.m-kafka s::after {
  content: ""; position: absolute; top: 50%; left: 0; width: .45rem; height: .45rem;
  margin-top: -.225rem; border-radius: 50%; background: var(--a);
  box-shadow: 0 0 0 .22rem var(--a-soft); animation: wire 3.6s ease-in-out infinite;
}
/* The three partitions it can land in. Only one lights per cycle, offset so the run reads as a
   record being placed by its key rather than as three arriving at once. */
.m-kafka i {
  display: block; width: 3.6rem; height: .3rem; border-radius: .2rem;
  background: var(--hm-line); animation: partHit 3.6s ease-in-out infinite;
}
.m-kafka i:nth-child(2) { animation-delay: .1s; }
.m-kafka i:nth-child(3) { animation-delay: 1.3s; }
.m-kafka i:nth-child(4) { animation-delay: 2.5s; }
@keyframes partHit {
  0%, 52% { background: var(--hm-line); }
  60%, 74% { background: var(--a); }
  86%, 100% { background: var(--hm-line); }
}

/* 7. Projects - a stack fanning open as it is picked up. */
.m-stack i { position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 3.1rem;
  margin: -1.55rem 0 0 -1.3rem; border-radius: .4rem; background: var(--hm-card);
  border: 1px solid var(--hm-line); animation: fan 4.2s ease-in-out infinite; }
.m-stack i:nth-child(1) { --x: -1.5rem; --r: -9deg; animation-delay: 0s; }
.m-stack i:nth-child(2) { border-color: var(--a); animation-delay: .18s; }
.m-stack i:nth-child(3) { --x: 1.5rem; --r: 9deg; animation-delay: .36s; }
@keyframes fan {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  45%, 70% { transform: translate(var(--x, 0), -3px) rotate(var(--r, 0deg)); }
}

/* 8. Interview - a question, an answer, and a score coming back. */
.m-chat { flex-direction: column; align-items: flex-start !important; gap: .3rem !important;
  padding-left: 1.5rem; }
.m-chat i { display: block; height: .55rem; border-radius: .4rem; background: var(--hm-line);
  animation: bubble 4.4s ease-in-out infinite; }
.m-chat i:nth-child(1) { width: 4rem; animation-delay: .2s; }
.m-chat i:nth-child(2) { width: 2.8rem; margin-left: 1.5rem; background: var(--a); opacity: .55;
  animation-delay: 1.1s; }
.m-chat u { position: absolute; right: .85rem; top: 50%; margin-top: -.9rem; width: 1.8rem;
  height: 1.8rem; border-radius: 50%; text-decoration: none;
  border: 2px solid var(--hm-line); border-top-color: var(--a); border-right-color: var(--a);
  opacity: 0; animation: scoreIn 4.4s ease-in-out infinite; }
@keyframes bubble { 0%, 6% { opacity: 0; transform: translateY(4px); }
                    18%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes scoreIn { 0%, 48% { opacity: 0; transform: rotate(-90deg) scale(.7); }
                     62%, 86% { opacity: 1; transform: rotate(270deg) scale(1); }
                     100% { opacity: 0; transform: rotate(270deg) scale(1); } }

/* 9. Free Tools - a drawer of small things, each catching the light in turn. */
.m-grid { display: grid !important; grid-template-columns: repeat(3, 1.35rem);
  place-content: center; gap: .3rem !important; }
.m-grid i { display: block; height: 1.1rem; border-radius: .3rem; background: var(--hm-card);
  border: 1px solid var(--hm-line); animation: twinkle 3.6s ease-in-out infinite; }
.m-grid i:nth-child(1) { animation-delay: 0s; }
.m-grid i:nth-child(2) { animation-delay: .3s; }
.m-grid i:nth-child(3) { animation-delay: .6s; }
.m-grid i:nth-child(4) { animation-delay: .9s; }
.m-grid i:nth-child(5) { animation-delay: 1.2s; }
.m-grid i:nth-child(6) { animation-delay: 1.5s; }
@keyframes twinkle {
  0%, 14%, 42%, 100% { background: var(--hm-card); border-color: var(--hm-line); transform: none; }
  24%, 32%           { background: var(--a-soft); border-color: var(--a); transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .way { opacity: 1 !important; transform: none !important; transition: none !important; }
  .way-art *, .way-art *::after { animation: none !important; }
  .way:hover .way-ico, .way:hover .way-body em > span { transform: none; }
  /* The motifs are mid-loop shapes, so with animation off they need a resting state that still
     reads. Without this the code lines are 0 wide and the card looks broken rather than calm. */
  .m-code i { width: var(--w); }
  .m-code u, .m-chat u { opacity: 1; }
  .m-track u::after { transform: scaleX(1); }
}