.ml-page {
  --ml-yellow: #ffe600;
  --ml-yellow-2: #ffd400;
  --ml-blue: #3483fa;
  --ml-navy: #081426;
  --ml-panel: #0d1d32;
  --ml-panel-2: #10233c;
  --ml-line: rgba(178, 204, 234, .16);
  --ml-muted: #9db0c7;
  background: #07111f;
  color: #f7fbff;
}
.ml-page .nav { background: rgba(6, 15, 27, .92); }
.ml-page .nav__brand { text-decoration: none; }
.ml-main { overflow: hidden; }
.ml-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .86rem 1.35rem; border: 1px solid rgba(255,230,0,.75); border-radius: 999px;
  color: #1e2732; background: linear-gradient(180deg, #ffeb3b, var(--ml-yellow));
  box-shadow: 0 14px 34px -18px rgba(255,230,0,.88); font-weight: 800; font-size: .95rem;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ml-btn:hover { transform: translateY(-2px); filter: brightness(1.02); box-shadow: 0 18px 42px -18px rgba(255,230,0,.95); }
.ml-btn--sm { padding: .56rem 1rem; font-size: .85rem; }
.ml-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.ml-actions--center { justify-content: center; }

.ml-hero {
  position: relative; padding: clamp(5.8rem, 9vw, 8.4rem) 0 clamp(4rem, 7vw, 6rem);
  background:
    radial-gradient(circle at 83% 18%, rgba(255,230,0,.12), transparent 28%),
    radial-gradient(circle at 68% 50%, rgba(52,131,250,.12), transparent 34%),
    linear-gradient(135deg, #07101d 0%, #09182a 55%, #08111f 100%);
}
.ml-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .48;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.ml-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,230,0,.56), transparent); }
.ml-hero__grid { position: relative; display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2.4rem, 5vw, 5.6rem); align-items: center; }
.ml-eyebrow { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.25rem; color: #dfe8f3; font: 700 .73rem/1.2 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.ml-eyebrow__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ml-yellow); box-shadow: 0 0 0 5px rgba(255,230,0,.09), 0 0 26px rgba(255,230,0,.55); }
.ml-hero h1 { max-width: 680px; margin: 0; font-size: clamp(2.75rem, 6vw, 5.65rem); line-height: .96; letter-spacing: -.058em; }
.ml-hero h1 span { display: block; color: var(--ml-yellow); }
.ml-hero__lead { max-width: 640px; margin: 1.55rem 0 1.9rem; color: #c2cfde; font-size: clamp(1.03rem, 1.8vw, 1.23rem); line-height: 1.7; }
.ml-hero__chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.ml-hero__chips span { padding: .48rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #aebfd1; background: rgba(255,255,255,.025); font-size: .78rem; }

.ml-console { position: relative; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(13,29,50,.94); box-shadow: 0 45px 100px rgba(0,0,0,.42), 0 0 0 1px rgba(255,230,0,.05) inset; transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.ml-console::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 26px; background: linear-gradient(145deg, rgba(255,230,0,.28), transparent 26%, transparent 70%, rgba(52,131,250,.22)); filter: blur(12px); opacity: .55; }
.ml-console__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .35rem 1rem; }
.ml-marketmark { display: flex; align-items: center; gap: .7rem; }
.ml-marketmark > span { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 12px; color: #263238; background: var(--ml-yellow); font-weight: 900; letter-spacing: -.05em; }
.ml-marketmark strong { font-size: .95rem; }
.ml-status { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .6rem; border: 1px solid rgba(69,218,155,.2); border-radius: 999px; color: #9be8c8; background: rgba(37,177,119,.08); font: 700 .68rem/1 "JetBrains Mono", monospace; text-transform: uppercase; }
.ml-status i { width: 7px; height: 7px; border-radius: 50%; background: #52dda3; box-shadow: 0 0 12px rgba(82,221,163,.8); }
.ml-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.ml-metrics > div { padding: .9rem; border: 1px solid var(--ml-line); border-radius: 14px; background: #0a1829; }
.ml-metrics small { display: block; color: #7790aa; font: 700 .57rem/1.2 "JetBrains Mono", monospace; letter-spacing: .08em; }
.ml-metrics strong { display: block; margin-top: .45rem; font-size: 1.55rem; line-height: 1; }
.ml-metrics span { display: block; margin-top: .25rem; color: #7388a0; font-size: .68rem; }
.ml-orders { margin-top: .75rem; overflow: hidden; border: 1px solid var(--ml-line); border-radius: 16px; background: #091726; }
.ml-orders__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem; border-bottom: 1px solid var(--ml-line); }
.ml-orders__head > div { display: grid; gap: .15rem; }
.ml-orders__head strong { font-size: .88rem; }
.ml-orders__head span { color: #71869d; font-size: .65rem; }
.ml-orders__head button, .ml-billing__summary button { padding: .55rem .75rem; border-radius: 8px; color: #20262e; background: var(--ml-yellow); font-size: .68rem; font-weight: 800; }
.ml-order { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; gap: .75rem; align-items: center; padding: .75rem .9rem; border-bottom: 1px solid rgba(255,255,255,.055); }
.ml-order:last-child { border-bottom: 0; }
.ml-order--selected { background: rgba(255,230,0,.025); }
.ml-check { display: grid; place-items: center; width: 20px; aspect-ratio: 1; border-radius: 6px; color: #263238; background: var(--ml-yellow); font-size: .72rem; font-weight: 900; }
.ml-check--empty { border: 1px solid #42566e; background: transparent; }
.ml-order > div { display: grid; gap: .12rem; }
.ml-order b { font-size: .75rem; }
.ml-order small { color: #72879f; font-size: .62rem; }
.ml-order > strong { font-size: .75rem; }
.ml-pill { padding: .32rem .45rem; border-radius: 999px; color: #ffc979; background: rgba(255,166,61,.08); font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.ml-pill--done { color: #8fe0bf; background: rgba(66,195,140,.08); }
.ml-console__foot { display: flex; align-items: center; gap: .7rem; padding: .85rem .2rem .1rem; color: #7390aa; font-size: .66rem; }
.ml-console__foot i { color: var(--ml-yellow); font-style: normal; }
.ml-console__foot b { margin-left: auto; color: #9eb1c5; font-weight: 600; }

.ml-section { padding: clamp(4.4rem, 8vw, 7.2rem) 0; }
.ml-section--soft { background: #0a1727; }
.ml-heading { max-width: 860px; margin-bottom: 2.65rem; }
.ml-kicker { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .9rem; color: var(--ml-yellow); font: 800 .7rem/1.2 "JetBrains Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.ml-kicker::before { content: ""; width: 23px; height: 2px; background: currentColor; }
.ml-heading h2, .ml-billing h2, .ml-control h2 { margin: .2rem 0 .9rem; font-size: clamp(2rem, 4vw, 3.75rem); line-height: 1.04; letter-spacing: -.048em; }
.ml-heading p, .ml-billing__copy > p, .ml-control__copy > p { color: #aebed0; font-size: 1.05rem; line-height: 1.72; }
.ml-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ml-feature { min-height: 230px; padding: 1.55rem; border: 1px solid var(--ml-line); border-radius: 18px; background: linear-gradient(145deg, rgba(16,35,60,.96), rgba(10,24,42,.95)); box-shadow: 0 25px 55px -42px rgba(74,151,255,.7); }
.ml-feature > span { color: #7f9ab6; font: 700 .65rem/1.2 "JetBrains Mono", monospace; letter-spacing: .09em; }
.ml-feature h3 { margin: 2.2rem 0 .7rem; font-size: 1.22rem; }
.ml-feature p { margin: 0; color: #9eb1c5; line-height: 1.65; font-size: .94rem; }
.ml-feature--accent { border-color: rgba(255,230,0,.36); background: radial-gradient(circle at 90% 0%, rgba(255,230,0,.12), transparent 42%), #102039; }
.ml-feature--accent > span { color: var(--ml-yellow); }

.ml-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .75rem; align-items: stretch; }
.ml-flow__step { position: relative; display: flex; min-height: 190px; flex-direction: column; justify-content: space-between; padding: 1.35rem; overflow: hidden; border: 1px solid var(--ml-line); border-radius: 16px; background: #0d1c30; }
.ml-flow__step b { position: absolute; right: 12px; top: -10px; color: rgba(255,230,0,.08); font-size: 5rem; line-height: 1; }
.ml-flow__step strong { position: relative; margin-top: .25rem; font-size: 1.08rem; }
.ml-flow__step span { position: relative; color: #8fa4ba; line-height: 1.55; font-size: .9rem; }
.ml-flow__arrow { align-self: center; color: var(--ml-yellow); font-size: 1.55rem; }

.ml-billing { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(2.3rem, 6vw, 6rem); align-items: center; }
.ml-checks { display: grid; gap: .82rem; margin-top: 1.6rem; }
.ml-checks li { position: relative; padding-left: 1.65rem; color: #cfdae7; line-height: 1.55; }
.ml-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; aspect-ratio: 1; border-radius: 50%; color: #263238; background: var(--ml-yellow); font-size: .68rem; font-weight: 900; }
.ml-billing__panel { padding: 1rem; border: 1px solid rgba(255,230,0,.24); border-radius: 20px; background: linear-gradient(180deg, #10233b, #0c1a2c); box-shadow: 0 35px 80px rgba(0,0,0,.3); }
.ml-billing__header { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .65rem 1rem; color: #839bb4; font: 700 .65rem/1.2 "JetBrains Mono", monospace; letter-spacing: .08em; }
.ml-billing__header b { color: var(--ml-yellow); }
.ml-billing__row { display: grid; grid-template-columns: 28px 1fr auto; gap: .75rem; align-items: center; padding: .95rem .8rem; border-top: 1px solid rgba(255,255,255,.07); }
.ml-billing__row > div { display: grid; gap: .16rem; }
.ml-billing__row strong { font-size: .86rem; }
.ml-billing__row small { color: #758ba3; }
.ml-billing__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; padding: 1rem; border-radius: 13px; background: #071524; }
.ml-billing__summary > span { display: grid; gap: .15rem; }
.ml-billing__summary small { color: #7c92aa; }
.ml-billing__summary strong { font-size: 1.25rem; }
.ml-billing__note { margin: .8rem .5rem .15rem; color: #647b94; font-size: .69rem; text-align: center; }

.ml-control { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.2rem, 6vw, 6rem); align-items: center; }
.ml-control__board { padding: 1rem; border: 1px solid var(--ml-line); border-radius: 20px; background: #0c1c30; box-shadow: 0 32px 74px rgba(0,0,0,.27); }
.ml-control__title { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .6rem 1rem; color: #8097af; font: 700 .65rem/1.2 "JetBrains Mono", monospace; letter-spacing: .08em; }
.ml-control__title b { color: #8fe0bf; }
.ml-control__item { display: grid; grid-template-columns: 14px 1fr auto; gap: .8rem; align-items: center; padding: 1rem .8rem; border-top: 1px solid rgba(255,255,255,.07); }
.ml-control__item i { width: 9px; aspect-ratio: 1; border-radius: 50%; }
.ml-control__item i.is-ok { background: #57dfa7; box-shadow: 0 0 12px rgba(87,223,167,.55); }
.ml-control__item i.is-warn { background: var(--ml-yellow); box-shadow: 0 0 12px rgba(255,230,0,.45); }
.ml-control__item > div { display: grid; gap: .15rem; }
.ml-control__item strong { font-size: .86rem; }
.ml-control__item small { color: #748aa2; }
.ml-control__item > span { color: #7389a0; font-size: .7rem; }
.ml-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.6rem; }
.ml-mini-grid > span { display: grid; gap: .2rem; padding: .85rem; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); }
.ml-mini-grid strong { font-size: .82rem; }
.ml-mini-grid small { color: #7b92aa; line-height: 1.45; }

.ml-cta { position: relative; padding: clamp(5.3rem, 9vw, 8rem) 0; text-align: center; background: radial-gradient(circle at 50% 100%, rgba(255,230,0,.12), transparent 52%), linear-gradient(180deg, #0b192a, #07111f); }
.ml-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 49.8%, rgba(255,230,0,.05) 50%, transparent 50.2%); }
.ml-cta .ml-kicker { justify-content: center; }
.ml-cta h2 { max-width: 890px; margin: .2rem auto 1rem; font-size: clamp(2.3rem, 5vw, 4.7rem); line-height: 1; letter-spacing: -.052em; }
.ml-cta p { max-width: 760px; margin: 0 auto 2rem; color: #a8b9cb; font-size: 1.08rem; line-height: 1.7; }
.ml-page .footer { background: #050c16; }
.ml-page .footer__brand .nav__wordmark { display: block; margin-top: .8rem; }

@media (max-width: 1080px) {
  .ml-hero__grid, .ml-billing, .ml-control { grid-template-columns: 1fr; }
  .ml-console { max-width: 780px; transform: none; }
  .ml-features { grid-template-columns: repeat(2, 1fr); }
  .ml-flow { grid-template-columns: 1fr 1fr; }
  .ml-flow__arrow { display: none; }
}
@media (max-width: 720px) {
  .ml-hero { padding-top: 6.5rem; }
  .ml-features, .ml-flow, .ml-mini-grid { grid-template-columns: 1fr; }
  .ml-console { padding: .75rem; border-radius: 18px; }
  .ml-metrics { grid-template-columns: 1fr 1fr; }
  .ml-metrics > div:last-child { grid-column: 1 / -1; }
  .ml-orders__head { align-items: stretch; flex-direction: column; }
  .ml-orders__head button { width: 100%; }
  .ml-order { grid-template-columns: 25px 1fr auto; gap: .55rem; }
  .ml-order > strong { grid-column: 2; }
  .ml-pill { grid-column: 3; grid-row: 1; }
  .ml-console__foot { flex-wrap: wrap; }
  .ml-console__foot b { width: 100%; margin-left: 0; }
  .ml-billing__summary { align-items: stretch; flex-direction: column; }
  .ml-billing__summary button { width: 100%; padding: .75rem; }
  .ml-actions .ml-btn, .ml-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .ml-metrics { grid-template-columns: 1fr; }
  .ml-metrics > div:last-child { grid-column: auto; }
  .ml-marketmark strong { display: none; }
  .ml-status { font-size: .58rem; }
  .ml-order small { max-width: 24ch; }
}