/* ==========================================================================
   TITAN WORKSPACE — Microsoft 365–Style Design System
   Design philosophy: Clean, consistent, trustworthy enterprise product page
   Inspired by microsoft.com/en-in/microsoft-365 aesthetic language
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand palette */
  --c-blue:        #4553a4;   /* Microsoft primary blue */
  --c-blue-hover:  #D63D22;
  --c-blue-light:  #EFF6FF;
  --c-blue-mid:    #DBEAFE;
  --c-red:         #EC4A2C;   /* Titan accent */
  --c-red-hover:   #D63D22;
  --c-green:       #107C10;   /* Microsoft green */
  --c-green-light: #F0FDF4;
  --c-teal:        #10B981;

  /* Neutral scale (Microsoft-style: near-white sections, deep navy text) */
  --c-navy:        #0B1D3A;
  --c-ink:         #1A1A2E;
  --c-text:        #1E293B;
  --c-muted:       #5B6472;
  --c-subtle:      #8A96A3;
  --c-border:      #E1E6ED;
  --c-border-soft: #F0F2F5;

  /* Section backgrounds — alternating white / near-white */
  --bg-white:
        radial-gradient(circle at 10% 15%, rgba(236,74,44,.05) 0%, transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(249,188,21,.05) 0%, transparent 28%),
        radial-gradient(circle at 20% 85%, rgba(96,177,74,.05) 0%, transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(87,142,202,.05) 0%, transparent 30%),
        #ffffff;
  --bg-light:      #F7F9FC;   /* Microsoft's signature near-white */
  --bg-dark:       #0B1D3A;
  --bg-footer:     #060F1E;

  /* Typography */
  --font:          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale — ONE consistent scale, used everywhere */
  --t-eyebrow:     11.5px;
  --t-h1:          clamp(30px, 4.5vw, 40px);
  --t-h2:          clamp(26px, 3.2vw, 38px);
  --t-h3:          clamp(17px, 1.8vw, 20px);
  --t-body-lg:     clamp(15px, 1.4vw, 17px);
  --t-body:        15px;
  --t-small:       13.5px;
  --t-xs:          12px;

  /* Weight tokens */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;
  --w-black:   800;

  /* Spacing — consistent section rhythm */
  --section-pad: clamp(64px, 8vw, 96px);
  --section-pad-sm: clamp(40px, 5vw, 64px);

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.22s;
}

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

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

body {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  color: var(--c-text);
  background: var(--bg-white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

/* ==========================================================================
   3. SHARED SECTION PRIMITIVES
   ========================================================================== */
section {
  padding: var(--section-pad) 0;
}

/* Eyebrow — identical across every section */
.section-eyebrow,
.tw365-banner-label,
.scale-eyebrow,
.ai-eyebrow,
.adv-eyebrow,
.portal-eyebrow,
.dark-cta-badge,
.sp-callout-label,
.twc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--c-blue);
  margin-bottom: 14px;
}

/* Section H2 — one size, one weight everywhere */
.section-title,
.tw365-banner-title,
.adv-title,
.scale-sub {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

/* Section descriptor paragraph */
.section-desc,
.adv-desc,
.tw365-banner-desc,
.scale-desc {
  font-size: var(--t-body-lg);
  font-weight: var(--w-regular);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 48px;
}

/* Center helper */
.text-center { text-align: center; }

/* ==========================================================================
   4. SCROLL REVEAL
   ========================================================================== */
.reveal-card,
.reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal-card.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-card, .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn,
.tw365-btn-primary,
.tw365-btn-secondary,
.btn-pink,
.portal-btn,
.scale-btn,
.dark-cta-primary-btn,
.dark-cta-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: var(--r-sm);
  padding: 13px 26px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}

/* Primary — unified brand blue (#4553a4) across the site */
.btn-primary,
.scale-btn,
.dark-cta-primary-btn {
  background: #4553a4;
  color: #fff;
}
.btn-primary:hover,
.scale-btn:hover,
.dark-cta-primary-btn:hover {
  background: var(--c-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(69, 83, 164, 0.28);
}

/* Outline */
.btn-outline,
.dark-cta-outline-btn,
.portal-btn {
  background: transparent;
  color: var(--c-navy);
  border: 1.5px solid var(--c-border);
}
.btn-outline:hover,
.dark-cta-outline-btn:hover,
.portal-btn:hover {
  border-color: var(--c-navy);
  background: var(--bg-light);
  transform: translateY(-2px);
}

/* Nav CTA (pulsing) */
.btn-pink {
  background: #4553a4;
  color: #fff;
  padding: 11px 22px;
  font-size: 14px;
  border-radius: var(--r-sm);
  animation: btnPulse 2.2s ease-in-out infinite;
}
.btn-pink:hover {
  background: var(--c-red);
  transform: translateY(-1px);
  animation: none;
}
@keyframes btnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Explore Titan Your Way — excluded from the site-wide button color
   unification; keeps its own distinct accent colors per card. */
#explore .btn-primary {
  background: var(--c-red);
  color: #fff;
}
#explore .btn-primary:hover {
  background: var(--c-red-hover);
  box-shadow: 0 6px 20px rgba(236, 74, 44, 0.28);
}

/* Hero CTA variants */
.tw365-btn-primary {
  background: var(--c-blue);
  color: #fff;
  border-radius: 100px;
  padding: 15px 30px;
  font-size: 15px;
}
.tw365-btn-primary:hover {
  background: var(--c-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 103, 184, 0.28);
}
.tw365-btn-secondary {
  background: #fff;
  color: var(--c-navy);
  border: 1.5px solid var(--c-border);
  border-radius: 100px;
  padding: 15px 30px;
  font-size: 15px;
}
.tw365-btn-secondary:hover {
  border-color: var(--c-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Cap links */
.cap-link {
  color: var(--c-blue);
  font-size: 14px;
  font-weight: var(--w-semibold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--dur) var(--ease), color var(--dur);
}
.cap-link:hover { gap: 10px; color: var(--c-blue-hover); }

/* ==========================================================================
   6. HEADER
   ========================================================================== */
/*body { padding-top: 128px; }*/

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  transition: box-shadow 0.3s var(--ease);
}

/* Top info bar */
.header-top-bar {
  background: #071d45;
  padding: 10px 20px;
  transition: max-height 0.35s var(--ease), opacity 0.35s var(--ease), padding 0.35s var(--ease);
  overflow: hidden;
}
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  animation: slideDown 0.6s var(--ease) both;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.top-badge {
  background: rgba(0,255,170,0.08);
  border: 1px solid rgba(0,255,170,0.28);
  color: #26d4b3;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: var(--w-semibold);
  white-space: nowrap;
}
.top-message {
  color: #fff;
  font-size: 13.5px;
  font-weight: var(--w-semibold);
}
.top-link {
  color: #24e0b7;
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  position: relative;
  transition: color 0.2s;
}
.top-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.2s var(--ease);
}
.top-link:hover { color: #3df0cb; }
.top-link:hover::after { transform: scaleX(1); }

/* Main nav bar */
.header-main-bar {
  background: #fff;
  height: 88px;
  border-bottom: 1px solid var(--c-border-soft);
  transition: height 0.3s var(--ease);
}
.main-bar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 16px;
}
nav { display: contents; }

.brand-logo {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 250px;
  flex-shrink: 0;
  transition: max-width 0.3s;
}

/* Nav menu */
.main-nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2px;
  height: 100%;
}
.nav-item {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}
.nav-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 100%;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur);
}
.nav-trigger:hover { color: var(--c-red); }
.nav-trigger::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform 0.2s var(--ease);
}
.nav-item.no-arrow .nav-trigger::after { display: none; }
.nav-item:hover .nav-trigger::after { transform: rotate(-180deg); }

/* Single dropdown */
.single-dropdown {
  position: absolute;
  top: 100%; left: 0;
  width: 230px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 28px rgba(11,29,58,0.1);
  list-style: none;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s var(--ease);
  pointer-events: none;
}
.nav-item:hover .single-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.single-dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--c-text);
  transition: background 0.2s, color 0.2s;
}
.single-dropdown a:hover {
  background: #4553a4;
  color: #fff;
}

/* Mega menu — Resources */
.nav-item.mega-parent { position: static; }

.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid var(--c-border-soft);
  box-shadow: 0 24px 48px rgba(11, 29, 58, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  pointer-events: none;
  z-index: 999;
}
.nav-item.mega-parent:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-panel {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr 1.3fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px clamp(16px, 3vw, 32px) 44px;
}

.mega-col-group + .mega-col-group { margin-top: 26px; }

.mega-col h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--c-navy);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border-soft);
}
.mega-col h4 i { color: var(--c-red); font-size: 13px; }

.mega-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-col ul li a {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--c-muted);
  transition: background 0.18s, color 0.18s, transform 0.18s var(--ease);
}
.mega-col ul li a:hover {
  background: #4553a4;
  color: #fff;
  transform: translateX(3px);
}

.mega-featured-item {
  display: block;
  padding: 10px;
  margin: 0 -10px 2px;
  border-radius: 10px;
  transition: background 0.18s;
}
.mega-featured-item:hover { background: #4553a4; color:#fff; }
.mega-featured-item strong {
  display: block;
  font-size: 14px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  margin-bottom: 3px;
  line-height: 1.35;
}
.mega-featured-item span {
  display: block;
  font-size: 12.5px;
  color: var(--c-subtle);
  line-height: 1.5;
}

.mega-featured-item:hover strong {
    color: #fff; /* hover color */
}
.mega-featured-item:hover span {
  color: #fff;
}
.header-cta-group { display: flex; align-items: center; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--c-navy);
  padding: 8px;
  line-height: 1;
}

/* Scrolled state */
.site-header.scrolled-active .header-top-bar {
  max-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.site-header.scrolled-active .header-main-bar { height: 68px; }
.site-header.scrolled-active .brand-logo { max-width: 210px; }
.site-header.scrolled-active { box-shadow: 0 2px 16px rgba(11,29,58,0.1); }

/* ==========================================================================
   7. SECTION 1 — HERO
   ========================================================================== */
.tw365-banner-section {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad) 20px;
  background: var(--bg-light);
  text-align: center;
}
.tw365-banner-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(0,103,184,0.07), transparent),
    radial-gradient(ellipse 50% 35% at 20% 90%, rgba(96,177,74,0.05), transparent);
  pointer-events: none;
}
.tw365-banner-container {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
}
.tw365-banner-label {
  display: inline-block;
  margin-bottom: 20px;
}
.tw365-banner-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin: 0 auto 24px;
  max-width: 820px;
}
.tw365-gradient-text {
  display: inline;
  background-image: linear-gradient(92deg, #EC4A2C 0%, #F9BC15 30%, #60B14A 60%, #578ECA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tw365-banner-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto;
}
.tw365-banner-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ==========================================================================
   7B. HERO — LIGHT, TWO-COLUMN, ANIMATED DASHBOARD VISUAL
   ========================================================================== */
.hero-light-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
  padding: clamp(120px, 16vw, 156px) 0 clamp(56px, 7vw, 84px);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.hero-blob-1 {
  width: 520px; height: 520px;
  top: -180px; right: -140px;
  background: radial-gradient(circle, rgba(0,103,184,0.14) 0%, rgba(0,103,184,0.05) 45%, transparent 72%);
  animation: heroBlobFloat 10s ease-in-out infinite;
}
.hero-blob-2 {
  width: 440px; height: 440px;
  bottom: -180px; left: -140px;
  background: radial-gradient(circle, rgba(96,177,74,0.12) 0%, rgba(96,177,74,0.04) 45%, transparent 72%);
  animation: heroBlobFloat 12s ease-in-out infinite reverse;
}
@keyframes heroBlobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20px, 22px) scale(1.06); }
}

/* Slowly drifting flowing gradient — gives the hero a living, moving backdrop.
   Kept deliberately light (small blur radius, transform-only animation,
   promoted to its own GPU layer) so it never competes with the slider
   transition or causes jank on lower-powered / mobile devices. */
.hero-flow-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.hero-flow-bg::before,
.hero-flow-bg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-flow-bg::before {
  width: 640px; height: 640px;
  margin: -320px 0 0 -320px;
  background: conic-gradient(from 0deg,
    rgba(0,103,184,0.14),
    rgba(236,74,44,0.10) 25%,
    rgba(249,188,21,0.10) 50%,
    rgba(96,177,74,0.12) 75%,
    rgba(0,103,184,0.14) 100%);
  animation: heroFlowSpin 40s linear infinite;
}
.hero-flow-bg::after {
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  background: conic-gradient(from 180deg,
    rgba(87,142,202,0.12),
    rgba(96,177,74,0.09) 33%,
    rgba(236,74,44,0.08) 66%,
    rgba(87,142,202,0.12) 100%);
  animation: heroFlowSpin 30s linear infinite reverse;
}
@keyframes heroFlowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-flex {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

/* ---- Content column ---- */
.hero-slider {
  position: relative;
  display: grid;
}
.hero-slide {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  pointer-events: none;
  will-change: opacity, transform;
}
.hero-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.08s;
}

.hero-badge {
  display: inline-block;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  color: var(--c-blue);
  font-size: 11.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 22px;
}

.hero-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: 0 0 20px;
}

.hero-gradient-text {
  display: inline;
  background-image: linear-gradient(92deg, #EC4A2C 0%, #F9BC15 30%, #60B14A 60%, #578ECA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 560px;
}

/* Capability chips row */
.hero-caps-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(11,29,58,0.05);
}
.hero-caps-label {
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  margin-right: 2px;
}
.hero-cap-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-light);
  border: 1px solid var(--c-border-soft);
  color: var(--c-text);
  font-size: 12.5px;
  font-weight: var(--w-medium);
  padding: 6px 12px;
  border-radius: 30px;
}
.hero-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-dot-blue   { background: var(--c-blue); }
.hero-dot-green  { background: var(--c-green); }
.hero-dot-yellow { background: #F9BC15; }
.hero-dot-red    { background: var(--c-red); }

.hero-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: 100px;
  padding: 15px 28px;
  background: var(--c-blue);
  color: #fff;
  border: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.hero-btn-primary:hover {
  background: var(--c-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,103,184,0.26);
}

.hero-slider-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-nav-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease), border-radius var(--dur) var(--ease);
}
.hero-nav-dot.is-active {
  background: var(--c-blue);
  width: 22px;
  border-radius: 5px;
}
.hero-arrows { display: flex; gap: 8px; }
.hero-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-navy);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero-arrow:hover {
  background: var(--bg-light);
  border-color: var(--c-blue);
  color: var(--c-blue);
  transform: translateY(-2px);
}

/* ---- Visual column (animated dashboard mockup) ---- */
.hero-visual-col {
  position: relative;
  z-index: 2;
  animation: heroVisualFadeIn 0.8s var(--ease) 0.15s both;
}
@keyframes heroVisualFadeIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-dashboard-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(11,29,58,0.12);
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
  animation: heroCardFloat 6s ease-in-out infinite;
}
@keyframes heroCardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero-dashboard-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border-soft);
  background: var(--bg-light);
}
.hero-dashboard-dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-red    { background: #FF5F57; }
.dot-yellow { background: #FEBC2E; }
.dot-green  { background: #28C840; }
.hero-dashboard-titlebar {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: var(--w-medium);
  color: var(--c-muted);
}

.hero-dashboard-rows {
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-dash-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  transition: background var(--dur) var(--ease);
  opacity: 0;
  animation: heroRowIn 0.6s var(--ease) forwards;
  animation-delay: var(--row-delay, 0s);
}
.hero-dash-row:hover { background: var(--bg-light); }
@keyframes heroRowIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hero-dash-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.icon-blue   { background: var(--c-blue-light); color: var(--c-blue); }
.icon-yellow { background: #FFFBEB; color: #F59E0B; }
.icon-green  { background: var(--c-green-light); color: var(--c-green); }
.icon-pink   { background: #FDF2F8; color: #DB2777; }

.hero-dash-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-dash-text strong {
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-dash-text span {
  font-size: 11.5px;
  color: var(--c-subtle);
}
.hero-dash-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: var(--w-semibold);
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
}
.status-green  { background: var(--c-green-light); color: #15803D; }
.status-yellow { background: #FFFBEB; color: #B45309; }
.status-blue   { background: var(--c-blue-light); color: var(--c-blue); }
.status-teal   { background: #F0FDFA; color: #0D9488; }

/* Floating accent cards */
.hero-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(11,29,58,0.14);
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: var(--w-medium);
  color: var(--c-muted);
  line-height: 1.35;
  z-index: 3;
}
.hero-float-top {
  top: -22px;
  right: -8px;
  animation: heroFloatA 5s ease-in-out infinite;
}
.hero-float-top strong {
  font-size: 20px;
  font-weight: var(--w-black);
  color: var(--c-blue);
  line-height: 1;
}
.hero-float-bottom {
  bottom: -20px;
  left: -14px;
  animation: heroFloatB 5.5s ease-in-out infinite;
}
.hero-float-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-green-light);
  color: var(--c-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
@keyframes heroFloatA {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}
@keyframes heroFloatB {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50%      { transform: translateY(-10px) rotate(-1deg); }
}

/* ==========================================================================
   7C. BRAND LOGO MARQUEE
   ========================================================================== */
.brand-marquee-section {
  background: #578eca;
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--c-border-soft);
}
.marquee-featured-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--c-subtle);
  font-size: 11.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 28px;
}
.marquee-featured-label span {
  display: inline-block;
  width: 44px;
  height: 1px;
  background: var(--c-border);
}
.marquee-wrap {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marqueeScroll 26s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: var(--w-bold);
  color: #fff;
  opacity: 0.8;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
  white-space: nowrap;
}
.marquee-logo i { font-size: 17px; }
.marquee-logo:hover {
  opacity: 1;
  filter: grayscale(0);
  color: var(--c-navy);
}

  .tw-logom-section{
    background:#578eca;
    padding:40px 0 44px;
    border-bottom:1px solid #F0F2F5;
    overflow:hidden;
  }
  .tw-logom-wrap{
    overflow:hidden;
    width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  }
  .tw-logom-track{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:56px;
    width:max-content;
    animation:tw-logom-scroll 110s linear infinite;
  }
  .tw-logom-wrap:hover .tw-logom-track{
    animation-play-state:paused;
  }
  @keyframes tw-logom-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .tw-logom-item{
    flex:0 0 auto !important;
    display:flex;
    align-items:center;
    justify-content:center;
    height:60px;
    padding:6px 14px;
    border-radius:10px;
    transition:background .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1);
  }
  .tw-logom-item img{
    height:100% !important;
    width:auto !important;
    max-width:148px;
    max-height:100%;
    object-fit:contain;
    display:block;
    filter:brightness(0) invert(1);
    opacity:.78;
    transition:filter .3s ease, opacity .3s ease, transform .3s ease;
  }
  .tw-logom-item:hover{
/*    background:rgba(255,255,255,.14);*/
    transform:translateY(-4px);
/*    box-shadow:0 10px 24px rgba(6,15,30,.18);*/
  }
  .tw-logom-item:hover img{
    filter:none;
    opacity:1;
    transform:scale(1.06);
  }
  @media (max-width:768px){
    .tw-logom-track{ gap:38px; animation-duration:85s; }
    .tw-logom-item{ height:50px; padding:5px 11px; }
    .tw-logom-item img{ max-width:116px; }
  }
  @media (max-width:480px){
    .tw-logom-track{ gap:26px; }
    .tw-logom-item{ height:48px; padding:4px 9px; }
    .tw-logom-item img{ max-width:96px; }
  }
  @media (prefers-reduced-motion:reduce){
    .tw-logom-track{ animation:none; }
    .tw-logom-item:hover, .tw-logom-item:hover img{ transform:none; }
  }
/* ==========================================================================
   8. SECTION 2 — PROBLEM
   ========================================================================== */
.twc-problem-section {
  background: var(--bg-white);
}
.twc-problem-heading {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}
.twc-problem-heading h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}
.twc-problem-heading p {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
}
.twc-problem-heading em {
  color: var(--c-blue);
  font-style: italic;
}
.twc-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.twc-eyebrow span {
  display: inline-block;
  width: 36px;
  height: 1.5px;
  background: var(--c-border);
}

/* Problem grid */
.twc-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}
.twc-problem-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.twc-problem-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11,29,58,0.07);
  background: #578eca;
}
.twc-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.twc-divider {
  width: 1px;
  height: 34px;
  background: var(--c-border);
  flex-shrink: 0;
}
.twc-problem-card p {
  font-size: 14.5px;
  font-weight: var(--w-medium);
  color: var(--c-text);
  line-height: 1.55;
  margin: 0;
}
.twc-problem-card:hover p {
    color: #fff;
}
/* Card color themes */
.blue .twc-icon   { background: #EFF6FF; color: #2563EB; }
.blue .twc-divider  { background: #93C5FD; }
.green .twc-icon  { background: #ECFDF5; color: #059669; }
.green .twc-divider { background: #6EE7B7; }
.orange .twc-icon { background: #FFF7ED; color: #EA580C; }
.orange .twc-divider { background: #FCA861; }
.purple .twc-icon { background: #F5F3FF; color: #7C3AED; }
.purple .twc-divider { background: #C4B5FD; }
.pink .twc-icon   { background: #FDF2F8; color: #DB2777; }
.pink .twc-divider  { background: #F9A8D4; }

/* Footer callout */
.twc-footer-box {
  max-width: 1120px;
  margin: 40px auto 0;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  border-radius: var(--r-xl);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.twc-footer-icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  background: var(--c-blue-mid);
  color: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.twc-footer-box p {
  font-size: var(--t-body-lg);
  color: var(--c-text);
  line-height: 1.7;
}
.twc-footer-box strong { color: var(--c-blue); }

/* ==========================================================================
   8B. SECTION 2B — THE FIX (content left / visual right, card layout)
   ========================================================================== */
.twc-fix-section {
  background: var(--bg-light);
}
.twc-fix-card {
  max-width: 1160px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(11,29,58,0.10);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
}

.twc-fix-content {
  padding: clamp(36px, 5vw, 64px);
}
.twc-fix-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  color: var(--c-blue);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 22px;
}
.twc-fix-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}
.twc-fix-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 30px;
}
.twc-fix-desc strong {
  color: var(--c-navy);
  font-weight: var(--w-bold);
}
.twc-fix-btn { white-space: nowrap; }

/* ---- Visual side ---- */
/* Outer visual slot: gives the framed image its own gutter within the white
   card, mirroring the reference screenshot's inset-photo treatment. */
.twc-fix-visual {
  position: relative;
  min-height: 420px;
  height: 100%;
  padding: 22px 22px 22px 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
/* The framed "image": rounded, shadowed panel that reads as a photo card */
.twc-fix-image {
  position: relative;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, rgba(0,103,184,0.10) 0%, transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(96,177,74,0.10) 0%, transparent 55%),
    var(--bg-light);
  box-shadow: 0 24px 50px rgba(11,29,58,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.twc-fix-illustration {
  width: min(60%, 220px);
  height: auto;
  position: relative;
  z-index: 1;
}
.twc-fix-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.twc-fix-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,29,58,0) 40%, rgba(11,29,58,0.28) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Illustration variant (custom SVG instead of a stock photo) — no darkening overlay needed */
.twc-fix-image--illustration::after { display: none; }
.twc-fix-image--illustration { justify-content: center; }
.twc-fix-illustration { width: min(62%, 232px); position: relative; z-index: 1; filter: drop-shadow(0 18px 30px rgba(11,29,58,0.14)); }
/* Reversed layout used by the Data & Security section (visual first) */
.twc-fix-card--flip {
  grid-template-columns: 0.95fr 1.05fr;
}
.twc-fix-card--flip .twc-fix-visual {
  padding: 22px 0 22px 22px;
}
.twc-fix-blob {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,103,184,0.16) 0%, rgba(96,177,74,0.10) 55%, transparent 78%);
  filter: blur(36px);
  animation: heroBlobFloat 9s ease-in-out infinite;
}
.twc-fix-blob--security {
  background: radial-gradient(circle, rgba(87,142,202,0.18) 0%, rgba(124,58,237,0.10) 55%, transparent 78%);
}

.twc-fix-panel {
  position: absolute;
  width: 208px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 44px rgba(11,29,58,0.16);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.twc-fix-panel .twc-icon { width: 40px; height: 40px; font-size: 15px; }
.twc-fix-panel-1 { top: 8%;  left: 4%;   animation: fixFloat1 5.5s ease-in-out infinite; }
.twc-fix-panel-2 { top: 40%; right: 0%;  animation: fixFloat2 6s ease-in-out infinite; animation-delay: .5s; }
.twc-fix-panel-3 { bottom: 8%; left: 16%; animation: fixFloat3 5.8s ease-in-out infinite; animation-delay: 1s; }

@keyframes fixFloat1 {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-7deg) translateY(-12px); }
}
@keyframes fixFloat2 {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-14px); }
}
@keyframes fixFloat3 {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-10px); }
}

/* ==========================================================================
   9. SECTION 3 — CAPABILITIES
   ========================================================================== */
.capabilities-section {
  background: var(--bg-light);
  text-align: center;
}
.capabilities-notice {
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  border-radius: var(--r-md);
  padding: 22px 26px;
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: left;
  font-size: var(--t-body);
  color: var(--c-text);
  line-height: 1.65;
}
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: left;
}

/* Card */
.cap-box {
  position: relative;
  background:
        radial-gradient(circle at 10% 15%, rgba(236,74,44,.05) 0%, transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(249,188,21,.05) 0%, transparent 28%),
        radial-gradient(circle at 20% 85%, rgba(96,177,74,.05) 0%, transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(87,142,202,.05) 0%, transparent 30%),
        #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.4vw, 40px) clamp(26px, 3vw, 36px);
  display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cap-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
}
.cap-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(11,29,58,0.08);
}

/* Top accent bar colors per card */
.cap-box.cap-red::before    { background: var(--c-red); }
.cap-box.cap-green::before  { background: var(--c-green); }
.cap-box.cap-orange::before { background: #F59E0B; }
.cap-box.cap-blue::before   { background: var(--c-blue); }

/* Circular icon badge */
.cap-box-icon-wrap {
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.cap-box-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  opacity: 0.5;
  z-index: 0;
}
.cap-box-icon-wrap svg,
.cap-box-icon-wrap .cap-icon-inner {
  position: relative;
  z-index: 1;
}

.cap-icon-red {
  background: rgba(236, 74, 44, 0.13);
}
.cap-icon-red::before { background: rgba(236, 74, 44, 0.06); }

.cap-icon-green {
  background: rgba(16, 124, 16, 0.12);
}
.cap-icon-green::before { background: rgba(16, 124, 16, 0.06); }

.cap-icon-orange {
  background: rgba(245, 158, 11, 0.15);
}
.cap-icon-orange::before { background: rgba(245, 158, 11, 0.06); }

.cap-icon-blue {
  background: rgba(0, 103, 184, 0.12);
}
.cap-icon-blue::before { background: rgba(0, 103, 184, 0.06); }

.cap-box-body { flex: 1; min-width: 0; }

.cap-box-dash {
  display: inline-block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.cap-red .cap-box-dash    { background: var(--c-red); }
.cap-green .cap-box-dash  { background: var(--c-green); }
.cap-orange .cap-box-dash { background: #F59E0B; }
.cap-blue .cap-box-dash   { background: var(--c-blue); }

.cap-box h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 10px;
}
.cap-box p {
  font-size: var(--t-body);
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Colored link variants */
.cap-link {
  font-size: 14px;
  font-weight: var(--w-semibold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--dur) var(--ease), color var(--dur);
}
.cap-link:hover { gap: 10px; }
.cap-red .cap-link    { color: var(--c-red); }
.cap-red .cap-link:hover    { color: var(--c-red-hover); }
.cap-green .cap-link  { color: var(--c-green); }
.cap-green .cap-link:hover  { color: #0c5e0c; }
.cap-orange .cap-link { color: #D97706; }
.cap-orange .cap-link:hover { color: #B45309; }
.cap-blue .cap-link   { color: var(--c-blue); }
.cap-blue .cap-link:hover   { color: var(--c-blue-hover); }

/* ==========================================================================
   Responsive — Capabilities
   ========================================================================== */
@media (max-width: 960px) {
  .cap-box-icon-wrap { width: 84px; height: 84px; min-width: 84px; }
}

@media (max-width: 768px) {
  .capabilities-grid { grid-template-columns: 1fr; gap: 18px; }
  .cap-box { gap: 18px; padding: 26px 22px; }
  .cap-box-icon-wrap { width: 76px; height: 76px; min-width: 76px; }
}

@media (max-width: 480px) {
  .cap-box { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cap-box-icon-wrap { width: 64px; height: 64px; min-width: 64px; }
}

/* ==========================================================================
   10. SECTION 4 — AI
   ========================================================================== */
.ai-section {
  background: radial-gradient(circle at 15% 20%, #14264a 0%, transparent 45%),
              radial-gradient(circle at 85% 75%, #0d2b3f 0%, transparent 50%),
              linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ai-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.ai-glow-1 {
  width: 480px; height: 480px;
  top: -180px; right: -140px;
  background: radial-gradient(circle, rgba(14,165,233,0.28), transparent 70%);
}
.ai-glow-2 {
  width: 420px; height: 420px;
  bottom: -160px; left: -120px;
  background: radial-gradient(circle, rgba(16,185,129,0.20), transparent 70%);
}
.ai-network {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}
.ai-network svg { width: 100%; height: 100%; }
.ai-section .container { position: relative; z-index: 1; }

.ai-eyebrow {
  display: inline-flex;
  background: rgba(14,165,233,0.12);
  border: 1px solid rgba(14,165,233,0.35);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 16px;
  color: #7DD3FC;
  letter-spacing: 1px;
  box-shadow: 0 0 24px rgba(14,165,233,0.15);
}
.ai-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-teal);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--c-teal);
}
.ai-section .ai-title { color: #ffffff; }
.ai-section .ai-desc { color: #9FB0C9; }

.ai-notice {
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid rgba(16,185,129,0.55);
  border-radius: var(--r-md);
  padding: 22px 28px;
  max-width: 860px;
  margin: 0 auto 52px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ai-notice-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-teal), #0EA5E9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 0 20px rgba(16,185,129,0.35);
}
.ai-notice p {
  font-size: var(--t-body);
  color: #C3CFE0;
  line-height: 1.7;
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
  margin-bottom: 28px;
}

/* Card — dark glass, top-anchored icon: deliberately distinct from the light, icon-left capability cards above */
.ai-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: clamp(26px, 2.6vw, 32px) clamp(20px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}
.ai-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}
.ai-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.065);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 20px 44px rgba(0,0,0,0.35);
}
.ai-card:hover .ai-card-icon { transform: scale(1.06); }
.ai-card-icon { transition: transform var(--dur) var(--ease); }

/* Circular icon badge, glowing */
.ai-card-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.ai-card-icon svg { width: 30px; height: 30px; position: relative; z-index: 1; }

.ai-icon-blue   { background: rgba(14,165,233,0.16); box-shadow: 0 0 0 1px rgba(14,165,233,0.3) inset, 0 0 26px rgba(14,165,233,0.25); }
.ai-icon-green  { background: rgba(16,185,129,0.16); box-shadow: 0 0 0 1px rgba(16,185,129,0.3) inset, 0 0 26px rgba(16,185,129,0.25); }
.ai-icon-red    { background: rgba(239,68,68,0.16);  box-shadow: 0 0 0 1px rgba(239,68,68,0.3) inset, 0 0 26px rgba(239,68,68,0.25); }
.ai-icon-khaki  { background: rgba(217,193,110,0.18); box-shadow: 0 0 0 1px rgba(217,193,110,0.35) inset, 0 0 26px rgba(217,193,110,0.22); }

.ai-card-body { flex: 1; min-width: 0; }

.ai-card h3 {
  font-size: 16.5px;
  font-weight: var(--w-bold);
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.35;
}
.ai-card p {
  font-size: 13.5px;
  color: #96A5BD;
  line-height: 1.65;
}

.ai-footer-bar {
  position: relative;
  background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(0,103,184,0.05) 100%);
  border: 1px solid rgba(16,185,129,0.22);
  border-radius: var(--r-xl);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur) var(--ease);
}
.ai-footer-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--c-teal), var(--c-blue));
}
.ai-footer-bar:hover {
  border-color: rgba(16,185,129,0.4);
  box-shadow: 0 12px 32px rgba(16,185,129,0.1);
}

.ai-footer-icon-wrap {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-teal), #0EA5E9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(16,185,129,0.3);
  flex-shrink: 0;
}

.ai-footer-text {
  font-size: var(--t-body);
  color: var(--c-muted);
  line-height: 1.65;
}
.ai-footer-text strong {
  color: var(--c-navy);
  font-weight: var(--w-bold);
}
.ai-footer-text .ai-footer-highlight {
  color: var(--c-teal);
  font-weight: var(--w-bold);
}

/* ==========================================================================
   Responsive — AI Section
   ========================================================================== */
@media (max-width: 1100px) {
  .ai-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ai-notice { flex-direction: column; }
  .ai-card { padding: 24px 22px; }
}

@media (max-width: 560px) {
  .ai-grid { grid-template-columns: 1fr; gap: 16px; }
  .ai-glow-1, .ai-glow-2 { width: 300px; height: 300px; }
   .ai-footer-bar {
    flex-direction: column;
    text-align: center;
    padding: 26px 22px;
    gap: 14px;
  }
  .ai-footer-bar::before {
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--c-teal), var(--c-blue));
  }
}

/* ==========================================================================
   11. SECTION 5 — MICROSOFT ADVANTAGE
   ========================================================================== */
.advantage-section {
  background: var(--bg-light);
  text-align: center;
}
.adv-eyebrow { color: var(--c-blue); }
.adv-title   { color: var(--c-navy); }
.adv-desc    { color: var(--c-muted); }

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: left;
  margin-bottom: 32px;
}
.comp-box {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px);
}
.comp-box.native-box {
  background: #F0F7FF;
  border-color: #BFDBFE;
}
.comp-box h3 {
  font-size: 16px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.3;
}
.comp-x     { color: #EF4444; font-size: 0; flex-shrink: 0; }
.comp-check { color: var(--c-teal); font-size: 17px; flex-shrink: 0; }
.comp-box ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.comp-box li {
  font-size: var(--t-small);
  color: var(--c-muted);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.comp-x::before{
    content: "\f05e";
    font-family: "Font Awesome 6 Free"; /* or Font Awesome 7 Free */
    font-weight: 900;
    font-size: 18px;
}
.comp-box li::before {
    content: "\f05e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #EF4444;
    font-size: 14px;
}
.native-box li { color: var(--c-text); }
.native-box li::before { content: '✓'; color: var(--c-teal); }

/* ==========================================================================
   SharePoint vs Titan comparison — repositioned section (after logo marquee)
   ========================================================================== */
.sp-compare-section {
  background: var(--bg-light);
  padding-top: clamp(48px, 6vw, 72px);
}

.sp-compare-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.6vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  box-shadow: 0 24px 60px rgba(11, 29, 58, 0.06);
}

.sp-compare-content { text-align: left; }

.sp-callout-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--c-blue);
  margin-bottom: 18px;
}

.sp-compare-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}

.sp-compare-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 480px;
}

/* Table-in-a-box (replaces the old flat photo treatment) */
.sp-compare-table-wrap {
  background: var(--bg-light);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(14px, 2vw, 22px);
}

.sp-vs-table { display: flex; flex-direction: column; gap: 4px; }

.sp-vs-head-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 12px 14px;
}
.sp-vs-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 7px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.sp-vs-head-before { background: rgba(239, 68, 68, 0.1); color: #000; }
.sp-vs-head-after   { background: rgba(16, 185, 129, 0.12); color: #000; justify-self: end; }
.sp-vs-head-spacer  { width: 16px; }

.sp-vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 15px 14px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--c-border-soft);
  margin-bottom: 8px;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.sp-vs-row:last-child { margin-bottom: 0; }
.sp-vs-row:hover {
  border-color: var(--c-border);
  box-shadow: 0 6px 18px rgba(11,29,58,0.06);
  transform: translateY(-1px);
}

.sp-vs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  font-size: 10.5px;
  margin-right: 10px;
}
.sp-vs-icon-bad  { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.sp-vs-icon-good { background: rgba(16, 185, 129, 0.15); color: var(--c-teal); }

.sp-vs-before {
  display: flex;
  align-items: center;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-muted);
}
.sp-vs-arrow {
  color: var(--c-border);
  font-size: 13px;
}
.sp-vs-after {
  display: flex;
  align-items: center;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-navy);
  font-weight: var(--w-semibold);
}

/* ==========================================================================
   12. SECTION 6 — SCALE
   ========================================================================== */
.scale-section {
  background: var(--bg-white);
  text-align: center;
}
.scale-eyebrow {
  display: block;
  color: var(--c-muted) !important;
  text-transform: none !important;
  letter-spacing: 1px !important;
  margin-bottom: 14px;
}
.scale-headline {
  font-size: clamp(56px, 10vw, 72px);
  font-weight: var(--w-black);
  line-height: 1;
  letter-spacing: -3px;
  margin-bottom: 14px;
}
.scale-num-blue  { color: var(--c-blue); }
.scale-num-green { color: var(--c-green); }
.scale-sub {
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: var(--w-bold) !important;
  margin-bottom: 18px;
}
.scale-desc {
  max-width: 600px;
  margin: 0 auto 28px;
}

/* ==========================================================================
   13. SECTION 7 — INDUSTRIES
   ========================================================================== */
.industries-section {
  background: var(--bg-light);
  text-align: center;
}
.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  text-align: left;
}
.industry-card {
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.industry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}
.ind-manufacturing { background: linear-gradient(140deg, #0B1D3A, #1E3A5F); }
.ind-pharma        { background: linear-gradient(140deg, #0A3B2E, #166534); }
.ind-aerospace     { background: linear-gradient(140deg, #1A2850, #2D4070); }
.ind-govt          { background: linear-gradient(140deg, #1A1A3A, #2D2D5A); }
.ind-finance       { background: linear-gradient(140deg, #3B1A1A, #6B2D2D); }
.ind-icon { font-size: 26px; margin-bottom: 14px; }
.industry-card h3 {
  font-size: 15px;
  font-weight: var(--w-bold);
  color: #fff;
  margin-bottom: 8px;
}
.industry-card p {
  font-size: 13px;
  color: #94A3B8;
  line-height: 1.55;
  flex: 1;
}
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}
.tag-lbl {
  font-size: 10.5px;
  font-weight: var(--w-semibold);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 3px 9px;
  border-radius: 4px;
  color: #94A3B8;
}

/* ==========================================================================
   14. SECTION 8 — CLIENT PORTAL
   ========================================================================== */
.portal-section {
  background: var(--bg-white);
}
.portal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.portal-eyebrow { color: var(--c-teal) !important; }
.portal-content h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}
.portal-content > p {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 24px;
}
.portal-bullets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.p-bullet {
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
  padding: 11px 14px;
  background: var(--bg-light);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text);
  transition: border-color var(--dur);
}
.p-bullet:hover { border-color: var(--c-teal); }
.portal-btn {
  background: transparent;
  color: var(--c-navy);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 13px 26px;
  font-size: 15px;
  font-weight: var(--w-semibold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color var(--dur), background var(--dur), transform var(--dur);
}
.portal-btn:hover {
  border-color: var(--c-navy);
  background: var(--bg-light);
  transform: translateY(-2px);
}

/* Portal mockup */
.portal-mockup {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: 0 16px 48px rgba(11,29,58,0.08);
}
.portal-mockup-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border-soft);
  margin-bottom: 14px;
}
.portal-mockup-title {
  font-size: 13px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
}
.portal-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 8px;
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: var(--r-sm);
  transition: background var(--dur);
}
.portal-doc-row:last-child { border-bottom: none; }
.portal-doc-row:hover { background: var(--bg-light); }
.portal-doc-name {
  font-size: 14px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-doc-info span {
  font-size: var(--t-xs);
  color: var(--c-muted);
  display: block;
  margin-top: 2px;
}
.portal-status {
  font-size: 11px;
  font-weight: var(--w-bold);
  padding: 4px 12px;
  border-radius: 20px;
  flex-shrink: 0;
  white-space: nowrap;
}
.ps-delivered { background: #DCFCE7; color: #15803D; }
.ps-pending   { background: #FEF3C7; color: #B45309; }
.ps-approved  { background: #DBEAFE; color: #1D4ED8; }
.ps-signed    { background: #F3E8FF; color: #7E22CE; }

/* ==========================================================================
   15. SECTION 9 — ALL CAPABILITIES
   ========================================================================== */
.all-caps-section {
  background: var(--bg-light);
  text-align: center;
}
.all-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.cap-item-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 26px;
  transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cap-item-card:hover {
  border-color: var(--c-blue);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11,29,58,0.06);
}
.cap-item-card h3 {
  font-size: 15.5px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 8px;
}
.cap-item-card p {
  font-size: var(--t-body);
  color: var(--c-muted);
  line-height: 1.65;
}

/* ==========================================================================
   16. SECTION 10 — TESTIMONIALS
   ========================================================================== */
.testimonials-section {
  background: var(--bg-white);
  text-align: center;
}
.test-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: left;
  margin-bottom: 48px;
}
.test-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.test-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11,29,58,0.06);
}
.stars { color: #2e6b1d; font-size: 15px; margin-bottom: 14px; letter-spacing: 2px; }
.test-card q {
  font-size: var(--t-body-lg);
  color: var(--c-text);
  font-weight: var(--w-medium);
  display: block;
  margin-bottom: 20px;
  line-height: 1.7;
  font-style: italic;
}
.profile { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px;
  height: 40px;
  background: var(--c-blue);
  color: #fff;
  font-weight: var(--w-bold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.profile-meta h4 { font-size: 14px; font-weight: var(--w-bold); color: var(--c-navy); }
.profile-meta p  { font-size: var(--t-xs); color: var(--c-muted); }
.logo-marquee-title {
  font-size: 11px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--c-muted);
  margin-bottom: 18px;
}
.logo-container-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 28px);
  opacity: 0.45;
}
.logo-item {
  font-size: 13px;
  font-weight: var(--w-black);
  color: var(--c-navy);
  letter-spacing: 1.5px;
  border: 1px solid var(--c-border);
  padding: 9px 14px;
  border-radius: var(--r-md);
}

/* ==========================================================================
   17. SECTION 11 — FAQ
   ========================================================================== */
.faq-section { background: var(--bg-light); }
.faq-list {
  max-width: 1160px;
  margin: 0 auto;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  align-items: start;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow var(--dur), transform var(--dur);
  border-width: 0px 0px 0px 4px;
  border-left-color: var(--c-blue);
  box-shadow: 0 10px 24px rgba(20, 30, 70, 0.06);
}
.faq-item:hover { box-shadow: 0 10px 28px rgba(10,102,194,0.12); }
.faq-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  cursor: pointer;
  text-align: left;
  gap: 16px;
  transition: color var(--dur);
  line-height: 1.45;
}
.faq-trigger:hover { color: var(--c-blue); }
.faq-trigger[aria-expanded="true"] { color: var(--c-blue); }
.faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  transition: transform 0.25s var(--ease), color var(--dur);
}
.faq-icon svg { width: 100%; height: 100%; }
.faq-trigger[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
  color: var(--c-blue);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  transition: max-height 0.35s var(--ease), padding 0.25s var(--ease);
}
.faq-answer.open { max-height: 300px; padding: 0 22px 20px; }
.faq-answer p { font-size: 14.5px; color: var(--c-muted); line-height: 1.75; }

@media (max-width: 860px) {
  .faq-list { grid-template-columns: 1fr; max-width: 720px; }
}
@media (max-width: 480px) {
  .faq-trigger { padding: 16px 18px; font-size: 14.5px; gap: 12px; }
  .faq-answer { padding: 0 18px; }
  .faq-answer.open { padding: 0 18px 16px; }
}

/* ==========================================================================
   18. SECTION 12 — EXPLORE / ROI
   ========================================================================== */
.explore-section { background: var(--bg-white); text-align: center; }
.explore-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.explore-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.explore-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(11,29,58,0.07);
}
.explore-card-highlight { border-color: var(--c-blue); }
.explore-card-icon {
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.explore-card h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  color: var(--c-navy);
}
.explore-card p {
  font-size: var(--t-body);
  color: var(--c-muted);
  line-height: 1.65;
}
.explore-btn { margin-top: 8px; font-size: 14px; padding: 11px 22px; }

/* ==========================================================================
   19. SECTION 13 — CTA
   ========================================================================== */
.dark-cta-section {
  background: var(--bg-light);
  padding: var(--section-pad) 0;
}
.dark-cta-inner {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.dark-cta-badge {
  display: inline-block;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--c-blue);
  margin-bottom: 22px;
  letter-spacing: 0;
  text-transform: none;
}
.dark-cta-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}
.dark-cta-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 32px;
}
.dark-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}
.dark-cta-primary-btn {
  background: #4553a4;
  color: #fff;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  transition: background var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur);
}
.dark-cta-primary-btn:hover {
  background: var(--c-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(236,74,44,0.25);
}
.dark-cta-outline-btn {
  background: transparent;
  color: var(--c-navy);
  border: 1.5px solid var(--c-border);
  padding: 14px 30px;
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  transition: border-color var(--dur), background var(--dur), transform var(--dur);
}
.dark-cta-outline-btn:hover {
  border-color: var(--c-navy);
  background: #fff;
  transform: translateY(-2px);
}
.dark-cta-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
}
.dark-cta-checks span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid var(--c-border);
  border-radius: 30px;
  background: #fff;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: border-color var(--dur);
}
.dark-cta-checks span:hover { border-color: var(--c-blue); }

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.site-footer-new {
  background: var(--bg-footer);
  color: #94A3B8;
  padding: clamp(48px, 6vw, 72px) 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-logo {
  font-size: 19px;
  font-weight: var(--w-black);
  color: #fff;
  margin-bottom: 14px;
}
.footer-brand-desc {
  font-size: 13px;
  color: #64748B;
  line-height: 1.7;
  margin-bottom: 20px;
}
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-badge {
  font-size: 11px;
  font-weight: var(--w-semibold);
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  color: #CBD5E1;
  white-space: nowrap;
  transition: border-color var(--dur);
}
.footer-badge:hover { border-color: rgba(255,255,255,0.3); }
.footer-links-group h4 {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #CBD5E1;
  margin-bottom: 16px;
}
.footer-links-group ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links-group a {
  font-size: 13px;
  color: #64748B;
  transition: color var(--dur);
}
.footer-links-group a:hover { color: #fff; }
.footer-bottom {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #3F5069;
}
.footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom-links a { color: #3F5069; transition: color var(--dur); }
.footer-bottom-links a:hover { color: #94A3B8; }

/* ==========================================================================
   21. RESPONSIVE — MOBILE NAVIGATION
   ========================================================================== */
@media (max-width: 1024px) {
  body { padding-top: 72px; }
  .header-top-bar { display: none !important; }
  .header-main-bar { height: 72px; }
  .nav-toggle { display: block; }
  .header-cta-group { display: none !important; }
  .brand-logo,
  .site-header.scrolled-active .brand-logo { max-width: 180px; }

  .main-nav-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 72px; left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--c-border);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    padding: 12px clamp(16px, 4vw, 28px) 28px;
    gap: 0;
    height: auto;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav-menu.active { display: flex; }

  .nav-item {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  .nav-trigger {
    padding: 15px 0;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid var(--c-border-soft);
    height: auto;
  }
  .single-dropdown {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 14px;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-left: 2px solid var(--c-blue-mid);
    margin-bottom: 8px;
  }
  .nav-item.open .single-dropdown { display: block !important; }
  .nav-item.open .nav-trigger::after { transform: rotate(-180deg); }
  .single-dropdown a { padding: 10px 14px; border-bottom: 1px solid var(--c-border-soft); }
  .single-dropdown a:last-child { border-bottom: none; }

  /* Mega menu → mobile accordion */
  .mega-dropdown {
    position: static;
    width: 100%;
    background: transparent;
    border-top: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
    margin-bottom: 8px;
  }
  .nav-item.open .mega-dropdown { display: block !important; }
  .mega-panel {
    display: block;
    max-width: none;
    padding: 4px 0 4px 14px;
    border-left: 2px solid var(--c-blue-mid);
  }
  .mega-col { margin-bottom: 8px; }
  .mega-col-group + .mega-col-group { margin-top: 14px; }
  .mega-col h4 { border-bottom: none; padding-bottom: 6px; margin-bottom: 8px; }
  .mega-col ul li a { padding: 9px 10px; }
  .mega-featured-item { padding: 8px 10px; }
}

/* ==========================================================================
   21B. RESPONSIVE — HERO & MARQUEE
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-light-section { padding: 108px 0 60px; }
  .hero-flex {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-caps-row { justify-content: center; }
  .hero-btns { justify-content: center; }
  .hero-visual-col { max-width: 480px; margin: 48px auto 0; padding: 0 20px; }
  .hero-float-top { top: -16px; right: 6px; }
  .hero-float-bottom { bottom: -16px; left: 6px; }
  .twc-fix-card,
  .twc-fix-card--flip { grid-template-columns: 1fr; }
  .twc-fix-visual { min-height: 320px; order: -1; padding: 0 0 0 0; }
  .twc-fix-card--flip .twc-fix-visual { padding: 0; }
  .twc-fix-image { min-height: 320px; border-radius: 0; box-shadow: none; }
  .twc-fix-content { text-align: center; }
  .twc-fix-title { margin-left: auto; margin-right: auto; }
  .twc-fix-desc { margin-left: auto; margin-right: auto; }
  .twc-fix-btn { margin: 0 auto; }
}
@media (max-width: 768px) {
  .hero-light-section { padding: 96px 0 52px; }
  .hero-title { letter-spacing: -0.4px; }
  .hero-badge { font-size: 10.5px; letter-spacing: 1.2px; padding: 7px 14px; }
  .hero-caps-row { padding: 12px; gap: 8px; }
  .hero-caps-label { width: 100%; text-align: center; margin-bottom: 4px; }
  .hero-dashboard-card { max-width: 92vw; }
  .hero-visual-col { padding: 0 12px; }
  .hero-float-card { font-size: 11px; padding: 10px 13px; }
  .hero-float-top strong { font-size: 17px; }
}
@media (max-width: 560px) {
  .hero-title { font-size: clamp(26px, 7.5vw, 32px); }
  .hero-desc { font-size: 14.5px; }
  .hero-btns { flex-direction: column; align-items: center; gap: 18px; }
  .hero-btn-primary { width: 100%; max-width: 300px; justify-content: center; }
  .hero-cap-pill { font-size: 11.5px; padding: 5px 10px; }
  .hero-dash-text strong { font-size: 12.5px; }
  .hero-dash-status { font-size: 10px; padding: 4px 9px; }
  .hero-float-top { top: -14px; right: 0; }
  .hero-float-bottom { bottom: -14px; left: 0; }
  .marquee-track { gap: 40px; }
  .marquee-logo { font-size: 16px; }
}
@media (max-width: 400px) {
  .hero-light-section { padding: 88px 0 44px; }
  .hero-badge { font-size: 10px; letter-spacing: 1px; padding: 6px 12px; }
  .hero-visual-col { padding: 0 6px; }
  .hero-float-card { position: static; margin: 10px auto 0; max-width: 220px; justify-content: center; }
  .hero-float-top, .hero-float-bottom { animation: none; }
}

/* ==========================================================================
   22. RESPONSIVE — TABLET & MOBILE
   ========================================================================== */
@media (max-width: 1150px) {
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .portal-grid { grid-template-columns: 1fr; gap: 40px; }
  .portal-visual { max-width: 520px; margin: 0 auto; }
  .sp-compare-card { grid-template-columns: 1fr; }
  .sp-compare-content { text-align: center; }
  .sp-compare-desc { margin-left: auto; margin-right: auto; }
  .all-caps-grid { grid-template-columns: repeat(2, 1fr); }
  .comparison-grid { grid-template-columns: 1fr; }
  .test-grid { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
  :root {
    --t-h2: clamp(22px, 6vw, 30px);
    --t-body-lg: 15px;
    --section-pad: clamp(48px, 7vw, 64px);
  }

  .twc-problem-grid { grid-template-columns: 1fr; }
  .twc-fix-panel { width: 168px; padding: 11px 13px; gap: 9px; }
  .twc-fix-panel .twc-icon { width: 34px; height: 34px; font-size: 13px; }
  .twc-fix-visual,
  .twc-fix-image { min-height: 280px; }
  .twc-fix-illustration { width: min(50%, 170px); }
  .twc-fix-panel-1 { left: 6%; }
  .twc-fix-panel-2 { right: 6%; }
  .twc-fix-panel-3 { left: 14%; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .explore-cards-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand-col { grid-column: 1 / -1; }
  .twc-footer-box { flex-direction: column; text-align: center; }

  .tw365-banner-title { font-size: clamp(26px, 7vw, 38px); }
  .scale-headline { font-size: clamp(48px, 14vw, 72px); letter-spacing: -2px; }
  .section-desc,
  .adv-desc,
  .tw365-banner-desc { margin-bottom: 36px; }
}

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .industry-grid, .all-caps-grid { grid-template-columns: 1fr; }
  .portal-bullets { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .sp-vs-row { grid-template-columns: 1fr; gap: 6px; }
  .sp-vs-arrow { display: none; }
  .sp-vs-head-row { grid-template-columns: 1fr; gap: 8px; }
  .sp-vs-head-after { justify-self: start; }
  .sp-vs-head-spacer { display: none; }
  .twc-fix-panel { width: 148px; font-size: 12px; }
  .twc-fix-panel-1 { left: 3%; top: 4%; }
  .twc-fix-panel-2 { right: 3%; top: 42%; }
  .twc-fix-panel-3 { left: 12%; bottom: 4%; }
  .twc-fix-visual,
  .twc-fix-image { min-height: 260px; }
  .twc-fix-illustration { width: min(46%, 150px); }
  .tw365-banner-buttons { flex-direction: column; align-items: center; }
  .tw365-btn-primary,
  .tw365-btn-secondary { width: 100%; max-width: 300px; justify-content: center; }
  .dark-cta-btns { flex-direction: column; align-items: center; }
  .dark-cta-primary-btn,
  .dark-cta-outline-btn { width: 100%; max-width: 320px; justify-content: center; }
}

@media (max-width: 400px) {
  .container { padding: 0 14px; }
  .footer-bottom-links { gap: 12px; }
}

/*ROI Page CSS*/
/* ===== PAGE WRAPPER =====
   Width matches the site's .container (1200px) and top padding matches
   .hero-light-section so the fixed header never overlaps the content on
   any breakpoint. */
.tw-roi-page {
  /* Scoped, contrast-safe text tokens (all pass WCAG AA on white/near-white) */
  --roi-ink:    #1a1a18;
  --roi-body:   #3f3e3a;
  --roi-muted:  #6b6a62;
  --roi-faint:  #86847a;
  --roi-line:   #d8d6cc;
  --roi-panel:  #f7f6f2;

  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(120px, 16vw, 156px) clamp(16px, 3vw, 32px) clamp(56px, 7vw, 84px);
}

@media (max-width: 1024px) { .tw-roi-page { padding-top: 108px; } }
@media (max-width: 768px)  { .tw-roi-page { padding-top: 96px; } }
@media (max-width: 400px)  { .tw-roi-page { padding-top: 88px; } }

/* ===== HEADER ===== */
.tw-roi-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.tw-roi-header .eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: #ec4a2c;
  background: #E1F5EE;
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 1rem;
}
.tw-roi-header h1 {
  font-family: var(--font);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: #1a1a18;
  line-height: 1.2;
  margin-bottom: .75rem;
}
.tw-roi-header .sub {
  font-size: 16px;
  color: var(--roi-body);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ===== COMBINED TOTAL BANNER ===== */
.combined-banner {
  background: #4553a4;
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.combined-banner .cb-label {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
.combined-banner .cb-total {
  font-family: var(--font);
  font-size: 36px;
  font-weight: 700;
  color: #f9bc15;
  line-height: 1;
}
.combined-banner .cb-sub {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  margin-top: 4px;
}
.combined-banner .cb-tiles {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.cb-tile {
  text-align: center;
  min-width: 100px;
}
.cb-tile .ct-val {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}
.cb-tile .ct-lbl {
  font-size: 14px;
  color: rgba(255,255,255);
  margin-top: 2px;
  white-space: nowrap;
}
.cb-divider { width: 1px; background: rgba(255,255,255,.15); align-self: stretch; }

/* ===== TABS ===== */
.tw-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.tw-tab-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--roi-line);
  background: #fff;
  color: var(--roi-body);
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tw-tab-btn i { font-size: 15px; }
.tw-tab-btn:hover { background: var(--roi-panel); border-color: var(--roi-faint); color: #1a1a18; }
.tw-tab-btn.active {
  background: #4553a4;
  border-color: #4553a4;
  color: #fff;
  font-weight: 500;
}

/* ===== MODULE PANELS ===== */
.tw-panel { display: none; }
.tw-panel.active { display: block; }

/* ===== CALCULATOR LAYOUT — inputs left, results right ===== */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) {
  .calc-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .calc-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.calc-inputs-col .inputs-grid { margin-bottom: 1rem; }
.calc-results-col .results-band { margin-bottom: 0; height: 100%; }

.mod-desc {
  font-size: 13.5px;
  color: var(--roi-body);
  line-height: 1.65;
  padding: 12px 16px;
  background: #E1F5EE;
  border-radius: 10px;
  margin-bottom: 1.25rem;
  border-left: 3px solid #1D9E75;
}
.mod-desc strong { color: #4553a4; font-weight: 500; }

.dmc {
    background: #f5faff !important;
    border-left: 3px solid #1d9e75!important;
}

.podb {
    background: #fff8e3 !important;
    border-left: 3px solid #4553a4!important;
}

.cpbg{
  background: #fee0db !important;
  border-left: 3px solid #f9bc15!important;
}

.workbg{
  background: #cbfcbe !important;
  border-left: 3px solid #ec4a2c!important;
}
div#panel-dms {
    margin-bottom: 15px !important;
}


/* ===== INPUTS GRID ===== */
.inputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 1.25rem;
}
.tw-field {
  background: #fff;
  border: 1px solid var(--roi-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.tw-field label {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--roi-muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.field-row { display: flex; align-items: center; gap: 10px; }
.field-row input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--roi-line);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.field-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4553a4;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #4553a4;
}
.field-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4553a4;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #4553a4;
}
.field-val {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: #1a1a18;
  min-width: 58px;
  text-align: right;
  white-space: nowrap;
}

/* ===== RESULTS BAND ===== */
.results-band {
  background: var(--roi-panel);
  border: 1px solid var(--roi-line);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.results-title {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--roi-muted);
  font-weight: 500;
  margin-bottom: 14px;
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 540px) { .stats-row { grid-template-columns: 1fr 1fr; } }
.stat-card {
  background: #fff;
  border: 1px solid var(--roi-line);
  border-radius: 10px;
  padding: 12px 14px;
}
.stat-card .s-label {
  font-size: 11px;
  color: var(--roi-muted);
  margin-bottom: 5px;
  line-height: 1.3;
}
.stat-card .s-val {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  color: #4553a4;
  line-height: 1.1;
}
.stat-card .s-sub { font-size: 11px; color: var(--roi-faint); margin-top: 3px; }

/* ===== BREAKDOWN ===== */
.breakdown-list {
  border-top: 1px solid var(--roi-line);
  padding-top: 12px;
}
.b-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: var(--roi-body);
}
.b-label { display: flex; align-items: center; gap: 7px; }
.b-label i { font-size: 15px; color: #1D9E75; flex-shrink: 0; }
.b-num {
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  color: #1a1a18;
  white-space: nowrap;
}
.b-row.total {
  border-top: 1px solid var(--roi-faint);
  margin-top: 6px;
  padding-top: 10px;
}
.b-row.total .b-label { font-weight: 500; color: #1a1a18; font-size: 14px; }
.b-row.total .b-num { color: #4553a4; font-size: 16px; font-weight: 700; }

/* ===== ASSUMPTIONS ===== */
.assumptions {
  font-size: 12.5px;
  color: var(--roi-muted);
  line-height: 1.6;
  padding: 10px 14px;
  border: 1px solid var(--roi-line);
  border-radius: 8px;
  margin-bottom: 1.25rem;
  background: #fff;
}
.assumptions span { color: var(--roi-body); font-weight: 500; }

/* ===== LEAD CAPTURE ===== */
.lead-capture {
  background: #fff;
  border: 1px solid var(--roi-line);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.lead-capture h3 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: #1a1a18;
  margin-bottom: .35rem;
}
.lead-capture p { font-size: 13px; color: var(--roi-body); margin-bottom: 1rem; line-height: 1.5; }
.lead-form { display: flex; gap: 10px; flex-wrap: wrap; }
.lead-form input[type="text"],
.lead-form input[type="email"] {
  flex: 1;
  min-width: 180px;
  height: 42px;
  border: 1px solid var(--roi-line);
  border-radius: 8px;
  padding: 0 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #1a1a18;
  background: #f5f4f0;
  outline: none;
  transition: border-color .15s;
}
.lead-form input:focus { border-color: #ec4a2c; background: #fff; }
.lead-form input::placeholder { color: var(--roi-faint); }
.lead-form .btn-primary {
  height: 42px;
  padding: 0 22px;
  background: #ec4a2c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.lead-form .btn-primary:hover { background: #4553a4; }
.lead-success {
  display: none;
  font-size: 14px;
  color: #ec4a2c;
  font-weight: 500;
  padding: 8px 0;
}
.lead-success i { margin-right: 6px; }

/* ===== CTA BAND ===== */
.cta-band {
  background: linear-gradient(135deg, #4553a4 0%, #ec4a2c 100%);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cta-band .cta-copy { flex: 1; min-width: 220px; }
.cta-band .cta-copy strong {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: block;
  margin-bottom: 4px;
}
.cta-band .cta-copy p { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.5; }
.cta-band .cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-white {
  height: 42px;
  padding: 0 20px;
  background: #fff;
  color: #4553a4;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .15s;
}
.btn-white:hover { opacity: .9; }
.btn-outline-white {
  height: 42px;
  padding: 0 20px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}
.btn-outline-white:hover { border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.08); }

/* ===== FOOTER NOTE =====
   Previously 11.5px / #888780 on transparent background — failed contrast
   review (client screenshot). Now a proper bordered panel, AA-compliant
   text color, and larger size so it reads as intentional fine print
   rather than disappearing. */
.tw-footnote {
  font-size: 13px;
  color: var(--roi-body);
  line-height: 1.65;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px 22px;
  background: var(--roi-panel);
  border: 1px solid var(--roi-line);
  border-radius: 10px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
  .calc-grid { gap: 20px; }
}
@media (max-width: 600px) {
  .tw-roi-page { padding-left: 1rem; padding-right: 1rem; padding-bottom: 3rem; }
  .combined-banner { flex-direction: column; text-align: center; }
  .combined-banner .cb-tiles { justify-content: center; }
  .cb-divider { display: none; }
  .cta-band { flex-direction: column; text-align: center; }
  .cta-band .cta-btns { justify-content: center; }
  .tw-footnote { padding: 14px 16px; font-size: 12.5px; }
}

/* ==========================================================================
   CLIENT PORTAL PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, buttons, section
   eyebrow/title/desc, .all-caps-grid / .cap-item-card, .sp-compare-*,
   .test-grid / .test-card, .faq-*, .dark-cta-*, .portal-mockup) already
   exists in style.css and is reused as-is — do NOT duplicate those rules
   here. Paste this whole block into style.css (e.g. at the end) whenever
   convenient; it only adds new class names.

   Uses the same design tokens already defined in :root — var(--c-navy),
   var(--c-muted), var(--c-red), var(--c-blue), var(--c-border),
   var(--bg-light), var(--font), var(--r-lg), var(--dur), var(--ease), etc.
   No new JS is required for this page — the header scroll state, mobile
   nav accordion, FAQ accordion and scroll-reveal in main.js all work off
   the existing class names (.site-header, .nav-item, .faq-item,
   .reveal-card) used above.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. HERO
   ---------------------------------------------------------------------- */
.portal-hero-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
  padding: clamp(120px, 16vw, 156px) 0 clamp(56px, 7vw, 84px);
}

.portal-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.portal-hero-title {
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 16px 0 20px;
}

.portal-hero-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 0 30px;
}

.portal-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.portal-hero-trust {
  font-size: 13.5px;
  color: var(--c-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.portal-hero-trust strong { color: var(--c-navy); font-weight: var(--w-semibold); }
.hero-trust-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4553a4;
  display: inline-block;
}

.portal-visual { width: 100%; }

/* ----------------------------------------------------------------------
   2. MANUAL-WORK / STEPS BAND (dark panel)
   ---------------------------------------------------------------------- */
.portal-steps-section {
  background: var(--bg-dark);
  padding: var(--section-pad) 0;
}

.portal-steps-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.portal-steps-eyebrow {
  display: inline-block;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #F6A58F;
  margin-bottom: 16px;
}

.portal-steps-title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.22;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}

.portal-steps-desc {
  font-size: var(--t-body-lg);
  color: #C6C9CF;
  line-height: 1.75;
}

.portal-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.portal-step:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.09);
}

.portal-step-num {
  font-family: var(--font);
  font-weight: var(--w-bold);
  color: var(--c-red);
  font-size: 14px;
  min-width: 18px;
}

.portal-step-text {
  font-size: 14px;
  color: #E8EAED;
  line-height: 1.6;
}
.portal-step-text b { color: #fff; font-weight: var(--w-semibold); }

/* ----------------------------------------------------------------------
   3. SMALL ICON CHIP for capability cards
   (drops into the existing .cap-item-card without changing it)
   ---------------------------------------------------------------------- */
.cap-icon-chip {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: rgb(240 252 237);
  color: #2e6b1d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: 16px;
  margin-bottom: 14px;
}

/* Colored "who" label used inside use-case card titles */
.uc-who { color: #2e6b1d; }

/* ----------------------------------------------------------------------
   4. INDUSTRY / BEST-FIT PILL STRIP
   ---------------------------------------------------------------------- */
.portal-industry-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-industry-pill {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--c-navy);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.portal-industry-pill:hover {
  border-color: var(--c-blue);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------
   5. METRICS BAND (sits above the reused testimonial cards)
   ---------------------------------------------------------------------- */
.portal-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
  margin-bottom: 52px;
}

.portal-metric-num {
  font-family: var(--font);
  font-weight: var(--w-black);
  font-size: 42px;
  color: #2e6b1d;
  line-height: 1;
  letter-spacing: -1px;
}
.portal-metric-num small { font-size: 24px; font-weight: var(--w-bold); }

.portal-metric-label {
  font-size: 14.5px;
  color: var(--c-muted);
  margin-top: 10px;
}

/* ----------------------------------------------------------------------
   6. BACKGROUND ALTERNATION
   Sitewide utility: some sections share a class (.all-caps-section,
   .sp-compare-section, .capabilities-section, etc.) whose default
   background is var(--bg-light). Whenever two of those land back-to-back
   it flattens that part of the page, so this utility forces
   var(--bg-white) on the specific instance that needs it, to restore the
   light/white alternating rhythm. .section-bg-white is the general-purpose
   name; .portal-section-white is a legacy alias kept for the client
   portal page markup. Defined at equal specificity to the section rules
   above but loaded after them, so it wins — no !important needed.
   ---------------------------------------------------------------------- */
.section-bg-white,
.portal-section-white {
  background: var(--bg-white);
}

/* ----------------------------------------------------------------------
   7. TESTIMONIALS CAROUSEL
   Wraps the existing, untouched .test-card design. Shows 2 cards per
   view on tablet/desktop, 1 per view on mobile — fully responsive,
   with arrow nav, dot pagination, and touch-swipe (see client-portal.js).
   ---------------------------------------------------------------------- */
.test-carousel {
  position: relative;
  padding: 0 56px;
  margin-bottom: 40px;
}

.test-carousel-viewport {
  overflow: hidden;
}

.test-carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s var(--ease);
}

.test-carousel-track .test-card {
  flex: 0 0 calc(50% - 12px);
  min-width: 0;
}

.test-carousel-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: 0 10px 24px rgba(11, 29, 58, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-navy);
  cursor: pointer;
  z-index: 2;
  padding: 0;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.test-carousel-arrow svg { width: 20px; height: 20px; }
.test-carousel-arrow:hover {
  border-color: var(--c-blue);
  color: var(--c-blue);
  transform: translateY(-50%) scale(1.06);
}
.test-carousel-prev { left: 0; }
.test-carousel-next { right: 0; }

.test-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 48px;
}
.test-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: var(--c-border);
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.test-carousel-dot.is-active {
  width: 22px;
  background: var(--c-red);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .portal-hero-grid,
  .portal-steps-inner,
  .portal-metrics {
    grid-template-columns: 1fr;
  }
  .portal-visual { max-width: 560px; margin: 0 auto; }
  .portal-steps-list { margin-top: 8px; }
}

@media (max-width: 768px) {
  .portal-hero-section { padding: 108px 0 52px; }
  .portal-hero-desc { max-width: none; }
  .portal-steps-section { padding: var(--section-pad-sm) 0; }

  /* Carousel: 1 card per view, arrows off, dots + swipe take over */
  .test-carousel { padding: 0; }
  .test-carousel-track .test-card { flex: 0 0 100%; }
  .test-carousel-track { gap: 16px; }
  .test-carousel-arrow { display: none; }
}

@media (max-width: 480px) {
  .portal-hero-section { padding: 96px 0 44px; }
  .portal-hero-cta { flex-direction: column; align-items: stretch; }
  .portal-hero-cta .btn { text-align: center; }
  .portal-metrics { gap: 18px; }
}

/* ==========================================================================
   VIDEO SECTION — "Give Your Clients a Portal, Not Another Email Thread"
   ========================================================================== */
.portal-video-section { background: var(--bg-white); }

.portal-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.portal-video-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #2e6b1d;
  margin-bottom: 16px;
}
.portal-video-eyebrow i { font-size: 11px; }

.portal-video-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

.portal-video-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 24px;
}

.portal-video-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.portal-video-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: var(--w-medium);
  color: var(--c-text);
}
.portal-video-points i {
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 50%;
  background: var(--c-green-light);
  color: var(--c-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}

/* ---- Thumbnail / trigger ---- */
.portal-video-visual { width: 100%; }

.portal-video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--c-navy);
  box-shadow: 0 24px 60px rgba(11, 29, 58, 0.16);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.portal-video-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(11, 29, 58, 0.22);
}
.portal-video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.portal-video-thumb:hover img {
  transform: scale(1.04);
  filter: brightness(0.85);
}
.portal-video-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,29,58,0.05) 0%, rgba(11,29,58,0.35) 100%);
}

.portal-video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-red);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.portal-video-play-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.portal-video-thumb:hover .portal-video-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--c-red);
  color: #fff;
}
.portal-video-play-btn::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  animation: portalPlayPulse 2.4s ease-out infinite;
}
@keyframes portalPlayPulse {
  0%   { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ==========================================================================
   VIDEO MODAL
   ========================================================================== */
.portal-video-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.portal-video-modal.is-open { display: flex; }

.portal-video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 15, 30, 0.86);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.portal-video-modal.is-open .portal-video-modal-backdrop { opacity: 1; }

.portal-video-modal-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  z-index: 1;
  opacity: 0;
  transform: scale(0.94) translateY(16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.portal-video-modal.is-open .portal-video-modal-inner {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.portal-video-modal-close {
  position: absolute;
  top: -48px; right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.portal-video-modal-close:hover {
  background: var(--c-red);
  border-color: var(--c-red);
  transform: rotate(90deg);
}
.portal-video-modal-close svg { width: 18px; height: 18px; }

.portal-video-modal-frame {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  background: #000;
}
.portal-video-modal-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.portal-video-modal-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ==========================================================================
   RESPONSIVE — Video section
   ========================================================================== */
@media (max-width: 1024px) {
  .portal-video-grid { grid-template-columns: 1fr; gap: 40px; }
  .portal-video-visual { max-width: 560px; margin: 0 auto; }
  .portal-video-desc { max-width: none; }
}
@media (max-width: 768px) {
  .portal-video-play-btn { width: 68px; height: 68px; }
  .portal-video-play-btn svg { width: 24px; height: 24px; }
  .portal-video-modal-close { top: -44px; width: 36px; height: 36px; }
}
@media (max-width: 480px) {
  .portal-video-points li { font-size: 13.5px; }
  .portal-video-modal { padding: 12px; }
  .portal-video-modal-close { top: auto; bottom: calc(100% + 8px); right: 0; }
}

/* ==========================================================================
   POLICY, SOP & AUDIT MANAGEMENT PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, buttons, .section-eyebrow /
   .section-title / .section-desc, .comparison-grid / .comp-box,
   .faq-list / .faq-item, .dark-cta-*, .reveal-card) already exists in
   style.css and is reused as-is — do NOT duplicate those rules here.
   Paste this whole block into style.css (e.g. at the end); it only adds
   new class names, all prefixed "pa-" (Policy & Audit) to avoid collisions.

   Uses the same design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-teal),
   var(--c-muted), var(--c-border), var(--bg-light), var(--bg-dark),
   var(--font), var(--r-lg), var(--dur), var(--ease), etc.
   No new JS is required — header scroll state, mobile nav accordion,
   FAQ accordion and scroll-reveal in main.js all work off the existing
   class names (.site-header, .nav-item, .faq-item, .reveal-card) reused
   on this page.
   ========================================================================== */

/* ----------------------------------------------------------------------
   0. SHARED
   ---------------------------------------------------------------------- */
.pa-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--c-red);
  margin-bottom: 14px;
}
.pa-section-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.pa-section-head.pa-mid { margin-inline: auto; text-align: center; } /* kept for clarity — centering is already the default */
.pa-section-head h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.pa-section-head p {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
}
.pa-tint { background: var(--bg-white); }

/* ----------------------------------------------------------------------
   1. HERO — dark, split (copy + live readiness board)
   ---------------------------------------------------------------------- */
.pa-hero-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, #14264a 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #0d2b3f 0%, transparent 50%),
    linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  padding: clamp(120px, 15vw, 150px) 0 clamp(64px, 7vw, 88px);
}
.pa-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: .5;
  pointer-events: none;
}
.pa-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.pa-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #60b14a;
  margin-bottom: 18px;
}
.pa-hero-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin-bottom: 16px;
}
.pa-hero-tagline {
  font-size: 18px;
  font-weight: var(--w-bold);
  color: #60b14a;
  margin-bottom: 18px;
  letter-spacing: -0.2px;
}
.pa-hero-desc {
  font-size: var(--t-body-lg);
  color: #B9C0CB;
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 30px;
}
.pa-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.pa-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: var(--r-sm);
  padding: 13px 26px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pa-btn-ghost:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}
.pa-fw-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.pa-fw-row span {
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  color: #AEB6C2;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
  padding: 6px 13px;
  letter-spacing: .02em;
}

/* Readiness board (dark glass card) */
.pa-board {
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.pa-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pa-board-status { display: flex; align-items: center; gap: 10px; }
.pa-rdot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(16,185,129,.22);
  flex-shrink: 0;
  animation: paPulse 2.4s ease-in-out infinite;
}
@keyframes paPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,.22); }
  50%      { box-shadow: 0 0 0 8px rgba(16,185,129,.08); }
}
.pa-board-status .st { font-weight: var(--w-semibold); font-size: 14.5px; color: #fff; }
.pa-board-top .ts { font-size: 10.5px; color: #8A93A0; letter-spacing: .04em; }

.pa-brow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pa-brow:last-of-type { border-bottom: none; }
.pa-brow .bl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa-brow .bt {
  font-size: 13px; color: #E7EAEF; font-weight: var(--w-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pa-brow .bm { font-size: 10.5px; color: #7E8794; }
.pa-chip {
  font-size: 10px;
  font-weight: var(--w-bold);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.pa-c-ok   { background: rgba(16,185,129,.16); color: #6BE0AE; border: 1px solid rgba(16,185,129,.32); }
.pa-c-arch { background: rgba(69,83,164,.20); color: #A9B4EA; border: 1px solid rgba(69,83,164,.4); }
.pa-c-act  { background: rgba(236,74,44,.16); color: #FF9576; border: 1px solid rgba(236,74,44,.32); }

.pa-meter { margin-top: 14px; padding: 13px 15px; background: rgba(0,0,0,.22); border-radius: 11px; }
.pa-meter .ml {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: #A7AFBB; margin-bottom: 8px; letter-spacing: .03em;
}
.pa-meter .ml b { color: #fff; font-weight: var(--w-bold); }
.pa-bar { height: 7px; background: rgba(255,255,255,.1); border-radius: 100px; overflow: hidden; }
.pa-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-teal), #57E0A8);
  border-radius: 100px;
  animation: paFill 1.8s cubic-bezier(.2,.7,.3,1) forwards .4s;
}
@keyframes paFill { to { width: 87%; } }

@media (max-width: 1024px) {
  .pa-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .pa-hero-desc { margin-left: auto; margin-right: auto; }
  .pa-hero-cta { justify-content: center; }
  .pa-fw-row { justify-content: center; }
  .pa-board { max-width: 560px; margin: 40px auto 0; text-align: left; }
}
@media (max-width: 560px) {
  .pa-hero-section { padding: 100px 0 52px; }
}

/* ----------------------------------------------------------------------
   2. PAIN MIRROR — "You don't have a document problem…"
   ---------------------------------------------------------------------- */
.pa-pain-section { background: var(--bg-white); text-align: center; }
.pa-pain-lead {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto 30px;
}
.pa-scenes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 0 auto 30px;
  text-align: left;
}
.pa-scene {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pa-scene:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,29,58,.06); }
.pa-scene .num {
  font-weight: var(--w-bold);
  color: var(--c-red);
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}
.pa-scene p { font-size: 14.5px; color: var(--c-muted); line-height: 1.6; margin: 0; }
.pa-pain-turn {
  font-size: 17px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  max-width: 760px;
  line-height: 1.6;
  margin: 0 auto;
}
@media (max-width: 768px) { .pa-scenes { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------
   3. MOAT — dark, Purview integration grid
   ---------------------------------------------------------------------- */
.pa-moat-section {
  background: linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.pa-moat-head {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto 40px;
}
.pa-moat-kicker {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #FF9576;
  margin-bottom: 16px;
  display: inline-block;
}
.pa-moat-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.22;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}
.pa-moat-text p {
  color: #B9C0CB;
  font-size: var(--t-body-lg);
  line-height: 1.75;
  margin-bottom: 14px;
}
.pa-moat-text p:last-child { margin-bottom: 0; }
.pa-mcell-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  text-align: left;
}
.pa-mcell {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 20px 18px;
  transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease);
}
.pa-mcell:hover {
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  transform: translateY(-4px);
}
.pa-mcell .mi { font-size: 10.5px; color: var(--c-red); letter-spacing: .1em; margin-bottom: 8px; font-weight: var(--w-bold); }
.pa-mcell h4 { font-size: 14.5px; color: #fff; font-weight: var(--w-bold); margin-bottom: 6px; }
.pa-mcell p { font-size: 12.5px; color: #96A5BD; margin: 0; line-height: 1.6; }
@media (max-width: 1100px) { .pa-mcell-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pa-mcell-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------
   4. LIFECYCLE — vertical spine, 9 stages
   ---------------------------------------------------------------------- */
.pa-lifecycle-section { background: var(--bg-light); }
.pa-spine {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.pa-spine::before {
  content: '';
  position: absolute;
  left: 27px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-red), var(--c-teal));
  opacity: .3;
}
.pa-node {
  position: relative;
  padding: 0 0 30px 76px;
}
.pa-node:last-child { padding-bottom: 0; }
.pa-node .dot {
  position: absolute;
  left: 16px; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--w-bold);
  color: var(--c-red);
  z-index: 2;
}
.pa-node h3 {
  font-size: 17.5px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pa-node h3 .pa-badge {
  font-size: 9.5px;
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--c-green-light);
  color: #15803D;
  border: 1px solid #BFE6C8;
}
.pa-node p { font-size: 14.5px; color: var(--c-muted); line-height: 1.65; margin: 0; }

/* ----------------------------------------------------------------------
   5. CAPABILITIES — "Beyond a tick-box" grid3
   ---------------------------------------------------------------------- */
.pa-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pa-cap-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.pa-cap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(11,29,58,.07);
  border-color: var(--c-blue);
}
.pa-cap-card .ci {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: var(--c-blue-light);
  color: var(--c-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--w-bold);
  font-size: 18px;
  margin-bottom: 16px;
}
.pa-cap-card h3 { font-size: 16px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 8px; }
.pa-cap-card p { font-size: 13.5px; color: var(--c-muted); line-height: 1.65; margin: 0; }
.pa-cap-card .pa-only {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 9px;
  font-weight: var(--w-bold);
  letter-spacing: .05em;
  color: var(--c-red);
  background: #FDEEEA;
  border: 1px solid #F6D3C9;
  border-radius: 20px;
  padding: 4px 9px;
  text-transform: uppercase;
}
@media (max-width: 900px) { .pa-cap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pa-cap-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------
   6. BEFORE / AFTER TABLE — reuses the sp-vs-* visual language
   ---------------------------------------------------------------------- */
.pa-vs-wrap {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 20px 50px rgba(11,29,58,.06);
}
.pa-vs-head-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 12px 16px;
}
.pa-vs-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 7px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.pa-vs-head-before { background: rgba(239,68,68,.1); color: #B91C1C; }
.pa-vs-head-after   { background: rgba(16,185,129,.12); color: #0F766E; justify-self: end; }
.pa-vs-head-spacer { width: 16px; }
.pa-vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-light);
  border: 1px solid var(--c-border-soft);
  margin-bottom: 8px;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.pa-vs-row:last-child { margin-bottom: 0; }
.pa-vs-row:hover { border-color: var(--c-border); box-shadow: 0 6px 18px rgba(11,29,58,.06); transform: translateY(-1px); }
.pa-vs-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; min-width: 20px;
  border-radius: 50%;
  font-size: 10.5px;
  margin-right: 10px;
}
.pa-vs-icon-bad  { background: rgba(239,68,68,.12); color: #EF4444; }
.pa-vs-icon-good { background: rgba(16,185,129,.15); color: var(--c-teal); }
.pa-vs-before { display: flex; align-items: center; font-size: 14.5px; line-height: 1.45; color: var(--c-muted); }
.pa-vs-arrow  { color: var(--c-border); font-size: 13px; }
.pa-vs-after  { display: flex; align-items: center; font-size: 14.5px; line-height: 1.45; color: var(--c-navy); font-weight: var(--w-semibold); }
@media (max-width: 560px) {
  .pa-vs-row { grid-template-columns: 1fr; gap: 6px; }
  .pa-vs-arrow { display: none; }
  .pa-vs-head-row { grid-template-columns: 1fr; gap: 8px; }
  .pa-vs-head-after { justify-self: start; }
  .pa-vs-head-spacer { display: none; }
}

/* ----------------------------------------------------------------------
   7. TABLES — licensing / departments / frameworks (shared table style)
   ---------------------------------------------------------------------- */
.pa-table-wrap {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 32px;
}
.pa-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pa-table th, .pa-table td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--c-border-soft); vertical-align: top; }
.pa-table tr:last-child td { border-bottom: none; }
.pa-table th {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-muted); font-weight: var(--w-bold); background: var(--bg-light);
}
.pa-table td.pa-k   { font-weight: var(--w-bold); color: var(--c-navy); width: 30%; }
.pa-table td.pa-dep  { font-weight: var(--w-bold); color: var(--c-navy); width: 26%; }
.pa-table td { color: var(--c-muted); }
@media (max-width: 560px) {
  .pa-table { font-size: 13px; }
  .pa-table th, .pa-table td { padding: 11px 14px; }
}

/* ----------------------------------------------------------------------
   8. PROOF — metrics band + quote
   ---------------------------------------------------------------------- */
.pa-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}
.pa-metric {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  text-align: center;
}
.pa-metric .big {
  font-weight: var(--w-black);
  font-size: 40px;
  color: var(--c-red);
  line-height: 1;
  letter-spacing: -1px;
}
.pa-metric .big small { font-size: 22px; font-weight: var(--w-bold); }
.pa-metric .lbl { font-size: 13.5px; color: var(--c-muted); margin-top: 12px; line-height: 1.5; }

.pa-quote {
  background: linear-gradient(160deg, #0B1D3A 0%, #101f3f 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(30px, 4vw, 44px);
  max-width: 780px;
  margin: 0 auto;
}
.pa-quote .stars { color: #FF9576; font-size: 14px; letter-spacing: 3px; margin-bottom: 16px; }
.pa-quote blockquote {
  font-weight: var(--w-semibold);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  margin: 0 0 22px;
  letter-spacing: -0.2px;
  color: #fff;
}
.pa-quote .who { display: flex; align-items: center; gap: 13px; }
.pa-quote .av {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #FF9576;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--w-bold); font-size: 13px;
}
.pa-quote .nm { font-weight: var(--w-bold); font-size: 14.5px; color: #fff; }
.pa-quote .rl { font-size: 12.5px; color: #9AA2AE; }
.pa-quote-note {
  text-align: center;
  font-size: 12px;
  color: var(--c-subtle);
  margin-top: 18px;
  font-style: italic;
}
@media (max-width: 768px) { .pa-metrics { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------
   9. FINAL STRIP (used inside the shared .dark-cta-section on this page)
   ---------------------------------------------------------------------- */
.pa-cta-strip {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--c-muted);
  letter-spacing: .02em;
}

/* ----------------------------------------------------------------------
   10. BACKGROUND RHYTHM — page-scoped only
   Keeps the homepage's strict white/light/dark alternation on THIS page
   without touching the shared .faq-section / .dark-cta-section rules
   (those stay untouched so other pages that reuse them are unaffected).
   Add class="policy-audit-page" on <body> for this page only.
   ---------------------------------------------------------------------- */
.policy-audit-page .faq-section { background: var(--bg-white); }

/* ----------------------------------------------------------------------
   11. RESPONSIVE POLISH — small phones
   ---------------------------------------------------------------------- */
@media (max-width: 480px) {
  .pa-hero-title { letter-spacing: -0.4px; }
  .pa-board { padding: 18px; }
  .pa-brow .bt { max-width: 160px; }
  .pa-metric .big { font-size: 32px; }
  .pa-quote { padding: 26px 22px; }
  .pa-quote blockquote { font-size: 18px; }
  .pa-vs-wrap { padding: 14px; }
}
/* ==========================================================================
   20. FOOTER — REDESIGNED
   Replaces the previous "20. FOOTER" block in style.css with this one
   (same section number/position — just swap the old block for this).
   Everything below uses the site's EXISTING tokens only — var(--c-navy),
   var(--c-red), var(--c-blue), var(--bg-footer), var(--font), var(--r-lg),
   var(--dur), var(--ease) — plus the exact 4-stop brand gradient already
   used elsewhere on the site (.hero-gradient-text / .tw365-gradient-text:
   #EC4A2C → #F9BC15 → #60B14A → #578ECA), so the footer's accent thread
   and logo mark visually match the rest of the page with zero new colors.
   No JS changes required — the newsletter form is a static, no-op submit
   (onsubmit="return false") exactly like the reference.
   ========================================================================== */

.site-footer-new {
  --footer-card:  rgba(255,255,255,0.045);
  --footer-card-hover: rgba(255,255,255,0.075);
  --footer-line:  rgba(255,255,255,0.10);
  --footer-hi:    #FFFFFF;
  --footer-mid:   #94A3B8;
  --footer-low:   #64748B;

  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(87,142,202,0.14), transparent 60%),
    radial-gradient(ellipse 700px 400px at 100% 0%, rgba(236,74,44,0.09), transparent 55%),
    var(--bg-footer);
  color: var(--footer-mid);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* faint dot-grid — echoes the dashboard/grid motif used in the hero + AI section */
.site-footer-new::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 65%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 65%);
  pointer-events: none;
}

/* ---- Signature 4-color thread — the same gradient stops used in the
   site's hero/banner gradient text, just as four solid flex segments ---- */
.footer-thread {
  height: 4px;
  display: flex;
  width: 100%;
  position: relative;
  z-index: 1;
}
.footer-thread span { flex: 1; }
.footer-thread span:nth-child(1) { background: #EC4A2C; }
.footer-thread span:nth-child(2) { background: #F9BC15; }
.footer-thread span:nth-child(3) { background: #60B14A; }
.footer-thread span:nth-child(4) { background: #578ECA; }

.site-footer-new .container { position: relative; z-index: 1; }

/* ---- CTA band ---- */
.footer-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(40px, 5vw, 56px) 0 clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--footer-line);
  flex-wrap: wrap;
}
.footer-cta-band h2 {
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--footer-hi);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.footer-cta-band p {
  margin: 0;
  font-size: 15.5px;
  color: var(--footer-mid);
}
.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-blue);
  color: #fff;
  font-family: var(--font);
  font-weight: var(--w-semibold);
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(69,83,164,0.55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.footer-cta-btn:hover {
  background: var(--c-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(214,61,34,0.55);
}
.footer-cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Main grid ---- */
.footer-main-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: clamp(40px, 5vw, 56px) 0 40px;
}

/* Brand column — logo mark reused exactly from the header SVG */
.footer-brand-col .footer-logo-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.footer-logo-mark { width: 38px; height: 38px; flex-shrink: 0; }
.footer-logo-word {
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: 19px;
  color: var(--footer-hi);
  letter-spacing: -0.2px;
}
.footer-logo-word span { color: var(--footer-low); font-weight: var(--w-medium); }

.footer-brand-col p {
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 340px;
  color: var(--footer-mid);
  margin: 0 0 22px;
}

.footer-contact-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.footer-contact-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--footer-mid); }
.footer-contact-list li svg { width: 15px; height: 15px; color: #578ECA; flex-shrink: 0; }
.footer-contact-list a { color: var(--footer-mid); transition: color var(--dur) var(--ease); }
.footer-contact-list a:hover { color: var(--footer-hi); }

.footer-social-row { display: flex; gap: 10px; }
.footer-social-row a {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--footer-card);
  border: 1px solid var(--footer-line);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-social-row a svg { width: 15px; height: 15px; color: var(--footer-mid); transition: color var(--dur) var(--ease); }
.footer-social-row a:hover {
  border-color: #578ECA;
  background: rgba(87,142,202,0.16);
  transform: translateY(-3px);
}
.footer-social-row a:hover svg { color: var(--footer-hi); }

/* Link columns */
.footer-col-title {
  font-family: var(--font);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--footer-hi);
  margin: 0 0 18px;
}
.footer-link-list li { margin-bottom: 12px; }
.footer-link-list a {
  font-size: 13.5px;
  color: var(--footer-mid);
  position: relative;
  display: inline-block;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-link-list a:hover { color: var(--footer-hi); transform: translateX(3px); }
ul.footer-link-list {
    padding-left: 12px!important;
}
/* Newsletter */
.footer-newsletter p {
  font-size: 13px;
  color: var(--footer-mid);
  margin: 0 0 16px;
  line-height: 1.6;
}
.footer-newsletter form {
  display: flex;
  background: var(--footer-card);
  border: 1px solid var(--footer-line);
  border-radius: var(--r-md);
  padding: 5px;
  gap: 6px;
  transition: border-color var(--dur) var(--ease);
}
.footer-newsletter form:focus-within { border-color: #578ECA; }
.footer-newsletter input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--footer-hi);
  font-family: var(--font);
  font-size: 13.5px;
  padding: 9px 10px;
}
.footer-newsletter input::placeholder { color: var(--footer-low); }
.footer-newsletter button {
  background: #578ECA;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-family: var(--font);
  font-weight: var(--w-semibold);
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-newsletter button:hover { background: #4679b3; transform: translateY(-1px); }
.footer-newsletter-note { font-size: 11.5px; color: var(--footer-low); margin-top: 10px; }

.footer-partner-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 26px; }
.footer-partner-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 10px 16px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.footer-partner-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}
.footer-partner-badge img {
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* ---- Bottom bar ---- */
.footer-bottom-new {
  border-top: 1px solid var(--footer-line);
  padding: 22px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--footer-low);
}
.footer-bottom-new .footer-bottom-links-new { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom-new .footer-bottom-links-new a { color: var(--footer-mid); transition: color var(--dur) var(--ease); }
.footer-bottom-new .footer-bottom-links-new a:hover { color: var(--footer-hi); }

/* Focus states — accessible, uses the yellow brand stop for visibility on dark bg */
.site-footer-new a:focus-visible,
.site-footer-new button:focus-visible,
.site-footer-new input:focus-visible {
  outline: 2px solid #F9BC15;
  outline-offset: 2px;
}

/* ==========================================================================
   Responsive — Footer
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-main-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-brand-col p { max-width: 480px; }
}
@media (max-width: 768px) {
  .footer-cta-band { padding: 40px 0 32px; }
  .footer-cta-band h2 { max-width: 420px; }
}
@media (max-width: 560px) {
  .footer-cta-band { flex-direction: column; align-items: flex-start; padding: 36px 0 30px; }
  .footer-cta-btn { width: 100%; justify-content: center; }
  .footer-main-grid { grid-template-columns: 1fr; row-gap: 34px; padding: 36px 0 30px; }
  .footer-bottom-new { flex-direction: column; align-items: flex-start; padding: 20px 0 26px; }
  .footer-bottom-new .footer-bottom-links-new { gap: 16px; }
  .footer-partner-badge { padding: 8px 12px; }
  .footer-partner-badge img { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-cta-btn, .footer-social-row a, .footer-newsletter button, .footer-link-list a, .footer-partner-badge {
    transition: none;
  }
}

/* ==========================================================================
   PARTNER PROGRAM PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, .container, .section-eyebrow /
   .section-title / .section-desc, .btn / .btn-primary / .btn-outline /
   .scale-btn, .faq-list / .faq-item, .dark-cta-*, .reveal-card,
   .logo-marquee-title / .logo-container-row / .logo-item) already exists in
   style.css and is reused as-is — do NOT duplicate those rules here.
   All new class names are prefixed "pp-" (Partner Program) to avoid collisions.
 
   Uses the same design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-muted), var(--c-border),
   var(--bg-light), var(--bg-dark), var(--bg-white), var(--font), var(--r-lg),
   var(--dur), var(--ease), etc.
   No new JS is required — header scroll state, mobile nav accordion, FAQ
   accordion and scroll-reveal in main.js all work off the existing class
   names (.site-header, .nav-item, .faq-item, .reveal-card) reused here.
   ========================================================================== */
 
/* ----------------------------------------------------------------------
   0. SHARED
   ---------------------------------------------------------------------- */
.pp-tint { background: var(--bg-white); }
 
/* ----------------------------------------------------------------------
   1. HERO — dark, split (copy + "what changes for you" metrics card)
   ---------------------------------------------------------------------- */
.pp-hero-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, #14264a 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #1a2f52 0%, transparent 50%),
    linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  padding: clamp(120px, 15vw, 150px) 0 clamp(64px, 7vw, 88px);
}
.pp-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: .5;
  pointer-events: none;
}
.pp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.pp-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #FF8B6B;
  margin-bottom: 18px;
}
.pp-hero-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.6px;
  margin-bottom: 16px;
}
.pp-hero-tag {
  font-size: 17px;
  font-weight: var(--w-semibold);
  color: #9fd6ff;
  margin-bottom: 16px;
}
.pp-hero-desc {
  font-size: var(--t-body-lg);
  color: #B9C0CB;
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 30px;
}
.pp-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pp-hero-note {
  font-family: var(--font);
  font-size: 12.5px;
  color: #8A93A0;
  letter-spacing: .02em;
}
.pp-hero-note span { color: #6BD989; margin: 0 6px; }
.pp-hero-note span:first-child { margin-left: 0; }
 
.pp-metric-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  padding: 26px;
}
.pp-metric-card .pp-mt {
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A93A0;
  margin-bottom: 16px;
}
.pp-mline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pp-mline:last-child { border-bottom: none; }
.pp-mline .pp-ml-l { font-size: 13.5px; color: #D3D8DF; }
.pp-mline .pp-ml-v { font-family: var(--font); font-weight: var(--w-bold); font-size: 14px; color: #6BD989; }
.pp-mline .pp-ml-v.zero { color: #FF9576; }
.pp-metric-card .pp-foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  color: #8A93A0;
  font-family: var(--font);
  text-align: center;
}
 
/* ----------------------------------------------------------------------
   2. SHIFT — licensing-only reseller vs value-added Titan partner
   ---------------------------------------------------------------------- */
.pp-shift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
.pp-shift-col {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.pp-shift-col.no { border-color: var(--c-border); }
.pp-shift-col.yes { border-color: #BFE6C8; background: #FBFFFC; }
.pp-shift-col h3 {
  font-size: 16px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-shift-col.no h3 span { color: var(--c-muted); }
.pp-shift-col.yes h3 span { color: var(--c-green); }
.pp-shift-col ul { list-style: none; }
.pp-shift-col li {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
  padding: 10px 0;
  border-top: 1px solid var(--c-border-soft);
}
.pp-shift-col li:first-child { border-top: none; }
 
/* ----------------------------------------------------------------------
   3. WHY NOW — 3 timing stat cards
   ---------------------------------------------------------------------- */
.pp-timing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.pp-timing-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pp-timing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,29,58,0.06); }
.pp-timing-num {
  font-family: var(--font);
  font-size: 26px;
  font-weight: var(--w-bold);
  color: var(--c-red);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.pp-timing-card h3 { font-size: 15.5px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 6px; }
.pp-timing-card p { font-size: 13.5px; color: var(--c-muted); line-height: 1.65; }
 
/* ----------------------------------------------------------------------
   4. WHY PARTNER — benefit cards (colored left dash, like cap-box family)
   ---------------------------------------------------------------------- */
.pp-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.pp-benefit-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 26px 24px 24px 28px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pp-benefit-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--c-blue);
}
.pp-benefit-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,29,58,0.06); }
.pp-benefit-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--c-blue-light);
  color: var(--c-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--w-bold); font-size: 17px;
  margin-bottom: 14px;
}
.pp-benefit-card h3 { font-size: 15.5px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 7px; }
.pp-benefit-card p { font-size: 13.5px; color: var(--c-muted); line-height: 1.65; }
 
/* ----------------------------------------------------------------------
   5. ECONOMICS — recurring margin stack
   ---------------------------------------------------------------------- */
.pp-econ {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #FBF4E2, #FFFDF8);
  border: 1px solid #EAD9A6;
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
}
.pp-econ-copy h3 { font-size: var(--t-h3); font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 12px; }
.pp-econ-copy p { font-size: 14.5px; color: var(--c-muted); line-height: 1.7; margin-bottom: 10px; }
.pp-econ-copy .pp-disc { font-family: var(--font); font-size: 12px; color: #B0831F; }
.pp-econ-stack { display: flex; flex-direction: column; gap: 10px; }
.pp-yr {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #EAD9A6; border-radius: var(--r-md);
  padding: 14px 18px;
}
.pp-yr .pp-yl { font-weight: var(--w-bold); font-size: 14px; color: var(--c-navy); }
.pp-yr .pp-ym { font-size: 11.5px; color: var(--c-muted); }
.pp-yr .pp-yv { font-family: var(--font); font-weight: var(--w-bold); font-size: 15px; color: #B0831F; }
.pp-yr.total { background: var(--c-navy); border-color: var(--c-navy); }
.pp-yr.total .pp-yl, .pp-yr.total .pp-yv { color: #fff; }
.pp-yr.total .pp-ym { color: #9AA2AE; }
.pp-yr.total .pp-yv { color: #6BD989; }
 
/* ----------------------------------------------------------------------
   6. CO-SELL WITH MICROSOFT — dark feature panel
   ---------------------------------------------------------------------- */
.pp-dark-panel {
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(30px, 4vw, 46px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: center;
}
.pp-dark-panel .pp-kicker-alt {
  font-size: var(--t-eyebrow); font-weight: var(--w-bold); text-transform: uppercase;
  letter-spacing: 1.6px; color: #FF8B6B; margin-bottom: 14px; display: inline-block;
}
.pp-dark-panel h3 { color: #fff; font-size: 24px; line-height: 1.25; margin-bottom: 14px; letter-spacing: -.02em; }
.pp-dark-panel p { color: #B9C0CB; font-size: 15px; line-height: 1.7; margin-bottom: 12px; }
.pp-screen {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-md);
  padding: 18px;
  font-family: var(--font);
}
.pp-screen .pp-sh {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #7E8794;
  padding-bottom: 13px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.pp-srow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.pp-srow:last-child { border-bottom: none; }
.pp-srow .pp-sl { font-size: 12px; color: #D3D8DF; }
.pp-srow .pp-sv { font-size: 11px; }
.pp-sv.g { color: #6BD989; } .pp-sv.a { color: #FF9576; } .pp-sv.b { color: #8FB6E6; }
.pp-fineprint { font-size: 12px; color: var(--c-muted); margin-top: 16px; font-family: var(--font); }
 
/* ----------------------------------------------------------------------
   7. TIERS — 3-column partner tiers, middle highlighted
   ---------------------------------------------------------------------- */
.pp-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.pp-tier {
  position: relative;
  border: 1px solid var(--c-border);
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px 26px;
}
.pp-tier.mid { border: 2px solid var(--c-red); box-shadow: 0 14px 44px -20px rgba(236,74,44,.35); }
.pp-tier .pp-badge {
  position: absolute; top: -12px; left: 26px;
  background: var(--c-red); color: #fff;
  font-family: var(--font); font-size: 10px; font-weight: var(--w-bold);
  letter-spacing: .05em; padding: 4px 12px; border-radius: 100px; text-transform: uppercase;
}
.pp-tier .pp-tn { font-family: var(--font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 6px; }
.pp-tier h3 { font-size: 20px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 4px; }
.pp-tier .pp-tsub { font-size: 13px; color: var(--c-muted); margin-bottom: 18px; }
.pp-tier ul { list-style: none; }
.pp-tier li { font-size: 13.5px; color: var(--c-muted); padding: 9px 0; border-top: 1px solid var(--c-border-soft); display: flex; gap: 9px; }
.pp-tier li:first-child { border-top: none; }
.pp-tier li::before { content: "→"; color: var(--c-red); font-weight: var(--w-bold); flex-shrink: 0; }
 
/* ----------------------------------------------------------------------
   8. IS IT A FIT — yes / no qualifier columns
   ---------------------------------------------------------------------- */
.pp-fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pp-fit-col {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.pp-fit-col.yes { border-color: #BFE6C8; }
.pp-fit-col h3 { font-size: 16px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.pp-fit-col.yes h3 span { color: var(--c-green); }
.pp-fit-col.no h3 span { color: var(--c-muted); }
.pp-fit-col ul { list-style: none; }
.pp-fit-col li { font-size: 14px; color: var(--c-muted); line-height: 1.6; padding: 10px 0; border-top: 1px solid var(--c-border-soft); }
.pp-fit-col li:first-child { border-top: none; }
 
/* ----------------------------------------------------------------------
   9. ENABLEMENT — what you get checklist
   ---------------------------------------------------------------------- */
.pp-enable-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 32px;
  text-align: left;
}
.pp-enable-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 0; border-bottom: 1px solid var(--c-border);
}
.pp-enable-item .pp-ei { color: var(--c-green); font-weight: var(--w-bold); font-size: 15px; margin-top: 1px; }
.pp-enable-item h4 { font-size: 14.5px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 3px; }
.pp-enable-item p { font-size: 13px; color: var(--c-muted); margin: 0; }
 
/* ----------------------------------------------------------------------
   10. JOURNEY — 4-step onboarding
   ---------------------------------------------------------------------- */
.pp-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: left;
}
.pp-step {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 24px 22px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pp-step:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,29,58,0.06); }
.pp-step-num {
  font-family: var(--font); font-weight: var(--w-bold); font-size: 12px; color: var(--c-red);
  background: #FDEEEA; width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pp-step h3 { font-size: 15.5px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 6px; }
.pp-step p { font-size: 13.5px; color: var(--c-muted); line-height: 1.6; }
 
/* ----------------------------------------------------------------------
   11. PROOF — dark logo/testimonial band
   ---------------------------------------------------------------------- */
.pp-proof {
  background: #1C2432;
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 48px);
  text-align: center;
}
.pp-proof .pp-kicker-alt { color: #FF8B6B; }
.pp-proof h3 { color: #fff; font-size: 24px; margin: 10px 0 12px; letter-spacing: -.02em; }
.pp-proof p { color: #B9C0CB; font-size: 15px; max-width: 620px; margin: 0 auto; line-height: 1.7; }
.pp-proof .pp-proof-logos { display: flex; gap: 14px 30px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.pp-proof .pp-proof-logos span { font-weight: var(--w-bold); font-size: 15px; color: #8A93A0; }
 
/* ----------------------------------------------------------------------
   12. APPLY — final CTA panel + partner interest form
   ---------------------------------------------------------------------- */
.pp-apply-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 22px;
  align-items: stretch;
}
.pp-apply-panel {
  background: linear-gradient(150deg, var(--c-red), var(--c-red-hover));
  border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 48px) clamp(28px, 4vw, 40px);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pp-apply-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 0);
  background-size: 24px 24px;
}
.pp-apply-panel > * { position: relative; }
.pp-apply-panel .pp-kicker-alt { color: #FFD8CC; }
.pp-apply-panel h2 { color: #fff; font-size: 28px; margin-bottom: 14px; letter-spacing: -.02em; }
.pp-apply-panel p { color: #FCE0D8; font-size: 15.5px; max-width: 440px; margin: 0 0 18px; line-height: 1.65; }
.pp-apply-panel .btn { background: #fff; color: var(--c-red); }
.pp-apply-panel .btn:hover { background: #F2EEEC; }
.pp-apply-strip { margin-top: 10px; font-family: var(--font); font-size: 12px; color: #FBD5CB; letter-spacing: .02em; }
 
.pp-form-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 38px) clamp(24px, 4vw, 38px) 30px;
}
.pp-form-card h3 { font-size: 19px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 5px; }
.pp-form-card .pp-form-sub { font-size: 13.5px; color: var(--c-muted); margin-bottom: 22px; }
.pp-fld { margin-bottom: 15px; }
.pp-fld label { display: block; font-weight: var(--w-semibold); font-size: 12.5px; margin-bottom: 6px; color: var(--c-navy); }
.pp-fld input, .pp-fld textarea {
  width: 100%; border: 1.5px solid var(--c-border); border-radius: var(--r-sm);
  padding: 11px 13px; font-family: var(--font); font-size: 14px; color: var(--c-text);
  background: #fff; transition: border-color var(--dur);
}
.pp-fld input:focus, .pp-fld textarea:focus { outline: none; border-color: var(--c-red); }
.pp-fld textarea { resize: vertical; min-height: 78px; }
.pp-fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--c-muted); margin: 4px 0 20px; line-height: 1.5; }
.pp-consent input { margin-top: 3px; flex-shrink: 0; }
.pp-consent a { color: var(--c-red); text-decoration: underline; }
.pp-form-card button.btn-primary { width: 100%; justify-content: center; border: none; font-size: 15px; }
.pp-form-fine { font-size: 11px; color: var(--c-subtle); margin-top: 14px; text-align: center; font-family: var(--font); }
 
/* ----------------------------------------------------------------------
   13. RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .pp-hero-grid,
  .pp-dark-panel,
  .pp-econ,
  .pp-apply-grid { grid-template-columns: 1fr; }
  .pp-shift-grid,
  .pp-timing-grid,
  .pp-benefit-grid,
  .pp-tiers-grid,
  .pp-fit-grid { grid-template-columns: 1fr 1fr; }
  .pp-steps-grid { grid-template-columns: 1fr 1fr; }
  .pp-enable-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pp-shift-grid,
  .pp-timing-grid,
  .pp-benefit-grid,
  .pp-tiers-grid,
  .pp-fit-grid,
  .pp-steps-grid,
  .pp-fld-row { grid-template-columns: 1fr; }
  .pp-apply-panel { text-align: left; }
  .pp-hero-note { line-height: 1.9; display: block; }
}
@media (max-width: 480px) {
  .pp-hero-title { font-size: 30px; }
  .pp-dark-panel, .pp-proof, .pp-apply-panel, .pp-form-card, .pp-econ { padding: 26px 20px; }
}
 
/* ----------------------------------------------------------------------
   14. LEAD DIFFERENTIATOR — full-bleed dark section, copy + them/you rows
   (added to match client reference sequence exactly)
   ---------------------------------------------------------------------- */
.pp-leaddiff-section {
  background: var(--c-navy);
  color: #fff;
}
.pp-leaddiff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
.pp-leaddiff-grid .pp-kicker-alt { color: #FF8B6B; }
.pp-leaddiff-grid h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.5px;
  margin: 12px 0 16px;
}
.pp-leaddiff-grid > div:first-child p {
  color: #B9C0CB;
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 13px;
}
.pp-vs { display: flex; flex-direction: column; gap: 12px; }
.pp-vs-row {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.pp-vs-row.them { opacity: .72; }
.pp-vs-row .pp-vh {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.pp-vs-row.them .pp-vh { color: #8A93A0; }
.pp-vs-row.you .pp-vh { color: #FF9576; }
.pp-vs-row .pp-vt { font-size: 14.5px; color: #E7EAEF; line-height: 1.6; }
 
@media (max-width: 1024px) {
  .pp-leaddiff-grid { grid-template-columns: 1fr; }
}


/*==========================================================================
  TITAN WORKSPACE PREMIUM FOOTER
==========================================================================*/

.tw-footer{

    --tw-bg:#08111f;
    --tw-bg2:#0d1728;
    --tw-white:#ffffff;
    --tw-text:#dbe3ef;
    --tw-muted:#aeb9ca;
    --tw-border:rgba(255,255,255,.10);
    --tw-green:#60B14A;
    --tw-blue:#578ECA;
    --tw-red:#EC4A2C;
    --tw-yellow:#F9BC15;

    position:relative;
    overflow:hidden;
    color:var(--tw-text);
    background:
    linear-gradient(rgba(8,17,31,.4),rgba(8,17,31,.5)),
    url("https://titanworkspace.com/wp-content/themes/titan-workspace/assets/images/footer-bg.webp")
    center/cover no-repeat;
}

/*-------------------------------------------------
TOP MULTI COLOR BORDER
-------------------------------------------------*/

.tw-footer::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    z-index:3;

    background:
    linear-gradient(
    90deg,

    #EC4A2C 0%,
    #EC4A2C 25%,

    #60B14A 25%,
    #60B14A 50%,

    #578ECA 50%,
    #578ECA 75%,

    #F9BC15 75%,
    #F9BC15 100%);
}

/*soft glow*/

.tw-footer::after{

    content:"";

    position:absolute;

    left:0;

    top:5px;

    width:100%;

    height:1px;

    background:rgba(255,255,255,.08);
}

.tw-footer .container{

    position:relative;

    z-index:2;
}

/*-------------------------------------------------
TOP SECTION
-------------------------------------------------*/

.tw-footer-top{

    padding:80px 0 55px;
}

/*-------------------------------------------------
GRID
-------------------------------------------------*/

.tw-footer-grid{

    display:grid;

    grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;

    gap:40px;
}

/*-------------------------------------------------
LOGO
-------------------------------------------------*/

.tw-footer-logo{

    display:inline-flex;

    align-items:center;

    margin-bottom:22px;

    max-width:320px;

    transition:transform .35s ease, filter .35s ease;
}

.tw-footer-logo:hover{

    transform:translateY(-2px);

    filter:drop-shadow(0 6px 18px rgba(87,142,202,.35));
}

.tw-footer-logo svg{

    width:100%;

    height:auto;

    display:block;
}

/*Titan Workspace text white*/

.tw-footer-logo .st5{

    fill:#4f5358 !important;
}

/*-------------------------------------------------
DESCRIPTION
-------------------------------------------------*/

.tw-footer-desc{

    font-size:15px;

    line-height:1.9;

    color:#d6dfeb;

    max-width:420px;

    margin-bottom:28px;
}

/*-------------------------------------------------
BADGES
-------------------------------------------------*/

.tw-footer-badges{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    align-items:center;
}

.tw-footer-badges img{

    height:60px;
    width:auto;
    object-fit:contain;
    transition:transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease;
    filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));
}

.tw-footer-badges img:hover{

    transform:translateY(-6px) scale(1.05);

    filter:brightness(1.08) drop-shadow(0 12px 20px rgba(0,0,0,.35));
}

.tw-footer-badges img[src*="software-reviews"]{
    height:85px;
}

/*-------------------------------------------------
COLUMN TITLE
-------------------------------------------------*/

.tw-footer-col-title{

    position:relative;

    font-size:18px;

    font-weight:700;

    color:#fff;

    margin-bottom:22px;

    padding-bottom:12px;

    letter-spacing:.3px;
}

.tw-footer-col-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:48px;

    height:3px;

    background:#f6f8fb;

    border-radius:30px;

    transition:width .35s ease;
}

.tw-footer-col:hover .tw-footer-col-title::after{

    width:70px;
}

/*-------------------------------------------------
MENU
-------------------------------------------------*/

/* Footer Menu */

.tw-footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.tw-footer-links li{
    position:relative;
    padding-left:20px;
    margin-bottom:14px;
}

.tw-footer-links li::before{
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #f6f8fb;
    font-size: 12px;
    transition: transform .3s ease, color .3s ease, left .3s ease;
}

.tw-footer-links li:hover::before{
    color:#60B14A;
    left:5px;
    transform:translateY(-50%) scale(1.15);
}

.tw-footer-links a{
    display:inline-block;
    color:#d6dfeb;
    text-decoration:none;
    background-image:linear-gradient(#fff,#fff);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 1px;
    transition:color .3s ease, transform .3s ease, background-size .35s ease, padding-left .3s ease;
}

.tw-footer-links a:hover{
    color:#fff;
    padding-left:5px;
    transform:translateX(6px);
    background-size:100% 1px;
}

/*-------------------------------------------------
HIGHLIGHT COLUMN
-------------------------------------------------*/

.tw-footer-col--highlight{

    padding:24px;

    border-radius:18px;

    background:

    linear-gradient(
    145deg,
    rgba(96,177,74,.18),
    rgba(96,177,74,.05));

    border:1px solid rgba(96,177,74,.25);

    backdrop-filter:blur(12px);
}
/*=====================================================
OUR OFFICES
=====================================================*/

.tw-footer-offices{

    padding:55px 0;

    margin-top:20px;

    border-top:1px solid rgba(255,255,255,.08);
}

.tw-offices-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;
}

.tw-offices-head h3{

    color:#fff;

    font-size:26px;

    font-weight:700;
}

.tw-offices-track{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;
}

/*Office Card*/

.tw-office-card{

    position:relative;

    background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

    border-radius:18px;

    padding:26px 24px 24px;

    display:flex;

    gap:18px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.22);

    transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

/* top accent strip, colour set per card below */
.tw-office-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:var(--tw-office-accent,#578ECA);
}

.tw-office-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(160px 160px at 0% 0%, var(--tw-office-accent-soft,rgba(87,142,202,.22)), transparent 70%);

    opacity:.65;

    transition:opacity .35s ease;

    pointer-events:none;
}

.tw-office-card:hover{

    transform:translateY(-8px);

    border-color:var(--tw-office-accent,#578ECA);

    background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));

    box-shadow:0 22px 48px rgba(0,0,0,.4);
}

.tw-office-card:hover::before{

    opacity:1;
}

/* Per-office accent colours: USA red, India green, Malaysia blue */
.tw-office-card:nth-child(1){ --tw-office-accent:#EC4A2C; --tw-office-accent-soft:rgba(236,74,44,.28); }
.tw-office-card:nth-child(2){ --tw-office-accent:#60B14A; --tw-office-accent-soft:rgba(96,177,74,.28); }
.tw-office-card:nth-child(3){ --tw-office-accent:#578ECA; --tw-office-accent-soft:rgba(87,142,202,.28); }

.tw-office-pin{

    position:relative;

    width:54px;

    height:54px;

    border-radius:16px;

    background:linear-gradient(150deg,var(--tw-office-accent,#578ECA),rgba(255,255,255,.08));

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    box-shadow:0 10px 22px var(--tw-office-accent-soft,rgba(87,142,202,.4));

    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}

.tw-office-card:hover .tw-office-pin{

    transform:scale(1.08) rotate(-6deg);

    box-shadow:0 14px 28px var(--tw-office-accent-soft,rgba(87,142,202,.55));
}

/*.fa-brands:before, .fa-regular:before, .fa-solid:before, .fa:before, .fab:before, .far:before, .fas:before{
  color: #fff!important;
}*/
.tw-office-pin svg{

    width:24px;

    height:24px;

    color:#fff;

    filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.tw-office-body{

    position:relative;
}

.tw-office-body h4{

    color:#fff;

    font-size:18px;

    font-weight:700;

    margin-bottom:6px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;
}

.tw-office-body h4 span{

    display:inline-block;

    color:var(--tw-office-accent,#7fd47f);

    background:var(--tw-office-accent-soft,rgba(127,212,127,.15));

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

    margin-top:0;

    padding:4px 10px;

    border-radius:20px;
}

.tw-office-body p{

    color:#d6dfeb;

    font-size:14px;

    line-height:1.7;

    margin-top:12px;
}

.tw-office-phone{

    margin-top:8px !important;

    padding-top:10px;

    border-top:1px dashed rgba(255,255,255,.14);
}

.tw-office-phone strong{

    color:#fff;
}

/*=====================================================
CONTACT SECTION
=====================================================*/

.tw-footer-contact{

    margin-top:40px;

    padding:26px 0;

    background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.015));

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

    border-bottom:1px solid rgba(255,255,255,.10);
}

.tw-contact-grid{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}

.tw-contact-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    color:#dbe4ef;

    font-size:15px;

    padding:10px 20px 10px 0;
}

/* vertical divider between chips, skip on the last item */
.tw-contact-item + .tw-contact-item::before{

    content:"";

    position:absolute;

    left:-9px;

    top:50%;

    transform:translateY(-50%);

    width:1px;

    height:32px;

    background:rgba(255,255,255,.14);
}

.tw-contact-label{

    color:#8fa0b8;

    font-weight:700;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.6px;
}

/*Email*/

.tw-contact-email{

    display:flex;

    align-items:center;

    gap:12px;

    color:#dbe4ef;

    text-decoration:none;

    transition:color .35s ease;
}

.tw-contact-email svg{

    width:44px;

    height:44px;

    padding:11px;

    border-radius:50%;

    background:linear-gradient(150deg,#578ECA,#3f6ba6);

    color:#fff;

    box-shadow:0 8px 20px rgba(87,142,202,.45);

    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
}

.tw-contact-email:hover{

    color:#fff;
}

.tw-contact-email:hover svg{

    transform:scale(1.1) rotate(-6deg);

    background:linear-gradient(150deg,#60B14A,#48893a);

    box-shadow:0 12px 26px rgba(96,177,74,.5);
}

/*Phone icon badge*/

.tw-contact-item > i{

    width:44px;

    height:44px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(150deg,#EC4A2C,#b83a22);

    box-shadow:0 8px 20px rgba(236,74,44,.4);

    font-size:15px;

    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
}

.tw-contact-item:nth-of-type(3) > i{ background:linear-gradient(150deg,#60B14A,#48893a); box-shadow:0 8px 20px rgba(96,177,74,.4); }
.tw-contact-item:nth-of-type(4) > i{ background:linear-gradient(150deg,#F9BC15,#c9930c); box-shadow:0 8px 20px rgba(249,188,21,.4); }

.tw-contact-item:hover > i{

    transform:scale(1.1) rotate(-8deg);
}

/* Contact Links */

.tw-contact-item a,
.tw-contact-item a:visited{
    color:#ffffff !important;
    text-decoration:none;
    font-weight:700;
    font-size:15.5px;
    letter-spacing:.2px;
    transition:color .3s ease, transform .3s ease;
    display:inline-block;
}

.tw-contact-item a:hover{
    color:#60B14A !important;
    transform:translateX(3px);
}

.tw-contact-item a:active,
.tw-contact-item a:focus{
    color:#60B14A !important;
    outline:none;
}

/*=====================================================
BOTTOM BAR
=====================================================*/

.tw-footer-bottom{

    padding:25px 0;
}

.tw-bottom-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;
}

.tw-copyright{

    color:#bfc9d8;

    font-size:14px;
}

.tw-copyright strong{

    color:#fff;
}

.tw-legal-links{

    display:flex;

    gap:22px;

    flex-wrap:wrap;
}

.tw-legal-links a{

    position:relative;

    color:#c9d3df;

    text-decoration:none;

    transition:color .35s ease;
}

.tw-legal-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:1px;

    background:#fff;

    transition:width .3s ease;
}

.tw-legal-links a:hover{

    color:#fff;
}

.tw-legal-links a:hover::after{

    width:100%;
}

/*=====================================================
SOCIAL ICONS
=====================================================*/

.tw-socials{

    display:flex;

    gap:12px;
}

.tw-socials a{

    width:44px;

    height:44px;

    border-radius:50%;

    background:linear-gradient(150deg,var(--tw-social-a,#578ECA),var(--tw-social-b,#3f6ba6));

    border:1px solid rgba(255,255,255,.14);

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 8px 20px var(--tw-social-shadow,rgba(87,142,202,.35));

    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, filter .35s ease;
}

.tw-socials svg,
.tw-socials i{

    width:17px;

    height:17px;

    color:#fff;

    transition:transform .35s ease;
}

.tw-socials a:hover{

    transform:translateY(-6px) rotate(-6deg) scale(1.06);

    filter:brightness(1.12);

    box-shadow:0 16px 32px var(--tw-social-shadow,rgba(87,142,202,.5));
}

/* Branded gradients per platform, always visible */
.tw-socials a:nth-child(1){ --tw-social-a:#4267B2; --tw-social-b:#2d4a85; --tw-social-shadow:rgba(66,103,178,.45); }
.tw-socials a:nth-child(2){ --tw-social-a:#578ECA; --tw-social-b:#355a86; --tw-social-shadow:rgba(87,142,202,.45); }
.tw-socials a:nth-child(3){ --tw-social-a:#E1306C; --tw-social-b:#c1366b; --tw-social-shadow:rgba(225,48,108,.45); }
.tw-socials a:nth-child(4){ --tw-social-a:#5F6369; --tw-social-b:#33363b; --tw-social-shadow:rgba(95,99,105,.45); }
.tw-socials a:nth-child(5){ --tw-social-a:#EC4A2C; --tw-social-b:#b83a22; --tw-social-shadow:rgba(236,74,44,.45); }

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

@media(max-width:1100px){

.tw-footer-grid{

grid-template-columns:1fr 1fr 1fr;

}

.tw-footer-brand{

grid-column:1/-1;

}

.tw-offices-track{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.tw-footer-top{

padding:55px 0 30px;

}

/* Two-column link grid, everything left aligned */

.tw-footer-grid{

grid-template-columns:1fr 1fr;

column-gap:24px;

row-gap:36px;

text-align:left;

}

.tw-footer-brand{

grid-column:1/-1;

text-align:left;

}

.tw-footer-col{

text-align:left;

}

.tw-footer-logo{

justify-content:flex-start;

margin:0 0 20px;

}

.tw-footer-desc{

margin:0 0 26px;

max-width:100%;

}

.tw-footer-badges{

justify-content:flex-start;

}

.tw-footer-col-title{

text-align:left;

font-size:16px;

margin-bottom:16px;

}

.tw-footer-col-title::after{

left:0;

transform:none;

}

.tw-footer-links li{

padding-left:0;

margin-bottom:12px;

font-size:14px;

}

.tw-footer-links li::before{

display:none;

}

.tw-offices-head{

flex-direction:column;

align-items:flex-start;

gap:12px;

text-align:left;

}

.tw-office-card{

text-align:left;

}

.tw-contact-grid{

justify-content:flex-start;

text-align:left;

}

.tw-contact-item{

justify-content:flex-start;

flex-direction:row;

width:100%;

padding:12px 0;

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

}

.tw-contact-item:last-child{

border-bottom:none;

}

.tw-contact-item + .tw-contact-item::before{

display:none;

}

.tw-bottom-row{

flex-direction:column;

align-items:flex-start;

text-align:left;

}

.tw-socials{

justify-content:flex-start;

}

.tw-legal-links{

justify-content:flex-start;

}

}

@media(max-width:480px){

.tw-footer{

font-size:14px;

}

.tw-footer-grid{

column-gap:18px;

row-gap:30px;

}

.tw-footer-col-title{

font-size:15px;

}

.tw-office-card{

padding:18px;

}

.tw-office-pin{

width:46px;

height:46px;

}

.tw-socials a{

width:42px;

height:42px;

}

.tw-contact-email svg{

width:38px;

height:38px;

padding:8px;

}

.tw-offices-head h3{

font-size:22px;

}

}


/* ==========================================================================
   GCC GOVERNMENT PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, .container, .section-eyebrow /
   .section-title / .section-desc, .btn / .scale-btn / .btn-outline,
   .reveal-card, .pa-hero-* / .pa-board / .pa-brow / .pa-chip / .pa-btn-ghost,
   .pp-dark-panel / .pp-screen / .pp-srow / .pp-fineprint, .twc-footer-box,
   .all-caps-grid / .cap-item-card / .cap-icon-chip, .pa-cap-grid / .pa-cap-card,
   .combined-banner / .cb-*, .faq-section / .faq-item / .faq-*,
   .dark-cta-section / .dark-cta-*, .tags-row / .tag-lbl) already exists in
   style.css and is reused as-is — do NOT duplicate those rules here.
   Paste this whole file into style.css (e.g. at the end), or link it after
   style.css. It only adds new class names, all prefixed "gcc-" to avoid
   collisions with any other page's styles.

   Uses the same design tokens already defined in :root in style.css —
   var(--c-navy), var(--c-blue), var(--c-red), var(--c-green), var(--c-muted),
   var(--c-border), var(--c-border-soft), var(--bg-light), var(--bg-white),
   var(--font), var(--r-md), var(--r-lg), var(--dur), var(--ease), etc.
   No new JS is required for this page — header scroll state, mobile nav
   accordion, FAQ accordion and scroll-reveal in main.js all work off the
   existing class names (.site-header, .nav-item, .faq-item, .reveal-card)
   reused in the page markup.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. HERO — small stat row that sits inside the reused .pa-hero-section
   ---------------------------------------------------------------------- */
.gcc-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 34px);
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.gcc-stat { min-width: 64px; }
.gcc-stat .n {
  display: block;
  font-family: var(--font);
  font-weight: var(--w-black);
  font-size: 22px;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.gcc-stat .l {
  display: block;
  font-size: 11px;
  font-weight: var(--w-semibold);
  color: #8A93A0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ----------------------------------------------------------------------
   2. USE-CASE CARDS — arrow list reused inside .pa-cap-card
   ---------------------------------------------------------------------- */
.gcc-tag {
  display: inline-block;
  font-family: var(--font);
  font-size: 11px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-blue);
  margin-bottom: 10px;
}
.gcc-arrow-list {
  list-style: none;
  margin-top: 4px;
}
.gcc-arrow-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.55;
  padding: 7px 0;
  border-top: 1px solid var(--c-border-soft);
}
.gcc-arrow-list li:first-child { border-top: none; padding-top: 0; }
.gcc-arrow-list li::before {
  content: "→";
  color: var(--c-red);
  font-weight: var(--w-bold);
  flex-shrink: 0;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------
   3. WHO USES IT — two-column variant of the reused .all-caps-grid /
   .cap-item-card pattern
   ---------------------------------------------------------------------- */
.gcc-aud-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* ----------------------------------------------------------------------
   4. RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .gcc-stat-row { gap: 22px; }
  .gcc-stat .n { font-size: 19px; }
}

@media (max-width: 560px) {
  .gcc-aud-grid { grid-template-columns: 1fr; }
  .gcc-stat-row { justify-content: space-between; row-gap: 16px; }
  .gcc-stat { min-width: 40%; }
}

/* ==========================================================================
   POLICY & AUDIT MANAGEMENT PAGE — SUPPLEMENTARY STYLES
   Paste this block into style.css (e.g. at the end). Everything else the
   page uses (.pa-hero-*, .pa-board, .pa-brow, .pa-chip, .pa-kicker,
   .pa-section-head, .pa-pain-section, .pa-scenes/.pa-scene, .pa-cap-grid/
   .pa-cap-card, .pa-moat-section, .pa-table-wrap/.pa-table, .pa-metrics/
   .pa-metric, .sp-compare-*, .ai-section/.ai-grid/.ai-card,
   .all-caps-section/.all-caps-grid/.cap-item-card/.cap-icon-chip,
   .dark-cta-section, .section-bg-white) already exists in style.css and is
   reused as-is. This block only adds: the missing light-bg utility (mirrors
   the existing .section-bg-white utility so backgrounds can alternate
   white/light exactly like the index page), a 4-column feature grid with a
   colored top accent, the framed process-diagram image, the two-pillar
   "Governance/Assurance" cards, and the redesigned CAPA closed-loop track.
   Uses only the design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-muted),
   var(--c-border), var(--bg-light), var(--font), var(--r-md), var(--r-lg),
   var(--dur), var(--ease) — so it matches the rest of the site exactly.
   ========================================================================== */

/* ---- Light-bg utility (companion to the existing .section-bg-white) ----
   Lets a plain <section> opt into var(--bg-light) explicitly, the same way
   .section-bg-white already lets a section opt into white — needed to keep
   strict white/light alternation on this page, matching the index page. */
.section-bg-light {
  background: var(--bg-light);
}

/* ---- 4-column feature grid with a colored top accent per card
   (policy/audit lifecycle cards, CAPA feature cards, dashboard stats) ---- */
.pa-cap-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pa-cap-grid-4 .cap-item-card,
.pa-cap-grid-4 .pa-metric {
  position: relative;
  overflow: hidden;
}
.pa-cap-grid-4 .cap-item-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
}
.pa-cap-grid-4 .cap-item-card:nth-child(4n+1)::before { background: var(--c-red); }
.pa-cap-grid-4 .cap-item-card:nth-child(4n+2)::before { background: var(--c-blue); }
.pa-cap-grid-4 .cap-item-card:nth-child(4n+3)::before { background: #F59E0B; }
.pa-cap-grid-4 .cap-item-card:nth-child(4n+4)::before { background: var(--c-green); }
@media (max-width: 900px) { .pa-cap-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pa-cap-grid-4 { grid-template-columns: 1fr; } }

/* ---- Framed process-diagram image (policy / audit lifecycle) ---- */
.pa-process-frame {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 8px;
  background: var(--bg-light);
  box-shadow: 0 24px 50px -32px rgba(11, 29, 58, 0.28);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pa-process-frame img {
  border-radius: 12px;
  background: #fff;
  width: 100%;
  display: block;
}
@media (max-width: 760px) {
  .pa-process-frame img { min-width: 760px; width: 760px; }
}
.pa-process-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 0 4px;
}
.pa-process-foot p {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
}
.pa-process-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: var(--w-bold);
  color: var(--c-red);
  text-decoration: none;
  flex: none;
  transition: gap var(--dur) var(--ease);
}
.pa-process-foot a:hover { gap: 10px; }

/* ---- Scope section: Governance / Assurance pillar cards ---- */
.pa-pillars {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: 0 20px 45px -28px rgba(11, 29, 58, 0.28);
}
.pa-pillar-row { display: flex; align-items: stretch; gap: 14px; }
.pa-pillar {
  flex: 1;
  background: var(--c-navy);
  border-radius: 14px;
  padding: 22px 18px;
  color: #fff;
}
.pa-pillar.alt { background: var(--c-blue); }
.pa-pillar .tag {
  font-size: 10.5px;
  font-weight: var(--w-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.pa-pillar h4 { font-family: var(--font); font-size: 16.5px; font-weight: var(--w-bold); margin: 8px 0 6px; }
.pa-pillar p { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.8); margin: 0; }
.pa-merge-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--c-blue-light);
  border-radius: 10px;
  font-size: 13px;
  font-weight: var(--w-bold);
  color: var(--c-blue);
  text-align: center;
}
@media (max-width: 620px) { .pa-pillar-row { flex-direction: column; } }

/* ---- Number badge reused inside .pa-cap-card ".ci" for the progression
   stage cards (same 42x42 blue icon-box already defined for .pa-cap-card
   .ci — this just centers a number instead of an icon glyph) ---- */
.pa-cap-card .ci { display: flex; align-items: center; justify-content: center; font-family: var(--font); }

/* ==========================================================================
   CLOSED-LOOP CAPA TRACK — redesigned
   A bordered panel containing a connected, numbered step track: a gradient
   line running behind 5 circular nodes, horizontal on desktop, collapsing
   to a left-aligned vertical rail on mobile. The final node is filled
   solid to read as "closed".
   ========================================================================== */
.pa-loop-panel {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 20px 50px -30px rgba(11, 29, 58, 0.18);
  margin-bottom: 32px;
}
.pa-loop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.pa-loop-eyebrow {
  font-size: 11px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-red);
}
.pa-loop-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: var(--w-medium);
  color: var(--c-muted);
}
.pa-loop-note i { color: var(--c-green); }

.pa-loop-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.pa-loop-track::before {
  content: '';
  position: absolute;
  top: 23px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-red), var(--c-blue) 50%, var(--c-green));
  z-index: 0;
}
.pa-loop-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  text-align: center;
}
.pa-loop-num {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: var(--w-black);
  font-size: 16px;
  color: var(--c-navy);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pa-loop-step:hover .pa-loop-num {
  border-color: var(--c-blue);
  transform: translateY(-3px);
}
.pa-loop-step.is-final .pa-loop-num {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
}
.pa-loop-step span {
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  max-width: 120px;
  line-height: 1.4;
  display: block;
}
.pa-loop-step small {
  display: block;
  font-size: 11px;
  font-weight: var(--w-regular);
  color: var(--c-muted);
  margin-top: 3px;
}

@media (max-width: 760px) {
  .pa-loop-track {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }
  .pa-loop-track::before {
    top: 0;
    bottom: 0;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--c-red), var(--c-blue) 50%, var(--c-green));
  }
  .pa-loop-step {
    flex-direction: row;
    text-align: left;
    gap: 16px;
    width: 100%;
  }
  .pa-loop-step span { max-width: none; }
}
@media (max-width: 400px) {
  .pa-loop-panel { padding: 22px 18px; }
  .pa-loop-num { width: 40px; height: 40px; min-width: 40px; font-size: 14px; }
}

/* ==========================================================================
   WORKFLOW AUTOMATION PAGE — SUPPLEMENTARY STYLES
   Paste this block into style.css (e.g. at the end). Everything else the
   page uses (.pa-hero-*, .pa-board/.pa-brow/.pa-chip/.pa-meter, .pa-kicker,
   .pa-section-head, .pa-pain-section/.pa-scenes/.pa-scene, .sp-compare-*,
   .pa-table-wrap/.pa-table, .all-caps-section/.all-caps-grid/.cap-item-card/
   .cap-icon-chip, .industries-section/.industry-grid/.industry-card,
   .cta-band/.cta-copy/.cta-btns/.btn-white, .pp-leaddiff-grid, .pa-metrics/
   .pa-metric, .pa-quote/.pa-quote-note, .faq-section/.faq-list/.faq-item/
   .faq-trigger/.faq-answer, .dark-cta-section) already exists in style.css
   and is reused as-is. This block only adds: the light/white background
   utilities (so this page can alternate white/light exactly like the index
   and Policy & Audit pages), the 2x2 "fact" cards used in the Power Apps
   licensing section, the left/right pricing comparison rows, and a couple
   of small responsive tweaks specific to this page's content shapes.
   Uses only the design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-muted),
   var(--c-border), var(--bg-light), var(--font), var(--r-md), var(--r-lg),
   var(--dur), var(--ease) — so it matches the rest of the site exactly.
   ========================================================================== */

/* ---- Light/white background utilities (skip if already pasted from the
   Policy & Audit page addendum — safe to include twice, same rule) ---- */
/*.section-bg-light { background: var(--bg-light); }
.section-bg-white { background: var(--bg-white); }*/

/* ---- Hero quick-links row: lets .pa-fw-row also hold <a> anchors,
   styled identically to the trust-badge <span> pills already in it ---- */
.pa-fw-row a {
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  padding: 6px 13px;
  letter-spacing: 0.02em;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pa-fw-row a:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Pain scenes: allow a 3-column variant on this page while keeping
   the existing .pa-scenes/.pa-scene card look untouched ---- */
@media (max-width: 768px) {
  .pa-scenes[style*="repeat(3"] { grid-template-columns: 1fr !important; }
}

/* ---- 2x2 "fact" cards (Power Apps 2026 licensing changes) ---- */
.pa-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pa-fact {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px 17px;
}
.pa-fact h4 {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 6px;
}
.pa-fact p {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
}
.pa-fact strong { color: var(--c-navy); font-weight: var(--w-bold); }
@media (max-width: 560px) {
  .pa-fact-grid { grid-template-columns: 1fr; }
}

/* ---- Pricing comparison rows (per-user "them" vs per-workflow "you") ---- */
.pa-price-rows { display: flex; flex-direction: column; gap: 10px; }
.pa-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--c-navy);
}
.pa-price-row.them { opacity: 0.68; }
.pa-price-row.you { background: var(--c-blue); opacity: 1; }
.pa-price-label { font-size: 13.5px; color: #E7EAEF; line-height: 1.4; }
.pa-price-val {
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: 13.5px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.pa-price-row.you .pa-price-val { color: #6BD989; }
@media (max-width: 560px) {
  .pa-price-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---- Departments / pricing section 2-col shells collapse on tablet+
   (reuses the existing .pp-leaddiff-grid breakpoint, repeated here in
   case that page's addendum isn't present) ---- */
@media (max-width: 1024px) {
  .pp-leaddiff-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BLOG PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, .container, .btn / .scale-btn /
   .btn-outline, .section-bg-white / .section-bg-light, .dark-cta-section /
   .dark-cta-*, .reveal-card, main.js's scroll-reveal wiring) already exists
   in style.css and main.js and is reused as-is — do NOT duplicate those
   rules here. Paste this whole block into style.css (e.g. at the end). All
   new class names are prefixed "bl-" (Blog) to avoid collisions.

   Uses the same design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-teal), var(--c-muted),
   var(--c-border), var(--c-border-soft), var(--bg-light), var(--bg-white),
   var(--font), var(--r-sm/md/lg/xl), var(--dur), var(--ease),
   var(--t-h1/h2/h3/body-lg/body/small/xs), var(--w-*) — so it matches the
   rest of the site (and its font family) exactly.

   Filter bar: 4 native <select> dropdowns (Industry / Department / Module /
   Technology) styled to match the site's chrome, combined with AND logic
   in blog.js. Card thumbnails use a CSS "poster" component (gradient +
   logo badge + bold headline) instead of photographs, matching the client's
   existing branded graphic-thumbnail style shown in their reference blog.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. HERO
   ---------------------------------------------------------------------- */
.bl-hero-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
  padding: clamp(120px, 16vw, 156px) 0 clamp(56px, 7vw, 84px);
  text-align: center;
}
.bl-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.bl-hero-glow-1 {
  width: 480px; height: 480px;
  top: -180px; right: -140px;
  background: radial-gradient(circle, rgba(0,103,184,0.12) 0%, transparent 70%);
}
.bl-hero-glow-2 {
  width: 420px; height: 420px;
  bottom: -180px; left: -140px;
  background: radial-gradient(circle, rgba(96,177,74,0.10) 0%, transparent 70%);
}
.bl-hero-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }

.bl-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  color: var(--c-blue);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 22px;
}
.bl-hero-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
  flex-shrink: 0;
}

.bl-hero-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: 0 0 18px;
}
.bl-hero-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto 32px;
}

.bl-search-form {
  position: relative;
  max-width: 520px;
  margin: 0 auto 32px;
}
.bl-search-form i {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-subtle);
  font-size: 15px;
  pointer-events: none;
}
.bl-search-form input {
  width: 100%;
  height: 54px;
  border-radius: 100px;
  border: 1.5px solid var(--c-border);
  background: #fff;
  padding: 0 22px 0 50px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--c-text);
  box-shadow: 0 8px 24px rgba(11,29,58,0.05);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bl-search-form input::placeholder { color: var(--c-subtle); }
.bl-search-form input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 8px 26px rgba(0,103,184,0.14);
}

.bl-hero-stats {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 5vw, 48px);
  flex-wrap: wrap;
}
.bl-hero-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bl-hero-stat strong {
  font-family: var(--font);
  font-weight: var(--w-black);
  font-size: 22px;
  color: var(--c-navy);
  letter-spacing: -0.3px;
}
.bl-hero-stat span {
  font-size: 12.5px;
  color: var(--c-muted);
  font-weight: var(--w-medium);
}

@media (max-width: 1024px) { .bl-hero-section { padding: 108px 0 52px; } }
@media (max-width: 768px)  { .bl-hero-section { padding: 96px 0 44px; } }
@media (max-width: 480px) {
  .bl-hero-section { padding: 88px 0 40px; }
  .bl-hero-title { font-size: clamp(26px, 7.5vw, 32px); }
  .bl-hero-stats { gap: 20px; }
}

/* ----------------------------------------------------------------------
   2. DROPDOWN FILTER BAR — Industry / Department / Module / Technology
   ---------------------------------------------------------------------- */
.bl-filter-section { padding: 0 0 var(--section-pad-sm); }

.bl-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 18px;
  align-items: end;
}

.bl-filter-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bl-filter-field label {
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
}

.bl-select-wrap { position: relative; }
.bl-select-wrap::after {
  content: '';
  position: absolute;
  right: 16px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-muted);
  border-bottom: 2px solid var(--c-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color var(--dur) var(--ease);
}
.bl-select-wrap:focus-within::after { border-color: var(--c-blue); }

.bl-select-wrap select {
  width: 100%;
  height: 50px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 0 38px 0 16px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: var(--w-medium);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bl-select-wrap select:hover { border-color: var(--c-subtle); }
.bl-select-wrap select:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(0,103,184,0.12);
}
/* Highlight a field once the user has narrowed it away from "All" */
.bl-select-wrap.is-set select {
  border-color: var(--c-blue);
  background: var(--c-blue-light);
  color: var(--c-blue);
  font-weight: var(--w-semibold);
}
.bl-select-wrap.is-set::after { border-color: var(--c-blue); }

.bl-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border);
  background: #fff;
  color: var(--c-muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--w-semibold);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bl-filter-clear:hover { border-color: var(--c-red); color: var(--c-red); background: #FDEEEA; }

@media (max-width: 1024px) {
  .bl-filter-bar { grid-template-columns: repeat(2, 1fr); }
  .bl-filter-clear { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .bl-filter-bar { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   3. RESULT COUNT
   ---------------------------------------------------------------------- */
.bl-grid-head { margin-bottom: 24px; }
.bl-result-count {
  font-size: 13.5px;
  color: var(--c-muted);
  font-weight: var(--w-medium);
}
.bl-result-count strong { color: var(--c-navy); font-weight: var(--w-bold); }

/* ----------------------------------------------------------------------
   4. CATEGORY TAGS (below the poster, on the card body)
   ---------------------------------------------------------------------- */
.bl-cat-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.bl-cat-blue   { background: var(--c-blue-light); color: var(--c-blue); }
.bl-cat-green  { background: var(--c-green-light); color: #15803D; }
.bl-cat-orange { background: #FFFBEB; color: #B45309; }
.bl-cat-red    { background: #FDEEEA; color: var(--c-red); }
.bl-cat-teal   { background: #F0FDFA; color: #0D9488; }
.bl-cat-navy   { background: var(--c-blue-mid); color: var(--c-navy); }

/* ----------------------------------------------------------------------
   5. POSTER THUMBNAILS
   Dark gradient "poster" tiles carrying a Titan Workspace logo badge and a
   bold headline overlay — matches the client's existing branded-graphic
   thumbnail style, built with CSS/SVG-icons only (no external images).
   ---------------------------------------------------------------------- */
.bl-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.bl-poster::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size: 18px 18px;
  pointer-events: none;
}

/* Gradient variants */
.bl-poster-violet { background: linear-gradient(135deg, #4338CA 0%, #3730A3 55%, #1E1B4B 100%); }
.bl-poster-blue   { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 55%, #0B1D3A 100%); }
.bl-poster-navy   { background: linear-gradient(150deg, #14264a 0%, #0B1D3A 60%, #060f21 100%); }
.bl-poster-teal   { background: linear-gradient(135deg, #0EA5E9 0%, #0D8E68 60%, #08152b 100%); }
.bl-poster-green  { background: linear-gradient(135deg, #15803D 0%, #107C10 55%, #0B1D3A 100%); }
.bl-poster-red    { background: linear-gradient(135deg, #EC4A2C 0%, #B83A22 55%, #1E1B4B 100%); }
.bl-poster-orange { background: linear-gradient(135deg, #F59E0B 0%, #C2740A 55%, #1E1B4B 100%); }

/* Logo badge, top-left — mirrors the reference thumbnail's "T Titan Workspace" chip */
.bl-poster-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  background: rgba(255,255,255,0.94);
  color: var(--c-navy);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  padding: 5px 11px 5px 5px;
  border-radius: 20px;
  margin-bottom: auto;
}
.bl-poster-badge b { color: var(--c-red); font-weight: var(--w-bold); }
.bl-poster-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--c-navy);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: var(--w-black);
}

/* Headline content block */
.bl-poster-content { position: relative; z-index: 1; margin-top: 14px; }
.bl-poster-content h4 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin: 0 0 4px;
}
.bl-poster-content p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.bl-poster-content-top h4 { font-size: 14.5px; }
.bl-poster-content-big { margin-top: auto; margin-bottom: 6px; max-width: 72%; }
.bl-poster-content-big h4 { font-size: 18px; }
.bl-poster-accent { color: #F9BC15; }

/* Large decorative icon "orb" — bottom-right, mirrors the illustration on
   the right side of the reference thumbnails */
.bl-poster-orb {
  position: absolute;
  right: -14px; bottom: -14px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  z-index: 0;
}
.bl-poster-orb i { font-size: 30px; color: rgba(255,255,255,0.85); }

/* "VS" comparison layout (card 1) */
.bl-poster-vs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
}
.bl-poster-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: var(--w-semibold);
}
.bl-poster-vs-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-navy);
  font-size: 10.5px;
  font-weight: var(--w-black);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Numbered step strip (card 2) */
.bl-poster-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: auto;
}
.bl-poster-steps span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: var(--w-bold);
}
.bl-poster-steps span i { font-size: 12px; }

/* ----------------------------------------------------------------------
   6. META ROW (author + date)
   ---------------------------------------------------------------------- */
.bl-meta-row { display: flex; align-items: center; gap: 10px; }
.bl-avatar {
  width: 34px; height: 34px; min-width: 34px;
  background: var(--c-blue);
  color: #fff;
  font-weight: var(--w-bold);
  font-size: 12px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.bl-meta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bl-meta-text strong { font-size: 13px; font-weight: var(--w-semibold); color: var(--c-navy); }
.bl-meta-text span { font-size: 11.5px; color: var(--c-subtle); }

/* ----------------------------------------------------------------------
   7. POST GRID
   ---------------------------------------------------------------------- */
.bl-grid-section { text-align: left; }
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.bl-card {
  display: block;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bl-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(11,29,58,0.09); }
.bl-card-body { padding: 22px; }
.bl-card-body h3 {
  font-size: 16.5px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  line-height: 1.4;
  margin-bottom: 10px;
}
.bl-card-body p {
  font-size: 13.5px;
  color: var(--c-muted);
  line-height: 1.65;
  margin-bottom: 18px;
}

/* JS-driven visibility (used by blog.js for filtering / search / pagination) */
.bl-card.bl-hidden { display: none; }

/* ----------------------------------------------------------------------
   8. EMPTY STATE
   ---------------------------------------------------------------------- */
.bl-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: 40px;
}
.bl-empty i { font-size: 30px; color: var(--c-subtle); margin-bottom: 14px; }
.bl-empty h3 { font-size: 17px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 8px; }
.bl-empty p { font-size: 14px; color: var(--c-muted); margin-bottom: 20px; }

/* ----------------------------------------------------------------------
   9. PAGINATION
   ---------------------------------------------------------------------- */
.bl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.bl-page-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bl-page-arrow:hover { background: var(--bg-light); border-color: var(--c-blue); color: var(--c-blue); }
.bl-page-arrow:disabled { opacity: 0.35; pointer-events: none; }
.bl-page-nums { display: flex; align-items: center; gap: 6px; }
.bl-page-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bl-page-num:hover { border-color: var(--c-blue); color: var(--c-blue); }
.bl-page-num.is-active { background: #4553a4; border-color: #4553a4; color: #fff; }

/* ----------------------------------------------------------------------
   10. INLINE NEWSLETTER FORM (drops inside the reused .dark-cta-section)
   ---------------------------------------------------------------------- */
.bl-inline-newsletter {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.bl-inline-newsletter input {
  flex: 1;
  min-width: 220px;
  height: 50px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border);
  background: #fff;
  padding: 0 18px;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--c-text);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.bl-inline-newsletter input:focus { border-color: var(--c-blue); }
.bl-inline-newsletter .btn { height: 50px; }

@media (max-width: 480px) {
  .bl-inline-newsletter { flex-direction: column; }
  .bl-inline-newsletter input, .bl-inline-newsletter .btn { width: 100%; }
}

/* ----------------------------------------------------------------------
   11. RESPONSIVE — grid collapse
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .bl-page-arrow, .bl-page-num { width: 36px; height: 36px; }
  .bl-poster-content-big { max-width: 84%; }
}
/* WordPress integration — Phase 1 */
.brand-logo .custom-logo-link {
  display: flex;
  align-items: center;
  width: 100%;
}
.brand-logo .custom-logo {
  width: 100%;
  max-width: 250px;
  height: auto;
}
.titan-inline-logo {
  width: 100%;
  height: auto;
  display: block;
}
.tw-footer-logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
  max-width: 320px;
}
.tw-footer-logo .custom-logo {
  max-width: 320px;
  height: auto;
}
.footer-fallback-logo {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
}
.tw-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tw-footer-links li {
  list-style: none;
}
.titan-resource-nav {
  margin-left: 0;
}
.titan-menu-placeholder {
  color: rgba(255,255,255,.55);
  font-size: 13px;
}