:root {
  --brand: #6d5efc;
  --brand-2: #a855f7;
  --brand-grad: linear-gradient(135deg, var(--brand), var(--brand-2));
}
[data-bs-theme="light"] { --surface: #f6f7fb; --hero-ink: #1c1235; }
[data-bs-theme="dark"]  { --surface: #0f1117; --hero-ink: #ece9ff; }

body { background: var(--surface); }

.census-nav { background: transparent; padding-top: 1rem; }
.brand-mark {
  display: inline-flex; width: 34px; height: 34px; border-radius: 10px;
  align-items: center; justify-content: center; color: #fff;
  background: var(--brand-grad); box-shadow: 0 6px 18px rgba(109,94,252,.35);
}
.navbar-brand { font-size: 1.15rem; letter-spacing: -.02em; }

.hero { padding: 3.2rem 0 2rem; }
.hero-title {
  font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.8rem, 4vw, 2.9rem);
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--hero-ink);
}
.hero-sub { color: var(--bs-secondary-color); max-width: 46rem; margin: .5rem auto 1.6rem; }
.search-wrap { max-width: 46rem; }
.search-wrap .input-group { border-radius: 999px; overflow: hidden; }
.search-wrap .form-control:focus { box-shadow: none; }
.btn-brand { background: var(--brand-grad); color: #fff; border: 0; }
.btn-brand:hover { filter: brightness(1.05); color: #fff; }

.chip {
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  color: var(--bs-secondary-color); border-radius: 999px; padding: .2rem .7rem;
  font-size: .82rem; margin: .15rem;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }

.stats-strip { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 1.5rem; }
.stat-card {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 16px; padding: .8rem 1.2rem; min-width: 150px;
}
.stat-card .num { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.stat-card .lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); }

.card-soft {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Host summary */
.host-ip { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.meta-row { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--bs-secondary-color); }
.meta-row .bi { color: var(--brand); }

/* Port grid */
.port-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.port-card { border-radius: 16px; overflow: hidden; }
.port-head { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.port-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.port-num { font-size: 1.35rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.port-proto { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color); margin-top: .1rem; }
.port-body { padding: .8rem 1rem; }
.kv { display: flex; gap: .5rem; font-size: .85rem; margin-bottom: .25rem; }
.kv .k { color: var(--bs-secondary-color); min-width: 78px; }
.banner {
  background: var(--surface); border-radius: 10px; padding: .6rem .7rem; margin-top: .6rem;
  font-size: .78rem; max-height: 190px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}
.vuln-badge { background: #ffe2e2; color: #b4232a; border-radius: 6px; font-size: .72rem; padding: .1rem .4rem; margin: .1rem; display: inline-block; }
[data-bs-theme="dark"] .vuln-badge { background: #3a1416; color: #ff8a8f; }

/* Search results */
.result-row { display: flex; gap: 1rem; padding: 1rem; align-items: flex-start; }
.result-row + .result-row { border-top: 1px solid var(--bs-border-color); }
.result-ip { font-weight: 600; font-size: 1.05rem; }
.result-ip a { text-decoration: none; }
.pill { font-size: .74rem; border: 1px solid var(--bs-border-color); border-radius: 6px; padding: .05rem .4rem; margin: .1rem; display: inline-block; color: var(--bs-secondary-color); }
.facet h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); }
.facet a { display: flex; justify-content: space-between; text-decoration: none; padding: .15rem 0; font-size: .88rem; }

.census-footer { border-top: 1px solid var(--bs-border-color); padding: 1.2rem 0; margin-top: 2rem; }

.brand-tagline { font-size: .68rem; letter-spacing: .01em; }

/* Simple centered form pages (opt-out, signup) */
.form-page { max-width: 34rem; margin: 2.5rem auto; }
.form-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 18px; padding: 1.8rem; }
.form-note { font-size: .82rem; color: var(--bs-secondary-color); }

/* CVSS severity grading: 1-4 green, 5-7.5 yellow, >7.5 red. */
.vuln-badge.sev-low  { background: #dcfce7; color: #166534; }
.vuln-badge.sev-med  { background: #fef9c3; color: #854d0e; }
.vuln-badge.sev-high { background: #fee2e2; color: #b4232a; }
[data-bs-theme="dark"] .vuln-badge.sev-low  { background: #14532d; color: #bbf7d0; }
[data-bs-theme="dark"] .vuln-badge.sev-med  { background: #423606; color: #fde68a; }
[data-bs-theme="dark"] .vuln-badge.sev-high { background: #3a1416; color: #ff8a8f; }

.port-details summary { cursor: pointer; font-size: .8rem; color: var(--bs-secondary-color); }
.port-details summary:hover { color: var(--brand); }
.port-details[open] summary { margin-bottom: .35rem; }

/* Landing-page "Potential vulnerabilities detected" box */
.vuln-box { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 14px; padding: 1rem 1.1rem; margin: 0 auto 1.6rem; max-width: 60rem; }
.vuln-box-head { font-weight: 600; margin-bottom: .75rem; }
.vuln-box-head .bi { color: #e0a800; margin-right: .35rem; }
.vuln-tiles { display: flex; flex-wrap: wrap; gap: .6rem; }
.vuln-tile { display: flex; flex-direction: column; align-items: flex-start; min-width: 8.4rem;
  padding: .55rem .85rem; border-radius: 12px; text-align: left; cursor: pointer; }
.vuln-tile .vt-num { font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.vuln-tile .vt-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); }
.vuln-tile.sev-high { background: #fee2e2; border-color: #f5b5b8; }
.vuln-tile.sev-high .vt-num { color: #b4232a; }
.vuln-tile.sev-med  { background: #fef9c3; border-color: #ecd98a; }
.vuln-tile.sev-med  .vt-num { color: #854d0e; }
.vuln-tile.sev-low  { background: #dcfce7; border-color: #a7e3be; }
.vuln-tile.sev-low  .vt-num { color: #166534; }
[data-bs-theme="dark"] .vuln-tile.sev-high { background: #3a1416; border-color: #5a1f22; }
[data-bs-theme="dark"] .vuln-tile.sev-high .vt-num { color: #ff8a8f; }
[data-bs-theme="dark"] .vuln-tile.sev-med  { background: #423606; border-color: #5c4c0a; }
[data-bs-theme="dark"] .vuln-tile.sev-med  .vt-num { color: #fde68a; }
[data-bs-theme="dark"] .vuln-tile.sev-low  { background: #14532d; border-color: #1d6b3b; }
[data-bs-theme="dark"] .vuln-tile.sev-low  .vt-num { color: #bbf7d0; }

/* Facet "show all" + expanded scroll */
.facet-more { display: inline-block; margin-top: .35rem; font-size: .8rem; color: var(--brand); }
.facet.expanded .facet-rows { max-height: 18rem; overflow: auto; }

/* Host page: CVE-count box (top-right, never clipped) */
.host-vulnbox { text-align: center; min-width: 6.5rem; padding: .5rem .9rem; border-radius: 12px;
  background: #fee2e2; border: 1px solid #f5b5b8; }
.host-vulnbox .hvb-num { font-size: 1.8rem; font-weight: 700; line-height: 1; color: #b4232a; font-variant-numeric: tabular-nums; }
.host-vulnbox .hvb-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #b4232a; margin-top: .2rem; }
[data-bs-theme="dark"] .host-vulnbox { background: #3a1416; border-color: #5a1f22; }
[data-bs-theme="dark"] .host-vulnbox .hvb-num, [data-bs-theme="dark"] .host-vulnbox .hvb-lbl { color: #ff8a8f; }

/* Source-product dot: links an app/product to the CVEs it introduced */
.src-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  margin-right: .3rem; vertical-align: middle; }

/* ---- Posture hero (main page): animated shield that fills then flashes "CVE detected!" ---- */
.posture-hero {
  display: flex; align-items: center; gap: 1.1rem; max-width: 46rem; margin: 1.6rem auto 0;
  padding: 1.1rem 1.4rem; border-radius: 18px; text-decoration: none;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.posture-hero:hover { transform: translateY(-2px); border-color: var(--brand);
  box-shadow: 0 10px 30px rgba(109,94,252,.18); }
.posture-hero .ph-text { display: flex; flex-direction: column; }
.posture-hero .ph-title { font-weight: 700; letter-spacing: -.01em; color: var(--hero-ink); font-size: 1.15rem; }
.posture-hero .ph-sub { font-size: .85rem; color: var(--bs-secondary-color); }
.posture-hero .ph-go { margin-left: auto; color: var(--brand); font-size: 1.3rem; flex-shrink: 0; }

.posture-shield { position: relative; width: 58px; height: 70px; flex-shrink: 0; }
.posture-shield svg { display: block; width: 100%; height: 100%; }
.posture-shield .shield-bg { fill: var(--bs-tertiary-bg); }
.posture-shield .shield-outline { fill: none; stroke: var(--brand); stroke-width: 4; opacity: .55; }
.posture-shield .shield-fill { fill: var(--brand);
  animation: postureRise 6s ease-in-out infinite, postureHue 6s ease-in-out infinite; }
.posture-shield .cve-flag {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .5rem; font-weight: 800; letter-spacing: .02em; text-align: center; line-height: 1;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); opacity: 0;
  animation: postureFlag 6s ease-in-out infinite;
}
@keyframes postureRise {
  0%, 8%    { transform: translateY(120px); }   /* empty */
  22%, 30%  { transform: translateY(72px); }     /* ~40% */
  48%, 66%  { transform: translateY(12px); }     /* ~90% */
  74%, 84%  { transform: translateY(12px); }     /* hold during flash */
  94%, 100% { transform: translateY(120px); }    /* reset */
}
@keyframes postureHue {
  0%, 66%   { fill: var(--brand); }
  73%, 84%  { fill: #dc3545; }
  94%, 100% { fill: var(--brand); }
}
@keyframes postureFlag {
  0%, 66%   { opacity: 0; }
  74%, 84%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .posture-shield .shield-fill { animation: none; transform: translateY(30px); }
  .posture-shield .cve-flag { animation: none; opacity: 0; }
}

/* Two hero boxes side by side (posture + ownership) */
.hero-boxes { display: flex; gap: 1rem; flex-wrap: wrap; max-width: 62rem; margin: 1.6rem auto 0; align-items: stretch; }
.hero-boxes .hero-box { flex: 1 1 24rem; max-width: none; margin: 0; }
.ownership-hero {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.4rem; border-radius: 18px; text-decoration: none;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ownership-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(109,94,252,.18); border-color: var(--brand); }
.oh-title { color: var(--bs-body-color) !important; }
.oh-ticker { flex: 0 0 auto; width: 6.6rem; height: 1.7rem; overflow: hidden; border-radius: 7px; background: var(--brand-grad); }
.oh-ticker-inner { display: flex; flex-direction: column; animation: ohScroll 11s steps(9) infinite; }
.oh-ticker-inner > span { height: 1.7rem; line-height: 1.7rem; text-align: center; color: #fff; font-weight: 600; font-size: .82rem; white-space: nowrap; }
@keyframes ohScroll { from { transform: translateY(0); } to { transform: translateY(-15.3rem); } }
@media (prefers-reduced-motion: reduce) { .oh-ticker-inner { animation: none; } }

/* Inline Monero mark on the pricing page — align to text baseline like bootstrap-icons. */
.xmr-ico{vertical-align:-0.15em;margin-right:.15em}

/* Subdomains hero — animated host → many-domains flow (left→right). */
/* Center the flow + text group inside the box (don't push the arrow to the far right). */
.sd-hero { justify-content: center; text-align: center; gap: 0.9rem; }
.sd-hero .ph-text { align-items: center; }
.sd-hero .ph-go { margin-left: 0; }
.sd-flow { flex: 0 0 auto; width: 6.6rem; height: 2.9rem; }
.sd-flow svg { width: 100%; height: 100%; overflow: visible; display: block; }
.sd-link { stroke: var(--brand); stroke-width: 2.1; stroke-linecap: round;
  stroke-dasharray: 5 8; opacity: .7; animation: sdFlow 1.05s linear infinite; }
.sd-link:nth-of-type(2) { animation-delay: -.35s; }
.sd-link:nth-of-type(3) { animation-delay: -.7s; }
@keyframes sdFlow { to { stroke-dashoffset: -13; } }
.sd-host { fill: var(--brand); opacity: .16; }
.sd-host-dot { fill: var(--brand); }
.sd-dom { fill: var(--bs-body-bg); stroke: var(--brand); stroke-width: 2;
  animation: sdPulse 3.15s ease-in-out infinite; }
.sd-dom:nth-of-type(2) { animation-delay: .35s; }   /* 2nd domain circle (circles are 1st type-sibling group) */
.sd-dom:nth-of-type(3) { animation-delay: .7s; }    /* 3rd domain circle */
@keyframes sdPulse { 0%,70%,100% { fill: var(--bs-body-bg); } 82% { fill: var(--brand); } }
.sd-sub { font-size: .82rem; color: var(--bs-secondary-color); }
@media (prefers-reduced-motion: reduce) {
  .sd-link, .sd-dom { animation: none; }
  .sd-link { stroke-dashoffset: 0; }
}