.hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:24px;min-height:min(70vh,640px);padding-bottom:24px;display:grid;position:relative}.eyebrow{background:var(--surface-2);color:var(--on-surface-variant);border-radius:999px;align-items:center;gap:10px;margin:0 0 22px;padding:8px 16px;font-size:14px;font-weight:550;display:inline-flex}.dot{background:var(--tertiary);width:8px;height:8px;box-shadow:0 0 0 4px color-mix(in srgb, var(--tertiary) 25%, transparent);border-radius:50%}h1{letter-spacing:-.045em;margin:0;font-size:clamp(48px,8.4vw,104px);font-weight:820;font-stretch:116%;line-height:.94}h1 em{color:var(--primary);font-style:normal;font-weight:300;font-stretch:80%}.hero-lede{max-width:54ch;color:var(--on-surface-variant);margin:26px 0 30px;font-size:clamp(17px,1.6vw,20px)}.hero-actions{flex-wrap:wrap;gap:10px;display:flex}.btn{height:56px;transition:border-radius .35s var(--spring), transform .2s var(--ease);border-radius:999px;align-items:center;gap:8px;padding:0 26px;font-size:16px;font-weight:650;text-decoration:none;display:inline-flex}.btn:hover{border-radius:18px}.btn:active{transform:scale(.97)}.btn svg{width:20px;height:20px}.btn.filled{background:var(--primary);color:var(--on-primary)}.btn.tonal{background:var(--secondary-container);color:var(--on-secondary-container)}.hero-art{aspect-ratio:1;max-height:520px;position:relative}.hero-art svg{position:absolute}.s1{color:var(--primary-container);animation:60s linear infinite spin;inset:6% 8% 14% 4%}.s2{width:38%;color:var(--secondary);animation:26s linear infinite reverse spin;top:2%;right:0}.s3{width:30%;color:var(--tertiary-container);animation:40s linear infinite spin;bottom:4%;left:2%}@keyframes spin{to{transform:rotate(360deg)}}.hero-art .pill-demo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pill-demo{color:#d2e5ff;white-space:nowrap;height:56px;box-shadow:var(--shadow);background:#263b4d;border-radius:28px;align-items:center;gap:12px;padding:0 26px 0 20px;font-size:17px;font-weight:600;display:inline-flex}.pill-dot{width:12px;height:12px;animation:pulse 1.6s var(--ease) infinite alternate;background:#9de2c0;border-radius:4px}@keyframes pulse{to{border-radius:50%;transform:rotate(45deg)scale(.8)}}.band{margin-top:clamp(48px,8vw,96px)}.band-head{max-width:62ch;margin-bottom:24px}.band-head h2{letter-spacing:-.03em;margin:0 0 8px;font-size:clamp(28px,4vw,40px);font-weight:760;font-stretch:108%;line-height:1.05}.band-head p{color:var(--on-surface-variant);margin:0;font-size:17px}.specimen{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;display:grid}.specimen>*{min-width:0}.specimen-code pre{border:1px solid var(--outline-variant);height:100%;font:13px/1.7 var(--mono);border-radius:28px;margin:0;padding:22px;overflow-x:auto;background:var(--code-bg)!important}.specimen-out{background:var(--surface-1);border-radius:28px;flex-direction:column;gap:14px;padding:22px;display:flex}.specimen-out p{color:var(--on-surface-variant);margin:0;font-size:15px}.label{letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);font-size:12px;font-weight:650}.screen{background:radial-gradient(120% 90% at 20% 110%,#c1554e 0%,#0000 55%),radial-gradient(90% 80% at 100% 0,#2b6a8a 0%,#0000 60%),#10202c;border-radius:20px;flex:1;min-height:220px;position:relative;overflow:hidden}.screen-bar{background:#00000059;height:8px;position:absolute;inset:0 0 auto}.screen .pill-demo{position:absolute;top:22px;left:50%;transform:translate(-50%)}.pipeline{grid-template-columns:repeat(4,1fr);gap:12px;margin:0;padding:0;list-style:none;display:grid}.pipeline li{background:var(--surface-1);border-radius:28px;padding:22px;position:relative}.pipeline li:not(:last-child):after{content:"";background:var(--outline-variant);width:12px;height:4px;position:absolute;top:50px;right:-12px}.step-shape{width:56px;height:56px;color:var(--tertiary-container);place-items:center;margin-bottom:14px;display:grid;position:relative}.step-shape svg{position:absolute;inset:0}.step-shape b{color:var(--on-tertiary-container);font-size:18px;position:relative}.pipeline li:nth-child(2) .step-shape{color:var(--primary-container)}.pipeline li:nth-child(2) b{color:var(--on-primary-container)}.pipeline li:nth-child(3) .step-shape{color:var(--secondary-container)}.pipeline li:nth-child(3) b{color:var(--on-secondary-container)}.pipeline strong{margin-bottom:4px;font-size:19px;font-weight:700;display:block}.pipeline p{color:var(--on-surface-variant);margin:0;font-size:15px}.modules{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.module{background:var(--surface-low);color:var(--on-surface);transition:background .2s var(--ease), border-radius .35s var(--spring);border-radius:24px;flex-direction:column;gap:12px;padding:18px 20px;text-decoration:none;display:flex}.module:hover{background:var(--surface-2);border-radius:16px}.module strong{font-size:18px;font-weight:700}.tags{flex-wrap:wrap;gap:6px;display:flex}.tags code{font:500 12.5px var(--mono);background:var(--surface-3);color:var(--on-surface-variant);border-radius:8px;padding:4px 9px}.ways{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px;display:grid}.way{background:var(--primary-container);color:var(--on-primary-container);transition:border-radius .35s var(--spring);border-radius:28px;flex-direction:column;gap:4px;padding:24px;text-decoration:none;display:flex}.way:nth-child(2){background:var(--secondary-container);color:var(--on-secondary-container)}.way:nth-child(3){background:var(--tertiary-container);color:var(--on-tertiary-container)}.way:hover{border-radius:18px}.way small{font:600 13px var(--mono);opacity:.75}.way strong{letter-spacing:-.02em;font-size:24px;font-weight:750}.way span{opacity:.85}@media (width<=1100px){.modules,.pipeline{grid-template-columns:repeat(2,1fr)}.pipeline li:nth-child(2):after{display:none}}@media (width<=880px){.hero{grid-template-columns:1fr;min-height:0}.hero-art{order:-1;width:70%;max-width:300px;margin:-8px auto 8px}.specimen,.ways{grid-template-columns:1fr}.specimen-code pre{padding:16px;font-size:12px}}@media (width<=560px){.pipeline,.modules{grid-template-columns:1fr}.pipeline li:after{display:none}.btn{flex:1;justify-content:center}}