/* Page-specific styles for DataKnobs System Control Plane */
:root {
  --scp-ink:#0f172a;
  --scp-muted:#64748b;
  --scp-border:#e2e8f0;
  --scp-soft:#f8fafc;
  --scp-indigo:#1b41f5;
  --scp-purple:#7c3aed;
  --scp-lilac:#f4ceff;
  --scp-green:#047857;
  --scp-amber:#b45309;
}

.scp-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.scp-hero-copy{padding:5.25rem 0}
.scp-kicker{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .8rem;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.scp-hero-title{margin:1.15rem 0 0;font-size:clamp(2.7rem,6vw,5.25rem);line-height:.98;letter-spacing:-.055em;font-weight:820;max-width:12ch}
.scp-hero-lead{margin:1.4rem 0 0;max-width:42rem;font-size:1.18rem;line-height:1.75;color:rgba(255,255,255,.82)}
.scp-hero-quote{margin-top:1.5rem;padding:1rem 1.1rem;border-left:3px solid var(--scp-lilac);background:rgba(255,255,255,.08);border-radius:0 1rem 1rem 0;font-weight:700;color:#fff}
.scp-hero-panel{padding:1.25rem;border-radius:1.7rem;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);box-shadow:0 28px 70px rgba(15,23,42,.28);backdrop-filter:blur(16px)}
.scp-stack-card{padding:1rem 1.05rem;border-radius:1.05rem;background:#fff;color:var(--scp-ink);box-shadow:0 10px 26px rgba(15,23,42,.13)}
.scp-stack-card+.scp-stack-card{margin-top:.72rem}
.scp-stack-card small{display:block;color:var(--scp-muted);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem}
.scp-stack-card strong{display:block;margin-top:.18rem;font-size:1.05rem}
.scp-stack-arrow{text-align:center;color:rgba(255,255,255,.75);font-size:1.25rem;line-height:1.2;padding:.35rem 0}
.scp-stack-card--dk{background:linear-gradient(135deg,#eef2ff,#f5f3ff 55%,#fdf4ff);border:1px solid #c7d2fe}
.scp-stack-card--measure{background:#0f172a;color:#fff}
.scp-stack-card--measure small{color:#94a3b8}

.scp-section-intro{max-width:52rem}
.scp-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}
.scp-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.scp-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.scp-card{background:#fff;border:1px solid var(--scp-border);border-radius:1.35rem;padding:1.35rem;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.scp-card h3{margin:0;font-size:1.08rem}
.scp-card p{margin:.65rem 0 0;color:var(--scp-muted);line-height:1.7}
.scp-card--tint{background:linear-gradient(180deg,#fff,#f8f7ff)}
.scp-card--dark{background:#0f172a;color:#fff;border-color:#1e293b}
.scp-card--dark p{color:#cbd5e1}
.scp-number{width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:.8rem;background:#eef2ff;color:var(--scp-indigo);font-weight:850;margin-bottom:.9rem}

.scp-compare{display:grid;grid-template-columns:1fr 1.25fr;gap:1.5rem;align-items:stretch}
.scp-compare-card{border-radius:1.5rem;padding:1.5rem;border:1px solid var(--scp-border);background:#fff}
.scp-compare-card--provider{background:#f8fafc}
.scp-compare-card--dk{background:linear-gradient(145deg,#eef2ff 0%,#faf5ff 58%,#fff 100%);border-color:#c7d2fe}
.scp-tag{display:inline-flex;padding:.36rem .65rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#e2e8f0;color:#334155}
.scp-tag--dk{background:#dfe5ff;color:#1737d7}
.scp-list{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.68rem}
.scp-list li{display:flex;gap:.65rem;color:#475569;line-height:1.55}
.scp-list li::before{content:"✓";font-weight:900;color:var(--scp-indigo)}
.scp-compare-card--provider .scp-list li::before{content:"•";color:#64748b}

.scp-architecture{margin-top:1.5rem;padding:1.3rem;border-radius:1.6rem;background:#0b1028;color:#fff;box-shadow:0 22px 48px rgba(15,23,42,.18)}
.scp-arch-row{display:grid;grid-template-columns:1fr auto 1.35fr auto 1fr;gap:.7rem;align-items:stretch}
.scp-arch-node{padding:1.15rem;border:1px solid rgba(255,255,255,.14);border-radius:1.05rem;background:rgba(255,255,255,.07)}
.scp-arch-node strong{display:block;font-size:1rem}
.scp-arch-node span{display:block;margin-top:.45rem;font-size:.82rem;line-height:1.55;color:#cbd5e1}
.scp-arch-node--core{background:linear-gradient(145deg,rgba(27,65,245,.28),rgba(124,58,237,.24));border-color:rgba(199,210,254,.34)}
.scp-arch-arrow{display:flex;align-items:center;justify-content:center;color:#a5b4fc;font-size:1.4rem}
.scp-arch-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:.75rem}

.scp-table-wrap{overflow:auto;border:1px solid var(--scp-border);border-radius:1.25rem;background:#fff}
.scp-table{width:100%;border-collapse:collapse;min-width:760px}
.scp-table th,.scp-table td{padding:.95rem 1rem;text-align:left;border-bottom:1px solid var(--scp-border);vertical-align:top}
.scp-table th{background:#f8fafc;color:#334155;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.scp-table td{color:#475569;line-height:1.55}
.scp-table tr:last-child td{border-bottom:none}
.scp-table strong{color:var(--scp-ink)}

.scp-knob-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.scp-knob{position:relative;padding:1.15rem;border-radius:1.15rem;background:#fff;border:1px solid var(--scp-border);transition:180ms ease}
.scp-knob:hover{transform:translateY(-2px);border-color:#c7d2fe;box-shadow:0 12px 28px rgba(27,65,245,.08)}
.scp-knob b{display:block;color:var(--scp-ink)}
.scp-knob span{display:block;margin-top:.4rem;color:var(--scp-muted);font-size:.9rem;line-height:1.55}
.scp-knob em{display:inline-block;margin-top:.65rem;font-style:normal;font-size:.72rem;font-weight:800;color:var(--scp-purple);background:#f5f3ff;padding:.3rem .52rem;border-radius:999px}

.scp-code-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.scp-code{margin:0;padding:1.2rem;border-radius:1.2rem;background:#0b1028;color:#dbeafe;border:1px solid #1e293b;overflow:auto;font:500 .82rem/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.scp-code-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.scp-code-title strong{font-size:.95rem}
.scp-code-title span{font-size:.72rem;color:#64748b}

.scp-flywheel{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.65rem;align-items:center}
.scp-flywheel-node{padding:.95rem .7rem;text-align:center;background:#fff;border:1px solid var(--scp-border);border-radius:1rem;font-size:.84rem;font-weight:800}
.scp-flywheel-arrow{text-align:center;color:var(--scp-indigo);font-size:1.05rem;font-weight:900}

.scp-callout{margin-top:1.3rem;padding:1.2rem 1.3rem;border-radius:1.2rem;background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #c7d2fe;color:#312e81;font-weight:750;line-height:1.65}
.scp-callout strong{color:#1e1b4b}

.scp-cta{padding:2rem;border-radius:1.8rem;background:linear-gradient(135deg,#111d6c 0%,#1b41f5 50%,#5b21b6 100%);color:#fff;display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:center}
.scp-cta h2{margin:0;font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.035em}
.scp-cta p{margin:.7rem 0 0;color:rgba(255,255,255,.8);line-height:1.7}

.scp-subnav{position:sticky;top:74px;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--scp-border)}
.scp-subnav-inner{display:flex;gap:.5rem;overflow:auto;padding:.6rem 0;scrollbar-width:none}
.scp-subnav-inner::-webkit-scrollbar{display:none}
.scp-subnav a{white-space:nowrap;text-decoration:none;padding:.5rem .75rem;border-radius:999px;color:#475569;font-size:.82rem;font-weight:700}
.scp-subnav a:hover{background:#eef2ff;color:#1737d7}

@media(max-width:980px){
  .scp-hero-grid,.scp-compare,.scp-grid-3,.scp-grid-4,.scp-code-grid{grid-template-columns:1fr}
  .scp-hero-copy{padding:4rem 0 1rem}.scp-hero-panel{margin-bottom:4rem}
  .scp-arch-row{grid-template-columns:1fr}.scp-arch-arrow{transform:rotate(90deg);padding:.15rem}.scp-arch-bottom{grid-template-columns:1fr}
  .scp-knob-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scp-flywheel{grid-template-columns:1fr}.scp-flywheel-arrow{transform:rotate(90deg)}
  .scp-cta{grid-template-columns:1fr}
}
@media(max-width:680px){
  .scp-grid-2,.scp-knob-grid{grid-template-columns:1fr}
  .scp-hero-title{font-size:clamp(2.4rem,15vw,4rem)}
}