:root {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --ink: #0f1720;
  --muted: #5d6873;
  --line: #dfe5ea;
  --dark: #07141b;
  --dark2: #0e2630;
  --accent: #dcebf2;
  --soft: #eef4f7;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(8, 24, 32, .08);
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display:block; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.nav-wrap {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(14px);
  background: rgba(246,248,250,.88);
  border-bottom: 1px solid rgba(223,229,234,.85);
}
nav {
  height: 72px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo { font-weight:800; letter-spacing:-.04em; font-size:1.28rem; }
.nav-links { display:flex; gap:24px; align-items:center; font-size:.92rem; }
.nav-links a { color:#2e3b44; }
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 18px; border-radius: 10px; border:1px solid transparent;
  font-weight: 700; font-size:.92rem; transition:.2s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--dark); color:white; }
.button.secondary { border-color:#bfcbd2; background:white; }
.button.light { background:#fff; color:var(--dark); }

.hero {
  padding: 78px 0 82px;
  background:
    radial-gradient(circle at 78% 20%, rgba(143,185,204,.32), transparent 22%),
    radial-gradient(circle at 90% 80%, rgba(98,139,157,.18), transparent 30%),
    linear-gradient(135deg, #06141b 0%, #0b2029 55%, #102c36 100%);
  color: white;
  overflow:hidden;
}
.hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; align-items:center; gap:60px; }
.eyebrow {
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800;
  color:#6f7f89; margin-bottom:16px;
}
.hero .eyebrow { color:#b7cad3; }
h1, h2, h3 { letter-spacing:-.035em; line-height:1.08; margin:0; }
h1 { font-size: clamp(2.8rem, 6vw, 5.25rem); max-width:850px; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size:1.12rem; }
.lead { font-size:1.14rem; color:#d8e2e7; max-width:720px; margin:24px 0 30px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-orb {
  aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.78), rgba(188,213,224,.25) 24%, rgba(26,66,80,.15) 50%, rgba(4,16,21,.45) 75%),
    linear-gradient(145deg,#8cb5c5,#0b2029);
  box-shadow: inset -30px -30px 70px rgba(0,0,0,.35), 0 20px 80px rgba(0,0,0,.25);
  min-height:330px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#dbe7ec; font-size:.8rem; text-transform:uppercase; letter-spacing:.18em;
}
.section { padding:84px 0; }
.section.white { background:white; }
.section.soft { background: linear-gradient(180deg, #edf4f7 0%, #f7f9fa 100%); }
.section.dark { background:var(--dark); color:white; }
.section-head { max-width:760px; margin-bottom:40px; }
.section-head p { color:var(--muted); font-size:1.04rem; }
.dark .section-head p { color:#aebdc4; }

.cards-3, .cards-4 {
  display:grid; gap:18px;
}
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-4 { grid-template-columns:repeat(4,1fr); }
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:0 5px 18px rgba(15,23,32,.025);
}
.card .icon {
  width:40px; height:40px; border-radius:10px; background:var(--soft);
  display:grid; place-items:center; margin-bottom:34px; font-size:1.2rem;
}
.card p { color:var(--muted); margin-bottom:0; }

.architecture {
  display:grid; grid-template-columns: 1fr 1.35fr 1fr; gap:18px; align-items:stretch;
  margin-top:26px;
}
.arch-box {
  border:1px solid var(--line); background:#fff; border-radius:14px; padding:24px;
}
.arch-box.center {
  background:linear-gradient(160deg,#0a1d25,#102f39); color:white; border:none;
  box-shadow:var(--shadow);
}
.arch-box h3 { margin-bottom:16px; }
.arch-list { display:grid; gap:9px; font-size:.9rem; color:var(--muted); }
.arch-box.center .arch-list { color:#c8d6dc; }
.arch-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:#83919a; margin-bottom:8px; }

.split {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.visual {
  min-height:370px; border-radius:20px; border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(223,237,244,.35)),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(33,64,79,.06) 43px),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(33,64,79,.06) 43px);
  position:relative; overflow:hidden;
}
.visual::after {
  content:""; position:absolute; width:70%; height:70%; right:-14%; top:10%;
  background:linear-gradient(135deg, rgba(103,145,164,.3), rgba(255,255,255,.05));
  transform:skewY(-20deg); border:1px solid rgba(71,107,124,.25);
}
.kicker { color:var(--muted); font-size:1.05rem; }
.feature-list { display:grid; gap:18px; margin-top:28px; }
.feature-row { display:grid; grid-template-columns:42px 1fr; gap:14px; }
.feature-dot { width:34px;height:34px;border-radius:9px;background:var(--soft);display:grid;place-items:center; }

.usecase {
  display:grid; grid-template-columns:1.2fr 1.6fr auto; gap:30px; align-items:center;
  padding:24px 0; border-top:1px solid var(--line);
}
.usecase:last-child { border-bottom:1px solid var(--line); }
.usecase p { color:var(--muted); margin:0; }

.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.metric { padding:22px; border-top:2px solid #17313d; }
.metric span { display:block; color:var(--muted); font-size:.88rem; margin-top:6px; }

.cta {
  padding:54px; border-radius:24px;
  background:linear-gradient(135deg,#dcebf2,#f7fafb);
  border:1px solid #d4e0e6;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.cta p { color:var(--muted); max-width:650px; }
footer { padding:34px 0 46px; border-top:1px solid var(--line); font-size:.86rem; color:#64727c; }
.footer-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; }

.page-hero { padding:72px 0 62px; background:linear-gradient(135deg,#f8fafb,#e9f1f5); }
.page-hero .split { align-items:end; }
.page-hero h1 { color:var(--ink); font-size:clamp(2.6rem,5vw,4.7rem); }
.page-hero p { color:var(--muted); max-width:680px; font-size:1.08rem; }

.form {
  display:grid; gap:14px; max-width:720px; margin-top:30px;
}
.form input,.form textarea,.form select {
  width:100%; padding:14px 15px; border-radius:10px; border:1px solid #ccd7dd;
  background:white; font:inherit;
}
.form textarea { min-height:130px; resize:vertical; }
.note { font-size:.82rem; color:#7a8790; margin-top:10px; }

.mobile-toggle { display:none; border:0; background:transparent; font-size:1.25rem; }
@media (max-width: 850px) {
  .hero-grid,.split,.architecture { grid-template-columns:1fr; }
  .cards-3,.cards-4,.metric-grid { grid-template-columns:1fr; }
  .hero-orb { min-height:260px; max-width:420px; width:100%; justify-self:center; }
  .nav-links { display:none; position:absolute; top:72px; left:0; right:0; padding:22px;
    background:rgba(246,248,250,.98); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start;}
  .nav-links.open { display:flex; }
  .mobile-toggle { display:block; }
  .usecase { grid-template-columns:1fr; gap:8px; }
  .cta { padding:34px; flex-direction:column; align-items:flex-start; }
  .section { padding:62px 0; }
}