:root {
  --bg: #f7f7fb;
  --surface: #ffffff;
  --ink: #17131f;
  --muted: #6f6979;
  --line: rgba(23, 19, 31, 0.11);
  --purple: #7856ff;
  --purple-dark: #5d36f5;
  --lavender: #ece7ff;
  --lime: #cfff70;
  --dark: #18151f;
  --radius: 28px;
  --shadow: 0 28px 80px rgba(31, 20, 66, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(120, 86, 255, 0.10), transparent 29%),
    radial-gradient(circle at 92% 16%, rgba(207, 255, 112, 0.13), transparent 22%),
    var(--bg);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
svg { display: block; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.site-header {
  width: min(1180px, calc(100% - 40px));
  margin: 18px auto 0;
  padding: 12px 14px 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(25, 17, 54, .07);
  position: relative;
  z-index: 50;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.04em;
}
.brand-mark {
  width: 31px; height: 31px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--ink);
}
.brand-mark svg { width: 23px; height: 23px; fill: #fff; }
.brand-mark .accent-path { fill: var(--lime); }
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #5f5968;
}
.desktop-nav a { transition: .2s ease; }
.desktop-nav a:hover { color: var(--ink); }
.button {
  border: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button-small { padding: 11px 16px; font-size: 13px; }
.button-ghost { background: #f0edf7; }
.button-primary {
  padding: 16px 22px;
  color: white;
  background: var(--ink);
  box-shadow: 0 14px 34px rgba(26, 19, 38, .24);
}
.button-primary:hover { background: #000; }
.button-secondary {
  padding: 16px 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
}
.menu-button, .mobile-nav { display: none; }

.section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 115px 0;
  position: relative;
}
.section-tight {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 70px;
}
.hero {
  text-align: center;
  padding-top: 63px;
  padding-bottom: 92px;
}
.hero-glow {
  position: absolute;
  filter: blur(2px);
  border-radius: 50%;
  pointer-events: none;
}
.hero-glow-one {
  width: 420px; height: 420px;
  left: -230px; top: 40px;
  background: radial-gradient(circle, rgba(120,86,255,.18), transparent 65%);
}
.hero-glow-two {
  width: 340px; height: 340px;
  right: -180px; top: 190px;
  background: radial-gradient(circle, rgba(207,255,112,.24), transparent 65%);
}
.eyebrow {
  margin: 0 auto 24px;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(120,86,255,.17);
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  color: #62587b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 5px rgba(120,86,255,.11);
}
.hero h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(64px, 8.4vw, 112px);
  line-height: .94;
  letter-spacing: -.07em;
}
.gradient-text {
  color: transparent;
  background: linear-gradient(100deg, #6e43ff 6%, #9d67ff 48%, #5941dd 88%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-copy {
  width: min(720px, 92%);
  margin: 30px auto 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.65;
}
.lime-highlight {
  background: #d9ff8f;
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-actions {
  margin-top: 35px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.hero-proof {
  margin: 27px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  color: #716a7c;
  font-size: 13px;
}
.hero-proof p { font-size: 17px; }
.proof-avatars { display: flex; }
.proof-avatars span {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-left: -7px;
  border: 2px solid var(--bg);
  color: white;
  font-size: 8px;
  font-weight: 700;
}
.proof-avatars span:first-child { margin-left: 0; background: #7a55ff; }
.proof-avatars span:nth-child(2) { background: #ff7d8d; }
.proof-avatars span:nth-child(3) { background: #1c1a22; }
.proof-avatars span:nth-child(4) { background: #5da867; }

.app-window {
  margin-top: 74px;
  padding: 9px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 25px;
  box-shadow: 0 45px 120px rgba(36, 21, 84, .20);
  text-align: left;
}
.window-topbar {
  height: 45px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #6d6777;
  font-size: 11px;
}
.window-controls { display: flex; gap: 7px; }
.window-controls span { width: 10px; height: 10px; border-radius: 50%; }
.window-controls span:first-child { background:#ff6f66; }
.window-controls span:nth-child(2) { background:#ffca55; }
.window-controls span:nth-child(3) { background:#62ce72; }
.window-title { font-weight: 600; }
.window-status {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f0f7eb;
  color: #4d7153;
  font-weight: 700;
}
.window-status span { width: 6px; height: 6px; background:#67b775; border-radius:50%; }
.app-shell {
  height: 660px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 190px 1fr;
  background: #f6f5f9;
  border-radius: 18px;
  border: 1px solid #e9e7ee;
}
.app-sidebar {
  padding: 20px 14px;
  background: #1c1922;
  color: white;
  display: flex;
  flex-direction: column;
}
.sidebar-brand { display:flex; align-items:center; gap:8px; font-weight:700; }
.mini-mark {
  width: 25px; height:25px; border-radius:7px;
  display:grid; place-items:center;
  background: var(--lime); color:#17131f;
}
.new-project {
  margin-top: 23px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  color: white;
  background: rgba(255,255,255,.07);
  text-align:left;
  font-size: 11px;
}
.sidebar-label {
  margin: 28px 8px 10px;
  color: #817a8d;
  font-size: 8px;
  font-weight: 700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sidebar-project {
  display:flex; align-items:center; gap:9px;
  padding: 10px 8px;
  color:#aaa3b5;
  border-radius:8px;
  font-size:10px;
}
.sidebar-project.active { background:rgba(255,255,255,.08); color:white; }
.project-icon { width:8px;height:8px;border-radius:3px; }
.project-icon.purple { background:#9477ff; }
.project-icon.blue { background:#63a7ff; }
.project-icon.green { background:#6ac477; }
.sidebar-bottom {
  margin-top:auto;
  padding: 10px 7px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:9px;
}
.provider-chip {
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  background:#f3efff;color:#6d4ee8;font-size:8px;font-weight:800;
}
.sidebar-bottom strong,.sidebar-bottom small { display:block;font-size:9px; }
.sidebar-bottom small { margin-top:2px;color:#777080; }
.app-main { display:grid;grid-template-columns: .85fr 1.5fr; }
.prompt-panel { padding: 27px 23px; border-right:1px solid #e8e5ed; background:white; }
.panel-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:8px; }
.panel-heading h3 { margin:4px 0 0;font-size:17px;letter-spacing:-.03em; }
.panel-kicker { color:#857e8e;font-size:8px;text-transform:uppercase;letter-spacing:.13em;font-weight:700; }
.model-pill { padding:6px 7px;background:#f0ecff;color:#7254d7;border-radius:999px;font-size:7px;font-weight:700; }
.prompt-box {
  margin-top:20px;
  height:180px;
  padding:17px;
  border:1px solid #ddd7eb;
  border-radius:13px;
  background:#fbfafe;
  font-size:11px;
  line-height:1.7;
  color:#4e4858;
}
#typing-text { display:inline; }
.typing-cursor {
  width: 2px; height: 13px;
  display:inline-block;
  margin-left:2px;
  vertical-align:middle;
  background:var(--purple);
  animation:blink 1s infinite;
}
.prompt-tools {
  margin-top:12px;
  display:flex;flex-wrap:wrap;gap:6px;
}
.prompt-tools span {
  padding:6px 7px;border:1px solid #e5e1eb;border-radius:7px;color:#7d7585;font-size:7px;
}
.prompt-tools button {
  margin-left:auto;padding:8px 12px;border:0;border-radius:8px;background:var(--ink);color:white;font-size:8px;font-weight:700;
}
.preview-panel { padding: 18px; min-width:0; }
.preview-toolbar {
  display:flex;align-items:center;justify-content:space-between;
  color:#716b79;font-size:9px;
}
.preview-toolbar > div:first-child { display:flex;align-items:center;gap:6px;font-weight:700; }
.active-dot { width:6px;height:6px;border-radius:50%;background:#67ba74; }
.device-switcher { display:flex;gap:4px;padding:3px;background:#ebe9ef;border-radius:7px; }
.device-switcher span { padding:5px 7px;border-radius:5px;font-size:7px; }
.device-switcher .selected { background:white;color:#28232f;box-shadow:0 2px 7px rgba(0,0,0,.07); }
.product-preview {
  height:590px;
  margin-top:12px;
  overflow:hidden;
  border-radius:12px;
  background:#f5f7fb;
  border:1px solid #e2e5ec;
}
.preview-nav {
  height:48px;
  padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;
  border-bottom:1px solid #eceef2;
  font-size:8px;
}
.preview-logo { font-weight:800;color:#323745; }
.preview-nav div { display:flex;gap:16px;color:#838795; }
.avatar { width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#252936;color:#fff;font-size:7px;font-weight:700; }
.preview-content { padding:28px; }
.preview-header { display:flex;justify-content:space-between;gap:20px;align-items:flex-start; }
.preview-header small { color:#8b8f9a;font-size:7px;letter-spacing:.12em;font-weight:700; }
.preview-header h4 { max-width:330px;margin:7px 0 0;font-size:24px;line-height:1.1;letter-spacing:-.04em;color:#262a35; }
.preview-header button { padding:9px 12px;border:0;border-radius:7px;background:#252936;color:white;font-size:7px;font-weight:700; }
.metric-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px; }
.metric-grid > div { padding:16px;background:white;border:1px solid #e7e9ee;border-radius:10px; }
.metric-grid small,.metric-grid strong,.metric-grid em { display:block; }
.metric-grid small { color:#8e919a;font-size:7px; }
.metric-grid strong { margin-top:6px;font-size:22px;letter-spacing:-.04em; }
.metric-grid em { margin-top:5px;color:#3e9a5c;font-size:7px;font-style:normal;font-weight:700; }
.chart-card { margin-top:12px;padding:17px;background:white;border:1px solid #e7e9ee;border-radius:10px; }
.chart-heading { display:flex;justify-content:space-between;font-size:8px;font-weight:700; }
.chart-heading small { color:#999ca5;font-weight:500; }
.chart-card svg { width:100%;height:180px;margin-top:12px; }

.byo-ai-section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 70px;
}
.byo-ai-inner {
  text-align: center;
  max-width: 936px;
  margin: 0 auto;
  padding: 50px 40px;
  border: 1px solid var(--line);
  border-radius: 28px;
  color: white;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(207,255,112,.2), transparent 55%),
    linear-gradient(145deg, #7650ff, #5d35dd);
}
.byo-ai-kicker {
  margin: 0 auto 20px;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  color: white;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.byo-ai-inner h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -.04em;
  color: white;
}
.byo-ai-inner > p {
  max-width: 520px;
  margin: 18px auto 0;
  color: rgba(255,255,255,.8);
  font-size: 16px;
  line-height: 1.65;
}
.byo-ai-chips {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.byo-ai-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  box-shadow: 0 10px 24px rgba(33,24,59,.16);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.byo-ai-chip-more {
  color: white;
  font-weight: 600;
  background: transparent;
  box-shadow: none;
  border: 1px dashed rgba(255,255,255,.4);
}
.byo-ai-dot { width: 13px; height: 13px; border-radius: 50%; }
.dot-claude { background: #d97757; }
.dot-openai { background: #10a37f; }
.dot-openrouter { background: var(--purple); }
.byo-ai-break { display: none; }
@media (min-width: 640px) {
  .byo-ai-break { display: inline; }
}

.artifact-showcase {
  margin-top: 30px;
  padding: 76px;
  overflow: hidden;
  border: 1px solid rgba(120, 86, 255, .14);
  border-radius: 36px;
  background:
    radial-gradient(circle at 12% 12%, rgba(120, 86, 255, .16), transparent 32%),
    radial-gradient(circle at 88% 88%, rgba(207, 255, 112, .22), transparent 28%),
    linear-gradient(145deg, #f7f3ff 0%, #eee8ff 56%, #f8f7ff 100%);
  box-shadow: 0 30px 80px rgba(62, 43, 119, .10);
}
.artifact-showcase-glow { position:absolute;border-radius:50%;pointer-events:none;filter:blur(4px); }
.artifact-showcase-glow-one { width:280px;height:280px;left:-130px;top:-120px;background:rgba(120,86,255,.16); }
.artifact-showcase-glow-two { width:240px;height:240px;right:-90px;bottom:-110px;background:rgba(207,255,112,.24); }
.artifact-showcase-heading { position:relative;z-index:2;max-width:780px;margin:0 auto;text-align:center; }
.artifact-showcase-heading h2 { margin:13px 0 0;font-family:"Space Grotesk",sans-serif;font-size:clamp(44px,5.5vw,72px);line-height:1;letter-spacing:-.065em; }
.artifact-showcase-heading p { max-width:690px;margin:20px auto 0;color:#6f6878;font-size:17px;line-height:1.7; }
.artifact-flow { position:relative;z-index:2;width:max-content;max-width:100%;margin:32px auto 0;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid rgba(120,86,255,.13);border-radius:999px;background:rgba(255,255,255,.66);color:#625a6c;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.11em; }
.artifact-flow svg { width:14px;fill:none;stroke:#8d73ed;stroke-width:1.8; }
.artifact-card-grid { position:relative;z-index:2;margin-top:42px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px; }
.artifact-card { min-height:190px;padding:27px;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:18px;border:1px solid rgba(30,23,42,.08);border-radius:24px;background:rgba(255,255,255,.78);box-shadow:0 16px 40px rgba(45,31,91,.08);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.artifact-card:hover { transform:translateY(-7px);border-color:rgba(120,86,255,.34);box-shadow:0 26px 60px rgba(83,58,160,.16); }
.artifact-card-icon { width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#f1ecff;color:#6e49e9; }
.artifact-card-icon svg { width:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.artifact-card-kicker { display:block;margin-top:2px;color:#7d7488;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.artifact-card h3 { margin:8px 0 0;font-family:"Space Grotesk",sans-serif;font-size:28px;line-height:1;letter-spacing:-.045em; }
.artifact-card p { max-width:440px;margin:12px 0 0;color:#746d7b;font-size:14px;line-height:1.6; }
.artifact-card-arrow { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(120,86,255,.08);color:#6f4ce4;font-size:18px;font-weight:800; }
.artifact-card-indigo .artifact-card-icon { background:#ebe9ff;color:#5d58d9; }
.artifact-card-green .artifact-card-icon { background:#e8f7eb;color:#429259; }
.artifact-card-blue .artifact-card-icon { background:#e6f1ff;color:#397ed2; }
.artifact-card-wide { grid-column:1/-1;min-height:170px;grid-template-columns:auto 1fr auto;align-items:center;background:radial-gradient(circle at 100% 0%,rgba(255,255,255,.55),transparent 34%),linear-gradient(115deg,#d8ff8d 0%,#c7f86f 100%); }
.artifact-card-lime .artifact-card-icon { background:rgba(24,21,31,.9);color:#cfff70; }
.artifact-card-lime .artifact-card-kicker,.artifact-card-lime p { color:rgba(24,21,31,.66); }
.artifact-coming-soon { align-self:center;padding:10px 13px;border-radius:999px;background:#19151f;color:#d7ff88;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase; }
.section-heading h2 {
  margin: 10px 0 0;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(42px,5vw,68px);
  line-height:1.02;
  letter-spacing:-.06em;
}
.eyebrow-text {
  color:var(--purple-dark);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:11px;
  font-weight:800;
}
.split-heading {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:80px;
  align-items:end;
}
.split-heading p,.section-heading.centered p {
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}
.centered { max-width:780px;margin:0 auto;text-align:center; }
.use-case-grid {
  margin-top:55px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:18px;
}
.feature-card {
  min-height:455px;
  padding:34px;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  border:1px solid rgba(23,19,31,.08);
}
.feature-card-large { min-height:590px; }
.feature-icon {
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.78);
}
.feature-icon svg { width:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.card-label { display:block;margin-top:24px;font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;opacity:.67; }
.feature-card h3 { max-width:550px;margin:10px 0 0;font-family:"Space Grotesk",sans-serif;font-size:35px;line-height:1.05;letter-spacing:-.05em; }
.feature-card p { max-width:520px;margin:16px 0 0;line-height:1.7;opacity:.72; }
.purple-card { color:white;background:linear-gradient(145deg,#7650ff,#5d35dd); }
.dark-card { color:white;background:#19161f; }
.light-card { background:#fff; }
.accent-card { background:#d9ff8f; }
.mini-demo {
  position:absolute;
  left:45px;right:-40px;bottom:-5px;height:250px;
  border-radius:16px 0 0 0;
  overflow:hidden;
  background:#f9f8fc;
  box-shadow:0 28px 70px rgba(37,20,92,.3);
}
.demo-bar { height:28px;background:white;border-bottom:1px solid #e8e5ee;display:flex;align-items:center;gap:5px;padding:0 10px; }
.demo-bar span { width:6px;height:6px;border-radius:50%;background:#d8d4df; }
.demo-body { height:calc(100% - 28px);display:grid;grid-template-columns:75px 1fr; }
.demo-menu { background:#211b2c; }
.demo-canvas { padding:30px;background:#f4f5f9; }
.demo-title { width:45%;height:16px;background:#27222f;border-radius:4px; }
.demo-cards { margin-top:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px; }
.demo-cards span { height:80px;background:white;border:1px solid #e5e3ea;border-radius:8px; }
.browser-stack { position:absolute;left:60px;right:30px;bottom:0;height:190px; }
.browser-card { position:absolute;width:76%;height:155px;border-radius:13px 13px 0 0;background:#332e3c;border:1px solid rgba(255,255,255,.08); }
.browser-card.one { left:0;bottom:-25px;transform:rotate(-7deg); }
.browser-card.two { right:0;bottom:-20px;transform:rotate(6deg);background:#453b59; }
.browser-card.three { left:12%;right:12%;bottom:0;width:auto;background:white;padding:20px;box-shadow:0 22px 45px rgba(0,0,0,.22); }
.fake-nav,.fake-heading,.fake-copy,.fake-button { display:block;border-radius:4px; }
.fake-nav { width:100%;height:10px;background:#ece9f2; }
.fake-heading { width:60%;height:20px;margin-top:27px;background:#28232f; }
.fake-copy { width:82%;height:7px;margin-top:12px;background:#d7d3dd; }
.fake-button { width:75px;height:20px;margin-top:17px;background:#7856ff; }
.comment-stack { position:absolute;left:35px;right:35px;bottom:30px;display:grid;gap:10px; }
.comment-stack > div { display:flex;align-items:center;gap:12px;padding:14px;background:#f5f3f8;border-radius:13px; }
.comment-avatar { flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#7650ff;color:white;font-size:11px;font-weight:800; }
.comment-avatar.second { background:#22202a; }
.comment-stack p { margin:0;font-size:11px;line-height:1.5;opacity:1;color:var(--ink); }
.iteration-lines { position:absolute;left:35px;right:35px;bottom:35px;padding:25px;background:rgba(255,255,255,.55);border-radius:16px; }
.iteration-lines span { display:block;width:var(--w);height:8px;margin-bottom:10px;border-radius:9px;background:rgba(34,29,42,.18); }
.iteration-lines button { margin-top:10px;padding:11px 13px;border:0;border-radius:8px;background:#1a1720;color:white;font-size:11px;font-weight:700; }

.workflow-section { width:100%;padding-left:max(20px,calc((100% - 1180px)/2));padding-right:max(20px,calc((100% - 1180px)/2));background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.workflow-grid { margin-top:58px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.workflow-step { padding:20px;border:1px solid var(--line);border-radius:20px;background:#faf9fc; }
.step-number { color:#9d96a6;font-size:10px;font-weight:800;letter-spacing:.13em; }
.step-visual { height:155px;margin:22px 0;border-radius:14px;display:flex;align-items:center;justify-content:center;background:white;border:1px solid #eeeaf2;position:relative;overflow:hidden; }
.workflow-step h3 { margin:0;font-family:"Space Grotesk",sans-serif;font-size:20px;letter-spacing:-.04em; }
.workflow-step p { color:var(--muted);font-size:13px;line-height:1.6; }
.prompt-visual { justify-content:flex-start;padding:20px; }
.prompt-line { padding:12px 13px;border:1px solid #e6e1ef;border-radius:10px;color:#6e6875;font-size:10px;white-space:nowrap; }
.cursor-block { width:2px;height:15px;background:var(--purple);animation:blink 1s infinite; }
.generating-card { width:85px;height:95px;padding:20px 15px;background:#f0ecff;border:1px solid #ded4ff;border-radius:12px;box-shadow:0 17px 28px rgba(85,55,184,.12); }
.generating-card span { display:block;height:7px;margin-bottom:9px;border-radius:8px;background:#a58bf6; }
.generating-card span:nth-child(2){width:75%;}.generating-card span:nth-child(3){width:48%;}
.spark { position:absolute;width:8px;height:8px;background:var(--purple);clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%);animation:float 2.2s ease-in-out infinite; }
.s1{left:28%;top:28%;}.s2{right:25%;top:20%;animation-delay:.5s}.s3{right:23%;bottom:24%;animation-delay:1s}
.refine-visual { gap:12px; }
.before-card,.after-card { width:65px;height:85px;border-radius:8px;background:#e8e5ed;position:relative; }
.before-card:after,.after-card:after { content:"";position:absolute;left:11px;right:11px;top:20px;height:7px;border-radius:5px;background:#c1bbc9;box-shadow:0 16px 0 #d1ccd7,0 32px 0 #d1ccd7; }
.after-card { background:#ebe5ff;border:1px solid #c8b9ff; }
.after-card:after { background:#7650ff;box-shadow:0 16px 0 #b5a2f1,0 32px 0 #b5a2f1; }
.arrow { color:#817a89; }
.folder-icon svg { width:68px;fill:#d8ceff;stroke:#7856ff;stroke-width:2; }
.file-pills { position:absolute;bottom:18px;display:flex;gap:5px; }
.file-pills span { padding:4px 6px;border-radius:5px;background:#211c29;color:white;font-size:7px;font-weight:800; }

.local-section { padding-top:91px;padding-bottom:130px; }
.local-grid { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center; }
.local-copy h2 { margin:13px 0 0;font-family:"Space Grotesk",sans-serif;font-size:60px;line-height:1;letter-spacing:-.06em; }
.local-copy > p { color:var(--muted);font-size:18px;line-height:1.7; }
.local-points { margin-top:32px;display:grid;gap:15px; }
.local-points > div { display:flex;gap:13px;align-items:flex-start; }
.check-icon { flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#e9e3ff;color:#6947df;font-size:12px;font-weight:800; }
.local-points p { margin:0;color:#77707f;line-height:1.5; }
.local-points strong { color:var(--ink); }
.security-visual { min-height:500px;position:relative;display:grid;place-items:center; }
.orbital { position:absolute;border:1px solid rgba(120,86,255,.18);border-radius:50%; }
.orbital-one { width:180px;height:180px; }
.orbital-two { width:310px;height:310px; }
.orbital-three { width:450px;height:450px; }
.security-core { width:130px;height:130px;border-radius:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#17131f,#2c2637);color:white;box-shadow:0 25px 55px rgba(37,24,76,.28);z-index:2; }
.security-core svg { width:44px;fill:none;stroke:var(--lime);stroke-width:2; }
.security-core span { margin-top:10px;color:#b9ff63;font-size:10px;font-weight:800;letter-spacing:.18em; }
.provider-node { position:absolute;padding:12px 16px;border-radius:13px;background:white;border:1px solid var(--line);box-shadow:0 15px 35px rgba(33,24,59,.11);font-size:11px;font-weight:800;z-index:3; }
.provider-one { left:8%;top:20%; }
.provider-two { right:5%;top:32%; }
.provider-three { left:18%;bottom:18%; }
.security-caption { position:absolute;bottom:2%;padding:9px 13px;background:#e8f3e3;color:#4f7154;border-radius:999px;font-size:10px;font-weight:700; }

.phase-section { width:min(1260px,calc(100% - 28px));padding:90px 70px;background:#17141d;color:white;border-radius:36px;overflow:hidden; }
.phase-section:before { content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;top:-240px;background:radial-gradient(circle,rgba(120,86,255,.35),transparent 68%); }
.phase-badge { position:absolute;right:60px;top:55px;padding:8px 11px;border:1px solid rgba(207,255,112,.35);border-radius:999px;color:var(--lime);font-size:9px;font-weight:800;letter-spacing:.15em; }
.phase-grid { display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;position:relative;z-index:2; }
.phase-grid h2 { margin:12px 0 0;font-family:"Space Grotesk",sans-serif;font-size:58px;line-height:1.02;letter-spacing:-.06em; }
.phase-copy > p { color:#aea8b5;font-size:17px;line-height:1.7; }
.phase-tags { display:flex;flex-wrap:wrap;gap:8px;margin-top:22px; }
.phase-tags span { padding:9px 11px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.05);font-size:10px;font-weight:700; }
.code-window { margin-top:60px;height:430px;display:grid;grid-template-columns:190px 1fr 1fr;overflow:hidden;background:#211d29;border:1px solid rgba(255,255,255,.09);border-radius:18px;position:relative;z-index:2;box-shadow:0 40px 90px rgba(0,0,0,.3); }
.code-sidebar { padding:18px;background:#19161f;border-right:1px solid rgba(255,255,255,.07);font-size:9px;color:#aaa3b2; }
.code-dot { display:inline-block;width:8px;height:8px;border-radius:50%;background:#74c77c; }
.code-sidebar small { display:block;margin-top:18px;color:#6f6875;font-size:7px;font-weight:800;letter-spacing:.12em; }
.code-sidebar p { margin:4px 0 20px;color:white;font-weight:700; }
.file-tree { display:grid;gap:9px; }
.file-tree .nested { padding-left:10px; }.file-tree .nested-more { padding-left:22px; }
.active-file { color:#b69fff; }
.code-editor { min-width:0;border-right:1px solid rgba(255,255,255,.07); }
.code-tabs { height:42px;display:flex;border-bottom:1px solid rgba(255,255,255,.07);font-size:8px;color:#77717c; }
.code-tabs span { padding:14px 16px; }
.code-tabs .active { color:white;background:#25202d;border-bottom:1px solid #8b65ff; }
.code-editor pre { margin:0;padding:26px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.9;color:#c8c2ce;overflow:auto; }
.code-purple { color:#d48cff; }.code-yellow{color:#f2d078}.code-green{color:#a2d594}.code-blue{color:#73c8ff}.code-orange{color:#f5a36f}
.code-preview-pane { padding:28px;display:grid;place-items:center;background:#f2f1f5; }
.app-preview-card { width:100%;max-width:300px;padding:20px;border-radius:14px;background:white;color:#23202a;box-shadow:0 25px 45px rgba(31,23,50,.13); }
.app-preview-top { display:flex;justify-content:space-between;font-size:8px;font-weight:800;color:#4f4955; }
.app-preview-title { width:68%;height:15px;margin-top:28px;border-radius:4px;background:#2b2632; }
.app-preview-metrics { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px; }
.app-preview-metrics span { height:58px;border-radius:8px;background:#f0edf7; }
.app-preview-chart { height:105px;margin-top:10px;padding:10px;border-radius:8px;background:#f8f7fa;color:#835dff; }
.app-preview-chart svg { width:100%;height:100%; }

.comparison-table { margin-top:50px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:white; }
.comparison-row { display:grid;grid-template-columns:1.1fr .9fr .9fr; }
.comparison-row > * { padding:19px 22px;border-bottom:1px solid var(--line); }
.comparison-row:last-child > * { border-bottom:0; }
.comparison-header { color:#8a8391;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:800; }
.comparison-row strong { font-size:14px; }
.comparison-row span { color:#716a79;font-size:14px; }
.leo-column { background:#f0ecff;color:#6243d5 !important;font-weight:800; }

.cta-section { width:min(1260px,calc(100% - 28px));margin-bottom:30px;padding:100px 30px;border-radius:36px;overflow:hidden;background:#6d47f2;color:white;text-align:center; }
.cta-glow { position:absolute;width:680px;height:680px;left:50%;top:-260px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 66%); }
.cta-content { position:relative;z-index:2; }
.eyebrow-text.light { color:#d8cdff; }
.cta-section h2 { margin:16px 0 0;font-family:"Space Grotesk",sans-serif;font-size:clamp(52px,7vw,88px);line-height:.95;letter-spacing:-.07em; }
.cta-section h2 span { color:var(--lime); }
.cta-section p { color:#d9d0f6;font-size:17px; }
.signup-form { max-width:560px;margin:30px auto 0;padding:7px;display:flex;background:white;border-radius:16px;box-shadow:0 20px 50px rgba(57,31,139,.32); }
.signup-form input { flex:1;min-width:0;border:0;outline:none;padding:0 15px;color:#24202c;background:transparent; }
.signup-form button { padding:14px 18px;border:0;border-radius:11px;background:#19151f;color:white;font-weight:800; }
.form-message { min-height:20px;margin-top:12px;color:#e8e2f8;font-size:12px; }

.site-footer {
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:38px 0 44px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:30px;
  color:#746d7c;
  font-size:12px;
}
.footer-links { display:flex;gap:22px; }
.copyright { color:#99929e; }

.reveal { opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1;transform:none; }
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.delay-4{transition-delay:.32s}
@keyframes blink { 50% { opacity:0; } }
@keyframes float { 50% { transform:translateY(-9px) rotate(25deg); } }

@media (max-width: 980px) {
  .desktop-nav,.site-header>.button { display:none; }
  .menu-button { display:grid;width:40px;height:40px;place-content:center;gap:5px;border:0;border-radius:10px;background:#efedf3; }
  .menu-button span { width:18px;height:2px;background:#2a2631;transition:.2s; }
  .mobile-nav { position:fixed;z-index:45;top:82px;left:20px;right:20px;padding:20px;display:none;grid-template-columns:1fr;gap:14px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 50px rgba(30,20,61,.16); }
  .mobile-nav.open { display:grid; }
  .app-shell { grid-template-columns:150px 1fr;height:590px; }
  .app-main { grid-template-columns:1fr; }
  .prompt-panel { display:none; }
  .product-preview { height:520px; }
  .split-heading,.local-grid,.phase-grid { grid-template-columns:1fr;gap:30px; }
  .use-case-grid { grid-template-columns:1fr; }
  .workflow-grid { grid-template-columns:1fr 1fr; }
  .code-window { grid-template-columns:150px 1fr; }
  .code-preview-pane { display:none; }
  .site-footer { grid-template-columns:auto 1fr; }
  .footer-links { justify-self:end; }
  .copyright { grid-column:2;justify-self:end; }
}
@media (max-width: 680px) {
  .site-header,.section,.section-tight,.site-footer { width:min(100% - 24px,1180px); }
  .site-header { margin-top:10px; }
  .hero { padding-top:75px; }
  .hero h1 { font-size:55px; }
  .hero-copy { font-size:17px; }
  .hero-actions { flex-direction:column; }
  .hero-proof { align-items:flex-start;text-align:left; }
  .artifact-showcase { margin-top:16px;padding:54px 20px;border-radius:26px; }
  .artifact-showcase-heading h2 { font-size:41px; }
  .artifact-showcase-heading p { font-size:15px; }
  .artifact-flow { width:100%;padding:10px;gap:7px;font-size:9px;letter-spacing:.08em; }
  .artifact-flow svg { width:11px; }
  .artifact-card-grid { grid-template-columns:1fr; }
  .artifact-card,.artifact-card-wide { grid-column:auto;min-height:auto;padding:22px;grid-template-columns:auto 1fr; }
  .artifact-card-arrow,.artifact-coming-soon { grid-column:2;justify-self:start; }
  .artifact-card h3 { font-size:25px; }
  .artifact-card-icon { width:52px;height:52px; }
  .app-window { margin-top:48px;padding:6px;border-radius:18px; }
  .window-title { display:none; }
  .window-topbar { grid-template-columns:1fr 1fr; }
  .app-shell { height:480px;grid-template-columns:1fr; }
  .app-sidebar { display:none; }
  .preview-panel { padding:9px; }
  .product-preview { height:425px; }
  .preview-content { padding:16px; }
  .preview-header h4 { font-size:19px; }
  .metric-grid { grid-template-columns:1fr; }
  .metric-grid > div:nth-child(n+2) { display:none; }
  .chart-card svg { height:130px; }
  .section { padding:80px 0; }
  .section-heading h2,.local-copy h2,.phase-grid h2 { font-size:42px; }
  .split-heading { gap:15px; }
  .feature-card,.feature-card-large { min-height:500px;padding:26px; }
  .feature-card h3 { font-size:30px; }
  .workflow-grid { grid-template-columns:1fr; }
  .security-visual { min-height:380px;transform:scale(.82);margin:-25px; }
  .phase-section,.cta-section { width:calc(100% - 16px);border-radius:25px;padding:70px 22px; }
  .phase-badge { right:22px;top:24px; }
  .code-window { height:380px;grid-template-columns:1fr; }
  .code-sidebar { display:none; }
  .code-editor pre { font-size:8px;padding:18px; }
  .comparison-row { grid-template-columns:1fr 1fr; }
  .comparison-row > *:nth-child(2) { display:none; }
  .signup-form { flex-direction:column;gap:7px; }
  .signup-form input { min-height:50px; }
  .site-footer { grid-template-columns:1fr;text-align:center;justify-items:center; }
  .footer-links,.copyright { grid-column:auto;justify-self:auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important; }
  .reveal { opacity:1;transform:none; }
}