/*!
  Template:  Cipheron | Cybersecurity Company HTML Template
  Version:   1.0.0
  Author:    MOONSHOTS
  Website:   https://m00nshots.dev
  Contact:   build@m00nshots.dev
  Copyright: (c) 2026 m00nshots. All rights reserved.
*/
/* ==========================================================================
   CIPHERON THEME — Cybersecurity Company
   Design language: dark-first HUD / terminal. Sharp corners, bracketed square
   buttons, hairline borders, scanline + grid backgrounds, mono eyebrows.
   --------------------------------------------------------------------------
   01. Tokens (light + dark)       07. Threat terminal & code
   02. Base overrides              08. Attack radar & HUD panels
   03. Buttons & chips             09. Posture gauge & domain check
   04. Header & navigation         10. SLA table & IR timeline
   05. Core component restyles     11. Home compositions (1–4)
   06. HUD helpers                 12. Inner pages, CTA, footer
   ========================================================================== */

/* 01. Tokens ------------------------------------------------------------- */
:root {
  --bg: #f4f6f8; --bg-2: #eaeef2; --surface: #ffffff; --surface-2: #eef1f4;
  --text: #0b1016; --text-hi: #05080b; --muted: #505b67; --line: rgba(11, 16, 22, .13);
  --primary: #0a8f4a; --primary-2: #067a3e; --on-primary: #ffffff; --accent: #ffb020; --accent-ink: #8f5500;
  --danger: #cc2b3b; --glow: 0 0 0 transparent;
  --grid: rgba(11, 16, 22, .06);
  --font-head: "Chakra Petch", "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-logo: "Orbitron", "Chakra Petch", sans-serif; --logo-weight: 700; --logo-size: 1.08rem; --logo-tracking: .12em; --logo-case: uppercase;
  --head-weight: 600; --head-tracking: -0.015em;
  --radius-sm: 2px; --radius: 3px; --radius-lg: 4px; --radius-btn: 0;
  --header-h: 64px;
  --gradient: linear-gradient(135deg, #0a8f4a, #067a3e);
  --shadow: 0 18px 40px -22px rgba(11, 16, 22, .3); --shadow-lg: 0 40px 80px -40px rgba(11, 16, 22, .35);
}
[data-theme="dark"] {
  --bg: #07090c; --bg-2: #0a0d11; --surface: #0e1217; --surface-2: #141a21;
  --text: #c9d1d9; --text-hi: #eef3f6; --muted: #808b97; --line: rgba(201, 209, 217, .12);
  --primary: #39ff88; --primary-2: #1fd46c; --on-primary: #04130a; --accent: #ffb020; --accent-ink: #ffb020;
  --danger: #ff5468; --glow: 0 0 28px rgba(57, 255, 136, .35);
  --grid: rgba(57, 255, 136, .055);
  --gradient: linear-gradient(135deg, #39ff88, #1fd46c);
  --shadow: 0 20px 50px -24px rgba(0, 0, 0, .9); --shadow-lg: 0 50px 100px -40px rgba(0, 0, 0, .95);
}

/* 02. Base overrides ----------------------------------------------------- */
[data-theme="dark"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px);
}
h1, h2, h3, h4 { color: var(--text-hi); }
.h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
.h2 em, .hero__title em, .page-header h1 em, .cp-cta h2 em { font-style: normal; color: var(--primary); text-shadow: var(--glow); }
.lead { color: var(--muted); }
:focus-visible { border-radius: 0; }
::selection { background: var(--primary); color: var(--on-primary); }
.eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .14em; color: var(--primary); }
.eyebrow::before { content: "//"; width: auto; height: auto; background: none; opacity: .7; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: inline-flex; } }
.amber { color: var(--accent-ink) !important; }
.up { color: var(--primary); }

/* 03. Buttons & chips ---------------------------------------------------- */
/* Square buttons with bracket corner-ticks ([ ]) drawn by ::before; the
   hover fill (::after) wipes in from the left instead of clipping. */
.btn {
  border-radius: 0; overflow: visible; font-family: var(--font-head); font-weight: 600; font-size: .86rem;
  letter-spacing: .1em; text-transform: uppercase; min-height: 50px; padding: 14px 24px;
}
.btn::after { transform: scaleX(0); transform-origin: left; background: rgba(255, 255, 255, .22); transition: transform .45s var(--ease); }
.btn:hover::after { transform: scaleX(1); }
.btn:hover { box-shadow: 0 0 0 1px var(--btn-bg), 0 0 26px -6px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn::before {
  content: ""; position: absolute; inset: -5px; pointer-events: none; --tc: var(--primary); opacity: .9;
  background:
    linear-gradient(var(--tc), var(--tc)) left top / 8px 1px no-repeat, linear-gradient(var(--tc), var(--tc)) left top / 1px 8px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right top / 8px 1px no-repeat, linear-gradient(var(--tc), var(--tc)) right top / 1px 8px no-repeat,
    linear-gradient(var(--tc), var(--tc)) left bottom / 8px 1px no-repeat, linear-gradient(var(--tc), var(--tc)) left bottom / 1px 8px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right bottom / 8px 1px no-repeat, linear-gradient(var(--tc), var(--tc)) right bottom / 1px 8px no-repeat;
  transition: inset .35s var(--ease), opacity .3s;
}
.btn:hover::before { inset: -8px; }
.btn--sm { min-height: 40px; padding: 10px 16px; font-size: .78rem; }
.btn--sm::before { inset: -4px; }
.btn--lg { min-height: 56px; padding: 16px 28px; font-size: .9rem; }
.btn--ghost { --btn-fg: var(--text-hi); border-color: var(--line); }
.btn--ghost::before { --tc: var(--muted); opacity: .6; }
.btn--ghost::after { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.btn--ghost:hover { box-shadow: none; border-color: var(--primary); }
.btn--gradient { background: var(--primary); color: var(--on-primary); }
.btn-group { gap: 18px; }
.chip { border-radius: 0; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; background: var(--primary); color: var(--on-primary); }
.icon-btn { border-radius: 0; width: 40px; height: 40px; font-size: 1.1rem; }
.icon-box { border-radius: 0; }
.cp-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font-family: var(--font-mono); font-size: .7rem;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); line-height: 1.3;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.cp-tag i, .cp-status i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: cp-pulse 1.8s infinite; }
.cp-tag.amber { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
@keyframes cp-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* 04. Header & navigation ------------------------------------------------ */
.site-header {
  background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--primary), transparent) 0 0 / 30% 100% no-repeat; animation: cp-scan 7s linear infinite;
}
@keyframes cp-scan { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.site-header.is-scrolled { height: 56px; box-shadow: none; }
.logo { color: var(--text-hi); }
.logo__mark {
  width: 32px; height: 32px; border-radius: 0; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
  border: 1px solid var(--primary); clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%); font-size: 1.05rem;
}
.nav__link { font-family: var(--font-head); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-radius: 0; padding: 10px 12px; }
.nav__link.is-active { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }
.dropdown { border-radius: 0; padding: 6px; background: var(--surface); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); top: calc(100% + 12px); }
.dropdown a { border-radius: 0; font-family: var(--font-mono); font-size: .8rem; }
.dropdown a::before { content: ">"; color: var(--primary); margin-right: 8px; opacity: .6; }
.dropdown a { justify-content: flex-start; }
.nav__actions { gap: 12px; }
.cp-status {
  display: none; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; color: var(--primary); white-space: nowrap; line-height: 1.2;
}
.cp-status b { font-weight: 400; color: var(--muted); }
@media (min-width: 1280px) { .cp-status { display: inline-flex; } }
.drawer__panel { border-left: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); }
.drawer__nav a { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; }
.drawer__nav .sub { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; font-size: .88rem; }

/* 05. Core component restyles ------------------------------------------- */
.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.logos { opacity: .75; gap: 20px 56px; }
.logos span { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.logos .ti { color: var(--primary); font-size: 1.3rem; }
.logos-title { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.logos-title::before { content: "// "; color: var(--primary); }
.check-list .ti { border-radius: 0; background: transparent; border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent); width: 20px; height: 20px; font-size: .75rem; margin-top: 3px; }
.accordion__btn { font-size: clamp(1rem, 1.4vw, 1.12rem); }
.accordion__icon { border-radius: 0; width: 32px; height: 32px; }
.accordion__item.is-open .accordion__icon { background: var(--primary); color: var(--on-primary); }
.accordion__item.is-open .accordion__btn { color: var(--primary); }
.step { border-radius: 0; background: var(--surface); }
.step__num { border-radius: 0; font-family: var(--font-mono); font-weight: 500; background: transparent; border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); }
.billing-toggle { border-radius: 0; padding: 4px; }
.billing-toggle button { border-radius: 0; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.billing-toggle button.is-active { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.billing-toggle button.is-active small { color: inherit; }
.billing-toggle small { color: var(--primary); }
.plan { border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 34px); background: var(--surface); }
.plan--featured { --text: inherit; --muted: inherit; --line: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg); }
.plan--featured::before { inset: 0 0 auto; height: 3px; padding: 0; border-radius: 0; background: var(--primary); -webkit-mask: none; mask: none; }
.plan__tag { top: 22px; right: 22px; }
.plan__price { font-size: 3rem; color: var(--text-hi); }
.plan__price small { font-family: var(--font-mono); font-size: .75rem; }
.plan .btn--ghost { --btn-fg: var(--text-hi); }
.member__img { border-radius: 0; border: 1px solid var(--line); }
.member__img img { filter: grayscale(1) contrast(1.05); }
.member h3 { font-size: 1.15rem; }
.member p { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; }
.member__social a { border-radius: 0; background: var(--primary); color: var(--on-primary); }
.input, .select, .textarea { border-radius: 0; background: var(--surface); }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.field label { font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.newsletter { border-radius: 0; }
.form-success { border-radius: 0; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-family: var(--font-mono); font-size: .85rem; }
.form-note { font-family: var(--font-mono); font-size: .74rem; }
.form.card { border-radius: 0; background: var(--surface); border: 1px solid var(--line); }
.contact-list .icon-box { border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); background: transparent; }
.contact-list strong { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .88rem; }
.page-header { border-bottom: 1px solid var(--line); }
.page-header h1 { font-size: clamp(2.3rem, 5.8vw, 4.8rem); letter-spacing: -0.02em; max-width: 18ch; }
.page-header .grid-lines { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; }
.breadcrumb { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.breadcrumb [aria-current] { color: var(--primary); }
.cp-ph-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.to-top { border-radius: 0; background: var(--primary); color: var(--on-primary); }
.preloader__bar { border-radius: 0; }
.cursor { border-radius: 0; background: var(--primary); }
.cursor.is-hover { background: transparent; border: 1px solid var(--primary); mix-blend-mode: normal; }
.error-page { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; }
.error-page .code { font-family: var(--font-logo); font-weight: 700; letter-spacing: .02em; position: relative; }
.error-page .code.text-gradient { background: none; color: transparent; -webkit-text-stroke: 2px var(--primary); text-shadow: var(--glow); }
.error-page h1::before { content: "// ERR_SIGNAL_LOST"; display: block; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; color: var(--accent-ink); margin: 28px 0 14px; }
.error-page .btn--gradient { background: var(--primary); }

/* 06. HUD helpers -------------------------------------------------------- */
.cp-band { background: var(--bg-2); border-block: 1px solid var(--line); }
.cp-gridbg {
  position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}
.cp-glow { position: absolute; width: 720px; height: 720px; max-width: 120vw; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent), transparent 65%); }
.cp-hudbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.cp-hudbar > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cp-hudbar .ti { color: var(--primary); font-size: 1rem; }
.cp-hudbar .cp-tag { padding: 3px 8px; font-size: .62rem; }
.cp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; }
.cp-kpis > div { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); }
.cp-kpis b { display: block; font-family: var(--font-head); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; color: var(--text-hi); line-height: 1.1; }
.cp-kpis span:not([data-count]) { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-kpis--big { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .cp-kpis--big { grid-template-columns: repeat(4, 1fr); } }
.cp-kpis--2 { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
.cp-kpis--big b { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.cp-kpis--big > div { border-left-width: 2px; }
/* HUD card: hairline border + corner ticks that light up on hover */
.cp-card, .cp-svc, .cp-quote, .cp-frame, .cp-posture, .cp-radar-panel, .cp-console, .cp-finding, .cp-flow, .cp-hudwall { position: relative; }
.cp-card::before, .cp-svc::before, .cp-frame::before, .cp-posture::before, .cp-radar-panel::before, .cp-console::before, .cp-finding::before, .cp-flow::before, .cp-hudwall::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2; --tc: var(--primary);
  background:
    linear-gradient(var(--tc), var(--tc)) left top / 14px 2px no-repeat, linear-gradient(var(--tc), var(--tc)) left top / 2px 14px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right top / 14px 2px no-repeat, linear-gradient(var(--tc), var(--tc)) right top / 2px 14px no-repeat,
    linear-gradient(var(--tc), var(--tc)) left bottom / 14px 2px no-repeat, linear-gradient(var(--tc), var(--tc)) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right bottom / 14px 2px no-repeat, linear-gradient(var(--tc), var(--tc)) right bottom / 2px 14px no-repeat;
}
.cp-card::before, .cp-svc::before { opacity: 0; transition: opacity .35s; }
.cp-card:hover::before, .cp-svc:hover::before { opacity: 1; }
.cp-card { height: 100%; padding: clamp(24px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .35s, background .35s; display: flex; flex-direction: column; }
.cp-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.cp-card__ic { display: grid; place-items: center; width: 46px; height: 46px; color: var(--primary); font-size: 1.4rem; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.cp-card h3 { font-size: 1.2rem; margin: 22px 0 8px; }
.cp-card p { color: var(--muted); margin: 0; }
.cp-card__meta { margin-top: auto; padding-top: 18px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; color: var(--accent-ink); }
.cp-card p + .cp-card__meta { margin-top: 20px; border-top: 1px dashed var(--line); }
.cp-frame { margin: 0; padding: 8px; border: 1px solid var(--line); background: var(--surface); }
.cp-frame img { width: 100%; filter: saturate(.85) contrast(1.05); }
.cp-frame::after { content: ""; position: absolute; inset: 8px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.cp-frame figcaption {
  position: absolute; left: 18px; top: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  background: rgba(5, 7, 10, .82); color: #39ff88; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
}
.cp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); font-family: var(--font-mono); font-size: .78rem; }
.cp-chips .ti { color: var(--primary); }
.cp-pill { flex: none; justify-self: start; display: inline-block; padding: 4px 8px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; line-height: 1.2; white-space: nowrap; }
.cp-pill--crit { color: var(--danger); } .cp-pill--high { color: var(--accent-ink); } .cp-pill--med { color: var(--primary); } .cp-pill--low { color: var(--muted); }
.cp-meter { display: block; height: 6px; background: var(--line); overflow: hidden; }
.cp-meter i { display: block; height: 100%; background: var(--primary); transform-origin: left; animation: cp-grow 1.6s var(--ease) both; }
.cp-meter--crit i { background: var(--danger); } .cp-meter--high i { background: var(--accent); } .cp-meter--low i { background: var(--muted); }
@keyframes cp-grow { from { transform: scaleX(0); } }

/* 07. Threat terminal & code (always dark, in both themes) -------------- */
.cp-term, .cp-code {
  --text: #c9d1d9; --muted: #7b8692; --line: rgba(57, 255, 136, .16);
  background: #05070a; color: #c9d1d9; border: 1px solid rgba(57, 255, 136, .28); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .76rem; box-shadow: 0 0 60px -20px rgba(57, 255, 136, .35), var(--shadow-lg); overflow: hidden; text-align: left;
}
.cp-term__bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.cp-term__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-rec { flex: none; display: inline-flex; align-items: center; gap: 6px; color: #ff5468; }
.cp-rec i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: cp-blink 1.2s steps(2) infinite; }
@keyframes cp-blink { 50% { opacity: .2; } }
.cp-term__count { margin-left: auto; flex: none; display: none; }
.cp-term__count b { color: #39ff88; font-weight: 500; }
@media (min-width: 640px) { .cp-term__count { display: inline; } }
.cp-term__body { height: 272px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden; }
.cp-term__line { flex: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 3px 4px; line-height: 1.6; white-space: nowrap; }
.cp-term__line > span { overflow: hidden; text-overflow: ellipsis; }
.cp-t { color: #5d6873; }
.cp-lv { min-width: 44px; font-weight: 500; }
.cp-lv--block { color: #39ff88; } .cp-lv--alert { color: #ffb020; } .cp-lv--info { color: #7fb3ff; }
.cp-src { display: none; color: #8d98a4; }
.cp-res { display: none; color: #39ff88; }
.cp-res::before { content: "→ "; color: #5d6873; }
.cp-term__line.is-new { animation: cp-flash 1.4s ease-out; }
@keyframes cp-flash { from { background: rgba(57, 255, 136, .16); } to { background: transparent; } }
@media (min-width: 480px) { .cp-term__line { grid-template-columns: auto auto minmax(0, 1fr) auto; } .cp-res { display: block; } }
@media (min-width: 1280px) { .cp-term:not(.cp-term--narrow) .cp-term__line { grid-template-columns: auto auto 104px minmax(0, 1fr) auto; } .cp-term:not(.cp-term--narrow) .cp-src { display: block; } }
.cp-term__prompt { padding: 10px 14px; border-top: 1px solid var(--line); color: #c9d1d9; }
.cp-term__prompt span { color: #39ff88; }
.cp-caret { display: inline-block; width: 8px; height: 14px; margin-left: 4px; vertical-align: -2px; background: #39ff88; animation: cp-blink 1s steps(2) infinite; }
.cp-term--flat { border: 0; box-shadow: none; border-radius: 0; }
.cp-code pre { margin: 0; padding: 20px; overflow-x: auto; font-size: .8rem; line-height: 1.8; }
.cp-code .c, .cp-finding .c { color: #5d6873; } .cp-code .k { color: #39ff88; } .cp-code .s { color: #ffb020; } .cp-code .ok { color: #39ff88; }

/* 08. Attack radar & HUD panels ----------------------------------------- */
.cp-radar {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin-inline: auto; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%);
}
.cp-radar__grid { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb, var(--primary) 34%, transparent); stroke-width: .6; }
.cp-radar__grid circle:first-child { stroke-width: 1.2; }
.cp-radar__ticks { stroke-width: .8; }
.cp-radar__sweep {
  position: absolute; inset: 2%; border-radius: 50%; animation: cp-rot 4.5s linear infinite;
  background: conic-gradient(from 0deg, transparent 0deg 290deg, color-mix(in srgb, var(--primary) 8%, transparent) 300deg, color-mix(in srgb, var(--primary) 50%, transparent) 359deg, transparent 360deg);
}
@keyframes cp-rot { to { transform: rotate(360deg); } }
.cp-radar__core { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; background: var(--primary); box-shadow: 0 0 14px var(--primary); }
.cp-blip { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px var(--primary); transition: left 1s var(--ease), top 1s var(--ease); }
.cp-blip::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; color: var(--primary); animation: cp-ping 2.4s var(--d, 0s) ease-out infinite; opacity: 0; }
.cp-blip--amber { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.cp-blip--amber::after { color: var(--accent); }
@keyframes cp-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(4.2); opacity: 0; } }
.cp-radar__lbl { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: .62rem; color: var(--muted); }
.cp-radar--sm { max-width: 260px; }
.cp-radar-panel { border: 1px solid var(--line); background: var(--surface); }
.cp-radar-panel__body { padding: clamp(20px, 3vw, 32px); display: grid; gap: 28px; }
.cp-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.cp-readout li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.cp-readout span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-readout b { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; color: var(--text-hi); }
.cp-readout__big { grid-column: 1 / -1; }
.cp-readout__big b { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--primary); text-shadow: var(--glow); line-height: 1.1; }

/* 09. Posture gauge & domain check -------------------------------------- */
.cp-posture { border: 1px solid var(--line); background: var(--surface); }
.cp-posture__body { display: grid; gap: 28px; align-items: center; padding: clamp(20px, 3vw, 32px); }
@media (min-width: 640px) { .cp-posture__body { grid-template-columns: 190px minmax(0, 1fr); } }
.cp-gauge { position: relative; width: 100%; max-width: 190px; aspect-ratio: 1; margin-inline: auto; --gc: var(--primary); }
.cp-gauge[data-level="warn"] { --gc: var(--accent); }
.cp-gauge[data-level="fail"] { --gc: var(--danger); }
.cp-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.cp-gauge__ticks { stroke: var(--line); stroke-width: 4; stroke-dasharray: 1 4.97; }
.cp-gauge__track { stroke: var(--line); stroke-width: 7; }
.cp-gauge__val { stroke: var(--gc); stroke-width: 7; stroke-dasharray: 301.6; stroke-dashoffset: calc(301.6 * (1 - var(--p) / 100)); transition: stroke-dashoffset 1.4s var(--ease), stroke .4s; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gc) 60%, transparent)); }
.cp-gauge__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.cp-gauge__num small, .cp-gauge__num span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cp-gauge__num b { font-family: var(--font-head); font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 600; color: var(--text-hi); margin: 4px 0; }
.cp-gauge__num em { font-style: normal; color: var(--gc); font-weight: 500; }
.cp-checks li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; --sc: var(--primary); }
.cp-checks li:first-child { border-top: 1px solid var(--line); }
.cp-checks li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--sc); box-shadow: 0 0 8px var(--sc); }
.cp-checks li span { flex: 1; min-width: 0; }
.cp-checks em { flex: none; font-style: normal; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--sc); border: 1px solid currentColor; padding: 2px 6px; }
.cp-checks [data-state="warn"] { --sc: var(--accent-ink); }
.cp-checks [data-state="fail"] { --sc: var(--danger); }
.cp-checks [data-state="scan"] { --sc: var(--muted); }
.cp-scan { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px clamp(16px, 3vw, 24px); border-top: 1px solid var(--line); }
.cp-scan__prompt { flex: none; font-family: var(--font-mono); font-size: .8rem; color: var(--primary); }
.cp-scan .input { flex: 1 1 180px; min-width: 0; min-height: 48px; font-family: var(--font-mono); font-size: .88rem; }
.cp-scan .btn { flex: none; min-height: 48px; }
@media (max-width: 479px) { .cp-scan__prompt { display: none; } .cp-scan .btn { width: 100%; } }
.cp-scan__log { display: grid; gap: 4px; padding: 0 clamp(16px, 3vw, 24px) 18px; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); min-height: 3.2em; }
.cp-scan__log .ok { color: var(--primary); }
.cp-scan__log .err { color: var(--danger); }

/* 10. SLA table & IR timeline ------------------------------------------- */
.cp-sla { border: 1px solid var(--line); background: var(--surface); }
.cp-sla table, .cp-compare table { width: 100%; border-collapse: collapse; }
.cp-sla thead th { padding: 14px 18px; text-align: left; font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cp-sla tbody th, .cp-sla td { padding: 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .92rem; }
.cp-sla tbody th { font-family: var(--font-head); font-weight: 600; color: var(--text-hi); white-space: nowrap; }
.cp-sla td { color: var(--muted); }
.cp-sla td b { font-family: var(--font-mono); font-weight: 500; color: var(--text-hi); }
.cp-sla tr:last-child > * { border-bottom: 0; }
.cp-sla tbody tr { --sv: var(--primary); box-shadow: inset 3px 0 0 var(--sv); }
.cp-sev--p1 { --sv: var(--danger) !important; } .cp-sev--p2 { --sv: var(--accent) !important; } .cp-sev--p4 { --sv: var(--muted) !important; }
.cp-sev { display: inline-block; margin-right: 8px; padding: 2px 7px; font-family: var(--font-mono); font-size: .72rem; color: var(--sv); border: 1px solid var(--sv); }
.cp-sev--p1 td b { color: var(--danger); }
@media (max-width: 767px) {
  .cp-sla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cp-sla table, .cp-sla tbody, .cp-sla tr, .cp-sla th, .cp-sla td { display: block; }
  .cp-sla tbody tr { padding: 8px 16px 12px 20px; border-bottom: 1px solid var(--line); }
  .cp-sla tbody tr:last-child { border-bottom: 0; }
  .cp-sla tbody th, .cp-sla td { padding: 7px 0; border: 0; white-space: normal; }
  .cp-sla td { display: flex; justify-content: space-between; gap: 16px; text-align: right; }
  .cp-sla td::before { content: attr(data-label); flex: none; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; padding-top: 3px; }
  .cp-sla td[data-label="Example"] { display: block; text-align: left; }
  .cp-sla td[data-label="Example"]::before { display: none; }
}
.cp-tl { display: grid; gap: 0; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: none; }
.cp-tl li { position: relative; padding: 0 0 28px 30px; border-left: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line)); min-width: 0; }
.cp-tl li::before { content: ""; position: absolute; left: -6px; top: 3px; width: 11px; height: 11px; background: var(--bg-2); border: 1px solid var(--primary); }
.cp-tl li.is-live::before { background: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 20%, transparent), 0 0 16px var(--primary); }
.cp-tl__t { font-family: var(--font-mono); font-size: .74rem; color: var(--primary); letter-spacing: .06em; }
.cp-tl h3 { font-size: 1.1rem; margin: 6px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.cp-tl p { color: var(--muted); font-size: .9rem; margin: 0; max-width: 34ch; }
@media (min-width: 1024px) {
  .cp-tl { grid-template-columns: repeat(5, 1fr); }
  .cp-tl li { padding: 30px 20px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line)); }
  .cp-tl li::before { left: 0; top: -6px; }
}

/* 11. Home compositions -------------------------------------------------- */
/* shared hero */
.cp-hero { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px)); }
.cp-hero .hero__title { font-size: clamp(2.4rem, 5.4vw, 4.8rem); line-height: 1.02; letter-spacing: -0.02em; }
.cp-hero .lead { margin-bottom: 32px; }
/* home 1: split with terminal */
.cp-hero__grid { display: grid; gap: 48px; align-items: center; }
.cp-hero__grid > * { min-width: 0; }
@media (min-width: 1024px) { .cp-hero__grid { grid-template-columns: 1fr 1.05fr; gap: 56px; } }
.cp-hero--split .cp-kpis { max-width: 560px; }
/* service rows */
.cp-rows { border-top: 1px solid var(--line); }
.cp-row { display: grid; gap: 14px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); position: relative; transition: background .35s, padding .35s var(--ease); }
.cp-row > * { min-width: 0; }
.cp-row:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.cp-row__idx { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; color: var(--primary); }
.cp-row h3 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.25rem, 2vw, 1.55rem); margin: 0 0 6px; }
.cp-row h3 .ti { color: var(--primary); font-size: 1.3em; flex: none; }
.cp-row p { color: var(--muted); margin: 0; max-width: 56ch; }
.cp-row__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-row__tags li { padding: 4px 8px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--muted); }
.cp-row__go { display: none; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); font-size: 1.2rem; transition: all .3s; }
.cp-row:hover .cp-row__go { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
@media (min-width: 768px) { .cp-row { grid-template-columns: 170px 1fr auto; gap: 24px; padding-inline: 12px; } .cp-row__tags { grid-column: 2; } .cp-row__go { display: grid; grid-column: 3; grid-row: 1 / span 2; } }
@media (min-width: 1024px) { .cp-row { grid-template-columns: 190px 1.4fr 1fr 48px; } .cp-row__tags { grid-column: 3; justify-content: flex-end; } .cp-row__go { grid-column: 4; grid-row: 1; } }
/* testimonial transmission cards */
.cp-quote { display: flex; flex-direction: column; gap: 20px; height: 100%; padding: 0 0 24px; border: 1px solid var(--line); background: var(--surface); }
.cp-quote__bar { display: flex; justify-content: space-between; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; color: var(--muted); }
.cp-quote__bar span:last-child { display: inline-flex; gap: 4px; align-items: center; color: var(--primary); }
.cp-quote blockquote { padding: 0 24px; font-size: 1.04rem; line-height: 1.6; color: var(--text-hi); }
.cp-quote blockquote::before { content: "> "; color: var(--primary); font-family: var(--font-mono); }
.cp-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 0 24px; }
.cp-quote img { width: 44px; height: 44px; filter: grayscale(1); border: 1px solid var(--line); }
.cp-quote strong { display: block; font-family: var(--font-head); color: var(--text-hi); }
.cp-quote figcaption span { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }

/* home 2: centred console */
.cp-hero--center .hero__title { max-width: 15ch; }
.cp-console { border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); background: var(--surface); text-align: left; box-shadow: var(--shadow-lg); }
.cp-console__grid { display: grid; }
.cp-console__grid > * { min-width: 0; }
.cp-console__col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; align-content: start; }
.cp-console__col:last-child { grid-template-columns: 1fr; }
.cp-console__radar { padding: 24px 18px; border-block: 1px solid var(--line); display: grid; justify-items: center; gap: 12px; }
.cp-console__radar .cp-radar { max-width: 360px; }
.cp-console__count { text-align: center; }
.cp-console__count small { display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cp-console__count b { font-family: var(--font-head); font-size: 2rem; color: var(--primary); text-shadow: var(--glow); }
@media (min-width: 1024px) {
  .cp-console__grid { grid-template-columns: 1fr 1.35fr 1fr; }
  .cp-console__col { grid-template-columns: 1fr; padding: 22px; }
  .cp-console__radar { border-block: 0; border-inline: 1px solid var(--line); }
}
.cp-mini { padding: 12px 14px; border: 1px solid var(--line); background: var(--bg-2); display: grid; gap: 2px; }
.cp-mini small { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cp-mini b { font-family: var(--font-head); font-size: 1.45rem; color: var(--text-hi); font-weight: 600; line-height: 1.2; }
.cp-mini span { font-family: var(--font-mono); font-size: .68rem; }
.cp-console__h { font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.cp-camp li { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cp-camp b { display: block; font-family: var(--font-mono); font-size: .76rem; font-weight: 500; color: var(--text-hi); }
.cp-camp small { font-size: .74rem; color: var(--muted); }
.cp-ticker { border-block: 1px solid var(--line); background: var(--surface); padding: 14px 0; }
.cp-ticker .marquee__track { gap: 48px; padding-right: 48px; }
.cp-ticker span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; white-space: nowrap; color: var(--text); }
.cp-ticker .ti { color: var(--accent-ink); }
.cp-tabs .tabs__list { gap: 0; border: 1px solid var(--line); display: inline-flex; margin-bottom: 28px; max-width: 100%; }
.cp-tabs .tabs__btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 0; padding: 12px 18px; font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.cp-tabs .tabs__btn + .tabs__btn { border-left: 1px solid var(--line); }
.cp-tabs .tabs__btn.is-active, .cp-tabs .tabs__btn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--line); }
@media (max-width: 639px) { .cp-tabs .tabs__list { display: grid; width: 100%; } .cp-tabs .tabs__btn + .tabs__btn { border-left: 0; border-top: 1px solid var(--line); } }
.cp-intel { border: 1px solid var(--line); background: var(--surface); }
.cp-intel__head { display: none; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cp-intel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: center; }
.cp-intel li:last-child { border-bottom: 0; }
.cp-intel li:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.cp-intel__k { font-family: var(--font-mono); font-size: .7rem; color: var(--primary); letter-spacing: .08em; }
.cp-intel__v { grid-column: 1 / -1; grid-row: 2; font-family: var(--font-mono); font-size: .86rem; color: var(--text-hi); overflow-wrap: anywhere; }
.cp-intel__d { grid-column: 1 / -1; grid-row: 3; color: var(--muted); font-size: .88rem; }
.cp-intel .cp-pill { grid-column: 2; grid-row: 1; justify-self: end; }
@media (min-width: 768px) {
  .cp-intel__head, .cp-intel li { display: grid; grid-template-columns: 130px minmax(0, 1.4fr) minmax(0, 1fr) 120px; gap: 16px; }
  .cp-intel__v, .cp-intel__d, .cp-intel .cp-pill { grid-column: auto; grid-row: auto; }
  .cp-intel .cp-pill { justify-self: start; }
}

/* home 3: editorial pentest */
.cp-edit { display: grid; gap: 48px; align-items: end; }
.cp-edit > * { min-width: 0; }
@media (min-width: 1024px) { .cp-edit { grid-template-columns: 1.3fr 1fr; gap: 64px; } }
.cp-hero--edit .hero__title { font-size: clamp(2.8rem, 7.6vw, 6.8rem); line-height: .95; text-transform: uppercase; letter-spacing: -0.01em; }
.cp-edit__img { position: relative; max-width: 520px; width: 100%; justify-self: end; }
.cp-edit__stamp {
  position: absolute; left: 16px; bottom: -22px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 16px; max-width: calc(100% - 32px);
  background: var(--surface); border: 1px solid var(--accent); box-shadow: var(--shadow);
}
.cp-edit__stamp > .ti { font-size: 1.6rem; color: var(--accent-ink); }
.cp-edit__stamp b { display: block; font-family: var(--font-head); font-size: 1.3rem; color: var(--text-hi); line-height: 1.1; }
.cp-edit__stamp span { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); }
@media (min-width: 1024px) { .cp-edit__stamp { left: -32px; } }
.cp-edit__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .cp-edit__meta { grid-template-columns: repeat(4, 1fr); } }
.cp-edit__meta span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-edit__meta b { display: block; font-family: var(--font-head); font-size: 1.6rem; letter-spacing: 0; text-transform: none; color: var(--text-hi); }
.cp-kc { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .cp-kc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cp-kc { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1536px) { .cp-kc { grid-template-columns: repeat(6, 1fr); } }
.cp-kc li { position: relative; padding: 24px 22px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.cp-kc li > .ti { display: block; font-size: 1.7rem; color: var(--primary); margin: 18px 0 14px; }
.cp-kc__n { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); letter-spacing: .1em; }
.cp-kc__n::after { content: " ▸"; color: var(--primary); }
.cp-kc h3 { font-size: 1rem; letter-spacing: .12em; margin-bottom: 8px; }
.cp-kc p { color: var(--muted); font-size: .9rem; margin: 0; }
.cp-kc li:nth-child(3) { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.cp-kc li:nth-child(3) > .ti { color: var(--danger); }
.cp-finding { border: 1px solid var(--line); background: var(--surface); }
.cp-finding__body { padding: clamp(20px, 3vw, 30px); }
.cp-finding h3 { font-size: 1.3rem; margin-bottom: 18px; }
.cp-finding dl { display: grid; gap: 8px; margin: 0 0 18px; }
.cp-finding dl div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; font-size: .9rem; }
.cp-finding dt { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.cp-finding dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cp-finding pre { margin: 0 0 18px; padding: 14px 16px; background: #05070a; color: #c9d1d9; font-family: var(--font-mono); font-size: .74rem; line-height: 1.7; overflow-x: auto; border-left: 2px solid var(--danger); }
.cp-finding__fix { font-size: .9rem; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.cp-finding__fix .ti { color: var(--primary); margin-top: 4px; }
.cp-finding__fix b { color: var(--text-hi); }
.cp-sevbars { display: grid; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--line); }
.cp-sevbars li { display: grid; grid-template-columns: 70px 1fr 26px; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.cp-sevbars b { color: var(--text-hi); font-weight: 500; text-align: right; }

/* home 4: zero-trust product */
.cp-prod { display: grid; gap: 28px; align-items: end; }
.cp-prod > * { min-width: 0; }
@media (min-width: 1024px) { .cp-prod { grid-template-columns: 1.15fr 1fr; gap: 64px; } }
.cp-hero--product .hero__title { margin-bottom: 0; }
.cp-signup { max-width: 480px; }
.cp-signup .btn { background: var(--primary); }
.cp-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 0; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.cp-note .ti { color: var(--primary); }
.cp-flow { display: grid; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); background: var(--surface); box-shadow: var(--shadow-lg); text-align: left; }
.cp-flow__col { position: relative; padding: 22px; min-width: 0; }
.cp-flow__col + .cp-flow__col { border-top: 1px solid var(--line); }
.cp-flow__lbl { display: block; margin-bottom: 14px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; color: var(--primary); }
.cp-flow__box { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.cp-flow__box > .ti { font-size: 1.6rem; color: var(--primary); margin-bottom: 6px; }
.cp-flow__box b { font-family: var(--font-mono); font-size: .9rem; font-weight: 500; color: var(--text-hi); overflow-wrap: anywhere; }
.cp-flow__box small { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.cp-flow__allow { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); }
.cp-flow__allow b { font-family: var(--font-head); font-size: 2rem; font-weight: 700; letter-spacing: .1em; color: var(--primary); text-shadow: var(--glow); }
.cp-flow__dec { display: grid; gap: 18px; align-content: start; }
.cp-flow__dec .cp-flow__lbl { margin-bottom: -4px; }
.cp-flow .cp-gauge { max-width: 172px; }
.cp-flow .cp-gauge__num small { font-size: .52rem; }
.cp-quote-one { max-width: 460px; }
@media (min-width: 1024px) {
  .cp-flow { grid-template-columns: 1fr 1.45fr 1fr; }
  .cp-flow__col + .cp-flow__col { border-top: 0; border-left: 1px solid var(--line); }
  .cp-flow__col + .cp-flow__col::before { content: "›"; position: absolute; left: -14px; top: 50%; z-index: 3; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-family: var(--font-mono); font-size: 1rem; line-height: 1; }
}
.cp-signals li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cp-signals li:first-child { border-top: 1px solid var(--line); }
.cp-signals .ti { font-size: 1.25rem; color: var(--primary); }
.cp-signals b { display: block; font-size: .92rem; color: var(--text-hi); font-family: var(--font-head); }
.cp-signals small { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); overflow-wrap: anywhere; }
.cp-signals em { font-style: normal; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--primary); border: 1px solid currentColor; padding: 2px 6px; }

/* 12. Inner pages, CTA, footer ------------------------------------------ */
.cp-svc { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); background: var(--surface); }
.cp-svc__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--primary); margin-bottom: 22px; }
.cp-svc__head .ti { font-size: 1.6rem; }
.cp-svc h3 { font-size: 1.3rem; margin-bottom: 8px; }
.cp-svc p { color: var(--muted); }
.cp-svc ul { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); display: grid; gap: 6px; }
.cp-svc li { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .76rem; color: var(--text); }
.cp-svc li .ti { color: var(--primary); }
.cp-hudwall { border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); background: var(--surface); }
.cp-hudwall__grid { display: grid; }
.cp-hudwall__grid > * { min-width: 0; }
.cp-hudwall__radar { padding: clamp(20px, 4vw, 40px); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .cp-hudwall__grid { grid-template-columns: 1fr 1.35fr; align-items: stretch; } .cp-hudwall__radar { border-bottom: 0; border-right: 1px solid var(--line); display: grid; place-items: center; } .cp-hudwall .cp-term { display: flex; flex-direction: column; } .cp-hudwall .cp-term__body { flex: 1; height: auto; min-height: 300px; } }
.cp-soc h3 { margin: 18px 0 2px; font-size: 1.2rem; }
.cp-soc p { font-family: var(--font-mono); font-size: .76rem; margin: 0; }
.cp-hotline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 16px 20px; margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.cp-hotline strong { color: var(--accent-ink); font-weight: 500; }
.cp-hotline a { margin-left: auto; font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; letter-spacing: .04em; color: var(--text-hi); }
.cp-hotline__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); color: var(--accent); animation: cp-pulse 1.4s infinite; }
@media (max-width: 639px) { .cp-hotline a { margin-left: 0; flex-basis: 100%; } }
.cp-compare { border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.cp-compare table { min-width: 620px; }
.cp-compare th, .cp-compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }
.cp-compare thead th { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; color: var(--text-hi); background: var(--surface-2); }
.cp-compare tbody th { font-weight: 500; color: var(--muted); }
.cp-compare td { font-family: var(--font-mono); font-size: .8rem; color: var(--text-hi); }
.cp-compare td:nth-child(3), .cp-compare th:nth-child(3) { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.cp-compare tr:last-child > * { border-bottom: 0; }
/* CTA */
.cp-cta {
  position: relative; display: grid; gap: 32px; align-items: center; padding: clamp(28px, 6vw, 72px); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  background: radial-gradient(90% 120% at 100% 50%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%), var(--surface);
}
.cp-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; }
.cp-cta > * { position: relative; min-width: 0; }
.cp-cta__cmd { display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: .76rem; color: var(--primary); overflow-wrap: anywhere; }
.cp-cta .h2 { max-width: 16ch; }
.cp-cta .lead { margin-bottom: 30px; }
.cp-cta__side { display: none; }
@media (min-width: 768px) { .cp-cta { grid-template-columns: 1.5fr 1fr; } .cp-cta__side { display: block; } }
/* Footer */
.cp-foot { background: var(--bg-2); border-top: 1px solid var(--line); overflow: hidden; }
.cp-foot__top { display: grid; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .cp-foot__top { grid-template-columns: 1.3fr 1fr; gap: 64px; } }
.cp-foot__brand p { color: var(--muted); max-width: 46ch; margin: 18px 0 0; }
.cp-foot .socials a { border-radius: 0; }
.cp-foot__news { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); background: var(--surface); }
.cp-foot__news h4 { font-family: var(--font-mono); font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.cp-foot__news p { color: var(--muted); margin-bottom: 16px; }
.cp-foot__news .newsletter { max-width: none; }
.cp-foot__grid { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, 1fr); padding-block: 48px; }
@media (min-width: 768px) { .cp-foot__grid { grid-template-columns: repeat(4, 1fr); } }
.cp-foot__col h4 { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.cp-foot__status { display: grid; gap: 10px; justify-items: start; }
.cp-foot__status .cp-tag { font-size: .62rem; padding: 4px 8px; }
.cp-foot__status a { display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: .8rem; color: var(--text-hi); }
.cp-foot__bottom { font-family: var(--font-mono); font-size: .72rem; }
.cp-foot .footer-mega { font-family: var(--font-logo); font-weight: 700; font-size: clamp(2.4rem, 12vw, 12rem); letter-spacing: .04em; opacity: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--primary) 30%, transparent); line-height: .9; white-space: nowrap; }
/* Narrow phones: wrap code and long button labels instead of overflowing */
.cp-code pre, .cp-finding pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; letter-spacing: .06em; }
  .btn--lg { padding-inline: 20px; }
}