/* ============================================================
   SECUUR skin · CLARITY
   ScrapeGraphAI-inspired: characterful grotesk display, soft
   warm surfaces, rounded UI, gentle shadows, indigo accent.
   Loads AFTER secuur.css and overrides it.
   ============================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=satoshi@400,500,700&display=swap');

:root {
  --display: 'Clash Display', 'Space Grotesk', sans-serif;
  --body: 'Satoshi', 'Inter', sans-serif;

  --color-pri: #FAF9F6;          /* soft warm white */
  --color-sec: #14151A;          /* soft ink, not pure black */
  --color-accent: #4F46E5;       /* indigo */
  --color-alarm: #E0533D;        /* warmer terracotta */

  --line: #14151A;
  --line-soft: rgba(20,21,26,0.10);
  --accent-soft: rgba(79,70,229,0.07);
  --alarm-soft: rgba(224,83,61,0.07);
  --accent-tint: #E5E3FB;
  --alarm-tint: #F8E4DF;

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

  --radius: 16px;
  --radius-lg: 22px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(20,21,26,0.04), 0 8px 24px -12px rgba(20,21,26,0.12);
  --shadow-btn: 0 6px 16px -6px rgba(79,70,229,0.5);
}

body { letter-spacing: -0.005em; }
h1,h2,h3 { letter-spacing: -0.025em; }
.display-xl { letter-spacing: -0.035em; }

/* ---- shared structural softening (rounded + shadowed) ---- */
.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 { box-shadow: var(--shadow-btn); }
.btn--accent:hover { background: #4338CA; border-color: #4338CA; }
.btn--solid { box-shadow: 0 6px 16px -8px rgba(20,21,26,0.4); }

.brand-mark { border-radius: 7px; }

.nav { background: color-mix(in srgb, var(--color-pri) 82%, 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 { background: var(--color-sec); }
.tier--feature { background: var(--color-sec); }

.scan-form { border-radius: var(--radius-sm); overflow: hidden; }
.scan-form button { background: var(--color-accent); }
.scan-form button:hover { background: #4338CA; }
.field input, .field select, .field textarea { border-radius: 10px; }

.grade { border-radius: var(--radius); border-width: 2px; }
.tag, .chip { border-radius: 999px; }
.hndl-vis { border-radius: 12px; }
.analogy-icon { border-radius: 14px; }

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