/* ═══════════════════════════════════════════════════════════
   MODLEX — Unkey-exact dark theme
   ═══════════════════════════════════════════════════════════ */

/* ── Geist fonts (same as Unkey) ── */
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', 'Fira Code', monospace;
  --max-w: 1200px;
}

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:#000; color:#fff; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.hidden { display:none !important; }

.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }

/* ── Noise overlay (Unkey-exact: feTurbulence, fixed, 3.5% opacity, soft-light) ── */
.noise-overlay {
  pointer-events:none; position:fixed; inset:0;
  width:100%; height:100%; z-index:9999;
  opacity:0.035; mix-blend-mode:soft-light;
}

/* ══════════════ ANIMATIONS ══════════════ */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse-ring {
  0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.3); }
  50%     { box-shadow:0 0 0 8px rgba(255,255,255,0); }
}
@keyframes btn-shine {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
@keyframes logo-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
/* Circuit pulses */
@keyframes circuit-flow {
  0%   { stroke-dashoffset:1600; }
  100% { stroke-dashoffset:0; }
}
@keyframes circuit-flow-rev {
  0%   { stroke-dashoffset:0; }
  100% { stroke-dashoffset:1600; }
}
@keyframes circuit-draw {
  from { stroke-dashoffset:2000; }
  to   { stroke-dashoffset:0; }
}
@keyframes node-pulse {
  0%,100% { opacity:.3; transform:scale(1); }
  50%     { opacity:1; transform:scale(1.6); }
}
@keyframes glow-breathe {
  0%,100% { opacity:.5; }
  50%     { opacity:1; }
}
/* Glow spot breathe */
@keyframes spot-breathe {
  0%,100% { opacity:.6; }
  50%     { opacity:1; }
}
/* Timeline nodes */
@keyframes tl-appear {
  from { opacity:0; transform:scale(0); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes tl-travel {
  0%   { cy:40; opacity:0; }
  10%  { opacity:.8; }
  90%  { opacity:.8; }
  100% { cy:340; opacity:0; }
}
/* Agent connection lines */
@keyframes conn-dash {
  to { stroke-dashoffset:0; }
}
/* Kata container highlight */
@keyframes kata-highlight {
  0%,100% { stroke:rgba(255,255,255,.15); }
  50%     { stroke:rgba(255,255,255,.35); }
}
/* MTTR bars */
@keyframes bar-grow-old {
  from { width:0; } to { width:92%; }
}
@keyframes bar-grow-new {
  from { width:0; } to { width:4%; }
}

.fade-in-up { opacity:0; animation:fadeInUp .8s ease-out forwards; }

/* ══════════════ NAV (Unkey-exact) ══════════════ */
.nav-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(0,0,0,.6); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:.75px solid rgba(255,255,255,.1);
}
.nav-container { height:64px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:-.02em; }
.logo-icon { width:28px; height:28px; }
.nav-links { display:flex; gap:32px; }
.nav-links a { font-size:14px; color:rgba(255,255,255,.6); font-weight:500; transition:color .2s; }
.nav-links a:hover { color:#fff; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-link-btn { font-size:14px; color:rgba(255,255,255,.7); padding:8px 16px; font-weight:500; transition:color .2s; }
.nav-link-btn:hover { color:#fff; }
.mobile-toggle { display:none; background:none; border:none; color:#fff; cursor:pointer; }
.mobile-menu { padding:16px 24px 24px; display:flex; flex-direction:column; gap:16px; border-bottom:.75px solid rgba(255,255,255,.1); }
.mobile-menu a { font-size:15px; color:rgba(255,255,255,.7); }
.mobile-menu hr { border:none; border-top:.75px solid rgba(255,255,255,.1); }

/* ── Glow button (Unkey-exact: blur-2xl behind, gradient, shine) ── */
.btn-glow-wrap { position:relative; display:inline-flex; }
.btn-glow-blur {
  position:absolute; inset:-2px; background:#fff; border-radius:10px;
  filter:blur(24px); opacity:0; transition:opacity .5s;
}
.btn-glow-wrap:hover .btn-glow-blur { opacity:.25; }
.btn-glow {
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; font-size:14px; font-weight:600; color:#000;
  background:linear-gradient(135deg, rgba(255,255,255,.8), #fff);
  border-radius:8px; transition:filter .2s; overflow:hidden;
}
.btn-glow:hover { filter:brightness(.92); }
.btn-glow-lg { padding:14px 32px; font-size:15px; height:48px; }
.btn-shine {
  position:absolute; inset:0; opacity:0;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
  transform:translateX(-100%);
}
.btn-glow-wrap:hover .btn-shine { opacity:1; animation:btn-shine .6s ease-out; }

.btn-ghost { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; font-size:14px; font-weight:500; color:rgba(255,255,255,.7); transition:color .2s; }
.btn-ghost:hover { color:#fff; }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px; padding:14px 32px;
  font-size:15px; font-weight:600; color:rgba(255,255,255,.8);
  border:.75px solid rgba(255,255,255,.2); border-radius:8px;
  transition:border-color .2s, color .2s, background .2s;
}
.btn-outline:hover { border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.05); }

/* ══════════════ HERO (Unkey-exact layout) ══════════════ */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:120px 24px 80px; overflow:hidden;
}

/* Mainboard SVG — scaled 2x, centered, masked radially (Unkey-exact) */
.hero-mainboard {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; overflow:hidden;
}
.mainboard-svg {
  width:200%; max-width:3200px; height:auto; opacity:.45;
  mask-image:radial-gradient(ellipse 55% 55% at 50% 50%, black 10%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 55% 55% at 50% 50%, black 10%, transparent 80%);
}
.glow-spot { animation:spot-breathe 6s ease-in-out infinite; }
.glow-spot:nth-child(2) { animation-delay:1.5s; }
.glow-spot:nth-child(3) { animation-delay:3s; }
.glow-spot:nth-child(4) { animation-delay:4.5s; }
/* Circuit trace draw-in */
.mainboard-svg g:first-of-type path {
  stroke-dasharray:2000; stroke-dashoffset:2000;
  animation:circuit-draw 3s ease-out forwards;
}
.mainboard-svg g:first-of-type path:nth-child(1) { animation-delay:.0s; }
.mainboard-svg g:first-of-type path:nth-child(2) { animation-delay:.15s; }
.mainboard-svg g:first-of-type path:nth-child(3) { animation-delay:.3s; }
.mainboard-svg g:first-of-type path:nth-child(4) { animation-delay:.45s; }
.mainboard-svg g:first-of-type path:nth-child(5) { animation-delay:.6s; }
.mainboard-svg g:first-of-type path:nth-child(6) { animation-delay:.1s; }
.mainboard-svg g:first-of-type path:nth-child(7) { animation-delay:.25s; }
.mainboard-svg g:first-of-type path:nth-child(8) { animation-delay:.4s; }
.mainboard-svg g:first-of-type path:nth-child(9) { animation-delay:.55s; }
.mainboard-svg g:first-of-type path:nth-child(10) { animation-delay:.2s; }
.mainboard-svg g:first-of-type path:nth-child(11) { animation-delay:.35s; }
.mainboard-svg g:first-of-type path:nth-child(12) { animation-delay:.5s; }
.mainboard-svg g:first-of-type path:nth-child(n+13) { animation-delay:.65s; }

/* Pulse lines */
.pulse-line {
  stroke-dasharray:100 1900;
  animation:circuit-flow 5s linear infinite;
}
.pulse-line.pl1 { animation-delay:0s; }
.pulse-line.pl2 { animation-delay:1.2s; animation-name:circuit-flow-rev; }
.pulse-line.pl3 { animation-delay:2.5s; }
.pulse-line.pl4 { animation-delay:3.8s; animation-name:circuit-flow-rev; }

/* Circuit nodes */
.node { transform-origin:center; animation:node-pulse 4s ease-in-out infinite; }
.node.nd1 { animation-delay:0s; }
.node.nd2 { animation-delay:.5s; }
.node.nd3 { animation-delay:1s; }
.node.nd4 { animation-delay:1.5s; }
.node.nd5 { animation-delay:2s; }
.node.nd6 { animation-delay:2.5s; }
.node.nd7 { animation-delay:3s; }
.node.nd8 { animation-delay:3.5s; }
.node.nd9 { animation-delay:.8s; }
.node.nd10 { animation-delay:1.8s; }

/* Hero center glow */
.hero-glow-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:900px; height:600px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, transparent 70%);
  filter:blur(40px);
}

.hero-inner { position:relative; z-index:2; }
.hero-content { text-align:center; max-width:800px; margin:0 auto; }
.hero-title {
  font-size:clamp(36px, 6vw, 64px); font-weight:800; letter-spacing:-.03em; line-height:1.05;
  margin-bottom:24px;
  background:linear-gradient(180deg, #fff 40%, rgba(255,255,255,.3) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-subtitle {
  font-size:clamp(16px, 2vw, 20px); color:rgba(255,255,255,.5);
  max-width:600px; margin:0 auto 40px; line-height:1.6;
}
.hero-buttons { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ══════════════ LOGO CLOUD ══════════════ */
.logo-cloud {
  padding:48px 24px; text-align:center;
  border-top:.75px solid rgba(255,255,255,.05);
  border-bottom:.75px solid rgba(255,255,255,.05);
}
.logo-label {
  display:block; font-size:13px; font-family:var(--mono);
  color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.08em; margin-bottom:24px;
}
.logo-marquee {
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}
.logo-track { display:flex; gap:64px; animation:logo-scroll 20s linear infinite; width:max-content; }
.logo-item {
  flex-shrink:0; font-size:16px; font-weight:600; color:rgba(255,255,255,.35);
  white-space:nowrap; letter-spacing:.02em;
}

/* ══════════════ SECTIONS ══════════════ */
.section { padding:80px 0; position:relative; }
.section-lg { padding:100px 0 120px; }
.section-head { max-width:700px; margin-bottom:56px; }
.section-head-center { margin-left:auto; margin-right:auto; text-align:center; }
.section-title {
  font-size:clamp(28px, 4vw, 48px); font-weight:800; letter-spacing:-.03em; line-height:1.1;
  margin-bottom:20px;
  background:linear-gradient(135deg, #fff 30%, rgba(255,255,255,.3) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.section-desc { font-size:16px; color:rgba(255,255,255,.5); line-height:1.7; }
.section-btns { display:flex; align-items:center; gap:16px; margin-top:28px; }

/* ══════════════ CODE SECTION ══════════════ */
.code-card { max-width:800px; margin:0 auto; }
.code-tabs { display:flex; gap:4px; position:relative; z-index:2; }
.code-tab {
  padding:10px 20px; font-size:13px; font-family:var(--mono); font-weight:500;
  color:rgba(255,255,255,.4); background:transparent;
  border:.75px solid transparent; border-bottom:none;
  border-radius:8px 8px 0 0; cursor:pointer; transition:color .2s, background .2s, border-color .2s;
}
.code-tab:hover { color:rgba(255,255,255,.6); }
.code-tab.active { color:rgba(255,255,255,.8); background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1); }
.code-window {
  background:rgba(255,255,255,.02); border:.75px solid rgba(255,255,255,.1);
  border-radius:0 16px 16px 16px; overflow:hidden;
}
.code-header {
  display:flex; align-items:center; gap:8px;
  padding:14px 20px; border-bottom:.75px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.02);
}
.dot { width:10px; height:10px; border-radius:50%; }
.dot.r { background:#ff5f57; }
.dot.y { background:#febc2e; }
.dot.g { background:#28c840; }
.code-file { font-size:12px; font-family:var(--mono); color:rgba(255,255,255,.3); margin-left:8px; }
.code-body {
  padding:24px; font-family:var(--mono); font-size:13px; line-height:1.8;
  overflow-x:auto; color:rgba(255,255,255,.6);
}
.c-cmt { color:rgba(255,255,255,.3); }
.c-kw  { color:#c4b5fd; }
.c-str { color:#86efac; }
.c-num { color:#fbbf24; }
.c-fn  { color:#93c5fd; font-weight:600; }
.c-err { color:#fca5a5; font-weight:600; }
.c-ok  { color:#86efac; font-weight:600; }
.c-dim { color:rgba(255,255,255,.2); }

/* ══════════════ BENTO CARDS (Unkey-exact) ══════════════ */
.bento-row { display:grid; gap:24px; margin-bottom:24px; }
.bento-row-12 { grid-template-columns:1fr 2fr; }
.bento-row-11 { grid-template-columns:1fr 1fr; }

.bento-card {
  position:relative; overflow:hidden;
  border:.75px solid rgba(255,255,255,.1); border-radius:32px;
  background:linear-gradient(135deg, rgba(255,255,255,.03) 0%, rgba(0,0,0,.5) 100%);
  transition:border-color .3s;
  min-height:420px; display:flex; flex-direction:column;
}
.bento-card:hover { border-color:rgba(255,255,255,.2); }
.bento-tall { min-height:520px; }

.bento-visual {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:40px; position:relative; overflow:hidden;
}
.bento-visual-center { align-items:center; justify-content:center; }

.bento-svg { width:100%; height:auto; max-height:100%; }

/* Gradient overlay from bottom (Unkey-exact card style) */
.bento-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:32px 40px;
  background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 50%, transparent 100%);
}
.bento-overlay-bottom {
  position:relative; padding:28px 36px;
  border-top:.75px solid rgba(255,255,255,.05);
  background:none;
}
.bento-overlay h3 { font-size:18px; font-weight:700; margin-bottom:6px; letter-spacing:-.01em; }
.bento-overlay p { font-size:13px; color:rgba(255,255,255,.5); line-height:1.5; }
.bento-icon { color:rgba(255,255,255,.4); margin-bottom:12px; }

/* ── Dashboard mock ── */
.dash-mock {
  width:100%; height:100%; min-height:340px;
  display:flex; border-radius:12px; overflow:hidden;
  border:.75px solid rgba(255,255,255,.08); background:rgba(0,0,0,.4);
}
.dash-sidebar {
  width:48px; background:rgba(255,255,255,.03);
  border-right:.75px solid rgba(255,255,255,.06);
  padding:12px 8px; display:flex; flex-direction:column; gap:10px; align-items:center;
}
.dash-logo-sm { width:24px; height:24px; border-radius:6px; background:rgba(255,255,255,.15); margin-bottom:8px; }
.dash-nav-item { width:28px; height:28px; border-radius:6px; background:rgba(255,255,255,.04); }
.dash-active { background:rgba(255,255,255,.12); }
.dash-main { flex:1; display:flex; flex-direction:column; }
.dash-topbar {
  padding:10px 16px; border-bottom:.75px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
}
.dash-title-sm { font-size:12px; font-weight:600; color:rgba(255,255,255,.6); }
.dash-tabs { display:flex; gap:12px; }
.dash-tab, .dash-tab-active { font-size:10px; color:rgba(255,255,255,.25); font-weight:500; }
.dash-tab-active { color:rgba(255,255,255,.6); }
.dash-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.04); }
.dash-stat-card { padding:12px 14px; background:#000; display:flex; flex-direction:column; gap:2px; }
.dash-stat-label { font-size:9px; color:rgba(255,255,255,.3); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.dash-stat-val { font-size:18px; font-weight:700; letter-spacing:-.02em; }
.dash-stat-delta { font-size:9px; font-family:var(--mono); }
.dash-stat-delta.down { color:#86efac; }
.dash-stat-delta.up { color:#86efac; }
.dash-chart-area { flex:1; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; }
.dash-chart-bars { display:flex; align-items:flex-end; gap:6px; height:80px; }
.bar {
  flex:1; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  transition:background .3s;
}
.bar:hover { background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.1)); }
.dash-chart-label { font-size:10px; font-family:var(--mono); color:rgba(255,255,255,.2); margin-top:10px; }

/* ── Timeline animation ── */
.tl-node { transform-origin:center; }
.tl1 { animation:tl-appear .5s ease-out .5s both; }
.tl2 { animation:tl-appear .5s ease-out 1s both; }
.tl3 { animation:tl-appear .5s ease-out 1.5s both; }
.tl4 { animation:tl-appear .5s ease-out 2s both; }
.tl5 { animation:tl-appear .5s ease-out 2.5s both; }
.tl-pulse { animation:tl-travel 3s ease-in-out infinite 3s; }

/* ── Agent constellation ── */
.agent-constellation { width:100%; }
.agent-node { transform-origin:center; animation:node-pulse 3s ease-in-out infinite; }
.agent-node.an1 { animation-delay:0s; }
.agent-node.an2 { animation-delay:.6s; }
.agent-node.an3 { animation-delay:1.2s; }
.agent-node.an4 { animation-delay:1.8s; }
.agent-node.an5 { animation-delay:2.4s; }
.conn-line { stroke-dasharray:8; stroke-dashoffset:16; animation:conn-dash 1.5s ease-out forwards; }
.conn-line.cl1 { animation-delay:.5s; }
.conn-line.cl2 { animation-delay:.8s; }
.conn-line.cl3 { animation-delay:1.1s; }
.conn-line.cl4 { animation-delay:1.4s; }
.conn-line.cl5 { animation-delay:1.7s; }

/* ── MTTR ── */
.mttr-visual { display:flex; align-items:center; gap:28px; width:100%; max-width:380px; }
.mttr-block { flex:1; text-align:center; }
.mttr-label { font-size:11px; font-family:var(--mono); color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.mttr-val { font-size:36px; font-weight:800; letter-spacing:-.02em; margin-bottom:12px; }
.mttr-old { color:rgba(255,255,255,.25); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.15); }
.mttr-new { color:#86efac; }
.mttr-arrow { font-size:24px; color:rgba(255,255,255,.2); }
.mttr-bar-track { height:6px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; }
.mttr-bar { height:100%; border-radius:3px; }
.mttr-bar-old { background:rgba(255,255,255,.15); animation:bar-grow-old 1.5s ease-out forwards; width:0; }
.mttr-bar-new { background:#86efac; animation:bar-grow-new 1.5s ease-out .8s forwards; width:0; }

/* ══════════════ SECURITY BENTO [2fr 3fr] (Unkey-exact) ══════════════ */
.security-bento { display:grid; grid-template-columns:2fr 3fr; gap:24px; }
.bento-security-left { min-height:520px; }
.bento-security-right { display:flex; flex-direction:column; gap:24px; }
.bento-row-inner { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

/* Audit table */
.audit-table { width:100%; font-family:var(--mono); font-size:11px; }
.audit-header {
  display:grid; grid-template-columns:2fr 1.2fr 1fr .8fr; gap:8px;
  padding:10px 16px; color:rgba(255,255,255,.3); font-weight:600;
  border-bottom:.75px solid rgba(255,255,255,.06); text-transform:uppercase; letter-spacing:.04em;
}
.audit-row {
  display:grid; grid-template-columns:2fr 1.2fr 1fr .8fr; gap:8px;
  padding:8px 16px; color:rgba(255,255,255,.45);
  border-bottom:.75px solid rgba(255,255,255,.03); transition:background .2s;
}
.audit-row:hover { background:rgba(255,255,255,.02); }
.audit-ok { color:#86efac; }
.audit-fade { opacity:.4; }

/* Kata container animation */
.kata-box { animation:kata-highlight 4s ease-in-out infinite; }
.kata-box.kb1 { animation-delay:0s; }
.kata-box.kb2 { animation-delay:2s; }

/* RBAC */
.rbac-visual { display:flex; flex-direction:column; gap:10px; width:100%; max-width:200px; }
.rbac-role { font-size:12px; color:rgba(255,255,255,.4); display:flex; align-items:center; gap:10px; }
.rbac-badge {
  font-size:10px; font-family:var(--mono); font-weight:600; padding:4px 10px;
  border-radius:4px; background:rgba(255,255,255,.06); border:.75px solid rgba(255,255,255,.1);
}
.rbac-badge.owner { color:#c4b5fd; border-color:rgba(196,181,253,.3); }
.rbac-badge.admin { color:#93c5fd; border-color:rgba(147,197,253,.3); }
.rbac-badge.member { color:#86efac; border-color:rgba(134,239,172,.3); }
.rbac-badge.viewer { color:rgba(255,255,255,.5); }

/* Provider chips */
.provider-visual { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.prov-chip {
  font-size:11px; font-family:var(--mono); font-weight:500; padding:6px 14px;
  border-radius:6px; background:rgba(255,255,255,.04); border:.75px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5); transition:border-color .3s, color .3s;
}
.prov-chip:hover { border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.8); }

/* ══════════════ INTEGRATIONS ══════════════ */
.integrations-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.int-group {
  padding:28px; border:.75px solid rgba(255,255,255,.1); border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.02), transparent);
}
.int-label {
  font-size:12px; font-family:var(--mono); color:rgba(255,255,255,.35);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px;
}
.int-chips { display:flex; flex-wrap:wrap; gap:8px; }
.int-chip {
  padding:8px 16px; font-size:13px; font-weight:500; color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.04); border:.75px solid rgba(255,255,255,.08);
  border-radius:8px; transition:border-color .3s, color .3s, background .3s;
}
.int-chip:hover { border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.8); background:rgba(255,255,255,.08); }

/* ══════════════ CAPABILITIES 3-COL GRID (Unkey-exact) ══════════════ */
.cap-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:48px 40px; }
.cap-card { text-align:left; }
.cap-icon { color:rgba(255,255,255,.4); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.cap-card h4 { font-size:15px; font-weight:600; margin-bottom:8px; }
.cap-card p { font-size:13px; color:rgba(255,255,255,.4); line-height:1.6; }

/* ══════════════ CTA ══════════════ */
.cta-section { text-align:center; padding:120px 0; }
.cta-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:700px; height:400px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.05), transparent 70%);
  filter:blur(60px);
}
.cta-inner { position:relative; z-index:1; }
.cta-title {
  font-size:clamp(32px, 5vw, 56px); font-weight:800; letter-spacing:-.03em; line-height:1.1;
  margin-bottom:16px;
  background:linear-gradient(180deg, #fff 40%, rgba(255,255,255,.4) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cta-sub { font-size:18px; color:rgba(255,255,255,.5); margin-bottom:8px; }
.cta-offer { font-size:14px; color:rgba(255,255,255,.3); font-family:var(--mono); margin-bottom:40px; }
.cta-btns { display:flex; align-items:center; justify-content:center; gap:16px; }

/* ══════════════ FOOTER ══════════════ */
.footer { border-top:.75px solid rgba(255,255,255,.1); padding:64px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand { display:flex; flex-direction:column; gap:16px; }
.footer-desc { font-size:14px; color:rgba(255,255,255,.3); max-width:240px; line-height:1.6; }
.footer-col { display:flex; flex-direction:column; gap:12px; }
.footer-col h5 { font-size:13px; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:4px; }
.footer-col a { font-size:13px; color:rgba(255,255,255,.4); transition:color .2s; }
.footer-col a:hover { color:rgba(255,255,255,.7); }
.footer-bottom { border-top:.75px solid rgba(255,255,255,.05); padding-top:24px; font-size:13px; color:rgba(255,255,255,.2); }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1024px) {
  .cap-grid { grid-template-columns:repeat(2,1fr); gap:36px 32px; }
  .security-bento { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr 1fr; gap:32px; }
  .footer-brand { grid-column:span 3; }
}
@media (max-width:768px) {
  .nav-links, .nav-actions { display:none; }
  .mobile-toggle { display:block; }
  .hero { min-height:auto; padding:140px 24px 80px; }
  .bento-row-12, .bento-row-11 { grid-template-columns:1fr; }
  .bento-row-inner { grid-template-columns:1fr; }
  .integrations-grid { grid-template-columns:1fr; }
  .cap-grid { grid-template-columns:1fr; }
  .dash-stats-row { grid-template-columns:repeat(2,1fr); }
  .mttr-visual { flex-direction:column; gap:16px; }
  .mttr-arrow { transform:rotate(90deg); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand { grid-column:span 2; }
  .section-btns, .cta-btns, .hero-buttons { flex-direction:column; align-items:center; }
  .bento-card { min-height:360px; }
}
@media (max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:span 1; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.3); }
::selection { background:rgba(255,255,255,.2); color:#fff; }