/* ========================================================================
   CYBER BOOST — Shared vendor page stylesheet
   Reuses the design vocabulary of index.html / solutions.html
   ====================================================================== */

html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', sans-serif;
  color:#0F172A;
  background:#FBFCFE;
  -webkit-font-smoothing:antialiased;
}
.display { font-family:'Space Grotesk', sans-serif; letter-spacing:-0.035em; }

/* ─── Surface tints / gradients ───────────────────────────────── */
.aurora {
  background:
    radial-gradient(40% 35% at 78% 18%, rgba(14,165,233,.18), transparent 70%),
    radial-gradient(36% 32% at 18% 30%, rgba(34,197,94,.13), transparent 70%),
    radial-gradient(50% 50% at 50% 100%, rgba(99,102,241,.10), transparent 70%),
    linear-gradient(180deg, #FBFCFE 0%, #F4F7FB 100%);
}
.surface-cool {
  background:
    radial-gradient(60% 40% at 10% 0%, rgba(14,165,233,.06), transparent 70%),
    linear-gradient(180deg, #F7FAFD 0%, #F2F6FB 100%);
}
.surface-warm {
  background:
    radial-gradient(50% 40% at 90% 100%, rgba(34,197,94,.07), transparent 70%),
    linear-gradient(180deg, #FBFCFE 0%, #F6F8FB 100%);
}
.surface-tint {
  background:
    radial-gradient(40% 30% at 100% 0%, rgba(14,165,233,.05), transparent 70%),
    radial-gradient(40% 30% at 0% 100%, rgba(34,197,94,.05), transparent 70%),
    #F8FAFC;
}

/* ─── Hero / decorative patterns ──────────────────────────────── */
.circuit {
  background-image:
    linear-gradient(to right, rgba(15,23,42,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
}
.dots {
  background-image: radial-gradient(rgba(15,23,42,.13) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.dots-mask { mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%); }
.hatch {
  background-image: repeating-linear-gradient(135deg, rgba(15,23,42,.05) 0 1px, transparent 1px 14px);
}
.grain::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.045; mix-blend-mode:multiply;
}

/* ─── Reveal animation ────────────────────────────────────────── */
.reveal { opacity:0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform: translateY(0); }
.reveal[data-delay="1"]{ transition-delay:.08s }
.reveal[data-delay="2"]{ transition-delay:.16s }
.reveal[data-delay="3"]{ transition-delay:.24s }
.reveal[data-delay="4"]{ transition-delay:.32s }
.reveal[data-delay="5"]{ transition-delay:.40s }
.reveal[data-delay="6"]{ transition-delay:.48s }

/* Reduced motion: never hide content, stop continuous motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee-track { animation: none !important; }
  .animate-pulse { animation: none !important; }
}

/* ─── Nav ─────────────────────────────────────────────────────── */
.glass { backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); background: rgba(255,255,255,.78); }

/* ─── Chips / tags ────────────────────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  border:1px solid #E2E8F0; background:#fff;
  font-size:13px; font-weight:500; color:#334155;
  transition: color .15s, border-color .15s, background .15s; user-select:none; white-space:nowrap;
}
.chip:hover { border-color:#CBD5E1; color:#0F172A; }
.chip .dot { width:6px; height:6px; border-radius:999px; background:#CBD5E1; }
.tag {
  display:inline-flex; align-items:center;
  padding:4px 9px; border-radius:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  background:#F1F5F9; color:#475569; border:1px solid #E2E8F0;
}
.tag-dark { background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.16); }

/* Vendor accent strip used at top of section cards */
.accent-strip {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color: var(--accent, #0EA5E9);
}
.accent-strip::before {
  content:''; width:24px; height:2px; background: var(--accent, #0EA5E9); border-radius:2px;
}

/* ─── Feature card ────────────────────────────────────────────── */
.fcard {
  position:relative; background:#fff;
  border:1px solid #E2E8F0; border-radius:20px;
  padding:28px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex; flex-direction:column; height:100%;
}
.fcard:hover {
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 56px -20px rgba(15,23,42,.18);
  transform: translateY(-2px);
}
.fcard .ficon {
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; flex:none;
  background: var(--icon-bg, #F1F5F9);
  color: var(--icon-fg, #0F172A);
  margin-bottom:18px;
}

/* ─── Module pill (for module grids) ──────────────────────────── */
.modpill {
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:18px 20px; border-radius:16px;
  background:#fff; border:1px solid #E2E8F0;
  transition: transform .2s, border-color .2s;
}
.modpill:hover { border-color: var(--accent, #0EA5E9); transform: translateY(-2px); }
.modpill .modcode {
  display:inline-block; font-family:'Space Grotesk', monospace; font-size:11px; font-weight:700;
  letter-spacing:.06em; color: var(--accent, #0EA5E9);
}
.modpill .modname { font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16px; letter-spacing:-.02em; color:#0F172A; }
.modpill .moddesc { font-size:13px; color:#64748B; line-height:1.5; }

/* ─── Stat block ──────────────────────────────────────────────── */
.statblock { padding:24px; border-radius:18px; background:#fff; border:1px solid #E2E8F0; }
.statblock .num { font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:42px; line-height:1; letter-spacing:-.04em; color:#0F172A; }
.statblock .num.accent { color: var(--accent, #0EA5E9); }
.statblock .lbl { font-size:13.5px; color:#64748B; margin-top:8px; line-height:1.5; }

/* ─── Step (numbered) ─────────────────────────────────────────── */
.step {
  position:relative; padding:24px; border-radius:18px;
  background:#fff; border:1px solid #E2E8F0;
}
.step .stepnum {
  font-family:'Space Grotesk', sans-serif;
  font-size:42px; font-weight:600; line-height:1; letter-spacing:-.04em;
  color: var(--accent, #0EA5E9);
  opacity:.25;
}
.step .stepttl { font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:18px; letter-spacing:-.02em; margin-top:14px; }
.step .stepdesc { font-size:14px; color:#475569; line-height:1.6; margin-top:8px; }
@media (min-width: 768px){
  .step-connector::after {
    content:''; position:absolute; top:42px; left:calc(100% - 8px); width:calc(100% + 16px);
    height:1px; background: linear-gradient(90deg, var(--accent,#CBD5E1), transparent);
  }
  .step-last::after { display:none; }
}

/* ─── Comparison table ────────────────────────────────────────── */
.cmp { width:100%; border-collapse:separate; border-spacing:0; }
.cmp th, .cmp td { padding:16px 18px; border-bottom:1px solid #E2E8F0; text-align:left; font-size:14px; vertical-align:top; }
.cmp thead th {
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14px; letter-spacing:-.01em;
  background:#F8FAFC; color:#0F172A;
}
.cmp thead th.highlight { background: var(--accent, #0EA5E9); color:#fff; }
.cmp tbody tr:hover { background:#F8FAFC; }
.cmp td.muted { color:#94A3B8; }
.cmp .yes { color: var(--accent, #16A34A); font-weight:700; }
.cmp .no  { color: #CBD5E1; }
.cmp .pkg { font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* ─── FAQ ─────────────────────────────────────────────────────── */
details.faq { border:1px solid #E2E8F0; border-radius:18px; background:#fff; transition: border-color .2s, box-shadow .2s; overflow:hidden; }
details.faq[open] { border-color: rgba(15,23,42,.15); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.12); }
details.faq > summary { list-style:none; cursor:pointer; padding:22px 24px; display:flex; gap:16px; align-items:flex-start; }
details.faq > summary::-webkit-details-marker { display:none; }
details.faq summary .ico { width:32px; height:32px; flex:none; border-radius:10px; background:#F1F5F9; display:grid; place-items:center; transition: background .2s; }
details.faq[open] summary .ico { background: var(--accent, #0EA5E9); }
details.faq summary .ico svg { transition: transform .2s; color:#0F172A; }
details.faq[open] summary .ico svg { transform: rotate(45deg); color:#fff; }
details.faq .ans { padding:0 24px 24px 72px; color:#475569; line-height:1.65; font-size:15px; }

/* ─── Inline lead form ────────────────────────────────────────── */
.field { position:relative; }
.field input, .field textarea, .field select {
  width:100%; background:#fff; border:1px solid #E2E8F0; border-radius:14px;
  padding:22px 16px 10px; font-size:15px; color:#0F172A;
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance:none; font-family:inherit;
}
.field textarea { min-height:110px; resize:vertical; line-height:1.5; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color: var(--accent, #0EA5E9);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent,#0EA5E9) 18%, transparent);
}
.field label.flt {
  position:absolute; left:16px; top:14px; font-size:13px; color:#64748B;
  pointer-events:none; transition: top .15s, font-size .15s, color .15s;
}
.field input:focus + label.flt,
.field input:not(:placeholder-shown) + label.flt,
.field textarea:focus + label.flt,
.field textarea:not(:placeholder-shown) + label.flt {
  top:6px; font-size:11px; color: var(--accent, #0EA5E9); font-weight:600; letter-spacing:.02em;
}

/* ─── Brand-colored mark / wordmark plate ─────────────────────── */
.brand-plate {
  position:relative; display:inline-flex; align-items:center; gap:14px;
  padding:10px 18px 10px 12px; border-radius:14px;
  background: var(--brand-bg, #0F172A);
  color: var(--brand-fg, #fff);
}
.brand-plate .brand-glyph {
  width:42px; height:42px; border-radius:10px;
  background: rgba(255,255,255,.12);
  display:grid; place-items:center;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px; letter-spacing:-.04em;
}
.brand-plate .brand-name {
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:18px; letter-spacing:-.02em;
}

/* ─── Logo placeholder block (banner) ─────────────────────────── */
.logo-banner {
  position:relative; overflow:hidden; border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  background: var(--banner-bg, linear-gradient(135deg, #0F172A, #1E293B));
  color: var(--banner-fg, #fff);
}
.logo-banner .corner-tag {
  position:absolute; top:18px; left:18px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.78);
}
.logo-banner .corner-tag-end {
  position:absolute; top:18px; right:18px;
  font-size:11px; font-weight:600; letter-spacing:.06em;
  padding:5px 10px; border-radius:999px;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.5);
  border:1px dashed rgba(255,255,255,.18);
}

/* Selection */
::selection { background:#0EA5E9; color:#fff; }

/* Utility: pretty bullets */
ul.bullets { list-style:none; padding:0; margin:0; }
ul.bullets li {
  position:relative; padding-left:26px;
  font-size:15px; line-height:1.6; color:#1E293B;
}
ul.bullets li + li { margin-top:10px; }
ul.bullets li::before {
  content:''; position:absolute; left:0; top:9px;
  width:14px; height:14px; border-radius:4px;
  background: color-mix(in oklab, var(--accent, #0EA5E9) 18%, transparent);
  background-image: linear-gradient(135deg, transparent 0 36%, var(--accent, #0EA5E9) 36% 64%, transparent 64% 100%);
  background-position: center; background-size: 8px 8px; background-repeat:no-repeat;
}

/* MITRE-style heatmap cell */
.matrix-grid { display:grid; gap:4px; grid-template-columns: repeat(14, minmax(0, 1fr)); }
.matrix-cell {
  aspect-ratio: 1 / 1; border-radius:4px;
  background: rgba(14,165,233,.08);
  position:relative;
}
.matrix-cell[data-cov="3"] { background: var(--accent, #0EA5E9); }
.matrix-cell[data-cov="2"] { background: color-mix(in oklab, var(--accent,#0EA5E9) 60%, white); }
.matrix-cell[data-cov="1"] { background: color-mix(in oklab, var(--accent,#0EA5E9) 30%, white); }

/* Marquee */
.marquee-track { animation: marq 40s linear infinite; }
@keyframes marq { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* Contrast: clamp faint white text to WCAG AA on dark hero surfaces.
   /30-/40 fail AA (2.6-3.8:1) and /45 has no margin; raise to ~7:1. */
.text-white\/30,
.text-white\/35,
.text-white\/40,
.text-white\/45 { color: rgba(255,255,255,.62) !important; }