* { box-sizing: border-box; }
:root {
  --ink: #0b1220;
  --muted: #647084;
  --line: #dfe5ec;
  --soft: #f5f7fa;
  --accent: #55d6a0;
  --accent-dark: #123c30;
  --white: #fff;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "DM Sans", sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.nav {
  height: 76px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 6vw; border-bottom: 1px solid rgba(11,18,32,.08);
  position: sticky; top: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); z-index: 10;
}
.brand { display:flex; align-items:center; gap:10px; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:18px; }
.brand-mark { width:25px; height:25px; border-radius:8px; background:var(--ink); display:flex; flex-direction:column; justify-content:center; gap:3px; padding:6px; }
.brand-mark span { height:2px; border-radius:2px; background:var(--accent); display:block; }
.brand-mark span:nth-child(2) { width:70%; }
nav { display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600; }
nav a:not(.nav-cta) { color:#596476; }
.nav-cta { background:var(--ink); color:#fff; padding:11px 17px; border-radius:9px; }
.hero { max-width:1100px; margin:0 auto; padding:105px 32px 115px; text-align:center; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.14em; color:#718096; margin-bottom:18px; }
.hero h1, h2 { font-family:"Space Grotesk",sans-serif; letter-spacing:-.045em; line-height:1.05; }
.hero h1 { font-size:clamp(45px, 6vw, 76px); margin:0 auto 25px; max-width:980px; }
.hero h1 em { font-style:normal; color:#5d6878; }
.hero-copy { max-width:710px; margin:0 auto; color:var(--muted); font-size:18px; line-height:1.7; }
.hero-actions { margin-top:35px; display:flex; justify-content:center; align-items:center; gap:24px; }
.button { display:inline-flex; align-items:center; gap:16px; padding:14px 20px; border-radius:10px; font-weight:700; font-size:14px; }
.button.primary { background:var(--ink); color:#fff; box-shadow:0 8px 25px rgba(11,18,32,.14); }
.button.light { background:#fff; color:var(--ink); }
.text-link { font-weight:700; font-size:14px; }
.hero-note { margin-top:25px; color:#7a8492; font-size:12px; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:7px; }
.demo-section { background:var(--soft); padding:95px 6vw 110px; }
.section-intro { max-width:1100px; margin:0 auto 42px; }
.section-intro h2, .framework-section h2 { font-size:clamp(36px, 4vw, 54px); margin:0; }
.section-intro h2 span { color:#7a8492; }
.demo-card { max-width:1100px; margin:auto; border:1px solid #dce2e9; border-radius:16px; background:#fff; box-shadow:0 25px 60px rgba(11,18,32,.09); overflow:hidden; }
.demo-topbar { height:50px; border-bottom:1px solid #e6eaf0; display:flex; align-items:center; padding:0 18px; gap:18px; font-size:11px; }
.window-dots { display:flex; gap:5px; }.window-dots i { width:7px;height:7px;border-radius:50%;background:#cbd2dc; }
.demo-title { flex:1; color:#667183; }.demo-status { color:#2f8462; font-weight:700; }
.demo-body { display:flex; min-height:370px; }
.demo-sidebar { width:190px; background:#fbfcfd; border-right:1px solid #e6eaf0; padding:22px 14px; }
.sidebar-label { color:#9aa4b2; font-size:9px; letter-spacing:.12em; font-weight:700; padding:0 9px 10px; }
.sidebar-label.second { margin-top:30px; }
.sidebar-item { padding:9px; border-radius:7px; color:#6d7787; font-size:11px; margin-bottom:3px; }
.sidebar-item.active { background:#e9f8f1; color:#174d3d; font-weight:700; }
.framework-chip { font-size:11px; padding:8px 9px; background:#fff; border:1px solid #dfe5ec; border-radius:7px; }
.mapping { flex:1; padding:24px; overflow:auto; }
.mapping-header { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:18px; }
.mapping-header span { color:#8b95a3; }.mapping-header button { border:1px solid #d9dfe7; background:#fff; padding:8px 11px; border-radius:7px; font-size:10px; font-weight:700; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:20px; }
.metrics div { background:#f7f9fb; border:1px solid #e8edf2; border-radius:9px; padding:12px; }
.metrics strong { display:block; font-family:"Space Grotesk"; font-size:21px; }.metrics span { color:#8791a0; font-size:9px; }
.table { border:1px solid #e2e7ed; border-radius:9px; overflow:hidden; min-width:650px; }
.tr { display:grid; grid-template-columns:1.5fr 1fr .8fr .55fr; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #edf0f4; font-size:10px; }
.tr:last-child { border-bottom:0; }.tr.th { background:#f8fafb; color:#8993a1; font-size:8px; font-weight:700; letter-spacing:.07em; }
.full,.partial,.gap { font-size:8px; width:max-content; padding:4px 7px; border-radius:99px; }
.full { background:#e6f7ef; color:#237354; }.partial { background:#fff4db; color:#8a6518; }.gap { background:#ffe8e8; color:#a33d3d; }
.steps { max-width:1100px; margin:auto; padding:100px 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.step span { color:#96a0ae; font-size:11px; font-weight:700; }.step h3 { font-family:"Space Grotesk"; font-size:22px; margin:14px 0 8px; }.step p { color:#697486; font-size:14px; line-height:1.7; margin:0; }
.framework-section { background:#f5f7fa; padding:100px 6vw; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.framework-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.framework-card { background:#fff; border:1px solid #dfe5ec; border-radius:12px; padding:22px; min-height:120px; display:flex; flex-direction:column; justify-content:space-between; }
.framework-card strong { font-family:"Space Grotesk"; font-size:20px; }.framework-card span { color:#778293; font-size:12px; }.framework-card.muted { opacity:.55; }
.cta { background:var(--ink); color:#fff; padding:105px 32px; text-align:center; }
.cta-inner { max-width:700px; margin:auto; }.cta .eyebrow { color:#7e8a9b; }.cta h2 { font-size:clamp(38px,5vw,58px); margin:0 0 20px; }.cta p { color:#aab4c2; font-size:16px; max-width:560px; margin:0 auto 30px; }
footer { padding:30px 6vw; display:flex; justify-content:space-between; align-items:center; color:#7b8593; font-size:11px; }
@media(max-width:800px) {
  nav a:not(.nav-cta) { display:none; }
  .nav { padding:0 22px; }.hero { padding:75px 22px 85px; }
  .hero h1 { font-size:45px; }.hero-copy { font-size:16px; }
  .hero-actions { flex-direction:column; gap:18px; }
  .demo-section { padding:70px 18px; }.demo-sidebar { display:none; }
  .steps { grid-template-columns:1fr 1fr; padding:70px 22px; gap:35px 25px; }
  .framework-section { grid-template-columns:1fr; padding:70px 22px; gap:35px; }
  .framework-grid { grid-template-columns:1fr 1fr; }
  footer { flex-direction:column; gap:14px; text-align:center; }
}
@media(max-width:480px) {
  .framework-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .metrics { grid-template-columns:1fr 1fr; }
}