:root { color-scheme: dark; --bg:#04020b; --panel:rgba(15,9,34,.84); --panel-strong:rgba(29,14,58,.94); --line:rgba(151,95,255,.28); --line-hot:rgba(139,92,246,.72); --text:#f7f3ff; --muted:#ada3c4; --accent:#9b6cff; --accent-2:#39d9ff; --shadow:0 30px 90px rgba(0,0,0,.56),0 0 45px rgba(112,54,255,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--text); font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:linear-gradient(rgba(126,73,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(126,73,255,.035) 1px,transparent 1px),radial-gradient(circle at 82% 10%,rgba(102,35,255,.2),transparent 31rem),radial-gradient(circle at 10% 30%,rgba(29,181,255,.09),transparent 28rem),var(--bg); background-size:54px 54px,54px 54px,auto,auto,auto; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background:linear-gradient(115deg,transparent 0 48%,rgba(137,80,255,.055) 49%,transparent 50% 100%); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.nav { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); background:rgba(4,2,11,.82); backdrop-filter:blur(20px); }
.nav-inner { height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line-hot); border-radius:5px; color:var(--accent-2); background:linear-gradient(145deg,rgba(139,92,246,.22),rgba(34,211,238,.06)); box-shadow:inset 0 0 22px rgba(139,92,246,.18),0 0 22px rgba(118,66,255,.14); transform:rotate(45deg); }
.brand-mark svg { width:21px; transform:rotate(-45deg); }
.nav-links { display:flex; align-items:center; gap:28px; color:var(--muted); font-size:.88rem; text-transform:uppercase; letter-spacing:.09em; }
.nav-links a:hover,.nav-links a:focus-visible { color:var(--accent-2); }
.btn { min-height:47px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 22px; border:1px solid transparent; border-radius:3px; cursor:pointer; font-weight:800; letter-spacing:.04em; text-transform:uppercase; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:linear-gradient(100deg,#7441e9,#a66bff 58%,#43c8ed); color:white; box-shadow:0 0 30px rgba(139,92,246,.32); }
.btn-primary:hover { box-shadow:0 0 42px rgba(139,92,246,.5); }
.btn-secondary { background:rgba(20,10,42,.72); border-color:var(--line); color:var(--text); }
.hero { min-height:calc(100vh - 76px); padding:88px 0 68px; display:grid; grid-template-columns:1.05fr .95fr; gap:76px; align-items:center; }
.eyebrow { color:var(--accent-2); text-transform:uppercase; letter-spacing:.22em; font-size:.76rem; font-weight:900; text-shadow:0 0 18px rgba(57,217,255,.45); }
h1 { margin:16px 0 22px; max-width:790px; font-size:clamp(3rem,7vw,6.3rem); line-height:.93; letter-spacing:-.065em; text-transform:uppercase; text-shadow:0 0 32px rgba(139,92,246,.16); }
.hero-copy h1 em { display:block; color:transparent; font-style:normal; -webkit-text-stroke:1px var(--accent); text-shadow:0 0 26px rgba(139,92,246,.3); }
.hero-copy p { max-width:620px; margin:0 0 30px; color:var(--muted); font-size:1.08rem; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.microcopy { margin-top:18px; color:#776d91; font:700 .77rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.server-art { position:relative; min-height:460px; display:grid; place-items:center; perspective:900px; }
.orbit { position:absolute; width:410px; height:410px; border:1px solid rgba(139,92,246,.3); transform:rotate(45deg); animation:pulseGate 4s ease-in-out infinite; box-shadow:inset 0 0 55px rgba(74,35,160,.12),0 0 50px rgba(139,92,246,.08); }
.orbit::before,.orbit::after { content:""; position:absolute; inset:22px; border:1px solid rgba(57,217,255,.18); }
.orbit::after { inset:48%; background:var(--accent-2); box-shadow:0 0 32px var(--accent-2); }
.server { position:relative; z-index:1; width:min(350px,82vw); padding:28px; border:1px solid var(--line-hot); border-radius:4px; background:linear-gradient(145deg,rgba(25,13,54,.96),rgba(5,4,17,.96)); box-shadow:var(--shadow); clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); }
.server::before { content:"SYSTEM"; position:absolute; top:7px; right:14px; color:rgba(57,217,255,.4); font:700 .6rem ui-monospace,monospace; letter-spacing:.18em; }
.server-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.server-title { font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.status { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.8rem; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 15px var(--accent-2); }
.drive { margin-top:10px; padding:16px; display:flex; align-items:center; gap:15px; border:1px solid var(--line); border-radius:3px; background:rgba(10,5,24,.72); transition:border-color .2s ease,transform .2s ease; }
.drive:hover { border-color:var(--line-hot); transform:translateX(3px); }
.drive-icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(57,217,255,.22); border-radius:3px; background:rgba(57,217,255,.06); color:var(--accent-2); }
.drive-icon svg { width:21px; }
.drive strong { display:block; font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; }
.drive span { color:var(--muted); font-size:.78rem; }
.section { padding:82px 0; }
.section-head { max-width:650px; margin-bottom:34px; }
.section h2 { margin:8px 0 12px; font-size:clamp(2rem,4vw,3.6rem); line-height:1.02; letter-spacing:-.045em; text-transform:uppercase; }
.section-head p,.card p,.privacy p { margin:0; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { min-height:220px; padding:25px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:3px; background:var(--panel); clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px); }
.card::after { content:""; position:absolute; left:0; bottom:0; width:42%; height:2px; background:linear-gradient(90deg,var(--accent),transparent); }
.card-icon { width:44px; height:44px; display:grid; place-items:center; margin-bottom:28px; border:1px solid rgba(139,92,246,.28); border-radius:3px; color:var(--accent-2); background:rgba(139,92,246,.1); }
.card-icon svg { width:22px; }
.card h3 { margin:0 0 8px; font-size:1.02rem; text-transform:uppercase; letter-spacing:.06em; }
.card p { font-size:.92rem; }
.privacy { margin:54px 0 84px; padding:42px; border:1px solid var(--line-hot); border-radius:3px; display:flex; justify-content:space-between; align-items:center; gap:34px; background:linear-gradient(120deg,rgba(66,28,130,.36),rgba(8,15,34,.78)); clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px); }
.privacy h2 { margin:0 0 8px; font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.04em; text-transform:uppercase; }
.footer { padding:30px 0 46px; border-top:1px solid var(--line); color:#776d91; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.footer .shell { display:flex; justify-content:space-between; gap:20px; }
.portal-body { background-color:#030108; }
.portal-layout { min-height:100vh; display:grid; grid-template-columns:245px 1fr; }
.sidebar { padding:28px 20px; border-right:1px solid var(--line); background:rgba(7,3,18,.94); box-shadow:12px 0 50px rgba(0,0,0,.25); }
.sidebar .brand { margin:0 8px 42px; }
.side-nav { display:grid; gap:7px; }
.side-link { display:flex; align-items:center; gap:12px; min-height:46px; padding:0 13px; border:1px solid transparent; border-radius:2px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; }
.side-link.active { color:var(--accent-2); border-color:var(--line); background:rgba(139,92,246,.1); box-shadow:inset 3px 0 var(--accent); }
.side-link svg { width:19px; }
.side-note { position:fixed; bottom:26px; width:205px; padding:15px; border:1px solid var(--line); border-radius:2px; color:var(--muted); font-size:.76rem; background:rgba(18,8,39,.62); }
.portal-main { padding:34px clamp(22px,5vw,68px) 60px; overflow:hidden; }
.portal-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:42px; }
.portal-top h1 { margin:0; font-size:clamp(2rem,4vw,3.5rem); }
.portal-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.live-pill { display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid var(--line); border-radius:2px; color:var(--muted); font:700 .78rem ui-monospace,monospace; text-transform:uppercase; }
.summary { display:grid; grid-template-columns:1.35fr .65fr; gap:16px; margin-bottom:28px; }
.storage-card,.uptime-card { padding:27px; border:1px solid var(--line); border-radius:3px; background:var(--panel); clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.storage-card { background:linear-gradient(135deg,rgba(60,24,126,.54),rgba(7,7,25,.82)); }
.storage-card h2 { margin:0 0 5px; font-size:.9rem; text-transform:uppercase; letter-spacing:.09em; }
.storage-number { margin:7px 0 19px; font-size:clamp(2.1rem,5vw,4.4rem); letter-spacing:-.06em; line-height:1; color:var(--accent-2); text-shadow:0 0 24px rgba(57,217,255,.2); }
.storage-number span { color:var(--muted); font-size:.36em; letter-spacing:0; }
.bar { height:7px; overflow:hidden; background:rgba(255,255,255,.07); }
.bar-fill { width:66%; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 15px var(--accent); }
.bar-label { margin-top:10px; display:flex; justify-content:space-between; color:var(--muted); font-size:.78rem; }
.uptime-card { display:flex; flex-direction:column; justify-content:space-between; }
.uptime-card span { color:var(--muted); font-size:.82rem; }
.uptime-card strong { display:block; font-size:2rem; letter-spacing:-.04em; text-transform:uppercase; color:var(--accent); }
.uptime-card strong.reachable { color:var(--accent-2); text-shadow:0 0 20px rgba(57,217,255,.28); }
.uptime-card strong.unreachable { color:#ff6b9b; }
.services-title { margin:36px 0 16px; font-size:.9rem; text-transform:uppercase; letter-spacing:.12em; }
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.service { padding:21px; position:relative; border:1px solid var(--line); border-radius:3px; background:var(--panel); transition:.2s ease; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.service:hover { transform:translateY(-3px); border-color:var(--line-hot); background:var(--panel-strong); box-shadow:0 14px 34px rgba(74,32,160,.2); }
.service-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; }
.service-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(57,217,255,.25); border-radius:2px; background:rgba(57,217,255,.06); color:var(--accent-2); }
.service-icon svg { width:21px; }
.arrow { color:var(--accent); font-size:1.2rem; }
.service h3 { margin:0 0 3px; font-size:.94rem; text-transform:uppercase; letter-spacing:.06em; }
.service p { margin:0; color:var(--muted); font-size:.82rem; }
.endpoint-note { margin-top:28px; padding:16px 18px; border:1px dashed var(--line); border-radius:2px; color:var(--muted); font-size:.82rem; background:rgba(17,8,36,.5); }
@keyframes pulseGate { 0%,100% { opacity:.58; scale:.96; } 50% { opacity:1; scale:1.03; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; scroll-behavior:auto!important; } }
@media (max-width:840px) { .nav-links a:not(.btn){display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:66px;gap:35px}.server-art{min-height:390px}.orbit{width:330px;height:330px}.grid{grid-template-columns:1fr}.privacy{align-items:flex-start;flex-direction:column}.portal-layout{display:block}.sidebar{position:sticky;top:0;z-index:10;padding:13px 18px;border-right:0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.sidebar .brand{margin:0}.side-nav{display:flex}.side-link{width:44px;padding:0;justify-content:center}.side-link span,.side-note{display:none}.summary{grid-template-columns:1fr}.services{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px) { .shell{width:min(100% - 28px,1160px)}.nav-inner{height:68px}.nav-links{gap:0}h1{font-size:3rem}.hero{padding-top:48px}.server-art{min-height:340px}.orbit{width:275px;height:275px}.privacy{padding:28px}.footer .shell{flex-direction:column}.portal-main{padding-inline:16px}.portal-top{align-items:flex-start;flex-direction:column;margin-bottom:26px}.portal-actions{width:100%;justify-content:flex-start}.services{grid-template-columns:1fr}.side-link:not(.active){display:none} }

/* AI portal navigation: retain the System palette and angular buttons. */
.nav-links .nav-ai { color:var(--accent-2); border-color:var(--line-hot); background:linear-gradient(120deg,rgba(139,92,246,.22),rgba(57,217,255,.08)); white-space:nowrap; }
.nav-links .nav-ai:hover,.nav-links .nav-ai:focus-visible { color:var(--text); border-color:var(--accent-2); background:var(--panel-strong); }
.nav-links .nav-ai:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--accent-2); }
@media (max-width:840px) { .nav-inner { height:auto; min-height:76px; flex-wrap:wrap; padding-block:14px; gap:14px; } .nav-links { flex-wrap:wrap; gap:12px; } }
@media (max-width:560px) { .nav-inner { align-items:flex-start; } .nav-links { width:100%; gap:10px; } .nav-links .btn { flex:1; padding-inline:14px; white-space:nowrap; } }