:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f6f2fc;background:#090811;--muted:#9d94aa;--line:#ffffff18;--purple:#b882ff;--blue:#65c4ff;--green:#65e7ad}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 7% 3%,#69399b66,transparent 30rem),radial-gradient(circle at 93% 12%,#245b8050,transparent 28rem),linear-gradient(180deg,#0b0912,#08070d 54rem);line-height:1.6}
.page-shell{width:min(1180px,calc(100% - 48px));margin:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 2px 22px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.brand>img{display:block;width:64px;height:37px;object-fit:contain;filter:drop-shadow(0 0 5px #7167ff38)}
.brand>span{display:grid;gap:4px}
.brand strong{color:transparent;background:linear-gradient(105deg,#a98cff,#65b6ff 68%,#a36eff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:25px;line-height:1;letter-spacing:-.04em}
.brand small{color:#cfc6dcad;font-size:10px;letter-spacing:.025em}
.topbar nav{display:flex;align-items:center;gap:8px}
.topbar nav a{padding:8px 11px;color:#bcb4c8;border:1px solid transparent;border-radius:10px;text-decoration:none;font-size:11px;transition:.16s ease}
.topbar nav a:hover{color:#fff;border-color:var(--line);background:#ffffff08}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 390px;align-items:center;gap:74px;padding:96px 0 88px}
.eyebrow{margin:0 0 16px;color:var(--purple);font-size:10px;font-weight:800;letter-spacing:.19em}
.hero h1{margin:0;font-size:clamp(50px,7vw,78px);line-height:.98;letter-spacing:-.06em}
.lead{margin:24px 0 0;color:#ded6e7;font-size:clamp(21px,2.5vw,30px);letter-spacing:-.025em}
.summary{max-width:710px;margin:18px 0 0;color:#a79eaf;font-size:15px;line-height:1.85}
.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:12px;text-decoration:none;font-size:13px;font-weight:700;transition:.16s ease}
.primary{color:#160d22;background:linear-gradient(135deg,#c28cff,#8e7af1);box-shadow:0 12px 32px #9d69ee31}
.primary:hover{transform:translateY(-1px);box-shadow:0 16px 38px #9d69ee48}
.secondary{color:#e2dbea;border:1px solid var(--line);background:#ffffff08}
.secondary:hover{border-color:#b882ff57;background:#ffffff10}
.boundary-card{position:relative;overflow:hidden;padding:28px;border:1px solid #b882ff4a;border-radius:22px;background:linear-gradient(145deg,#6d419d24,#1d426123);box-shadow:0 26px 70px #0005}
.boundary-card::before{position:absolute;top:0;right:22px;left:22px;height:1px;background:linear-gradient(90deg,transparent,#b882ff8c,#65c4ff6e,transparent);content:""}
.boundary-card>p{margin:0 0 18px;color:#9c80bc;font-size:9px;font-weight:800;letter-spacing:.17em}
.boundary-card>strong{display:block;max-width:310px;font-size:25px;line-height:1.28;letter-spacing:-.035em}
.boundary-card ul,.control-card ul{margin:24px 0 0;padding:0;list-style:none}
.boundary-card li,.control-card li{position:relative;padding:9px 0 9px 20px;color:#ada5b7;border-top:1px solid #ffffff0e;font-size:12px}
.boundary-card li::before,.control-card li::before{position:absolute;top:16px;left:2px;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue));content:""}
.section{padding:74px 0}
.section-heading{max-width:720px}
.section-heading h2,.request-panel h2{margin:0;color:#f6f2fb;font-size:clamp(30px,4vw,46px);line-height:1.12;letter-spacing:-.045em}
.section-heading>p:last-child,.request-panel p:last-child{margin:16px 0 0;color:var(--muted);font-size:14px}
.deployment-options{border-top:1px solid var(--line)}
.mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:34px}
.mode-grid article,.control-card{position:relative;overflow:hidden;padding:22px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,#ffffff0d,#ffffff05)}
.mode-grid article::before,.control-card::before{position:absolute;top:0;right:18px;left:18px;height:1px;background:linear-gradient(90deg,transparent,#b882ff59,#65c4ff35,transparent);content:""}
.mode-grid article>span{color:#9d7fbb;font:700 10px/1 ui-monospace,monospace;letter-spacing:.12em}
.mode-grid h3{margin:34px 0 8px;font-size:16px}
.mode-grid p{margin:0;color:#968e9f;font-size:12px;line-height:1.7}
.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding:8px 0 76px}
.control-card{padding:26px}
.card-label{margin:0;color:#9c80bc;font-size:9px;font-weight:800;letter-spacing:.16em}
.control-card h2{margin:12px 0 0;font-size:23px;letter-spacing:-.03em}
.control-card li{font-size:13px}
.architecture{border-top:1px solid var(--line)}
.boundary{margin-top:34px;padding:22px;border:1px solid #b882ff57;border-radius:22px;background:linear-gradient(135deg,#6a40991b,#214b6d17),#0d0b14;box-shadow:0 24px 70px #0004 inset}
.boundary-label{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 2px 18px;color:#9b91a6;font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.boundary-label strong{color:#72dbb1;font-size:10px}
.flow{display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr;align-items:stretch}
.flow-node{display:flex;min-height:176px;flex-direction:column;justify-content:space-between;padding:20px;border:1px solid #ffffff19;border-radius:16px;background:#ffffff08}
.flow-node.runtime{border-color:#b882ff70;background:linear-gradient(145deg,#9d5edc22,#4e8daf17)}
.flow-node>span{color:#8d789f;font:700 9px/1 ui-monospace,monospace}
.flow-node>strong{font-size:17px;line-height:1.25}
.flow-node>small{color:#81798a;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.flow-arrow{position:relative}
.flow-arrow::before{position:absolute;top:50%;left:50%;color:#9975bc;content:"→";font-size:20px;transform:translate(-50%,-50%)}
.request-panel{display:flex;align-items:center;justify-content:space-between;gap:54px;margin:36px 0 80px;padding:34px;border:1px solid #b882ff42;border-radius:22px;background:radial-gradient(circle at 80% 10%,#3674a52d,transparent 45%),linear-gradient(135deg,#7145a130,#ffffff06)}
.request-panel>div:first-child{max-width:690px}
.request-panel .actions{flex:0 0 auto;margin:0}
footer{display:flex;justify-content:space-between;gap:24px;padding:24px 2px 30px;color:#665f70;border-top:1px solid var(--line);font-size:10px;letter-spacing:.035em}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:38px;padding-top:70px}.boundary-card{max-width:570px}
  .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.control-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}.flow-node{min-height:142px}.flow-arrow{height:34px}.flow-arrow::before{content:"↓"}
  .request-panel{align-items:flex-start;flex-direction:column}.request-panel .actions{margin-top:4px}
}
@media(max-width:620px){
  .page-shell{width:min(100% - 30px,1180px)}.topbar{align-items:flex-start;padding-top:18px}
  .brand>img{width:54px;height:32px}.brand strong{font-size:22px}.brand small{display:none}
  .topbar nav a[href="/model"]{display:none}.topbar nav a{padding:6px 7px}.hero{padding:58px 0 62px}
  .mode-grid{grid-template-columns:1fr}.section{padding:56px 0}.control-grid{padding-bottom:58px}
  .boundary{padding:14px}.boundary-label{align-items:flex-start;flex-direction:column;gap:5px}
  .request-panel{margin-bottom:56px;padding:25px}.request-panel .actions{width:100%}.request-panel .actions a{width:100%}
  footer{flex-direction:column;gap:5px}
}