* {
  box-sizing: border-box;
}

:root {
  --ink: #101828;
  --muted: #667085;
  --line: #e7eaf0;
  --paper: #f7f8fb;
  --accent: #5b4bdb;
  --max: 1180px;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.65;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(calc(100% - 40px), var(--max));
  margin: auto;
}


/* =========================
   HEADER
========================= */

.site-header {
  height: 78px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100;
}

.header-inner {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  gap: 10px;
  align-items: center;
}

.brand-mark {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 700;
}

nav a {
  color: var(--ink);
}

nav a:hover,
.text-link:hover {
  color: var(--accent);
}


/* =========================
   HERO
========================= */

.hero {
  background: linear-gradient(120deg, #101828, #22234b);
  color: #fff;
}

.hero-grid {
  min-height: 560px;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: center;
  gap: 70px;
  padding: 80px 0;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero .eyebrow,
.category-banner .eyebrow {
  color: #aeb6ff;
}

.hero h1,
.banner h1,
.category-banner h1 {
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  margin: 18px 0;
}

.hero-sub {
  font-size: 22px;
  color: #e5e7eb;
  max-width: 720px;
}

.hero p:not(.hero-sub) {
  color: #b7c0d1;
  max-width: 700px;
}

.button {
  display: inline-block;
  margin-top: 20px;
  background: #fff;
  color: #101828;
  padding: 13px 19px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
}

.button:hover {
  background: #f1f3f8;
}

.hero-card {
  border: 1px solid #ffffff25;
  background: #ffffff0b;
  border-radius: 18px;
  padding: 28px;
}

.hero-card > span {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #9ca9c7;
}

.hero-card div {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid #ffffff1c;
  font-size: 13px;
}

.hero-card b {
  color: #aeb6ff;
}


/* =========================
   SECTIONS
========================= */

.section {
  padding: 80px 0;
}

.alt {
  border-top: 1px solid var(--line);
  background: #fafbfc;
}

.heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 30px;
}

.heading h2 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin: 8px 0;
}

.heading > a {
  font-weight: 800;
  font-size: 13px;
  color: var(--accent);
}


/* =========================
   ARTICLE GRID
========================= */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


/* =========================
   ARTICLE CARD
========================= */

.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.12);
}


/* =========================
   CARD VISUAL
========================= */

.card-image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================
   VISUAL BASE
========================= */

.card-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.visual-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.visual-content {
  position: absolute;
  inset: 0;
  z-index: 10;

  padding: 28px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  color: #fff;

  background:
    linear-gradient(
      180deg,
      transparent 25%,
      rgba(0, 0, 0, 0.12) 48%,
      rgba(0, 0, 0, 0.58) 100%
    );
}

.visual-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.72;
}

.visual-content strong {
  max-width: 85%;

  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.02;

  letter-spacing: -0.035em;

  font-weight: 850;

  text-transform: uppercase;
}


/* =========================
   CATEGORY COLORS
========================= */


/* AI & LLM SECURITY */

.card-visual.ai-llm-security {
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(167, 139, 250, 0.55),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #160b35,
      #5b21b6
    );
}


/* API SECURITY */

.card-visual.api-security {
  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(96, 165, 250, 0.55),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #06162f,
      #1d4ed8
    );
}


/* WAAP */

.card-visual.waap {
  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(103, 232, 249, 0.55),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #042b38,
      #0891b2
    );
}


/* WAF */

.card-visual.waf {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(129, 140, 248, 0.55),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #10194a,
      #3730a3
    );
}


/* DDOS */

.card-visual.ddos-protection {
  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(248, 113, 113, 0.58),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #3b080f,
      #dc2626
    );
}


/* BOT */

.card-visual.bot-protection {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(110, 231, 183, 0.50),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #032a20,
      #059669
    );
}


/* THREAT INTELLIGENCE */

.card-visual.threat-intelligence {
  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(253, 186, 116, 0.55),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #3a1904,
      #d97706
    );
}


/* CLOUD SECURITY */

.card-visual.cloud-security {
  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(103, 232, 249, 0.55),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #062936,
      #0f766e
    );
}


/* =========================
   GRAPHIC: NEURAL
========================= */

.neural-network {
  position: absolute;
  inset: 0;
}

.node {
  position: absolute;

  width: 13px;
  height: 13px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.9);

  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.08),
    0 0 25px rgba(255, 255, 255, 0.65);
}

.n1 {
  left: 20%;
  top: 28%;
}

.n2 {
  left: 43%;
  top: 17%;
}

.n3 {
  left: 68%;
  top: 30%;
}

.n4 {
  left: 30%;
  top: 58%;
}

.n5 {
  left: 57%;
  top: 55%;
}

.n6 {
  left: 78%;
  top: 67%;
}

.line {
  position: absolute;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
  transform-origin: left center;
}

.l1 {
  width: 130px;
  left: 21%;
  top: 31%;
  transform: rotate(-17deg);
}

.l2 {
  width: 160px;
  left: 44%;
  top: 20%;
  transform: rotate(25deg);
}

.l3 {
  width: 125px;
  left: 32%;
  top: 59%;
  transform: rotate(-38deg);
}

.l4 {
  width: 120px;
  left: 58%;
  top: 57%;
  transform: rotate(24deg);
}

.l5 {
  width: 150px;
  left: 44%;
  top: 20%;
  transform: rotate(77deg);
}


/* =========================
   GRAPHIC: API NETWORK
========================= */

.api-graphic {
  position: absolute;
  inset: 0;
}

.api-box {
  position: absolute;

  padding: 8px 12px;

  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 7px;

  background: rgba(255,255,255,0.08);

  color: rgba(255,255,255,0.75);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.api-box-1 {
  left: 17%;
  top: 23%;
}

.api-box-2 {
  left: 65%;
  top: 23%;
}

.api-box-3 {
  left: 65%;
  top: 64%;
}

.api-core {
  position: absolute;

  left: 42%;
  top: 42%;

  width: 55px;
  height: 55px;

  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 12px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.12);

  color: #fff;

  font-size: 28px;
  font-weight: 800;
}

.api-line {
  position: absolute;

  height: 1px;

  background: rgba(255,255,255,0.4);

  transform-origin: left;
}

.api-line-1 {
  width: 120px;
  left: 31%;
  top: 46%;
  transform: rotate(-27deg);
}

.api-line-2 {
  width: 120px;
  left: 54%;
  top: 54%;
  transform: rotate(31deg);
}


/* =========================
   GRAPHIC: WAAP SHIELD
========================= */

.waap-graphic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.shield {
  width: 125px;
  height: 145px;

  clip-path: polygon(
    50% 0%,
    92% 15%,
    88% 62%,
    50% 100%,
    12% 62%,
    8% 15%
  );

  background: rgba(255,255,255,0.18);

  display: grid;
  place-items: center;
}

.shield-inner {
  width: 92px;
  height: 110px;

  clip-path: polygon(
    50% 0%,
    92% 15%,
    88% 62%,
    50% 100%,
    12% 62%,
    8% 15%
  );

  background: rgba(255,255,255,0.13);
}

.shield-ring {
  position: absolute;

  border: 1px solid rgba(255,255,255,0.16);

  border-radius: 50%;
}

.ring-1 {
  width: 200px;
  height: 200px;
}

.ring-2 {
  width: 280px;
  height: 280px;
}

.pulse-dot {
  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #fff;

  top: 27%;
  right: 27%;

  box-shadow: 0 0 20px rgba(255,255,255,0.8);
}


/* =========================
   GRAPHIC: WAF PATCH
========================= */

.waf-graphic {
  position: absolute;
  inset: 0;
}

.waf-grid {
  position: absolute;
  inset: 0;

  opacity: 0.25;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.35) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.35) 1px,
      transparent 1px
    );

  background-size: 26px 26px;

  transform: perspective(300px) rotateX(35deg) scale(1.2);
}

.patch-window {
  position: absolute;

  left: 34%;
  top: 27%;

  width: 120px;
  height: 90px;

  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 10px;

  background: rgba(255,255,255,0.08);

  padding: 20px;
}

.patch-window span {
  display: block;

  height: 5px;

  margin-bottom: 9px;

  border-radius: 5px;

  background: rgba(255,255,255,0.35);
}

.patch-check {
  position: absolute;

  right: 22%;
  bottom: 25%;

  width: 48px;
  height: 48px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.18);

  border: 1px solid rgba(255,255,255,0.45);

  color: #fff;

  font-size: 25px;
  font-weight: 800;
}


/* =========================
   GRAPHIC: DDOS TRAFFIC
========================= */

.ddos-graphic {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.traffic {
  position: absolute;

  height: 2px;

  border-radius: 99px;

  background: rgba(255,255,255,0.5);

  transform-origin: left center;
}

.traffic-1 {
  width: 270px;
  left: 8%;
  top: 26%;
  transform: rotate(14deg);
}

.traffic-2 {
  width: 320px;
  left: 4%;
  top: 40%;
  transform: rotate(4deg);
}

.traffic-3 {
  width: 290px;
  left: 7%;
  top: 54%;
  transform: rotate(-8deg);
}

.traffic-4 {
  width: 250px;
  left: 13%;
  top: 68%;
  transform: rotate(-18deg);
}

.traffic-5 {
  width: 180px;
  left: 35%;
  top: 48%;
  transform: rotate(90deg);
}

.traffic-bar {
  position: absolute;

  right: 20%;
  top: 22%;

  width: 4px;
  height: 60%;

  border-radius: 99px;

  background: rgba(255,255,255,0.65);

  box-shadow:
    0 0 25px rgba(255,255,255,0.5);
}


/* =========================
   GRAPHIC: BOT NETWORK
========================= */

.bot-graphic {
  position: absolute;
  inset: 0;
}

.bot-core {
  position: absolute;

  left: 43%;
  top: 38%;

  width: 70px;
  height: 55px;

  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 15px;

  background: rgba(255,255,255,0.10);
}

.bot-core::before,
.bot-core::after {
  content: "";

  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: rgba(255,255,255,0.85);

  top: 18px;
}

.bot-core::before {
  left: 18px;
}

.bot-core::after {
  right: 18px;
}

.bot-core span {
  position: absolute;

  width: 25px;
  height: 2px;

  background: rgba(255,255,255,0.55);

  bottom: 12px;

  left: 22px;
}

.bot-node {
  position: absolute;

  width: 17px;
  height: 17px;

  border-radius: 50%;

  background: rgba(255,255,255,0.7);

  box-shadow: 0 0 18px rgba(255,255,255,0.35);
}

.bn1 {
  left: 17%;
  top: 27%;
}

.bn2 {
  left: 72%;
  top: 24%;
}

.bn3 {
  left: 18%;
  top: 70%;
}

.bn4 {
  left: 76%;
  top: 70%;
}

.bot-connection {
  position: absolute;

  height: 1px;

  background: rgba(255,255,255,0.3);

  transform-origin: left center;
}

.bc1 {
  width: 160px;
  left: 22%;
  top: 31%;
  transform: rotate(12deg);
}

.bc2 {
  width: 150px;
  left: 54%;
  top: 41%;
  transform: rotate(-21deg);
}

.bc3 {
  width: 160px;
  left: 23%;
  top: 70%;
  transform: rotate(-14deg);
}

.bc4 {
  width: 155px;
  left: 54%;
  top: 68%;
  transform: rotate(16deg);
}


/* =========================
   GRAPHIC: RADAR
========================= */

.radar-graphic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.radar-circle {
  position: absolute;

  border: 1px solid rgba(255,255,255,0.24);

  border-radius: 50%;
}

.radar-1 {
  width: 80px;
  height: 80px;
}

.radar-2 {
  width: 150px;
  height: 150px;
}

.radar-3 {
  width: 230px;
  height: 230px;
}

.radar-cross {
  position: absolute;

  background: rgba(255,255,255,0.18);
}

.horizontal {
  width: 230px;
  height: 1px;
}

.vertical {
  width: 1px;
  height: 230px;
}

.radar-sweep {
  position: absolute;

  width: 115px;
  height: 115px;

  border-top: 2px solid rgba(255,255,255,0.65);

  border-radius: 100% 0 0 0;

  transform: rotate(-28deg);

  transform-origin: bottom right;
}

.radar-point {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 0 15px rgba(255,255,255,0.7);
}

.point-1 {
  left: 67%;
  top: 34%;
}

.point-2 {
  left: 31%;
  top: 61%;
}

.point-3 {
  left: 62%;
  top: 68%;
}


/* =========================
   GRAPHIC: CLOUD SECURITY
========================= */

.cloud-graphic {
  position: absolute;
  inset: 0;
}

.cloud-shape {
  position: absolute;

  left: 27%;
  top: 28%;

  width: 180px;
  height: 90px;
}

.cloud-main {
  position: absolute;

  left: 20px;
  bottom: 0;

  width: 145px;
  height: 58px;

  border-radius: 50px;

  background: rgba(255,255,255,0.16);

  border: 1px solid rgba(255,255,255,0.35);
}

.cloud-small {
  position: absolute;

  left: 55px;
  top: 0;

  width: 65px;
  height: 65px;

  border-radius: 50%;

  background: rgba(255,255,255,0.16);

  border: 1px solid rgba(255,255,255,0.35);
}

.cloud-lock {
  position: absolute;

  right: 23%;
  top: 34%;

  width: 55px;
  height: 60px;

  border-radius: 10px;

  background: rgba(255,255,255,0.18);

  border: 1px solid rgba(255,255,255,0.45);
}

.lock-body {
  position: absolute;

  left: 13px;
  bottom: 10px;

  width: 29px;
  height: 25px;

  border-radius: 5px;

  background: rgba(255,255,255,0.65);
}

.lock-top {
  position: absolute;

  left: 18px;
  top: 13px;

  width: 19px;
  height: 23px;

  border: 4px solid rgba(255,255,255,0.65);

  border-bottom: 0;

  border-radius: 12px 12px 0 0;
}

.cloud-node {
  position: absolute;

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: rgba(255,255,255,0.7);
}

.cn1 {
  left: 18%;
  top: 24%;
}

.cn2 {
  left: 76%;
  top: 23%;
}

.cn3 {
  left: 78%;
  top: 72%;
}


/* =========================
   FALLBACK GRAPHIC
========================= */

.default-graphic {
  position: absolute;
  inset: 0;

  display: grid;

  grid-template-columns: repeat(2, 70px);
  grid-template-rows: repeat(2, 70px);

  justify-content: center;
  align-content: center;

  gap: 15px;
}

.default-graphic span {
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 12px;

  background: rgba(255,255,255,0.08);
}


/* =========================
   VISUAL HOVER
========================= */

.card-visual .visual-bg {
  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

.card:hover .visual-bg {
  transform: scale(1.045);
  filter: brightness(1.08);
}

.card:hover .visual-content strong {
  transform: translateY(-2px);
}


/* =========================
   CARD BODY
========================= */

.card-body {
  padding: 22px;
}

.post-category {
  display: inline-block;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--accent);
}

.card h3 {
  font-size: 21px;
  line-height: 1.22;
  margin: 9px 0;
}

.card h3:hover {
  color: var(--accent);
}

.card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 15px;
}

.meta {
  font-size: 11px;
  color: #98a2b3;
  font-weight: 650;
}


/* =========================
   BLOG / CATEGORY BANNER
========================= */

.banner,
.category-banner {
  padding: 90px 0;

  background: #f1f3f8;

  border-bottom: 1px solid var(--line);
}

.banner p,
.category-banner p {
  max-width: 760px;

  font-size: 18px;

  color: var(--muted);
}

.category-banner {
  background: #101828;
  color: #fff;
}

.category-banner h2 {
  font-size: 24px;

  color: #e5e7eb;

  max-width: 800px;

  margin: 0 0 18px;
}

.category-banner p {
  color: #b7c0d1;
}


/* =========================
   BLOG FILTERS
========================= */

.filters {
  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 35px;
}

.filters a {
  border: 1px solid var(--line);

  padding: 8px 13px;

  border-radius: 99px;

  font-size: 12px;

  font-weight: 750;

  background: #fff;
}

.filters a:hover {
  border-color: var(--ink);
}

.filters .active {
  background: var(--ink);

  color: #fff;

  border-color: var(--ink);
}


/* =========================
   EMPTY STATE
========================= */

.empty {
  padding: 45px;

  border: 1px dashed #cfd4df;

  text-align: center;

  color: var(--muted);
}

/* =====================================================
SECVORA ARTICLE PAGE
===================================================== */

.article {
background: #ffffff;
}

/* =========================
ARTICLE HERO
========================= */

.article-hero {
position: relative;
padding: 85px 0 70px;
background:
radial-gradient(
circle at 12% 25%,
rgba(91, 75, 219, 0.12),
transparent 30%
),
radial-gradient(
circle at 88% 70%,
rgba(37, 99, 235, 0.10),
transparent 30%
),
#f7f8fc;
border-bottom: 1px solid #e7eaf0;
}

.article-hero-inner {
max-width: 1050px;
}

.article-category {
display: inline-flex;
align-items: center;
margin-bottom: 22px;
color: #5b4bdb;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.13em;
text-transform: uppercase;
}

.article-category:hover {
color: #4338ca;
}

.article-hero h1 {
max-width: 900px;
margin: 0;
color: #101828;
font-size: clamp(44px, 6vw, 76px);
line-height: 1.02;
letter-spacing: -0.045em;
font-weight: 850;
}

.article-deck {
max-width: 760px;
margin: 28px 0 22px;
color: #667085;
font-size: 20px;
line-height: 1.65;
}

.article-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
color: #7b8494;
font-size: 12px;
font-weight: 650;
}

/* =========================
HERO IMAGE
========================= */

.article-hero-image {
margin-top: 50px;
overflow: hidden;
border-radius: 18px;
background: #101828;
box-shadow:
0 25px 70px rgba(16, 24, 40, 0.14);
}

.article-hero-image img {
display: block;
width: 100%;
height: auto;
}

/* =========================
GENERATED HERO VISUAL
========================= */

.article-hero-visual {
position: relative;
min-height: 360px;
margin-top: 50px;
overflow: hidden;
display: flex;
align-items: center;
padding: 55px;
border-radius: 18px;
background:
radial-gradient(
circle at 15% 30%,
rgba(124, 108, 255, 0.25),
transparent 30%
),
radial-gradient(
circle at 85% 70%,
rgba(37, 99, 235, 0.22),
transparent 32%
),
#080d18;
box-shadow:
0 25px 70px rgba(16, 24, 40, 0.16);
}

.hero-visual-grid {
position: absolute;
inset: 0;
opacity: 0.22;
background-image:
linear-gradient(
rgba(255,255,255,0.07) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,0.07) 1px,
transparent 1px
);
background-size: 45px 45px;
}

.hero-visual-content {
position: relative;
z-index: 2;
max-width: 620px;
}

.hero-visual-content span {
display: block;
margin-bottom: 18px;
color: #8f83ff;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.18em;
}

.hero-visual-content strong {
display: block;
color: #ffffff;
font-size: clamp(30px, 4vw, 52px);
line-height: 1.05;
letter-spacing: -0.03em;
}

.hero-visual-content small {
display: block;
margin-top: 20px;
color: #8f9bb0;
font-size: 10px;
letter-spacing: 0.08em;
}

.hero-visual-shield {
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
width: 145px;
height: 165px;
display: grid;
place-items: center;
clip-path: polygon(
50% 0%,
92% 15%,
88% 62%,
50% 100%,
12% 62%,
8% 15%
);
background:
linear-gradient(
135deg,
rgba(124,108,255,0.50),
rgba(37,99,235,0.18)
);
color: rgba(255,255,255,0.75);
font-size: 50px;
font-weight: 850;
}

/* =========================
ARTICLE LAYOUT
========================= */

/* =========================
   ARTICLE LAYOUT: SHARE + CONTENT
========================= */

.article-layout {
  display: grid;
  grid-template-columns: 48px minmax(0, 760px);
  column-gap: 30px;
  justify-content: center;
  align-items: start;
  padding: 40px 0 90px;
}

/* Share column */
.article-layout > .share-bar-container {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-self: stretch;
}

/* Sticky share buttons */
.article-layout .secvora-share-bar {
  position: sticky;
  top: 100px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 48px;
  box-sizing: border-box;
  gap: 10px;
  padding: 12px 0;
  margin: 0;
}

/* Share label */
.article-layout .share-bar-label {
  display: block;
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Share icons */
.article-layout .secvora-share-bar > a {
  display: block;
  float: none;
  margin: 0;
}

/* Article content */
.article-layout > .article-content {
  grid-column: 2;
  min-width: 0;
}

/* =========================
ARTICLE CONTENT
========================= */

.article-content {
min-width: 0;
}

.prose {
color: #344054;
font-size: 17px;
line-height: 1.85;
}

.prose p {
margin: 0 0 24px;
}

.prose h2 {
margin: 58px 0 20px;
color: #101828;
font-size: 32px;
line-height: 1.2;
letter-spacing: -0.025em;
}

.prose h3 {
margin: 42px 0 15px;
color: #101828;
font-size: 23px;
line-height: 1.3;
}

.prose ul,
.prose ol {
margin: 0 0 28px;
padding-left: 25px;
}

.prose li {
margin-bottom: 9px;
}

.prose strong {
color: #101828;
}

.prose a {
color: #4f46e5;
text-decoration: underline;
text-decoration-color: rgba(79,70,229,0.25);
text-underline-offset: 3px;
}

.prose a:hover {
color: #3730a3;
}

.prose blockquote {
margin: 35px 0;
padding: 22px 25px;
border-left: 3px solid #5b4bdb;
background: #f6f7fb;
color: #475467;
}

.prose code {
padding: 3px 6px;
border-radius: 5px;
background: #f2f4f7;
color: #344054;
font-size: 0.9em;
}

.prose pre {
margin: 30px 0;
padding: 25px;
overflow-x: auto;
border-radius: 10px;
background: #0b1220;
color: #d0d5dd;
}

/* =========================
KEY TAKEAWAYS
========================= */

.article-takeaways {
margin-top: 65px;
padding: 28px 30px;
border: 1px solid #e4e7ec;
border-radius: 12px;
background:
linear-gradient(
135deg,
#f8f8ff,
#f7f9fc
);
}

.takeaways-label {
margin-bottom: 10px;
color: #5b4bdb;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.14em;
}

.article-takeaways p {
margin: 0;
color: #475467;
font-size: 14px;
line-height: 1.7;
}

/* =========================
PROPHAZE RESOURCE
========================= */

.security-resource {
position: relative;
margin-top: 45px;
padding: 34px;
overflow: hidden;
border-radius: 14px;
background:
radial-gradient(
circle at 90% 20%,
rgba(91,75,219,0.28),
transparent 35%
),
#0b1220;
color: #ffffff;
}

.security-resource::after {
content: "";
position: absolute;
right: -45px;
bottom: -55px;
width: 160px;
height: 160px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 50%;
}

.resource-eyebrow {
margin-bottom: 12px;
color: #9b91ff;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.15em;
}

.security-resource h3 {
margin: 0 0 12px;
color: #ffffff;
font-size: 25px;
line-height: 1.25;
}

.security-resource p {
max-width: 600px;
margin: 0 0 22px;
color: #aab4c4;
font-size: 14px;
line-height: 1.7;
}

.security-resource a {
display: inline-flex;
align-items: center;
padding: 10px 15px;
border-radius: 7px;
background: #ffffff;
color: #101828;
font-size: 12px;
font-weight: 750;
}

.security-resource a:hover {
color: #101828;
transform: translateY(-1px);
}

/* =========================
RELATED ARTICLES
========================= */

.related-section {
padding: 75px 0 95px;
background: #f7f8fc;
border-top: 1px solid #e7eaf0;
}

.related-heading {
margin-bottom: 32px;
}

.related-heading h2 {
margin: 8px 0 0;
color: #101828;
font-size: 34px;
line-height: 1.2;
letter-spacing: -0.025em;
}

.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

/* =========================
ARTICLE RESPONSIVE
========================= */

@media (max-width: 900px) {

.article-hero {
padding: 65px 0 55px;
}


.article-layout {
  grid-template-columns: 1fr;
  row-gap: 20px;
  padding: 60px 0 70px;
}

.article-layout > .share-bar-container {
  grid-column: 1;
}

.article-layout .secvora-share-bar {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  gap: 10px;
  padding: 8px 0;
}

.article-layout .share-bar-label {
  writing-mode: horizontal-tb;
  transform: none;
}

.article-layout > .article-content {
  grid-column: 1;
}


.article-sidebar {
order: 0;
}

.toc {
position: static;
padding: 0 0 20px;
}

.toc ul {
display: grid;
grid-template-columns: 1fr 1fr;
}

.related-grid {
grid-template-columns: repeat(2, 1fr);
}

.hero-visual-shield {
right: 6%;
}

}

@media (max-width: 640px) {

.article-hero {
padding: 55px 0 45px;
}

.article-hero h1 {
font-size: 43px;
}

.article-deck {
font-size: 17px;
}

.article-meta {
font-size: 11px;
}

.article-hero-image,
.article-hero-visual {
margin-top: 35px;
}

.article-hero-visual {
min-height: 260px;
padding: 28px;
}

.hero-visual-content strong {
font-size: 30px;
}

.hero-visual-shield {
width: 85px;
height: 100px;
right: 5%;
opacity: 0.6;
font-size: 30px;
}

.article-layout {
padding: 45px 0 55px;
}

.toc ul {
grid-template-columns: 1fr;
}

.prose {
font-size: 16px;
line-height: 1.8;
}

.prose h2 {
margin-top: 45px;
font-size: 28px;
}

.prose h3 {
font-size: 21px;
}

.article-takeaways {
padding: 23px;
}

.security-resource {
padding: 26px;
}

.security-resource h3 {
font-size: 22px;
}

.related-section {
padding: 55px 0 65px;
}

.related-heading h2 {
font-size: 29px;
}

.related-grid {
grid-template-columns: 1fr;
}

}

/* =========================
   SIMPLE PAGES
========================= */

.simple-page {
  padding: 100px 0;
}

.narrow {
  max-width: 800px;
}

.simple-page h1 {
  font-size: 54px;

  line-height: 1.05;

  letter-spacing: -0.05em;
}

.lead {
  font-size: 21px;

  color: var(--muted);
}


/* =====================================================
   CYBERSECURITY FOOTER
===================================================== */

.site-footer {
  position: relative;

  margin-top: 80px;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(91, 75, 219, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 70%,
      rgba(37, 99, 235, 0.13),
      transparent 30%
    ),
    #080d18;

  color: #c7cfdd;

  overflow: hidden;
}


/* =========================
   SECURITY SIGNAL
========================= */

.footer-signal {
  height: 54px;

  border-top:
    1px solid rgba(255, 255, 255, 0.06);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.06);

  background:
    linear-gradient(
      90deg,
      rgba(91, 75, 219, 0.08),
      transparent 35%,
      rgba(37, 99, 235, 0.08)
    );
}

.signal-line {
  height: 100%;

  display: flex;

  align-items: center;

  gap: 0;
}

.signal-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #7c6cff;

  box-shadow:
    0 0 14px rgba(124, 108, 255, 0.75);

  flex-shrink: 0;
}

.signal-track {
  width: 90px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(124, 108, 255, 0.55),
      rgba(255, 255, 255, 0.08)
    );
}


/* =========================
   FOOTER MAIN
========================= */

.footer-main {
  padding: 70px 0 65px;

  display: grid;

  grid-template-columns:
    1.5fr
    0.8fr
    1.3fr
    0.9fr;

  gap: 55px;
}


/* =========================
   FOOTER BRAND
========================= */

.footer-logo {
  display: inline-flex;

  align-items: center;

  gap: 11px;

  color: #ffffff;

  font-size: 23px;

  font-weight: 850;

  letter-spacing: -0.02em;
}

.footer-logo:hover {
  color: #ffffff;
}

.footer-logo-mark {
  display: grid;

  place-items: center;

  width: 37px;
  height: 37px;

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      #5b4bdb,
      #2563eb
    );

  color: #ffffff;

  font-size: 17px;

  box-shadow:
    0 8px 25px rgba(91, 75, 219, 0.25);
}

.footer-description {
  max-width: 340px;

  margin: 18px 0 22px;

  color: #8f9bb0;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================
   SECURITY STATUS
========================= */

.security-status {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 8px 11px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 7px;

  background:
    rgba(255, 255, 255, 0.035);

  color: #9ca9bc;

  font-size: 10px;

  font-weight: 750;

  letter-spacing: 0.04em;
}

.status-indicator {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #10b981;

  box-shadow:
    0 0 12px rgba(16, 185, 129, 0.75);

  flex-shrink: 0;
}


/* =========================
   FOOTER COLUMNS
========================= */

.footer-column {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}

.footer-column h3 {
  margin: 0 0 20px;

  color: #ffffff;

  font-size: 12px;

  font-weight: 850;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.footer-column > a {
  margin-bottom: 11px;

  color: #8f9bb0;

  font-size: 13px;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer-column > a:hover {
  color: #ffffff;

  transform: translateX(3px);
}


/* =========================
   SECURITY CATEGORY DOTS
========================= */

.footer-categories > a {
  display: flex;

  align-items: center;

  gap: 9px;
}

.category-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  flex-shrink: 0;
}


/* AI & LLM */

.dot-ai-llm-security {
  background: #8b5cf6;

  box-shadow:
    0 0 8px rgba(139, 92, 246, 0.65);
}


/* API */

.dot-api-security {
  background: #3b82f6;

  box-shadow:
    0 0 8px rgba(59, 130, 246, 0.65);
}


/* WAAP */

.dot-waap {
  background: #06b6d4;

  box-shadow:
    0 0 8px rgba(6, 182, 212, 0.65);
}


/* WAF */

.dot-waf {
  background: #6366f1;

  box-shadow:
    0 0 8px rgba(99, 102, 241, 0.65);
}


/* DDoS */

.dot-ddos-protection {
  background: #ef4444;

  box-shadow:
    0 0 8px rgba(239, 68, 68, 0.65);
}


/* Bot */

.dot-bot-protection {
  background: #10b981;

  box-shadow:
    0 0 8px rgba(16, 185, 129, 0.65);
}


/* Threat Intelligence */

.dot-threat-intelligence {
  background: #f59e0b;

  box-shadow:
    0 0 8px rgba(245, 158, 11, 0.65);
}


/* Cloud */

.dot-cloud-security {
  background: #14b8a6;

  box-shadow:
    0 0 8px rgba(20, 184, 166, 0.65);
}


/* =========================
   SECURITY FOCUS
========================= */

.footer-focus p {
  margin: 0 0 9px;

  color: #8f9bb0;

  font-size: 13px;
}


/* =========================
   SHIELD GRAPHIC
========================= */

.footer-shield {
  width: 72px;
  height: 82px;

  margin-top: 16px;

  display: grid;

  place-items: center;

  clip-path: polygon(
    50% 0%,
    92% 15%,
    88% 62%,
    50% 100%,
    12% 62%,
    8% 15%
  );

  background:
    linear-gradient(
      135deg,
      rgba(91, 75, 219, 0.45),
      rgba(37, 99, 235, 0.18)
    );
}

.footer-shield-inner {
  width: 52px;
  height: 61px;

  display: grid;

  place-items: center;

  clip-path: polygon(
    50% 0%,
    92% 15%,
    88% 62%,
    50% 100%,
    12% 62%,
    8% 15%
  );

  background:
    rgba(255, 255, 255, 0.08);

  color:
    rgba(255, 255, 255, 0.65);

  font-size: 21px;

  font-weight: 800;
}


/* =========================
   FOOTER BOTTOM
========================= */

.footer-bottom {
  min-height: 72px;

  border-top:
    1px solid rgba(255, 255, 255, 0.07);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  color: #667085;

  font-size: 11px;
}

.footer-bottom-links {
  display: flex;

  align-items: center;

  gap: 10px;
}

.footer-bottom-links a {
  color: #7d889b;

  transition:
    color 0.2s ease;
}

.footer-bottom-links a:hover {
  color: #ffffff;
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

  /* FOOTER */

  .footer-main {
    grid-template-columns:
      1fr 1fr;

    gap: 45px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }


  /* EXISTING SITE */

  .hero-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .hero-card {
    display: none;
  }

  .grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .article-body {
    grid-template-columns: 1fr;
  }

  .toc {
    position: static;

    margin-bottom: 30px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 640px) {

  /* FOOTER */

  .site-footer {
    margin-top: 55px;
  }

  .footer-signal {
    height: 45px;
  }

  .signal-track {
    width: 45px;
  }

  .footer-main {
    grid-template-columns:
      1fr 1fr;

    gap: 38px 25px;

    padding: 50px 0 45px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-description {
    max-width: 100%;
  }

  .footer-focus {
    grid-column: 1 / -1;
  }

  .footer-shield {
    display: none;
  }

  .footer-bottom {
    min-height: auto;

    padding: 20px 0;

    display: block;

    line-height: 1.8;
  }

  .footer-bottom-links {
    margin-top: 8px;
  }


  /* EXISTING SITE */

  .container {
    width: calc(100% - 28px);
  }

  .site-header {
    height: 68px;
  }

  nav {
    gap: 14px;

    font-size: 12px;
  }

  .hero-grid {
    min-height: auto;

    padding: 65px 0;
  }

  .hero h1,
  .banner h1,
  .category-banner h1 {
    font-size: 45px;
  }

  .hero-sub {
    font-size: 18px;
  }

  .section {
    padding: 55px 0;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .heading {
    display: block;
  }

  .heading > a {
    display: inline-block;

    margin-top: 10px;
  }

  .banner,
  .category-banner {
    padding: 60px 0;
  }

  .category-banner h2 {
    font-size: 20px;
  }

  .category-banner p,
  .banner p {
    font-size: 16px;
  }

  .article {
    padding: 55px 0;
  }

  .article-head h1 {
    font-size: 43px;
  }

  .deck {
    font-size: 18px;
  }

  .article-body {
    display: block;
  }

  .prose {
    font-size: 16px;
  }

  .simple-page {
    padding: 65px 0;
  }

  .simple-page h1 {
    font-size: 43px;
  }

  .visual-content {
    padding: 22px;
  }

  .visual-content strong {
    font-size: 26px;
  }

  .visual-label {
    font-size: 9px;
  }

}

/* WAF Virtual Patching Hero */

.article-hero-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(37, 99, 235, 0.22),
      transparent 38%
    ),
    linear-gradient(120deg, #071225, #101b36 65%, #080f20);
}

.article-hero-visual .hero-visual-grid {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.15) 1px, transparent 1px);
  background-size: 32px 32px;
}

.article-hero-visual .hero-visual-content {
  position: relative;
  z-index: 3;
  width: 48%;
}

.article-hero-visual .hero-visual-content strong {
  color: #f8fafc;
  line-height: 1.12;
}

.article-hero-visual .hero-visual-content small {
  color: #93c5fd;
  letter-spacing: 1.2px;
}

.waf-security-scene {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 4%;
  width: 46%;
  height: 78%;
  transform: translateY(-50%);
}

.waf-traffic {
  position: absolute;
  left: 0;
  z-index: 2;
  padding: 8px 10px;
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 6px;
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  font: 600 10px/1.3 monospace;
}

.waf-traffic-one { top: 20%; }
.waf-traffic-two { top: 36%; }

.waf-traffic-line {
  position: absolute;
  top: 31%;
  left: 24%;
  width: 20%;
  border-top: 2px dashed #f87171;
}

.waf-firewall {
  position: absolute;
  top: 17%;
  left: 38%;
  width: 29%;
  height: 56%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #60a5fa;
  border-radius: 14px;
  background: rgba(30, 64, 175, 0.3);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
  color: #dbeafe;
}

.waf-shield-icon {
  font-size: 38px;
  color: #60a5fa;
}

.waf-firewall strong { font-size: 20px; }

.waf-firewall small,
.waf-server small {
  font-size: 9px;
  letter-spacing: 1px;
}

.waf-blocked {
  position: absolute;
  top: 6%;
  right: 0;
  color: #fca5a5;
  font: 700 9px/1.4 monospace;
}

.waf-blocked span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  border-radius: 50%;
  background: #7f1d1d;
}

.waf-server {
  position: absolute;
  top: 34%;
  right: 0;
  width: 23%;
  height: 29%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(52, 211, 153, 0.6);
  border-radius: 8px;
  background: rgba(6, 78, 59, 0.3);
  color: #a7f3d0;
}

.server-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 12px #34d399;
}

@media (max-width: 640px) {
  .article-hero-visual .hero-visual-content {
    width: 100%;
  }

  .waf-security-scene {
    right: 3%;
    width: 52%;
    height: 52%;
    opacity: 0.9;
  }

  .waf-traffic {
    font-size: 7px;
    padding: 5px;
  }

  .waf-firewall strong { font-size: 15px; }

  .waf-shield-icon { font-size: 26px; }

  .waf-firewall small,
  .waf-server small { font-size: 7px; }

  .waf-blocked { font-size: 7px; }
}

/* Secvora: Category-specific abstract article hero */

.article-hero-visual {
  --hero-accent: #60a5fa;
  --hero-accent-rgb: 96, 165, 250;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 300px;
  background:
    radial-gradient(
      circle at 76% 48%,
      rgba(var(--hero-accent-rgb), 0.24),
      transparent 34%
    ),
    linear-gradient(120deg, #071225, #101b36 68%, #080f20);
}

.article-hero-visual .hero-visual-content {
  position: relative;
  z-index: 4;
  width: 48%;
}

.article-hero-visual .hero-visual-content strong {
  color: #f8fafc;
  line-height: 1.12;
}

.article-hero-visual .hero-visual-content small {
  color: var(--hero-accent);
}

.abstract-hero-art {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 5%;
  width: 40%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--hero-accent-rgb), 0.12),
    transparent 68%
  );
}

.abstract-orbit {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(var(--hero-accent-rgb), 0.58);
  border-radius: 50%;
  transform: rotate(-28deg) scaleY(0.72);
  box-shadow: 0 0 25px rgba(var(--hero-accent-rgb), 0.08);
}

.orbit-two {
  inset: 4%;
  transform: rotate(55deg) scaleY(0.72);
  border-style: dashed;
  opacity: 0.7;
}

.abstract-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid var(--hero-accent);
  border-radius: 32%;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(var(--hero-accent-rgb), 0.85),
    rgba(var(--hero-accent-rgb), 0.12) 58%,
    #0b1530
  );
  box-shadow:
    0 0 24px rgba(var(--hero-accent-rgb), 0.4),
    inset 0 0 20px rgba(var(--hero-accent-rgb), 0.22);
}

.abstract-node {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  border: 1px solid var(--hero-accent);
  border-radius: 50%;
  background: #101b36;
  box-shadow: 0 0 16px rgba(var(--hero-accent-rgb), 0.6);
}

.node-one { top: 13%; left: 43%; }
.node-two { top: 42%; right: 5%; }
.node-three { bottom: 12%; left: 39%; }
.node-four { top: 44%; left: 5%; }

.abstract-beam {
  position: absolute;
  top: 50%;
  left: 13%;
  width: 74%;
  border-top: 1px solid rgba(var(--hero-accent-rgb), 0.6);
  transform: rotate(-24deg);
}

.hero-visual-index {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 16px;
  color: rgba(226, 232, 240, 0.58);
  font: 9px/1.4 monospace;
  letter-spacing: 1.4px;
}

/* Category palettes */

.hero-visual-ai-llm-security {
  --hero-accent: #c4b5fd;
  --hero-accent-rgb: 167, 139, 250;
}

.hero-visual-waap {
  --hero-accent: #60a5fa;
  --hero-accent-rgb: 59, 130, 246;
}

.hero-visual-waf,
.hero-visual-waf-security {
  --hero-accent: #67e8f9;
  --hero-accent-rgb: 34, 211, 238;
}

.hero-visual-api-security {
  --hero-accent: #c4b5fd;
  --hero-accent-rgb: 139, 92, 246;
}

.hero-visual-ddos-protection {
  --hero-accent: #fca5a5;
  --hero-accent-rgb: 239, 68, 68;
}

.hero-visual-bot-protection {
  --hero-accent: #6ee7b7;
  --hero-accent-rgb: 16, 185, 129;
}

.hero-visual-threat-intelligence {
  --hero-accent: #fcd34d;
  --hero-accent-rgb: 245, 158, 11;
}

.hero-visual-dns-security {
  --hero-accent: #7dd3fc;
  --hero-accent-rgb: 14, 165, 233;
}

.hero-visual-cdn {
  --hero-accent: #fdba74;
  --hero-accent-rgb: 249, 115, 22;
}

.hero-visual-cloud-security {
  --hero-accent: #93c5fd;
  --hero-accent-rgb: 96, 165, 250;
}

.hero-visual-hybrid-waf {
  --hero-accent: #5eead4;
  --hero-accent-rgb: 20, 184, 166;
}

.hero-visual-kubernetes-waf {
  --hero-accent: #a5b4fc;
  --hero-accent-rgb: 99, 102, 241;
}

.hero-visual-on-premises-waf {
  --hero-accent: #cbd5e1;
  --hero-accent-rgb: 148, 163, 184;
}

@media (max-width: 640px) {
  .article-hero-visual {
    min-height: 280px;
  }

  .article-hero-visual .hero-visual-content {
    width: 65%;
  }

  .abstract-hero-art {
    right: -8%;
    width: 54%;
    opacity: 0.8;
  }

  .hero-visual-index {
    right: 12px;
    bottom: 10px;
    font-size: 7px;
  }
}


/* =========================================
   SECVORA GLOBAL DESIGN SYSTEM
   Clean Cybersecurity Editorial Theme
========================================= */

:root {
  --ink: #172033;
  --muted: #586579;
  --line: #e1e7f0;
  --paper: #f5f7fb;
  --accent: #2457d6;
  --accent-hover: #1946b8;
  --navy: #101b2d;
  --cyan: #0891b2;
  --surface: #ffffff;
  --max: 1180px;

  --font-ui: Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  --reading-width: 740px;
  --body-size: 17.5px;
  --body-leading: 1.8;
}

/* Global typography */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: #ffffff;
  background: #2457d6;
}

a {
  transition: color 0.18s ease;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #0891b2;
  outline-offset: 3px;
}

/* Header */

.site-header {
  background: var(--navy);
  border-bottom: 1px solid #26354b;
  box-shadow: 0 3px 16px rgba(16, 27, 45, 0.08);
}

.site-header .brand {
  color: #ffffff;
  letter-spacing: -0.035em;
}

.site-header .brand-mark {
  background: #2457d6;
  border-radius: 9px;
}

.site-header nav a {
  color: #dce5f2;
  transition: color 0.2s ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: #7dd3fc;
}

/* Main backgrounds */

.section,
.article,
.simple-page {
  color: var(--ink);
}

.alt,
.related-section {
  background: #f5f7fb;
  border-color: var(--line);
}

/* Article cards */

.card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(16, 27, 45, 0.035);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: #c5d4ef;
  box-shadow: 0 12px 28px rgba(16, 27, 45, 0.09);
}

.card-image img {
  transition: transform 0.35s ease;
}

.card:hover .card-image img {
  transform: scale(1.035);
}

/* Article header */

.article-hero {
  background: #ffffff;
  color: var(--ink);
  padding: 64px 0 48px;
}

.article-category {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid #d5e3ff;
  border-radius: 6px;
  background: #edf4ff;
  color: #1946b8;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.025em;
}

.article-hero h1 {
  max-width: 900px;
  margin: 22px 0 18px;
  color: #172033;
  font-size: clamp(36px, 4.2vw, 52px);
  font-weight: 780;
  line-height: 1.13;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.article-deck {
  max-width: 760px;
  margin: 0 0 22px;
  color: #586579;
  font-size: 19px;
  line-height: 1.75;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: #586579;
  font-size: 13px;
  line-height: 1.6;
}

.article-hero-image,
.article-hero-visual {
  margin-top: 36px;
  border-radius: 14px;
  overflow: hidden;
}

/* Article layout */

.article-layout {
  padding-top: 48px;
  padding-bottom: 80px;
}

.article-layout > .article-content {
  width: 100%;
  max-width: var(--reading-width);
  min-width: 0;
}

/* Article body: readable rhythm */

.prose {
  color: #293548;
  font-family: var(--font-ui);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  overflow-wrap: break-word;
}

.prose > p {
  margin: 0 0 21px;
}

.prose h2 {
  margin: 48px 0 17px;
  color: #172033;
  font-size: clamp(27px, 3vw, 32px);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.028em;
  scroll-margin-top: 100px;
}

.prose h3 {
  margin: 32px 0 12px;
  color: #202c40;
  font-size: 23px;
  font-weight: 720;
  line-height: 1.38;
  letter-spacing: -0.018em;
  scroll-margin-top: 100px;
}

.prose h4 {
  margin: 26px 0 10px;
  color: #202c40;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
}

.prose h2 + p,
.prose h3 + p,
.prose h4 + p {
  margin-top: 0;
}

.prose p + p {
  margin-top: 0;
}

.prose ul,
.prose ol {
  margin: 0 0 25px;
  padding-left: 27px;
}

.prose li {
  padding-left: 3px;
  margin-bottom: 8px;
  line-height: 1.8;
}

.prose li:last-child {
  margin-bottom: 0;
}

.prose li > ul,
.prose li > ol {
  margin-top: 10px;
  margin-bottom: 10px;
}

.prose strong {
  color: #172033;
  font-weight: 730;
}

.prose a {
  color: #2457d6;
  text-decoration: underline;
  text-decoration-color: #b7c9f6;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  color: #1946b8;
  text-decoration-color: currentColor;
}

.prose blockquote {
  margin: 30px 0;
  padding: 20px 24px;
  border-left: 4px solid #2457d6;
  border-radius: 0 9px 9px 0;
  background: #f0f5ff;
  color: #35445b;
  line-height: 1.8;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

/* Tables */

.prose table {
  display: block;
  width: 100%;
  margin: 28px 0;
  overflow-x: auto;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.prose th,
.prose td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
}

.prose th {
  background: #edf3fc;
  color: #172033;
  font-size: 14px;
  font-weight: 750;
}

.prose td {
  font-size: 15px;
}

.prose tr:last-child td {
  border-bottom: 0;
}

/* Inline code and code blocks */

.prose :not(pre) > code {
  padding: 3px 6px;
  border: 1px solid #e1e7f0;
  border-radius: 5px;
  background: #f1f4f9;
  color: #23499c;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.prose pre {
  margin: 26px 0;
  padding: 22px;
  overflow-x: auto;
  border: 1px solid #26354b;
  border-radius: 10px;
  background: #101b2d;
  color: #e5edf8;
  font-size: 14px;
  line-height: 1.75;
  tab-size: 2;
}

.prose pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

/* Images */

.prose img {
  height: auto;
  max-width: 100%;
  margin: 28px auto;
  border-radius: 10px;
}

.prose figure {
  margin: 30px 0;
}

.prose figcaption {
  margin-top: 9px;
  color: #586579;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* Takeaways and related articles */

.article-takeaways {
  margin-top: 48px;
  border-color: #dce6f5;
  border-radius: 12px;
  background: #f2f6fd;
}

.takeaways-label,
.resource-eyebrow {
  color: #2457d6;
}

.related-heading h2 {
  color: #172033;
}

/* Footer */

.site-footer {
  background-color: #101b2d;
  color: #dce5f2;
}

.site-footer a {
  color: #dce5f2;
}

.site-footer a:hover {
  color: #7dd3fc;
}

.site-footer p {
  line-height: 1.8;
}

/* Responsive typography and spacing */

@media (max-width: 900px) {
  .article-layout {
    padding-top: 36px;
    padding-bottom: 60px;
  }

  .article-layout > .article-content {
    max-width: 100%;
  }

  .article-hero {
    padding: 48px 0 38px;
  }
}

@media (max-width: 640px) {
  :root {
    --body-size: 16.5px;
    --body-leading: 1.8;
  }

  .article-hero {
    padding: 38px 0 30px;
  }

  .article-hero h1 {
    margin: 18px 0 14px;
    font-size: clamp(32px, 8vw, 38px);
    line-height: 1.18;
  }

  .article-deck {
    font-size: 17px;
    line-height: 1.7;
  }

  .article-meta {
    gap: 7px;
    font-size: 12px;
  }

  .article-layout {
    padding-top: 28px;
    padding-bottom: 45px;
  }

  .prose h2 {
    margin-top: 38px;
    margin-bottom: 14px;
    font-size: 26px;
    line-height: 1.32;
  }

  .prose h3 {
    margin-top: 27px;
    margin-bottom: 10px;
    font-size: 21px;
  }

  .prose > p {
    margin-bottom: 18px;
  }

  .prose ul,
  .prose ol {
    padding-left: 23px;
    margin-bottom: 22px;
  }

  .prose pre {
    padding: 16px;
    font-size: 13px;
  }

  .prose th,
  .prose td {
    padding: 10px 12px;
  }

  .article-hero-image,
  .article-hero-visual {
    margin-top: 26px;
    border-radius: 10px;
  }

  .article-takeaways {
    margin-top: 35px;
    padding: 22px;
  }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}