:root { --black:#010308; --ink:#e6f5ff; --muted:#7595aa; --cyan:#33d7ff; --blue:#0979dc; --line:rgba(80,178,235,.22); --panel:rgba(4,13,25,.88); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; color:var(--ink); background:var(--black); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.matrix-rain { position:fixed; inset:0; z-index:0; width:100%; height:100%; opacity:.56; pointer-events:none; }
body::before { position:fixed; inset:0; z-index:0; content:""; pointer-events:none; background:radial-gradient(circle at 68% 18%,rgba(0,119,255,.22),transparent 33%),linear-gradient(180deg,rgba(1,3,8,.34),#010308 92%); }
.site-shell { position:relative; z-index:1; overflow:hidden; }
.site-shell::before { position:fixed; inset:0; content:""; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(67,174,232,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(67,174,232,.08) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(#000,transparent 78%); }

.site-header { position:relative; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1480px,calc(100% - 56px)); margin:auto; padding:21px 0; border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.wordmark { display:inline-flex; gap:12px; align-items:center; justify-self:start; text-decoration:none; }
.wordmark-core { display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(80,207,255,.5); border-radius:11px; color:#c7f5ff; background:linear-gradient(145deg,#123858,#02070d); box-shadow:inset 0 1px rgba(255,255,255,.14),0 0 25px rgba(0,158,255,.18); font-family:ui-monospace,monospace; font-size:1.18rem; font-weight:900; }
.wordmark strong,.wordmark small { display:block; }.wordmark strong { letter-spacing:.24em; }.wordmark small { margin-top:3px; color:#59768c; font-size:.57rem; letter-spacing:.11em; text-transform:uppercase; }
.site-header nav { display:flex; gap:30px; }.site-header nav a { color:#82a0b4; font-size:.68rem; font-weight:700; letter-spacing:.11em; text-decoration:none; text-transform:uppercase; transition:color .18s; }.site-header nav a:hover,.site-header nav a:focus-visible { color:var(--cyan); }
.header-actions { display:flex; gap:13px; align-items:center; justify-self:end; }
.network-state { display:flex; gap:8px; align-items:center; justify-self:end; color:#9bd8bd; font-family:ui-monospace,monospace; font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; }.network-state i,.terminal-bar i { width:7px; height:7px; border-radius:50%; background:#43efad; box-shadow:0 0 12px #43efad; animation:pulse 2s ease-in-out infinite; }
.admin-button { display:inline-flex; gap:7px; align-items:center; padding:10px 12px; border:1px solid rgba(71,196,255,.38); border-radius:8px; color:#bceeff; background:linear-gradient(145deg,rgba(16,77,119,.62),rgba(2,12,24,.88)); box-shadow:inset 0 1px rgba(255,255,255,.1); font-size:.61rem; font-weight:800; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; transition:.18s ease; }.admin-button span { color:#48d8ff; font-size:.56rem; }.admin-button:hover,.admin-button:focus-visible { border-color:var(--cyan); box-shadow:0 0 24px rgba(0,171,255,.2); transform:translateY(-1px); }

.hero { display:grid; grid-template-columns:minmax(0,.82fr) minmax(540px,1.18fr); gap:clamp(28px,4vw,70px); align-items:center; width:min(1480px,calc(100% - 56px)); min-height:780px; margin:auto; padding:58px 0 90px; }
.hero-copy { position:relative; z-index:2; }.eyebrow { margin:0 0 17px; color:var(--cyan); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }h1 { max-width:760px; margin-bottom:24px; font-size:clamp(3.5rem,6.8vw,7.1rem); line-height:.9; letter-spacing:-.075em; text-wrap:balance; }h1 span { color:transparent; background:linear-gradient(100deg,#8eeeff,#178ee5 53%,#c2e8ff); background-clip:text; -webkit-background-clip:text; filter:drop-shadow(0 0 22px rgba(0,142,255,.28)); }
.hero-lede { max-width:640px; color:#9ab5c7; font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.74; }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin:30px 0 37px; }.button { display:inline-flex; gap:18px; align-items:center; padding:14px 17px; border:1px solid var(--line); border-radius:8px; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:.2s ease; }.button-primary { border-color:rgba(49,210,255,.48); background:linear-gradient(145deg,rgba(18,115,178,.55),rgba(3,20,38,.84)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 32px rgba(0,145,255,.13); }.button-quiet { color:#88a6ba; background:rgba(2,8,15,.65); }.button:hover,.button:focus-visible { border-color:var(--cyan); color:white; box-shadow:0 0 30px rgba(0,182,255,.23); transform:translateY(-2px); }
.hero-facts { display:flex; flex-wrap:wrap; gap:10px; margin:0; }.hero-facts div { min-width:130px; padding:12px 14px; border-left:1px solid #1f8bcc; background:linear-gradient(90deg,rgba(6,39,68,.55),transparent); }.hero-facts dt { color:#50738b; font-size:.57rem; letter-spacing:.13em; text-transform:uppercase; }.hero-facts dd { margin:5px 0 0; font-family:ui-monospace,monospace; font-size:.72rem; font-weight:800; }

.kos-terminal { position:relative; overflow:hidden; border:1px solid rgba(80,183,239,.32); border-radius:18px; background:rgba(1,7,15,.84); box-shadow:inset 0 1px rgba(255,255,255,.07),0 38px 100px rgba(0,0,0,.48),0 0 80px rgba(0,116,255,.13); backdrop-filter:blur(16px); }
.terminal-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); color:#6f94ad; font-family:ui-monospace,monospace; font-size:.62rem; letter-spacing:.11em; }.terminal-bar span { display:flex; gap:8px; align-items:center; }.terminal-bar small { color:#42ddff; }
.kos-map { position:relative; isolation:isolate; overflow:hidden; }.kos-map::after { position:absolute; inset:0; z-index:1; content:""; pointer-events:none; border:1px solid rgba(114,213,255,.08); background:radial-gradient(circle,transparent 54%,rgba(0,4,11,.38)); }.kos-map img { display:block; width:100%; height:auto; }
.map-scan { position:absolute; inset:-30% 0 auto; z-index:2; height:28%; pointer-events:none; background:linear-gradient(transparent,rgba(40,205,255,.14),rgba(164,241,255,.34),transparent); animation:scan 6s linear infinite; mix-blend-mode:screen; }
.hotspot { position:absolute; z-index:4; width:17%; aspect-ratio:1; border:1px solid transparent; border-radius:50%; outline:none; transform:translate(-50%,-50%); transition:.18s ease; }.hotspot > span { position:absolute; left:50%; bottom:-31px; z-index:5; min-width:110px; padding:7px 9px; border:1px solid rgba(63,207,255,.38); border-radius:7px; color:white; background:rgba(0,8,18,.95); box-shadow:0 10px 30px rgba(0,0,0,.5); font-size:.65rem; font-weight:800; opacity:0; pointer-events:none; text-align:center; transform:translate(-50%,5px); transition:.18s; white-space:nowrap; }.hotspot > span small { display:block; margin-top:2px; color:#59cfff; font-size:.52rem; font-weight:600; }.hotspot:hover,.hotspot:focus-visible { border-color:var(--cyan); background:rgba(0,183,255,.09); box-shadow:0 0 0 7px rgba(0,184,255,.09),0 0 38px rgba(0,169,255,.48); transform:translate(-50%,-50%) scale(1.04); }.hotspot:hover > span,.hotspot:focus-visible > span { opacity:1; transform:translate(-50%,0); }
.hotspot-chatgpt { left:26.9%; top:10.5%; }.hotspot-claude { left:73.8%; top:10.5%; }.hotspot-deepseek { left:11.2%; top:31.7%; }.hotspot-grok { left:88.7%; top:31.7%; }.hotspot-kimi { left:11.3%; top:56.7%; }.hotspot-djoe { left:88.8%; top:56.7%; }.hotspot-gemini { left:17.5%; top:79%; }.hotspot-openwebui { left:82.6%; top:79%; }
.terminal-hint { margin:0; padding:13px 16px; border-top:1px solid var(--line); color:#617f94; font-family:ui-monospace,monospace; font-size:.62rem; letter-spacing:.04em; }.terminal-hint span { color:#41eeb0; }

.section-frame { width:min(1480px,calc(100% - 56px)); margin:auto; padding:100px 0; border-top:1px solid var(--line); }.section-heading { display:flex; gap:30px; align-items:end; justify-content:space-between; margin-bottom:34px; }.section-heading h2,.architecture h2 { margin-bottom:0; font-size:clamp(2.6rem,5vw,5.3rem); line-height:.98; letter-spacing:-.06em; }.section-heading > p { max-width:470px; margin-bottom:5px; color:var(--muted); line-height:1.65; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.service-card { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; min-height:126px; overflow:hidden; padding:18px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,rgba(11,30,48,.92),rgba(2,7,14,.95)); box-shadow:inset 0 1px rgba(255,255,255,.055),0 20px 60px rgba(0,0,0,.25); text-decoration:none; transition:.2s ease; }.service-card::after { position:absolute; right:-34px; bottom:-65px; width:140px; height:140px; content:""; border:1px solid rgba(31,182,255,.12); border-radius:50%; box-shadow:0 0 55px rgba(0,128,255,.13); }.service-card:hover,.service-card:focus-visible { border-color:rgba(52,213,255,.7); background:linear-gradient(145deg,rgba(15,54,83,.95),rgba(2,12,24,.97)); box-shadow:0 0 35px rgba(0,156,255,.16); transform:translateY(-3px); }.service-index { position:absolute; top:10px; right:12px; color:#33536b; font-family:ui-monospace,monospace; font-size:.57rem; }.service-mark { display:grid; width:46px; height:46px; place-items:center; border:1px solid rgba(78,186,241,.35); border-radius:50%; color:#b8edff; background:radial-gradient(circle at 40% 30%,#16456b,#020912 72%); box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 20px rgba(0,150,255,.14); font-family:ui-monospace,monospace; font-size:1rem; font-weight:900; }.mark-claude { color:#ff9b5f; }.mark-deepseek { color:#4f75ff; }.mark-gemini { color:#8bddff; }.mark-openwebui { color:#62df83; }.service-copy strong,.service-copy small { display:block; }.service-copy strong { margin-bottom:5px; font-size:.86rem; }.service-copy small { color:#648299; font-size:.64rem; }.service-arrow { position:relative; z-index:2; color:#4984aa; }

.architecture { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; min-height:650px; }.architecture-copy > p:last-child { max-width:620px; margin-top:27px; color:#7897ab; font-size:1rem; line-height:1.75; }.system-diagram { position:relative; display:grid; aspect-ratio:1; max-width:560px; margin:auto; place-items:center; }.system-diagram::before { position:absolute; inset:28%; content:""; border-radius:50%; background:#078aff; filter:blur(70px); opacity:.22; }.diagram-orbit { position:absolute; border:1px solid rgba(55,201,255,.24); border-radius:50%; }.orbit-one { inset:12%; border-style:dashed; animation:spin 35s linear infinite; }.orbit-two { inset:25%; box-shadow:0 0 40px rgba(0,144,255,.08); }.system-diagram > strong { position:relative; z-index:2; display:grid; width:180px; height:180px; place-items:center; border:1px solid rgba(80,213,255,.5); border-radius:50%; background:radial-gradient(circle at 42% 32%,#123c61,#02070e 70%); box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 50px rgba(0,148,255,.22); font-size:1.35rem; letter-spacing:.17em; }.system-diagram > strong small { position:absolute; bottom:50px; color:#4f7893; font-size:.47rem; letter-spacing:.12em; }.diagram-node { position:absolute; z-index:3; display:grid; width:66px; height:66px; place-items:center; border:1px solid rgba(60,196,255,.38); border-radius:50%; color:#9deaff; background:#041323; box-shadow:0 0 22px rgba(0,143,255,.18); font-family:ui-monospace,monospace; font-size:.62rem; font-weight:800; }.node-a { left:5%; top:45%; }.node-b { left:45%; top:5%; }.node-c { right:5%; top:45%; }.node-d { left:45%; bottom:5%; }

footer { position:relative; display:flex; gap:20px; align-items:center; justify-content:space-between; width:min(1480px,calc(100% - 56px)); margin:auto; padding:28px 0 40px; border-top:1px solid var(--line); color:#506f84; font-family:ui-monospace,monospace; font-size:.61rem; letter-spacing:.07em; text-transform:uppercase; }footer a { text-decoration:none; }.footer-brand { color:#b8eafa; font-weight:900; letter-spacing:.2em; }

@keyframes pulse { 50% { opacity:.35; } }@keyframes scan { from { transform:translateY(0); } to { transform:translateY(620%); } }@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:1120px) { .hero { grid-template-columns:1fr; padding-top:90px; }.hero-copy { max-width:860px; }.kos-terminal { max-width:850px; margin:auto; }.service-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .site-header { grid-template-columns:1fr auto; }.site-header nav,.network-state { display:none; }.hero,.section-frame,footer,.site-header { width:min(100% - 28px,1480px); }.hero { min-height:0; padding:78px 0 70px; }h1 { font-size:clamp(3.25rem,16vw,5.4rem); }.section-heading { display:block; }.section-heading > p { margin-top:17px; }.architecture { grid-template-columns:1fr; min-height:0; }.system-diagram { width:100%; }.hotspot { width:19%; }.hotspot > span { display:none; }footer { align-items:start; flex-direction:column; } }
@media (max-width:520px) { .wordmark small { display:none; }.service-grid { grid-template-columns:1fr; }.hero-facts div { flex:1 1 120px; }.button { width:100%; justify-content:center; }.terminal-bar { font-size:.51rem; }.terminal-hint { line-height:1.5; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }