/* ==========================================================================
   Mu Next — the home page, in the landing's own light.

   DIRECTION: the landing's world all the way down. Sky ground, frosted white
   plates with one hairline and one soft tinted shadow, one radius (16px),
   Constantine for figures, Jost for prose. One button system (.mbtn) with a
   single gold instance above the fold. No painted chrome, no dark sections,
   no asset buttons.
   ========================================================================== */

.page-home {
  --r: 16px;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --masthead-h: 68px;
}
@media (max-width: 640px) { .page-home { --masthead-h: 60px; } }

.page-home .shell { padding: 0; max-width: none; }
.page-home .shell__main--full { background: var(--sky); }
/* The header is a solid white bar that stays at the top while the page
   scrolls; the picture starts beneath it. */

/* ---- Buttons: one family, four fills ------------------------------------ */

.mbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-family: var(--display); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.16s var(--ease-out), box-shadow 0.22s var(--ease-out), background 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
}
.mbtn:hover { text-decoration: none; }
.mbtn:active { transform: scale(0.97); }
.mbtn .ico { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--ease-out); }
.mbtn:hover .ico { transform: translateX(3px); }
.mbtn--lg { height: 60px; padding: 0 34px; font-size: 17px; min-width: 220px; }

.mbtn--gold {
  color: #3a2708;
  background: linear-gradient(180deg, #ffd777, #f3b23f);
  border-color: rgba(120, 78, 10, 0.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 10px 28px rgba(201, 138, 30, 0.35), 0 2px 6px rgba(22, 38, 76, 0.12);
}
.mbtn--gold:hover { color: #3a2708; background: linear-gradient(180deg, #ffe08d, #f5b84b); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 16px 36px rgba(201, 138, 30, 0.42), 0 2px 6px rgba(22, 38, 76, 0.12); }

.mbtn--glass {
  color: var(--blue-deep);
  background: var(--glass);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 28px rgba(22, 38, 76, 0.14);
  backdrop-filter: blur(14px) saturate(1.2);
}
.mbtn--glass:hover { color: var(--blue-deep); background: var(--glass-strong); box-shadow: 0 1px 0 #fff inset, 0 14px 34px rgba(22, 38, 76, 0.18); }
.mbtn--glass:hover .ico { transform: translateY(3px); }

.mbtn--navy { color: #fff; background: linear-gradient(180deg, #2b4788, var(--blue)); border-color: var(--blue-deep); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 26px rgba(33, 57, 113, 0.28); }
.mbtn--navy:hover { color: #fff; background: linear-gradient(180deg, #33529a, #294582); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 14px 32px rgba(33, 57, 113, 0.34); }

.mbtn--outline { color: var(--blue); background: rgba(255, 255, 255, 0.5); border-color: rgba(33, 57, 113, 0.3); }
.mbtn--outline:hover { color: var(--blue-deep); background: #fff; border-color: var(--blue-soft); }

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(100svh, 960px);
  display: grid; place-items: center;
  padding: 72px var(--gutter) 150px;
  /* The landing's own picture. Anchored to its top edge, so the sky above the
     characters' heads is never cut off; whatever cover crops, it crops at the
     bottom, under the blurred strip. */
  background: url('../img/hero-bg.webp') center 30% / cover no-repeat;
}
/* The landing's pre-blurred strip of the same picture, laid along the bottom
   edge (.wrapper__blur). The picture does not move. */
.hero__blur { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: auto; object-fit: cover; z-index: 1; pointer-events: none; }
@media (max-width: 1280px) { .hero { background-position: center top; } }
.hero__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform; }
/* Its own compositor layer: the shadow is rasterised once, not on every frame
   of the arrival. Without this the filter is recomputed while it moves. */
.hero__logo { width: auto; height: clamp(140px, 22vw, 220px); filter: drop-shadow(0 14px 32px rgba(22, 38, 76, 0.24)); will-change: transform, opacity; transform: translateZ(0); }
.hero__title {
  max-width: 30ch; margin: 22px 0 0;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; letter-spacing: 0.14em; text-wrap: balance;
  color: var(--blue-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 34px rgba(255, 255, 255, 0.9);
}
.hero__title .w { display: inline-block; will-change: transform; }
.hero__sub {
  display: inline-flex; align-items: center; gap: 12px; margin: 16px 0 0;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.95);
}
.hero__sep { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }
.hero__actions { align-items: center; }

/* ---- The record: frosted plates on the sky ------------------------------ */

/* The landing's sky (.background) with its blurred strip along the top edge. */
.record {
  position: relative;
  padding-top: 20px; /* also keeps the plate's negative margin from pulling the section up over the picture */
  background: url('../img/mu-sky.webp') center top / cover no-repeat, var(--sky); /* the sky without the blue plate at the picture's foot; it fades into the flat sky */
}
.record__blur { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: auto; object-fit: cover; z-index: 1; pointer-events: none; }
/* The landing's blurred branches at the edges of the sky (.branch): the
   left one as it is there, a mirrored one lower on the right. */
.branch { position: absolute; z-index: 1; width: 25%; height: auto; pointer-events: none; }
.branch--left { top: 140px; left: 0; }
.branch--right { top: 42%; right: 0; transform: scaleX(-1); }
.record__inner { position: relative; z-index: 2; }
.record__inner { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter) 88px; }

.clock-plate {
  position: relative; margin-top: -120px; z-index: 3;
  display: grid; gap: 22px; padding: 30px 32px 26px; text-align: center;
  background: var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r);
  box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(22, 38, 76, 0.05), 0 24px 60px rgba(22, 38, 76, 0.16);
  /* No backdrop blur: the plate is 90% white already, and a blur would be
     re-sampled on every frame while the plate settles into view. */
}
.clock-plate__label { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-soft); }
.clock { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; font-family: var(--display); color: var(--blue-deep); font-variant-numeric: tabular-nums; min-height: 1.1em; }
.clock time { font-size: clamp(20px, 2.6vw, 28px); letter-spacing: 0.06em; }
.clock b { display: inline-block; min-width: 1.5ch; font-weight: 700; font-size: clamp(52px, 8vw, 92px); line-height: 1; letter-spacing: 0.02em; }
.clock small { margin: 0 18px 0 3px; font-family: var(--body); font-size: clamp(11px, 1.3vw, 14px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.clock small:last-child { margin-right: 0; }
.clock--online b { color: var(--ok); }
.clock-plate__date { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.clock-plate__time { position: absolute; top: 16px; right: 20px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }

.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 0; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.facts div { display: grid; gap: 3px; padding: 4px 26px; text-align: center; border-right: 1px solid var(--line-soft); }
.facts div:last-child { border-right: 0; }
.facts dt { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-family: var(--display); font-size: 19px; letter-spacing: 0.04em; color: var(--blue-deep); font-variant-numeric: tabular-nums; }

.rk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.rk { min-width: 0; padding: 18px 16px 14px; background: var(--glass-strong); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--r); box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(22, 38, 76, 0.05), 0 20px 50px rgba(22, 38, 76, 0.1); }
.rk__title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 4px 12px; font-size: 14px; letter-spacing: 0.16em; color: var(--blue); }
.rk__more { display: inline-flex; align-items: center; gap: 4px; font-family: var(--body); font-size: 12.5px; letter-spacing: 0.02em; text-transform: none; color: var(--muted); text-decoration: none; }
.rk__more .ico { width: 13px; height: 13px; transition: transform 0.2s var(--ease-out); }
.rk__more:hover { color: var(--blue); text-decoration: none; }
.rk__more:hover .ico { transform: translateX(3px); }
.rk__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rk__row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 44px; padding: 5px 12px 5px 6px; border-radius: 10px;
  transition: background 0.18s var(--ease-out);
}
.rk__row:hover { background: rgba(33, 57, 113, 0.05); }
.rk__row--top:first-child { background: linear-gradient(90deg, rgba(245, 184, 75, 0.2), rgba(245, 184, 75, 0.04)); }
.rk__rank { font-family: var(--display); font-size: 14px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.rk__row--top .rk__rank { color: var(--ink-gold); }
.rk__who { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-width: 0; }
.rk__face { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.rk__mark { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--plate-warm); border: 1px solid var(--line); overflow: hidden; }
.rk__mark img { display: block; width: 22px; height: 22px; image-rendering: pixelated; }
.rk__name { font-weight: 500; font-size: 14.5px; line-height: 1.2; color: var(--blue-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk__name a { color: inherit; text-decoration: none; }
.rk__name a:hover { color: var(--blue); }
.rk__cls { font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk__fig { font-family: var(--display); font-size: 16px; color: var(--blue); font-variant-numeric: tabular-nums; }
.rk__row--ghost { background: transparent; }
.rk__row--ghost .rk__rank, .rk__row--ghost .rk__fig { color: rgba(91, 100, 116, 0.4); }
.rk__ghost { display: block; width: 48%; height: 8px; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(33, 57, 113, 0.12) 0 6px, transparent 6px 10px); }

.rota { margin-top: 48px; }
.rota__title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 4px 14px; font-size: 14px; letter-spacing: 0.16em; color: var(--blue); }
.rota__time { font-family: var(--body); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.rota__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ev {
  display: grid; gap: 6px; min-width: 0; padding: 16px 16px 14px;
  background: var(--glass-strong); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--r);
  box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(22, 38, 76, 0.05), 0 14px 36px rgba(22, 38, 76, 0.09);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}
.ev:hover { transform: translateY(-2px); box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(22, 38, 76, 0.05), 0 20px 44px rgba(22, 38, 76, 0.13); }
.ev__name { font-family: var(--display); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev__next { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.ev__left { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.ev__left em { font-style: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ev__left b { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--blue); }
.ev__left .event-schedule-open, .ev__left .event-schedule-inprogress { color: var(--ok); }

.close { margin-top: 64px; display: grid; justify-items: center; text-align: center; gap: 22px; }
.close__line { max-width: 42ch; margin: 0; font-family: var(--display); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.4; letter-spacing: 0.05em; text-wrap: balance; color: var(--blue); }
.close__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Motion lives in js/home.js (GSAP). Without script the page is complete
   and still; with reduced motion the sections simply appear. */
.record.is-lit .rk, .record.is-lit .ev, .record.is-lit .clock-plate, .record.is-lit .close { opacity: 1; }


@media (max-width: 1100px) {
  .rk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk:last-child { grid-column: 1 / -1; }
  .rota__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .branch { width: 42%; }
  .hero { padding: 40px 18px 130px; min-height: 92svh; background-size: auto 100%; background-position: center top; }
  .record__blur { min-height: 80px; }
  .hero__title { letter-spacing: 0.1em; }
  .hero__actions { flex-direction: column; width: 100%; max-width: 340px; gap: 10px; }
  .mbtn--lg { width: 100%; }
  .record__inner { padding: 0 14px 64px; }
  .clock-plate { margin-top: -90px; padding: 24px 16px 20px; }
  .clock-plate__time { position: static; margin-top: -8px; }
  .clock small { margin-right: 10px; }
  .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts div { padding: 6px 4px; border-right: 0; }
  .facts div:first-child { grid-column: 1 / -1; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
  .facts dd { font-size: 16px; }
  .rk-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rk:last-child { grid-column: auto; }
  .rota__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ev { padding: 14px 12px 12px; }
  .ev__name { white-space: normal; font-size: 12px; line-height: 1.25; min-height: 2.5em; }
  .ev__left { display: grid; gap: 1px; }
  .close__ways { width: 100%; flex-direction: column; }
  .close__ways .mbtn { width: 100%; }
}

/* ---- Night ------------------------------------------------------------- */

:root[data-theme="dark"] .page-home {
  --glass: rgba(20, 30, 51, 0.72);
  --glass-strong: rgba(20, 30, 51, 0.9);
}
/* One veil over the picture and its blurred strip, and the same veil over the
   sky and its strip, so the two strips still meet without a seam. */
:root[data-theme="dark"] .hero::after,
:root[data-theme="dark"] .record::after { content: ""; position: absolute; inset: 0; background: var(--veil); pointer-events: none; }
:root[data-theme="dark"] .hero::after {
  z-index: 2;
  /* The veil opens behind the emblem: the portal's light stays as it is by day,
     so the silver reads exactly as it does on the light site. */
  -webkit-mask-image: radial-gradient(ellipse min(620px, 80vw) min(520px, 52vh) at 50% var(--logo-y, 34%), transparent 0%, transparent 44%, #000 100%);
  mask-image: radial-gradient(ellipse min(620px, 80vw) min(520px, 52vh) at 50% var(--logo-y, 34%), transparent 0%, transparent 44%, #000 100%);
}
:root[data-theme="dark"] .record::after { z-index: 1; }
/* The words stand in the same opening of daylight as the emblem, so they keep
   their daylight ink. */
:root[data-theme="dark"] .hero__title { color: #16264c; }
:root[data-theme="dark"] .hero__sub { color: #213971; }
/* The logo keeps its daylight shadow: a black one smears grey across the picture. */
:root[data-theme="dark"] .mbtn--glass { color: var(--blue-deep); border-color: rgba(179, 196, 234, 0.2); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] .mbtn--glass:hover { color: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .mbtn--navy { background: linear-gradient(180deg, #3a5aa6, #2b4788); border-color: #3a5aa6; }
:root[data-theme="dark"] .mbtn--outline { color: var(--blue); background: rgba(179, 196, 234, 0.06); border-color: var(--line); }
:root[data-theme="dark"] .mbtn--outline:hover { color: var(--blue-deep); background: rgba(179, 196, 234, 0.12); }
:root[data-theme="dark"] .clock-plate, :root[data-theme="dark"] .rk, :root[data-theme="dark"] .ev {
  border-color: rgba(179, 196, 234, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 6px rgba(0, 0, 0, 0.25), 0 24px 60px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .rk__row:hover { background: rgba(179, 196, 234, 0.06); }
:root[data-theme="dark"] .rk__row--ghost .rk__rank, :root[data-theme="dark"] .rk__row--ghost .rk__fig { color: rgba(141, 153, 177, 0.4); }
:root[data-theme="dark"] .ev:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 20px 44px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .mbtn--gold, :root[data-theme="dark"] .mbtn--gold:hover { box-shadow: 0 10px 28px rgba(201, 138, 30, 0.3); }

/* ---- The Discord plate: the one thing the bottom of the page asks for ---- */
.close { gap: 18px; }
.ds {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px;
  width: min(980px, 100%); padding: 30px 34px; text-align: left;
  border-radius: 20px;
  background: linear-gradient(120deg, #3c45a5 0%, #5865f2 55%, #6d78f5 100%);
  box-shadow: 0 24px 60px rgba(40, 48, 140, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.ds::before {
  content: ""; position: absolute; right: -60px; top: -80px; z-index: -1; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 65%);
}
.ds__mark { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: rgba(255, 255, 255, 0.14); }
.ds__mark img { width: 48px; height: auto; filter: brightness(0) invert(1); }
.ds__title { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.06em; line-height: 1.15; color: #fff; text-transform: uppercase; }
.ds__text { margin: 8px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.ds__counts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.86); }
.ds__counts b { font-family: var(--display); font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; margin-right: 2px; }
.ds__online { display: inline-flex; align-items: center; gap: 8px; }
.ds__online i { width: 9px; height: 9px; border-radius: 50%; background: #3ba55d; box-shadow: 0 0 0 3px rgba(59, 165, 93, 0.35); }
.ds__join {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 30px; border-radius: 999px;
  font-family: var(--display); font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: #2b2f8a; background: #fff; text-decoration: none;
  box-shadow: 0 12px 28px rgba(20, 24, 90, 0.35);
  transition: box-shadow 0.25s var(--ease-out), transform 0.16s var(--ease-out);
}
.ds__join .ico { width: 18px; height: 18px; transition: transform 0.25s var(--ease-out); }
.ds__join::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(88, 101, 242, 0.25) 48%, transparent 66%); transform: translateX(-120%); }
.ds__join:hover { color: #1f2370; text-decoration: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 16px 36px rgba(20, 24, 90, 0.45); }
.ds__join:hover::after { transform: translateX(120%); transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
.ds__join:hover .ico { transform: translateX(3px); }
.ds__join:active { transform: scale(0.97); }
.close__wiki { font-size: 14.5px; color: #c9d5ef; }
.close__wiki:hover { color: #fff; }
@media (max-width: 860px) {
  .ds { grid-template-columns: auto minmax(0, 1fr); padding: 24px 22px; gap: 18px; }
  .ds__join { grid-column: 1 / -1; justify-content: center; width: 100%; }
  .ds__mark { width: 60px; height: 60px; border-radius: 18px; }
  .ds__mark img { width: 34px; }
}

/* ---- Discord plate, in the site's own plate: calm, with one clear action ---- */
.ds {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  width: min(980px, 100%); padding: 26px 30px; text-align: left;
  border-radius: var(--r); background: #111b2f; border: 1px solid rgba(179, 196, 234, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 24px 60px rgba(0, 0, 0, 0.4);
  overflow: visible; isolation: auto;
}
.ds::before { display: none; }
.ds__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(88, 101, 242, 0.16); color: #8c95ff; }
.ds__mark svg { width: 34px; height: 34px; }
.ds__mark img { display: none; }
.ds__title { font-size: clamp(20px, 2.1vw, 26px); color: var(--blue-deep); }
.ds__text { color: var(--muted); }
.ds__counts { color: var(--muted); }
.ds__counts b { color: var(--blue-deep); }
.ds__join {
  gap: 10px; height: 54px; padding: 0 26px; font-size: 15px; letter-spacing: 0.1em;
  color: #fff; background: #5865f2; box-shadow: 0 10px 26px rgba(88, 101, 242, 0.3);
}
.ds__join svg { width: 20px; height: 20px; }
.ds__join::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%); }
.ds__join:hover { color: #fff; background: #6773f4; box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.35), 0 12px 30px rgba(88, 101, 242, 0.4); }
@media (max-width: 860px) { .ds__mark { width: 52px; height: 52px; } .ds__mark svg { width: 28px; height: 28px; } }

/* ---- Hero: the live Discord line under the two buttons ---- */
.hero__ds {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 16px 8px 12px;
  border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none;
  color: #1c2a55; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 22px rgba(22, 38, 76, 0.18);
  transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.hero__ds svg { width: 18px; height: 18px; color: #5865f2; }
.hero__ds i { width: 8px; height: 8px; border-radius: 50%; background: #3ba55d; box-shadow: 0 0 0 3px rgba(59, 165, 93, 0.25); }
.hero__ds:hover { color: #111a3a; background: #fff; box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.25), 0 10px 26px rgba(22, 38, 76, 0.22); text-decoration: none; }
/* ==========================================================================
   Hero words: always two short lines that stand between the characters,
   in any language, and readable even where they touch the armour.
   ========================================================================== */

.hero__title {
  max-width: clamp(280px, 34vw, 600px);
  font-size: clamp(22px, 2.6vw, 42px);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 18px rgba(255, 255, 255, 0.95), 0 0 42px rgba(255, 255, 255, 0.9);
}
.hero__sub {
  flex-wrap: wrap; justify-content: center; max-width: clamp(260px, 34vw, 560px);
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 24px rgba(255, 255, 255, 0.9);
}
.hero__inner { position: relative; }
.hero__inner::before {
  content: ""; position: absolute; left: 50%; top: 58%; z-index: -1; pointer-events: none;
  width: clamp(360px, 44vw, 760px); height: 62%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0) 72%);
}
@media (max-width: 720px) {
  .hero__title { max-width: 92vw; font-size: clamp(22px, 7vw, 32px); }
  .hero__sub { max-width: 92vw; }
}

/* ==========================================================================
   Why Mu Next · Starter guide
   ========================================================================== */

.sec-head { margin: 72px auto 28px; max-width: 720px; text-align: center; }
.sec-head__title { margin: 0; font-size: clamp(26px, 3vw, 36px); letter-spacing: 0.08em; color: var(--blue-deep); }
.sec-head__lead { margin: 10px auto 0; max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--muted); }

.why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.why__hero {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 32px;
  padding: 34px 36px; border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 90% at 100% 0%, rgba(88, 130, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 80% at 0% 100%, rgba(245, 184, 75, 0.1), transparent 70%),
    var(--plate);
  border: 1px solid rgba(179, 196, 234, 0.14); box-shadow: var(--shadow-plate);
}
.why__hero-title { margin: 0; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.06em; color: var(--blue-deep); }
.why__hero-text p { margin: 12px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.why__link { display: inline-block; margin-top: 16px; font-size: 14.5px; }
.why__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.why__spec {
  display: grid; align-content: center; gap: 4px; min-height: 104px; padding: 16px 18px; border-radius: 14px;
  background: rgba(12, 20, 36, 0.55); border: 1px solid rgba(179, 196, 234, 0.1);
}
.why__spec dt { font-family: var(--display); font-size: 34px; line-height: 1; letter-spacing: 0.02em; color: #eef2fb; }
.why__spec dt svg { width: 34px; height: 34px; color: #8fb6ff; }
.why__spec dd { margin: 0; font-size: 13.5px; color: var(--muted); }
.why__spec--big { grid-row: span 2; background: linear-gradient(160deg, rgba(245, 184, 75, 0.16), rgba(12, 20, 36, 0.55) 70%); border-color: rgba(245, 184, 75, 0.3); }
.why__spec--big dt { font-size: clamp(56px, 6vw, 84px); color: #ffd98a; }
.why__spec--big dd { font-size: 14.5px; color: #e3d2ad; }

.why__tile { padding: 22px 22px 20px; border-radius: 16px; background: var(--plate); border: 1px solid var(--plate-edge); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.why__tile:hover { border-color: rgba(179, 196, 234, 0.22); background: #131f35; }
.why__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #f1c46a; background: rgba(245, 184, 75, 0.1); }
.why__icon svg { width: 22px; height: 22px; }
.why__title { margin: 14px 0 0; font-family: var(--body); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--blue-deep); }
.why__text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.road__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.road__step { position: relative; display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 16px; background: var(--plate); border: 1px solid var(--plate-edge); }
.road__num {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--display); font-size: 17px; color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f);
  box-shadow: 0 6px 18px rgba(201, 138, 30, 0.3);
}
.road__title { margin: 14px 0 0; font-size: 18px; letter-spacing: 0.06em; color: var(--blue-deep); }
.road__text { margin: 8px 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.road__more { margin-top: auto; font-size: 14px; }
.road__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }

@media (max-width: 960px) {
  .why__hero { grid-template-columns: 1fr; }
  .why__grid, .road__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sec-head { margin-top: 52px; }
  .why__grid, .road__steps { grid-template-columns: 1fr; }
  .why__hero { padding: 24px 20px; }
  .why__spec--big { grid-row: auto; grid-column: 1 / -1; }
  .road__cta .mbtn { width: 100%; }
}

.why__spec:last-child { grid-column: 1 / -1; min-height: 0; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }

/* Section heads stand on the bright sky: light ink with a dark halo. */
.sec-head__title { color: #f2f5fc; text-shadow: 0 2px 18px rgba(4, 8, 20, 0.75), 0 0 2px rgba(4, 8, 20, 0.6); }
.sec-head__lead { color: #e3e9f6; font-size: 16.5px; text-shadow: 0 1px 12px rgba(4, 8, 20, 0.9), 0 0 2px rgba(4, 8, 20, 0.8); }
.hero__inner { opacity: 1; }

/* ---- The launch clock, a little quieter -------------------------------- */
.clock-plate { gap: 16px; padding: 24px 30px 20px; }
.clock b { font-size: clamp(44px, 6.4vw, 72px); }
.clock time { font-size: clamp(18px, 2.2vw, 24px); }
.clock-plate__date { margin-top: 8px; }
.facts { padding-top: 16px; }
.facts dd { font-size: 18px; }

/* ---- Three frames from the client, inside the graphics plate -------------- */
.why__shots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; padding-top: 22px; border-top: 1px solid rgba(179, 196, 234, 0.12); }
.shot {
  position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9;
  border: 1px solid rgba(179, 196, 234, 0.14); background: #0c1424;
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.shot:hover { border-color: rgba(245, 184, 75, 0.55); box-shadow: 0 0 0 3px rgba(245, 184, 75, 0.14); }
.shot:hover img { transform: scale(1.04); }
.shot:focus-visible { outline: 2px solid #ffd777; outline-offset: 3px; }
.shot__cap {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: 0.06em; color: #eef2fb; background: rgba(6, 12, 28, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 640px) { .why__shots { grid-template-columns: 1fr; gap: 8px; } }

/* ---- The lightbox: one picture, the rest of the page dimmed --------------- */
.lightbox { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; color: #eef2fb; }
.lightbox::backdrop { background: rgba(4, 8, 20, 0.88); }
.lightbox[open] { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 10px; }
.lightbox__img { width: min(92vw, 1280px, calc((100vh - 120px) * 16 / 9)); height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.lightbox__cap { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #aab6cf; }
.lightbox__nav, .lightbox__close {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  font-size: 30px; line-height: 1; color: #eef2fb; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.16s var(--ease);
}
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox__nav { justify-self: center; }
.lightbox__close { position: fixed; top: 16px; right: 16px; font-size: 26px; }
@media (max-width: 640px) { .lightbox[open] { grid-template-columns: 1fr; } .lightbox__nav { position: fixed; bottom: 18px; } .lightbox__nav--prev { left: 18px; } .lightbox__nav--next { right: 18px; } .lightbox__img { width: 96vw; } }