@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #07100c;
  --bg-soft: #0a1510;
  --surface: rgba(15, 29, 22, .86);
  --surface-2: #101f18;
  --line: rgba(145, 255, 194, .13);
  --line-strong: rgba(145, 255, 194, .27);
  --text: #eef9f2;
  --muted: #8da398;
  --green: #63f59c;
  --green-2: #25bd67;
  --green-dark: #0e6e3b;
  --amber: #e6ba62;
  --shadow: 0 24px 80px rgba(0, 0, 0, .3);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 14px; background: var(--green); color: #041008; border-radius: 6px; }
.skip-link:focus { top: 16px; }
.brand-logo {
height: 42px;
width: auto;
display: block;
}

.site-header { position: sticky; top: 0; z-index: 100; height: 76px; border-bottom: 1px solid var(--line); background: rgba(7, 16, 12, .84); backdrop-filter: blur(18px); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid var(--green-2); border-radius: 7px; color: var(--green); font: 600 .77rem var(--mono); box-shadow: inset 0 0 20px rgba(99, 245, 156, .08); }
.brand-copy { display: grid; line-height: 1.2; }
.brand-copy strong { font-size: .88rem; letter-spacing: .02em; }
.brand-copy small { color: var(--muted); font: .66rem var(--mono); text-transform: uppercase; letter-spacing: .16em; margin-top: 3px; }
.desktop-nav { display: flex; align-items: center; gap: 26px; }
.desktop-nav a { color: #aebfb6; font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.desktop-nav a:hover { color: var(--green); }
.system-state, .live-label { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font: 500 .69rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.system-state { border: 1px solid var(--line-strong); padding: 8px 11px; border-radius: 5px; background: rgba(99,245,156,.04); }
.status-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(99,245,156,.1), 0 0 14px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .55; box-shadow: 0 0 0 7px rgba(99,245,156,0), 0 0 8px var(--green); } }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { list-style: none; width: 40px; height: 40px; display: grid; align-content: center; gap: 5px; cursor: pointer; padding: 9px; border: 1px solid var(--line); border-radius: 6px; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { display: block; height: 1px; background: var(--text); }
.mobile-menu nav { position: absolute; top: 50px; right: 0; min-width: 210px; padding: 10px; border: 1px solid var(--line-strong); background: #0b1711; box-shadow: var(--shadow); }
.mobile-menu nav a { display: block; padding: 12px; color: #c0d1c7; font: .77rem var(--mono); text-transform: uppercase; }
.mobile-menu nav a:hover { color: var(--green); background: rgba(99,245,156,.06); }

.hero { min-height: 720px; position: relative; display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 72% 45%, rgba(31, 167, 85, .1), transparent 33%), linear-gradient(115deg, #07100c 35%, #091610); }
.grid-overlay { position: absolute; inset: 0; opacity: .38; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 93%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: center; padding-block: 100px; }
.orb { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.orb-one { width: 480px; height: 480px; right: -260px; top: 0; border: 1px solid rgba(99,245,156,.1); }
.orb-two { width: 230px; height: 230px; left: -150px; bottom: -80px; border: 1px solid rgba(99,245,156,.08); }
.eyebrow { margin: 0 0 16px; color: #98aaa0; font: 500 .73rem var(--mono); letter-spacing: .16em; }
.eyebrow span { color: var(--green); }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .98; letter-spacing: -.06em; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(159, 255, 201, .55); }
.hero-intro { max-width: 650px; margin: 30px 0; color: #a8b9b0; font-size: 1.06rem; }
.hero-actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 4px; font: 600 .76rem var(--mono); text-transform: uppercase; letter-spacing: .05em; transition: .2s ease; }
.button-primary { background: var(--green); color: #031008; border-color: var(--green); }
.button-primary:hover { background: #8affb5; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99,245,156,.15); }
.button-secondary { background: rgba(255,255,255,.02); color: var(--text); }
.button-secondary:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.hero-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 36px 0 0; }
.hero-tags li, .project-card li { padding: 5px 9px; border: 1px solid var(--line); color: var(--muted); background: rgba(99,245,156,.025); font: .65rem var(--mono); text-transform: uppercase; }

.command-panel { border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(17,35,26,.9), rgba(8,20,14,.95)); box-shadow: var(--shadow), inset 0 0 70px rgba(55,216,116,.035); }
.panel-header { height: 43px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); border-bottom: 1px solid var(--line); font: .61rem var(--mono); letter-spacing: .1em; }
.window-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--muted); }.window-dot.red{background:#ad5d5d}.window-dot.amber{background:#b68d43}.window-dot.green{background:var(--green-2)}
.radar { width: 270px; aspect-ratio: 1; margin: 35px auto 26px; position: relative; border: 1px solid var(--line-strong); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 31px, rgba(99,245,156,.06) 32px 33px), linear-gradient(rgba(99,245,156,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(99,245,156,.045) 1px, transparent 1px); background-size: auto, 25% 25%, 25% 25%; overflow: hidden; }
.radar::before,.radar::after { content:""; position:absolute; background:var(--line-strong); }.radar::before{width:1px;height:100%;left:50%}.radar::after{height:1px;width:100%;top:50%}
.radar-line { position: absolute; width: 50%; height: 50%; left: 50%; top: 0; transform-origin: bottom left; background: conic-gradient(from 90deg at 0 100%, rgba(99,245,156,.24), transparent 46deg); animation: scan 5s linear infinite; }
@keyframes scan { to { transform: rotate(360deg); } }
.radar-center { position: absolute; inset: 0; margin: auto; width: 95px; height: 95px; display: grid; place-content: center; text-align: center; z-index: 3; border-radius: 50%; background: rgba(5,19,11,.88); border: 1px solid var(--green-2); box-shadow: 0 0 36px rgba(99,245,156,.15); }
.radar-center strong { color: var(--green); font: 600 .78rem var(--mono); letter-spacing: .1em; }.radar-center small { color: var(--muted); font: .55rem var(--mono); }
.radar-node { position:absolute;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green);z-index:4}.node-one{left:22%;top:34%}.node-two{right:23%;bottom:24%}
.terminal-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.terminal-stats div { padding: 14px; display: grid; gap: 3px; border-right: 1px solid var(--line); }.terminal-stats div:last-child{border:0}.terminal-stats dt{color:var(--muted);font:.59rem var(--mono);text-transform:uppercase}.terminal-stats dd{margin:0;font:600 .73rem var(--mono)}.terminal-stats .online{color:var(--green)}
.terminal-line { margin: 20px 18px; color: #b3c4ba; font: .65rem var(--mono); }.terminal-line span{color:var(--green)}.terminal-line i{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}

.section { padding: 105px 0; border-bottom: 1px solid var(--line); }
.section-heading { margin-bottom: 40px; }.section-heading h2,.lab-section h2,.contact-section h2{margin:0;font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.045em}.split-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.split-heading>p{max-width:430px;margin:0;color:var(--muted);font-size:.9rem}
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric-card { min-height: 145px; display: flex; align-items: center; gap: 18px; padding: 24px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(17,32,24,.72), rgba(10,21,15,.7)); }
.icon-box { flex: 0 0 45px; width:45px;height:45px;display:grid;place-items:center;color:var(--green);border:1px solid var(--line-strong);font:1.15rem var(--mono); }
.metric-card div:last-child { display:grid; }.metric-card span{color:var(--muted);font:.64rem var(--mono);text-transform:uppercase;letter-spacing:.07em}.metric-card strong{font-size:1.6rem;line-height:1.25}.metric-card small{color:#8fa097;font:.61rem var(--mono)}.metric-card small i{display:inline-block;width:5px;height:5px;margin-right:4px;background:var(--green);border-radius:50%}
.services-section { background: #08120d; }
.service-list { border: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 48px 1fr 100px 75px 86px; align-items:center;gap:18px;padding:17px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.008);transition:.2s }.service-row:last-child{border:0}.service-row:hover{background:rgba(99,245,156,.035)}
.service-icon { width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--green);font:600 .61rem var(--mono); }
.service-name { display:grid;line-height:1.3}.service-name strong{font-size:.86rem}.service-name span{color:var(--muted);font-size:.72rem}.service-zone,.latency{color:var(--muted);font:.61rem var(--mono)}.status-pill{justify-self:end;padding:5px 10px;color:var(--green);background:rgba(99,245,156,.07);border:1px solid var(--line-strong);font:.6rem var(--mono);text-transform:uppercase}.status-pill::before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;background:var(--green);border-radius:50%}
.text-link { color:var(--green);font:.73rem var(--mono);text-transform:uppercase;border-bottom:1px solid var(--line-strong);padding-bottom:4px}.text-link span{margin-left:14px}
.project-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.project-card { min-width:0;padding:24px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(17,32,24,.72),rgba(8,18,12,.72));transition:.25s}.project-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.project-meta { display:flex;justify-content:space-between;color:var(--muted);font:.58rem var(--mono);letter-spacing:.1em}.project-meta span:last-child{color:var(--green)}
.project-visual { height:180px;margin:22px 0;position:relative;overflow:hidden;border:1px solid var(--line);background-color:#09130e;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px}
.project-card h3{margin:0 0 8px;font-size:1.22rem}.project-card p{min-height:68px;margin:0;color:var(--muted);font-size:.83rem}.project-card ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:20px 0 0}
.visual-app{padding:28px}.mini-window{height:18px;border:1px solid var(--line-strong);padding-left:7px;display:flex;align-items:center;gap:4px}.mini-window span{width:4px;height:4px;background:var(--green-2);border-radius:50%}.visual-grid{height:96px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px solid var(--line-strong);border-top:0}.visual-grid i{display:block;background:linear-gradient(135deg,rgba(99,245,156,.18),rgba(99,245,156,.03));border:1px solid var(--line)}
.network-node{position:absolute;width:22px;height:22px;border:1px solid var(--green);border-radius:50%;background:#0b2115;box-shadow:0 0 14px rgba(99,245,156,.23);z-index:2}.n1{left:45%;top:21%}.n2{left:20%;top:60%}.n3{right:18%;top:55%}.n4{right:18%;top:15%}.network-line{height:1px;position:absolute;background:var(--green-dark);transform-origin:left}.l1{width:100px;left:27%;top:61%;transform:rotate(-35deg)}.l2{width:114px;left:50%;top:32%;transform:rotate(20deg)}.l3{width:95px;left:49%;top:38%;transform:rotate(58deg)}
.visual-server{display:grid;place-items:center}.server-rack{width:112px;padding:8px;border:1px solid var(--line-strong);background:#0b1811}.server-rack i{height:24px;display:block;margin:5px;background:linear-gradient(90deg,rgba(99,245,156,.14),rgba(99,245,156,.02));border:1px solid var(--line)}.server-bars{position:absolute;right:22px;bottom:25px;display:flex;align-items:end;gap:4px;height:50px}.server-bars span{display:block;width:5px;background:var(--green-2)}.server-bars span:nth-child(1){height:40%}.server-bars span:nth-child(2){height:80%}.server-bars span:nth-child(3){height:60%}
.lab-section { background:radial-gradient(circle at 10% 50%,rgba(42,182,96,.07),transparent 35%),#08120d; }
.lab-grid { display:grid;grid-template-columns:1fr .85fr;gap:100px;align-items:center}.lab-intro{max-width:580px;color:var(--muted);font-size:.9rem}.progress-list{display:grid;gap:23px;margin-top:35px}.progress-item>div{display:flex;justify-content:space-between;margin-bottom:8px;font:.7rem var(--mono);text-transform:uppercase}.progress-item strong{color:var(--green)}progress{width:100%;height:4px;border:0;background:#13261b}progress::-webkit-progress-bar{background:#13261b}progress::-webkit-progress-value{background:linear-gradient(90deg,var(--green-dark),var(--green))}progress::-moz-progress-bar{background:linear-gradient(90deg,var(--green-dark),var(--green))}
.activity-panel{border:1px solid var(--line-strong);background:rgba(10,24,16,.78)}.panel-title{display:flex;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line);font:600 .63rem var(--mono);letter-spacing:.09em}.panel-title .live-label i{width:5px;height:5px;background:var(--green);border-radius:50%}.timeline{list-style:none;margin:0;padding:12px 22px}.timeline li{position:relative;display:grid;grid-template-columns:55px 1fr;gap:18px;padding:19px 0;border-bottom:1px solid var(--line)}.timeline li:last-child{border:0}.timeline li::before{content:"";position:absolute;left:61px;top:27px;width:5px;height:5px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green)}.timeline time{color:var(--green);font:.58rem var(--mono)}.timeline div{padding-left:12px}.timeline strong{font-size:.79rem}.timeline p{margin:2px 0 0;color:var(--muted);font-size:.7rem}
.stack-section{padding:60px 0}.centered{text-align:center}.stack-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:25px}.stack-row span{padding:9px 13px;border:1px solid var(--line);color:#a6b7ad;background:rgba(255,255,255,.01);font:.65rem var(--mono)}
.contact-section{position:relative;overflow:hidden;padding:110px 0;text-align:center;background:radial-gradient(circle at 50% 100%,rgba(42,182,96,.18),transparent 46%),#08120d}.contact-inner{position:relative;z-index:2}.contact-section p:not(.eyebrow){color:var(--muted)}.contact-actions{justify-content:center;margin-top:28px}
footer{padding:35px 0;background:#050c08}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font:.64rem var(--mono);text-transform:uppercase}.footer-inner>div{display:grid}.footer-inner strong{color:var(--text);font-size:.67rem}.footer-inner span{font-size:.55rem}.footer-inner a{color:var(--green)}

@media (max-width: 980px) {
  .desktop-nav, .system-state { display:none; }.mobile-menu{display:block}
  .hero { min-height:auto }.hero-grid{grid-template-columns:1fr;gap:58px;padding-block:88px}.hero-copy{max-width:760px}.command-panel{width:min(100%,530px)}
  .metric-grid{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:repeat(2,1fr)}.project-card:last-child{grid-column:span 2}.lab-grid{grid-template-columns:1fr;gap:55px}.activity-panel{max-width:680px}
}

@media (max-width: 680px) {
  .container{width:min(100% - 28px,1180px)}.site-header{height:66px}.brand-copy strong{font-size:.75rem}.brand-copy small{font-size:.56rem}
  .hero-grid{padding-block:72px}.hero h1{font-size:clamp(2.7rem,14vw,4rem)}.hero-intro{font-size:.95rem}.hero-actions,.contact-actions{flex-direction:column}.button{width:100%}.hero-tags{margin-top:28px}
  .command-panel{width:100%}.radar{width:min(240px,75vw)}.terminal-stats{grid-template-columns:1fr}.terminal-stats div{grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--line)}.terminal-stats div:last-child{border-bottom:0}
  .section{padding:78px 0}.split-heading{align-items:flex-start;flex-direction:column}.section-heading{margin-bottom:28px}.metric-grid{grid-template-columns:1fr}.metric-card{min-height:120px}
  .service-row{grid-template-columns:43px 1fr auto;gap:12px;padding:15px 13px}.service-zone,.latency{display:none}.status-pill{grid-column:3;grid-row:1}.service-name span{font-size:.64rem}
  .project-grid{grid-template-columns:1fr}.project-card:last-child{grid-column:auto}.project-card p{min-height:auto}.project-visual{height:165px}
  .lab-grid{gap:42px}.timeline{padding-inline:15px}.timeline li{grid-template-columns:48px 1fr;gap:12px}.timeline li::before{left:53px}.stack-section{padding:45px 0}.contact-section{padding:85px 0}
  .footer-inner{flex-direction:column;text-align:center}.footer-inner p{order:3}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }