/* ============================================================
   SECUUR skin · VIVID
   Energetic AI-startup: characterful grotesk, cool-white surface,
   violet→blue gradient accents, soft glow, full rounding.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&display=swap');

:root {
  --display: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;

  --color-pri: #FBFBFE;          /* cool white */
  --color-sec: #16131F;          /* violet-ink */
  --color-accent: #6D28D9;       /* violet */
  --color-alarm: #E0444E;        /* coral-red */

  --line: #16131F;
  --line-soft: rgba(22,19,31,0.10);
  --accent-soft: rgba(109,40,217,0.07);
  --alarm-soft: rgba(224,68,78,0.07);
  --accent-tint: #E7DCFB;
  --alarm-tint: #FADDDF;

  --border: 1px solid var(--line-soft);

  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --grad: linear-gradient(108deg, #7C3AED 0%, #4F46E5 55%, #2563EB 100%);
  --shadow-card: 0 2px 4px rgba(22,19,31,0.03), 0 16px 40px -20px rgba(109,40,217,0.28);
  --shadow-btn: 0 10px 26px -8px rgba(109,40,217,0.55);
}

h1,h2,h3 { letter-spacing: -0.03em; }
.display-xl { letter-spacing: -0.04em; }

.card { border-radius: var(--radius); box-shadow: var(--shadow-card); background: #fff; }
.card-corner::before, .card-corner::after { display: none; }

.btn { border-radius: var(--radius-pill); }
.btn--accent { background: var(--grad); border-color: transparent; box-shadow: var(--shadow-btn); }
.btn--accent:hover { filter: brightness(1.06); background: var(--grad); border-color: transparent; }
.btn--solid { box-shadow: 0 8px 20px -8px rgba(22,19,31,0.45); }

.brand-mark { border-radius: 8px; }
.brand-mark i:nth-child(1), .brand-mark i:nth-child(4) { background: var(--color-accent); }

.nav { background: color-mix(in srgb, var(--color-pri) 80%, transparent); }

.scan, .leadform, .checkout, .codeblock,
.pillars, .feature-grid, .tiers, .algo, .hndl, .steps,
.handshake, .brief, .statband, .analogy, .cbom {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #fff;
}
.codeblock, .tier--feature { background: var(--color-sec); }

.scan-form { border-radius: var(--radius-sm); overflow: hidden; }
.scan-form button { background: var(--grad); }
.scan-form button:hover { filter: brightness(1.06); }
.field input, .field select, .field textarea { border-radius: 12px; }

/* gradient-glow grade frame for the "safe" verdict */
.grade { border-radius: var(--radius); border-width: 2px; }
.grade--safe { box-shadow: 0 0 0 1px rgba(109,40,217,0.15), 0 16px 40px -18px rgba(109,40,217,0.45); }

.tag, .chip { border-radius: 999px; }
.hndl-vis { border-radius: 14px; }
.analogy-icon { border-radius: 16px; }
.strip-item::after { border-radius: 999px; }
.tier li::before { border-radius: 50%; }
.pillar-no { color: var(--color-accent); }

::selection { background: var(--color-accent); color: #fff; }