:root {
  --md-primary-fg-color: #34227b;
  --md-primary-fg-color--light: #6249cf;
  --md-primary-fg-color--dark: #211650;
  --md-accent-fg-color: #f26b3a;
  --helios-violet: #6d54e8;
  --helios-orange: #ff7547;
  --helios-cyan: #35d3cd;
  --helios-border: color-mix(in srgb, var(--md-default-fg-color) 13%, transparent);
}

[data-md-color-scheme="slate"] { --md-hue: 248; --md-default-bg-color: #0e0b1b; --md-default-bg-color--light: #171329; --helios-border: rgba(255, 255, 255, 0.12); }
.md-header { background: linear-gradient(110deg, #211650, #532e91 58%, #ad465f 120%); box-shadow: 0 2px 18px rgba(29, 19, 66, 0.28); }
.md-tabs { background: #211650; }
.md-grid { max-width: 88rem; }
.md-typeset { font-size: 0.79rem; line-height: 1.72; }
.md-typeset h1 { font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; }
.md-typeset h2 { font-weight: 750; letter-spacing: -0.025em; margin-top: 2.6em; }
.md-typeset h3 { font-weight: 700; }
.md-typeset code { border-radius: 0.3rem; }
.md-typeset pre > code { border-radius: 0.6rem; }
.md-typeset table:not([class]) { border: 1px solid var(--helios-border); border-radius: 0.7rem; box-shadow: 0 6px 22px rgba(23, 18, 48, 0.06); overflow: hidden; }
.md-typeset table:not([class]) th { background: color-mix(in srgb, var(--md-primary-fg-color) 9%, var(--md-default-bg-color)); font-weight: 700; }

.hero { align-items: center; background: radial-gradient(circle at 88% 12%, rgba(53, 211, 205, 0.25), transparent 25%), radial-gradient(circle at 8% 105%, rgba(255, 117, 71, 0.22), transparent 28%), linear-gradient(135deg, #171033 0%, #3d227a 58%, #74335f 125%); border-radius: 1.1rem; box-shadow: 0 24px 60px rgba(35, 22, 79, 0.3); color: #fff; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr); margin-bottom: 2.2rem; overflow: hidden; padding: clamp(2rem, 5vw, 4.3rem); position: relative; }
.hero__eyebrow, .panel-label { color: var(--helios-cyan); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; margin: 0 0 0.75rem; text-transform: uppercase; }
.hero h1 { color: #fff; font-size: clamp(2.35rem, 5.2vw, 4.2rem); margin: 0; max-width: 13ch; }
.hero h1 span { color: #a9f4ee; }
.hero__lead { color: rgba(255, 255, 255, 0.8); font-size: clamp(0.9rem, 1.7vw, 1.08rem); margin: 1.25rem 0 1.6rem; max-width: 42rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.hero .md-button { border-color: rgba(255, 255, 255, 0.62); color: #fff; margin: 0; }
.hero .md-button--primary { background: #fff; border-color: #fff; color: #2c1b67; }
.hero .md-button:hover { background: #a9f4ee; border-color: #a9f4ee; color: #191233; }
.hero__visual { background: rgba(11, 8, 31, 0.34); border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 0.9rem; padding: 1rem; text-align: center; }
.flow-node { border-radius: 0.55rem; padding: 0.7rem 0.8rem; text-align: left; }
.flow-node small { color: rgba(255,255,255,.55); display: block; font-size: .51rem; letter-spacing: .13em; }
.flow-node strong { display: block; font-size: .68rem; margin-top: .15rem; }
.flow-node--user { background: rgba(255,255,255,.1); }
.flow-node--agent { background: rgba(109,84,232,.55); border: 1px solid rgba(169,244,238,.35); }
.flow-arrow { color: #a9f4ee; display: block; line-height: 1.4; }
.flow-fleet { display: grid; gap: .28rem; grid-template-columns: repeat(5, 1fr); }
.flow-fleet span { background: rgba(53,211,205,.16); border: 1px solid rgba(53,211,205,.42); border-radius: .35rem; font-size: .45rem; padding: .48rem .08rem; }
.hero__visual p { color: rgba(255,255,255,.55); font-size: .52rem; letter-spacing: .06em; margin: .7rem 0 0; text-transform: uppercase; }

.stat-strip { display: grid; gap: 0.8rem; grid-template-columns: repeat(4, 1fr); margin: -0.55rem 0 2.5rem; }
.stat { border-left: 3px solid var(--helios-orange); padding: 0.3rem 0.8rem; }
.stat strong, .stat span { display: block; }
.stat strong { font-size: 1.3rem; line-height: 1.3; }
.stat span { color: var(--md-default-fg-color--light); font-size: 0.66rem; }
.path-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.2rem 0 2.8rem; }
.path-card { background: color-mix(in srgb, var(--md-default-bg-color) 96%, var(--helios-violet)); border: 1px solid var(--helios-border); border-radius: 0.85rem; color: var(--md-default-fg-color) !important; display: flex; flex-direction: column; min-height: 11.5rem; padding: 1.25rem; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.path-card:hover { border-color: var(--helios-orange); box-shadow: 0 12px 30px rgba(34, 24, 73, 0.13); transform: translateY(-3px); }
.path-card__icon { color: var(--helios-violet); font-size: 1.15rem; font-weight: 800; }
.path-card strong { display: block; font-size: 0.9rem; margin: 0.5rem 0 0.3rem; }
.path-card span:nth-child(3) { color: var(--md-default-fg-color--light); font-size: 0.69rem; line-height: 1.55; }
.path-card em { color: var(--md-accent-fg-color); font-size: 0.65rem; font-style: normal; font-weight: 700; margin-top: auto; padding-top: 0.9rem; }
.split-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.feature-panel { border: 1px solid var(--helios-border); border-radius: .9rem; overflow: hidden; padding: 1.4rem; position: relative; }
.feature-panel::before { content: ""; height: 4px; inset: 0 0 auto; position: absolute; }
.feature-panel--agent::before { background: linear-gradient(90deg, var(--helios-violet), #ae66ed); }
.feature-panel--fleet::before { background: linear-gradient(90deg, var(--helios-cyan), #53aef4); }
.feature-panel .panel-label { color: var(--md-accent-fg-color); }
.feature-panel h3 { margin: 0 0 .55rem; }
.feature-panel p, .feature-panel li { color: var(--md-default-fg-color--light); font-size: .7rem; }
.feature-panel ul { margin-bottom: 0; }
.showcase { border: 1px solid var(--helios-border); border-radius: 1rem; box-shadow: 0 16px 46px rgba(30, 21, 64, .13); margin: 1.25rem 0 2.8rem; overflow: hidden; }
.showcase img { display: block; margin: 0; width: 100%; }
.showcase figcaption { align-items: baseline; background: color-mix(in srgb, var(--md-default-bg-color) 94%, var(--helios-violet)); display: flex; gap: .8rem; padding: .8rem 1rem; }
.showcase figcaption strong { font-size: .7rem; white-space: nowrap; }
.showcase figcaption span { color: var(--md-default-fg-color--light); font-size: .62rem; }
.cta-band { align-items: center; background: linear-gradient(110deg, #2c1b67, #5c2c85); border-radius: .9rem; color: #fff; display: flex; justify-content: space-between; margin-top: 2.5rem; padding: 1.4rem 1.6rem; }
.cta-band h2 { border: 0; color: #fff; margin: 0; padding: 0; }
.cta-band .panel-label { margin-bottom: .15rem; }
.cta-band .md-button--primary { background: #fff; border-color: #fff; color: #2c1b67; white-space: nowrap; }

@media screen and (max-width: 60rem) { .hero { grid-template-columns: 1fr; } .hero__visual { display: none; } }
@media screen and (max-width: 48rem) { .hero { border-radius: .75rem; padding: 2.2rem 1.35rem; } .path-grid, .split-grid { grid-template-columns: 1fr; } .stat-strip { grid-template-columns: repeat(2, 1fr); } .path-card { min-height: 0; } .showcase figcaption { align-items: flex-start; flex-direction: column; gap: .15rem; } .cta-band { align-items: flex-start; flex-direction: column; gap: 1rem; } }