:root{
  --bg: #050712;
  --bg2: #070a16;
  --ink: rgba(255, 255, 255, .96);
  --muted: rgba(235, 241, 255, .82);
  --line: rgba(235, 241, 255, .12);

  /* Brand hints pulled from current eagleye.tech theme vars */
  --brand: #6865FF;
  --accent: #AEE87C;

  --glow: rgba(104, 101, 255, .42);
  --glow2: rgba(174, 232, 124, .24);

  --shadow: 0 24px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 26px;

  --container: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(104,101,255,.28), transparent 60%),
    radial-gradient(900px 540px at 80% 10%, rgba(174,232,124,.12), transparent 55%),
    radial-gradient(1200px 700px at 40% 120%, rgba(59,231,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x: hidden;
}

/* Non-home pages: account for fixed header */
.pageMain{
  padding-top: 96px;
}

/* Premium "aurora + grain" layer (subtle). */
body::before{
  content:"";
  position: fixed;
  inset: -20vh -20vw;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 460px at 15% 10%, rgba(104,101,255,.26), transparent 60%),
    radial-gradient(820px 520px at 85% 30%, rgba(174,232,124,.11), transparent 60%),
    radial-gradient(900px 520px at 45% 90%, rgba(59,231,255,.10), transparent 60%);
  filter: blur(18px);
  opacity: .95;
  transform: translate3d(0,0,0);
  animation: aurora 18s ease-in-out infinite alternate;
}
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .06;
}
@keyframes aurora{
  0%{ transform: translate3d(-1.5%, -1.2%, 0) scale(1.02); }
  100%{ transform: translate3d(1.6%, 1.0%, 0) scale(1.04); }
}

.skip{
  position: absolute;
  left: -999px;
  top: 12px;
  background: #fff;
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 9999;
}
.skip:focus{ left: 12px; }

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

.topbar{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(5,7,18,.55);
  backdrop-filter: blur(14px);
}
.topbar__inner{
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 14px;
  user-select: none;
}
.brand__logo{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 14px 38px rgba(104,101,255,.18);
}
.brand__logo--small{
  width: 34px;
  height: 34px;
  border-radius: 13px;
}
.brand__mark{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background:
    radial-gradient(10px 10px at 35% 40%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(18px 18px at 50% 60%, rgba(174,232,124,.25), transparent 60%),
    radial-gradient(60px 60px at 50% 50%, rgba(104,101,255,.35), rgba(104,101,255,.08) 50%, rgba(0,0,0,0) 75%),
    linear-gradient(135deg, rgba(104,101,255,.65), rgba(174,232,124,.18));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 14px 38px rgba(104,101,255,.22);
}
.brand__logo + .brand__mark{ display:none; } /* hide placeholder mark when logo image is present */
.brand__text strong{
  display: block;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .2px;
  color: #fff;
}
.brand__text span{
  display: block;
  font-size: 12px;
  color: rgba(235, 241, 255, .75);
  margin-top: 1px;
}
.brand--small .brand__mark{ width: 34px; height: 34px; border-radius: 13px; }

.nav{
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav a{
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav a:hover{
  color: var(--ink);
  background: rgba(255,255,255,.06);
}

/* Active nav item (multi-page prototype) */
.nav a[aria-current="page"]{
  color: rgba(235,241,255,.94);
  background:
    radial-gradient(340px 160px at 20% 0%, rgba(104,101,255,.20), transparent 60%),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
.nav a.btn[aria-current="page"]{
  border-color: rgba(255,255,255,.18);
}
.nav__toggle{
  display: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--ink);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.nav__toggle span{
  display:block;
  height:2px;
  width:18px;
  background: rgba(255,255,255,.80);
  margin: 4px auto;
  border-radius: 2px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1px;
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn--big{ padding: 14px 16px; border-radius: 16px; }
.btn--primary{
  color: rgba(6,8,18,.92);
  background:
    linear-gradient(135deg, rgba(174,232,124,.96), rgba(174,232,124,.70));
  border-color: rgba(174,232,124,.45);
  box-shadow: 0 12px 38px rgba(174,232,124,.18), 0 8px 24px rgba(104,101,255,.12);
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 46px rgba(174,232,124,.26), 0 12px 30px rgba(104,101,255,.16);
}

/* Header CTA: boost contrast and legibility */
.topbar .btn--primary{
  color: rgba(6, 11, 10, .96);
  font-weight: 950;
  letter-spacing: .15px;
  background: linear-gradient(135deg, rgba(190,255,136,1), rgba(126,234,155,.92));
  border-color: rgba(190,255,136,.62);
  box-shadow: 0 16px 48px rgba(174,232,124,.16), 0 10px 26px rgba(104,101,255,.10);
}
.topbar .btn--primary:hover{
  box-shadow: 0 22px 64px rgba(174,232,124,.22), 0 16px 38px rgba(104,101,255,.14);
}
.btn--ghost{
  color: var(--ink);
  background: #003c76;
}
.btn--ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.scrolly{
  padding-top: 74px; /* fixed header */
}

.stage{
  position: sticky;
  top: 74px;
  height: calc(100vh - 74px);
  overflow: hidden;
  z-index: 0; /* keep stage above chapter panels so legend never gets covered */
}

#globe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; 
}

/* Enhanced globe ambient glow for better visibility */
.stage::before{
  content: "";
  position: absolute;
  top: 5%;
  right: 5%;
  width: 55%;
  height: 90%;
  background:
    radial-gradient(500px 500px at 50% 45%, rgba(104,101,255,.18), transparent 50%),
    radial-gradient(400px 400px at 55% 50%, rgba(174,232,124,.08), transparent 45%),
    radial-gradient(600px 600px at 45% 55%, rgba(59,231,255,.06), transparent 55%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: globePulse 8s ease-in-out infinite alternate;
}

@keyframes globePulse{
  0%{ opacity: 0.7; transform: scale(1); }
  100%{ opacity: 1; transform: scale(1.05); }
}

.stage__veil{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 520px at 25% 30%, rgba(104,101,255,.16), transparent 55%),
    radial-gradient(900px 560px at 70% 40%, rgba(174,232,124,.10), transparent 60%),
    linear-gradient(180deg, rgba(5,7,18,.05), rgba(5,7,18,.60));
  pointer-events: none;
}

.stage__ui{
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: start;
  padding: 42px 0;
}

/* Kicker removed from prototype; keep hero aligned nicely under the navbar */
.stage__ui{
  padding-top: 34px;
}
.stage__kicker{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.dot{
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(174,232,124,.55);
}
.muted{ color: var(--muted); }

.stage__hero{
  max-width: 680px;
  padding-top: 0px;
  position: relative;
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
  /* Removed glass card styling - hero flows freely now */
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.h1{
  margin: 0;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  /* Gradient text effect */
  background: linear-gradient(135deg, #fff 0%, #fff 40%, var(--accent) 70%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead{
  text-wrap: pretty;
}
.grad{
  background: linear-gradient(135deg, rgba(104,101,255,.95), rgba(174,232,124,.90));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 42px rgba(104,101,255,.18);
}
.lead{
  margin: 16px 0 20px;
  color: rgba(255, 255, 255, .88);
  font-size: 17px;
  line-height: 1.6;
  max-width: 58ch;
}
.trustLine{
  margin: -6px 0 18px;
  color: rgba(255, 255, 255, .88);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1px;
}
.kicker{
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .78);
  font-weight: 850;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ctaRow{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.trust{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.trust__item{
  min-width: 170px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #003c76;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 46px rgba(0,0,0,.22);
}
.trust__label{ display:block; color: var(--muted); font-size: 12px; font-weight: 700; }
.trust__value{ display:block; margin-top: 2px; font-weight: 900; letter-spacing: .2px; }

/* ============================================
   INTEGRATION HUB (Central logo with radiating badges)
   ============================================ */
.integrationHub{
  position: absolute;
  /* Position to match globe center: cx = 62% from left, cy = 48% from top */
  top: 48%;
  left: 62%;
  right: auto;
  transform: translate(-50%, -50%);
  width: clamp(400px, 42vw, 620px);
  height: clamp(400px, 42vw, 620px);
  pointer-events: none;
  z-index: 0; /* Behind everything, true background */
  opacity: 0.6; /* Subtle background presence */
}

/* SVG Lines - hidden, just path for dots */
.integrationHub__lines{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hubLine{
  stroke: transparent; /* Invisible lines, dots follow the path */
  stroke-width: 0;
}

/* Animated dots - subtle background glow */
.hubDot{
  fill: rgba(174, 232, 124, 0.7);
  filter: drop-shadow(0 0 6px rgba(174, 232, 124, 0.5)) drop-shadow(0 0 12px rgba(174, 232, 124, 0.3));
}

/* Central hub */
.integrationHub__center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.integrationHub__glow{
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(174, 232, 124, 0.2) 0%, rgba(174, 232, 124, 0.05) 40%, transparent 70%);
  animation: hubGlow 4s ease-in-out infinite alternate;
}
@keyframes hubGlow{
  0%{ opacity: 0.4; transform: scale(0.9); }
  100%{ opacity: 0.8; transform: scale(1.15); }
}
.integrationHub__ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(174, 232, 124, 0.35);
  box-shadow: 
    0 0 20px rgba(174, 232, 124, 0.2),
    0 0 40px rgba(174, 232, 124, 0.1),
    inset 0 0 12px rgba(174, 232, 124, 0.08);
  animation: ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse{
  0%, 100%{ transform: scale(1); opacity: 0.5; }
  50%{ transform: scale(1.06); opacity: 0.8; }
}
.integrationHub__logo{
  width: 65px;
  height: 65px;
  border-radius: 18px;
  object-fit: cover;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 25px rgba(174, 232, 124, 0.25);
  opacity: 0.9;
}

/* Hub Badges - very subtle background elements */
.hubBadge{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(20, 25, 35, 0.4);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,.70);
  white-space: nowrap;
  opacity: 0;
  animation: hubBadgeFadeIn .6s ease forwards;
  transform: translate(-50%, -50%);
}
.hubBadge__icon{ font-size: 15px; opacity: 0.7; }
.hubBadge__text{ letter-spacing: .1px; }

/* 7 Badge positions (clock: 11, 1, 3, 5, 7, 9, 12) */
/* Badge 1: 11 o'clock - pulled close to center */
.hubBadge--1{
  top: 28%;
  left: 32%;
  animation-delay: 0.6s;
}
/* Badge 2: 1 o'clock */
.hubBadge--2{
  top: 17%;
  left: 83%;
  animation-delay: 0.8s;
}
/* Badge 3: 3 o'clock */
.hubBadge--3{
  top: 50%;
  left: 96%;
  animation-delay: 1s;
}
/* Badge 4: 5 o'clock */
.hubBadge--4{
  top: 83%;
  left: 83%;
  animation-delay: 1.2s;
}
/* Badge 5: 7 o'clock - pulled close to center */
.hubBadge--5{
  top: 72%;
  left: 32%;
  animation-delay: 1.4s;
}
/* Badge 6: 9 o'clock - pulled close to center */
.hubBadge--6{
  top: 50%;
  left: 15%;
  animation-delay: 1.6s;
}
/* Badge 7: 12 o'clock */
.hubBadge--7{
  top: 4%;
  left: 50%;
  animation-delay: 1.8s;
}

@keyframes hubBadgeFadeIn{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Hide integration hub on scroll */
.stage.isScrolled .integrationHub,
.stage.isCompact .integrationHub{
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */
.scrollIndicator{
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
  opacity: 0;
  animation: fadeInUp .8s ease 1.2s forwards;
}
.scrollIndicator__text{
  font-weight: 800;
  font-size: 12px;
  color: rgba(235,241,255,.55);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.scrollIndicator__arrow{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(174,232,124,.85);
  animation: bounce 2s ease-in-out infinite;
}

@keyframes fadeInUp{
  0%{
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  100%{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes bounce{
  0%, 20%, 50%, 80%, 100%{ transform: translateY(0); }
  40%{ transform: translateY(6px); }
  60%{ transform: translateY(3px); }
}

/* Hide scroll indicator and badges after scrolling starts */
.stage.isScrolled .scrollIndicator,
.stage.isCompact .scrollIndicator{
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Legend overlay (aligned to the globe edge) */
.stage__progress{
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: opacity .28s ease, transform .28s ease;
  opacity: 0; /* hidden until scroll starts */
  transform: translateY(10px);
  pointer-events: none;
}

/* Once user starts scrolling (even before chapters enter), lightly reveal the rail */
.stage.isScrolled .stage__progress{
  opacity: .35;
  transform: translateY(6px);
}

/* When scrolling starts, collapse hero so chapters don't visually overlap it */
.stage.isCompact .stage__hero{
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  filter: blur(2px);
  pointer-events: none;
}
.stage.isCompact .stage__kicker{
  opacity: .35;
  transition: opacity .28s ease;
}
.stage.isCompact .stage__progress{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Prevent "legend vs panel" collisions: keep chapter panels narrower on desktop */
@media (min-width: 981px){
  .chapter__inner{
    max-width: 760px;
  }
}
.thread{
  position: absolute;
  inset: 0;
}

.threadArc{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.threadArc__base{
  fill: none;
  stroke: rgba(235,241,255,.14);
  stroke-width: 3;
  stroke-linecap: round;
}
.threadArc__progress{
  fill: none;
  stroke: rgba(174,232,124,.92);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 0));
  filter: drop-shadow(0 0 10px rgba(174,232,124,.32));
}
.thread__node{
  position:absolute;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
}
.thread__node[data-node="0"]{ top: 10%; }
.thread__node[data-node="1"]{ top: 30%; }
.thread__node[data-node="2"]{ top: 50%; }
.thread__node[data-node="3"]{ top: 70%; }
.thread__node[data-node="4"]{ top: 90%; }
.thread__node.isActive{
  background: var(--accent);
  border-color: rgba(174,232,124,.65);
  box-shadow: 0 0 18px rgba(174,232,124,.55);
}
.chapters{
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-weight: 900;
  font-size: 13px;
  color: rgba(235,241,255,.78);
}
.chapterTag{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  width: fit-content;
  position: absolute;
  transform: translate(0, -50%);
}
.chapterTag.isActive{
  color: rgba(6,8,18,.94);
  background: linear-gradient(135deg, rgba(174,232,124,.92), rgba(174,232,124,.70));
  border-color: rgba(174,232,124,.52);
  box-shadow: 0 14px 40px rgba(174,232,124,.14);
}

.chaptersRail{
  position: relative;
  z-index: 1;
}
.chapter{
  min-height: 100vh;
  padding: 92px 0 72px; /* tighter rhythm while stage is sticky */
}
.chapter__inner{
  max-width: 760px;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

/* Tilt / shine helpers (JS sets --rx/--ry). */
.card, .pillar, .feature, .panel{
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-origin: center;
}
.card::after, .pillar::after, .feature::after, .panel::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  background:
    radial-gradient(520px 220px at var(--mx, 50%) var(--my, 20%), rgba(174,232,124,.10), transparent 60%),
    radial-gradient(520px 220px at calc(var(--mx, 50%) * 1.0) calc(var(--my, 20%) * 1.0), rgba(104,101,255,.14), transparent 55%);
  transition: opacity .18s ease;
}
.card:hover::after, .pillar:hover::after, .feature:hover::after, .panel:hover::after{
  opacity: 1;
}
.h2{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff; /* Bright white like hero headline */
  font-weight: 800;
}
.h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .1px;
  color: rgba(255, 255, 255, .96); /* Near white */
}
.copy{
  color: rgba(255, 255, 255, .88); /* Bright and readable */
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 70ch;
}

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

.card{
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 20px 54px rgba(0,0,0,.26);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card p{
  color: rgba(255, 255, 255, .88); /* Bright white card body text */
}
.card--glass{
  background: #003c76;
}

.callout{
  display:flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(174,232,124,.22);
  background: #003c76;
  box-shadow: 0 20px 54px rgba(0,0,0,.25);
}
.callout__badge{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(174,232,124,.16);
  border: 1px solid rgba(174,232,124,.26);
  color: rgba(235,241,255,.92);
}
.callout__text{ color: rgba(255, 255, 255, .88); } /* Bright white callout text */
.callout__text strong{ color: #fff; }

.pillars{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pillar{
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: #003c76;
  box-shadow: 0 24px 60px rgba(0,0,0,.26);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.pillar p{
  color: rgba(255, 255, 255, .88); /* Bright white pillar body text */
}
.pillar:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 34px 90px rgba(0,0,0,.34);
}
.pillar.isActive{
  transform: translateY(-2px);
  border-color: rgba(174,232,124,.34);
}

.timeline{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 12px;
}
.timeline li{
  display:flex;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
   background: #003c76;
}
.timeline li p{
  background: #003c76; /* Bright white timeline text */
}
.tDot{
  margin-top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 14px rgba(104,101,255,.25);
}

.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 14px;
}
.stat{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: #003c76;
}
.stat__num{
  font-weight: 950;
  font-size: 34px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, rgba(174,232,124,.92), rgba(104,101,255,.88));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.stat__label{ color: rgba(255, 255, 255, .85); font-weight: 800; font-size: 12px; } /* Bright white stat labels */

.testimonials{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.quote{
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: #003c76;
  padding: 16px 16px 14px;
}
.quote blockquote{
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .94); /* Bright white quote text */
  font-weight: 650;
  line-height: 1.55;
}
.quote figcaption{
  color: rgba(255, 255, 255, .78); /* Brighter caption */
  font-weight: 800;
  font-size: 12px;
}

.section{
  padding: 84px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sectionHead{
  max-width: 880px;
  margin-bottom: 22px;
}

.featureGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.feature{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.24);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.feature:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 34px 90px rgba(0,0,0,.32);
}
.feature__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 12px;
  color: rgba(6,8,18,.92);
  background: linear-gradient(135deg, rgba(174,232,124,.92), rgba(174,232,124,.70));
  box-shadow: 0 0 24px rgba(174,232,124,.22);
  margin-bottom: 12px;
}

.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
.bullets{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}
.bullets strong{ color: var(--ink); }
.panel{
  border-radius: 20px;
  border: 1px solid rgba(174,232,124,.20);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(174,232,124,.12), transparent 55%),
    rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.panel:hover{
  border-color: rgba(174,232,124,.30);
  box-shadow: 0 36px 100px rgba(0,0,0,.40);
}
.panel__title{
  padding: 14px 16px;
  font-weight: 950;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.panel__body{ padding: 16px; }

.tabs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}
.tab{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.tab.isActive{
  background: rgba(104,101,255,.22);
  border-color: rgba(104,101,255,.35);
  color: rgba(235,241,255,.92);
  box-shadow: 0 0 0 1px rgba(104,101,255,.15), 0 18px 44px rgba(104,101,255,.14);
}
.industryCards{
  display:grid;
  grid-template-columns: 1fr;
}
.industry{
  display:none;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.industry.isActive{ display:block; }
.chipRow{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.chip{
  font-weight: 900;
  font-size: 12px;
  color: rgba(235,241,255,.88);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.faq{
  display:grid;
  gap: 10px;
  max-width: 900px;
}
details{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
}
summary{
  cursor: pointer;
  font-weight: 950;
}
details p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.section--final{
  padding: 86px 0 110px;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(104,101,255,.18), transparent 55%),
    radial-gradient(900px 520px at 90% 30%, rgba(174,232,124,.12), transparent 60%),
    linear-gradient(180deg, rgba(5,7,18,.40), rgba(5,7,18,.80));
}
.final{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
.mini{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.mini__item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
}
.mini__k{ display:block; color: var(--muted); font-weight: 850; font-size: 12px; }
.mini__v{ display:block; font-weight: 950; margin-top: 4px; }

.form{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  padding: 16px;
  display:grid;
  gap: 10px;
}
.form label span{
  display:block;
  font-weight: 900;
  font-size: 12px;
  color: rgba(235,241,255,.78);
  margin-bottom: 6px;
}
.form input, .form select, .form textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,7,18,.35);
  color: rgba(235,241,255,.92);
  padding: 12px 12px;
  font: inherit;
  outline: none;
}
.form input:focus, .form select:focus, .form textarea:focus{
  border-color: rgba(174,232,124,.35);
  box-shadow: 0 0 0 3px rgba(174,232,124,.12);
}
.fineprint{
  margin: 0;
  color: rgba(235,241,255,.55);
  font-weight: 700;
  font-size: 12px;
}

.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 48px 0 0;
}
.footer__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.3fr;
  gap: 32px;
}
.footer__col{}
.footer__col--brand .brand{ margin-bottom: 16px; }
.footer__address{
  font-style: normal;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  line-height: 1.7;
}
.footer__address a{
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
}
.footer__address a:hover{ color: #fff; }
.footer__heading{
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  margin: 0 0 16px;
}
.footer__heading--social{ margin-top: 24px; }
.footer__links{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__links li{ margin-bottom: 10px; }
.footer__links a{
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: color .2s ease;
}
.footer__links a:hover{ color: #fff; }
.footer__newsletter{
  display: flex;
  gap: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
}
.footer__newsletter input{
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 14px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.footer__newsletter input::placeholder{ color: rgba(255,255,255,.5); }
.footer__newsletter button{
  background: linear-gradient(135deg, rgba(174,232,124,.92), rgba(174,232,124,.70));
  border: none;
  padding: 12px 16px;
  color: rgba(6,8,18,.92);
  cursor: pointer;
  transition: opacity .2s ease;
}
.footer__newsletter button:hover{ opacity: .85; }
.footer__social{
  display: flex;
  gap: 12px;
}
.footer__social a{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.75);
  transition: background .2s ease, color .2s ease;
}
.footer__social a:hover{
  background: rgba(104,101,255,.25);
  color: #fff;
}
.footer__bottom{
  margin-top: 32px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.fineprint{
  margin: 0;
  color: rgba(255, 255, 255, .55);
  font-weight: 700;
  font-size: 12px;
}
@media (prefers-reduced-motion: no-preference){
  .chapter__inner, .sectionHead, .feature, .panel, .industry, details{
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
    will-change: transform, opacity;
  }
  .isRevealed{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 980px){
  .nav{ display:none; }
  .nav.isOpen{
    display:flex;
    position: absolute;
    right: 14px;
    top: 74px;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border-radius: 18px;
    background: rgba(5,7,18,.92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    min-width: 260px;
  }
  .nav a{ padding: 12px 12px; }
  .nav__toggle{ display: inline-block; }

  .stage__ui{ grid-template-columns: 1fr; }
  .stage__progress{ width: auto; grid-template-columns: 1fr; justify-items: start; }
  .thread{ height: 160px; }
  .grid3{ grid-template-columns: 1fr; }
  .pillars{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr; }
  .testimonials{ grid-template-columns: 1fr; }
  .featureGrid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .final{ grid-template-columns: 1fr; }
  .mini{ grid-template-columns: 1fr; }
  .chapter{ padding-top: 120px; }

  /* Integration Hub: hide on mobile */
  .integrationHub{
    display: none;
  }

  /* Scroll indicator adjustments */
  .scrollIndicator{
    bottom: 20px;
  }

  /* Globe ambient glow: adjust for mobile */
  .stage::before{
    top: auto;
    bottom: 0;
    right: -20%;
    width: 100%;
    height: 50%;
    opacity: 0.5;
  }
}

/* Tablet: show integration hub, scaled down */
@media (min-width: 768px) and (max-width: 1200px){
  .integrationHub{
    display: block;
    opacity: 0.5;
  }
  .integrationHub__center{
    width: 90px;
    height: 90px;
  }
  .integrationHub__logo{
    width: 50px;
    height: 50px;
  }
  .hubBadge{
    font-size: 11px;
    padding: 8px 10px;
  }
}

/* Large screens - shift hub right to align with globe */
@media (min-width: 1400px){
  .integrationHub{
    opacity: 0.65;
    left: 68%;
  }
}




/* Footer responsive */
@media (max-width: 980px){
  .footer__grid{
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
@media (max-width: 600px){
  .footer__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer__heading--social{ margin-top: 16px; }
}

/* ============================================
   NAVIGATION DROPDOWN
   ============================================ */
.nav__dropdown{
  position: relative;
}
.nav__dropdown-trigger{
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav__dropdown-trigger::after{
  content: "";
  border: 4px solid transparent;
  border-top-color: currentColor;
  margin-top: 2px;
  transition: transform .2s ease;
}
.nav__dropdown:hover .nav__dropdown-trigger::after{
  transform: rotate(180deg);
}
.nav__dropdown-menu{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  padding: 8px;
  background: rgba(5,7,18,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  transform: translateX(-50%) translateY(8px);
  z-index: 100;
}
.nav__dropdown:hover .nav__dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown-menu a{
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.nav__dropdown-menu a:hover{
  background: rgba(255,255,255,.08);
  color: var(--ink);
}
.nav__dropdown-menu a[aria-current="page"]{
  background: rgba(104,101,255,.15);
  color: rgba(235,241,255,.95);
}

/* ============================================
   INDUSTRY PAGE STYLES
   ============================================ */

/* Industry Hero */
.industryHero{
  padding-top: 40px;
  padding-bottom: 60px;
}
.industryHero .kicker{
  margin-bottom: 12px;
}
.industryHero__title{
  max-width: 800px;
}
.industryHero__title--compact{
  font-size: clamp(26px, 3.8vw, 40px);
  white-space: nowrap;
}
@media (max-width: 768px){
  .industryHero__title--compact{
    white-space: normal;
    font-size: clamp(24px, 6vw, 32px);
  }
}
.industryHero__lead{
  max-width: 680px;
  margin-bottom: 24px;
}
.industryHero__trust{
  margin-top: 28px;
}
.industryHero__trades{
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.industryHero__tradesLabel{
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}

/* Pain Points Grid */
.painGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.painCard{
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: border-color .2s ease, transform .2s ease;
}
.painCard:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.painCard__icon{
  font-size: 28px;
  margin-bottom: 12px;
}
.painCard p{
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.transitionText{
  text-align: center;
  padding: 24px 0;
}
.transitionText .copy{
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,.90);
  max-width: 700px;
  margin: 0 auto;
}

/* Pillar Blocks */
.pillarBlock{
  margin-bottom: 32px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(800px 300px at 10% 0%, rgba(104,101,255,.08), transparent 50%),
    rgba(255,255,255,.03);
  overflow: hidden;
}
.pillarBlock__header{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.pillarBlock__icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 13px;
  color: rgba(6,8,18,.92);
  background: linear-gradient(135deg, rgba(174,232,124,.95), rgba(174,232,124,.70));
  box-shadow: 0 0 28px rgba(174,232,124,.22);
  flex-shrink: 0;
}
.pillarBlock__title{
  flex: 1;
}
.pillarBlock__label{
  display: block;
  font-weight: 800;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.pillarBlock__content{
  padding: 24px;
}
.pillarBlock__list{
  margin: 0 0 24px;
  padding-left: 20px;
  color: rgba(255,255,255,.88);
  line-height: 1.8;
}
.pillarBlock__list li{
  margin-bottom: 6px;
}
.pillarBlock__result{
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(174,232,124,.08);
  border: 1px solid rgba(174,232,124,.18);
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,.90);
}
.resultTag{
  color: var(--accent);
  font-weight: 900;
}

/* Use Case Stories */
.useCase{
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 16px;
  background:
    radial-gradient(600px 200px at 5% 0%, rgba(174,232,124,.06), transparent 50%),
    rgba(5,7,18,.40);
  border: 1px solid rgba(255,255,255,.08);
}
.useCase__badge{
  display: inline-block;
  font-weight: 900;
  font-size: 11px;
  color: rgba(6,8,18,.90);
  background: linear-gradient(135deg, rgba(174,232,124,.90), rgba(174,232,124,.65));
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.useCase__title{
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
}
.useCase__story{
  color: rgba(255,255,255,.85);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.useCase__story:last-child{
  margin-bottom: 0;
}
.useCase__story strong{
  color: #fff;
}
.useCase__story em{
  color: rgba(174,232,124,.90);
  font-style: normal;
}

/* Tier Cards */
.tierGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tierCard{
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(104,101,255,.06), transparent 50%),
    rgba(255,255,255,.03);
  transition: border-color .2s ease, transform .2s ease;
}
.tierCard:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-3px);
}
.tierCard__badge{
  display: inline-block;
  font-weight: 900;
  font-size: 11px;
  color: var(--brand);
  background: rgba(104,101,255,.15);
  border: 1px solid rgba(104,101,255,.25);
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.tierCard__fit{
  font-size: 14px;
  color: rgba(255,255,255,.80);
  margin-bottom: 16px;
  line-height: 1.5;
}
.tierCard__list{
  margin: 0 0 18px;
  padding-left: 18px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
}
.tierCard__list li{
  margin-bottom: 6px;
}
.tierCard__example{
  font-size: 13px;
  color: rgba(255,255,255,.75);
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  line-height: 1.6;
}
.tierCard__example strong{
  color: var(--accent);
}

/* Process Steps */
.processSteps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0;
}
.processStep{
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  position: relative;
}
.processStep::after{
  content: "→";
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(255,255,255,.25);
}
.processStep:last-child::after{
  display: none;
}
.processStep__number{
  font-weight: 950;
  font-size: 28px;
  background: linear-gradient(135deg, rgba(174,232,124,.90), rgba(104,101,255,.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.processStep__content h3{
  margin-bottom: 8px;
}
.processStep__content p{
  font-size: 14px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin: 0;
}

/* Consulting Callout */
.consultingCallout{
  display: flex;
  gap: 20px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(104,101,255,.25);
  background:
    radial-gradient(600px 250px at 0% 50%, rgba(104,101,255,.12), transparent 50%),
    rgba(104,101,255,.05);
  margin-bottom: 32px;
}
.consultingCallout__icon{
  font-size: 36px;
  flex-shrink: 0;
}
.consultingCallout__content h3{
  color: #fff;
  margin-bottom: 10px;
}
.consultingCallout__content p{
  font-size: 15px;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  margin: 0 0 12px;
}
.consultingCallout__content p:last-child{
  margin-bottom: 0;
}
.consultingCallout__content strong{
  color: #fff;
}

/* Pricing Note */
.pricingNote{
  display: flex;
  gap: 18px;
  padding: 20px 24px;
  border-radius: 18px;
  border: 1px solid rgba(174,232,124,.20);
  background:
    radial-gradient(500px 200px at 0% 50%, rgba(174,232,124,.08), transparent 50%),
    rgba(255,255,255,.02);
}
.pricingNote__icon{
  font-size: 32px;
  flex-shrink: 0;
}
.pricingNote__content h3{
  margin-bottom: 8px;
}
.pricingNote__content p{
  font-size: 14px;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
  margin: 0 0 8px;
}
.pricingNote__content p:last-child{
  margin-bottom: 0;
}

/* Results Section */
.resultsExamples{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.resultExample{
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: #003c76;
}
.resultExample__text{
  font-size: 15px;
  color: rgba(255,255,255,.90);
  line-height: 1.6;
  margin: 0 0 10px;
  font-weight: 600;
}
.resultExample__label{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.resultsDisclaimer{
  text-align: center;
  margin-top: 20px;
}

/* Section Variants */
.section--alt{
  background:
    radial-gradient(800px 400px at 20% 50%, rgba(104,101,255,.08), transparent 50%),
    radial-gradient(600px 300px at 80% 50%, rgba(174,232,124,.05), transparent 50%),
    rgba(5,7,18,.50);
}

/* Final CTA */
.section--final{
  padding: 80px 0;
  background:
    radial-gradient(900px 500px at 50% 50%, rgba(104,101,255,.15), transparent 50%),
    radial-gradient(800px 400px at 30% 80%, rgba(174,232,124,.08), transparent 50%),
    linear-gradient(180deg, rgba(5,7,18,.40), rgba(5,7,18,.80));
}
.finalCta{
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.finalCta .h2{
  margin-bottom: 16px;
}
.finalCta .copy{
  margin: 0 auto 24px;
}
.finalCta__note{
  margin-top: 16px;
}

/* ============================================
   INDUSTRY PAGE RESPONSIVE
   ============================================ */
@media (max-width: 980px){
  .painGrid{
    grid-template-columns: repeat(2, 1fr);
  }
  .tierGrid{
    grid-template-columns: 1fr;
  }
  .processSteps{
    grid-template-columns: repeat(2, 1fr);
  }
  .processStep::after{
    display: none;
  }
  .resultsExamples{
    grid-template-columns: 1fr;
  }
  .consultingCallout{
    flex-direction: column;
  }
  .pricingNote{
    flex-direction: column;
  }
  
  /* Mobile nav dropdown */
  .nav__dropdown-menu{
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 100%;
    margin-top: 8px;
    background: rgba(255,255,255,.05);
  }
  .nav__dropdown:hover .nav__dropdown-menu{
    transform: none;
  }
}
@media (max-width: 600px){
  .painGrid{
    grid-template-columns: 1fr;
  }
  .processSteps{
    grid-template-columns: 1fr;
  }
  .industryHero__trades{
    flex-direction: column;
    align-items: flex-start;
  }
  .pillarBlock__header{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================
   INDUSTRIES GATEWAY PAGE
   ============================================ */
.industryGateway{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.industryGatewayCard{
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(600px 250px at 20% 0%, rgba(104,101,255,.08), transparent 50%),
    rgba(255,255,255,.03);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.industryGatewayCard:hover{
  border-color: rgba(174,232,124,.35);
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.industryGatewayCard--coming{
  opacity: 0.7;
}
.industryGatewayCard--coming:hover{
  border-color: rgba(255,255,255,.20);
  transform: translateY(-2px);
}
.industryGatewayCard__header{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.industryGatewayCard__icon{
  font-size: 32px;
}
.industryGatewayCard__badge{
  font-size: 11px;
  font-weight: 900;
  color: var(--brand);
  background: rgba(104,101,255,.15);
  border: 1px solid rgba(104,101,255,.25);
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.industryGatewayCard__desc{
  color: rgba(255,255,255,.80);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.industryGatewayCard__highlights{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.industryGatewayCard__highlights .chip{
  font-size: 11px;
  padding: 6px 10px;
}
.industryGatewayCard__problems{
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin-bottom: 18px;
}
.industryGatewayCard__problems strong{
  color: rgba(255,255,255,.90);
  display: block;
  margin-bottom: 8px;
}
.industryGatewayCard__problems ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}
.industryGatewayCard__cta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.industryGatewayCard:hover .industryGatewayCard__cta{
  gap: 12px;
}
.industryGatewayCard__cta svg{
  transition: transform .2s ease;
}
.industryGatewayCard:hover .industryGatewayCard__cta svg{
  transform: translateX(4px);
}

.industryGatewayNote{
  text-align: center;
  padding: 40px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(174,232,124,.06), transparent 50%),
    rgba(255,255,255,.02);
}
.industryGatewayNote .h3{
  margin-bottom: 12px;
}
.industryGatewayNote .copy{
  max-width: 600px;
  margin: 0 auto 20px;
}

@media (max-width: 768px){
  .industryGateway{
    grid-template-columns: 1fr;
  }
}

/* ============================================
   COMING SOON PAGE
   ============================================ */
.comingSoonSection{
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}
.comingSoon{
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.comingSoon .kicker{
  margin-bottom: 12px;
}
.comingSoon .h1{
  margin-bottom: 20px;
}
.comingSoon .lead{
  max-width: 700px;
  margin: 0 auto 40px;
}
.comingSoon__preview{
  text-align: left;
  padding: 32px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-bottom: 40px;
}
.comingSoon__preview > .h3{
  text-align: center;
  margin-bottom: 24px;
}
.comingSoon__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.comingSoon__item{
  padding: 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.comingSoon__item .h3{
  font-size: 15px;
  margin-bottom: 12px;
}
.comingSoon__item ul{
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
}
.comingSoon__cta{
  padding: 32px;
  border-radius: 22px;
  border: 1px solid rgba(174,232,124,.20);
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(174,232,124,.08), transparent 50%),
    rgba(255,255,255,.02);
  margin-bottom: 24px;
}
.comingSoon__cta .h3{
  margin-bottom: 12px;
}
.comingSoon__cta .copy{
  max-width: 500px;
  margin: 0 auto 20px;
}
.comingSoon__alt{
  padding: 20px;
}
.comingSoon__alt .copy{
  margin-bottom: 12px;
}

@media (max-width: 768px){
  .comingSoon__grid{
    grid-template-columns: 1fr;
  }
}

/* ============================
   FAQ PAGE ENHANCEMENTS
   ============================ */

/* Tighter spacing for FAQ page */
.section--faqHeader{
  padding-bottom: 0;
}
.section--faqCategory{
  padding-top: 32px;
  padding-bottom: 32px;
}
.section--faqCategory:first-of-type{
  padding-top: 0;
}


/* Quick Jump Links */
.faqJump{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 40px;
  padding: 24px 32px;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.faqJump__label{
  font-weight: 600;
  color: rgba(255,255,255,.7);
  font-size: 14px;
}
.faqJump__links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.chip--clickable{
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.chip--clickable:hover{
  background: rgba(104,101,255,.25);
  border-color: rgba(104,101,255,.5);
  color: #fff;
}

/* FAQ Category Styling */
.faqCategory{
  margin-bottom: 0;
}
.faqCategory__header{
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.faqCategory__header .h3{
  margin: 0;
  font-size: 20px;
  color: var(--accent);
}

/* Enhanced FAQ Accordions */
.faq{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq details{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s, background .25s;
}
.faq details:hover{
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
}
.faq details[open]{
  border-color: rgba(104,101,255,.35);
  background: rgba(104,101,255,.06);
}
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-weight: 600;
  font-size: 17px;
  position: relative;
  transition: color .2s;
}
.faq summary::-webkit-details-marker{
  display: none;
}
.faq summary::after{
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--brand);
  transition: transform .25s;
}
.faq details[open] summary::after{
  content: "−";
}
.faq details[open] summary{
  color: var(--accent);
}
.faq details > p,
.faq details > ul{
  padding: 0 24px 20px;
  margin: 0;
  color: rgba(255,255,255,.85);
  line-height: 1.8;
  font-size: 15px;
}
.faq details > p:first-of-type{
  padding-top: 0;
}
.faq details > p + p{
  padding-top: 12px;
}
.faq details ul{
  padding-left: 42px;
  padding-bottom: 16px;
}
.faq details ul li{
  margin-bottom: 8px;
}
.faq details ul li:last-child{
  margin-bottom: 0;
}
.faq details a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq details a:hover{
  color: #fff;
}
.faq details strong{
  color: #fff;
  font-weight: 600;
}

/* Nested lists in FAQ */
.faq details > p strong{
  display: block;
  margin-top: 16px;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 15px;
}
.faq details > p:first-of-type strong{
  margin-top: 0;
}

/* Responsive FAQ */
@media (max-width: 768px){
  .faqJump{
    flex-direction: column;
    padding: 20px;
  }
  .faqJump__label{
    width: 100%;
    text-align: center;
  }
  .faq summary{
    padding: 18px 48px 18px 18px;
    font-size: 16px;
  }
  .faq summary::after{
    right: 18px;
  }
  .faq details > p,
  .faq details > ul{
    padding: 0 18px 16px;
    font-size: 14px;
  }
  .faq details ul{
    padding-left: 36px;
  }
}