/* index.css — page-specific styles for the SecuRight home page.
   Externalized from the former inline <head> <style> block + the inline
   SVG <style> to satisfy strict CSP (style-src 'self', no unsafe-inline).
   Shared utilities live in tokens.css (.u-*). */

.hero { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 0; }

/* tile grid for the 9 products */
.portfolio-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 48px; }
@media (max-width: 900px) { .portfolio-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .portfolio-strip { grid-template-columns: 1fr; } }

/* section header */
.section-head { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: end; margin-bottom: 48px; }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; } }
.section-head .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }

/* diagram */
.diagram-wrap { padding: 56px 48px; background: var(--bg-sunken); border-radius: var(--r-xl); margin-top: 48px; border: 1px solid var(--line); }
.diagram-wrap .caption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.diagram { display: block; width: 100%; height: auto; }

.pillar-line { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 48px; }
@media (max-width: 800px) { .pillar-line { grid-template-columns: 1fr; } }
.pillar-line > div { padding: 32px 28px; border-right: 1px solid var(--line); }
@media (max-width: 800px) { .pillar-line > div { border-right: none; border-bottom: 1px solid var(--line); } }
.pillar-line > div:last-child { border-right: none; }
.pillar-line .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pillar-line .v { font-size: 34px; letter-spacing: -0.03em; font-weight: 500; margin: 10px 0 8px; line-height: 1.02; }
.pillar-line .d { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* big number stack */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 24px; }
@media (max-width: 900px) { .numbers { grid-template-columns: repeat(2, 1fr); } }
.numbers > div { padding: 32px 24px 32px 0; border-top: 1px solid var(--line); }
.numbers .n { font-size: 48px; letter-spacing: -0.03em; font-weight: 500; line-height: 1; }
.numbers .l { font-size: 13px; color: var(--ink-3); margin-top: 10px; line-height: 1.4; }

/* cta */
.cta { background: var(--ink); color: var(--bg); border-radius: var(--r-xl); padding: 80px 56px; margin-top: 96px; position: relative; overflow: hidden; }
.cta h2 { font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -0.035em; font-weight: 500; line-height: 1; margin: 0; max-width: 780px; }
.cta h2 em { font-style: normal; color: var(--accent); }
.cta p { color: color-mix(in oklab, var(--bg) 70%, transparent); max-width: 520px; margin: 24px 0 32px; font-size: 17px; }
.cta .btn-primary { background: var(--bg); color: var(--ink); }
.cta .btn-ghost { color: var(--bg); border-color: color-mix(in oklab, var(--bg) 25%, transparent); }
.cta .btn-ghost:hover { background: color-mix(in oklab, var(--bg) 10%, transparent); }

/* CTA eyebrow — dimmed-on-dark variant (overrides .eyebrow color; index.css loads after tokens.css) */
.cta-eyebrow { color: color-mix(in oklab, var(--bg) 60%, transparent); }

/* ── inline-SVG diagram styles (relocated from the SVG <style>; cascades into inline SVG) ── */
.dg-box { fill: var(--bg-raised); stroke: var(--ink); stroke-width: 1; }
.dg-box-ink { fill: var(--ink); stroke: none; }
.dg-box-accent { fill: var(--accent); stroke: none; }
.dg-lbl { fill: var(--ink); font-family: "Inter Tight", sans-serif; font-size: 14px; font-weight: 500; }
.dg-lbl-inv { fill: var(--bg); font-family: "Inter Tight", sans-serif; font-size: 14px; font-weight: 500; }
.dg-line { stroke: var(--ink-2); stroke-width: 1; fill: none; }
.dg-line-accent { stroke: var(--accent); stroke-width: 1; fill: none; }
.dg-step { fill: var(--ink-3); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.08em; }
.dg-arr { fill: var(--ink-2); }
.dg-arr-accent { fill: var(--accent); }
