/* ==========================================================================
   PIVVOT — Enterprise Solutions Dark Theme
   Additive layer on top of main.css. Do not duplicate rules from main.css;
   only override what needs to become dark/glass/premium.
   ========================================================================== */

:root{
  --bg-base: #050505;
  --bg-elevated: #0a0b0a;

  --glass-bg: rgba(255,255,255,0.045);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.09);
  --glass-border-strong: rgba(255,255,255,0.18);

  --text-hi: #F5F7F6;
  --text-md: rgba(245,247,246,0.72);
  --text-lo: rgba(245,247,246,0.46);

  --accent-green: #0CC64A;
  --accent-green-soft: rgba(12,198,74,0.16);
  --accent-blue: #3E8EF7;

  --grad-primary: linear-gradient(135deg, rgba(12,198,74,0.95), rgba(62,142,247,0.85));
  --grad-panel: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));

  --radius-lg: 28px;
  --radius-xl: 32px;

  --shadow-soft: 0 30px 80px rgba(0,0,0,0.5);
  --shadow-card: 0 20px 50px rgba(0,0,0,0.35);
}

/* ---------- Base ---------- */
body{ background: var(--bg-base); }
.main-wrap{ background: var(--bg-base); }
::selection{ background: var(--accent-green); color: #06110a; }

/* ---------- Header / Nav ---------- */
.topHeader{
  background: rgba(5,5,5,0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
}

.topHeaderIn .navmenu ul li a{
  color: var(--text-md);
}

.topHeaderIn .navmenu ul li a:hover,
.topHeaderIn .navmenu ul li a.active,
.topHeaderIn .navmenu ul li a.current{
  color: var(--accent-green);
}

.menu-toggle .toggle-icon,
.menu-toggle .toggle-icon:before,
.menu-toggle .toggle-icon:after{
  background: var(--text-hi);
}

.navmenu .menuRight a{
  background: var(--grad-primary);
  color: #06110a;
  font-weight: 600;
  border: none;
  box-shadow: 0 8px 24px rgba(12,198,74,0.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

.navmenu .menuRight a:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(12,198,74,0.35);
}

/* Solutions dropdown — selectors mirror main.css's exact chain so these
   color/backdrop overrides win the cascade (main.css's display:none/block
   toggle keeps doing the show/hide work; this file only restyles it dark). */
.has-menu > a:after{
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  position: relative;
  top: -2px;
  opacity: .7;
}

@media (min-width: 991px){
  .topHeaderIn .navmenu ul li.has-menu .subMenu{
    min-width: 260px;
    margin: 0;
    padding: 10px;
    background: rgba(10,11,10,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
  }
  .topHeaderIn .navmenu ul li.has-menu .subMenu li{ padding: 0; margin: 0; }
  .topHeaderIn .navmenu ul li.has-menu .subMenu li a{
    border-bottom: none;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 15px;
    color: var(--text-md);
    white-space: nowrap;
  }
  .topHeaderIn .navmenu ul li.has-menu .subMenu li a:hover{
    background: var(--glass-bg-strong);
    color: var(--text-hi);
  }
}

@media (max-width: 991px){
  .topHeaderIn .navmenu > ul{ background: rgba(5,5,5,0.98); border-top-color: var(--glass-border); }
  .topHeaderIn .navmenu ul li .subMenu li a{ color: var(--text-md); }
}

/* ---------- Buttons ---------- */
.btn{
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn.btn-theme2{
  background: var(--grad-primary);
  color: #06110a;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(12,198,74,0.25);
}
.btn.btn-theme2:hover{
  background: var(--grad-primary);
  filter: brightness(1.08);
  box-shadow: 0 14px 36px rgba(12,198,74,0.35);
  color: #06110a;
}

.btn.btn-outline-glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-strong);
  color: var(--text-hi);
  backdrop-filter: blur(10px);
}
.btn.btn-outline-glass:hover{
  background: var(--glass-bg-strong);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

.btn.btn-dark{
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  color: var(--text-hi);
}
.btn.btn-dark:hover{
  background: var(--glass-border-strong);
  border-color: rgba(255,255,255,0.3);
}

.btn.btn-outline-primary{
  border-color: var(--accent-green);
  color: var(--accent-green);
  background: transparent;
}
.btn.btn-outline-primary:hover{
  background: var(--accent-green-soft);
  color: var(--accent-green);
  border-color: var(--accent-green);
}

.btn .btnRipple{
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.55);
  pointer-events: none;
  animation: btnRippleAnim .6s ease-out forwards;
  z-index: 0;
}
@keyframes btnRippleAnim{
  to{ transform: scale(2.6); opacity: 0; }
}

/* ---------- Section heading tone ---------- */
.blockTitle h1, .blockTitle h2, .blockTitle h3, .blockTitle h4, .blockTitle h5, .blockTitle h6{
  color: var(--text-hi);
}
.blockTitle p{ color: var(--text-md); }
.sectionEyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin: 0 0 14px;
}
.sectionEyebrow:before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 12px var(--accent-green);
}
/* centered variant (used by centered .blockTitle section headers) */
.sectionEyebrow.isCenter{ justify-content: center; }

/* ---------- Glow blobs & floating utility ---------- */
.glowBlob{
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}
.glowBlobGreen{ background: rgba(12,198,74,0.35); }
.glowBlobBlue{ background: rgba(62,142,247,0.3); }

@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
@keyframes glowPulse{
  0%, 100%{ opacity: .55; }
  50%{ opacity: 1; }
}

/* ---------- Hero ---------- */
.heroDark{
  position: relative;
  padding: 100px 0 ;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 82% 8%, rgba(62,142,247,0.14), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(12,198,74,0.12), transparent 60%),
    var(--bg-base);
}

.heroGrid{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
}
.heroContent{ min-width: 0; }

.heroEyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  margin: 0 0 22px;
}
.heroEyebrow .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 10px var(--accent-green);
}

.heroContent h1{
  font-size: 54px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-hi);
  margin: 0 0 22px;
  overflow-wrap: break-word;
}
.heroContent h1 span{
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heroContent p{
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-md);
  max-width: 560px;
  margin: 0 0 34px;
}
.heroBtnWrap{ flex-wrap: wrap; }
.heroBtnWrap .btn{ padding: 15px 30px; font-size: 16px; }

.heroVisualWrap{ position: relative; min-height: 460px; }
.heroVisual{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.heroVisual .glowBlob{ width: 340px; height: 340px; }
.heroVisual .glowBlobGreen{ top: 10%; left: 4%; animation: glowPulse 6s ease-in-out infinite; }
.heroVisual .glowBlobBlue{ bottom: 4%; right: 0%; animation: glowPulse 7s ease-in-out infinite 1s; }

.dashboardPanel{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background: var(--grad-panel);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow-soft);
  padding: 26px 26px 30px;
  animation: floatY 7s ease-in-out infinite;
}
.dashboardPanel-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.dpDot{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.dpDot:first-child{ background: var(--accent-green); }
.dpTitle{
  margin-left: 8px;
  font-size: 13px;
  color: var(--text-lo);
  letter-spacing: .03em;
}
.dpChart{ position: relative; height: 110px; margin-bottom: 22px; }
.dpChart .dpLine{ position: absolute; inset: 0; width: 100%; height: 70%; }
.dpChart .dpLine polyline{
  fill: none;
  stroke: var(--accent-blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(62,142,247,0.6));
}
.dpBars{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 55px;
}
.dpBars span{
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, rgba(12,198,74,0.9), rgba(12,198,74,0.15));
}
.dpStats{ display: flex; gap: 24px; }
.dpStat strong{ display: block; font-size: 22px; color: var(--text-hi); font-weight: 700; }
.dpStat small{ color: var(--text-lo); font-size: 12px; }

.floatWidget{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--grad-panel);
  border: 1px solid var(--glass-border-strong);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
  z-index: 3;
  animation: floatY 6s ease-in-out infinite;
}
.floatWidget img{ width: 26px; height: 26px; }
.floatWidget strong{ display: block; font-size: 15px; color: var(--text-hi); line-height: 1.2; }
.floatWidget small{ color: var(--text-lo); font-size: 11px; }

.fw1{ top: 4%; left: -6%; animation-delay: .2s; }
.fw2{ bottom: 18%; left: -10%; animation-delay: 1.4s; }
.fw3{ top: 12%; right: -8%; animation-delay: .8s; }
.fw4{ bottom: -2%; right: 6%; animation-delay: 2s; }

.aiChip{
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
}
.aiDot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 10px var(--accent-blue);
}

@media (max-width: 991px){
  .heroGrid{ grid-template-columns: minmax(0, 1fr); }
  .heroVisualWrap{ min-height: 380px; margin-top: 20px; }
  .heroContent h1{ font-size: 38px; }
  .heroDark{ padding: 80px 0 80px; }
  .floatWidget{ display: none; }
}

@media (max-width: 575px){
  .heroContent h1{ font-size: 30px; }
}

/* ---------- Solutions Built Around People ---------- */
.solutionsSection{
  position: relative;
  padding: 120px 0;
}
.solutionsIntro{ text-align: center; max-width: 720px; margin: 0 auto 30px; }

.solutionBlock .glowBlob{ width: 260px; height: 260px; opacity: .8; }
.solutionTag .num{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-green-soft);
  color: var(--accent-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.solutionText .tagline{
  font-size: 17px;
  color: var(--accent-green);
  font-weight: 500;
  margin: 0 0 22px;
}

/* mini dashboard visual reused per solution, themed via modifier class */
.miniDash-head .badge{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--accent-green-soft);
  color: var(--accent-green);
  font-weight: 600;
}
.miniDash-row .val{ font-size: 13px; font-weight: 700; color: var(--text-hi); }
.miniDash-row .val.up{ color: var(--accent-green); }
.miniDash .floatWidget{ transform: scale(.9); }

/* ---------- Solution Showcase card template (master: Corporate Wellness) ----------
   Reverse-engineered from the approved reference
   (assets-2/images/refernce/image.png). Each slide is one dark rounded card:
   lifestyle image with the titled glass dashboard on its right, and a bottom
   panel with badge / title / description / READ MORE / rotating PIVVOT seal.
   The glass information panel lives in a clipped second grid column that the
   expansion animates open. */
.cwSection{
  --cw-primary: #2EEB9A;
  --cw-secondary: #4DBBFF;
  --cw-text: #FFFFFF;
  --cw-muted: #A8B3C5;
  position: relative;
  scroll-margin-top: 150px;
}

.cwGrid{
  display: grid;
  grid-template-columns: 59fr 41fr;
  column-gap: var(--sol-grid-gap, 16px);
  align-items: stretch;
  height: 100%;
}

/* the story card */
.cwStory{
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #0B0F0D;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.cwBadge{
  display: block;
  color: var(--cw-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 10px;
  transition: font-size 600ms ease-in-out, margin 600ms ease-in-out;
}

.cwHeading{
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 700;
  line-height: 1.16;
  color: var(--cw-text);
  margin: 0 0 10px;
  transition: font-size 600ms ease-in-out;
}
.cwHeading .accent{
  background: linear-gradient(120deg, var(--cw-primary), var(--cw-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Layer 1: the lifestyle visual ----- */
.cwVisual{
  position: relative;
  flex: 1;
  min-height: 300px;
  overflow: hidden;
}
.cwHeroImg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: brightness(.8) saturate(1.05) contrast(1.03);
  transition: transform 450ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.solSlide.is-open .cwHeroImg{ transform: scale(1.04); }
/* dark gradient + vignette so the image melts into the card's bottom panel */
.cwHeroOverlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,8,7,.05) 30%, rgba(11,15,13,.55) 78%, rgba(11,15,13,.92) 100%),
    linear-gradient(90deg, rgba(6,8,7,.25), transparent 35%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.4);
  pointer-events: none;
}

/* ----- Layer 2: the titled glass dashboard, docked to the visual's right
       edge exactly like the reference ----- */
.cwDashboard{
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: 50%;
  display: flex;
  flex-direction: column;
  background: rgba(12,17,15,.6);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 14px;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    inset 0 0 0 .5px rgba(255,255,255,.05);
  transition: opacity 450ms ease-in-out 150ms;
}
/* the dashboard fades away in the teaser previews and fades back in when
   the card becomes active */
.solSlide:not(.is-active) .cwDashboard{ opacity: 0; }

.cwDashboard-head{ display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.cwDashboard-title{
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cwDashboard-head .dots{ display: flex; gap: 4px; flex: none; margin-left: 12px; }
.cwDashboard-head .dots i{ width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); }

.cwDashGrid{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  min-height: 0;
}
.cwDashTile{
  padding: 10px 12px;
  min-width: 0;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 12px;
}
.cwDashTile-label{
  display: block;
  font-size: 11.5px;
  color: var(--cw-muted);
  margin-bottom: 10px;
}
.cwDashTile-sub{ display: block; font-size: 10.5px; color: var(--cw-muted); text-align: center; margin-top: 6px; }

.cwRing{ position: relative; width: 60px; height: 60px; margin: 0 auto; }
.cwRing svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.cwRing-track{ fill: none; stroke: rgba(255,255,255,.14); stroke-width: 7; }
.cwRing-fill{ fill: none; stroke: var(--cw-primary); stroke-width: 7; stroke-linecap: round; }
.cwRing-value{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cwRing-value strong{ font-size: 15px; color: var(--cw-text); font-weight: 700; line-height: 1; }
.cwRing-value small{ font-size: 8.5px; color: var(--cw-muted); margin-top: 2px; }

.cwMiniLine{ width: 100%; height: 34px; display: block; }
.cwMiniLine polyline{ fill: none; stroke: var(--cw-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cwMiniLine--sm{ height: 24px; margin-top: 6px; }
.cwMiniLine-days{ display: flex; justify-content: space-between; margin-top: 4px; }
.cwMiniLine-days span{ font-size: 8px; color: var(--cw-muted); }

.cwDashStat{ display: flex; align-items: baseline; gap: 8px; }
.cwDashStat strong{ font-size: 20px; font-weight: 700; color: var(--cw-text); }
.cwDashStat small{ font-size: 10px; color: var(--cw-muted); }
.cwDashStat small.up{ color: var(--cw-primary); }

.cwMiniBars{ display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 8px; }
.cwMiniBars span{ flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(46,235,154,.9), rgba(46,235,154,.15)); }

.cwIconStat{ display: flex; align-items: center; gap: 8px; }
.cwIconStat svg{ width: 20px; height: 20px; color: var(--cw-secondary); flex: none; }
.cwIconStat strong{ display: block; font-size: 14px; color: var(--cw-text); font-weight: 700; line-height: 1.3; }
.cwIconStat small{ font-size: 10px; color: var(--cw-muted); }

/* custom scroll-reveal: scale .96 -> 1 (decoupled from AOS built-ins) */
[data-aos="cw-zoom"]{
  opacity: 0;
  transform: scale(.96);
  transition-property: opacity, transform;
  transition-duration: 900ms;
}
[data-aos="cw-zoom"].aos-animate{ opacity: 1; transform: scale(1); }

/* ----- The card's bottom panel: badge / title / description / READ MORE
       on the left, the rotating PIVVOT seal on the right ----- */
.cwPanel{
  position: relative;
  display: flex;
  align-items: center;
  padding: 24px 176px 26px 30px; /* right padding reserves the seal's spot */
  transition: padding 600ms ease-in-out;
}
.cwPanel-text{ flex: 1; min-width: 0; }
.cwPanel-desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cw-muted);
  max-width: 560px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: font-size 600ms ease-in-out;
}

/* the READ MORE trigger — quiet uppercase link, exactly like the reference */
.cwReadMore{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cw-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease-out, opacity 450ms ease-in-out;
}
.cwReadMore .cwArrow{ color: var(--cw-primary); }
.cwReadMore:hover{ color: var(--cw-primary); }
.cwReadMore:hover .cwArrow{ transform: translateX(5px); }
.cwReadMore:focus-visible{ outline: 2px solid var(--accent-green); outline-offset: 3px; }

/* ----- The PIVVOT seal: logo inside slow-spinning circular typography.
       It is a second expand trigger (same behaviour as READ MORE). ----- */
.cwSeal{
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 118px;
  height: 118px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 0 12px rgba(46,235,154,.12));
  transition: filter .35s ease-out, opacity 450ms ease-in-out;
}
.cwSeal:hover{ filter: drop-shadow(0 0 22px rgba(46,235,154,.3)) brightness(1.18); }
.cwSeal:focus-visible{ outline: 2px solid var(--accent-green); outline-offset: 3px; border-radius: 50%; }
.cwSeal::before{
  content: "";
  position: absolute;
  inset: 21px;
  border-radius: 50%;
  border: 1px solid rgba(46,235,154,.4);
  background: radial-gradient(closest-side, rgba(46,235,154,.10), transparent);
}
.cwSeal-ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: cwSealSpin 32s linear infinite;
}
.cwSeal-ring text{
  fill: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@keyframes cwSealSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.cwSeal-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: auto;
}

/* teaser previews: compact type, no dashboard / READ MORE / seal */
.solSlide:not(.is-active) .cwPanel{ padding: 18px 20px 20px; }
.solSlide:not(.is-active) .cwBadge{ font-size: 10px; margin-bottom: 8px; }
.solSlide:not(.is-active) .cwHeading{ font-size: 15.5px; }
.solSlide:not(.is-active) .cwHeading .accent{
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: inherit;
}
.solSlide:not(.is-active) .cwPanel-desc{ font-size: 12px; -webkit-line-clamp: 3; }
.solSlide:not(.is-active) .cwReadMore,
.solSlide:not(.is-active) .cwSeal{ opacity: 0; pointer-events: none; }

/* expanded card: the story column narrows, so the dashboard and the
   description tighten up to stay readable */
.solSlide.is-open .cwPanel-desc{ -webkit-line-clamp: 3; }
.solSlide.is-open .cwDashTile{ padding: 8px 10px; }
.solSlide.is-open .cwDashTile-label{ font-size: 10px; margin-bottom: 6px; }
.solSlide.is-open .cwDashStat{ flex-wrap: wrap; gap: 2px 6px; }
.solSlide.is-open .cwDashStat strong{ font-size: 16px; }
.solSlide.is-open .cwRing{ width: 48px; height: 48px; }
.solSlide.is-open .cwRing-value strong{ font-size: 13px; }
.solSlide.is-open .cwMiniLine-days span{ font-size: 7.5px; }
.solSlide.is-open .cwIconStat strong{ font-size: 12px; }

/* ----- Right information panel: one glass card holding audience,
       capabilities, benefits and the CTA ----- */
.cwInfoCard{
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 28px;
  background: #0D1210;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
}

.cwBlock{ min-width: 0; }
.cwBlock + .cwBlock{ margin-top: 22px; }
.cwLabel{
  font-size: 16px;
  color: var(--cw-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

/* four audience icons in one row */
.cwWhoGrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.cwWhoItem{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--cw-text);
  font-weight: 500;
}
.cwWhoIcon{
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(46,235,154,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cw-primary);
}
.cwWhoIcon svg{ width: 20px; height: 20px; }

.cwCapabilities,
.cwBenefits{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.cwCapabilities li,
.cwBenefits li{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.9);
}

.cwCheck{
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(46,235,154,.45);
  color: var(--cw-primary);
  display: flex; align-items: center; justify-content: center;
}
.cwCheck svg{ width: 11px; height: 11px; display: block; }

.cwCta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: none;
  white-space: nowrap;
  padding: 13px 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cw-primary), var(--cw-secondary));
  color: #06110a;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.cwArrow{ display: inline-flex; transition: transform .3s ease-out; }
.cwCta:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(46,235,154,.35);
  color: #06110a;
}
.cwCta:hover .cwArrow{ transform: translateX(4px); }

/* full-width panel CTA, pinned to the card's bottom edge */
.cwCta--full{
  width: 100%;
  min-height: 48px;
  margin-top: auto;
}
.cwInfoCard .cwBlock:last-of-type{ margin-bottom: 24px; }

/* ----- Per-solution variants: only imagery changes ----- */
.cwSection--health .cwHeroImg{ object-position: center 12%; }

.cwSection--elderly .cwVisual{
  background:
    radial-gradient(60% 55% at 30% 62%, rgba(46,235,154,.12), transparent 70%),
    linear-gradient(180deg, #0a0d0b, #060707);
}
.cwSection--elderly .cwHeroImg{
  object-fit: contain;
  object-position: 12% bottom;
  filter: brightness(.92) saturate(1.02);
}
.cwSection--elderly .cwMiniLine-days span{ font-size: 7px; }
.cwSection--elderly .cwDashStat strong{ font-size: 17px; white-space: nowrap; }

.cwSection--student .cwHeroImg{ object-position: center 30%; }

@media (max-width: 1399px){
  .cwDashboard{ width: 60%; }
  .cwPanel{ padding-right: 162px; }
}

@media (max-width: 991px){
  /* tablet & phone: the story stacks above the info panel, so the visual
     needs its own base height (no side column drives the card height) —
     flex:1 lets it absorb any extra height from taller sibling slides */
  .cwVisual{ min-height: 420px; }
  .cwDashboard{ width: min(420px, 74%); }
  .cwPanel{ padding: 22px 150px 24px 24px; }
  .cwSeal{ width: 100px; height: 100px; right: 22px; }
  .cwSeal::before{ inset: 18px; }
  .cwSeal-logo{ width: 48px; }
  .cwInfoCard{ padding: 24px; }
}

@media (max-width: 767px){
  .cwVisual{ min-height: 400px; }
  /* leave an image sliver on the left for the floating arrows */
  .cwDashboard{ width: 80%; }
}

@media (max-width: 575px){
  .cwHeading{ font-size: 24px; }
  .cwVisual{ min-height: 380px; }
  .cwPanel{ padding: 20px 20px 22px; }
  .cwSeal{ display: none; }
  .cwInfoCard{ padding: 22px 20px; }
  .cwDashboard{ padding: 12px 12px 10px; }
  .cwDashTile{ padding: 8px 8px; }
  .cwDashTile-label{ font-size: 10px; margin-bottom: 6px; }
  .cwDashStat{ flex-wrap: wrap; gap: 2px 6px; }
  .cwDashStat strong,
  .cwSection--elderly .cwDashStat strong{ font-size: 15px; }
  .cwIconStat strong{ font-size: 12px; }
  .cwRing{ width: 44px; height: 44px; }
  .cwRing-value strong{ font-size: 12px; }
  .cwMiniLine-days span{ display: none; }
  .cwWhoGrid{ grid-template-columns: 1fr 1fr; gap: 16px 10px; }
  .cwCapabilities,
  .cwBenefits{ grid-template-columns: 1fr; }
}

/* ---------- Kept sections: reskin ---------- */

/* How it works */
.stepsWrap{ position: relative; }
.stepsBlock .num{ color: rgba(255,255,255,0.14); }
.stepsBlock .title h4{ background: transparent; color: var(--text-hi); }
.stepsBlock .title:before{ border-color: rgba(255,255,255,0.18); }
.stepsBlock + .stepsBlock .title h4:before,
.stepsBlock .title h4:after{ background: var(--accent-green); }
.stepsBlock p{ color: var(--text-md); }

/* Platform capability tabs */
.wellnessFeatureSection{ border-radius: var(--radius-xl); overflow: hidden; position: relative; }
.wellnessFeatureSection:before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0.55), rgba(5,5,5,0.88));
}
.wellnessFeatureSection .innerContent{ position: relative; z-index: 1; }
.featureCard{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
}
.featureCard h4{ color: var(--text-hi); }
.featureCard:not(.active) .icon{ filter: brightness(0) invert(1); opacity: .75; }
.featureCard.active{
  background: var(--grad-primary);
  border-color: transparent;
}
.featureContent{ color: var(--text-hi); }
#featureMainDesc{ color: var(--text-md); }

/* Real-time health intelligence icon grid */
.healthIntelTile{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 18px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  margin: 0 auto 12px;
}
.healthIntelTile img{ width: 30px; height: 30px; }

/* Testimonials */
.successStoriesBlock{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.StoriesBlock .text{ color: var(--text-hi); }
.StoriesBlock .icon .icon-quote{ color: var(--accent-green); }
.userBlock .cont h5{ color: var(--text-md); font-weight: 400; }
.userBlock .img{ background: var(--grad-primary); color: #06110a; font-weight: 700; }
.successStoriesWrap .imgBlock{
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
}

/* Privacy / trust cards -> icon glass tiles */
.privacyBlock{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  padding: 30px 26px;
}
.privacyBlock .trustIcon{
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--accent-green-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.privacyBlock .trustIcon svg{ width: 26px; height: 26px; stroke: var(--accent-green); }
.privacyBlock .cont{ padding: 0; }
.privacyBlock .cont h5{ color: var(--text-hi); }
.privacyBlock .cont p{ color: var(--text-md); }

/* ==========================================================================
   Why Organizations Choose PIVVOT
   Minimal, premium 4-card grid — a calm transition between hero and solutions.
   Typography, spacing and subtle interaction only; no glass dashboards.
   ========================================================================== */
.why-section{
  position: relative;
  padding: 80px 0;
  background: var(--bg-base);
  overflow: hidden;
}
.why-inner{
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* soft background glows — very subtle, under 10% */
.why-glow{
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.why-glow--green{
  bottom: -220px; left: -160px;
  background: rgba(12,198,74,0.09);
}
.why-glow--blue{
  top: -220px; right: -160px;
  background: rgba(62,142,247,0.08);
}

/* ---------- Header ---------- */
.why-header{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.why-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(12,255,180,0.25);
  background: rgba(255,255,255,0.02);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.21em;   /* ~3px at 14px */
  text-transform: uppercase;
  color: var(--text-md);
  margin-bottom: 32px;
}
.why-badge::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 12px var(--accent-green);
}
.why-title{
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-hi);
  margin: 0 0 28px;
}
.why-title span{
  background: linear-gradient(120deg, #0CC64A 0%, #12D6C4 45%, #3E8EF7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.why-description{
  font-size: 20px;
  line-height: 1.8;
  color: rgba(255,255,255,0.72);
  margin: 0 auto 80px;
  max-width: 760px;
}

/* ---------- Feature grid ---------- */
.why-grid{
  --bs-gutter-x: 32px;
  --bs-gutter-y: 32px;
}

.why-card{
  position: relative;
  height: 100%;
  min-height: 250px;
  padding: 36px;
  border-radius: 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.why-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: linear-gradient(135deg, #0CC64A, #12D6C4);
  box-shadow: 0 6px 20px rgba(12,198,74,0.22);
  transition: box-shadow .35s ease, transform .35s ease;
}
.why-icon svg{
  width: 24px; height: 24px;
  stroke: #ffffff;
}
.why-card-title{
  position: relative;
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-hi);
  margin: 28px 0 0;
}
/* green gradient underline — hidden until hover */
.why-card-title::after{
  content: "";
  position: absolute;
  left: 0; bottom: -8px;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0CC64A, #12D6C4);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.why-card-description{
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-md);
  margin: 16px 0 0;
}

/* ---------- Hover ---------- */
.why-card:hover{
  transform: translateY(-8px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(12,255,180,0.35);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.why-card:hover .why-icon{
  box-shadow: 0 8px 28px rgba(12,198,74,0.45);
  transform: scale(1.04);
}
.why-card:hover .why-card-title::after{
  transform: scaleX(1);
  opacity: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px){
  .why-title{ font-size: 52px; }
}
@media (max-width: 767px){
  .why-section{ padding: 80px 0; }
  .why-title{ font-size: 38px; }
  .why-description{ font-size: 18px; margin-bottom: 56px; }
  .why-card{ min-height: 0; }
}

/* ---------- Final CTA ---------- */
.finalCtaSection{
  position: relative;
  padding: 20px 0 100px;
}
.finalCtaPanel{
  position: relative;
  overflow: hidden;
  padding: 90px 60px;
  border-radius: var(--radius-xl);
  text-align: center;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(12,198,74,0.16), transparent 65%),
    radial-gradient(50% 80% at 85% 100%, rgba(77,187,255,0.10), transparent 70%),
    var(--grad-panel);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.finalCtaPanel .glowBlob{ width: 320px; height: 320px; }
.finalCtaPanel h2,
.finalCtaPanel p{ position: relative; z-index: 2; }

.ctaNetwork{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ctaParticles{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ctaParticles span{
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(46,235,154,.4);
  filter: blur(1px);
  animation: floatY 9s ease-in-out infinite;
}
.ctaParticles span:nth-child(1){ top: 22%; left: 12%; animation-delay: 0s; }
.ctaParticles span:nth-child(2){ top: 60%; left: 22%; animation-delay: 1.6s; background: rgba(77,187,255,.38); }
.ctaParticles span:nth-child(3){ top: 30%; left: 46%; animation-delay: 3.1s; width: 4px; height: 4px; }
.ctaParticles span:nth-child(4){ top: 68%; left: 58%; animation-delay: .9s; }
.ctaParticles span:nth-child(5){ top: 24%; left: 78%; animation-delay: 2.3s; background: rgba(77,187,255,.38); }
.ctaParticles span:nth-child(6){ top: 58%; left: 88%; animation-delay: 4s; width: 4px; height: 4px; }
.finalCtaPanel h2{
  font-size: 40px;
  font-weight: 700;
  color: var(--text-hi);
  max-width: 720px;
  margin: 0 auto 18px;
}
.finalCtaPanel p{
  font-size: 17px;
  color: var(--text-md);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.finalCtaPanel .btnWrap{ justify-content: center; position: relative; z-index: 2; }

@media (max-width: 767px){
  .finalCtaPanel{ padding: 60px 26px; }
  .finalCtaPanel h2{ font-size: 30px; }
}

/* ---------- Footer ---------- */
.siteFooter{
  background: var(--bg-elevated);
  border-top: 1px solid var(--glass-border);
}
.footer-description{ color: var(--text-md); }
.social-links a{
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-hi);
}
.footer-links ul li a{ color: var(--text-md); }
.footer-links ul li a:hover{ color: var(--accent-green); }
.copyright{ color: var(--text-lo); border-top-color: var(--glass-border); }


/* ==========================================================================
   Solutions — full-bleed premium horizontal showcase
   Built to the approved reference (assets-2/images/refernce/image.png).
   The active card (~50%) is centered; the previous and next solutions stay
   fully readable as narrow teaser cards touching the viewport edges. The
   track loops (clone slides at both ends), so both teasers always exist.
   Chrome: vertical 01/05 counter left of the card, two stacked glass arrows
   right of it (next carries the green accent), a centered five-segment
   progress indicator, plus drag / swipe / trackpad / wheel / keyboard.

   Sizing contract (also read by solutions-slider.js — keep them here):
   --sol-teaser-w / --sol-active-w / --sol-open-w are slide widths per state,
   --sol-track-gap separates slides, --sol-grid-gap splits the expanded card.
   ========================================================================== */
.solShowcase{
  --sol-grid-gap: 16px;
  --sol-track-gap: 7.5vw;
  --sol-teaser-w: 13%;
  --sol-active-w: 66%;
  --sol-open-w: 76%;
  padding: 120px 0 110px;
  scroll-margin-top: 90px;
  overflow: hidden;
}
.solShowcase .solutionsIntro{ max-width: 780px; margin: 0 auto 56px; }

.solShowcase-title{
  color: var(--text-hi);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 22px;
}
.solShowcase-title .accent{
  background: linear-gradient(120deg, var(--accent-green), var(--accent-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.solShowcase-sub{
  color: var(--text-md);
  font-size: 17px;
  line-height: 1.75;
  margin: 0;
}

/* ----- Stage: full viewport width — deliberately not in .container ----- */
.solStage{ width: 100%; }
.solStage-view{ position: relative; } /* anchors the counter + arrows */

.solViewport{
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.solViewport:focus{ outline: none; }
.solViewport:focus-visible{ box-shadow: inset 0 0 0 2px rgba(46,235,154,.55); border-radius: 22px; }
.solViewport.is-dragging{ cursor: grabbing; user-select: none; }
.solViewport img{ -webkit-user-drag: none; user-select: none; }

.solTrack{
  display: flex;
  align-items: stretch;
  gap: var(--sol-track-gap);
  will-change: transform;
  transition: transform 600ms ease-in-out;
}
.solViewport.is-dragging .solTrack{ transition: none; }
/* loop teleports and resizes reposition without animating */
.solShowcase.is-teleporting .solTrack,
.solShowcase.is-teleporting .solSlide{ transition: none !important; }

/* ----- Slides morph between three widths: teaser preview, active card and
       expanded card. Identical duration + easing to the track transform
       keeps the whole composition mathematically in sync. ----- */
.solSlide{
  flex: 0 0 var(--sol-teaser-w);
  min-width: 0;
  opacity: .55;
  cursor: pointer;
  transition: flex-basis 600ms ease-in-out, opacity 600ms ease-in-out;
}
.solSlide:not(.is-active):hover{ opacity: .8; }
.solSlide.is-active{ flex-basis: var(--sol-active-w); opacity: 1; cursor: default; }
.solSlide.is-active.is-open{ flex-basis: var(--sol-open-w); }

/* ==========================================================================
   Collapsed <-> expanded card states
   Expanded (.solSlide.is-open): the slide widens to --sol-open-w while the
   grid's second column opens and the glass information panel slides in from
   the right. The panel keeps its final size inside a zero-width clipped
   column, so it drives the card height in BOTH states — the section never
   jumps. 100fr/0fr <-> 59fr/41fr keeps the fr sums equal, which makes the
   grid interpolation linear.
   ========================================================================== */
.solTrack .cwGrid{
  grid-template-columns: 59fr 41fr;
  column-gap: var(--sol-grid-gap);
  transition:
    grid-template-columns 450ms cubic-bezier(.4,0,.2,1),
    column-gap 450ms cubic-bezier(.4,0,.2,1);
}
.solSlide:not(.is-open) .cwGrid{ grid-template-columns: 100fr 0fr; column-gap: 0px; }

.solTrack .cwInfoWrap{
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  border-radius: 22px;
}
.solTrack .cwInfoCard{
  position: relative;
  flex: none;
  width: var(--cw-info-w, 100%);
  transform: translate3d(56px, 0, 0);
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform 450ms cubic-bezier(.22,.61,.36,1),
    opacity 350ms ease-out,
    visibility 0s 450ms;
}
.solSlide.is-open .cwInfoCard{
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 450ms cubic-bezier(.22,.61,.36,1) 40ms,
    opacity 350ms ease-out 40ms,
    visibility 0s;
}

/* panel text fades up in sequence once the panel arrives
   (children: who / capabilities / benefits / cta) */
.solTrack .cwInfoCard > .cwBlock,
.solTrack .cwInfoCard > .cwCta{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}
.solSlide.is-open .cwInfoCard > .cwBlock,
.solSlide.is-open .cwInfoCard > .cwCta{ opacity: 1; transform: none; }
.solSlide.is-open .cwInfoCard > :nth-child(1){ transition-delay: 140ms; }
.solSlide.is-open .cwInfoCard > :nth-child(2){ transition-delay: 200ms; }
.solSlide.is-open .cwInfoCard > :nth-child(3){ transition-delay: 260ms; }
.solSlide.is-open .cwInfoCard > :nth-child(4){ transition-delay: 320ms; }

/* ----- Bottom indicator: five equal segments, active one filled ----- */
.solProgress{
  display: flex;
  gap: 12px;
  width: min(560px, 72%);
  margin: 46px auto 0;
}
.solProgress-seg{
  position: relative;
  flex: 1;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.solProgress-seg::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 10px;
  height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,.15);
}
.solProgress-seg span{
  position: absolute;
  left: 0; top: 10px;
  width: 100%;
  height: 4px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
  box-shadow: 0 0 12px rgba(46,235,154,.3);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(.42,0,.58,1);
  pointer-events: none;
}
.solShowcase.is-dragging .solProgress-seg span{ transition: none; }
.solProgress-seg:hover::before{ background: rgba(255,255,255,.2); }
.solProgress-seg:focus-visible{ outline: 2px solid var(--accent-green); outline-offset: 2px; border-radius: 8px; }

/* screen-reader announcement of the current solution */
.solStatus{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ----- Floating arrows right of the active card; the next arrow carries
       the green accent ring exactly like the reference. They glide outward
       when the card expands. ----- */
.solArrows{
  position: absolute;
  z-index: 5;
  left: calc(50% + var(--sol-active-w) / 2 + 34px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: left 450ms cubic-bezier(.4,0,.2,1);
}
.solShowcase.has-open .solArrows{ left: calc(50% + var(--sol-open-w) / 2 + 34px); }
.solArrow{
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,16,13,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-hi);
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  transition: background .3s ease-out, border-color .3s ease-out,
    box-shadow .3s ease-out, transform .3s ease-out;
}
.solArrow svg{ width: 18px; height: 18px; }
.solArrow:hover{
  transform: translateY(-3px);
  background: rgba(46,235,154,.14);
  border-color: rgba(46,235,154,.5);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 24px rgba(46,235,154,.25);
}
.solArrow:focus-visible{ outline: 2px solid var(--accent-green); outline-offset: 2px; }
.solArrow--next{
  border-color: rgba(46,235,154,.55);
  color: var(--accent-green);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 16px rgba(46,235,154,.15);
}

/* ----- Vertical counter: 01 / 05 left of the active card ----- */
.solCounter{
  position: absolute;
  z-index: 5;
  right: calc(50% + var(--sol-active-w) / 2 + 34px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transition: right 450ms cubic-bezier(.4,0,.2,1);
}
.solShowcase.has-open .solCounter{ right: calc(50% + var(--sol-open-w) / 2 + 34px); }
.solCounter-current{
  font-size: 30px;
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: .04em;
  line-height: 1;
}
.solCounter-current.is-tick{ animation: solCountTick .35s ease-out; }
@keyframes solCountTick{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: none; }
}
.solCounter-bar{
  width: 34px;
  height: 1px;
  background: rgba(255,255,255,.35);
}
.solCounter-total{
  font-size: 14px;
  font-weight: 600;
  color: var(--text-md);
  letter-spacing: .06em;
  line-height: 1;
}

/* ----- Responsive ----- */
@media (max-width: 1399px){
  .solShowcase{ --sol-track-gap: 6.5vw; }
}
@media (max-width: 1199px){
  .solShowcase{ --sol-teaser-w: 15%; --sol-active-w: 56%; --sol-open-w: 70%; --sol-track-gap: 5.5vw; }
}
@media (max-width: 991px){
  .solShowcase{ padding: 90px 0 80px; --sol-teaser-w: 12%; --sol-active-w: 68%; --sol-open-w: 82%; --sol-track-gap: 3.5vw; }
  .solShowcase .solutionsIntro{ margin-bottom: 44px; }
  /* the side zones are too tight for the calc anchors — pin the arrows to
     the edge and drop the counter (it would sit on the readable teasers) */
  .solArrows{ left: auto; right: 14px; }
  .solShowcase.has-open .solArrows{ left: auto; }
  .solArrow{ width: 42px; height: 42px; }
  .solCounter{ display: none; }
  .solProgress{ margin-top: 40px; }

  /* stacked card: the information panel expands downward instead of
     sliding in from the side — the grid animates its second row open */
  .solTrack .cwGrid{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 0;
    row-gap: var(--sol-grid-gap);
    transition:
      grid-template-rows 450ms cubic-bezier(.4,0,.2,1),
      row-gap 450ms cubic-bezier(.4,0,.2,1);
  }
  .solSlide:not(.is-open) .cwGrid{
    grid-template-columns: 1fr;
    grid-template-rows: auto 0fr;
    row-gap: 0;
  }
  .solTrack .cwInfoCard{ width: 100%; transform: translate3d(0, 24px, 0); }
  .solSlide.is-open .cwInfoCard{ transform: translate3d(0, 0, 0); }
}
@media (max-width: 767px){
  /* mobile: only the active card, no teaser previews */
  .solShowcase{ --sol-teaser-w: 100%; --sol-active-w: 100%; --sol-open-w: 100%; --sol-track-gap: 18px; }
  .solStage{ padding: 0 16px; }
  /* pin the arrow stack over the image sliver left of the dashboard */
  .solArrows{ right: auto; left: 26px; top: 200px; transform: none; gap: 12px; }
  .solArrow{ width: 44px; height: 44px; }
  .solArrow svg{ width: 17px; height: 17px; }
}
@media (max-width: 575px){
  .solShowcase{ padding: 70px 0 64px; }
  .solShowcase-sub{ font-size: 15.5px; }
  .solShowcase-sub br{ display: none; }
  .solProgress{ gap: 8px; width: 86%; }
}

/* ----- Reduced motion: keep it functional, drop the choreography ----- */
@media (prefers-reduced-motion: reduce){
  .solTrack,
  .solSlide,
  .solSlide .cwDashboard,
  .solTrack .cwGrid,
  .solTrack .cwHeroImg,
  .cwPanel,
  .cwBadge,
  .cwHeading,
  .cwPanel-desc,
  .cwReadMore,
  .cwSeal,
  .solTrack .cwInfoCard,
  .solTrack .cwInfoCard > .cwBlock,
  .solTrack .cwInfoCard > .cwCta,
  .solArrows,
  .solCounter,
  .solProgress-seg span{
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .solSlide.is-open .cwHeroImg{ transform: none; }
  .cwSeal-ring{ animation: none; }
  .solCounter-current.is-tick{ animation: none; }
}


/* ==========================================================================
   PLATFORM OVERVIEW — premium product showcase
   ONE dashboard screenshot (left, ~68%) + six gradient feature blocks
   (right, ~32%). The dashboard is a single <img> — no HTML-built charts.
   Loads AFTER main.css + dark-theme.css and reuses their tokens
   (--bg-base, --text-*, --accent-*). Bootstrap grid for columns; every
   other style is here. No Tailwind, no inline styles, no Bootstrap cards.
   ========================================================================== */

.platform-overview{
  position: relative;
  padding: 80px 0;
  background: var(--bg-base, #050505);
  overflow: hidden;
}
.platform-overview .container{ position: relative; z-index: 1; max-width: 1500px; }

/* ---------- Background — subtle green (left) + blue (right) radial glows ---------- */
.platform-bg{ position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.platform-glow{
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  border-radius: 50%;
  filter: blur(120px);
}
.platform-glow--green{ left: -8%;  width: 820px; height: 820px; background: rgba(12, 198, 74, 0.07); }
.platform-glow--blue{  right: -6%; width: 720px; height: 720px; background: rgba(62, 142, 247, 0.07); }

/* ==========================================================================
   Two-column layout — dashboard 68% / features 32%, vertically centred
   ========================================================================== */
.platform-layout{
  --bs-gutter-x: 60px;
  align-items: center;
}
@media (min-width: 1200px){
  .platform-col-main{ flex: 0 0 auto; width: 68%; }
  .platform-col-side{ flex: 0 0 auto; width: 32%; }
}
.platform-col-main{ display: flex; justify-content: center; }

/* ==========================================================================
   Left — single floating dashboard image (NO HTML charts)
   ========================================================================== */
.platform-dashboard{
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0;
  animation: platformFloat 8s ease-in-out infinite;
}
/* soft radial glow behind the image */
.platform-dashboard::before{
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(
    circle at 45% 50%,
    rgba(12, 198, 74, 0.12) 0%,
    rgba(62, 142, 247, 0.06) 46%,
    transparent 68%
  );
  filter: blur(50px);
}
.platform-dashboard-image{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.60),
    0 0 70px rgba(12, 198, 74, 0.08),
    0 0 120px rgba(62, 142, 247, 0.06);
  transform: rotate(-3deg);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.55s ease;
}
.platform-dashboard:hover .platform-dashboard-image{
  transform: rotate(-1.5deg) scale(1.012);
  box-shadow:
    0 52px 130px rgba(0, 0, 0, 0.66),
    0 0 100px rgba(12, 198, 74, 0.14),
    0 0 160px rgba(62, 142, 247, 0.10);
}
@keyframes platformFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* ==========================================================================
   Right — six stacked gradient feature blocks
   ========================================================================== */
.platform-feature-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* per-block theming: 01 green · 02 cyan · 03 blue · 04 purple · 05 pink-purple · 06 magenta */
.platform-feature{
  --fg: linear-gradient(135deg, #0CC64A, #3BE38A);
  --fc: #0CC64A;
}
.platform-feature:nth-of-type(2){ --fg: linear-gradient(135deg, #0FC7DE, #4BE3F5); --fc: #22D3EE; }
.platform-feature:nth-of-type(3){ --fg: linear-gradient(135deg, #2E7EF7, #63A6FF); --fc: #3E8EF7; }
.platform-feature:nth-of-type(4){ --fg: linear-gradient(135deg, #8248F0, #A87BF8); --fc: #9B5CF6; }
.platform-feature:nth-of-type(5){ --fg: linear-gradient(135deg, #A63FE8, #D06FF0); --fc: #C05CF6; }
.platform-feature:nth-of-type(6){ --fg: linear-gradient(135deg, #E0389C, #F45CB0); --fc: #EC4899; }

.platform-feature{
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 32px 22px 22px;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
}
/* gradient border layer + glass fill, both with an angled right edge */
.platform-feature::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  background: var(--fg);
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
.platform-feature::after{
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)), #0a0b0a;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.4s ease;
}
.platform-number,
.platform-content{ position: relative; z-index: 1; }

.platform-feature:hover{
  transform: translateX(8px);
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
}
.platform-feature:hover::before{ opacity: 1; }
.platform-feature:hover::after{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)), #0c0e0c;
}

/* ---------- Hexagon number badge with large gradient numeral ---------- */
.platform-number{
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 64px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--fg);
  transition: filter 0.4s ease;
}
.platform-number::before{
  content: "";
  position: absolute;
  inset: 1.6px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #0b0d0b;
}
.platform-number span{
  position: relative;
  z-index: 1;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: var(--fg);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.platform-feature:hover .platform-number{ filter: drop-shadow(0 0 10px var(--fc)); }

/* ---------- Feature text ---------- */
.platform-content{ min-width: 0; }
.platform-feature-title{
  margin: 0 0 5px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-hi, #F5F7F6);
}
.platform-feature-desc{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-lo, rgba(245, 247, 246, 0.55));
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1399.98px){
  .platform-feature-title{ font-size: 20px; }
}
@media (max-width: 1199.98px){
  /* tablet: dashboard image first, feature list below */
  .platform-overview{ padding: 110px 0; }
  .platform-col-main{ margin-bottom: 72px; }
  .platform-dashboard{ max-width: 780px; }
  .platform-feature-list{ max-width: 680px; margin: 0 auto; }
}
@media (max-width: 767.98px){
  .platform-overview{ padding: 88px 0; }
  .platform-col-main{ margin-bottom: 56px; }
  .platform-dashboard-image{ border-radius: 18px; transform: rotate(-2deg); }
  .platform-feature{ padding: 20px 26px 20px 18px; gap: 16px; }
  .platform-number{ width: 50px; height: 56px; }
  .platform-number span{ font-size: 22px; }
  .platform-feature-title{ font-size: 19px; }
  .platform-feature-desc{ font-size: 15px; }
}

@media (prefers-reduced-motion: reduce){
  .platform-dashboard{ animation: none; }
  .platform-dashboard-image,
  .platform-feature,
  .platform-feature::before,
  .platform-feature::after,
  .platform-number{ transition: none; }
}

/* ==========================================================================
   PIVVOT — Solution Capabilities
   One unified ecosystem: a central platform surrounded by four capability
   panels, connected with curved glowing SVG lines and travelling particles.
   Additive layer on top of main.css / dark-theme.css. No inline styles.
   ========================================================================== */

/* ==========================================================================
   SOLUTION CAPABILITIES — connected PIVVOT ecosystem
   LOCAL to corporate-wellness.html. One central platform hub with four
   capability modules orbiting it, SVG connectors, and a bottom info strip.
   Bootstrap grid for the 2x2 module layout; everything else custom.
   Reuses global tokens (--bg-base, --glass-*, --text-*, --grad-primary).
   ========================================================================== */
.solution-capabilities{
  /* per-theme accent palette */
  --sc-green:  #16C784;  --sc-green-rgb:  22,199,132;
  --sc-blue:   #3E8EF7;  --sc-blue-rgb:   62,142,247;
  --sc-purple: #8B5CF6;  --sc-purple-rgb: 139,92,246;
  --sc-cyan:   #22D3EE;  --sc-cyan-rgb:   34,211,238;
  --sc-panel:  rgba(14,16,18,0.66);
  --sc-radius: 30px;

  position: relative;
  overflow: hidden;
  padding: 80px 0;
  scroll-margin-top: 90px;
  background: var(--bg-base, #050505);
}

/* ---------- Ambient background: radial glows + grid + particles ---------- */
.sc-bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sc-glow{ position: absolute; border-radius: 50%; filter: blur(160px); opacity: .55; }
.sc-glow--green{  top: 30%; left: 50%; width: 620px; height: 620px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(var(--sc-green-rgb),0.16), transparent 70%); }
.sc-glow--blue{   top: 12%; right: -140px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(var(--sc-blue-rgb),0.12), transparent 70%); }
.sc-glow--purple{ bottom: 4%; left: -160px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--sc-purple-rgb),0.12), transparent 70%); }
.sc-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 78%);
}
.sc-particle{
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
  animation: scFloat 15s ease-in-out infinite;
}
.sc-particle:nth-child(4){ top: 20%; left: 16%; animation-delay: 0s; }
.sc-particle:nth-child(5){ top: 66%; left: 24%; animation-delay: -3s; }
.sc-particle:nth-child(6){ top: 30%; left: 82%; animation-delay: -6s; }
.sc-particle:nth-child(7){ top: 74%; left: 76%; animation-delay: -9s; }
.sc-particle:nth-child(8){ top: 14%; left: 56%; animation-delay: -12s; }
@keyframes scFloat{ 0%,100%{ transform: translateY(0); opacity: .3; } 50%{ transform: translateY(-24px); opacity: .8; } }

.sc-inner{ position: relative; z-index: 2; max-width: 1500px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header (scoped: bigger title + underline just for this section) ---------- */
.sc-head{ margin-bottom: 84px; }
.solution-capabilities .section-head{ max-width: 850px; }
.solution-capabilities .section-title{ font-size: clamp(42px, 6vw, 72px); }
.sc-title-underline{
  display: block;
  width: 96px; height: 4px;
  margin: 0 auto 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sc-green), var(--sc-cyan), var(--sc-blue));
  box-shadow: 0 0 18px rgba(var(--sc-cyan-rgb),0.5);
}

/* ==========================================================================
   Ecosystem
   ========================================================================== */
.solution-platform{ position: relative; }

/* ---------- SVG connectors (desktop only) ---------- */
.platform-connectors{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; overflow: visible; pointer-events: none;
  display: none;
}
.sc-conn-line{ fill: none; stroke-width: 1.6; opacity: .45; stroke-linecap: round; }
.sc-conn--green  .sc-conn-line{ stroke: var(--sc-green); }
.sc-conn--blue   .sc-conn-line{ stroke: var(--sc-blue); }
.sc-conn--purple .sc-conn-line{ stroke: var(--sc-purple); }
.sc-conn--cyan   .sc-conn-line{ stroke: var(--sc-cyan); }
.sc-conn-node{ stroke: none; }
.sc-conn--green  .sc-conn-node{ fill: var(--sc-green); }
.sc-conn--blue   .sc-conn-node{ fill: var(--sc-blue); }
.sc-conn--purple .sc-conn-node{ fill: var(--sc-purple); }
.sc-conn--cyan   .sc-conn-node{ fill: var(--sc-cyan); }
.sc-conn-node{ filter: drop-shadow(0 0 5px currentColor); }
.sc-conn--green  .sc-conn-node{ color: var(--sc-green); }
.sc-conn--blue   .sc-conn-node{ color: var(--sc-blue); }
.sc-conn--purple .sc-conn-node{ color: var(--sc-purple); }
.sc-conn--cyan   .sc-conn-node{ color: var(--sc-cyan); }
.sc-conn-dot{ r: 3.5; }
.sc-conn--green  .sc-conn-dot{ fill: var(--sc-green); }
.sc-conn--blue   .sc-conn-dot{ fill: var(--sc-blue); }
.sc-conn--purple .sc-conn-dot{ fill: var(--sc-purple); }
.sc-conn--cyan   .sc-conn-dot{ fill: var(--sc-cyan); }

/* ---------- Center platform hub ---------- */
.platform-center{
  position: relative;
  z-index: 5;
  width: 200px; height: 200px;
  margin: 0 auto 40px;               /* stacked default (tablet/mobile) */
  display: grid; place-items: center;
}
.platform-core{
  position: relative; z-index: 3;
  width: 200px; height: 200px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 0 34px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 50% 34%, rgba(var(--sc-green-rgb),0.16), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(var(--sc-blue-rgb),0.16), transparent 60%),
    linear-gradient(var(--sc-panel), var(--sc-panel)) padding-box,
    linear-gradient(140deg, var(--sc-green), var(--sc-cyan) 45%, var(--sc-blue)) border-box;
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 30px 90px rgba(0,0,0,0.6),
    0 0 90px rgba(var(--sc-green-rgb),0.18),
    0 0 130px rgba(var(--sc-blue-rgb),0.14);
  animation: scPulse 6s ease-in-out infinite;
}
@keyframes scPulse{
  0%,100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 90px rgba(0,0,0,0.6), 0 0 80px rgba(var(--sc-green-rgb),0.16), 0 0 120px rgba(var(--sc-blue-rgb),0.12); }
  50%    { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 90px rgba(0,0,0,0.6), 0 0 110px rgba(var(--sc-green-rgb),0.26), 0 0 150px rgba(var(--sc-blue-rgb),0.2); }
}
.platform-logo{ width: 116px; height: auto; }
.platform-tagline{
  margin: 14px auto 0; max-width: 190px;
  font-size: 13px; line-height: 1.5; letter-spacing: .01em;
  color: var(--text-md, rgba(245,247,246,0.72));
}

/* orbital rings */
.platform-ring{
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; pointer-events: none;
  transform: translate(-50%,-50%);
}
.platform-ring--1{ width: 260px; height: 260px; border: 1px dotted rgba(255,255,255,0.16); animation: scSpin 40s linear infinite; }
.platform-ring--2{ width: 324px; height: 324px; border: 1px solid rgba(255,255,255,0.07); animation: scSpin 60s linear infinite reverse; }
.platform-ring--3{ width: 388px; height: 388px; border: 1px dashed rgba(255,255,255,0.05); animation: scSpin 90s linear infinite; }
.platform-ring--2::after{
  content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px;
  margin-left: -3.5px; border-radius: 50%;
  background: var(--sc-cyan); box-shadow: 0 0 12px var(--sc-cyan);
}
@keyframes scSpin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

/* ==========================================================================
   Modules
   ========================================================================== */
.module-row{ position: relative; z-index: 3; --bs-gutter-y: 28px; }

.solution-module{
  --m: var(--sc-green); --m-rgb: var(--sc-green-rgb);
  position: relative;
  height: 100%;
  min-height: 420px;
  display: flex; flex-direction: column;
  padding: 30px;
  border-radius: var(--sc-radius);
  border: 1px solid transparent;
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(var(--m-rgb),0.10), transparent 55%),
    linear-gradient(var(--sc-panel), var(--sc-panel)) padding-box,
    linear-gradient(145deg, rgba(var(--m-rgb),0.55), rgba(255,255,255,0.05) 42%, rgba(var(--m-rgb),0.14)) border-box;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.module--green { --m: var(--sc-green);  --m-rgb: var(--sc-green-rgb); }
.module--blue  { --m: var(--sc-blue);   --m-rgb: var(--sc-blue-rgb); }
.module--purple{ --m: var(--sc-purple); --m-rgb: var(--sc-purple-rgb); }
.module--cyan  { --m: var(--sc-cyan);   --m-rgb: var(--sc-cyan-rgb); }

/* asymmetric corner facing the hub is softer */
.module--green { border-top-left-radius: 44px; }
.module--blue  { border-top-right-radius: 44px; }
.module--purple{ border-bottom-left-radius: 44px; }
.module--cyan  { border-bottom-right-radius: 44px; }

.module-header{ margin-bottom: 22px; }
.module-label{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--m);
}
.module-label::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--m); box-shadow: 0 0 10px var(--m);
}
.module-title{
  margin: 12px 0 0;
  font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--text-hi, #F5F7F6);
}

/* body: product visual (left) + feature list (right) */
.module-body{ flex: 1 1 auto; display: flex; align-items: stretch; gap: 26px; }
.module-image{
  flex: 0 0 38%; max-width: 38%;
  position: relative; overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(var(--m-rgb),0.16), transparent 65%),
    #0a0c0b;
  border: 1px solid rgba(255,255,255,0.07);
  display: grid; place-items: center;
  min-height: 210px;
}
.module-image img{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .5s ease;
}
.solution-module:hover .module-image img{ transform: scale(1.03); }

.feature-list{
  flex: 1 1 auto; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.feature-item{
  display: flex; align-items: center; gap: 13px;
  font-size: 16px; font-weight: 500; line-height: 1.25;
  color: var(--text-md, rgba(245,247,246,0.82));
}
.feature-ic{
  flex: 0 0 auto; display: grid; place-items: center;
  width: 45px; height: 45px; border-radius: 50%;
  background: rgba(var(--m-rgb),0.08);
  border: 1px solid rgba(var(--m-rgb),0.32);
  box-shadow: 0 0 14px rgba(var(--m-rgb),0.14);
  transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}
.feature-ic svg{ width: 25px; height: 25px; fill: none; stroke: var(--m); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.solution-module:hover .feature-ic{ box-shadow: 0 0 18px rgba(var(--m-rgb),0.32); border-color: rgba(var(--m-rgb),0.5); }

.solution-module:hover{
  transform: translateY(-6px);
  box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 60px rgba(var(--m-rgb),0.24);
}

/* ---------- Built product mockups ---------- */
/* phone (module 2) */
.phone-mock{
  width: 132px; height: 196px; border-radius: 26px; padding: 8px;
  background: linear-gradient(160deg, #1b1e24, #0a0c0f);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 44px rgba(0,0,0,0.5), 0 0 34px rgba(var(--sc-blue-rgb),0.18);
  transition: transform .5s ease;
}
.solution-module:hover .phone-mock{ transform: scale(1.03); }
.phone-screen{
  position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--sc-blue-rgb),0.24), transparent 60%), #0c0f14;
  padding: 16px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.phone-screen::before{ content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.2); }
.phone-ring{ position: relative; width: 66px; height: 66px; margin-top: 6px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--sc-blue) 78%, rgba(255,255,255,0.08) 0); }
.phone-ring::after{ content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #0c0f14; }
.phone-ring b{ position: relative; z-index: 1; font-size: 20px; color: #fff; font-weight: 700; }
.phone-ring i{ position: relative; z-index: 1; font-size: 8px; font-style: normal; color: var(--text-md); margin-top: -2px; }
.phone-bars{ display: flex; align-items: flex-end; gap: 6px; height: 30px; }
.phone-bars span{ width: 9px; border-radius: 3px; background: linear-gradient(180deg, var(--sc-blue), rgba(var(--sc-blue-rgb),0.35)); }
.phone-bars span:nth-child(1){ height: 45%; }
.phone-bars span:nth-child(2){ height: 72%; }
.phone-bars span:nth-child(3){ height: 55%; }
.phone-bars span:nth-child(4){ height: 92%; }
.phone-bars span:nth-child(5){ height: 64%; }
.phone-chip{ width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 8.5px; color: #cfe0ff; background: rgba(var(--sc-blue-rgb),0.16); border: 1px solid rgba(var(--sc-blue-rgb),0.3); }

/* AI brain hologram (module 4) */
.ai-brain{ width: 100%; height: 100%; max-height: 190px; display: block; }
.ai-brain .ai-core{ fill: none; stroke: var(--sc-cyan); stroke-width: 1.4; filter: drop-shadow(0 0 6px rgba(var(--sc-cyan-rgb),0.6)); }
.ai-brain .ai-link{ stroke: rgba(var(--sc-cyan-rgb),0.5); stroke-width: 1; }
.ai-brain .ai-node{ fill: var(--sc-cyan); filter: drop-shadow(0 0 5px var(--sc-cyan)); animation: scNode 3.4s ease-in-out infinite; }
.ai-brain .ai-node:nth-child(odd){ animation-delay: -1.7s; }
@keyframes scNode{ 0%,100%{ opacity: .5; } 50%{ opacity: 1; } }

/* ==========================================================================
   Bottom info strip
   ========================================================================== */
.bottom-info-strip{
  margin-top: 72px;
  border-radius: 28px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--sc-panel), var(--sc-panel)) padding-box,
    linear-gradient(120deg, rgba(var(--sc-green-rgb),0.5), rgba(var(--sc-cyan-rgb),0.4) 50%, rgba(var(--sc-blue-rgb),0.5)) border-box;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  overflow: hidden;
}
.info-col{ display: flex; align-items: flex-start; gap: 20px; padding: 40px 44px; }
.info-col + .info-col{ border-left: 1px solid rgba(255,255,255,0.08); }
.info-ic{
  flex: 0 0 auto; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px;
  background: rgba(var(--ic-rgb),0.1); border: 1px solid rgba(var(--ic-rgb),0.34);
  box-shadow: 0 0 22px rgba(var(--ic-rgb),0.18);
}
.info-col--security{ --ic-rgb: var(--sc-green-rgb); }
.info-col--impact{ --ic-rgb: var(--sc-blue-rgb); }
.info-ic svg{ width: 26px; height: 26px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-col--security .info-ic svg{ stroke: var(--sc-green); }
.info-col--impact .info-ic svg{ stroke: var(--sc-blue); }
.info-title{ margin: 2px 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-hi, #F5F7F6); }
.info-points{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.info-points li{ display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--text-md, rgba(245,247,246,0.72)); }
.info-points li::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--ic-rgb),0.9); box-shadow: 0 0 8px rgba(var(--ic-rgb),0.7); }

/* ==========================================================================
   Desktop ecosystem — absolute hub + connectors + center channel
   ========================================================================== */
@media (min-width: 1200px){
  .platform-connectors{ display: block; }
  /* centre with inset+auto margins (not transform) so the module's
     data-aos zoom/scale can't knock the hub off-centre */
  .platform-center{
    position: absolute;
    inset: 0;
    margin: auto;
  }
  .module-row{ --bs-gutter-x: 340px; --bs-gutter-y: 56px; }
  .module-cell--bl, .module-cell--br{ margin-bottom: 8px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px){
  /* Tablet — hub on top, modules 2x2, no connectors */
  .sc-head{ margin-bottom: 60px; }
  .platform-center{ width: 260px; height: 260px; margin: 0 auto 48px; }
  .platform-core{ width: 260px; height: 260px; }
  .platform-logo{ width: 104px; }
  .platform-ring--1{ width: 312px; height: 312px; }
  .platform-ring--2{ width: 368px; height: 368px; }
  .platform-ring--3{ width: 424px; height: 424px; }
  .module-row{ --bs-gutter-x: 28px; --bs-gutter-y: 28px; }
}

@media (max-width: 767.98px){
  /* Mobile — hub first, modules stacked; product visual stacks over features */
  .solution-capabilities{ padding: 90px 0; }
  .sc-head{ margin-bottom: 44px; }
  .platform-center{ width: 220px; height: 220px; margin: 0 auto 40px; }
  .platform-core{ width: 220px; height: 220px; padding: 0 26px; }
  .platform-logo{ width: 92px; }
  .platform-tagline{ font-size: 12px; }
  .platform-ring--1{ width: 264px; height: 264px; }
  .platform-ring--2{ width: 312px; height: 312px; }
  .platform-ring--3{ width: 360px; height: 360px; }

  .solution-module{ padding: 24px; min-height: 0; }
  .module-body{ flex-direction: column; gap: 20px; }
  .module-image{ flex-basis: auto; max-width: 100%; width: 100%; min-height: 200px; }
  .module-title{ font-size: 26px; }
  .bottom-info-strip{ margin-top: 48px; }
  .info-col{ padding: 30px 26px; }
  .info-col + .info-col{ border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
}

@media (prefers-reduced-motion: reduce){
  .sc-particle,
  .platform-ring--1, .platform-ring--2, .platform-ring--3,
  .platform-core,
  .ai-brain .ai-node{ animation: none; }
  .sc-conn-travel{ display: none; }
}

/* ==========================================================================
   PIVVOT — Solution Details page (additive layer)
   Loads AFTER main.css + dark-theme.css and reuses their tokens (--bg-base,
   --glass-*, --accent-*, --grad-primary, --radius-*, --shadow-*) plus the
   shared components (.btn, .sectionEyebrow, .blockTitle, .whyCard,
   .finalCtaPanel, .glowBlob, .dpChart). Everything new is prefixed sd-.

   TEMPLATE NOTE — this stylesheet is solution-agnostic: to build the
   Sports Performance / Critical Health / Elderly Care / Student Wellbeing
   detail pages, duplicate corporate-wellness.html and swap only the copy,
   imagery and icons. No CSS changes required.
   ========================================================================== */

/* ---------- Shared section rhythm ---------- */

/* glowing check circle used across the page (hero benefits, platform
   features, lead checklist) — same language as the showcase's cwCheck */
.sdCheck{
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(12,198,74,.45);
  background: rgba(12,198,74,.08);
  color: var(--accent-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(12,198,74,.25);
}
.sdCheck svg{ width: 11px; height: 11px; display: block; }

/* ==========================================================================
   SOLUTION CAPABILITIES — four premium pillar cards
   Accent-driven: each card modifier sets --cap-accent / --cap-accent-rgb and
   every accent surface (icon, number, title, divider, rows, edge light)
   derives from those two custom properties.
   ========================================================================== */
/* padding + scroll-margin are defined on the primary .solution-capabilities
   rule above so the responsive overrides win; keep only legacy container cap */
.solution-capabilities > .container{ max-width: 1320px; }
.capability-intro .sectionEyebrow{
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 24px;
}

/* Bootstrap row with the spec'd 28px gutter in both axes */

/* accent edge lighting — glowing top rim + soft halo behind the icon */

/* 4-across only at xl — the spec'd 620px height applies there */

/* ==========================================================================
   HOW IT WORKS — minimal typographic process line
   No cards, no icons: five huge outlined numbers on a 1px line. Accent
   progression per step via --step-accent / --step-accent-rgb / --step-grad-b;
   line fill + sequential number reveal driven by solution-page.js through
   --sd-progress (0 → 1) and .is-lit on each .process-step.
   ========================================================================== */
.process-section{
  position: relative;
  padding: 80px 0;
  scroll-margin-top: 90px;
  text-align: center;
}
.process-section > .container{ max-width: 1400px; }

/* ==========================================================================
   COMMON SECTION HEADER — shared badge / title / subtitle for every content
   section on corporate-wellness.html. Standard adopted from the original
   "How It Works" (process) header so all sections read as one system.
   Markup: a centered wrapper `.section-head` containing an optional
   `.section-badge` (green dot via ::before), a `.section-title` whose inner
   <span> renders the gradient accent word, and a `.section-subtitle`.
   ========================================================================== */
.section-head{
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0 auto 50px;
  text-align: center;
}
.section-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin: 0 0 26px;
}
.section-badge::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 12px var(--accent-green);
}
.section-title{
  font-size: clamp(38px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin: 0 0 26px;
}
.section-title span{
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-subtitle{
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-md);
  margin: 0 auto;
}
@media (max-width: 767.98px){
  .section-head{ margin-bottom: 64px; }
}

/* ---------- timeline ---------- */
.process-timeline{ --sd-progress: 0; }
.process-track{ position: relative; }

/* the 1px line sits behind the numbers; page-coloured number backgrounds
   mask it so the digits appear to rest on the line */
.process-line{
  position: absolute;
  top: 44px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255,255,255,.08);
}
.process-line-fill{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-blue), #A855F7);
  box-shadow: 0 0 12px rgba(62,142,247,.35);
  opacity: .85;
  transform: scaleX(var(--sd-progress));
  transform-origin: left center;
  transition: transform .2s linear;
}
.process-line-dot{
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
/* midpoints between the five milestone centres (10/30/50/70/90% of the
   track = 12.5/37.5/62.5/87.5% of the 80%-wide line) */
.process-line-dot--1{ left: 12.5%; background: #0CC64A; box-shadow: 0 0 10px rgba(12,198,74,.55); }
.process-line-dot--2{ left: 37.5%; background: #3E8EF7; box-shadow: 0 0 10px rgba(62,142,247,.55); }
.process-line-dot--3{ left: 62.5%; background: #A855F7; box-shadow: 0 0 10px rgba(168,85,247,.55); }
.process-line-dot--4{ left: 87.5%; background: #8B5CF6; box-shadow: 0 0 10px rgba(139,92,246,.55); }

.process-steps{
  position: relative;
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 0;
}

.process-step{
  --step-accent: #0CC64A;
  --step-accent-rgb: 12, 198, 74;
  --step-grad-b: #2DD4BF;
  text-align: center;
  min-width: 0;
}
.process-step--green { --step-accent: #0CC64A; --step-accent-rgb: 12, 198, 74;   --step-grad-b: #2DD4BF; }
.process-step--teal  { --step-accent: #2DD4BF; --step-accent-rgb: 45, 212, 191;  --step-grad-b: #3E8EF7; }
.process-step--blue  { --step-accent: #3E8EF7; --step-accent-rgb: 62, 142, 247;  --step-grad-b: #A855F7; }
.process-step--purple{ --step-accent: #A855F7; --step-accent-rgb: 168, 85, 247;  --step-grad-b: #8B5CF6; }
.process-step--violet{ --step-accent: #8B5CF6; --step-accent-rgb: 139, 92, 246;  --step-grad-b: #C084FC; }

/* huge outlined number — transparent fill, accent stroke; the ::after
   layer carries the gradient fill revealed on hover */
.process-number{
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 12px;
  background: var(--bg-base);
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--step-accent-rgb), .38);
  transition: -webkit-text-stroke-color .3s ease;
}
.process-step.is-lit .process-number{
  -webkit-text-stroke-color: rgba(var(--step-accent-rgb), .85);
}
.process-number::after{
  content: attr(data-num);
  position: absolute;
  inset: 0;
  padding: 0 12px;
  background: linear-gradient(135deg, var(--step-accent), var(--step-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0 transparent;
  opacity: 0;
  transition: opacity .3s ease;
}
.process-step:hover .process-number::after{ opacity: 1; }

.process-underline{
  display: block;
  width: 28px;
  height: 2px;
  margin: 20px auto 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--step-accent), var(--step-grad-b));
  box-shadow: 0 0 10px rgba(var(--step-accent-rgb), .45);
  transition: width .3s ease, box-shadow .3s ease;
}
.process-step:hover .process-underline{
  width: 56px;
  box-shadow: 0 0 16px rgba(var(--step-accent-rgb), .65);
}

.process-text{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-hi);
  max-width: 180px;
  margin: 0 auto;
}

/* tablet — keep the horizontal composition, let it scroll */
@media (max-width: 1199.98px){
  .process-timeline{
    overflow-x: auto;
    padding-bottom: 18px;
    scrollbar-width: thin;
  }
  .process-track{ min-width: 1060px; }
  .process-steps{ flex-wrap: nowrap; }}

/* mobile — vertical timeline, numbers stay large */
@media (max-width: 767.98px){
  .process-section{ padding: 80px 0; }
  .process-timeline{ overflow: visible; padding-bottom: 0; }
  .process-track{ min-width: 0; }
  .process-steps{ flex-direction: column; row-gap: 52px; }
  .process-step{ flex: none; width: 100%; }
  .process-line{
    top: 0;
    bottom: 0;
    left: 62px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .process-line-fill{
    transform: scaleY(var(--sd-progress));
    transform-origin: top center;
    background: linear-gradient(180deg, var(--accent-green), var(--accent-blue), #A855F7);
  }
  .process-line-dot{ left: 50%; }
  .process-line-dot--1{ top: 12.5%; }
  .process-line-dot--2{ top: 37.5%; }
  .process-line-dot--3{ top: 62.5%; }
  .process-line-dot--4{ top: 87.5%; }
  .process-step{
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    column-gap: 22px;
    align-items: center;
    text-align: left;
  }
  .process-number{
    grid-column: 1;
    justify-self: center;
    font-size: 72px;
    padding: 10px 8px;
  }
  .process-underline{
    grid-column: 1;
    justify-self: center;
    margin: 10px 0 0;
  }
  .process-text{
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: 220px;
    margin: 0;
    font-size: 20px;
  }}

/* ==========================================================================
   PLATFORM OVERVIEW — floating browser frame (reused by platform-overview.css)
   ========================================================================== */
/* glass reflection sweeping across the frame */
.sdBrowser-side span.active{
  background: var(--accent-green-soft);
  color: var(--accent-green);
}
.sdBrowser-chart .dpChart{ height: 92px; margin-bottom: 0; }
.sdBarRow .track{
  height: 6px;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.sdBarRow .track i{
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
}

/* ============================================================
   BUSINESS OUTCOMES — connected KPI flow (premium storytelling)
   Four glass KPI circles threaded by one animated gradient line.
   NOT a card grid. Colors: green -> cyan -> blue -> purple.
   ============================================================ */
.business-outcomes{
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}
.business-outcomes .container{ max-width: 1450px; }

/* ----- Soft radial glows + dotted wave particles ----- */
.outcomes-bg{ position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.outcomes-glow{
  position: absolute;
  top: 42%;
  width: 460px; height: 460px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);
  opacity: .40;
}
.outcomes-glow--green { left: 12.5%; background: radial-gradient(circle, rgba(12,198,74,.55), transparent 68%); }
.outcomes-glow--cyan  { left: 37.5%; background: radial-gradient(circle, rgba(18,214,196,.45), transparent 68%); }
.outcomes-glow--blue  { left: 62.5%; background: radial-gradient(circle, rgba(62,142,247,.48), transparent 68%); }
.outcomes-glow--purple{ left: 87.5%; background: radial-gradient(circle, rgba(155,92,246,.50), transparent 68%); }
.outcomes-dots{
  position: absolute;
  bottom: 6%;
  width: 240px; height: 170px;
  color: rgba(245,247,246,.55);
  opacity: .10;
}
.outcomes-dots--left { left: -30px; }
.outcomes-dots--right{ right: -30px; }

.business-outcomes .container{ position: relative; z-index: 1; }

/* ---------- Connected KPI flow ---------- */
.kpi-flow{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 30px;
}
.kpi-item{
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 18px;
}

/* one gradient line threading through the circle centres */
.kpi-connector{
  position: absolute;
  top: 42px;              /* index height (24) + margin (18) */
  left: 0; right: 0;
  width: 100%;
  height: 210px;          /* == circle diameter */
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.kpi-connector-track{
  fill: none;
  stroke: rgba(255,255,255,.07);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.kpi-connector-line{
  fill: none;
  stroke: url(#kpiLine);
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(62,142,247,.5));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s cubic-bezier(.5,0,.2,1);
}
[data-outcomes].is-inview .kpi-connector-line{ stroke-dashoffset: 0; }
.kpi-particle{
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
  opacity: 0;
}
[data-outcomes].is-inview .kpi-particle{ opacity: 1; transition: opacity .6s ease 1.4s; }

.kpi-index{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--text-lo);
  height: 24px;
  margin-bottom: 18px;
}

/* ----- KPI glass circle + partial glowing ring ----- */
.kpi-circle{
  position: relative;
  width: 210px; height: 210px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 70px rgba(0,0,0,.45),
    0 0 0 rgba(0,0,0,0);
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.kpi-circle::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(150deg, var(--kpi), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .9;
}
.kpi-ring{
  position: absolute;
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  transform: rotate(135deg);   /* place the ~25% gap at the bottom */}
.kpi-ring-arc{
  fill: none;
  stroke: var(--kpi);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 75 100;    /* ~75% visible arc */
  stroke-dashoffset: 75;       /* hidden until in view */
  filter: drop-shadow(0 0 7px var(--kpi));
  transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
[data-outcomes].is-inview .kpi-ring-arc{ stroke-dashoffset: 0; }

.kpi-value{
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-hi);
}
.kpi-value > span[data-count]{ min-width: 0; }
.kpi-arrow{
  align-self: center;
  width: 0; height: 0;
  margin-right: 4px;
}
.kpi-arrow--up{
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 16px solid var(--kpi);
  filter: drop-shadow(0 0 6px var(--kpi));
}
.kpi-arrow--down{
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 16px solid var(--kpi);
  filter: drop-shadow(0 0 6px var(--kpi));
}

.kpi-title{
  margin: 30px 0 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: -0.01em;
}
.kpi-text{
  margin: 14px auto 0;
  max-width: 260px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-md);
}

/* thin vertical separators between KPIs */
.kpi-sep{
  align-self: stretch;
  flex: 0 0 1px;
  width: 1px;
  margin-top: 60px;
  height: 190px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
}

/* hover — lift + glow + ring brightens */
.kpi-item:hover .kpi-circle{
  transform: translateY(-8px) scale(1.05);
  border-color: color-mix(in srgb, var(--kpi) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 40px 90px rgba(0,0,0,.5),
    0 0 60px var(--kpi-soft);
}
.kpi-item:hover .kpi-ring-arc{ stroke-width: 4; }

/* ---------- Bottom notice ---------- */
.outcomes-note{
  display: flex;
  align-items: center;
  gap: 16px;
  width: 800px;
  max-width: 100%;
  min-height: 90px;
  margin: 96px auto 0;
  padding: 0 34px;
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
}
.outcomes-note-dot{
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 0 4px rgba(12,198,74,.16), 0 0 14px var(--accent-green);
  animation: ooPulse 2.4s ease-in-out infinite;
}
@keyframes ooPulse{
  0%,100%{ box-shadow: 0 0 0 4px rgba(12,198,74,.16), 0 0 14px var(--accent-green); }
  50%    { box-shadow: 0 0 0 7px rgba(12,198,74,.05), 0 0 20px var(--accent-green); }}
.outcomes-note p{
  margin: 0;
  font-size: 14.5px;
  font-style: italic;
  color: var(--text-lo);
  line-height: 1.6;
}

/* ==========================================================================
   FAQ — interactive hub: 32/18/32 split, angled glass cards on both sides
   connected to a floating glass hexagon by curved dotted SVG lines (built at
   runtime by solution-page.js into .faq-connectors). Section-local accents:
   --faq-green/cyan/blue/purple; each card modifier sets --faq-accent(-rgb).
   ========================================================================== */
.faq-section > .container{
  position: relative;
  z-index: 1;
  max-width: 1400px;
}

/* ---------- header ---------- */

/* ---------- grid: 32 / 18 / 32 with the leftover as breathing room ---------- */

/* connectors overlay (paths injected by JS, desktop only) */
.faq-connectors{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.faq-connector path{
  fill: none;
  stroke: rgba(255,255,255,.13);
  stroke-width: 1.4;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  transition: stroke .3s ease;
}
.faq-connector.is-active path{ stroke: rgba(0,212,255,.5); }
.faq-connector-dot{
  fill: var(--faq-cyan);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(0,212,255,.85));
  transition: opacity .3s ease;
}
.faq-connector.is-active .faq-connector-dot{ opacity: 1; }

/* ---------- angled glass cards ---------- */
.faq-card{
  --faq-accent: var(--faq-green);
  --faq-accent-rgb: 0, 230, 118;
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .3s ease, border-color .3s ease, background .3s ease,
              filter .3s ease;
}

.faq-card:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--faq-accent-rgb), .38);
  background: rgba(255,255,255,.045);
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.4)) drop-shadow(0 0 18px rgba(var(--faq-accent-rgb), .12));
}
.faq-card-expanded{
  border-color: rgba(var(--faq-accent-rgb), .42);
  background: rgba(255,255,255,.045);
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(var(--faq-accent-rgb), .16));
}

.faq-question{
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 26px 28px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.faq-question:focus-visible{
  outline: 2px solid var(--faq-accent);
  outline-offset: -4px;
  border-radius: 22px;
}
.faq-card:hover .faq-icon,
.faq-card-expanded .faq-icon{
  box-shadow: 0 0 32px rgba(var(--faq-accent-rgb), .3);
}
.faq-card:hover .faq-arrow{ color: var(--faq-accent); }
.faq-card-expanded .faq-arrow{
  transform: rotate(180deg);
  color: var(--faq-accent);
}

/* smooth height expansion + answer fade */
.faq-card-expanded .faq-answer{ grid-template-rows: 1fr; }
.faq-card-expanded .faq-answer p{ opacity: 1; }

/* ---------- centre hub: rings + floating glass hexagon ---------- */
.faq-center{
  position: relative;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-center.is-glow .faq-hexagon{
  filter: drop-shadow(0 0 34px rgba(0,212,255,.3));
}

/* ---------- bottom CTA panel ---------- */

/* ---------- responsive ---------- */
/* desktop hub layout only at xl */
/* tablet: hexagon moves above, two FAQ columns */
@media (max-width: 1199.98px){
  .faq-connectors{ display: none; }
  .faq-center{
    width: 260px;
    height: 260px;
    transform: scale(.88);
  }}
/* mobile: single column */
@media (max-width: 767.98px){
  .faq-question{ padding: 20px 20px; gap: 14px; }}

/* ==========================================================================
   LEAD GENERATION — 40/60 split: minimal intro + one large glass demo card
   No panels-inside-panels: left is copy + a single info card, right is ONE
   glass container holding the whole form. Background = soft green/blue/purple
   radial glows + faint SVG noise, no illustrations.
   ========================================================================== */
.lead-section{
  position: relative;
  padding: 80px 0;
  scroll-margin-top: 90px;
  overflow: hidden;
}
.lead-section::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 36% at 10% 18%, rgba(12,198,74,.07), transparent 65%),
    radial-gradient(38% 34% at 90% 26%, rgba(62,142,247,.07), transparent 65%),
    radial-gradient(46% 40% at 55% 96%, rgba(168,85,247,.06), transparent 65%);
}
.lead-section::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lead-section > .container{
  position: relative;
  z-index: 1;
  max-width: 1450px;
}
.lead-row{
  --bs-gutter-x: 64px;
  row-gap: 56px;
}

/* ---------- left — minimal intro ---------- */
.lead-left{ min-width: 0; }
.lead-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 22px rgba(12,198,74,.10);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-md);
  margin: 0 0 26px;
}
.lead-badge em{
  font-style: normal;
  font-weight: 700;
  color: var(--accent-green);
  text-shadow: 0 0 14px rgba(12,198,74,.6);
}
/* title now uses the shared .section-title style; keep spacing to the intro */
.lead-left .section-title{ margin-bottom: 20px; }
.lead-left .section-subtitle{ max-width: 420px; margin: 0 0 44px; }

/* the single "Why Contact Us" glass card */
.lead-info-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 36px 34px 30px;
  max-width: 460px;
}
.lead-info-card h3{
  font-size: 19px;
  font-weight: 700;
  color: var(--text-hi);
  margin: 0 0 24px;
}
.lead-checklist{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0 0 28px;
}
.lead-checklist li{
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-md);
}
.lead-response{
  font-size: 13px;
  color: var(--text-lo);
  margin: 0;
}
.lead-response strong{
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-hi);
  margin-top: 3px;
}

/* ---------- right — ONE large glass card ---------- */
.lead-card{
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 32px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px rgba(0,0,0,.45);
  padding: 52px 54px 48px;
  overflow: hidden;
  min-width: 0;
}
/* slow glass reflection drifting across the card */
.lead-card::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.028), transparent);
  animation: leadSheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes leadSheen{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(320%); }}

.lead-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
.lead-card-title h3{
  font-size: clamp(26px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--text-hi);
  margin: 0 0 10px;
}
.lead-card-title p{
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-md);
  margin: 0;
  max-width: 400px;
}
.lead-pill{
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-md);
  white-space: nowrap;
}

/* ---------- form ---------- */
.demo-form{ position: relative; z-index: 1; }
.form-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 26px;
  margin-bottom: 36px;
}
.form-field{
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.form-field--full{ grid-column: 1 / -1; }
.form-field label{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-md);
}
.form-field label em{
  font-style: normal;
  color: var(--accent-green);
}
.form-input{
  width: 100%;
  padding: 14px 17px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text-hi);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.form-input::placeholder{ color: var(--text-lo); }
.form-input:hover{ border-color: var(--glass-border-strong); }
.form-input:focus{
  outline: none;
  border-color: rgba(12,198,74,.55);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 0 3px rgba(12,198,74,.12);
}
select.form-input{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 17px center;
  padding-right: 42px;
  cursor: pointer;
}
select.form-input option{
  background: #0d100e;
  color: var(--text-hi);
}
select.form-input:invalid{ color: var(--text-lo); }
textarea.form-input{ min-height: 110px; resize: vertical; }

/* ---------- option chips ---------- */
.form-chips{
  border: 0;
  padding: 0;
  margin: 0 0 30px;
}
.form-chips legend{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-md);
  margin-bottom: 14px;
}
.chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.option-chip{ position: relative; cursor: pointer; }
.option-chip input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.option-chip span{
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-md);
  transition: transform .3s ease, background .3s ease, border-color .3s ease,
              color .3s ease, box-shadow .3s ease;
}
.option-chip:hover span{
  transform: scale(1.03);
  background: var(--grad-primary);
  border-color: transparent;
  color: #06110a;
}
.option-chip input:checked + span{
  background: var(--grad-primary);
  border-color: transparent;
  color: #06110a;
  box-shadow: 0 0 26px rgba(12,198,74,.35);
}
.option-chip input:focus-visible + span{
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

/* ---------- consent ---------- */
.form-consent{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-md);
  cursor: pointer;
  margin: 0 0 38px;
}
.form-consent input{
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent-green);
  cursor: pointer;
}

/* ---------- CTA row ---------- */
.form-actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.primary-btn,
.secondary-btn{
  flex: 1;
  min-width: 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 34px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease,
              border-color .3s ease;
}
.primary-btn{
  border: 0;
  background: var(--grad-primary);
  color: #06110a;
  box-shadow: 0 14px 34px rgba(12,198,74,.25);
}
.primary-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(12,198,74,.4), 0 0 30px rgba(62,142,247,.2);
  color: #06110a;
}
.secondary-btn{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-strong);
  color: var(--text-hi);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.secondary-btn:hover{
  transform: translateY(-2px);
  background: var(--glass-bg-strong);
  border-color: rgba(255,255,255,.3);
  color: var(--text-hi);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

/* ---------- success state ---------- */
.form-success{
  display: none;
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 10px;
}
.lead-card.is-sent .demo-form{ display: none; }
.lead-card.is-sent .form-success{ display: block; }
.form-success .sdCheck{
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
}
.form-success .sdCheck svg{ width: 24px; height: 24px; }
.form-success h4{
  font-size: 23px;
  font-weight: 700;
  color: var(--text-hi);
  margin: 0 0 12px;
}
.form-success p{
  font-size: 15px;
  color: var(--text-md);
  margin: 0 auto;
  max-width: 420px;
  line-height: 1.7;
}

/* ---------- responsive ---------- */
@media (max-width: 1199.98px){
  .lead-card{ padding: 44px 40px 40px; }}
@media (max-width: 991.98px){
  .lead-section{ padding: 80px 0; }
  .lead-left .section-subtitle{ margin-bottom: 36px; }}
@media (max-width: 575.98px){
  .lead-section{ padding: 84px 0; }
  .lead-card{ padding: 36px 22px 32px; border-radius: 28px; }
  .lead-card-head{ flex-direction: column; margin-bottom: 32px; }
  .lead-info-card{ padding: 30px 24px 26px; max-width: none; }
  .form-grid{ grid-template-columns: minmax(0, 1fr); }
  .form-actions{ flex-direction: column; }
  .primary-btn,
  .secondary-btn{ width: 100%; }}

/* ==========================================================================
   PAGE-LOCAL OVERRIDES (moved from inline styles)
   ========================================================================== */
/* Business Outcomes — per-KPI accent colors */
.kpi-flow .kpi-item:nth-of-type(1){ --kpi: #0CC64A; --kpi-soft: rgba(12,198,74,.20); }
.kpi-flow .kpi-item:nth-of-type(2){ --kpi: #12D6C4; --kpi-soft: rgba(18,214,196,.20); }
.kpi-flow .kpi-item:nth-of-type(3){ --kpi: #3E8EF7; --kpi-soft: rgba(62,142,247,.20); }
.kpi-flow .kpi-item:nth-of-type(4){ --kpi: #9B5CF6; --kpi-soft: rgba(155,92,246,.20); }

/* Why PIVVOT (six cards) — centered eyebrow */
#why-pivvot .sectionEyebrow{ justify-content: center; }

/* Final CTA — glow blob positions */
.finalCtaPanel .glowBlobGreen{ top: -80px; left: 10%; }
.finalCtaPanel .glowBlobBlue{ bottom: -100px; right: 10%; }

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

@media (max-width: 991px){
  /* hero becomes image-first, single column */

  /* Business Outcomes — tablet 2 x 2 */
  .business-outcomes{ padding: 80px 0; }
  .kpi-flow{ flex-wrap: wrap; row-gap: 68px; margin-top: 0; }
  .kpi-item{ flex: 0 0 50%; }
  .kpi-connector{ display: none; }
  .kpi-sep{ display: none; }}

@media (max-width: 575px){
  /* buttons go full width on mobile */
  .solution-capabilities{ padding: 90px 0; }

  /* Business Outcomes — mobile vertical stack + vertical line */
  .business-outcomes{ padding: 84px 0; }
  .kpi-flow{
    flex-direction: column;
    align-items: center;
    row-gap: 54px;
    position: relative;
  }
  .kpi-flow::before{
    content: "";
    position: absolute;
    top: 60px; bottom: 60px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #0CC64A, #12D6C4 34%, #3E8EF7 67%, #9B5CF6);
    opacity: .55;
    box-shadow: 0 0 12px rgba(62,142,247,.5);
  }
  .kpi-item{ flex: 0 0 auto; width: 100%; }
  .kpi-value{ font-size: 54px; }
  .outcomes-note{ min-height: 0; padding: 22px 24px; text-align: center; }}

/* ==========================================================================
   REDUCED MOTION — keep everything functional, drop the choreography
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .capability-item,
  .capability-item-icon,
  .process-line-fill,
  .process-number,
  .process-number::after,
  .process-underline,
  .faq-answer,
  .faq-answer p,
  .faq-arrow,
  .faq-card,
  .faq-button,
  .capability-card,
  .capability-icon,
  .kpi-circle,
  .option-chip span,
  .primary-btn,
  .secondary-btn,
  .form-input{ transition-duration: .01ms !important; }
  .lead-card::before{ animation: none; }
  .kpi-connector-line,
  .kpi-ring-arc{ transition: none !important; stroke-dashoffset: 0 !important; }
  .kpi-particle{ display: none; }
  .outcomes-note-dot{ animation: none; }
  .option-chip:hover span,
  .primary-btn:hover,
  .secondary-btn:hover{ transform: none; }
  .capability-card:hover,
  .faq-card:hover,
  .faq-button:hover{ transform: none; }
  .kpi-item:hover .kpi-circle{ transform: none; }}

/* ==========================================================================
   CORPORATE WELLNESS HERO — premium enterprise split
   LOCAL to corporate-wellness.html only; every class is cw- prefixed.

   Layout (desktop): ~90vh, 1600px centered container with 80px side padding,
   a single immersive image on the left (~54%) and the copy column on the
   right (~46%): glass badge, 72px title, green tagline, description, a
   hairline divider, a "Who It's For" icon row and the primary / ghost CTAs.
   Sits directly on the page background (--bg-base); adds only a soft glow.
   ========================================================================== */

.cw-hero{
  /* hero-scoped accent palette + layout tokens */
  --cwh-green: #2DD47A;
  --cwh-blue: #3B82F6;
  --cwh-grad-from: #34D399;
  --cwh-grad-to: #3B82F6;
  --cwh-text: #FFFFFF;
  --cwh-text-soft: rgba(255, 255, 255, 0.72);
  --cwh-text-mute: rgba(255, 255, 255, 0.62);
  --cwh-border: rgba(255, 255, 255, 0.12);
  --cwh-hairline: rgba(255, 255, 255, 0.08);
  --cwh-img-radius: 28px;
  --cwh-pad-x: 80px;

  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}

/* ---------- Background — one very subtle radial glow behind the content ---------- */
.cw-hero-bg{ position: absolute; inset: 0; pointer-events: none; }
.cw-hero-glow{
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}
.cw-hero-glow--green{
  left: -6%;
  bottom: -14%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(45, 212, 122, 0.16), transparent 70%);
}
.cw-hero-glow--blue{
  right: 0%;
  top: -16%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.14), transparent 70%);
}

.cw-hero .container{
  position: relative;
  z-index: 1;
  max-width: 1600px;
  padding-left: var(--cwh-pad-x);
  padding-right: var(--cwh-pad-x);
}
.cw-hero-row{ align-items: center; --bs-gutter-x: 72px; row-gap: 48px; }

/* ~54 / 46 split at desktop (overrides Bootstrap's .col-xl-7 / .col-xl-5) */
@media (min-width: 1200px){
  .cw-hero-media{ flex: 0 0 54%; max-width: 54%; }
  .cw-hero-content{ flex: 0 0 46%; max-width: 46%; }
}

/* ==========================================================================
   LEFT — one large premium image
   ========================================================================== */
.cw-hero-figure{
  position: relative;
  margin: 0;
  border-radius: var(--cwh-img-radius);
}
.cw-hero-img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 660px;
  object-fit: cover;
  border-radius: var(--cwh-img-radius);
  border: 1px solid var(--cwh-border);
  box-shadow: 0 44px 100px rgba(0, 0, 0, 0.55);
}
/* subtle dark overlay so the artwork blends into the dark theme */
.cw-hero-figure::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--cwh-img-radius);
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 45%, rgba(5, 5, 5, 0.34) 100%);
  pointer-events: none;
}

/* ==========================================================================
   RIGHT — copy column (vertically centered by the row, left aligned)
   ========================================================================== */
.cw-hero-content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 620px;
}

/* ----- Top badge — glass pill with a green indicator dot ----- */
.cw-hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cwh-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cwh-text);
}
.cw-hero-badge-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cwh-green);
  box-shadow: 0 0 12px rgba(45, 212, 122, 0.9);
}

/* ----- Main title — white first word, gradient second word ----- */
.cw-hero-title{
  margin: 15px 0 0;
  font-size: 60px;
  font-weight: 800;
  color: var(--cwh-text);
}
.cw-hero-title span{
  background: linear-gradient(95deg, var(--cwh-grad-from) 0%, var(--cwh-grad-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Tagline ----- */
.cw-hero-tagline{
  margin: 10px 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cwh-green);
}

/* ----- Description ----- */
.cw-hero-description{
  margin: 0 0 25px;
  font-size: 20px;
  line-height: 1.8;
  color: var(--cwh-text-soft);
}


.cw-hero-divider{
  width: 100%;
  margin: 0 0 30px;
  border: 0;
  background: var(--cwh-hairline);
}

.cw-hero-audience{
  width: 100%;
  margin: 0 0 30px;
}
.cw-audience-eyebrow{
  display: block;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cwh-text-mute);
}
.cw-audience-list{
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cw-audience-item{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 4px 14px;
  text-align: center;
  color: var(--cwh-text-mute);
  transition: color 300ms ease;
}
/* minimal divider between items */
.cw-audience-item + .cw-audience-item{ border-left: 1px solid var(--cwh-hairline); }
.cw-audience-item svg{
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 300ms ease;
}
.cw-audience-name{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.cw-audience-item:hover{ color: var(--cwh-text); }
.cw-audience-item:hover svg{ stroke: var(--cwh-green); }

/* ==========================================================================
   CTA buttons
   ========================================================================== */
.cw-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.cw-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 60px;
  padding: 0 36px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 300ms ease, box-shadow 300ms ease,
              background-color 300ms ease, border-color 300ms ease;
}
.cw-btn--primary{
  color: #04150c;
  background: linear-gradient(90deg, var(--cwh-green), var(--cwh-blue));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(45, 212, 122, 0.22);
}
.cw-btn--primary:hover{
  color: #04150c;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 34px rgba(45, 212, 122, 0.4);
}
.cw-btn--primary svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cw-btn--ghost{
  color: var(--cwh-text);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--cwh-green);
}
.cw-btn--ghost:hover{
  color: var(--cwh-text);
  background: rgba(45, 212, 122, 0.12);
  border-color: var(--cwh-green);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1399.98px){
  .cw-hero-title{ font-size: 64px; }
  .cw-hero-tagline{ font-size: 24px; }
  .cw-hero-description{ font-size: 19px; }
}

@media (max-width: 1199.98px){
  /* Tablet — image on top (first in DOM), copy below; reduced padding */
  .cw-hero{ min-height: 0; padding: 110px 0 84px; }
  .cw-hero .container{ --cwh-pad-x: 40px; }
  .cw-hero-content{ max-width: 760px; }
  .cw-hero-img{ aspect-ratio: 16 / 10; max-height: 560px; }
  .cw-hero-title{ font-size: 56px; }
}

@media (max-width: 767.98px){
  /* Mobile — single column, image first, stacked buttons, 2×2 audience */
  .cw-hero{ padding: 88px 0 64px; }
  .cw-hero .container{ --cwh-pad-x: 20px; }
  .cw-hero-img{ aspect-ratio: 4 / 3; max-height: 420px; }
  .cw-hero-title{ font-size: 40px; }
  .cw-hero-tagline{ font-size: 20px; }
  .cw-hero-description{ font-size: 17px; line-height: 1.8; }
  .cw-audience-list{ flex-wrap: wrap; }
  .cw-audience-item{ flex: 0 0 50%; padding: 16px 12px; }
  /* rebuild the dividers as a 2×2 grid */
  .cw-audience-item + .cw-audience-item{ border-left: 0; }
  .cw-audience-item:nth-child(even){ border-left: 1px solid var(--cwh-hairline); }
  .cw-audience-item:nth-child(n+3){ border-top: 1px solid var(--cwh-hairline); }
  .cw-hero-actions{ flex-direction: column; align-self: stretch; }
  .cw-hero-actions .cw-btn{ width: 100%; }
}

@media (max-width: 479.98px){
  .cw-hero-title{ font-size: 34px; }
  .cw-hero-tagline{ font-size: 18px; }
}

@media (prefers-reduced-motion: reduce){
  .cw-audience-item,
  .cw-audience-item svg,
  .cw-btn{ transition: none; }
}

/* ==========================================================================
   WHY ORGANIZATIONS CHOOSE PIVVOT — four premium benefit cards
   LOCAL to corporate-wellness.html only; every class is cw-choose- prefixed.
   One large dark-glass container: gradient-border badge, 72px gradient
   heading, centered description, and four 320×420 glass cards with 110px
   glowing icon circles. Behind: green radial glow + green→blue flowing wave.
   NOTE: intentionally does NOT touch the "Technology that moves wellness
   forward" ecosystem section (.cw-why-pivvot).
   ========================================================================== */

.cw-choose{
  --cwc-green: #00E676;
  --cwc-cyan: #00D4FF;
  --cwc-blue: #3B82F6;
  --cwc-text: #FFFFFF;
  --cwc-text-soft: rgba(255, 255, 255, 0.64);

  position: relative;
  padding: 40px 0;
  background: #050505;
}
.cw-choose .container{ max-width: 1680px; }

/* ---------- Luxurious dark-glass container ---------- */
.cw-choose-panel{
  padding: 50px 80px ;
  overflow: hidden;

}

.cw-choose-fx{ position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cw-choose-glow{
  position: absolute;
  left: 50%;
  top: 42%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 230, 118, 0.14), transparent 68%);
  filter: blur(30px);
}
.cw-choose-wave{
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -6%;
  width: 104%;
  height: 340px;
  opacity: 0.2;
  filter: blur(26px);
}


/* ---------- Card grid ---------- */
.cw-choose-grid{
  position: relative;
  z-index: 1;
  justify-content: center;
  row-gap: 40px;
}

.cw-choose-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 25px 15px;
  text-align: center;
  border-radius: 25px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(0, 230, 118, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 350ms ease, box-shadow 350ms ease;
}

.cw-choose-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(0, 230, 118, 0.18), rgba(0, 230, 118, 0.05));
  border: 1px solid rgba(0, 230, 118, 0.3);
  box-shadow: 0 0 40px rgba(0, 230, 118, 0.22), inset 0 0 22px rgba(0, 230, 118, 0.1);
  transition: box-shadow 350ms ease, border-color 350ms ease;
}
.cw-choose-icon svg{
  width: 38px;
  height: 38px;
  stroke: var(--cwc-green);
  filter: drop-shadow(0 0 8px rgba(0, 230, 118, 0.4));
}

.cw-choose-card-title{
  display: flex;
  align-items: center;
  justify-content: center;
  /* reserve two lines so the underline + description align across cards
     regardless of whether a title runs one or two lines */
  min-height: 2.2em;
  margin: 0 0 15px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cwc-text);
}
.cw-choose-card-divider{
  width: 50px;
  height: 2px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cwc-green), var(--cwc-cyan));
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.5);
}
.cw-choose-card-desc{
  margin: 0 auto;
  max-width: 220px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cwc-text-soft);
}

/* ---------- Hover ---------- */
.cw-choose-card:hover{
  transform: translateY(-8px);
  border-color: rgba(0, 230, 118, 0.4);
  box-shadow: 0 44px 90px rgba(0, 0, 0, 0.5), 0 0 44px rgba(0, 230, 118, 0.14);
}
.cw-choose-card:hover .cw-choose-icon{
  border-color: rgba(0, 230, 118, 0.55);
  box-shadow: 0 0 60px rgba(0, 230, 118, 0.38), inset 0 0 26px rgba(0, 230, 118, 0.16);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1399.98px){
  .cw-choose-panel{ padding: 120px 48px; }
}
@media (max-width: 1199.98px){
  /* Tablet — 2×2 grid */
  .cw-choose-panel{ padding: 104px 40px; }
}
@media (max-width: 767.98px){
  /* Mobile — single column */
  .cw-choose{ padding: 48px 0; }
  .cw-choose-panel{ padding: 72px 22px; border-radius: 28px; }
  .cw-choose-card{ min-height: 0; padding: 44px 28px; }
  .cw-choose-card-title{ font-size: 30px; }
}

@media (prefers-reduced-motion: reduce){
  .cw-choose-card,
  .cw-choose-icon{ transition: none; }
}
/* ==========================================================================
   WHY PIVVOT — premium ecosystem visualization
   LOCAL to corporate-wellness.html only. Every class is cw- prefixed so
   nothing here can leak into the homepage or shared sections.
   Reuses design tokens from dark-theme.css (--bg-base, --text-*, --accent-*).

   Geometry is expressed in the --u unit (1px on desktop) so the whole
   orbital composition scales proportionally at smaller breakpoints while
   staying perfectly circular.
   ========================================================================== */

.cw-why-pivvot{
  position: relative;
  padding: 80px 0;
  background: var(--bg-base);
  overflow: hidden;
}
.cw-why-pivvot .container{
  position: relative;
  z-index: 1;
  max-width: 1400px;
}

/* soft ambient glow behind the ecosystem */
.cw-why-bg{ position: absolute; inset: 0; pointer-events: none; }
.cw-why-glow{
  position: absolute;
  right: -8%;
  top: 50%;
  width: 900px;
  height: 900px;
  transform: translateY(-50%);
  background: radial-gradient(
    circle at center,
    rgba(12, 198, 74, 0.08) 0%,
    rgba(18, 214, 196, 0.05) 34%,
    rgba(62, 142, 247, 0.05) 52%,
    rgba(155, 92, 246, 0.03) 66%,
    transparent 74%
  );
  filter: blur(42px);
}

/* ---------- Layout — 42% text / 58% ecosystem ---------- */
.cw-why-row{ align-items: center; --bs-gutter-x: 48px; }
@media (min-width: 1200px){
  .cw-why-col-text{ flex: 0 0 auto; width: 42%; }
  .cw-why-col-eco{ flex: 0 0 auto; width: 58%; }
}

/* ---------- Left content ---------- */
.cw-why-label{
  display: inline-block;
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--accent-green);
}
.cw-why-title{
  margin: 0 0 28px;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-hi);
}
.cw-why-title .cw-why-grad{
  background: var(--grad-primary, linear-gradient(135deg, #0CC64A, #3E8EF7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cw-why-description{
  margin: 0;
  max-width: 420px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-md);
}
.cw-why-divider{
  display: block;
  width: 80px;
  height: 3px;
  margin-top: 40px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0CC64A, #12D6C4, #3E8EF7, #9B5CF6);
  box-shadow: 0 0 18px rgba(62, 142, 247, 0.5);
}

/* ==========================================================================
   Ecosystem — orbital composition (pure HTML/CSS/SVG, no images)
   ========================================================================== */
.cw-ecosystem-wrap{
  --u: 1px;
  display: flex;
  justify-content: center;
  padding: calc(84 * var(--u)) 0;
}
.cw-ecosystem{
  position: relative;
  width: calc(560 * var(--u));
  height: calc(560 * var(--u));
  animation: cwEcoFloat 9s ease-in-out infinite;
}
@keyframes cwEcoFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(calc(-10 * var(--u))); }
}

/* ---------- Orbit — one circular SVG with travelling particles ---------- */
.cw-orbit{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cw-orbit-track{
  fill: none;
  stroke: url(#cwOrbitGrad);
  stroke-width: 1.4;
  opacity: 0.35;
}
.cw-particle{ filter: drop-shadow(0 0 6px currentColor); }
.cw-particle--green{ fill: #0CC64A; color: #0CC64A; }
.cw-particle--blue{ fill: #3E8EF7; color: #3E8EF7; }
.cw-particle--purple{ fill: #9B5CF6; color: #9B5CF6; }

/* ---------- Center platform ---------- */
.cw-center{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: calc(260 * var(--u));
  height: calc(260 * var(--u));
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: cwCenterGlow 6s ease-in-out infinite alternate;
}
.cw-center-text{
  font-size: max(15px, calc(27 * var(--u)));
  font-weight: 800;
  letter-spacing: 0.22em;
  padding-left: 0.22em; /* optically recenters the tracked text */
  color: var(--text-hi);
  text-shadow: 0 0 24px rgba(12, 198, 74, 0.35);
}
@keyframes cwCenterGlow{
  from{
    box-shadow:
      0 0 60px rgba(12, 198, 74, 0.12),
      0 0 120px rgba(62, 142, 247, 0.08),
      inset 0 0 40px rgba(255, 255, 255, 0.03);
  }
  to{
    box-shadow:
      0 0 90px rgba(12, 198, 74, 0.20),
      0 0 160px rgba(62, 142, 247, 0.14),
      inset 0 0 48px rgba(255, 255, 255, 0.05);
  }
}

/* two orbital rings around the center platform */
.cw-ring{
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.cw-ring--inner{
  width: calc(330 * var(--u));
  height: calc(330 * var(--u));
  margin: calc(-165 * var(--u)) 0 0 calc(-165 * var(--u));
  animation: cwRingSpin 46s linear infinite;
}
.cw-ring--outer{
  width: calc(410 * var(--u));
  height: calc(410 * var(--u));
  margin: calc(-205 * var(--u)) 0 0 calc(-205 * var(--u));
  border-color: rgba(255, 255, 255, 0.07);
  animation: cwRingSpin 70s linear infinite reverse;
}
@keyframes cwRingSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ---------- Feature nodes ---------- */
.cw-nodes{
  list-style: none;
  margin: 0;
  padding: 0;
}
.cw-node{
  --n: var(--accent-green);
  --n-soft: rgba(12, 198, 74, 0.18);
  position: absolute;
  z-index: 3;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  transform: translate(-50%, -50%);
}
/* positions on the 560u orbit (center 50/50, radius 50%) */
.cw-node--wearable  { left: 6.7%;  top: 25%;  }
.cw-node--ai        { left: 50%;   top: 0%;   }
.cw-node--enterprise{ left: 93.3%; top: 25%;  }
.cw-node--secure    { left: 93.3%; top: 75%;  }
.cw-node--scalable  { left: 50%;   top: 100%; }
.cw-node--monitoring{ left: 6.7%;  top: 75%;  }

/* node colors: green, blue, purple, purple, teal, blue */
.cw-node--ai,
.cw-node--monitoring{ --n: #3E8EF7; --n-soft: rgba(62, 142, 247, 0.18); }
.cw-node--enterprise,
.cw-node--secure{ --n: #9B5CF6; --n-soft: rgba(155, 92, 246, 0.18); }
.cw-node--scalable{ --n: #12D6C4; --n-soft: rgba(18, 214, 196, 0.18); }

/* connector spoke from node toward the center platform */
.cw-connector{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: calc(110 * var(--u));
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--n), transparent);
  opacity: 0.22;
  transition: opacity 300ms ease, box-shadow 300ms ease;
}
.cw-node--wearable   .cw-connector{ transform: rotate(30deg)  translateX(calc(40 * var(--u))); }
.cw-node--ai         .cw-connector{ transform: rotate(90deg)  translateX(calc(40 * var(--u))); }
.cw-node--enterprise .cw-connector{ transform: rotate(150deg) translateX(calc(40 * var(--u))); }
.cw-node--secure     .cw-connector{ transform: rotate(210deg) translateX(calc(40 * var(--u))); }
.cw-node--scalable   .cw-connector{ transform: rotate(270deg) translateX(calc(40 * var(--u))); }
.cw-node--monitoring .cw-connector{ transform: rotate(330deg) translateX(calc(40 * var(--u))); }

/* circular glass button */
.cw-node-btn{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 0 var(--n-soft);
  animation: cwNodePulse 5s ease-in-out infinite;
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 300ms ease,
              box-shadow 300ms ease;
}
/* stagger the pulse so nodes breathe independently */
.cw-node:nth-child(2) .cw-node-btn{ animation-delay: 0.8s; }
.cw-node:nth-child(3) .cw-node-btn{ animation-delay: 1.6s; }
.cw-node:nth-child(4) .cw-node-btn{ animation-delay: 2.4s; }
.cw-node:nth-child(5) .cw-node-btn{ animation-delay: 3.2s; }
.cw-node:nth-child(6) .cw-node-btn{ animation-delay: 4s; }
@keyframes cwNodePulse{
  0%, 100%{ box-shadow: 0 0 0 0 var(--n-soft), 0 0 18px 0 transparent; }
  50%{ box-shadow: 0 0 0 6px transparent, 0 0 26px 2px var(--n-soft); }
}
.cw-node-btn svg{
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--n);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: filter 300ms ease;
}

/* label outside the button */
.cw-node-label{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-md);
  transition: color 300ms ease;
}
.cw-node--wearable .cw-node-label,
.cw-node--ai .cw-node-label,
.cw-node--enterprise .cw-node-label{ bottom: calc(100% + 13px); }
.cw-node--secure .cw-node-label,
.cw-node--scalable .cw-node-label,
.cw-node--monitoring .cw-node-label{ top: calc(100% + 13px); }

/* ---------- Hover — scale, brighten, glow, highlight connector ---------- */
.cw-node:hover .cw-node-btn{
  transform: scale(1.12);
  border-color: var(--n);
  animation-play-state: paused;
  box-shadow: 0 0 30px 4px var(--n-soft), 0 0 60px 6px var(--n-soft);
}
.cw-node:hover .cw-node-btn svg{ filter: drop-shadow(0 0 8px var(--n)); }
.cw-node:hover .cw-connector{
  opacity: 0.85;
  box-shadow: 0 0 12px 0 var(--n-soft);
}
.cw-node:hover .cw-node-label{ color: var(--text-hi); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1399.98px){
  .cw-why-title{ font-size: 62px; }
}
@media (max-width: 1199.98px){
  /* stack: text above, ecosystem below */
  .cw-why-pivvot{ padding: 110px 0; }
  .cw-why-col-text{ text-align: center; margin-bottom: 40px; }
  .cw-why-description{ margin: 0 auto; }
  .cw-why-divider{ margin-left: auto; margin-right: auto; }
  .cw-why-title{ font-size: 56px; }
  .cw-why-glow{ right: auto; left: 50%; top: auto; bottom: -10%; transform: translateX(-50%); }
}
@media (max-width: 767.98px){
  .cw-why-pivvot{ padding: 90px 0; }
  .cw-why-title{ font-size: 42px; }
  .cw-why-label{ letter-spacing: 4px; }
  .cw-ecosystem-wrap{ --u: 0.78px; }
}
@media (max-width: 575.98px){
  .cw-why-title{ font-size: 34px; }
  .cw-why-description{ font-size: 16px; }
  .cw-ecosystem-wrap{ --u: 0.56px; }
  .cw-node-label{ white-space: normal; max-width: 110px; text-align: center; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce){
  .cw-ecosystem,
  .cw-center,
  .cw-ring,
  .cw-node-btn{ animation: none; }
  .cw-node-btn,
  .cw-node-btn svg,
  .cw-connector,
  .cw-node-label{ transition: none; }
}

/* ==========================================================================
   PAGE-SPECIFIC STYLES
   Consolidated here from the per-page <style> blocks (contact-us, about-us,
   terms, privacy). Each group is scoped to a page-level hook so nothing leaks
   between pages. Placed at the end so these overrides win over the shared base
   rules above, exactly as the original in-page <style> blocks did.
   Image url()s are relative to THIS file (assets-2/css/) → "../images/…".
   ========================================================================== */

/* ==========================================================================
   CONTACT PAGE  (contact-us.html — body/section hooks: .contactHero,
   .contactInfoCard, .contactFaq, .contactProcess)
   ========================================================================== */
/* Hero: keep the reused form card a touch more compact inside the grid */
.contactHero .lead-card{ padding: 40px 40px 36px; }
.contactHero .heroContent p{ margin-bottom: 30px; }
.contactHero .heroVisualWrap{ min-height: auto; }

/* Hero background — brighter premium ambient lighting: emerald glow bottom-left
   (under the copy), blue glow top-right (under the form), soft cyan blend, and a
   dark-navy tint, all fading to the base. A faint AI-node network sits on
   ::before, masked to the two bright corners. */
.heroDark.contactHero{
  isolation: isolate;
  background:
    radial-gradient(78% 86% at 4% 106%,
      rgba(0, 230, 118, 0.24) 0%,
      rgba(0, 230, 118, 0.13) 24%,
      rgba(0, 230, 118, 0.05) 42%,
      rgba(0, 230, 118, 0) 66%),
    radial-gradient(92% 100% at 100% -8%,
      rgba(37, 99, 235, 0.38) 0%,
      rgba(37, 99, 235, 0.20) 24%,
      rgba(37, 99, 235, 0.08) 46%,
      rgba(37, 99, 235, 0) 72%),
    radial-gradient(70% 72% at 54% 42%,
      rgba(0, 212, 255, 0.13) 0%,
      rgba(0, 212, 255, 0.05) 34%,
      rgba(0, 212, 255, 0) 62%),
    radial-gradient(110% 120% at 96% 118%,
      rgba(8, 19, 34, 0.50) 0%,
      rgba(8, 19, 34, 0.20) 42%,
      rgba(8, 19, 34, 0) 68%),
    var(--bg-base);
}
.contactHero > .container{ position: relative; z-index: 1; }
.contactHero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(0, 212, 255, 0.14) 1.3px, transparent 1.7px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.6;
  -webkit-mask-image:
    radial-gradient(72% 82% at 2% 100%, #000 0%, rgba(0, 0, 0, 0.35) 34%, transparent 62%),
    radial-gradient(74% 84% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.35) 34%, transparent 64%);
  mask-image:
    radial-gradient(72% 82% at 2% 100%, #000 0%, rgba(0, 0, 0, 0.35) 34%, transparent 62%),
    radial-gradient(74% 84% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.35) 34%, transparent 64%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Three small glass info cards under the hero copy */
.contactInfoCards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.contactInfoCard{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 22px 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.contactInfoCard:hover{
  transform: translateY(-4px);
  border-color: rgba(12,255,180,.28);
  background: var(--glass-bg-strong);
}
.contactInfoCard .ci-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0CC64A, #12D6C4);
  box-shadow: 0 6px 18px rgba(12,198,74,.22);
  margin-bottom: 14px;
}
.contactInfoCard .ci-icon svg{ width: 20px; height: 20px; stroke: #fff; fill: none; }
.contactInfoCard h4{
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-lo); margin: 0 0 6px;
}
.contactInfoCard p{ font-size: 15px; font-weight: 600; color: var(--text-hi); margin: 0; line-height: 1.5; }
/* privacy-policy link inside the consent line */
.contactHero .form-consent a{ color: var(--accent-green); }
@media (max-width: 575.98px){ .contactInfoCards{ grid-template-columns: minmax(0, 1fr); } }

/* FAQ — reuse the theme's .faq-card accordion; supply the base mechanics the
   theme leaves to a page template + a locked green accent. */
.contactFaq{ position: relative; padding: 80px 0; }
.contactFaqList{ max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.contactFaq .faq-card{ --faq-accent: #0CC64A; --faq-accent-rgb: 12, 198, 74; }
.contactFaq .faq-question h3{
  flex: 1; margin: 0;
  font-size: 18px; font-weight: 600; color: var(--text-hi);
}
.contactFaq .faq-icon{
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, #0CC64A, #12D6C4);
  box-shadow: 0 6px 18px rgba(12,198,74,.20);
  transition: box-shadow .3s ease;
}
.contactFaq .faq-icon svg{ width: 20px; height: 20px; stroke: #fff; fill: none; }
.contactFaq .faq-arrow{
  flex: none; color: var(--text-lo);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s ease, color .3s ease;
}
.contactFaq .faq-arrow svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; display: block; }
.contactFaq .faq-answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s ease;
  padding: 0 28px;
}
.contactFaq .faq-answer p{
  min-height: 0; overflow: hidden; margin: 0; opacity: 0;
  font-size: 15px; line-height: 1.7; color: var(--text-md);
  transition: opacity .3s ease;
}
.contactFaq .faq-card-expanded .faq-answer{ grid-template-rows: 1fr; padding-bottom: 26px; }
.contactFaq .faq-card-expanded .faq-answer p{ opacity: 1; }
@media (max-width: 767.98px){ .contactFaq .faq-question h3{ font-size: 16px; } }

/* Process — retune the shared 5-step timeline geometry for 3 steps */
.contactProcess .process-line{ left: 16.667%; right: 16.667%; }
.contactProcess .process-line-dot--1{ left: 25%; }
.contactProcess .process-line-dot--2{ left: 75%; }
.contactProcess .process-line-dot--3,
.contactProcess .process-line-dot--4{ display: none; }

/* ==========================================================================
   ABOUT PAGE  (about-us.html — hooks: .aboutMain, .aboutHero, .mvCard,
   .valuesRow, .teamCard)
   ========================================================================== */
/* Page-wide tokens + soft green/blue ambient wash */
.aboutMain{
  --accent-green: #16E06E;
  --about-cyan: #2DA8FF;
  --about-ink: rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(55% 50% at 100% 3%, rgba(45, 168, 255, 0.10), transparent 60%),
    radial-gradient(58% 55% at 0% 52%, rgba(22, 224, 110, 0.09), transparent 62%),
    radial-gradient(120% 90% at 50% 0%, rgba(8, 19, 34, 0.35), transparent 55%),
    radial-gradient(circle, rgba(255, 255, 255, 0.015) 1px, transparent 1.7px),
    var(--bg-base);
  background-size: cover, cover, cover, 46px 46px, cover;
  background-attachment: fixed;
}
.aboutMain .container{ max-width: 1400px; }

/* ~120px vertical rhythm between sections; ~100px before footer */
.heroDark.aboutHero{ padding: 120px 0 64px; }
.aboutMain #mission-vision{ padding: 56px 0; }
.aboutMain #values{ padding: 80px 0; position: relative; }
.aboutMain #values::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(28% 60% at 0% 50%, rgba(22, 224, 110, 0.06), transparent 60%),
    radial-gradient(28% 60% at 100% 50%, rgba(45, 168, 255, 0.06), transparent 62%);
}
.aboutMain #values .container{ position: relative; z-index: 1; }
.aboutMain #team{ padding: 100px 0; }
@media (max-width: 767.98px){
  .heroDark.aboutHero{ padding: 84px 0 40px; }
  .aboutMain #mission-vision,
  .aboutMain #values,
  .aboutMain #team{ padding-top: 64px; padding-bottom: 64px; }
}

/* Hero — richer ambient lighting: soft green top-left, soft blue top-right */
.heroDark.aboutHero{
  background:
    radial-gradient(50% 66% at 4% -6%, rgba(22, 224, 110, 0.20), transparent 60%),
    radial-gradient(52% 68% at 96% 0%, rgba(45, 168, 255, 0.20), transparent 62%),
    var(--bg-base);
}
@media (min-width: 992px){
  .aboutHero .heroGrid{
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.06fr);
    gap: 56px;
  }
}
.aboutHero .heroEyebrow{ margin-bottom: 28px; }
.aboutHero .heroContent h1{ font-size: 56px; line-height: 1.1; margin: 0 0 26px; }
.aboutHero .heroContent p{
  font-size: 17px;
  line-height: 1.9;
  color: var(--about-ink);
  margin: 0 0 40px;
}
@media (max-width: 991px){
  .aboutHero .heroContent h1{ font-size: 40px; }
}
@media (max-width: 575px){
  .aboutHero .heroContent h1{ font-size: 32px; }
}

/* Hero image — premium framed figure with green/blue glow bleed */
.aboutHeroFigure{ position: relative; margin: 0; border-radius: 30px; z-index: 0; }
.aboutHeroFigure::before{
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 10% 92%, rgba(22, 224, 110, 0.30), transparent 60%),
    radial-gradient(46% 56% at 92% 6%, rgba(45, 168, 255, 0.30), transparent 62%);
  filter: blur(34px);
}
.aboutHeroImg{
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 44px 110px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.aboutHeroFigure::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(5, 5, 5, 0) 32%, rgba(5, 5, 5, 0.34) 100%);
  pointer-events: none;
}

/* Premium glass card base (Mission/Vision + Team) */
.mvCard,
.teamCard{
  background: rgba(18, 18, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Mission & Vision — split glass card */
.mvCard{ position: relative; overflow: hidden; padding: 56px 64px; }
.mvCard::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(30% 51% at 14% 0, rgba(22, 224, 110, 0.14), transparent 62%),
    radial-gradient(44% 64% at 100% 81%, rgb(45 168 255 / 22%), transparent 62%);
}
.mvCard .row{ position: relative; z-index: 1; --bs-gutter-x: 0; align-items: center; }
.mvCard .row > .col-md-6:nth-child(2){ position: relative; }
.mvCard .row > .col-md-6:nth-child(2)::before{
  content: "";
  position: absolute;
  left: 0; top: 10%;
  width: 1px; height: 80%;
  background: rgba(255, 255, 255, 0.06);
}
.mvCard .row > .col-md-6:nth-child(1) .mvCol{ padding-right: 48px; }
.mvCard .row > .col-md-6:nth-child(2) .mvCol{ padding-left: 48px; }
.mvCol{ padding: 0; display: flex; gap: 30px; align-items: center; }

/* outline icons — no box, 72px, coloured glow (green / blue) */
.mvIcon{
  display: inline-flex;
  width: auto; height: auto;
  border: 0;
  background: none;
  border-radius: 0;
  margin-bottom: 24px;
}
.mvIcon svg{ width: 72px; height: 72px; fill: none; stroke-width: 0.7px; }
.mvCard .row > .col-md-6:nth-child(1) .mvIcon svg{
  stroke: #16E06E;
  filter: drop-shadow(0 0 18px rgba(22, 224, 110, 0.5));
}
.mvCard .row > .col-md-6:nth-child(2) .mvIcon svg{
  stroke: #2DA8FF;
  filter: drop-shadow(0 0 18px rgba(45, 168, 255, 0.5));
}
.mvCol .sectionEyebrow{ font-size: 13px; letter-spacing: 1.5px; margin-bottom: 8px; }
.mvCard .row > .col-md-6:nth-child(1) .sectionEyebrow{ color: #16E06E; }
.mvCard .row > .col-md-6:nth-child(1) .sectionEyebrow::before{ background: #16E06E; box-shadow: 0 0 12px rgba(22, 224, 110, 0.8); }
.mvCard .row > .col-md-6:nth-child(2) .sectionEyebrow{ color: #2DA8FF; }
.mvCard .row > .col-md-6:nth-child(2) .sectionEyebrow::before{ background: #2DA8FF; box-shadow: 0 0 12px rgba(45, 168, 255, 0.8); }
.mvCol .blockTitle h4{ font-size: 32px; font-weight: 700; line-height: 1.25; margin: 0 0 16px; }
.mvCol .blockTitle p{ font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, 0.72); margin: 0; }
@media (max-width: 767.98px){
  .mvCard{ padding: 40px 28px; }
  .mvCard .row > .col-md-6 .mvCol{ padding: 0; }
  .mvCard .row > .col-md-6:nth-child(2){
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .mvCard .row > .col-md-6:nth-child(2)::before{ display: none; }
  .mvCol .blockTitle h4{ font-size: 28px; }
}

/* Values — minimal: outline icon + title + text */
#values .section-head{ margin-bottom: 72px; }
#values .section-badge{
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: #16E06E;
}
#values .section-badge::before{ background: #16E06E; box-shadow: 0 0 12px rgba(22, 224, 110, 0.8); }
#values .section-title{ font-size: 64px; font-weight: 700; line-height: 1.1; margin: 0; }
#values .section-title span{
  background: linear-gradient(90deg, #16E06E, #2DA8FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.valuesRow{ display: flex; flex-wrap: wrap; }
.valueItem{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 20px;
  text-align: center;
}
.valueItem + .valueItem::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 160px;
  background: rgba(255, 255, 255, 0.06);
}
.valueIcon{
  display: inline-flex;
  width: auto; height: auto;
  border: 0;
  background: none;
  border-radius: 0;
  margin: 0 0 20px;
  transition: filter .35s ease;
}
.valueIcon svg{
  width: 72px; height: 72px;
  stroke: #16E06E;
  fill: none;
  stroke-width: 1.5px;
  filter: drop-shadow(0 0 16px rgba(22, 224, 110, 0.45));
}
.valueItem:hover .valueIcon svg{ filter: drop-shadow(0 0 24px rgba(22, 224, 110, 0.65)); }
.valueItem .blockTitle h4{ font-size: 18px; font-weight: 600; color: #FFFFFF; margin: 0 0 12px; }
.valueItem .blockTitle p{
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  max-width: 220px;
  margin: 0 auto;
}
@media (max-width: 991.98px){
  #values .section-title{ font-size: 46px; }
  .valueItem{ flex: 0 0 50%; padding: 28px 20px; }
  .valueItem + .valueItem::before{ display: none; }
}
@media (max-width: 575.98px){
  #values .section-title{ font-size: 36px; }
  .valueItem{ flex: 0 0 100%; }
}

/* Team — full-width cinematic background banner */
.teamCard{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 384px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  background-image:
    linear-gradient(90deg, rgba(5, 5, 5, 0.88) 0%, rgba(5, 5, 5, 0.72) 28%, rgba(5, 5, 5, 0.28) 55%, rgba(5, 5, 5, 0.05) 100%),
    url("../images/about-us/cta.png");
  background-size: cover;
  background-position: center, center center;
  background-repeat: no-repeat, no-repeat;
}
.teamCard::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(42% 60% at 100% 0%, rgba(45, 168, 255, 0.16), transparent 60%),
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.6px);
  background-size: cover, 42px 42px;
  -webkit-mask-image: radial-gradient(62% 74% at 100% 0%, #000 0%, transparent 64%);
  mask-image: radial-gradient(62% 74% at 100% 0%, #000 0%, transparent 64%);
}
.teamCopy{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 600px;
  padding: 64px;
}
.teamCopy .sectionEyebrow{ font-size: 12px; font-weight: 600; letter-spacing: 1.8px; margin-bottom: 16px; }
.teamCopy .blockTitle h3{ font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #FFFFFF; margin: 0; }
.teamCopy .blockTitle p{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  max-width: 420px;
  margin: 20px 0 0;
}
.teamCopy .btnWrap{ margin-top: 28px; }
#team .teamCopy .btn.btn-theme2{
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, #16E06E, #2DA8FF);
  color: #050505;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(22, 224, 110, 0.28);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
#team .teamCopy .btn.btn-theme2:hover{
  transform: translateY(-2px);
  color: #050505;
  filter: brightness(1.03);
  box-shadow: 0 16px 34px rgba(22, 224, 110, 0.40), 0 0 26px rgba(45, 168, 255, 0.25);
}
@media (max-width: 991.98px){
  .teamCard{ min-height: 340px; }
  .teamCopy{ padding: 44px; max-width: 560px; }
  .teamCopy .blockTitle h3{ font-size: 34px; }
}
@media (max-width: 767.98px){
  .teamCard{
    min-height: 420px;
    background-image:
      linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0.78) 100%),
      url("../images/about-us/cta.png");
  }
  .teamCopy{ padding: 32px; max-width: none; }
}

/* CTA — reused finalCtaPanel, richer + larger */
.aboutMain .finalCtaPanel{ padding: 110px 64px; }
.aboutMain .finalCtaPanel .glowBlob{ width: 380px; height: 380px; }
.aboutMain .finalCtaPanel .glowBlobGreen{ background: rgba(22, 224, 110, 0.42); }
.aboutMain .finalCtaPanel .glowBlobBlue{ background: rgba(45, 168, 255, 0.36); }
.aboutMain .finalCtaPanel .btnWrap{ gap: 20px; margin-top: 4px; }
.aboutMain .finalCtaPanel .btn{ padding: 17px 40px; font-size: 16px; }
@media (max-width: 767.98px){
  .aboutMain .finalCtaPanel{ padding: 64px 26px; }
}

/* Footer blends into the ambient about page */
.aboutMain ~ .siteFooter{
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.aboutMain ~ .siteFooter .row.grid50{ --bs-gutter-x: 48px; }

/* ==========================================================================
   LEGAL DOCUMENT PAGES  (terms.html + privacy.html)
   Shared premium documentation layout. Page-level hooks: .termsPage /
   .privacyPage on <body>; component hooks (.termsHero, .termsCard,
   .termsContentWrap, .termsBlock, .termsNum) are shared by both pages.
   ========================================================================== */
/* Ambient page background (green glow bottom-left, blue glow top-right, faint
   node dots) + subtle noise, so the page never reads as plain black. */
.termsPage .main-wrap,
.privacyPage .main-wrap{ background: transparent; }
body.termsPage,
body.privacyPage{ background: var(--bg-base); }
body.termsPage::before,
body.privacyPage::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 55% at 100% 0%, rgba(45, 168, 255, 0.13), transparent 60%),
    radial-gradient(64% 60% at 0% 100%, rgba(22, 224, 110, 0.13), transparent 62%),
    radial-gradient(circle, rgba(255, 255, 255, 0.02) 1px, transparent 1.6px);
  background-size: cover, cover, 46px 46px;
}
body.termsPage::after,
body.privacyPage::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero (360px, centered) — banner image per page + masked AI-node overlay */
.termsHero{
  position: relative;
  isolation: isolate;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 40px 0;
}
.termsHerobanner{
  background: url(../images/about-us/terms-bannerr.png);
  background-size: cover;
  background-position: center;
}
.privacyHerobanner{
  background: url(../images/about-us/privacy-baner.png);
  background-size: cover;
  background-position: center;
}
.termsHero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    radial-gradient(circle, rgba(45, 168, 255, 0.16) 1.3px, transparent 1.7px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image:
    radial-gradient(60% 85% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.35) 38%, transparent 66%),
    radial-gradient(62% 88% at 100% 6%, #000 0%, rgba(0, 0, 0, 0.35) 38%, transparent 68%);
  mask-image:
    radial-gradient(60% 85% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.35) 38%, transparent 66%),
    radial-gradient(62% 88% at 100% 6%, #000 0%, rgba(0, 0, 0, 0.35) 38%, transparent 68%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.termsHero .container{ position: relative; z-index: 1; }
.termsHeroInner{ max-width: 780px; margin: 0 auto; }
.termsHeroInner .section-badge{ margin: 0 0 26px; }
.termsHeroInner .section-title{ font-size: 56px; font-weight: 700; line-height: 1.1; margin: 0 0 22px; }
.termsHeroInner .section-title span{
  background: linear-gradient(90deg, #16E06E, #2DA8FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.termsHeroInner .section-subtitle{ max-width: 640px; margin: 0 auto; font-size: 18px; }
@media (max-width: 767.98px){
  .termsHeroInner .section-title{ font-size: 40px; }
}

/* One large premium glass container holding all the legal content */
.termsContentSection{ padding: 80px 0 100px; }
.termsShell{ max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.termsCard{
  position: relative;
  background: rgba(18, 18, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 64px;
}
@media (max-width: 767.98px){
  .termsCard{ padding: 34px 22px; border-radius: 22px; }
}

/* Content typography (constrained 960px reading width) */
.termsContentWrap{
  max-width: 960px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.76);
}
.termsContentWrap p{
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.76);
  margin: 0 0 24px;
}
.termsContentWrap strong{ color: #FFFFFF; font-weight: 700; }
.termsContentWrap a{
  color: #16E06E;
  text-decoration: none;
  transition: color .25s ease;
}
.termsContentWrap a:hover{ color: #16E06E; text-decoration: underline; }
.termsContentWrap hr{
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 40px 0;
}
.termsIntro h3{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #FFFFFF;
  margin: 0 0 24px;
}

/* Numbered sections (56px apart) + 36px green-bordered number badge */
.termsBlock{ margin-top: 56px; }
.termsBlock h4{
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0 0 24px;
}
.termsNum{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(18, 18, 18, 0.9);
  border: 1px solid rgba(22, 224, 110, 0.5);
  color: #16E06E;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(22, 224, 110, 0.18);
}
.termsBlock h5{
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #FFFFFF;
  margin: 0 0 16px;
}

/* Bullets — green, indented, spaced */
.termsContentWrap ul{
  list-style: none;
  padding: 0;
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.termsContentWrap ul li{
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.76);
}
.termsContentWrap ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16E06E;
  box-shadow: 0 0 10px rgba(22, 224, 110, 0.6);
}

/* Footer blends into the ambient legal pages */
.termsPage .siteFooter,
.privacyPage .siteFooter{
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
}