:root {
  --bg: #060913;
  --bg-soft: #0b1020;
  --panel: rgba(15, 22, 42, 0.72);
  --panel-solid: #10182c;
  --line: rgba(170, 191, 255, 0.14);
  --text: #f6f8ff;
  --muted: #a8b2c8;
  --primary: #7e8cff;
  --secondary: #56d7ff;
  --accent: #a76cff;
  --success: #6cf2b5;
  --container: 1180px;
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(82, 95, 214, 0.16), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(73, 207, 255, 0.11), transparent 26%),
    var(--bg);
  font-family: Inter, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.ambient { position: fixed; border-radius: 999px; filter: blur(110px); pointer-events: none; z-index: -1; opacity: .3; }
.ambient-one { width: 360px; height: 360px; background: #5d68ff; top: 20%; left: -180px; }
.ambient-two { width: 300px; height: 300px; background: #3edfff; right: -160px; top: 50%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 9, 19, .72);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
}
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.03em; }
.brand-name { font-size: 1.06rem; }
.brand-mark { width: 34px; height: 34px; position: relative; display: inline-grid; place-items: center; }
.brand-mark span { position: absolute; border: 1px solid var(--secondary); border-radius: 50%; }
.brand-mark span:nth-child(1){ width: 32px; height: 12px; transform: rotate(0deg); }
.brand-mark span:nth-child(2){ width: 32px; height: 12px; transform: rotate(60deg); }
.brand-mark span:nth-child(3){ width: 32px; height: 12px; transform: rotate(120deg); }
.main-nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); font-size: clamp(.82rem, .9vw, .92rem); color: #c5cce0; white-space: nowrap; }
.main-nav a:hover { color: #fff; }
.nav-cta { padding: 10px 17px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px; background: #fff; }

.hero { padding: 108px 0 82px; min-height: 760px; display: flex; align-items: center; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); align-items: center; gap: clamp(38px, 5vw, 74px); }
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .16em; color: #aab7dc; font-size: .72rem; font-weight: 700; }
.eyebrow span { width: 28px; height: 1px; background: linear-gradient(90deg, var(--secondary), var(--primary)); }
h1,h2,h3 { font-family: "Space Grotesk", sans-serif; line-height: 1.07; margin-top: 0; }
h1 { margin: 24px 0 24px; font-size: clamp(3.5rem, 6.5vw, 6.25rem); letter-spacing: -.065em; max-width: 720px; }
h1 span { background: linear-gradient(100deg, #fff 5%, #90e7ff 42%, #9e8bff 78%); -webkit-background-clip: text; color: transparent; }
.hero-copy > p { font-size: 1.13rem; max-width: 650px; color: var(--muted); }
.hero-actions, .developer-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 21px; border-radius: 12px; font-weight: 700; font-size: .93rem; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, #7a8aff, #5fcfff); color: #07101c; box-shadow: 0 14px 35px rgba(90, 141, 255, .24); }
.button-secondary { border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.button-light { background: #fff; color: #0a1020; }
.hero-proof { margin-top: 48px; padding-top: 25px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hero-proof div { display: flex; flex-direction: column; gap: 2px; }
.hero-proof strong { font-size: .88rem; }
.hero-proof span { color: var(--muted); font-size: .73rem; }

.hero-visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 500px; margin-left: auto; display: grid; place-items: center; overflow: visible; }
.hero-visual::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(102,117,255,.25), transparent 66%); filter: blur(8px); }
.orbital-shell { position: absolute; border: 1px solid rgba(124, 171, 255, .28); border-radius: 50%; animation: spin 14s linear infinite; }
.shell-one { width: 76%; height: 76%; }
.shell-two { width: 58%; height: 88%; transform: rotate(57deg); animation-direction: reverse; animation-duration: 18s; }
.shell-three { width: 90%; height: 45%; transform: rotate(-28deg); animation-duration: 22s; }
.core { width: 150px; height: 150px; border-radius: 36px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(111,128,255,.32), rgba(37,66,111,.3)); border: 1px solid rgba(171,205,255,.38); box-shadow: inset 0 0 45px rgba(103,179,255,.18), 0 0 80px rgba(79,93,255,.18); transform: rotate(45deg); }
.core span { transform: rotate(-45deg); font-family: "Space Grotesk"; font-size: 2rem; font-weight: 700; }
.node { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 24px var(--secondary); }
.node-a { top: 12%; left: 48%; }
.node-b { top: 53%; right: 5%; }
.node-c { bottom: 11%; left: 35%; }
.node-d { left: 8%; top: 39%; }
.data-card { position: absolute; min-width: 165px; padding: 14px 16px; border-radius: 14px; background: rgba(11,17,34,.76); border: 1px solid var(--line); backdrop-filter: blur(15px); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.data-card small { display:block; color: var(--muted); font-size:.68rem; }
.data-card strong { font-size:.88rem; }
.data-card-one { left: 1%; top: 19%; }
.data-card-two { right: 1%; bottom: 17%; }
@keyframes spin { to { transform: rotate(360deg); } }

.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); }
.trust-inner { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #bcc5dc; font-size: .82rem; }
.trust-inner span { color: #727f9e; text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; }

.section { padding: 116px 0; }
.section-heading { max-width: 760px; margin-bottom: 52px; }
.section-heading.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-heading.center .eyebrow { justify-content:center; }
.section-heading h2, .technology-grid h2, .developer-grid h2, .contact-panel h2 { font-size: clamp(2.4rem, 4vw, 4.25rem); letter-spacing: -.05em; margin: 20px 0; }
.section-heading p, .lead, .developer-grid p, .contact-panel p { color: var(--muted); font-size: 1.04rem; }
.split-heading { max-width:none; display:grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items:end; }

.feature-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.feature-card { min-height: 310px; padding: 30px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); border:1px solid var(--line); }
.feature-card.featured { background: linear-gradient(145deg, rgba(112,130,255,.18), rgba(71,201,255,.07)); }
.feature-icon { width:45px; height:45px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:#b9eaff; font-size:.8rem; border:1px solid var(--line); }
.feature-card h3 { margin:65px 0 16px; font-size:1.35rem; }
.feature-card p { color:var(--muted); font-size:.91rem; }

.technology-section { background: linear-gradient(180deg, transparent, rgba(18,26,48,.48), transparent); }
.technology-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.text-link { display:inline-flex; gap:8px; margin-top:20px; color:#c8eaff; font-weight:700; }
.stack-panel { padding:18px; border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.025); }
.stack-item { padding:27px; border-radius:18px; background:linear-gradient(120deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border:1px solid var(--line); margin:10px; }
.stack-item strong { display:block; font-family:"Space Grotesk"; font-size:1.3rem; margin:7px 0; }
.stack-label { text-transform:uppercase; letter-spacing:.13em; font-size:.64rem; color:#91a3ca; }
.stack-item small { color:var(--muted); }

.use-case-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.use-case-grid article { min-height:250px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.use-case-grid article > span { color:#7986a8; font-size:.73rem; }
.use-case-grid h3 { margin:58px 0 14px; font-size:1.35rem; }
.use-case-grid p { color:var(--muted); font-size:.9rem; }

.ecosystem-section { background:rgba(255,255,255,.018); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ecosystem-map { display:grid; grid-template-columns:1fr 70px 1fr 70px 1fr; align-items:center; }
.eco-card { min-height:260px; padding:30px; border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.025); }
.eco-card:hover { border-color:rgba(109,188,255,.38); }
.eco-primary { background:linear-gradient(145deg, rgba(109,123,255,.2), rgba(81,221,255,.08)); transform:scale(1.04); }
.eco-tag { display:inline-block; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.06); color:#b9c7e7; font-size:.65rem; text-transform:uppercase; letter-spacing:.12em; }
.eco-card h3 { font-size:1.6rem; margin:52px 0 12px; }
.eco-card p { color:var(--muted); font-size:.9rem; }
.eco-card strong { display:block; margin-top:22px; font-size:.82rem; color:#ccefff; }
.eco-connector { height:1px; background:var(--line); position:relative; }
.eco-connector span { width:7px; height:7px; border-radius:50%; background:var(--secondary); box-shadow:0 0 20px var(--secondary); position:absolute; top:-3px; left:50%; }

.developer-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.terminal-card { border:1px solid var(--line); border-radius:22px; background:#080d19; box-shadow:0 25px 70px rgba(0,0,0,.35); overflow:hidden; }
.terminal-top { height:48px; display:flex; align-items:center; gap:7px; padding:0 17px; background:#0e1422; border-bottom:1px solid var(--line); }
.terminal-top span { width:9px; height:9px; border-radius:50%; background:#4c5870; }
.terminal-top small { margin-left:auto; color:#76819b; }
pre { margin:0; padding:34px; overflow:auto; min-height:310px; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#dce5f7; font-size:.87rem; }
.prompt { color:var(--secondary); }
.muted { color:#71809e; }
.success { color:var(--success); }
.accent { color:#b7a4ff; }

.contact-section { padding-top:40px; }
.contact-panel { padding:52px; border-radius:30px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:60px; background:linear-gradient(135deg, #6977f8 0%, #477fd0 52%, #44b8d7 100%); color:#fff; box-shadow:0 30px 80px rgba(68,109,232,.25); }
.contact-panel .eyebrow, .contact-panel p { color:rgba(255,255,255,.83); }
.contact-actions { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.contact-actions span { font-size:.75rem; color:rgba(255,255,255,.78); }

footer { padding:80px 0 28px; }
.footer-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; }
.footer-grid > div > p { color:var(--muted); max-width:350px; font-size:.9rem; margin-top:20px; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.footer-links div { display:flex; flex-direction:column; gap:11px; }
.footer-links strong { font-size:.85rem; margin-bottom:7px; }
.footer-links a { color:var(--muted); font-size:.82rem; }
.footer-bottom { margin-top:60px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#75809a; font-size:.72rem; }


@media (max-width: 1180px) {
  .nav-wrap { min-height: 72px; }
  .main-nav { gap: 14px; font-size: .82rem; }
  .nav-cta { padding: 9px 14px; }
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 34px; }
  .hero-visual { max-width: 450px; }
  .data-card { min-width: 145px; padding: 12px 14px; }
}

@media (max-width: 1040px) {
  .main-nav { display:none; position:absolute; top:76px; left:0; right:0; padding:24px 20px; background:#090e1b; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; }
  .main-nav.open { display:flex; }
  .menu-toggle { display:block; }
  .hero { padding-top:75px; }
  .hero-grid, .technology-grid, .developer-grid { grid-template-columns:1fr; }
  .hero-visual { margin:20px auto 0; width:min(92%,500px); overflow:visible; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .ecosystem-map { grid-template-columns:1fr; gap:14px; }
  .eco-connector { width:1px; height:35px; margin:auto; }
  .eco-primary { transform:none; }
  .split-heading, .contact-panel, .footer-grid { grid-template-columns:1fr; gap:35px; }
}

@media (max-width: 680px) {
  .container { width:min(calc(100% - 28px), var(--container)); }
  .hero { padding:64px 0; min-height:auto; }
  h1 { font-size:3.45rem; }
  .hero-proof { grid-template-columns:1fr; }
  .hero-visual { aspect-ratio:1/1.1; }
  .data-card { min-width:140px; }
  .trust-inner { overflow:auto; justify-content:flex-start; padding:20px 0; }
  .trust-inner > * { white-space:nowrap; }
  .section { padding:82px 0; }
  .feature-grid, .use-case-grid { grid-template-columns:1fr; }
  .feature-card { min-height:260px; }
  .feature-card h3 { margin-top:40px; }
  .contact-panel { padding:32px 24px; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; gap:8px; }
}