:root {
  --bg: #070914;
  --bg-soft: #0b1120;
  --panel: rgba(14, 17, 33, 0.72);
  --panel-solid: #0d1526;
  --panel-2: #12182a;
  --line: rgba(255, 255, 255, 0.09);
  --line-bright: rgba(255, 255, 255, 0.16);
  --text: #d6deec;
  --muted: #8492ab;
  --muted-2: #4b5872;
  --violet: #39FF6B;
  --violet-2: #0DC94B;
  --cyan: #f5a83c;
  --rose: #FF6A4D;
  --amber: #ffcf8a;
  --green: #39FF6B;
  --danger: #FF3B1F;
  --success: #0DC94B;
  --max: 1180px;
  --radius: 24px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius-sm: 16px;
  --shadow: 0 32px 80px rgba(0, 0, 0, 0.36);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(1200px 700px at 50% 12%, #0c1426 0%, var(--bg) 60%) fixed var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.dialog-open { overflow: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { display: block; }

::selection { background: rgba(57, 255, 107, 0.34); color: white; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 10px;
  background: white;
  color: #111;
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-shell { position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section { position: relative; padding: 118px 0; }

.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .035;
  pointer-events: none;
  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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.ambient { position: absolute; z-index: -2; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ambient-one { width: 520px; height: 520px; top: 60px; left: -260px; background: rgba(13, 201, 75, .10); }
.ambient-two { width: 580px; height: 580px; top: 260px; right: -330px; background: rgba(245, 168, 60, .10); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 78px;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.is-scrolled {
  background: rgba(7, 9, 20, .76);
  border-color: var(--line);
  backdrop-filter: blur(18px) saturate(140%);
}
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(13, 201, 75, .14), 0 0 0 1px rgba(38, 50, 74, .8);
}
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand-mark svg { width: 23px; height: 23px; fill: url(#brandGradient); }
.brand-mark path:nth-child(1), .brand-mark path:nth-child(2) { fill: var(--violet); }
.brand-mark path:nth-child(3), .brand-mark path:nth-child(4) { fill: var(--cyan); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.02; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: lowercase; }
.brand-copy span:last-child { color: var(--muted); font-size:11px; font-weight: 500; letter-spacing: .18em; text-transform: lowercase; margin-top: 3px; }
.desktop-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; margin-right: 22px; }
.desktop-nav a { color: #aab0c3; font-size: 14px; font-weight: 500; transition: color .2s ease; }
.desktop-nav a:hover { color: white; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; color: #aeb4c8; font-size:13px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(98, 227, 147, .1), 0 0 16px rgba(98, 227, 147, .7); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.015em;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .menu-toggle:focus-visible, .faq-item button:focus-visible, .workflow-tab:focus-visible, .dialog-close:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button-primary {
  color: #04170b;
  background: linear-gradient(135deg, #39FF6B, #0DC94B 76%);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 12px 34px rgba(13, 201, 75, .27);
}
.button-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .23), 0 17px 40px rgba(13, 201, 75, .37); }
.button-secondary { background: rgba(255, 255, 255, .045); border-color: var(--line-bright); color: #e8eaf4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.button-secondary:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .25); }
.button-ghost { background: rgba(255, 255, 255, .04); border-color: var(--line); color: #e7e9f4; }
.button-small { min-height: 40px; padding: 0 15px; font-size:14px; }
.button-large { min-height: 54px; padding: 0 23px; font-size: 14px; border-radius: 14px; }
.play-icon { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 1px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.04); }
.play-icon svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }

.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.04); cursor: pointer; }
.menu-toggle span { position: absolute; top: 50%; width: 18px; height: 1.5px; left: 11px; margin-top: -.75px; background: white; transform-origin: center; transition: transform .2s ease; }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(0) rotate(-45deg); }
.mobile-nav { display: none; }

.hero { min-height: 940px; padding-top: 168px; padding-bottom: 72px; }
.hero-grid {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1500px;
  height: 880px;
  transform: translateX(-50%);
  opacity: .34;
  pointer-events: none;
  background-image: linear-gradient(rgba(57, 255, 107, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 255, 107, .07) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 66% 72% at 63% 40%, black 10%, transparent 78%);
}
.hero::before {
  content: "";
  position: absolute;
  width: 820px;
  height: 700px;
  right: -130px;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(127, 81, 255, .20), rgba(65, 55, 187, .07) 38%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
}
.hero-layout { display: grid; grid-template-columns: minmax(0, .83fr) minmax(590px, 1.17fr); gap: 46px; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding-top: 4px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #b9f2c9; font-family: var(--mono); font-size:12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow-icon { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(57, 255, 107, .28); border-radius: 8px; background: rgba(57, 255, 107, .10); }
.eyebrow-icon svg { width: 13px; height: 13px; fill: var(--violet); }
.hero h1 {
  margin: 23px 0 24px;
  max-width: 680px;
  font-size: clamp(54px, 5.15vw, 78px);
  line-height: .99;
  letter-spacing: -.03em;
  font-weight: 500;
}
.hero h1 span, .section-heading h2 span, .roadmap h2 span, .cta-content h2 span {
  background: linear-gradient(100deg, #E8FFEC 2%, #39FF6B 34%, #0DC94B 64%, #f5a83c 97%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede { max-width: 575px; margin: 0; color: #a9afc1; font-size: 18px; line-height: 1.68; letter-spacing: -.018em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #8492ab; font-size:13px; }
.hero-proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof svg { width: 14px; height: 14px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hero-visual { position: relative; min-height: 596px; display: grid; place-items: center; }
.visual-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(13, 201, 75, .20); filter: blur(80px); opacity: .72; }
.studio-window {
  position: relative;
  z-index: 2;
  width: 690px;
  max-width: 100%;
  min-height: 535px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18, 22, 42, .97), rgba(9, 12, 25, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 52px 110px rgba(0,0,0,.47), 0 0 0 1px rgba(57, 255, 107,.05);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg);
  transform-origin: center;
 border-color:#7a8796; box-shadow: inset 0 1px 0 rgba(247,251,255,.35), inset 0 -1px 0 rgba(238,243,249,.18), 0 32px 80px rgba(0,0,0,.5); }
.window-bar, .studio-toolbar, .studio-statusbar { display: flex; align-items: center; justify-content: space-between;  font-family:var(--mono); }
.window-bar { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); }
.window-title { display: flex; align-items: center; gap: 9px; color: #cfd3e2; font-size:13px; font-weight: 600; }
.window-symbol { width: 18px; height: 18px; border: 1px solid rgba(57, 255, 107,.26); border-radius: 5px; background: linear-gradient(135deg, rgba(57, 255, 107,.28), rgba(245, 168, 60,.10)); }
.window-version { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted-2); font-family: "DM Mono", monospace; font-size: 9px; }
.window-controls { display: flex; gap: 6px; }
.window-controls span { width: 6px; height: 6px; border-radius: 50%; background: #343a50; }
.studio-toolbar { height: 43px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.065); color: #737b91; font-size: 10px; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; }
.environment-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 11px var(--violet); }
.run-id { font-family: "DM Mono", monospace;  font-family:var(--mono); }
.running-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid rgba(98,227,147,.18); border-radius: 999px; color: #9fd7b3; background: rgba(98,227,147,.055); }
.running-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: runPulse 1.35s ease-in-out infinite; }
.running-pill.is-complete { color: #b5f3cd; }
.running-pill.is-complete i { animation: none; }
@keyframes runPulse { 0%,100% { opacity:.35; transform:scale(.8); } 50% { opacity:1; transform:scale(1.25); } }

.flow-canvas { position: relative; height: 408px; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.075) 1px, transparent 0); background-size: 20px 20px; overflow: hidden; }
.flow-canvas::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 49% 43%, rgba(57, 255, 107,.06), transparent 45%); pointer-events:none; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.connector { fill: none; stroke: rgba(126, 132, 178, .28); stroke-width: 1.25; stroke-dasharray: 4 5; }
.connector-fallback { opacity: .48; }
.connector.is-lit { stroke: url(#lineGradient); stroke-width: 2; stroke-dasharray: 7 5; filter: url(#lineGlow); animation: lineTravel 1s linear infinite; }
@keyframes lineTravel { to { stroke-dashoffset: -24; } }
.flow-pulse { fill: var(--violet); filter: drop-shadow(0 0 6px var(--violet)); opacity: 0; }
.flow-pulse.is-moving { opacity: 1; }

.agent-node {
  position: absolute;
  z-index: 2;
  width: 166px;
  min-height: 114px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(16, 20, 38, .92);
  box-shadow: 0 16px 35px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.agent-node.is-active { border-color: rgba(57, 255, 107,.65); box-shadow: 0 0 0 1px rgba(57, 255, 107,.10), 0 14px 38px rgba(71,55,196,.23), inset 0 1px 0 rgba(255,255,255,.08); transform: translateY(-2px); }
.agent-node.is-complete { border-color: rgba(245, 168, 60,.34); }
.node-trigger { left: 18px; top: 133px; }
.node-triage { left: 274px; top: 59px; }
.node-billing { right: 19px; top: 160px; }
.node-human { right: 19px; top: 275px; }
.node-topline { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.node-kicker { color:#626a80; font-family:var(--mono); font-size:7.5px; letter-spacing:.08em; text-transform:uppercase; }
.node-state { color:#767f96; font-size:7px; }
.agent-title-row { display:flex; align-items:center; gap:8px; }
.agent-title-row h3 { margin:0 0 2px; font-size:10px; font-weight:650; letter-spacing:-.01em; }
.agent-title-row p { margin:0; color:#697187; font-size:7.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }
.agent-avatar { display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border-radius:8px; }
.agent-avatar svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.avatar-user { color:#aab0c2; background:rgba(170,176,194,.08); }
.avatar-violet { color:#afaaff; background:rgba(57, 255, 107,.13); }
.avatar-cyan { color:#77e8d1; background:rgba(245, 168, 60,.11); }
.avatar-amber { color:#ffd48b; background:rgba(255,201,107,.11); }
.node-meta { display:flex; align-items:center; justify-content:space-between; margin-top:11px; padding-top:8px; border-top:1px solid rgba(255,255,255,.055); font-family:var(--mono); font-size:7px; }
.node-meta span { color:#5f667b; }
.node-meta strong { color:#aab1c7; font-weight:500; }
.confidence { display:grid; grid-template-columns:1fr auto; gap:4px 8px; margin-top:9px; font-size:7px; }
.confidence span { color:#626a80; }
.confidence strong { color:#b9bcff; font-family:var(--mono); font-weight:500; }
.confidence i { grid-column:1/-1; height:3px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.confidence b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--violet),var(--cyan)); }
.context-chips { display:flex; gap:3px; margin-top:9px; }
.context-chips span { padding:2px 4px; border:1px solid rgba(245, 168, 60,.10); border-radius:3px; color:#799b9d; background:rgba(245, 168, 60,.04); font-family:var(--mono); font-size:5.8px; }
.trace-panel { position:absolute; left:210px; bottom:14px; z-index:3; width:223px; padding:10px 11px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(10,13,27,.87); box-shadow:0 14px 30px rgba(0,0,0,.25); backdrop-filter:blur(8px); }
.trace-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; color:#9aa1b6; font-size:8px; font-weight:600; }
.trace-time { color:#5f677c; font-family:var(--mono); font-size:7px; }
.trace-list { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.trace-item { display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:6px; color:#535b70; font-size:7px; transition:color .3s ease; }
.trace-item i { width:5px; height:5px; border:1px solid #424a60; border-radius:50%; }
.trace-item strong { font-family:var(--mono); font-size:6px; font-weight:400; color:#424a60; }
.trace-item.is-complete { color:#aeb4c6; }
.trace-item.is-complete i { border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 7px rgba(245, 168, 60,.55); }
.trace-item.is-complete strong { color:#758094; }
.studio-statusbar { height:36px; padding:0 15px; border-top:1px solid var(--line); color:#60687d; font-size:8px; }
.studio-statusbar span { display:flex; align-items:center; gap:5px; }
.status-ok { width:5px; height:5px; border-radius:50%; background:var(--green); }

.floating-card { position:absolute; z-index:4; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(15,18,35,.82); box-shadow:0 20px 55px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(15px); }
.floating-score { top:24px; right:-15px; width:148px; height:72px; padding:11px 12px; display:flex; align-items:center; justify-content:space-between; animation:floatY 5s ease-in-out infinite; }
.floating-score div { display:flex; flex-direction:column; }
.floating-score span { color:#778096; font-size:8px; }
.floating-score strong { margin-top:2px; font-size:21px; letter-spacing:-.04em; }
.floating-score svg { width:42px; height:42px; transform:rotate(-90deg); }
.floating-score circle { fill:none; stroke:rgba(255,255,255,.07); stroke-width:4; }
.floating-score .score-ring { stroke:var(--cyan); stroke-linecap:round; stroke-dasharray:113; stroke-dashoffset:10; filter:drop-shadow(0 0 4px rgba(245, 168, 60,.6)); }
.floating-context { left:-16px; bottom:31px; padding:11px 13px; display:flex; align-items:center; gap:9px; animation:floatY 5.5s ease-in-out -2s infinite; }
.floating-context .context-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; color:#b5b0ff; background:rgba(57, 255, 107,.12); }
.context-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.floating-context div { display:flex; flex-direction:column; }
.floating-context strong { font-size:9px; }
.floating-context span:last-child { color:#6f778d; font-size:7px; margin-top:2px; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.stack-strip { margin-top:88px; text-align:center; }
.stack-strip p { margin:0 0 25px; color:#555d73; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.stack-logos { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:37px; color:#777f95; }
.stack-logos span { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; }
.stack-icon { display:grid; place-items:center; width:24px; height:24px; border:1px solid rgba(255,255,255,.08); border-radius:7px; color:#a3a9bb; font-family:var(--mono); font-size:10px; font-style:normal; background:rgba(255,255,255,.025); }
.stack-strip small { display:block; margin-top:18px; color:#3f4659; font-size:9px; }

.section-heading { position:relative; z-index:1; }
.section-heading.centered { max-width:790px; margin:0 auto 60px; text-align:center; }
.section-heading.split { display:grid; grid-template-columns:1fr .74fr; gap:80px; align-items:end; margin-bottom:58px; }
.section-label { margin-bottom:17px; color:#2fdd63; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
.section-heading h2, .scorecard-copy h2, .roadmap h2, .faq-heading h2, .cta-content h2 {
  margin:0;
  font-size:clamp(40px,4vw,58px);
  line-height:1.06;
  letter-spacing:-.052em;
  font-weight:680;
}
.section-heading p { max-width:620px; margin:21px auto 0; color:#8e95aa; font-size:16px; line-height:1.75; letter-spacing:-.013em; }
.section-heading.split p { margin:0 0 5px; max-width:480px; }

.problem { padding-top:128px; background:linear-gradient(180deg, transparent, rgba(12,15,30,.55) 42%, transparent); }
.problem::before { content:""; position:absolute; left:50%; top:33px; width:1px; height:85px; background:linear-gradient(transparent,rgba(57, 255, 107,.4)); }
.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.problem-card { position:relative; min-height:308px; padding:29px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(18,21,39,.72),rgba(10,13,26,.75)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); overflow:hidden; }
.problem-card::after { content:""; position:absolute; inset:auto -50px -100px; height:170px; background:radial-gradient(ellipse,rgba(120,94,255,.08),transparent 68%); }
.problem-number { position:absolute; right:22px; top:20px; color:#373d50; font-family:var(--mono); font-size:12px; }
.problem-icon, .feature-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid; border-radius:12px; }
.problem-icon svg, .feature-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.icon-violet { color:#aaa5ff; border-color:rgba(57, 255, 107,.20); background:rgba(57, 255, 107,.085); }
.icon-cyan { color:#71e3ce; border-color:rgba(245, 168, 60,.18); background:rgba(245, 168, 60,.07); }
.icon-amber { color:#ffd28b; border-color:rgba(255,201,107,.18); background:rgba(255,201,107,.07); }
.icon-rose { color:#ff8a70; border-color:rgba(255,119,169,.18); background:rgba(255,119,169,.07); }
.icon-green { color:#8fe9ad; border-color:rgba(98,227,147,.18); background:rgba(98,227,147,.07); }
.problem-card h3 { margin:25px 0 10px; font-size:20px; letter-spacing:-.03em; }
.problem-card p { margin:0; color:#8492ab; font-size:14px; line-height:1.7; }
.mini-log { position:absolute; left:28px; right:28px; bottom:27px; display:flex; align-items:center; gap:7px; }
.mini-log span { color:#c05a48; font-family:var(--mono); font-size:7px; text-transform:uppercase; }
.mini-log code { padding:4px 7px; border:1px solid rgba(255,113,133,.1); border-radius:5px; color:#9a6672; background:rgba(255,113,133,.035); font-family:var(--mono); font-size:7px; text-decoration:line-through; }
.route-drift { position:absolute; left:28px; right:28px; bottom:31px; display:flex; align-items:center; }
.route-drift span { padding:6px 9px; border:1px solid var(--line); border-radius:7px; color:#737b91; font-size:8px; }
.route-drift i { flex:1; height:1px; border-top:1px dashed rgba(255,255,255,.12); position:relative; }
.route-drift i::after { content:""; position:absolute; right:0; top:-3px; border-left:5px solid rgba(255,255,255,.18); border-top:3px solid transparent; border-bottom:3px solid transparent; }
.route-drift .route-error { color:#c05a48; border-color:rgba(255,113,133,.14); background:rgba(255,113,133,.04); }
.loop-visual { position:absolute; left:28px; bottom:26px; display:flex; align-items:center; gap:5px; }
.loop-visual span { display:grid; place-items:center; width:29px; height:29px; border:1px solid var(--line); border-radius:50%; color:#798196; font-family:var(--mono); font-size:8px; }
.loop-visual span:last-child { border-color:rgba(255,113,133,.2); color:#bd7181; }
.loop-visual i { width:43px; height:12px; border-top:1px dashed rgba(255,201,107,.18); border-radius:50%; }

.platform { padding-top:110px; }
.feature-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.feature-card { position:relative; min-height:314px; padding:27px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(16,19,37,.78),rgba(9,12,24,.88)); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); overflow:hidden; }
.feature-card:hover { border-color:rgba(255,255,255,.14); }
.feature-large { grid-column:span 2; display:grid; grid-template-columns:.78fr 1.22fr; gap:20px; }
.feature-wide { grid-column:span 2; display:grid; grid-template-columns:.73fr 1.27fr; gap:25px; }
.feature-card h3 { margin:22px 0 9px; font-size:19px; letter-spacing:-.027em; }
.feature-card p { margin:0; color:#8492ab; font-size:14px; line-height:1.68; }
.feature-copy a { display:inline-flex; align-items:center; gap:7px; margin-top:26px; color:#7fe8a0; font-size:12px; font-weight:600; }
.feature-copy a svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.7; }
.routing-preview { position:relative; min-height:260px; margin:-2px -8px -25px 0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0); background-size:18px 18px; border-left:1px solid rgba(255,255,255,.045); mask-image:linear-gradient(to right,transparent,black 15%); }
.routing-preview svg { position:absolute; inset:0; width:100%; height:100%; }
.routing-preview path { fill:none; stroke:rgba(57, 255, 107,.4); stroke-width:1.5; stroke-dasharray:5 5; }
.preview-node { position:absolute; z-index:2; display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid rgba(255,255,255,.11); border-radius:8px; background:#11152a; color:#9299ad; font-size:8px; box-shadow:0 12px 25px rgba(0,0,0,.22); }
.preview-node i { width:6px; height:6px; border-radius:50%; background:var(--violet); }
.preview-node.node-a { left:11px; top:111px; }
.preview-node.node-b { left:174px; top:47px; }
.preview-node.node-c { left:174px; bottom:38px; }
.preview-node.node-d { right:3px; top:111px; }
.preview-node.node-b i { background:var(--cyan); }
.preview-node.node-c i { background:var(--rose); }
.preview-node.node-d i { background:var(--amber); }
.contract-preview { display:grid; gap:6px; margin-top:31px; }
.contract-preview span { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:7px; padding:7px 8px; border:1px solid rgba(255,255,255,.055); border-radius:7px; color:#878fa3; background:rgba(255,255,255,.018); font-family:var(--mono); font-size:7px; }
.contract-preview i { width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px rgba(245, 168, 60,.5); }
.contract-preview b { color:#525a70; font-weight:400; }
.compare-preview { display:grid; gap:12px; margin-top:27px; }
.compare-preview div { display:grid; grid-template-columns:1fr auto; gap:6px 10px; font-size:8px; }
.compare-preview span { color:#697186; }
.compare-preview strong { font-size:7px; font-weight:600; }
.compare-preview strong.bad { color:#d17788; }
.compare-preview strong.good { color:#73dba1; }
.compare-preview i { grid-column:1/-1; height:4px; border-radius:99px; background:linear-gradient(90deg,rgba(57, 255, 107,.7) var(--value,70%),rgba(255,255,255,.05) 0); position:relative; overflow:hidden; }
.compare-preview div:first-child i { background:linear-gradient(90deg,rgba(255,113,133,.65) 58%,rgba(255,255,255,.05) 0); }
.compare-preview div:last-child i { background:linear-gradient(90deg,rgba(245, 168, 60,.65) 94%,rgba(255,255,255,.05) 0); }
.approval-preview { margin-top:30px; padding:12px; border:1px solid rgba(255,201,107,.12); border-radius:10px; background:rgba(255,201,107,.025); }
.approval-preview span { display:flex; align-items:center; gap:7px; color:#8a8291; font-size:8px; }
.approval-preview span i { width:6px; height:6px; border-radius:50%; background:var(--amber); }
.approval-preview button { width:100%; margin-top:10px; padding:7px; border:1px solid rgba(255,201,107,.14); border-radius:7px; color:#b6a27e; background:rgba(255,201,107,.05); font-size:7px; }
.metrics-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; align-content:center; position:relative; min-height:250px; }
.metric { padding:12px; border:1px solid rgba(255,255,255,.065); border-radius:10px; background:rgba(255,255,255,.02); }
.metric span { display:block; color:#656d82; font-size:7px;  font-family:var(--mono); }
.metric strong { display:inline-block; margin-top:5px; font-size:15px; letter-spacing:-.035em; }
.metric em { margin-left:5px; color:#6fd69d; font-size:6px; font-style:normal; }
.metric em.neutral { color:#8f94ce; }
.sparkline { grid-column:1/-1; height:103px; padding:8px 3px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.sparkline svg { width:100%; height:100%; }
.spark-fill { fill:url(#sparkGradient); fill:rgba(57, 255, 107,.08); }
.spark-stroke { fill:none; stroke:var(--violet); stroke-width:1.7; filter:drop-shadow(0 0 5px rgba(57, 255, 107,.42)); }

.workflow { background:linear-gradient(180deg,transparent,rgba(13,15,32,.52) 30%,rgba(13,15,32,.52) 70%,transparent); overflow:hidden; }
.workflow-orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.workflow-orb-one { width:480px; height:480px; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(13,201,75,.10); }
.workflow-shell { position:relative; z-index:2; border:1px solid rgba(255,255,255,.11); border-radius:23px; background:linear-gradient(145deg,rgba(16,19,38,.88),rgba(8,11,23,.92)); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04); overflow:hidden; }
.workflow-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.workflow-tab { position:relative; height:70px; border:0; border-right:1px solid var(--line); color:#666e84; background:transparent; cursor:pointer; font-size:13px; font-weight:600; transition:color .2s ease,background .2s ease; }
.workflow-tab:last-child { border-right:0; }
.workflow-tab span { margin-right:7px; color:#42495c; font-family:var(--mono); font-size:9px; }
.workflow-tab::after { content:""; position:absolute; left:22%; right:22%; bottom:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--violet),transparent); transform:scaleX(0); transition:transform .25s ease; }
.workflow-tab.is-active { color:#e3e5ef; background:rgba(255,255,255,.022); }
.workflow-tab.is-active span { color:#8f8aff; }
.workflow-tab.is-active::after { transform:scaleX(1); }
.workflow-panel { display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center; min-height:470px; padding:52px 57px; }
.workflow-panel[hidden] { display:none; }
.workflow-step { color:#938fff; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.workflow-copy h3 { margin:16px 0 15px; max-width:460px; font-size:31px; line-height:1.2; letter-spacing:-.04em; }
.workflow-copy p { max-width:430px; margin:0; color:#81899e; font-size:14px; line-height:1.75; }
.workflow-copy ul { display:grid; gap:10px; margin:24px 0 0; padding:0; list-style:none; }
.workflow-copy li { display:flex; align-items:center; gap:9px; color:#9aa9c4; font-size:12px; }
.workflow-copy li i { width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px rgba(245, 168, 60,.55); }
.workflow-demo { min-height:340px; border:1px solid rgba(255,255,255,.09); border-radius:17px; background:#0b0e1c; box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 24px 55px rgba(0,0,0,.23); overflow:hidden; }
.demo-toolbar { display:flex; align-items:center; justify-content:space-between; height:43px; padding:0 15px; border-bottom:1px solid var(--line); color:#687085; font-family:var(--mono); font-size:8px; }
.demo-toolbar i { width:6px; height:6px; border-radius:50%; background:var(--violet); box-shadow:0 0 8px var(--violet); }
.demo-toolbar strong { color:#77dca5; font-size:8px; font-weight:500; }
.rule-block { margin:24px; padding:16px; border-left:2px solid rgba(57, 255, 107,.62); border-radius:0 9px 9px 0; background:rgba(57, 255, 107,.04); }
.rule-block div { display:grid; grid-template-columns:43px 1.25fr 34px 1.3fr; align-items:center; min-height:32px; border-bottom:1px solid rgba(255,255,255,.035); font-family:var(--mono); font-size:9px; }
.rule-block div:last-child { border-bottom:0; }
.rule-block em { color:#c17fe9; font-style:normal; }
.rule-block code { color:#8b94aa; }
.rule-block b { color:#586077; font-weight:400; }
.rule-block strong { color:#71d7c3; font-weight:400; }
.rule-block div:last-child { grid-template-columns:43px 1fr; }
.context-block { margin:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.context-block > span { grid-column:1/-1; margin-bottom:2px; color:#555d71; font-family:var(--mono); font-size:7px; text-transform:uppercase; }
.context-block div { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid rgba(255,255,255,.055); border-radius:7px; color:#8492ab; font-family:var(--mono); font-size:7px; }
.context-block i { width:5px; height:5px; border-radius:50%; background:var(--cyan); }
.test-demo { padding-bottom:20px; }
.test-row { display:grid; grid-template-columns:25px 1fr auto; align-items:center; min-height:53px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.045); color:#8a91a5; font-size:10px; }
.test-row i { display:grid; place-items:center; width:17px; height:17px; border:1px solid rgba(98,227,147,.18); border-radius:50%; color:#75d99f; background:rgba(98,227,147,.06); font-size:8px; font-style:normal; }
.test-row em { color:#67bf8d; font-family:var(--mono); font-size:7px; font-style:normal; }
.test-progress { height:4px; margin:20px 18px 0; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden; }
.test-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--violet),var(--cyan)); }
.inspect-demo { padding-bottom:21px; }
.inspect-demo code { display:grid; grid-template-columns:33px 1fr; min-height:43px; align-items:center; border-bottom:1px solid rgba(255,255,255,.04); font-family:var(--mono); font-size:8px; }
.line-number { color:#3f4659; text-align:center; }
.inspect-demo b { display:block; padding-left:11px; font-weight:400; }
.diff-minus { color:#b66e7d; background:rgba(255,113,133,.035); }
.diff-plus { color:#66bf8c; background:rgba(98,227,147,.032); }
.replay-button { width:max-content; margin:18px 18px 0 auto; padding:8px 11px; border:1px solid rgba(57, 255, 107,.14); border-radius:8px; color:#9d99e6; background:rgba(57, 255, 107,.05); font-size:8px; }
.replay-button span { margin-right:5px; }
.deploy-demo { padding:27px; }
.deployment-card { display:grid; grid-template-columns:42px 1fr 12px; align-items:center; gap:12px; padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:rgba(255,255,255,.018); }
.deployment-icon { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(57, 255, 107,.17); border-radius:9px; color:#a8a3ff; background:rgba(57, 255, 107,.07); }
.deployment-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.deployment-card div:nth-child(2) { display:flex; flex-direction:column; }
.deployment-card span { color:#747c91; font-family:var(--mono); font-size:8px; }
.deployment-card strong { margin-top:3px; font-size:13px; }
.deploy-live { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(98,227,147,.5); }
.deployment-path { display:flex; align-items:center; margin:42px 5px 35px; }
.deployment-path span { padding:6px 9px; border:1px solid var(--line); border-radius:7px; color:#626a7f; font-family:var(--mono); font-size:7px; }
.deployment-path span.is-live { color:#76c995; border-color:rgba(98,227,147,.18); background:rgba(98,227,147,.045); }
.deployment-path i { flex:1; height:1px; background:linear-gradient(90deg,rgba(57, 255, 107,.32),rgba(245, 168, 60,.32)); }
.deploy-demo button { width:100%; height:42px; border:1px solid rgba(57, 255, 107,.25); border-radius:10px; color:#c8f5d4; background:linear-gradient(135deg,rgba(123,118,248,.24),rgba(155,98,232,.19)); font-size:10px; font-weight:600; }
.deploy-demo button span { margin-left:5px; }

.scorecard { padding-top:132px; }
.scorecard-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:92px; align-items:center; }
.scorecard-copy h2 { margin-bottom:22px; }
.scorecard-copy p { max-width:480px; margin:0 0 30px; color:#858ca1; font-size:15px; line-height:1.78; }
.scorecard-panel { padding:28px; border:1px solid var(--line-bright); border-radius:21px; background:linear-gradient(145deg,rgba(19,22,42,.9),rgba(9,12,25,.92)); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04); }
.scorecard-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid var(--line); }
.scorecard-top > div:first-child { display:flex; flex-direction:column; }
.scorecard-top span { color:#677087; font-size:9px; }
.scorecard-top strong { margin-top:4px; font-size:14px; }
.total-score { display:flex; align-items:baseline; }
.total-score strong { margin:0; font-size:32px; letter-spacing:-.05em; }
.total-score span { margin-left:4px; font-family:var(--mono); }
.score-list { display:grid; gap:16px; margin-top:24px; }
.score-row > div { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.score-row span { color:#838a9e; font-size:9px; }
.score-row strong { color:#bbbdf3; font-family:var(--mono); font-size:9px; font-weight:500; }
.score-row > i { display:block; height:5px; border-radius:99px; background:rgba(255,255,255,.055); overflow:hidden; }
.score-row > i b { display:block; width:var(--score); height:100%; border-radius:inherit; background:linear-gradient(90deg,#716ce2,var(--violet),var(--cyan)); box-shadow:0 0 8px rgba(57, 255, 107,.32); }
.scorecard-note { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; margin-top:24px; padding:12px 14px; border:1px solid rgba(255,201,107,.10); border-radius:10px; background:rgba(255,201,107,.025); }
.scorecard-note span { padding:4px 7px; border-radius:5px; color:#b7a275; background:rgba(255,201,107,.07); font-size:7px; font-weight:600; text-transform:uppercase; }
.scorecard-note p { margin:0; color:#777f93; font-size:8px; }

.use-cases { background:linear-gradient(180deg,transparent,rgba(11,14,28,.5),transparent); }
.use-case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.use-case-card { min-height:295px; padding:26px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(16,19,37,.72),rgba(9,12,24,.82)); overflow:hidden; }
.case-top { display:flex; align-items:center; gap:9px; color:#686f84; font-size:9px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.case-icon { display:grid; place-items:center; width:35px; height:35px; border:1px solid rgba(57, 255, 107,.15); border-radius:10px; color:#9d98f4; background:rgba(57, 255, 107,.06); }
.case-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.use-case-card h3 { margin:26px 0 10px; font-size:21px; letter-spacing:-.03em; }
.use-case-card p { margin:0; color:#8492ab; font-size:14px; line-height:1.7; }
.case-flow { display:flex; align-items:center; margin-top:30px; }
.case-flow span { padding:6px 8px; border:1px solid rgba(255,255,255,.07); border-radius:6px; color:#6e768b; background:rgba(255,255,255,.018); font-family:var(--mono); font-size:6.5px; }
.case-flow i { flex:1; color:#494f62; text-align:center; font-style:normal; font-size:9px; }

.roadmap { padding-top:130px; }
.roadmap-layout { display:grid; grid-template-columns:.84fr 1.16fr; gap:100px; align-items:start; }
.roadmap-copy { position:sticky; top:140px; }
.roadmap-copy > p { max-width:440px; margin:23px 0 0; color:#858ca1; font-size:15px; line-height:1.78; }
.roadmap-cta { display:flex; flex-direction:column; align-items:flex-start; gap:15px; margin-top:32px; }
.roadmap-cta span { max-width:390px; color:#5f667b; font-size:10px; line-height:1.6; }
.timeline { position:relative; display:grid; gap:0; }
.timeline::before { content:""; position:absolute; left:14px; top:19px; bottom:45px; width:1px; background:linear-gradient(var(--violet),rgba(255,255,255,.08)); }
.timeline-item { position:relative; display:grid; grid-template-columns:29px 1fr; gap:20px; padding-bottom:43px; }
.timeline-marker { position:relative; z-index:2; display:grid; place-items:center; width:29px; height:29px; border:1px solid rgba(255,255,255,.10); border-radius:50%; background:var(--bg); }
.timeline-marker i { width:7px; height:7px; border-radius:50%; background:#444c61; }
.timeline-item.is-current .timeline-marker { border-color:rgba(57, 255, 107,.42); box-shadow:0 0 0 5px rgba(57, 255, 107,.06); }
.timeline-item.is-current .timeline-marker i { background:var(--violet); box-shadow:0 0 11px var(--violet); }
.timeline-content { padding:2px 0 2px 1px; }
.timeline-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.timeline-meta span { color:#6c7489; font-family:var(--mono); font-size:8px; }
.timeline-meta strong { padding:4px 7px; border:1px solid rgba(98,227,147,.12); border-radius:99px; color:#79c798; background:rgba(98,227,147,.04); font-size:7px; font-weight:600; }
.timeline-content h3 { margin:0 0 8px; font-size:20px; letter-spacing:-.028em; }
.timeline-content p { margin:0; color:#8492ab; font-size:13px; line-height:1.7; }
.timeline-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }
.timeline-tags span { padding:5px 8px; border:1px solid rgba(255,255,255,.06); border-radius:6px; color:#646c81; background:rgba(255,255,255,.018); font-size:7px; }

.faq { background:linear-gradient(180deg,transparent,rgba(12,14,29,.52),transparent); }
.faq-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:100px; }
.faq-heading h2 { font-size:44px; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item > button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:76px; padding:0; border:0; color:#d9dce7; background:transparent; cursor:pointer; text-align:left; font-size:14px; font-weight:600; }
.faq-item > button i { position:relative; flex:0 0 auto; width:18px; height:18px; margin-left:20px; }
.faq-item > button i::before, .faq-item > button i::after { content:""; position:absolute; left:4px; right:4px; top:8px; height:1px; background:#6a7185; transition:transform .2s ease; }
.faq-item > button i::after { transform:rotate(90deg); }
.faq-item.is-open > button i::after { transform:rotate(0); }
.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq-answer > p { overflow:hidden; margin:0; color:#8492ab; font-size:13px; line-height:1.75; }
.faq-item.is-open .faq-answer { grid-template-rows:1fr; }
.faq-item.is-open .faq-answer > p { padding:0 40px 25px 0; }

.final-cta { padding-bottom:110px; }
.cta-panel { position:relative; min-height:500px; display:grid; place-items:center; padding:70px 40px; border:1px solid rgba(255,255,255,.13); border-radius:27px; background:linear-gradient(145deg,#11152c,#0c0f21); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05); overflow:hidden; }
.cta-grid { position:absolute; inset:0; opacity:.32; background-image:linear-gradient(rgba(57, 255, 107,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(57, 255, 107,.06) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse at center,black,transparent 75%); }
.cta-orb { position:absolute; border-radius:50%; filter:blur(80px); }
.cta-orb-one { width:450px; height:450px; left:-100px; top:-180px; background:rgba(97,76,234,.2); }
.cta-orb-two { width:420px; height:420px; right:-120px; bottom:-190px; background:rgba(120,63,210,.17); }
.cta-content { position:relative; z-index:2; max-width:810px; text-align:center; }
.cta-content h2 { margin-top:20px; font-size:clamp(46px,5vw,68px); }
.cta-content p { max-width:625px; margin:23px auto 0; color:#979eb2; font-size:16px; line-height:1.72; }
.cta-content .hero-actions { justify-content:center; }

.site-footer { padding:12px 0 25px; }
.footer-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:100px; padding:55px 0; border-top:1px solid var(--line); }
.footer-brand p { margin:19px 0 0; color:#4b5872; font-size:12px; }
.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 { margin-bottom:5px; color:#a5aabb; font-size:10px; }
.footer-links a, .footer-links button { width:max-content; padding:0; border:0; color:#60687d; background:transparent; cursor:pointer; font-size:10px; transition:color .2s ease; }
.footer-links a:hover, .footer-links button:hover { color:#d1d4df; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:19px; border-top:1px solid rgba(255,255,255,.055); color:#474e61; font-size:8px; }
.footer-bottom > div { display:flex; align-items:center; gap:17px; }
.footer-status { display:flex; align-items:center; gap:6px; }
.footer-status i { width:5px; height:5px; border-radius:50%; background:var(--green); }

.access-dialog { width:min(calc(100% - 32px),570px); padding:0; border:1px solid rgba(255,255,255,.14); border-radius:23px; color:var(--text); background:linear-gradient(145deg,#12162b,#090c19); box-shadow:0 40px 120px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.055); overflow:hidden; }
.access-dialog::backdrop { background:rgba(3,4,10,.72); backdrop-filter:blur(12px); }
.dialog-glow { position:absolute; width:280px; height:280px; right:-120px; top:-140px; border-radius:50%; background:rgba(13,201,75,.20); filter:blur(65px); pointer-events:none; }
.dialog-close { position:absolute; z-index:3; right:16px; top:16px; width:37px; height:37px; padding:0; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.035); cursor:pointer; }
.dialog-close span { position:absolute; left:10px; top:17px; width:15px; height:1px; background:#9da3b5; }
.dialog-close span:first-child { transform:rotate(45deg); }
.dialog-close span:last-child { transform:rotate(-45deg); }
.dialog-copy { position:relative; z-index:2; padding:38px 38px 0; }
.dialog-copy h2 { margin:18px 0 12px; font-size:34px; line-height:1.08; letter-spacing:-.045em; }
.dialog-copy p { margin:0; color:#838a9e; font-size:14px; line-height:1.7; }
.access-form { display:grid; gap:15px; padding:28px 38px 38px; }
.access-form label { display:grid; gap:7px; }
.access-form label > span { color:#9da3b5; font-size:10px; font-weight:600; }
.access-form input, .access-form select { width:100%; height:48px; padding:0 13px; border:1px solid rgba(255,255,255,.09); border-radius:10px; outline:none; color:#e7e9f2; background:rgba(255,255,255,.035); font-size:13px; transition:border-color .2s ease,box-shadow .2s ease; }
.access-form input::placeholder { color:#51586c; }
.access-form select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#676f84 50%),linear-gradient(135deg,#676f84 50%,transparent 50%); background-position:calc(100% - 17px) 21px,calc(100% - 12px) 21px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.access-form input:focus, .access-form select:focus { border-color:rgba(57, 255, 107,.55); box-shadow:0 0 0 3px rgba(57, 255, 107,.08); }
.access-form label small { display:none; color:#d86a55; font-size:8px; }
.access-form label.has-error small { display:block; }
.access-form label.has-error input, .access-form label.has-error select { border-color:rgba(255,113,133,.5); }
.form-note { margin:0; color:#525a6e; text-align:center; font-size:8px; line-height:1.5; }
.form-success { position:relative; z-index:2; padding:65px 40px 45px; text-align:center; }
.success-icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 20px; border:1px solid rgba(98,227,147,.21); border-radius:50%; color:#76dda1; background:rgba(98,227,147,.07); }
.success-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.form-success h3 { margin:0 0 11px; font-size:25px; letter-spacing:-.04em; }
.form-success p { max-width:400px; margin:0 auto 24px; color:#838a9e; font-size:13px; line-height:1.65; }
.form-success code { color:#7fe8a0; font-family:var(--mono); font-size:10px; }

.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1); transition-delay:var(--delay,0ms); }
.js .reveal.is-visible { opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal { opacity:1; transform:none; }
}

@media (max-width: 1120px) {
  .desktop-nav { gap:22px; margin-right:10px; }
  .status-pill { display:none; }
  .hero-layout { grid-template-columns:.88fr 1.12fr; gap:20px; }
  .studio-window { width:620px; transform:scale(.93) perspective(1400px) rotateY(-2deg); }
  .floating-score { right:4px; }
  .floating-context { left:0; }
  .feature-large { grid-template-columns:.88fr 1.12fr; }
  .workflow-panel { gap:40px; padding:48px 44px; }
  .roadmap-layout, .faq-layout { gap:70px; }
}

@media (max-width: 920px) {
  .section { padding:90px 0; }
  .desktop-nav, .desktop-cta { display:none; }
  .menu-toggle { display:block; position:relative; }
  .mobile-nav { position:fixed; top:70px; left:20px; right:20px; z-index:99; display:grid; gap:8px; padding:16px; border:1px solid var(--line-bright); border-radius:17px; background:rgba(12,15,29,.97); box-shadow:0 25px 60px rgba(0,0,0,.45); backdrop-filter:blur(18px); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .2s ease,visibility .2s ease,transform .2s ease; }
  .mobile-nav.is-open { opacity:1; visibility:visible; transform:translateY(0); }
  .mobile-nav a { padding:11px 10px; color:#b2b7c8; font-size:14px; }
  .mobile-nav .button { margin-top:5px; }
  .hero { min-height:auto; padding-top:138px; }
  .hero-layout { grid-template-columns:1fr; gap:60px; }
  .hero-copy { max-width:720px; text-align:center; margin:0 auto; }
  .hero h1 { max-width:none; }
  .hero-lede { margin-inline:auto; }
  .hero-actions, .hero-proof { justify-content:center; }
  .hero-visual { min-height:590px; }
  .studio-window { width:690px; transform:none; }
  .stack-strip { margin-top:65px; }
  .section-heading.split { grid-template-columns:1fr; gap:24px; }
  .section-heading.split p { max-width:620px; }
  .problem-grid, .use-case-grid { grid-template-columns:1fr; }
  .problem-card { min-height:265px; }
  .feature-bento { grid-template-columns:1fr 1fr; }
  .feature-large, .feature-wide { grid-column:span 2; }
  .workflow-panel { grid-template-columns:1fr; min-height:720px; }
  .workflow-copy { max-width:600px; }
  .scorecard-layout { grid-template-columns:1fr; gap:48px; }
  .scorecard-copy { max-width:640px; }
  .roadmap-layout { grid-template-columns:1fr; gap:60px; }
  .roadmap-copy { position:static; }
  .faq-layout { grid-template-columns:1fr; gap:45px; }
  .footer-grid { gap:50px; }
}

@media (max-width: 700px) {
  .container { width:min(calc(100% - 28px),var(--max)); }
  .site-header { height:68px; }
  .brand-mark { width:32px; height:32px; }
  .hero { padding-top:118px; padding-bottom:55px; }
  .hero h1 { font-size:clamp(48px,14vw,65px); }
  .hero-lede { font-size:16px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .button { width:100%; }
  .hero-proof { gap:10px 16px; }
  .hero-visual { min-height:480px; margin-inline:-8px; }
  .studio-window { width:690px; max-width:none; transform:scale(.70); transform-origin:center; }
  .floating-card { display:none; }
  .stack-strip { margin-top:15px; }
  .stack-logos { gap:18px 25px; }
  .section-heading.centered { margin-bottom:45px; }
  .section-heading h2, .scorecard-copy h2, .roadmap h2, .cta-content h2 { font-size:clamp(37px,11vw,50px); }
  .problem-card { padding:24px; }
  .feature-bento { grid-template-columns:1fr; }
  .feature-large, .feature-wide { grid-column:auto; grid-template-columns:1fr; }
  .feature-large { min-height:600px; }
  .routing-preview { min-height:270px; margin:10px -8px -25px; border-left:0; border-top:1px solid rgba(255,255,255,.045); mask-image:linear-gradient(to bottom,transparent,black 15%); }
  .feature-wide { min-height:540px; }
  .metrics-preview { min-height:auto; margin-top:18px; }
  .workflow-tabs { grid-template-columns:repeat(2,1fr); }
  .workflow-tab { height:58px; }
  .workflow-tab:nth-child(2) { border-right:0; }
  .workflow-tab:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .workflow-panel { min-height:730px; padding:34px 22px; gap:33px; }
  .workflow-copy h3 { font-size:27px; }
  .workflow-demo { min-height:325px; }
  .rule-block { margin:18px; padding:12px; overflow-x:auto; }
  .rule-block div { min-width:360px; }
  .context-block { margin:0 18px; }
  .scorecard-panel { padding:20px; }
  .scorecard-note { grid-template-columns:1fr; }
  .roadmap-layout { gap:50px; }
  .timeline-item { gap:14px; }
  .timeline-meta { align-items:flex-start; gap:10px; }
  .faq-heading h2 { font-size:38px; }
  .cta-panel { min-height:520px; padding:55px 22px; }
  .footer-grid { grid-template-columns:1fr; gap:45px; }
  .footer-links { gap:18px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:13px; }
  .footer-bottom > div { flex-wrap:wrap; }
  .dialog-copy { padding:34px 24px 0; }
  .access-form { padding:24px; }
}

@media (max-width: 480px) {
  .brand-copy { font-size:13px; }
  .hero-visual { min-height:390px; }
  .studio-window { transform:scale(.56); }
  .stack-strip { margin-top:-5px; }
  .stack-logos span { font-size:12px; }
  .feature-card { padding:23px; }
  .feature-large { min-height:560px; }
  .preview-node.node-a { left:2px; }
  .preview-node.node-b, .preview-node.node-c { left:132px; }
  .preview-node.node-d { right:0; }
  .metrics-preview { grid-template-columns:1fr; }
  .sparkline { grid-column:auto; }
  .workflow-panel { min-height:760px; }
  .context-block { grid-template-columns:1fr; }
  .faq-item > button { min-height:70px; font-size:14px; }
  .footer-links { grid-template-columns:1fr 1fr; row-gap:35px; }
}


/* Mobile grid containment: keep the 690px product mockup from widening the hero track. */
@media (max-width: 920px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-copy, .hero-visual { min-width: 0; width: 100%; }
}

@media (max-width: 700px) {
  .hero-copy { max-width: 100%; }
  .hero-copy .eyebrow { max-width: 100%; justify-content: center; line-height: 1.4; }
  .hero-visual { overflow: visible; }
}



/* Routing stage (hero) */
.ring-canvas { position: relative; padding: 8px 6px 2px; }
.ring-canvas svg { display: block; width: 100%; height: auto; }

/* Hero video (cinematic loop) */
.hero-video-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid #7a8796; box-shadow: inset 0 1px 0 rgba(247,251,255,.35), inset 0 -1px 0 rgba(238,243,249,.18), 0 32px 80px rgba(0,0,0,.55); background: #070914; }
.hero-video-frame video { display: block; width: 100%; height: auto; }

/* Hero routing-stage animation */
.hero-stage { position: relative; width: 862px; max-width: 100%; z-index: 2; border-radius: var(--radius); overflow: hidden; border: 1px solid #7a8796; box-shadow: inset 0 1px 0 rgba(247,251,255,.35), inset 0 -1px 0 rgba(238,243,249,.18), 0 32px 80px rgba(0,0,0,.55); background: #070914; }
.hero-stage svg { display: block; width: 100%; height: auto; }
.hero-stage .hs-halo { animation: hs-breathe 3.6s ease-in-out infinite; transform-origin: 380px 290px; transform-box: view-box; }
.hero-stage .hs-emission { animation: hs-flicker 7s ease-in-out infinite; }
@keyframes hs-breathe { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes hs-flicker { 0%,100% { opacity: .96; } 48% { opacity: 1; } 52% { opacity: .9; } 56% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-stage .pulse { display: none; } .hero-stage .hs-halo, .hero-stage .hs-emission { animation: none; } }

@media (max-width: 1140px) { .hero-stage { width: 100%; } }