/* ==========================================================================
   Mathos Locos — public home 2026
   Page role: SEO-safe public entry. User flow: level -> objective -> work.
   Scope intentionally isolated under .ml-public-home-page / .ml-public-home.
   ========================================================================== */

.ml-public-home-page {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: #020817;
  color: #f8fbff;
  font-family: var(--font-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.ml-public-home,
.ml-public-home *,
.ml-public-home *::before,
.ml-public-home *::after { box-sizing: border-box; }

.ml-public-home {
  --ml-bg: #020817;
  --ml-bg-2: #071226;
  --ml-surface: rgba(12, 22, 44, 0.72);
  --ml-surface-strong: rgba(12, 22, 44, 0.92);
  --ml-border: rgba(161, 177, 217, 0.20);
  --ml-border-soft: rgba(161, 177, 217, 0.12);
  --ml-text: #f8fbff;
  --ml-muted: #a9b8d3;
  --ml-faint: rgba(169, 184, 211, 0.70);
  --ml-cyan: #19e6d2;
  --ml-blue: #2d8cff;
  --ml-purple: #8b5cf6;
  --ml-violet: #6d3df0;
  --ml-green: #25e5a5;
  --ml-shadow-purple: 0 0 0 1px rgba(139, 92, 246, 0.46), 0 0 34px rgba(106, 70, 255, 0.32), 0 24px 74px rgba(0, 0, 0, 0.42);
  --ml-radius-xl: 28px;
  --ml-radius-lg: 22px;
  --ml-radius-md: 15px;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(114, 64, 255, 0.20), transparent 32%),
    radial-gradient(circle at 88% 22%, rgba(22, 146, 255, 0.16), transparent 34%),
    radial-gradient(circle at 50% 105%, rgba(25, 230, 210, 0.10), transparent 38%),
    linear-gradient(180deg, #020817 0%, #071226 54%, #020817 100%);
}

.ml-public-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at center, black 0 58%, transparent 88%);
}

.ml-public-home__ambient {
  position: fixed;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 36%, rgba(124, 58, 237, 0.16), transparent 28%),
    radial-gradient(circle at 82% 38%, rgba(37, 99, 235, 0.13), transparent 26%),
    radial-gradient(circle at 50% 78%, rgba(6, 182, 212, 0.12), transparent 32%);
  filter: blur(4px);
}

.ml-public-home__math-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: rgba(190, 214, 255, 0.24);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  overflow: hidden;
}

.ml-public-home__math-bg span {
  position: absolute;
  left: var(--x);
  bottom: -16vh;
  transform: translate3d(0, 0, 0) rotate(var(--r)) scale(var(--s));
  font-size: clamp(1.8rem, 3vw, 3.8rem);
  opacity: 0;
  text-shadow: 0 0 22px rgba(97, 92, 255, 0.25);
  animation: ml-public-home-symbol-rise var(--dur, 21s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

.ml-public-home__math-bg span:nth-child(3n) {
  color: rgba(25, 230, 210, 0.24);
  text-shadow: 0 0 20px rgba(25, 230, 210, 0.18);
}

.ml-public-home__math-bg span:nth-child(3n + 1) {
  color: rgba(139, 92, 246, 0.28);
  text-shadow: 0 0 22px rgba(139, 92, 246, 0.20);
}

.ml-public-home__math-bg span:nth-child(3n + 2) {
  color: rgba(45, 140, 255, 0.26);
  text-shadow: 0 0 20px rgba(45, 140, 255, 0.18);
}

@keyframes ml-public-home-symbol-rise {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--r)) scale(var(--s));
    opacity: 0;
  }
  8% {
    opacity: .38;
  }
  55% {
    opacity: .30;
  }
  92% {
    opacity: .12;
  }
  100% {
    transform: translate3d(0, -125vh, 0) rotate(calc(var(--r) + 360deg)) scale(var(--s));
    opacity: 0;
  }
}

.ml-public-home__nav,
.ml-public-home__main,
.ml-public-home__footer { position: relative; z-index: 2; }

.ml-public-home__nav {
  min-height: clamp(60px, 7svh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(10px, 1.5svh, 14px) clamp(18px, 5vw, 96px);
  border-bottom: 1px solid rgba(161, 177, 217, 0.16);
  background: rgba(2, 8, 23, 0.72);
  backdrop-filter: blur(20px);
}

.ml-public-home__brand,
.ml-public-home__links,
.ml-public-home__links a { color: inherit; }

.ml-public-home__brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.ml-public-home__brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(139, 92, 246, .24), rgba(45, 140, 255, .16));
  box-shadow: 0 0 24px rgba(45, 140, 255, .20);
}

.ml-public-home__brand-mark img {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
}

.ml-public-home__brand-name {
  font-weight: 950;
  letter-spacing: .035em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--ml-cyan), var(--ml-blue) 52%, var(--ml-purple));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
}

.ml-public-home__brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid rgba(174, 140, 255, 0.45);
  background: rgba(95, 59, 184, 0.42);
  color: #fff;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ml-public-home__links {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  font-weight: 800;
}

.ml-public-home__links a {
  text-decoration: none;
  color: rgba(248, 251, 255, 0.88);
  transition: color .18s ease, transform .18s ease, border-color .18s ease;
}

.ml-public-home__links a:hover { color: #fff; }

.ml-public-home__login {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 18px;
  border-radius: 13px;
  border: 1px solid rgba(139, 92, 246, 0.72);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.15);
}

.ml-public-home__login svg { width: 21px; height: 21px; }

.ml-public-home__main {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(20px, 3.8svh, 34px) 0 clamp(16px, 3svh, 28px);
}

.ml-public-home__hero {
  text-align: center;
  margin: 0 auto clamp(16px, 3svh, 28px);
}

.ml-public-home__hero h1 {
  margin: 0;
  color: var(--ml-text);
  font-size: clamp(2.35rem, 4.6vw, 4.65rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 950;
  text-wrap: balance;
}

.ml-public-home__hero h1 span {
  background: linear-gradient(90deg, #33a2ff, #7968ff 58%, #a66cff);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.ml-public-home__lead {
  max-width: 760px;
  margin: clamp(8px, 1.4svh, 14px) auto 0;
  color: rgba(219, 229, 246, 0.84);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.42;
  text-wrap: balance;
}

.ml-public-home__levels {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr 1fr;
  gap: clamp(12px, 1.8vw, 22px);
  align-items: stretch;
}

.ml-level-card {
  min-height: clamp(238px, 31svh, 272px);
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: clamp(9px, 1.35svh, 13px);
  padding: clamp(18px, 1.9vw, 26px);
  border-radius: var(--ml-radius-xl);
  border: 1px solid var(--ml-border);
  background:
    linear-gradient(145deg, rgba(17, 31, 62, 0.78), rgba(5, 12, 28, 0.76)),
    rgba(15, 23, 42, 0.74);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.ml-level-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.16), transparent 42%);
  opacity: .8;
}

.ml-level-card > * { position: relative; z-index: 1; }

.ml-level-card--active {
  border-color: rgba(139, 92, 246, .88);
  background:
    radial-gradient(circle at 0 0, rgba(139, 92, 246, 0.26), transparent 44%),
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, 0.16), transparent 48%),
    rgba(7, 18, 42, 0.90);
  box-shadow: var(--ml-shadow-purple);
}

.ml-level-card--disabled { opacity: .74; }
.ml-level-card--disabled h2 { color: rgba(219, 229, 246, 0.70); }
.ml-level-card--disabled .ml-level-card__icon { color: rgba(219, 229, 246, 0.60); }

.ml-level-card__icon,
.ml-feature-card__icon,
.ml-available-strip__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.34);
  background: rgba(139, 92, 246, 0.15);
  color: #b47cff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 24px rgba(139, 92, 246, 0.16);
}

.ml-level-card__icon svg,
.ml-feature-card__icon svg { width: 30px; height: 30px; }

.ml-level-card__icon--rocket { color: #c084fc; }

.ml-status-pill {
  position: absolute;
  right: 22px;
  top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(166, 180, 220, 0.22);
  background: rgba(15, 23, 42, 0.72);
  color: rgba(230, 237, 250, .78);
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.ml-status-pill--ready {
  color: var(--ml-green);
  border-color: rgba(37, 229, 165, .55);
  background: rgba(8, 72, 61, .34);
}

.ml-status-pill--ready i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.ml-status-pill--later { color: #c7b7ff; }

.ml-level-card h2 {
  max-width: 15rem;
  margin: clamp(8px, 1.4svh, 12px) 0 0;
  color: #fff;
  font-size: clamp(1.45rem, 1.8vw, 1.95rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 950;
}

.ml-level-card h2 span { color: var(--ml-blue); }

.ml-level-card__actions {
  display: grid;
  gap: 8px;
  align-self: end;
  margin-top: 4px;
}

.ml-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 13px;
  color: #fff;
  text-decoration: none;
  font-weight: 950;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ml-button svg { width: 20px; height: 20px; }
.ml-button:hover { transform: translateY(-1px); }

.ml-button--primary {
  background: linear-gradient(100deg, #2492ff 0%, #3b7cff 46%, #8b45f0 100%);
  box-shadow: 0 18px 38px rgba(45, 140, 255, .26), 0 0 24px rgba(139, 92, 246, .20);
}

.ml-button--secondary {
  min-height: 38px;
  border: 1px solid rgba(109, 116, 255, .42);
  background: rgba(2, 8, 23, .38);
  color: rgba(238, 244, 255, .88);
  font-weight: 850;
}

.ml-button--paper {
  min-height: 38px;
  border: 1px solid rgba(34, 211, 238, .42);
  background: rgba(14, 116, 144, .16);
  color: rgba(225, 252, 255, .92);
  font-weight: 850;
}

.ml-level-card__locked {
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 12px;
  border-radius: 13px;
  border: 1px solid rgba(166, 180, 220, 0.14);
  color: rgba(190, 202, 226, 0.46);
  font-weight: 800;
}
.ml-level-card__locked svg { width: 18px; height: 18px; }

.ml-available-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin: clamp(10px, 2svh, 16px) auto clamp(10px, 2svh, 16px);
  padding: clamp(12px, 1.8svh, 16px) 20px;
  border-radius: 18px;
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: linear-gradient(90deg, rgba(63, 32, 142, .34), rgba(10, 24, 51, .70));
  box-shadow: 0 20px 56px rgba(0, 0, 0, .20);
  max-width: 1040px;
}

.ml-available-strip__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.7rem;
}
.ml-available-strip h2 { margin: 0 0 3px; color: var(--ml-green); font-size: 1.08rem; }
.ml-available-strip p { margin: 0; color: rgba(238, 244, 255, .88); font-size: .95rem; }

.ml-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ml-feature-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 13px 16px;
  border-radius: 18px;
  border: 1px solid rgba(161, 177, 217, 0.18);
  background: rgba(10, 22, 46, 0.70);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.ml-feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, .52);
  background: rgba(12, 26, 58, 0.82);
}

.ml-feature-card__icon { width: 48px; height: 48px; color: #a66cff; }
.ml-feature-card__icon--cyan { color: var(--ml-cyan); border-color: rgba(25, 230, 210, .32); background: rgba(25, 230, 210, .10); }
.ml-feature-card__icon--blue { color: var(--ml-blue); border-color: rgba(45, 140, 255, .34); background: rgba(45, 140, 255, .12); }

.ml-feature-card strong { display: block; color: #fff; font-size: 1rem; line-height: 1.1; margin-bottom: 4px; }
.ml-feature-card small { display: block; color: rgba(202, 213, 235, .78); font-size: .86rem; line-height: 1.28; }
.ml-feature-card__arrow { width: 24px; height: 24px; color: rgba(221, 232, 255, .82); }

.ml-public-home__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(10px, 1.8svh, 16px) clamp(20px, 5vw, 96px);
  border-top: 1px solid rgba(161, 177, 217, 0.12);
  color: rgba(210, 220, 242, .70);
}
.ml-public-home__footer nav { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.ml-public-home__footer a { color: inherit; text-decoration: none; }
.ml-public-home__footer a:hover { color: #fff; }

@media (min-width: 1121px) and (max-height: 820px) {
  .ml-public-home__nav {
    min-height: 58px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .ml-public-home__brand-mark {
    width: 36px;
    height: 36px;
  }

  .ml-public-home__brand-mark img {
    width: 32px;
    height: 32px;
  }

  .ml-public-home__brand-chip {
    min-height: 22px;
    padding: 2px 9px;
  }

  .ml-public-home__login {
    min-height: 36px;
    padding: 7px 13px;
  }

  .ml-public-home__main {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .ml-public-home__hero {
    margin-bottom: 14px;
  }

  .ml-public-home__hero h1 {
    font-size: clamp(2.2rem, 4.1vw, 3.85rem);
  }

  .ml-public-home__lead {
    margin-top: 7px;
    font-size: 1rem;
    line-height: 1.34;
  }

  .ml-public-home__levels {
    gap: 12px;
  }

  .ml-level-card {
    min-height: 218px;
    gap: 7px;
    padding: 16px;
    border-radius: 22px;
  }

  .ml-level-card__icon,
  .ml-feature-card__icon,
  .ml-available-strip__icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .ml-level-card__icon svg,
  .ml-feature-card__icon svg {
    width: 24px;
    height: 24px;
  }

  .ml-status-pill {
    top: 14px;
    right: 14px;
    min-height: 26px;
    padding: 5px 9px;
    font-size: .7rem;
  }

  .ml-level-card h2 {
    max-width: 13rem;
    margin-top: 6px;
    font-size: clamp(1.32rem, 1.55vw, 1.68rem);
  }

  .ml-button {
    min-height: 38px;
    padding: 8px 12px;
    font-size: .9rem;
  }

  .ml-button--secondary {
    min-height: 34px;
  }

  .ml-level-card__locked {
    min-height: 34px;
    margin-top: 8px;
    font-size: .86rem;
  }

  .ml-available-strip {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 16px;
    border-radius: 15px;
  }

  .ml-available-strip__icon {
    border-radius: 50%;
    font-size: 1.45rem;
  }

  .ml-available-strip h2 {
    font-size: 1rem;
  }

  .ml-available-strip p {
    font-size: .88rem;
  }

  .ml-feature-grid {
    gap: 10px;
  }

  .ml-feature-card {
    min-height: 72px;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 15px;
  }

  .ml-feature-card strong {
    font-size: .93rem;
    margin-bottom: 2px;
  }

  .ml-feature-card small {
    font-size: .78rem;
    line-height: 1.2;
  }

  .ml-feature-card__arrow {
    width: 20px;
    height: 20px;
  }

  .ml-public-home__footer {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: .86rem;
  }
}

@media (max-width: 1120px) {
  .ml-public-home__levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ml-public-home__math-bg span:nth-child(n + 7) { display: none; }
  .ml-public-home__nav {
    min-height: 74px;
    padding: 14px 18px;
  }
  .ml-public-home__brand-chip,
  .ml-public-home__links > a:not(.ml-public-home__login) { display: none; }
  .ml-public-home__brand-name { font-size: 1rem; }
  .ml-public-home__brand-mark { width: 38px; height: 38px; }
  .ml-public-home__brand-mark img { width: 34px; height: 34px; }
  .ml-public-home__login { min-height: 38px; padding: 8px 12px; }
  .ml-public-home__main { width: min(100% - 28px, 620px); padding-top: 34px; }
  .ml-public-home__hero h1 { font-size: clamp(2.7rem, 12vw, 4rem); line-height: 1.06; }
  .ml-public-home__lead { font-size: 1.02rem; }
  .ml-public-home__desktop-break { display: none; }
  .ml-public-home__levels { grid-template-columns: 1fr; gap: 12px; }
  .ml-level-card { min-height: 0; padding: 18px; border-radius: 20px; }
  .ml-level-card--disabled {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    align-items: center;
    opacity: .82;
  }
  .ml-level-card--disabled .ml-level-card__icon { grid-row: 1 / 3; width: 48px; height: 48px; }
  .ml-level-card--disabled h2 { margin: 0; font-size: 1.35rem; }
  .ml-level-card--disabled .ml-status-pill { position: static; grid-column: 3; grid-row: 1; font-size: .72rem; padding: 5px 9px; }
  .ml-level-card--disabled .ml-level-card__locked { display: none; }
  .ml-level-card--disabled::before {
    content: "›";
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    color: rgba(230, 237, 250, .7);
    font-size: 2rem;
    line-height: 1;
  }
  .ml-level-card--active .ml-status-pill { top: 18px; right: 18px; }
  .ml-level-card--active h2 { margin-top: 18px; font-size: clamp(1.6rem, 7vw, 2.05rem); }
  .ml-button { min-height: 50px; }
  .ml-available-strip { grid-template-columns: auto 1fr; margin-top: 14px; padding: 17px; border-radius: 18px; }
  .ml-available-strip__icon { width: 48px; height: 48px; }
  .ml-feature-card { grid-template-columns: auto 1fr auto; min-height: 92px; padding: 16px; }
  .ml-feature-card__icon { width: 52px; height: 52px; }
  .ml-public-home__footer { grid-template-columns: 1fr; text-align: center; justify-items: center; padding-bottom: 32px; }
  .ml-public-home__footer nav { justify-content: center; }
}

@media (max-width: 420px) {
  .ml-public-home__brand-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ml-status-pill { font-size: .68rem; }
  .ml-level-card--active .ml-level-card__icon { width: 52px; height: 52px; }
  .ml-level-card--active .ml-status-pill { position: relative; top: auto; right: auto; width: fit-content; margin-left: auto; margin-top: -52px; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-public-home__math-bg span {
    animation: none;
    bottom: auto;
    top: 22%;
    opacity: .16;
  }

  .ml-public-home__math-bg span:nth-child(2n) { top: 58%; }
  .ml-public-home__math-bg span:nth-child(n + 7) { display: none; }
}