:root { --ink:#05121d; --ink-soft:#0a1d2c; --paper:#f7f8f4; --text:#eef2f1; --muted:#a8b5ba; --line:rgba(233,242,239,.16); --acid:#d8ff34; --dark:#061421; --serif:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans:"Avenir Next", Avenir, "Helvetica Neue", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--ink); font-family:var(--sans); font-size:16px; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:3; top:0; left:0; right:0; max-width:1440px; margin:auto; padding:28px clamp(24px,5vw,74px); display:flex; align-items:center; justify-content:space-between; gap:26px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.18em; font-size:15px; white-space:nowrap; }
.brand svg,.node-core svg { width:26px; height:26px; fill:none; stroke:var(--acid); stroke-width:3.8; stroke-linejoin:round; }
nav { display:flex; gap:40px; font-size:14px; color:#f5f7f5; } nav a { transition:color .2s ease; } nav a:hover, footer a:hover { color:var(--acid); }
.button { display:inline-flex; justify-content:space-between; align-items:center; gap:42px; padding:17px 23px; border:1px solid var(--acid); background:var(--acid); color:#111b09; border-radius:4px; font-weight:700; font-size:15px; box-shadow:0 8px 30px rgba(216,255,52,.12); transition:transform .2s ease, background .2s ease; }.button:hover { transform:translateY(-2px); background:#edff82; }.button span { font-size:23px; line-height:0; }.button-small { background:transparent; color:var(--acid); padding:11px 17px; border-radius:30px; font-size:13px; gap:16px; box-shadow:none; }.button-small:hover { color:#102005; background:var(--acid); }
.hero { min-height:720px; position:relative; display:grid; grid-template-columns:minmax(280px,.85fr) minmax(480px,1.25fr); overflow:hidden; padding:165px clamp(24px,5vw,74px) 72px; max-width:1440px; margin:auto; }.hero:before,.closing:before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 77% 36%, rgba(9,55,70,.42), transparent 33%), linear-gradient(110deg,#061520 4%,transparent 55%); }.hero-copy { position:relative; z-index:1; max-width:530px; align-self:center; }.hero h1,.operate h2,.security h2,.closing h2,.foundation h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.06em; line-height:.95; margin:0; }.hero h1 { font-size:clamp(52px,5vw,84px); }.hero h1 span { color:var(--acid); }.hero-copy p { color:#c1cbd0; font-size:18px; line-height:1.6; max-width:430px; margin:28px 0 31px; }
.topology { z-index:1; position:relative; min-height:460px; background-image:radial-gradient(rgba(197,219,218,.2) 1px,transparent 1px), radial-gradient(ellipse at center,transparent 36%,rgba(5,18,29,.7) 79%); background-size:6px 6px,100% 100%; }.topology-map { position:absolute; inset:6% 1%; border-radius:42%; border:1px solid rgba(125,172,174,.1); transform:rotate(-7deg); background:repeating-radial-gradient(ellipse at 53% 42%,transparent 0 17px,rgba(97,141,150,.09) 18px 19px,transparent 20px 29px); }.topology-lines { position:absolute; inset:0; width:100%; height:100%; }.topology-lines path { stroke:var(--acid); stroke-width:1.8; fill:none; stroke-dasharray:5 7; }.topology-lines circle { fill:var(--acid); }.node { position:absolute; z-index:2; display:grid; place-items:center; text-align:center; color:#fff; font-size:12px; line-height:1.3; }.node b:first-child { display:grid; place-items:center; width:48px; height:48px; margin-bottom:6px; border:1px solid rgba(210,230,231,.3); border-radius:12px; background:rgba(9,28,40,.9); box-shadow:0 12px 32px rgba(0,0,0,.25); font-size:22px; color:var(--acid); }.node span { font-weight:700; }.node small { color:#a9b7bd; font-size:10px; }.node-core { left:calc(50% - 59px); top:calc(50% - 59px); width:118px; height:118px; background:#071923; border:1px solid var(--acid); border-radius:26px; box-shadow:0 0 45px rgba(216,255,52,.13); }.node-core svg { width:42px; height:42px; }.node-core b { color:var(--acid); font-size:11px; }.n-aws{left:20%;top:8%}.n-gcp{left:69%;top:6%}.n-hq{left:9%;top:38%}.n-branch{right:5%;top:36%}.n-prem{left:21%;bottom:4%}.n-engineer{left:49%;bottom:-2%}.n-k8s{right:11%;bottom:7%}
.foundation { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:0; padding:31px clamp(24px,5vw,74px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:1440px; margin:auto; }.foundation h2 { font-size:31px; align-self:center; padding-right:35px; }.foundation article { min-height:130px; padding:11px 24px; border-left:1px solid var(--line); }.feature-icon { color:var(--acid); font-size:27px; }.foundation h3 { color:var(--acid); font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace; margin:11px 0; }.foundation p { color:var(--muted); font-size:13px; line-height:1.45; margin:0; }
.operate { color:#10202b; background:var(--paper); padding:104px clamp(24px,5vw,74px); display:grid; grid-template-columns:minmax(230px,.55fr) minmax(580px,1.45fr); gap:42px; }.operate h2,.security h2 { font-size:51px; }.operate-copy>p { color:#63727a; line-height:1.6; max-width:330px; }.operate ul { list-style:none; padding:12px 0 0; line-height:2.4; font-size:14px; }.operate li:before { content:"✓"; color:#66900b; margin-right:11px; }.console { min-height:430px; border:1px solid #d9ddda; box-shadow:0 20px 50px rgba(12,32,38,.13); border-radius:8px; overflow:hidden; display:grid; grid-template-columns:145px 1fr; background:#fff; font-size:11px; }.console aside { background:#0c1d29; padding:21px 13px; color:#98a8ad; display:flex; flex-direction:column; gap:16px; }.console-brand { color:#fff; letter-spacing:.12em; font-size:9px; padding-bottom:14px; }.console aside b { color:#cfff40; background:#1a3140; padding:9px; border-radius:4px; }.console-main { padding:20px; }.console-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }.console-head span { color:#63727a; padding:6px 8px; border:1px solid #e2e7e4; border-radius:3px; }.console-grid { display:grid; grid-template-columns:1.4fr .8fr; gap:10px; }.console-card { border:1px solid #e4e9e6; padding:13px; border-radius:4px; }.console-card h3 { margin:0 0 12px; font-size:11px; }.console-card p { display:flex; justify-content:space-between; margin:0 0 9px; color:#607078; }.console-card b { color:#679311; font-size:10px; }.console-card small { color:#8b969a; }.topology-card { min-height:195px; }.mini-mesh { height:150px; position:relative; background:radial-gradient(circle at 50% 50%,rgba(216,255,52,.12),transparent 20%); }.mini-mesh:before,.mini-mesh:after { content:""; position:absolute; left:12%; right:12%; top:50%; border-top:1px solid #bec9c5; transform:rotate(25deg); }.mini-mesh:after { transform:rotate(-25deg); }.mini-mesh i,.mini-mesh strong { position:absolute; display:grid; place-items:center; border:1px solid #c4cec9; border-radius:50%; width:32px; height:32px; background:#fff; z-index:1; }.mini-mesh strong { left:calc(50% - 16px); top:calc(50% - 16px); color:#304624; border-color:#9abb32; font-size:20px; }.mini-mesh i:nth-of-type(1){left:8%;top:17%}.mini-mesh i:nth-of-type(2){right:8%;top:17%}.mini-mesh i:nth-of-type(3){left:7%;bottom:11%}.mini-mesh i:nth-of-type(4){right:7%;bottom:11%}.mini-mesh i:nth-of-type(5){left:calc(50% - 16px);bottom:0}.events,.policies { min-height:130px; }
.security { background:var(--ink); padding:102px clamp(24px,5vw,74px); display:grid; grid-template-columns:.65fr 1.35fr; gap:55px; max-width:1440px; margin:auto; }.security>div>p { color:var(--muted); line-height:1.6; max-width:290px; }.security-list { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }.security-list article { padding:0 22px 26px; border-left:1px solid var(--line); }.security-list article:nth-child(n+4) { border-top:1px solid var(--line); padding-top:25px; }.security-list span { color:var(--acid); font-size:27px; }.security-list h3 { font-size:15px; margin:11px 0 9px; }.security-list p { color:var(--muted); margin:0; font-size:13px; line-height:1.5; }
.closing { position:relative; display:flex; align-items:center; justify-content:space-between; gap:35px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:50px clamp(24px,5vw,74px); max-width:1440px; margin:auto; overflow:hidden; }.closing h2 { position:relative; font-size:37px; }.closing p { position:relative; color:var(--muted); margin:9px 0 0; }.closing .button { position:relative; min-width:220px; }
footer { max-width:1440px; margin:auto; padding:35px clamp(24px,5vw,74px) 45px; display:grid; grid-template-columns:1fr 1fr auto; gap:25px; align-items:end; color:#9eabb1; font-size:11px; } footer .brand { color:#f4f7f4; } footer .brand svg { width:21px; height:21px; } footer p { margin:0; } footer div { display:flex; gap:22px; }
@media (max-width:900px) { .site-header nav{display:none}.hero{grid-template-columns:1fr;padding-top:130px}.hero-copy{margin-bottom:25px}.topology{min-height:400px}.foundation{grid-template-columns:1fr 1fr}.foundation h2{grid-column:1/-1;padding:9px 0 28px}.foundation article:first-of-type{border-left:0}.operate{grid-template-columns:1fr}.operate-copy{max-width:530px}.security{grid-template-columns:1fr}.security>div>p{max-width:480px} }
@media (max-width:620px) { .site-header{padding:20px 20px}.site-header .button-small{display:none}.hero{min-height:auto;padding:118px 20px 42px}.hero h1{font-size:52px}.hero-copy p{font-size:16px}.topology{min-height:345px;margin:10px -18px 0}.node b:first-child{width:38px;height:38px;font-size:17px}.node-core{transform:scale(.78)}.node span{font-size:10px}.node small{font-size:8px}.foundation{padding:25px 20px;grid-template-columns:1fr}.foundation article{border-left:0;border-top:1px solid var(--line);padding:19px 0}.operate{padding:65px 20px}.operate h2,.security h2{font-size:43px}.console{grid-template-columns:1fr;min-height:430px}.console aside{display:none}.console-main{padding:13px}.console-grid{grid-template-columns:1fr}.topology-card{min-height:170px}.health{display:none}.security{padding:65px 20px;gap:36px}.security-list{grid-template-columns:1fr}.security-list article{border-left:0;border-top:1px solid var(--line)!important;padding:19px 0!important}.closing{padding:42px 20px;display:block}.closing .button{margin-top:24px;width:100%}footer{padding:30px 20px;grid-template-columns:1fr;gap:19px}footer div{display:none} }