/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --green:          #10b981;
  --green-dark:     #0b2e26;
  --green-darkest:  #011812;
  --green-deep:     #010d0a;
  --green-card:     #061a14;
  --green-light:    #d1fae5;
  --text-h:         #111827;
  --text-body:      #4b5563;
  --text-light:     #6b7280;
  --bg-light:       #f9fafb;
  --white:          #ffffff;
  --border:         #e5e7eb;
  --font:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  color: var(--text-h);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
img, svg { display: block; }


/* ═══════════════════════════════════════
   LAYOUT HELPERS
═══════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ═══════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════ */
.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green);
  text-transform: uppercase;
}

.label-green { color: var(--green); }


/* ═══════════════════════════════════════
   FLOATING NAVBAR
═══════════════════════════════════════ */

.nav-float-wrap {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1160px;
  z-index: 1000;
  animation: nav-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nav-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(-18px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nav-float {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  transition: background 0.3s ease;
}

.nav-float.scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
}

/* ── Logo ── */
.nav-float-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  transition: opacity 0.15s;
}
.nav-float-logo:hover { opacity: 0.75; }

/* ── Center links ── */
.nav-float-links {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

.nav-float-item { position: relative; }

.nav-float-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(55, 65, 81, 0.8);
  border-radius: 9px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.nav-float-link:hover {
  color: #111827;
  background: rgba(0, 0, 0, 0.05);
}

.nav-chevron {
  transition: transform 0.2s ease;
  opacity: 0.5;
  flex-shrink: 0;
}
.has-dd:hover .nav-chevron  { transform: rotate(180deg); opacity: 0.8; }
.has-dd:hover .nav-float-link { color: #111827; }

/* ── CTA ── */
.nav-float-actions { display: flex; align-items: center; flex-shrink: 0; }

.nav-float-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  border-radius: 9999px;
  letter-spacing: -0.01em;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 6px rgba(16, 185, 129, 0.35);
  text-decoration: none;
}
.nav-float-cta:hover {
  background: #0ea570;
  transform: scale(1.025);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

/* ══════════════════════════════════
   DROPDOWN
══════════════════════════════════ */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 560px;
  display: flex;
  flex-direction: row;
  background: rgba(4, 18, 13, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), inset 0 0.5px 0 rgba(16, 185, 129, 0.08);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* delay hide by 120ms so mouse can travel into the dropdown before it closes */
  transition: opacity 0.18s 0.12s ease, visibility 0s 0.3s, transform 0.18s 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bridge the gap on the <li> so cursor doesn't leave hover area when moving into dropdown */
.nav-float-item.has-dd::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: -10px;
  right: -10px;
  height: 14px;
}

.nav-float-item.has-dd:hover .nav-dropdown,
.nav-dropdown:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  /* open immediately — no delay */
  transition: opacity 0.18s 0s ease, visibility 0s 0s, transform 0.18s 0s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Left column */
.dd-left {
  padding: 12px;
  width: 55%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid rgba(16, 185, 129, 0.08);
}

/* Full-width left panel (no right card column) */
.dd-left.dd-full {
  width: 100%;
  border-right: none;
}

/* 3-column grid — Solutions */
.dd-left.dd-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* 2-column grid — Resources / Company */
.dd-left.dd-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

/* Right column */
.dd-right {
  padding: 10px;
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Dropdown widths */
#solutionsDropdown { width: 660px; }
#resourcesDropdown { width: 520px; }
#companyDropdown   { width: 520px; }

/* Dropdown cards */
.dd-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(16, 185, 129, 0.10);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.dd-item:hover {
  background: rgba(16, 185, 129, 0.09);
  border-color: rgba(16, 185, 129, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.dd-item-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.18);
  flex-shrink: 0;
  margin-top: 1px;
}

.dd-item-icon svg {
  width: 20px;
  height: 20px;
}

.dd-item-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 1px;
}

.dd-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  line-height: 1;
}

.dd-item-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.45;
}

/* Visual cards */
.dd-card {
  position: relative;
  padding: 14px;
  border-radius: 11px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.12);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  cursor: pointer;
}
.dd-card:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.24);
}

.dd-card-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}

.dd-card-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.38);
  position: relative;
  z-index: 1;
  line-height: 1.4;
}

.dd-card-graphic {
  position: absolute;
  bottom: -8px;
  right: -8px;
  opacity: 0.38;
  pointer-events: none;
}

/* ══════════════════════════════════
   HAMBURGER
══════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: rgba(55, 65, 81, 0.75);
  border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ══════════════════════════════════
   MOBILE MENU
══════════════════════════════════ */
.nav-mobile-menu {
  display: none;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  padding: 14px;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: dd-enter 0.22s ease both;
}
.nav-mobile-menu.open { display: flex; }

.mobile-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 4px;
}
.mobile-section:last-of-type { border-bottom: none; padding-bottom: 0; }

.mobile-section-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 12px 6px;
}

.mobile-item {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(55, 65, 81, 0.8);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  display: block;
}
.mobile-item:hover { background: rgba(16, 185, 129, 0.07); color: #111827; }

.mobile-cta { margin-top: 10px; width: 100%; text-align: center; justify-content: center; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width: 768px) {
  .nav-float-links,
  .nav-float-actions  { display: none; }
  .nav-hamburger      { display: flex; }
  .nav-float-wrap     { top: 12px; width: calc(100% - 28px); }
}


/* ═══════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 608px;
}

/* Hero animation layer */
.hero-gif-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.20;
  object-fit: cover;
  object-position: center;
}

/* Radial glow behind the hero content */
.hero-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 896px;
  height: 600px;
  border-radius: 9999px;
  background: radial-gradient(
    ellipse 60% 55% at 50% 50%,
    rgba(16, 185, 129, 0.15) 0%,
    rgba(16, 185, 129, 0) 70%
  );
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}

/* Hero content container */
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 804px;
  padding: 160px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-light);
  color: #0b2e26;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  align-self: flex-start;
  transition: background 0.15s;
  cursor: pointer;
  letter-spacing: 0.01em;
}

.hero-badge:hover { background: #bbf7d0; }

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Heading */
.hero-h1 {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.0;
  color: var(--text-h);
  letter-spacing: -0.03em;
}

.hero-green {
  color: #047857;
}

/* Subheadline */
.hero-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-body);
  line-height: 1.65;
  max-width: 576px;
}

/* CTA group */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 32px;
  border-radius: 9999px;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  white-space: nowrap;
}

.btn-primary:hover {
  background: #0ea570;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-h);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 9999px;
  border: 1.5px solid var(--border);
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: #9ca3af;
  background: var(--bg-light);
}

/* Hero video */
.hero-video-wrap {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: -150px;
  /* Dark backdrop so mix-blend-mode: screen works correctly —
     white backgrounds invert screen to full-white (invisible).
     DigiRoad's darkest green is used so the colour story stays on-brand. */
  background-color: #011812;
}

.hero-video {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}

/* Top: white (#ffffff) → transparent, revealing the dark wrap bg.
   This bridges the white hero text area above into the dark video zone. */
.hero-video-overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 240px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, #ffffff 0%, transparent 100%);
}

/* Left / right: dark wrap colour → transparent.
   Keeps the video centred and fades hard edges into the dark bg. */
.hero-video-overlay-lr {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #011812 0%,
    transparent 18%,
    transparent 82%,
    #011812 100%
  );
}

/* Bottom: transparent → white (#ffffff).
   Re-surfaces the white page colour for the Features section below. */
.hero-video-overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}

/* Lift hero text above the video */
.hero-content { z-index: 20; }

/* Video / ticker strip */
.hero-video-strip {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  overflow: hidden;
  height: 54px;
}

.hero-strip-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.hero-strip-content {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
  padding: 0 40px;
  white-space: nowrap;
  animation: strip-scroll 22s linear infinite;
}

@keyframes strip-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.strip-item {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.strip-sep {
  color: var(--border);
  font-size: 14px;
  flex-shrink: 0;
}

.hero-strip-gradient-left,
.hero-strip-gradient-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.hero-strip-gradient-left {
  left: 0;
  background: linear-gradient(to right, var(--bg-light), transparent);
}

.hero-strip-gradient-right {
  right: 0;
  background: linear-gradient(to left, var(--bg-light), transparent);
}


/* ═══════════════════════════════════════
   SOLUTIONS / FEATURES SECTION
═══════════════════════════════════════ */
.section-features {
  background: var(--white);
  padding: 96px 0;
}

.section-header {
  max-width: 768px;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--text-h);
  letter-spacing: -0.025em;
}

.section-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-body);
  line-height: 1.65;
  padding-top: 8px;
}

/* 4-column card grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--green-card);
  border-radius: 16px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.card-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  padding: 2.5px 12px;
  border-radius: 6px;
  align-self: flex-start;
  letter-spacing: 0.02em;
}

.card-illustration {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 120px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card-desc {
  font-size: 14px;
  font-weight: 400;
  color: rgba(209, 250, 229, 0.6);
  line-height: 1.65;
}


/* ═══════════════════════════════════════
   DIGIROAD STACK SECTION
═══════════════════════════════════════ */
.section-stack {
  background: var(--white);
  padding: 96px 0;
}

.stack-header {
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stack-h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-h);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* 2-column grid */
.stack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Left — Compliance card */
.compliance-card {
  background: var(--green-dark);
  border-radius: 16px;
  min-height: 315px;
  position: relative;
  overflow: hidden;
}

.compliance-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: none;
}

.compliance-inner {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.compliance-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.compliance-desc {
  font-size: 16px;
  font-weight: 400;
  color: rgba(209, 250, 229, 0.8);
  line-height: 1.65;
}

.compliance-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
}

.compliance-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.compliance-list li > svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.check-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 2px;
}

.check-desc {
  font-size: 13px;
  font-weight: 400;
  color: rgba(209, 250, 229, 0.55);
  line-height: 1.5;
}

/* Right — Stack layers */
.stack-layers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stack-layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-radius: 16px;
}

.layer-default {
  background: var(--bg-light);
  border: 1px solid var(--border);
}

.layer-active {
  background: rgba(209, 250, 229, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.stack-layer {
  transition: background 0.4s ease, border-color 0.4s ease;
}

.layer-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.02em;
  transition: color 0.4s ease;
}

.layer-active-text {
  color: var(--green-dark);
}

/* SVG icon colors: default = gray, active = green */
.layer-default svg path,
.layer-default svg circle {
  stroke: #d1d5db;
  fill: none;
  transition: stroke 0.4s ease, fill 0.4s ease;
}

.layer-active svg path,
.layer-active svg circle {
  stroke: #10b981;
  transition: stroke 0.4s ease, fill 0.4s ease;
}

/* Shield fill on active */
.layer-active svg path:first-child {
  fill: rgba(16, 185, 129, 0.3);
}


/* ═══════════════════════════════════════
   REPORT CARD SECTION
═══════════════════════════════════════ */
.section-report {
  background: var(--white);
  padding: 48px 0;
}

.section-report .container {
  padding: 0 24px;
}

.report-card {
  background: var(--green-deep);
  border-radius: 32px;
  display: grid;
  grid-template-columns: 1fr 535px;
  min-height: 502px;
  overflow: hidden;
}

.report-content {
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.report-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(16, 185, 129, 0.2);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  align-self: flex-start;
  letter-spacing: 0.06em;
}

.report-h2 {
  font-size: 48px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.btn-report {
  display: inline-flex;
  align-items: center;
  background: var(--green);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 9999px;
  align-self: flex-start;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  letter-spacing: 0.04em;
}

.btn-report:hover {
  background: #0ea570;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
}

.report-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.report-book {
  position: relative;
  z-index: 1;
}

.report-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--green-deep) 0%, transparent 35%);
  z-index: 2;
}


/* ═══════════════════════════════════════
   SECURITY & COMPLIANCE SECTION
═══════════════════════════════════════ */
.section-security {
  position: relative;
  background: var(--green-darkest);
  padding: 96px 24px;
  overflow: hidden;
}

/* Binary rain canvas background */
.security-binary-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.40;
}

.security-inner {
  position: relative;
  z-index: 1;
  max-width: 1232px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.security-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.security-h2 {
  font-size: 48px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.security-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--green-light);
  line-height: 1.7;
  opacity: 0.85;
  max-width: 566px;
}

.security-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
  padding-top: 16px;
  transition: gap 0.2s ease;
}

.security-link:hover { gap: 14px; }

.security-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ═══════════════════════════════════════
   FINAL CTA SECTION
═══════════════════════════════════════ */
.section-cta {
  background: var(--white);
  padding: 128px;
}

.cta-card {
  position: relative;
  background: var(--green-dark);
  border-radius: 32px;
  padding: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 1024px;
  margin: 0 auto;
  overflow: hidden;
}

.cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgba(16, 185, 129, 0.18) 0%,
    transparent 65%
  );
  border-radius: 9999px;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

.cta-h2 {
  position: relative;
  z-index: 1;
  font-size: 48px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 832px;
}

.cta-desc {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 400;
  color: var(--green-light);
  line-height: 1.65;
  max-width: 584px;
}

.cta-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

.btn-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
  padding: 16.5px 40px;
  border-radius: 8px;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}

.btn-cta-primary:hover {
  background: var(--green-light);
  transform: translateY(-1px);
}

.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.btn-cta-secondary:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}


/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
  background: var(--green-dark);
  padding: 96px 0 48px;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-top {
  display: grid;
  grid-template-columns: 208px 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 80px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.footer-logo-img { height: 48px; width: auto; display: block; }

.footer-region-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(209,250,229,0.18);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.footer-region-select-wrap:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(209,250,229,0.30);
}

.footer-region-globe,
.footer-region-chevron {
  color: var(--green-light);
  flex-shrink: 0;
  opacity: 0.75;
  pointer-events: none;
}

.footer-region-select {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  color: var(--green-light);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  padding: 0;
}

.footer-region-select option {
  background: #064e3b;
  color: #ffffff;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-col-title {
  font-size: 12px;
  font-weight: 400;
  color: var(--green-light);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.footer-nav-col ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-nav-col a {
  font-size: 14px;
  font-weight: 400;
  color: var(--green-light);
  transition: color 0.15s;
  display: block;
}

.footer-nav-col a:hover { color: var(--white); }

.footer-bottom {
  padding-top: 48px;
  border-top: 1px solid rgba(209, 250, 229, 0.08);
}

.footer-bottom p {
  font-size: 10px;
  font-weight: 500;
  color: var(--green-light);
  opacity: 0.6;
  letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-h1         { font-size: 56px; }
  .section-h2      { font-size: 40px; }
  .security-h2     { font-size: 40px; }
  .cta-h2          { font-size: 40px; }
  .report-h2       { font-size: 40px; }
  .cards-grid      { grid-template-columns: repeat(2, 1fr); }
  .nav             { padding: 0 24px; }
}

@media (max-width: 900px) {
  .stack-grid      { grid-template-columns: 1fr; }
  .security-inner  { grid-template-columns: 1fr; }
  .security-visual { display: none; }
  .report-card     { grid-template-columns: 1fr; }
  .report-visual   { display: none; }
  .section-cta     { padding: 64px 24px; }
  .cta-card        { padding: 64px 40px; }
  .footer-top      { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hero-glow       { width: 100%; height: 360px; }
  .cards-grid      { grid-template-columns: 1fr; }
  .hero-ctas       { flex-wrap: wrap; }
  .cta-buttons     { flex-wrap: wrap; justify-content: center; }
  .feat-card       { padding: 24px 20px 20px; }
}

@media (max-width: 680px) {
  .hero-h1            { font-size: 38px; overflow-wrap: break-word; word-break: break-word; }
  .section-h2         { font-size: 28px; }
  .security-h2        { font-size: 28px; }
  .cta-h2             { font-size: 28px; }
  .report-h2          { font-size: 28px; }
  .hero-content       { padding-top: 88px; }
  .section-cta        { padding: 48px 16px; }
  .cta-card           { padding: 48px 24px; }
  .report-content     { padding: 48px 24px; }
  .footer-top         { grid-template-columns: 1fr; gap: 40px; }
  .btn-primary,
  .btn-secondary      { width: 100%; justify-content: center; }
  .btn-cta-primary,
  .btn-cta-secondary  { width: 100%; justify-content: center; }
}

@media (max-width: 400px) {
  .hero-h1 { font-size: 32px; }
}