/* =========================================================
   Cytrusst / Activeklife — GRC landing page
   ========================================================= */

:root {
  --navy-950: #0b0e1a;
  --navy-900: #0f1424;
  --navy-800: #161d33;
  --indigo-600: #0F62FE;
  --indigo-500: #0050e6;
  --blue-600: #0F62FE;
  --blue-500: #0F62FE;
  --cyan-500: #22c3d6;
  --teal-500: #1fbfa8;
  --orange-500: #ff9d3d;
  --green-500: #2fbf71;
  --ink-900: #424245;
  --ink-700: #3a3f52;
  --ink-500: #6b7188;
  --ink-300: #9aa0b4;
  --line: #1D1D1F;
  --surface: #ffffff;
  --surface-muted: #FFFFFF99;
  ;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max-width: 1180px;
  --shadow-sm: 0 1px 2px rgba(16, 19, 31, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 19, 31, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink-900);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #FFFFFF26;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.brand__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-500), var(--green-500), var(--cyan-500));
  flex: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-700);
}

.nav-links a {
  transition: color 0.15s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--indigo-600);
}

.nav-links a.active {
  color: var(--indigo-600);
  font-weight: 700;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.logo {
  height: 25px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 88px;
  text-align: center;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 15% 10%, rgba(15, 98, 254, 0.16), transparent 60%),
    radial-gradient(55% 55% at 90% 25%, rgba(34, 195, 214, 0.14), transparent 60%),
    linear-gradient(180deg, #eef0fb 0%, #f4f6fd 55%, #ffffff 100%);
}

.hero__close {
  position: absolute;
  top: 110px;
  left: 10%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(16, 19, 31, 0.15);
  background: transparent;
  cursor: pointer;
  color: var(--ink-500);
  font-size: 1.2rem;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(16, 19, 31, 0.15);
}

.hero__ring--right {
  width: 80px;
  height: 80px;
  top: 90px;
  right: 12%;
}

.hero__ring--right::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(16, 19, 31, 0.15);
}

.hero__content {
  position: relative;
}

.badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(15, 98, 254, 0.1);
  color: var(--indigo-600);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}

.hero__title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.hero__title .accent {
  color: var(--indigo-600);
}

.hero__subtitle {
  margin: 24px auto 0;
  color: var(--ink-500);
  font-size: 1.02rem;
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--indigo-600);
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 98, 254, 0.28);
}

.btn--primary:hover {
  background: #0050e6;
}

.btn--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-900);
  font-weight: 700;
}

.btn--outline:hover {
  border-color: var(--indigo-600);
  color: var(--indigo-600);
}

.btn--light {
  background: #fff;
  color: var(--indigo-600);
}

.btn--light:hover {
  background: #eceaff;
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: #fff;
}

.btn--ghost:hover {
  border-color: #fff;
}

/* =========================================================
   SECTION GENERIC
   ========================================================= */
.section {
  padding: 84px 0;
}

.section__title {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.section__subtitle {
  color: var(--ink-500);
  margin-top: 10px;
  font-size: 1rem;
}

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--indigo-600);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.eyebrow--light {
  color: var(--blue-500);
}

/* =========================================================
   FEATURE CARD (big GRC card)
   ========================================================= */
.feature-card {
  margin-top: 40px;
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
  padding: 40px clamp(20px, 4vw, 44px);
  backdrop-filter: blur(40px);
  box-shadow: 0px 10px 20px 0px #00000008;
  border: 1px solid #FFFFFFB3
}

.feature-card h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 800;
  color: var(--ink-900);
}

.feature-card__desc {
  margin-top: 14px;
  color: var(--ink-700);
  line-height: 1.6;
}

.feature-card__highlight {
  margin-top: 16px;
  color: var(--indigo-600);
  font-weight: 600;
  line-height: 1.5;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 22px;
}

.tag-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--ink-700);
  font-weight: 500;
}

.tag-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--indigo-600);
}

.feature-card__visual {
  margin-top: 32px;
  height: 160px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(15, 98, 254, 0.08), rgba(34, 195, 214, 0.08)),
    repeating-linear-gradient(90deg, rgba(15, 98, 254, 0.05) 0 1px, transparent 1px 40px);
  border: 1px dashed rgba(15, 98, 254, 0.25);
}

/* =========================================================
   MODULE GRID
   ========================================================= */
.module-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.module-card {
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
  padding: 30px clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(40px);
  box-shadow: 0px 10px 20px 0px #00000008;
  border: 1px solid #FFFFFFB3;
}

.module-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink-900);
}

.module-card>p {
  margin-top: 8px;
  color: var(--ink-500);
  font-size: 0.92rem;
  line-height: 1.55;
}

.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.check-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--ink-900);
  font-weight: 700;
}

.check-list li::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: var(--indigo-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.module-card:nth-child(1) .check-list li::before {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.25 1.75H2.33333C2.01117 1.75 1.75 2.01117 1.75 2.33333V5.25C1.75 5.57217 2.01117 5.83333 2.33333 5.83333H5.25C5.57217 5.83333 5.83333 5.57217 5.83333 5.25V2.33333C5.83333 2.01117 5.57217 1.75 5.25 1.75Z' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.6667 1.75H8.75C8.42783 1.75 8.16667 2.01117 8.16667 2.33333V5.25C8.16667 5.57217 8.42783 5.83333 8.75 5.83333H11.6667C11.9888 5.83333 12.25 5.57217 12.25 5.25V2.33333C12.25 2.01117 11.9888 1.75 11.6667 1.75Z' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.6667 8.16667H8.75C8.42783 8.16667 8.16667 8.42783 8.16667 8.75V11.6667C8.16667 11.9888 8.42783 12.25 8.75 12.25H11.6667C11.9888 12.25 12.25 11.9888 12.25 11.6667V8.75C12.25 8.42783 11.9888 8.16667 11.6667 8.16667Z' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.25 8.16667H2.33333C2.01117 8.16667 1.75 8.42783 1.75 8.75V11.6667C1.75 11.9888 2.01117 12.25 2.33333 12.25H5.25C5.57217 12.25 5.83333 11.9888 5.83333 11.6667V8.75C5.83333 8.42783 5.57217 8.16667 5.25 8.16667Z' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.module-card:nth-child(2) .check-list li::before {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M5.95873 2.75014H10.9175C11.2269 2.75014 11.5237 2.87307 11.7425 3.09188C11.9613 3.31069 12.0842 3.60746 12.0842 3.9169V8.87563M9.7507 6.25042H9.45901M10.9175 10.9175H2.75014C2.4407 10.9175 2.14393 10.7945 1.92512 10.5757C1.70631 10.3569 1.58338 10.0601 1.58338 9.7507V3.9169C1.58338 3.60746 1.70631 3.31069 1.92512 3.09188C2.14393 2.87307 2.4407 2.75014 2.75014 2.75014M1 1L12.6676 12.6676M3.9169 6.25042H6.25042M3.9169 8.58394H5.37535' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.module-card:nth-child(4) .check-list li::before {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M12.7168 5.83345C12.9832 7.14087 12.7934 8.50011 12.1789 9.6845C11.5644 10.8689 10.5625 11.8068 9.3402 12.3419C8.1179 12.877 6.7491 12.9768 5.46208 12.6248C4.17505 12.2728 3.0476 11.4903 2.26773 10.4076C1.48786 9.32496 1.10272 8.00767 1.17654 6.67542C1.25036 5.34318 1.77867 4.0765 2.67337 3.08663C3.56807 2.09676 4.77508 1.44353 6.09311 1.23588C7.41114 1.02823 8.76053 1.2787 9.91624 1.94553M5.2498 6.4165L6.9998 8.1665L12.8331 2.33317' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.module-card:nth-child(6) .check-list li::before {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M8.75014 5.24992L5.24986 8.7502M5.24986 5.24992L8.75014 8.7502M12.8338 7.00006C12.8338 10.222 10.2219 12.8339 7 12.8339C3.77808 12.8339 1.1662 10.222 1.1662 7.00006C1.1662 3.77814 3.77808 1.16626 7 1.16626C10.2219 1.16626 12.8338 3.77814 12.8338 7.00006Z' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.module-card:nth-child(7) .check-list li::before {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='14' viewBox='0 0 13 14' fill='none'%3E%3Cpath d='M11.5 2.75014C11.5 3.71672 9.14949 4.50028 6.25 4.50028C3.3505 4.50028 1 3.71672 1 2.75014M11.5 2.75014C11.5 1.78356 9.14949 1 6.25 1C3.3505 1 1 1.78356 1 2.75014M11.5 2.75014V10.9175C11.5 11.3816 10.9469 11.8268 9.96231 12.155C8.97774 12.4832 7.64239 12.6676 6.25 12.6676C4.85761 12.6676 3.52226 12.4832 2.53769 12.155C1.55312 11.8268 1 11.3816 1 10.9175V2.75014M1 6.8338C1 7.29797 1.55312 7.74312 2.53769 8.07134C3.52226 8.39955 4.85761 8.58394 6.25 8.58394C7.64239 8.58394 8.97774 8.39955 9.96231 8.07134C10.9469 7.74312 11.5 7.29797 11.5 6.8338' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.module-card:nth-child(9) .check-list li::before {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M7 12.8339C10.2219 12.8339 12.8338 10.222 12.8338 7.00006C12.8338 3.77814 10.2219 1.16626 7 1.16626C3.77808 1.16626 1.1662 3.77814 1.1662 7.00006C1.1662 10.222 3.77808 12.8339 7 12.8339Z' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.module-card:nth-child(10) .check-list li::before {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M6.13234 2.83242L7.65321 1.26549C7.69653 1.21548 7.75557 1.18169 7.82063 1.16966C7.88569 1.15763 7.9529 1.16807 8.01125 1.19928C8.06959 1.23048 8.11559 1.28059 8.14169 1.34139C8.1678 1.40218 8.17246 1.47005 8.15491 1.53384L7.3516 4.05225M9.13298 5.83348H11.6672C11.7776 5.8331 11.8858 5.86406 11.9793 5.92275C12.0728 5.98144 12.1478 6.06545 12.1954 6.16503C12.2431 6.26461 12.2615 6.37567 12.2485 6.4853C12.2356 6.59494 12.1918 6.69864 12.1222 6.78437L11.1188 7.81869M9.49306 9.49271L6.34689 12.7345C6.30357 12.7845 6.24453 12.8183 6.17947 12.8303C6.11441 12.8424 6.0472 12.8319 5.98886 12.8007C5.93051 12.7695 5.88452 12.7194 5.85841 12.6586C5.8323 12.5978 5.82764 12.5299 5.84519 12.4662L6.96528 8.95426C6.9983 8.86586 7.0094 8.77077 6.9976 8.67715C6.98581 8.58353 6.95147 8.49416 6.89755 8.41672C6.84363 8.33928 6.77173 8.27608 6.68801 8.23253C6.60429 8.18899 6.51126 8.1664 6.4169 8.16671H2.33324C2.22284 8.16708 2.11461 8.13613 2.0211 8.07744C1.9276 8.01875 1.85267 7.93473 1.80502 7.83515C1.75736 7.73557 1.73895 7.62451 1.7519 7.51488C1.76486 7.40525 1.80865 7.30154 1.8782 7.21581L4.5075 4.50722M1.1662 1.1665L12.8338 12.8339' stroke='%230F62FE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.module-card__visual {
  margin-top: 22px;
  border-radius: var(--radius-md);
  min-height: 150px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-800));
}

.module-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* individual visual flavors */
.visual--network {
  background: linear-gradient(160deg, #10162b, #1b2340);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(15, 98, 254, 0.35), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(34, 195, 214, 0.3), transparent 45%),
    linear-gradient(160deg, #10162b, #1b2340);
}

.visual--heatmap {
  background: linear-gradient(160deg, #10162b, #1b2340);
}

.heatmap-grid {
  display: flex;
  gap: 14px;
}

.heatmap-grid span {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #10131f;
  font-size: 0.85rem;
}

.visual--panel {
  background: linear-gradient(160deg, #232a52, #34407a);
}

.mock-panel {
  width: 78%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mock-panel__row {
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
}

.mock-panel__row:nth-child(2) {
  width: 80%;
  background: rgba(255, 255, 255, 0.12);
}

.mock-panel__row:nth-child(3) {
  width: 60%;
  background: rgba(255, 255, 255, 0.12);
}

.visual--flow {
  background: linear-gradient(160deg, #10162b, #1b2340);
  padding: 18px;
}

.flow-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.flow-steps span:not(.arrow) {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #dbe1ff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 8px;
}

.flow-steps .arrow {
  color: var(--blue-500);
}

.visual--chart {
  background: linear-gradient(160deg, #10162b, #1b2340);
  padding: 20px;
}

.visual--chart svg {
  width: 100%;
  height: 70px;
}

.visual--api {
  background: linear-gradient(160deg, #10162b, #1b2340);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 20px;
}

.api-pill {
  background: rgba(15, 98, 254, 0.18);
  border: 1px solid rgba(15, 98, 254, 0.4);
  color: #cfe0ff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
}

.visual--gauge {
  background: linear-gradient(160deg, #1a1440, #241a5c);
}

.gauge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 8px solid var(--indigo-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  background: conic-gradient(var(--indigo-500) 0 90%, rgba(255, 255, 255, 0.1) 90% 100%);
}

.visual--incidents {
  background: linear-gradient(160deg, #10162b, #1b2340);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.incident-row {
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--orange-500);
}

.incident-row:nth-child(2) {
  border-left-color: var(--green-500);
  width: 85%;
}

/* =========================================================
   DARK SECTION — Beyond the Checklist
   ========================================================= */
.section--dark {
  background: var(--navy-950);
  color: #fff;
}

.section__title--light {
  color: #fff;
}

.advantage-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.advantage-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  backdrop-filter: blur(40px);
  box-shadow: 0px 10px 20px 0px #00000008;
  border: 1px solid #FFFFFFB3;
}

.advantage-card__icon {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 18px;
}

.advantage-card h4 {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.advantage-card p {
  color: #9aa0c0;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* =========================================================
   STATS SECTION
   ========================================================= */
.stats-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.stats-title {
  line-height: 1.18;
}

.link-arrow {
  color: var(--indigo-600);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

.link-arrow:hover {
  text-decoration: underline;
}

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

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat__num {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--indigo-600);
  letter-spacing: -0.02em;
}

.stat__label {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 0.95rem;
}

.stat__sub {
  color: var(--ink-500);
  font-size: 0.82rem;
}

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner {
  background: radial-gradient(80% 80% at 40% 70%, #0F62FE 0%, #201a61 50%, #120e36 100%);
  border-radius: var(--radius-lg);
  padding: 72px clamp(24px, 6vw, 64px);
  text-align: center;
  color: #fff;
}

.cta-banner h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 auto;
}

.cta-banner p {
  margin: 18px auto 0;
  color: #cdd0f2;
  line-height: 1.6;
}

.cta-banner__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.cta-banner__footer {
  margin-top: 64px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #9aa0c0;
}

.cta-banner__footer .brand__dot {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
}

.brand--light {
  color: #fff;
  font-weight: 700;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
  .module-grid {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 760px) {
  .nav-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
    display: none;
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  .nav-toggle {
    display: flex;
  }

  .hero {
    padding: 64px 0 56px;
  }

  .section {
    padding: 56px 0;
  }

  .stats-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-banner__footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 560px) {

  .advantage-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .hero__actions,
  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-banner {
    padding: 48px 22px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}