:root {
  --bg: #0f1115;
  --bg-alt: #161a21;
  --panel: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.1);
  --radius: 14px;
  --radius-sm: 6px;
  --gradient: linear-gradient(100deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%);
  --text: #f7f9fc;
  --text-dim: #b3b8c6;
  --accent: #6366f1;
  --accent-alt: #8b5cf6;
  --danger: #ef4444;
  --font-stack: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --shadow: 0 4px 24px -8px rgba(0,0,0,0.4);
  --container: clamp(960px,85vw,1320px);
  --ease: cubic-bezier(.16,.84,.44,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0;
  font-family: var(--font-stack);
  color: var(--text);
  background: radial-gradient(circle at 20% 20%,#1c2330,#0f1115);
  -webkit-font-smoothing: antialiased;
  line-height:1.4;
  font-size: 16px;
}

h1,h2,h3,h4,h5 { line-height:1.15; font-weight:600; margin:0 0 .6em; }
p { margin:0 0 1.1em; color: var(--text-dim); }
a { color: var(--accent); text-decoration:none; }
a:hover { color: var(--accent-alt); }
img,svg { display:block; max-width:100%; }

.container {
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding:0 2rem;
}

.flex { display:flex; }
.between { justify-content:space-between; }
.center-y { align-items:center; }
.center { text-align:center; }

.site-header {
  position:sticky; top:0; backdrop-filter: blur(14px);
  background:linear-gradient(to bottom,rgba(15,17,21,.88),rgba(15,17,21,.55));
  border-bottom:1px solid var(--border);
  z-index:100;
}

.logo { font-size:1.35rem; font-weight:700; letter-spacing:.5px; }
.logo .accent { background: var(--gradient); -webkit-background-clip:text; color:transparent; }

.nav-toggle {
  display:none;
  width:40px; height:40px;
  border:1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-sm);
  cursor:pointer;
  position:relative;
}
.nav-toggle .bar {
  position:absolute; left:9px; right:9px; height:2px;
  background: var(--text); transition:.35s var(--ease);
}
.nav-toggle .bar:nth-child(1){ top:12px; }
.nav-toggle .bar:nth-child(2){ top:19px; }
.nav-toggle .bar:nth-child(3){ top:26px; }

.nav-menu { list-style:none; display:flex; gap:2.2rem; margin:0; padding:0; }
.nav-menu a { font-weight:500; font-size:.95rem; color:var(--text-dim); }
.nav-menu a:hover { color:var(--text); }

.header-cta { display:flex; gap:.75rem; }

.btn {
  --btn-bg: var(--panel);
  --btn-color: var(--text);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-weight:600;
  padding:.75rem 1.25rem;
  border:1px solid var(--border);
  background: var(--btn-bg);
  color: var(--btn-color);
  border-radius: var(--radius-sm);
  font-size:.9rem;
  position:relative;
  overflow:hidden;
  transition: background .35s var(--ease), border-color .35s;
}
.btn.primary {
  --btn-bg: var(--gradient);
  --btn-color: #fff;
  border: none;
  box-shadow:0 8px 24px -10px rgba(99,102,241,.6);
}
.btn.secondary { --btn-bg: #222a35; }
.btn.ghost { background: transparent; }
.btn.large { font-size:1rem; padding:1rem 1.5rem; }
.btn.full { width:100%; }
.btn:hover { filter: brightness(1.1); }

.hero {
  padding:6.5rem 0 3rem;
  position:relative;
  overflow:hidden;
}
.hero:before {
  content:"";
  position:absolute;
  width:700px; height:700px;
  top:-200px; right:-150px;
  background: radial-gradient(circle,#6366f1 0%,transparent 70%);
  opacity:.15;
  filter: blur(80px);
  pointer-events:none;
}
.hero-grid {
  display:grid;
  gap:3.5rem;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  align-items:center;
}
.hero-title {
  font-size: clamp(2.4rem,6vw,3.6rem);
  font-weight:700;
}
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip:text;
  color:transparent;
}
.hero-sub { font-size:1.1rem; max-width: 640px; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }

.hero-metrics { display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:.5rem; }
.metric {
  background: var(--panel);
  border:1px solid var(--border);
  padding:.65rem .9rem;
  border-radius: var(--radius-sm);
  font-size:.75rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-weight:600;
  color: var(--text-dim);
}
.metric span {
  display:block;
  font-size:1.05rem;
  color: var(--text);
  margin-bottom:.15rem;
}

.hero-visual { display:grid; gap:1.2rem; }
.panel {
  background: var(--panel);
  backdrop-filter: blur(12px);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1rem;
}
.panel.glass { background: var(--glass); }
.panel-header { font-weight:600; font-size:.85rem; margin-bottom:.75rem; color: var(--text-dim); }
.panel-body.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.8rem;
  color:#d3e1ff;
  max-height:170px;
  overflow:auto;
}
.panel.stack { display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap:.75rem; }
.mini-card {
  background: #1f2630;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:.6rem .7rem;
  font-size:.7rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.mini-card h4 { margin:0; font-size:.75rem; font-weight:600; }
.mini-card.alt { background:#242c37; }

.trust { margin-top:3rem; }
.trust-label { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color: var(--text-dim); display:block; margin-bottom:1rem; }
.logos { display:flex; gap:1rem; flex-wrap:wrap; }
.logo-badge {
  background:#1c2430;
  color:#9aa4b4;
  font-size:.7rem;
  padding:.55rem .75rem;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  letter-spacing:.5px;
}

.section { padding:4.5rem 0; position:relative; }
.section.alt-bg { background: var(--bg-alt); }
.section-head { margin-bottom:2.5rem; }
.section-head h2 { font-size: clamp(1.9rem,4.2vw,2.6rem); }
.section-head p { max-width:640px; margin:0 auto; }

.features-grid {
  display:grid;
  gap:1.5rem;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
}
.feature-card {
  background:#181e26;
  border:1px solid var(--border);
  padding:1.1rem 1rem 1rem;
  border-radius: var(--radius);
  position:relative;
  overflow:hidden;
  min-height:170px;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  transition: border-color .35s, transform .35s;
}
.feature-card:before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 30%,rgba(99,102,241,.15),transparent 65%);
  opacity:0;
  transition:.5s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); border-color:#2e3650; }
.feature-card:hover:before { opacity:1; }
.feature-card h3 { margin:.2rem 0 .25rem; font-size:1rem; }
.feature-card p { font-size:.8rem; line-height:1.3; }
.icon {
  width:34px; height:34px;
  background: var(--gradient);
  border-radius:10px;
  box-shadow:0 4px 14px -4px rgba(99,102,241,.4);
}
.icon.ai { }
.icon.pipeline { }
.icon.observability { }
.icon.governance { }
.icon.copilot { }
.icon.infra { }

.grid.two {
  display:grid;
  gap:2.2rem;
  grid-template-columns: repeat(auto-fit,minmax(330px,1fr));
}

.stack { display:flex; flex-direction:column; gap:1.1rem; }
.check-list { list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.55rem; }
.check-list li {
  font-size:.85rem;
  position:relative;
  padding-left:1.25rem;
  color: var(--text-dim);
}
.check-list li:before {
  content:"✓";
  position:absolute; left:0; top:0;
  color: var(--accent);
  font-weight:600;
}
.check-list span { color: var(--text); font-weight:600; }

.usecase-cards {
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
}
.uc-card {
  background:#192028;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:.85rem .9rem;
  font-size:.75rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  transition: background .35s;
}
.uc-card h4 { margin:0; font-size:.85rem; }
.uc-card:hover { background:#212a34; }

.billing-toggle {
  margin:1.2rem auto 0;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font-size:.75rem;
  background:#181e26;
  padding:.5rem .85rem;
  border:1px solid var(--border);
  border-radius: 50px;
}
.save-badge {
  background:#243048;
  padding:.15rem .4rem;
  border-radius:4px;
  font-size:.6rem;
  color:#d0d7e2;
  letter-spacing:.5px;
}

.switch {
  position:relative;
  width:46px;
  height:24px;
  display:inline-block;
}
.switch input { display:none; }
.switch .slider {
  position:absolute; inset:0;
  background:#2a3442;
  border-radius:16px;
  cursor:pointer;
}
.switch .slider:before {
  content:"";
  position:absolute;
  width:18px; height:18px;
  left:3px; top:3px;
  background: var(--gradient);
  border-radius:50%;
  transition:.35s var(--ease);
  box-shadow:0 4px 10px -2px rgba(99,102,241,.6);
}
.switch input:checked + .slider:before { transform: translateX(22px); }

.pricing-grid {
  display:grid;
  gap:1.5rem;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}
.plan {
  background:#181e26;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1.2rem 1.2rem 1.3rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  position:relative;
}
.plan.highlight {
  background: linear-gradient(150deg,#1e2430 0%,#222b38 70%);
  border:1px solid #2e3650;
}
.plan h3 { margin:0; font-size:1.1rem; }
.plan .price {
  font-size:2rem;
  font-weight:600;
  background: var(--gradient);
  -webkit-background-clip:text;
  color:transparent;
  margin:0;
}
.plan .desc { font-size:.75rem; margin:0; }
.plan ul { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; font-size:.7rem; }
.plan ul li { color: var(--text-dim); position:relative; padding-left:1rem; }
.plan ul li:before { content:"•"; position:absolute; left:0; color: var(--accent); }

.testimonials {
  display:grid;
  gap:1.2rem;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}
.testimonial {
  background:#181f27;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1.1rem 1rem;
  font-size:.85rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.testimonial p { font-size:.8rem; line-height:1.4; margin:0; }
.author { display:flex; align-items:center; gap:.6rem; font-size:.7rem; color: var(--text-dim); }
.avatar {
  width:34px; height:34px;
  background:#232d3b;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-weight:600;
  color:#9da8bb;
}

.faq { display:grid; gap:.9rem; max-width:860px; margin:0 auto; }
.faq-item {
  background:#181f27;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:.75rem .9rem;
}
.faq-q {
  background:none;
  border:none;
  padding:0;
  width:100%;
  text-align:left;
  font-size:.9rem;
  font-weight:600;
  color: var(--text);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq-q:after {
  content:"+";
  font-weight:400;
  transition:.35s;
}
.faq-q[aria-expanded="true"]:after { transform:rotate(45deg); }
.faq-a {
  font-size:.75rem;
  color: var(--text-dim);
  max-height:0;
  overflow:hidden;
  transition:max-height .45s var(--ease), opacity .45s;
  opacity:0;
  padding-right:.5rem;
}
.faq-q[aria-expanded="true"] + .faq-a {
  max-height:140px;
  opacity:1;
  margin-top:.55rem;
}

.cta {
  background: radial-gradient(circle at 60% 40%,#1f2735,#151a23);
  border-top:1px solid var(--border);
}
.demo-form {
  margin:1.4rem auto 1rem;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  justify-content:center;
}
.demo-form input {
  flex:1 1 240px;
  background:#181f27;
  border:1px solid var(--border);
  padding:.85rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size:.85rem;
}
.demo-form input:focus {
  outline:2px solid #374151;
  border-color:#374151;
}
.form-note {
  display:block;
  margin-top:.2rem;
  color: var(--text-dim);
  font-size:.6rem;
  letter-spacing:.5px;
}

.site-footer {
  padding:3.5rem 0 2rem;
  background:#0d1014;
  border-top:1px solid var(--border);
  font-size:.75rem;
}
.footer-grid {
  display:grid;
  gap:2rem;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  margin-bottom:2.5rem;
}
.foot-brand p { font-size:.7rem; max-width:200px; }
.foot-nav h5 {
  margin:0 0 .75rem;
  font-size:.75rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#95a2b5;
}
.foot-nav ul { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.foot-nav a { color: var(--text-dim); font-size:.7rem; }
.foot-nav a:hover { color: var(--text); }
.legal {
  display:flex;
  gap:1rem;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  border-top:1px solid var(--border);
  padding-top:1.2rem;
}
.policies a {
  color:#6e7b8d;
  margin-right:.8rem;
  font-size:.65rem;
}
.policies a:hover { color: var(--text); }

.reveal { opacity:0; transform: translateY(24px); }

@media (max-width: 900px) {
  .nav-toggle { display:block; }
  .nav-menu {
    position:absolute;
    top:60px; right:2rem;
    background:#14181f;
    border:1px solid var(--border);
    border-radius: var(--radius);
    flex-direction:column;
    gap:0;
    min-width:200px;
    padding:.6rem;
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:.4s var(--ease);
  }
  .nav-menu.open {
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav-menu li { border-bottom:1px solid #1d232c; }
  .nav-menu li:last-child { border:none; }
  .nav-menu a { display:block; padding:.75rem .65rem; }
  .header-cta { display:none; }
}

@media (max-width:600px) {
  .hero { padding:5.5rem 0 3rem; }
  .metric { flex:1 1 100px; }
  .panel.stack { grid-template-columns: repeat(auto-fit,minmax(90px,1fr)); }
  .billing-toggle { font-size:.65rem; }
  .plan .price { font-size:1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

::selection { background:#2d3a53; }
.sr-only {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  border:0;
}