:root {
  --ink: #e8eef9;
  --muted: #8d9bb4;
  --deep: #08111f;
  --panel: #0d192a;
  --line: #22334c;
  --teal: #4fd3c4;
  --blue: #5792f7;
  --violet: #a676f4;
  --coral: #ff7a75;
  --amber: #ffb454;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 80% 9%, rgba(87,146,247,.09), transparent 24%), radial-gradient(circle at 8% 70%, rgba(79,211,196,.05), transparent 25%);
  z-index: -1;
}

.site-header {
  width: min(1440px, calc(100% - 64px));
  height: 88px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(141,155,180,.2);
}
.brand { display: flex; align-items: center; gap: 12px; font: 700 15px/1 'Space Mono', monospace; letter-spacing: .18em; }
.site-header nav { display: flex; gap: 38px; color: #a9b5c9; font-size: 14px; }
.site-header nav a, .header-cta { transition: color .2s ease; }
.site-header nav a:hover, .header-cta:hover { color: var(--teal); }
.header-cta { font: 700 12px/1 'Space Mono', monospace; letter-spacing: .08em; border: 1px solid #425677; border-radius: 999px; padding: 12px 17px; }

.hero {
  width: min(1440px, calc(100% - 64px));
  min-height: 740px;
  margin: auto;
  padding: 88px 0 72px;
  display: grid;
  grid-template-columns: minmax(420px, .82fr) minmax(620px, 1.18fr);
  gap: 48px;
  align-items: center;
}
.eyebrow { display: flex; align-items: center; gap: 11px; color: var(--teal); font: 700 11px/1.4 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 22px; height: 1px; background: currentColor; }
.eyebrow.coral { color: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 28px 0 30px; font-size: clamp(58px, 6.3vw, 96px); line-height: .94; letter-spacing: -.065em; font-weight: 600; }
h1 em, .safety h2 em { color: var(--teal); font-style: normal; }
.hero-lead { max-width: 600px; color: #a7b4c9; font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; margin: 38px 0 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 50px; padding: 0 22px; border-radius: 8px; font-weight: 700; font-size: 14px; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--teal); color: #07121e; }
.button.primary:hover { background: #77e4d8; }
.button.secondary { border: 1px solid #405471; color: #c8d3e6; }
.button.secondary:hover { border-color: #7589a8; }
.hero-note { color: #71819b; font: 11px/1.5 'Space Mono', monospace; display: flex; align-items: center; gap: 10px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(79,211,196,.1); }

.map-frame { border: 1px solid #314461; border-radius: 18px; background: rgba(8,16,29,.72); box-shadow: 0 36px 90px rgba(0,0,0,.33); overflow: hidden; transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.map-toolbar { height: 56px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #263850; font: 10px/1 'Space Mono', monospace; letter-spacing: .06em; color: #647590; }
.map-tabs { display: flex; gap: 22px; }
.map-tabs .active { color: var(--ink); }
.map-tabs .active::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--blue); }
.map-status { display: flex; align-items: center; gap: 7px; }
.map-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.map-canvas { position: relative; height: 510px; overflow: hidden; background-color: #091423; background-image: radial-gradient(circle, rgba(99,126,163,.34) 1px, transparent 1.2px); background-size: 22px 22px; }
.grid-glow { position: absolute; inset: 0; background: radial-gradient(circle at 48% 40%, rgba(87,146,247,.09), transparent 38%); }
.app-boundary { position: absolute; left: 34%; top: 8%; right: 4%; bottom: 7%; border: 1px solid rgba(255,122,117,.4); border-radius: 14px; background: rgba(255,122,117,.025); padding: 16px 18px; }
.app-boundary span { color: var(--coral); font: 700 8px/1 'Space Mono', monospace; letter-spacing: .14em; }
.app-boundary strong { margin-left: 10px; font-size: 12px; }
.app-boundary small { float: right; color: #65748d; font: 9px/1 'Space Mono', monospace; }
.connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.line { fill: none; stroke-width: 2; stroke-dasharray: 7 7; }
.line.cyan { stroke: var(--teal); }.line.blue { stroke: var(--blue); }.line.violet { stroke: var(--violet); }
.packet { filter: drop-shadow(0 0 5px currentColor); opacity: 0; }.cyan-fill{fill:var(--teal)}.blue-fill{fill:var(--blue)}.violet-fill{fill:var(--violet)}
.node { position: absolute; width: 184px; color: #bdc8da; background: #111e30; border: 1px solid #334762; border-radius: 11px; box-shadow: 0 12px 26px rgba(0,0,0,.22); }
.node.external { left: 2.7%; top: 37%; width: 138px; padding: 15px; border-style: dashed; border-color: var(--violet); background: #18162d; }
.node.web-node { left: 36%; top: 19%; }.node.api-node { left: 36%; top: 55%; }.node.db-node { right: 4.5%; top: 67%; }
.node-kicker { color: #7e8aa3; font: 7px/1.2 'Space Mono', monospace; letter-spacing: .13em; }
.node-title { color: #e1e7f1; font-size: 12px; font-weight: 700; margin-top: 5px; }
.node-meta,.node-ip { color: #71809a; font: 8px/1.5 'Space Mono', monospace; }
.node-head { display: flex; gap: 10px; align-items: center; padding: 12px; }
.node-head b { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 9px rgba(79,211,196,.65); }
.node-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:9px; background:#1b3965; color:#94b6ff; font:700 13px/1 'Space Mono',monospace; }
.node-icon.braces { background:#143b52;color:#5fd5ef;font-size:10px }.node-icon.db{background:#352555;color:#c59bf8;font-size:9px}
.tags { display: flex; gap: 4px; padding: 0 12px 11px; }
.tags span { border-radius: 4px; padding: 4px 5px; background: #1a2a40; color: #8493ac; font: 6px/1 'Space Mono', monospace; }
.node-info { padding: 8px 12px; border-top: 1px solid #293b54; color:#8795ac; font:700 7px/1 'Space Mono',monospace;letter-spacing:.08em}.node-info small{float:right;color:#61718b;font-weight:400}
.port { position:absolute;width:8px;height:8px;border-radius:50%;right:-5px;top:50%;border:1px solid #08111f}.port.left{left:-5px;right:auto}.cyan-port{background:var(--teal)}.blue-port{background:var(--blue)}.violet-port{background:var(--violet)}
.service-label { position:absolute;padding:6px 8px;border-radius:5px;background:#101c2d;font:700 8px/1 'Space Mono',monospace;box-shadow:0 5px 12px rgba(0,0,0,.25)}
.service-label.http{left:22%;top:35%;color:var(--teal)}.service-label.api{left:62%;top:41%;color:var(--blue)}.service-label.sql{left:67%;top:68%;color:var(--violet)}

.signal-strip { border-top: 1px solid #1e2d43; border-bottom: 1px solid #1e2d43; display: grid; grid-template-columns: repeat(4,1fr); padding: 0 max(32px, calc((100vw - 1440px)/2)); }
.signal-strip div { min-height: 96px; padding: 0 28px; display:flex;align-items:center;gap:18px;border-right:1px solid #1e2d43;color:#a9b5c8;font-size:13px}.signal-strip div:last-child{border:0}.signal-strip span{color:#52627c;font:10px/1 'Space Mono',monospace}
.section { width:min(1280px,calc(100% - 64px));margin:auto;padding:140px 0; }
.section-heading { display:grid;grid-template-columns:1fr 1fr;column-gap:90px;align-items:end;margin-bottom:60px}.section-heading .eyebrow{grid-column:1/-1;margin-bottom:24px}.section-heading h2{font-size:clamp(46px,5vw,72px);line-height:1;letter-spacing:-.05em;margin:0}.section-heading>p{color:#8998b0;font-size:17px;line-height:1.7;margin:0;max-width:520px}
.product-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.feature-card{position:relative;overflow:hidden;min-height:510px;padding:34px;border:1px solid #263a55;border-radius:14px;background:linear-gradient(145deg,rgba(18,31,50,.96),rgba(11,22,38,.96))}.feature-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(96,121,155,.22) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,#000,transparent 62%)}.feature-card>*{position:relative}.card-index{color:#657590;font:9px/1 'Space Mono',monospace;letter-spacing:.15em}.feature-card h3{font-size:27px;margin:260px 0 14px}.feature-card p{color:#8d9bb2;line-height:1.65;max-width:500px}.feature-card ul{list-style:none;padding:0;margin:24px 0 0;display:flex;gap:9px;flex-wrap:wrap}.feature-card li{border:1px solid #334762;border-radius:999px;padding:8px 11px;color:#8796ad;font:8px/1 'Space Mono',monospace}.mini-map{position:absolute!important;left:7%;right:7%;top:70px;height:190px}.mini-map i{position:absolute;width:78px;height:48px;border:1px solid #3a5272;border-radius:7px;background:#132238}.mini-map i:nth-child(1){left:3%;top:72px}.mini-map i:nth-child(2){left:42%;top:15px}.mini-map i:nth-child(3){right:2%;top:118px}.mini-map b{position:absolute;height:1px;background:var(--teal);transform-origin:left}.mini-map b:nth-of-type(1){left:15%;top:85px;width:32%;transform:rotate(-18deg)}.mini-map b:nth-of-type(2){left:53%;top:61px;width:38%;background:var(--violet);transform:rotate(25deg)}
.flow-bars{position:absolute!important;left:7%;right:7%;top:74px;height:182px;display:flex;align-items:end;gap:7px;padding:0 5%}.flow-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(to top,rgba(87,146,247,.2),var(--blue));opacity:.8}.flow-bars i:nth-child(1){height:32%}.flow-bars i:nth-child(2){height:64%}.flow-bars i:nth-child(3){height:48%;background:linear-gradient(to top,rgba(79,211,196,.2),var(--teal))}.flow-bars i:nth-child(4){height:88%}.flow-bars i:nth-child(5){height:57%;background:linear-gradient(to top,rgba(166,118,244,.2),var(--violet))}.flow-bars i:nth-child(6){height:72%}
.section-heading.compact{grid-template-columns:1fr}.steps{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid #2a3b53}.steps li{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:34px 18px;border-bottom:1px solid #2a3b53;transition:background .2s ease}.steps li:hover{background:rgba(87,146,247,.035)}.steps>li>span{color:var(--teal);font:11px/1 'Space Mono',monospace;padding-top:7px}.steps h3{font-size:24px;margin-bottom:8px}.steps p{color:#8796ad;line-height:1.6;margin:0;max-width:680px}
.safety-panel{border:1px solid rgba(255,122,117,.32);border-radius:16px;padding:70px;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;background:radial-gradient(circle at 0 100%,rgba(255,122,117,.08),transparent 38%),#0c1727}.safety h2{font-size:clamp(48px,5vw,70px);line-height:1;letter-spacing:-.05em;margin:28px 0}.safety h2 em{color:var(--coral)}.safety-copy p{color:#8e9cb3;line-height:1.7}.safety-list{display:flex;flex-direction:column}.safety-list article{display:grid;grid-template-columns:50px 1fr;gap:18px;padding:25px 0;border-bottom:1px solid #263850}.safety-list article:last-child{border:0}.safety-list article>span{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;border:1px solid #40516c;color:var(--coral);font-size:20px}.safety-list h3{font-size:17px;margin:0 0 7px}.safety-list p{color:#8290a7;line-height:1.5;margin:0;font-size:14px}
.preview{padding-top:40px}.preview-panel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;border-top:1px solid #2b3d57;border-bottom:1px solid #2b3d57;padding:64px 0}.preview-panel h2{font-size:clamp(36px,4vw,54px);line-height:1.08;letter-spacing:-.04em;margin:22px 0}.preview-panel p{max-width:680px;color:#8c9ab0;line-height:1.7;margin:0}
.roadmap{padding-top:70px}.milestones{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #2b3f5c;border-radius:14px;overflow:hidden}.milestones li{min-height:280px;padding:32px;border-right:1px solid #2b3f5c;background:#0c1727}.milestones li:last-child{border:0}.milestones li.current{background:linear-gradient(145deg,rgba(79,211,196,.1),#0c1727 55%)}.milestones>li>span{color:var(--teal);font:700 9px/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase}.milestones h3{margin:72px 0 14px;font-size:20px}.milestones p{margin:0;color:#8493aa;font-size:14px;line-height:1.65}
.contact{padding-top:70px}
.contact-panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;padding:70px;border:1px solid #2b3f5c;border-radius:16px;background:radial-gradient(circle at 100% 0,rgba(79,211,196,.08),transparent 42%),#0c1727}
.contact-copy h2{font-size:clamp(48px,5vw,70px);line-height:1;letter-spacing:-.05em;margin:28px 0}
.contact-copy h2 em{color:var(--coral);font-style:normal}
.contact-copy p{max-width:500px;color:#8e9cb3;line-height:1.75}
.contact-email{display:inline-flex;align-items:center;gap:18px;margin-top:20px;color:var(--teal);font:700 12px/1 'Space Mono',monospace;letter-spacing:.03em}
.contact-email:hover{color:#77e4d8}
.contact-form{display:flex;flex-direction:column;gap:20px}
.contact-fields.two-column{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form label{display:flex;flex-direction:column;gap:9px;color:#aebbd0;font:700 10px/1.3 'Space Mono',monospace;letter-spacing:.05em}
.contact-form label small{color:#677791;font:400 9px/1 'Space Mono',monospace}
.contact-form input,.contact-form textarea{width:100%;border:1px solid #344966;border-radius:8px;background:#101e31;color:var(--ink);font:500 15px/1.45 'DM Sans',sans-serif;padding:14px 15px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.contact-form textarea{resize:vertical;min-height:145px}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(79,211,196,.1)}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-turnstile{min-height:65px}
.contact-submit-row{display:flex;align-items:center;gap:24px}
.contact-submit-row button{border:0;cursor:pointer}
.contact-submit-row button:disabled{cursor:not-allowed;opacity:.42;transform:none}
.contact-submit-row p{max-width:300px;margin:0;color:#71819b;font-size:12px;line-height:1.5}
.contact-status{min-height:24px;margin:0;color:#8d9bb4;font-size:14px}
.contact-status[data-state="success"]{color:var(--teal)}
.contact-status[data-state="error"]{color:#ff9c98}
.contact-status[data-state="pending"]{color:#aebbd0}
.contact-fallback{color:#ffbd72!important}
.contact-fallback a{text-decoration:underline}
footer{width:min(1440px,calc(100% - 64px));min-height:130px;margin:auto;display:flex;align-items:center;justify-content:space-between;color:#657590;font:9px/1 'Space Mono',monospace;letter-spacing:.07em}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}

@media (max-width: 1040px){.hero{grid-template-columns:1fr;padding-top:70px}.map-frame{transform:none}.hero-copy{max-width:760px}.signal-strip,.milestones{grid-template-columns:1fr 1fr}.signal-strip div:nth-child(2){border-right:0}.signal-strip div:nth-child(-n+2){border-bottom:1px solid #1e2d43}.milestones li:nth-child(2){border-right:0}.milestones li:nth-child(-n+2){border-bottom:1px solid #2b3f5c}.safety-panel,.contact-panel{grid-template-columns:1fr}.site-header nav{display:none}}
@media (max-width: 720px){.site-header,.hero,.section,footer{width:min(100% - 36px,1440px)}.site-header{height:74px}.header-cta{display:none}.hero{min-height:auto;padding:62px 0;grid-template-columns:minmax(0,1fr)}h1{font-size:clamp(50px,15vw,72px)}.hero-lead{font-size:17px}.hero-actions{align-items:stretch;flex-direction:column}.map-frame{margin:20px -10px 0}.map-canvas{height:430px}.app-boundary{left:29%}.node{transform:scale(.82);transform-origin:top left}.node.external{left:0;top:39%}.node.web-node,.node.api-node{left:29%}.node.db-node{right:-2%;top:69%;transform-origin:top right}.service-label{display:none}.signal-strip,.milestones{grid-template-columns:1fr}.signal-strip div{border-right:0;border-bottom:1px solid #1e2d43!important;min-height:76px}.milestones li{min-height:auto;border-right:0!important;border-bottom:1px solid #2b3f5c!important}.milestones li:last-child{border-bottom:0!important}.milestones h3{margin-top:34px}.section{padding:90px 0}.section-heading{grid-template-columns:1fr;gap:28px}.product-cards{grid-template-columns:1fr}.feature-card{min-height:500px}.safety-panel,.contact-panel{padding:34px 24px;gap:36px}.preview-panel{grid-template-columns:1fr}.preview-panel>img{width:52px;height:52px}.contact-fields.two-column{grid-template-columns:1fr}.contact-submit-row{align-items:stretch;flex-direction:column}.contact-submit-row button{width:100%}footer{flex-direction:column;justify-content:center;gap:17px;padding:40px 0;text-align:center}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.packet{display:none}.button,.reveal{transition:none}.reveal{opacity:1;transform:none}}