/* ============================================
   DIGIWAH HOMEPAGE — styles.css
   Hero: "The Operations Engine"
   ============================================ */
/* a:hover, a:focus, a:active {
    color: #fff!important;
} */
:root {
  --brand: #010ED0;
  --brand-light: #7c8fff;
  --accent: #FF7A45;
  --accent-soft: #ffb284;
  --navy-deep: #050a2e;
  --navy: #0a1145;
  --ink: #0a0f2c;
  --muted: #6b7280;
  --line: rgba(255,255,255,0.08);
  --glass: rgba(255,255,255,0.04);
  --glass-strong: rgba(255,255,255,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/*   .fixed-meeting-btn {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .fixed-meeting-btn svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
  }

  @media (max-width: 480px) {
    .fixed-meeting-btn {
      width: 54px !important;
      height: 54px !important;
      padding: 0 !important;
    }
  } */


h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

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

a.btn-secondary:hover{
	color: #fff !important
}




body{
	margin:0px !important
}
div#dgw-whatsapp-api-agent2-status {
    display: none;
}

/* @media (max-width: 767px) {
	a.custom-logo-link img.custom-logo {
    width: 150px;
}
} */
/* 
header .nav-logo img, .footer-brand a.custom-logo-link {
	filter: brightness(0) invert(1);
} */

.chaty-i-trigger .chaty-channel {
    position: absolute;
    bottom: 54px;
    right: -14px;
    transition: .5s;
    border-radius: 50%;
    cursor: pointer;
}





.footer-brand a.custom-logo-link img.custom-logo {
    width: 60%;
}
/* ============================================
   NAVBAR
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(5, 10, 46, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--brand-light), var(--accent-soft));
  color: var(--navy-deep);
  border-radius: 8px;
  font-weight: 800;
}
.nav-links {
  display: flex;
  gap: 32px;
}
.nav-links a {
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-cta {
  background: var(--accent);  
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(255, 122, 69, 0.35);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 122, 69, 0.5);
}

/* ============================================
   HERO — "THE OPERATIONS ENGINE"
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(124, 143, 255, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(255, 122, 69, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  overflow: hidden;
  padding: 150px 0 80px;
  display: flex;
  align-items: center;
}

/* Perspective grid floor */
.Home_hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 143, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 143, 255, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center center;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Drifting bg particles */
.hero-bg-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-bg-particles span {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--brand-light);
  border-radius: 50%;
  opacity: 0.3;
  animation: drift 20s linear infinite;
  filter: blur(0.5px);
}
.hero-bg-particles span:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.hero-bg-particles span:nth-child(2) { top: 60%; left: 15%; animation-delay: -3s; }
.hero-bg-particles span:nth-child(3) { top: 30%; left: 80%; animation-delay: -6s; }
.hero-bg-particles span:nth-child(4) { top: 80%; left: 70%; animation-delay: -9s; }
.hero-bg-particles span:nth-child(5) { top: 50%; left: 50%; animation-delay: -12s; }
.hero-bg-particles span:nth-child(6) { top: 15%; left: 60%; animation-delay: -15s; }
.hero-bg-particles span:nth-child(7) { top: 70%; left: 30%; animation-delay: -18s; }
.hero-bg-particles span:nth-child(8) { top: 40%; left: 90%; animation-delay: -2s; }
.hero-bg-particles span:nth-child(9) { top: 90%; left: 50%; animation-delay: -7s; }
.hero-bg-particles span:nth-child(10) { top: 25%; left: 35%; animation-delay: -11s; }

@keyframes drift {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translate(40px, -60px); opacity: 0; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}
/* Home Page Second Section */

/* ============================================================
   SECTION 3 - CLIENT LOGO STRIP (frosted glass, replaces marquee) 2026-10-10
   ============================================================ */
.lgS{position:relative;z-index:5;background:linear-gradient(180deg,transparent 0 48px,#fff 48px,#f6f8ff 100%);padding:0 24px 56px}
.lgS-bar{position:relative;max-width:1200px;margin:-48px auto 0;display:flex;align-items:center;gap:28px;padding:18px 18px 18px 28px;border-radius:22px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 60px -24px rgba(5,10,46,.35),0 2px 6px rgba(5,10,46,.05)}
.lgS-label{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding-right:28px;border-right:1px solid #e6e9f5}
.lgS-label b{display:flex;align-items:center;gap:8px;font:700 15px/1.2 'Plus Jakarta Sans',sans-serif;color:#0a0f2c;white-space:nowrap}
.lgS-label b::before{content:"";width:7px;height:7px;border-radius:50%;background:#16a06a;box-shadow:0 0 0 4px rgba(22,160,106,.14)}
.lgS-label span{font:500 12.5px/1.2 'Inter',sans-serif;color:#6b7280;white-space:nowrap}
.lgS-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lgS-track{display:flex;align-items:center;width:max-content;padding:4px 0;animation:lgS-scroll 60s linear infinite}
.lgS-bar:hover .lgS-track{animation-play-state:paused}
.lgS-track img{height:34px;width:auto;margin-right:56px;object-fit:contain;transition:transform .3s ease}
.lgS-track img.sq{height:46px}
.lgS-track img.sm{height:26px}
.lgS-track img:hover{transform:scale(1.08)}
@keyframes lgS-scroll{to{transform:translateX(-50%)}}
@media (max-width:760px){
  .lgS{padding:28px 16px 44px;background:linear-gradient(180deg,#fff,#f6f8ff)}
  .lgS-bar{flex-direction:column;align-items:stretch;gap:14px;padding:18px 0 16px;margin-top:0}
  .lgS-label{align-items:center;padding:0;border:0}
  .lgS-track img{margin-right:40px}
  .lgS-track img{height:28px}.lgS-track img.sq{height:38px}.lgS-track img.sm{height:21px}
}
@media (prefers-reduced-motion:reduce){.lgS-track{animation:none}}



/*  */



/* ============== HERO COPY (LEFT) ============== */
.hero-copy {
  color: #fff;
  animation: copyFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes copyFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 14px 7px 12px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: eyebrowPulse 2s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.hero-h1 {
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 22px;
  letter-spacing: -0.03em;
}
.hero-h1-grad {
  display: block;
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-top: 4px;
}

.hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 540px;
  margin-bottom: 28px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
}
.badge svg { color: var(--brand-light); flex-shrink: 0; }
.badge-ai svg { color: var(--accent-soft); }

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  padding: 15px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 6px 24px rgba(255, 122, 69, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 122, 69, 0.55);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #fff;
  padding: 15px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--glass-strong);
  transition: background 0.2s, border-color 0.2s;
}
.btn-secondary:hover {
  background: var(--glass-strong);
  border-color: rgba(255,255,255,0.2);
  color:#fff !important;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-item b {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.trust-item span {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.trust-divider {
  width: 1px;
  height: 32px;
  background: var(--line);
}

/* ============== HERO ENGINE (RIGHT) ============== */
.hero-engine {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin-left: auto;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  animation: engineFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes engineFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.engine-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Pulsing rings around core */
.ring-pulse {
  transform-origin: 300px 300px;
  animation: ringPulse 4s ease-in-out infinite;
}
.ring-1 { animation-delay: 0s; }
.ring-2 { animation-delay: 0.6s; }
.ring-3 { animation-delay: 1.2s; }
@keyframes ringPulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.06); }
}

.core-glow {
  animation: coreGlowPulse 3s ease-in-out infinite;
  transform-origin: 300px 300px;
}
@keyframes coreGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.conn {
  animation: dashFlow 6s linear infinite;
  stroke-linecap: round;
}
@keyframes dashFlow {
  to { stroke-dashoffset: -100; }
}

/* ============== CORE "D" MARK ============== */
.engine-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  z-index: 5;
  animation: coreFloat 6s ease-in-out infinite;
}
@keyframes coreFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 6px)); }
}
.core-inner {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 60px rgba(124, 143, 255, 0.6),
    0 0 120px rgba(124, 143, 255, 0.32),
    0 0 0 1px rgba(124, 143, 255, 0.4),
    inset 0 0 24px rgba(124, 143, 255, 0.14);
}
.core-logo {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
}
.nav-logo-img {
  height: 38px;
  width: auto;
  display: block;
}
.core-ring {
  position: absolute;
  inset: -8px;
  border: 1.5px solid var(--brand-light);
  border-radius: 50%;
  opacity: 0.5;
  animation: coreRingExpand 3s ease-out infinite;
}
.core-ring-1 { animation-delay: 0s; }
.core-ring-2 { animation-delay: 1.5s; }
@keyframes coreRingExpand {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}





/* ============== HEXAGONAL MODULES ============== */
.module {
  position: absolute;
  width: 110px; height: 110px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  animation: moduleFlyIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* 6 modules at radius 220px in a 600x600 viewBox.
   We position via CSS using same trig — viewBox unit = 1px in our SVG.
   Module is centered at SVG coordinates (300, 80) for top, (490, 190) for top-right, etc.
   Because SVG is 100% of container and modules use percent-based positioning:
*/
.module-sales      { top: 13.3%; left: 50%; animation-delay: 0.3s; }
.module-finance    { top: 31.6%; left: 81.6%; animation-delay: 0.4s; }
.module-support    { top: 68.3%; left: 81.6%; animation-delay: 0.5s; }
.module-ops        { top: 86.6%; left: 50%; animation-delay: 0.6s; }
.module-marketing  { top: 68.3%; left: 18.3%; animation-delay: 0.7s; }
.module-ai         { top: 31.6%; left: 18.3%; animation-delay: 0.8s; }

@keyframes moduleFlyIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.hex {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(124, 143, 255, 0.3);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, border-color 0.3s;
  cursor: pointer;
}
.hex::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: linear-gradient(135deg, rgba(10, 17, 69, 0.7), rgba(5, 10, 46, 0.85));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  z-index: 0;
}
.hex:hover {
  transform: scale(1.08);
  border-color: var(--brand-light);
}
.hex:hover::before {
  background: linear-gradient(135deg, rgba(124, 143, 255, 0.18), rgba(10, 17, 69, 0.85));
}

.hex-icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  color: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hex-icon svg { width: 100%; height: 100%; }

.hex-label {
  position: relative;
  z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}
.module-ai .hex-icon { color: var(--accent-soft); }

/* Per-module micro-animations */

/* Sales — graph line draw */
.anim-graph-line {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: graphDraw 3s ease-in-out infinite;
}
.anim-graph-dot {
  animation: graphDotPulse 3s ease-in-out infinite;
}
@keyframes graphDraw {
  0% { stroke-dashoffset: 50; }
  60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes graphDotPulse {
  0%, 60% { opacity: 0; transform: scale(0); transform-origin: 28px 8px; }
  70% { opacity: 1; transform: scale(1.3); transform-origin: 28px 8px; }
  100% { opacity: 1; transform: scale(1); transform-origin: 28px 8px; }
}

/* Finance counter — handled in JS (cycles symbols) + bouncy CSS */
.anim-counter {
  animation: counterBounce 1.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes counterBounce {
  0%, 100% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.15); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.4; }
  55% { transform: scale(1.15); opacity: 1; }
}

/* Support — bubble dots */
.anim-dot { opacity: 0; animation: dotPop 1.4s ease-in-out infinite; }
.anim-dot.d-1 { animation-delay: 0s; }
.anim-dot.d-2 { animation-delay: 0.2s; }
.anim-dot.d-3 { animation-delay: 0.4s; }
@keyframes dotPop {
  0%, 60%, 100% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 1; transform: scale(1); }
}

/* Operations — gear */
.anim-gear {
  transform-origin: 16px 15px;
  animation: gearSpin 8s linear infinite;
}
@keyframes gearSpin {
  to { transform: rotate(360deg); }
}

/* Marketing — radiating waves */
.anim-wave {
  transform-origin: 16px 16px;
  opacity: 0;
}
.anim-wave.w-1 { animation: waveOut 2.4s ease-out infinite; }
.anim-wave.w-2 { animation: waveOut 2.4s ease-out infinite 1.2s; }
@keyframes waveOut {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.3); }
}

/* AI — node pulse cascade */
.anim-node { animation: nodePulse 2.4s ease-in-out infinite; }
.anim-node.n-1 { animation-delay: 0s; }
.anim-node.n-2 { animation-delay: 0.2s; }
.anim-node.n-3 { animation-delay: 0.4s; }
.anim-node.n-4 { animation-delay: 0.6s; }
.anim-node.n-5 { animation-delay: 0.8s; }
.anim-node.n-6 { animation-delay: 1s; }
@keyframes nodePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ============== SCROLL CUE ============== */
.hero-scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  animation: scrollCueFade 2s ease-in-out infinite;
}
.scroll-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
}
@keyframes scrollCueFade {
  0%, 100% { opacity: 0.4; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 6px); }
}

/* Placeholder marker */
.placeholder-marker {
  padding: 80px 32px;
  text-align: center;
  background: #f7f8fc;
  color: var(--muted);
  font-size: 14px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { order: 2; }
  .hero-engine { order: 1; max-width: 480px; margin: 0 auto; }
  .hero-river { height: 380px; }
  .hero-mission { height: 480px; }
  .hero-untangle { height: 420px; }
  .nav-links { display: none; }
}

@media (max-width: 720px) {
  .hero-river { height: 320px; gap: 14px; }
  .chaos-icon { font-size: 22px; }
  .portal-mark { width: 44px; height: 44px; font-size: 22px; }
  .portal-bar { height: 280px; }
  .lane-label { font-size: 10px; padding: 2px 7px; }

  .hero-mission { height: auto; min-height: 460px; }
  .panel { width: 90% !important; left: 5% !important; right: auto !important; position: relative !important; margin-bottom: 14px; transform: none !important; animation: none !important; }
  .panel-sales, .panel-support, .panel-ai, .panel-log { top: auto !important; bottom: auto !important; }

  .hero-untangle { height: 360px; }

  .hero { padding: 100px 0 60px; min-height: auto; }
  .hero-h1 { font-size: 38px; }
  .hero-sub { font-size: 15.5px; }
  .hero-badges { gap: 8px; }
  .badge { font-size: 11.5px; padding: 7px 10px; }
  .btn-primary, .btn-secondary { padding: 13px 20px; font-size: 14px; width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; }
  .hero-trust { flex-wrap: wrap; gap: 16px; padding: 16px 0; }
  .trust-divider { display: none; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
  .hero-engine { max-width: 360px; }
  .module { width: 78px; height: 78px; }
  .hex-icon { width: 26px; height: 26px; }
  .hex-label { font-size: 10px; }
  .core-d { font-size: 38px; }
  .engine-core { width: 80px; height: 80px; }
}

@media (max-width: 420px) {
  .hero-h1 { font-size: 32px; }
  .hero-engine { max-width: 320px; }
  .module { width: 64px; height: 64px; }
  .hex-icon { width: 22px; height: 22px; }
  .hex-label { font-size: 9px; }
}

/* ============================================================
   SECTION 3 — CLIENT LOGO MARQUEE
   ============================================================ */
.logo-marquee {
  background: #ffffff;
  padding: 56px 0 64px;
  overflow: hidden;
}
.logo-marquee-header {
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 0 24px;
  text-align: center;
}
.logo-marquee-lead {
  font: 500 13px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7298;
  margin: 0;
}
.logo-marquee-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: logo-scroll 38s linear infinite;
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
.logo-cell {
  flex: 0 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
.logo-cell img {
  max-height: 100px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.logo-cell:hover img {
  opacity: 1;
  transform: scale(1.04);
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}
@media (max-width: 720px) {
  .logo-marquee { padding: 44px 0 48px; }
  .logo-marquee-track { gap: 40px; animation-duration: 30s; }
  .logo-cell { height: 48px; }
  .logo-cell img { max-height: 48px; max-width: 140px; }
}

/* ============================================================
   SECTION 4 — SERVICES GRID (REDIRECT-ONLY)
   ============================================================ */
.services {
  background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);
  padding: 20px 24px 112px;
}
.services-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.services-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.services-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.services-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.services-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.10);
  border-radius: 18px;
  padding: 32px 28px 28px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  isolation: isolate;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #010ED0, #FF7A45);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(1,14,208,0.05), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(1,14,208,0.18);
  border-color: rgba(1,14,208,0.22);
}
.service-card:hover::before,
.service-card:hover::after {
  opacity: 1;
}
.service-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(1,14,208,0.10), rgba(255,122,69,0.10));
  color: #010ED0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: background 0.35s ease, color 0.35s ease;
}
.service-card-icon svg {
  width: 28px;
  height: 28px;
}
.service-card-zoho .service-card-icon { color: #010ED0; }
.service-card-wa .service-card-icon { color: #25D366; background: linear-gradient(135deg, rgba(37,211,102,0.12), rgba(1,14,208,0.08)); }
.service-card-ai .service-card-icon { color: #FF7A45; background: linear-gradient(135deg, rgba(255,122,69,0.14), rgba(1,14,208,0.08)); }
.service-card-title {
  font: 700 22px/1.2 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  margin: 0 0 12px;
}
.service-card-hook {
  font: 400 15px/1.6 'Inter', sans-serif;
  color: #4a5170;
  margin: 0 0 24px;
  flex-grow: 1;
}
.service-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 'Inter', sans-serif;
  color: #010ED0;
  letter-spacing: 0.01em;
}
.service-card-cta svg {
  transition: transform 0.3s ease;
}
.service-card:hover .service-card-cta svg {
  transform: translateX(4px);
}

@media (max-width: 960px) {
  .services { padding: 72px 20px 88px; }
  .services-h2 { font-size: 34px; }
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .services-header { margin-bottom: 40px; }
}
@media (max-width: 480px) {
  .services-h2 { font-size: 28px; }
  .services-sub { font-size: 15px; }
  .service-card { padding: 26px 22px 24px; }
}

/* ============================================================
   SECTION 5 — WHY DIGIWAH (SPLIT LAYOUT, PHOTO + FLOATING STATS)
   ============================================================ */
.why {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
  padding: 110px 24px 120px;
  overflow: hidden;
}
.why-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* LEFT */
.why-left { max-width: 540px; }
.why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.why-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 18px;
}
.why-lead {
  font: 400 17px/1.6 'Inter', sans-serif;
  color: #4a5170;
  margin: 0 0 32px;
}
.why-list { list-style: none; margin: 0; padding: 0; }
.why-item {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(1,14,208,0.10);
}
.why-item:last-child { border-bottom: 1px solid rgba(1,14,208,0.10); }
.why-item-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(1,14,208,0.10), rgba(255,122,69,0.08));
  color: #010ED0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-item-text h3 {
  font: 700 17px/1.3 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  margin: 0 0 6px;
}
.why-item-text p {
  font: 400 14.5px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}
.why-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 'Inter', sans-serif;
  color: #ffffff;
  padding: 14px 22px;
  margin-top: 32px;
  background: linear-gradient(135deg, #010ED0 0%, #4a5cf5 100%);
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 14px 36px -12px rgba(1,14,208,0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -12px rgba(1,14,208,0.6);
}
.why-cta svg { transition: transform 0.3s ease; }
.why-cta:hover svg { transform: translateX(4px); }

/* RIGHT — photo block + badges */
.why-right {
  width: 100%;
  max-width: 460px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.why-photo-block {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.why-dots {
  position: absolute;
  top: -28px;
  left: -28px;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(rgba(1,14,208,0.22) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  z-index: 0;
}
.why-accent {
  position: absolute;
  top: 22px;
  left: 22px;
  right: -22px;
  bottom: -22px;
  background: linear-gradient(135deg, #010ED0 0%, #4a5cf5 100%);
  border-radius: 24px;
  z-index: 1;
}
.why-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(1,14,208,0.35);
}
.why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.why-stat {
  position: absolute;
  z-index: 3;
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 18px 12px;
  box-shadow: 0 14px 30px -10px rgba(10,18,51,0.28), 0 0 0 1px rgba(1,14,208,0.06);
  animation: whyFloat 4.5s ease-in-out infinite;
}
.why-stat-tr { top: 36px; right: -28px; }
.why-stat-bl { bottom: 44px; left: -32px; animation-delay: 1.6s; }
.why-stat-num {
  font: 700 28px/1 'Plus Jakarta Sans', sans-serif;
  color: #010ED0;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}
.why-stat-num span { color: #FF7A45; }
.why-stat-label {
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #4a5170;
}
@keyframes whyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .why-stat { animation: none; }
}

@media (max-width: 1024px) {
  .why-layout { gap: 56px; }
  .why-h2 { font-size: 36px; }
  .why-stat-tr { right: -16px; }
  .why-stat-bl { left: -20px; }
}
@media (max-width: 880px) {
  .why { padding: 80px 20px 96px; }
  .why-layout { grid-template-columns: 1fr; gap: 64px; }
  .why-left { order: 2; max-width: none; }
  .why-right { order: 1; max-width: 420px; margin: 0 auto; }
  .why-h2 { font-size: 32px; }
}
@media (max-width: 480px) {
  .why-h2 { font-size: 28px; }
  .why-lead { font-size: 15px; }
  .why-item { padding: 18px 0; gap: 14px; }
  .why-item-icon { flex-basis: 40px; width: 40px; height: 40px; }
  .why-item-text h3 { font-size: 16px; }
  .why-item-text p { font-size: 14px; }
  .why-stat { padding: 11px 14px 9px; }
  .why-stat-num { font-size: 22px; }
  .why-stat-label { font-size: 10px; }
  .why-stat-tr { top: 18px; right: -10px; }
  .why-stat-bl { bottom: 22px; left: -12px; }
  .why-dots { width: 100px; height: 100px; top: -18px; left: -18px; }
}

/* ============================================================
   SECTION 6 — AI & AGENTIC AI (DARK / FUTURISTIC)
   ============================================================ */
.ai {
  position: relative;
  background: linear-gradient(180deg, #050a24 0%, #0a1233 100%);
  padding: 120px 24px 130px;
  overflow: hidden;
  isolation: isolate;
}
.ai-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  z-index: 0;
}
.ai-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}
.ai-glow-1 {
  width: 520px; height: 520px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(1,14,208,0.55) 0%, transparent 70%);
}
.ai-glow-2 {
  width: 420px; height: 420px;
  bottom: -110px; right: -90px;
  background: radial-gradient(circle, rgba(255,122,69,0.40) 0%, transparent 70%);
}
.ai-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ai-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* CONSOLE */
.ai-console-wrap { position: relative; }
.ai-console {
  background: rgba(5, 10, 36, 0.85);
  border: 1px solid rgba(124, 143, 255, 0.25);
  border-radius: 16px;
  overflow: hidden;
  font: 400 13px/1.5 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
  box-shadow:
    0 30px 80px -30px rgba(1, 14, 208, 0.55),
    0 0 60px -20px rgba(124, 143, 255, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.ai-console-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(124, 143, 255, 0.15);
}
.ai-console-dots { display: flex; gap: 6px; }
.ai-console-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.ai-console-dots span:nth-child(1) { background: #ff5f57; }
.ai-console-dots span:nth-child(2) { background: #febc2e; }
.ai-console-dots span:nth-child(3) { background: #28c840; }
.ai-console-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b8c4ff;
  font: 600 12px/1 'JetBrains Mono', 'Menlo', monospace;
}
.ai-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 10px rgba(40, 200, 64, 0.7);
  animation: aiPulse 1.6s ease-in-out infinite;
  flex: 0 0 8px;
}
@keyframes aiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
.ai-console-status {
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #28c840;
  padding: 4px 8px;
  border: 1px solid rgba(40, 200, 64, 0.4);
  border-radius: 4px;
  background: rgba(40, 200, 64, 0.08);
}
.ai-console-body {
  padding: 22px 20px;
  min-height: 380px;
  color: #d8dfff;
}
.ai-line {
  margin-bottom: 14px;
  opacity: 0;
  animation: aiLineCycle 14s ease-in-out infinite;
}
.ai-line:nth-child(1) { animation-delay: 0.4s; }
.ai-line:nth-child(2) { animation-delay: 1.6s; }
.ai-line:nth-child(3) { animation-delay: 3.0s; }
.ai-line:nth-child(4) { animation-delay: 4.4s; }
.ai-line:nth-child(5) { animation-delay: 5.8s; }
.ai-line:nth-child(6) { animation-delay: 7.2s; }
@keyframes aiLineCycle {
  0%   { opacity: 0; transform: translateX(-6px); }
  4%   { opacity: 1; transform: translateX(0); }
  85%  { opacity: 1; }
  93%  { opacity: 0; }
  100% { opacity: 0; }
}
.ai-time {
  color: #6b7aa8;
  margin-right: 10px;
}
.ai-tag {
  display: inline-block;
  font: 700 9.5px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  padding: 3px 6px;
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: 1px;
}
.tag-zia   { color: #FF7A45; background: rgba(255,122,69,0.16); }
.tag-agent { color: #7c8fff; background: rgba(124,143,255,0.16); }
.tag-mcp   { color: #28c840; background: rgba(40,200,64,0.14); }
.tag-bot   { color: #b8a4ff; background: rgba(184,164,255,0.14); }
.ai-prompt { margin-top: 18px; }
.ai-cursor::before { content: '> '; color: #7c8fff; }
.ai-cursor::after {
  content: '_';
  color: #7c8fff;
  animation: aiBlink 1s step-end infinite;
}
@keyframes aiBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ai-line, .ai-cursor::after, .ai-live-dot { animation: none !important; opacity: 1 !important; }
}

/* CONTENT */
.ai-content { color: #d8dfff; }
.ai-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7c8fff;
  padding: 6px 12px;
  border: 1px solid rgba(124,143,255,0.30);
  border-radius: 100px;
  background: rgba(124,143,255,0.06);
  margin-bottom: 18px;
}
.ai-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #b8c4ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 18px;
}
.ai-lead {
  font: 400 16px/1.6 'Inter', sans-serif;
  color: #a4b0d8;
  margin: 0 0 32px;
}
.ai-caps {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.ai-cap {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(124,143,255,0.14);
}
.ai-cap:last-child { border-bottom: 1px solid rgba(124,143,255,0.14); }
.ai-cap-num {
  flex: 0 0 auto;
  font: 700 13px/1 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.05em;
  color: #FF7A45;
  padding-top: 3px;
}
.ai-cap h3 {
  font: 700 16px/1.3 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 5px;
}
.ai-cap p {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: #8c98c4;
  margin: 0;
}
.ai-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 'Inter', sans-serif;
  color: #ffffff;
  padding: 14px 22px;
  background: linear-gradient(135deg, #010ED0 0%, #4a5cf5 100%);
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 14px 36px -12px rgba(1,14,208,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ai-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -12px rgba(1,14,208,0.75);
}
.ai-cta svg { transition: transform 0.3s ease; }
.ai-cta:hover svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .ai-layout { gap: 56px; }
  .ai-h2 { font-size: 36px; }
  .ai-console-body { min-height: 340px; padding: 18px; }
  .ai-line { font-size: 12px; }
}
@media (max-width: 880px) {
  .ai { padding: 90px 20px 100px; }
  .ai-layout { grid-template-columns: 1fr; gap: 56px; }
  .ai-console-wrap { order: 1; }
  .ai-content { order: 2; }
  .ai-h2 { font-size: 32px; }
}
@media (max-width: 480px) {
  .ai-h2 { font-size: 26px; }
  .ai-lead { font-size: 14.5px; }
  .ai-cap { padding: 14px 0; gap: 14px; }
  .ai-cap h3 { font-size: 15px; }
  .ai-cap p { font-size: 13px; }
  .ai-console-body { padding: 14px 16px; min-height: 300px; }
  .ai-line { font-size: 11px; margin-bottom: 10px; }
  .ai-tag { font-size: 8.5px; padding: 2px 5px; margin-right: 8px; }
  .ai-time { margin-right: 8px; }
}

/* Why Digiwah — certification badges (under photo) */
.why-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.why-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.12);
  border-radius: 14px;
  box-shadow: 0 8px 22px -14px rgba(10,18,51,0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.why-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(1,14,208,0.22);
  box-shadow: 0 14px 30px -14px rgba(10,18,51,0.22);
}
.why-badge-mark {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 17px/1 'Plus Jakarta Sans', sans-serif;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.badge-mark-zoho {
  background: linear-gradient(135deg, #c8202d 0%, #ff5a3c 100%);
  box-shadow: 0 6px 14px -6px rgba(200,32,45,0.5);
}
.badge-mark-meta {
  background: linear-gradient(135deg, #0866ff 0%, #4a8cff 100%);
  box-shadow: 0 6px 14px -6px rgba(8,102,255,0.5);
}
.why-badge-line1 {
  font: 700 13px/1.1 'Plus Jakarta Sans', sans-serif;
  color: #0a1233;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.why-badge-line2 {
  font: 500 11px/1.1 'Inter', sans-serif;
  color: #4a5170;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .why-badges { gap: 10px; }
  .why-badge { padding: 12px 14px; gap: 10px; }
  .why-badge-mark { flex-basis: 34px; width: 34px; height: 34px; font-size: 15px; }
  .why-badge-line1 { font-size: 12px; }
  .why-badge-line2 { font-size: 10px; }
}

/* ============================================
   SECTION 7 — CASE STUDIES (LIGHT PREMIUM SLIDER)
   ============================================ */
.cases {
  position: relative;
  padding: 120px 24px 110px;
  background:
    radial-gradient(ellipse 70% 50% at 80% 10%, rgba(255,122,69,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(1,14,208,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #f6f8ff 0%, #ffffff 60%, #fff5ee 100%);
  color: #0a1233;
  overflow: hidden;
}
.cases-bg-grid {
  display: none;
}
.cases-bg-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,122,69,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.cases-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 1;
}

.cases-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.cases-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.cases-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.cases-h2 {
  font: 700 44px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.cases-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}

/* ===== Slider ===== */
.cases-slider {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 30px 60px -25px rgba(1,14,208,0.18),
    0 50px 80px -40px rgba(255,122,69,0.10);
  min-height: 520px;
}

.case-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  padding: 48px;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.case-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.case-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-visual svg {
  width: 100%;
  height: auto;
  max-height: 440px;
  filter: drop-shadow(0 20px 40px rgba(1,14,208,0.12));
}

.case-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 480px;
}
.case-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 20px;
}
.case-title {
  font: 700 32px/1.2 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 18px;
}
.case-summary {
  font: 400 15px/1.6 'Inter', sans-serif;
  color: #4a5170;
  margin: 0 0 28px;
}

.case-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid rgba(1,14,208,0.10);
  border-bottom: 1px solid rgba(1,14,208,0.10);
}
.case-metric { text-align: left; }
.case-metric-num {
  display: block;
  font: 700 22px/1.1 'Plus Jakarta Sans', sans-serif;
  color: #010ED0;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.case-metric-num--text {
  font-size: 18px;
  background: linear-gradient(135deg, #FF7A45 0%, #010ED0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case-metric-label {
  font: 500 11px/1.3 'Inter', sans-serif;
  color: #6b7280;
  letter-spacing: 0.02em;
}

.case-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font: 600 14px/1 'Inter', sans-serif;
  color: #FF7A45;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,122,69,0.4);
  transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.case-cta:hover {
  gap: 14px;
  color: #010ED0;
  border-bottom-color: #010ED0;
}

/* ===== Controls ===== */
.cases-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}
.cases-arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.16);
  box-shadow: 0 8px 18px -10px rgba(1,14,208,0.18);
  color: #010ED0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.cases-arrow:hover {
  background: #010ED0;
  border-color: #010ED0;
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 12px 22px -8px rgba(1,14,208,0.4);
}
.cases-dots {
  display: flex;
  gap: 10px;
}
.cases-dot {
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: rgba(1,14,208,0.14);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.cases-dot.is-active {
  background: linear-gradient(90deg, #010ED0, #FF7A45);
  width: 56px;
}
.cases-dot:hover:not(.is-active) {
  background: rgba(1,14,208,0.28);
}
.cases-counter {
  font: 600 14px/1 'Plus Jakarta Sans', sans-serif;
  color: #0a1233;
  min-width: 50px;
  text-align: center;
  letter-spacing: 0.02em;
}
.cases-counter-sep { color: rgba(1,14,208,0.3); margin: 0 4px; }

/* ===== Industry chips ===== */
.cases-industries {
  margin-top: 64px;
  text-align: center;
}
.cases-industries-label {
  display: block;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 20px;
}
.cases-industries-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.industry-chip {
  font: 500 13px/1 'Inter', sans-serif;
  color: #0a1233;
  padding: 10px 18px;
  border: 1px solid rgba(1,14,208,0.16);
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0 4px 10px -6px rgba(1,14,208,0.14);
  transition: all 0.25s ease;
}
.industry-chip:hover {
  border-color: #FF7A45;
  color: #FF7A45;
  background: rgba(255,122,69,0.04);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(255,122,69,0.3);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .cases { padding: 100px 24px 90px; }
  .cases-h2 { font-size: 38px; }
  .cases-slider { min-height: auto; }
  .case-slide {
    position: relative;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px;
  }
  .case-slide:not(.is-active) { display: none; }
  .case-visual svg { max-height: 360px; }
  .case-title { font-size: 28px; }
}
@media (max-width: 720px) {
  .cases { padding: 80px 18px 70px; }
  .cases-h2 { font-size: 30px; }
  .cases-sub { font-size: 15px; }
  .case-slide { padding: 28px 22px; gap: 24px; }
  .case-title { font-size: 24px; }
  .case-summary { font-size: 14px; }
  .case-metrics { grid-template-columns: 1fr; gap: 14px; padding: 16px 0; }
  .case-metric-num { font-size: 20px; }
  .case-metric-num--text { font-size: 16px; }
  .cases-controls { gap: 16px; margin-top: 28px; }
  .cases-arrow { width: 40px; height: 40px; }
  .cases-arrow svg { width: 16px; height: 16px; }
  .cases-dot { width: 24px; }
  .cases-dot.is-active { width: 40px; }
  .cases-industries { margin-top: 48px; }
  .industry-chip { font-size: 12px; padding: 8px 14px; }
}
@media (max-width: 480px) {
  .cases-h2 { font-size: 26px; }
  .case-slide { padding: 22px 18px; }
  .case-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-slide { transition: opacity 0.2s ease; transform: none !important; }
  .cases-bg-glow,
  .erp-flow-line,
  .industry-chip { animation: none !important; transition: none; }
}

/* ============================================
   SECTION 9 — TESTIMONIALS (3-CARD CAROUSEL)
   ============================================ */
.testimonials {
  position: relative;
  padding: 120px 24px 110px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 50%, #f4f6ff 100%);
  color: #0a1233;
  overflow: hidden;
}
.testimonials-bg-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.testimonials-bg-glow--left {
  background: radial-gradient(circle, rgba(1,14,208,0.08) 0%, transparent 70%);
  top: -100px;
  left: -200px;
}
.testimonials-bg-glow--right {
  background: radial-gradient(circle, rgba(255,122,69,0.06) 0%, transparent 70%);
  bottom: -100px;
  right: -200px;
}

.testimonials-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 1;
}

.testimonials-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.testimonials-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.testimonials-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.testimonials-h2 {
  font: 700 44px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.testimonials-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}

/* ===== Track ===== */
.testimonials-track-wrap {
  position: relative;
  overflow: hidden;
  padding: 8px 0 55px;
  margin: 0 -8px;
}
.testimonials-track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  padding: 0 8px;
}

/* ===== Card ===== */
.testimonial-card {
  flex: 0 0 calc((100% - 64px) / 3);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.08);
  border-radius: 20px;
  padding: 32px 30px 28px;
  min-height: 340px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 4px 12px rgba(1,14,208,0.06),
    0 24px 50px -28px rgba(1,14,208,0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,122,69,0.3);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 8px 18px rgba(1,14,208,0.08),
    0 30px 60px -25px rgba(255,122,69,0.25);
}

.testimonial-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.testimonial-stars {
  display: flex;
  gap: 3px;
  color: #FF7A45;
}
.testimonial-stars svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 1px 0 rgba(255,122,69,0.3));
}
.testimonial-stack {
  font: 600 9px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 5px 10px;
  border: 1px solid rgba(1,14,208,0.16);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
}

.testimonial-quote-mark {
  width: 32px;
  height: auto;
  color: rgba(1,14,208,0.10);
  margin-bottom: 8px;
}

.testimonial-quote {
  font: 400 14.5px/1.6 'Inter', sans-serif;
  color: #2a304a;
  margin: 0 0 24px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(1,14,208,0.08);
  margin-top: auto;
}
.testimonial-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1 'Plus Jakarta Sans', sans-serif;
  color: #fff;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.2);
  overflow: hidden;
}
.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-avatar[data-color="brand"] { background: linear-gradient(135deg, #010ED0, #2d3aff); }
.testimonial-avatar[data-color="accent"] { background: linear-gradient(135deg, #FF7A45, #ffb284); }
.testimonial-avatar[data-color="ink"] { background: linear-gradient(135deg, #0a1233, #2a3160); }
.testimonial-avatar[data-color="green"] { background: linear-gradient(135deg, #22b272, #4dd699); }
.testimonial-avatar[data-color="light-brand"] { background: linear-gradient(135deg, #7c8fff, #aab4ff); }

.testimonial-author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonial-name {
  font: 700 14px/1.3 'Plus Jakarta Sans', sans-serif;
  color: #0a1233;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testimonial-role {
  font: 500 11.5px/1.3 'Inter', sans-serif;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Controls ===== */
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;

}
.t-arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.16);
  box-shadow: 0 8px 18px -10px rgba(1,14,208,0.18);
  color: #010ED0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.t-arrow:hover {
  background: #010ED0;
  border-color: #010ED0;
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 12px 22px -8px rgba(1,14,208,0.4);
}
.t-dots {
  display: flex;
  gap: 10px;
}
.t-dot {
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: rgba(1,14,208,0.14);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.t-dot.is-active {
  background: linear-gradient(90deg, #010ED0, #FF7A45);
  width: 56px;
}
.t-dot:hover:not(.is-active) {
  background: rgba(1,14,208,0.28);
}

/* ===== Responsive ===== */
@media (max-width: 1023px) {
  .testimonial-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
  .testimonials-h2 { font-size: 38px; }
}
@media (max-width: 720px) {
  .testimonials { padding: 80px 18px 70px; }
  .testimonials-h2 { font-size: 30px; }
  .testimonials-sub { font-size: 15px; }
  .testimonial-card {
    flex: 0 0 100%;
    padding: 26px 24px 24px;
    min-height: 0;
  }
  .testimonial-quote { -webkit-line-clamp: unset; }
  .testimonials-controls { gap: 16px; margin-top: 32px; }
  .t-arrow { width: 40px; height: 40px; }
  .t-arrow svg { width: 16px; height: 16px; }
  .t-dot { width: 24px; }
  .t-dot.is-active { width: 40px; }
}
@media (max-width: 480px) {
  .testimonials-h2 { font-size: 26px; }
  .testimonial-stack { font-size: 8px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-track { transition: none; }
  .testimonial-card,
  .t-arrow { transition: none; }
}

/* ============================================
   SECTION 10 — FOUNDERS (TWO-CARD EDITORIAL)
   ============================================ */
.founders {
  position: relative;
  padding: 130px 24px 120px;
  background: linear-gradient(180deg, #fffaf2 0%, #ffffff 50%, #fff5ee 100%);
  color: #0a1233;
  overflow: hidden;
}
.founders-bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.founders-bg-glow--top {
  width: 700px;
  height: 700px;
  top: -200px;
  left: -150px;
  background: radial-gradient(circle, rgba(1,14,208,0.08) 0%, transparent 70%);
}
.founders-bg-glow--bottom {
  width: 700px;
  height: 700px;
  bottom: -200px;
  right: -150px;
  background: radial-gradient(circle, rgba(255,122,69,0.10) 0%, transparent 70%);
}

.founders-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
}

.founders-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}
.founders-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.founders-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.founders-h2 {
  font: 700 48px/1.1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 16px;
}
.founders-h2-grad {
  background: linear-gradient(135deg, #010ED0 0%, #FF7A45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.founders-sub {
  font: 400 17px/1.6 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}
.founders-sub em {
  font-style: normal;
  font-weight: 700;
  color: #FF7A45;
  letter-spacing: 0.02em;
}

/* ===== Grid ===== */
.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 90px;
}

/* ===== Card ===== */
.founder-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}
.founder-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(80px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
.founder-glow--brand { background: radial-gradient(circle, rgba(1,14,208,0.18) 0%, transparent 65%); }
.founder-glow--accent { background: radial-gradient(circle, rgba(255,122,69,0.20) 0%, transparent 65%); }

/* ===== Photo + 3D tilt ===== */
.founder-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  margin-bottom: 32px;
  z-index: 1;
  perspective: 1000px;
}
.founder-photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #f6f8ff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 20px 40px -15px rgba(1,14,208,0.18),
    0 50px 80px -30px rgba(0,0,0,0.18);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.founder-card[data-founder="angad"] .founder-photo-frame {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 20px 40px -15px rgba(255,122,69,0.22),
    0 50px 80px -30px rgba(0,0,0,0.18);
}
.founder-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(1.08) contrast(1.04) saturate(1.06);
}
.founder-photo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 30%, transparent 60%);
}

/* ===== Badge ===== */
.founder-badge {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translate(-50%, 50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 24px -8px rgba(0,0,0,0.18);
}
.founder-badge--brand {
  background: linear-gradient(135deg, #010ED0 0%, #2d3aff 100%);
  color: #fff;
}
.founder-badge--accent {
  background: linear-gradient(135deg, #FF7A45 0%, #ffb284 100%);
  color: #fff;
}
.founder-badge svg { flex-shrink: 0; }

/* ===== Meta ===== */
.founder-meta {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  max-width: 420px;
}
.founder-name {
  font: 700 26px/1.2 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin-bottom: 4px;
}
.founder-role {
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF7A45;
  margin-bottom: 18px;
}
.founder-card[data-founder="bipanjeet"] .founder-role { color: #010ED0; }
.founder-narrative {
  font: 400 15.5px/1.7 'Inter', sans-serif;
  color: #2a304a;
  margin: 0;
}
.founder-narrative em {
  font-style: normal;
  font-weight: 700;
  color: #FF7A45;
  letter-spacing: 0.02em;
}

/* ===== Mission line ===== */
.founders-mission {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(1,14,208,0.10);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 20px 50px -25px rgba(1,14,208,0.15);
}
.founders-mission-mark {
  width: 36px;
  height: auto;
  color: rgba(1,14,208,0.14);
  margin-bottom: 16px;
}
.founders-mission-text {
  font: 500 22px/1.5 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  margin: 0 0 18px;
}
.founders-wow {
  display: inline-block;
  font: 800 26px/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FF7A45 0%, #010ED0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 4px;
}
.founders-mission-sign {
  font: 600 13px/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  color: #6b7280;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .founders-h2 { font-size: 40px; }
  .founders-grid { gap: 40px; }
  .founder-photo-wrap { max-width: 320px; }
}
@media (max-width: 820px) {
  .founders { padding: 100px 22px 90px; }
  .founders-h2 { font-size: 34px; }
  .founders-grid {
    grid-template-columns: 1fr;
    gap: 80px;
  }
  .founder-photo-wrap { max-width: 360px; }
  .founders-mission-text { font-size: 19px; }
  .founders-wow { font-size: 22px; }
}
@media (max-width: 480px) {
  .founders { padding: 80px 18px 70px; }
  .founders-h2 { font-size: 28px; }
  .founders-sub { font-size: 15px; }
  .founder-name { font-size: 22px; }
  .founder-narrative { font-size: 14.5px; }
  .founders-mission { padding: 32px 22px; border-radius: 20px; }
  .founders-mission-text { font-size: 17px; }
  .founders-wow { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .founder-photo-frame { transition: none; transform: none !important; }
  .founder-photo-shine { display: none; }
}

/* ============================================
   SECTION 13 — INSIGHTS / BLOG
   ============================================ */
.insights {
  position: relative;
  padding: 120px 24px 110px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
  color: #0a1233;
}
@media (max-width: 880px) {
  .insights { display: none; }
}
.insights-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.insights-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 56px;
}
.insights-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.insights-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.insights-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.insights-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
  max-width: 480px;
}
.insights-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 'Inter', sans-serif;
  color: #010ED0;
  padding: 12px 20px;
  border: 1px solid rgba(1,14,208,0.20);
  border-radius: 100px;
  background: #ffffff;
  white-space: nowrap;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.insights-all:hover {
  background: #010ED0;
  color: #fff;
  border-color: #010ED0;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(1,14,208,0.4);
}
.insights-all svg { transition: transform 0.25s ease; }
.insights-all:hover svg { transform: translateX(3px); }

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.insight-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.08);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(1,14,208,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.insight-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,122,69,0.30);
  box-shadow: 0 24px 50px -20px rgba(1,14,208,0.20);
}
.insight-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f6f8ff;
}
.insight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.insight-card:hover .insight-image img { transform: scale(1.05); }
.insight-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 8px 12px;
  border-radius: 100px;
  background: rgba(10,18,51,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.insight-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 0;
  font: 500 12px/1 'Inter', sans-serif;
  color: #6b7280;
}
.insight-date { letter-spacing: 0.02em; }
.insight-readtime {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.insight-readtime::before {
  content: "•";
  color: rgba(1,14,208,0.35);
}
.insight-title {
  font: 700 19px/1.35 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  padding: 12px 24px 0;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-excerpt {
  font: 400 14.5px/1.6 'Inter', sans-serif;
  color: #4a5170;
  padding: 0 24px;
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1 'Inter', sans-serif;
  color: #FF7A45;
  padding: 0 24px 24px;
  margin-top: auto;
  transition: gap 0.25s ease;
}
.insight-card:hover .insight-readmore { gap: 10px; }

@media (max-width: 1024px) {
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .insights-grid .insight-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .insights { padding: 80px 18px 70px; }
  .insights-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .insights-h2 { font-size: 30px; }
  .insights-grid { grid-template-columns: 1fr; gap: 22px; }
  .insights-grid .insight-card:nth-child(3) { grid-column: auto; }
  .insight-title { font-size: 17px; }
}

/* ============================================
   SECTION 14 — FAQ
   ============================================ */
.faq {
  position: relative;
  padding: 120px 24px 110px;
  background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);
  color: #0a1233;
}
.faq-inner {
  max-width: 880px;
  margin: 0 auto;
}
.faq-header {
  text-align: center;
  margin-bottom: 56px;
}
.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.faq-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.faq-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.faq-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] {
  border-color: rgba(255,122,69,0.30);
  box-shadow: 0 12px 28px -16px rgba(255,122,69,0.20);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font: 600 17px/1.4 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  transition: color 0.2s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: #010ED0; }
.faq-chevron {
  flex-shrink: 0;
  color: #010ED0;
  transition: transform 0.3s ease, color 0.2s ease;
}
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: #FF7A45;
}
.faq-answer {
  padding: 0 26px 24px;
  font: 400 15px/1.7 'Inter', sans-serif;
  color: #4a5170;
}
@media (max-width: 720px) {
  .faq { padding: 80px 18px 70px; }
  .faq-h2 { font-size: 30px; }
  .faq-question { padding: 18px 20px; font-size: 15.5px; }
  .faq-answer { padding: 0 20px 20px; font-size: 14px; }
}

/* ============================================
   SECTION 15 — FINAL CTA
   ============================================ */
.final-cta {
  position: relative;
  padding: 130px 24px;
  background: linear-gradient(135deg, #050a2e 0%, #0a1145 50%, #0d1556 100%);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.final-cta-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
}
.final-cta-glow--brand {
  width: 600px;
  height: 600px;
  top: -150px;
  left: -150px;
  background: radial-gradient(circle, rgba(124,143,255,0.30) 0%, transparent 70%);
}
.final-cta-glow--accent {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -150px;
  background: radial-gradient(circle, rgba(255,122,69,0.22) 0%, transparent 70%);
}

.final-cta-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  z-index: 1;
}
.final-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffb284;
  padding: 6px 12px;
  border: 1px solid rgba(255,178,132,0.30);
  border-radius: 100px;
  background: rgba(255,122,69,0.10);
  margin-bottom: 22px;
}
.final-cta-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.30);
}
.final-cta-h2 {
  font: 700 56px/1.1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #cdd5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 18px;
}
.final-cta-wow {
  display: inline-block;
  font-weight: 800;
  background: linear-gradient(135deg, #FF7A45 0%, #ffb284 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 4px;
}
.final-cta-sub {
  font: 400 18px/1.6 'Inter', sans-serif;
  color: rgba(205,213,255,0.78);
  margin: 0 0 44px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.final-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 15px/1 'Inter', sans-serif;
  padding: 18px 28px;
  border-radius: 14px;
  letter-spacing: -0.01em;
  transition: all 0.25s ease;
}
.final-cta-btn--primary {
  background: linear-gradient(135deg, #FF7A45 0%, #ffb284 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 14px 30px -8px rgba(255,122,69,0.55);
}
.final-cta-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 20px 40px -8px rgba(255,122,69,0.7);
}
.final-cta-btn--secondary {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.final-cta-btn--secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.32);
  transform: translateY(-3px);
}

.final-cta-reassurance {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  font: 500 13px/1 'Inter', sans-serif;
  color: rgba(205,213,255,0.7);
}
.reassure-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reassure-item svg { color: #a8f0c4; }
.reassure-divider {
  width: 1px;
  height: 12px;
  background: rgba(205,213,255,0.25);
}

@media (max-width: 1024px) {
  .final-cta-h2 { font-size: 44px; }
}
@media (max-width: 720px) {
  .final-cta { padding: 90px 22px; }
  .final-cta-h2 { font-size: 34px; }
  .final-cta-sub { font-size: 16px; margin-bottom: 32px; }
  .final-cta-buttons { flex-direction: column; }
  .final-cta-btn { justify-content: center; }
  .reassure-divider { display: none; }
}
@media (max-width: 480px) {
  .final-cta-h2 { font-size: 28px; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  position: relative;
  background: #040820;
  color: #cdd5ff;
  padding: 96px 24px 36px;
  overflow: hidden;
  border-top: 1px solid rgba(124,143,255,0.10);
}
.footer-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  top: -250px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.footer-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 56px;
  margin-bottom: 64px;
}

/* Brand column */
.footer-brand { max-width: 360px; }
.footer-logo-wrap {
  display: inline-block;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4);
}
.footer-logo {
  height: 40px;
  width: auto;
  display: block;
}
.footer-tagline {
  font: 400 14.5px/1.65 'Inter', sans-serif;
  color: rgba(205,213,255,0.7);
  margin: 0 0 26px;
}
.footer-partners {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-partner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(124,143,255,0.16);
  border-radius: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.footer-partner:hover {
  border-color: rgba(124,143,255,0.32);
  transform: translateY(-2px);
}
.footer-partner-mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 13px/1 'Plus Jakarta Sans', sans-serif;
  color: #fff;
  letter-spacing: -0.02em;
}
.footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.footer-partner-line1 {
  font: 700 12px/1.1 'Plus Jakarta Sans', sans-serif;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 1px;
}
.footer-partner-line2 {
  font: 600 9.5px/1.1 'Inter', sans-serif;
  color: rgba(205,213,255,0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Columns */
.footer-col { min-width: 0; }
.footer-heading {
  font: 700 12px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 22px;
}
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.footer-list a,
.footer-list li,
.footer-list span {
  font: 500 14px/1.4 'Inter', sans-serif;
  color: rgba(205,213,255,0.72);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-list a:hover {
  color: #ffb284;
}
.footer-list--contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-list--contact li svg {
  color: rgba(124,143,255,0.7);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Socials */
.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
.footer-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(124,143,255,0.18);
  color: rgba(205,213,255,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.footer-social:hover {
  background: rgba(255,122,69,0.14);
  border-color: #FF7A45;
  color: #ffb284;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4);
}

/* WOW phone strip */
.footer-phones {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding: 22px 28px;
  margin-bottom: 36px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,122,69,0.08) 0%, transparent 60%),
    rgba(255,255,255,0.025);
  border: 1px solid rgba(124,143,255,0.14);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.footer-phones-label {
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(205,213,255,0.5);
  padding-right: 6px;
}
.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 12px;
  transition: background 0.2s ease;
}
.phone-pill:hover {
  background: rgba(255,255,255,0.04);
}
.phone-label {
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(205,213,255,0.55);
  padding: 5px 10px;
  border: 1px solid rgba(124,143,255,0.16);
  border-radius: 100px;
  background: rgba(124,143,255,0.06);
}
.phone-number {
  font: 700 17px/1 'Plus Jakarta Sans', sans-serif;
  color: #ffffff;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.phone-pill:hover .phone-number { color: #ffe9dc; }
.phone-mnemonic {
  display: inline-grid;
  vertical-align: baseline;
  font-weight: 700;
  font-variant-numeric: normal;
}
.phone-mnemonic .m-303,
.phone-mnemonic .m-wow {
  grid-area: 1 / 1;
  text-align: center;
}
.phone-mnemonic .m-303 {
  animation: swap303 6s infinite;
}
.phone-mnemonic .m-wow {
  text-transform: lowercase;
  color: #FF7A45;
  text-shadow:
    0 0 14px rgba(255,122,69,0.55),
    0 0 24px rgba(255,122,69,0.25);
  animation: swapWow 6s infinite;
}
@keyframes swap303 {
  0%, 35% { opacity: 1; }
  42%, 88% { opacity: 0; }
  95%, 100% { opacity: 1; }
}
@keyframes swapWow {
  0%, 35% { opacity: 0; }
  42%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.phone-divider {
  width: 1px;
  height: 28px;
  background: rgba(124,143,255,0.18);
}
@media (max-width: 820px) {
  .footer-phones { gap: 10px 14px; padding: 20px 18px; }
  .footer-phones-label { width: 100%; text-align: center; padding-right: 0; }
  .phone-divider { display: none; }
  .phone-number { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-mnemonic .m-303 { animation: none; opacity: 1; }
  .phone-mnemonic .m-wow { animation: none; opacity: 0; }
}

/* Divider + bottom bar */
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent);
  margin-bottom: 28px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.footer-copy {
  font: 500 13px/1 'Inter', sans-serif;
  color: rgba(205,213,255,0.55);
  letter-spacing: 0.01em;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 13px/1 'Inter', sans-serif;
}
.footer-legal a {
  color: rgba(205,213,255,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover {
  color: #fff;
}
.footer-legal-sep { color: rgba(124,143,255,0.30); }
.footer-made {
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(205,213,255,0.45);
  padding: 6px 12px;
  border: 1px solid rgba(124,143,255,0.18);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px 40px;
  }
  .footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 600px) {
  .footer { padding: 72px 22px 28px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 48px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }
  .footer-legal { justify-content: center; flex-wrap: wrap; }
}









/* ==========================================================
   Digiwah · WhatsApp Business API page
   Class prefix: dgw-whatsapp-api-  (namespaced for WP theme isolation)
   ========================================================== */

:root {
  /* WhatsApp greens (matching Zoho page wa-section) */
  --dgw-whatsapp-api-green-light: #25D366;
  --dgw-whatsapp-api-green-dark: #128C7E;
  --dgw-whatsapp-api-green-deepest: #075E54;
  --dgw-whatsapp-api-green-glow: rgba(37, 211, 102, 0.35);
  --dgw-whatsapp-api-bubble-out: #DCF8C6;
  --dgw-whatsapp-api-bubble-in: #FFFFFF;

  /* Page-wide light mint wash */
  --dgw-whatsapp-api-bg-1: #f0fdf4;
  --dgw-whatsapp-api-bg-2: #ecfdf5;
  --dgw-whatsapp-api-bg-3: #f7fef9;

  /* Digiwah brand accents */
  --dgw-whatsapp-api-brand-blue: #010ED0;
  --dgw-whatsapp-api-accent-orange: #FF7A45;
  --dgw-whatsapp-api-ink: #0a1233;
  --dgw-whatsapp-api-ink-soft: #1a2342;
  --dgw-whatsapp-api-muted: #4a5170;
  --dgw-whatsapp-api-border: rgba(7, 94, 84, 0.12);
  --dgw-whatsapp-api-card: rgba(255, 255, 255, 0.78);
  --dgw-whatsapp-api-card-solid: #ffffff;

  --dgw-whatsapp-api-radius-sm: 10px;
  --dgw-whatsapp-api-radius-md: 16px;
  --dgw-whatsapp-api-radius-lg: 24px;
  --dgw-whatsapp-api-radius-xl: 32px;

  --dgw-whatsapp-api-shadow-sm: 0 2px 6px rgba(7, 94, 84, 0.06);
  --dgw-whatsapp-api-shadow-md: 0 8px 24px rgba(7, 94, 84, 0.08), 0 2px 6px rgba(7, 94, 84, 0.04);
  --dgw-whatsapp-api-shadow-lg: 0 24px 60px rgba(7, 94, 84, 0.12), 0 4px 12px rgba(7, 94, 84, 0.06);
  --dgw-whatsapp-api-shadow-glow: 0 16px 48px rgba(37, 211, 102, 0.2);

  --dgw-whatsapp-api-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --dgw-whatsapp-api-font-body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--dgw-whatsapp-api-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dgw-whatsapp-api-ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(37, 211, 102, 0.10), transparent 55%),
    radial-gradient(circle at 85% 22%, rgba(18, 140, 126, 0.07), transparent 50%),
    radial-gradient(circle at 50% 65%, rgba(37, 211, 102, 0.05), transparent 60%),
    radial-gradient(circle at 15% 95%, rgba(7, 94, 84, 0.06), transparent 55%),
    linear-gradient(180deg, var(--dgw-whatsapp-api-bg-1) 0%, var(--dgw-whatsapp-api-bg-2) 45%, var(--dgw-whatsapp-api-bg-3) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

.dgw-whatsapp-api-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.dgw-whatsapp-api-section {
  padding: 96px 0;
  position: relative;
}

.dgw-whatsapp-api-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dgw-whatsapp-api-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dgw-whatsapp-api-green-dark);
  background: rgba(37, 211, 102, 0.10);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37, 211, 102, 0.25);
}

.dgw-whatsapp-api-h1 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--dgw-whatsapp-api-ink);
}

.dgw-whatsapp-api-h2 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--dgw-whatsapp-api-ink);
}

.dgw-whatsapp-api-h3 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.dgw-whatsapp-api-lede {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--dgw-whatsapp-api-muted);
}

/* Buttons */
.dgw-whatsapp-api-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.dgw-whatsapp-api-btn-primary {
  background: #ffffff;
  color: var(--dgw-whatsapp-api-green-deepest);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.dgw-whatsapp-api-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24); }

.dgw-whatsapp-api-btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
}
.dgw-whatsapp-api-btn-ghost:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.65); }

.dgw-whatsapp-api-btn-brand {
  background: var(--dgw-whatsapp-api-brand-blue);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(1, 14, 208, 0.25);
}
.dgw-whatsapp-api-btn-brand:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(1, 14, 208, 0.35); }

.dgw-whatsapp-api-btn-outline {
  background: transparent;
  color: var(--dgw-whatsapp-api-green-deepest);
  border: 1.5px solid var(--dgw-whatsapp-api-green-dark);
}
.dgw-whatsapp-api-btn-outline:hover { background: var(--dgw-whatsapp-api-green-dark); color: #fff; }

/* Reveal-on-scroll utility */
.dgw-whatsapp-api-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.dgw-whatsapp-api-reveal.dgw-whatsapp-api-is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================
   NAV
   ========================================================== */
.dgw-whatsapp-api-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 254, 249, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--dgw-whatsapp-api-border);
}
.dgw-whatsapp-api-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.dgw-whatsapp-api-logo { display: flex; align-items: center; gap: 10px; font-family: var(--dgw-whatsapp-api-font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--dgw-whatsapp-api-ink); }
.dgw-whatsapp-api-logo img { height: 30px; width: auto; }
.dgw-whatsapp-api-nav-links { display: flex; gap: 28px; align-items: center; }
.dgw-whatsapp-api-nav-links a { font-size: 14px; font-weight: 500; color: var(--dgw-whatsapp-api-ink-soft); transition: color 0.2s; }
.dgw-whatsapp-api-nav-links a:hover { color: var(--dgw-whatsapp-api-green-dark); }
.dgw-whatsapp-api-nav-cta { padding: 10px 18px; font-size: 14px; }

/* ==========================================================
   HERO
   ========================================================== */
.dgw-whatsapp-api-hero {
  position: relative;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 60%, #075E54 100%);
  color: #ffffff;
  padding: 96px 0 120px;
  overflow: hidden;
}
.dgw-whatsapp-api-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.18), transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(255, 255, 255, 0.10), transparent 50%);
  pointer-events: none;
}
.dgw-whatsapp-api-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.10) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.5;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
}
.dgw-whatsapp-api-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.dgw-whatsapp-api-hero-eyebrow {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.30);
  color: #ffffff;
}
.dgw-whatsapp-api-hero-eyebrow .dgw-whatsapp-api-meta-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0 12px rgba(255,255,255,0.8);
  animation: dgw-whatsapp-api-pulse 2s ease-in-out infinite;
}
@keyframes dgw-whatsapp-api-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }

.dgw-whatsapp-api-hero h1 {
  color: #ffffff;
  margin: 18px 0 22px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}
.dgw-whatsapp-api-hero p.dgw-whatsapp-api-hero-sub {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
  margin-bottom: 32px;
}
.dgw-whatsapp-api-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.dgw-whatsapp-api-hero-trust {
  display: flex; gap: 28px; flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.dgw-whatsapp-api-hero-trust div { display: flex; align-items: center; gap: 6px; }
.dgw-whatsapp-api-hero-trust strong { color: #fff; font-weight: 700; }

/* Hero animated chat */
.dgw-whatsapp-api-chat {
  background: #075E54;
  border-radius: 24px;
  padding: 0;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3), 0 6px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: rotate(2deg);
  transition: transform 0.6s ease;
}
.dgw-whatsapp-api-chat:hover { transform: rotate(0deg); }
.dgw-whatsapp-api-chat-header {
  background: #075E54;
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dgw-whatsapp-api-chat-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  position: relative;
}
.dgw-whatsapp-api-chat-avatar::after {
  content: ''; position: absolute; bottom: -2px; right: -2px;
  width: 14px; height: 14px;
  border: 2px solid #075E54;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 8px rgba(37, 211, 102, 0.7);
  animation: dgw-whatsapp-api-pulse 2.5s ease-in-out infinite;
}
.dgw-whatsapp-api-chat-name { font-family: var(--dgw-whatsapp-api-font-display); font-weight: 700; font-size: 15px; }
.dgw-whatsapp-api-chat-status { font-size: 11px; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 5px; }
.dgw-whatsapp-api-chat-status::before { content: '✓'; background: #25D366; color: #075E54; width: 12px; height: 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; }

.dgw-whatsapp-api-chat-body {
  background: #ECE5DD;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(7, 94, 84, 0.04), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(7, 94, 84, 0.04), transparent 30%);
  padding: 18px 14px;
  height: 460px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.dgw-whatsapp-api-bubble {
  max-width: 78%;
  padding: 9px 12px 7px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.42;
  color: #111;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  position: relative;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  animation: dgw-whatsapp-api-bubble-in 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.dgw-whatsapp-api-bubble.dgw-whatsapp-api-in {
  background: #ffffff;
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.dgw-whatsapp-api-bubble.dgw-whatsapp-api-out {
  background: var(--dgw-whatsapp-api-bubble-out);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.dgw-whatsapp-api-bubble small {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  color: rgba(0,0,0,0.45);
  margin-left: 8px;
  float: right;
  margin-top: 4px;
}
.dgw-whatsapp-api-tick {
  display: inline-flex; gap: 0; color: #4FC3F7; font-size: 11px; line-height: 1; letter-spacing: -3px;
}
.dgw-whatsapp-api-typing {
  background: #ffffff;
  align-self: flex-start;
  padding: 12px 16px;
  border-radius: 10px;
  border-bottom-left-radius: 2px;
  display: inline-flex;
  gap: 4px;
  width: fit-content;
  opacity: 0;
  animation: dgw-whatsapp-api-bubble-in 0.4s ease forwards;
}
.dgw-whatsapp-api-typing span {
  width: 7px; height: 7px;
  background: #888; border-radius: 50%;
  animation: dgw-whatsapp-api-typing 1.2s ease-in-out infinite;
}
.dgw-whatsapp-api-typing span:nth-child(2) { animation-delay: 0.18s; }
.dgw-whatsapp-api-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dgw-whatsapp-api-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes dgw-whatsapp-api-bubble-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bubble timing — staggered reveal */
.dgw-whatsapp-api-bubble:nth-child(1) { animation-delay: 0.5s; }
.dgw-whatsapp-api-bubble:nth-child(2) { animation-delay: 1.6s; }
.dgw-whatsapp-api-typing.dgw-whatsapp-api-t1 { animation-delay: 2.8s; }
.dgw-whatsapp-api-bubble:nth-child(4) { animation-delay: 4.2s; }
.dgw-whatsapp-api-bubble:nth-child(5) { animation-delay: 5.6s; }
.dgw-whatsapp-api-bubble:nth-child(6) { animation-delay: 7.0s; }
.dgw-whatsapp-api-bubble:nth-child(7) { animation-delay: 8.4s; }

/* ==========================================================
   TRUST BAND
   ========================================================== */
.dgw-whatsapp-api-trust {
  padding: 64px 0 32px;
}
.dgw-whatsapp-api-trust-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.dgw-whatsapp-api-stat {
  background: var(--dgw-whatsapp-api-card);
  backdrop-filter: blur(8px);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
}
.dgw-whatsapp-api-stat-num {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-dark), var(--dgw-whatsapp-api-green-deepest));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dgw-whatsapp-api-stat-label {
  font-size: 13px;
  color: var(--dgw-whatsapp-api-muted);
  margin-top: 6px;
  font-weight: 500;
}
.dgw-whatsapp-api-trust-meta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 13px;
  color: var(--dgw-whatsapp-api-muted);
  flex-wrap: wrap;
}
.dgw-whatsapp-api-meta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #1877F2, #0a5cc7);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.25);
}
.dgw-whatsapp-api-meta-badge::before {
  content: 'M'; width: 18px; height: 18px;
  background: #fff; color: #1877F2;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px;
}

/* ==========================================================
   WHAT IS — comparison
   ========================================================== */
.dgw-whatsapp-api-what {
  padding: 88px 0;
}
.dgw-whatsapp-api-what-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.dgw-whatsapp-api-what-head .dgw-whatsapp-api-h2 { margin: 14px 0 18px; }
.dgw-whatsapp-api-what-q {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--dgw-whatsapp-api-green-deepest);
  letter-spacing: -0.012em;
  margin-bottom: 12px;
}
.dgw-whatsapp-api-what-a {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--dgw-whatsapp-api-ink-soft);
  max-width: 680px;
  margin: 0 auto;
}
.dgw-whatsapp-api-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  position: relative;
}
.dgw-whatsapp-api-compare::before {
  content: 'VS';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  z-index: 3;
}
.dgw-whatsapp-api-compare-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  padding: 36px 32px;
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  border: 1px solid var(--dgw-whatsapp-api-border);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-personal {
  border-color: rgba(0, 0, 0, 0.08);
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-business {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border: 1.5px solid rgba(37, 211, 102, 0.35);
  box-shadow: var(--dgw-whatsapp-api-shadow-lg);
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-business::after {
  content: 'You want this';
  position: absolute;
  top: -12px; right: 24px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
.dgw-whatsapp-api-compare-card:hover { transform: translateY(-3px); }
.dgw-whatsapp-api-compare-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 22px;
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-personal .dgw-whatsapp-api-compare-icon { background: rgba(0,0,0,0.06); color: #4a5170; }
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-business .dgw-whatsapp-api-compare-icon { background: rgba(37, 211, 102, 0.15); color: var(--dgw-whatsapp-api-green-dark); }
.dgw-whatsapp-api-compare-card h3 { margin-bottom: 6px; }
.dgw-whatsapp-api-compare-tag { font-size: 12px; color: var(--dgw-whatsapp-api-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 18px; }
.dgw-whatsapp-api-compare-list { display: flex; flex-direction: column; gap: 10px; }
.dgw-whatsapp-api-compare-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px;
  color: var(--dgw-whatsapp-api-ink-soft);
  line-height: 1.5;
}
.dgw-whatsapp-api-compare-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-personal .dgw-whatsapp-api-compare-list li {
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-personal .dgw-whatsapp-api-compare-list li::before {
  content: '×';
  background: rgba(220, 53, 69, 0.12);
  color: #b8323e;
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-business .dgw-whatsapp-api-compare-list li::before {
  content: '✓';
  background: rgba(37, 211, 102, 0.18);
  color: var(--dgw-whatsapp-api-green-dark);
}
.dgw-whatsapp-api-what-foot {
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-what-foot strong { color: var(--dgw-whatsapp-api-green-deepest); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
  .dgw-whatsapp-api-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .dgw-whatsapp-api-chat { margin: 0 auto; transform: rotate(0deg); }
  .dgw-whatsapp-api-trust-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .dgw-whatsapp-api-section { padding: 72px 0; }
  .dgw-whatsapp-api-hero { padding: 64px 0 88px; }
  .dgw-whatsapp-api-nav-links { display: none; }
  .dgw-whatsapp-api-compare { grid-template-columns: 1fr; gap: 24px; }
  .dgw-whatsapp-api-compare::before {
    position: relative; top: auto; left: auto; transform: none;
    margin: 0 auto;
    grid-row: 2;
  }
}
@media (max-width: 480px) {
  .dgw-whatsapp-api-container { padding: 30px 18px 0px; }
  .dgw-whatsapp-api-hero { padding: 48px 0 72px; }
  .dgw-whatsapp-api-hero-ctas { flex-direction: column; align-items: stretch; }
  .dgw-whatsapp-api-hero-ctas .dgw-whatsapp-api-btn { justify-content: center; }
  .dgw-whatsapp-api-trust-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dgw-whatsapp-api-stat { padding: 20px 16px; }
  .dgw-whatsapp-api-compare-card { padding: 28px 22px; }
}

/* ==========================================================
   AUTOMATION GRID (Batch B-1)
   ========================================================== */
.dgw-whatsapp-api-auto { padding: 96px 0; }
.dgw-whatsapp-api-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.dgw-whatsapp-api-section-head .dgw-whatsapp-api-h2 { margin: 14px 0 16px; }
.dgw-whatsapp-api-auto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dgw-whatsapp-api-auto-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 24px 22px;
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-auto-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.dgw-whatsapp-api-auto-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  border-color: rgba(37, 211, 102, 0.3);
}
.dgw-whatsapp-api-auto-card:hover::before { transform: scaleX(1); }
.dgw-whatsapp-api-auto-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(18, 140, 126, 0.10));
  color: var(--dgw-whatsapp-api-green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.dgw-whatsapp-api-auto-title {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.dgw-whatsapp-api-auto-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dgw-whatsapp-api-muted);
}

/* ==========================================================
   INDUSTRIES (Batch B-2) — green gradient tabs
   ========================================================== */
.dgw-whatsapp-api-ind {
  background: linear-gradient(135deg, #075E54 0%, #128C7E 50%, #25D366 100%);
  color: #fff;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-ind::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: 32px 32px;
  opacity: 0.4;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
  pointer-events: none;
}
.dgw-whatsapp-api-ind .dgw-whatsapp-api-section-head .dgw-whatsapp-api-h2 { color: #fff; }
.dgw-whatsapp-api-ind .dgw-whatsapp-api-section-head .dgw-whatsapp-api-lede { color: rgba(255,255,255,0.85); }
.dgw-whatsapp-api-ind .dgw-whatsapp-api-eyebrow {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}
.dgw-whatsapp-api-ind-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: stretch;
}
.dgw-whatsapp-api-ind-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dgw-whatsapp-api-ind-tab {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 16px 18px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 600;
  font-size: 15px;
  display: flex; align-items: center; gap: 12px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dgw-whatsapp-api-ind-tab:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.dgw-whatsapp-api-ind-tab.dgw-whatsapp-api-is-active {
  background: #fff;
  color: var(--dgw-whatsapp-api-green-deepest);
  border-color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  transform: translateX(6px);
}
.dgw-whatsapp-api-ind-tab-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-ind-tab.dgw-whatsapp-api-is-active .dgw-whatsapp-api-ind-tab-icon {
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
}

.dgw-whatsapp-api-ind-panes {
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  padding: 32px;
  backdrop-filter: blur(10px);
  min-height: 360px;
}
.dgw-whatsapp-api-ind-pane { display: none; }
.dgw-whatsapp-api-ind-pane.dgw-whatsapp-api-is-active {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: center;
  animation: dgw-whatsapp-api-fade-in 0.4s ease;
}
@keyframes dgw-whatsapp-api-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dgw-whatsapp-api-ind-copy h3 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  margin-bottom: 14px;
  color: #fff;
  letter-spacing: -0.015em;
}
.dgw-whatsapp-api-ind-copy p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin-bottom: 18px;
}
.dgw-whatsapp-api-ind-list { display: flex; flex-direction: column; gap: 8px; }
.dgw-whatsapp-api-ind-list li {
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  display: flex; align-items: flex-start; gap: 10px;
}
.dgw-whatsapp-api-ind-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 20px; height: 20px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  color: #fff;
  margin-top: 1px;
}
/* Mini chat preview inside pane */
.dgw-whatsapp-api-ind-chat {
  background: #ECE5DD;
  border-radius: 14px;
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  min-height: 240px;
}
.dgw-whatsapp-api-ind-chat .dgw-whatsapp-api-bubble {
  font-size: 12.5px;
  padding: 7px 10px 6px;
  animation: none;
  opacity: 1;
  transform: none;
}

/* ==========================================================
   CHATBOT BUILDER + AI (Batch B-3)
   ========================================================== */
.dgw-whatsapp-api-builder { padding: 96px 0; }
.dgw-whatsapp-api-builder-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.dgw-whatsapp-api-builder-copy .dgw-whatsapp-api-h2 { margin: 14px 0 18px; }
.dgw-whatsapp-api-builder-copy .dgw-whatsapp-api-lede { margin-bottom: 24px; }
.dgw-whatsapp-api-builder-bullets { display: grid; gap: 14px; margin-bottom: 28px; }
.dgw-whatsapp-api-builder-bullets li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: var(--dgw-whatsapp-api-ink-soft); line-height: 1.55;
  position: relative;
  padding-left: 34px;
}
.dgw-whatsapp-api-builder-bullets li strong { color: var(--dgw-whatsapp-api-ink); font-weight: 700; }
.dgw-whatsapp-api-builder-bullets li::before {
  content: '✓';
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.dgw-whatsapp-api-ai-callout {
  background: linear-gradient(135deg, rgba(1, 14, 208, 0.06), rgba(37, 211, 102, 0.06));
  border: 1px solid rgba(1, 14, 208, 0.15);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start;
}
.dgw-whatsapp-api-ai-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-brand-blue), #3b48ff);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-ai-callout h4 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700; font-size: 15px; color: var(--dgw-whatsapp-api-ink); margin-bottom: 4px;
}
.dgw-whatsapp-api-ai-callout p { font-size: 13.5px; color: var(--dgw-whatsapp-api-muted); line-height: 1.5; }

/* Visual flow */
.dgw-whatsapp-api-builder-vis {
  background: var(--dgw-whatsapp-api-card-solid);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  border: 1px solid var(--dgw-whatsapp-api-border);
  box-shadow: var(--dgw-whatsapp-api-shadow-lg);
  padding: 28px;
  position: relative;
}
.dgw-whatsapp-api-flow { display: flex; flex-direction: column; gap: 8px; }
.dgw-whatsapp-api-flow-node {
  background: linear-gradient(180deg, #ffffff, #f0fdf4);
  border: 1.5px solid rgba(37, 211, 102, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 12px rgba(7, 94, 84, 0.06);
}
.dgw-whatsapp-api-flow-node-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-flow-node-text { font-size: 13px; color: var(--dgw-whatsapp-api-ink); line-height: 1.35; }
.dgw-whatsapp-api-flow-node-text strong {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}
.dgw-whatsapp-api-flow-arrow {
  width: 2px; height: 18px;
  background: linear-gradient(180deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  margin: 0 auto;
  position: relative;
}
.dgw-whatsapp-api-flow-arrow::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--dgw-whatsapp-api-green-dark);
}
.dgw-whatsapp-api-flow-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ==========================================================
   DAILY-DRIVER TOOLKIT — Templates · Broadcasts · CSV
   ========================================================== */
.dgw-whatsapp-api-tools {
  padding: 96px 0;
  position: relative;
  background:
    radial-gradient(circle at 20% 0%, rgba(37, 211, 102, 0.05), transparent 40%),
    linear-gradient(180deg, #fafdf6 0%, #f4faf6 100%);
}
.dgw-whatsapp-api-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dgw-whatsapp-api-tools-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  overflow: hidden;
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-tools-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dgw-whatsapp-api-shadow-lg);
}

/* The mock UI panel at the top of each card */
.dgw-whatsapp-api-tools-mock {
  background: linear-gradient(180deg, #f7fef9 0%, #ecfdf5 100%);
  border-bottom: 1px solid rgba(7, 94, 84, 0.10);
  padding: 18px 18px 22px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.dgw-whatsapp-api-tools-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(7, 94, 84, 0.15);
}
.dgw-whatsapp-api-tools-mock-tab {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--dgw-whatsapp-api-green-deepest);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.dgw-whatsapp-api-tools-mock-count {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 10.5px;
  color: var(--dgw-whatsapp-api-muted);
}

/* Pills (status indicators) */
.dgw-whatsapp-api-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dgw-whatsapp-api-pill-ok { background: rgba(37, 211, 102, 0.18); color: var(--dgw-whatsapp-api-green-deepest); }
.dgw-whatsapp-api-pill-warn { background: rgba(255, 180, 0, 0.18); color: #a06600; }
.dgw-whatsapp-api-pill-live { background: rgba(255, 122, 69, 0.18); color: #c45a30; }
.dgw-whatsapp-api-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF7A45;
  animation: dgw-whatsapp-api-pulse 1.6s ease-in-out infinite;
}

/* === Template list === */
.dgw-whatsapp-api-tmpl {
  background: #fff;
  border: 1px solid rgba(7, 94, 84, 0.10);
  border-radius: 10px;
  padding: 9px 11px 10px;
  box-shadow: 0 1px 3px rgba(7, 94, 84, 0.04);
}
.dgw-whatsapp-api-tmpl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.dgw-whatsapp-api-tmpl-name {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dgw-whatsapp-api-ink);
}
.dgw-whatsapp-api-tmpl-body {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-tmpl-body em {
  font-style: normal;
  background: rgba(1, 14, 208, 0.08);
  color: var(--dgw-whatsapp-api-brand-blue);
  padding: 0 4px;
  border-radius: 3px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 10.5px;
}

/* === Campaign card === */
.dgw-whatsapp-api-cmp {
  background: #fff;
  border: 1px solid rgba(7, 94, 84, 0.10);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(7, 94, 84, 0.04);
  flex: 1;
}
.dgw-whatsapp-api-cmp-name {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 4px;
}
.dgw-whatsapp-api-cmp-meta {
  font-size: 11px;
  color: var(--dgw-whatsapp-api-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dgw-whatsapp-api-cmp-meta strong { color: var(--dgw-whatsapp-api-ink); font-weight: 700; }
.dgw-whatsapp-api-cmp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.dgw-whatsapp-api-cmp-stat {
  background: linear-gradient(180deg, #f7fef9, #ecfdf5);
  border: 1px solid rgba(37, 211, 102, 0.18);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.dgw-whatsapp-api-cmp-stat-num {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--dgw-whatsapp-api-green-deepest);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.dgw-whatsapp-api-cmp-stat-label {
  font-size: 9.5px;
  color: var(--dgw-whatsapp-api-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
  font-weight: 600;
}
.dgw-whatsapp-api-cmp-bar {
  height: 6px;
  background: rgba(7, 94, 84, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.dgw-whatsapp-api-cmp-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  border-radius: 999px;
  animation: dgw-whatsapp-api-cmp-fill 1.6s ease-out;
}
@keyframes dgw-whatsapp-api-cmp-fill { from { width: 0; } }
.dgw-whatsapp-api-cmp-bar-label {
  font-size: 10.5px;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-cmp-bar-label strong { color: var(--dgw-whatsapp-api-green-deepest); font-weight: 700; }

/* === CSV mock === */
.dgw-whatsapp-api-csv { display: flex; flex-direction: column; gap: 8px; }
.dgw-whatsapp-api-csv-drop {
  background: #fff;
  border: 1.5px dashed rgba(37, 211, 102, 0.4);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dgw-whatsapp-api-csv-drop-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-csv-drop-text strong {
  display: block;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--dgw-whatsapp-api-ink);
}
.dgw-whatsapp-api-csv-drop-text span {
  display: block;
  font-size: 10.5px;
  color: var(--dgw-whatsapp-api-muted);
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  margin-top: 1px;
}
.dgw-whatsapp-api-csv-progress {
  height: 4px;
  background: rgba(7, 94, 84, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.dgw-whatsapp-api-csv-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  border-radius: 999px;
  animation: dgw-whatsapp-api-cmp-fill 2s ease-out;
}
.dgw-whatsapp-api-csv-map {
  background: #fff;
  border: 1px solid rgba(7, 94, 84, 0.10);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dgw-whatsapp-api-csv-map-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(7, 94, 84, 0.08);
}
.dgw-whatsapp-api-csv-map-row:last-child { border-bottom: none; }
.dgw-whatsapp-api-csv-col {
  background: rgba(1, 14, 208, 0.08);
  color: var(--dgw-whatsapp-api-brand-blue);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  justify-self: start;
}
.dgw-whatsapp-api-csv-arrow {
  color: var(--dgw-whatsapp-api-green-dark);
  font-size: 13px;
  font-weight: 700;
}
.dgw-whatsapp-api-csv-field {
  background: rgba(37, 211, 102, 0.14);
  color: var(--dgw-whatsapp-api-green-deepest);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  justify-self: start;
}

/* === Card info section === */
.dgw-whatsapp-api-tools-info {
  padding: 24px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dgw-whatsapp-api-tools-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(18, 140, 126, 0.10));
  color: var(--dgw-whatsapp-api-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.dgw-whatsapp-api-tools-info h3 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 8px;
  letter-spacing: -0.012em;
}
.dgw-whatsapp-api-tools-info p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dgw-whatsapp-api-muted);
  margin-bottom: 16px;
}
.dgw-whatsapp-api-tools-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dgw-whatsapp-api-tools-list li {
  font-size: 13px;
  color: var(--dgw-whatsapp-api-ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.dgw-whatsapp-api-tools-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 16px; height: 16px;
  background: rgba(37, 211, 102, 0.18);
  color: var(--dgw-whatsapp-api-green-dark);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  margin-top: 2px;
}
.dgw-whatsapp-api-tools-list code {
  background: rgba(1, 14, 208, 0.08);
  color: var(--dgw-whatsapp-api-brand-blue);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 11.5px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
}

/* Responsive */
@media (max-width: 1024px) {
  .dgw-whatsapp-api-tools-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
}
@media (max-width: 880px) {
  .dgw-whatsapp-api-tools { padding: 72px 0; }
  .dgw-whatsapp-api-tools-mock { min-height: auto; padding: 16px 16px 18px; }
  .dgw-whatsapp-api-tools-info { padding: 22px 20px 24px; }
}

/* ==========================================================
   AGENTIC AI — Live demo on WhatsApp chat background
   ========================================================== */
.dgw-whatsapp-api-agent2 {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-agent2-eyebrow {
  background: rgba(255, 122, 69, 0.10);
  color: #c45a30;
  border-color: rgba(255, 122, 69, 0.25);
}

/* --- Scenario tabs --- */
.dgw-whatsapp-api-agent2-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
.dgw-whatsapp-api-agent2-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1.5px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  font-family: var(--dgw-whatsapp-api-font-body);
}
.dgw-whatsapp-api-agent2-tab:hover {
  transform: translateY(-2px);
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  border-color: rgba(37, 211, 102, 0.4);
}
.dgw-whatsapp-api-agent2-tab.dgw-whatsapp-api-is-active {
  background: linear-gradient(135deg, #ffffff, #f0fdf4);
  border-color: var(--dgw-whatsapp-api-green-dark);
  box-shadow: 0 12px 32px rgba(7, 94, 84, 0.14);
}
.dgw-whatsapp-api-agent2-tab-emoji {
  font-size: 28px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-agent2-tab-title {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 2px;
}
.dgw-whatsapp-api-agent2-tab-sub {
  font-size: 11.5px;
  color: var(--dgw-whatsapp-api-muted);
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  letter-spacing: 0.01em;
}

/* --- Stage with WhatsApp chat texture background --- */
.dgw-whatsapp-api-agent2-stage {
  position: relative;
  border-radius: var(--dgw-whatsapp-api-radius-xl);
  padding: 48px 36px 36px;
  overflow: hidden;
  background: #ECE5DD;
  box-shadow: 0 32px 80px rgba(7, 94, 84, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.dgw-whatsapp-api-agent2-stage-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: #ECE5DD;
  background-image:
    radial-gradient(circle at 10% 12%, rgba(7, 94, 84, 0.06), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(7, 94, 84, 0.05), transparent 30%),
    radial-gradient(circle at 30% 80%, rgba(37, 211, 102, 0.06), transparent 32%),
    radial-gradient(circle at 78% 88%, rgba(7, 94, 84, 0.05), transparent 30%);
}
.dgw-whatsapp-api-agent2-stage-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(7, 94, 84, 0.08) 1px, transparent 0);
  background-size: 18px 18px;
  opacity: 0.6;
}

/* SVG connectors overlay */
.dgw-whatsapp-api-agent2-svg {
  position: absolute;
  inset: 48px 36px auto 36px;
  width: calc(100% - 72px);
  height: 460px;
  pointer-events: none;
  z-index: 1;
}
.dgw-whatsapp-api-agent2-flow {
  stroke-dasharray: 8 12;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dgw-whatsapp-api-agent2-flow.dgw-whatsapp-api-is-flowing {
  opacity: 1;
  animation: dgw-whatsapp-api-agent2-flow-anim 1.2s linear infinite;
}
@keyframes dgw-whatsapp-api-agent2-flow-anim {
  to { stroke-dashoffset: -40; }
}

/* Three-column layout */
.dgw-whatsapp-api-agent2-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 320px 1fr 280px;
  gap: 32px;
  align-items: start;
}

/* ===== Phone (column 1) ===== */
.dgw-whatsapp-api-agent2-phone { position: relative; }
.dgw-whatsapp-api-agent2-phone-frame {
  background: #075E54;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.18);
  border: 8px solid #1a1a1a;
}
.dgw-whatsapp-api-agent2-phone-head {
  background: #075E54;
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dgw-whatsapp-api-agent2-phone-back {
  font-size: 22px;
  line-height: 1;
  color: rgba(255,255,255,0.7);
}
.dgw-whatsapp-api-agent2-phone-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dgw-whatsapp-api-font-display); font-weight: 800; font-size: 14px; color: #fff;
}
.dgw-whatsapp-api-agent2-phone-name {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 14px;
}
.dgw-whatsapp-api-agent2-phone-online {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; gap: 5px;
}
.dgw-whatsapp-api-agent2-phone-online span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #25D366; box-shadow: 0 0 6px #25D366;
  animation: dgw-whatsapp-api-pulse 2s ease-in-out infinite;
}
.dgw-whatsapp-api-agent2-phone-icons {
  margin-left: auto;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 4px;
}
.dgw-whatsapp-api-agent2-phone-body {
  background: #ECE5DD;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(7, 94, 84, 0.06), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(7, 94, 84, 0.05), transparent 30%);
  padding: 14px 12px;
  height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dgw-whatsapp-api-agent2-phone-body::-webkit-scrollbar { width: 6px; }
.dgw-whatsapp-api-agent2-phone-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.dgw-whatsapp-api-agent2-phone-input {
  background: #075E54;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dgw-whatsapp-api-agent2-phone-input-text {
  flex: 1;
  background: rgba(255,255,255,0.95);
  color: #555;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 18px;
  font-family: var(--dgw-whatsapp-api-font-body);
}
.dgw-whatsapp-api-agent2-phone-mic {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4);
}

/* Bubbles inside the phone */
.dgw-whatsapp-api-agent2-bub {
  max-width: 80%;
  padding: 7px 10px 5px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #111;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  position: relative;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  animation: dgw-whatsapp-api-agent2-bub-in 0.4s cubic-bezier(0.2,0.7,0.3,1) forwards;
  word-wrap: break-word;
}
@keyframes dgw-whatsapp-api-agent2-bub-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dgw-whatsapp-api-agent2-bub-in {
  background: #ffffff;
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.dgw-whatsapp-api-agent2-bub-out {
  background: #DCF8C6;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.dgw-whatsapp-api-agent2-bub small {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  font-size: 9.5px;
  color: rgba(0,0,0,0.45);
  margin-left: 6px;
  float: right;
  margin-top: 3px;
}
.dgw-whatsapp-api-agent2-bub-typing {
  background: #ffffff;
  align-self: flex-start;
  padding: 9px 13px;
  border-radius: 8px;
  border-bottom-left-radius: 2px;
  display: inline-flex;
  gap: 3px;
  width: fit-content;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  opacity: 0;
  animation: dgw-whatsapp-api-agent2-bub-in 0.3s ease forwards;
}
.dgw-whatsapp-api-agent2-bub-typing span {
  width: 6px; height: 6px; background: #888; border-radius: 50%;
  animation: dgw-whatsapp-api-typing 1.2s ease-in-out infinite;
}
.dgw-whatsapp-api-agent2-bub-typing span:nth-child(2) { animation-delay: 0.18s; }
.dgw-whatsapp-api-agent2-bub-typing span:nth-child(3) { animation-delay: 0.36s; }

.dgw-whatsapp-api-agent2-phone-tag,
.dgw-whatsapp-api-agent2-brain-tag,
.dgw-whatsapp-api-agent2-actions-tag {
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  background: #075E54;
  color: #fff;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 3;
}
.dgw-whatsapp-api-agent2-phone { padding-bottom: 8px; }
.dgw-whatsapp-api-agent2-brain { position: relative; padding-bottom: 8px; }
.dgw-whatsapp-api-agent2-actions { position: relative; padding-bottom: 8px; }
.dgw-whatsapp-api-agent2-brain-tag { background: var(--dgw-whatsapp-api-brand-blue); }
.dgw-whatsapp-api-agent2-actions-tag { background: #FF7A45; }

/* ===== Brain (column 2) ===== */
.dgw-whatsapp-api-agent2-brain-orb {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.dgw-whatsapp-api-agent2-brain-ring {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1.5px dashed rgba(7, 94, 84, 0.25);
  animation: dgw-whatsapp-api-spin 28s linear infinite;
}
.dgw-whatsapp-api-agent2-brain-ring-2 {
  width: 140px; height: 140px;
  border: 1px dashed rgba(1, 14, 208, 0.20);
  animation: dgw-whatsapp-api-spin-rev 22s linear infinite;
}
@keyframes dgw-whatsapp-api-spin { to { transform: rotate(360deg); } }
@keyframes dgw-whatsapp-api-spin-rev { to { transform: rotate(-360deg); } }
.dgw-whatsapp-api-agent2-brain-core {
  position: relative;
  z-index: 2;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 2px solid var(--dgw-whatsapp-api-green-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(7, 94, 84, 0.20), inset 0 -4px 8px rgba(7, 94, 84, 0.06);
}
.dgw-whatsapp-api-agent2-brain-core::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.30), rgba(1, 14, 208, 0.20));
  z-index: -1;
  filter: blur(14px);
  opacity: 0.85;
  animation: dgw-whatsapp-api-pulse 2.4s ease-in-out infinite;
}
.dgw-whatsapp-api-agent2-brain-icon {
  font-size: 30px;
  margin-bottom: 2px;
}
.dgw-whatsapp-api-agent2-brain-label {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 11px;
  color: var(--dgw-whatsapp-api-green-deepest);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dgw-whatsapp-api-agent2-brain-status {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 9.5px;
  color: var(--dgw-whatsapp-api-muted);
  margin-top: 2px;
  text-align: center;
  max-width: 95px;
  line-height: 1.2;
}

.dgw-whatsapp-api-agent2-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dgw-whatsapp-api-agent2-tool {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(7, 94, 84, 0.10);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: var(--dgw-whatsapp-api-font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--dgw-whatsapp-api-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
  opacity: 0.7;
}
.dgw-whatsapp-api-agent2-tool span { font-size: 14px; }
.dgw-whatsapp-api-agent2-tool.dgw-whatsapp-api-is-active {
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  border-color: var(--dgw-whatsapp-api-green-dark);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

/* ===== Actions feed (column 3) ===== */
.dgw-whatsapp-api-agent2-actions {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 12px 32px rgba(7, 94, 84, 0.10);
  border: 1px solid rgba(7, 94, 84, 0.08);
  backdrop-filter: blur(10px);
  min-height: 360px;
}
.dgw-whatsapp-api-agent2-actions-head {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dgw-whatsapp-api-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(7, 94, 84, 0.15);
  margin-bottom: 14px;
}
.dgw-whatsapp-api-agent2-actions-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 8px #FF7A45;
  animation: dgw-whatsapp-api-pulse 2s ease-in-out infinite;
}
.dgw-whatsapp-api-agent2-actions-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dgw-whatsapp-api-agent2-action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--dgw-whatsapp-api-ink-soft);
  line-height: 1.45;
  padding: 9px 11px;
  background: linear-gradient(135deg, #fafdf6, #f0fdf4);
  border-radius: 9px;
  border-left: 2.5px solid var(--dgw-whatsapp-api-green-dark);
  opacity: 0;
  transform: translateX(8px);
  animation: dgw-whatsapp-api-agent2-action-in 0.4s ease forwards;
}
@keyframes dgw-whatsapp-api-agent2-action-in {
  to { opacity: 1; transform: translateX(0); }
}
.dgw-whatsapp-api-agent2-action-icon {
  font-size: 15px;
  line-height: 1.2;
  flex-shrink: 0;
}
.dgw-whatsapp-api-agent2-action-text { flex: 1; }

/* Replay button */
.dgw-whatsapp-api-agent2-replay {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-top: 36px;
}
.dgw-whatsapp-api-agent2-replay-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(7, 94, 84, 0.20);
  color: var(--dgw-whatsapp-api-green-deepest);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
}
.dgw-whatsapp-api-agent2-replay-btn:hover {
  background: var(--dgw-whatsapp-api-green-dark);
  color: #fff;
  border-color: var(--dgw-whatsapp-api-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(7, 94, 84, 0.20);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .dgw-whatsapp-api-agent2-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .dgw-whatsapp-api-agent2-actions { grid-column: 1 / -1; min-height: auto; }
  .dgw-whatsapp-api-agent2-svg { display: none; }
  .dgw-whatsapp-api-agent2-actions-tag { bottom: auto; top: -14px; }
}
@media (max-width: 880px) {
  .dgw-whatsapp-api-agent2 { padding: 72px 0; }
  .dgw-whatsapp-api-agent2-tabs { grid-template-columns: 1fr; gap: 10px; }
  .dgw-whatsapp-api-agent2-grid { grid-template-columns: 1fr; gap: 28px; }
  .dgw-whatsapp-api-agent2-stage { padding: 32px 18px 24px; }
  .dgw-whatsapp-api-agent2-tools { grid-template-columns: 1fr 1fr; }
  .dgw-whatsapp-api-agent2-phone-frame { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .dgw-whatsapp-api-agent2-tab { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; }
  .dgw-whatsapp-api-agent2-tab-emoji { font-size: 22px; }
}

/* ==========================================================
   INTEGRATIONS MARQUEE (Batch C-1)
   ========================================================== */
.dgw-whatsapp-api-integ {
  padding: 80px 0;
  overflow: hidden;
  position: relative;
}
.dgw-whatsapp-api-integ .dgw-whatsapp-api-section-head { margin-bottom: 40px; }
.dgw-whatsapp-api-marquee {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dgw-whatsapp-api-marquee-row {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: dgw-whatsapp-api-scroll-left 40s linear infinite;
}
.dgw-whatsapp-api-marquee-row.dgw-whatsapp-api-rev {
  animation: dgw-whatsapp-api-scroll-right 40s linear infinite;
}
.dgw-whatsapp-api-marquee-row:hover { animation-play-state: paused; }
@keyframes dgw-whatsapp-api-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes dgw-whatsapp-api-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.dgw-whatsapp-api-logo-chip {
  flex-shrink: 0;
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: 12px;
  padding: 14px 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--dgw-whatsapp-api-ink-soft);
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dgw-whatsapp-api-logo-chip:hover { transform: translateY(-2px); box-shadow: var(--dgw-whatsapp-api-shadow-md); }
.dgw-whatsapp-api-logo-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
}

/* ==========================================================
   ONBOARDING STEPS (Batch C-2)
   ========================================================== */
.dgw-whatsapp-api-steps { padding: 96px 0; }
.dgw-whatsapp-api-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.dgw-whatsapp-api-steps-grid::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12.5%; right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark), var(--dgw-whatsapp-api-green-deepest));
  opacity: 0.4;
  z-index: 0;
}
.dgw-whatsapp-api-step { position: relative; z-index: 1; text-align: center; }
.dgw-whatsapp-api-step-num {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--dgw-whatsapp-api-card-solid);
  border: 2px solid rgba(37, 211, 102, 0.35);
  color: var(--dgw-whatsapp-api-green-deepest);
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(7, 94, 84, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.dgw-whatsapp-api-step:hover .dgw-whatsapp-api-step-num {
  transform: scale(1.06);
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
}
.dgw-whatsapp-api-step-title {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 8px;
}
.dgw-whatsapp-api-step-desc {
  font-size: 13.5px;
  color: var(--dgw-whatsapp-api-muted);
  line-height: 1.55;
}

/* ==========================================================
   PRICING (Batch C-3)
   ========================================================== */
.dgw-whatsapp-api-price { padding: 96px 0; }
.dgw-whatsapp-api-price-shell {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--dgw-whatsapp-api-card-solid);
  border-radius: var(--dgw-whatsapp-api-radius-xl);
  overflow: hidden;
  box-shadow: var(--dgw-whatsapp-api-shadow-lg);
  border: 1px solid var(--dgw-whatsapp-api-border);
}
.dgw-whatsapp-api-price-left {
  background: linear-gradient(135deg, #075E54 0%, #128C7E 60%, #25D366 100%);
  color: #fff;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-price-left::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: 24px 24px;
  opacity: 0.4;
  pointer-events: none;
}
.dgw-whatsapp-api-price-tag {
  display: inline-block;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  position: relative; z-index: 2;
}
.dgw-whatsapp-api-price-amount {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 6px;
  position: relative; z-index: 2;
}
.dgw-whatsapp-api-price-amount sub {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 4px;
  opacity: 0.85;
  vertical-align: baseline;
}
.dgw-whatsapp-api-price-bill {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 20px;
  position: relative; z-index: 2;
}
.dgw-whatsapp-api-price-note {
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 16px;
  margin-top: 16px;
  position: relative; z-index: 2;
}
.dgw-whatsapp-api-price-credits {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
  position: relative; z-index: 2;
  backdrop-filter: blur(6px);
}
.dgw-whatsapp-api-price-credits-num {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.dgw-whatsapp-api-price-credits-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
  font-family: var(--dgw-whatsapp-api-font-display);
}
.dgw-whatsapp-api-price-credits-label small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.dgw-whatsapp-api-price-warn {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 180, 0, 0.45);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative; z-index: 2;
  backdrop-filter: blur(6px);
  border-left: 3px solid #FFB400;
}
.dgw-whatsapp-api-price-warn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 12.5px;
  color: #FFD66B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.dgw-whatsapp-api-price-warn-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #FFB400;
  color: #5a3a00;
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dgw-whatsapp-api-price-warn p {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}
.dgw-whatsapp-api-price-warn p strong { color: #fff; font-weight: 700; }
.dgw-whatsapp-api-price-warn p em { font-style: normal; font-weight: 700; color: #FFD66B; }
.dgw-whatsapp-api-price-foot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--dgw-whatsapp-api-muted);
  text-align: center;
}
.dgw-whatsapp-api-price-foot strong { color: var(--dgw-whatsapp-api-green-deepest); font-weight: 700; }
.dgw-whatsapp-api-price-right { padding: 40px 36px; }
.dgw-whatsapp-api-price-right h3 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 14px;
  letter-spacing: -0.012em;
}
.dgw-whatsapp-api-price-list {
  display: flex; flex-direction: column; gap: 11px;
  margin-bottom: 24px;
}
.dgw-whatsapp-api-price-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  color: var(--dgw-whatsapp-api-ink-soft);
  line-height: 1.5;
}
.dgw-whatsapp-api-price-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 18px; height: 18px;
  background: rgba(37, 211, 102, 0.18);
  color: var(--dgw-whatsapp-api-green-dark);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  margin-top: 2px;
}

/* ==========================================================
   ELIGIBILITY (Batch C-4)
   ========================================================== */
.dgw-whatsapp-api-elig { padding: 80px 0 96px; }
.dgw-whatsapp-api-elig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dgw-whatsapp-api-elig-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 28px 24px;
  text-align: left;
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-elig-card:hover { transform: translateY(-4px); box-shadow: var(--dgw-whatsapp-api-shadow-md); }
.dgw-whatsapp-api-elig-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(18, 140, 126, 0.10));
  color: var(--dgw-whatsapp-api-green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.dgw-whatsapp-api-elig-card h4 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 8px;
}
.dgw-whatsapp-api-elig-card p {
  font-size: 13.5px;
  color: var(--dgw-whatsapp-api-muted);
  line-height: 1.55;
}
.dgw-whatsapp-api-elig-foot {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-elig-foot a {
  color: var(--dgw-whatsapp-api-green-dark);
  font-weight: 600;
  border-bottom: 1.5px solid rgba(18, 140, 126, 0.4);
}

/* ==========================================================
   TESTIMONIALS (Batch D-1)
   ========================================================== */
.dgw-whatsapp-api-test { padding: 96px 0; }
.dgw-whatsapp-api-test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dgw-whatsapp-api-test-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  padding: 32px 28px;
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-test-card:hover { transform: translateY(-4px); box-shadow: var(--dgw-whatsapp-api-shadow-md); }
.dgw-whatsapp-api-test-card::before {
  content: '\201C';
  position: absolute;
  top: -8px; left: 24px;
  font-family: 'Georgia', serif;
  font-size: 80px;
  line-height: 1;
  color: rgba(37, 211, 102, 0.18);
  font-weight: 700;
}
.dgw-whatsapp-api-test-stars {
  display: flex; gap: 3px; margin-bottom: 14px;
  color: #FFB400; font-size: 14px;
  letter-spacing: 1px;
}
.dgw-whatsapp-api-test-quote {
  font-size: 15px;
  color: var(--dgw-whatsapp-api-ink-soft);
  line-height: 1.6;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}
.dgw-whatsapp-api-test-author { display: flex; align-items: center; gap: 12px; }
.dgw-whatsapp-api-test-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.dgw-whatsapp-api-test-name { font-family: var(--dgw-whatsapp-api-font-display); font-weight: 700; font-size: 14.5px; color: var(--dgw-whatsapp-api-ink); }
.dgw-whatsapp-api-test-role { font-size: 12.5px; color: var(--dgw-whatsapp-api-muted); }

/* ==========================================================
   FAQ (Batch D-2)
   ========================================================== */
.dgw-whatsapp-api-faq { padding: 96px 0; }
.dgw-whatsapp-api-faq-shell { max-width: 820px; margin: 0 auto; }
.dgw-whatsapp-api-faq-item {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.dgw-whatsapp-api-faq-item.dgw-whatsapp-api-is-open {
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  border-color: rgba(37, 211, 102, 0.3);
}
.dgw-whatsapp-api-faq-q {
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--dgw-whatsapp-api-ink);
  user-select: none;
  width: 100%;
  text-align: left;
}
.dgw-whatsapp-api-faq-q-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.14);
  color: var(--dgw-whatsapp-api-green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.dgw-whatsapp-api-faq-item.dgw-whatsapp-api-is-open .dgw-whatsapp-api-faq-q-icon {
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  transform: rotate(45deg);
}
.dgw-whatsapp-api-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.dgw-whatsapp-api-faq-a-inner {
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-faq-item.dgw-whatsapp-api-is-open .dgw-whatsapp-api-faq-a { max-height: 600px; }

/* ==========================================================
   FINAL CTA (Batch D-3)
   ========================================================== */
.dgw-whatsapp-api-cta {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 60%, #075E54 100%);
  color: #fff;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.18), transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(255,255,255,0.12), transparent 50%);
}
.dgw-whatsapp-api-cta::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.4;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
}
.dgw-whatsapp-api-cta-inner {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.dgw-whatsapp-api-cta h2 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin-bottom: 18px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.dgw-whatsapp-api-cta p {
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(255,255,255,0.92);
  margin-bottom: 30px;
  line-height: 1.6;
}
.dgw-whatsapp-api-cta-actions {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}

/* ==========================================================
   FOOTER (Batch D-4)
   ========================================================== */
.dgw-whatsapp-api-footer {
  background: #051c1a;
  color: rgba(255,255,255,0.78);
  padding: 64px 0 28px;
}
.dgw-whatsapp-api-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 40px;
}
.dgw-whatsapp-api-footer-brand .dgw-whatsapp-api-logo { color: #fff; margin-bottom: 12px; }
.dgw-whatsapp-api-footer-tag {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  max-width: 320px;
  margin-bottom: 16px;
}
.dgw-whatsapp-api-footer-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(24, 119, 242, 0.18);
  border: 1px solid rgba(24, 119, 242, 0.3);
  color: #6FA8F5;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.dgw-whatsapp-api-footer h5 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.dgw-whatsapp-api-footer-links { display: flex; flex-direction: column; gap: 10px; }
.dgw-whatsapp-api-footer-links a {
  font-size: 13.5px;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
}
.dgw-whatsapp-api-footer-links a:hover { color: #25D366; }
.dgw-whatsapp-api-footer-contact { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.65); }
.dgw-whatsapp-api-footer-contact a { color: rgba(255,255,255,0.85); }
.dgw-whatsapp-api-footer-contact a:hover { color: #25D366; }
.dgw-whatsapp-api-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
}
.dgw-whatsapp-api-footer-bottom-links { display: flex; gap: 18px; }
.dgw-whatsapp-api-footer-bottom-links a:hover { color: #25D366; }

/* ==========================================================
   STICKY WHATSAPP FAB
   ========================================================== */
.dgw-whatsapp-api-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 90;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45), 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: dgw-whatsapp-api-fab-in 0.5s ease 1.2s both;
}
.dgw-whatsapp-api-fab:hover { transform: scale(1.08); box-shadow: 0 16px 40px rgba(37, 211, 102, 0.55); }
.dgw-whatsapp-api-fab::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0.6;
  animation: dgw-whatsapp-api-fab-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dgw-whatsapp-api-fab-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes dgw-whatsapp-api-fab-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ==========================================================
   RESPONSIVE for new sections
   ========================================================== */
@media (max-width: 1024px) {
  .dgw-whatsapp-api-auto-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-whatsapp-api-ind-shell { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-ind-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .dgw-whatsapp-api-ind-tab { flex-shrink: 0; min-width: 200px; }
  .dgw-whatsapp-api-ind-tab.dgw-whatsapp-api-is-active { transform: none; }
  .dgw-whatsapp-api-ind-pane.dgw-whatsapp-api-is-active { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-builder-grid { grid-template-columns: 1fr; gap: 40px; }
  .dgw-whatsapp-api-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .dgw-whatsapp-api-steps-grid::before { display: none; }
  .dgw-whatsapp-api-test-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .dgw-whatsapp-api-elig-grid { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 880px) {
  .dgw-whatsapp-api-auto { padding: 72px 0; }
  .dgw-whatsapp-api-ind { padding: 72px 0; }
  .dgw-whatsapp-api-builder { padding: 72px 0; }
  .dgw-whatsapp-api-steps { padding: 72px 0; }
  .dgw-whatsapp-api-price { padding: 72px 0; }
  .dgw-whatsapp-api-elig { padding: 64px 0 72px; }
  .dgw-whatsapp-api-test { padding: 72px 0; }
  .dgw-whatsapp-api-faq { padding: 72px 0; }
  .dgw-whatsapp-api-cta { padding: 72px 0; }
  .dgw-whatsapp-api-price-shell { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-cta-actions { flex-direction: column; }
  .dgw-whatsapp-api-cta-actions .dgw-whatsapp-api-btn { justify-content: center; }
  .dgw-whatsapp-api-fab { width: 54px; height: 54px; bottom: 18px; right: 18px; }
  .dgw-whatsapp-api-fab svg { width: 24px; height: 24px; }
}
@media (max-width: 480px) {
  .dgw-whatsapp-api-auto-grid { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-footer-grid { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dgw-whatsapp-api-faq-q { font-size: 14.5px; padding: 16px 18px; }
  .dgw-whatsapp-api-faq-a-inner { padding: 0 18px 18px; }
  .dgw-whatsapp-api-test-card { padding: 28px 22px; }
  .dgw-whatsapp-api-price-left, .dgw-whatsapp-api-price-right { padding: 32px 24px; }
}


/*---------- Contact Page --------------*/

.dgw-contact-body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color: #e8ecff;
  background: #02041a;
  min-height: 100vh;
  overflow-x: hidden;
}

/* -------------------------------------------------------------
   SCENE — Real photo background
   Drop a 1920x1080+ photo at assets/contact-bg.jpg
   ------------------------------------------------------------- */

.dgw-contact-scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: #02041a;
	
}

/* The photograph itself */
.dgw-contact-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url('/wp-content/uploads/2026/05/contact-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Photo is already cinematic — gentle tone shaping only */
  filter: brightness(0.92) contrast(1.06) saturate(1);
  animation: dgw-contact-photofade 1.2s ease-out both;
}

/* Cinematic darkening + brand-tone wash on top of the photo */
.dgw-contact-tint {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* Dark wash that protects copy in the center */
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(2, 5, 24, 0.45) 0%, rgba(2, 5, 24, 0.15) 60%, transparent 100%),
    /* Subtle brand-blue cool wash */
    linear-gradient(180deg, rgba(1, 14, 208, 0.10) 0%, transparent 40%, rgba(1, 14, 208, 0.18) 100%),
    /* Top-to-bottom darken so topbar reads cleanly */
    linear-gradient(180deg, rgba(2, 5, 24, 0.55) 0%, rgba(2, 5, 24, 0.15) 30%, rgba(2, 5, 24, 0.25) 70%, rgba(2, 5, 24, 0.65) 100%);
  pointer-events: none;
}

/* Soft vignette — corners darken, center stays clear */
.dgw-contact-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 50%, rgba(2, 5, 24, 0.55) 100%);
  pointer-events: none;
}

@keyframes dgw-contact-photofade {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* -------------------------------------------------------------
   TOP BAR
   ------------------------------------------------------------- */

.dgw-contact-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
}

.dgw-contact-logo-link {
  text-decoration: none;
}

.dgw-contact-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 0%, #c8d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dgw-contact-backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(232, 236, 255, 0.7);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
.dgw-contact-backlink:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

/* -------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------- */



.dgw-contact-content {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 70px 48px 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dgw-contact-eyebrow {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 215, 255, 0.85);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(200, 215, 255, 0.25);
  background: rgba(1, 14, 208, 0.15);
  backdrop-filter: blur(6px);
  margin-bottom: 28px;
  animation: dgw-contact-fadeup 0.8s ease 0.1s both;
}

.dgw-contact-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(36px, 5.2vw, 64px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 22px;
  text-shadow: 0 2px 40px rgba(1, 14, 208, 0.3);
  animation: dgw-contact-fadeup 0.8s ease 0.2s both;
}

.dgw-contact-headline-accent {
  background: linear-gradient(135deg, #ffb89a 0%, #ff7a45 50%, #ffa978 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.dgw-contact-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(232, 236, 255, 0.78);
  max-width: 620px;
  margin: 0 0 44px;
  animation: dgw-contact-fadeup 0.8s ease 0.3s both;
}

/* -------------------------------------------------------------
   CTA BUTTONS
   ------------------------------------------------------------- */

.dgw-contact-cta-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 50px;
  animation: dgw-contact-fadeup 0.8s ease 0.4s both;
}

.dgw-contact-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 240px;
  padding: 20px 32px;
  border-radius: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dgw-contact-btn > span:first-of-type {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dgw-contact-btn svg {
  flex-shrink: 0;
}

.dgw-contact-btn-meta {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.78;
  margin-top: 2px;
}

/* WhatsApp button — brand green */
.dgw-contact-btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #ffffff;
  box-shadow:
    0 10px 30px rgba(37, 211, 102, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.dgw-contact-btn-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(37, 211, 102, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.dgw-contact-btn-whatsapp::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.6s ease;
}
.dgw-contact-btn-whatsapp:hover::before {
  left: 100%;
}

/* Form button — glass with brand-blue accent */
.dgw-contact-btn-form {
  background: #ff7a45;
  color: #ffffff;
  border: 1px solid rgba(200, 215, 255, 0.35);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.dgw-contact-btn-form:hover {
  transform: translateY(-3px);
  background: #ff7a45a1;
  border-color: rgba(200, 215, 255, 0.6);
  box-shadow: 0 14px 32px rgba(1, 14, 208, 0.35);
}

/* -------------------------------------------------------------
   TRUST ROW
   ------------------------------------------------------------- */

.dgw-contact-trust {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  animation: dgw-contact-fadeup 0.8s ease 0.5s both;
}

.dgw-contact-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(232, 236, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
a.dgw-contact-trust-item:hover {
  color: #ffffff;
}
.dgw-contact-trust-item svg {
  opacity: 0.7;
}

.dgw-contact-trust-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(200, 215, 255, 0.3);
}

/* -------------------------------------------------------------
   ANIMATIONS
   ------------------------------------------------------------- */

@keyframes dgw-contact-fadeup {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */

@media (max-width: 880px) {
  .dgw-contact-topbar {
    padding: 22px 28px;
  }
  .dgw-contact-content {
    padding: 24px 28px 64px;
  }
  .dgw-contact-moon {
    width: 80px;
    height: 80px;
    top: 10%;
    right: 8%;
  }
  .dgw-contact-cta-row {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    gap: 14px;
  }
  .dgw-contact-btn {
    width: 100%;
    min-width: 0;
    padding: 18px 24px;
  }
}

@media (max-width: 560px) {
  .dgw-contact-headline {
    font-size: clamp(30px, 8vw, 40px);
  }
  .dgw-contact-eyebrow {
    font-size: 11px;
    padding: 6px 14px;
  }
  .dgw-contact-trust {
    gap: 12px;
  }
  .dgw-contact-trust-item {
    font-size: 12px;
  }
  .dgw-contact-moon {
    width: 60px;
    height: 60px;
  }
  .dgw-contact-backlink span,
  .dgw-contact-backlink {
    font-size: 12px;
  }
}

@media (max-height: 720px) and (min-width: 881px) {
  .dgw-contact-headline {
    font-size: clamp(32px, 4.4vw, 52px);
    margin-bottom: 18px;
  }
  .dgw-contact-sub {
    margin-bottom: 32px;
  }
  .dgw-contact-cta-row {
    margin-bottom: 36px;
  }
}

/* Honour reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .dgw-contact-photo,
  .dgw-contact-eyebrow,
  .dgw-contact-headline,
  .dgw-contact-sub,
  .dgw-contact-cta-row,
  .dgw-contact-trust,
  .dgw-contact-btn-whatsapp::before {
    animation: none !important;
    transition: none !important;
  }
  .dgw-contact-btn:hover {
    transform: none;
  }
}

/* =============================================================
   Digiwah · Zoho ERP Implementation Partner page
   v2 — LIGHT, airy, pain-led. Class prefix: dgw-zerp-
   Structure inspired by zoho.com/en-in/erp (light, product-led).
   ============================================================= */

/* Scoped reset — applies ONLY inside the page wrapper so it can't leak
   into (or be clobbered by) the WordPress theme when this goes live. */
.dgw-zerp-body, .dgw-zerp-body *, .dgw-zerp-body *::before, .dgw-zerp-body *::after { box-sizing: border-box; }

:root {
  --dgw-zerp-brand: #1b3df5;
  --dgw-zerp-brand-deep: #010ED0;
  --dgw-zerp-brand-soft: #6f86ff;
  --dgw-zerp-accent: #FF7A45;
  --dgw-zerp-green: #16a06a;
  --dgw-zerp-red: #e0533d;
  --dgw-zerp-ink: #0e1633;
  --dgw-zerp-ink-soft: #1a2347;
  --dgw-zerp-muted: #5b6489;
  --dgw-zerp-muted-2: #8089a8;
  --dgw-zerp-bg: #ffffff;
  --dgw-zerp-bg-tint: #f3f6ff;
  --dgw-zerp-bg-blue: #eef2ff;
  --dgw-zerp-line: rgba(14, 22, 51, 0.09);
  --dgw-zerp-line-soft: rgba(14, 22, 51, 0.06);
  --dgw-zerp-card-shadow: 0 1px 2px rgba(14,22,51,0.04), 0 12px 30px -18px rgba(27,61,245,0.18);
  --dgw-zerp-card-shadow-h: 0 1px 2px rgba(14,22,51,0.05), 0 24px 50px -22px rgba(27,61,245,0.28);
}

.dgw-zerp-body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--dgw-zerp-ink-soft);
  background: var(--dgw-zerp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* -------------------------------------------------------------
   SHARED
   ------------------------------------------------------------- */
.dgw-zerp-container {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.dgw-zerp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dgw-zerp-brand);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(27, 61, 245, 0.16);
  background: rgba(27, 61, 245, 0.05);
  margin-bottom: 22px;
}
.dgw-zerp-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dgw-zerp-accent);
  box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.16);
  animation: dgw-zerp-pulse 2.4s ease-in-out infinite;
}

.dgw-zerp-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--dgw-zerp-ink);
  margin: 0;
}
.dgw-zerp-h2-grad {
  background: linear-gradient(120deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-accent) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dgw-zerp-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dgw-zerp-section-sub {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--dgw-zerp-muted);
  margin: 18px auto 0;
  max-width: 620px;
}

/* Buttons */
.dgw-zerp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.dgw-zerp-btn svg { transition: transform 0.25s ease; }
.dgw-zerp-btn-primary {
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-brand-deep) 100%);
  color: #fff;
  box-shadow: 0 14px 34px -14px rgba(27, 61, 245, 0.55);
}
.dgw-zerp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(27,61,245,0.65); }
.dgw-zerp-btn-primary:hover svg { transform: translateX(4px); }
.dgw-zerp-btn-ghost {
  background: #fff; color: var(--dgw-zerp-ink);
  border-color: var(--dgw-zerp-line);
  box-shadow: 0 1px 2px rgba(14,22,51,0.04);
}
.dgw-zerp-btn-ghost:hover { border-color: rgba(27,61,245,0.3); color: var(--dgw-zerp-brand); transform: translateY(-2px); }
.dgw-zerp-btn-light {
  background: #fff; color: var(--dgw-zerp-brand-deep);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.4);
}
.dgw-zerp-btn-light:hover { transform: translateY(-2px); }
.dgw-zerp-btn-light:hover svg { transform: translateX(4px); }
.dgw-zerp-btn-outline {
  background: rgba(255,255,255,0.08); color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.dgw-zerp-btn-outline:hover { background: rgba(255,255,255,0.16); border-color: #fff; }

/* -------------------------------------------------------------
   NAV (light glass)
   ------------------------------------------------------------- */
.dgw-zerp-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--dgw-zerp-line-soft);
}
.dgw-zerp-nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 15px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.dgw-zerp-nav-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
  color: var(--dgw-zerp-ink); text-decoration: none;
}
.dgw-zerp-nav-links { display: flex; gap: 28px; }
.dgw-zerp-nav-links a {
  font-size: 14px; font-weight: 500; color: var(--dgw-zerp-muted);
  text-decoration: none; transition: color 0.2s ease;
}
.dgw-zerp-nav-links a:hover { color: var(--dgw-zerp-ink); }
.dgw-zerp-nav-cta {
  display: inline-flex; align-items: center; padding: 10px 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-brand-deep) 100%);
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 13px; text-decoration: none;
  box-shadow: 0 8px 22px -10px rgba(27,61,245,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dgw-zerp-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(27,61,245,0.7); }

/* -------------------------------------------------------------
   1. HERO (light · centered copy + wide dashboard)
   ------------------------------------------------------------- */
.dgw-zerp-hero {
  position: relative;
  padding: 84px 0 96px;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(27, 61, 245, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #fbfcff 0%, var(--dgw-zerp-bg-tint) 100%);
  overflow: hidden; isolation: isolate;
}
.dgw-zerp-hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(27, 61, 245, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 61, 245, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 0%, transparent 75%);
  pointer-events: none;
}
.dgw-zerp-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; }
.dgw-zerp-hero-glow-a { top: -12%; right: 4%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(27,61,245,0.16) 0%, transparent 70%); }
.dgw-zerp-hero-glow-b { top: 6%; left: 2%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,122,69,0.12) 0%, transparent 70%); }

.dgw-zerp-hero-copy { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.dgw-zerp-hero-copy > * { animation: dgw-zerp-fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.dgw-zerp-hero-copy > *:nth-child(2){animation-delay:.08s} .dgw-zerp-hero-copy > *:nth-child(3){animation-delay:.16s}
.dgw-zerp-hero-copy > *:nth-child(4){animation-delay:.24s} .dgw-zerp-hero-copy > *:nth-child(5){animation-delay:.32s}

.dgw-zerp-hero-h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800; line-height: 1.07; letter-spacing: -0.03em;
  color: var(--dgw-zerp-ink); margin: 0 auto 22px; max-width: 17ch;
}
.dgw-zerp-hero-h1 .dgw-zerp-h2-grad { display: inline; }
.dgw-zerp-hero-sub {
  font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.62;
  color: var(--dgw-zerp-muted); margin: 0 auto 32px; max-width: 600px;
}
.dgw-zerp-hero-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.dgw-zerp-hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  padding-top: 8px;
}
.dgw-zerp-hero-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 12.5px;
  color: var(--dgw-zerp-ink-soft);
}
.dgw-zerp-hero-trust-item svg { color: var(--dgw-zerp-green); }

/* Floating accent cards (fill the hero side gutters) */
.dgw-zerp-hero-float {
  position: absolute; z-index: 2; width: 212px;
  display: flex; flex-direction: column; gap: 9px; text-align: left;
  padding: 16px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--dgw-zerp-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 18px 44px -20px rgba(27,61,245,0.28), 0 4px 12px rgba(14,22,51,0.05);
  animation: dgw-zerp-floatCard 6s ease-in-out infinite;
}
.dgw-zerp-hero-float-l { left: -18px; top: 118px; }
.dgw-zerp-hero-float-r { right: -18px; top: 188px; animation-delay: 1.8s; }
.dgw-zerp-hf-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--dgw-zerp-brand); }
.dgw-zerp-hf-row { display: flex; align-items: center; gap: 9px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 13px; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-hf-row svg { color: var(--dgw-zerp-green); flex-shrink: 0; }
.dgw-zerp-hf-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--dgw-zerp-ink); }
.dgw-zerp-hf-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-hf-trend { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-green); }

/* Light dashboard mockup */
.dgw-zerp-dash {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 56px auto 0;
  animation: dgw-zerp-dashIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}
.dgw-zerp-dash-glow {
  position: absolute; inset: -30px -10px; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(27,61,245,0.16) 0%, transparent 70%);
  filter: blur(40px);
}
.dgw-zerp-dash-frame {
  display: grid; grid-template-columns: 188px 1fr;
  background: #fff;
  border: 1px solid var(--dgw-zerp-line);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 40px 90px -40px rgba(27,61,245,0.4), 0 12px 30px -16px rgba(14,22,51,0.12);
  text-align: left;
}
.dgw-zerp-dash-side {
  background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%);
  border-right: 1px solid var(--dgw-zerp-line-soft);
  padding: 18px 16px;
}
.dgw-zerp-dash-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 0 6px; }
.dgw-zerp-dash-brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-accent) 130%);
}
.dgw-zerp-dash-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; color: var(--dgw-zerp-ink); }
.dgw-zerp-dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dgw-zerp-dash-navitem {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--dgw-zerp-muted);
}
.dgw-zerp-dash-navitem.is-active { background: rgba(27,61,245,0.10); color: var(--dgw-zerp-brand); font-weight: 600; }
.dgw-zerp-dash-navdot { width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: .55; }
.dgw-zerp-dash-navitem.is-active .dgw-zerp-dash-navdot { opacity: 1; }

.dgw-zerp-dash-main { padding: 18px 20px 22px; }
.dgw-zerp-dash-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dgw-zerp-dash-topbar-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px; color: var(--dgw-zerp-ink); }
.dgw-zerp-dash-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 100px;
  background: rgba(22,160,106,0.10); border: 1px solid rgba(22,160,106,0.28);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--dgw-zerp-green);
  font-family: 'JetBrains Mono', monospace;
}
.dgw-zerp-dash-livepulse { width: 6px; height: 6px; border-radius: 50%; background: var(--dgw-zerp-green); animation: dgw-zerp-livePulse 1.8s ease-in-out infinite; }

.dgw-zerp-dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.dgw-zerp-dash-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 14px; border-radius: 11px;
  background: #fbfcff; border: 1px solid var(--dgw-zerp-line-soft);
}
.dgw-zerp-dash-tile-label { font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-dash-tile-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 19px; color: var(--dgw-zerp-ink); letter-spacing: -0.02em; }
.dgw-zerp-dash-tile-trend { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; }
.dgw-zerp-trend-up { color: var(--dgw-zerp-green); }
.dgw-zerp-trend-down { color: var(--dgw-zerp-red); }
.dgw-zerp-trend-flat { color: var(--dgw-zerp-muted-2); }

.dgw-zerp-dash-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.dgw-zerp-dash-chart, .dgw-zerp-dash-feed {
  padding: 14px 16px; border-radius: 12px;
  background: #fbfcff; border: 1px solid var(--dgw-zerp-line-soft);
}
.dgw-zerp-dash-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dgw-zerp-dash-chart-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-dash-chart-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-dash-chart-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 8px; margin-right: 1px; vertical-align: middle; }
.dgw-zerp-dash-swatch-brand { background: var(--dgw-zerp-brand); }
.dgw-zerp-dash-swatch-soft { background: #c3cdfb; }

.dgw-zerp-dash-bars { display: flex; align-items: flex-end; gap: 12px; height: 116px; }
.dgw-zerp-dash-baridx { flex: 1; position: relative; height: 100%; display: flex; justify-content: center; }
.dgw-zerp-dash-bar { position: absolute; bottom: 18px; width: 11px; border-radius: 3px 3px 0 0; }
.dgw-zerp-dash-bar-a { left: 50%; transform: translateX(2px); height: var(--h2); background: var(--dgw-zerp-brand); animation: dgw-zerp-barA 1s cubic-bezier(0.16,1,0.3,1) both; animation-delay: .4s; }
.dgw-zerp-dash-bar-b { left: 50%; transform: translateX(-13px); height: var(--h1); background: #c3cdfb; animation: dgw-zerp-barB 1s cubic-bezier(0.16,1,0.3,1) both; animation-delay: .5s; }
.dgw-zerp-dash-baridx-label { position: absolute; bottom: 0; font-size: 9.5px; color: var(--dgw-zerp-muted-2); }

.dgw-zerp-dash-feed { display: flex; flex-direction: column; gap: 7px; }
.dgw-zerp-dash-feed-head { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--dgw-zerp-ink-soft); margin-bottom: 3px; }
.dgw-zerp-dash-feed-line {
  font-size: 11px; color: var(--dgw-zerp-muted); display: flex; align-items: center; gap: 8px;
  animation: dgw-zerp-feedIn 0.6s ease both;
}
.dgw-zerp-dash-feed-line:nth-child(2){animation-delay:.7s} .dgw-zerp-dash-feed-line:nth-child(3){animation-delay:.95s} .dgw-zerp-dash-feed-line:nth-child(4){animation-delay:1.2s}
.dgw-zerp-dash-feed-tag { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; flex-shrink: 0; }
.dgw-zerp-feed-tag-fin { background: rgba(27,61,245,0.12); color: var(--dgw-zerp-brand); }
.dgw-zerp-feed-tag-inv { background: rgba(255,122,69,0.14); color: #d9551f; }
.dgw-zerp-feed-tag-shop { background: rgba(22,160,106,0.14); color: var(--dgw-zerp-green); }



/* =============================================================
   1B. YOUR PLANT, ONE SYSTEM — factory blueprint ↔ problems solved
   ============================================================= */
.dgw-zerp-plant-text .dgw-zerp-eyebrow {
    color: #c7d2ff;
    border-color: rgba(111, 134, 255, 0.32);
    background: rgba(111, 134, 255, 0.10);
}


.dgw-zerp-plant { position: relative; padding: 100px 0 110px; background: radial-gradient(120% 90% at 0% 0%, #17224f 0%, #0d1330 55%, #0a0f26 100%); color: #fff; scroll-margin-top: 76px; overflow: hidden; }
.dgw-zerp-plant::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 55% at 85% 50%, rgba(27,61,245,0.22), transparent 70%), radial-gradient(ellipse 30% 40% at 10% 90%, rgba(255,122,69,0.10), transparent 70%); }
.dgw-zerp-plant > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-plant-layout { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 56px; align-items: center; }
.dgw-zerp-plant-text .dgw-zerp-h2 { max-width: 520px; }
.dgw-zerp-plant-sub { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--dgw-zerp-muted); margin: 18px 0 0; max-width: 520px; }

.dgw-zerp-plant-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 4px; }
.dgw-zerp-plant-row { position: relative; display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; row-gap: 2px; padding: 9px 12px 9px 14px; border-radius: 12px; border: 1px solid transparent; cursor: default; transition: background .3s, border-color .3s, transform .3s; }
.dgw-zerp-plant-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--dgw-zerp-accent); opacity: 0; transition: opacity .3s; }
.dgw-zerp-plant-row-k { grid-row: 1 / span 2; align-self: start; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); padding-top: 1px; }
.dgw-zerp-plant-row-pain, .dgw-zerp-plant-row-fix { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.45; }
.dgw-zerp-plant-row-pain { color: var(--dgw-zerp-muted); }
.dgw-zerp-plant-row-fix { color: var(--dgw-zerp-ink-soft); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, margin .3s; }
.dgw-zerp-plant-row-pain::before, .dgw-zerp-plant-row-pain::after { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 1.5px; background: #e0533d; transform: rotate(45deg); }
.dgw-zerp-plant-row-pain::after { transform: rotate(-45deg); }
.dgw-zerp-plant-row-fix::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 4px; background: rgba(22,160,106,0.16); }
.dgw-zerp-plant-row-fix::after { content: ""; position: absolute; left: 5px; top: 8px; width: 5px; height: 3px; border-left: 1.5px solid var(--dgw-zerp-green); border-bottom: 1.5px solid var(--dgw-zerp-green); transform: rotate(-45deg); }
.dgw-zerp-plant-row.is-active { background: #fff; border-color: rgba(27,61,245,0.18); box-shadow: var(--dgw-zerp-card-shadow); transform: translateX(4px); }
.dgw-zerp-plant-row.is-active::before { opacity: 1; }
.dgw-zerp-plant-row.is-active .dgw-zerp-plant-row-fix { max-height: 80px; opacity: 1; margin-top: 4px; }
.dgw-zerp-plant-row.is-active .dgw-zerp-plant-row-k { color: var(--dgw-zerp-brand); }

/* map — architectural site plan */
.dgw-zerp-plant-map { position: relative; border-radius: 22px; padding: 16px 18px 14px; background: linear-gradient(180deg, #eef2ff 0%, #e3e9ff 100%); border: 1px solid rgba(27,61,245,0.18); box-shadow: 0 2px 4px rgba(14,22,51,0.04), 0 40px 90px -36px rgba(27,61,245,0.40), 0 0 0 6px rgba(255,255,255,0.7); container-type: inline-size; }
.dgw-zerp-plant-map-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-brand); }
.dgw-zerp-plant-map-h em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: #0f7a50; letter-spacing: 0.06em; }
.dgw-zerp-plant-map-h em i { width: 7px; height: 7px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 3px rgba(45,212,143,0.22); animation: dgw-zerp-pulse 2s ease-in-out infinite; }
.dgw-zerp-plant-map-f { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 11px; color: var(--dgw-zerp-muted); }
.dgw-zerp-plant-map-f span { display: inline-flex; align-items: center; gap: 7px; }
.dgw-zerp-plant-map-f i { width: 18px; height: 2px; background: repeating-linear-gradient(90deg, var(--dgw-zerp-accent) 0 4px, transparent 4px 7px); }
.dgw-zerp-plant-map-f i.is-sys { width: 8px; height: 8px; border-radius: 2px; background: var(--dgw-zerp-brand); }

/* the drawing */
.dgw-zerp-plant-site { --ink: #1b2a6b; --line: rgba(27,42,107,0.55); position: relative; width: 100%; aspect-ratio: 56 / 50; border-radius: 12px; overflow: hidden; background: #f7f9ff;
  background-image: linear-gradient(rgba(27,61,245,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(27,61,245,0.10) 1px, transparent 1px), linear-gradient(rgba(27,61,245,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(27,61,245,0.05) 1px, transparent 1px);
  background-size: 10% 10%, 10% 10%, 2.5% 2.5%, 2.5% 2.5%; font-size: clamp(7px, 2cqw, 11px); }
.dgw-zerp-plant-wall { position: absolute; inset: 2.5%; border: 3px solid var(--ink); border-radius: 4px; box-shadow: inset 0 0 0 2px #f7f9ff, inset 0 0 0 3px var(--line); pointer-events: none; }
.dgw-zerp-plant-wall::after { content: ""; position: absolute; left: -3px; top: calc(74% + 5%); height: 12%; width: 3px; background: #f7f9ff; } /* gate opening in the wall */
.dgw-zerp-plant-north { position: absolute; right: 3.5%; top: 2.5%; display: grid; justify-items: center; gap: 1px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .9em; color: var(--ink); z-index: 3; }
.dgw-zerp-plant-north i { width: 0; height: 0; border-left: .5em solid transparent; border-right: .5em solid transparent; border-bottom: 1.1em solid var(--ink); }
.dgw-zerp-plant-title { position: absolute; right: 3.5%; bottom: 3.5%; z-index: 3; display: grid; gap: 1px; padding: .45em .7em; border: 1.5px solid var(--ink); background: #fff; font-family: 'JetBrains Mono', monospace; font-size: .85em; color: var(--ink); line-height: 1.2; }
.dgw-zerp-plant-title b { letter-spacing: .14em; }
.dgw-zerp-plant-title span { color: var(--dgw-zerp-muted); font-size: .9em; }

/* areas (interactive) */
.dgw-zerp-plant-area { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 2; padding: .6em .8em; border: 1.5px solid var(--line); background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8); display: flex; flex-direction: column; justify-content: flex-start; gap: .1em; cursor: default; transition: background .35s, border-color .35s, box-shadow .35s, transform .35s; overflow: hidden; }
.dgw-zerp-plant-k { font-family: 'JetBrains Mono', monospace; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.dgw-zerp-plant-area b { position: relative; z-index: 1; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.25em; letter-spacing: -0.01em; line-height: 1.15; color: var(--dgw-zerp-ink); }
.dgw-zerp-plant-area.is-active { background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); box-shadow: 0 1.4em 2.4em -1em rgba(27,61,245,0.7), 0 0 0 .35em rgba(27,61,245,0.16); transform: translateY(-2px); z-index: 4; }
.dgw-zerp-plant-area.is-active .dgw-zerp-plant-k { color: rgba(255,255,255,0.7); }
.dgw-zerp-plant-area.is-active b { color: #fff; }

/* furniture inside areas (all pure CSS) */
.dgw-zerp-plant-area > i { position: absolute; pointer-events: none; }
.dgw-zerp-plant-desks { left: .8em; right: .8em; bottom: .7em; height: 1.2em; background: repeating-linear-gradient(90deg, var(--line) 0 1.1em, transparent 1.1em 1.7em); opacity: .55; border-radius: 2px; }
.dgw-zerp-plant-racks { left: .8em; right: .8em; top: 3.4em; bottom: .8em; background: repeating-linear-gradient(180deg, var(--line) 0 2px, transparent 2px .95em); opacity: .55; }
.dgw-zerp-plant-racks::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 1.1em, #fff 1.1em 1.5em); }
.dgw-zerp-plant-racks.is-short { top: 3.2em; bottom: 2.4em; }
.dgw-zerp-plant-machines { left: .8em; right: .8em; top: 3.4em; bottom: 2.2em; background-image: radial-gradient(var(--line) 0 30%, transparent 32%); background-size: 1.6em 1.6em; opacity: .6; }
.dgw-zerp-plant-conveyor { left: .8em; right: .8em; bottom: .9em; height: .7em; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 .6em, rgba(27,42,107,0.25) .6em 1.2em); animation: dgw-zerp-plant-belt .8s linear infinite; opacity: .85; }
@keyframes dgw-zerp-plant-belt { to { background-position: -1.2em 0 } }
.dgw-zerp-plant-bench { left: .8em; right: .8em; bottom: .7em; height: .9em; border: 1.5px solid var(--line); border-radius: 2px; opacity: .6; }
.dgw-zerp-plant-bench::after { content: ""; position: absolute; left: .4em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: var(--line); box-shadow: 1em 0 0 var(--line), 2em 0 0 var(--line); }
.dgw-zerp-plant-bays { left: 0; right: 0; bottom: -1.5px; height: 1.6em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; padding: 0 .9em; }
.dgw-zerp-plant-bays u { display: block; border: 1.5px solid var(--line); border-bottom: 0; background: #eef2ff; border-radius: 3px 3px 0 0; }
.dgw-zerp-plant-area.is-active .dgw-zerp-plant-bays u { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.7); }
.dgw-zerp-plant-area.is-active > i:not(.dgw-zerp-plant-bays) { filter: brightness(3) saturate(0); opacity: .5; }

/* gate area */
.dgw-zerp-plant-area.is-gate { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.dgw-zerp-plant-area.is-gate .dgw-zerp-plant-k, .dgw-zerp-plant-area.is-gate b { position: absolute; left: 40%; white-space: nowrap; }
.dgw-zerp-plant-area.is-gate b { top: -2%; }
.dgw-zerp-plant-area.is-gate .dgw-zerp-plant-k { top: 80%; }
.dgw-zerp-plant-cabin { left: 22%; top: 8%; width: 12%; height: 26%; border: 1.5px solid var(--line); background: #fff; }
.dgw-zerp-plant-cabin::after { content: ""; position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; background: var(--line); opacity: .4; }
.dgw-zerp-plant-barrier { left: 12%; top: 32%; width: 24%; height: 3px; background: repeating-linear-gradient(90deg, var(--dgw-zerp-red) 0 .6em, #fff .6em 1.2em); border: 1px solid var(--line); transform-origin: left center; animation: dgw-zerp-plant-barrier 6s ease-in-out infinite; }
@keyframes dgw-zerp-plant-barrier { 0%, 30% { transform: rotate(0deg) } 40%, 70% { transform: rotate(-70deg) } 80%, 100% { transform: rotate(0deg) } }
.dgw-zerp-plant-wb { left: 44%; top: 30%; width: 30%; height: 40%; border: 1.5px solid var(--line); background: repeating-linear-gradient(45deg, rgba(27,42,107,0.18) 0 3px, transparent 3px 8px); border-radius: 2px; }
.dgw-zerp-plant-area.is-gate.is-active { background: transparent; box-shadow: none; transform: none; }
.dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-k { color: var(--dgw-zerp-brand); }
.dgw-zerp-plant-area.is-gate.is-active b { color: var(--dgw-zerp-brand); }
.dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-cabin, .dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-wb { border-color: var(--dgw-zerp-brand); box-shadow: 0 0 0 .3em rgba(27,61,245,0.18), 0 1em 1.6em -.6em rgba(27,61,245,0.7); background-color: rgba(27,61,245,0.12); }

/* road + trucks */
.dgw-zerp-plant-road { position: absolute; left: 0; right: 2.5%; top: 79%; height: 12%; background: #d6dcf0; z-index: 1; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.dgw-zerp-plant-road i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, #fff 0 1.4em, transparent 1.4em 2.4em); }
.dgw-zerp-plant-truck { position: absolute; z-index: 2; width: 8%; height: 5%; top: 81.5%; left: var(--x); background: #fff; border: 1.5px solid var(--ink); border-radius: 2px; }
.dgw-zerp-plant-truck::before { content: ""; position: absolute; right: -1.5px; top: -1.5px; bottom: -1.5px; width: 32%; background: var(--ink); border-radius: 2px 3px 3px 2px; }
.dgw-zerp-plant-truck::after { content: ""; position: absolute; left: 12%; bottom: -.45em; width: .5em; height: .5em; border-radius: 50%; background: var(--ink); box-shadow: 1.6em 0 0 var(--ink), 3.6em 0 0 var(--ink); }
.dgw-zerp-plant-truck.is-dock { top: 73%; width: 5.5%; height: 6.5%; transform: rotate(-90deg); transform-origin: center; }
.dgw-zerp-plant-truck.is-move { animation: dgw-zerp-plant-truck 9s linear infinite; }
@keyframes dgw-zerp-plant-truck { 0% { left: -10%; opacity: 0 } 5% { opacity: 1 } 24% { left: 14% } 34% { left: 14% } 90% { left: 100%; opacity: 1 } 100% { left: 100%; opacity: 0 } }

/* static areas */
.dgw-zerp-plant-static { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 1.5px dashed var(--line); background: rgba(255,255,255,0.6); padding: .5em .7em; z-index: 1; }
.dgw-zerp-plant-static span { font-family: 'JetBrains Mono', monospace; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-plant-static.is-parking i { position: absolute; left: .7em; right: .7em; bottom: .6em; height: 1.6em; background: repeating-linear-gradient(90deg, var(--line) 0 1.5px, transparent 1.5px 1.3em); opacity: .5; border-bottom: 1.5px solid var(--line); }

/* material flow arrows */
.dgw-zerp-plant-arr { position: absolute; z-index: 3; pointer-events: none; }
.dgw-zerp-plant-arr.is-r { top: var(--y); left: var(--x1); width: calc(var(--x2) - var(--x1)); height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--dgw-zerp-accent) 0 3px, transparent 3px 6px); animation: dgw-zerp-inv-dash .6s linear infinite; }
.dgw-zerp-plant-arr.is-r::after { content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); border-left: .55em solid var(--dgw-zerp-accent); border-top: .38em solid transparent; border-bottom: .38em solid transparent; }
.dgw-zerp-plant-arr.is-d { left: var(--x); top: min(var(--y1), var(--y2)); height: max(calc(var(--y2) - var(--y1)), calc(var(--y1) - var(--y2))); width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, var(--dgw-zerp-accent) 0 3px, transparent 3px 6px); animation: dgw-zerp-plant-dashv .6s linear infinite; }
.dgw-zerp-plant-arr.is-d::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: .38em solid transparent; border-right: .38em solid transparent; }
.dgw-zerp-plant-arr.is-d.is-up::after { top: -2px; border-bottom: .55em solid var(--dgw-zerp-accent); }
.dgw-zerp-plant-arr.is-d:not(.is-up)::after { bottom: -2px; border-top: .55em solid var(--dgw-zerp-accent); }
@keyframes dgw-zerp-plant-dashv { to { background-position: 0 6px } }

@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-plant-conveyor, .dgw-zerp-plant-barrier, .dgw-zerp-plant-truck.is-move, .dgw-zerp-plant-arr, .dgw-zerp-plant-map-h em i { animation: none !important; }
  .dgw-zerp-plant-truck.is-move { left: 40%; }
  .dgw-zerp-plant-row-fix { max-height: none; opacity: 1; margin-top: 4px; }
}

@media (max-width: 1100px) { .dgw-zerp-plant-layout { grid-template-columns: minmax(0, 1fr) 460px; gap: 36px; } }
@media (max-width: 880px) { .dgw-zerp-plant-layout { grid-template-columns: 1fr; gap: 36px; } .dgw-zerp-plant-map { order: -1; } }
@media (max-width: 600px) {
  .dgw-zerp-plant-map { padding: 14px; border-radius: 16px; }
  .dgw-zerp-plant-row { grid-template-columns: 1fr; }
  .dgw-zerp-plant-row-k { grid-row: auto; }
}
}


/* ---- PLANT SECTION · DARK THEME OVERRIDES ---- */
.dgw-zerp-plant .dgw-zerp-eyebrow { color: #fff; border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); }
.dgw-zerp-plant .dgw-zerp-h2 { color: #fff; }
.dgw-zerp-plant .dgw-zerp-h2-grad { background: linear-gradient(120deg, #8fd3ff 0%, #ffb08a 120%); -webkit-background-clip: text; background-clip: text; }
.dgw-zerp-plant-sub { color: rgba(255,255,255,0.92); }
.dgw-zerp-plant-row-k { color: #fff; }
.dgw-zerp-plant-row-pain { color: rgba(255,255,255,0.82); }
.dgw-zerp-plant-row-fix { color: #fff; }
.dgw-zerp-plant-row-pain::before, .dgw-zerp-plant-row-pain::after { background: #ff7a7a; }
.dgw-zerp-plant-row-fix::before { background: rgba(45,212,143,0.18); }
.dgw-zerp-plant-row-fix::after { border-color: #2dd48f; }
.dgw-zerp-plant-row.is-active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.6); }
.dgw-zerp-plant-row.is-active .dgw-zerp-plant-row-k { color: #9db4ff; }

.dgw-zerp-plant-map { background: linear-gradient(180deg, #101c52 0%, #0b1440 100%); border-color: rgba(157,180,255,0.28); box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 50px 100px -40px rgba(0,0,0,0.7), 0 0 0 6px rgba(255,255,255,0.06); }
.dgw-zerp-plant-map-h { color: #9db4ff; }
.dgw-zerp-plant-map-h em { color: #2dd48f; }
.dgw-zerp-plant-map-f { color: rgba(255,255,255,0.6); }
.dgw-zerp-plant-map-f i.is-sys { background: #4d6bff; }

.dgw-zerp-plant-site { --ink: #dbe6ff; --line: rgba(219,230,255,0.55); --paper: #0c1a4a; background: var(--paper);
  background-image: linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); }
.dgw-zerp-plant-wall { box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--line); }
.dgw-zerp-plant-wall::after { background: var(--paper); }
.dgw-zerp-plant-title { background: var(--paper); }
.dgw-zerp-plant-title span { color: rgba(219,230,255,0.6); }
.dgw-zerp-plant-area { background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
.dgw-zerp-plant-k { color: rgba(219,230,255,0.55); }
.dgw-zerp-plant-area b { color: #fff; }
.dgw-zerp-plant-area.is-active { background: #1b3df5; border-color: #6f86ff; box-shadow: 0 1.4em 2.4em -1em rgba(27,61,245,0.9), 0 0 0 .35em rgba(77,107,255,0.28); }
.dgw-zerp-plant-racks::after { background: repeating-linear-gradient(90deg, transparent 0 1.1em, var(--paper) 1.1em 1.5em); }
.dgw-zerp-plant-area.is-active .dgw-zerp-plant-racks::after { background: repeating-linear-gradient(90deg, transparent 0 1.1em, #1b3df5 1.1em 1.5em); }
.dgw-zerp-plant-bays u { background: rgba(255,255,255,0.08); }
.dgw-zerp-plant-area.is-active > i:not(.dgw-zerp-plant-bays) { filter: none; opacity: .75; }
.dgw-zerp-plant-static { background: rgba(255,255,255,0.03); }
.dgw-zerp-plant-static span { color: rgba(219,230,255,0.5); }
.dgw-zerp-plant-road { background: #1b2758; }
.dgw-zerp-plant-road i { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.7) 0 1.4em, transparent 1.4em 2.4em); }
.dgw-zerp-plant-truck { background: var(--paper); }
.dgw-zerp-plant-cabin { background: var(--paper); }
.dgw-zerp-plant-barrier { background: repeating-linear-gradient(90deg, #ff5c5c 0 .6em, #fff .6em 1.2em); }
.dgw-zerp-plant-wb { background: repeating-linear-gradient(45deg, rgba(219,230,255,0.22) 0 3px, transparent 3px 8px); }
.dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-k, .dgw-zerp-plant-area.is-gate.is-active b { color: #9db4ff; }
.dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-cabin, .dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-wb { border-color: #6f86ff; background-color: rgba(27,61,245,0.45); box-shadow: 0 0 0 .3em rgba(77,107,255,0.28), 0 1em 1.6em -.6em rgba(27,61,245,0.9); }





/* =============================================================
   WHY DIGIWAH — the one section where we sell ourselves.
   Warm paper ground (deliberately different from the cool page),
   proof cards + an engagement "route" from site visit to go-live.
   ============================================================= */
.dgw-zerp-why { position: relative; padding: 110px 0 100px; background: linear-gradient(180deg, #fbf8f2 0%, #f6f1e8 100%); scroll-margin-top: 76px; overflow: hidden; }
.dgw-zerp-why-tex { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(14,22,51,0.09) 1px, transparent 1.4px), radial-gradient(ellipse 40% 50% at 90% 10%, rgba(255,122,69,0.16), transparent 70%), radial-gradient(ellipse 35% 45% at 5% 90%, rgba(27,61,245,0.10), transparent 70%);
  background-size: 24px 24px, 100% 100%, 100% 100%; }
.dgw-zerp-why > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-why .dgw-zerp-eyebrow { color: #b5541f; border-color: rgba(255,122,69,0.35); background: rgba(255,122,69,0.10); }
.dgw-zerp-why .dgw-zerp-h2-grad { background: linear-gradient(120deg, var(--dgw-zerp-accent) 0%, var(--dgw-zerp-brand) 110%); -webkit-background-clip: text; background-clip: text; }

.dgw-zerp-why-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.dgw-zerp-why-intro .dgw-zerp-h2 { max-width: 640px; }
.dgw-zerp-why-sub { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--dgw-zerp-muted); margin: 18px 0 0; max-width: 600px; }
.dgw-zerp-why-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 13px 22px; border-radius: 12px; background: var(--dgw-zerp-ink); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: 0 14px 28px -14px rgba(14,22,51,0.7); transition: transform .25s, box-shadow .25s, background .25s; }
.dgw-zerp-why-cta:hover { transform: translateY(-2px); background: var(--dgw-zerp-brand); box-shadow: 0 18px 34px -14px rgba(27,61,245,0.7); }
.dgw-zerp-why-cta svg { transition: transform .25s; }
.dgw-zerp-why-cta:hover svg { transform: translateX(3px); }

.dgw-zerp-why-proof { display: grid; gap: 12px; }
.dgw-zerp-why-proof-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; align-items: start; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid rgba(14,22,51,0.08); box-shadow: 0 1px 2px rgba(14,22,51,0.04), 0 16px 34px -22px rgba(14,22,51,0.30); transition: transform .3s, box-shadow .3s; }
.dgw-zerp-why-proof-card:hover { transform: translateX(4px); box-shadow: 0 1px 2px rgba(14,22,51,0.05), 0 24px 44px -22px rgba(255,122,69,0.35); }
.dgw-zerp-why-proof-ico { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--dgw-zerp-accent), #ffa27a); box-shadow: 0 8px 16px -8px rgba(255,122,69,0.8); }
.dgw-zerp-why-proof-card:nth-child(2) .dgw-zerp-why-proof-ico { background: linear-gradient(135deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); box-shadow: 0 8px 16px -8px rgba(27,61,245,0.8); }
.dgw-zerp-why-proof-card:nth-child(3) .dgw-zerp-why-proof-ico { background: linear-gradient(135deg, var(--dgw-zerp-ink), #34406b); box-shadow: 0 8px 16px -8px rgba(14,22,51,0.7); }
.dgw-zerp-why-proof-card b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); }
.dgw-zerp-why-proof-card > span:last-child { font-size: 12.5px; line-height: 1.5; color: var(--dgw-zerp-muted); }

/* route */
.dgw-zerp-why-route { position: relative; margin-top: 64px; padding-top: 22px; }
.dgw-zerp-why-track { position: absolute; left: 9%; right: 9%; top: 21px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(14,22,51,0.16) 0 6px, transparent 6px 12px); }
.dgw-zerp-why-track i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--dgw-zerp-accent), var(--dgw-zerp-brand)); transform-origin: left; transform: scaleX(0); }
.dgw-zerp-why.is-in .dgw-zerp-why-track i { animation: dgw-zerp-why-draw 1.8s cubic-bezier(.2,.7,.2,1) .2s forwards; }
@keyframes dgw-zerp-why-draw { to { transform: scaleX(1) } }
.dgw-zerp-why-stops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dgw-zerp-why-stop { position: relative; padding: 42px 16px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(14,22,51,0.08); box-shadow: 0 1px 2px rgba(14,22,51,0.04), 0 18px 40px -26px rgba(14,22,51,0.35); opacity: 1; transform: translateY(14px); min-width: 0; }
.dgw-zerp-why.is-in .dgw-zerp-why-stop { animation: dgw-zerp-acc-in .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(0.35s + var(--i) * 0.28s); }
.dgw-zerp-why-pin { position: absolute; left: 16px; top: -21px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--dgw-zerp-brand); border: 4px solid #fbf8f2; box-shadow: 0 10px 20px -8px rgba(27,61,245,0.7); }
.dgw-zerp-why-pin.is-start { background: var(--dgw-zerp-accent); box-shadow: 0 10px 20px -8px rgba(255,122,69,0.8); }
.dgw-zerp-why-pin.is-end { background: var(--dgw-zerp-green); box-shadow: 0 10px 20px -8px rgba(22,160,106,0.8); }
.dgw-zerp-why-pin.is-start::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255,122,69,0.45); animation: dgw-zerp-why-ring 2.2s ease-out infinite; }
@keyframes dgw-zerp-why-ring { 0% { transform: scale(.7); opacity: 1 } 100% { transform: scale(1.5); opacity: 0 } }
.dgw-zerp-why-stop-n { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b5541f; margin-bottom: 6px; }
.dgw-zerp-why-stop h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--dgw-zerp-ink); margin: 0 0 8px; }
.dgw-zerp-why-stop p { font-size: 13px; line-height: 1.58; color: var(--dgw-zerp-muted); margin: 0; }
.dgw-zerp-why-videos { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(14,22,51,0.12); display: grid; gap: 6px; }
.dgw-zerp-why-videos li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-why-videos li i { width: 22px; height: 16px; border-radius: 4px; background: var(--dgw-zerp-ink); position: relative; }
.dgw-zerp-why-videos li i::after { content: ""; position: absolute; left: 8px; top: 4px; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.dgw-zerp-why-videos li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-why-videos li em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-why-foot { margin: 34px auto 0; max-width: 720px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--dgw-zerp-muted); }

@media (max-width: 1100px) {
  .dgw-zerp-why-stops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 14px; }
  .dgw-zerp-why-track { display: none; }
  .dgw-zerp-why-stop.is-wide { grid-column: span 2; }
}
@media (max-width: 880px) {
  .dgw-zerp-why-top { grid-template-columns: 1fr; gap: 28px; }
  .dgw-zerp-why-stops { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .dgw-zerp-why-stops { grid-template-columns: 1fr; }
  .dgw-zerp-why-stop.is-wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-why-stop { opacity: 1; transform: none; animation: none !important; }
  .dgw-zerp-why-track i { transform: none; animation: none !important; }
  .dgw-zerp-why-pin.is-start::after { animation: none; }
}



/* =============================================================
   MODULE 01 · ACCOUNTING & FINANCE — explorer
   ============================================================= */
.dgw-zerp-acc { background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%); }
.dgw-zerp-acc-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(27,61,245,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(27,61,245,0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 0%, transparent 70%); }
.dgw-zerp-acc > .dgw-zerp-container { position: relative; z-index: 1; }

.dgw-zerp-acc-explorer { display: grid; grid-template-columns: 330px 1fr; gap: 28px; align-items: start; }

/* rail */
.dgw-zerp-acc-rail { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 96px; }
.dgw-zerp-acc-tab { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; width: 100%; text-align: left; padding: 14px 16px 16px; border-radius: 14px; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: inherit; color: inherit; transition: background .25s, border-color .25s, box-shadow .25s, transform .25s; overflow: hidden; }
.dgw-zerp-acc-tab:hover { background: rgba(255,255,255,0.7); border-color: var(--dgw-zerp-line-soft); }
.dgw-zerp-acc-tab.is-active { background: #fff; border-color: rgba(27,61,245,0.18); box-shadow: var(--dgw-zerp-card-shadow); transform: translateX(4px); }
.dgw-zerp-acc-tab-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); transition: background .25s, color .25s; }
.dgw-zerp-acc-tab.is-active .dgw-zerp-acc-tab-ico { background: linear-gradient(135deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); color: #fff; box-shadow: 0 8px 18px -8px rgba(27,61,245,0.6); }
.dgw-zerp-acc-tab-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dgw-zerp-acc-tab-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); }
.dgw-zerp-acc-tab-sub { font-size: 12.5px; line-height: 1.45; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(27,61,245,0.08); opacity: 0; transition: opacity .25s; }
.dgw-zerp-acc-tab-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); }
.dgw-zerp-acc-tab.is-active .dgw-zerp-acc-tab-bar { opacity: 1; }
.dgw-zerp-acc-tab.is-active .dgw-zerp-acc-tab-bar i { animation: dgw-zerp-acc-progress var(--dgw-zerp-acc-dur, 7s) linear forwards; }
.dgw-zerp-acc-explorer.is-paused .dgw-zerp-acc-tab-bar i { animation-play-state: paused; }
@keyframes dgw-zerp-acc-progress { from { width: 0 } to { width: 100% } }

/* screen */
.dgw-zerp-acc-screen-wrap { min-width: 0; }
.dgw-zerp-acc-screen { position: relative; border-radius: 18px; background: #fff; border: 1px solid rgba(27,61,245,0.14); box-shadow: 0 2px 4px rgba(14,22,51,0.04), 0 30px 70px -30px rgba(27,61,245,0.35), 0 0 0 6px rgba(255,255,255,0.55); overflow: hidden; }
.dgw-zerp-acc-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--dgw-zerp-line-soft); background: linear-gradient(180deg, #fbfcff, #f5f7ff); }
.dgw-zerp-acc-dots { display: inline-flex; gap: 5px; }
.dgw-zerp-acc-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e4e8f5; }
.dgw-zerp-acc-dots i:nth-child(1) { background: #ff7a7a } .dgw-zerp-acc-dots i:nth-child(2) { background: #ffcc5c } .dgw-zerp-acc-dots i:nth-child(3) { background: #5fd68a }
.dgw-zerp-acc-crumb { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500; color: var(--dgw-zerp-muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; }
.dgw-zerp-acc-crumb b { color: var(--dgw-zerp-brand); font-weight: 700; }
.dgw-zerp-acc-crumb em { font-style: normal; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-acc-crumb [data-acc-crumb] { color: var(--dgw-zerp-ink); font-weight: 700; }
.dgw-zerp-acc-org { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--dgw-zerp-muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dgw-zerp-acc-org i { width: 7px; height: 7px; border-radius: 50%; background: var(--dgw-zerp-green); box-shadow: 0 0 0 3px rgba(22,160,106,0.18); }

.dgw-zerp-acc-stage { position: relative; display: grid; background: linear-gradient(180deg, #fff 0%, #f8faff 100%); }
.dgw-zerp-acc-panel { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 20px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.985); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.dgw-zerp-acc-panel > * { flex: 1; }
.dgw-zerp-acc-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .08s, transform .5s ease .08s, visibility 0s; }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-card { animation: dgw-zerp-acc-in .55s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-card:nth-child(2) { animation-delay: .09s }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-card:nth-child(3) { animation-delay: .18s }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-col .dgw-zerp-acc-card:nth-child(1) { animation-delay: .09s }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-col .dgw-zerp-acc-card:nth-child(2) { animation-delay: .18s }
@keyframes dgw-zerp-acc-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

.dgw-zerp-acc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dgw-zerp-acc-grid2.is-gst { grid-template-columns: 1.15fr 1fr; }
.dgw-zerp-acc-grid2.is-rep { grid-template-columns: 1.1fr 1fr; }
.dgw-zerp-acc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dgw-zerp-acc-col { display: grid; gap: 16px; grid-template-rows: auto 1fr; }

.dgw-zerp-acc-card { background: #fff; border: 1px solid var(--dgw-zerp-line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(14,22,51,0.03); min-width: 0; }
.dgw-zerp-acc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13px; color: var(--dgw-zerp-ink); margin-bottom: 12px; flex-wrap: wrap; }
.dgw-zerp-acc-pill { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 100px; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); white-space: nowrap; }
.dgw-zerp-acc-pill.is-green { color: #0f7a50; background: rgba(22,160,106,0.12); }

/* ledger */
.dgw-zerp-acc-tree { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.dgw-zerp-acc-tree li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 6px 18px; border-top: 1px dashed var(--dgw-zerp-line-soft); color: var(--dgw-zerp-muted); position: relative; }
.dgw-zerp-acc-tree li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 1px; background: rgba(27,61,245,0.35); }
.dgw-zerp-acc-tree li.dgw-zerp-acc-tree-root { padding-left: 0; color: var(--dgw-zerp-ink); font-weight: 700; border-top: 0; margin-top: 6px; }
.dgw-zerp-acc-tree li.dgw-zerp-acc-tree-root::before { display: none; }
.dgw-zerp-acc-tree li:first-child { margin-top: 0; }
.dgw-zerp-acc-tree b { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-acc-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.dgw-zerp-acc-tbl th { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); padding: 0 6px 8px 0; border-bottom: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-acc-tbl td { padding: 7px 6px 7px 0; border-bottom: 1px solid var(--dgw-zerp-line-soft); color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-acc-tbl td i { font-style: normal; color: var(--dgw-zerp-muted-2); font-size: 11px; }
.dgw-zerp-acc-tbl td:nth-child(n+3), .dgw-zerp-acc-tbl th:nth-child(n+3) { text-align: right; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.dgw-zerp-acc-tbl tfoot td { border-bottom: 0; font-weight: 700; color: var(--dgw-zerp-ink); padding-top: 9px; }
.dgw-zerp-acc-tbl.is-pl td:nth-child(n+2), .dgw-zerp-acc-tbl.is-pl th:nth-child(n+2) { text-align: right; font-family: 'JetBrains Mono', monospace; }
.dgw-zerp-acc-tbl .is-green { color: var(--dgw-zerp-green); font-weight: 700; }
.dgw-zerp-acc-tbl .is-warn { color: var(--dgw-zerp-accent); font-weight: 700; }
.dgw-zerp-acc-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dgw-zerp-line-soft); font-size: 11.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dgw-zerp-acc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dgw-zerp-accent); }

/* banking */
.dgw-zerp-acc-recon { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 11.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-recon b { color: var(--dgw-zerp-ink); }
.dgw-zerp-acc-recon-bar { width: 90px; height: 6px; border-radius: 100px; background: rgba(27,61,245,0.10); overflow: hidden; }
.dgw-zerp-acc-recon-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-green)); border-radius: 100px; transform-origin: left; animation: dgw-zerp-acc-grow .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes dgw-zerp-acc-grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.dgw-zerp-acc-feed { list-style: none; margin: 0; padding: 0; }
.dgw-zerp-acc-feed li { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--dgw-zerp-line-soft); font-size: 12px; animation: dgw-zerp-acc-in .5s both; }
.dgw-zerp-acc-feed li:nth-child(1){animation-delay:.05s}.dgw-zerp-acc-feed li:nth-child(2){animation-delay:.12s}.dgw-zerp-acc-feed li:nth-child(3){animation-delay:.19s}.dgw-zerp-acc-feed li:nth-child(4){animation-delay:.26s}.dgw-zerp-acc-feed li:nth-child(5){animation-delay:.33s}.dgw-zerp-acc-feed li:nth-child(6){animation-delay:.40s}
.dgw-zerp-acc-feed-d { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-acc-feed-n { color: var(--dgw-zerp-ink-soft); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgw-zerp-acc-feed-a { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-acc-feed-a.is-in { color: var(--dgw-zerp-green); }
.dgw-zerp-acc-feed-t { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 6px; white-space: nowrap; min-width: 120px; text-align: center; }
.dgw-zerp-acc-feed-t.is-match { color: #0f7a50; background: rgba(22,160,106,0.12); }
.dgw-zerp-acc-feed-t.is-rule { color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); }
.dgw-zerp-acc-feed-t.is-todo { color: #b5541f; background: rgba(255,122,69,0.14); }

/* AR / AP */
.dgw-zerp-acc-age { display: grid; gap: 8px; }
.dgw-zerp-acc-age-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-age-row i { display: block; height: 10px; border-radius: 100px; background: rgba(27,61,245,0.10); position: relative; overflow: hidden; }
.dgw-zerp-acc-age-row i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); border-radius: 100px; transform-origin: left; animation: dgw-zerp-acc-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-acc-age-row.is-warn i::after { background: linear-gradient(90deg, var(--dgw-zerp-accent), #ffb08a); }
.dgw-zerp-acc-age-row b { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-acc-inv { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); font-size: 12px; }
.dgw-zerp-acc-inv b { display: block; color: var(--dgw-zerp-ink); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.dgw-zerp-acc-inv span { display: block; color: var(--dgw-zerp-muted); margin-top: 2px; }
.dgw-zerp-acc-inv em { display: block; font-style: normal; color: var(--dgw-zerp-brand); font-size: 11px; margin-top: 3px; font-weight: 600; }
.dgw-zerp-acc-inv-qr, .dgw-zerp-acc-irn-qr { position: relative; width: 54px; height: 54px; border-radius: 6px; background-color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--dgw-zerp-line);
  background-image: repeating-conic-gradient(var(--dgw-zerp-ink) 0 25%, transparent 0 50%), repeating-conic-gradient(var(--dgw-zerp-ink) 0 25%, transparent 0 50%);
  background-size: 8px 8px, 12px 12px; background-position: 0 0, 2px 6px; background-clip: padding-box; }
.dgw-zerp-acc-inv-qr::before, .dgw-zerp-acc-inv-qr::after, .dgw-zerp-acc-irn-qr::before, .dgw-zerp-acc-irn-qr::after { content: ""; position: absolute; width: 14px; height: 14px; border: 3px solid var(--dgw-zerp-ink); background: #fff; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px var(--dgw-zerp-ink); }
.dgw-zerp-acc-inv-qr::before, .dgw-zerp-acc-irn-qr::before { top: 0; left: 0; }
.dgw-zerp-acc-inv-qr::after, .dgw-zerp-acc-irn-qr::after { top: 0; right: 0; }
.dgw-zerp-acc-match { display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; align-items: center; gap: 3px; margin-bottom: 12px; }
.dgw-zerp-acc-match-n { border: 1px solid rgba(22,160,106,0.35); background: rgba(22,160,106,0.06); border-radius: 8px; padding: 7px 6px; text-align: center; min-width: 0; }
.dgw-zerp-acc-match-n em { display: block; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0f7a50; margin-bottom: 2px; }
.dgw-zerp-acc-match-n b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-acc-match-n span { display: block; font-size: 10px; color: var(--dgw-zerp-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-acc-match-l { height: 2px; background: repeating-linear-gradient(90deg, var(--dgw-zerp-green) 0 4px, transparent 4px 7px); }
.dgw-zerp-acc-lines { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.dgw-zerp-acc-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--dgw-zerp-line-soft); color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-lines li:first-child { border-top: 0; padding-top: 0; }
.dgw-zerp-acc-lines li.is-total { color: var(--dgw-zerp-ink); font-weight: 600; border-top: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-acc-lines b { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--dgw-zerp-ink); white-space: nowrap; text-align: right; }
.dgw-zerp-acc-lines b.is-green { color: var(--dgw-zerp-green); }
.dgw-zerp-acc-lines b.is-muted { color: var(--dgw-zerp-muted-2); }

/* GST */
.dgw-zerp-acc-irn-body { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; }
.dgw-zerp-acc-irn-qr { width: 76px; height: 76px; background-size: 9px 9px, 14px 14px; }
.dgw-zerp-acc-irn-qr::before, .dgw-zerp-acc-irn-qr::after { width: 18px; height: 18px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px var(--dgw-zerp-ink); }
.dgw-zerp-acc-irn-txt { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12px; align-content: start; }
.dgw-zerp-acc-irn-k { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); padding-top: 2px; }
.dgw-zerp-acc-irn-v { color: var(--dgw-zerp-ink-soft); font-weight: 500; }
.dgw-zerp-acc-gstin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dgw-zerp-line-soft); }
.dgw-zerp-acc-gstin span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 7px; color: var(--dgw-zerp-muted); background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); }
.dgw-zerp-acc-gstin span.is-on { color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); border-color: rgba(27,61,245,0.2); }
.dgw-zerp-acc-ret { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dgw-zerp-acc-ret li { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: var(--dgw-zerp-ink-soft); font-weight: 600; }
.dgw-zerp-acc-ret i { display: block; height: 8px; border-radius: 100px; background: rgba(27,61,245,0.10); overflow: hidden; }
.dgw-zerp-acc-ret i b { display: block; height: 100%; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); transform-origin: left; animation: dgw-zerp-acc-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-acc-ret em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; color: var(--dgw-zerp-muted); white-space: nowrap; }
.dgw-zerp-acc-ret em.is-green { color: var(--dgw-zerp-green); }

/* statutory */
.dgw-zerp-acc-msme { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dgw-zerp-acc-msme li { display: grid; grid-template-columns: 1fr; gap: 5px; font-size: 12px; color: var(--dgw-zerp-ink-soft); font-weight: 500; }
.dgw-zerp-acc-msme li i { display: block; height: 7px; border-radius: 100px; background: rgba(27,61,245,0.10); position: relative; overflow: hidden; }
.dgw-zerp-acc-msme li i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); transform-origin: left; animation: dgw-zerp-acc-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-acc-msme li i.is-warn::after { background: linear-gradient(90deg, var(--dgw-zerp-accent), var(--dgw-zerp-red)); }
.dgw-zerp-acc-msme li b { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-msme li span, .dgw-zerp-acc-msme li b { grid-row: 1; }
.dgw-zerp-acc-msme li { grid-template-columns: 1fr auto; }
.dgw-zerp-acc-msme li i { grid-column: 1 / -1; }
.dgw-zerp-acc-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dgw-zerp-muted); padding-top: 10px; border-top: 1px solid var(--dgw-zerp-line-soft); }

/* reporting */
.dgw-zerp-acc-spark { display: block; width: 100%; height: 90px; }
.dgw-zerp-acc-spark-line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: dgw-zerp-acc-draw 1.6s cubic-bezier(.2,.7,.2,1) .2s forwards; }
.dgw-zerp-acc-spark-fill { opacity: 0; animation: dgw-zerp-acc-fade .8s ease 1.1s forwards; }
@keyframes dgw-zerp-acc-draw { to { stroke-dashoffset: 0 } }
@keyframes dgw-zerp-acc-fade { to { opacity: 1 } }
.dgw-zerp-acc-sched .dgw-zerp-acc-lines b { color: var(--dgw-zerp-brand); font-size: 11px; }

/* responsive */
@media (max-width: 1024px) {
  .dgw-zerp-acc-explorer { grid-template-columns: 1fr; }
  .dgw-zerp-acc-rail { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dgw-zerp-acc-tab { padding: 12px 12px 14px; }
  .dgw-zerp-acc-tab.is-active { transform: none; }
  .dgw-zerp-acc-tab-sub { display: none; }
  .dgw-zerp-deep-index-num { font-size: 72px; }
  .dgw-zerp-acc-grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .dgw-zerp-deep-head { grid-template-columns: 1fr; gap: 20px; }
  .dgw-zerp-deep-index { justify-content: start; text-align: left; }
}
@media (max-width: 700px) {
  .dgw-zerp-acc-rail { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-acc-tab { grid-template-columns: 30px 1fr; gap: 9px; }
  .dgw-zerp-acc-tab-ico { width: 30px; height: 30px; border-radius: 8px; }
  .dgw-zerp-acc-tab-title { font-size: 13.5px; }
  .dgw-zerp-acc-grid2, .dgw-zerp-acc-grid2.is-gst, .dgw-zerp-acc-grid2.is-rep, .dgw-zerp-acc-grid3 { grid-template-columns: 1fr; }
  .dgw-zerp-acc-stage { display: block; }
  .dgw-zerp-acc-panel { position: absolute; inset: 0; padding: 14px; }
  .dgw-zerp-acc-panel.is-active { position: relative; }
  .dgw-zerp-acc-org { display: none; }
  .dgw-zerp-acc-feed li { grid-template-columns: 44px 1fr auto; }
  .dgw-zerp-acc-feed-t { grid-column: 2 / -1; justify-self: start; min-width: 0; }
  .dgw-zerp-acc-match { grid-template-columns: 1fr; gap: 6px; }
  .dgw-zerp-acc-match-l { width: 2px; height: 14px; justify-self: center; background: repeating-linear-gradient(180deg, var(--dgw-zerp-green) 0 4px, transparent 4px 7px); }
  .dgw-zerp-deep-index-num { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-acc-tab.is-active .dgw-zerp-acc-tab-bar i,
  .dgw-zerp-acc-panel.is-active .dgw-zerp-acc-card,
  .dgw-zerp-acc-feed li,
  .dgw-zerp-acc-recon-bar i, .dgw-zerp-acc-age-row i::after, .dgw-zerp-acc-ret i b, .dgw-zerp-acc-msme li i::after,
  .dgw-zerp-acc-spark-line, .dgw-zerp-acc-spark-fill { animation: none !important; opacity: 1; stroke-dashoffset: 0; transform: none; }
  .dgw-zerp-acc-panel { transition: none; }
}




/* =============================================================
   DEEP-DIVE SERIES (Module 01…10) — shared head
   ============================================================= */
.dgw-zerp-deep { position: relative; padding: 110px 0 100px; scroll-margin-top: 76px; overflow: hidden; }
.dgw-zerp-deep-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 52px; }
.dgw-zerp-deep-head-l { max-width: 760px; }
.dgw-zerp-deep-head-l .dgw-zerp-h2 { max-width: 680px; }
.dgw-zerp-deep-sub { margin-left: 0 !important; margin-right: 0 !important; max-width: 640px !important; }
.dgw-zerp-deep-index { display: flex; align-items: baseline; gap: 12px; text-align: right; justify-content: flex-end; padding-bottom: 6px; }
.dgw-zerp-deep-index-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 96px; line-height: 0.85; letter-spacing: -0.05em; background: linear-gradient(180deg, rgba(27,61,245,0.20) 0%, rgba(27,61,245,0.04) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dgw-zerp-deep-index-of { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-deep-index-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--dgw-zerp-ink); }



/* =============================================================
   DEEP-DIVE SERIES (Module 01…10) — shared head
   ============================================================= */
.dgw-zerp-deep { position: relative; padding: 110px 0 100px; scroll-margin-top: 76px; overflow: hidden; }
.dgw-zerp-deep-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 52px; }
.dgw-zerp-deep-head-l { max-width: 760px; }
.dgw-zerp-deep-head-l .dgw-zerp-h2 { max-width: 680px; }
.dgw-zerp-deep-sub { margin-left: 0 !important; margin-right: 0 !important; max-width: 640px !important; }
.dgw-zerp-deep-index { display: flex; align-items: baseline; gap: 12px; text-align: right; justify-content: flex-end; padding-bottom: 6px; }
.dgw-zerp-deep-index-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 96px; line-height: 0.85; letter-spacing: -0.05em; background: linear-gradient(180deg, rgba(27,61,245,0.20) 0%, rgba(27,61,245,0.04) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dgw-zerp-deep-index-of { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-deep-index-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--dgw-zerp-ink); }

/* =============================================================
   MODULE 02 · ITEMS & INVENTORY — stock map board + cards + lifecycle
   ============================================================= */
.dgw-zerp-inv { background: #fff; }
.dgw-zerp-inv-glow { position: absolute; left: 50%; top: 38%; width: 1100px; height: 700px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(27,61,245,0.10) 0%, rgba(27,61,245,0.04) 35%, transparent 70%); filter: blur(10px); }
.dgw-zerp-inv > .dgw-zerp-container { position: relative; z-index: 1; }

/* ---- board (dark control-room card on a light section) ---- */
.dgw-zerp-inv-board { position: relative; border-radius: 22px; padding: 22px 26px 20px; color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, #17224f 0%, #0d1330 55%, #0a0f26 100%);
  box-shadow: 0 2px 4px rgba(14,22,51,0.06), 0 40px 90px -40px rgba(14,22,51,0.55), 0 0 0 6px rgba(27,61,245,0.06); overflow: hidden; }
.dgw-zerp-inv-board::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%); }
.dgw-zerp-inv-board > * { position: relative; }
.dgw-zerp-inv-board-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dgw-zerp-inv-board-title { display: inline-flex; align-items: center; gap: 9px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.dgw-zerp-inv-live { width: 8px; height: 8px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 4px rgba(45,212,143,0.18); animation: dgw-zerp-pulse 2s ease-in-out infinite; }
.dgw-zerp-inv-board-kpis { display: inline-flex; gap: 18px; }
.dgw-zerp-inv-board-kpis span { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; font-family: 'JetBrains Mono', monospace; }
.dgw-zerp-inv-board-kpis b { white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; letter-spacing: -0.01em; color: #fff; text-transform: none; }
.dgw-zerp-inv-legend { margin-left: auto; display: inline-flex; gap: 14px; flex-wrap: wrap; }
.dgw-zerp-inv-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.62); }
.dgw-zerp-inv-legend i { width: 10px; height: 10px; border-radius: 3px; }

.dgw-zerp-inv-map { display: grid; grid-template-columns: 1fr 160px 1fr; gap: 18px; padding: 20px 0 6px; align-items: start; }
.dgw-zerp-inv-loc { position: relative; border-radius: 14px; padding: 14px 14px 12px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
.dgw-zerp-inv-loc-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.dgw-zerp-inv-loc-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; }
.dgw-zerp-inv-loc-gst { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.42); letter-spacing: 0.04em; }
.dgw-zerp-inv-loc-val { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; color: #9db4ff; }
.dgw-zerp-inv-zone { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.dgw-zerp-inv-zone + .dgw-zerp-inv-zone { border-top: 1px dashed rgba(255,255,255,0.07); }
.dgw-zerp-inv-zone-lbl { font-size: 10.5px; color: rgba(255,255,255,0.55); line-height: 1.2; }
.dgw-zerp-inv-zone-lbl b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; margin-right: 7px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.10); vertical-align: middle; }
.dgw-zerp-inv-bins { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.dgw-zerp-inv-bin { position: relative; display: block; aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,0.06); opacity: 0; transform: scale(0.6); }
.dgw-zerp-inv.is-in .dgw-zerp-inv-bin { animation: dgw-zerp-inv-bin-in .5s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) forwards; }
@keyframes dgw-zerp-inv-bin-in { to { opacity: 1; transform: none } }
.dgw-zerp-inv-bin.is-full { background: #4d6bff; box-shadow: 0 0 10px -2px rgba(77,107,255,0.7); }
.dgw-zerp-inv-bin.is-part { background: rgba(77,107,255,0.38); }
.dgw-zerp-inv-bin.is-empty { background: rgba(255,255,255,0.06); }
.dgw-zerp-inv-bin.is-low { background: #ff7a45; box-shadow: 0 0 12px -2px rgba(255,122,69,0.8); animation-name: dgw-zerp-inv-bin-in, dgw-zerp-inv-low !important; animation-duration: .5s, 1.6s !important; animation-iteration-count: 1, infinite !important; animation-delay: var(--d, 0ms), .6s !important; }
@keyframes dgw-zerp-inv-low { 0%,100% { box-shadow: 0 0 12px -2px rgba(255,122,69,0.8) } 50% { box-shadow: 0 0 18px 2px rgba(255,122,69,0.95) } }
.dgw-zerp-inv-bin.is-res { background: repeating-linear-gradient(135deg, #2dd48f 0 3px, rgba(45,212,143,0.35) 3px 6px); }
.dgw-zerp-inv-bin.is-qc { background: repeating-linear-gradient(135deg, #ff5c5c 0 3px, rgba(255,92,92,0.3) 3px 6px); }
.dgw-zerp-inv-legend .is-full { background: #4d6bff } .dgw-zerp-inv-legend .is-part { background: rgba(77,107,255,0.45) } .dgw-zerp-inv-legend .is-low { background: #ff7a45 }
.dgw-zerp-inv-legend .is-res { background: repeating-linear-gradient(135deg, #2dd48f 0 2px, rgba(45,212,143,0.35) 2px 4px) } .dgw-zerp-inv-legend .is-qc { background: repeating-linear-gradient(135deg, #ff5c5c 0 2px, rgba(255,92,92,0.3) 2px 4px) }
/* scanner bin */
.dgw-zerp-inv-bin.is-scan { outline: 2px solid #fff; outline-offset: 2px; z-index: 2; }
.dgw-zerp-inv-bin.is-scan::after { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,0.9); animation: dgw-zerp-inv-scan 1.4s ease-in-out infinite alternate; }
@keyframes dgw-zerp-inv-scan { from { top: -3px } to { top: calc(100% - 0px) } }
.dgw-zerp-inv-bin.is-hold { outline: 2px solid #ff5c5c; outline-offset: 2px; z-index: 2; }
/* callouts */
.dgw-zerp-inv-callout { position: relative; margin-top: 12px; padding: 9px 12px 9px 14px; border-radius: 9px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); color: #fff; font-size: 11.5px; line-height: 1.4; opacity: 0; transform: translateY(6px); }
.dgw-zerp-inv.is-in .dgw-zerp-inv-callout { animation: dgw-zerp-acc-in .6s cubic-bezier(.2,.7,.2,1) 1.1s forwards; }
.dgw-zerp-inv-callout::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.6); }
.dgw-zerp-inv-callout-hold::before { background: #ff5c5c; box-shadow: 0 0 10px rgba(255,92,92,0.6); }
.dgw-zerp-inv-callout-k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9db4ff; margin-bottom: 3px; }
.dgw-zerp-inv-callout-hold .dgw-zerp-inv-callout-k { color: #ff8a8a; }
.dgw-zerp-inv-callout-v { display: block; color: #fff; }
.dgw-zerp-inv-callout-v b { font-family: 'JetBrains Mono', monospace; }
.dgw-zerp-inv-callout-v b.is-warn { color: #ffb08a; }
.dgw-zerp-inv-callout-s { display: block; color: rgba(255,255,255,0.55); font-size: 11px; margin-top: 2px; }

/* transit */
.dgw-zerp-inv-transit { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-top: 26px; }
.dgw-zerp-inv-transit-path { position: relative; width: 100%; height: 22px; }
.dgw-zerp-inv-transit-path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(157,180,255,0.7) 0 6px, transparent 6px 12px); animation: dgw-zerp-inv-dash 1s linear infinite; }
@keyframes dgw-zerp-inv-dash { to { background-position: 12px 0 } }
.dgw-zerp-inv-transit-path::after { content: ""; position: absolute; right: -2px; top: 50%; width: 0; height: 0; border-left: 7px solid #9db4ff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: translateY(-50%); }
.dgw-zerp-inv-transit-truck { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #0d1330; background: #fff; box-shadow: 0 6px 16px -4px rgba(255,255,255,0.5); transform: translate(0, -50%); animation: dgw-zerp-inv-truck 4.5s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes dgw-zerp-inv-truck { 0% { left: 0; opacity: 0 } 8% { opacity: 1 } 88% { opacity: 1 } 100% { left: calc(100% - 26px); opacity: 0 } }
.dgw-zerp-inv-transit-card { width: 100%; border-radius: 10px; padding: 10px 11px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); display: grid; gap: 4px; text-align: center; }
.dgw-zerp-inv-transit-id { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; color: #fff; }
.dgw-zerp-inv-transit-what { font-size: 11px; color: rgba(255,255,255,0.62); }
.dgw-zerp-inv-transit-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.dgw-zerp-inv-transit-steps i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 5px; border-radius: 4px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.dgw-zerp-inv-transit-steps i.is-done { color: #2dd48f; background: rgba(45,212,143,0.14); }
.dgw-zerp-inv-transit-steps i.is-on { color: #fff; background: #1b3df5; box-shadow: 0 0 12px -2px rgba(27,61,245,0.9); }
.dgw-zerp-inv-transit-lbl { font-size: 10.5px; color: rgba(255,255,255,0.45); text-align: center; line-height: 1.3; }

.dgw-zerp-inv-board-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11.5px; color: rgba(255,255,255,0.62); }
.dgw-zerp-inv-board-foot span { display: inline-flex; align-items: center; gap: 7px; }
.dgw-zerp-inv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dgw-zerp-accent); }

/* ---- follow-one-item trace strip (inside the board) ---- */
.dgw-zerp-inv-trace { margin-top: 16px; padding: 14px 16px 12px; border-radius: 14px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
.dgw-zerp-inv-trace-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dgw-zerp-inv-trace-tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-accent); padding: 4px 8px; border-radius: 6px; background: rgba(255,122,69,0.14); }
.dgw-zerp-inv-trace-sku { font-size: 12.5px; color: rgba(255,255,255,0.7); }
.dgw-zerp-inv-trace-sku b { font-family: 'JetBrains Mono', monospace; color: #fff; margin-right: 4px; }
.dgw-zerp-inv-trace-flags { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2dd48f; }
.dgw-zerp-inv-trace-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 0 22px; padding-top: 12px; }
.dgw-zerp-inv-trace-col { min-width: 0; }
.dgw-zerp-inv-trace-col + .dgw-zerp-inv-trace-col { border-left: 1px dashed rgba(255,255,255,0.10); padding-left: 22px; }
.dgw-zerp-inv-trace-k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.dgw-zerp-inv-trace-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dgw-zerp-inv-trace-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; color: rgba(255,255,255,0.72); }
.dgw-zerp-inv-trace-list li b { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #fff; }
.dgw-zerp-inv-trace-list li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-inv-trace-list li em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); white-space: nowrap; }
.dgw-zerp-inv-trace-list li.is-next em { color: #fff; background: #1b3df5; }
.dgw-zerp-inv-trace-list li.is-hold em { color: #ff8a8a; background: rgba(255,92,92,0.16); }
.dgw-zerp-inv-trace-list li:only-child, .dgw-zerp-inv-trace-col:first-child .dgw-zerp-inv-trace-list li { grid-template-columns: 1fr; }
.dgw-zerp-inv-trace-col:first-child .dgw-zerp-inv-trace-list li span { white-space: normal; }
.dgw-zerp-inv-trace-col:first-child .dgw-zerp-inv-trace-list li::before { content: none; }
.dgw-zerp-inv-trace-reorder { position: relative; margin-top: 10px; padding-top: 12px; height: 6px; box-sizing: content-box; }
.dgw-zerp-inv-trace-reorder::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 6px; border-radius: 100px; background: linear-gradient(90deg, rgba(255,122,69,0.3) 0 30%, rgba(255,255,255,0.10) 30%); }
.dgw-zerp-inv-trace-reorder i { position: absolute; left: 0; top: 4px; height: 6px; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, #1b3df5, #6f86ff); transform-origin: left; animation: dgw-zerp-acc-grow 1s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-inv-trace-reorder em { position: absolute; left: var(--x); top: 1px; width: 2px; height: 12px; background: var(--dgw-zerp-accent); border-radius: 2px; }
.dgw-zerp-inv-trace-reorder span { position: absolute; left: 0; top: 16px; font-size: 10.5px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.dgw-zerp-inv-trace-reorder span b { font-family: 'JetBrains Mono', monospace; color: #fff; }
.dgw-zerp-inv-trace-col:first-child { padding-bottom: 18px; }
.dgw-zerp-inv-trace-serials { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(255,255,255,0.10); }
.dgw-zerp-inv-trace-serials i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); }
.dgw-zerp-inv-trace-serials i.is-more { color: #9db4ff; background: rgba(27,61,245,0.25); }
.dgw-zerp-inv-trace-serials span { font-size: 10.5px; color: #2dd48f; font-weight: 600; margin-left: 4px; }
.dgw-zerp-inv-trace-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dgw-zerp-inv-trace-steps li { position: relative; display: grid; grid-template-columns: 14px 1fr; column-gap: 9px; padding: 2px 0 7px; font-size: 11.5px; 
/* 	color: rgba(255,255,255,0.85); */
}
.dgw-zerp-inv-trace-steps li b { font-weight: 600; font-size: 11.5px; }
.dgw-zerp-inv-trace-steps li span { 
	grid-column: 2; font-size: 10.5px; 
/* 	color: rgba(255,255,255,0.48); */
}
.dgw-zerp-inv-trace-steps li i { grid-row: 1 / span 2; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.22); position: relative; z-index: 1; background: #0d1330; }
.dgw-zerp-inv-trace-steps li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: rgba(255,255,255,0.12); }
.dgw-zerp-inv-trace-steps li:last-child::before { display: none; }
.dgw-zerp-inv-trace-steps li.is-done i { border-color: #2dd48f; background: #2dd48f; }
.dgw-zerp-inv-trace-steps li.is-done i::after { content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border-right: 2px solid #0d1330; border-bottom: 2px solid #0d1330; transform: rotate(45deg); }
.dgw-zerp-inv-trace-steps li.is-done::before { background: #2dd48f; }
.dgw-zerp-inv-trace-steps li.is-on i { border-color: #4d6bff; box-shadow: 0 0 0 4px rgba(77,107,255,0.2); animation: dgw-zerp-pulse 1.8s ease-in-out infinite; }
.dgw-zerp-inv-trace-steps li.is-on i::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #4d6bff; }
.dgw-zerp-inv-trace-steps li.is-on b { color: #9db4ff; }

/* ---- lifecycle strip ---- */
.dgw-zerp-inv-flow { position: relative; margin-top: 40px; padding: 26px 0 0; }
.dgw-zerp-inv-flow-line { position: absolute; left: 8.33%; right: 8.33%; top: 26px; height: 2px; margin-top: 21px; background: linear-gradient(90deg, rgba(27,61,245,0.10), rgba(27,61,245,0.28), rgba(27,61,245,0.10)); border-radius: 2px; overflow: visible; }
.dgw-zerp-inv-flow-pulse { position: absolute; top: 50%; left: 0; width: 60px; height: 4px; margin-top: -2px; border-radius: 100px; background: linear-gradient(90deg, transparent, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); box-shadow: 0 0 14px rgba(27,61,245,0.5); animation: dgw-zerp-inv-pulse 7.2s linear infinite; }
@keyframes dgw-zerp-inv-pulse { from { left: -60px } to { left: 100% } }
.dgw-zerp-inv-flow-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.dgw-zerp-inv-flow-step { text-align: center; padding: 0 4px; }
.dgw-zerp-inv-flow-node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px; color: var(--dgw-zerp-brand); background: #fff; border: 1px solid rgba(27,61,245,0.18); box-shadow: var(--dgw-zerp-card-shadow); animation: dgw-zerp-inv-lit 7.2s linear infinite; animation-delay: calc(var(--i) * 1.2s + 0.3s); }
@keyframes dgw-zerp-inv-lit { 0%, 4% { color: var(--dgw-zerp-brand); background: #fff; transform: none } 8% { color: #fff; background: var(--dgw-zerp-brand); transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 24px -8px rgba(27,61,245,0.6) } 20% { color: var(--dgw-zerp-brand); background: #fff; transform: none } 100% { color: var(--dgw-zerp-brand); background: #fff } }
.dgw-zerp-inv-flow-step b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); margin-bottom: 5px; }
.dgw-zerp-inv-flow-step span:last-child { display: block; font-size: 12px; line-height: 1.45; color: var(--dgw-zerp-muted); }

/* ---- shared "We configure" strip (used by every deep-dive module) ---- */
.dgw-zerp-deep-config { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--dgw-zerp-line); border-left: 3px solid var(--dgw-zerp-accent); box-shadow: var(--dgw-zerp-card-shadow); }
.dgw-zerp-deep-config-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-accent); white-space: nowrap; }
.dgw-zerp-deep-config-items { position: relative; min-height: 22px; display: grid; }
.dgw-zerp-deep-config-items span { grid-area: 1 / 1; font-size: 13.5px; line-height: 1.55; color: var(--dgw-zerp-ink-soft); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; pointer-events: none; }
.dgw-zerp-deep-config-items span.is-active { opacity: 1; transform: none; pointer-events: auto; }
.dgw-zerp-inv .dgw-zerp-deep-config { margin-top: 36px; }

/* responsive */
@media (max-width: 1024px) {
  .dgw-zerp-inv-map { grid-template-columns: 1fr; gap: 14px; }
  .dgw-zerp-inv-transit { flex-direction: row; padding-top: 0; gap: 14px; }
  .dgw-zerp-inv-transit-path { width: 30%; }
  .dgw-zerp-inv-transit-card { width: auto; flex: 1; }
  .dgw-zerp-inv-transit-lbl { display: none; }
  .dgw-zerp-inv-flow-steps { grid-template-columns: repeat(3, 1fr); gap: 22px 14px; }
  .dgw-zerp-inv-flow-line { display: none; }
  .dgw-zerp-inv-legend { margin-left: 0; }
  .dgw-zerp-inv-trace-grid { grid-template-columns: 1fr; gap: 14px; }
  .dgw-zerp-inv-trace-col + .dgw-zerp-inv-trace-col { border-left: 0; padding-left: 0; border-top: 1px dashed rgba(255,255,255,0.10); padding-top: 12px; }
  .dgw-zerp-inv-trace-flags { margin-left: 0; }
}
@media (max-width: 700px) {
  .dgw-zerp-inv-board { padding: 16px; border-radius: 16px; }
  .dgw-zerp-inv-board-kpis { gap: 12px; }
  .dgw-zerp-inv-zone { grid-template-columns: 74px 1fr; }
  .dgw-zerp-inv-zone-lbl { font-size: 9.5px; }
  .dgw-zerp-inv-flow-steps { grid-template-columns: 1fr 1fr; }
  .dgw-zerp-inv-transit { flex-direction: column; }
  .dgw-zerp-inv-transit-path { width: 100%; }
  .dgw-zerp-deep-config { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-inv-bin { opacity: 1; transform: none; animation: none !important; }
  .dgw-zerp-inv-callout { opacity: 1; transform: none; animation: none !important; }
  .dgw-zerp-inv-bin.is-scan::after, .dgw-zerp-inv-transit-truck, .dgw-zerp-inv-transit-path::before, .dgw-zerp-inv-flow-pulse, .dgw-zerp-inv-flow-node, .dgw-zerp-inv-live, .dgw-zerp-inv-trace-steps li.is-on i, .dgw-zerp-inv-trace-reorder i { animation: none !important; }
  .dgw-zerp-deep-config-items span { transition: none; }
}


/* =============================================================
   MODULE 03 · MANUFACTURING & PRODUCTION — the production floor
   ============================================================= */
.dgw-zerp-mfg { background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%); }
.dgw-zerp-mfg-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(27,61,245,0.05) 0 1px, transparent 1px 22px);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 72%); }
.dgw-zerp-mfg > .dgw-zerp-container { position: relative; z-index: 1; }

/* ---- console ---- */
.dgw-zerp-mfg-console { background: #fff; border: 1px solid rgba(27,61,245,0.14); border-radius: 22px; padding: 18px 20px 20px;
  box-shadow: 0 2px 4px rgba(14,22,51,0.04), 0 40px 90px -36px rgba(27,61,245,0.38), 0 0 0 6px rgba(255,255,255,0.6); }

/* MO header */
.dgw-zerp-mfg-mo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-mfg-mo-id { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: #fff; background: var(--dgw-zerp-ink); padding: 7px 12px; border-radius: 9px; }
.dgw-zerp-mfg-live { width: 7px; height: 7px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 3px rgba(45,212,143,0.25); animation: dgw-zerp-pulse 2s ease-in-out infinite; }
.dgw-zerp-mfg-mo-what { display: flex; flex-direction: column; gap: 1px; }
.dgw-zerp-mfg-mo-what b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: var(--dgw-zerp-ink); letter-spacing: -0.01em; }
.dgw-zerp-mfg-mo-what span { font-size: 11.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-mo-steps { display: inline-flex; gap: 4px; }
.dgw-zerp-mfg-mo-steps i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; color: var(--dgw-zerp-muted-2); background: var(--dgw-zerp-bg-tint); }
.dgw-zerp-mfg-mo-steps i.is-done { color: #0f7a50; background: rgba(22,160,106,0.12); }
.dgw-zerp-mfg-mo-steps i.is-on { color: #fff; background: var(--dgw-zerp-brand); box-shadow: 0 6px 14px -6px rgba(27,61,245,0.8); }
.dgw-zerp-mfg-mo-prog { display: flex; flex-direction: column; gap: 5px; min-width: 200px; margin-left: auto; }
.dgw-zerp-mfg-mo-prog-bar { height: 8px; border-radius: 100px; background: rgba(27,61,245,0.10); overflow: hidden; }
.dgw-zerp-mfg-mo-prog-bar i { display: block; height: 100%; width: 62.4%; border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); transition: width .6s ease; }
.dgw-zerp-mfg-mo-prog-v { font-size: 11px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-mo-prog-v b { font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink); font-size: 12px; }
.dgw-zerp-mfg-mo-ok { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: #0f7a50; background: rgba(22,160,106,0.12); padding: 6px 10px; border-radius: 7px; white-space: nowrap; }

/* body */
.dgw-zerp-mfg-body { display: grid; grid-template-columns: 222px minmax(0,1fr) 222px; gap: 18px; padding-top: 18px; align-items: start; }
.dgw-zerp-mfg-bom, .dgw-zerp-mfg-cost { background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); border-radius: 14px; padding: 14px; min-width: 0; }
.dgw-zerp-mfg-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--dgw-zerp-ink); margin-bottom: 10px; }
.dgw-zerp-mfg-panel-h2 { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-mfg-pill { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 100px; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); white-space: nowrap; }
.dgw-zerp-mfg-pill.is-warn { color: #b5541f; background: rgba(255,122,69,0.16); }

/* BOM tree */
.dgw-zerp-mfg-tree { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
.dgw-zerp-mfg-tree li { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; padding: 5px 0 5px var(--ind, 0px); border-top: 1px dashed var(--dgw-zerp-line-soft); color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-mfg-tree li:first-child { border-top: 0; }
.dgw-zerp-mfg-tree-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-mfg-tree li b { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--dgw-zerp-muted); white-space: nowrap; }
.dgw-zerp-mfg-tree li em { grid-column: 1 / -1; font-style: normal; font-size: 10px; color: var(--dgw-zerp-muted-2); margin-top: -2px; }
.dgw-zerp-mfg-tree-fg { font-weight: 700; color: var(--dgw-zerp-ink) !important; }
.dgw-zerp-mfg-tree-fg b { color: #fff !important; background: var(--dgw-zerp-ink); padding: 2px 6px; border-radius: 4px; }
.dgw-zerp-mfg-tree-sa { --ind: 16px; font-weight: 600; }
.dgw-zerp-mfg-tree-sa b { color: var(--dgw-zerp-brand) !important; }
.dgw-zerp-mfg-tree-c1 { --ind: 16px; }
.dgw-zerp-mfg-tree-c2 { --ind: 32px; }
.dgw-zerp-mfg-tree li:not(.dgw-zerp-mfg-tree-fg)::before { content: ""; position: absolute; left: calc(var(--ind) - 10px); top: 50%; width: 6px; height: 1px; background: rgba(27,61,245,0.35); }
.dgw-zerp-mfg-tree li:not(.dgw-zerp-mfg-tree-fg)::after { content: ""; position: absolute; left: calc(var(--ind) - 12px); top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--dgw-zerp-accent); opacity: 0; transform: scale(0.4); animation: dgw-zerp-mfg-consume 12s linear infinite; animation-delay: calc(var(--k) * 1.5s); }
@keyframes dgw-zerp-mfg-consume { 0%, 3% { opacity: 0; transform: scale(0.4) } 6% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 0 4px rgba(255,122,69,0.25) } 12%, 100% { opacity: 0; transform: scale(0.4) } }
.dgw-zerp-mfg-bom-foot { display: grid; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dgw-zerp-line); font-size: 10.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-bom-foot span { display: flex; align-items: center; gap: 7px; }
.dgw-zerp-mfg-bom-foot i { width: 5px; height: 5px; border-radius: 50%; background: var(--dgw-zerp-accent); flex: none; }

/* ---- THE LINE ---- */
.dgw-zerp-mfg-linewrap { min-width: 0; }
.dgw-zerp-mfg-line { position: relative; padding: 14px 14px 0; border-radius: 14px; border: 1px solid var(--dgw-zerp-line);
  background: linear-gradient(180deg, #fbfcff 0%, #f1f4fb 100%); overflow: hidden; }
.dgw-zerp-mfg-line::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(27,61,245,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(27,61,245,0.05) 1px, transparent 1px); background-size: 28px 28px; }
.dgw-zerp-mfg-stations { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dgw-zerp-mfg-st { position: relative; min-width: 0; background: #fff; border: 1px solid var(--dgw-zerp-line); border-radius: 12px; padding: 8px 8px 7px; animation: dgw-zerp-mfg-stglow 12s linear infinite; animation-delay: calc(0.9s + var(--i) * 2.22s); }
@keyframes dgw-zerp-mfg-stglow { 0%, 2% { border-color: var(--dgw-zerp-line); box-shadow: none; transform: none } 6% { border-color: rgba(27,61,245,0.55); box-shadow: 0 14px 30px -12px rgba(27,61,245,0.55), 0 0 0 3px rgba(27,61,245,0.12); transform: translateY(-2px) } 18%, 100% { border-color: var(--dgw-zerp-line); box-shadow: none; transform: none } }
.dgw-zerp-mfg-st-h { display: flex; align-items: center; gap: 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12px; color: var(--dgw-zerp-ink); margin-bottom: 7px; }
.dgw-zerp-mfg-st-h b { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--dgw-zerp-accent); }
.dgw-zerp-mfg-st-run { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 2px rgba(45,212,143,0.22); animation: dgw-zerp-pulse 1.6s ease-in-out infinite; }
.dgw-zerp-mfg-st-f { display: flex; justify-content: space-between; gap: 6px; margin-top: 7px; font-size: 10px; color: var(--dgw-zerp-muted); white-space: nowrap; overflow: hidden; min-width: 0; }
.dgw-zerp-mfg-st-f > span, .dgw-zerp-mfg-st-f { text-overflow: ellipsis; }
.dgw-zerp-mfg-st-f em { font-style: normal; font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-mfg-machine { position: relative; height: 76px; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #1a2450 0%, #0f1633 70%); }
.dgw-zerp-mfg-machine::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 6px, transparent 6px 12px); }
.dgw-zerp-mfg-machine > span { position: absolute; }

/* 01 CUT */
.dgw-zerp-mfg-cut-rail { top: 12px; left: 10px; right: 10px; height: 3px; background: #3a4670; border-radius: 2px; }
.dgw-zerp-mfg-cut-head { top: 8px; left: 10%; width: 10px; height: 20px; background: linear-gradient(180deg, #fff, #cfd6e6); border-radius: 2px 2px 3px 3px; animation: dgw-zerp-mfg-cut 1.7s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-cut { from { left: 12% } to { left: 78% } }
.dgw-zerp-mfg-cut-head::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffb08a 30%, rgba(255,122,69,0) 70%); animation: dgw-zerp-mfg-spark .18s steps(2) infinite; }
@keyframes dgw-zerp-mfg-spark { from { transform: scale(0.6); opacity: .6 } to { transform: scale(1.3); opacity: 1 } }
.dgw-zerp-mfg-cut-plate { bottom: 16px; left: 12px; right: 12px; height: 9px; background: rgba(77,107,255,0.55); border-radius: 2px; }
.dgw-zerp-mfg-cut-plate::after { content: ""; position: absolute; left: 0; top: 50%; height: 1px; width: 100%; background: repeating-linear-gradient(90deg, #ffb08a 0 3px, transparent 3px 6px); opacity: .8; }

/* 02 WELD */
.dgw-zerp-mfg-weld-part { bottom: 14px; left: 50%; width: 46px; height: 9px; margin-left: -23px; background: #2a3358; border-radius: 2px; }
.dgw-zerp-mfg-weld-part::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ffb08a; }
.dgw-zerp-mfg-weld-torch { bottom: 22px; left: 50%; width: 7px; height: 32px; margin-left: 2px; background: linear-gradient(180deg, #cfd6e6, #8f9bbf); border-radius: 3px; transform: rotate(-32deg); transform-origin: bottom center; animation: dgw-zerp-mfg-torch 2.2s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-torch { from { transform: rotate(-38deg) translateX(-3px) } to { transform: rotate(-26deg) translateX(3px) } }
.dgw-zerp-mfg-weld-arc { bottom: 18px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffd7a8 25%, rgba(255,122,69,0.6) 45%, rgba(255,122,69,0) 70%); animation: dgw-zerp-mfg-arc .32s steps(3) infinite alternate; }
@keyframes dgw-zerp-mfg-arc { from { transform: scale(.6); opacity: .35 } to { transform: scale(1.5); opacity: 1 } }

/* 03 ASSEMBLE */
.dgw-zerp-mfg-asm-base { bottom: 12px; left: 16px; width: 24px; height: 10px; background: #2a3358; border-radius: 2px; }
.dgw-zerp-mfg-asm-arm { bottom: 20px; left: 25px; width: 6px; height: 36px; background: linear-gradient(180deg, #e6ebf7, #aab5d6); border-radius: 3px; transform-origin: bottom center; animation: dgw-zerp-mfg-arm 2.6s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-arm { from { transform: rotate(-34deg) } to { transform: rotate(28deg) } }
.dgw-zerp-mfg-asm-fore { position: absolute; top: -2px; left: 0; width: 6px; height: 24px; background: #9db4ff; border-radius: 3px; transform-origin: top center; transform: rotate(60deg); animation: dgw-zerp-mfg-fore 2.6s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-fore { from { transform: rotate(58deg) } to { transform: rotate(-12deg) } }
.dgw-zerp-mfg-asm-grip { position: absolute; bottom: -8px; left: -4px; width: 14px; height: 9px; border: 2px solid var(--dgw-zerp-accent); border-top: 0; border-radius: 0 0 5px 5px; }
.dgw-zerp-mfg-m-asm::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 18px; height: 16px; background: #4d6bff; border-radius: 4px 4px 2px 2px; box-shadow: inset 0 -5px 0 #0e1633; }

/* 04 QC */
.dgw-zerp-mfg-qc-gate { top: 8px; bottom: 12px; left: 22px; right: 22px; border: 2px solid #3a4670; border-radius: 5px; }
.dgw-zerp-mfg-qc-gate::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 18px; height: 16px; margin-left: -9px; background: #4d6bff; border-radius: 4px 4px 2px 2px; box-shadow: inset 0 -5px 0 #0e1633; }
.dgw-zerp-mfg-qc-beam { left: 26px; right: 26px; height: 2px; top: 12px; background: #2dd48f; box-shadow: 0 0 8px 2px rgba(45,212,143,0.6); animation: dgw-zerp-mfg-beam 1.3s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-beam { from { top: 12px } to { top: 56px } }
.dgw-zerp-mfg-qc-tick { top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: #2dd48f; opacity: 0; animation: dgw-zerp-mfg-tick 3.9s ease-in-out infinite; }
.dgw-zerp-mfg-qc-tick::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border-right: 2px solid #0f1633; border-bottom: 2px solid #0f1633; transform: rotate(45deg); }
@keyframes dgw-zerp-mfg-tick { 0%, 62% { opacity: 0; transform: scale(.4) } 68%, 92% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(.4) } }

/* 05 PACK */
.dgw-zerp-mfg-pack-box { bottom: 13px; left: 50%; width: 32px; height: 22px; margin-left: -20px; background: #d9a066; border-radius: 2px; }
.dgw-zerp-mfg-pack-box::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #b9834d; }
.dgw-zerp-mfg-pack-lid { position: absolute; left: 0; top: 0; width: 100%; height: 9px; background: #c58a52; border-radius: 2px 2px 0 0; transform-origin: top center; animation: dgw-zerp-mfg-lid 2.4s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-lid { from { transform: rotateX(0deg) } 40% { transform: rotateX(0deg) } to { transform: rotateX(-115deg) } }
.dgw-zerp-mfg-pack-label { top: 14px; right: 12px; width: 20px; height: 10px; background: #fff; border-radius: 2px; opacity: 0; animation: dgw-zerp-mfg-label 2.4s ease-in-out infinite alternate; }
.dgw-zerp-mfg-pack-label::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 4px; background: repeating-linear-gradient(90deg, #0e1633 0 1px, transparent 1px 3px); }
@keyframes dgw-zerp-mfg-label { from { opacity: 0; transform: translateY(-6px) } 50% { opacity: 0 } to { opacity: 1; transform: translateY(0) } }

/* belt */
.dgw-zerp-mfg-belt { position: relative; height: 72px; margin: 10px -14px 0; }
.dgw-zerp-mfg-belt-track { position: absolute; left: 0; right: 0; bottom: 14px; height: 14px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #2a3358 0 16px, #1c2444 16px 32px); animation: dgw-zerp-mfg-belt .7s linear infinite; box-shadow: 0 6px 14px -8px rgba(14,22,51,0.6); }
@keyframes dgw-zerp-mfg-belt { to { background-position: -32px 0 } }
.dgw-zerp-mfg-belt-track::before, .dgw-zerp-mfg-belt-track::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #3a4670; }
.dgw-zerp-mfg-belt-track::before { top: -2px } .dgw-zerp-mfg-belt-track::after { bottom: -2px }
.dgw-zerp-mfg-belt-in, .dgw-zerp-mfg-belt-out { position: absolute; top: 4px; font-size: 9.5px; line-height: 1.3; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-belt-in { left: 14px; } .dgw-zerp-mfg-belt-out { right: 14px; text-align: right; }
.dgw-zerp-mfg-belt-in b, .dgw-zerp-mfg-belt-out b { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--dgw-zerp-ink); }
.dgw-zerp-mfg-unit { position: absolute; bottom: 30px; left: -4%; width: 24px; height: 8px; border-radius: 2px; background: #b8c2da; animation: dgw-zerp-mfg-unit 12s linear infinite; animation-delay: var(--d, 0s); box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
@keyframes dgw-zerp-mfg-unit {
  0%   { left: -4%;  width: 24px; height: 8px;  border-radius: 2px; background: #b8c2da; box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
  11%  { left: 8%;   width: 24px; height: 8px;  border-radius: 2px; background: #b8c2da; box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
  15%  { left: 12%;  width: 22px; height: 10px; border-radius: 3px; background: #9db4ff; box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
  29%  { left: 27%;  width: 22px; height: 10px; border-radius: 3px; background: #9db4ff; box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
  33%  { left: 32%;  width: 22px; height: 10px; border-radius: 3px; background: #1b3df5; box-shadow: 0 -2px 0 0 #ff7a45, 0 4px 8px -3px rgba(14,22,51,0.5); }
  48%  { left: 47%;  width: 22px; height: 10px; border-radius: 3px; background: #1b3df5; box-shadow: 0 -2px 0 0 #ff7a45, 0 4px 8px -3px rgba(14,22,51,0.5); }
  52%  { left: 52%;  width: 18px; height: 18px; border-radius: 4px 4px 2px 2px; background: #1b3df5; box-shadow: inset 0 -6px 0 #0e1633, 0 4px 8px -3px rgba(14,22,51,0.5); }
  66%  { left: 66%;  width: 18px; height: 18px; border-radius: 4px 4px 2px 2px; background: #1b3df5; box-shadow: inset 0 -6px 0 #0e1633, 0 4px 8px -3px rgba(14,22,51,0.5); }
  70%  { left: 70%;  width: 18px; height: 18px; border-radius: 4px 4px 2px 2px; background: #1b3df5; box-shadow: inset 0 -6px 0 #0e1633, 0 0 0 3px rgba(45,212,143,0.9), 0 4px 8px -3px rgba(14,22,51,0.5); }
  85%  { left: 85%;  width: 18px; height: 18px; border-radius: 4px 4px 2px 2px; background: #1b3df5; box-shadow: inset 0 -6px 0 #0e1633, 0 0 0 3px rgba(45,212,143,0.9), 0 4px 8px -3px rgba(14,22,51,0.5); }
  89%  { left: 89%;  width: 24px; height: 18px; border-radius: 3px; background: #d9a066; box-shadow: inset 0 0 0 0 #0e1633, inset 4px 0 0 -2px #b9834d, 0 4px 8px -3px rgba(14,22,51,0.5); }
  100% { left: 104%; width: 24px; height: 18px; border-radius: 3px; background: #d9a066; box-shadow: inset 0 0 0 0 #0e1633, inset 4px 0 0 -2px #b9834d, 0 4px 8px -3px rgba(14,22,51,0.5); }
}

/* job cards */
.dgw-zerp-mfg-jobs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.dgw-zerp-mfg-job { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--dgw-zerp-line); min-width: 0; }
.dgw-zerp-mfg-job.is-done { background: rgba(22,160,106,0.06); border-color: rgba(22,160,106,0.28); }
.dgw-zerp-mfg-job.is-warn { background: rgba(255,122,69,0.06); border-color: rgba(255,122,69,0.32); }
.dgw-zerp-mfg-job-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--dgw-zerp-brand); }
.dgw-zerp-mfg-job.is-done .dgw-zerp-mfg-job-id { color: #0f7a50; } .dgw-zerp-mfg-job.is-warn .dgw-zerp-mfg-job-id { color: #b5541f; }
.dgw-zerp-mfg-job-op { font-size: 11px; font-weight: 600; color: var(--dgw-zerp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-mfg-job-t { font-size: 10px; color: var(--dgw-zerp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-mfg-job-q { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-muted); margin-top: 2px; }
.dgw-zerp-mfg-job-q b { color: var(--dgw-zerp-ink); font-size: 12px; }

/* cost & output */
.dgw-zerp-mfg-costrows { display: grid; gap: 7px; }
.dgw-zerp-mfg-costrow { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: center; font-size: 11px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-costrow i { display: block; height: 7px; border-radius: 100px; background: rgba(27,61,245,0.10); overflow: hidden; }
.dgw-zerp-mfg-costrow i b { display: block; height: 100%; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); transform-origin: left; animation: dgw-zerp-acc-grow 1s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-mfg-costrow em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-mfg-costrow.is-total { padding-top: 6px; border-top: 1px solid var(--dgw-zerp-line); color: var(--dgw-zerp-ink); font-weight: 700; }
.dgw-zerp-mfg-costrow.is-total i, .dgw-zerp-mfg-costrow.is-std i { background: none; }
.dgw-zerp-mfg-costrow.is-total em { font-weight: 700; color: var(--dgw-zerp-accent); }
.dgw-zerp-mfg-costrow.is-std em { color: var(--dgw-zerp-muted-2); }
.dgw-zerp-mfg-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 11px; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-mfg-out li { position: relative; padding-left: 18px; line-height: 1.4; }
.dgw-zerp-mfg-out li::before { content: ""; position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 3px; background: rgba(22,160,106,0.16); }
.dgw-zerp-mfg-out li::after { content: ""; position: absolute; left: 3px; top: 5px; width: 4px; height: 3px; border-left: 1.5px solid var(--dgw-zerp-green); border-bottom: 1.5px solid var(--dgw-zerp-green); transform: rotate(-45deg); }
.dgw-zerp-mfg-out li b { font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink); }
.dgw-zerp-mfg-out li.is-notify { color: var(--dgw-zerp-brand); font-weight: 600; }
.dgw-zerp-mfg-out li.is-notify::before { background: rgba(27,61,245,0.12); } .dgw-zerp-mfg-out li.is-notify::after { border-color: var(--dgw-zerp-brand); }

/* ---- plan-to-produce chain ---- */
.dgw-zerp-mfg-chain { margin-top: 30px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.dgw-zerp-mfg-chain-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-brand); white-space: nowrap; }
.dgw-zerp-mfg-chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dgw-zerp-mfg-chip { font-size: 12px; font-weight: 600; color: var(--dgw-zerp-ink-soft); background: #fff; border: 1px solid var(--dgw-zerp-line); padding: 6px 11px; border-radius: 100px; white-space: nowrap; box-shadow: 0 1px 2px rgba(14,22,51,0.04); }
.dgw-zerp-mfg-chip.is-hot { color: #fff; background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); box-shadow: 0 8px 18px -8px rgba(27,61,245,0.7); }
.dgw-zerp-mfg-chain-row i { width: 6px; height: 6px; border-right: 1.5px solid var(--dgw-zerp-muted-2); border-bottom: 1.5px solid var(--dgw-zerp-muted-2); transform: rotate(-45deg); margin: 0 2px; flex: none; }
.dgw-zerp-mfg .dgw-zerp-deep-config { margin-top: 22px; }

/* responsive */
@media (max-width: 1100px) {
  .dgw-zerp-mfg-body { grid-template-columns: 1fr; }
  .dgw-zerp-mfg-linewrap { order: -1; }
  .dgw-zerp-mfg-bom, .dgw-zerp-mfg-cost { display: block; }
  .dgw-zerp-mfg-body::after { content: none; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .dgw-zerp-mfg-body { grid-template-columns: 1fr 1fr; }
  .dgw-zerp-mfg-linewrap { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .dgw-zerp-mfg-mo-prog { margin-left: 0; min-width: 0; width: 100%; }
}
@media (max-width: 700px) {
  .dgw-zerp-mfg-console { padding: 14px; border-radius: 16px; }
  .dgw-zerp-mfg-line { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dgw-zerp-mfg-stations, .dgw-zerp-mfg-belt { min-width: 620px; }
  .dgw-zerp-mfg-jobs { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-mfg-chain { grid-template-columns: 1fr; gap: 8px; }
  .dgw-zerp-mfg-mo-steps { order: 5; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-mfg-st, .dgw-zerp-mfg-cut-head, .dgw-zerp-mfg-cut-head::after, .dgw-zerp-mfg-weld-torch, .dgw-zerp-mfg-weld-arc, .dgw-zerp-mfg-asm-arm, .dgw-zerp-mfg-asm-fore, .dgw-zerp-mfg-qc-beam, .dgw-zerp-mfg-qc-tick, .dgw-zerp-mfg-pack-lid, .dgw-zerp-mfg-pack-label, .dgw-zerp-mfg-belt-track, .dgw-zerp-mfg-unit, .dgw-zerp-mfg-tree li::after, .dgw-zerp-mfg-live, .dgw-zerp-mfg-st-run, .dgw-zerp-mfg-costrow i b { animation: none !important; }
  .dgw-zerp-mfg-qc-tick, .dgw-zerp-mfg-pack-label { opacity: 1; }
  .dgw-zerp-mfg-unit { left: 50%; }
}


/* =============================================================
   MODULE 04 · PAYROLL & PEOPLE — split: text left · live payslip right
   ============================================================= */
.dgw-zerp-pay { background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%); }
.dgw-zerp-pay-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 50% at 82% 50%, rgba(27,61,245,0.10), transparent 70%), radial-gradient(ellipse 30% 40% at 95% 90%, rgba(255,122,69,0.08), transparent 70%); }
.dgw-zerp-pay > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-pay-split { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; align-items: center; }
.dgw-zerp-pay-text .dgw-zerp-h2 { max-width: 560px; }
.dgw-zerp-pay-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.dgw-zerp-pay-points li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.6; color: var(--dgw-zerp-muted); }
.dgw-zerp-pay-points li b { color: var(--dgw-zerp-ink); font-weight: 700; }
.dgw-zerp-pay-points li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 4px; background: rgba(22,160,106,0.14); }
.dgw-zerp-pay-points li::after { content: ""; position: absolute; left: 4px; top: 9px; width: 5px; height: 3px; border-left: 2px solid var(--dgw-zerp-green); border-bottom: 2px solid var(--dgw-zerp-green); transform: rotate(-45deg); }
.dgw-zerp-pay-config { margin: 24px 0 0; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--dgw-zerp-line); border-left: 3px solid var(--dgw-zerp-accent); box-shadow: var(--dgw-zerp-card-shadow); font-size: 13px; line-height: 1.55; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-pay-config span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-accent); margin-bottom: 4px; }

.dgw-zerp-pay-visual { position: relative; }
.dgw-zerp-pay-console { position: relative; }
.dgw-zerp-pay-slip { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 2px 4px rgba(14,22,51,0.05), 0 40px 80px -30px rgba(27,61,245,0.40), 0 0 0 1px var(--dgw-zerp-line), 0 0 0 8px rgba(255,255,255,0.7); overflow: hidden; transform: rotate(-1.2deg); }
.dgw-zerp-pay-slip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); z-index: 1; }
.dgw-zerp-pay-slip-h { padding: 22px 24px 16px; background: var(--dgw-zerp-ink); color: #fff; display: grid; gap: 3px; }
.dgw-zerp-pay-slip-co { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9db4ff; }
.dgw-zerp-pay-slip-emp { font-size: 12.5px; color: rgba(255,255,255,0.72); }
.dgw-zerp-pay-slip-emp b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -0.01em; margin-right: 2px; }
.dgw-zerp-pay-slip-ids { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: rgba(255,255,255,0.42); letter-spacing: 0.04em; }
.dgw-zerp-pay-slip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 16px 24px 6px; }
.dgw-zerp-pay-slip-k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); padding-bottom: 7px; border-bottom: 1px solid var(--dgw-zerp-line); margin-bottom: 4px; }
.dgw-zerp-pay-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--dgw-zerp-line-soft); font-size: 12.5px; color: var(--dgw-zerp-ink-soft); opacity: 0; transform: translateX(-8px); }
.dgw-zerp-pay-row em { font-style: normal; font-size: 10px; color: var(--dgw-zerp-muted-2); margin-left: 4px; }
.dgw-zerp-pay-row b { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-pay-row.is-sum { border-bottom: 0; border-top: 1px solid var(--dgw-zerp-line); margin-top: 2px; font-weight: 700; color: var(--dgw-zerp-ink); }
.dgw-zerp-pay-console.is-run .dgw-zerp-pay-row { animation: dgw-zerp-pay-in .45s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(0.5s + var(--n) * 0.5s); }
@keyframes dgw-zerp-pay-in { to { opacity: 1; transform: none } }
.dgw-zerp-pay-net { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; margin: 10px 24px 0; padding: 14px 16px; border-radius: 12px; background: linear-gradient(90deg, rgba(27,61,245,0.08), rgba(255,122,69,0.08)); opacity: 0; transform: translateY(6px); }
.dgw-zerp-pay-console.is-run .dgw-zerp-pay-net { animation: dgw-zerp-pay-in .5s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(0.5s + var(--n) * 0.5s); }
.dgw-zerp-pay-net > span { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-brand); }
.dgw-zerp-pay-net > b { grid-row: 1 / span 2; justify-self: end; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.03em; color: var(--dgw-zerp-ink); }
.dgw-zerp-pay-net > em { font-style: normal; font-size: 10.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-pay-stamp { position: absolute; right: 30px; bottom: 62px; padding: 7px 14px; border: 3px double #16a06a; border-radius: 8px; color: #16a06a; text-align: center; transform: rotate(-12deg) scale(0); opacity: 0; line-height: 1; z-index: 2; }
.dgw-zerp-pay-stamp span { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 0.16em; text-transform: uppercase; }
.dgw-zerp-pay-stamp small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.08em; margin-top: 2px; }
.dgw-zerp-pay-console.is-run .dgw-zerp-pay-stamp { animation: dgw-zerp-pay-stamp .55s cubic-bezier(.2,1.5,.4,1) 8.6s forwards; }
@keyframes dgw-zerp-pay-stamp { from { transform: rotate(-12deg) scale(1.8); opacity: 0 } to { transform: rotate(-12deg) scale(1); opacity: .9 } }
.dgw-zerp-pay-slip-f { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 10px 24px 16px; border-top: 1px solid var(--dgw-zerp-line-soft); font-size: 10.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-pay-console.is-fade .dgw-zerp-pay-row, .dgw-zerp-pay-console.is-fade .dgw-zerp-pay-net, .dgw-zerp-pay-console.is-fade .dgw-zerp-pay-stamp { transition: opacity .45s ease; opacity: 0 !important; }

.dgw-zerp-pay-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 26px; }
.dgw-zerp-pay-caption span { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--dgw-zerp-muted); background: #fff; border: 1px solid var(--dgw-zerp-line); padding: 5px 9px; border-radius: 100px; white-space: nowrap; }
.dgw-zerp-pay-caption span.is-hot { color: #fff; background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); }
.dgw-zerp-pay-caption i { width: 5px; height: 5px; border-right: 1.5px solid var(--dgw-zerp-muted-2); border-bottom: 1.5px solid var(--dgw-zerp-muted-2); transform: rotate(-45deg); }

@media (max-width: 1100px) { .dgw-zerp-pay-split { grid-template-columns: minmax(0,1fr) 440px; gap: 40px; } }
@media (max-width: 880px) { .dgw-zerp-pay-split { grid-template-columns: 1fr; gap: 40px; } .dgw-zerp-pay-visual { max-width: 520px; } }
@media (max-width: 700px) {
  .dgw-zerp-pay-slip { transform: none; }
  .dgw-zerp-pay-slip-cols { grid-template-columns: 1fr; padding: 12px 16px 4px; }
  .dgw-zerp-pay-slip-h { padding: 18px 16px 14px; }
  .dgw-zerp-pay-net { margin: 8px 16px 0; }
  .dgw-zerp-pay-slip-f { padding: 10px 16px 14px; }
  .dgw-zerp-pay-stamp { right: 16px; bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-pay-row, .dgw-zerp-pay-net { opacity: 1 !important; transform: none !important; animation: none !important; }
  .dgw-zerp-pay-stamp { opacity: .9; transform: rotate(-12deg) scale(1); animation: none !important; }
}


/* =============================================================
   MODULE 05 · MRP, PLANNING & PROCUREMENT — the MRP run
   ============================================================= */
/* dark electric-blue band — deliberately different from the navy used elsewhere */
.dgw-zerp-mrp { background: radial-gradient(120% 80% at 0% 0%, #1a3fd1 0%, #0f2694 38%, #0a1a66 70%, #071347 100%); color: #fff; }
.dgw-zerp-mrp-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1.5px), radial-gradient(ellipse 40% 50% at 85% 15%, rgba(120,200,255,0.22), transparent 70%), radial-gradient(ellipse 35% 45% at 10% 95%, rgba(255,122,69,0.22), transparent 70%);
  background-size: 22px 22px, 100% 100%, 100% 100%; }
.dgw-zerp-mrp > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-mrp .dgw-zerp-eyebrow { color: #cfe0ff; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.10); }
.dgw-zerp-mrp .dgw-zerp-h2 { color: #fff; }
.dgw-zerp-mrp .dgw-zerp-h2-grad { background: linear-gradient(120deg, #8fd3ff 0%, #ffb08a 120%); -webkit-background-clip: text; background-clip: text; }
.dgw-zerp-mrp .dgw-zerp-section-sub { color: rgba(255,255,255,0.72); }
.dgw-zerp-mrp .dgw-zerp-deep-index-num { background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.05) 100%); -webkit-background-clip: text; background-clip: text; }
.dgw-zerp-mrp .dgw-zerp-deep-index-lbl { color: #fff; }
.dgw-zerp-mrp-console { border-color: rgba(255,255,255,0.35); box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 50px 100px -40px rgba(0,0,0,0.6), 0 0 0 6px rgba(255,255,255,0.10); }
.dgw-zerp-mrp .dgw-zerp-mrp-chain-lbl { color: #fff; opacity: .9; }
.dgw-zerp-mrp .dgw-zerp-mrp-chip { color: var(--dgw-zerp-ink); background: #fff; border-color: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,0.45); }
.dgw-zerp-mrp .dgw-zerp-mrp-chip.is-hot { color: #fff; background: var(--dgw-zerp-accent); border-color: var(--dgw-zerp-accent); box-shadow: 0 10px 24px -10px rgba(255,122,69,0.9); }
.dgw-zerp-mrp .dgw-zerp-mrp-chain-row i { border-color: rgba(255,255,255,0.7); }

.dgw-zerp-mrp-console { background: #fff; border: 1px solid rgba(27,61,245,0.14); border-radius: 22px; padding: 16px 20px 18px;
  box-shadow: 0 2px 4px rgba(14,22,51,0.04), 0 40px 90px -36px rgba(27,61,245,0.38), 0 0 0 6px rgba(255,255,255,0.6); }

/* run bar */
.dgw-zerp-mrp-bar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-mrp-title { display: inline-flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--dgw-zerp-ink); letter-spacing: -0.01em; }
.dgw-zerp-mrp-live { width: 7px; height: 7px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 3px rgba(45,212,143,0.22); animation: dgw-zerp-pulse 2s ease-in-out infinite; }
.dgw-zerp-mrp-field { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-mrp-field em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-mrp-field b { font-size: 12.5px; font-weight: 600; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-mrp-run { position: relative; margin-left: auto; display: grid; place-items: center; min-width: 170px; height: 38px; border-radius: 10px; background: var(--dgw-zerp-brand); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13px; overflow: hidden; box-shadow: 0 10px 22px -10px rgba(27,61,245,0.8); }
.dgw-zerp-mrp-run-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,0.22); }
.dgw-zerp-mrp-run-txt, .dgw-zerp-mrp-run-done { grid-area: 1 / 1; position: relative; white-space: nowrap; padding: 0 16px; }
.dgw-zerp-mrp-run-done { opacity: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-run-fill { animation: dgw-zerp-mrp-fill 2.4s linear forwards; }
@keyframes dgw-zerp-mrp-fill { to { width: 100% } }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-run-txt { animation: dgw-zerp-mrp-hide .3s ease 2.4s forwards; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-run-done { animation: dgw-zerp-mrp-show .3s ease 2.5s forwards; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-run { animation: dgw-zerp-mrp-runok .4s ease 2.5s forwards; }
@keyframes dgw-zerp-mrp-hide { to { opacity: 0 } }
@keyframes dgw-zerp-mrp-show { to { opacity: 1 } }
@keyframes dgw-zerp-mrp-runok { to { background: #16a06a; box-shadow: 0 10px 22px -10px rgba(22,160,106,0.8) } }

/* pipeline */
.dgw-zerp-mrp-pipe { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: center; gap: 0; padding: 16px 0 14px; }
.dgw-zerp-mrp-step { position: relative; display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); min-width: 0; opacity: .55; transform: translateY(4px); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-step { animation: dgw-zerp-mrp-lit .5s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(0.3s + var(--i) * 0.6s); }
@keyframes dgw-zerp-mrp-lit { to { opacity: 1; transform: none; background: #fff; border-color: rgba(27,61,245,0.28); box-shadow: 0 14px 30px -16px rgba(27,61,245,0.45) } }
.dgw-zerp-mrp-step.is-out { background: rgba(255,122,69,0.06); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-step.is-out { animation-name: dgw-zerp-mrp-lit-out; }
@keyframes dgw-zerp-mrp-lit-out { to { opacity: 1; transform: none; background: #fff; border-color: rgba(255,122,69,0.5); box-shadow: 0 14px 30px -16px rgba(255,122,69,0.5) } }
.dgw-zerp-mrp-step-n { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; color: var(--dgw-zerp-accent); }
.dgw-zerp-mrp-step-k { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13px; color: var(--dgw-zerp-ink); }
.dgw-zerp-mrp-step-v { font-size: 12px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mrp-step-v b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--dgw-zerp-ink); margin-right: 2px; }
.dgw-zerp-mrp-step.is-out .dgw-zerp-mrp-step-v b { color: var(--dgw-zerp-accent); }
.dgw-zerp-mrp-step-s { font-size: 10.5px; color: var(--dgw-zerp-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-mrp-step-s b { font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-mrp-link { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgba(27,61,245,0.55) 0 5px, transparent 5px 10px); animation: dgw-zerp-inv-dash 1s linear infinite; }
.dgw-zerp-mrp-link::after { content: ""; position: absolute; right: -1px; top: 50%; width: 0; height: 0; border-left: 6px solid rgba(27,61,245,0.7); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: translateY(-50%); }

/* table */
.dgw-zerp-mrp-tblwrap { border: 1px solid var(--dgw-zerp-line); border-radius: 14px; overflow: hidden; }
.dgw-zerp-mrp-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.dgw-zerp-mrp-tbl th { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); padding: 10px 12px; background: var(--dgw-zerp-bg-tint); border-bottom: 1px solid var(--dgw-zerp-line); white-space: nowrap; }
.dgw-zerp-mrp-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--dgw-zerp-line-soft); color: var(--dgw-zerp-ink-soft); vertical-align: middle; }
.dgw-zerp-mrp-tbl tbody tr:last-child td { border-bottom: 0; }
.dgw-zerp-mrp-tbl tbody tr { opacity: 0; transform: translateX(-8px); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-tbl tbody tr { animation: dgw-zerp-pay-in .4s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(2.5s + var(--r) * 0.13s); }
.dgw-zerp-mrp-tbl td:nth-child(n+2):nth-child(-n+5), .dgw-zerp-mrp-tbl th:nth-child(n+2):nth-child(-n+5) { text-align: right; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.dgw-zerp-mrp-tbl td:first-child b { display: block; font-weight: 600; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-mrp-tbl td:first-child span { display: block; font-size: 10.5px; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-mrp-tbl td.is-short { color: var(--dgw-zerp-accent); font-weight: 700; }
.dgw-zerp-mrp-tbl td.is-ok { color: var(--dgw-zerp-green); font-weight: 700; font-family: 'Inter', sans-serif; font-size: 11px; }
.dgw-zerp-mrp-tbl td:nth-child(6) { white-space: nowrap; color: var(--dgw-zerp-ink); font-weight: 500; }
.dgw-zerp-mrp-tbl td:nth-child(6) em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); margin-left: 4px; }
.dgw-zerp-mrp-tbl td:nth-child(7) { font-family: 'JetBrains Mono', monospace; white-space: nowrap; color: var(--dgw-zerp-muted); }
.dgw-zerp-mrp-act { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; margin-right: 8px; border-radius: 5px; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: var(--dgw-zerp-brand); vertical-align: middle; }
.dgw-zerp-mrp-act.is-mo { background: var(--dgw-zerp-accent); } .dgw-zerp-mrp-act.is-tr { background: #16a06a; } .dgw-zerp-mrp-act.is-ok { background: #cfd6e6; color: var(--dgw-zerp-ink); }
.dgw-zerp-mrp-more { display: flex; gap: 22px; flex-wrap: wrap; padding: 9px 12px; background: var(--dgw-zerp-bg-tint); border-top: 1px solid var(--dgw-zerp-line); font-size: 11.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mrp-more b { font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink); }
.dgw-zerp-mrp-more b.is-warn { color: var(--dgw-zerp-accent); }

/* rules + actions */
.dgw-zerp-mrp-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 14px; }
.dgw-zerp-mrp-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dgw-zerp-mrp-rules-k { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); margin-bottom: 2px; }
.dgw-zerp-mrp-rule { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--dgw-zerp-muted); background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); padding: 5px 10px 5px 7px; border-radius: 100px; white-space: nowrap; }
.dgw-zerp-mrp-rule i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--dgw-zerp-line); position: relative; background: #fff; }
.dgw-zerp-mrp-rule i::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 6px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); opacity: 0; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule { animation: dgw-zerp-mrp-rule .35s ease forwards; animation-delay: calc(3.5s + var(--i) * 0.1s); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule i { animation: dgw-zerp-mrp-rulei .35s ease forwards; animation-delay: calc(3.5s + var(--i) * 0.1s); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule i::after { animation: dgw-zerp-mrp-show .2s ease forwards; animation-delay: calc(3.65s + var(--i) * 0.1s); }
@keyframes dgw-zerp-mrp-rule { to { color: var(--dgw-zerp-ink); background: #fff; border-color: rgba(22,160,106,0.35) } }
@keyframes dgw-zerp-mrp-rulei { to { border-color: #16a06a; background: #16a06a } }
.dgw-zerp-mrp-rule.is-custom { border-style: dashed; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule.is-custom { animation-name: dgw-zerp-mrp-rule-c; }
@keyframes dgw-zerp-mrp-rule-c { to { color: #fff; background: var(--dgw-zerp-accent); border-color: var(--dgw-zerp-accent); border-style: solid } }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule.is-custom i { animation-name: dgw-zerp-mrp-rulei-c; }
@keyframes dgw-zerp-mrp-rulei-c { to { border-color: #fff; background: #fff } }
.dgw-zerp-mrp-rule.is-custom i::after { border-color: var(--dgw-zerp-accent); }
.dgw-zerp-mrp-actions { display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(6px); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-actions { animation: dgw-zerp-pay-in .5s cubic-bezier(.2,.7,.2,1) 4.3s forwards; }
.dgw-zerp-mrp-btn { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 9px; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.07); border: 1px solid rgba(27,61,245,0.18); white-space: nowrap; text-align: center; }
.dgw-zerp-mrp-btn.is-primary { color: #fff; background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); box-shadow: 0 10px 22px -10px rgba(27,61,245,0.8); }

/* chain */
.dgw-zerp-mrp-chain { margin-top: 30px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.dgw-zerp-mrp-chain-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-brand); white-space: nowrap; }
.dgw-zerp-mrp-chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dgw-zerp-mrp-chip { font-size: 12px; font-weight: 600; color: var(--dgw-zerp-ink-soft); background: #fff; border: 1px solid var(--dgw-zerp-line); padding: 6px 11px; border-radius: 100px; white-space: nowrap; box-shadow: 0 1px 2px rgba(14,22,51,0.04); }
.dgw-zerp-mrp-chip.is-hot { color: #fff; background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); box-shadow: 0 8px 18px -8px rgba(27,61,245,0.7); }
.dgw-zerp-mrp-chain-row i { width: 6px; height: 6px; border-right: 1.5px solid var(--dgw-zerp-muted-2); border-bottom: 1.5px solid var(--dgw-zerp-muted-2); transform: rotate(-45deg); margin: 0 2px; flex: none; }
.dgw-zerp-mrp .dgw-zerp-deep-config { margin-top: 22px; }

/* responsive */
@media (max-width: 1024px) {
  .dgw-zerp-mrp-pipe { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dgw-zerp-mrp-link { display: none; }
  .dgw-zerp-mrp-foot { grid-template-columns: 1fr; }
  .dgw-zerp-mrp-actions { flex-direction: row; flex-wrap: wrap; }
  .dgw-zerp-mrp-tblwrap { overflow-x: auto; }
  .dgw-zerp-mrp-tbl { min-width: 760px; }
  .dgw-zerp-mrp-run { margin-left: 0; }
}
@media (max-width: 700px) {
  .dgw-zerp-mrp-console { padding: 14px; border-radius: 16px; }
  .dgw-zerp-mrp-field { border-left: 0; padding-left: 0; }
  .dgw-zerp-mrp-pipe { grid-template-columns: 1fr; }
  .dgw-zerp-mrp-chain { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-mrp-step, .dgw-zerp-mrp-tbl tbody tr, .dgw-zerp-mrp-actions { opacity: 1 !important; transform: none !important; animation: none !important; }
  .dgw-zerp-mrp-run-fill, .dgw-zerp-mrp-run-txt, .dgw-zerp-mrp-run-done, .dgw-zerp-mrp-run, .dgw-zerp-mrp-rule, .dgw-zerp-mrp-rule i, .dgw-zerp-mrp-rule i::after, .dgw-zerp-mrp-link, .dgw-zerp-mrp-live { animation: none !important; }
  .dgw-zerp-mrp-run-done { opacity: 1 } .dgw-zerp-mrp-run-txt { opacity: 0 }
  .dgw-zerp-mrp-rule i { border-color: #16a06a; background: #16a06a } .dgw-zerp-mrp-rule i::after { opacity: 1 }
}



/* =============================================================
   MODULE 06 · CUSTOMISATION — informational grid
   ============================================================= */
.dgw-zerp-cus { background: linear-gradient(180deg, #fff 0%, #f3f6ff 100%); }
.dgw-zerp-cus-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 40% at 15% 20%, rgba(27,61,245,0.08), transparent 70%), radial-gradient(ellipse 35% 40% at 90% 80%, rgba(255,122,69,0.07), transparent 70%); }
.dgw-zerp-cus > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-cus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dgw-zerp-cus-card { position: relative; background: #fff; border: 1px solid var(--dgw-zerp-line); border-radius: 18px; padding: 22px 22px 20px; box-shadow: var(--dgw-zerp-card-shadow); transition: transform .3s, box-shadow .3s, border-color .3s; overflow: hidden; }
.dgw-zerp-cus-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); opacity: 0; transition: opacity .3s; }
.dgw-zerp-cus-card:hover { transform: translateY(-4px); box-shadow: var(--dgw-zerp-card-shadow-h); border-color: rgba(27,61,245,0.2); }
.dgw-zerp-cus-card:hover::before { opacity: 1; }
.dgw-zerp-cus-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); margin-bottom: 14px; transition: background .3s, color .3s; }
.dgw-zerp-cus-card:hover .dgw-zerp-cus-ico { color: #fff; background: linear-gradient(135deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); }
.dgw-zerp-cus-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--dgw-zerp-ink); margin: 0 0 8px; }
.dgw-zerp-cus-card p { font-size: 13.5px; line-height: 1.6; color: var(--dgw-zerp-muted); margin: 0 0 14px; }
.dgw-zerp-cus-eg { display: block; padding-top: 12px; border-top: 1px solid var(--dgw-zerp-line-soft); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 1.5; color: var(--dgw-zerp-accent); }
.dgw-zerp-cus-note { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); }
.dgw-zerp-cus-note-k { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-brand); white-space: nowrap; }
.dgw-zerp-cus-note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dgw-zerp-ink-soft); }
@media (max-width: 1024px) { .dgw-zerp-cus-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .dgw-zerp-cus-grid { grid-template-columns: 1fr; } .dgw-zerp-cus-note { grid-template-columns: 1fr; gap: 8px; } }




















/* -------------------------------------------------------------
   3. THE PAIN — dark "chaos wall": pains rendered as the real
   artifacts they live in (Excel, WhatsApp, sticky note, memo).
   ------------------------------------------------------------- */
.dgw-zerp-pain {
  position: relative; padding: 110px 0; scroll-margin-top: 76px; overflow: hidden;
  background:
    radial-gradient(900px 380px at 14% -12%, rgba(27,61,245,0.18) 0%, transparent 60%),
    radial-gradient(760px 440px at 92% 116%, rgba(255,86,61,0.16) 0%, transparent 55%),
    linear-gradient(165deg, #0a0f22 0%, #0e1633 55%, #121a3c 100%);
}
.dgw-zerp-pain::before { /* faint dotted texture = background clutter */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.dgw-zerp-pain > .dgw-zerp-container { position: relative; z-index: 1; }

/* section head recoloured for the dark band */
.dgw-zerp-pain .dgw-zerp-eyebrow { color: #ffd7c4; border-color: rgba(255,122,69,0.30); background: rgba(255,122,69,0.10); }
.dgw-zerp-pain .dgw-zerp-h2 { color: #fff; }
.dgw-zerp-pain .dgw-zerp-section-sub { color: rgba(255,255,255,0.62); }

/* the scattered wall */
.dgw-zerp-chaos-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; margin-top: 46px; }
.dgw-zerp-chaos {
  position: relative; padding: 15px 17px 20px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 44px -18px rgba(0,0,0,0.6);
  transform: rotate(var(--rot)) translateY(var(--dy));
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.dgw-zerp-chaos::after { /* red 'problem' tab at the top */
  content: ''; position: absolute; top: 0; left: 17px; right: 17px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--dgw-zerp-red), #ff8a5c);
}
.dgw-zerp-chaos:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 32px 64px -20px rgba(0,0,0,0.65); z-index: 5; }
.dgw-zerp-chaos-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--dgw-zerp-ink); margin: 15px 0 7px; }
.dgw-zerp-chaos-body { font-size: 13.5px; line-height: 1.55; color: var(--dgw-zerp-muted); margin: 0; }

/* shared art shell */
.dgw-zerp-chaos-art {
  border-radius: 10px; min-height: 108px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  border: 1px solid var(--dgw-zerp-line-soft);
}

/* Excel artifact */
.dgw-zerp-art-excel { background: #f4f8f4; }
.dgw-zerp-xl-bar { display: flex; align-items: center; gap: 7px; background: #107C41; color: #fff; font-size: 10.5px; font-weight: 600; padding: 7px 10px; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.dgw-zerp-xl-dot { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,0.75); flex-shrink: 0; }
.dgw-zerp-xl-grid { display: grid; grid-template-columns: repeat(3, 1fr); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.dgw-zerp-xl-grid > span { padding: 6px 9px; border-right: 1px solid #dde7dd; border-bottom: 1px solid #dde7dd; color: var(--dgw-zerp-ink-soft); background: #fff; }
.dgw-zerp-xl-grid > span:nth-child(-n+3) { background: #e7f0e7; font-weight: 700; color: #2c6b43; }
.dgw-zerp-xl-warn { color: var(--dgw-zerp-red) !important; background: rgba(224,83,61,0.08) !important; font-weight: 700; }

/* Browser-tabs artifact (GST) */
.dgw-zerp-art-tabs { background: #eef1f8; padding: 12px 12px 14px; justify-content: center; gap: 0; }
.dgw-zerp-tabs-row { display: flex; gap: 5px; }
.dgw-zerp-tab { font-size: 10px; font-weight: 600; padding: 6px 9px; border-radius: 7px 7px 0 0; background: #d8ddec; color: var(--dgw-zerp-muted); white-space: nowrap; }
.dgw-zerp-tab.is-on { background: #fff; color: var(--dgw-zerp-brand); box-shadow: inset 0 -2px 0 var(--dgw-zerp-brand); }
.dgw-zerp-tabs-alert { margin-top: 9px; font-size: 11px; font-weight: 600; color: var(--dgw-zerp-red); background: rgba(224,83,61,0.10); border: 1px solid rgba(224,83,61,0.22); border-radius: 8px; padding: 8px 10px; }

/* Sticky-note artifact (stock) */
.dgw-zerp-art-note { background: linear-gradient(180deg, #fff6b8, #ffec84); border-color: rgba(0,0,0,0.06); justify-content: center; padding: 18px 14px 14px; position: relative; }
.dgw-zerp-note-pin { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--dgw-zerp-red); box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.dgw-zerp-note-line { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: #5b4a00; padding: 3px 0; }
.dgw-zerp-note-q { color: #b23a14; font-weight: 700; }

/* WhatsApp artifact (shop floor) */
.dgw-zerp-art-wa { background: #e7ded5; }
.dgw-zerp-wa-head { display: flex; align-items: center; gap: 7px; background: #075E54; color: #fff; font-size: 11px; font-weight: 600; padding: 8px 10px; }
.dgw-zerp-wa-ava { width: 16px; height: 16px; border-radius: 50%; background: #25D366; flex-shrink: 0; }
.dgw-zerp-wa-bub { align-self: flex-start; max-width: 84%; background: #fff; font-size: 11.5px; color: var(--dgw-zerp-ink-soft); padding: 7px 10px; border-radius: 3px 10px 10px 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.12); margin: 8px 0 0 10px; }
.dgw-zerp-wa-me { align-self: flex-end; background: #dcf8c6; border-radius: 10px 3px 10px 10px; margin: 7px 10px 11px 0; }

/* Memo artifact (cash position) */
.dgw-zerp-art-memo { background: #fbfaf6; justify-content: center; gap: 8px; padding: 16px 15px; }
.dgw-zerp-memo-q { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--dgw-zerp-ink); }
.dgw-zerp-memo-a { font-size: 11.5px; color: var(--dgw-zerp-muted-2); border-bottom: 1px dashed var(--dgw-zerp-line); padding-bottom: 9px; }
.dgw-zerp-memo-clock { align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--dgw-zerp-red); background: rgba(224,83,61,0.10); border: 1px solid rgba(224,83,61,0.22); border-radius: 8px; padding: 5px 9px; }

/* -------------------------------------------------------------
   3. MODULES (light tint · what we implement)
   ------------------------------------------------------------- */
.dgw-zerp-modules { padding: 110px 0; background: #fff; scroll-margin-top: 76px; }
.dgw-zerp-modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dgw-zerp-module {
  position: relative; padding: 30px 28px;
  background: #fff; border: 1px solid var(--dgw-zerp-line);
  border-radius: 18px; box-shadow: var(--dgw-zerp-card-shadow);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.dgw-zerp-module::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-accent) 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.dgw-zerp-module:hover { transform: translateY(-4px); box-shadow: var(--dgw-zerp-card-shadow-h); border-color: rgba(27,61,245,0.2); }
.dgw-zerp-module:hover::before { opacity: 1; }
.dgw-zerp-module-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12.5px; color: var(--dgw-zerp-accent); }
.dgw-zerp-module-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; margin: 12px 0 16px;
  background: linear-gradient(135deg, rgba(27,61,245,0.10) 0%, rgba(27,61,245,0.04) 100%);
  border: 1px solid rgba(27,61,245,0.18); color: var(--dgw-zerp-brand);
}
.dgw-zerp-module-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.018em; color: var(--dgw-zerp-ink); margin: 0 0 10px; }
.dgw-zerp-module-body { font-size: 14px; line-height: 1.6; color: var(--dgw-zerp-muted); margin: 0 0 16px; }
.dgw-zerp-module-extend { font-size: 13px; line-height: 1.55; color: var(--dgw-zerp-ink-soft); margin: 0; padding-top: 14px; border-top: 1px solid var(--dgw-zerp-line-soft); }
.dgw-zerp-module-extend-tag { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-accent); margin-bottom: 5px; }

/* -------------------------------------------------------------
   4. ROLLOUT (light · 8-stage flow)
   ------------------------------------------------------------- */
.dgw-zerp-rollout { padding: 110px 0; background: #fff; scroll-margin-top: 76px; }
.dgw-zerp-rollout .dgw-zerp-section-head { margin-bottom: 0; }

/* Live head — green badge + lead */
.dgw-zerp-flow-livehead { text-align: center; max-width: 760px; margin: 28px auto 0; }
.dgw-zerp-flow-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px;
  background: rgba(22,160,106,0.10); color: #0f7a4f;
  border: 1px solid rgba(22,160,106,0.26);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
}
.dgw-zerp-flow-badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dgw-zerp-green); box-shadow: 0 0 0 4px rgba(22,160,106,0.18);
  animation: dgw-zerp-flowpulse 2s ease infinite;
}
@keyframes dgw-zerp-flowpulse { 0%,100% { box-shadow: 0 0 0 4px rgba(22,160,106,0.18); } 50% { box-shadow: 0 0 0 7px rgba(22,160,106,0.04); } }
.dgw-zerp-flow-lead { margin: 16px auto 0; font-size: 14.5px; line-height: 1.62; color: var(--dgw-zerp-muted); }

/* 8-step horizontal flow */
.dgw-zerp-flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 48px; position: relative; }
.dgw-zerp-flow-step {
  position: relative; padding: 20px 12px 16px;
  border: 1.5px solid var(--dgw-zerp-line); border-radius: 14px; background: #fff; text-align: center;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.dgw-zerp-flow-step:hover { transform: translateY(-4px); border-color: rgba(27,61,245,0.28); box-shadow: var(--dgw-zerp-card-shadow-h); }
.dgw-zerp-flow-step:not(:last-child)::after {
  content: '\2192'; position: absolute; top: 38px; right: -9px; transform: translateY(-50%);
  color: var(--dgw-zerp-brand); font-size: 16px; font-weight: 700; z-index: 1;
}
.dgw-zerp-flow-icon {
  width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: linear-gradient(135deg, var(--dgw-zerp-bg-blue), #fff); border: 1px solid var(--dgw-zerp-line);
}
.dgw-zerp-flow-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); margin: 0 0 4px; }
.dgw-zerp-flow-body { font-size: 11.5px; line-height: 1.45; color: var(--dgw-zerp-muted); margin: 0 0 10px; }
.dgw-zerp-flow-mod {
  display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(27,61,245,0.08); color: var(--dgw-zerp-brand); border: 1px solid rgba(27,61,245,0.18);
}
.dgw-zerp-flow-mod-creator { background: rgba(255,122,69,0.10); color: #d9551f; border-color: rgba(255,122,69,0.24); }

/* Legend */
.dgw-zerp-flow-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 30px; font-size: 13px; color: var(--dgw-zerp-muted); }
.dgw-zerp-flow-legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 7px; }
.dgw-zerp-flow-sw-zoho { background: rgba(27,61,245,0.16); border: 1px solid rgba(27,61,245,0.3); }
.dgw-zerp-flow-sw-creator { background: rgba(255,122,69,0.18); border: 1px solid rgba(255,122,69,0.34); }

/* Result box */
.dgw-zerp-flow-result {
  margin-top: 48px; padding: 28px 32px;
  background: var(--dgw-zerp-bg-blue); border-radius: 18px; border-left: 4px solid var(--dgw-zerp-accent);
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
}
.dgw-zerp-flow-result-icon { font-size: 34px; line-height: 1; }
.dgw-zerp-flow-result-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--dgw-zerp-ink); margin: 0 0 5px; }
.dgw-zerp-flow-result-body { font-size: 14px; line-height: 1.58; color: var(--dgw-zerp-ink-soft); margin: 0; }
.dgw-zerp-flow-result-body strong { color: var(--dgw-zerp-ink); font-weight: 700; }
.dgw-zerp-flow-result-cta { white-space: nowrap; }

/* -------------------------------------------------------------
   5. WHY DIGIWAH — split layout: sticky intro + differentiator list
   ------------------------------------------------------------- */
.dgw-zerp-why { position: relative; padding: 110px 0; background: linear-gradient(180deg, #fff 0%, var(--dgw-zerp-bg-blue) 100%); overflow: hidden; }
.dgw-zerp-why-glow {
  position: absolute; top: 12%; left: -8%; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,61,245,0.10) 0%, transparent 65%); filter: blur(40px); pointer-events: none;
}
.dgw-zerp-why-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; }

/* left intro (sticky on desktop) */
.dgw-zerp-why-intro { position: sticky; top: 96px; }
.dgw-zerp-why-intro .dgw-zerp-h2 { margin-top: 6px; }
.dgw-zerp-why-sub { font-size: 15px; line-height: 1.68; color: var(--dgw-zerp-muted); margin: 18px 0 0; max-width: 42ch; }
.dgw-zerp-why-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--dgw-zerp-brand);
  padding: 8px 14px; border-radius: 100px;
  background: rgba(27,61,245,0.06); border: 1px solid rgba(27,61,245,0.16);
}

/* right differentiator list */
.dgw-zerp-why-list { display: flex; flex-direction: column; gap: 14px; }
.dgw-zerp-why-item {
  position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 18px;
  padding: 24px 26px; background: rgba(255,255,255,0.7); backdrop-filter: blur(6px);
  border: 1px solid var(--dgw-zerp-line); border-radius: 16px;
  box-shadow: var(--dgw-zerp-card-shadow);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  overflow: hidden;
}
.dgw-zerp-why-item::before { /* accent edge that grows on hover */
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent));
  transform: scaleY(0); transform-origin: top; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.dgw-zerp-why-item:hover { transform: translateX(4px); background: #fff; border-color: rgba(27,61,245,0.22); box-shadow: var(--dgw-zerp-card-shadow-h); }
.dgw-zerp-why-item:hover::before { transform: scaleY(1); }
.dgw-zerp-why-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px;
  color: var(--dgw-zerp-accent); padding-top: 13px; min-width: 22px;
}
.dgw-zerp-why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(27,61,245,0.10) 0%, rgba(27,61,245,0.04) 100%);
  border: 1px solid rgba(27,61,245,0.18); color: var(--dgw-zerp-brand);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.dgw-zerp-why-item:hover .dgw-zerp-why-icon {
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, #3b56ff 100%);
  color: #fff; border-color: transparent;
}
.dgw-zerp-why-item-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.018em; color: var(--dgw-zerp-ink); margin: 2px 0 7px; }
.dgw-zerp-why-item-body { font-size: 14px; line-height: 1.62; color: var(--dgw-zerp-muted); margin: 0; }

/* -------------------------------------------------------------
   6. INDUSTRIES (light)
   ------------------------------------------------------------- */
.dgw-zerp-industries { padding: 110px 0; background: #fff; }
.dgw-zerp-ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.dgw-zerp-ind-card {
  background: #fff; border: 1px solid var(--dgw-zerp-line);
  border-radius: 20px; overflow: hidden; box-shadow: var(--dgw-zerp-card-shadow);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.dgw-zerp-ind-card:hover { transform: translateY(-5px); box-shadow: var(--dgw-zerp-card-shadow-h); }

/* --- canvas: gridded backdrop with floating photo + mono chips --- */
.dgw-zerp-ind-canvas {
  position: relative; height: 300px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--dgw-zerp-bg-tint);
  background-image:
    linear-gradient(rgba(14,22,51,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,22,51,0.055) 1px, transparent 1px);
  background-size: 40px 40px;
  border-bottom: 1px solid var(--dgw-zerp-line-soft);
  overflow: hidden;
}
.dgw-zerp-ind-canvas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(243,246,255,0.85) 100%);
}
.dgw-zerp-ind-photo {
  position: relative; z-index: 2;
  width: 44%; max-width: 240px; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 10px; box-shadow: 0 22px 48px -18px rgba(14,22,51,0.42);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.dgw-zerp-ind-card:hover .dgw-zerp-ind-photo { transform: scale(1.035); }

.dgw-zerp-ind-chip {
  position: absolute; z-index: 3; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--dgw-zerp-muted);
  background: rgba(255,255,255,0.94); border: 1px solid var(--dgw-zerp-line);
  border-radius: 7px; padding: 6px 11px;
  box-shadow: 0 6px 18px -8px rgba(14,22,51,0.22);
  backdrop-filter: blur(4px);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.dgw-zerp-ind-chip-a { top: 20%; left: 7%; }
.dgw-zerp-ind-chip-b { bottom: 17%; left: 4%; }
.dgw-zerp-ind-chip-c { top: 45%; right: 6%; }
.dgw-zerp-ind-card:hover .dgw-zerp-ind-chip-a { transform: translate(-3px,-3px); }
.dgw-zerp-ind-card:hover .dgw-zerp-ind-chip-b { transform: translate(-3px,3px); }
.dgw-zerp-ind-card:hover .dgw-zerp-ind-chip-c { transform: translate(3px,0); }

.dgw-zerp-ind-text { padding: 26px 30px 32px; }
.dgw-zerp-ind-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--dgw-zerp-ink); margin: 0 0 10px; }
.dgw-zerp-ind-body { font-size: 14.5px; line-height: 1.62; color: var(--dgw-zerp-muted); margin: 0; }

/* === 6B. HOW WE WORK (light · vertical timeline) === */
.dgw-zerp-how { padding: 110px 0; background: linear-gradient(180deg, #fff 0%, var(--dgw-zerp-bg-tint) 100%); }
.dgw-zerp-how-timeline { max-width: 720px; margin: 0 auto; }
.dgw-zerp-how-step { display: grid; grid-template-columns: 56px 1fr; gap: 26px; padding-bottom: 34px; }
.dgw-zerp-how-step:last-child { padding-bottom: 0; }
.dgw-zerp-how-node { position: relative; display: flex; justify-content: center; }
/* connecting gradient line between nodes */
.dgw-zerp-how-step:not(:last-child) .dgw-zerp-how-node::after {
  content: ''; position: absolute; top: 60px; bottom: -22px; left: 50%; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(27,61,245,0.45) 0%, rgba(27,61,245,0.08) 100%);
}
.dgw-zerp-how-num {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-brand-deep) 100%);
  box-shadow: 0 14px 30px -12px rgba(27,61,245,0.55);
}
.dgw-zerp-how-body { padding-top: 2px; }
.dgw-zerp-how-phase {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dgw-zerp-brand);
}
.dgw-zerp-how-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--dgw-zerp-ink); margin: 9px 0 9px; }
.dgw-zerp-how-text { font-size: 14.5px; line-height: 1.65; color: var(--dgw-zerp-muted); margin: 0 0 14px; }
.dgw-zerp-how-deliver {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 500; color: var(--dgw-zerp-ink-soft);
  background: var(--dgw-zerp-bg-blue); border: 1px solid rgba(27,61,245,0.14);
  border-radius: 100px; padding: 7px 16px 7px 13px;
}
.dgw-zerp-how-deliver svg { color: var(--dgw-zerp-brand); flex-shrink: 0; }

/* === 7. INFRASTRUCTURE / GLOBAL SCALE (dark band + rotating wireframe globe) === */
.dgw-zerp-infra {
  position: relative; overflow: hidden; padding: 130px 0 120px; min-height: 780px;
  background:
    radial-gradient(900px 520px at 88% 38%, rgba(27,61,245,0.28) 0%, transparent 60%),
    linear-gradient(160deg, #070b1c 0%, #0c1430 52%, #0a1130 100%);
  background-color: #0a0f24;
}
/* angled lighter wedge — adds the bold "panel" feel */
.dgw-zerp-infra-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 0%, transparent 46%, rgba(27,61,245,0.10) 46.3%, transparent 70%);
}
.dgw-zerp-infra-inner { position: relative; z-index: 2; }
.dgw-zerp-infra-head { max-width: 560px; margin: 0 0 64px; }
.dgw-zerp-infra .dgw-zerp-eyebrow { color: #c7d2ff; border-color: rgba(111,134,255,0.32); background: rgba(111,134,255,0.10); }
.dgw-zerp-infra .dgw-zerp-h2 { color: #fff; }
.dgw-zerp-infra-sub { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: rgba(255,255,255,0.66); margin: 20px 0 0; max-width: 540px; }

/* cadence cards */
.dgw-zerp-infra-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.dgw-zerp-infra-card {
  padding: 22px 20px 24px; border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, background 0.35s ease;
}
.dgw-zerp-infra-card:hover { transform: translateY(-5px); border-color: rgba(111,134,255,0.5); background: rgba(111,134,255,0.07); }
.dgw-zerp-infra-cadence {
  display: inline-block; margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dgw-zerp-brand-soft);
}
.dgw-zerp-infra-card-body { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0; }

/* --- rotating wireframe globe (pure CSS 3D) --- */
.dgw-zerp-globe {
  position: absolute; top: 50%; right: -120px;
  transform: translateY(-50%) scale(1.42); transform-origin: center;
  width: 520px; height: 520px; z-index: 1; pointer-events: none;
  perspective: 1300px; opacity: 1;
}
.dgw-zerp-globe-core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(38,74,255,0.28) 0%, rgba(12,20,48,0.10) 58%, rgba(10,15,36,0) 72%);
  box-shadow: 0 0 90px 6px rgba(27,61,245,0.20) inset;
}
/* static tilt so latitude rings open into visible curves (the grid that reads as a sphere) */
.dgw-zerp-globe-tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateZ(-8deg);
}
.dgw-zerp-globe-sphere {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: dgw-zerp-globe-spin 36s linear infinite;
}
.dgw-zerp-globe-m {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(140,166,255,0.24);
}
.dgw-zerp-globe-lat {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid rgba(140,166,255,0.22);
}
@keyframes dgw-zerp-globe-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

/* === 7C. INTEGRATIONS / ECOSYSTEM (light · cell grid · animated connectors) === */
.dgw-zerp-eco { position: relative; overflow: hidden; padding: 100px 0 110px; background: #fff; }
.dgw-zerp-eco-h2 {
  text-align: center; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em;
  color: var(--dgw-zerp-ink); max-width: 18ch; margin: 0 auto 14px;
}
.dgw-zerp-eco-sub { text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--dgw-zerp-muted); max-width: 580px; margin: 0 auto 28px; }

/* the board */
.dgw-zerp-eco-board { position: relative; width: 100%; max-width: 1440px; height: 600px; margin: 0 auto; }
.dgw-zerp-eco-gridbg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(14,22,51,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,22,51,0.055) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 78% 76% at 50% 50%, #000 55%, transparent 92%);
  mask-image: radial-gradient(ellipse 78% 76% at 50% 50%, #000 55%, transparent 92%);
}

/* animated connector wires */
.dgw-zerp-eco-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.dgw-zerp-eco-path-bg { stroke: rgba(27,61,245,0.13); stroke-width: 1.5; }
.dgw-zerp-eco-path {
  stroke: var(--dgw-zerp-brand); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 3 11; opacity: 0.9;
  animation: dgw-zerp-eco-flow 1.25s linear infinite;
}
@keyframes dgw-zerp-eco-flow { to { stroke-dashoffset: -42; } }
.dgw-zerp-eco-dot { fill: var(--dgw-zerp-brand); opacity: 0.55; }

/* logo cells + labels */
.dgw-zerp-eco-group { position: absolute; display: flex; align-items: center; gap: 16px; transform: translateY(-50%); }
.dgw-zerp-eco-gl { left: 1%; width: 33%; justify-content: flex-end; }
.dgw-zerp-eco-gr { right: 1%; width: 33%; justify-content: flex-start; }
.dgw-zerp-eco-logos { display: flex; gap: 10px; }
.dgw-zerp-eco-logo {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e0ebf4;
  box-shadow: 0 4px 9px rgba(0,0,0,0.07);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.dgw-zerp-eco-logo img { width: 28px; height: 28px; object-fit: contain; display: block; }
.dgw-zerp-eco-logo:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgba(27,61,245,0.4); }
.dgw-zerp-eco-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(90deg, #4199EA 0%, #21629F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* central hub */
.dgw-zerp-eco-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; }
.dgw-zerp-eco-hub-card {
  position: relative; width: 100px; height: 100px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center; background: #fff;
  border: 1px solid #e0ebf4;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 30px 60px -22px rgba(27,61,245,0.5), 0 8px 22px -12px rgba(14,22,51,0.2);
}
.dgw-zerp-eco-hub-card::before {
  content: ''; position: absolute; inset: -12px; border-radius: 32px; z-index: -1;
  background: radial-gradient(circle, rgba(27,61,245,0.22) 0%, transparent 70%);
  animation: dgw-zerp-pulse 3s ease-in-out infinite;
}
.dgw-zerp-eco-hub-card img { width: 52px; height: 52px; object-fit: contain; }
.dgw-zerp-eco-hub-label {
  position: absolute; left: 50%; top: calc(50% + 64px); transform: translateX(-50%); z-index: 3; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-brand);
}

/* === LIVE ERP OPERATIONS CONSOLE (dark card · used in the hero) === */
/* hero wrapper — keeps the dashboard's entrance animation + glow */
.dgw-zerp-herocon {
  position: relative; z-index: 1; max-width: 1000px; margin: 56px auto 0; text-align: left;
  animation: dgw-zerp-dashIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}
.dgw-zerp-ops {
  max-width: 940px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  background: linear-gradient(165deg, #0b1126 0%, #0e1838 100%);
  border: 1px solid rgba(14,22,51,0.12);
  box-shadow: 0 40px 90px -36px rgba(14,22,51,0.55), 0 2px 0 rgba(255,255,255,0.5) inset;
}
.dgw-zerp-ops-hero { max-width: none; }
/* top bar */
.dgw-zerp-ops-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.dgw-zerp-ops-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; color: #6ee7a8;
}
.dgw-zerp-ops-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: dgw-zerp-ops-pulse 1.8s ease-out infinite;
}
@keyframes dgw-zerp-ops-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.dgw-zerp-ops-bar-title { font-size: 13px; color: rgba(255,255,255,0.55); }
.dgw-zerp-ops-uptime { margin-left: auto; font-size: 12.5px; color: rgba(255,255,255,0.5); }
.dgw-zerp-ops-uptime strong { color: #fff; font-weight: 700; }

/* stat tiles */
.dgw-zerp-ops-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.07); }
.dgw-zerp-ops-stat { padding: 22px 24px; background: #0c1430; }
.dgw-zerp-ops-num {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -0.02em; color: #fff; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dgw-zerp-ops-num small { font-size: 0.42em; font-weight: 600; color: rgba(255,255,255,0.45); margin-left: 3px; letter-spacing: 0; }
.dgw-zerp-ops-num-ok { color: #6ee7a8; }
.dgw-zerp-ops-label { display: block; margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,0.5); }

/* throughput equaliser bars */
.dgw-zerp-ops-chart {
  display: flex; align-items: flex-end; gap: 5px; height: 110px;
  padding: 22px 24px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.dgw-zerp-ops-chart span {
  flex: 1; height: var(--h); border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--dgw-zerp-brand-soft) 0%, var(--dgw-zerp-brand) 100%);
  opacity: 0.85; transform-origin: bottom;
  animation: dgw-zerp-ops-eq 2.6s ease-in-out infinite;
}
@keyframes dgw-zerp-ops-eq {
  0%, 100% { transform: scaleY(0.62); }
  50% { transform: scaleY(1); }
}
.dgw-zerp-ops-chart span:nth-child(3n)   { animation-delay: -0.4s; }
.dgw-zerp-ops-chart span:nth-child(3n+1) { animation-delay: -1.1s; }
.dgw-zerp-ops-chart span:nth-child(4n)   { animation-delay: -1.7s; }
.dgw-zerp-ops-chart span:nth-child(5n)   { animation-delay: -2.2s; }

/* live activity feed (auto-scroll) */
.dgw-zerp-ops-feed {
  height: 156px; overflow: hidden; position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.dgw-zerp-ops-feed-track { animation: dgw-zerp-ops-scroll 16s linear infinite; }
@keyframes dgw-zerp-ops-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.dgw-zerp-ops-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 24px; font-size: 13px; color: rgba(255,255,255,0.74);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dgw-zerp-ops-row b { color: #fff; font-weight: 600; }
.dgw-zerp-ops-t { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--dgw-zerp-brand-soft); }
.dgw-zerp-ops-loc {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: rgba(255,255,255,0.5); padding: 3px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
}
.dgw-zerp-ops-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
}
.dgw-zerp-ops-tag.fin  { color: #9db4ff; background: rgba(27,61,245,0.20); }
.dgw-zerp-ops-tag.inv  { color: #ffb98f; background: rgba(255,122,69,0.18); }
.dgw-zerp-ops-tag.shop { color: #7fe3b3; background: rgba(22,160,106,0.20); }

/* --- enriched analytics layout (hero console) --- */
.dgw-zerp-ops-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: rgba(255,255,255,0.07); }
.dgw-zerp-ops-kpi { padding: 16px 18px; background: #0c1430; }
.dgw-zerp-ops-kpi-label { display: block; font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 9px; }
.dgw-zerp-ops-kpi-val {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -0.02em; color: #fff; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dgw-zerp-ops-kpi-val small { font-size: 0.46em; font-weight: 600; color: rgba(255,255,255,0.45); margin-left: 2px; }
.dgw-zerp-ops-kpi-trend { display: block; margin-top: 7px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(255,255,255,0.42); }
.dgw-zerp-ops-kpi-trend.up   { color: #6ee7a8; }
.dgw-zerp-ops-kpi-trend.down { color: #f0816a; }

.dgw-zerp-ops-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1px; background: rgba(255,255,255,0.07); }
.dgw-zerp-ops-panel { padding: 18px 20px 20px; background: #0c1430; }
.dgw-zerp-ops-panel-head {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.5); margin-bottom: 14px;
}
/* hero-scoped resets so the reused chart/feed sit flush inside panels */
.dgw-zerp-ops-hero .dgw-zerp-ops-chart { padding: 0; height: 104px; border-top: none; }
.dgw-zerp-ops-hero .dgw-zerp-ops-feed { height: 132px; border-top: none; }
.dgw-zerp-ops-hero .dgw-zerp-ops-row { padding-left: 0; padding-right: 0; }
.dgw-zerp-ops-panel-feed { padding-bottom: 6px; }

/* -------------------------------------------------------------
   8. FAQ (light · accordion)
   ------------------------------------------------------------- */
.dgw-zerp-faq { padding: 110px 0; background: #fff; scroll-margin-top: 76px; }
.dgw-zerp-faq-container { max-width: 820px; }
.dgw-zerp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.dgw-zerp-faq-item {
  background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft);
  border-radius: 14px; padding: 4px 22px; transition: border-color 0.25s ease, background 0.25s ease;
}
.dgw-zerp-faq-item[open] { background: #fff; border-color: rgba(27,61,245,0.2); box-shadow: var(--dgw-zerp-card-shadow); }
.dgw-zerp-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer; padding: 18px 0;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: -0.01em; color: var(--dgw-zerp-ink);
}
.dgw-zerp-faq-q::-webkit-details-marker { display: none; }
.dgw-zerp-faq-icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.dgw-zerp-faq-icon::before, .dgw-zerp-faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--dgw-zerp-brand); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease;
}
.dgw-zerp-faq-icon::before { width: 14px; height: 2px; }
.dgw-zerp-faq-icon::after { width: 2px; height: 14px; }
.dgw-zerp-faq-item[open] .dgw-zerp-faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.dgw-zerp-faq-a { padding: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--dgw-zerp-muted); max-width: 92%; }

/* -------------------------------------------------------------
   9. FINAL CTA (blue gradient band)
   ------------------------------------------------------------- */
.dgw-zerp-finalcta {
  position: relative; padding: 104px 0 110px;
  background: linear-gradient(135deg, var(--dgw-zerp-brand-deep) 0%, var(--dgw-zerp-brand) 55%, #3b56ff 100%);
  overflow: hidden; isolation: isolate;
}
.dgw-zerp-finalcta-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 0%, transparent 78%);
}
.dgw-zerp-finalcta-glow {
  position: absolute; top: -30%; right: -5%; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,69,0.4) 0%, transparent 65%); filter: blur(80px); z-index: 0;
}
.dgw-zerp-finalcta-glow-2 {
  top: auto; bottom: -34%; right: auto; left: -6%; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(120,150,255,0.5) 0%, transparent 66%);
}
.dgw-zerp-finalcta-inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto; }
.dgw-zerp-finalcta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  padding: 6px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.10);
}
.dgw-zerp-finalcta-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dgw-zerp-accent); box-shadow: 0 0 0 4px rgba(255,122,69,0.3); animation: dgw-zerp-pulse 2.4s ease-in-out infinite; }
.dgw-zerp-finalcta-h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(30px, 4vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; color: #fff; margin: 0 0 20px; }
.dgw-zerp-finalcta-em { color: #ffd7c4; background: linear-gradient(120deg, #ffd7c4, #ffb38f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dgw-zerp-finalcta-sub { font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.62; color: rgba(255,255,255,0.85); margin: 0 auto 32px; max-width: 580px; }
.dgw-zerp-finalcta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dgw-zerp-finalcta-assure {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; gap: 12px 26px; justify-content: center; flex-wrap: wrap;
}
.dgw-zerp-finalcta-assure li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,0.9); }
.dgw-zerp-finalcta-assure svg { color: #6ee7a8; flex-shrink: 0; }
.dgw-zerp-finalcta-direct { margin: 22px 0 0; font-size: 14px; color: rgba(255,255,255,0.7); }
.dgw-zerp-finalcta-direct a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dgw-zerp-finalcta-direct a:hover { color: #ffd7c4; }

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
.dgw-zerp-footer { padding: 40px 0; background: #0b1230; }
.dgw-zerp-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dgw-zerp-footer-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; color: #fff; text-decoration: none; }
.dgw-zerp-footer-links { display: flex; gap: 24px; }
.dgw-zerp-footer-links a { font-size: 13.5px; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.dgw-zerp-footer-links a:hover { color: #fff; }
.dgw-zerp-footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.5); }

/* -------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------- */
@keyframes dgw-zerp-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.6} }
@keyframes dgw-zerp-fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes dgw-zerp-dashIn { from{opacity:0;transform:translateY(28px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes dgw-zerp-livePulse { 0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(22,160,106,.5)} 50%{transform:scale(1.2);opacity:.7;box-shadow:0 0 0 5px rgba(22,160,106,0)} }
@keyframes dgw-zerp-barA { from{height:0} }
@keyframes dgw-zerp-barB { from{height:0} }
@keyframes dgw-zerp-feedIn { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:translateX(0)} }
@keyframes dgw-zerp-floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 1240px) {
  .dgw-zerp-hero-float { display: none; }
}
@media (max-width: 1024px) {
  .dgw-zerp-modules-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-chaos-wall { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
  .dgw-zerp-flow { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .dgw-zerp-flow-step:not(:last-child)::after { display: none; }
  .dgw-zerp-flow-result { grid-template-columns: 1fr; text-align: left; gap: 16px; }
  .dgw-zerp-flow-result-cta { justify-self: start; }
  .dgw-zerp-ind-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-infra-grid { grid-template-columns: repeat(3, 1fr); }
  .dgw-zerp-globe { transform: translateY(-50%) scale(1.2); right: -150px; opacity: 0.6; }
  .dgw-zerp-ops-kpis { grid-template-columns: repeat(3, 1fr); }
  .dgw-zerp-pain, .dgw-zerp-modules, .dgw-zerp-rollout, .dgw-zerp-why, .dgw-zerp-industries, .dgw-zerp-infra, .dgw-zerp-faq { padding: 84px 0; }
}
@media (max-width: 880px) {
  .dgw-zerp-container { padding: 0 24px; }
  .dgw-zerp-nav-inner { padding: 13px 24px; }
  .dgw-zerp-nav-links { display: none; }
  .dgw-zerp-why-layout { grid-template-columns: 1fr; gap: 36px; }
  .dgw-zerp-why-intro { position: static; }
  .dgw-zerp-why-sub { max-width: none; }
  .dgw-zerp-dash-frame { grid-template-columns: 1fr; }
  .dgw-zerp-dash-side { display: none; }
  .dgw-zerp-dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-dash-row { grid-template-columns: 1fr; }
  .dgw-zerp-section-head { margin-bottom: 40px; }
}
/* ecosystem board → stacked list when the 1080px board can't fit */
@media (max-width: 1180px) {
  .dgw-zerp-eco-board { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .dgw-zerp-eco-gridbg, .dgw-zerp-eco-wires, .dgw-zerp-eco-hub-label { display: none; }
  .dgw-zerp-eco-hub { position: static; transform: none; order: -1; margin-bottom: 8px; }
  .dgw-zerp-eco-group {
    position: static !important; transform: none !important; top: auto !important;
    width: 100% !important; max-width: 520px; flex-direction: column; gap: 12px;
    justify-content: center !important; align-items: center; text-align: center;
  }
  .dgw-zerp-eco-gr { flex-direction: column; }
  .dgw-zerp-eco-logos { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 600px) {
  .dgw-zerp-hero { padding: 60px 0 72px; }
  .dgw-zerp-modules-grid, .dgw-zerp-ind-grid { grid-template-columns: 1fr; }
  .dgw-zerp-ind-canvas { height: 260px; }
  .dgw-zerp-ind-photo { width: 50%; }
  .dgw-zerp-ind-chip { font-size: 9px; padding: 5px 9px; }
  .dgw-zerp-ind-chip-a { left: 4%; } .dgw-zerp-ind-chip-c { right: 3%; }
  .dgw-zerp-ind-text { padding: 22px 22px 26px; }
  .dgw-zerp-ind-title { font-size: 20px; }
  .dgw-zerp-flow { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-chaos-wall { grid-template-columns: 1fr; gap: 20px; }
  .dgw-zerp-chaos { transform: none; }
  .dgw-zerp-chaos:hover { transform: translateY(-6px); }
  .dgw-zerp-infra-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dgw-zerp-infra-head { margin-bottom: 40px; }
  .dgw-zerp-globe { transform: translate(50%,-50%) scale(1); top: 30%; right: 50%; opacity: 0.28; }
  .dgw-zerp-hero-cta-row .dgw-zerp-btn, .dgw-zerp-finalcta-row .dgw-zerp-btn { width: 100%; justify-content: center; }
  .dgw-zerp-dash-tiles { grid-template-columns: 1fr 1fr; }
  .dgw-zerp-footer-inner { flex-direction: column; text-align: center; }
  .dgw-zerp-how-step { grid-template-columns: 46px 1fr; gap: 16px; padding-bottom: 28px; }
  .dgw-zerp-how-num { width: 46px; height: 46px; border-radius: 13px; font-size: 16px; }
  .dgw-zerp-how-step:not(:last-child) .dgw-zerp-how-node::after { top: 50px; }
  .dgw-zerp-how-title { font-size: 19px; }
  .dgw-zerp-how-deliver { border-radius: 12px; align-items: flex-start; line-height: 1.45; }
  .dgw-zerp-ops-stat { padding: 16px 16px; }
  .dgw-zerp-ops-bar-title { display: none; }
  .dgw-zerp-ops-chart { height: 80px; }
  .dgw-zerp-ops-loc { display: none; }
  .dgw-zerp-ops-kpis { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-ops-split { grid-template-columns: 1fr; }
  .dgw-zerp-ops-kpi { padding: 13px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-eyebrow-dot, .dgw-zerp-hero-copy > *, .dgw-zerp-dash, .dgw-zerp-dash-bar,
  .dgw-zerp-dash-feed-line, .dgw-zerp-dash-livepulse, .dgw-zerp-pain-card, .dgw-zerp-module,
  .dgw-zerp-flow-step, .dgw-zerp-flow-badge::before, .dgw-zerp-why-item, .dgw-zerp-ind-card, .dgw-zerp-btn, .dgw-zerp-nav-cta,
  .dgw-zerp-chaos, .dgw-zerp-hero-float, .dgw-zerp-globe-sphere, .dgw-zerp-infra-card,
  .dgw-zerp-ops-dot, .dgw-zerp-ops-chart span, .dgw-zerp-ops-feed-track, .dgw-zerp-eco-hub-card::before, .dgw-zerp-eco-path, .dgw-zerp-finalcta-eyebrow-dot {
    animation: none !important; transition: none !important;
  }
  .dgw-zerp-eco-path { stroke-dasharray: none; }
  .dgw-zerp-module:hover, .dgw-zerp-flow-step:hover,
  .dgw-zerp-why-item:hover, .dgw-zerp-ind-card:hover, .dgw-zerp-btn:hover, .dgw-zerp-infra-card:hover { transform: none !important; }
  .dgw-zerp-chaos:hover { transform: rotate(var(--rot)) translateY(var(--dy)) !important; }
}





 /* PAGE: discovery-call | Prefix: .dc- */

  .dc-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
  .dc-wrap {
    --dc-navy:   #0d1c2e;
    --dc-teal:   #0abfbc;
    --dc-teal2:  #07a3a0;
    --dc-gray50: #f8fafc;
    --dc-gray100:#f1f5f9;
    --dc-gray600:#475569;
    --dc-gray800:#1e293b;
    font-family: 'Inter', sans-serif;
    color: var(--dc-gray800);
  }

  /* ── HERO ── */
  .dc-hero {
    background: linear-gradient(135deg, var(--dc-navy) 0%, #112240 100%);
    color: white;
    padding: 80px 24px 90px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .dc-hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(10,191,188,0.07);
    pointer-events: none;
  }
  .dc-hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(10,191,188,0.05);
    pointer-events: none;
  }
  .dc-hero-badge {
    display: inline-block;
    background: rgba(10,191,188,0.15);
    border: 1px solid rgba(10,191,188,0.35);
    color: var(--dc-teal);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 100px;
    margin-bottom: 24px;
    position: relative;
  }
  .dc-hero h1 {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
    position: relative;
  }
  .dc-hero h1 span { color: var(--dc-teal); }
  .dc-hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,0.7);
    max-width: 540px;
    margin: 0 auto 36px;
    line-height: 1.7;
    position: relative;
  }
  .dc-hero-meta {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    position: relative;
  }
  .dc-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
  }
  .dc-hero-meta-item svg { color: var(--dc-teal); flex-shrink: 0; }

  /* ── BOOKING ── */
  .dc-booking {
    background: var(--dc-gray50);
    padding: 80px 24px 80px;
  }
  .dc-booking-inner {
    max-width: 1200px;
    margin: 0 auto;
/*     display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 48px;
    align-items: start; */
  }
  .dc-booking-info h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--dc-navy);
    margin-bottom: 14px;
    line-height: 1.25;
  }
  .dc-booking-info > p {
    font-size: 15px;
    color: var(--dc-gray600);
    line-height: 1.7;
    margin-bottom: 30px;
  }
  .dc-info-list { list-style: none; }
  .dc-info-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 14px;
  }
  .dc-info-dot {
    width: 22px; height: 22px;
    background: rgba(10,191,188,0.14);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .dc-info-dot svg { color: var(--dc-teal); }
  .dc-info-list li strong {
    display: block;
    font-weight: 600;
    color: var(--dc-navy);
    margin-bottom: 2px;
  }
  .dc-info-list li span { color: var(--dc-gray600); font-size: 13px; }
  .dc-divider {
    border: none;
    border-top: 1px solid var(--dc-gray100);
    margin: 24px 0;
  }
  .dc-host-card {
    display: flex;
    gap: 14px;
    align-items: center;
  }
  .dc-host-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dc-teal), var(--dc-navy));
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: white;
    flex-shrink: 0;
  }
  .dc-host-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--dc-navy);
    margin-bottom: 2px;
  }
  .dc-host-title { font-size: 13px; color: var(--dc-gray600); margin-bottom: 8px; }
  .dc-badge-row { display: flex; gap: 6px; flex-wrap: wrap; }
  .dc-badge {
    font-size: 11px;
    font-weight: 600;
    background: rgba(10,191,188,0.1);
    color: var(--dc-teal2);
    border-radius: 100px;
    padding: 3px 10px;
    border: 1px solid rgba(10,191,188,0.2);
  }

  /* Embed box */
  .dc-booking-embed {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 40px rgba(13,28,46,0.09);
    overflow: hidden;
  }
  .dc-embed-header {
    background: var(--dc-navy);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .dc-embed-header svg { color: var(--dc-teal); }
  .dc-embed-header span { font-size: 14px; font-weight: 600; color: white; }
  #inline-container { width: 100%; min-height: 600px; }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .dc-booking-inner { grid-template-columns: 1fr; }
    .dc-booking-info { order: 2; }
    .dc-booking-embed { order: 1; }
  }
  @media (max-width: 500px) {
    .dc-hero { padding: 56px 20px 72px; }
    .dc-hero-meta { gap: 14px; }
  }




/* =============================================================
   Digiwah · Zoho Books Implementation Partner page (India)
   LIGHT, airy, GST/pain-led. Class prefix: dgw-zbk-
   Theme: Zoho Books azure (#006fda) + warm gold accent.
   Structure inspired by zoho.com/in/books (light, product-led).
   Sibling of the zoho-erp page — same Digiwah design system.
   ============================================================= */

/* Scoped reset — applies ONLY inside the page wrapper so it can't
   leak into (or be clobbered by) the WordPress theme when live. */
.dgw-zbk-body, .dgw-zbk-body *, .dgw-zbk-body *::before, .dgw-zbk-body *::after { box-sizing: border-box; }

:root {
  --dgw-zbk-brand: #006fda;        /* Zoho Books azure */
  --dgw-zbk-brand-deep: #0064a5;
  --dgw-zbk-brand-soft: #4f99df;
  --dgw-zbk-accent: #f5ba31;       /* warm gold */
  --dgw-zbk-accent-deep: #ffa813;  /* amber */
  --dgw-zbk-green: #16a06a;
  --dgw-zbk-red: #e0533d;
  --dgw-zbk-ink: #0c1b2e;
  --dgw-zbk-ink-soft: #16263c;
  --dgw-zbk-muted: #54657d;
  --dgw-zbk-muted-2: #7f8ea3;
  --dgw-zbk-bg: #ffffff;
  --dgw-zbk-bg-tint: #f3f8ff;      /* Books pale blue */
  --dgw-zbk-bg-blue: #e8f1fc;
  --dgw-zbk-bg-cream: #fef6e6;     /* warm cream */
  --dgw-zbk-line: rgba(12, 27, 46, 0.09);
  --dgw-zbk-line-soft: rgba(12, 27, 46, 0.06);
  --dgw-zbk-card-shadow: 0 1px 2px rgba(12,27,46,0.04), 0 12px 30px -18px rgba(0,111,218,0.20);
  --dgw-zbk-card-shadow-h: 0 1px 2px rgba(12,27,46,0.05), 0 24px 50px -22px rgba(0,111,218,0.30);
}

.dgw-zbk-body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--dgw-zbk-ink-soft);
  background: var(--dgw-zbk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* -------------------------------------------------------------
   SHARED
   ------------------------------------------------------------- */
.dgw-zbk-container {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.dgw-zbk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dgw-zbk-brand);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(0, 111, 218, 0.16);
  background: rgba(0, 111, 218, 0.05);
  margin-bottom: 22px;
}
.dgw-zbk-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dgw-zbk-accent-deep);
  box-shadow: 0 0 0 4px rgba(255, 168, 19, 0.18);
  animation: dgw-zbk-pulse 2.4s ease-in-out infinite;
}
.dgw-zbk-eyebrow-light {
  color: #cfe3fb;
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

.dgw-zbk-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--dgw-zbk-ink);
  margin: 0;
}
.dgw-zbk-h2-grad {
  background: linear-gradient(120deg, var(--dgw-zbk-brand) 0%, var(--dgw-zbk-accent-deep) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dgw-zbk-section-head {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 56px;
}
.dgw-zbk-section-sub {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--dgw-zbk-muted);
  margin: 18px auto 0;
  max-width: 640px;
}

/* Buttons */
.dgw-zbk-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.dgw-zbk-btn svg { transition: transform 0.25s ease; }
.dgw-zbk-btn-primary {
  background: linear-gradient(135deg, var(--dgw-zbk-brand) 0%, var(--dgw-zbk-brand-deep) 100%);
  color: #fff;
  box-shadow: 0 14px 34px -14px rgba(0, 111, 218, 0.55);
}
.dgw-zbk-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(0,111,218,0.65); }
.dgw-zbk-btn-primary:hover svg { transform: translateX(4px); }
.dgw-zbk-btn-ghost {
  background: #fff; color: var(--dgw-zbk-ink);
  border-color: var(--dgw-zbk-line);
  box-shadow: 0 1px 2px rgba(12,27,46,0.04);
}
.dgw-zbk-btn-ghost:hover { border-color: rgba(0,111,218,0.3); color: var(--dgw-zbk-brand); transform: translateY(-2px); }
.dgw-zbk-btn-light {
  background: #fff; color: var(--dgw-zbk-brand-deep);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.4);
}
.dgw-zbk-btn-light:hover { transform: translateY(-2px); }

/* -------------------------------------------------------------
   NAV (light glass, sticky)
   ------------------------------------------------------------- */
.dgw-zbk-nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(255,255,255,0.82);
  border-bottom: 1px solid var(--dgw-zbk-line-soft);
}
.dgw-zbk-nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  height: 66px; display: flex; align-items: center; justify-content: space-between;
}
.dgw-zbk-nav-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -0.03em;
  color: var(--dgw-zbk-ink); text-decoration: none;
}
.dgw-zbk-nav-links { display: flex; gap: 30px; }
.dgw-zbk-nav-links a {
  font-size: 14px; font-weight: 500; color: var(--dgw-zbk-muted);
  text-decoration: none; transition: color 0.2s ease;
}
.dgw-zbk-nav-links a:hover { color: var(--dgw-zbk-brand); }
.dgw-zbk-nav-cta {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none;
  padding: 10px 20px; border-radius: 100px;
  background: linear-gradient(135deg, var(--dgw-zbk-brand) 0%, var(--dgw-zbk-brand-deep) 100%);
  box-shadow: 0 10px 26px -12px rgba(0,111,218,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dgw-zbk-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,111,218,0.7); }
@media (max-width: 860px) { .dgw-zbk-nav-links { display: none; } }

/* -------------------------------------------------------------
   1. HERO  — bold azure band: heading up, big Books dashboard down.
   One sharp central dashboard, with faded product-widget columns
   sliding behind it (modelled on zoho.com/in/books home hero).
   ------------------------------------------------------------- */
.dgw-zbk-hero {
  position: relative; overflow: hidden;
  padding: 60px 0 96px;
  background:
    radial-gradient(900px 520px at 50% -6%, #2a86e6 0%, rgba(42,134,230,0) 60%),
    radial-gradient(700px 460px at 86% 92%, rgba(0,90,170,0.55), rgba(0,90,170,0) 65%),
    linear-gradient(170deg, #0a7bdc 0%, #006fda 42%, #0061c2 100%);
}
.dgw-zbk-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: radial-gradient(800px 520px at 50% 8%, #000 0%, transparent 76%);
  mask-image: radial-gradient(800px 520px at 50% 8%, #000 0%, transparent 76%);
  pointer-events: none;
}
.dgw-zbk-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.dgw-zbk-hero-glow-a { width: 480px; height: 480px; top: -160px; left: -100px; background: rgba(120,190,255,0.4); }
.dgw-zbk-hero-glow-b { width: 460px; height: 460px; bottom: -200px; right: -80px; background: rgba(245,186,49,0.22); }

/* --- copy (centered, on blue) --- */
.dgw-zbk-hero-copy { position: relative; z-index: 3; text-align: center; max-width: 760px; margin: 0 auto; }
.dgw-zbk-hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
  padding: 7px 16px 7px 9px; border-radius: 100px; margin-bottom: 22px; margin-top: 40px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dgw-zbk-hero-badge-mark {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #ffd24a 0%, #f5ba31 45%, #ffa617 100%);
  box-shadow: 0 4px 10px -3px rgba(0,0,0,0.25);
}
.dgw-zbk-hero-h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(34px, 4.8vw, 58px);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
  color: #fff; margin: 0 0 20px;
}
.dgw-zbk-hero-h1 .dgw-zbk-h2-grad {
  background: linear-gradient(120deg, #ffe7ad 0%, #f5ba31 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dgw-zbk-hero-sub {
  font-size: clamp(15.5px, 1.3vw, 18.5px); line-height: 1.62;
  color: #dbeafc; max-width: 600px; margin: 0 auto 30px;
}
.dgw-zbk-hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.dgw-zbk-btn-glass {
  background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dgw-zbk-btn-glass:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.dgw-zbk-hero-trust { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.dgw-zbk-hero-trust span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: #cfe3fb;
}
.dgw-zbk-hero-trust svg { color: #ffd24a; flex-shrink: 0; }

/* --- stage: faded slider behind + sharp central dashboard --- */
.dgw-zbk-hero-stage {
  position: relative; z-index: 1;
  margin-top: 54px; min-height: 470px;
}
/* faded product-widget rows sliding behind (horizontal marquee, full-bleed) */
.dgw-zbk-hero-back {
  position: absolute; top: 0; bottom: 0; z-index: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  opacity: 0.5; filter: blur(1.3px); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dgw-zbk-hero-row {
  display: flex; gap: 22px; width: max-content;
  animation: dgw-zbk-marqueeX 52s linear infinite;
}
.dgw-zbk-hero-row.dgw-zbk-is-r2 { animation-duration: 64s; animation-direction: reverse; }
.dgw-zbk-hero-row.r3 { animation-duration: 58s; }
.dgw-zbk-hero-row .dgw-zbk-wcard { width: 312px; padding: 18px 20px; }
.dgw-zbk-hero-back:hover .dgw-zbk-hero-row { animation-play-state: paused; }
/* central sharp dashboard "comes down" */
.dgw-zbk-dash {
  position: relative; z-index: 2; max-width: 880px; margin: 0 auto;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 60px 120px -40px rgba(3,28,64,0.6), 0 0 0 1px rgba(255,255,255,0.5);
  animation: dgw-zbk-dashIn 1s cubic-bezier(0.16,1,0.3,1) both;
}
.dgw-zbk-dash-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #f7f9fc; border-bottom: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-dash-dots { display: flex; gap: 6px; }
.dgw-zbk-dash-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d6dde7; display: block; }
.dgw-zbk-dash-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 13px; color: var(--dgw-zbk-ink); }
.dgw-zbk-dash-logo span { color: var(--dgw-zbk-brand); }
.dgw-zbk-dash-search { margin-left: auto; font-size: 11px; color: var(--dgw-zbk-muted-2); background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 100px; padding: 5px 14px; }
.dgw-zbk-dash-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.dgw-zbk-dash-body { display: grid; grid-template-columns: 156px 1fr; }
.dgw-zbk-dash-side { background: #fbfcfe; border-right: 1px solid var(--dgw-zbk-line); padding: 12px 10px; }
.dgw-zbk-dash-nav { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 12px; color: var(--dgw-zbk-muted); margin-bottom: 2px; }
.dgw-zbk-dash-nav i { width: 14px; height: 14px; border-radius: 4px; background: #d8e0ea; display: block; flex-shrink: 0; }
.dgw-zbk-dash-nav.dgw-zbk-is-act { background: rgba(0,111,218,0.09); color: var(--dgw-zbk-brand); font-weight: 600; }
.dgw-zbk-dash-nav.dgw-zbk-is-act i { background: var(--dgw-zbk-brand); }
.dgw-zbk-dash-main { padding: 18px; }
.dgw-zbk-dash-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dgw-zbk-dash-h b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: var(--dgw-zbk-ink); }
.dgw-zbk-dash-h span { font-size: 11px; color: var(--dgw-zbk-muted); background: var(--dgw-zbk-bg-tint); border: 1px solid var(--dgw-zbk-line); border-radius: 100px; padding: 4px 12px; }
.dgw-zbk-dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.dgw-zbk-dash-card { border: 1px solid var(--dgw-zbk-line); border-radius: 11px; padding: 14px; }
.dgw-zbk-dash-card-l { font-size: 11px; color: var(--dgw-zbk-muted); }
.dgw-zbk-dash-card-v { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: var(--dgw-zbk-ink); margin: 5px 0 10px; }
.dgw-zbk-dash-split { display: flex; height: 7px; border-radius: 100px; overflow: hidden; background: var(--dgw-zbk-bg-blue); }
.dgw-zbk-dash-split i { display: block; height: 100%; }
.dgw-zbk-dash-legend { display: flex; gap: 14px; margin-top: 9px; }
.dgw-zbk-dash-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dgw-zbk-muted); }
.dgw-zbk-dash-legend i { width: 8px; height: 8px; border-radius: 2px; }
.dgw-zbk-dash-chart { border: 1px solid var(--dgw-zbk-line); border-radius: 11px; padding: 14px 14px 6px; }
.dgw-zbk-dash-chart-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dgw-zbk-dash-chart-h b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--dgw-zbk-ink); }
.dgw-zbk-dash-chart-h span { font-size: 11px; color: var(--dgw-zbk-green); font-weight: 600; }
.dgw-zbk-dash-chart svg { width: 100%; height: 132px; display: block; }

/* ===== reusable product-widget cards (also used in back slider) ===== */
.dgw-zbk-wcard {
  background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 16px;
  padding: 15px 16px; box-shadow: 0 18px 36px -22px rgba(12,27,46,0.4);
  flex-shrink: 0;
}
.dgw-zbk-wcard-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.dgw-zbk-wcard-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.dgw-zbk-wcard-ic.dgw-zbk-is-blue { background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); }
.dgw-zbk-wcard-ic.dgw-zbk-is-gold { background: linear-gradient(135deg, var(--dgw-zbk-accent), var(--dgw-zbk-accent-deep)); }
.dgw-zbk-wcard-ic.dgw-zbk-is-green { background: linear-gradient(135deg, #22b67c, #0e7d51); }
.dgw-zbk-wcard-t { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-wcard-sub { font-size: 11px; color: var(--dgw-zbk-muted-2); margin-top: 1px; }
.dgw-zbk-wline { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; padding: 5px 0; border-bottom: 1px dashed var(--dgw-zbk-line); }
.dgw-zbk-wline:last-child { border-bottom: 0; }
.dgw-zbk-wline span:first-child { color: var(--dgw-zbk-muted); }
.dgw-zbk-wline span:last-child { color: var(--dgw-zbk-ink-soft); font-weight: 600; }
.dgw-zbk-wtotal { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-wtotal b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: var(--dgw-zbk-ink); }
.dgw-zbk-wchip { font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; }
.dgw-zbk-wchip.dgw-zbk-is-paid { color: #16a06a; background: rgba(22,160,106,0.12); }
.dgw-zbk-wchip.dgw-zbk-is-due { color: #b8860b; background: rgba(245,186,49,0.16); }
.dgw-zbk-wchip.dgw-zbk-is-irn { color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.1); font-family: 'JetBrains Mono', monospace; text-transform: none; }
.dgw-zbk-wbars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.dgw-zbk-wbar { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--dgw-zbk-brand-soft), var(--dgw-zbk-brand)); }
.dgw-zbk-wbar.dgw-zbk-is-g { background: linear-gradient(180deg, #ffd980, var(--dgw-zbk-accent)); }
.dgw-zbk-wmeta { display: flex; justify-content: space-between; margin-top: 9px; }
.dgw-zbk-wmeta b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--dgw-zbk-ink); }
.dgw-zbk-wmeta span { font-size: 11px; color: var(--dgw-zbk-green); font-weight: 600; align-self: flex-end; }
.dgw-zbk-wtimer { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; color: var(--dgw-zbk-ink); letter-spacing: 0.02em; }
.dgw-zbk-wtimer-ctrl { display: flex; gap: 7px; margin-top: 10px; }
.dgw-zbk-wtimer-btn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--dgw-zbk-bg-blue); color: var(--dgw-zbk-brand); }
.dgw-zbk-wuser { display: flex; align-items: center; gap: 10px; }
.dgw-zbk-wavatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; font-family: 'Plus Jakarta Sans', sans-serif; background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); flex-shrink: 0; }
.dgw-zbk-wuser.dgw-zbk-is-gold .dgw-zbk-wavatar { background: linear-gradient(135deg, var(--dgw-zbk-accent), var(--dgw-zbk-accent-deep)); }
.dgw-zbk-wuser-n { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-wuser-e { font-size: 11px; color: var(--dgw-zbk-muted-2); }
.dgw-zbk-wnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dgw-zbk-wnav span { font-size: 10.5px; color: var(--dgw-zbk-muted); background: var(--dgw-zbk-bg-tint); border: 1px solid var(--dgw-zbk-line-soft); padding: 4px 9px; border-radius: 7px; }
.dgw-zbk-wbank { display: flex; align-items: center; justify-content: space-between; }
.dgw-zbk-wbank-amt { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; color: var(--dgw-zbk-ink); }
.dgw-zbk-wbank-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--dgw-zbk-green); margin-top: 4px; }
.dgw-zbk-wfeed { margin-top: 12px; display: grid; gap: 7px; }
.dgw-zbk-wfeed-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dgw-zbk-muted); }
.dgw-zbk-wfeed-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* hero responsive */
@media (max-width: 980px) {
  .dgw-zbk-hero { padding: 48px 0 76px; }
  .dgw-zbk-hero-stage { margin-top: 40px; min-height: 0; }
  .dgw-zbk-hero-back { display: none; }
  .dgw-zbk-dash { max-width: 100%; }
}
@media (max-width: 600px) {
  .dgw-zbk-dash-body { grid-template-columns: 1fr; }
  .dgw-zbk-dash-side { display: none; }
  .dgw-zbk-dash-cards { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   2. TOOLS-WE-REPLACE STRIP
   ------------------------------------------------------------- */
.dgw-zbk-replace {
  background: var(--dgw-zbk-ink);
  padding: 26px 0;
}
.dgw-zbk-replace-inner {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; text-align: center;
}
.dgw-zbk-replace-from { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.dgw-zbk-replace-chip {
  font-size: 13.5px; font-weight: 600; color: #aebfd2;
  padding: 7px 15px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
}
.dgw-zbk-replace-chip s { color: #6c8099; text-decoration-color: var(--dgw-zbk-red); }
.dgw-zbk-replace-arrow { color: var(--dgw-zbk-accent); flex-shrink: 0; }
.dgw-zbk-replace-to {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: #fff;
  display: inline-flex; align-items: center; gap: 9px;
}
.dgw-zbk-replace-to b { color: var(--dgw-zbk-accent); }

/* -------------------------------------------------------------
   3. MODULES
   ------------------------------------------------------------- */
.dgw-zbk-modules { padding: 96px 0; background: #fff; }
.dgw-zbk-mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1100px; }
.dgw-zbk-mod-card {
  position: relative; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid var(--dgw-zbk-line);
  border-radius: 18px; padding: 30px 26px;
  box-shadow: var(--dgw-zbk-card-shadow);
  transform-style: preserve-3d; will-change: transform;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
/* top accent bar */
.dgw-zbk-mod-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 18px 18px 0 0; z-index: 3;
  background: linear-gradient(90deg, var(--dgw-zbk-brand), var(--dgw-zbk-accent));
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
/* cursor-tracking spotlight */
.dgw-zbk-mod-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(0,111,218,0.14), transparent 55%);
  opacity: 0; transition: opacity 0.35s ease;
}
.dgw-zbk-mod-card:hover { box-shadow: 0 34px 64px -28px rgba(0,111,218,0.42), 0 2px 6px rgba(12,27,46,0.05); border-color: rgba(0,111,218,0.3); }
.dgw-zbk-mod-card:hover::before { transform: scaleX(1); }
.dgw-zbk-mod-card:hover::after { opacity: 1; }
.dgw-zbk-mod-card.dgw-zbk-is-pain:hover { box-shadow: 0 34px 64px -28px rgba(224,83,61,0.34), 0 2px 6px rgba(12,27,46,0.05); border-color: rgba(224,83,61,0.28); }
.dgw-zbk-mod-card.dgw-zbk-is-pain::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(224,83,61,0.12), transparent 55%); }
/* big faded index number (injected by JS) */
.dgw-zbk-mod-num {
  position: absolute; top: 14px; right: 22px; z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 58px; font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; color: rgba(0,111,218,0.07); pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), color 0.35s ease;
}
.dgw-zbk-mod-card.dgw-zbk-is-pain .dgw-zbk-mod-num { color: rgba(224,83,61,0.08); }
.dgw-zbk-mod-card:hover .dgw-zbk-mod-num { transform: translateZ(12px); }
/* layered depth — content lifts off the surface on hover */
.dgw-zbk-mod-ic, .dgw-zbk-mod-title, .dgw-zbk-mod-body, .dgw-zbk-mod-extend, .dgw-zbk-mod-fix {
  position: relative; z-index: 2; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.dgw-zbk-mod-ic {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep));
  box-shadow: 0 10px 24px -10px rgba(0,111,218,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.dgw-zbk-mod-card:hover .dgw-zbk-mod-ic { transform: translateZ(46px) scale(1.05); box-shadow: 0 24px 42px -14px rgba(0,111,218,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.dgw-zbk-mod-card:hover .dgw-zbk-mod-title { transform: translateZ(28px); }
.dgw-zbk-mod-card:hover .dgw-zbk-mod-body { transform: translateZ(16px); }
.dgw-zbk-mod-card:hover .dgw-zbk-mod-extend, .dgw-zbk-mod-card:hover .dgw-zbk-mod-fix { transform: translateZ(10px); }
.dgw-zbk-mod-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700;
  color: var(--dgw-zbk-ink); margin: 0 0 8px;
}
.dgw-zbk-mod-body { font-size: 14px; line-height: 1.6; color: var(--dgw-zbk-muted); margin: 0 0 14px; }
.dgw-zbk-mod-extend {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--dgw-zbk-accent-deep); font-weight: 600;
  padding-top: 13px; border-top: 1px dashed var(--dgw-zbk-line);
}
.dgw-zbk-mod-extend svg { flex-shrink: 0; margin-top: 2px; }

/* -------------------------------------------------------------
   3B. LIVE FEATURE SHOWCASE (section 2 — auto-cycling list + live preview)
   ------------------------------------------------------------- */
.dgw-zbk-show { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 40px; align-items: stretch; margin-top: 6px; }

/* --- left: module list --- */
.dgw-zbk-show-list { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.dgw-zbk-show-item {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 14px;
  padding: 15px 18px; cursor: pointer; overflow: hidden; font-family: inherit;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.dgw-zbk-show-item:hover { border-color: rgba(0,111,218,0.25); }
.dgw-zbk-show-item.dgw-zbk-is-active { border-color: rgba(0,111,218,0.4); box-shadow: var(--dgw-zbk-card-shadow); transform: translateX(4px); }
.dgw-zbk-show-ic { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; color: var(--dgw-zbk-brand); background: var(--dgw-zbk-bg-blue); transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.dgw-zbk-show-item.dgw-zbk-is-active .dgw-zbk-show-ic { background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); color: #fff; box-shadow: 0 10px 22px -10px rgba(0,111,218,0.6); }
.dgw-zbk-show-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dgw-zbk-show-tx b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-show-tx i { font-style: normal; font-size: 12.5px; color: var(--dgw-zbk-muted); }
.dgw-zbk-show-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.dgw-zbk-show-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dgw-zbk-brand), var(--dgw-zbk-accent)); }
.dgw-zbk-show-item.dgw-zbk-is-active .dgw-zbk-show-bar i { animation: dgw-zbk-fill 5s linear forwards; }
.dgw-zbk-show.dgw-zbk-is-paused .dgw-zbk-show-item.dgw-zbk-is-active .dgw-zbk-show-bar i { animation-play-state: paused; }

/* --- right: device frame + panels --- */
.dgw-zbk-show-stage { position: relative; }
.dgw-zbk-show-frame {
  position: relative; height: 100%; min-height: 430px; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #f3f8ff 0%, #ffffff 60%); overflow: hidden;
  border: 1px solid var(--dgw-zbk-line); border-radius: 20px; box-shadow: var(--dgw-zbk-card-shadow);
}
.dgw-zbk-show-frame::before { content: ""; position: absolute; inset: -28% 8% auto 8%; height: 60%; background: radial-gradient(60% 100% at 50% 0%, rgba(0,111,218,0.16), transparent 70%); filter: blur(38px); pointer-events: none; }
.dgw-zbk-show-chrome { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--dgw-zbk-line); background: rgba(255,255,255,0.65); }
.dgw-zbk-show-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #d6dde7; }
.dgw-zbk-show-chrome b { margin-left: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-show-chrome b span { color: var(--dgw-zbk-brand); }
.dgw-zbk-show-live { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--dgw-zbk-green); display: inline-flex; align-items: center; gap: 6px; }
.dgw-zbk-show-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dgw-zbk-green); box-shadow: 0 0 0 3px rgba(22,160,106,0.2); animation: dgw-zbk-pulse 2s ease-in-out infinite; }
.dgw-zbk-show-panels { position: relative; flex: 1; padding: 22px; }
.dgw-zbk-show-panel { position: absolute; inset: 22px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .45s; }
.dgw-zbk-show-panel.dgw-zbk-is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1); }

/* --- preview shared bits --- */
.dgw-zbk-sp-card { background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 14px 30px -20px rgba(12,27,46,0.35); }
.dgw-zbk-sp-card + .dgw-zbk-sp-card { margin-top: 12px; }
.dgw-zbk-sp-cap { display: flex; align-items: center; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--dgw-zbk-muted-2); margin-bottom: 12px; }
.dgw-zbk-sp-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed var(--dgw-zbk-line); }
.dgw-zbk-sp-row:last-child { border-bottom: 0; }
.dgw-zbk-sp-row span:first-child { color: var(--dgw-zbk-muted); }
.dgw-zbk-sp-row span:last-child, .dgw-zbk-sp-row b { color: var(--dgw-zbk-ink-soft); font-weight: 600; }
.dgw-zbk-sp-tot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-sp-tot b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; color: var(--dgw-zbk-ink); }
.dgw-zbk-sp-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.dgw-zbk-sp-stamp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--dgw-zbk-green); border: 1.5px solid var(--dgw-zbk-green); border-radius: 8px; padding: 5px 10px; }
.dgw-zbk-sp-chip { font-size: 11px; font-weight: 600; color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.08); border-radius: 100px; padding: 5px 11px; }
.dgw-zbk-sp-chip.dgw-zbk-is-gold { color: var(--dgw-zbk-accent-deep); background: rgba(245,186,49,0.16); }
.dgw-zbk-sp-tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.dgw-zbk-sp-tag.dgw-zbk-is-blue { color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.1); }
.dgw-zbk-sp-tag.dgw-zbk-is-green { color: var(--dgw-zbk-green); background: rgba(22,160,106,0.12); }
.dgw-zbk-sp-tag.dgw-zbk-is-gold { color: var(--dgw-zbk-accent-deep); background: rgba(245,186,49,0.16); }
.dgw-zbk-sp-mono { font-family: 'JetBrains Mono', monospace; }

/* GST irn typing + qr */
.dgw-zbk-sp-irn { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.08); border-radius: 6px; padding: 6px 10px; white-space: nowrap; overflow: hidden; display: inline-block; max-width: 100%; }
.dgw-zbk-sp-taxes { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.dgw-zbk-sp-qr { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.dgw-zbk-sp-qrbox { width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0; border: 3px solid var(--dgw-zbk-ink); background: conic-gradient(from 0deg, #0c1b2e 0 25%, #fff 0 50%, #0c1b2e 0 75%, #fff 0); background-size: 12px 12px; }
.dgw-zbk-sp-qr p { margin: 0; font-size: 12px; color: var(--dgw-zbk-muted); }

/* stock bars */
.dgw-zbk-sp-stock { display: grid; gap: 12px; }
.dgw-zbk-sp-stockrow { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.dgw-zbk-sp-stockrow span { font-size: 12.5px; color: var(--dgw-zbk-ink-soft); }
.dgw-zbk-sp-track { grid-column: 1 / -1; height: 7px; border-radius: 100px; background: var(--dgw-zbk-bg-blue); overflow: hidden; }
.dgw-zbk-sp-track i { display: block; height: 100%; width: 0; border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zbk-brand-soft), var(--dgw-zbk-brand)); }
.dgw-zbk-sp-track i.dgw-zbk-is-low { background: linear-gradient(90deg, #ffd980, var(--dgw-zbk-accent-deep)); }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-track i { animation: dgw-zbk-trackfill 1.1s .25s cubic-bezier(.16,1,.3,1) forwards; }

/* banking feed */
.dgw-zbk-sp-feed { display: grid; gap: 9px; }
.dgw-zbk-sp-feedrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dgw-zbk-ink-soft); }
.dgw-zbk-sp-feedrow .dgw-zbk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dgw-zbk-sp-feedrow .dgw-zbk-amt { margin-left: auto; font-weight: 600; }

/* reports chart */
.dgw-zbk-sp-chart svg { width: 100%; height: 120px; display: block; }
.dgw-zbk-sp-line { fill: none; stroke: var(--dgw-zbk-brand); stroke-width: 2.5; stroke-linecap: round; }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: dgw-zbk-draw 1.4s .3s cubic-bezier(.16,1,.3,1) forwards; }
.dgw-zbk-sp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.dgw-zbk-sp-kpi { text-align: center; }
.dgw-zbk-sp-kpi b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; color: var(--dgw-zbk-ink); }
.dgw-zbk-sp-kpi span { font-size: 10.5px; color: var(--dgw-zbk-muted); }

/* approve toggle (bills) */
.dgw-zbk-sp-toggle { width: 38px; height: 21px; border-radius: 100px; background: var(--dgw-zbk-bg-blue); position: relative; transition: background .4s ease; }
.dgw-zbk-sp-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-toggle { background: var(--dgw-zbk-green); }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-toggle::after { transform: translateX(17px); }

/* staggered entrance for tagged elements */
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-anim { animation: dgw-zbk-spUp .5s both; }
/* signature: stamp / tick pop, irn type */
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-pop { animation: dgw-zbk-pop .5s .55s both; }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-irn { animation: dgw-zbk-type 1.1s .35s steps(24) both; }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-qrbox { animation: dgw-zbk-pop .5s .9s both; }
.dgw-zbk-sp-blink { animation: dgw-zbk-blink 1.4s ease-in-out infinite; }

/* showcase responsive */
@media (max-width: 980px) {
  .dgw-zbk-show { grid-template-columns: 1fr; gap: 22px; }
  .dgw-zbk-show-list { flex-direction: column; overflow-x: auto; gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dgw-zbk-show-list::-webkit-scrollbar { display: none; }
  .dgw-zbk-show-item { flex: 0 0 auto; min-width: 210px; }
  .dgw-zbk-show-item.dgw-zbk-is-active { transform: none; }
  .dgw-zbk-show-frame { min-height: 380px; }
}
@media (max-width: 560px) {
  .dgw-zbk-show-tx i { display: none; }
  .dgw-zbk-show-item { min-width: 168px; padding: 13px 14px; }
  .dgw-zbk-show-panel { inset: 18px; }
}
/* showcase reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dgw-zbk-show-item.dgw-zbk-is-active .dgw-zbk-show-bar i,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-anim,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-pop,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-irn,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-qrbox,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-track i,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-line,
  .dgw-zbk-sp-blink { animation: none !important; }
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-irn { width: 100%; }
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-track i { width: var(--w, 60%); }
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-line { stroke-dashoffset: 0; }
}

/* -------------------------------------------------------------
   4. PAIN — clean card grid (matches §3 "What we set up" style)
   ------------------------------------------------------------- */
.dgw-zbk-pain {
  position: relative; overflow: hidden;
  padding: 96px 0;
  background: linear-gradient(180deg, var(--dgw-zbk-bg-tint) 0%, #ffffff 100%);
}
/* pain variant of the module card: red accent + green "fix" line */
.dgw-zbk-mod-card.dgw-zbk-is-pain::before { background: linear-gradient(90deg, var(--dgw-zbk-red), var(--dgw-zbk-accent)); }
.dgw-zbk-mod-ic.dgw-zbk-is-red {
  background: linear-gradient(135deg, #e0533d, #b8341f);
  box-shadow: 0 10px 24px -10px rgba(224,83,61,0.55);
}
.dgw-zbk-mod-fix {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--dgw-zbk-green); font-weight: 600;
  padding-top: 13px; border-top: 1px dashed var(--dgw-zbk-line);
}
.dgw-zbk-mod-fix svg { flex-shrink: 0; margin-top: 2px; }

.dgw-zbk-pain-bridge {
  text-align: center; margin-top: 50px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 600; color: var(--dgw-zbk-ink); line-height: 1.5;
}
.dgw-zbk-pain-bridge b { color: var(--dgw-zbk-brand); }

/* -------------------------------------------------------------
   5. GST COMPLIANCE
   ------------------------------------------------------------- */
.dgw-zbk-gst { padding: 96px 0; background: linear-gradient(180deg, #fff 0%, var(--dgw-zbk-bg-tint) 100%); }
.dgw-zbk-gst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dgw-zbk-gst-copy h2 { margin-bottom: 18px; }
.dgw-zbk-gst-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.dgw-zbk-gst-item { display: flex; gap: 14px; align-items: flex-start; }
.dgw-zbk-gst-ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; color: var(--dgw-zbk-brand);
  background: var(--dgw-zbk-bg-tint);
  border: 1px solid var(--dgw-zbk-bg-blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.dgw-zbk-gst-item:hover .dgw-zbk-gst-ic {
  color: #fff;
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep));
  border-color: var(--dgw-zbk-brand);
}
.dgw-zbk-gst-item b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--dgw-zbk-ink); display: block; margin-bottom: 2px; }
.dgw-zbk-gst-item span { font-size: 13.5px; line-height: 1.55; color: var(--dgw-zbk-muted); }

/* GST visual card */
.dgw-zbk-gst-card {
  position: relative; background: #fff; border: 1px solid var(--dgw-zbk-line);
  border-radius: 18px; padding: 24px; box-shadow: var(--dgw-zbk-card-shadow);
}
.dgw-zbk-gst-card-glow { position: absolute; inset: -20% 10% auto 10%; height: 60%; background: radial-gradient(60% 100% at 50% 0%, rgba(0,111,218,0.16), transparent 70%); filter: blur(36px); z-index: 0; }
.dgw-zbk-einv {
  position: relative; z-index: 1; border: 1px solid var(--dgw-zbk-line); border-radius: 12px; overflow: hidden;
}
.dgw-zbk-einv-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--dgw-zbk-bg-tint); border-bottom: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-einv-top b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; color: var(--dgw-zbk-ink); }
.dgw-zbk-einv-irn { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.08); padding: 4px 9px; border-radius: 6px; }
.dgw-zbk-einv-body { padding: 16px 18px; }
.dgw-zbk-einv-line { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--dgw-zbk-ink-soft); border-bottom: 1px dashed var(--dgw-zbk-line); }
.dgw-zbk-einv-line:last-child { border-bottom: 0; }
.dgw-zbk-einv-line span:first-child { color: var(--dgw-zbk-muted); }
.dgw-zbk-einv-tax { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.dgw-zbk-einv-tax span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zbk-muted); background: var(--dgw-zbk-bg-blue); padding: 4px 9px; border-radius: 6px; }
.dgw-zbk-einv-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-einv-total b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; color: var(--dgw-zbk-ink); }
.dgw-zbk-einv-stamp {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: var(--dgw-zbk-green); border: 1.5px solid var(--dgw-zbk-green); border-radius: 8px;
  padding: 5px 10px; transform: rotate(-4deg);
}
.dgw-zbk-gst-qr { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px; background: var(--dgw-zbk-bg-tint); border-radius: 12px; }
.dgw-zbk-gst-qrbox { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; background:
  conic-gradient(from 0deg, #0c1b2e 0 25%, #fff 0 50%, #0c1b2e 0 75%, #fff 0) ;
  background-size: 14px 14px; border: 3px solid #0c1b2e; }
.dgw-zbk-gst-qr p { margin: 0; font-size: 12.5px; color: var(--dgw-zbk-muted); }
.dgw-zbk-gst-qr b { color: var(--dgw-zbk-ink); }

/* -------------------------------------------------------------
   6. MIGRATION (Tally -> Zoho Books)
   ------------------------------------------------------------- */
.dgw-zbk-mig {
  position: relative; overflow: hidden; padding: 92px 0;
  background:
    radial-gradient(900px 520px at 50% -6%, #2a86e6 0%, rgba(42,134,230,0) 60%),
    radial-gradient(700px 460px at 86% 92%, rgba(0,90,170,0.55), rgba(0,90,170,0) 65%),
    linear-gradient(170deg, #0a7bdc 0%, #006fda 42%, #0061c2 100%);
}
.dgw-zbk-mig > .dgw-zbk-container { position: relative; z-index: 3; }
.dgw-zbk-mig-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.dgw-zbk-mig-glow-a { width: 460px; height: 460px; top: -180px; left: -90px; background: rgba(120,190,255,0.38); }
.dgw-zbk-mig-glow-b { width: 440px; height: 440px; bottom: -200px; right: -70px; background: rgba(245,186,49,0.20); }

/* dark-band text overrides */
.dgw-zbk-mig .dgw-zbk-h2 { color: #fff; }
.dgw-zbk-mig .dgw-zbk-h2-grad {
  background: linear-gradient(120deg, #ffe7ad 0%, #f5ba31 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dgw-zbk-mig .dgw-zbk-section-sub { color: rgba(255,255,255,0.80); }
.dgw-zbk-mig .dgw-zbk-mig-step h4 { color: #fff; }
.dgw-zbk-mig .dgw-zbk-mig-step p { color: rgba(255,255,255,0.72); }
.dgw-zbk-mig .dgw-zbk-mig-stepnum {
  color: #fff; background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28);
}
.dgw-zbk-mig .dgw-zbk-mig-step:not(:last-child)::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 4px, transparent 4px 8px);
}
.dgw-zbk-mig .dgw-zbk-mig-arrow-c { background: #fff; color: var(--dgw-zbk-brand); }

/* Migration banner — bright bar over cream body (Zoho-style notice) */
.dgw-zbk-mig-banner {
  max-width: 880px; margin: 0 auto 44px; border-radius: 16px; overflow: hidden;
  border: 1px solid #f1e4c4;
  box-shadow: 0 18px 44px -28px rgba(12,27,46,.4);
}
.dgw-zbk-mig-banner-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep));
  padding: 11px 22px; color: #fff;
}
.dgw-zbk-mig-banner-bar-l {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: .01em;
}
.dgw-zbk-mig-banner-bar-r {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.82);
}
.dgw-zbk-mig-banner-body {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(180deg, #fdf3da, #fbedc8);
  padding: 22px 24px;
}
.dgw-zbk-mig-banner-ic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  color: var(--dgw-zbk-brand); background: #fff;
  border: 1px solid #f1e4c4; box-shadow: 0 6px 16px -10px rgba(12,27,46,.5);
}
.dgw-zbk-mig-banner-txt { flex: 1 1 320px; }
.dgw-zbk-mig-banner-txt b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800;
  color: var(--dgw-zbk-ink); margin-bottom: 3px;
}
.dgw-zbk-mig-banner-txt span { font-size: 13.5px; line-height: 1.55; color: #6b5b39; }
.dgw-zbk-mig-banner-cta {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--dgw-zbk-brand); text-decoration: none;
  padding: 10px 18px; border-radius: 100px; background: #fff; border: 1px solid #f1e4c4;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.dgw-zbk-mig-banner-cta:hover {
  background: var(--dgw-zbk-brand); color: #fff; border-color: var(--dgw-zbk-brand);
  transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(0,111,218,.7);
}
.dgw-zbk-mig-flow {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch;
  max-width: 980px; margin: 0 auto;
}
.dgw-zbk-mig-side { border-radius: 18px; padding: 28px 26px; border: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-mig-before { background: #fff; box-shadow: 0 14px 34px -26px rgba(12,27,46,.45); }
.dgw-zbk-mig-after {
  background: linear-gradient(160deg, var(--dgw-zbk-bg-tint), #fff);
  border-color: rgba(0,111,218,0.25);
  box-shadow: var(--dgw-zbk-card-shadow);
}
.dgw-zbk-mig-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.dgw-zbk-mig-before .dgw-zbk-mig-tag { color: var(--dgw-zbk-muted-2); }
.dgw-zbk-mig-after .dgw-zbk-mig-tag { color: var(--dgw-zbk-brand); }
.dgw-zbk-mig-li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 13.5px; line-height: 1.5; color: var(--dgw-zbk-ink-soft); }
.dgw-zbk-mig-li svg { flex-shrink: 0; margin-top: 2px; }
.dgw-zbk-mig-before .dgw-zbk-mig-li { color: var(--dgw-zbk-muted); }
.dgw-zbk-mig-arrow {
  display: grid; place-items: center; padding: 0 22px;
}
.dgw-zbk-mig-arrow-c {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep));
  box-shadow: 0 16px 34px -12px rgba(0,111,218,0.6);
}
.dgw-zbk-mig-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px;
}
.dgw-zbk-mig-step { position: relative; text-align: center; padding: 0 8px; }
.dgw-zbk-mig-stepnum {
  width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 12px;
  display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  color: var(--dgw-zbk-brand); background: var(--dgw-zbk-bg-blue); border: 1px solid rgba(0,111,218,0.2);
}
.dgw-zbk-mig-step h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--dgw-zbk-ink); margin: 0 0 6px; }
.dgw-zbk-mig-step p { font-size: 13px; line-height: 1.55; color: var(--dgw-zbk-muted); margin: 0; }
.dgw-zbk-mig-step:not(:last-child)::after {
  content: ""; position: absolute; top: 20px; right: -9px; width: 18px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--dgw-zbk-brand-soft) 0 4px, transparent 4px 8px);
}
.dgw-zbk-mig-assure {
  display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 44px; padding: 18px; border-radius: 14px;
  background: var(--dgw-zbk-bg-cream); border: 1px solid #f3e3b8;
  font-size: 14px; color: #6b5a13; text-align: center;
}
.dgw-zbk-mig-assure b { color: #4a3e0d; }

/* -------------------------------------------------------------
   7. WHY DIGIWAH (split, sticky intro)
   ------------------------------------------------------------- */
.dgw-zbk-why { position: relative; overflow: hidden; padding: 96px 0; background: linear-gradient(180deg, #fff 0%, var(--dgw-zbk-bg-tint) 100%); }
.dgw-zbk-why-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(100px); background: rgba(0,111,218,0.1); top: 6%; right: -180px; pointer-events: none; }

/* Implementation statement / ledger — premium build */
.dgw-zbk-ledger-shell {
  position: relative; max-width: 940px; margin: 54px auto 0;
  padding: 1.5px; border-radius: 26px;
  background: linear-gradient(135deg, rgba(0,111,218,0.55) 0%, rgba(245,186,49,0.55) 52%, rgba(0,111,218,0.32) 100%);
  box-shadow: 0 1px 2px rgba(12,27,46,0.05), 0 44px 90px -44px rgba(0,111,218,0.5), 0 20px 44px -32px rgba(12,27,46,0.32);
}
.dgw-zbk-ledger-shell::before {
  content: ""; position: absolute; inset: -34px -16px; z-index: -1; border-radius: 44px;
  background: radial-gradient(58% 60% at 50% 4%, rgba(0,111,218,0.20), transparent 70%),
              radial-gradient(40% 50% at 88% 96%, rgba(245,186,49,0.18), transparent 70%);
  filter: blur(22px); pointer-events: none;
}
.dgw-zbk-ledger {
  position: relative; border-radius: 24.5px; background: #fff; overflow: hidden;
}

/* azure header band */
.dgw-zbk-ledger-head {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 28px; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #0a78dc 0%, #006fda 52%, #0061c2 100%);
}
.dgw-zbk-ledger-head::after {
  content: ""; position: absolute; top: -70%; left: -12%; width: 46%; height: 240%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: rotate(13deg); pointer-events: none;
}
.dgw-zbk-ledger-brand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.dgw-zbk-ledger-mark {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; color: #fff;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 18px -10px rgba(0,0,0,0.5);
}
.dgw-zbk-ledger-id { display: flex; flex-direction: column; line-height: 1.25; }
.dgw-zbk-ledger-id b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: #fff; letter-spacing: -0.01em; }
.dgw-zbk-ledger-id i { font-style: normal; font-size: 10.5px; color: rgba(255,255,255,0.72); letter-spacing: 0.06em; text-transform: uppercase; }
.dgw-zbk-ledger-verify {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.42);
  border-radius: 100px; padding: 7px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.dgw-zbk-ledger-verify svg { stroke: #fff; }
.dgw-zbk-ledger-cols {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px; background: #f7fbff; border-bottom: 1px solid var(--dgw-zbk-line);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--dgw-zbk-muted-2);
}

/* ruled accounting-paper rows */
.dgw-zbk-ledger-rows { position: relative; }
/* .dgw-zbk-ledger-rows::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 64px; width: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(224,83,61,0.22) 10%, rgba(224,83,61,0.22) 90%, transparent);
} */
.dgw-zbk-ledger-row {
  position: relative; z-index: 2; display: grid; grid-template-columns: 42px 1fr auto; gap: 20px; align-items: center;
  padding: 20px 28px; border-bottom: 1px dashed var(--dgw-zbk-line);
  transition: background 0.3s ease;
}
.dgw-zbk-ledger-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--dgw-zbk-brand), var(--dgw-zbk-accent));
  transform: scaleY(0); transform-origin: center; transition: transform 0.35s ease;
}
.dgw-zbk-ledger-row:hover { background: linear-gradient(90deg, rgba(0,111,218,0.05), transparent 60%); }
.dgw-zbk-ledger-row:hover::before { transform: scaleY(1); }
.dgw-zbk-ledger-num {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 27px; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px rgba(0,111,218,0.4); transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
.dgw-zbk-ledger-row:hover .dgw-zbk-ledger-num { color: var(--dgw-zbk-brand); -webkit-text-stroke-color: transparent; }
.dgw-zbk-ledger-main h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: var(--dgw-zbk-ink); margin: 0 0 5px; letter-spacing: -0.01em; }
.dgw-zbk-ledger-main p { font-size: 13.5px; line-height: 1.6; color: var(--dgw-zbk-muted); margin: 0; max-width: 56ch; }
.dgw-zbk-ledger-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--dgw-zbk-brand-deep); background: var(--dgw-zbk-bg-blue);
  border: 1px solid rgba(0,111,218,0.18); border-radius: 8px; padding: 6px 11px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.dgw-zbk-ledger-pill::before {
  content: "✓"; font-size: 11px; font-weight: 800; color: var(--dgw-zbk-green);
}
.dgw-zbk-ledger-row:hover .dgw-zbk-ledger-pill {
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); color: #fff;
  border-color: transparent; box-shadow: 0 8px 18px -10px rgba(0,111,218,0.6);
}
.dgw-zbk-ledger-row:hover .dgw-zbk-ledger-pill::before { color: #fff; }

/* deep-azure bottom line */
.dgw-zbk-ledger-total {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 28px; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #00386f 0%, #005bb6 60%, #0a72d4 100%);
}
.dgw-zbk-ledger-total::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: radial-gradient(60% 120% at 80% 120%, rgba(245,186,49,0.22), transparent 60%);
}
.dgw-zbk-ledger-total-tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.dgw-zbk-ledger-total-tx span {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.66);
}
.dgw-zbk-ledger-total-tx b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; color: #fff; line-height: 1.4; max-width: 50ch; letter-spacing: -0.01em; }

/* circular embossed seal (SVG, stays crisp) */
.dgw-zbk-ledger-seal {
  position: relative; z-index: 1; width: 96px; height: 96px; flex-shrink: 0;
  filter: drop-shadow(0 14px 24px rgba(22,160,106,0.55));
}
.dgw-zbk-ledger-seal svg { width: 100%; height: 100%; display: block; }
.dgw-zbk-seal-arc { font-family: 'JetBrains Mono', monospace; font-size: 6.6px; font-weight: 700; letter-spacing: 0.12em; }
.dgw-zbk-seal-spin { transform-origin: 50px 50px; }

/* premium credential chips */
.dgw-zbk-why-creds {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  max-width: 940px; margin: 28px auto 0;
}
.dgw-zbk-why-cred {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--dgw-zbk-ink-soft);
  background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 100px;
  padding: 9px 16px; box-shadow: var(--dgw-zbk-card-shadow);
}
.dgw-zbk-why-cred i {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--dgw-zbk-accent), var(--dgw-zbk-accent-deep));
  color: #fff; font-size: 9px; font-weight: 900;
}
.dgw-zbk-why-cred i::before { content: "✓"; }

/* scroll reveal */
.dgw-zbk-why .dgw-zbk-ledger-row,
.dgw-zbk-why .dgw-zbk-ledger-cols { opacity: 0; transform: translateY(16px); }
.dgw-zbk-why .dgw-zbk-ledger-seal { opacity: 0; transform: scale(0.5) rotate(-18deg); }
.dgw-zbk-why .dgw-zbk-why-cred { opacity: 0; transform: translateY(10px); }
.dgw-zbk-why.dgw-zbk-in .dgw-zbk-ledger-cols,
.dgw-zbk-why.dgw-zbk-in .dgw-zbk-ledger-row {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--d, 0s);
}
.dgw-zbk-why.dgw-zbk-in .dgw-zbk-ledger-seal {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1); transition-delay: 0.6s;
}
.dgw-zbk-why.dgw-zbk-in .dgw-zbk-why-cred {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.4s ease; transition-delay: var(--d, 0s);
}

/* -------------------------------------------------------------
   7B. ZOHO BOOKS CERTIFICATE — highest authority (trophy register)
   ------------------------------------------------------------- */
.dgw-zbk-cert {
  position: relative; overflow: hidden; padding: 104px 0;
  background:
    radial-gradient(620px 420px at 78% 28%, rgba(245,186,49,0.16), transparent 62%),
    linear-gradient(160deg, #0d1d31 0%, #0a1729 48%, #081320 100%);
}
.dgw-zbk-cert-glow { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; }
.dgw-zbk-cert-glow { width: 520px; height: 520px; top: -120px; right: -60px; background: rgba(245,186,49,0.18); }
.dgw-zbk-cert-glow-2 { width: 480px; height: 480px; bottom: -200px; left: -120px; background: rgba(0,111,218,0.22); }
.dgw-zbk-cert .dgw-zbk-container { position: relative; z-index: 2; }
.dgw-zbk-cert-grid {
  display: grid; grid-template-columns: 1fr 0.92fr; gap: 56px; align-items: center;
}

.dgw-zbk-cert-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgw-zbk-accent);
  background: rgba(245,186,49,0.10); border: 1px solid rgba(245,186,49,0.30);
  padding: 7px 14px; border-radius: 100px;
}
.dgw-zbk-cert-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -0.025em;
  color: #fff; margin: 18px 0 0;
}
.dgw-zbk-cert-gold {
  background: linear-gradient(120deg, #ffe7ad 0%, #f5ba31 92%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dgw-zbk-cert-sub {
  font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.74); margin: 16px 0 0; max-width: 520px;
}
.dgw-zbk-cert-sub b { color: #fff; font-weight: 700; }

.dgw-zbk-cert-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 30px 0 0;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.dgw-zbk-cert-facts > div {
  padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dgw-zbk-cert-facts > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
.dgw-zbk-cert-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.dgw-zbk-cert-facts dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 5px;
}
.dgw-zbk-cert-facts dd {
  margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.4;
}
.dgw-zbk-cert-mono { font-family: 'JetBrains Mono', monospace !important; font-weight: 700 !important; color: var(--dgw-zbk-accent) !important; letter-spacing: 0.02em; }

.dgw-zbk-cert-sign {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 22px;
  font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.6);
}
.dgw-zbk-cert-sign svg { color: var(--dgw-zbk-accent); flex-shrink: 0; margin-top: 2px; }
.dgw-zbk-cert-sign b { color: rgba(255,255,255,0.9); font-weight: 700; }

/* certificate display */
.dgw-zbk-cert-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.dgw-zbk-cert-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  padding: 7px 14px; border-radius: 100px; backdrop-filter: blur(4px);
}
.dgw-zbk-cert-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2ec28a;
  box-shadow: 0 0 0 4px rgba(46,194,138,0.22);
}
.dgw-zbk-cert-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  padding: 10px; background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(245,186,49,0.10);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2.5deg);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease;
  max-width: 420px;
}
.dgw-zbk-cert-frame:hover {
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow: 0 48px 100px -36px rgba(0,0,0,0.85), 0 0 0 1px rgba(245,186,49,0.22);
}
.dgw-zbk-cert-img { display: block; width: 100%; height: auto; border-radius: 7px; }

@media (max-width: 900px) {
  .dgw-zbk-cert { padding: 72px 0; }
  .dgw-zbk-cert-grid { grid-template-columns: 1fr; gap: 40px; }
  .dgw-zbk-cert-stage { order: -1; }
  .dgw-zbk-cert-frame { transform: none; max-width: 300px; }
  .dgw-zbk-cert-frame:hover { transform: translateY(-4px); }
	.dgw-zbk-cert-sign{
		display: flex;
		flex-direction: column;
	}
}
@media (max-width: 480px) {
  .dgw-zbk-cert-facts { grid-template-columns: 1fr; }
  .dgw-zbk-cert-facts > div:nth-child(odd) { border-right: 0; }
  .dgw-zbk-cert-facts > div { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .dgw-zbk-cert-facts > div:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------
   8. PRICING REFERENCE
   ------------------------------------------------------------- */
.dgw-zbk-pricing { padding: 96px 0; background: #fff; }
.dgw-zbk-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dgw-zbk-price-card {
  position: relative; background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 16px;
  padding: 26px 24px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.dgw-zbk-price-card:hover { transform: translateY(-4px); box-shadow: var(--dgw-zbk-card-shadow-h); }
.dgw-zbk-price-card.dgw-zbk-is-pop { border-color: rgba(0,111,218,0.4); box-shadow: var(--dgw-zbk-card-shadow); }
.dgw-zbk-price-pop {
  position: absolute; top: -11px; left: 24px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #fff; background: linear-gradient(135deg, var(--dgw-zbk-accent), var(--dgw-zbk-accent-deep)); padding: 4px 12px; border-radius: 100px;
}
.dgw-zbk-price-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-price-amt { font-family: 'Plus Jakarta Sans', sans-serif; margin: 12px 0 4px; }
.dgw-zbk-price-amt b { font-size: 32px; font-weight: 800; color: var(--dgw-zbk-ink); }
.dgw-zbk-price-amt span { font-size: 13px; color: var(--dgw-zbk-muted); }
.dgw-zbk-price-cycle { font-size: 12px; color: var(--dgw-zbk-muted-2); }
.dgw-zbk-price-desc { font-size: 13px; line-height: 1.55; color: var(--dgw-zbk-muted); margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--dgw-zbk-line); }
.dgw-zbk-price-note {
  text-align: center; margin-top: 34px; font-size: 13px; color: var(--dgw-zbk-muted);
  max-width: 660px; margin-left: auto; margin-right: auto; line-height: 1.6;
}
.dgw-zbk-price-note b { color: var(--dgw-zbk-ink); }

/* -------------------------------------------------------------
   9. INTEGRATIONS (logo marquee)
   ------------------------------------------------------------- */
.dgw-zbk-integ { padding: 90px 0; background: linear-gradient(180deg, var(--dgw-zbk-bg-tint) 0%, #fff 100%); overflow: hidden; }
.dgw-zbk-marquee { position: relative; margin-top: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dgw-zbk-marquee-row { display: flex; gap: 16px; width: max-content; animation: dgw-zbk-marquee 36s linear infinite; }
.dgw-zbk-marquee-row.dgw-zbk-is-rev { animation-direction: reverse; animation-duration: 44s; margin-top: 16px; }
.dgw-zbk-marquee:hover .dgw-zbk-marquee-row { animation-play-state: paused; }
.dgw-zbk-logo {
  display: grid; place-items: center; width: 74px; height: 74px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 16px;
  box-shadow: 0 6px 18px -12px rgba(12,27,46,0.3); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dgw-zbk-logo:hover { transform: translateY(-4px); box-shadow: var(--dgw-zbk-card-shadow-h); }
.dgw-zbk-logo img { width: 38px; height: 38px; object-fit: contain; }
.dgw-zbk-integ-foot { text-align: center; margin-top: 34px; font-size: 13.5px; color: var(--dgw-zbk-muted); }
.dgw-zbk-integ-foot b { color: var(--dgw-zbk-ink); }

/* -------------------------------------------------------------
   10. FAQ
   ------------------------------------------------------------- */
.dgw-zbk-faq { padding: 96px 0; background: #fff; }
.dgw-zbk-faq-list { max-width: 800px; margin: 0 auto; }
.dgw-zbk-faq-item { border-bottom: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16.5px; font-weight: 600; color: var(--dgw-zbk-ink);
}
.dgw-zbk-faq-item summary::-webkit-details-marker { display: none; }
.dgw-zbk-faq-icon { flex-shrink: 0; width: 26px; height: 26px; position: relative; transition: transform 0.3s ease; }
.dgw-zbk-faq-icon::before, .dgw-zbk-faq-icon::after { content: ""; position: absolute; background: var(--dgw-zbk-brand); border-radius: 2px; }
.dgw-zbk-faq-icon::before { top: 12px; left: 4px; right: 4px; height: 2px; }
.dgw-zbk-faq-icon::after { left: 12px; top: 4px; bottom: 4px; width: 2px; transition: transform 0.3s ease; }
.dgw-zbk-faq-item[open] .dgw-zbk-faq-icon::after { transform: scaleY(0); }
.dgw-zbk-faq-answer { padding: 0 4px 24px; font-size: 14.5px; line-height: 1.7; color: var(--dgw-zbk-muted); max-width: 720px; }

/* -------------------------------------------------------------
   11. FINAL CTA
   ------------------------------------------------------------- */
.dgw-zbk-cta { position: relative; overflow: hidden; padding: 100px 0;
  background: linear-gradient(135deg, var(--dgw-zbk-brand) 0%, var(--dgw-zbk-brand-deep) 100%); }
.dgw-zbk-cta-grid { position: absolute; inset: 0; background-image:
  linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 50px 50px; -webkit-mask-image: radial-gradient(700px 400px at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(700px 400px at 50% 50%, #000, transparent 75%); pointer-events: none; }
.dgw-zbk-cta-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.dgw-zbk-cta-glow-1 { width: 420px; height: 420px; top: -120px; left: 8%; background: rgba(245,186,49,0.3); }
.dgw-zbk-cta-glow-2 { width: 460px; height: 460px; bottom: -160px; right: 6%; background: rgba(79,153,223,0.4); }
.dgw-zbk-cta-inner { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }
.dgw-zbk-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); border-radius: 100px; padding: 7px 16px;
}
.dgw-zbk-cta-eyebrow .dgw-zbk-eyebrow-dot { background: var(--dgw-zbk-accent); box-shadow: 0 0 0 4px rgba(245,186,49,0.3); }
.dgw-zbk-cta h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: #fff; margin: 0 0 18px; }
.dgw-zbk-cta-em { background: linear-gradient(120deg, #ffe7ad, var(--dgw-zbk-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dgw-zbk-cta p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #d6e7fb; margin: 0 0 30px; }
.dgw-zbk-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.dgw-zbk-cta-assure { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.dgw-zbk-cta-assure span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #d6e7fb; }
.dgw-zbk-cta-assure svg { color: #9fe3c2; }
.dgw-zbk-cta-direct { margin-top: 26px; font-size: 14px; color: #bcd6f4; }
.dgw-zbk-cta-direct a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); }

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
.dgw-zbk-footer { background: #0a1322; padding: 40px 0; }
.dgw-zbk-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dgw-zbk-footer-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; color: #fff; text-decoration: none; letter-spacing: -0.03em; }
.dgw-zbk-footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.dgw-zbk-footer-links a { font-size: 14px; color: #93a4bd; text-decoration: none; transition: color 0.2s ease; }
.dgw-zbk-footer-links a:hover { color: #fff; }
.dgw-zbk-footer-copy { font-size: 12.5px; color: #6c8099; }

/* -------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------- */
@keyframes dgw-zbk-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }
@keyframes dgw-zbk-marqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dgw-zbk-fill { from { width: 0; } to { width: 100%; } }
@keyframes dgw-zbk-spUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dgw-zbk-pop { 0% { opacity: 0; transform: scale(1.5) rotate(-8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes dgw-zbk-type { from { width: 0; } to { width: 100%; } }
@keyframes dgw-zbk-draw { to { stroke-dashoffset: 0; } }
@keyframes dgw-zbk-trackfill { from { width: 0; } to { width: var(--w, 60%); } }
@keyframes dgw-zbk-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes dgw-zbk-dashIn { from { opacity: 0; transform: translateY(-26px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dgw-zbk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .dgw-zbk-mod-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-zbk-gst-grid { grid-template-columns: 1fr; gap: 40px; }
  .dgw-zbk-price-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-zbk-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	span.dgw-zbk-ledger-mark {
    display: none;
}
	
  .dgw-zbk-container { padding: 0 22px; }
  .dgw-zbk-hero { padding: 84px 0 64px; }
  .dgw-zbk-modules, .dgw-zbk-pain, .dgw-zbk-gst, .dgw-zbk-mig, .dgw-zbk-why, .dgw-zbk-pricing, .dgw-zbk-faq { padding: 64px 0; }
  .dgw-zbk-mod-grid { grid-template-columns: 1fr; }
  .dgw-zbk-price-grid { grid-template-columns: 1fr; }
  .dgw-zbk-mig-flow { grid-template-columns: 1fr; }
  .dgw-zbk-mig-arrow { padding: 18px 0; transform: rotate(90deg); }
  .dgw-zbk-mig-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .dgw-zbk-mig-step:not(:last-child)::after { display: none; }
  .dgw-zbk-ledger-head, .dgw-zbk-ledger-cols, .dgw-zbk-ledger-row, .dgw-zbk-ledger-total { padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; align-items: flex-start; }
  .dgw-zbk-ledger-row { grid-template-columns: auto 1fr; gap: 6px 14px; }
  .dgw-zbk-ledger-pill { grid-column: 2; justify-self: start; margin-top: 4px; }
  .dgw-zbk-ledger-total { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dgw-zbk-console-split { grid-template-columns: 1fr; }
  .dgw-zbk-console-panel + .dgw-zbk-console-panel { border-left: 0; border-top: 1px solid rgba(255,255,255,0.06); }
  .dgw-zbk-kpis { grid-template-columns: 1fr 1fr; }
  .dgw-zbk-kpi:nth-child(2n) { border-right: 0; }
}

/* -------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dgw-zbk-eyebrow-dot, .dgw-zbk-hero-row, .dgw-zbk-dash, .dgw-zbk-marquee-row {
    animation: none !important;
  }
  .dgw-zbk-btn, .dgw-zbk-mod-card, .dgw-zbk-ledger-row, .dgw-zbk-ledger-pill, .dgw-zbk-price-card, .dgw-zbk-logo {
    transition: none !important;
  }
}







/* ============================================================
   DIGIWAH — CASE STUDY: OAS ENERGY (Zoho CRM + Creator)
   Page-scoped prefix: OASdgw-cs- / OASdgw-oas-  (reuses OASdgw-nav-* / OASdgw-footer-*)
   Client accent flipped teal -> OAS cyan via --ct-* vars.
   ============================================================ */

.oasPage {
  /* Digiwah brand (page chrome) */
  --brand: #010ED0;
  --brand-light: #7c8fff;
  --accent: #FF7A45;
  --accent-soft: #ffb284;
  --navy-deep: #050a2e;
  --navy: #0a1145;
  --ink: #0a0f2c;
  --muted: #6b7280;
  --line: rgba(255,255,255,0.08);

  /* OAS Energy brand (client story accent) — cyan */
  --ct-teal: #16a9e6;
  --ct-teal-d: #0c7cb5;
  --ct-teal-dd: #07567f;
  --ct-green: #5cc8f2;
  --ct-mint: #cfeffb;
  --oas-ink: #0c2233;
  --oas-violet: #7c5cff;

  /* App/product palette */
  --cl-navy: #0c1f3d;
  --cl-sky: #0ea5e9;
  --cl-indigo: #6366f1;
  --cl-bg: #f1f5f9;
  --cl-border: #e2e8f0;
  --cl-text: #0f172a;
  --cl-muted: #64748b;
  --cl-ok: #10b981;
  --cl-warn: #f59e0b;
  --cl-danger: #ef4444;

  --surf-light: #f5f8fc;
  --surf-white: #ffffff;
}

.oasPage * { margin: 0; padding: 0; box-sizing: border-box; }
.oasPage { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
.oasPage h1, .oasPage h2, .oasPage h3, .oasPage h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
.oasPage a { color: inherit; text-decoration: none; }
.oasPage code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: rgba(99,102,241,0.12); color: #4338ca; padding: 1px 6px; border-radius: 5px; }

/* ============================================================
   NAVBAR (inherited)
   ============================================================ */
.OASdgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.OASdgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.OASdgw-nav-logo { display: flex; align-items: center; }
.OASdgw-nav-logo-img { height: 38px; width: auto; display: block; }
.OASdgw-nav-links { display: flex; gap: 30px; }
.OASdgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.OASdgw-nav-links a:hover { color: #fff; }
.OASdgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.OASdgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
.OASdgw-cs-sec-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.OASdgw-cs-kicker { display: inline-block; font: 700 12px/1 'Inter'; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 18px; }
.OASdgw-cs-kicker--teal { color: var(--ct-teal); }
.OASdgw-cs-kicker--warn { color: #d97706; }
.OASdgw-cs-kicker--light { color: var(--brand-light); }
.OASdgw-cs-kicker--center { display: block; text-align: center; }
.OASdgw-cs-h2 { font: 800 clamp(28px, 4vw, 44px)/1.12 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-h2--light { color: #fff; }
.OASdgw-cs-p { font: 400 17px/1.7 'Inter'; color: #475569; margin-top: 18px; max-width: 640px; }
.OASdgw-cs-p--light { color: rgba(205,213,255,0.78); }
.OASdgw-cs-p--center { margin-left: auto; margin-right: auto; }
.OASdgw-cs-p strong { color: var(--ink); font-weight: 700; }
.OASdgw-cs-p--light strong { color: #fff; }

.OASdgw-cs-how-head { max-width: 720px; margin-bottom: 48px; }
.OASdgw-cs-how-head--center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }

.OASdgw-cs-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cl-ok); display: inline-block; box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: dgwCsPulse 2.2s infinite; }
@keyframes dgwCsPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

.OASreveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.OASreveal.OASis-in { opacity: 1; transform: none; }

.OASdgw-cs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.OASdgw-cs-dot--info { background: var(--cl-sky); }
.OASdgw-cs-dot--warn { background: var(--cl-warn); }
.OASdgw-cs-dot--ok { background: var(--cl-ok); }
.OASdgw-cs-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 9.5px/1 'Inter'; }

/* Buttons */
.OASdgw-cs-btn { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1 'Inter'; padding: 15px 26px; border-radius: 10px; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
.OASdgw-cs-btn--onbrand { background: #fff; color: var(--ct-teal-d); box-shadow: 0 10px 26px -10px rgba(0,0,0,0.4); }
.OASdgw-cs-btn--onbrand:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,0,0,0.5); }
.OASdgw-cs-btn--onbrand-ghost { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.OASdgw-cs-btn--onbrand-ghost:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.OASdgw-cs-btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(255,122,69,0.4); }
.OASdgw-cs-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,122,69,0.55); }
.OASdgw-cs-btn--ghost { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(124,143,255,0.3); }
.OASdgw-cs-btn--ghost:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* ============================================================
   1 · HERO (Climat teal brand band)
   ============================================================ */
.OASdgw-cs-hero { position: relative; overflow: hidden; padding: 150px 0 96px; text-align: center;
  background: linear-gradient(160deg, var(--ct-teal) 0%, var(--ct-teal-d) 55%, var(--ct-teal-dd) 100%); }
.OASdgw-cs-hero-mesh { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 10%, rgba(84,184,127,0.4) 0%, transparent 45%),
              radial-gradient(ellipse at 85% 20%, rgba(199,245,236,0.18) 0%, transparent 40%),
              radial-gradient(ellipse at 70% 90%, rgba(0,60,53,0.5) 0%, transparent 55%); }
.OASdgw-cs-hero-grid-floor { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); }
.OASdgw-cs-hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.OASdgw-cs-hero-glow--1 { width: 520px; height: 520px; top: -160px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(84,184,127,0.3), transparent 70%); }
.OASdgw-cs-hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 32px; }
.OASdgw-cs-hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.OASdgw-cs-tag { font: 700 11.5px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: #eafff9; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28); padding: 8px 13px; border-radius: 100px; }
.OASdgw-cs-tag--case { background: #fff; color: var(--ct-teal-d); border-color: #fff; }
.OASdgw-cs-hero-logocard { display: inline-flex; background: #fff; padding: 18px 26px; border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.45); margin-bottom: 30px; }
.OASdgw-cs-hero-logocard img { height: 56px; width: auto; display: block; }
.OASdgw-cs-hero-title { font: 800 clamp(34px, 5.4vw, 60px)/1.05 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.03em; }
.OASdgw-cs-hl { position: relative; color: #fff; background: linear-gradient(100deg, #eafff9, var(--ct-mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.OASdgw-cs-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 7px; background: rgba(199,245,236,0.45); border-radius: 4px; z-index: -1; }
.OASdgw-cs-hero-lead { font: 400 18px/1.7 'Inter'; color: rgba(234,255,249,0.9); margin: 22px auto 0; max-width: 600px; }
.OASdgw-cs-hero-lead strong { color: #fff; font-weight: 700; }
.OASdgw-cs-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 38px auto 0; max-width: 720px; }
.OASdgw-cs-hstat { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 18px 12px; backdrop-filter: blur(6px); }
.OASdgw-cs-hstat-n { font: 800 24px/1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-cs-hstat-n--live { display: inline-flex; align-items: center; gap: 7px; }
.OASdgw-cs-hstat-l { font: 600 11.5px/1.3 'Inter'; color: rgba(234,255,249,0.72); margin-top: 8px; letter-spacing: 0.02em; }
.OASdgw-cs-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* ============================================================
   2 · ABOUT THE CLIENT (light)
   ============================================================ */
.OASdgw-cs-about { background: var(--surf-white); padding: 96px 0; }
.OASdgw-cs-about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.OASdgw-cs-tagline { display: flex; align-items: center; gap: 12px; margin: 24px 0; padding: 16px 20px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(22,169,230,0.08), transparent); border-left: 3px solid var(--ct-teal);
  font: 600 17px/1.4 'Plus Jakarta Sans'; color: var(--ct-teal-d); }
.OASdgw-cs-tagline svg { color: var(--ct-teal); flex-shrink: 0; }
.OASdgw-cs-about-copy em { font-style: normal; color: var(--ct-teal-d); font-weight: 600; }
.OASdgw-cs-about-facts { background: var(--surf-light); border: 1px solid #e7edf5; border-radius: 20px; padding: 14px 22px; }
.OASdgw-cs-fact { display: flex; align-items: center; gap: 15px; padding: 16px 0; border-bottom: 1px solid #e7edf5; }
.OASdgw-cs-fact:last-of-type { border-bottom: none; }
.OASdgw-cs-fact-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(22,169,230,0.1); color: var(--ct-teal-d); }
.OASdgw-cs-fact-ico svg { width: 21px; height: 21px; }
.OASdgw-cs-fact-l { font: 700 10.5px/1 'Inter'; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.OASdgw-cs-fact-v { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-fact-v span { font: 500 13px 'Inter'; color: var(--muted); }
.OASdgw-cs-about-brands { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 10px; }
.OASdgw-cs-about-brands span { font: 600 12px/1 'Inter'; color: var(--ct-teal-d); background: rgba(22,169,230,0.08); border: 1px solid rgba(22,169,230,0.18); padding: 7px 12px; border-radius: 7px; }

/* ============================================================
   3 · CHALLENGE (light tinted)
   ============================================================ */
.OASdgw-cs-challenge { background: var(--surf-light); padding: 100px 0; }
.OASdgw-cs-broken { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 6px; padding: 26px; margin-bottom: 44px;
  background: #fff; border: 1px solid #e7edf5; border-radius: 18px; box-shadow: 0 2px 4px rgba(10,17,69,0.03); }
.OASdgw-cs-broken-step { display: inline-flex; align-items: center; gap: 9px; font: 600 13.5px/1 'Inter'; color: #334155; background: var(--surf-light); border: 1px solid #e2e8f0; padding: 11px 14px; border-radius: 10px; }
.OASdgw-cs-broken-ico { color: var(--cl-muted); display: inline-flex; }
.OASdgw-cs-broken-ico svg { width: 18px; height: 18px; }
.OASdgw-cs-broken-arr { color: #cbd5e1; font-size: 17px; font-weight: 700; }
.OASdgw-cs-broken-arr--late { color: var(--cl-danger); }
.OASdgw-cs-broken-gap { font: 700 11px/1 'Inter'; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cl-danger); background: rgba(239,68,68,0.08); border: 1px dashed rgba(239,68,68,0.4); padding: 9px 12px; border-radius: 100px; }
.OASdgw-cs-broken-step--late { color: var(--cl-danger); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
.OASdgw-cs-broken-step--late .OASdgw-cs-broken-ico { color: var(--cl-danger); }

.OASdgw-cs-painwall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.OASdgw-cs-pain-card { background: #fff; border: 1px solid #e7edf5; border-radius: 14px; padding: 24px 20px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.OASdgw-cs-pain-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -20px rgba(10,17,69,0.28); border-color: #dbe3ef; }
.OASdgw-cs-pain-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(245,158,11,0.12); color: #d97706; margin-bottom: 14px; }
.OASdgw-cs-pain-ico svg { width: 22px; height: 22px; }
.OASdgw-cs-pain-t { font: 700 16px/1.2 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 7px; }
.OASdgw-cs-pain-d { font: 400 13.5px/1.55 'Inter'; color: var(--muted); }

.OASdgw-cs-pull { margin-top: 40px; max-width: 760px; position: relative; padding: 22px 26px 22px 52px; border-left: 3px solid var(--accent);
  background: linear-gradient(100deg, rgba(255,122,69,0.06), transparent); border-radius: 0 12px 12px 0; font: 500 19px/1.6 'Inter'; color: #334155; }
.OASdgw-cs-pull-mark { position: absolute; top: 20px; left: 16px; font: 800 40px/0 'Plus Jakarta Sans'; color: var(--accent-soft); opacity: 0.55; }
.OASdgw-cs-pull strong { color: var(--ink); font-weight: 700; }
.OASdgw-cs-pull cite { display: block; margin-top: 12px; font: 600 13.5px/1 'Inter'; font-style: normal; color: var(--muted); }

/* ============================================================
   4 · SOLUTION (dark)
   ============================================================ */
.OASdgw-cs-solution { padding: 100px 0; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 80% 0%, rgba(22,169,230,0.16) 0%, transparent 55%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
.OASdgw-cs-sol-head { max-width: 760px; }
.OASdgw-cs-systems { display: grid; grid-template-columns: 1fr 1.3fr 1.05fr 1.3fr 1fr; gap: 10px; align-items: stretch; margin-top: 54px; }
.OASdgw-cs-sys { background: rgba(255,255,255,0.04); border: 1px solid rgba(124,143,255,0.2); border-radius: 16px; padding: 24px 22px; backdrop-filter: blur(6px); }
.OASdgw-cs-sys--core { background: linear-gradient(160deg, rgba(22,169,230,0.2), rgba(92,200,242,0.12)); border-color: rgba(92,200,242,0.5); box-shadow: 0 0 40px -10px rgba(22,169,230,0.4); animation: dgwCoreGlow 2.8s ease-in-out infinite; }
@keyframes dgwCoreGlow { 0%,100% { box-shadow: 0 0 40px -14px rgba(22,169,230,0.55); } 50% { box-shadow: 0 0 56px -6px rgba(22,169,230,0.9); } }
.OASdgw-cs-sys-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); color: var(--brand-light); margin-bottom: 14px; }
.OASdgw-cs-sys-ico svg { width: 22px; height: 22px; }
.OASdgw-cs-sys-ico--core { background: linear-gradient(135deg, var(--ct-teal), var(--ct-green)); color: #fff; font: 800 18px/1 'Plus Jakarta Sans'; }
.OASdgw-cs-sys-tag { font: 700 10px/1 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(124,143,255,0.8); margin-bottom: 9px; }
.OASdgw-cs-sys--core .OASdgw-cs-sys-tag { color: var(--ct-mint); }
.OASdgw-cs-sys-name { font: 800 21px/1.1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-cs-sys-note { font: 500 13px/1.4 'Inter'; color: rgba(205,213,255,0.62); margin-top: 7px; }
/* --- animated flow lanes --- */
.OASdgw-cs-flowlane { position: relative; display: flex; align-items: center; min-width: 110px; }
.OASdgw-cs-flowtrack { width: 100%; height: 3px; border-radius: 3px;
  background-image: linear-gradient(90deg, rgba(124,143,255,0.55) 0 52%, transparent 52% 100%);
  background-size: 15px 3px; background-repeat: repeat-x; animation: dgwDash 0.7s linear infinite; }
@keyframes dgwDash { to { background-position: 15px 0; } }

.OASdgw-cs-flowdot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--cl-sky); box-shadow: 0 0 11px 1px var(--cl-sky); opacity: 0; animation: dgwDotGo 2.6s linear infinite; animation-delay: var(--d, 0s); }
@keyframes dgwDotGo { 0% { left: -3%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: 103%; opacity: 0; } }
.OASdgw-cs-flowdot--ok { background: var(--cl-ok); box-shadow: 0 0 11px 1px var(--cl-ok); }
.OASdgw-cs-flowdot--back { margin-top: 3px; background: var(--ct-mint); box-shadow: 0 0 11px 1px rgba(199,245,236,0.8); animation-name: dgwDotBack; animation-duration: 3.1s; }
@keyframes dgwDotBack { 0% { left: 103%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: -3%; opacity: 0; } }

.OASdgw-cs-flowtruck { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: var(--accent-soft); animation: dgwTruck 3.6s linear infinite; }
.OASdgw-cs-flowtruck svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 4px 8px rgba(255,122,69,0.45)); animation: dgwTruckBob 0.5s ease-in-out infinite alternate; }
@keyframes dgwTruck { 0% { left: -14%; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes dgwTruckBob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }

.OASdgw-cs-flowchevrons { position: absolute; right: -1px; top: 50%; transform: translateY(-50%); display: flex; }
.OASdgw-cs-flowchevrons i { width: 6px; height: 6px; margin-left: -3px; border-top: 2px solid var(--brand-light); border-right: 2px solid var(--brand-light); transform: rotate(45deg); opacity: 0.25; animation: dgwChev 1.4s ease-in-out infinite; }
.OASdgw-cs-flowchevrons i:nth-child(2) { animation-delay: 0.16s; }
.OASdgw-cs-flowchevrons i:nth-child(3) { animation-delay: 0.32s; }
.OASdgw-cs-flowchevrons--ok i { border-color: var(--cl-ok); }
@keyframes dgwChev { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

.OASdgw-cs-flowlabel { position: absolute; left: 50%; transform: translateX(-50%); top: calc(50% - 30px); font: 600 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(205,213,255,0.6); white-space: nowrap; }
.OASdgw-cs-flowlabel--back { top: auto; bottom: calc(50% - 30px); color: var(--ct-mint); opacity: 0.85; }

/* ============================================================
   5 · ANIMATED WALKTHROUGH (centerpiece)
   ============================================================ */
.OASdgw-cs-walk { padding: 100px 0; background: var(--surf-light); }
.OASdgw-cs-walk-stage { display: grid; grid-template-columns: 350px 1fr; gap: 30px; align-items: start; }

/* step rail */
.OASdgw-cs-walk-rail { position: relative; padding-left: 4px; }
.OASdgw-cs-walk-rail::before { content: ""; position: absolute; left: 26px; top: 22px; bottom: 22px; width: 2px; background: #dbe3ef; border-radius: 2px; }
.OASdgw-cs-walk-railfill { position: absolute; left: 26px; top: 22px; bottom: 22px; width: 2px; }
.OASdgw-cs-walk-railfill span { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--cl-sky), var(--cl-indigo)); border-radius: 2px; transition: height 0.5s ease; }
.OASdgw-cs-wstep { position: relative; z-index: 2; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; font-family: inherit; }
.OASdgw-cs-wstep:hover { background: rgba(255,255,255,0.6); }
.OASdgw-cs-wstep.OASis-active { background: #fff; border-color: #e2e8f0; box-shadow: 0 12px 28px -16px rgba(10,17,69,0.3); }
.OASdgw-cs-wstep-no { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 15px/1 'Plus Jakarta Sans'; color: var(--cl-muted); background: #fff; border: 1px solid #e2e8f0; transition: all 0.25s; }
.OASdgw-cs-wstep.OASis-active .OASdgw-cs-wstep-no { background: linear-gradient(140deg, var(--cl-sky), var(--cl-indigo)); color: #fff; border-color: transparent; }
.OASdgw-cs-wstep-tx { display: flex; flex-direction: column; gap: 3px; }
.OASdgw-cs-wstep-tx strong { font: 700 14.5px/1.25 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-wstep-tx span { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); }

/* screen */
.OASdgw-cs-walk-screen { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 30px 70px -36px rgba(10,17,69,0.4); overflow: hidden; min-height: 430px; }
.OASdgw-cs-walk-screenbar { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid #eef2f7; background: #f8fafc; }
.OASdgw-cs-wdot { width: 10px; height: 10px; border-radius: 50%; background: #d7deea; }
.OASdgw-cs-wdot:nth-child(1) { background: #f1a7a0; } .OASdgw-cs-wdot:nth-child(2) { background: #f3cf8a; } .OASdgw-cs-wdot:nth-child(3) { background: #a9dcae; }
.OASdgw-cs-walk-screenlabel { margin-left: 8px; font: 600 12px/1 'Inter'; color: var(--cl-muted); }

.OASdgw-cs-scene { position: absolute; inset: 0; top: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.OASdgw-cs-scene.OASis-active { opacity: 1; visibility: visible; transform: none; position: relative; }
.OASdgw-cs-scene-cap { font: 700 10.5px/1 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cl-muted); }

/* Scene 1 — Unleashed order + DELIVERY stamp */
.OASdgw-cs-ucard { width: 320px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; padding: 16px 18px; box-shadow: 0 8px 24px -14px rgba(10,17,69,0.3); }
.OASdgw-cs-ucard-head { display: flex; justify-content: space-between; align-items: center; font: 700 14px/1 'JetBrains Mono', monospace; color: var(--cl-navy); }
.OASdgw-cs-ustatus { font: 700 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); background: #eef2f7; padding: 5px 9px; border-radius: 100px; }
.OASdgw-cs-ucard-cust { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--cl-text); margin: 10px 0 12px; }
.OASdgw-cs-uline { display: flex; justify-content: space-between; font: 500 12.5px/1.4 'Inter'; color: #475569; padding: 6px 0; border-top: 1px dashed #eef2f7; }
.OASdgw-cs-uline span:last-child { color: var(--cl-muted); font-family: 'JetBrains Mono', monospace; }
.OASdgw-cs-ucard-foot { font: 500 11.5px/1.3 'Inter'; color: var(--cl-muted); margin-top: 12px; }
.OASdgw-cs-stamp { font: 800 22px/1 'Plus Jakarta Sans'; letter-spacing: 0.1em; color: var(--cl-ok); border: 3px solid var(--cl-ok); border-radius: 10px; padding: 8px 16px; transform: rotate(-9deg) scale(0); opacity: 0; }
.OASdgw-cs-scene.OASis-active[data-scene="0"] .OASdgw-cs-stamp { animation: dgwStampIn 0.6s 0.5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes dgwStampIn { 0% { transform: rotate(-9deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } }

/* shared flow nodes (scenes 2 + 6) */
.OASdgw-cs-wflow { display: flex; align-items: center; gap: 10px; }
.OASdgw-cs-wnode { font: 700 12.5px/1 'Inter'; color: #fff; padding: 11px 16px; border-radius: 10px; white-space: nowrap; }
.OASdgw-cs-wnode--ext { background: #64748b; }
.OASdgw-cs-wnode--core { background: linear-gradient(135deg, var(--ct-teal), var(--ct-green)); }
.OASdgw-cs-wnode--down { background: var(--cl-ok); }
.OASdgw-cs-wpipe { position: relative; width: 70px; height: 2px; background: #dbe3ef; border-radius: 2px; }
.OASdgw-cs-wpacket { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--cl-sky); transform: translate(-50%,-50%); box-shadow: 0 0 10px var(--cl-sky); opacity: 0; }
.OASdgw-cs-wpacket--ok { background: var(--cl-ok); box-shadow: 0 0 10px var(--cl-ok); }
.OASdgw-cs-scene.OASis-active[data-scene="1"] .OASdgw-cs-wpacket { animation: dgwPacket 1.3s 0.3s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-wpacket { animation: dgwPacket 1.1s 0.3s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-wpacket--d2 { animation-delay: 0.9s; }
@keyframes dgwPacket { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.OASdgw-cs-jobcard { width: 300px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; padding: 15px 17px; box-shadow: 0 8px 24px -14px rgba(10,17,69,0.3); transform: scale(0.85); opacity: 0; }
.OASdgw-cs-scene.OASis-active[data-scene="1"] .OASdgw-cs-jobcard { animation: dgwPop 0.6s 0.9s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes dgwPop { to { transform: scale(1); opacity: 1; } }
.OASdgw-cs-jobcard-head { display: flex; align-items: center; gap: 8px; font: 700 12px/1 'JetBrains Mono', monospace; color: var(--cl-muted); }
.OASdgw-cs-jobcard-name { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--cl-navy); margin: 8px 0 4px; }
.OASdgw-cs-jobcard-meta { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); }
.OASdgw-cs-zeropill { font: 700 12.5px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); padding: 9px 15px; border-radius: 100px; opacity: 0; }
.OASdgw-cs-scene.OASis-active[data-scene="1"] .OASdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.5s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="2"] .OASdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.6s ease forwards; }
@keyframes dgwFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Scene 3 — mini board with flying card */
.OASdgw-cs-miniboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 380px; max-width: 100%; }
.OASdgw-cs-mb-col { background: var(--cl-bg); border-radius: 10px; padding: 10px; min-height: 130px; }
.OASdgw-cs-mb-col--rail { background: #eef2f7; }
.OASdgw-cs-mb-tag { display: flex; align-items: center; gap: 6px; font: 700 11px/1 'Inter'; color: var(--cl-navy); margin-bottom: 10px; }
.OASdgw-cs-mb-card { background: #fff; border: 1px solid var(--cl-border); border-radius: 9px; padding: 9px 10px; box-shadow: 0 2px 6px rgba(14,165,233,0.16); }
.OASdgw-cs-mb-so { font: 700 10px/1 'JetBrains Mono', monospace; color: var(--cl-muted); }
.OASdgw-cs-mb-cn { font: 700 12px/1.2 'Inter'; color: var(--cl-navy); margin-top: 4px; }
.OASdgw-cs-mb-card--fly { position: relative; }
.OASdgw-cs-scene.OASis-active[data-scene="2"] .OASdgw-cs-mb-card--fly { animation: dgwFly 2.4s 0.5s ease-in-out infinite; }
@keyframes dgwFly { 0%,12% { transform: translate(0,0) rotate(0); } 45%,62% { transform: translate(135px, 38px) rotate(-4deg); } 90%,100% { transform: translate(135px, 38px) rotate(0); } }
.OASdgw-cs-mb-drop { border: 1.5px dashed #c3d0e2; border-radius: 8px; color: #94a3b8; font: 600 10.5px/1 'Inter'; text-align: center; padding: 22px 6px; }

/* Scene 4 + 5 — phone */
.OASdgw-cs-phone { width: 240px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 22px; padding: 12px; box-shadow: 0 20px 44px -22px rgba(10,17,69,0.4); }
.OASdgw-cs-phone-bar { font: 700 12px/1 'Plus Jakarta Sans'; color: var(--cl-navy); text-align: center; padding: 8px 0 12px; }
.OASdgw-cs-map { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e7eef5, #dde7f1); }
.OASdgw-cs-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.25) 1px, transparent 1px); background-size: 26px 26px; }
.OASdgw-cs-map-route { position: absolute; left: 18%; top: 80%; width: 60%; height: 50%; border-top: 3px solid var(--cl-sky); border-right: 3px solid var(--cl-sky); border-top-right-radius: 40px; opacity: 0.85; }
.OASdgw-cs-map-pin { position: absolute; right: 20%; top: 26%; color: var(--cl-danger); }
.OASdgw-cs-map-pin svg { width: 26px; height: 26px; }
.OASdgw-cs-ping { position: absolute; left: 50%; top: 60%; width: 14px; height: 14px; border-radius: 50%; background: rgba(239,68,68,0.4); transform: translate(-50%,-50%); }
.OASdgw-cs-scene.OASis-active[data-scene="3"] .OASdgw-cs-ping { animation: dgwPing 1.6s ease-out infinite; }
@keyframes dgwPing { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 18px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.OASdgw-cs-phone-addr { font: 600 13px/1 'Inter'; color: var(--cl-text); text-align: center; margin: 12px 0 10px; }
.OASdgw-cs-phone-btn { font: 600 12.5px/1 'Inter'; color: #fff; background: linear-gradient(135deg, var(--cl-sky), var(--cl-indigo)); text-align: center; padding: 12px; border-radius: 11px; }
.OASdgw-cs-pod-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 11px; }
.OASdgw-cs-pod-photo, .OASdgw-cs-pod-gps { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 11px; background: var(--cl-bg); font: 600 10.5px/1 'Inter'; color: var(--cl-muted); }
.OASdgw-cs-pod-photo svg, .OASdgw-cs-pod-gps svg { width: 22px; height: 22px; color: var(--cl-indigo); }
.OASdgw-cs-pod-gps svg { color: var(--cl-ok); }
.OASdgw-cs-pod-signlabel { font: 600 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: 5px; }
.OASdgw-cs-pod-sign { height: 60px; border: 1px solid var(--cl-border); border-radius: 11px; background: #f8fafc; overflow: hidden; }
.OASdgw-cs-pod-sign svg { width: 100%; height: 100%; }
.OASdgw-cs-signpath { stroke-dasharray: 520; stroke-dashoffset: 520; }
.OASdgw-cs-scene.OASis-active[data-scene="4"] .OASdgw-cs-signpath { animation: dgwSign 1.6s 0.4s ease forwards; }
@keyframes dgwSign { to { stroke-dashoffset: 0; } }
.OASdgw-cs-pod-qty { display: flex; align-items: center; gap: 8px; font: 700 12px/1 'Inter'; color: var(--cl-ok); margin-top: 11px; opacity: 0; }
.OASdgw-cs-scene.OASis-active[data-scene="4"] .OASdgw-cs-pod-qty { animation: dgwFadeUp 0.5s 2s ease forwards; }

/* Scene 6 — invoice */
.OASdgw-cs-invoice { width: 280px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px -16px rgba(10,17,69,0.35); transform: translateY(14px) rotateX(12deg); opacity: 0; transform-origin: top center; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-invoice { animation: dgwInvoice 0.7s 1.8s cubic-bezier(.2,1.2,.4,1) forwards; }
@keyframes dgwInvoice { to { transform: none; opacity: 1; } }
.OASdgw-cs-invoice-top { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; background: var(--cl-navy); color: #fff; font: 800 12px/1 'Plus Jakarta Sans'; letter-spacing: 0.1em; }
.OASdgw-cs-invoice-no { font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: 0; color: var(--cl-sky); }
.OASdgw-cs-invoice-.oasPage { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
.OASdgw-cs-invoice-line { font: 700 14px/1.3 'Plus Jakarta Sans'; color: var(--cl-text); }
.OASdgw-cs-invoice-line--muted { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); margin-top: 4px; }
.OASdgw-cs-invoice-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef2f7; font: 700 12px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.06); }

/* ============================================================
   6 · FEATURES (dark)
   ============================================================ */
.OASdgw-cs-features { padding: 100px 0; background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%); }
.OASdgw-cs-features .OASdgw-cs-how-head { max-width: 760px; }
.OASdgw-cs-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.OASdgw-cs-feat-col { background: rgba(255,255,255,0.035); border: 1px solid rgba(124,143,255,0.16); border-radius: 18px; padding: 26px 24px; transition: border-color 0.3s ease, transform 0.3s ease; }
.OASdgw-cs-feat-col:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-4px); }
.OASdgw-cs-feat-head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(124,143,255,0.14); }
.OASdgw-cs-feat-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.OASdgw-cs-feat-ico svg { width: 23px; height: 23px; }
.OASdgw-cs-feat-head--office .OASdgw-cs-feat-ico { background: rgba(14,165,233,0.16); color: #7dd3fc; }
.OASdgw-cs-feat-head--driver .OASdgw-cs-feat-ico { background: rgba(99,102,241,0.16); color: #a5b4fc; }
.OASdgw-cs-feat-head--integ .OASdgw-cs-feat-ico { background: rgba(16,185,129,0.16); color: #6ee7b7; }
.OASdgw-cs-feat-col-t { font: 700 17px/1.1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-cs-feat-col-s { font: 500 12px/1 'Inter'; color: rgba(205,213,255,0.5); margin-top: 4px; }
.OASdgw-cs-feat-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.OASdgw-cs-feat-list li { position: relative; padding-left: 24px; font: 400 14px/1.5 'Inter'; color: rgba(205,213,255,0.82); }
.OASdgw-cs-feat-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* ============================================================
   7 · ARCHITECTURE + DEPTH (light)
   ============================================================ */
.OASdgw-cs-arch { padding: 100px 0; background: var(--surf-white); }
.OASdgw-cs-arch .OASdgw-cs-how-head { max-width: 720px; }
.OASdgw-cs-archmap { max-width: 760px; margin: 0 auto 56px; }
.OASdgw-cs-archrow { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 20px 24px; border-radius: 16px; border: 1px solid #e7edf5; background: var(--surf-light); }
.OASdgw-cs-archrow--driver { border-left: 4px solid var(--cl-indigo); }
.OASdgw-cs-archrow--core { border-left: 4px solid var(--ct-teal); }
.OASdgw-cs-archrow--integ { border-left: 4px solid var(--cl-warn); }
.OASdgw-cs-archrow--ext { border-left: 4px solid #64748b; }
.OASdgw-cs-archrow-label { font: 800 15px/1.2 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-archrow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.OASdgw-cs-archrow-chips span { font: 600 12.5px/1 'Inter'; color: #334155; background: #fff; border: 1px solid #e2e8f0; padding: 8px 12px; border-radius: 8px; }
.OASdgw-cs-archconn { display: flex; justify-content: center; height: 22px; }
.OASdgw-cs-archconn span { width: 2px; height: 100%; background: linear-gradient(180deg, #cbd5e1, #94a3b8); position: relative; }
.OASdgw-cs-archconn span::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 7px; height: 7px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: translateX(-50%) rotate(45deg); }

.OASdgw-cs-tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.OASdgw-cs-tech-card { position: relative; background: var(--surf-light); border: 1px solid #e8edf5; border-radius: 16px; padding: 24px 24px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.OASdgw-cs-tech-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(10,17,69,0.3); border-color: #d3ddec; }
.OASdgw-cs-tech-no { font: 800 13px/1 'JetBrains Mono', monospace; color: var(--brand); letter-spacing: 0.05em; margin-bottom: 12px; }
.OASdgw-cs-tech-t { font: 700 16.5px/1.3 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-tech-d { font: 400 13.5px/1.6 'Inter'; color: var(--muted); margin-top: 9px; }

/* ============================================================
   8 · RESULTS (dark + glow)
   ============================================================ */
.OASdgw-cs-results { position: relative; overflow: hidden; padding: 100px 0; background: linear-gradient(180deg, var(--navy) 0%, #060b2e 100%); }
.OASdgw-cs-results-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -200px; right: -120px; background: radial-gradient(circle, rgba(16,185,129,0.12), transparent 70%); filter: blur(50px); pointer-events: none; }
.OASdgw-cs-results .OASdgw-cs-sec-inner { position: relative; z-index: 2; }
.OASdgw-cs-res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.OASdgw-cs-res-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(124,143,255,0.18); border-radius: 16px; padding: 24px 22px; transition: transform 0.3s ease, border-color 0.3s ease; }
.OASdgw-cs-res-card:hover { transform: translateY(-4px); border-color: rgba(16,185,129,0.4); }
.OASdgw-cs-res-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(16,185,129,0.14); color: #6ee7b7; margin-bottom: 15px; }
.OASdgw-cs-res-ico svg { width: 22px; height: 22px; }
.OASdgw-cs-res-t { font: 700 16px/1.25 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-cs-res-d { font: 400 13.5px/1.55 'Inter'; color: rgba(205,213,255,0.68); margin-top: 9px; }

.OASdgw-cs-quote { margin-top: 36px; position: relative; text-align: center; background: linear-gradient(160deg, rgba(22,169,230,0.16), rgba(84,184,127,0.08)); border: 1px solid rgba(84,184,127,0.3); border-radius: 22px; padding: 44px 32px 32px; }
.OASdgw-cs-quote-mark { font: 800 70px/0.5 'Plus Jakarta Sans'; color: var(--ct-mint); opacity: 0.55; height: 30px; }
.OASdgw-cs-quote-text { font: 800 clamp(30px, 4vw, 46px)/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; margin: 10px 0 22px; }
.OASdgw-cs-quote-cite { display: inline-flex; align-items: center; gap: 13px; text-align: left; }
.OASdgw-cs-quote-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--ct-teal), var(--ct-green)); color: #fff; font: 800 15px/1 'Plus Jakarta Sans'; display: flex; align-items: center; justify-content: center; }
.OASdgw-cs-quote-meta { display: flex; flex-direction: column; gap: 4px; }
.OASdgw-cs-quote-meta strong { font: 700 15px/1 'Inter'; color: #fff; }
.OASdgw-cs-quote-meta span { font: 500 12.5px/1.4 'Inter'; color: rgba(205,213,255,0.62); }
.OASdgw-cs-quote-note { margin-top: 22px; display: inline-block; font: 600 12px/1 'Inter'; letter-spacing: 0.04em; color: var(--ct-mint); background: rgba(22,169,230,0.16); border: 1px solid rgba(84,184,127,0.35); padding: 9px 16px; border-radius: 100px; }

/* ============================================================
   9 · WHAT'S NEXT (light)
   ============================================================ */
.OASdgw-cs-next { padding: 100px 0; background: var(--surf-light); }
.OASdgw-cs-next .OASdgw-cs-how-head { max-width: 680px; }
.OASdgw-cs-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.OASdgw-cs-next-card { background: #fff; border: 1px solid #e8edf5; border-radius: 16px; padding: 24px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.OASdgw-cs-next-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(10,17,69,0.25); }
.OASdgw-cs-next-tag { display: inline-block; font: 700 10px/1 'Inter'; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ct-teal-d); background: rgba(22,169,230,0.08); border: 1px solid rgba(22,169,230,0.18); padding: 6px 11px; border-radius: 100px; margin-bottom: 15px; }
.OASdgw-cs-next-t { font: 700 17px/1.25 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-next-d { font: 400 13.5px/1.6 'Inter'; color: var(--muted); margin-top: 9px; }

/* ============================================================
   10 · CTA (dark finale)
   ============================================================ */
.OASdgw-cs-cta { position: relative; overflow: hidden; padding: 110px 0; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); text-align: center; }
.OASdgw-cs-cta-glow { position: absolute; width: 760px; height: 760px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(22,169,230,0.16), transparent 65%); filter: blur(60px); pointer-events: none; }
.OASdgw-cs-cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 32px; }
.OASdgw-cs-cta-title { font: 800 clamp(30px, 4.5vw, 48px)/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.OASdgw-cs-cta-p { font: 400 18px/1.7 'Inter'; color: rgba(205,213,255,0.78); margin: 22px auto 34px; max-width: 580px; }
.OASdgw-cs-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER (inherited)
   ============================================================ */
.OASdgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.OASdgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.OASdgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.OASdgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.OASdgw-footer-brand { max-width: 360px; }
.OASdgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.OASdgw-footer-logo { height: 40px; width: auto; display: block; }
.OASdgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.OASdgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.OASdgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.OASdgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.OASdgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.OASdgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.OASdgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.OASdgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.OASdgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.OASdgw-footer-col { min-width: 0; }
.OASdgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.OASdgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.OASdgw-footer-list a, .OASdgw-footer-list li, .OASdgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.OASdgw-footer-list a:hover { color: #ffb284; }
.OASdgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.OASdgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.OASdgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.OASdgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.OASdgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.OASdgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.OASdgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.OASdgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.OASdgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.OASdgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.OASdgw-footer-legal a:hover { color: #fff; }
.OASdgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.OASdgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .OASdgw-nav-links { display: none; }
  .OASdgw-cs-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .OASdgw-cs-systems { grid-template-columns: 1fr; gap: 4px; }
  .OASdgw-cs-flowlane { width: 170px; height: 52px; margin: 14px auto; transform: rotate(90deg); }
  .OASdgw-cs-flowlabel { display: none; }
  .OASdgw-cs-flowtruck { display: none; }
  .OASdgw-cs-walk-stage { grid-template-columns: 1fr; gap: 22px; }
  .OASdgw-cs-walk-screen { min-height: 400px; }
  .OASdgw-cs-feat-grid, .OASdgw-cs-next-grid { grid-template-columns: 1fr; }
  .OASdgw-cs-tech-grid { grid-template-columns: 1fr; }
  .OASdgw-cs-res-grid { grid-template-columns: 1fr 1fr; }
  .OASdgw-cs-painwall { grid-template-columns: 1fr 1fr; }
  .OASdgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .OASdgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 640px) {
  .OASdgw-cs-hero { padding: 130px 0 76px; }
  .OASdgw-cs-hero-stats { grid-template-columns: 1fr 1fr; }
  .OASdgw-cs-sec-inner, .OASdgw-cs-hero-inner { padding-left: 22px; padding-right: 22px; }
  .OASdgw-cs-painwall { grid-template-columns: 1fr; }
  .OASdgw-cs-res-grid { grid-template-columns: 1fr; }
  .OASdgw-cs-broken { gap: 8px; }
  .OASdgw-cs-broken-step { font-size: 12px; padding: 9px 11px; }
  .OASdgw-cs-archrow { grid-template-columns: 1fr; gap: 12px; }
  .OASdgw-cs-about, .OASdgw-cs-challenge, .OASdgw-cs-solution, .OASdgw-cs-walk, .OASdgw-cs-features, .OASdgw-cs-arch, .OASdgw-cs-results, .OASdgw-cs-next, .OASdgw-cs-cta { padding: 72px 0; }
  .OASdgw-footer { padding: 72px 22px 28px; }
  .OASdgw-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .OASdgw-footer-bottom { flex-direction: column; text-align: center; gap: 18px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .OASreveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .OASdgw-cs-live-dot { animation: none !important; }
  .OASdgw-cs-sys--core, .OASdgw-cs-flowtrack, .OASdgw-cs-flowtruck, .OASdgw-cs-flowtruck svg, .OASdgw-cs-flowchevrons i { animation: none !important; }
  .OASdgw-cs-flowdot { animation: none !important; opacity: 0.9 !important; left: 44% !important; }
  .OASdgw-cs-flowdot--back { left: 56% !important; }
  .OASdgw-cs-flowtruck { left: 40% !important; opacity: 1 !important; }
  .OASdgw-cs-scene * { animation: none !important; }
  .OASdgw-cs-stamp, .OASdgw-cs-jobcard, .OASdgw-cs-zeropill, .OASdgw-cs-invoice, .OASdgw-cs-pod-qty { opacity: 1 !important; transform: none !important; }
  .OASdgw-cs-signpath { stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   OAS — OVERRIDES & ADDITIONS
   ============================================================ */

/* Hero: cyan solar band overrides */
.OASdgw-cs-hero--solar .OASdgw-cs-hero-mesh { background:
  radial-gradient(ellipse at 20% 10%, rgba(92,200,242,0.45) 0, transparent 45%),
  radial-gradient(ellipse at 85% 20%, rgba(207,239,251,0.2) 0, transparent 42%),
  radial-gradient(ellipse at 70% 90%, rgba(7,60,95,0.55) 0, transparent 55%); }
.OASdgw-cs-hero--solar .OASdgw-cs-hero-glow--1 { background: radial-gradient(circle, rgba(207,239,251,0.32), transparent 70%); }
.OASdgw-cs-hero--solar .OASdgw-cs-hl { background: linear-gradient(100deg, #eaf8ff, var(--ct-mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.OASdgw-cs-hero--solar .OASdgw-cs-hl::after { background: rgba(207,239,251,0.5); }
.OASdgw-cs-hero--solar .OASdgw-cs-tag { color: #eaf8ff; }
.OASdgw-cs-hero--solar .OASdgw-cs-tag--case { color: var(--ct-teal-d); }
.OASdgw-cs-hero--solar .OASdgw-cs-hero-lead { color: rgba(235,248,255,0.92); }
.OASdgw-cs-hero--solar .OASdgw-cs-hero-lead strong { color: #fff; }
.OASdgw-cs-hero--solar .OASdgw-cs-hstat-l { color: rgba(235,248,255,0.78); }

/* Solution: two engines, one platform */
.OASdgw-cs-oas-flowwrap { margin-top: 48px; }
.OASdgw-cs-oas-systems { grid-template-columns: 1fr auto 1fr; max-width: 860px; margin: 0 auto; }
.OASdgw-cs-oas-flowtop { text-align: center; font: 600 12px/1 'Inter'; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(205,213,255,0.55); margin-bottom: 14px; }
.OASdgw-cs-oas-flowbot { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; font: 600 13px/1 'Inter'; color: rgba(205,213,255,0.72); }

/* Walkthrough legend */
.OASdgw-cs-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 22px; }
.OASdgw-cs-legend-item { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 'Inter'; color: #5b6b78; }
.OASdgw-cs-legend-dot { width: 11px; height: 11px; border-radius: 50%; }
.OASdgw-oas-lg--crm { background: var(--cl-sky); }
.OASdgw-oas-lg--integ { background: var(--oas-violet); }
.OASdgw-oas-lg--field { background: var(--cl-indigo); }
.OASdgw-oas-lg--comms { background: var(--cl-ok); }
.OASdgw-oas-dot--crm { background: var(--cl-sky); }

/* Scene activation (OAS order) */
.OASdgw-cs-scene.OASis-active[data-scene="0"] .OASdgw-cs-jobcard { animation: dgwPop 0.55s 0.25s cubic-bezier(.2,1.3,.4,1) forwards; }
.OASdgw-cs-scene[data-scene="0"] .OASdgw-oas-stamp { color: var(--cl-sky); border-color: var(--cl-sky); }
.OASdgw-cs-scene.OASis-active[data-scene="2"] .OASdgw-cs-wpacket { animation: dgwPacket 1.3s 0.3s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="3"] .OASdgw-cs-jobcard { animation: dgwPop 0.55s 0.3s cubic-bezier(.2,1.3,.4,1) forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="3"] .OASdgw-cs-stamp { animation: dgwStampIn 0.6s 0.7s cubic-bezier(.2,1.4,.4,1) forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="3"] .OASdgw-oas-email { animation: dgwFadeUp 0.5s 1.3s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="4"] .OASdgw-cs-wpacket { animation: dgwPacket 1.2s 0.3s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="4"] .OASdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.4s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-mb-card--fly { animation: dgwFly 2.4s 0.5s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.6s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="6"] .OASdgw-oas-day { animation: dgwDayOn 0.5s ease forwards; animation-delay: var(--dd, 0s); }
.OASdgw-cs-scene.OASis-active[data-scene="7"] .OASdgw-cs-signpath { animation: dgwSign 1.6s 0.4s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="7"] .OASdgw-cs-pod-qty { animation: dgwFadeUp 0.5s 2s ease forwards; }

/* Scene: lead sources */
.OASdgw-oas-srcs { display: flex; gap: 8px; }
.OASdgw-oas-src { font: 600 11.5px/1 'Inter'; color: var(--cl-muted); background: var(--cl-bg); border: 1px solid var(--cl-border); padding: 9px 13px; border-radius: 9px; }
.OASdgw-oas-src--on { color: #fff; background: linear-gradient(135deg, #1877f2, #4267b2); border-color: transparent; }

/* Scene: convert / auto-create flow nodes */
.OASdgw-oas-wnode--crm { background: linear-gradient(135deg, var(--ct-teal), var(--ct-teal-d)); }
.OASdgw-oas-wnode--xero { background: #13b5ea; }
.OASdgw-oas-wnode--field { background: var(--cl-indigo); }
.OASdgw-oas-packet--violet { background: var(--oas-violet); box-shadow: 0 0 10px var(--oas-violet); }
.OASdgw-oas-fork-out { display: flex; flex-direction: column; gap: 8px; }
.OASdgw-oas-email { font: 700 11.5px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 100px; padding: 8px 14px; opacity: 0; }

/* Scene: multi-day install */
.OASdgw-oas-checkin { display: flex; align-items: center; gap: 7px; font: 600 12px/1 'Inter'; color: var(--cl-ok); margin-bottom: 11px; }
.OASdgw-oas-days { display: flex; gap: 8px; margin-bottom: 10px; }
.OASdgw-oas-day { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center; font: 700 11px/1.1 'Inter'; color: var(--cl-muted); background: var(--cl-bg); border: 1px solid var(--cl-border); border-radius: 9px; padding: 9px 5px; }
.OASdgw-oas-day small { font: 500 8.5px/1 'Inter'; color: var(--cl-muted); }
@keyframes dgwDayOn { to { color: #fff; background: linear-gradient(135deg, var(--cl-sky), var(--cl-indigo)); border-color: transparent; } }
.OASdgw-cs-scene.OASis-active[data-scene="6"] .OASdgw-oas-day small { transition: color 0.4s; }
.OASdgw-cs-scene.OASis-active[data-scene="6"] .OASdgw-oas-day { color: var(--cl-muted); background: var(--cl-bg); }
.OASdgw-oas-day-note { font: 600 11px/1.3 'Inter'; color: var(--cl-text); text-align: center; }

/* By the Numbers — cyan band */
.OASdgw-oas-numbers { padding: 84px 0; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ct-teal) 0%, var(--ct-teal-d) 100%); }
.OASdgw-oas-numbers::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 15% 8%, rgba(255,255,255,0.16), transparent 45%),
              radial-gradient(ellipse at 85% 92%, rgba(7,86,127,0.5), transparent 55%); }
.OASdgw-oas-numbers .OASdgw-cs-sec-inner { position: relative; z-index: 2; }
.OASdgw-oas-numbers-head { text-align: center; margin-bottom: 44px; }
.OASdgw-oas-kicker--on { color: rgba(255,255,255,0.85); }
.OASdgw-oas-numbers-title { font: 800 clamp(26px, 3.6vw, 40px)/1.1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-oas-numgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.OASdgw-oas-num { text-align: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 16px; padding: 26px 12px; backdrop-filter: blur(4px); }
.OASdgw-oas-num-n { font: 800 clamp(28px, 3vw, 38px)/1 'Plus Jakarta Sans'; color: #fff; font-variant-numeric: tabular-nums; }
.OASdgw-oas-num-l { font: 600 12px/1.35 'Inter'; color: rgba(255,255,255,0.85); margin-top: 9px; }

/* Results: 6 cards in 3 columns */
.OASdgw-oas-res-grid { grid-template-columns: repeat(3, 1fr); }

/* OAS responsive */
@media (max-width: 980px) {
  .OASdgw-oas-numgrid { grid-template-columns: repeat(3, 1fr); }
  .OASdgw-oas-res-grid { grid-template-columns: 1fr 1fr; }
  .OASdgw-cs-oas-systems { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .OASdgw-oas-numgrid { grid-template-columns: 1fr 1fr; }
  .OASdgw-oas-res-grid { grid-template-columns: 1fr; }
  .OASdgw-cs-legend { gap: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .OASdgw-oas-day, .OASdgw-oas-email { animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   OAS — THE JOB BOARD (field-engine spotlight)
   ============================================================ */
.OASdgw-oas-board { padding: 100px 0; background: var(--surf-white); }
.OASdgw-oas-board .OASdgw-cs-how-head { margin-bottom: 30px; }

.OASdgw-oas-caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 38px; }
.OASdgw-oas-cap { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 'Inter'; color: var(--ct-teal-d); background: rgba(22,169,230,0.08); border: 1px solid rgba(22,169,230,0.22); padding: 10px 14px; border-radius: 100px; }
.OASdgw-oas-cap svg { width: 15px; height: 15px; }

.OASdgw-oas-board-console { background: linear-gradient(160deg, #0a2438, #061626); border: 1px solid rgba(34,170,230,0.22); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(6,22,42,0.7); }
.OASdgw-oas-board-bar { display: flex; align-items: center; gap: 7px; padding: 14px 20px; border-bottom: 1px solid rgba(34,170,230,0.16); background: rgba(255,255,255,0.02); }
.OASdgw-oas-board-label { margin-left: 8px; font: 600 12px/1 'Inter'; color: rgba(205,229,245,0.8); }
.OASdgw-oas-guard { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 'Inter'; letter-spacing: 0.02em; color: #7dd3fc; background: rgba(34,170,230,0.12); border: 1px solid rgba(34,170,230,0.3); padding: 7px 11px; border-radius: 100px; }
.OASdgw-oas-board-.oasPage { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

/* broadcast job */
.OASdgw-oas-broadcast { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(34,170,230,0.2); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px; }
.OASdgw-oas-bc-id { font: 700 11px/1 'JetBrains Mono', monospace; color: #7dd3fc; }
.OASdgw-oas-bc-nm { font: 700 16px/1.2 'Plus Jakarta Sans'; color: #fff; margin-top: 5px; }
.OASdgw-oas-bc-state { position: relative; min-width: 190px; height: 32px; }
.OASdgw-oas-bc-idle, .OASdgw-oas-bc-res { position: absolute; right: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 700 12px/1 'Inter'; padding: 8px 14px; border-radius: 100px; }
.OASdgw-oas-bc-idle { color: #7dd3fc; background: rgba(34,170,230,0.14); animation: oasBcIdle 5s ease-in-out infinite; }
.OASdgw-oas-bc-res { color: #04231a; background: #34d399; opacity: 0; animation: oasBcRes 5s ease-in-out infinite; }
@keyframes oasBcIdle { 0%,42% { opacity: 1; } 48%,100% { opacity: 0; } }
@keyframes oasBcRes { 0%,44% { opacity: 0; } 50%,92% { opacity: 1; } 100% { opacity: 0; } }

/* crews race */
.OASdgw-oas-crews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.OASdgw-oas-crew { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(34,170,230,0.4); border-radius: 13px; padding: 15px 10px; animation: oasLose 5s ease-in-out infinite; }
.OASdgw-oas-crew--win { animation: oasWin 5s ease-in-out infinite; }
@keyframes oasWin { 0%,42% { border-color: rgba(34,170,230,0.5); box-shadow: none; transform: none; } 50%,92% { border-color: #34d399; box-shadow: 0 0 28px -6px rgba(52,211,153,0.75); transform: translateY(-3px); } 100% { border-color: rgba(34,170,230,0.5); box-shadow: none; transform: none; } }
@keyframes oasLose { 0%,44% { opacity: 1; border-color: rgba(34,170,230,0.4); } 52%,92% { opacity: 0.4; border-color: rgba(148,163,184,0.25); } 100% { opacity: 1; border-color: rgba(34,170,230,0.4); } }
.OASdgw-oas-crew-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 11px/1 'Inter'; }
.OASdgw-oas-crew-nm { font: 700 12px/1 'Inter'; color: #fff; }
.OASdgw-oas-crew-st { position: relative; height: 24px; width: 100%; display: flex; align-items: center; justify-content: center; }
.OASdgw-oas-st-idle, .OASdgw-oas-st-res { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 10px/1 'Inter'; padding: 6px 11px; border-radius: 100px; }
.OASdgw-oas-st-idle { color: #7dd3fc; background: rgba(34,170,230,0.14); animation: oasBcIdle 5s ease-in-out infinite; }
.OASdgw-oas-st-res { opacity: 0; animation: oasBcRes 5s ease-in-out infinite; }
.OASdgw-oas-st-res--won { color: #04231a; background: #34d399; }
.OASdgw-oas-st-res--taken { color: #94a3b8; background: rgba(148,163,184,0.15); }

/* after strip */
.OASdgw-oas-after { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(34,170,230,0.14); }
.OASdgw-oas-after-step { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,0.03); border: 1px solid rgba(34,170,230,0.16); border-radius: 12px; padding: 13px 16px; }
.OASdgw-oas-after-ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.OASdgw-oas-after-ico svg { width: 17px; height: 17px; }
.OASdgw-oas-after-ico--ok { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.OASdgw-oas-after-ico--day { background: rgba(99,102,241,0.18); color: #a5b4fc; }
.OASdgw-oas-after-ico--sign { background: rgba(34,170,230,0.18); color: #7dd3fc; }
.OASdgw-oas-after-t { font: 700 13px/1.1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-oas-after-d { font: 500 11px/1.3 'Inter'; color: rgba(205,229,245,0.62); margin-top: 3px; }
.OASdgw-oas-after-bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,0.1); margin-top: 6px; overflow: hidden; }
.OASdgw-oas-after-bar i { display: block; height: 100%; width: 17%; border-radius: 4px; background: linear-gradient(90deg, var(--cl-sky), var(--cl-indigo)); animation: oasDayBar 3s ease-in-out infinite; }
@keyframes oasDayBar { 0% { width: 8%; } 50% { width: 20%; } 100% { width: 8%; } }
.OASdgw-oas-after-arr { display: flex; align-items: center; font: 800 18px/1 'Plus Jakarta Sans'; color: #2f4658; }

@media (max-width: 760px) {
  .OASdgw-oas-crews { grid-template-columns: 1fr 1fr; }
  .OASdgw-oas-after { flex-direction: column; }
  .OASdgw-oas-after-arr { transform: rotate(90deg); justify-content: center; }
  .OASdgw-oas-after-step { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .OASdgw-oas-crew, .OASdgw-oas-st-idle, .OASdgw-oas-st-res, .OASdgw-oas-bc-idle, .OASdgw-oas-bc-res, .OASdgw-oas-after-bar i { animation: none !important; }
  .OASdgw-oas-crew--win { border-color: #34d399 !important; box-shadow: 0 0 24px -8px rgba(52,211,153,0.6) !important; }
  .OASdgw-oas-st-idle, .OASdgw-oas-bc-idle { opacity: 0 !important; }
  .OASdgw-oas-st-res, .OASdgw-oas-bc-res { opacity: 1 !important; }
  .OASdgw-oas-crew--lose { opacity: 0.5 !important; }
}



/* 
/* ============================================================
   DIGIWAH — CASE STUDIES HUB
   Prefix: dgw-cstud-  (reuses dgw-nav-* / dgw-footer-*)
   ============================================================ */

:root {
  --brand: #010ED0;
  --brand-light: #7c8fff;
  --accent: #FF7A45;
  --accent-soft: #ffb284;
  --navy-deep: #050a2e;
  --navy: #0a1145;
  --ink: #0a0f2c;
  --muted: #6b7280;
  --line: rgba(255,255,255,0.08);
  --surf-light: #f4f7fc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }

/* ===== NAVBAR (inherited) ===== */
.dgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.dgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dgw-nav-logo { display: flex; align-items: center; }
.dgw-nav-logo-img { height: 38px; width: auto; display: block; }
.dgw-nav-links { display: flex; gap: 30px; }
.dgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.dgw-nav-links a:hover, .dgw-nav-links a.is-active { color: #fff; }
.dgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.dgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ===== HEADER ===== */
.dgw-cstud-header { position: relative; overflow: hidden; padding: 150px 0 78px; text-align: center;
  background: radial-gradient(ellipse at 72% 18%, rgba(124,143,255,0.2) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 80%, rgba(255,122,69,0.08) 0%, transparent 50%),
              linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%); }
.dgw-cstud-header-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(124,143,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(124,143,255,0.07) 1px, transparent 1px);
  background-size: 54px 54px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%); }
.dgw-cstud-header-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; top: -180px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.18), transparent 70%); filter: blur(70px); pointer-events: none; }
.dgw-cstud-header-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 0 32px; }
.dgw-cstud-kicker { display: inline-block; font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-light); margin-bottom: 18px; }
.dgw-cstud-title { font: 800 clamp(38px, 6vw, 64px)/1.04 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.03em; }
.dgw-cstud-sub { font: 400 18px/1.7 'Inter'; color: rgba(205,213,255,0.78); margin: 22px auto 0; max-width: 600px; }
.dgw-cstud-header-stats { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; font: 500 14px/1 'Inter'; color: rgba(205,213,255,0.7); }
.dgw-cstud-header-stats strong { color: #fff; font-weight: 800; font-family: 'Plus Jakarta Sans'; }
.dgw-cstud-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(124,143,255,0.5); }

/* ===== CARDS ===== */
.dgw-cstud-section { background: var(--surf-light); padding: 80px 0 96px; }
.dgw-cstud-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.dgw-cstud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.dgw-cstud-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e7edf5; border-radius: 20px; overflow: hidden;
  box-shadow: 0 12px 34px -22px rgba(10,17,69,0.28); transition: transform 0.38s cubic-bezier(.2,.7,.2,1), box-shadow 0.38s, border-color 0.38s; }
.dgw-cstud-card:hover { transform: translateY(-9px); box-shadow: 0 36px 66px -30px var(--glow); border-color: transparent; }

.dgw-cstud-top { position: relative; padding: 24px 24px 24px; background: linear-gradient(140deg, var(--accent), var(--accent-d)); overflow: hidden; }
.dgw-cstud-top::after { content: ""; position: absolute; top: -40px; right: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%); }
.dgw-cstud-toptags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.dgw-cstud-toptag { font: 700 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); padding: 7px 11px; border-radius: 100px; }
.dgw-cstud-logochip { position: relative; z-index: 2; display: inline-flex; align-items: center; background: #fff; padding: 13px 20px; border-radius: 13px; box-shadow: 0 12px 26px -12px rgba(0,0,0,0.45); }
.dgw-cstud-logochip img { height: 34px; width: auto; display: block; }

.dgw-cstud-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.dgw-cstud-client { font: 700 11.5px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-d); margin-bottom: 11px; }
.dgw-cstud-headline { font: 800 20px/1.28 'Plus Jakarta Sans'; color: var(--ink); }
.dgw-cstud-desc { font: 400 14px/1.62 'Inter'; color: #5b6472; margin-top: 11px; }
.dgw-cstud-stats { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.dgw-cstud-stat { font: 600 11.5px/1 'Inter'; color: var(--accent-d); background: #f5f8fc; border: 1px solid #e7edf5; padding: 8px 11px; border-radius: 7px; }
.dgw-cstud-link { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 'Inter'; color: var(--accent-d); margin-top: auto; transition: gap 0.3s; }
.dgw-cstud-card:hover .dgw-cstud-link { gap: 12px; }
.dgw-cstud-link svg { transition: transform 0.3s; }
.dgw-cstud-card:hover .dgw-cstud-link svg { transform: translateX(4px); }

/* ===== CTA ===== */
.dgw-cstud-cta { position: relative; overflow: hidden; padding: 96px 0; text-align: center; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
.dgw-cstud-cta-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(124,143,255,0.16), transparent 65%); filter: blur(60px); pointer-events: none; }
.dgw-cstud-cta-inner { position: relative; z-index: 2; max-width: 660px; margin: 0 auto; padding: 0 32px; }
.dgw-cstud-cta-title { font: 800 clamp(28px, 4vw, 42px)/1.12 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.dgw-cstud-cta-p { font: 400 17px/1.7 'Inter'; color: rgba(205,213,255,0.78); margin: 18px auto 30px; max-width: 540px; }
.dgw-cstud-btn { display: inline-block; background: var(--accent); color: #fff; font: 600 15px/1 'Inter'; padding: 16px 30px; border-radius: 10px; box-shadow: 0 8px 22px rgba(255,122,69,0.4); transition: transform 0.2s, box-shadow 0.2s; }
.dgw-cstud-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,122,69,0.55); }

/* ===== FOOTER (inherited) ===== */
.dgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.dgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.dgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.dgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.dgw-footer-brand { max-width: 360px; }
.dgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.dgw-footer-logo { height: 40px; width: auto; display: block; }
.dgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.dgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.dgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.dgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.dgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.dgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.dgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.dgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.dgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.dgw-footer-col { min-width: 0; }
.dgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.dgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.dgw-footer-list a, .dgw-footer-list li, .dgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-list a:hover { color: #ffb284; }
.dgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.dgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.dgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.dgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.dgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.dgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.dgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.dgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.dgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.dgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-legal a:hover { color: #fff; }
.dgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.dgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .dgw-nav-links { display: none; }
  .dgw-cstud-grid { grid-template-columns: 1fr 1fr; }
  .dgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .dgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 680px) {
  .dgw-cstud-header { padding: 130px 0 64px; }
  .dgw-cstud-grid { grid-template-columns: 1fr; }
  .dgw-cstud-section { padding: 60px 0 76px; }
  .dgw-footer { padding: 72px 22px 28px; }
  .dgw-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .dgw-footer-bottom { flex-direction: column; text-align: center; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dgw-cstud-card { transition: none !important; }
  html { scroll-behavior: auto; }
}




/* ============================================================
   DIGIWAH — CASE STUDY: CLIMAT TRADE CENTRE
   Page-scoped prefix: CTSdgw-cs-   (reuses CTSdgw-nav-* / CTSdgw-footer-*)
   ============================================================ */

:root {
  /* Digiwah brand (page chrome) */
  --brand: #010ED0;
  --brand-light: #7c8fff;
  --accent: #FF7A45;
  --accent-soft: #ffb284;
  --navy-deep: #050a2e;
  --navy: #0a1145;
  --ink: #0a0f2c;
  --muted: #6b7280;
  --line: rgba(255,255,255,0.08);

  /* Climat Trade Centre brand (client story accent) */
  --ct-teal: #00897b;
  --ct-teal-d: #00665b;
  --ct-teal-dd: #053f39;
  --ct-green: #54b87f;
  --ct-mint: #c7f5ec;

  /* Climat app/product palette (used inside product mockups + scenes) */
  --cl-navy: #0c1f3d;
  --cl-sky: #0ea5e9;
  --cl-indigo: #6366f1;
  --cl-bg: #f1f5f9;
  --cl-border: #e2e8f0;
  --cl-text: #0f172a;
  --cl-muted: #64748b;
  --cl-ok: #10b981;
  --cl-warn: #f59e0b;
  --cl-danger: #ef4444;

  --surf-light: #f5f8fc;
  --surf-white: #ffffff;
}

.climateTC * { margin: 0; padding: 0; box-sizing: border-box; }
.climateTC h1, .climateTC h2, .climateTC h3, .climateTC h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
.climateTC a { color: inherit; text-decoration: none; }
.climateTC code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: rgba(99,102,241,0.12); color: #4338ca; padding: 1px 6px; border-radius: 5px; }

/* ============================================================
   NAVBAR (inherited)
   ============================================================ */
.CTSdgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.CTSdgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.CTSdgw-nav-logo { display: flex; align-items: center; }
.CTSdgw-nav-logo-img { height: 38px; width: auto; display: block; }
.CTSdgw-nav-links { display: flex; gap: 30px; }
.CTSdgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.CTSdgw-nav-links a:hover { color: #fff; }
.CTSdgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.CTSdgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
.CTSdgw-cs-sec-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.CTSdgw-cs-kicker { display: inline-block; font: 700 12px/1 'Inter'; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 18px; }
.CTSdgw-cs-kicker--teal { color: var(--ct-teal); }
.CTSdgw-cs-kicker--warn { color: #d97706; }
.CTSdgw-cs-kicker--light { color: var(--brand-light); }
.CTSdgw-cs-kicker--center { display: block; text-align: center; }
.CTSdgw-cs-h2 { font: 800 clamp(28px, 4vw, 44px)/1.12 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-h2--light { color: #fff; }
.CTSdgw-cs-p { font: 400 17px/1.7 'Inter'; color: #475569; margin-top: 18px; max-width: 640px; }
.CTSdgw-cs-p--light { color: rgba(205,213,255,0.78); }
.CTSdgw-cs-p--center { margin-left: auto; margin-right: auto; }
.CTSdgw-cs-p strong { color: var(--ink); font-weight: 700; }
.CTSdgw-cs-p--light strong { color: #fff; }

.CTSdgw-cs-how-head { max-width: 720px; margin-bottom: 48px; }
.CTSdgw-cs-how-head--center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }

.CTSdgw-cs-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cl-ok); display: inline-block; box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: dgwCsPulse 2.2s infinite; }
@keyframes dgwCsPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

.CTSreveal { 
/* 	opacity: 0; */
	transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.CTSreveal.CTSis-in { opacity: 1; transform: none; }

.CTSdgw-cs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.CTSdgw-cs-dot--info { background: var(--cl-sky); }
.CTSdgw-cs-dot--warn { background: var(--cl-warn); }
.CTSdgw-cs-dot--ok { background: var(--cl-ok); }
.CTSdgw-cs-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 9.5px/1 'Inter'; }

/* Buttons */
.CTSdgw-cs-btn { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1 'Inter'; padding: 15px 26px; border-radius: 10px; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
.CTSdgw-cs-btn--onbrand { background: #fff; color: var(--ct-teal-d); box-shadow: 0 10px 26px -10px rgba(0,0,0,0.4); }
.CTSdgw-cs-btn--onbrand:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,0,0,0.5); }
.CTSdgw-cs-btn--onbrand-ghost { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.CTSdgw-cs-btn--onbrand-ghost:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.CTSdgw-cs-btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(255,122,69,0.4); }
.CTSdgw-cs-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,122,69,0.55); }
.CTSdgw-cs-btn--ghost { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(124,143,255,0.3); }
.CTSdgw-cs-btn--ghost:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* ============================================================
   1 · HERO (Climat teal brand band)
   ============================================================ */
.CTSdgw-cs-hero { position: relative; overflow: hidden; padding: 150px 0 96px; text-align: center;
  background: linear-gradient(160deg, var(--ct-teal) 0%, var(--ct-teal-d) 55%, var(--ct-teal-dd) 100%); }
.CTSdgw-cs-hero-mesh { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 10%, rgba(84,184,127,0.4) 0%, transparent 45%),
              radial-gradient(ellipse at 85% 20%, rgba(199,245,236,0.18) 0%, transparent 40%),
              radial-gradient(ellipse at 70% 90%, rgba(0,60,53,0.5) 0%, transparent 55%); }
.CTSdgw-cs-hero-grid-floor { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); }
.CTSdgw-cs-hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.CTSdgw-cs-hero-glow--1 { width: 520px; height: 520px; top: -160px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(84,184,127,0.3), transparent 70%); }
.CTSdgw-cs-hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 32px; }
.CTSdgw-cs-hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.CTSdgw-cs-tag { font: 700 11.5px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: #eafff9; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28); padding: 8px 13px; border-radius: 100px; }
.CTSdgw-cs-tag--case { background: #fff; color: var(--ct-teal-d); border-color: #fff; }
.CTSdgw-cs-hero-logocard { display: inline-flex; background: #fff; padding: 18px 26px; border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.45); margin-bottom: 30px; }
.CTSdgw-cs-hero-logocard img { height: 56px; width: auto; display: block; }
.CTSdgw-cs-hero-title { font: 800 clamp(34px, 5.4vw, 60px)/1.05 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.03em; }
.CTSdgw-cs-hl { position: relative; color: #fff; background: linear-gradient(100deg, #eafff9, var(--ct-mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.CTSdgw-cs-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 7px; background: rgba(199,245,236,0.45); border-radius: 4px; z-index: -1; }
.CTSdgw-cs-hero-lead { font: 400 18px/1.7 'Inter'; color: rgba(234,255,249,0.9); margin: 22px auto 0; max-width: 600px; }
.CTSdgw-cs-hero-lead strong { color: #fff; font-weight: 700; }
.CTSdgw-cs-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 38px auto 0; max-width: 720px; }
.CTSdgw-cs-hstat { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 18px 12px; backdrop-filter: blur(6px); }
.CTSdgw-cs-hstat-n { font: 800 24px/1 'Plus Jakarta Sans'; color: #fff; }
.CTSdgw-cs-hstat-n--live { display: inline-flex; align-items: center; gap: 7px; }
.CTSdgw-cs-hstat-l { font: 600 11.5px/1.3 'Inter'; color: rgba(234,255,249,0.72); margin-top: 8px; letter-spacing: 0.02em; }
.CTSdgw-cs-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* ============================================================
   2 · ABOUT THE CLIENT (light)
   ============================================================ */
.CTSdgw-cs-about { background: var(--surf-white); padding: 96px 0; }
.CTSdgw-cs-about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.CTSdgw-cs-tagline { display: flex; align-items: center; gap: 12px; margin: 24px 0; padding: 16px 20px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(0,137,123,0.08), transparent); border-left: 3px solid var(--ct-teal);
  font: 600 17px/1.4 'Plus Jakarta Sans'; color: var(--ct-teal-d); }
.CTSdgw-cs-tagline svg { color: var(--ct-teal); flex-shrink: 0; }
.CTSdgw-cs-about-copy em { font-style: normal; color: var(--ct-teal-d); font-weight: 600; }
.CTSdgw-cs-about-facts { background: var(--surf-light); border: 1px solid #e7edf5; border-radius: 20px; padding: 14px 22px; }
.CTSdgw-cs-fact { display: flex; align-items: center; gap: 15px; padding: 16px 0; border-bottom: 1px solid #e7edf5; }
.CTSdgw-cs-fact:last-of-type { border-bottom: none; }
.CTSdgw-cs-fact-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(0,137,123,0.1); color: var(--ct-teal-d); }
.CTSdgw-cs-fact-ico svg { width: 21px; height: 21px; }
.CTSdgw-cs-fact-l { font: 700 10.5px/1 'Inter'; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.CTSdgw-cs-fact-v { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-fact-v span { font: 500 13px 'Inter'; color: var(--muted); }
.CTSdgw-cs-about-brands { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 10px; }
.CTSdgw-cs-about-brands span { font: 600 12px/1 'Inter'; color: var(--ct-teal-d); background: rgba(0,137,123,0.08); border: 1px solid rgba(0,137,123,0.18); padding: 7px 12px; border-radius: 7px; }

/* ============================================================
   3 · CHALLENGE (light tinted)
   ============================================================ */
.CTSdgw-cs-challenge { background: var(--surf-light); padding: 100px 0; }
.CTSdgw-cs-broken { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 6px; padding: 26px; margin-bottom: 44px;
  background: #fff; border: 1px solid #e7edf5; border-radius: 18px; box-shadow: 0 2px 4px rgba(10,17,69,0.03); }
.CTSdgw-cs-broken-step { display: inline-flex; align-items: center; gap: 9px; font: 600 13.5px/1 'Inter'; color: #334155; background: var(--surf-light); border: 1px solid #e2e8f0; padding: 11px 14px; border-radius: 10px; }
.CTSdgw-cs-broken-ico { color: var(--cl-muted); display: inline-flex; }
.CTSdgw-cs-broken-ico svg { width: 18px; height: 18px; }
.CTSdgw-cs-broken-arr { color: #cbd5e1; font-size: 17px; font-weight: 700; }
.CTSdgw-cs-broken-arr--late { color: var(--cl-danger); }
.CTSdgw-cs-broken-gap { font: 700 11px/1 'Inter'; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cl-danger); background: rgba(239,68,68,0.08); border: 1px dashed rgba(239,68,68,0.4); padding: 9px 12px; border-radius: 100px; }
.CTSdgw-cs-broken-step--late { color: var(--cl-danger); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
.CTSdgw-cs-broken-step--late .CTSdgw-cs-broken-ico { color: var(--cl-danger); }

.CTSdgw-cs-painwall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.CTSdgw-cs-pain-card { background: #fff; border: 1px solid #e7edf5; border-radius: 14px; padding: 24px 20px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.CTSdgw-cs-pain-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -20px rgba(10,17,69,0.28); border-color: #dbe3ef; }
.CTSdgw-cs-pain-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(245,158,11,0.12); color: #d97706; margin-bottom: 14px; }
.CTSdgw-cs-pain-ico svg { width: 22px; height: 22px; }
.CTSdgw-cs-pain-t { font: 700 16px/1.2 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 7px; }
.CTSdgw-cs-pain-d { font: 400 13.5px/1.55 'Inter'; color: var(--muted); }

.CTSdgw-cs-pull { margin-top: 40px; max-width: 760px; position: relative; padding: 22px 26px 22px 52px; border-left: 3px solid var(--accent);
  background: linear-gradient(100deg, rgba(255,122,69,0.06), transparent); border-radius: 0 12px 12px 0; font: 500 19px/1.6 'Inter'; color: #334155; }
.CTSdgw-cs-pull-mark { position: absolute; top: 20px; left: 16px; font: 800 40px/0 'Plus Jakarta Sans'; color: var(--accent-soft); opacity: 0.55; }
.CTSdgw-cs-pull strong { color: var(--ink); font-weight: 700; }
.CTSdgw-cs-pull cite { display: block; margin-top: 12px; font: 600 13.5px/1 'Inter'; font-style: normal; color: var(--muted); }

/* ============================================================
   4 · SOLUTION (dark)
   ============================================================ */
.CTSdgw-cs-solution { padding: 100px 0; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 80% 0%, rgba(0,137,123,0.16) 0%, transparent 55%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
.CTSdgw-cs-sol-head { max-width: 760px; }
.CTSdgw-cs-systems { display: grid; grid-template-columns: 1fr 1.3fr 1.05fr 1.3fr 1fr; gap: 10px; align-items: stretch; margin-top: 54px; }
.CTSdgw-cs-sys { background: rgba(255,255,255,0.04); border: 1px solid rgba(124,143,255,0.2); border-radius: 16px; padding: 24px 22px; backdrop-filter: blur(6px); }
.CTSdgw-cs-sys--core { background: linear-gradient(160deg, rgba(0,137,123,0.2), rgba(84,184,127,0.12)); border-color: rgba(84,184,127,0.5); box-shadow: 0 0 40px -10px rgba(0,137,123,0.4); animation: dgwCoreGlow 2.8s ease-in-out infinite; }
@keyframes dgwCoreGlow { 0%,100% { box-shadow: 0 0 40px -14px rgba(0,137,123,0.55); } 50% { box-shadow: 0 0 56px -6px rgba(0,137,123,0.9); } }
.CTSdgw-cs-sys-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); color: var(--brand-light); margin-bottom: 14px; }
.CTSdgw-cs-sys-ico svg { width: 22px; height: 22px; }
.CTSdgw-cs-sys-ico--core { background: linear-gradient(135deg, var(--ct-teal), var(--ct-green)); color: #fff; font: 800 18px/1 'Plus Jakarta Sans'; }
.CTSdgw-cs-sys-tag { font: 700 10px/1 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(124,143,255,0.8); margin-bottom: 9px; }
.CTSdgw-cs-sys--core .CTSdgw-cs-sys-tag { color: var(--ct-mint); }
.CTSdgw-cs-sys-name { font: 800 21px/1.1 'Plus Jakarta Sans'; color: #fff; }
.CTSdgw-cs-sys-note { font: 500 13px/1.4 'Inter'; color: rgba(205,213,255,0.62); margin-top: 7px; }
/* --- animated flow lanes --- */
.CTSdgw-cs-flowlane { position: relative; display: flex; align-items: center; min-width: 110px; }
.CTSdgw-cs-flowtrack { width: 100%; height: 3px; border-radius: 3px;
  background-image: linear-gradient(90deg, rgba(124,143,255,0.55) 0 52%, transparent 52% 100%);
  background-size: 15px 3px; background-repeat: repeat-x; animation: dgwDash 0.7s linear infinite; }
@keyframes dgwDash { to { background-position: 15px 0; } }

.CTSdgw-cs-flowdot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--cl-sky); box-shadow: 0 0 11px 1px var(--cl-sky); opacity: 0; animation: dgwDotGo 2.6s linear infinite; animation-delay: var(--d, 0s); }
@keyframes dgwDotGo { 0% { left: -3%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: 103%; opacity: 0; } }
.CTSdgw-cs-flowdot--ok { background: var(--cl-ok); box-shadow: 0 0 11px 1px var(--cl-ok); }
.CTSdgw-cs-flowdot--back { margin-top: 3px; background: var(--ct-mint); box-shadow: 0 0 11px 1px rgba(199,245,236,0.8); animation-name: dgwDotBack; animation-duration: 3.1s; }
@keyframes dgwDotBack { 0% { left: 103%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: -3%; opacity: 0; } }

.CTSdgw-cs-flowtruck { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: var(--accent-soft); animation: dgwTruck 3.6s linear infinite; }
.CTSdgw-cs-flowtruck svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 4px 8px rgba(255,122,69,0.45)); animation: dgwTruckBob 0.5s ease-in-out infinite alternate; }
@keyframes dgwTruck { 0% { left: -14%; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes dgwTruckBob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }

.CTSdgw-cs-flowchevrons { position: absolute; right: -1px; top: 50%; transform: translateY(-50%); display: flex; }
.CTSdgw-cs-flowchevrons i { width: 6px; height: 6px; margin-left: -3px; border-top: 2px solid var(--brand-light); border-right: 2px solid var(--brand-light); transform: rotate(45deg); opacity: 0.25; animation: dgwChev 1.4s ease-in-out infinite; }
.CTSdgw-cs-flowchevrons i:nth-child(2) { animation-delay: 0.16s; }
.CTSdgw-cs-flowchevrons i:nth-child(3) { animation-delay: 0.32s; }
.CTSdgw-cs-flowchevrons--ok i { border-color: var(--cl-ok); }
@keyframes dgwChev { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

.CTSdgw-cs-flowlabel { position: absolute; left: 50%; transform: translateX(-50%); top: calc(50% - 30px); font: 600 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(205,213,255,0.6); white-space: nowrap; }
.CTSdgw-cs-flowlabel--back { top: auto; bottom: calc(50% - 30px); color: var(--ct-mint); opacity: 0.85; }

/* ============================================================
   5 · ANIMATED WALKTHROUGH (centerpiece)
   ============================================================ */
.CTSdgw-cs-walk { padding: 100px 0; background: var(--surf-light); }
.CTSdgw-cs-walk-stage { display: grid; grid-template-columns: 350px 1fr; gap: 30px; align-items: start; }

/* step rail */
.CTSdgw-cs-walk-rail { position: relative; padding-left: 4px; }
.CTSdgw-cs-walk-rail::before { content: ""; position: absolute; left: 26px; top: 22px; bottom: 22px; width: 2px; background: #dbe3ef; border-radius: 2px; }
.CTSdgw-cs-walk-railfill { position: absolute; left: 26px; top: 22px; bottom: 22px; width: 2px; }
.CTSdgw-cs-walk-railfill span { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--cl-sky), var(--cl-indigo)); border-radius: 2px; transition: height 0.5s ease; }
.CTSdgw-cs-wstep { position: relative; z-index: 2; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; font-family: inherit; }
.CTSdgw-cs-wstep:hover { background: rgba(255,255,255,0.6); }
.CTSdgw-cs-wstep.CTSis-active { background: #fff; border-color: #e2e8f0; box-shadow: 0 12px 28px -16px rgba(10,17,69,0.3); }
.CTSdgw-cs-wstep-no { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 15px/1 'Plus Jakarta Sans'; color: var(--cl-muted); background: #fff; border: 1px solid #e2e8f0; transition: all 0.25s; }
.CTSdgw-cs-wstep.CTSis-active .CTSdgw-cs-wstep-no { background: linear-gradient(140deg, var(--cl-sky), var(--cl-indigo)); color: #fff; border-color: transparent; }
.CTSdgw-cs-wstep-tx { display: flex; flex-direction: column; gap: 3px; }
.CTSdgw-cs-wstep-tx strong { font: 700 14.5px/1.25 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-wstep-tx span { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); }

/* screen */
.CTSdgw-cs-walk-screen { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 30px 70px -36px rgba(10,17,69,0.4); overflow: hidden; min-height: 430px; }
.CTSdgw-cs-walk-screenbar { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid #eef2f7; background: #f8fafc; }
.CTSdgw-cs-wdot { width: 10px; height: 10px; border-radius: 50%; background: #d7deea; }
.CTSdgw-cs-wdot:nth-child(1) { background: #f1a7a0; } .CTSdgw-cs-wdot:nth-child(2) { background: #f3cf8a; } .CTSdgw-cs-wdot:nth-child(3) { background: #a9dcae; }
.CTSdgw-cs-walk-screenlabel { margin-left: 8px; font: 600 12px/1 'Inter'; color: var(--cl-muted); }

.CTSdgw-cs-scene { position: absolute; inset: 0; top: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.CTSdgw-cs-scene.CTSis-active { opacity: 1; visibility: visible; transform: none; position: relative; }
.CTSdgw-cs-scene-cap { font: 700 10.5px/1 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cl-muted); }

/* Scene 1 — Unleashed order + DELIVERY stamp */
.CTSdgw-cs-ucard { width: 320px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; padding: 16px 18px; box-shadow: 0 8px 24px -14px rgba(10,17,69,0.3); }
.CTSdgw-cs-ucard-head { display: flex; justify-content: space-between; align-items: center; font: 700 14px/1 'JetBrains Mono', monospace; color: var(--cl-navy); }
.CTSdgw-cs-ustatus { font: 700 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); background: #eef2f7; padding: 5px 9px; border-radius: 100px; }
.CTSdgw-cs-ucard-cust { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--cl-text); margin: 10px 0 12px; }
.CTSdgw-cs-uline { display: flex; justify-content: space-between; font: 500 12.5px/1.4 'Inter'; color: #475569; padding: 6px 0; border-top: 1px dashed #eef2f7; }
.CTSdgw-cs-uline span:last-child { color: var(--cl-muted); font-family: 'JetBrains Mono', monospace; }
.CTSdgw-cs-ucard-foot { font: 500 11.5px/1.3 'Inter'; color: var(--cl-muted); margin-top: 12px; }
.CTSdgw-cs-stamp { font: 800 22px/1 'Plus Jakarta Sans'; letter-spacing: 0.1em; color: var(--cl-ok); border: 3px solid var(--cl-ok); border-radius: 10px; padding: 8px 16px; transform: rotate(-9deg) scale(0); opacity: 0; }
.CTSdgw-cs-scene.CTSis-active[data-scene="0"] .CTSdgw-cs-stamp { animation: dgwStampIn 0.6s 0.5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes dgwStampIn { 0% { transform: rotate(-9deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } }

/* shared flow nodes (scenes 2 + 6) */
.CTSdgw-cs-wflow { display: flex; align-items: center; gap: 10px; }
.CTSdgw-cs-wnode { font: 700 12.5px/1 'Inter'; color: #fff; padding: 11px 16px; border-radius: 10px; white-space: nowrap; }
.CTSdgw-cs-wnode--ext { background: #64748b; }
.CTSdgw-cs-wnode--core { background: linear-gradient(135deg, var(--ct-teal), var(--ct-green)); }
.CTSdgw-cs-wnode--down { background: var(--cl-ok); }
.CTSdgw-cs-wpipe { position: relative; width: 70px; height: 2px; background: #dbe3ef; border-radius: 2px; }
.CTSdgw-cs-wpacket { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--cl-sky); transform: translate(-50%,-50%); box-shadow: 0 0 10px var(--cl-sky); opacity: 0; }
.CTSdgw-cs-wpacket--ok { background: var(--cl-ok); box-shadow: 0 0 10px var(--cl-ok); }
.CTSdgw-cs-scene.CTSis-active[data-scene="1"] .CTSdgw-cs-wpacket { animation: dgwPacket 1.3s 0.3s ease-in-out infinite; }
.CTSdgw-cs-scene.CTSis-active[data-scene="5"] .CTSdgw-cs-wpacket { animation: dgwPacket 1.1s 0.3s ease-in-out infinite; }
.CTSdgw-cs-scene.CTSis-active[data-scene="5"] .CTSdgw-cs-wpacket--d2 { animation-delay: 0.9s; }
@keyframes dgwPacket { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.CTSdgw-cs-jobcard { width: 300px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; padding: 15px 17px; box-shadow: 0 8px 24px -14px rgba(10,17,69,0.3); transform: scale(0.85); opacity: 0; }
.CTSdgw-cs-scene.CTSis-active[data-scene="1"] .CTSdgw-cs-jobcard { animation: dgwPop 0.6s 0.9s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes dgwPop { to { transform: scale(1); opacity: 1; } }
.CTSdgw-cs-jobcard-head { display: flex; align-items: center; gap: 8px; font: 700 12px/1 'JetBrains Mono', monospace; color: var(--cl-muted); }
.CTSdgw-cs-jobcard-name { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--cl-navy); margin: 8px 0 4px; }
.CTSdgw-cs-jobcard-meta { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); }
.CTSdgw-cs-zeropill { font: 700 12.5px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); padding: 9px 15px; border-radius: 100px; opacity: 0; }
.CTSdgw-cs-scene.CTSis-active[data-scene="1"] .CTSdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.5s ease forwards; }
.CTSdgw-cs-scene.CTSis-active[data-scene="2"] .CTSdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.6s ease forwards; }
@keyframes dgwFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Scene 3 — mini board with flying card */
.CTSdgw-cs-miniboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 380px; max-width: 100%; }
.CTSdgw-cs-mb-col { background: var(--cl-bg); border-radius: 10px; padding: 10px; min-height: 130px; }
.CTSdgw-cs-mb-col--rail { background: #eef2f7; }
.CTSdgw-cs-mb-tag { display: flex; align-items: center; gap: 6px; font: 700 11px/1 'Inter'; color: var(--cl-navy); margin-bottom: 10px; }
.CTSdgw-cs-mb-card { background: #fff; border: 1px solid var(--cl-border); border-radius: 9px; padding: 9px 10px; box-shadow: 0 2px 6px rgba(14,165,233,0.16); }
.CTSdgw-cs-mb-so { font: 700 10px/1 'JetBrains Mono', monospace; color: var(--cl-muted); }
.CTSdgw-cs-mb-cn { font: 700 12px/1.2 'Inter'; color: var(--cl-navy); margin-top: 4px; }
.CTSdgw-cs-mb-card--fly { position: relative; }
.CTSdgw-cs-scene.CTSis-active[data-scene="2"] .CTSdgw-cs-mb-card--fly { animation: dgwFly 2.4s 0.5s ease-in-out infinite; }
@keyframes dgwFly { 0%,12% { transform: translate(0,0) rotate(0); } 45%,62% { transform: translate(135px, 38px) rotate(-4deg); } 90%,100% { transform: translate(135px, 38px) rotate(0); } }
.CTSdgw-cs-mb-drop { border: 1.5px dashed #c3d0e2; border-radius: 8px; color: #94a3b8; font: 600 10.5px/1 'Inter'; text-align: center; padding: 22px 6px; }

/* Scene 4 + 5 — phone */
.CTSdgw-cs-phone { width: 240px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 22px; padding: 12px; box-shadow: 0 20px 44px -22px rgba(10,17,69,0.4); }
.CTSdgw-cs-phone-bar { font: 700 12px/1 'Plus Jakarta Sans'; color: var(--cl-navy); text-align: center; padding: 8px 0 12px; }
.CTSdgw-cs-map { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e7eef5, #dde7f1); }
.CTSdgw-cs-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.25) 1px, transparent 1px); background-size: 26px 26px; }
.CTSdgw-cs-map-route { position: absolute; left: 18%; top: 80%; width: 60%; height: 50%; border-top: 3px solid var(--cl-sky); border-right: 3px solid var(--cl-sky); border-top-right-radius: 40px; opacity: 0.85; }
.CTSdgw-cs-map-pin { position: absolute; right: 20%; top: 26%; color: var(--cl-danger); }
.CTSdgw-cs-map-pin svg { width: 26px; height: 26px; }
.CTSdgw-cs-ping { position: absolute; left: 50%; top: 60%; width: 14px; height: 14px; border-radius: 50%; background: rgba(239,68,68,0.4); transform: translate(-50%,-50%); }
.CTSdgw-cs-scene.CTSis-active[data-scene="3"] .CTSdgw-cs-ping { animation: dgwPing 1.6s ease-out infinite; }
@keyframes dgwPing { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 18px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.CTSdgw-cs-phone-addr { font: 600 13px/1 'Inter'; color: var(--cl-text); text-align: center; margin: 12px 0 10px; }
.CTSdgw-cs-phone-btn { font: 600 12.5px/1 'Inter'; color: #fff; background: linear-gradient(135deg, var(--cl-sky), var(--cl-indigo)); text-align: center; padding: 12px; border-radius: 11px; }
.CTSdgw-cs-pod-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 11px; }
.CTSdgw-cs-pod-photo, .CTSdgw-cs-pod-gps { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 11px; background: var(--cl-bg); font: 600 10.5px/1 'Inter'; color: var(--cl-muted); }
.CTSdgw-cs-pod-photo svg, .CTSdgw-cs-pod-gps svg { width: 22px; height: 22px; color: var(--cl-indigo); }
.CTSdgw-cs-pod-gps svg { color: var(--cl-ok); }
.CTSdgw-cs-pod-signlabel { font: 600 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: 5px; }
.CTSdgw-cs-pod-sign { height: 60px; border: 1px solid var(--cl-border); border-radius: 11px; background: #f8fafc; overflow: hidden; }
.CTSdgw-cs-pod-sign svg { width: 100%; height: 100%; }
.CTSdgw-cs-signpath { stroke-dasharray: 520; stroke-dashoffset: 520; }
.CTSdgw-cs-scene.CTSis-active[data-scene="4"] .CTSdgw-cs-signpath { animation: dgwSign 1.6s 0.4s ease forwards; }
@keyframes dgwSign { to { stroke-dashoffset: 0; } }
.CTSdgw-cs-pod-qty { display: flex; align-items: center; gap: 8px; font: 700 12px/1 'Inter'; color: var(--cl-ok); margin-top: 11px; opacity: 0; }
.CTSdgw-cs-scene.CTSis-active[data-scene="4"] .CTSdgw-cs-pod-qty { animation: dgwFadeUp 0.5s 2s ease forwards; }

/* Scene 6 — invoice */
.CTSdgw-cs-invoice { width: 280px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px -16px rgba(10,17,69,0.35); transform: translateY(14px) rotateX(12deg); opacity: 0; transform-origin: top center; }
.CTSdgw-cs-scene.CTSis-active[data-scene="5"] .CTSdgw-cs-invoice { animation: dgwInvoice 0.7s 1.8s cubic-bezier(.2,1.2,.4,1) forwards; }
@keyframes dgwInvoice { to { transform: none; opacity: 1; } }
.CTSdgw-cs-invoice-top { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; background: var(--cl-navy); color: #fff; font: 800 12px/1 'Plus Jakarta Sans'; letter-spacing: 0.1em; }
.CTSdgw-cs-invoice-no { font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: 0; color: var(--cl-sky); }
.CTSdgw-cs-invoice-body { padding: 14px 16px; }
.CTSdgw-cs-invoice-line { font: 700 14px/1.3 'Plus Jakarta Sans'; color: var(--cl-text); }
.CTSdgw-cs-invoice-line--muted { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); margin-top: 4px; }
.CTSdgw-cs-invoice-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef2f7; font: 700 12px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.06); }

/* ============================================================
   6 · FEATURES (dark)
   ============================================================ */
.CTSdgw-cs-features { padding: 100px 0; background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%); }
.CTSdgw-cs-features .CTSdgw-cs-how-head { max-width: 760px; }
.CTSdgw-cs-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.CTSdgw-cs-feat-col { background: rgba(255,255,255,0.035); border: 1px solid rgba(124,143,255,0.16); border-radius: 18px; padding: 26px 24px; transition: border-color 0.3s ease, transform 0.3s ease; }
.CTSdgw-cs-feat-col:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-4px); }
.CTSdgw-cs-feat-head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(124,143,255,0.14); }
.CTSdgw-cs-feat-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.CTSdgw-cs-feat-ico svg { width: 23px; height: 23px; }
.CTSdgw-cs-feat-head--office .CTSdgw-cs-feat-ico { background: rgba(14,165,233,0.16); color: #7dd3fc; }
.CTSdgw-cs-feat-head--driver .CTSdgw-cs-feat-ico { background: rgba(99,102,241,0.16); color: #a5b4fc; }
.CTSdgw-cs-feat-head--integ .CTSdgw-cs-feat-ico { background: rgba(16,185,129,0.16); color: #6ee7b7; }
.CTSdgw-cs-feat-col-t { font: 700 17px/1.1 'Plus Jakarta Sans'; color: #fff; }
.CTSdgw-cs-feat-col-s { font: 500 12px/1 'Inter'; color: rgba(205,213,255,0.5); margin-top: 4px; }
.CTSdgw-cs-feat-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.CTSdgw-cs-feat-list li { position: relative; padding-left: 24px; font: 400 14px/1.5 'Inter'; color: rgba(205,213,255,0.82); }
.CTSdgw-cs-feat-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* ============================================================
   7 · ARCHITECTURE + DEPTH (light)
   ============================================================ */
.CTSdgw-cs-arch { padding: 100px 0; background: var(--surf-white); }
.CTSdgw-cs-arch .CTSdgw-cs-how-head { max-width: 720px; }
.CTSdgw-cs-archmap { max-width: 760px; margin: 0 auto 56px; }
.CTSdgw-cs-archrow { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 20px 24px; border-radius: 16px; border: 1px solid #e7edf5; background: var(--surf-light); }
.CTSdgw-cs-archrow--driver { border-left: 4px solid var(--cl-indigo); }
.CTSdgw-cs-archrow--core { border-left: 4px solid var(--ct-teal); }
.CTSdgw-cs-archrow--integ { border-left: 4px solid var(--cl-warn); }
.CTSdgw-cs-archrow--ext { border-left: 4px solid #64748b; }
.CTSdgw-cs-archrow-label { font: 800 15px/1.2 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-archrow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.CTSdgw-cs-archrow-chips span { font: 600 12.5px/1 'Inter'; color: #334155; background: #fff; border: 1px solid #e2e8f0; padding: 8px 12px; border-radius: 8px; }
.CTSdgw-cs-archconn { display: flex; justify-content: center; height: 22px; }
.CTSdgw-cs-archconn span { width: 2px; height: 100%; background: linear-gradient(180deg, #cbd5e1, #94a3b8); position: relative; }
.CTSdgw-cs-archconn span::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 7px; height: 7px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: translateX(-50%) rotate(45deg); }

.CTSdgw-cs-tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.CTSdgw-cs-tech-card { position: relative; background: var(--surf-light); border: 1px solid #e8edf5; border-radius: 16px; padding: 24px 24px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.CTSdgw-cs-tech-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(10,17,69,0.3); border-color: #d3ddec; }
.CTSdgw-cs-tech-no { font: 800 13px/1 'JetBrains Mono', monospace; color: var(--brand); letter-spacing: 0.05em; margin-bottom: 12px; }
.CTSdgw-cs-tech-t { font: 700 16.5px/1.3 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-tech-d { font: 400 13.5px/1.6 'Inter'; color: var(--muted); margin-top: 9px; }

/* ============================================================
   8 · RESULTS (dark + glow)
   ============================================================ */
.CTSdgw-cs-results { position: relative; overflow: hidden; padding: 100px 0; background: linear-gradient(180deg, var(--navy) 0%, #060b2e 100%); }
.CTSdgw-cs-results-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -200px; right: -120px; background: radial-gradient(circle, rgba(16,185,129,0.12), transparent 70%); filter: blur(50px); pointer-events: none; }
.CTSdgw-cs-results .CTSdgw-cs-sec-inner { position: relative; z-index: 2; }
.CTSdgw-cs-res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.CTSdgw-cs-res-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(124,143,255,0.18); border-radius: 16px; padding: 24px 22px; transition: transform 0.3s ease, border-color 0.3s ease; }
.CTSdgw-cs-res-card:hover { transform: translateY(-4px); border-color: rgba(16,185,129,0.4); }
.CTSdgw-cs-res-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(16,185,129,0.14); color: #6ee7b7; margin-bottom: 15px; }
.CTSdgw-cs-res-ico svg { width: 22px; height: 22px; }
.CTSdgw-cs-res-t { font: 700 16px/1.25 'Plus Jakarta Sans'; color: #fff; }
.CTSdgw-cs-res-d { font: 400 13.5px/1.55 'Inter'; color: rgba(205,213,255,0.68); margin-top: 9px; }

.CTSdgw-cs-quote { margin-top: 36px; position: relative; text-align: center; background: linear-gradient(160deg, rgba(0,137,123,0.16), rgba(84,184,127,0.08)); border: 1px solid rgba(84,184,127,0.3); border-radius: 22px; padding: 44px 32px 32px; }
.CTSdgw-cs-quote-mark { font: 800 70px/0.5 'Plus Jakarta Sans'; color: var(--ct-mint); opacity: 0.55; height: 30px; }
.CTSdgw-cs-quote-text { font: 800 clamp(30px, 4vw, 46px)/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; margin: 10px 0 22px; }
.CTSdgw-cs-quote-cite { display: inline-flex; align-items: center; gap: 13px; text-align: left; }
.CTSdgw-cs-quote-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--ct-teal), var(--ct-green)); color: #fff; font: 800 15px/1 'Plus Jakarta Sans'; display: flex; align-items: center; justify-content: center; }
.CTSdgw-cs-quote-meta { display: flex; flex-direction: column; gap: 4px; }
.CTSdgw-cs-quote-meta strong { font: 700 15px/1 'Inter'; color: #fff; }
.CTSdgw-cs-quote-meta span { font: 500 12.5px/1.4 'Inter'; color: rgba(205,213,255,0.62); }
.CTSdgw-cs-quote-note { margin-top: 22px; display: inline-block; font: 600 12px/1 'Inter'; letter-spacing: 0.04em; color: var(--ct-mint); background: rgba(0,137,123,0.16); border: 1px solid rgba(84,184,127,0.35); padding: 9px 16px; border-radius: 100px; }

/* ============================================================
   9 · WHAT'S NEXT (light)
   ============================================================ */
.CTSdgw-cs-next { padding: 100px 0; background: var(--surf-light); }
.CTSdgw-cs-next .CTSdgw-cs-how-head { max-width: 680px; }
.CTSdgw-cs-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.CTSdgw-cs-next-card { background: #fff; border: 1px solid #e8edf5; border-radius: 16px; padding: 24px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.CTSdgw-cs-next-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(10,17,69,0.25); }
.CTSdgw-cs-next-tag { display: inline-block; font: 700 10px/1 'Inter'; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ct-teal-d); background: rgba(0,137,123,0.08); border: 1px solid rgba(0,137,123,0.18); padding: 6px 11px; border-radius: 100px; margin-bottom: 15px; }
.CTSdgw-cs-next-t { font: 700 17px/1.25 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-next-d { font: 400 13.5px/1.6 'Inter'; color: var(--muted); margin-top: 9px; }

/* ============================================================
   10 · CTA (dark finale)
   ============================================================ */
.CTSdgw-cs-cta { position: relative; overflow: hidden; padding: 110px 0; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); text-align: center; }
.CTSdgw-cs-cta-glow { position: absolute; width: 760px; height: 760px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(0,137,123,0.16), transparent 65%); filter: blur(60px); pointer-events: none; }
.CTSdgw-cs-cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 32px; }
.CTSdgw-cs-cta-title { font: 800 clamp(30px, 4.5vw, 48px)/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.CTSdgw-cs-cta-p { font: 400 18px/1.7 'Inter'; color: rgba(205,213,255,0.78); margin: 22px auto 34px; max-width: 580px; }
.CTSdgw-cs-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER (inherited)
   ============================================================ */
.CTSdgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.CTSdgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.CTSdgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.CTSdgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.CTSdgw-footer-brand { max-width: 360px; }
.CTSdgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.CTSdgw-footer-logo { height: 40px; width: auto; display: block; }
.CTSdgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.CTSdgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.CTSdgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.CTSdgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.CTSdgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.CTSdgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.CTSdgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.CTSdgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.CTSdgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.CTSdgw-footer-col { min-width: 0; }
.CTSdgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.CTSdgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.CTSdgw-footer-list a, .CTSdgw-footer-list li, .CTSdgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.CTSdgw-footer-list a:hover { color: #ffb284; }
.CTSdgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.CTSdgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.CTSdgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.CTSdgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.CTSdgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.CTSdgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.CTSdgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.CTSdgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.CTSdgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.CTSdgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.CTSdgw-footer-legal a:hover { color: #fff; }
.CTSdgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.CTSdgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .CTSdgw-nav-links { display: none; }
  .CTSdgw-cs-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .CTSdgw-cs-systems { grid-template-columns: 1fr; gap: 4px; }
  .CTSdgw-cs-flowlane { width: 170px; height: 52px; margin: 14px auto; transform: rotate(90deg); }
  .CTSdgw-cs-flowlabel { display: none; }
  .CTSdgw-cs-flowtruck { display: none; }
  .CTSdgw-cs-walk-stage { grid-template-columns: 1fr; gap: 22px; }
  .CTSdgw-cs-walk-screen { min-height: 400px; }
  .CTSdgw-cs-feat-grid, .CTSdgw-cs-next-grid { grid-template-columns: 1fr; }
  .CTSdgw-cs-tech-grid { grid-template-columns: 1fr; }
  .CTSdgw-cs-res-grid { grid-template-columns: 1fr 1fr; }
  .CTSdgw-cs-painwall { grid-template-columns: 1fr 1fr; }
  .CTSdgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .CTSdgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 640px) {
  .CTSdgw-cs-hero { padding: 130px 0 76px; }
  .CTSdgw-cs-hero-stats { grid-template-columns: 1fr 1fr; }
  .CTSdgw-cs-sec-inner, .CTSdgw-cs-hero-inner { padding-left: 22px; padding-right: 22px; }
  .CTSdgw-cs-painwall { grid-template-columns: 1fr; }
  .CTSdgw-cs-res-grid { grid-template-columns: 1fr; }
  .CTSdgw-cs-broken { gap: 8px; }
  .CTSdgw-cs-broken-step { font-size: 12px; padding: 9px 11px; }
  .CTSdgw-cs-archrow { grid-template-columns: 1fr; gap: 12px; }
  .CTSdgw-cs-about, .CTSdgw-cs-challenge, .CTSdgw-cs-solution, .CTSdgw-cs-walk, .CTSdgw-cs-features, .CTSdgw-cs-arch, .CTSdgw-cs-results, .CTSdgw-cs-next, .CTSdgw-cs-cta { padding: 72px 0; }
  .CTSdgw-footer { padding: 72px 22px 28px; }
  .CTSdgw-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .CTSdgw-footer-bottom { flex-direction: column; text-align: center; gap: 18px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .CTSreveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .CTSdgw-cs-live-dot { animation: none !important; }
  .CTSdgw-cs-sys--core, .CTSdgw-cs-flowtrack, .CTSdgw-cs-flowtruck, .CTSdgw-cs-flowtruck svg, .CTSdgw-cs-flowchevrons i { animation: none !important; }
  .CTSdgw-cs-flowdot { animation: none !important; opacity: 0.9 !important; left: 44% !important; }
  .CTSdgw-cs-flowdot--back { left: 56% !important; }
  .CTSdgw-cs-flowtruck { left: 40% !important; opacity: 1 !important; }
  .CTSdgw-cs-scene * { animation: none !important; }
  .CTSdgw-cs-stamp, .CTSdgw-cs-jobcard, .CTSdgw-cs-zeropill, .CTSdgw-cs-invoice, .CTSdgw-cs-pod-qty { opacity: 1 !important; transform: none !important; }
  .CTSdgw-cs-signpath { stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
}
 */


/* -------------------------------------------------------------
   PARTNER, NOT RESELLER
   ------------------------------------------------------------- */
.dgw-zerp-partner {
  padding: 110px 0;
  background: var(--dgw-zerp-bg-tint);
  scroll-margin-top: 76px;
}

.dgw-zerp-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 46px;
}

.dgw-zerp-partner-card {
  position: relative;
  padding: 32px 30px;
  background: #fff;
  border: 1px solid var(--dgw-zerp-line);
  border-radius: 18px;
  box-shadow: var(--dgw-zerp-card-shadow);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}

.dgw-zerp-partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dgw-zerp-card-shadow-h);
}

.dgw-zerp-partner-card-us {
  border-color: rgba(27, 61, 245, 0.22);
  box-shadow: var(--dgw-zerp-card-shadow-h);
}

.dgw-zerp-partner-tag {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dgw-zerp-muted-2);
  margin-bottom: 10px;
}

.dgw-zerp-partner-card-us .dgw-zerp-partner-tag {
  color: var(--dgw-zerp-brand);
}

.dgw-zerp-partner-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--dgw-zerp-ink);
  margin: 0 0 12px;
}

.dgw-zerp-partner-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--dgw-zerp-muted);
  margin: 0;
}

.dgw-zerp-partner-close {
  max-width: 780px;
  margin: 34px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--dgw-zerp-muted);
}

.dgw-zerp-partner-close a {
  color: var(--dgw-zerp-brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 61, 245, 0.28);
}

.dgw-zerp-partner-close a:hover {
  border-bottom-color: var(--dgw-zerp-brand);
}

@media (max-width: 860px) {
  .dgw-zerp-partner { padding: 76px 0; }
  .dgw-zerp-partner-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .dgw-zerp-partner-card { padding: 26px 24px; }
}






















/* Home page   */


/* Digiwah homepage — single combined stylesheet (2026-10-02) */
/* ===================== assets/wp-includes/css/dist/block-library/style.min.css ===================== */
.wp-block-accordion{box-sizing:border-box}.wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon{transform:rotate(45deg)}@media (prefers-reduced-motion:no-preference){.wp-block-accordion-item{transition:grid-template-rows .3s ease-out}.wp-block-accordion-item>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon{transition:transform .2s ease-in-out}}.wp-block-accordion-heading__toggle{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;overflow:hidden;padding:var(--wp--preset--spacing--20,1em) 0;text-align:inherit;text-decoration:inherit;text-transform:inherit;width:100%;word-spacing:inherit}.wp-block-accordion-heading__toggle:not(:focus-visible){outline:none}.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{text-decoration:underline}.wp-block-accordion-heading__toggle-title{flex:1}.wp-block-accordion-heading__toggle-icon{align-items:center;display:flex;height:1.2em;justify-content:center;width:1.2em}.wp-block-accordion-panel[aria-hidden=true],.wp-block-accordion-panel[inert]{display:none;margin-block-start:0}.wp-block-archives{box-sizing:border-box}.wp-block-archives-dropdown label{display:block}.wp-block-avatar{line-height:0}.wp-block-avatar,.wp-block-avatar img{box-sizing:border-box}.wp-block-avatar.aligncenter{text-align:center}.wp-block-audio{box-sizing:border-box}.wp-block-audio :where(figcaption){margin-bottom:1em;margin-top:.5em}.wp-block-audio audio{min-width:300px;width:100%}.wp-block-breadcrumbs{box-sizing:border-box}.wp-block-breadcrumbs ol{flex-wrap:wrap;list-style:none}.wp-block-breadcrumbs li,.wp-block-breadcrumbs ol{align-items:center;display:flex;margin:0;padding:0}.wp-block-breadcrumbs li:not(:last-child):after{content:var(--separator,"/");margin:0 .5em;opacity:.7}.wp-block-breadcrumbs span{color:inherit}.wp-block-button__link{align-content:center;box-sizing:border-box;cursor:pointer;display:inline-block;height:100%;text-align:center;word-break:break-word}.wp-block-button__link.aligncenter{text-align:center}.wp-block-button__link.alignright{text-align:right}:where(.wp-block-button__link){border-radius:9999px;box-shadow:none;padding:calc(.667em + 2px) calc(1.333em + 2px);text-decoration:none}.wp-block-button[style*=text-decoration] .wp-block-button__link{text-decoration:inherit}.wp-block-buttons>.wp-block-button.has-custom-width{max-width:none}.wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link{width:100%}.wp-block-buttons>.wp-block-button.has-custom-font-size .wp-block-button__link{font-size:inherit}.wp-block-buttons>.wp-block-button.wp-block-button__width-25{width:calc(25% - var(--wp--style--block-gap, .5em)*.75)}.wp-block-buttons>.wp-block-button.wp-block-button__width-50{width:calc(50% - var(--wp--style--block-gap, .5em)*.5)}.wp-block-buttons>.wp-block-button.wp-block-button__width-75{width:calc(75% - var(--wp--style--block-gap, .5em)*.25)}.wp-block-buttons>.wp-block-button.wp-block-button__width-100{flex-basis:100%;width:100%}.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-25{width:25%}.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-50{width:50%}.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-75{width:75%}.wp-block-button.is-style-squared,.wp-block-button__link.wp-block-button.is-style-squared{border-radius:0}.wp-block-button.no-border-radius,.wp-block-button__link.no-border-radius{border-radius:0!important}:root :where(.wp-block-button .wp-block-button__link.is-style-outline),:root :where(.wp-block-button.is-style-outline>.wp-block-button__link){border:2px solid;padding:.667em 1.333em}:root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)),:root :where(.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color)){color:currentColor}:root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)),:root :where(.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background)){background-color:initial;background-image:none}.wp-block-buttons{box-sizing:border-box}.wp-block-buttons.is-vertical{flex-direction:column}.wp-block-buttons.is-vertical>.wp-block-button:last-child{margin-bottom:0}.wp-block-buttons>.wp-block-button{display:inline-block;margin:0}.wp-block-buttons.is-content-justification-left{justify-content:flex-start}.wp-block-buttons.is-content-justification-left.is-vertical{align-items:flex-start}.wp-block-buttons.is-content-justification-center{justify-content:center}.wp-block-buttons.is-content-justification-center.is-vertical{align-items:center}.wp-block-buttons.is-content-justification-right{justify-content:flex-end}.wp-block-buttons.is-content-justification-right.is-vertical{align-items:flex-end}.wp-block-buttons.is-content-justification-space-between{justify-content:space-between}.wp-block-buttons.aligncenter{text-align:center}.wp-block-buttons:not(.is-content-justification-space-between,.is-content-justification-right,.is-content-justification-left,.is-content-justification-center) .wp-block-button.aligncenter{margin-left:auto;margin-right:auto;width:100%}.wp-block-buttons[style*=text-decoration] .wp-block-button,.wp-block-buttons[style*=text-decoration] .wp-block-button__link{text-decoration:inherit}.wp-block-buttons.has-custom-font-size .wp-block-button__link{font-size:inherit}.wp-block-buttons .wp-block-button__link{width:100%}.wp-block-button.aligncenter,.wp-block-calendar{text-align:center}.wp-block-calendar td,.wp-block-calendar th{border:1px solid;padding:.25em}.wp-block-calendar th{font-weight:400}.wp-block-calendar caption{background-color:inherit}.wp-block-calendar table{border-collapse:collapse;width:100%}.wp-block-calendar table.has-background th{background-color:inherit}.wp-block-calendar table.has-text-color th{color:inherit}.wp-block-calendar :where(table:not(.has-text-color)){color:#40464d}.wp-block-calendar :where(table:not(.has-text-color)) td,.wp-block-calendar :where(table:not(.has-text-color)) th{border-color:#ddd}:where(.wp-block-calendar table:not(.has-background) th){background:#ddd}.wp-block-categories{box-sizing:border-box}.wp-block-categories.alignleft{margin-right:2em}.wp-block-categories.alignright{margin-left:2em}.wp-block-categories.wp-block-categories-dropdown.aligncenter{text-align:center}.wp-block-categories .wp-block-categories__label{display:block;width:100%}.wp-block-code{box-sizing:border-box}.wp-block-code code{
  /*!rtl:begin:ignore*/direction:ltr;display:block;font-family:inherit;overflow-wrap:break-word;text-align:initial;white-space:pre-wrap
  /*!rtl:end:ignore*/}.wp-block-columns{box-sizing:border-box;display:flex;flex-wrap:wrap!important}@media (min-width:782px){.wp-block-columns{flex-wrap:nowrap!important}}.wp-block-columns{align-items:normal!important}.wp-block-columns.are-vertically-aligned-top{align-items:flex-start}.wp-block-columns.are-vertically-aligned-center{align-items:center}.wp-block-columns.are-vertically-aligned-bottom{align-items:flex-end}@media (max-width:781px){.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:100%!important}}@media (min-width:782px){.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:0;flex-grow:1}.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis]{flex-grow:0}}.wp-block-columns.is-not-stacked-on-mobile{flex-wrap:nowrap!important}.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column{flex-basis:0;flex-grow:1}.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column[style*=flex-basis]{flex-grow:0}:where(.wp-block-columns){margin-bottom:1.75em}:where(.wp-block-columns.has-background){padding:1.25em 2.375em}.wp-block-column{flex-grow:1;min-width:0;overflow-wrap:break-word;word-break:break-word}.wp-block-column.is-vertically-aligned-top{align-self:flex-start}.wp-block-column.is-vertically-aligned-center{align-self:center}.wp-block-column.is-vertically-aligned-bottom{align-self:flex-end}.wp-block-column.is-vertically-aligned-stretch{align-self:stretch}.wp-block-column.is-vertically-aligned-bottom,.wp-block-column.is-vertically-aligned-center,.wp-block-column.is-vertically-aligned-top{width:100%}.wp-block-post-comments{box-sizing:border-box}.wp-block-post-comments .alignleft{float:left}.wp-block-post-comments .alignright{float:right}.wp-block-post-comments .navigation:after{clear:both;content:"";display:table}.wp-block-post-comments .commentlist{clear:both;list-style:none;margin:0;padding:0}.wp-block-post-comments .commentlist .comment{min-height:2.25em;padding-left:3.25em}.wp-block-post-comments .commentlist .comment p{font-size:1em;line-height:1.8;margin:1em 0}.wp-block-post-comments .commentlist .children{list-style:none;margin:0;padding:0}.wp-block-post-comments .comment-author{line-height:1.5}.wp-block-post-comments .comment-author .avatar{border-radius:1.5em;display:block;float:left;height:2.5em;margin-right:.75em;margin-top:.5em;width:2.5em}.wp-block-post-comments .comment-author cite{font-style:normal}.wp-block-post-comments .comment-meta{font-size:.875em;line-height:1.5}.wp-block-post-comments .comment-meta b{font-weight:400}.wp-block-post-comments .comment-meta .comment-awaiting-moderation{display:block;margin-bottom:1em;margin-top:1em}.wp-block-post-comments .comment-body .commentmetadata{font-size:.875em}.wp-block-post-comments .comment-form-author label,.wp-block-post-comments .comment-form-comment label,.wp-block-post-comments .comment-form-email label,.wp-block-post-comments .comment-form-url label{display:block;margin-bottom:.25em}.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]),.wp-block-post-comments .comment-form textarea{box-sizing:border-box;display:block;width:100%}.wp-block-post-comments .comment-form-cookies-consent{display:flex;gap:.25em}.wp-block-post-comments .comment-form-cookies-consent #wp-comment-cookies-consent{margin-top:.35em}.wp-block-post-comments .comment-reply-title{margin-bottom:0}.wp-block-post-comments .comment-reply-title :where(small){font-size:var(--wp--preset--font-size--medium,smaller);margin-left:.5em}.wp-block-post-comments .reply{font-size:.875em;margin-bottom:1.4em}.wp-block-post-comments input:not([type=submit]),.wp-block-post-comments textarea{border:1px solid #949494;font-family:inherit;font-size:1em}.wp-block-post-comments input:not([type=submit]):not([type=checkbox]),.wp-block-post-comments textarea{padding:calc(.667em + 2px)}:where(.wp-block-post-comments input[type=submit]){border:none}.wp-block-comments{box-sizing:border-box}.wp-block-comments-pagination>.wp-block-comments-pagination-next,.wp-block-comments-pagination>.wp-block-comments-pagination-numbers,.wp-block-comments-pagination>.wp-block-comments-pagination-previous{font-size:inherit}.wp-block-comments-pagination .wp-block-comments-pagination-previous-arrow{display:inline-block;margin-right:1ch}.wp-block-comments-pagination .wp-block-comments-pagination-previous-arrow:not(.is-arrow-chevron){transform:scaleX(1)}.wp-block-comments-pagination .wp-block-comments-pagination-next-arrow{display:inline-block;margin-left:1ch}.wp-block-comments-pagination .wp-block-comments-pagination-next-arrow:not(.is-arrow-chevron){transform:scaleX(1)}.wp-block-comments-pagination.aligncenter{justify-content:center}.wp-block-comment-template{box-sizing:border-box;list-style:none;margin-bottom:0;max-width:100%;padding:0}.wp-block-comment-template li{clear:both}.wp-block-comment-template ol{list-style:none;margin-bottom:0;max-width:100%;padding-left:2rem}.wp-block-comment-template.alignleft{float:left}.wp-block-comment-template.aligncenter{margin-left:auto;margin-right:auto;width:fit-content}.wp-block-comment-template.alignright{float:right}.wp-block-comment-date{box-sizing:border-box}.comment-awaiting-moderation{display:block;font-size:.875em;line-height:1.5}.wp-block-comment-author-name,.wp-block-comment-content,.wp-block-comment-edit-link,.wp-block-comment-reply-link{box-sizing:border-box}.wp-block-cover,.wp-block-cover-image{align-items:center;background-position:50%;box-sizing:border-box;display:flex;justify-content:center;min-height:430px;overflow:hidden;overflow:clip;padding:1em;position:relative}.wp-block-cover .has-background-dim:not([class*=-background-color]),.wp-block-cover-image .has-background-dim:not([class*=-background-color]),.wp-block-cover-image.has-background-dim:not([class*=-background-color]),.wp-block-cover.has-background-dim:not([class*=-background-color]){background-color:#000}.wp-block-cover .has-background-dim.has-background-gradient,.wp-block-cover-image .has-background-dim.has-background-gradient{background-color:initial}.wp-block-cover-image.has-background-dim:before,.wp-block-cover.has-background-dim:before{background-color:inherit;content:""}.wp-block-cover .wp-block-cover__background,.wp-block-cover .wp-block-cover__gradient-background,.wp-block-cover-image .wp-block-cover__background,.wp-block-cover-image .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim:not(.has-background-gradient):before,.wp-block-cover.has-background-dim:not(.has-background-gradient):before{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0}.wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient):before{opacity:.1}.wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient):before{opacity:.2}.wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient):before{opacity:.3}.wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient):before{opacity:.4}.wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient):before{opacity:.5}.wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient):before{opacity:.6}.wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient):before{opacity:.7}.wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient):before{opacity:.8}.wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient):before{opacity:.9}.wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__background,.wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,.wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient):before,.wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__background,.wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,.wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient):before{opacity:1}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-0,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0{opacity:0}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-10,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-10,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10{opacity:.1}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-20,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-20,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20{opacity:.2}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-30,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-30,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30{opacity:.3}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-40,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-40,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40{opacity:.4}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-50,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-50,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50{opacity:.5}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-60,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-60,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60{opacity:.6}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-70,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-70,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70{opacity:.7}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-80,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-80,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80{opacity:.8}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-90,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-90,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90{opacity:.9}.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-100,.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100,.wp-block-cover-image .wp-block-cover__background.has-background-dim.has-background-dim-100,.wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100{opacity:1}.wp-block-cover-image.alignleft,.wp-block-cover-image.alignright,.wp-block-cover.alignleft,.wp-block-cover.alignright{max-width:420px;width:100%}.wp-block-cover-image.aligncenter,.wp-block-cover-image.alignleft,.wp-block-cover-image.alignright,.wp-block-cover.aligncenter,.wp-block-cover.alignleft,.wp-block-cover.alignright{display:flex}.wp-block-cover .wp-block-cover__inner-container,.wp-block-cover-image .wp-block-cover__inner-container{color:inherit;position:relative;width:100%}.wp-block-cover-image.is-position-top-left,.wp-block-cover.is-position-top-left{align-items:flex-start;justify-content:flex-start}.wp-block-cover-image.is-position-top-center,.wp-block-cover.is-position-top-center{align-items:flex-start;justify-content:center}.wp-block-cover-image.is-position-top-right,.wp-block-cover.is-position-top-right{align-items:flex-start;justify-content:flex-end}.wp-block-cover-image.is-position-center-left,.wp-block-cover.is-position-center-left{align-items:center;justify-content:flex-start}.wp-block-cover-image.is-position-center-center,.wp-block-cover.is-position-center-center{align-items:center;justify-content:center}.wp-block-cover-image.is-position-center-right,.wp-block-cover.is-position-center-right{align-items:center;justify-content:flex-end}.wp-block-cover-image.is-position-bottom-left,.wp-block-cover.is-position-bottom-left{align-items:flex-end;justify-content:flex-start}.wp-block-cover-image.is-position-bottom-center,.wp-block-cover.is-position-bottom-center{align-items:flex-end;justify-content:center}.wp-block-cover-image.is-position-bottom-right,.wp-block-cover.is-position-bottom-right{align-items:flex-end;justify-content:flex-end}.wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container{margin:0}.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-bottom-right .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-center-right .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-top-left .wp-block-cover__inner-container,.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-top-right .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-right .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-center-right .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-top-left .wp-block-cover__inner-container,.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-top-right .wp-block-cover__inner-container{margin:0;width:auto}.wp-block-cover .wp-block-cover__image-background,.wp-block-cover video.wp-block-cover__video-background,.wp-block-cover-image .wp-block-cover__image-background,.wp-block-cover-image video.wp-block-cover__video-background{border:none;bottom:0;box-shadow:none;height:100%;left:0;margin:0;max-height:none;max-width:none;object-fit:cover;outline:none;padding:0;position:absolute;right:0;top:0;width:100%}.wp-block-cover-image.has-parallax,.wp-block-cover.has-parallax,.wp-block-cover__image-background.has-parallax,video.wp-block-cover__video-background.has-parallax{background-attachment:fixed;background-repeat:no-repeat;background-size:cover}@supports (-webkit-touch-callout:inherit){.wp-block-cover-image.has-parallax,.wp-block-cover.has-parallax,.wp-block-cover__image-background.has-parallax,video.wp-block-cover__video-background.has-parallax{background-attachment:scroll}}@media (prefers-reduced-motion:reduce){.wp-block-cover-image.has-parallax,.wp-block-cover.has-parallax,.wp-block-cover__image-background.has-parallax,video.wp-block-cover__video-background.has-parallax{background-attachment:scroll}}.wp-block-cover-image.is-repeated,.wp-block-cover.is-repeated,.wp-block-cover__image-background.is-repeated,video.wp-block-cover__video-background.is-repeated{background-repeat:repeat;background-size:auto}.wp-block-cover-image-text,.wp-block-cover-image-text a,.wp-block-cover-image-text a:active,.wp-block-cover-image-text a:focus,.wp-block-cover-image-text a:hover,.wp-block-cover-text,.wp-block-cover-text a,.wp-block-cover-text a:active,.wp-block-cover-text a:focus,.wp-block-cover-text a:hover,section.wp-block-cover-image h2,section.wp-block-cover-image h2 a,section.wp-block-cover-image h2 a:active,section.wp-block-cover-image h2 a:focus,section.wp-block-cover-image h2 a:hover{color:#fff}.wp-block-cover-image .wp-block-cover.has-left-content{justify-content:flex-start}.wp-block-cover-image .wp-block-cover.has-right-content{justify-content:flex-end}.wp-block-cover-image.has-left-content .wp-block-cover-image-text,.wp-block-cover.has-left-content .wp-block-cover-text,section.wp-block-cover-image.has-left-content>h2{margin-left:0;text-align:left}.wp-block-cover-image.has-right-content .wp-block-cover-image-text,.wp-block-cover.has-right-content .wp-block-cover-text,section.wp-block-cover-image.has-right-content>h2{margin-right:0;text-align:right}.wp-block-cover .wp-block-cover-text,.wp-block-cover-image .wp-block-cover-image-text,section.wp-block-cover-image>h2{font-size:2em;line-height:1.25;margin-bottom:0;max-width:840px;padding:.44em;text-align:center;z-index:1}:where(.wp-block-cover-image:not(.has-text-color)),:where(.wp-block-cover:not(.has-text-color)){color:#fff}:where(.wp-block-cover-image.is-light:not(.has-text-color)),:where(.wp-block-cover.is-light:not(.has-text-color)){color:#000}:root :where(.wp-block-cover h1:not(.has-text-color)),:root :where(.wp-block-cover h2:not(.has-text-color)),:root :where(.wp-block-cover h3:not(.has-text-color)),:root :where(.wp-block-cover h4:not(.has-text-color)),:root :where(.wp-block-cover h5:not(.has-text-color)),:root :where(.wp-block-cover h6:not(.has-text-color)),:root :where(.wp-block-cover p:not(.has-text-color)){color:inherit}body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__image-background,body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__video-background{z-index:0}body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__background,body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__gradient-background,body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__inner-container,body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)).has-background-dim:not(.has-background-gradient):before{z-index:1}.has-modal-open body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__inner-container{z-index:auto}.wp-block-details{box-sizing:border-box}.wp-block-details summary{cursor:pointer}.wp-block-embed.alignleft,.wp-block-embed.alignright,.wp-block[data-align=left]>[data-type="core/embed"],.wp-block[data-align=right]>[data-type="core/embed"]{max-width:360px;width:100%}.wp-block-embed.alignleft .wp-block-embed__wrapper,.wp-block-embed.alignright .wp-block-embed__wrapper,.wp-block[data-align=left]>[data-type="core/embed"] .wp-block-embed__wrapper,.wp-block[data-align=right]>[data-type="core/embed"] .wp-block-embed__wrapper{min-width:280px}.wp-block-cover .wp-block-embed{min-height:240px;min-width:320px}.wp-block-embed{overflow-wrap:break-word}.wp-block-embed :where(figcaption){margin-bottom:1em;margin-top:.5em}.wp-block-embed iframe{max-width:100%}.wp-block-embed__wrapper{position:relative}.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:before{content:"";display:block;padding-top:50%}.wp-embed-responsive .wp-has-aspect-ratio iframe{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.wp-embed-responsive .wp-embed-aspect-21-9 .wp-block-embed__wrapper:before{padding-top:42.85%}.wp-embed-responsive .wp-embed-aspect-18-9 .wp-block-embed__wrapper:before{padding-top:50%}.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper:before{padding-top:56.25%}.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before{padding-top:75%}.wp-embed-responsive .wp-embed-aspect-1-1 .wp-block-embed__wrapper:before{padding-top:100%}.wp-embed-responsive .wp-embed-aspect-9-16 .wp-block-embed__wrapper:before{padding-top:177.77%}.wp-embed-responsive .wp-embed-aspect-1-2 .wp-block-embed__wrapper:before{padding-top:200%}.wp-block-file{box-sizing:border-box}.wp-block-file:not(.wp-element-button){font-size:.8em}.wp-block-file.aligncenter{text-align:center}.wp-block-file.alignright{text-align:right}.wp-block-file *+.wp-block-file__button{margin-left:.75em}:where(.wp-block-file){margin-bottom:1.5em}.wp-block-file__embed{margin-bottom:1em}:where(.wp-block-file__button){border-radius:2em;display:inline-block;padding:.5em 1em}:where(.wp-block-file__button):where(a):active,:where(.wp-block-file__button):where(a):focus,:where(.wp-block-file__button):where(a):hover,:where(.wp-block-file__button):where(a):visited{box-shadow:none;color:#fff;opacity:.85;text-decoration:none}.wp-block-form-input__label{display:flex;flex-direction:column;gap:.25em;margin-bottom:.5em;width:100%}.wp-block-form-input__label.is-label-inline{align-items:center;flex-direction:row;gap:.5em}.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content{margin-bottom:.5em}.wp-block-form-input__label:has(input[type=checkbox]){flex-direction:row;width:fit-content}.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content{margin:0}.wp-block-form-input__label:has(.wp-block-form-input__label-content+input[type=checkbox]){flex-direction:row-reverse}.wp-block-form-input__label-content{width:fit-content}:where(.wp-block-form-input__input){font-size:1em;margin-bottom:.5em;padding:0 .5em}:where(.wp-block-form-input__input)[type=date],:where(.wp-block-form-input__input)[type=datetime-local],:where(.wp-block-form-input__input)[type=datetime],:where(.wp-block-form-input__input)[type=email],:where(.wp-block-form-input__input)[type=month],:where(.wp-block-form-input__input)[type=number],:where(.wp-block-form-input__input)[type=password],:where(.wp-block-form-input__input)[type=search],:where(.wp-block-form-input__input)[type=tel],:where(.wp-block-form-input__input)[type=text],:where(.wp-block-form-input__input)[type=time],:where(.wp-block-form-input__input)[type=url],:where(.wp-block-form-input__input)[type=week]{border-style:solid;border-width:1px;line-height:2;min-height:2em}textarea.wp-block-form-input__input{min-height:10em}.blocks-gallery-grid:not(.has-nested-images),.wp-block-gallery:not(.has-nested-images){display:flex;flex-wrap:wrap;list-style-type:none;margin:0;padding:0}.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item{display:flex;flex-direction:column;flex-grow:1;justify-content:center;margin:0 1em 1em 0;position:relative;width:calc(50% - 1em)}.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:nth-of-type(2n),.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-of-type(2n){margin-right:0}.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figure,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figure,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figure,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figure{align-items:flex-end;display:flex;height:100%;justify-content:flex-start;margin:0}.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image img,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item img{display:block;height:auto;max-width:100%;width:auto}.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption{background:linear-gradient(0deg,#000000b3,#0000004d 70%,#0000);bottom:0;box-sizing:border-box;color:#fff;font-size:.8em;margin:0;max-height:100%;overflow:auto;padding:3em .77em .7em;position:absolute;text-align:center;width:100%;z-index:2}.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption img,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption img{display:inline}.blocks-gallery-grid:not(.has-nested-images) figcaption,.wp-block-gallery:not(.has-nested-images) figcaption{flex-grow:1}.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image a,.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image img,.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item a,.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image a,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image img,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item a,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item img{flex:1;height:100%;object-fit:cover;width:100%}.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item{margin-right:0;width:100%}@media (min-width:600px){.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item{margin-right:1em;width:calc(33.33333% - .66667em)}.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item{margin-right:1em;width:calc(25% - .75em)}.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item{margin-right:1em;width:calc(20% - .8em)}.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item{margin-right:1em;width:calc(16.66667% - .83333em)}.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item{margin-right:1em;width:calc(14.28571% - .85714em)}.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item{margin-right:1em;width:calc(12.5% - .875em)}.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n),.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n),.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n),.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n),.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n),.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n),.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n),.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n),.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n),.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n),.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n),.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n),.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n),.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n),.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n),.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n),.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n),.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n),.wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n),.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n),.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n),.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n),.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n),.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n),.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n),.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n),.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n),.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n),.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n),.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n){margin-right:0}}.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:last-child,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:last-child,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:last-child,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:last-child{margin-right:0}.blocks-gallery-grid:not(.has-nested-images).alignleft,.blocks-gallery-grid:not(.has-nested-images).alignright,.wp-block-gallery:not(.has-nested-images).alignleft,.wp-block-gallery:not(.has-nested-images).alignright{max-width:420px;width:100%}.blocks-gallery-grid:not(.has-nested-images).aligncenter .blocks-gallery-item figure,.wp-block-gallery:not(.has-nested-images).aligncenter .blocks-gallery-item figure{justify-content:center}.wp-block-gallery:not(.is-cropped) .blocks-gallery-item{align-self:flex-start}figure.wp-block-gallery.has-nested-images{align-items:normal}.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){margin:0;width:calc(50% - var(--wp--style--unstable-gallery-gap, 16px)/2)}.wp-block-gallery.has-nested-images figure.wp-block-image{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;position:relative}.wp-block-gallery.has-nested-images figure.wp-block-image>a,.wp-block-gallery.has-nested-images figure.wp-block-image>div{flex-direction:column;flex-grow:1;margin:0}.wp-block-gallery.has-nested-images figure.wp-block-image img{display:block;height:auto;max-width:100%!important;width:auto}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption,.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before{bottom:0;left:0;max-height:100%;position:absolute;right:0}.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before{backdrop-filter:blur(3px);content:"";height:100%;-webkit-mask-image:linear-gradient(0deg,#000 20%,#0000);mask-image:linear-gradient(0deg,#000 20%,#0000);max-height:40%;pointer-events:none}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{box-sizing:border-box;color:#fff;font-size:13px;margin:0;overflow:auto;padding:1em;text-align:center;text-shadow:0 0 1.5px #000}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar{height:12px;width:12px}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track{background-color:initial}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:initial;border:3px solid #0000;border-radius:8px}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within::-webkit-scrollbar-thumb,.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus::-webkit-scrollbar-thumb,.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover::-webkit-scrollbar-thumb{background-color:#fffc}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{scrollbar-color:#0000 #0000;scrollbar-gutter:stable both-edges;scrollbar-width:thin}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus,.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within,.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover{scrollbar-color:#fffc #0000}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{will-change:transform}@media (hover:none){.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{scrollbar-color:#fffc #0000}}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{background:linear-gradient(0deg,#0006,#0000)}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption img{display:inline}.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a{color:inherit}.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border img{box-sizing:border-box}.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border>a,.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border>div,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded>a,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded>div{flex:1 1 auto}.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border figcaption,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption{background:none;color:inherit;flex:initial;margin:0;padding:10px 10px 9px;position:relative;text-shadow:none}.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border:before,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded:before{content:none}.wp-block-gallery.has-nested-images figcaption{flex-basis:100%;flex-grow:1;text-align:center}.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image){margin-bottom:auto;margin-top:0}.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image){align-self:inherit}.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>a,.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>div:not(.components-drop-zone){display:flex}.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img{flex:1 0 0%;height:100%;object-fit:cover;width:100%}.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image){width:100%}@media (min-width:600px){.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image){width:calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px)*.66667)}.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image){width:calc(25% - var(--wp--style--unstable-gallery-gap, 16px)*.75)}.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image){width:calc(20% - var(--wp--style--unstable-gallery-gap, 16px)*.8)}.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image){width:calc(16.66667% - var(--wp--style--unstable-gallery-gap, 16px)*.83333)}.wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image){width:calc(14.28571% - var(--wp--style--unstable-gallery-gap, 16px)*.85714)}.wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image){width:calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px)*.875)}.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image){width:calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px)*.66667)}.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2)~figure.wp-block-image:not(#individual-image){width:calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*.5)}.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:last-child{width:100%}}.wp-block-gallery.has-nested-images.alignleft,.wp-block-gallery.has-nested-images.alignright{max-width:420px;width:100%}.wp-block-gallery.has-nested-images.aligncenter{justify-content:center}.wp-block-group{box-sizing:border-box}:where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative}h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg}.wp-block-image>a,.wp-block-image>figure>a{display:inline-block}.wp-block-image img{box-sizing:border-box;height:auto;max-width:100%;vertical-align:bottom}@media not (prefers-reduced-motion){.wp-block-image img.hide{visibility:hidden}.wp-block-image img.show{animation:show-content-image .4s}}.wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{border-radius:inherit}.wp-block-image.has-custom-border img{box-sizing:border-box}.wp-block-image.aligncenter{text-align:center}.wp-block-image.alignfull>a,.wp-block-image.alignwide>a{width:100%}.wp-block-image.alignfull img,.wp-block-image.alignwide img{height:auto;width:100%}.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{display:table}.wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption{caption-side:bottom;display:table-caption}.wp-block-image .alignleft{float:left;margin:.5em 1em .5em 0}.wp-block-image .alignright{float:right;margin:.5em 0 .5em 1em}.wp-block-image .aligncenter{margin-left:auto;margin-right:auto}.wp-block-image :where(figcaption){margin-bottom:1em;margin-top:.5em}.wp-block-image.is-style-circle-mask img{border-radius:9999px}@supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){.wp-block-image.is-style-circle-mask img{border-radius:0;-webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');mask-mode:alpha;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}}:root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img){border-radius:9999px}.wp-block-image figure{margin:0}.wp-lightbox-container{display:flex;flex-direction:column;position:relative}.wp-lightbox-container img{cursor:zoom-in}.wp-lightbox-container img:hover+button{opacity:1}.wp-lightbox-container button{align-items:center;backdrop-filter:blur(16px) saturate(180%);background-color:#5a5a5a40;border:none;border-radius:4px;cursor:zoom-in;display:flex;height:20px;justify-content:center;opacity:0;padding:0;position:absolute;right:16px;text-align:center;top:16px;width:20px;z-index:100}@media not (prefers-reduced-motion){.wp-lightbox-container button{transition:opacity .2s ease}}.wp-lightbox-container button:focus-visible{outline:3px auto #5a5a5a40;outline:3px auto -webkit-focus-ring-color;outline-offset:3px}.wp-lightbox-container button:hover{cursor:pointer;opacity:1}.wp-lightbox-container button:focus{opacity:1}.wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){background-color:#5a5a5a40;border:none}.wp-lightbox-overlay{box-sizing:border-box;cursor:zoom-out;height:100vh;left:0;overflow:hidden;position:fixed;top:0;visibility:hidden;width:100%;z-index:100000}.wp-lightbox-overlay .close-button{align-items:center;cursor:pointer;display:flex;justify-content:center;min-height:40px;min-width:40px;padding:0;position:absolute;right:calc(env(safe-area-inset-right) + 16px);top:calc(env(safe-area-inset-top) + 16px);z-index:5000000}.wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){background:none;border:none}.wp-lightbox-overlay .lightbox-image-container{height:var(--wp--lightbox-container-height);left:50%;overflow:hidden;position:absolute;top:50%;transform:translate(-50%,-50%);transform-origin:top left;width:var(--wp--lightbox-container-width);z-index:9999999999}.wp-lightbox-overlay .wp-block-image{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:center;margin:0;position:relative;transform-origin:0 0;width:100%;z-index:3000000}.wp-lightbox-overlay .wp-block-image img{height:var(--wp--lightbox-image-height);min-height:var(--wp--lightbox-image-height);min-width:var(--wp--lightbox-image-width);width:var(--wp--lightbox-image-width)}.wp-lightbox-overlay .wp-block-image figcaption{display:none}.wp-lightbox-overlay button{background:none;border:none}.wp-lightbox-overlay .scrim{background-color:#fff;height:100%;opacity:.9;position:absolute;width:100%;z-index:2000000}.wp-lightbox-overlay.active{visibility:visible}@media not (prefers-reduced-motion){.wp-lightbox-overlay.active{animation:turn-on-visibility .25s both}.wp-lightbox-overlay.active img{animation:turn-on-visibility .35s both}.wp-lightbox-overlay.show-closing-animation:not(.active){animation:turn-off-visibility .35s both}.wp-lightbox-overlay.show-closing-animation:not(.active) img{animation:turn-off-visibility .25s both}.wp-lightbox-overlay.zoom.active{animation:none;opacity:1;visibility:visible}.wp-lightbox-overlay.zoom.active .lightbox-image-container{animation:lightbox-zoom-in .4s}.wp-lightbox-overlay.zoom.active .lightbox-image-container img{animation:none}.wp-lightbox-overlay.zoom.active .scrim{animation:turn-on-visibility .4s forwards}.wp-lightbox-overlay.zoom.show-closing-animation:not(.active){animation:none}.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{animation:lightbox-zoom-out .4s}.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{animation:none}.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{animation:turn-off-visibility .4s forwards}}@keyframes show-content-image{0%{visibility:hidden}99%{visibility:hidden}to{visibility:visible}}@keyframes turn-on-visibility{0%{opacity:0}to{opacity:1}}@keyframes turn-off-visibility{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:visible}to{opacity:0;visibility:hidden}}@keyframes lightbox-zoom-in{0%{transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale))}to{transform:translate(-50%,-50%) scale(1)}}@keyframes lightbox-zoom-out{0%{transform:translate(-50%,-50%) scale(1);visibility:visible}99%{visibility:visible}to{transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));visibility:hidden}}ol.wp-block-latest-comments{box-sizing:border-box;margin-left:0}:where(.wp-block-latest-comments:not([style*=line-height] .wp-block-latest-comments__comment)){line-height:1.1}:where(.wp-block-latest-comments:not([style*=line-height] .wp-block-latest-comments__comment-excerpt p)){line-height:1.8}.has-dates :where(.wp-block-latest-comments:not([style*=line-height])),.has-excerpts :where(.wp-block-latest-comments:not([style*=line-height])){line-height:1.5}.wp-block-latest-comments .wp-block-latest-comments{padding-left:0}.wp-block-latest-comments__comment{list-style:none;margin-bottom:1em}.has-avatars .wp-block-latest-comments__comment{list-style:none;min-height:2.25em}.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta{margin-left:3.25em}.wp-block-latest-comments__comment-excerpt p{font-size:.875em;margin:.36em 0 1.4em}.wp-block-latest-comments__comment-date{display:block;font-size:.75em}.wp-block-latest-comments .avatar,.wp-block-latest-comments__comment-avatar{border-radius:1.5em;display:block;float:left;height:2.5em;margin-right:.75em;width:2.5em}.wp-block-latest-comments[class*=-font-size] a,.wp-block-latest-comments[style*=font-size] a{font-size:inherit}.wp-block-latest-posts{box-sizing:border-box}.wp-block-latest-posts.alignleft{margin-right:2em}.wp-block-latest-posts.alignright{margin-left:2em}.wp-block-latest-posts.wp-block-latest-posts__list{list-style:none}.wp-block-latest-posts.wp-block-latest-posts__list li{clear:both;overflow-wrap:break-word}.wp-block-latest-posts.is-grid{display:flex;flex-wrap:wrap}.wp-block-latest-posts.is-grid li{margin:0 1.25em 1.25em 0;width:100%}@media (min-width:600px){.wp-block-latest-posts.columns-2 li{width:calc(50% - .625em)}.wp-block-latest-posts.columns-2 li:nth-child(2n){margin-right:0}.wp-block-latest-posts.columns-3 li{width:calc(33.33333% - .83333em)}.wp-block-latest-posts.columns-3 li:nth-child(3n){margin-right:0}.wp-block-latest-posts.columns-4 li{width:calc(25% - .9375em)}.wp-block-latest-posts.columns-4 li:nth-child(4n){margin-right:0}.wp-block-latest-posts.columns-5 li{width:calc(20% - 1em)}.wp-block-latest-posts.columns-5 li:nth-child(5n){margin-right:0}.wp-block-latest-posts.columns-6 li{width:calc(16.66667% - 1.04167em)}.wp-block-latest-posts.columns-6 li:nth-child(6n){margin-right:0}}:root :where(.wp-block-latest-posts.is-grid){padding:0}:root :where(.wp-block-latest-posts.wp-block-latest-posts__list){padding-left:0}.wp-block-latest-posts__post-author,.wp-block-latest-posts__post-date{display:block;font-size:.8125em}.wp-block-latest-posts__post-excerpt,.wp-block-latest-posts__post-full-content{margin-bottom:1em;margin-top:.5em}.wp-block-latest-posts__featured-image a{display:inline-block}.wp-block-latest-posts__featured-image img{height:auto;max-width:100%;width:auto}.wp-block-latest-posts__featured-image.alignleft{float:left;margin-right:1em}.wp-block-latest-posts__featured-image.alignright{float:right;margin-left:1em}.wp-block-latest-posts__featured-image.aligncenter{margin-bottom:1em;text-align:center}ol,ul{box-sizing:border-box}:root :where(.wp-block-list.has-background){padding:1.25em 2.375em}.wp-block-loginout{box-sizing:border-box}.wp-block-math{overflow-x:auto;overflow-y:hidden}.wp-block-media-text{box-sizing:border-box;
  /*!rtl:begin:ignore*/direction:ltr;
  /*!rtl:end:ignore*/display:grid;grid-template-columns:50% 1fr;grid-template-rows:auto}.wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr 50%}.wp-block-media-text.is-vertically-aligned-top>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-top>.wp-block-media-text__media{align-self:start}.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__media,.wp-block-media-text>.wp-block-media-text__content,.wp-block-media-text>.wp-block-media-text__media{align-self:center}.wp-block-media-text.is-vertically-aligned-bottom>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-bottom>.wp-block-media-text__media{align-self:end}.wp-block-media-text>.wp-block-media-text__media{
  /*!rtl:begin:ignore*/grid-column:1;grid-row:1;
  /*!rtl:end:ignore*/margin:0}.wp-block-media-text>.wp-block-media-text__content{direction:ltr;
  /*!rtl:begin:ignore*/grid-column:2;grid-row:1;
  /*!rtl:end:ignore*/padding:0 8%;word-break:break-word}.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__media{
  /*!rtl:begin:ignore*/grid-column:2;grid-row:1
  /*!rtl:end:ignore*/}.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content{
  /*!rtl:begin:ignore*/grid-column:1;grid-row:1
  /*!rtl:end:ignore*/}.wp-block-media-text__media a{display:block}.wp-block-media-text__media img,.wp-block-media-text__media video{height:auto;max-width:unset;vertical-align:middle;width:100%}.wp-block-media-text.is-image-fill>.wp-block-media-text__media{background-size:cover;height:100%;min-height:250px}.wp-block-media-text.is-image-fill>.wp-block-media-text__media>a{display:block;height:100%}.wp-block-media-text.is-image-fill>.wp-block-media-text__media img{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media{height:100%;min-height:250px;position:relative}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media>a{display:block;height:100%}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media img{height:100%;object-fit:cover;position:absolute;width:100%}@media (max-width:600px){.wp-block-media-text.is-stacked-on-mobile{grid-template-columns:100%!important}.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__media{grid-column:1;grid-row:1}.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content{grid-column:1;grid-row:2}}.wp-block-navigation{position:relative}.wp-block-navigation ul{margin-bottom:0;margin-left:0;margin-top:0;padding-left:0}.wp-block-navigation ul,.wp-block-navigation ul li{list-style:none;padding:0}.wp-block-navigation .wp-block-navigation-item{align-items:center;display:flex;position:relative}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{display:none}.wp-block-navigation .wp-block-navigation-item__content{display:block;z-index:1}.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus{text-decoration:underline}.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus{text-decoration:line-through}.wp-block-navigation :where(a),.wp-block-navigation :where(a:active),.wp-block-navigation :where(a:focus){text-decoration:none}.wp-block-navigation .wp-block-navigation__submenu-icon{align-self:center;background-color:inherit;border:none;color:currentColor;display:inline-block;font-size:inherit;height:.6em;line-height:0;margin-left:.25em;padding:0;width:.6em}.wp-block-navigation .wp-block-navigation__submenu-icon svg{display:inline-block;stroke:currentColor;height:inherit;margin-top:.075em;width:inherit}.wp-block-navigation{--navigation-layout-justification-setting:flex-start;--navigation-layout-direction:row;--navigation-layout-wrap:wrap;--navigation-layout-justify:flex-start;--navigation-layout-align:center}.wp-block-navigation.is-vertical{--navigation-layout-direction:column;--navigation-layout-justify:initial;--navigation-layout-align:flex-start}.wp-block-navigation.no-wrap{--navigation-layout-wrap:nowrap}.wp-block-navigation.items-justified-center{--navigation-layout-justification-setting:center;--navigation-layout-justify:center}.wp-block-navigation.items-justified-center.is-vertical{--navigation-layout-align:center}.wp-block-navigation.items-justified-right{--navigation-layout-justification-setting:flex-end;--navigation-layout-justify:flex-end}.wp-block-navigation.items-justified-right.is-vertical{--navigation-layout-align:flex-end}.wp-block-navigation.items-justified-space-between{--navigation-layout-justification-setting:space-between;--navigation-layout-justify:space-between}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{align-items:normal;background-color:inherit;color:inherit;display:flex;flex-direction:column;opacity:0;position:absolute;z-index:2}@media not (prefers-reduced-motion){.wp-block-navigation .has-child .wp-block-navigation__submenu-container{transition:opacity .1s linear}}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{height:0;overflow:hidden;visibility:hidden;width:0}.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{display:flex;flex-grow:1;padding:.5em 1em}.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{margin-left:auto;margin-right:0}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{margin:0}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{left:-1px;top:100%}@media (min-width:782px){.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:100%;top:-1px}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{background:#0000;content:"";display:block;height:100%;position:absolute;right:100%;width:.5em}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{margin-right:.25em}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg{transform:rotate(-90deg)}}.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container{height:auto;min-width:200px;opacity:1;overflow:visible;visibility:visible;width:auto}.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{left:0;top:100%}@media (min-width:782px){.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:100%;top:0}}.wp-block-navigation-submenu{display:flex;position:relative}.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{stroke:currentColor}button.wp-block-navigation-item__content{background-color:initial;border:none;color:currentColor;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;text-transform:inherit}.wp-block-navigation-submenu__toggle{cursor:pointer}.wp-block-navigation-submenu__toggle[aria-expanded=true]+.wp-block-navigation__submenu-icon>svg,.wp-block-navigation-submenu__toggle[aria-expanded=true]>svg{transform:rotate(180deg)}.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{padding-left:0;padding-right:.85em}.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon{margin-left:-.6em;pointer-events:none}.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle){padding:0}.wp-block-navigation .wp-block-page-list,.wp-block-navigation__container,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-container,.wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-dialog{gap:inherit}:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)){padding:.5em 1em}:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content){padding:.5em 1em}.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container{left:auto;right:0}.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:-1px;right:-1px}@media (min-width:782px){.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:auto;right:100%}}.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{background-color:#fff;border:1px solid #00000026}.wp-block-navigation.has-background .wp-block-navigation__submenu-container{background-color:inherit}.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container{color:#000}.wp-block-navigation__container{align-items:var(--navigation-layout-align,initial);display:flex;flex-direction:var(--navigation-layout-direction,initial);flex-wrap:var(--navigation-layout-wrap,wrap);justify-content:var(--navigation-layout-justify,initial);list-style:none;margin:0;padding-left:0}.wp-block-navigation__container .is-responsive{display:none}.wp-block-navigation__container:only-child,.wp-block-page-list:only-child{flex-grow:1}@keyframes overlay-menu__fade-in-animation{0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}.wp-block-navigation__responsive-container{bottom:0;display:none;left:0;position:fixed;right:0;top:0}.wp-block-navigation__responsive-container :where(.wp-block-navigation-item a){color:inherit}.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{align-items:var(--navigation-layout-align,initial);display:flex;flex-direction:var(--navigation-layout-direction,initial);flex-wrap:var(--navigation-layout-wrap,wrap);justify-content:var(--navigation-layout-justify,initial)}.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open){background-color:inherit!important;color:inherit!important}.wp-block-navigation__responsive-container.is-menu-open{background-color:inherit;display:flex;flex-direction:column}@media not (prefers-reduced-motion){.wp-block-navigation__responsive-container.is-menu-open{animation:overlay-menu__fade-in-animation .1s ease-out;animation-fill-mode:forwards}}.wp-block-navigation__responsive-container.is-menu-open{overflow:auto;padding:clamp(1rem,var(--wp--style--root--padding-top),20rem) clamp(1rem,var(--wp--style--root--padding-right),20rem) clamp(1rem,var(--wp--style--root--padding-bottom),20rem) clamp(1rem,var(--wp--style--root--padding-left),20rem);z-index:100000}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{align-items:var(--navigation-layout-justification-setting,inherit);display:flex;flex-direction:column;flex-wrap:nowrap;overflow:visible;padding-top:calc(2rem + 24px)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{justify-content:flex-start}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{display:none}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{border:none;height:auto;min-width:200px;opacity:1;overflow:initial;padding-left:2rem;padding-right:2rem;position:static;visibility:visible;width:auto}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{gap:inherit}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{padding-top:var(--wp--style--block-gap,2em)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{padding:0}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{align-items:var(--navigation-layout-justification-setting,initial);display:flex;flex-direction:column}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list{background:#0000!important;color:inherit!important}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{left:auto;right:auto}@media (min-width:600px){.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){background-color:inherit;display:block;position:relative;width:100%;z-index:auto}.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{display:none}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{left:0}}.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{background-color:#fff}.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open{color:#000}.wp-block-navigation__toggle_button_label{font-size:1rem;font-weight:700}.wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{background:#0000;border:none;color:currentColor;cursor:pointer;margin:0;padding:0;text-transform:inherit;vertical-align:middle}.wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{fill:currentColor;display:block;height:24px;pointer-events:none;width:24px}.wp-block-navigation__responsive-container-open{display:flex}.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{font-family:inherit;font-size:inherit;font-weight:inherit}@media (min-width:600px){.wp-block-navigation__responsive-container-open:not(.always-shown){display:none}}.wp-block-navigation__responsive-container-close{position:absolute;right:0;top:0;z-index:2}.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close{font-family:inherit;font-size:inherit;font-weight:inherit}.wp-block-navigation__responsive-close{width:100%}.has-modal-open .wp-block-navigation__responsive-close{margin-left:auto;margin-right:auto;max-width:var(--wp--style--global--wide-size,100%)}.wp-block-navigation__responsive-close:focus{outline:none}.is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-container-content,.is-menu-open .wp-block-navigation__responsive-dialog{box-sizing:border-box}.wp-block-navigation__responsive-dialog{position:relative}.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{margin-top:46px}@media (min-width:782px){.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{margin-top:32px}}html.has-modal-open{overflow:hidden}.wp-block-navigation .wp-block-navigation-item__label{overflow-wrap:break-word}.wp-block-navigation .wp-block-navigation-item__description{display:none}.link-ui-tools{outline:1px solid #f0f0f0;padding:8px}.link-ui-block-inserter{padding-top:8px}.link-ui-block-inserter__back{margin-left:8px;text-transform:uppercase}.wp-block-navigation .wp-block-page-list{align-items:var(--navigation-layout-align,initial);background-color:inherit;display:flex;flex-direction:var(--navigation-layout-direction,initial);flex-wrap:var(--navigation-layout-wrap,wrap);justify-content:var(--navigation-layout-justify,initial)}.wp-block-navigation .wp-block-navigation-item{background-color:inherit}.wp-block-page-list{box-sizing:border-box}.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}.wp-block-post-author{box-sizing:border-box;display:flex;flex-wrap:wrap}.wp-block-post-author__byline{font-size:.5em;margin-bottom:0;margin-top:0;width:100%}.wp-block-post-author__avatar{margin-right:1em}.wp-block-post-author__bio{font-size:.7em;margin-bottom:.7em}.wp-block-post-author__content{flex-basis:0;flex-grow:1}.wp-block-post-author__name{margin:0}.wp-block-post-author-biography{box-sizing:border-box}:where(.wp-block-post-comments-form input:not([type=submit])),:where(.wp-block-post-comments-form textarea){border:1px solid #949494;font-family:inherit;font-size:1em}:where(.wp-block-post-comments-form input:where(:not([type=submit]):not([type=checkbox]))),:where(.wp-block-post-comments-form textarea){padding:calc(.667em + 2px)}.wp-block-post-comments-form{box-sizing:border-box}.wp-block-post-comments-form[style*=font-weight] :where(.comment-reply-title){font-weight:inherit}.wp-block-post-comments-form[style*=font-family] :where(.comment-reply-title){font-family:inherit}.wp-block-post-comments-form[class*=-font-size] :where(.comment-reply-title),.wp-block-post-comments-form[style*=font-size] :where(.comment-reply-title){font-size:inherit}.wp-block-post-comments-form[style*=line-height] :where(.comment-reply-title){line-height:inherit}.wp-block-post-comments-form[style*=font-style] :where(.comment-reply-title){font-style:inherit}.wp-block-post-comments-form[style*=letter-spacing] :where(.comment-reply-title){letter-spacing:inherit}.wp-block-post-comments-form :where(input[type=submit]){box-shadow:none;cursor:pointer;display:inline-block;overflow-wrap:break-word;text-align:center}.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]),.wp-block-post-comments-form .comment-form textarea{box-sizing:border-box;display:block;width:100%}.wp-block-post-comments-form .comment-form-author label,.wp-block-post-comments-form .comment-form-email label,.wp-block-post-comments-form .comment-form-url label{display:block;margin-bottom:.25em}.wp-block-post-comments-form .comment-form-cookies-consent{display:flex;gap:.25em}.wp-block-post-comments-form .comment-form-cookies-consent #wp-comment-cookies-consent{margin-top:.35em}.wp-block-post-comments-form .comment-reply-title{margin-bottom:0}.wp-block-post-comments-form .comment-reply-title :where(small){font-size:var(--wp--preset--font-size--medium,smaller);margin-left:.5em}.wp-block-post-comments-count{box-sizing:border-box}.wp-block-post-content{display:flow-root}.wp-block-post-comments-link,.wp-block-post-date{box-sizing:border-box}:where(.wp-block-post-excerpt){box-sizing:border-box;margin-bottom:var(--wp--style--block-gap);margin-top:var(--wp--style--block-gap)}.wp-block-post-excerpt__excerpt{margin-bottom:0;margin-top:0}.wp-block-post-excerpt__more-text{margin-bottom:0;margin-top:var(--wp--style--block-gap)}.wp-block-post-excerpt__more-link{display:inline-block}.wp-block-post-featured-image{margin-left:0;margin-right:0}.wp-block-post-featured-image a{display:block;height:100%}.wp-block-post-featured-image :where(img){box-sizing:border-box;height:auto;max-width:100%;vertical-align:bottom;width:100%}.wp-block-post-featured-image.alignfull img,.wp-block-post-featured-image.alignwide img{width:100%}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim{background-color:#000;inset:0;position:absolute}.wp-block-post-featured-image{position:relative}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-gradient{background-color:initial}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-0{opacity:0}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-10{opacity:.1}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-20{opacity:.2}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-30{opacity:.3}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-40{opacity:.4}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-50{opacity:.5}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-60{opacity:.6}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-70{opacity:.7}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-80{opacity:.8}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-90{opacity:.9}.wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-background-dim-100{opacity:1}.wp-block-post-featured-image:where(.alignleft,.alignright){width:100%}.wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous{display:inline-block;margin-right:1ch}.wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous:not(.is-arrow-chevron){transform:scaleX(1)}.wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-next{display:inline-block;margin-left:1ch}.wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-next:not(.is-arrow-chevron){transform:scaleX(1)}.wp-block-post-navigation-link.has-text-align-left[style*="writing-mode: vertical-lr"],.wp-block-post-navigation-link.has-text-align-right[style*="writing-mode: vertical-rl"]{rotate:180deg}.wp-block-post-terms{box-sizing:border-box}.wp-block-post-terms .wp-block-post-terms__separator{white-space:pre-wrap}.wp-block-post-time-to-read,.wp-block-post-title{box-sizing:border-box}.wp-block-post-title{word-break:break-word}.wp-block-post-title :where(a){display:inline-block;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-decoration:inherit}.wp-block-post-author-name{box-sizing:border-box}.wp-block-preformatted{box-sizing:border-box;white-space:pre-wrap}:where(.wp-block-preformatted.has-background){padding:1.25em 2.375em}.wp-block-pullquote{box-sizing:border-box;margin:0 0 1em;overflow-wrap:break-word;padding:4em 0;text-align:center}.wp-block-pullquote blockquote,.wp-block-pullquote p{color:inherit}.wp-block-pullquote blockquote{margin:0}.wp-block-pullquote p{margin-top:0}.wp-block-pullquote p:last-child{margin-bottom:0}.wp-block-pullquote.alignleft,.wp-block-pullquote.alignright{max-width:420px}.wp-block-pullquote cite,.wp-block-pullquote footer{position:relative}.wp-block-pullquote .has-text-color a{color:inherit}.wp-block-pullquote.has-text-align-left blockquote{text-align:left}.wp-block-pullquote.has-text-align-right blockquote{text-align:right}.wp-block-pullquote.has-text-align-center blockquote{text-align:center}.wp-block-pullquote.is-style-solid-color{border:none}.wp-block-pullquote.is-style-solid-color blockquote{margin-left:auto;margin-right:auto;max-width:60%}.wp-block-pullquote.is-style-solid-color blockquote p{font-size:2em;margin-bottom:0;margin-top:0}.wp-block-pullquote.is-style-solid-color blockquote cite{font-style:normal;text-transform:none}.wp-block-pullquote :where(cite){color:inherit;display:block}.wp-block-post-template{box-sizing:border-box;list-style:none;margin-bottom:0;margin-top:0;max-width:100%;padding:0}.wp-block-post-template.is-flex-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.25em}.wp-block-post-template.is-flex-container>li{margin:0;width:100%}@media (min-width:600px){.wp-block-post-template.is-flex-container.is-flex-container.columns-2>li{width:calc(50% - .625em)}.wp-block-post-template.is-flex-container.is-flex-container.columns-3>li{width:calc(33.33333% - .83333em)}.wp-block-post-template.is-flex-container.is-flex-container.columns-4>li{width:calc(25% - .9375em)}.wp-block-post-template.is-flex-container.is-flex-container.columns-5>li{width:calc(20% - 1em)}.wp-block-post-template.is-flex-container.is-flex-container.columns-6>li{width:calc(16.66667% - 1.04167em)}}@media (max-width:600px){.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid{grid-template-columns:1fr}}.wp-block-post-template-is-layout-constrained>li>.alignright,.wp-block-post-template-is-layout-flow>li>.alignright{float:right;margin-inline-end:0;margin-inline-start:2em}.wp-block-post-template-is-layout-constrained>li>.alignleft,.wp-block-post-template-is-layout-flow>li>.alignleft{float:left;margin-inline-end:2em;margin-inline-start:0}.wp-block-post-template-is-layout-constrained>li>.aligncenter,.wp-block-post-template-is-layout-flow>li>.aligncenter{margin-inline-end:auto;margin-inline-start:auto}.wp-block-query-pagination.is-content-justification-space-between>.wp-block-query-pagination-next:last-of-type{margin-inline-start:auto}.wp-block-query-pagination.is-content-justification-space-between>.wp-block-query-pagination-previous:first-child{margin-inline-end:auto}.wp-block-query-pagination .wp-block-query-pagination-previous-arrow{display:inline-block;margin-right:1ch}.wp-block-query-pagination .wp-block-query-pagination-previous-arrow:not(.is-arrow-chevron){transform:scaleX(1)}.wp-block-query-pagination .wp-block-query-pagination-next-arrow{display:inline-block;margin-left:1ch}.wp-block-query-pagination .wp-block-query-pagination-next-arrow:not(.is-arrow-chevron){transform:scaleX(1)}.wp-block-query-pagination.aligncenter{justify-content:center}.wp-block-query-title,.wp-block-query-total,.wp-block-quote{box-sizing:border-box}.wp-block-quote{overflow-wrap:break-word}.wp-block-quote.is-large:where(:not(.is-style-plain)),.wp-block-quote.is-style-large:where(:not(.is-style-plain)){margin-bottom:1em;padding:0 1em}.wp-block-quote.is-large:where(:not(.is-style-plain)) p,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) p{font-size:1.5em;font-style:italic;line-height:1.6}.wp-block-quote.is-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-large:where(:not(.is-style-plain)) footer,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) footer{font-size:1.125em;text-align:right}.wp-block-quote>cite{display:block}.wp-block-read-more{display:block;width:fit-content}.wp-block-read-more:where(:not([style*=text-decoration])){text-decoration:none}.wp-block-read-more:where(:not([style*=text-decoration])):active,.wp-block-read-more:where(:not([style*=text-decoration])):focus{text-decoration:none}ul.wp-block-rss.alignleft{margin-right:2em}ul.wp-block-rss.alignright{margin-left:2em}ul.wp-block-rss.is-grid{display:flex;flex-wrap:wrap;padding:0}ul.wp-block-rss.is-grid li{margin:0 1em 1em 0;width:100%}@media (min-width:600px){ul.wp-block-rss.columns-2 li{width:calc(50% - 1em)}ul.wp-block-rss.columns-3 li{width:calc(33.33333% - 1em)}ul.wp-block-rss.columns-4 li{width:calc(25% - 1em)}ul.wp-block-rss.columns-5 li{width:calc(20% - 1em)}ul.wp-block-rss.columns-6 li{width:calc(16.66667% - 1em)}}.wp-block-rss__item-author,.wp-block-rss__item-publish-date{display:block;font-size:.8125em}.wp-block-rss{box-sizing:border-box;list-style:none;padding:0}.wp-block-search__button{margin-left:10px;word-break:normal}.wp-block-search__button.has-icon{line-height:0}.wp-block-search__button svg{height:1.25em;min-height:24px;min-width:24px;width:1.25em;fill:currentColor;vertical-align:text-bottom}:where(.wp-block-search__button){border:1px solid #ccc;padding:6px 10px}.wp-block-search__inside-wrapper{display:flex;flex:auto;flex-wrap:nowrap;max-width:100%}.wp-block-search__label{width:100%}.wp-block-search.wp-block-search__button-only .wp-block-search__button{box-sizing:border-box;display:flex;flex-shrink:0;justify-content:center;margin-left:0;max-width:100%}.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper{min-width:0!important;transition-property:width}.wp-block-search.wp-block-search__button-only .wp-block-search__input{flex-basis:100%;transition-duration:.3s}.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden,.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper{overflow:hidden}.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input{border-left-width:0!important;border-right-width:0!important;flex-basis:0;flex-grow:0;margin:0;min-width:0!important;padding-left:0!important;padding-right:0!important;width:0!important}:where(.wp-block-search__input){appearance:none;border:1px solid #949494;flex-grow:1;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin-left:0;margin-right:0;min-width:3rem;padding:8px;text-decoration:unset!important;text-transform:inherit}:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper){background-color:#fff;border:1px solid #949494;box-sizing:border-box;padding:4px}:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input{border:none;border-radius:0;padding:0 4px}:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus{outline:none}:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button){padding:4px 8px}.wp-block-search.aligncenter .wp-block-search__inside-wrapper{margin:auto}.wp-block[data-align=right] .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper{float:right}.wp-block-separator{border:none;border-top:2px solid}:root :where(.wp-block-separator.is-style-dots){height:auto;line-height:1;text-align:center}:root :where(.wp-block-separator.is-style-dots):before{color:currentColor;content:"···";font-family:serif;font-size:1.5em;letter-spacing:2em;padding-left:2em}.wp-block-separator.is-style-dots{background:none!important;border:none!important}.wp-block-site-logo{box-sizing:border-box;line-height:0}.wp-block-site-logo a{display:inline-block;line-height:0}.wp-block-site-logo.is-default-size img{height:auto;width:120px}.wp-block-site-logo img{height:auto;max-width:100%}.wp-block-site-logo a,.wp-block-site-logo img{border-radius:inherit}.wp-block-site-logo.aligncenter{margin-left:auto;margin-right:auto;text-align:center}:root :where(.wp-block-site-logo.is-style-rounded){border-radius:9999px}.wp-block-site-tagline,.wp-block-site-title{box-sizing:border-box}.wp-block-site-title :where(a){color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-decoration:inherit}.wp-block-social-links{background:none;box-sizing:border-box;margin-left:0;padding-left:0;padding-right:0;text-indent:0}.wp-block-social-links .wp-social-link a,.wp-block-social-links .wp-social-link a:hover{border-bottom:0;box-shadow:none;text-decoration:none}.wp-block-social-links .wp-social-link svg{height:1em;width:1em}.wp-block-social-links .wp-social-link span:not(.screen-reader-text){font-size:.65em;margin-left:.5em;margin-right:.5em}.wp-block-social-links.has-small-icon-size{font-size:16px}.wp-block-social-links,.wp-block-social-links.has-normal-icon-size{font-size:24px}.wp-block-social-links.has-large-icon-size{font-size:36px}.wp-block-social-links.has-huge-icon-size{font-size:48px}.wp-block-social-links.aligncenter{display:flex;justify-content:center}.wp-block-social-links.alignright{justify-content:flex-end}.wp-block-social-link{border-radius:9999px;display:block}@media not (prefers-reduced-motion){.wp-block-social-link{transition:transform .1s ease}}.wp-block-social-link{height:auto}.wp-block-social-link a{align-items:center;display:flex;line-height:0}.wp-block-social-link:hover{transform:scale(1.1)}.wp-block-social-links .wp-block-social-link.wp-social-link{display:inline-block;margin:0;padding:0}.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited{color:currentColor;fill:currentColor}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link{background-color:#f0f0f0;color:#444}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-amazon{background-color:#f90;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-bandcamp{background-color:#1ea0c3;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-behance{background-color:#0757fe;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-bluesky{background-color:#0a7aff;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-codepen{background-color:#1e1f26;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-deviantart{background-color:#02e49b;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-discord{background-color:#5865f2;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dribbble{background-color:#e94c89;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dropbox{background-color:#4280ff;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-etsy{background-color:#f45800;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-facebook{background-color:#0866ff;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-fivehundredpx{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-flickr{background-color:#0461dd;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-foursquare{background-color:#e65678;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-github{background-color:#24292d;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-goodreads{background-color:#eceadd;color:#382110}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-google{background-color:#ea4434;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-gravatar{background-color:#1d4fc4;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-instagram{background-color:#f00075;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-lastfm{background-color:#e21b24;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-linkedin{background-color:#0d66c2;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-mastodon{background-color:#3288d4;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-medium{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-meetup{background-color:#f6405f;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-patreon{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-pinterest{background-color:#e60122;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-pocket{background-color:#ef4155;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-reddit{background-color:#ff4500;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-skype{background-color:#0478d7;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-snapchat{background-color:#fefc00;color:#fff;stroke:#000}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-soundcloud{background-color:#ff5600;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-spotify{background-color:#1bd760;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-telegram{background-color:#2aabee;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-threads{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-tiktok{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-tumblr{background-color:#011835;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-twitch{background-color:#6440a4;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-twitter{background-color:#1da1f2;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-vimeo{background-color:#1eb7ea;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-vk{background-color:#4680c2;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-wordpress{background-color:#3499cd;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-whatsapp{background-color:#25d366;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-x{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-yelp{background-color:#d32422;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-youtube{background-color:red;color:#fff}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link{background:none}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link svg{height:1.25em;width:1.25em}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-amazon{color:#f90}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-bandcamp{color:#1ea0c3}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-behance{color:#0757fe}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-bluesky{color:#0a7aff}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-codepen{color:#1e1f26}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-deviantart{color:#02e49b}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-discord{color:#5865f2}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dribbble{color:#e94c89}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dropbox{color:#4280ff}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-etsy{color:#f45800}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-facebook{color:#0866ff}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-fivehundredpx{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-flickr{color:#0461dd}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-foursquare{color:#e65678}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-github{color:#24292d}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-goodreads{color:#382110}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-google{color:#ea4434}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-gravatar{color:#1d4fc4}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-instagram{color:#f00075}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-lastfm{color:#e21b24}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-linkedin{color:#0d66c2}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-mastodon{color:#3288d4}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-medium{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-meetup{color:#f6405f}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-patreon{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-pinterest{color:#e60122}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-pocket{color:#ef4155}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-reddit{color:#ff4500}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-skype{color:#0478d7}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-snapchat{color:#fff;stroke:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-soundcloud{color:#ff5600}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-spotify{color:#1bd760}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-telegram{color:#2aabee}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-threads{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-tiktok{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-tumblr{color:#011835}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-twitch{color:#6440a4}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-twitter{color:#1da1f2}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-vimeo{color:#1eb7ea}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-vk{color:#4680c2}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-whatsapp{color:#25d366}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-wordpress{color:#3499cd}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-x{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-yelp{color:#d32422}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-youtube{color:red}.wp-block-social-links.is-style-pill-shape .wp-social-link{width:auto}:root :where(.wp-block-social-links .wp-social-link a){padding:.25em}:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a){padding:0}:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a){padding-left:.6666666667em;padding-right:.6666666667em}.wp-block-social-links:not(.has-icon-color):not(.has-icon-background-color) .wp-social-link-snapchat .wp-block-social-link-label{color:#000}.wp-block-spacer{clear:both}.wp-block-tag-cloud{box-sizing:border-box}.wp-block-tag-cloud.aligncenter{justify-content:center;text-align:center}.wp-block-tag-cloud a{display:inline-block;margin-right:5px}.wp-block-tag-cloud span{display:inline-block;margin-left:5px;text-decoration:none}:root :where(.wp-block-tag-cloud.is-style-outline){display:flex;flex-wrap:wrap;gap:1ch}:root :where(.wp-block-tag-cloud.is-style-outline a){border:1px solid;font-size:unset!important;margin-right:0;padding:1ch 2ch;text-decoration:none!important}.wp-block-table{overflow-x:auto}.wp-block-table table{border-collapse:collapse;width:100%}.wp-block-table thead{border-bottom:3px solid}.wp-block-table tfoot{border-top:3px solid}.wp-block-table td,.wp-block-table th{border:1px solid;padding:.5em}.wp-block-table .has-fixed-layout{table-layout:fixed;width:100%}.wp-block-table .has-fixed-layout td,.wp-block-table .has-fixed-layout th{word-break:break-word}.wp-block-table.aligncenter,.wp-block-table.alignleft,.wp-block-table.alignright{display:table;width:auto}.wp-block-table.aligncenter td,.wp-block-table.aligncenter th,.wp-block-table.alignleft td,.wp-block-table.alignleft th,.wp-block-table.alignright td,.wp-block-table.alignright th{word-break:break-word}.wp-block-table .has-subtle-light-gray-background-color{background-color:#f3f4f5}.wp-block-table .has-subtle-pale-green-background-color{background-color:#e9fbe5}.wp-block-table .has-subtle-pale-blue-background-color{background-color:#e7f5fe}.wp-block-table .has-subtle-pale-pink-background-color{background-color:#fcf0ef}.wp-block-table.is-style-stripes{background-color:initial;border-collapse:inherit;border-spacing:0}.wp-block-table.is-style-stripes tbody tr:nth-child(odd){background-color:#f0f0f0}.wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd){background-color:#f3f4f5}.wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd){background-color:#e9fbe5}.wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd){background-color:#e7f5fe}.wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd){background-color:#fcf0ef}.wp-block-table.is-style-stripes td,.wp-block-table.is-style-stripes th{border-color:#0000}.wp-block-table.is-style-stripes{border-bottom:1px solid #f0f0f0}.wp-block-table .has-border-color td,.wp-block-table .has-border-color th,.wp-block-table .has-border-color tr,.wp-block-table .has-border-color>*{border-color:inherit}.wp-block-table table[style*=border-top-color] tr:first-child,.wp-block-table table[style*=border-top-color] tr:first-child td,.wp-block-table table[style*=border-top-color] tr:first-child th,.wp-block-table table[style*=border-top-color]>*,.wp-block-table table[style*=border-top-color]>* td,.wp-block-table table[style*=border-top-color]>* th{border-top-color:inherit}.wp-block-table table[style*=border-top-color] tr:not(:first-child){border-top-color:initial}.wp-block-table table[style*=border-right-color] td:last-child,.wp-block-table table[style*=border-right-color] th,.wp-block-table table[style*=border-right-color] tr,.wp-block-table table[style*=border-right-color]>*{border-right-color:inherit}.wp-block-table table[style*=border-bottom-color] tr:last-child,.wp-block-table table[style*=border-bottom-color] tr:last-child td,.wp-block-table table[style*=border-bottom-color] tr:last-child th,.wp-block-table table[style*=border-bottom-color]>*,.wp-block-table table[style*=border-bottom-color]>* td,.wp-block-table table[style*=border-bottom-color]>* th{border-bottom-color:inherit}.wp-block-table table[style*=border-bottom-color] tr:not(:last-child){border-bottom-color:initial}.wp-block-table table[style*=border-left-color] td:first-child,.wp-block-table table[style*=border-left-color] th,.wp-block-table table[style*=border-left-color] tr,.wp-block-table table[style*=border-left-color]>*{border-left-color:inherit}.wp-block-table table[style*=border-style] td,.wp-block-table table[style*=border-style] th,.wp-block-table table[style*=border-style] tr,.wp-block-table table[style*=border-style]>*{border-style:inherit}.wp-block-table table[style*=border-width] td,.wp-block-table table[style*=border-width] th,.wp-block-table table[style*=border-width] tr,.wp-block-table table[style*=border-width]>*{border-style:inherit;border-width:inherit}:root :where(.wp-block-table-of-contents){box-sizing:border-box}.wp-block-term-count{box-sizing:border-box}:where(.wp-block-term-description){box-sizing:border-box;margin-bottom:var(--wp--style--block-gap);margin-top:var(--wp--style--block-gap)}.wp-block-term-description p{margin-bottom:0;margin-top:0}.wp-block-term-name{box-sizing:border-box}.wp-block-term-template{box-sizing:border-box;list-style:none;margin-bottom:0;margin-top:0;max-width:100%;padding:0}.wp-block-text-columns,.wp-block-text-columns.aligncenter{display:flex}.wp-block-text-columns .wp-block-column{margin:0 1em;padding:0}.wp-block-text-columns .wp-block-column:first-child{margin-left:0}.wp-block-text-columns .wp-block-column:last-child{margin-right:0}.wp-block-text-columns.columns-2 .wp-block-column{width:50%}.wp-block-text-columns.columns-3 .wp-block-column{width:33.3333333333%}.wp-block-text-columns.columns-4 .wp-block-column{width:25%}pre.wp-block-verse{overflow:auto;white-space:pre-wrap}:where(pre.wp-block-verse){font-family:inherit}.wp-block-video{box-sizing:border-box}.wp-block-video video{height:auto;vertical-align:middle;width:100%}@supports (position:sticky){.wp-block-video [poster]{object-fit:cover}}.wp-block-video.aligncenter{text-align:center}.wp-block-video :where(figcaption){margin-bottom:1em;margin-top:.5em}.editor-styles-wrapper,.entry-content{counter-reset:footnotes}a[data-fn].fn{counter-increment:footnotes;display:inline-flex;font-size:smaller;text-decoration:none;text-indent:-9999999px;vertical-align:super}a[data-fn].fn:after{content:"[" counter(footnotes) "]";float:left;text-indent:0}:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}

/* ===================== assets/plugins/hostinger-reach/frontend/dist/blocks/subscription.css ===================== */
.hostinger-reach-block-connect{display:flex;flex-direction:column;align-content:flex-start;background:#fff6e9;padding:14px;font-size:14px;margin:28px 0 14px}.hostinger-reach-block-connect__title{color:#1d1e20;font-weight:700;margin-bottom:4px}.hostinger-reach-block-connect__subtitle{color:#727586;margin-bottom:4px}.hostinger-reach-block-connect a{color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));text-decoration:underline}
.hostinger-reach-block-dialog{display:block;flex-direction:column;align-content:flex-start;background:#fff;color:#1d1e20;padding:20px;gap:14px;font-size:14px;line-height:20px;bottom:80px;left:20px;position:fixed;z-index:100001;max-width:400px;border-radius:16px;box-shadow:0 0 10px rgba(0,0,0,.05)}.hostinger-reach-block-dialog__actions{display:flex;justify-content:flex-start;gap:10px}.hostinger-reach-block-dialog__button_indicator{height:16px;width:16px}.hostinger-reach-block-dialog__button{cursor:pointer;text-align:center;background:#673de6;color:#fff;font-weight:700;font-size:12px;padding:6px 16px;display:flex;flex-direction:row;align-items:center;gap:10px;border-radius:8px}.hostinger-reach-block-dialog__button:hover{background:#5029c2}.hostinger-reach-block-dialog__button a{color:#fff;text-decoration:none}.hostinger-reach-block-dialog__button a:hover,.hostinger-reach-block-dialog__button a:focus,.hostinger-reach-block-dialog__button a:active{color:#fff;box-shadow:none;outline:none}.hostinger-reach-block-dialog__button svg{height:16px;width:16px}.hostinger-reach-block-dialog__button svg path{fill:#fff}.hostinger-reach-block-dialog__close{cursor:pointer}.hostinger-reach-block-dialog__close:before,.hostinger-reach-block-dialog__close:after{content:"";position:absolute;width:16px;height:2px;background-color:#1d1e20;top:26px;right:16px}.hostinger-reach-block-dialog__close:before{transform:rotate(45deg)}.hostinger-reach-block-dialog__close:after{transform:rotate(-45deg)}.hostinger-reach-block-dialog__close:hover:before,.hostinger-reach-block-dialog__close:hover:after{background-color:#727272}
.hostinger-reach-select-form-modal.components-modal__frame{display:flex;flex-direction:column;max-width:900px;width:90vw;height:640px;max-height:calc(100vh - 64px)}.hostinger-reach-select-form-modal .components-modal__header{height:52px;padding:12px 24px}.hostinger-reach-select-form-modal .components-modal__content{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:52px;padding:0 24px;overflow:hidden}.hostinger-reach-select-form-modal .components-modal__children-container{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.hostinger-reach-select-form-modal__content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border-top:1px solid #e0e0e0}.hostinger-reach-select-form-modal__loading,.hostinger-reach-select-form-modal__empty{display:flex;flex:1;align-items:center;justify-content:center;min-height:240px;text-align:center;color:#757575}.hostinger-reach-select-form-modal__list{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:0}.hostinger-reach-select-form-modal__list-forms{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:190px;gap:16px;align-content:start;min-height:0;overflow-y:auto;padding:16px}.hostinger-reach-select-form-modal__list-preview{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:16px;background:#f5f5f5}.hostinger-reach-select-form-modal__form-item{display:flex;flex-direction:column;gap:8px;padding:0;border:none;background:rgba(0,0,0,0);cursor:pointer;text-align:left}.hostinger-reach-select-form-modal__form-item:focus-visible{outline:none}.hostinger-reach-select-form-modal__form-name{font-weight:700;font-size:14px;color:#1e1e1e}.hostinger-reach-select-form-modal__form-thumb{display:flex;flex:1;align-items:center;justify-content:center;width:100%;min-height:0;overflow:hidden;background:#f5f5f5;border-radius:16px;border:3px solid rgba(0,0,0,0);transition:border-color .2s ease}.hostinger-reach-select-form-modal__form-thumb-fallback{width:100%;height:100%;background:#ebebeb}.hostinger-reach-select-form-modal__form-image{width:100%;height:100%;object-fit:cover}.hostinger-reach-select-form-modal__form-item--selected .hostinger-reach-select-form-modal__form-thumb{border-color:#3858e9}.hostinger-reach-select-form-modal__preview-frame{width:100%;height:100%;min-height:320px;border:1px solid #e0e0e0;border-radius:12px}.hostinger-reach-select-form-modal__footer{display:flex;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 0;border-top:1px solid #e0e0e0}.hostinger-reach-select-form-modal__footer-start{display:flex;align-items:center;gap:8px}.hostinger-reach-select-form-modal__footer-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.hostinger-reach-block-subscription-form .hostinger-reach-block-form-fields{display:flex;flex-direction:column;width:100%}.hostinger-reach-block-subscription-form .hostinger-reach-block-form-fields--inline{flex-direction:row;justify-content:flex-start;align-items:end;width:100%;gap:.5rem}.hostinger-reach-block-subscription-form .hostinger-reach-block-form-fields--inline .hostinger-reach-block-form-field{min-width:70%}.hostinger-reach-block-subscription-form .hostinger-reach-block-form-fields--inline .hostinger-reach-block-submit{min-width:30%}.hostinger-reach-block-subscription-form .hostinger-reach-block-submit{border-width:0;margin-top:var(--wp--preset--spacing--20);align-content:center;box-sizing:border-box;cursor:pointer;display:inline-block;height:100%;text-align:center;width:100%;word-break:break-word;font-weight:500;min-height:40px;border-radius:50px}.hostinger-reach-block-subscription-form .hostinger-reach-block-form-field{margin-top:8px}.hostinger-reach-block-subscription-form label{display:block;font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase;margin-bottom:8px;padding:0}.hostinger-reach-block-subscription-form input{display:block;width:100%;padding:3px 10px;min-height:40px;box-shadow:0 0 0 rgba(0,0,0,0);border-radius:4px;border:1px solid #8c8f94;background-color:#fff;color:#2c3338;box-sizing:border-box}.hostinger-reach-block-use-template{width:100%;justify-content:center;margin-bottom:16px}.hostinger-reach-block-selected-form{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:16px;padding:12px;border:2px solid rgba(0,0,0,0);border-radius:8px;background:linear-gradient(#fff, #fff) padding-box,linear-gradient(90deg, rgb(58, 176, 255), rgb(103, 61, 230), rgb(229, 54, 219)) border-box}.hostinger-reach-block-selected-form__title{display:flex;align-items:center;gap:8px;max-width:100%}.hostinger-reach-block-selected-form__title svg{flex-shrink:0}.hostinger-reach-block-selected-form__name{font-weight:700;font-size:13px;color:#1e1e1e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hostinger-reach-block-selected-form__image{width:100%;height:auto;object-fit:cover;border-radius:8px;background:#f0f0f0}.hostinger-reach-block-selected-form__edit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:auto;padding:8px 12px;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:#fff;color:#673de6}.hostinger-reach-block-selected-form__edit:hover,.hostinger-reach-block-selected-form__edit:focus{background:#fff;color:#673de6}.hostinger-reach-block-selected-form__edit svg{flex-shrink:0}.hostinger-reach-block-selected-form__edit-text{color:#673de6}.hostinger-reach-block-selected-form__change.components-button.is-link{align-self:center;padding:0;color:#673de6}.hostinger-reach-block-selected-form__change.components-button.is-link:hover,.hostinger-reach-block-selected-form__change.components-button.is-link:focus,.hostinger-reach-block-selected-form__change.components-button.is-link:active{color:#673de6}.hostinger-reach-block-classic-form{width:100%;justify-content:center;margin-bottom:16px}.hostinger-reach-block-tags{margin-left:-6px;margin-top:10px;max-height:14em;overflow:auto;padding-left:6px;padding-top:6px;margin-bottom:20px}.components-button.is-link.hostinger-reach-block-toggler{margin-bottom:20px}.hostinger-reach-block-newtag{margin-bottom:20px}.reach-subscription-message{font-weight:bold;padding:1em;gap:10px;margin-top:10px}.reach-subscription-message.is-success{background:rgba(0,158,91,.1019607843)}.reach-subscription-message.is-error{background:rgba(234,71,104,.1019607843)}

/*# sourceMappingURL=subscription.css.map*/

/* ===================== assets/themes/digiwah/style.css ===================== */
/*!
Theme Name: Digiwah
Theme URI: 
Author: 
Author URI:
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: digiwah
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Digiwah is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/* ul,
ol {
 	margin: 0 0 1.5em 3em; 
} */

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

/* a:visited {
	color: #800080;
} */

/* a:hover,
a:focus,
a:active {
	color: #fff;
} */

/* a:focus {
	outline: t;
}
 */
a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}


.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}
.post, .page {
    margin: 0em 0em 0em !important;
}
.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}




/* -------------------------------------------------------------
   PARTNER, NOT RESELLER
   ------------------------------------------------------------- */
.dgw-zerp-partner {
  padding: 110px 0;
  background: var(--dgw-zerp-bg-tint);
  scroll-margin-top: 76px;
}

.dgw-zerp-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 46px;
}

.dgw-zerp-partner-card {
  position: relative;
  padding: 32px 30px;
  background: #fff;
  border: 1px solid var(--dgw-zerp-line);
  border-radius: 18px;
  box-shadow: var(--dgw-zerp-card-shadow);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}

.dgw-zerp-partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dgw-zerp-card-shadow-h);
}

.dgw-zerp-partner-card-us {
  border-color: rgba(27, 61, 245, 0.22);
  box-shadow: var(--dgw-zerp-card-shadow-h);
}

.dgw-zerp-partner-tag {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dgw-zerp-muted-2);
  margin-bottom: 10px;
}

.dgw-zerp-partner-card-us .dgw-zerp-partner-tag {
  color: var(--dgw-zerp-brand);
}

.dgw-zerp-partner-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--dgw-zerp-ink);
  margin: 0 0 12px;
}

.dgw-zerp-partner-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--dgw-zerp-muted);
  margin: 0;
}

.dgw-zerp-partner-close {
  max-width: 780px;
  margin: 34px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--dgw-zerp-muted);
}

.dgw-zerp-partner-close a {
  color: var(--dgw-zerp-brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 61, 245, 0.28);
}

.dgw-zerp-partner-close a:hover {
  border-bottom-color: var(--dgw-zerp-brand);
}

@media (max-width: 860px) {
  .dgw-zerp-partner { padding: 76px 0; }
  .dgw-zerp-partner-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .dgw-zerp-partner-card { padding: 26px 24px; }
}

/* ===================== assets/themes/digiwah/css/custom.css ===================== */
/* ============================================
   DIGIWAH HOMEPAGE — styles.css
   Hero: "The Operations Engine"
   ============================================ */
/* a:hover, a:focus, a:active {
    color: #fff!important;
} */
:root {
  --brand: #010ED0;
  --brand-light: #7c8fff;
  --accent: #FF7A45;
  --accent-soft: #ffb284;
  --navy-deep: #050a2e;
  --navy: #0a1145;
  --ink: #0a0f2c;
  --muted: #6b7280;
  --line: rgba(255,255,255,0.08);
  --glass: rgba(255,255,255,0.04);
  --glass-strong: rgba(255,255,255,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/*   .fixed-meeting-btn {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .fixed-meeting-btn svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
  }

  @media (max-width: 480px) {
    .fixed-meeting-btn {
      width: 54px !important;
      height: 54px !important;
      padding: 0 !important;
    }
  } */


h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

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

a.btn-secondary:hover{
	color: #fff !important
}




body{
	margin:0px !important
}
div#dgw-whatsapp-api-agent2-status {
    display: none;
}

/* @media (max-width: 767px) {
	a.custom-logo-link img.custom-logo {
    width: 150px;
}
} */
/* 
header .nav-logo img, .footer-brand a.custom-logo-link {
	filter: brightness(0) invert(1);
} */

.chaty-i-trigger .chaty-channel {
    position: absolute;
    bottom: 54px;
    right: -14px;
    transition: .5s;
    border-radius: 50%;
    cursor: pointer;
}






/* ============================================
   NAVBAR
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(5, 10, 46, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--brand-light), var(--accent-soft));
  color: var(--navy-deep);
  border-radius: 8px;
  font-weight: 800;
}
.nav-links {
  display: flex;
  gap: 32px;
}
.nav-links a {
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-cta {
  background: var(--accent);  
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(255, 122, 69, 0.35);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 122, 69, 0.5);
}

/* ============================================
   HERO — "THE OPERATIONS ENGINE"
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(124, 143, 255, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(255, 122, 69, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  overflow: hidden;
  padding: 150px 0 80px;
  display: flex;
  align-items: center;
}

/* Perspective grid floor */
.Home_hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 143, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 143, 255, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center center;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Drifting bg particles */
.hero-bg-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-bg-particles span {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--brand-light);
  border-radius: 50%;
  opacity: 0.3;
  animation: drift 20s linear infinite;
  filter: blur(0.5px);
}
.hero-bg-particles span:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.hero-bg-particles span:nth-child(2) { top: 60%; left: 15%; animation-delay: -3s; }
.hero-bg-particles span:nth-child(3) { top: 30%; left: 80%; animation-delay: -6s; }
.hero-bg-particles span:nth-child(4) { top: 80%; left: 70%; animation-delay: -9s; }
.hero-bg-particles span:nth-child(5) { top: 50%; left: 50%; animation-delay: -12s; }
.hero-bg-particles span:nth-child(6) { top: 15%; left: 60%; animation-delay: -15s; }
.hero-bg-particles span:nth-child(7) { top: 70%; left: 30%; animation-delay: -18s; }
.hero-bg-particles span:nth-child(8) { top: 40%; left: 90%; animation-delay: -2s; }
.hero-bg-particles span:nth-child(9) { top: 90%; left: 50%; animation-delay: -7s; }
.hero-bg-particles span:nth-child(10) { top: 25%; left: 35%; animation-delay: -11s; }

@keyframes drift {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translate(40px, -60px); opacity: 0; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}

/* ============== HERO COPY (LEFT) ============== */
.hero-copy {
  color: #fff;
  animation: copyFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes copyFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 14px 7px 12px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: eyebrowPulse 2s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.hero-h1 {
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 22px;
  letter-spacing: -0.03em;
}
.hero-h1-grad {
  display: block;
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--accent-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-top: 4px;
}

.hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 540px;
  margin-bottom: 28px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
}
.badge svg { color: var(--brand-light); flex-shrink: 0; }
.badge-ai svg { color: var(--accent-soft); }

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  padding: 15px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 6px 24px rgba(255, 122, 69, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 122, 69, 0.55);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #fff;
  padding: 15px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--glass-strong);
  transition: background 0.2s, border-color 0.2s;
}
.btn-secondary:hover {
  background: var(--glass-strong);
  border-color: rgba(255,255,255,0.2);
  color:#fff !important;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-item b {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.trust-item span {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.trust-divider {
  width: 1px;
  height: 32px;
  background: var(--line);
}

/* ============== HERO ENGINE (RIGHT) ============== */
.hero-engine {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin-left: auto;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  animation: engineFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes engineFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.engine-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Pulsing rings around core */
.ring-pulse {
  transform-origin: 300px 300px;
  animation: ringPulse 4s ease-in-out infinite;
}
.ring-1 { animation-delay: 0s; }
.ring-2 { animation-delay: 0.6s; }
.ring-3 { animation-delay: 1.2s; }
@keyframes ringPulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.06); }
}

.core-glow {
  animation: coreGlowPulse 3s ease-in-out infinite;
  transform-origin: 300px 300px;
}
@keyframes coreGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.conn {
  animation: dashFlow 6s linear infinite;
  stroke-linecap: round;
}
@keyframes dashFlow {
  to { stroke-dashoffset: -100; }
}

/* ============== CORE "D" MARK ============== */
.engine-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  z-index: 5;
  animation: coreFloat 6s ease-in-out infinite;
}
@keyframes coreFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 6px)); }
}
.core-inner {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 60px rgba(124, 143, 255, 0.6),
    0 0 120px rgba(124, 143, 255, 0.32),
    0 0 0 1px rgba(124, 143, 255, 0.4),
    inset 0 0 24px rgba(124, 143, 255, 0.14);
}
.core-logo {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
}
.nav-logo-img {
  height: 38px;
  width: auto;
  display: block;
}
.core-ring {
  position: absolute;
  inset: -8px;
  border: 1.5px solid var(--brand-light);
  border-radius: 50%;
  opacity: 0.5;
  animation: coreRingExpand 3s ease-out infinite;
}
.core-ring-1 { animation-delay: 0s; }
.core-ring-2 { animation-delay: 1.5s; }
@keyframes coreRingExpand {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}





/* ============== HEXAGONAL MODULES ============== */
.module {
  position: absolute;
  width: 110px; height: 110px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  animation: moduleFlyIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* 6 modules at radius 220px in a 600x600 viewBox.
   We position via CSS using same trig — viewBox unit = 1px in our SVG.
   Module is centered at SVG coordinates (300, 80) for top, (490, 190) for top-right, etc.
   Because SVG is 100% of container and modules use percent-based positioning:
*/
.module-sales      { top: 13.3%; left: 50%; animation-delay: 0.3s; }
.module-finance    { top: 31.6%; left: 81.6%; animation-delay: 0.4s; }
.module-support    { top: 68.3%; left: 81.6%; animation-delay: 0.5s; }
.module-ops        { top: 86.6%; left: 50%; animation-delay: 0.6s; }
.module-marketing  { top: 68.3%; left: 18.3%; animation-delay: 0.7s; }
.module-ai         { top: 31.6%; left: 18.3%; animation-delay: 0.8s; }

@keyframes moduleFlyIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.hex {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(124, 143, 255, 0.3);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, border-color 0.3s;
  cursor: pointer;
}
.hex::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: linear-gradient(135deg, rgba(10, 17, 69, 0.7), rgba(5, 10, 46, 0.85));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  z-index: 0;
}
.hex:hover {
  transform: scale(1.08);
  border-color: var(--brand-light);
}
.hex:hover::before {
  background: linear-gradient(135deg, rgba(124, 143, 255, 0.18), rgba(10, 17, 69, 0.85));
}

.hex-icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  color: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hex-icon svg { width: 100%; height: 100%; }

.hex-label {
  position: relative;
  z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}
.module-ai .hex-icon { color: var(--accent-soft); }

/* Per-module micro-animations */

/* Sales — graph line draw */
.anim-graph-line {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: graphDraw 3s ease-in-out infinite;
}
.anim-graph-dot {
  animation: graphDotPulse 3s ease-in-out infinite;
}
@keyframes graphDraw {
  0% { stroke-dashoffset: 50; }
  60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes graphDotPulse {
  0%, 60% { opacity: 0; transform: scale(0); transform-origin: 28px 8px; }
  70% { opacity: 1; transform: scale(1.3); transform-origin: 28px 8px; }
  100% { opacity: 1; transform: scale(1); transform-origin: 28px 8px; }
}

/* Finance counter — handled in JS (cycles symbols) + bouncy CSS */
.anim-counter {
  animation: counterBounce 1.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes counterBounce {
  0%, 100% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.15); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.4; }
  55% { transform: scale(1.15); opacity: 1; }
}

/* Support — bubble dots */
.anim-dot { opacity: 0; animation: dotPop 1.4s ease-in-out infinite; }
.anim-dot.d-1 { animation-delay: 0s; }
.anim-dot.d-2 { animation-delay: 0.2s; }
.anim-dot.d-3 { animation-delay: 0.4s; }
@keyframes dotPop {
  0%, 60%, 100% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 1; transform: scale(1); }
}

/* Operations — gear */
.anim-gear {
  transform-origin: 16px 15px;
  animation: gearSpin 8s linear infinite;
}
@keyframes gearSpin {
  to { transform: rotate(360deg); }
}

/* Marketing — radiating waves */
.anim-wave {
  transform-origin: 16px 16px;
  opacity: 0;
}
.anim-wave.w-1 { animation: waveOut 2.4s ease-out infinite; }
.anim-wave.w-2 { animation: waveOut 2.4s ease-out infinite 1.2s; }
@keyframes waveOut {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.3); }
}

/* AI — node pulse cascade */
.anim-node { animation: nodePulse 2.4s ease-in-out infinite; }
.anim-node.n-1 { animation-delay: 0s; }
.anim-node.n-2 { animation-delay: 0.2s; }
.anim-node.n-3 { animation-delay: 0.4s; }
.anim-node.n-4 { animation-delay: 0.6s; }
.anim-node.n-5 { animation-delay: 0.8s; }
.anim-node.n-6 { animation-delay: 1s; }
@keyframes nodePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ============== SCROLL CUE ============== */
.hero-scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  animation: scrollCueFade 2s ease-in-out infinite;
}
.scroll-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
}
@keyframes scrollCueFade {
  0%, 100% { opacity: 0.4; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 6px); }
}

/* Placeholder marker */
.placeholder-marker {
  padding: 80px 32px;
  text-align: center;
  background: #f7f8fc;
  color: var(--muted);
  font-size: 14px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { order: 2; }
  .hero-engine { order: 1; max-width: 480px; margin: 0 auto; }
  .hero-river { height: 380px; }
  .hero-mission { height: 480px; }
  .hero-untangle { height: 420px; }
  .nav-links { display: none; }
}

@media (max-width: 720px) {
  .hero-river { height: 320px; gap: 14px; }
  .chaos-icon { font-size: 22px; }
  .portal-mark { width: 44px; height: 44px; font-size: 22px; }
  .portal-bar { height: 280px; }
  .lane-label { font-size: 10px; padding: 2px 7px; }

  .hero-mission { height: auto; min-height: 460px; }
  .panel { width: 90% !important; left: 5% !important; right: auto !important; position: relative !important; margin-bottom: 14px; transform: none !important; animation: none !important; }
  .panel-sales, .panel-support, .panel-ai, .panel-log { top: auto !important; bottom: auto !important; }

  .hero-untangle { height: 360px; }

  .hero { padding: 100px 0 60px; min-height: auto; }
  .hero-h1 { font-size: 38px; }
  .hero-sub { font-size: 15.5px; }
  .hero-badges { gap: 8px; }
  .badge { font-size: 11.5px; padding: 7px 10px; }
  .btn-primary, .btn-secondary { padding: 13px 20px; font-size: 14px; width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; }
  .hero-trust { flex-wrap: wrap; gap: 16px; padding: 16px 0; }
  .trust-divider { display: none; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
  .hero-engine { max-width: 360px; }
  .module { width: 78px; height: 78px; }
  .hex-icon { width: 26px; height: 26px; }
  .hex-label { font-size: 10px; }
  .core-d { font-size: 38px; }
  .engine-core { width: 80px; height: 80px; }
}

@media (max-width: 420px) {
  .hero-h1 { font-size: 32px; }
  .hero-engine { max-width: 320px; }
  .module { width: 64px; height: 64px; }
  .hex-icon { width: 22px; height: 22px; }
  .hex-label { font-size: 9px; }
}

/* ============================================================
   SECTION 3 — CLIENT LOGO MARQUEE
   ============================================================ */
.logo-marquee {
  background: #ffffff;
  padding: 56px 0 64px;
  overflow: hidden;
}
.logo-marquee-header {
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 0 24px;
  text-align: center;
}
.logo-marquee-lead {
  font: 500 13px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7298;
  margin: 0;
}
.logo-marquee-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: logo-scroll 38s linear infinite;
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
.logo-cell {
  flex: 0 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
.logo-cell img {
  max-height: 100px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.logo-cell:hover img {
  opacity: 1;
  transform: scale(1.04);
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}
@media (max-width: 720px) {
  .logo-marquee { padding: 44px 0 48px; }
  .logo-marquee-track { gap: 40px; animation-duration: 30s; }
  .logo-cell { height: 48px; }
  .logo-cell img { max-height: 48px; max-width: 140px; }
}

/* ============================================================
   SECTION 4 — SERVICES GRID (REDIRECT-ONLY)
   ============================================================ */
.services {
  background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);
  padding: 96px 24px 112px;
}
.services-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.services-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.services-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.services-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.services-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.10);
  border-radius: 18px;
  padding: 32px 28px 28px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  isolation: isolate;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #010ED0, #FF7A45);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(1,14,208,0.05), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(1,14,208,0.18);
  border-color: rgba(1,14,208,0.22);
}
.service-card:hover::before,
.service-card:hover::after {
  opacity: 1;
}
.service-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(1,14,208,0.10), rgba(255,122,69,0.10));
  color: #010ED0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: background 0.35s ease, color 0.35s ease;
}
.service-card-icon svg {
  width: 28px;
  height: 28px;
}
.service-card-zoho .service-card-icon { color: #010ED0; }
.service-card-wa .service-card-icon { color: #25D366; background: linear-gradient(135deg, rgba(37,211,102,0.12), rgba(1,14,208,0.08)); }
.service-card-ai .service-card-icon { color: #FF7A45; background: linear-gradient(135deg, rgba(255,122,69,0.14), rgba(1,14,208,0.08)); }
.service-card-title {
  font: 700 22px/1.2 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  margin: 0 0 12px;
}
.service-card-hook {
  font: 400 15px/1.6 'Inter', sans-serif;
  color: #4a5170;
  margin: 0 0 24px;
  flex-grow: 1;
}
.service-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 'Inter', sans-serif;
  color: #010ED0;
  letter-spacing: 0.01em;
}
.service-card-cta svg {
  transition: transform 0.3s ease;
}
.service-card:hover .service-card-cta svg {
  transform: translateX(4px);
}

@media (max-width: 960px) {
  .services { padding: 72px 20px 88px; }
  .services-h2 { font-size: 34px; }
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .services-header { margin-bottom: 40px; }
}
@media (max-width: 480px) {
  .services-h2 { font-size: 28px; }
  .services-sub { font-size: 15px; }
  .service-card { padding: 26px 22px 24px; }
}

/* ============================================================
   SECTION 5 — WHY DIGIWAH (SPLIT LAYOUT, PHOTO + FLOATING STATS)
   ============================================================ */
.why {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
  padding: 110px 24px 120px;
  overflow: hidden;
}
.why-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* LEFT */
.why-left { max-width: 540px; }
.why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.why-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 18px;
}
.why-lead {
  font: 400 17px/1.6 'Inter', sans-serif;
  color: #4a5170;
  margin: 0 0 32px;
}
.why-list { list-style: none; margin: 0; padding: 0; }
.why-item {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(1,14,208,0.10);
}
.why-item:last-child { border-bottom: 1px solid rgba(1,14,208,0.10); }
.why-item-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(1,14,208,0.10), rgba(255,122,69,0.08));
  color: #010ED0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-item-text h3 {
  font: 700 17px/1.3 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  margin: 0 0 6px;
}
.why-item-text p {
  font: 400 14.5px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}
.why-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 'Inter', sans-serif;
  color: #ffffff;
  padding: 14px 22px;
  margin-top: 32px;
  background: linear-gradient(135deg, #010ED0 0%, #4a5cf5 100%);
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 14px 36px -12px rgba(1,14,208,0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -12px rgba(1,14,208,0.6);
}
.why-cta svg { transition: transform 0.3s ease; }
.why-cta:hover svg { transform: translateX(4px); }

/* RIGHT — photo block + badges */
.why-right {
  width: 100%;
  max-width: 460px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.why-photo-block {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.why-dots {
  position: absolute;
  top: -28px;
  left: -28px;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(rgba(1,14,208,0.22) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  z-index: 0;
}
.why-accent {
  position: absolute;
  top: 22px;
  left: 22px;
  right: -22px;
  bottom: -22px;
  background: linear-gradient(135deg, #010ED0 0%, #4a5cf5 100%);
  border-radius: 24px;
  z-index: 1;
}
.why-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(1,14,208,0.35);
}
.why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.why-stat {
  position: absolute;
  z-index: 3;
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 18px 12px;
  box-shadow: 0 14px 30px -10px rgba(10,18,51,0.28), 0 0 0 1px rgba(1,14,208,0.06);
  animation: whyFloat 4.5s ease-in-out infinite;
}
.why-stat-tr { top: 36px; right: -28px; }
.why-stat-bl { bottom: 44px; left: -32px; animation-delay: 1.6s; }
.why-stat-num {
  font: 700 28px/1 'Plus Jakarta Sans', sans-serif;
  color: #010ED0;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}
.why-stat-num span { color: #FF7A45; }
.why-stat-label {
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #4a5170;
}
@keyframes whyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .why-stat { animation: none; }
}

@media (max-width: 1024px) {
  .why-layout { gap: 56px; }
  .why-h2 { font-size: 36px; }
  .why-stat-tr { right: -16px; }
  .why-stat-bl { left: -20px; }
}
@media (max-width: 880px) {
  .why { padding: 80px 20px 96px; }
  .why-layout { grid-template-columns: 1fr; gap: 64px; }
  .why-left { order: 2; max-width: none; }
  .why-right { order: 1; max-width: 420px; margin: 0 auto; }
  .why-h2 { font-size: 32px; }
}
@media (max-width: 480px) {
  .why-h2 { font-size: 28px; }
  .why-lead { font-size: 15px; }
  .why-item { padding: 18px 0; gap: 14px; }
  .why-item-icon { flex-basis: 40px; width: 40px; height: 40px; }
  .why-item-text h3 { font-size: 16px; }
  .why-item-text p { font-size: 14px; }
  .why-stat { padding: 11px 14px 9px; }
  .why-stat-num { font-size: 22px; }
  .why-stat-label { font-size: 10px; }
  .why-stat-tr { top: 18px; right: -10px; }
  .why-stat-bl { bottom: 22px; left: -12px; }
  .why-dots { width: 100px; height: 100px; top: -18px; left: -18px; }
}

/* ============================================================
   SECTION 6 — AI & AGENTIC AI (DARK / FUTURISTIC)
   ============================================================ */
.ai {
  position: relative;
  background: linear-gradient(180deg, #050a24 0%, #0a1233 100%);
  padding: 120px 24px 130px;
  overflow: hidden;
  isolation: isolate;
}
.ai-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  z-index: 0;
}
.ai-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}
.ai-glow-1 {
  width: 520px; height: 520px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(1,14,208,0.55) 0%, transparent 70%);
}
.ai-glow-2 {
  width: 420px; height: 420px;
  bottom: -110px; right: -90px;
  background: radial-gradient(circle, rgba(255,122,69,0.40) 0%, transparent 70%);
}
.ai-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ai-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* CONSOLE */
.ai-console-wrap { position: relative; }
.ai-console {
  background: rgba(5, 10, 36, 0.85);
  border: 1px solid rgba(124, 143, 255, 0.25);
  border-radius: 16px;
  overflow: hidden;
  font: 400 13px/1.5 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
  box-shadow:
    0 30px 80px -30px rgba(1, 14, 208, 0.55),
    0 0 60px -20px rgba(124, 143, 255, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.ai-console-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(124, 143, 255, 0.15);
}
.ai-console-dots { display: flex; gap: 6px; }
.ai-console-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.ai-console-dots span:nth-child(1) { background: #ff5f57; }
.ai-console-dots span:nth-child(2) { background: #febc2e; }
.ai-console-dots span:nth-child(3) { background: #28c840; }
.ai-console-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b8c4ff;
  font: 600 12px/1 'JetBrains Mono', 'Menlo', monospace;
}
.ai-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 10px rgba(40, 200, 64, 0.7);
  animation: aiPulse 1.6s ease-in-out infinite;
  flex: 0 0 8px;
}
@keyframes aiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
.ai-console-status {
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #28c840;
  padding: 4px 8px;
  border: 1px solid rgba(40, 200, 64, 0.4);
  border-radius: 4px;
  background: rgba(40, 200, 64, 0.08);
}
.ai-console-body {
  padding: 22px 20px;
  min-height: 380px;
  color: #d8dfff;
}
.ai-line {
  margin-bottom: 14px;
  opacity: 0;
  animation: aiLineCycle 14s ease-in-out infinite;
}
.ai-line:nth-child(1) { animation-delay: 0.4s; }
.ai-line:nth-child(2) { animation-delay: 1.6s; }
.ai-line:nth-child(3) { animation-delay: 3.0s; }
.ai-line:nth-child(4) { animation-delay: 4.4s; }
.ai-line:nth-child(5) { animation-delay: 5.8s; }
.ai-line:nth-child(6) { animation-delay: 7.2s; }
@keyframes aiLineCycle {
  0%   { opacity: 0; transform: translateX(-6px); }
  4%   { opacity: 1; transform: translateX(0); }
  85%  { opacity: 1; }
  93%  { opacity: 0; }
  100% { opacity: 0; }
}
.ai-time {
  color: #6b7aa8;
  margin-right: 10px;
}
.ai-tag {
  display: inline-block;
  font: 700 9.5px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  padding: 3px 6px;
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: 1px;
}
.tag-zia   { color: #FF7A45; background: rgba(255,122,69,0.16); }
.tag-agent { color: #7c8fff; background: rgba(124,143,255,0.16); }
.tag-mcp   { color: #28c840; background: rgba(40,200,64,0.14); }
.tag-bot   { color: #b8a4ff; background: rgba(184,164,255,0.14); }
.ai-prompt { margin-top: 18px; }
.ai-cursor::before { content: '> '; color: #7c8fff; }
.ai-cursor::after {
  content: '_';
  color: #7c8fff;
  animation: aiBlink 1s step-end infinite;
}
@keyframes aiBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ai-line, .ai-cursor::after, .ai-live-dot { animation: none !important; opacity: 1 !important; }
}

/* CONTENT */
.ai-content { color: #d8dfff; }
.ai-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7c8fff;
  padding: 6px 12px;
  border: 1px solid rgba(124,143,255,0.30);
  border-radius: 100px;
  background: rgba(124,143,255,0.06);
  margin-bottom: 18px;
}
.ai-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #b8c4ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 18px;
}
.ai-lead {
  font: 400 16px/1.6 'Inter', sans-serif;
  color: #a4b0d8;
  margin: 0 0 32px;
}
.ai-caps {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.ai-cap {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(124,143,255,0.14);
}
.ai-cap:last-child { border-bottom: 1px solid rgba(124,143,255,0.14); }
.ai-cap-num {
  flex: 0 0 auto;
  font: 700 13px/1 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.05em;
  color: #FF7A45;
  padding-top: 3px;
}
.ai-cap h3 {
  font: 700 16px/1.3 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 5px;
}
.ai-cap p {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: #8c98c4;
  margin: 0;
}
.ai-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 'Inter', sans-serif;
  color: #ffffff;
  padding: 14px 22px;
  background: linear-gradient(135deg, #010ED0 0%, #4a5cf5 100%);
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 14px 36px -12px rgba(1,14,208,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ai-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -12px rgba(1,14,208,0.75);
}
.ai-cta svg { transition: transform 0.3s ease; }
.ai-cta:hover svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .ai-layout { gap: 56px; }
  .ai-h2 { font-size: 36px; }
  .ai-console-body { min-height: 340px; padding: 18px; }
  .ai-line { font-size: 12px; }
}
@media (max-width: 880px) {
  .ai { padding: 90px 20px 100px; }
  .ai-layout { grid-template-columns: 1fr; gap: 56px; }
  .ai-console-wrap { order: 1; }
  .ai-content { order: 2; }
  .ai-h2 { font-size: 32px; }
}
@media (max-width: 480px) {
  .ai-h2 { font-size: 26px; }
  .ai-lead { font-size: 14.5px; }
  .ai-cap { padding: 14px 0; gap: 14px; }
  .ai-cap h3 { font-size: 15px; }
  .ai-cap p { font-size: 13px; }
  .ai-console-body { padding: 14px 16px; min-height: 300px; }
  .ai-line { font-size: 11px; margin-bottom: 10px; }
  .ai-tag { font-size: 8.5px; padding: 2px 5px; margin-right: 8px; }
  .ai-time { margin-right: 8px; }
}

/* Why Digiwah — certification badges (under photo) */
.why-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.why-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.12);
  border-radius: 14px;
  box-shadow: 0 8px 22px -14px rgba(10,18,51,0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.why-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(1,14,208,0.22);
  box-shadow: 0 14px 30px -14px rgba(10,18,51,0.22);
}
.why-badge-mark {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 17px/1 'Plus Jakarta Sans', sans-serif;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.badge-mark-zoho {
  background: linear-gradient(135deg, #c8202d 0%, #ff5a3c 100%);
  box-shadow: 0 6px 14px -6px rgba(200,32,45,0.5);
}
.badge-mark-meta {
  background: linear-gradient(135deg, #0866ff 0%, #4a8cff 100%);
  box-shadow: 0 6px 14px -6px rgba(8,102,255,0.5);
}
.why-badge-line1 {
  font: 700 13px/1.1 'Plus Jakarta Sans', sans-serif;
  color: #0a1233;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.why-badge-line2 {
  font: 500 11px/1.1 'Inter', sans-serif;
  color: #4a5170;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .why-badges { gap: 10px; }
  .why-badge { padding: 12px 14px; gap: 10px; }
  .why-badge-mark { flex-basis: 34px; width: 34px; height: 34px; font-size: 15px; }
  .why-badge-line1 { font-size: 12px; }
  .why-badge-line2 { font-size: 10px; }
}

/* ============================================
   SECTION 7 — CASE STUDIES (LIGHT PREMIUM SLIDER)
   ============================================ */
.cases {
  position: relative;
  padding: 120px 24px 110px;
  background:
    radial-gradient(ellipse 70% 50% at 80% 10%, rgba(255,122,69,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(1,14,208,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #f6f8ff 0%, #ffffff 60%, #fff5ee 100%);
  color: #0a1233;
  overflow: hidden;
}
.cases-bg-grid {
  display: none;
}
.cases-bg-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,122,69,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.cases-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 1;
}

.cases-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.cases-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.cases-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.cases-h2 {
  font: 700 44px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.cases-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}

/* ===== Slider ===== */
.cases-slider {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 30px 60px -25px rgba(1,14,208,0.18),
    0 50px 80px -40px rgba(255,122,69,0.10);
  min-height: 520px;
}

.case-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  padding: 48px;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.case-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.case-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-visual svg {
  width: 100%;
  height: auto;
  max-height: 440px;
  filter: drop-shadow(0 20px 40px rgba(1,14,208,0.12));
}

.case-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 480px;
}
.case-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 20px;
}
.case-title {
  font: 700 32px/1.2 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 18px;
}
.case-summary {
  font: 400 15px/1.6 'Inter', sans-serif;
  color: #4a5170;
  margin: 0 0 28px;
}

.case-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid rgba(1,14,208,0.10);
  border-bottom: 1px solid rgba(1,14,208,0.10);
}
.case-metric { text-align: left; }
.case-metric-num {
  display: block;
  font: 700 22px/1.1 'Plus Jakarta Sans', sans-serif;
  color: #010ED0;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.case-metric-num--text {
  font-size: 18px;
  background: linear-gradient(135deg, #FF7A45 0%, #010ED0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case-metric-label {
  font: 500 11px/1.3 'Inter', sans-serif;
  color: #6b7280;
  letter-spacing: 0.02em;
}

.case-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font: 600 14px/1 'Inter', sans-serif;
  color: #FF7A45;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,122,69,0.4);
  transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.case-cta:hover {
  gap: 14px;
  color: #010ED0;
  border-bottom-color: #010ED0;
}

/* ===== Controls ===== */
.cases-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}
.cases-arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.16);
  box-shadow: 0 8px 18px -10px rgba(1,14,208,0.18);
  color: #010ED0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.cases-arrow:hover {
  background: #010ED0;
  border-color: #010ED0;
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 12px 22px -8px rgba(1,14,208,0.4);
}
.cases-dots {
  display: flex;
  gap: 10px;
}
.cases-dot {
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: rgba(1,14,208,0.14);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.cases-dot.is-active {
  background: linear-gradient(90deg, #010ED0, #FF7A45);
  width: 56px;
}
.cases-dot:hover:not(.is-active) {
  background: rgba(1,14,208,0.28);
}
.cases-counter {
  font: 600 14px/1 'Plus Jakarta Sans', sans-serif;
  color: #0a1233;
  min-width: 50px;
  text-align: center;
  letter-spacing: 0.02em;
}
.cases-counter-sep { color: rgba(1,14,208,0.3); margin: 0 4px; }

/* ===== Industry chips ===== */
.cases-industries {
  margin-top: 64px;
  text-align: center;
}
.cases-industries-label {
  display: block;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 20px;
}
.cases-industries-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.industry-chip {
  font: 500 13px/1 'Inter', sans-serif;
  color: #0a1233;
  padding: 10px 18px;
  border: 1px solid rgba(1,14,208,0.16);
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0 4px 10px -6px rgba(1,14,208,0.14);
  transition: all 0.25s ease;
}
.industry-chip:hover {
  border-color: #FF7A45;
  color: #FF7A45;
  background: rgba(255,122,69,0.04);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(255,122,69,0.3);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .cases { padding: 100px 24px 90px; }
  .cases-h2 { font-size: 38px; }
  .cases-slider { min-height: auto; }
  .case-slide {
    position: relative;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px;
  }
  .case-slide:not(.is-active) { display: none; }
  .case-visual svg { max-height: 360px; }
  .case-title { font-size: 28px; }
}
@media (max-width: 720px) {
  .cases { padding: 80px 18px 70px; }
  .cases-h2 { font-size: 30px; }
  .cases-sub { font-size: 15px; }
  .case-slide { padding: 28px 22px; gap: 24px; }
  .case-title { font-size: 24px; }
  .case-summary { font-size: 14px; }
  .case-metrics { grid-template-columns: 1fr; gap: 14px; padding: 16px 0; }
  .case-metric-num { font-size: 20px; }
  .case-metric-num--text { font-size: 16px; }
  .cases-controls { gap: 16px; margin-top: 28px; }
  .cases-arrow { width: 40px; height: 40px; }
  .cases-arrow svg { width: 16px; height: 16px; }
  .cases-dot { width: 24px; }
  .cases-dot.is-active { width: 40px; }
  .cases-industries { margin-top: 48px; }
  .industry-chip { font-size: 12px; padding: 8px 14px; }
}
@media (max-width: 480px) {
  .cases-h2 { font-size: 26px; }
  .case-slide { padding: 22px 18px; }
  .case-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-slide { transition: opacity 0.2s ease; transform: none !important; }
  .cases-bg-glow,
  .erp-flow-line,
  .industry-chip { animation: none !important; transition: none; }
}

/* ============================================
   SECTION 9 — TESTIMONIALS (3-CARD CAROUSEL)
   ============================================ */
.testimonials {
  position: relative;
  padding: 120px 24px 110px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 50%, #f4f6ff 100%);
  color: #0a1233;
  overflow: hidden;
}
.testimonials-bg-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.testimonials-bg-glow--left {
  background: radial-gradient(circle, rgba(1,14,208,0.08) 0%, transparent 70%);
  top: -100px;
  left: -200px;
}
.testimonials-bg-glow--right {
  background: radial-gradient(circle, rgba(255,122,69,0.06) 0%, transparent 70%);
  bottom: -100px;
  right: -200px;
}

.testimonials-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 1;
}

.testimonials-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.testimonials-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.testimonials-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.testimonials-h2 {
  font: 700 44px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.testimonials-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}

/* ===== Track ===== */
.testimonials-track-wrap {
  position: relative;
  overflow: hidden;
  padding: 8px 0 55px;
  margin: 0 -8px;
}
.testimonials-track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  padding: 0 8px;
}

/* ===== Card ===== */
.testimonial-card {
  flex: 0 0 calc((100% - 64px) / 3);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.08);
  border-radius: 20px;
  padding: 32px 30px 28px;
  min-height: 340px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 4px 12px rgba(1,14,208,0.06),
    0 24px 50px -28px rgba(1,14,208,0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,122,69,0.3);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 8px 18px rgba(1,14,208,0.08),
    0 30px 60px -25px rgba(255,122,69,0.25);
}

.testimonial-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.testimonial-stars {
  display: flex;
  gap: 3px;
  color: #FF7A45;
}
.testimonial-stars svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 1px 0 rgba(255,122,69,0.3));
}
.testimonial-stack {
  font: 600 9px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 5px 10px;
  border: 1px solid rgba(1,14,208,0.16);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
}

.testimonial-quote-mark {
  width: 32px;
  height: auto;
  color: rgba(1,14,208,0.10);
  margin-bottom: 8px;
}

.testimonial-quote {
  font: 400 14.5px/1.6 'Inter', sans-serif;
  color: #2a304a;
  margin: 0 0 24px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(1,14,208,0.08);
  margin-top: auto;
}
.testimonial-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1 'Plus Jakarta Sans', sans-serif;
  color: #fff;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.2);
  overflow: hidden;
}
.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-avatar[data-color="brand"] { background: linear-gradient(135deg, #010ED0, #2d3aff); }
.testimonial-avatar[data-color="accent"] { background: linear-gradient(135deg, #FF7A45, #ffb284); }
.testimonial-avatar[data-color="ink"] { background: linear-gradient(135deg, #0a1233, #2a3160); }
.testimonial-avatar[data-color="green"] { background: linear-gradient(135deg, #22b272, #4dd699); }
.testimonial-avatar[data-color="light-brand"] { background: linear-gradient(135deg, #7c8fff, #aab4ff); }

.testimonial-author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonial-name {
  font: 700 14px/1.3 'Plus Jakarta Sans', sans-serif;
  color: #0a1233;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testimonial-role {
  font: 500 11.5px/1.3 'Inter', sans-serif;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Controls ===== */
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;

}
.t-arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.16);
  box-shadow: 0 8px 18px -10px rgba(1,14,208,0.18);
  color: #010ED0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.t-arrow:hover {
  background: #010ED0;
  border-color: #010ED0;
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 12px 22px -8px rgba(1,14,208,0.4);
}
.t-dots {
  display: flex;
  gap: 10px;
}
.t-dot {
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: rgba(1,14,208,0.14);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.t-dot.is-active {
  background: linear-gradient(90deg, #010ED0, #FF7A45);
  width: 56px;
}
.t-dot:hover:not(.is-active) {
  background: rgba(1,14,208,0.28);
}

/* ===== Responsive ===== */
@media (max-width: 1023px) {
  .testimonial-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
  .testimonials-h2 { font-size: 38px; }
}
@media (max-width: 720px) {
  .testimonials { padding: 80px 18px 70px; }
  .testimonials-h2 { font-size: 30px; }
  .testimonials-sub { font-size: 15px; }
  .testimonial-card {
    flex: 0 0 100%;
    padding: 26px 24px 24px;
    min-height: 0;
  }
  .testimonial-quote { -webkit-line-clamp: unset; }
  .testimonials-controls { gap: 16px; margin-top: 32px; }
  .t-arrow { width: 40px; height: 40px; }
  .t-arrow svg { width: 16px; height: 16px; }
  .t-dot { width: 24px; }
  .t-dot.is-active { width: 40px; }
}
@media (max-width: 480px) {
  .testimonials-h2 { font-size: 26px; }
  .testimonial-stack { font-size: 8px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-track { transition: none; }
  .testimonial-card,
  .t-arrow { transition: none; }
}

/* ============================================
   SECTION 10 — FOUNDERS (TWO-CARD EDITORIAL)
   ============================================ */
.founders {
  position: relative;
  padding: 130px 24px 120px;
  background: linear-gradient(180deg, #fffaf2 0%, #ffffff 50%, #fff5ee 100%);
  color: #0a1233;
  overflow: hidden;
}
.founders-bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.founders-bg-glow--top {
  width: 700px;
  height: 700px;
  top: -200px;
  left: -150px;
  background: radial-gradient(circle, rgba(1,14,208,0.08) 0%, transparent 70%);
}
.founders-bg-glow--bottom {
  width: 700px;
  height: 700px;
  bottom: -200px;
  right: -150px;
  background: radial-gradient(circle, rgba(255,122,69,0.10) 0%, transparent 70%);
}

.founders-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
}

.founders-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}
.founders-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.founders-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.founders-h2 {
  font: 700 48px/1.1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 16px;
}
.founders-h2-grad {
  background: linear-gradient(135deg, #010ED0 0%, #FF7A45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.founders-sub {
  font: 400 17px/1.6 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}
.founders-sub em {
  font-style: normal;
  font-weight: 700;
  color: #FF7A45;
  letter-spacing: 0.02em;
}

/* ===== Grid ===== */
.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 90px;
}

/* ===== Card ===== */
.founder-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}
.founder-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(80px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
.founder-glow--brand { background: radial-gradient(circle, rgba(1,14,208,0.18) 0%, transparent 65%); }
.founder-glow--accent { background: radial-gradient(circle, rgba(255,122,69,0.20) 0%, transparent 65%); }

/* ===== Photo + 3D tilt ===== */
.founder-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  margin-bottom: 32px;
  z-index: 1;
  perspective: 1000px;
}
.founder-photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #f6f8ff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 20px 40px -15px rgba(1,14,208,0.18),
    0 50px 80px -30px rgba(0,0,0,0.18);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.founder-card[data-founder="angad"] .founder-photo-frame {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 20px 40px -15px rgba(255,122,69,0.22),
    0 50px 80px -30px rgba(0,0,0,0.18);
}
.founder-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(1.08) contrast(1.04) saturate(1.06);
}
.founder-photo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 30%, transparent 60%);
}

/* ===== Badge ===== */
.founder-badge {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translate(-50%, 50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 24px -8px rgba(0,0,0,0.18);
}
.founder-badge--brand {
  background: linear-gradient(135deg, #010ED0 0%, #2d3aff 100%);
  color: #fff;
}
.founder-badge--accent {
  background: linear-gradient(135deg, #FF7A45 0%, #ffb284 100%);
  color: #fff;
}
.founder-badge svg { flex-shrink: 0; }

/* ===== Meta ===== */
.founder-meta {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  max-width: 420px;
}
.founder-name {
  font: 700 26px/1.2 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin-bottom: 4px;
}
.founder-role {
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF7A45;
  margin-bottom: 18px;
}
.founder-card[data-founder="bipanjeet"] .founder-role { color: #010ED0; }
.founder-narrative {
  font: 400 15.5px/1.7 'Inter', sans-serif;
  color: #2a304a;
  margin: 0;
}
.founder-narrative em {
  font-style: normal;
  font-weight: 700;
  color: #FF7A45;
  letter-spacing: 0.02em;
}

/* ===== Mission line ===== */
.founders-mission {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(1,14,208,0.10);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 20px 50px -25px rgba(1,14,208,0.15);
}
.founders-mission-mark {
  width: 36px;
  height: auto;
  color: rgba(1,14,208,0.14);
  margin-bottom: 16px;
}
.founders-mission-text {
  font: 500 22px/1.5 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  margin: 0 0 18px;
}
.founders-wow {
  display: inline-block;
  font: 800 26px/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FF7A45 0%, #010ED0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 4px;
}
.founders-mission-sign {
  font: 600 13px/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  color: #6b7280;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .founders-h2 { font-size: 40px; }
  .founders-grid { gap: 40px; }
  .founder-photo-wrap { max-width: 320px; }
}
@media (max-width: 820px) {
  .founders { padding: 100px 22px 90px; }
  .founders-h2 { font-size: 34px; }
  .founders-grid {
    grid-template-columns: 1fr;
    gap: 80px;
  }
  .founder-photo-wrap { max-width: 360px; }
  .founders-mission-text { font-size: 19px; }
  .founders-wow { font-size: 22px; }
}
@media (max-width: 480px) {
  .founders { padding: 80px 18px 70px; }
  .founders-h2 { font-size: 28px; }
  .founders-sub { font-size: 15px; }
  .founder-name { font-size: 22px; }
  .founder-narrative { font-size: 14.5px; }
  .founders-mission { padding: 32px 22px; border-radius: 20px; }
  .founders-mission-text { font-size: 17px; }
  .founders-wow { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .founder-photo-frame { transition: none; transform: none !important; }
  .founder-photo-shine { display: none; }
}

/* ============================================
   SECTION 13 — INSIGHTS / BLOG
   ============================================ */
.insights {
  position: relative;
  padding: 120px 24px 110px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
  color: #0a1233;
}
@media (max-width: 880px) {
  .insights { display: none; }
}
.insights-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.insights-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 56px;
}
.insights-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.insights-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.insights-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.insights-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
  max-width: 480px;
}
.insights-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 'Inter', sans-serif;
  color: #010ED0;
  padding: 12px 20px;
  border: 1px solid rgba(1,14,208,0.20);
  border-radius: 100px;
  background: #ffffff;
  white-space: nowrap;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.insights-all:hover {
  background: #010ED0;
  color: #fff;
  border-color: #010ED0;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(1,14,208,0.4);
}
.insights-all svg { transition: transform 0.25s ease; }
.insights-all:hover svg { transform: translateX(3px); }

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.insight-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.08);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(1,14,208,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.insight-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,122,69,0.30);
  box-shadow: 0 24px 50px -20px rgba(1,14,208,0.20);
}
.insight-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f6f8ff;
}
.insight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.insight-card:hover .insight-image img { transform: scale(1.05); }
.insight-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 8px 12px;
  border-radius: 100px;
  background: rgba(10,18,51,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.insight-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 0;
  font: 500 12px/1 'Inter', sans-serif;
  color: #6b7280;
}
.insight-date { letter-spacing: 0.02em; }
.insight-readtime {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.insight-readtime::before {
  content: "•";
  color: rgba(1,14,208,0.35);
}
.insight-title {
  font: 700 19px/1.35 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  padding: 12px 24px 0;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-excerpt {
  font: 400 14.5px/1.6 'Inter', sans-serif;
  color: #4a5170;
  padding: 0 24px;
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1 'Inter', sans-serif;
  color: #FF7A45;
  padding: 0 24px 24px;
  margin-top: auto;
  transition: gap 0.25s ease;
}
.insight-card:hover .insight-readmore { gap: 10px; }

@media (max-width: 1024px) {
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .insights-grid .insight-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .insights { padding: 80px 18px 70px; }
  .insights-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .insights-h2 { font-size: 30px; }
  .insights-grid { grid-template-columns: 1fr; gap: 22px; }
  .insights-grid .insight-card:nth-child(3) { grid-column: auto; }
  .insight-title { font-size: 17px; }
}

/* ============================================
   SECTION 14 — FAQ
   ============================================ */
.faq {
  position: relative;
  padding: 120px 24px 110px;
  background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);
  color: #0a1233;
}
.faq-inner {
  max-width: 880px;
  margin: 0 auto;
}
.faq-header {
  text-align: center;
  margin-bottom: 56px;
}
.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #010ED0;
  padding: 6px 12px;
  border: 1px solid rgba(1,14,208,0.18);
  border-radius: 100px;
  background: rgba(1,14,208,0.04);
  margin-bottom: 18px;
}
.faq-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.18);
}
.faq-h2 {
  font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  color: #0a1233;
  margin: 0 0 14px;
}
.faq-sub {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: #4a5170;
  margin: 0;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #ffffff;
  border: 1px solid rgba(1,14,208,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] {
  border-color: rgba(255,122,69,0.30);
  box-shadow: 0 12px 28px -16px rgba(255,122,69,0.20);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font: 600 17px/1.4 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: #0a1233;
  transition: color 0.2s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: #010ED0; }
.faq-chevron {
  flex-shrink: 0;
  color: #010ED0;
  transition: transform 0.3s ease, color 0.2s ease;
}
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: #FF7A45;
}
.faq-answer {
  padding: 0 26px 24px;
  font: 400 15px/1.7 'Inter', sans-serif;
  color: #4a5170;
}
@media (max-width: 720px) {
  .faq { padding: 80px 18px 70px; }
  .faq-h2 { font-size: 30px; }
  .faq-question { padding: 18px 20px; font-size: 15.5px; }
  .faq-answer { padding: 0 20px 20px; font-size: 14px; }
}

/* ============================================
   SECTION 15 — FINAL CTA
   ============================================ */
.final-cta {
  position: relative;
  padding: 130px 24px;
  background: linear-gradient(135deg, #050a2e 0%, #0a1145 50%, #0d1556 100%);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.final-cta-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
}
.final-cta-glow--brand {
  width: 600px;
  height: 600px;
  top: -150px;
  left: -150px;
  background: radial-gradient(circle, rgba(124,143,255,0.30) 0%, transparent 70%);
}
.final-cta-glow--accent {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -150px;
  background: radial-gradient(circle, rgba(255,122,69,0.22) 0%, transparent 70%);
}

.final-cta-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  z-index: 1;
}
.final-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffb284;
  padding: 6px 12px;
  border: 1px solid rgba(255,178,132,0.30);
  border-radius: 100px;
  background: rgba(255,122,69,0.10);
  margin-bottom: 22px;
}
.final-cta-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 0 4px rgba(255,122,69,0.30);
}
.final-cta-h2 {
  font: 700 56px/1.1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #cdd5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 18px;
}
.final-cta-wow {
  display: inline-block;
  font-weight: 800;
  background: linear-gradient(135deg, #FF7A45 0%, #ffb284 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 4px;
}
.final-cta-sub {
  font: 400 18px/1.6 'Inter', sans-serif;
  color: rgba(205,213,255,0.78);
  margin: 0 0 44px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.final-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 15px/1 'Inter', sans-serif;
  padding: 18px 28px;
  border-radius: 14px;
  letter-spacing: -0.01em;
  transition: all 0.25s ease;
}
.final-cta-btn--primary {
  background: linear-gradient(135deg, #FF7A45 0%, #ffb284 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 14px 30px -8px rgba(255,122,69,0.55);
}
.final-cta-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 20px 40px -8px rgba(255,122,69,0.7);
}
.final-cta-btn--secondary {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.final-cta-btn--secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.32);
  transform: translateY(-3px);
}

.final-cta-reassurance {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  font: 500 13px/1 'Inter', sans-serif;
  color: rgba(205,213,255,0.7);
}
.reassure-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reassure-item svg { color: #a8f0c4; }
.reassure-divider {
  width: 1px;
  height: 12px;
  background: rgba(205,213,255,0.25);
}

@media (max-width: 1024px) {
  .final-cta-h2 { font-size: 44px; }
}
@media (max-width: 720px) {
  .final-cta { padding: 90px 22px; }
  .final-cta-h2 { font-size: 34px; }
  .final-cta-sub { font-size: 16px; margin-bottom: 32px; }
  .final-cta-buttons { flex-direction: column; }
  .final-cta-btn { justify-content: center; }
  .reassure-divider { display: none; }
}
@media (max-width: 480px) {
  .final-cta-h2 { font-size: 28px; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  position: relative;
  background: #040820;
  color: #cdd5ff;
  padding: 96px 24px 36px;
  overflow: hidden;
  border-top: 1px solid rgba(124,143,255,0.10);
}
.footer-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  top: -250px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.footer-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 56px;
  margin-bottom: 64px;
}

/* Brand column */
.footer-brand { max-width: 360px; }
.footer-logo-wrap {
  display: inline-block;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4);
}
.footer-logo {
  height: 40px;
  width: auto;
  display: block;
}
.footer-tagline {
  font: 400 14.5px/1.65 'Inter', sans-serif;
  color: rgba(205,213,255,0.7);
  margin: 0 0 26px;
}
.footer-partners {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-partner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(124,143,255,0.16);
  border-radius: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.footer-partner:hover {
  border-color: rgba(124,143,255,0.32);
  transform: translateY(-2px);
}
.footer-partner-mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 13px/1 'Plus Jakarta Sans', sans-serif;
  color: #fff;
  letter-spacing: -0.02em;
}
.footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.footer-partner-line1 {
  font: 700 12px/1.1 'Plus Jakarta Sans', sans-serif;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 1px;
}
.footer-partner-line2 {
  font: 600 9.5px/1.1 'Inter', sans-serif;
  color: rgba(205,213,255,0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Columns */
.footer-col { min-width: 0; }
.footer-heading {
  font: 700 12px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 22px;
}
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.footer-list a,
.footer-list li,
.footer-list span {
  font: 500 14px/1.4 'Inter', sans-serif;
  color: rgba(205,213,255,0.72);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-list a:hover {
  color: #ffb284;
}
.footer-list--contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-list--contact li svg {
  color: rgba(124,143,255,0.7);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Socials */
.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
.footer-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(124,143,255,0.18);
  color: rgba(205,213,255,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.footer-social:hover {
  background: rgba(255,122,69,0.14);
  border-color: #FF7A45;
  color: #ffb284;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4);
}

/* WOW phone strip */
.footer-phones {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding: 22px 28px;
  margin-bottom: 36px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,122,69,0.08) 0%, transparent 60%),
    rgba(255,255,255,0.025);
  border: 1px solid rgba(124,143,255,0.14);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.footer-phones-label {
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(205,213,255,0.5);
  padding-right: 6px;
}
.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 12px;
  transition: background 0.2s ease;
}
.phone-pill:hover {
  background: rgba(255,255,255,0.04);
}
.phone-label {
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(205,213,255,0.55);
  padding: 5px 10px;
  border: 1px solid rgba(124,143,255,0.16);
  border-radius: 100px;
  background: rgba(124,143,255,0.06);
}
.phone-number {
  font: 700 17px/1 'Plus Jakarta Sans', sans-serif;
  color: #ffffff;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.phone-pill:hover .phone-number { color: #ffe9dc; }
.phone-mnemonic {
  display: inline-grid;
  vertical-align: baseline;
  font-weight: 700;
  font-variant-numeric: normal;
}
.phone-mnemonic .m-303,
.phone-mnemonic .m-wow {
  grid-area: 1 / 1;
  text-align: center;
}
.phone-mnemonic .m-303 {
  animation: swap303 6s infinite;
}
.phone-mnemonic .m-wow {
  text-transform: lowercase;
  color: #FF7A45;
  text-shadow:
    0 0 14px rgba(255,122,69,0.55),
    0 0 24px rgba(255,122,69,0.25);
  animation: swapWow 6s infinite;
}
@keyframes swap303 {
  0%, 35% { opacity: 1; }
  42%, 88% { opacity: 0; }
  95%, 100% { opacity: 1; }
}
@keyframes swapWow {
  0%, 35% { opacity: 0; }
  42%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.phone-divider {
  width: 1px;
  height: 28px;
  background: rgba(124,143,255,0.18);
}
@media (max-width: 820px) {
  .footer-phones { gap: 10px 14px; padding: 20px 18px; }
  .footer-phones-label { width: 100%; text-align: center; padding-right: 0; }
  .phone-divider { display: none; }
  .phone-number { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-mnemonic .m-303 { animation: none; opacity: 1; }
  .phone-mnemonic .m-wow { animation: none; opacity: 0; }
}

/* Divider + bottom bar */
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent);
  margin-bottom: 28px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.footer-copy {
  font: 500 13px/1 'Inter', sans-serif;
  color: rgba(205,213,255,0.55);
  letter-spacing: 0.01em;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 13px/1 'Inter', sans-serif;
}
.footer-legal a {
  color: rgba(205,213,255,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover {
  color: #fff;
}
.footer-legal-sep { color: rgba(124,143,255,0.30); }
.footer-made {
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(205,213,255,0.45);
  padding: 6px 12px;
  border: 1px solid rgba(124,143,255,0.18);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px 40px;
  }
  .footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 600px) {
  .footer { padding: 72px 22px 28px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 48px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }
  .footer-legal { justify-content: center; flex-wrap: wrap; }
}









/* ==========================================================
   Digiwah · WhatsApp Business API page
   Class prefix: dgw-whatsapp-api-  (namespaced for WP theme isolation)
   ========================================================== */

:root {
  /* WhatsApp greens (matching Zoho page wa-section) */
  --dgw-whatsapp-api-green-light: #25D366;
  --dgw-whatsapp-api-green-dark: #128C7E;
  --dgw-whatsapp-api-green-deepest: #075E54;
  --dgw-whatsapp-api-green-glow: rgba(37, 211, 102, 0.35);
  --dgw-whatsapp-api-bubble-out: #DCF8C6;
  --dgw-whatsapp-api-bubble-in: #FFFFFF;

  /* Page-wide light mint wash */
  --dgw-whatsapp-api-bg-1: #f0fdf4;
  --dgw-whatsapp-api-bg-2: #ecfdf5;
  --dgw-whatsapp-api-bg-3: #f7fef9;

  /* Digiwah brand accents */
  --dgw-whatsapp-api-brand-blue: #010ED0;
  --dgw-whatsapp-api-accent-orange: #FF7A45;
  --dgw-whatsapp-api-ink: #0a1233;
  --dgw-whatsapp-api-ink-soft: #1a2342;
  --dgw-whatsapp-api-muted: #4a5170;
  --dgw-whatsapp-api-border: rgba(7, 94, 84, 0.12);
  --dgw-whatsapp-api-card: rgba(255, 255, 255, 0.78);
  --dgw-whatsapp-api-card-solid: #ffffff;

  --dgw-whatsapp-api-radius-sm: 10px;
  --dgw-whatsapp-api-radius-md: 16px;
  --dgw-whatsapp-api-radius-lg: 24px;
  --dgw-whatsapp-api-radius-xl: 32px;

  --dgw-whatsapp-api-shadow-sm: 0 2px 6px rgba(7, 94, 84, 0.06);
  --dgw-whatsapp-api-shadow-md: 0 8px 24px rgba(7, 94, 84, 0.08), 0 2px 6px rgba(7, 94, 84, 0.04);
  --dgw-whatsapp-api-shadow-lg: 0 24px 60px rgba(7, 94, 84, 0.12), 0 4px 12px rgba(7, 94, 84, 0.06);
  --dgw-whatsapp-api-shadow-glow: 0 16px 48px rgba(37, 211, 102, 0.2);

  --dgw-whatsapp-api-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --dgw-whatsapp-api-font-body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--dgw-whatsapp-api-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dgw-whatsapp-api-ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(37, 211, 102, 0.10), transparent 55%),
    radial-gradient(circle at 85% 22%, rgba(18, 140, 126, 0.07), transparent 50%),
    radial-gradient(circle at 50% 65%, rgba(37, 211, 102, 0.05), transparent 60%),
    radial-gradient(circle at 15% 95%, rgba(7, 94, 84, 0.06), transparent 55%),
    linear-gradient(180deg, var(--dgw-whatsapp-api-bg-1) 0%, var(--dgw-whatsapp-api-bg-2) 45%, var(--dgw-whatsapp-api-bg-3) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

.dgw-whatsapp-api-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.dgw-whatsapp-api-section {
  padding: 96px 0;
  position: relative;
}

.dgw-whatsapp-api-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dgw-whatsapp-api-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dgw-whatsapp-api-green-dark);
  background: rgba(37, 211, 102, 0.10);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37, 211, 102, 0.25);
}

.dgw-whatsapp-api-h1 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--dgw-whatsapp-api-ink);
}

.dgw-whatsapp-api-h2 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--dgw-whatsapp-api-ink);
}

.dgw-whatsapp-api-h3 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.dgw-whatsapp-api-lede {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--dgw-whatsapp-api-muted);
}

/* Buttons */
.dgw-whatsapp-api-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.dgw-whatsapp-api-btn-primary {
  background: #ffffff;
  color: var(--dgw-whatsapp-api-green-deepest);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.dgw-whatsapp-api-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24); }

.dgw-whatsapp-api-btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
}
.dgw-whatsapp-api-btn-ghost:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.65); }

.dgw-whatsapp-api-btn-brand {
  background: var(--dgw-whatsapp-api-brand-blue);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(1, 14, 208, 0.25);
}
.dgw-whatsapp-api-btn-brand:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(1, 14, 208, 0.35); }

.dgw-whatsapp-api-btn-outline {
  background: transparent;
  color: var(--dgw-whatsapp-api-green-deepest);
  border: 1.5px solid var(--dgw-whatsapp-api-green-dark);
}
.dgw-whatsapp-api-btn-outline:hover { background: var(--dgw-whatsapp-api-green-dark); color: #fff; }

/* Reveal-on-scroll utility */
.dgw-whatsapp-api-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.dgw-whatsapp-api-reveal.dgw-whatsapp-api-is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================
   NAV
   ========================================================== */
.dgw-whatsapp-api-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 254, 249, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--dgw-whatsapp-api-border);
}
.dgw-whatsapp-api-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.dgw-whatsapp-api-logo { display: flex; align-items: center; gap: 10px; font-family: var(--dgw-whatsapp-api-font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--dgw-whatsapp-api-ink); }
.dgw-whatsapp-api-logo img { height: 30px; width: auto; }
.dgw-whatsapp-api-nav-links { display: flex; gap: 28px; align-items: center; }
.dgw-whatsapp-api-nav-links a { font-size: 14px; font-weight: 500; color: var(--dgw-whatsapp-api-ink-soft); transition: color 0.2s; }
.dgw-whatsapp-api-nav-links a:hover { color: var(--dgw-whatsapp-api-green-dark); }
.dgw-whatsapp-api-nav-cta { padding: 10px 18px; font-size: 14px; }

/* ==========================================================
   HERO
   ========================================================== */
.dgw-whatsapp-api-hero {
  position: relative;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 60%, #075E54 100%);
  color: #ffffff;
  padding: 96px 0 120px;
  overflow: hidden;
}
.dgw-whatsapp-api-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.18), transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(255, 255, 255, 0.10), transparent 50%);
  pointer-events: none;
}
.dgw-whatsapp-api-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.10) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.5;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
}
.dgw-whatsapp-api-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.dgw-whatsapp-api-hero-eyebrow {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.30);
  color: #ffffff;
}
.dgw-whatsapp-api-hero-eyebrow .dgw-whatsapp-api-meta-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0 12px rgba(255,255,255,0.8);
  animation: dgw-whatsapp-api-pulse 2s ease-in-out infinite;
}
@keyframes dgw-whatsapp-api-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }

.dgw-whatsapp-api-hero h1 {
  color: #ffffff;
  margin: 18px 0 22px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}
.dgw-whatsapp-api-hero p.dgw-whatsapp-api-hero-sub {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
  margin-bottom: 32px;
}
.dgw-whatsapp-api-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.dgw-whatsapp-api-hero-trust {
  display: flex; gap: 28px; flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.dgw-whatsapp-api-hero-trust div { display: flex; align-items: center; gap: 6px; }
.dgw-whatsapp-api-hero-trust strong { color: #fff; font-weight: 700; }

/* Hero animated chat */
.dgw-whatsapp-api-chat {
  background: #075E54;
  border-radius: 24px;
  padding: 0;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3), 0 6px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: rotate(2deg);
  transition: transform 0.6s ease;
}
.dgw-whatsapp-api-chat:hover { transform: rotate(0deg); }
.dgw-whatsapp-api-chat-header {
  background: #075E54;
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dgw-whatsapp-api-chat-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  position: relative;
}
.dgw-whatsapp-api-chat-avatar::after {
  content: ''; position: absolute; bottom: -2px; right: -2px;
  width: 14px; height: 14px;
  border: 2px solid #075E54;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 8px rgba(37, 211, 102, 0.7);
  animation: dgw-whatsapp-api-pulse 2.5s ease-in-out infinite;
}
.dgw-whatsapp-api-chat-name { font-family: var(--dgw-whatsapp-api-font-display); font-weight: 700; font-size: 15px; }
.dgw-whatsapp-api-chat-status { font-size: 11px; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 5px; }
.dgw-whatsapp-api-chat-status::before { content: '✓'; background: #25D366; color: #075E54; width: 12px; height: 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; }

.dgw-whatsapp-api-chat-body {
  background: #ECE5DD;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(7, 94, 84, 0.04), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(7, 94, 84, 0.04), transparent 30%);
  padding: 18px 14px;
  height: 460px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.dgw-whatsapp-api-bubble {
  max-width: 78%;
  padding: 9px 12px 7px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.42;
  color: #111;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  position: relative;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  animation: dgw-whatsapp-api-bubble-in 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.dgw-whatsapp-api-bubble.dgw-whatsapp-api-in {
  background: #ffffff;
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.dgw-whatsapp-api-bubble.dgw-whatsapp-api-out {
  background: var(--dgw-whatsapp-api-bubble-out);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.dgw-whatsapp-api-bubble small {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  color: rgba(0,0,0,0.45);
  margin-left: 8px;
  float: right;
  margin-top: 4px;
}
.dgw-whatsapp-api-tick {
  display: inline-flex; gap: 0; color: #4FC3F7; font-size: 11px; line-height: 1; letter-spacing: -3px;
}
.dgw-whatsapp-api-typing {
  background: #ffffff;
  align-self: flex-start;
  padding: 12px 16px;
  border-radius: 10px;
  border-bottom-left-radius: 2px;
  display: inline-flex;
  gap: 4px;
  width: fit-content;
  opacity: 0;
  animation: dgw-whatsapp-api-bubble-in 0.4s ease forwards;
}
.dgw-whatsapp-api-typing span {
  width: 7px; height: 7px;
  background: #888; border-radius: 50%;
  animation: dgw-whatsapp-api-typing 1.2s ease-in-out infinite;
}
.dgw-whatsapp-api-typing span:nth-child(2) { animation-delay: 0.18s; }
.dgw-whatsapp-api-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dgw-whatsapp-api-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes dgw-whatsapp-api-bubble-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bubble timing — staggered reveal */
.dgw-whatsapp-api-bubble:nth-child(1) { animation-delay: 0.5s; }
.dgw-whatsapp-api-bubble:nth-child(2) { animation-delay: 1.6s; }
.dgw-whatsapp-api-typing.dgw-whatsapp-api-t1 { animation-delay: 2.8s; }
.dgw-whatsapp-api-bubble:nth-child(4) { animation-delay: 4.2s; }
.dgw-whatsapp-api-bubble:nth-child(5) { animation-delay: 5.6s; }
.dgw-whatsapp-api-bubble:nth-child(6) { animation-delay: 7.0s; }
.dgw-whatsapp-api-bubble:nth-child(7) { animation-delay: 8.4s; }

/* ==========================================================
   TRUST BAND
   ========================================================== */
.dgw-whatsapp-api-trust {
  padding: 64px 0 32px;
}
.dgw-whatsapp-api-trust-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.dgw-whatsapp-api-stat {
  background: var(--dgw-whatsapp-api-card);
  backdrop-filter: blur(8px);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
}
.dgw-whatsapp-api-stat-num {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-dark), var(--dgw-whatsapp-api-green-deepest));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dgw-whatsapp-api-stat-label {
  font-size: 13px;
  color: var(--dgw-whatsapp-api-muted);
  margin-top: 6px;
  font-weight: 500;
}
.dgw-whatsapp-api-trust-meta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 13px;
  color: var(--dgw-whatsapp-api-muted);
  flex-wrap: wrap;
}
.dgw-whatsapp-api-meta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #1877F2, #0a5cc7);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.25);
}
.dgw-whatsapp-api-meta-badge::before {
  content: 'M'; width: 18px; height: 18px;
  background: #fff; color: #1877F2;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px;
}

/* ==========================================================
   WHAT IS — comparison
   ========================================================== */
.dgw-whatsapp-api-what {
  padding: 88px 0;
}
.dgw-whatsapp-api-what-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.dgw-whatsapp-api-what-head .dgw-whatsapp-api-h2 { margin: 14px 0 18px; }
.dgw-whatsapp-api-what-q {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--dgw-whatsapp-api-green-deepest);
  letter-spacing: -0.012em;
  margin-bottom: 12px;
}
.dgw-whatsapp-api-what-a {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--dgw-whatsapp-api-ink-soft);
  max-width: 680px;
  margin: 0 auto;
}
.dgw-whatsapp-api-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  position: relative;
}
.dgw-whatsapp-api-compare::before {
  content: 'VS';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  z-index: 3;
}
.dgw-whatsapp-api-compare-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  padding: 36px 32px;
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  border: 1px solid var(--dgw-whatsapp-api-border);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-personal {
  border-color: rgba(0, 0, 0, 0.08);
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-business {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border: 1.5px solid rgba(37, 211, 102, 0.35);
  box-shadow: var(--dgw-whatsapp-api-shadow-lg);
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-business::after {
  content: 'You want this';
  position: absolute;
  top: -12px; right: 24px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
.dgw-whatsapp-api-compare-card:hover { transform: translateY(-3px); }
.dgw-whatsapp-api-compare-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 22px;
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-personal .dgw-whatsapp-api-compare-icon { background: rgba(0,0,0,0.06); color: #4a5170; }
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-business .dgw-whatsapp-api-compare-icon { background: rgba(37, 211, 102, 0.15); color: var(--dgw-whatsapp-api-green-dark); }
.dgw-whatsapp-api-compare-card h3 { margin-bottom: 6px; }
.dgw-whatsapp-api-compare-tag { font-size: 12px; color: var(--dgw-whatsapp-api-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 18px; }
.dgw-whatsapp-api-compare-list { display: flex; flex-direction: column; gap: 10px; }
.dgw-whatsapp-api-compare-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px;
  color: var(--dgw-whatsapp-api-ink-soft);
  line-height: 1.5;
}
.dgw-whatsapp-api-compare-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-personal .dgw-whatsapp-api-compare-list li {
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-personal .dgw-whatsapp-api-compare-list li::before {
  content: '×';
  background: rgba(220, 53, 69, 0.12);
  color: #b8323e;
}
.dgw-whatsapp-api-compare-card.dgw-whatsapp-api-business .dgw-whatsapp-api-compare-list li::before {
  content: '✓';
  background: rgba(37, 211, 102, 0.18);
  color: var(--dgw-whatsapp-api-green-dark);
}
.dgw-whatsapp-api-what-foot {
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-what-foot strong { color: var(--dgw-whatsapp-api-green-deepest); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
  .dgw-whatsapp-api-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .dgw-whatsapp-api-chat { margin: 0 auto; transform: rotate(0deg); }
  .dgw-whatsapp-api-trust-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .dgw-whatsapp-api-section { padding: 72px 0; }
  .dgw-whatsapp-api-hero { padding: 64px 0 88px; }
  .dgw-whatsapp-api-nav-links { display: none; }
  .dgw-whatsapp-api-compare { grid-template-columns: 1fr; gap: 24px; }
  .dgw-whatsapp-api-compare::before {
    position: relative; top: auto; left: auto; transform: none;
    margin: 0 auto;
    grid-row: 2;
  }
}
@media (max-width: 480px) {
  .dgw-whatsapp-api-container { padding: 30px 18px 0px; }
  .dgw-whatsapp-api-hero { padding: 48px 0 72px; }
  .dgw-whatsapp-api-hero-ctas { flex-direction: column; align-items: stretch; }
  .dgw-whatsapp-api-hero-ctas .dgw-whatsapp-api-btn { justify-content: center; }
  .dgw-whatsapp-api-trust-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dgw-whatsapp-api-stat { padding: 20px 16px; }
  .dgw-whatsapp-api-compare-card { padding: 28px 22px; }
}

/* ==========================================================
   AUTOMATION GRID (Batch B-1)
   ========================================================== */
.dgw-whatsapp-api-auto { padding: 96px 0; }
.dgw-whatsapp-api-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.dgw-whatsapp-api-section-head .dgw-whatsapp-api-h2 { margin: 14px 0 16px; }
.dgw-whatsapp-api-auto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dgw-whatsapp-api-auto-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 24px 22px;
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-auto-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.dgw-whatsapp-api-auto-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  border-color: rgba(37, 211, 102, 0.3);
}
.dgw-whatsapp-api-auto-card:hover::before { transform: scaleX(1); }
.dgw-whatsapp-api-auto-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(18, 140, 126, 0.10));
  color: var(--dgw-whatsapp-api-green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.dgw-whatsapp-api-auto-title {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.dgw-whatsapp-api-auto-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dgw-whatsapp-api-muted);
}

/* ==========================================================
   INDUSTRIES (Batch B-2) — green gradient tabs
   ========================================================== */
.dgw-whatsapp-api-ind {
  background: linear-gradient(135deg, #075E54 0%, #128C7E 50%, #25D366 100%);
  color: #fff;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-ind::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: 32px 32px;
  opacity: 0.4;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
  pointer-events: none;
}
.dgw-whatsapp-api-ind .dgw-whatsapp-api-section-head .dgw-whatsapp-api-h2 { color: #fff; }
.dgw-whatsapp-api-ind .dgw-whatsapp-api-section-head .dgw-whatsapp-api-lede { color: rgba(255,255,255,0.85); }
.dgw-whatsapp-api-ind .dgw-whatsapp-api-eyebrow {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}
.dgw-whatsapp-api-ind-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: stretch;
}
.dgw-whatsapp-api-ind-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dgw-whatsapp-api-ind-tab {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 16px 18px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 600;
  font-size: 15px;
  display: flex; align-items: center; gap: 12px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dgw-whatsapp-api-ind-tab:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.dgw-whatsapp-api-ind-tab.dgw-whatsapp-api-is-active {
  background: #fff;
  color: var(--dgw-whatsapp-api-green-deepest);
  border-color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  transform: translateX(6px);
}
.dgw-whatsapp-api-ind-tab-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-ind-tab.dgw-whatsapp-api-is-active .dgw-whatsapp-api-ind-tab-icon {
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
}

.dgw-whatsapp-api-ind-panes {
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  padding: 32px;
  backdrop-filter: blur(10px);
  min-height: 360px;
}
.dgw-whatsapp-api-ind-pane { display: none; }
.dgw-whatsapp-api-ind-pane.dgw-whatsapp-api-is-active {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: center;
  animation: dgw-whatsapp-api-fade-in 0.4s ease;
}
@keyframes dgw-whatsapp-api-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dgw-whatsapp-api-ind-copy h3 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  margin-bottom: 14px;
  color: #fff;
  letter-spacing: -0.015em;
}
.dgw-whatsapp-api-ind-copy p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin-bottom: 18px;
}
.dgw-whatsapp-api-ind-list { display: flex; flex-direction: column; gap: 8px; }
.dgw-whatsapp-api-ind-list li {
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  display: flex; align-items: flex-start; gap: 10px;
}
.dgw-whatsapp-api-ind-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 20px; height: 20px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  color: #fff;
  margin-top: 1px;
}
/* Mini chat preview inside pane */
.dgw-whatsapp-api-ind-chat {
  background: #ECE5DD;
  border-radius: 14px;
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  min-height: 240px;
}
.dgw-whatsapp-api-ind-chat .dgw-whatsapp-api-bubble {
  font-size: 12.5px;
  padding: 7px 10px 6px;
  animation: none;
  opacity: 1;
  transform: none;
}

/* ==========================================================
   CHATBOT BUILDER + AI (Batch B-3)
   ========================================================== */
.dgw-whatsapp-api-builder { padding: 96px 0; }
.dgw-whatsapp-api-builder-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.dgw-whatsapp-api-builder-copy .dgw-whatsapp-api-h2 { margin: 14px 0 18px; }
.dgw-whatsapp-api-builder-copy .dgw-whatsapp-api-lede { margin-bottom: 24px; }
.dgw-whatsapp-api-builder-bullets { display: grid; gap: 14px; margin-bottom: 28px; }
.dgw-whatsapp-api-builder-bullets li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: var(--dgw-whatsapp-api-ink-soft); line-height: 1.55;
  position: relative;
  padding-left: 34px;
}
.dgw-whatsapp-api-builder-bullets li strong { color: var(--dgw-whatsapp-api-ink); font-weight: 700; }
.dgw-whatsapp-api-builder-bullets li::before {
  content: '✓';
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.dgw-whatsapp-api-ai-callout {
  background: linear-gradient(135deg, rgba(1, 14, 208, 0.06), rgba(37, 211, 102, 0.06));
  border: 1px solid rgba(1, 14, 208, 0.15);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start;
}
.dgw-whatsapp-api-ai-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-brand-blue), #3b48ff);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-ai-callout h4 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700; font-size: 15px; color: var(--dgw-whatsapp-api-ink); margin-bottom: 4px;
}
.dgw-whatsapp-api-ai-callout p { font-size: 13.5px; color: var(--dgw-whatsapp-api-muted); line-height: 1.5; }

/* Visual flow */
.dgw-whatsapp-api-builder-vis {
  background: var(--dgw-whatsapp-api-card-solid);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  border: 1px solid var(--dgw-whatsapp-api-border);
  box-shadow: var(--dgw-whatsapp-api-shadow-lg);
  padding: 28px;
  position: relative;
}
.dgw-whatsapp-api-flow { display: flex; flex-direction: column; gap: 8px; }
.dgw-whatsapp-api-flow-node {
  background: linear-gradient(180deg, #ffffff, #f0fdf4);
  border: 1.5px solid rgba(37, 211, 102, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 12px rgba(7, 94, 84, 0.06);
}
.dgw-whatsapp-api-flow-node-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-flow-node-text { font-size: 13px; color: var(--dgw-whatsapp-api-ink); line-height: 1.35; }
.dgw-whatsapp-api-flow-node-text strong {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}
.dgw-whatsapp-api-flow-arrow {
  width: 2px; height: 18px;
  background: linear-gradient(180deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  margin: 0 auto;
  position: relative;
}
.dgw-whatsapp-api-flow-arrow::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--dgw-whatsapp-api-green-dark);
}
.dgw-whatsapp-api-flow-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ==========================================================
   DAILY-DRIVER TOOLKIT — Templates · Broadcasts · CSV
   ========================================================== */
.dgw-whatsapp-api-tools {
  padding: 96px 0;
  position: relative;
  background:
    radial-gradient(circle at 20% 0%, rgba(37, 211, 102, 0.05), transparent 40%),
    linear-gradient(180deg, #fafdf6 0%, #f4faf6 100%);
}
.dgw-whatsapp-api-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dgw-whatsapp-api-tools-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  overflow: hidden;
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-tools-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dgw-whatsapp-api-shadow-lg);
}

/* The mock UI panel at the top of each card */
.dgw-whatsapp-api-tools-mock {
  background: linear-gradient(180deg, #f7fef9 0%, #ecfdf5 100%);
  border-bottom: 1px solid rgba(7, 94, 84, 0.10);
  padding: 18px 18px 22px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.dgw-whatsapp-api-tools-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(7, 94, 84, 0.15);
}
.dgw-whatsapp-api-tools-mock-tab {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--dgw-whatsapp-api-green-deepest);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.dgw-whatsapp-api-tools-mock-count {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 10.5px;
  color: var(--dgw-whatsapp-api-muted);
}

/* Pills (status indicators) */
.dgw-whatsapp-api-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dgw-whatsapp-api-pill-ok { background: rgba(37, 211, 102, 0.18); color: var(--dgw-whatsapp-api-green-deepest); }
.dgw-whatsapp-api-pill-warn { background: rgba(255, 180, 0, 0.18); color: #a06600; }
.dgw-whatsapp-api-pill-live { background: rgba(255, 122, 69, 0.18); color: #c45a30; }
.dgw-whatsapp-api-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF7A45;
  animation: dgw-whatsapp-api-pulse 1.6s ease-in-out infinite;
}

/* === Template list === */
.dgw-whatsapp-api-tmpl {
  background: #fff;
  border: 1px solid rgba(7, 94, 84, 0.10);
  border-radius: 10px;
  padding: 9px 11px 10px;
  box-shadow: 0 1px 3px rgba(7, 94, 84, 0.04);
}
.dgw-whatsapp-api-tmpl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.dgw-whatsapp-api-tmpl-name {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dgw-whatsapp-api-ink);
}
.dgw-whatsapp-api-tmpl-body {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-tmpl-body em {
  font-style: normal;
  background: rgba(1, 14, 208, 0.08);
  color: var(--dgw-whatsapp-api-brand-blue);
  padding: 0 4px;
  border-radius: 3px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 10.5px;
}

/* === Campaign card === */
.dgw-whatsapp-api-cmp {
  background: #fff;
  border: 1px solid rgba(7, 94, 84, 0.10);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(7, 94, 84, 0.04);
  flex: 1;
}
.dgw-whatsapp-api-cmp-name {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 4px;
}
.dgw-whatsapp-api-cmp-meta {
  font-size: 11px;
  color: var(--dgw-whatsapp-api-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dgw-whatsapp-api-cmp-meta strong { color: var(--dgw-whatsapp-api-ink); font-weight: 700; }
.dgw-whatsapp-api-cmp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.dgw-whatsapp-api-cmp-stat {
  background: linear-gradient(180deg, #f7fef9, #ecfdf5);
  border: 1px solid rgba(37, 211, 102, 0.18);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.dgw-whatsapp-api-cmp-stat-num {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--dgw-whatsapp-api-green-deepest);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.dgw-whatsapp-api-cmp-stat-label {
  font-size: 9.5px;
  color: var(--dgw-whatsapp-api-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
  font-weight: 600;
}
.dgw-whatsapp-api-cmp-bar {
  height: 6px;
  background: rgba(7, 94, 84, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.dgw-whatsapp-api-cmp-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  border-radius: 999px;
  animation: dgw-whatsapp-api-cmp-fill 1.6s ease-out;
}
@keyframes dgw-whatsapp-api-cmp-fill { from { width: 0; } }
.dgw-whatsapp-api-cmp-bar-label {
  font-size: 10.5px;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-cmp-bar-label strong { color: var(--dgw-whatsapp-api-green-deepest); font-weight: 700; }

/* === CSV mock === */
.dgw-whatsapp-api-csv { display: flex; flex-direction: column; gap: 8px; }
.dgw-whatsapp-api-csv-drop {
  background: #fff;
  border: 1.5px dashed rgba(37, 211, 102, 0.4);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dgw-whatsapp-api-csv-drop-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-csv-drop-text strong {
  display: block;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--dgw-whatsapp-api-ink);
}
.dgw-whatsapp-api-csv-drop-text span {
  display: block;
  font-size: 10.5px;
  color: var(--dgw-whatsapp-api-muted);
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  margin-top: 1px;
}
.dgw-whatsapp-api-csv-progress {
  height: 4px;
  background: rgba(7, 94, 84, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.dgw-whatsapp-api-csv-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  border-radius: 999px;
  animation: dgw-whatsapp-api-cmp-fill 2s ease-out;
}
.dgw-whatsapp-api-csv-map {
  background: #fff;
  border: 1px solid rgba(7, 94, 84, 0.10);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dgw-whatsapp-api-csv-map-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(7, 94, 84, 0.08);
}
.dgw-whatsapp-api-csv-map-row:last-child { border-bottom: none; }
.dgw-whatsapp-api-csv-col {
  background: rgba(1, 14, 208, 0.08);
  color: var(--dgw-whatsapp-api-brand-blue);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  justify-self: start;
}
.dgw-whatsapp-api-csv-arrow {
  color: var(--dgw-whatsapp-api-green-dark);
  font-size: 13px;
  font-weight: 700;
}
.dgw-whatsapp-api-csv-field {
  background: rgba(37, 211, 102, 0.14);
  color: var(--dgw-whatsapp-api-green-deepest);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  justify-self: start;
}

/* === Card info section === */
.dgw-whatsapp-api-tools-info {
  padding: 24px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dgw-whatsapp-api-tools-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(18, 140, 126, 0.10));
  color: var(--dgw-whatsapp-api-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.dgw-whatsapp-api-tools-info h3 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 8px;
  letter-spacing: -0.012em;
}
.dgw-whatsapp-api-tools-info p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dgw-whatsapp-api-muted);
  margin-bottom: 16px;
}
.dgw-whatsapp-api-tools-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dgw-whatsapp-api-tools-list li {
  font-size: 13px;
  color: var(--dgw-whatsapp-api-ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.dgw-whatsapp-api-tools-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 16px; height: 16px;
  background: rgba(37, 211, 102, 0.18);
  color: var(--dgw-whatsapp-api-green-dark);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  margin-top: 2px;
}
.dgw-whatsapp-api-tools-list code {
  background: rgba(1, 14, 208, 0.08);
  color: var(--dgw-whatsapp-api-brand-blue);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 11.5px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
}

/* Responsive */
@media (max-width: 1024px) {
  .dgw-whatsapp-api-tools-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
}
@media (max-width: 880px) {
  .dgw-whatsapp-api-tools { padding: 72px 0; }
  .dgw-whatsapp-api-tools-mock { min-height: auto; padding: 16px 16px 18px; }
  .dgw-whatsapp-api-tools-info { padding: 22px 20px 24px; }
}

/* ==========================================================
   AGENTIC AI — Live demo on WhatsApp chat background
   ========================================================== */
.dgw-whatsapp-api-agent2 {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-agent2-eyebrow {
  background: rgba(255, 122, 69, 0.10);
  color: #c45a30;
  border-color: rgba(255, 122, 69, 0.25);
}

/* --- Scenario tabs --- */
.dgw-whatsapp-api-agent2-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
.dgw-whatsapp-api-agent2-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1.5px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  font-family: var(--dgw-whatsapp-api-font-body);
}
.dgw-whatsapp-api-agent2-tab:hover {
  transform: translateY(-2px);
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  border-color: rgba(37, 211, 102, 0.4);
}
.dgw-whatsapp-api-agent2-tab.dgw-whatsapp-api-is-active {
  background: linear-gradient(135deg, #ffffff, #f0fdf4);
  border-color: var(--dgw-whatsapp-api-green-dark);
  box-shadow: 0 12px 32px rgba(7, 94, 84, 0.14);
}
.dgw-whatsapp-api-agent2-tab-emoji {
  font-size: 28px;
  flex-shrink: 0;
}
.dgw-whatsapp-api-agent2-tab-title {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 2px;
}
.dgw-whatsapp-api-agent2-tab-sub {
  font-size: 11.5px;
  color: var(--dgw-whatsapp-api-muted);
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  letter-spacing: 0.01em;
}

/* --- Stage with WhatsApp chat texture background --- */
.dgw-whatsapp-api-agent2-stage {
  position: relative;
  border-radius: var(--dgw-whatsapp-api-radius-xl);
  padding: 48px 36px 36px;
  overflow: hidden;
  background: #ECE5DD;
  box-shadow: 0 32px 80px rgba(7, 94, 84, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.dgw-whatsapp-api-agent2-stage-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: #ECE5DD;
  background-image:
    radial-gradient(circle at 10% 12%, rgba(7, 94, 84, 0.06), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(7, 94, 84, 0.05), transparent 30%),
    radial-gradient(circle at 30% 80%, rgba(37, 211, 102, 0.06), transparent 32%),
    radial-gradient(circle at 78% 88%, rgba(7, 94, 84, 0.05), transparent 30%);
}
.dgw-whatsapp-api-agent2-stage-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(7, 94, 84, 0.08) 1px, transparent 0);
  background-size: 18px 18px;
  opacity: 0.6;
}

/* SVG connectors overlay */
.dgw-whatsapp-api-agent2-svg {
  position: absolute;
  inset: 48px 36px auto 36px;
  width: calc(100% - 72px);
  height: 460px;
  pointer-events: none;
  z-index: 1;
}
.dgw-whatsapp-api-agent2-flow {
  stroke-dasharray: 8 12;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dgw-whatsapp-api-agent2-flow.dgw-whatsapp-api-is-flowing {
  opacity: 1;
  animation: dgw-whatsapp-api-agent2-flow-anim 1.2s linear infinite;
}
@keyframes dgw-whatsapp-api-agent2-flow-anim {
  to { stroke-dashoffset: -40; }
}

/* Three-column layout */
.dgw-whatsapp-api-agent2-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 320px 1fr 280px;
  gap: 32px;
  align-items: start;
}

/* ===== Phone (column 1) ===== */
.dgw-whatsapp-api-agent2-phone { position: relative; }
.dgw-whatsapp-api-agent2-phone-frame {
  background: #075E54;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.18);
  border: 8px solid #1a1a1a;
}
.dgw-whatsapp-api-agent2-phone-head {
  background: #075E54;
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dgw-whatsapp-api-agent2-phone-back {
  font-size: 22px;
  line-height: 1;
  color: rgba(255,255,255,0.7);
}
.dgw-whatsapp-api-agent2-phone-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dgw-whatsapp-api-font-display); font-weight: 800; font-size: 14px; color: #fff;
}
.dgw-whatsapp-api-agent2-phone-name {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 14px;
}
.dgw-whatsapp-api-agent2-phone-online {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; gap: 5px;
}
.dgw-whatsapp-api-agent2-phone-online span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #25D366; box-shadow: 0 0 6px #25D366;
  animation: dgw-whatsapp-api-pulse 2s ease-in-out infinite;
}
.dgw-whatsapp-api-agent2-phone-icons {
  margin-left: auto;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 4px;
}
.dgw-whatsapp-api-agent2-phone-body {
  background: #ECE5DD;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(7, 94, 84, 0.06), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(7, 94, 84, 0.05), transparent 30%);
  padding: 14px 12px;
  height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dgw-whatsapp-api-agent2-phone-body::-webkit-scrollbar { width: 6px; }
.dgw-whatsapp-api-agent2-phone-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.dgw-whatsapp-api-agent2-phone-input {
  background: #075E54;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dgw-whatsapp-api-agent2-phone-input-text {
  flex: 1;
  background: rgba(255,255,255,0.95);
  color: #555;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 18px;
  font-family: var(--dgw-whatsapp-api-font-body);
}
.dgw-whatsapp-api-agent2-phone-mic {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4);
}

/* Bubbles inside the phone */
.dgw-whatsapp-api-agent2-bub {
  max-width: 80%;
  padding: 7px 10px 5px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #111;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  position: relative;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  animation: dgw-whatsapp-api-agent2-bub-in 0.4s cubic-bezier(0.2,0.7,0.3,1) forwards;
  word-wrap: break-word;
}
@keyframes dgw-whatsapp-api-agent2-bub-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dgw-whatsapp-api-agent2-bub-in {
  background: #ffffff;
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.dgw-whatsapp-api-agent2-bub-out {
  background: #DCF8C6;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.dgw-whatsapp-api-agent2-bub small {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  font-size: 9.5px;
  color: rgba(0,0,0,0.45);
  margin-left: 6px;
  float: right;
  margin-top: 3px;
}
.dgw-whatsapp-api-agent2-bub-typing {
  background: #ffffff;
  align-self: flex-start;
  padding: 9px 13px;
  border-radius: 8px;
  border-bottom-left-radius: 2px;
  display: inline-flex;
  gap: 3px;
  width: fit-content;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  opacity: 0;
  animation: dgw-whatsapp-api-agent2-bub-in 0.3s ease forwards;
}
.dgw-whatsapp-api-agent2-bub-typing span {
  width: 6px; height: 6px; background: #888; border-radius: 50%;
  animation: dgw-whatsapp-api-typing 1.2s ease-in-out infinite;
}
.dgw-whatsapp-api-agent2-bub-typing span:nth-child(2) { animation-delay: 0.18s; }
.dgw-whatsapp-api-agent2-bub-typing span:nth-child(3) { animation-delay: 0.36s; }

.dgw-whatsapp-api-agent2-phone-tag,
.dgw-whatsapp-api-agent2-brain-tag,
.dgw-whatsapp-api-agent2-actions-tag {
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  background: #075E54;
  color: #fff;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 3;
}
.dgw-whatsapp-api-agent2-phone { padding-bottom: 8px; }
.dgw-whatsapp-api-agent2-brain { position: relative; padding-bottom: 8px; }
.dgw-whatsapp-api-agent2-actions { position: relative; padding-bottom: 8px; }
.dgw-whatsapp-api-agent2-brain-tag { background: var(--dgw-whatsapp-api-brand-blue); }
.dgw-whatsapp-api-agent2-actions-tag { background: #FF7A45; }

/* ===== Brain (column 2) ===== */
.dgw-whatsapp-api-agent2-brain-orb {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.dgw-whatsapp-api-agent2-brain-ring {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1.5px dashed rgba(7, 94, 84, 0.25);
  animation: dgw-whatsapp-api-spin 28s linear infinite;
}
.dgw-whatsapp-api-agent2-brain-ring-2 {
  width: 140px; height: 140px;
  border: 1px dashed rgba(1, 14, 208, 0.20);
  animation: dgw-whatsapp-api-spin-rev 22s linear infinite;
}
@keyframes dgw-whatsapp-api-spin { to { transform: rotate(360deg); } }
@keyframes dgw-whatsapp-api-spin-rev { to { transform: rotate(-360deg); } }
.dgw-whatsapp-api-agent2-brain-core {
  position: relative;
  z-index: 2;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 2px solid var(--dgw-whatsapp-api-green-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(7, 94, 84, 0.20), inset 0 -4px 8px rgba(7, 94, 84, 0.06);
}
.dgw-whatsapp-api-agent2-brain-core::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.30), rgba(1, 14, 208, 0.20));
  z-index: -1;
  filter: blur(14px);
  opacity: 0.85;
  animation: dgw-whatsapp-api-pulse 2.4s ease-in-out infinite;
}
.dgw-whatsapp-api-agent2-brain-icon {
  font-size: 30px;
  margin-bottom: 2px;
}
.dgw-whatsapp-api-agent2-brain-label {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 11px;
  color: var(--dgw-whatsapp-api-green-deepest);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dgw-whatsapp-api-agent2-brain-status {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 9.5px;
  color: var(--dgw-whatsapp-api-muted);
  margin-top: 2px;
  text-align: center;
  max-width: 95px;
  line-height: 1.2;
}

.dgw-whatsapp-api-agent2-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dgw-whatsapp-api-agent2-tool {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(7, 94, 84, 0.10);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: var(--dgw-whatsapp-api-font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--dgw-whatsapp-api-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
  opacity: 0.7;
}
.dgw-whatsapp-api-agent2-tool span { font-size: 14px; }
.dgw-whatsapp-api-agent2-tool.dgw-whatsapp-api-is-active {
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  border-color: var(--dgw-whatsapp-api-green-dark);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

/* ===== Actions feed (column 3) ===== */
.dgw-whatsapp-api-agent2-actions {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 12px 32px rgba(7, 94, 84, 0.10);
  border: 1px solid rgba(7, 94, 84, 0.08);
  backdrop-filter: blur(10px);
  min-height: 360px;
}
.dgw-whatsapp-api-agent2-actions-head {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dgw-whatsapp-api-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(7, 94, 84, 0.15);
  margin-bottom: 14px;
}
.dgw-whatsapp-api-agent2-actions-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF7A45;
  box-shadow: 0 0 8px #FF7A45;
  animation: dgw-whatsapp-api-pulse 2s ease-in-out infinite;
}
.dgw-whatsapp-api-agent2-actions-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dgw-whatsapp-api-agent2-action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--dgw-whatsapp-api-ink-soft);
  line-height: 1.45;
  padding: 9px 11px;
  background: linear-gradient(135deg, #fafdf6, #f0fdf4);
  border-radius: 9px;
  border-left: 2.5px solid var(--dgw-whatsapp-api-green-dark);
  opacity: 0;
  transform: translateX(8px);
  animation: dgw-whatsapp-api-agent2-action-in 0.4s ease forwards;
}
@keyframes dgw-whatsapp-api-agent2-action-in {
  to { opacity: 1; transform: translateX(0); }
}
.dgw-whatsapp-api-agent2-action-icon {
  font-size: 15px;
  line-height: 1.2;
  flex-shrink: 0;
}
.dgw-whatsapp-api-agent2-action-text { flex: 1; }

/* Replay button */
.dgw-whatsapp-api-agent2-replay {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-top: 36px;
}
.dgw-whatsapp-api-agent2-replay-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(7, 94, 84, 0.20);
  color: var(--dgw-whatsapp-api-green-deepest);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
}
.dgw-whatsapp-api-agent2-replay-btn:hover {
  background: var(--dgw-whatsapp-api-green-dark);
  color: #fff;
  border-color: var(--dgw-whatsapp-api-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(7, 94, 84, 0.20);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .dgw-whatsapp-api-agent2-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .dgw-whatsapp-api-agent2-actions { grid-column: 1 / -1; min-height: auto; }
  .dgw-whatsapp-api-agent2-svg { display: none; }
  .dgw-whatsapp-api-agent2-actions-tag { bottom: auto; top: -14px; }
}
@media (max-width: 880px) {
  .dgw-whatsapp-api-agent2 { padding: 72px 0; }
  .dgw-whatsapp-api-agent2-tabs { grid-template-columns: 1fr; gap: 10px; }
  .dgw-whatsapp-api-agent2-grid { grid-template-columns: 1fr; gap: 28px; }
  .dgw-whatsapp-api-agent2-stage { padding: 32px 18px 24px; }
  .dgw-whatsapp-api-agent2-tools { grid-template-columns: 1fr 1fr; }
  .dgw-whatsapp-api-agent2-phone-frame { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .dgw-whatsapp-api-agent2-tab { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; }
  .dgw-whatsapp-api-agent2-tab-emoji { font-size: 22px; }
}

/* ==========================================================
   INTEGRATIONS MARQUEE (Batch C-1)
   ========================================================== */
.dgw-whatsapp-api-integ {
  padding: 80px 0;
  overflow: hidden;
  position: relative;
}
.dgw-whatsapp-api-integ .dgw-whatsapp-api-section-head { margin-bottom: 40px; }
.dgw-whatsapp-api-marquee {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dgw-whatsapp-api-marquee-row {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: dgw-whatsapp-api-scroll-left 40s linear infinite;
}
.dgw-whatsapp-api-marquee-row.dgw-whatsapp-api-rev {
  animation: dgw-whatsapp-api-scroll-right 40s linear infinite;
}
.dgw-whatsapp-api-marquee-row:hover { animation-play-state: paused; }
@keyframes dgw-whatsapp-api-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes dgw-whatsapp-api-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.dgw-whatsapp-api-logo-chip {
  flex-shrink: 0;
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: 12px;
  padding: 14px 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--dgw-whatsapp-api-ink-soft);
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dgw-whatsapp-api-logo-chip:hover { transform: translateY(-2px); box-shadow: var(--dgw-whatsapp-api-shadow-md); }
.dgw-whatsapp-api-logo-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
}

/* ==========================================================
   ONBOARDING STEPS (Batch C-2)
   ========================================================== */
.dgw-whatsapp-api-steps { padding: 96px 0; }
.dgw-whatsapp-api-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.dgw-whatsapp-api-steps-grid::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12.5%; right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark), var(--dgw-whatsapp-api-green-deepest));
  opacity: 0.4;
  z-index: 0;
}
.dgw-whatsapp-api-step { position: relative; z-index: 1; text-align: center; }
.dgw-whatsapp-api-step-num {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--dgw-whatsapp-api-card-solid);
  border: 2px solid rgba(37, 211, 102, 0.35);
  color: var(--dgw-whatsapp-api-green-deepest);
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(7, 94, 84, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.dgw-whatsapp-api-step:hover .dgw-whatsapp-api-step-num {
  transform: scale(1.06);
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
}
.dgw-whatsapp-api-step-title {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 8px;
}
.dgw-whatsapp-api-step-desc {
  font-size: 13.5px;
  color: var(--dgw-whatsapp-api-muted);
  line-height: 1.55;
}

/* ==========================================================
   PRICING (Batch C-3)
   ========================================================== */
.dgw-whatsapp-api-price { padding: 96px 0; }
.dgw-whatsapp-api-price-shell {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--dgw-whatsapp-api-card-solid);
  border-radius: var(--dgw-whatsapp-api-radius-xl);
  overflow: hidden;
  box-shadow: var(--dgw-whatsapp-api-shadow-lg);
  border: 1px solid var(--dgw-whatsapp-api-border);
}
.dgw-whatsapp-api-price-left {
  background: linear-gradient(135deg, #075E54 0%, #128C7E 60%, #25D366 100%);
  color: #fff;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-price-left::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: 24px 24px;
  opacity: 0.4;
  pointer-events: none;
}
.dgw-whatsapp-api-price-tag {
  display: inline-block;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  position: relative; z-index: 2;
}
.dgw-whatsapp-api-price-amount {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 6px;
  position: relative; z-index: 2;
}
.dgw-whatsapp-api-price-amount sub {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 4px;
  opacity: 0.85;
  vertical-align: baseline;
}
.dgw-whatsapp-api-price-bill {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 20px;
  position: relative; z-index: 2;
}
.dgw-whatsapp-api-price-note {
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 16px;
  margin-top: 16px;
  position: relative; z-index: 2;
}
.dgw-whatsapp-api-price-credits {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
  position: relative; z-index: 2;
  backdrop-filter: blur(6px);
}
.dgw-whatsapp-api-price-credits-num {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.dgw-whatsapp-api-price-credits-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
  font-family: var(--dgw-whatsapp-api-font-display);
}
.dgw-whatsapp-api-price-credits-label small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.dgw-whatsapp-api-price-warn {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 180, 0, 0.45);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative; z-index: 2;
  backdrop-filter: blur(6px);
  border-left: 3px solid #FFB400;
}
.dgw-whatsapp-api-price-warn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 12.5px;
  color: #FFD66B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.dgw-whatsapp-api-price-warn-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #FFB400;
  color: #5a3a00;
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dgw-whatsapp-api-price-warn p {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}
.dgw-whatsapp-api-price-warn p strong { color: #fff; font-weight: 700; }
.dgw-whatsapp-api-price-warn p em { font-style: normal; font-weight: 700; color: #FFD66B; }
.dgw-whatsapp-api-price-foot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--dgw-whatsapp-api-muted);
  text-align: center;
}
.dgw-whatsapp-api-price-foot strong { color: var(--dgw-whatsapp-api-green-deepest); font-weight: 700; }
.dgw-whatsapp-api-price-right { padding: 40px 36px; }
.dgw-whatsapp-api-price-right h3 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 14px;
  letter-spacing: -0.012em;
}
.dgw-whatsapp-api-price-list {
  display: flex; flex-direction: column; gap: 11px;
  margin-bottom: 24px;
}
.dgw-whatsapp-api-price-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  color: var(--dgw-whatsapp-api-ink-soft);
  line-height: 1.5;
}
.dgw-whatsapp-api-price-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 18px; height: 18px;
  background: rgba(37, 211, 102, 0.18);
  color: var(--dgw-whatsapp-api-green-dark);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  margin-top: 2px;
}

/* ==========================================================
   ELIGIBILITY (Batch C-4)
   ========================================================== */
.dgw-whatsapp-api-elig { padding: 80px 0 96px; }
.dgw-whatsapp-api-elig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dgw-whatsapp-api-elig-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  padding: 28px 24px;
  text-align: left;
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-elig-card:hover { transform: translateY(-4px); box-shadow: var(--dgw-whatsapp-api-shadow-md); }
.dgw-whatsapp-api-elig-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(18, 140, 126, 0.10));
  color: var(--dgw-whatsapp-api-green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.dgw-whatsapp-api-elig-card h4 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--dgw-whatsapp-api-ink);
  margin-bottom: 8px;
}
.dgw-whatsapp-api-elig-card p {
  font-size: 13.5px;
  color: var(--dgw-whatsapp-api-muted);
  line-height: 1.55;
}
.dgw-whatsapp-api-elig-foot {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-elig-foot a {
  color: var(--dgw-whatsapp-api-green-dark);
  font-weight: 600;
  border-bottom: 1.5px solid rgba(18, 140, 126, 0.4);
}

/* ==========================================================
   TESTIMONIALS (Batch D-1)
   ========================================================== */
.dgw-whatsapp-api-test { padding: 96px 0; }
.dgw-whatsapp-api-test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dgw-whatsapp-api-test-card {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-lg);
  padding: 32px 28px;
  box-shadow: var(--dgw-whatsapp-api-shadow-sm);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dgw-whatsapp-api-test-card:hover { transform: translateY(-4px); box-shadow: var(--dgw-whatsapp-api-shadow-md); }
.dgw-whatsapp-api-test-card::before {
  content: '\201C';
  position: absolute;
  top: -8px; left: 24px;
  font-family: 'Georgia', serif;
  font-size: 80px;
  line-height: 1;
  color: rgba(37, 211, 102, 0.18);
  font-weight: 700;
}
.dgw-whatsapp-api-test-stars {
  display: flex; gap: 3px; margin-bottom: 14px;
  color: #FFB400; font-size: 14px;
  letter-spacing: 1px;
}
.dgw-whatsapp-api-test-quote {
  font-size: 15px;
  color: var(--dgw-whatsapp-api-ink-soft);
  line-height: 1.6;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}
.dgw-whatsapp-api-test-author { display: flex; align-items: center; gap: 12px; }
.dgw-whatsapp-api-test-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 800;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.dgw-whatsapp-api-test-name { font-family: var(--dgw-whatsapp-api-font-display); font-weight: 700; font-size: 14.5px; color: var(--dgw-whatsapp-api-ink); }
.dgw-whatsapp-api-test-role { font-size: 12.5px; color: var(--dgw-whatsapp-api-muted); }

/* ==========================================================
   FAQ (Batch D-2)
   ========================================================== */
.dgw-whatsapp-api-faq { padding: 96px 0; }
.dgw-whatsapp-api-faq-shell { max-width: 820px; margin: 0 auto; }
.dgw-whatsapp-api-faq-item {
  background: var(--dgw-whatsapp-api-card-solid);
  border: 1px solid var(--dgw-whatsapp-api-border);
  border-radius: var(--dgw-whatsapp-api-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.dgw-whatsapp-api-faq-item.dgw-whatsapp-api-is-open {
  box-shadow: var(--dgw-whatsapp-api-shadow-md);
  border-color: rgba(37, 211, 102, 0.3);
}
.dgw-whatsapp-api-faq-q {
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer;
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--dgw-whatsapp-api-ink);
  user-select: none;
  width: 100%;
  text-align: left;
}
.dgw-whatsapp-api-faq-q-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.14);
  color: var(--dgw-whatsapp-api-green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.dgw-whatsapp-api-faq-item.dgw-whatsapp-api-is-open .dgw-whatsapp-api-faq-q-icon {
  background: linear-gradient(135deg, var(--dgw-whatsapp-api-green-light), var(--dgw-whatsapp-api-green-dark));
  color: #fff;
  transform: rotate(45deg);
}
.dgw-whatsapp-api-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.dgw-whatsapp-api-faq-a-inner {
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dgw-whatsapp-api-muted);
}
.dgw-whatsapp-api-faq-item.dgw-whatsapp-api-is-open .dgw-whatsapp-api-faq-a { max-height: 600px; }

/* ==========================================================
   FINAL CTA (Batch D-3)
   ========================================================== */
.dgw-whatsapp-api-cta {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 60%, #075E54 100%);
  color: #fff;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.dgw-whatsapp-api-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.18), transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(255,255,255,0.12), transparent 50%);
}
.dgw-whatsapp-api-cta::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.4;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
}
.dgw-whatsapp-api-cta-inner {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.dgw-whatsapp-api-cta h2 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin-bottom: 18px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.dgw-whatsapp-api-cta p {
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(255,255,255,0.92);
  margin-bottom: 30px;
  line-height: 1.6;
}
.dgw-whatsapp-api-cta-actions {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}

/* ==========================================================
   FOOTER (Batch D-4)
   ========================================================== */
.dgw-whatsapp-api-footer {
  background: #051c1a;
  color: rgba(255,255,255,0.78);
  padding: 64px 0 28px;
}
.dgw-whatsapp-api-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 40px;
}
.dgw-whatsapp-api-footer-brand .dgw-whatsapp-api-logo { color: #fff; margin-bottom: 12px; }
.dgw-whatsapp-api-footer-tag {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  max-width: 320px;
  margin-bottom: 16px;
}
.dgw-whatsapp-api-footer-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(24, 119, 242, 0.18);
  border: 1px solid rgba(24, 119, 242, 0.3);
  color: #6FA8F5;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.dgw-whatsapp-api-footer h5 {
  font-family: var(--dgw-whatsapp-api-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.dgw-whatsapp-api-footer-links { display: flex; flex-direction: column; gap: 10px; }
.dgw-whatsapp-api-footer-links a {
  font-size: 13.5px;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
}
.dgw-whatsapp-api-footer-links a:hover { color: #25D366; }
.dgw-whatsapp-api-footer-contact { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.65); }
.dgw-whatsapp-api-footer-contact a { color: rgba(255,255,255,0.85); }
.dgw-whatsapp-api-footer-contact a:hover { color: #25D366; }
.dgw-whatsapp-api-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
}
.dgw-whatsapp-api-footer-bottom-links { display: flex; gap: 18px; }
.dgw-whatsapp-api-footer-bottom-links a:hover { color: #25D366; }

/* ==========================================================
   STICKY WHATSAPP FAB
   ========================================================== */
.dgw-whatsapp-api-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 90;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45), 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: dgw-whatsapp-api-fab-in 0.5s ease 1.2s both;
}
.dgw-whatsapp-api-fab:hover { transform: scale(1.08); box-shadow: 0 16px 40px rgba(37, 211, 102, 0.55); }
.dgw-whatsapp-api-fab::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0.6;
  animation: dgw-whatsapp-api-fab-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dgw-whatsapp-api-fab-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes dgw-whatsapp-api-fab-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ==========================================================
   RESPONSIVE for new sections
   ========================================================== */
@media (max-width: 1024px) {
  .dgw-whatsapp-api-auto-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-whatsapp-api-ind-shell { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-ind-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .dgw-whatsapp-api-ind-tab { flex-shrink: 0; min-width: 200px; }
  .dgw-whatsapp-api-ind-tab.dgw-whatsapp-api-is-active { transform: none; }
  .dgw-whatsapp-api-ind-pane.dgw-whatsapp-api-is-active { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-builder-grid { grid-template-columns: 1fr; gap: 40px; }
  .dgw-whatsapp-api-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .dgw-whatsapp-api-steps-grid::before { display: none; }
  .dgw-whatsapp-api-test-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .dgw-whatsapp-api-elig-grid { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 880px) {
  .dgw-whatsapp-api-auto { padding: 72px 0; }
  .dgw-whatsapp-api-ind { padding: 72px 0; }
  .dgw-whatsapp-api-builder { padding: 72px 0; }
  .dgw-whatsapp-api-steps { padding: 72px 0; }
  .dgw-whatsapp-api-price { padding: 72px 0; }
  .dgw-whatsapp-api-elig { padding: 64px 0 72px; }
  .dgw-whatsapp-api-test { padding: 72px 0; }
  .dgw-whatsapp-api-faq { padding: 72px 0; }
  .dgw-whatsapp-api-cta { padding: 72px 0; }
  .dgw-whatsapp-api-price-shell { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-cta-actions { flex-direction: column; }
  .dgw-whatsapp-api-cta-actions .dgw-whatsapp-api-btn { justify-content: center; }
  .dgw-whatsapp-api-fab { width: 54px; height: 54px; bottom: 18px; right: 18px; }
  .dgw-whatsapp-api-fab svg { width: 24px; height: 24px; }
}
@media (max-width: 480px) {
  .dgw-whatsapp-api-auto-grid { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-footer-grid { grid-template-columns: 1fr; }
  .dgw-whatsapp-api-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dgw-whatsapp-api-faq-q { font-size: 14.5px; padding: 16px 18px; }
  .dgw-whatsapp-api-faq-a-inner { padding: 0 18px 18px; }
  .dgw-whatsapp-api-test-card { padding: 28px 22px; }
  .dgw-whatsapp-api-price-left, .dgw-whatsapp-api-price-right { padding: 32px 24px; }
}


/*---------- Contact Page --------------*/

.dgw-contact-body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color: #e8ecff;
  background: #02041a;
  min-height: 100vh;
  overflow-x: hidden;
}

/* -------------------------------------------------------------
   SCENE — Real photo background
   Drop a 1920x1080+ photo at assets/contact-bg.jpg
   ------------------------------------------------------------- */

.dgw-contact-scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: #02041a;
	
}

/* The photograph itself */
.dgw-contact-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url('uploads/2026/05/contact-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Photo is already cinematic — gentle tone shaping only */
  filter: brightness(0.92) contrast(1.06) saturate(1);
  animation: dgw-contact-photofade 1.2s ease-out both;
}

/* Cinematic darkening + brand-tone wash on top of the photo */
.dgw-contact-tint {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* Dark wash that protects copy in the center */
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(2, 5, 24, 0.45) 0%, rgba(2, 5, 24, 0.15) 60%, transparent 100%),
    /* Subtle brand-blue cool wash */
    linear-gradient(180deg, rgba(1, 14, 208, 0.10) 0%, transparent 40%, rgba(1, 14, 208, 0.18) 100%),
    /* Top-to-bottom darken so topbar reads cleanly */
    linear-gradient(180deg, rgba(2, 5, 24, 0.55) 0%, rgba(2, 5, 24, 0.15) 30%, rgba(2, 5, 24, 0.25) 70%, rgba(2, 5, 24, 0.65) 100%);
  pointer-events: none;
}

/* Soft vignette — corners darken, center stays clear */
.dgw-contact-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 50%, rgba(2, 5, 24, 0.55) 100%);
  pointer-events: none;
}

@keyframes dgw-contact-photofade {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* -------------------------------------------------------------
   TOP BAR
   ------------------------------------------------------------- */

.dgw-contact-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
}

.dgw-contact-logo-link {
  text-decoration: none;
}

.dgw-contact-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 0%, #c8d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dgw-contact-backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(232, 236, 255, 0.7);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
.dgw-contact-backlink:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

/* -------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------- */



.dgw-contact-content {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 70px 48px 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dgw-contact-eyebrow {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 215, 255, 0.85);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(200, 215, 255, 0.25);
  background: rgba(1, 14, 208, 0.15);
  backdrop-filter: blur(6px);
  margin-bottom: 28px;
  animation: dgw-contact-fadeup 0.8s ease 0.1s both;
}

.dgw-contact-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(36px, 5.2vw, 64px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 22px;
  text-shadow: 0 2px 40px rgba(1, 14, 208, 0.3);
  animation: dgw-contact-fadeup 0.8s ease 0.2s both;
}

.dgw-contact-headline-accent {
  background: linear-gradient(135deg, #ffb89a 0%, #ff7a45 50%, #ffa978 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.dgw-contact-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(232, 236, 255, 0.78);
  max-width: 620px;
  margin: 0 0 44px;
  animation: dgw-contact-fadeup 0.8s ease 0.3s both;
}

/* -------------------------------------------------------------
   CTA BUTTONS
   ------------------------------------------------------------- */

.dgw-contact-cta-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 50px;
  animation: dgw-contact-fadeup 0.8s ease 0.4s both;
}

.dgw-contact-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 240px;
  padding: 20px 32px;
  border-radius: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dgw-contact-btn > span:first-of-type {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dgw-contact-btn svg {
  flex-shrink: 0;
}

.dgw-contact-btn-meta {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.78;
  margin-top: 2px;
}

/* WhatsApp button — brand green */
.dgw-contact-btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #ffffff;
  box-shadow:
    0 10px 30px rgba(37, 211, 102, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.dgw-contact-btn-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(37, 211, 102, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.dgw-contact-btn-whatsapp::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.6s ease;
}
.dgw-contact-btn-whatsapp:hover::before {
  left: 100%;
}

/* Form button — glass with brand-blue accent */
.dgw-contact-btn-form {
  background: #ff7a45;
  color: #ffffff;
  border: 1px solid rgba(200, 215, 255, 0.35);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.dgw-contact-btn-form:hover {
  transform: translateY(-3px);
  background: #ff7a45a1;
  border-color: rgba(200, 215, 255, 0.6);
  box-shadow: 0 14px 32px rgba(1, 14, 208, 0.35);
}

/* -------------------------------------------------------------
   TRUST ROW
   ------------------------------------------------------------- */

.dgw-contact-trust {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  animation: dgw-contact-fadeup 0.8s ease 0.5s both;
}

.dgw-contact-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(232, 236, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
a.dgw-contact-trust-item:hover {
  color: #ffffff;
}
.dgw-contact-trust-item svg {
  opacity: 0.7;
}

.dgw-contact-trust-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(200, 215, 255, 0.3);
}

/* -------------------------------------------------------------
   ANIMATIONS
   ------------------------------------------------------------- */

@keyframes dgw-contact-fadeup {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */

@media (max-width: 880px) {
  .dgw-contact-topbar {
    padding: 22px 28px;
  }
  .dgw-contact-content {
    padding: 24px 28px 64px;
  }
  .dgw-contact-moon {
    width: 80px;
    height: 80px;
    top: 10%;
    right: 8%;
  }
  .dgw-contact-cta-row {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    gap: 14px;
  }
  .dgw-contact-btn {
    width: 100%;
    min-width: 0;
    padding: 18px 24px;
  }
}

@media (max-width: 560px) {
  .dgw-contact-headline {
    font-size: clamp(30px, 8vw, 40px);
  }
  .dgw-contact-eyebrow {
    font-size: 11px;
    padding: 6px 14px;
  }
  .dgw-contact-trust {
    gap: 12px;
  }
  .dgw-contact-trust-item {
    font-size: 12px;
  }
  .dgw-contact-moon {
    width: 60px;
    height: 60px;
  }
  .dgw-contact-backlink span,
  .dgw-contact-backlink {
    font-size: 12px;
  }
}

@media (max-height: 720px) and (min-width: 881px) {
  .dgw-contact-headline {
    font-size: clamp(32px, 4.4vw, 52px);
    margin-bottom: 18px;
  }
  .dgw-contact-sub {
    margin-bottom: 32px;
  }
  .dgw-contact-cta-row {
    margin-bottom: 36px;
  }
}

/* Honour reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .dgw-contact-photo,
  .dgw-contact-eyebrow,
  .dgw-contact-headline,
  .dgw-contact-sub,
  .dgw-contact-cta-row,
  .dgw-contact-trust,
  .dgw-contact-btn-whatsapp::before {
    animation: none !important;
    transition: none !important;
  }
  .dgw-contact-btn:hover {
    transform: none;
  }
}

/* =============================================================
   Digiwah · Zoho ERP Implementation Partner page
   v2 — LIGHT, airy, pain-led. Class prefix: dgw-zerp-
   Structure inspired by zoho.com/en-in/erp (light, product-led).
   ============================================================= */

/* Scoped reset — applies ONLY inside the page wrapper so it can't leak
   into (or be clobbered by) the WordPress theme when this goes live. */
.dgw-zerp-body, .dgw-zerp-body *, .dgw-zerp-body *::before, .dgw-zerp-body *::after { box-sizing: border-box; }

:root {
  --dgw-zerp-brand: #1b3df5;
  --dgw-zerp-brand-deep: #010ED0;
  --dgw-zerp-brand-soft: #6f86ff;
  --dgw-zerp-accent: #FF7A45;
  --dgw-zerp-green: #16a06a;
  --dgw-zerp-red: #e0533d;
  --dgw-zerp-ink: #0e1633;
  --dgw-zerp-ink-soft: #1a2347;
  --dgw-zerp-muted: #5b6489;
  --dgw-zerp-muted-2: #8089a8;
  --dgw-zerp-bg: #ffffff;
  --dgw-zerp-bg-tint: #f3f6ff;
  --dgw-zerp-bg-blue: #eef2ff;
  --dgw-zerp-line: rgba(14, 22, 51, 0.09);
  --dgw-zerp-line-soft: rgba(14, 22, 51, 0.06);
  --dgw-zerp-card-shadow: 0 1px 2px rgba(14,22,51,0.04), 0 12px 30px -18px rgba(27,61,245,0.18);
  --dgw-zerp-card-shadow-h: 0 1px 2px rgba(14,22,51,0.05), 0 24px 50px -22px rgba(27,61,245,0.28);
}

.dgw-zerp-body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--dgw-zerp-ink-soft);
  background: var(--dgw-zerp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* -------------------------------------------------------------
   SHARED
   ------------------------------------------------------------- */
.dgw-zerp-container {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.dgw-zerp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dgw-zerp-brand);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(27, 61, 245, 0.16);
  background: rgba(27, 61, 245, 0.05);
  margin-bottom: 22px;
}
.dgw-zerp-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dgw-zerp-accent);
  box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.16);
  animation: dgw-zerp-pulse 2.4s ease-in-out infinite;
}

.dgw-zerp-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--dgw-zerp-ink);
  margin: 0;
}
.dgw-zerp-h2-grad {
  background: linear-gradient(120deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-accent) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dgw-zerp-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dgw-zerp-section-sub {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--dgw-zerp-muted);
  margin: 18px auto 0;
  max-width: 620px;
}

/* Buttons */
.dgw-zerp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.dgw-zerp-btn svg { transition: transform 0.25s ease; }
.dgw-zerp-btn-primary {
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-brand-deep) 100%);
  color: #fff;
  box-shadow: 0 14px 34px -14px rgba(27, 61, 245, 0.55);
}
.dgw-zerp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(27,61,245,0.65); }
.dgw-zerp-btn-primary:hover svg { transform: translateX(4px); }
.dgw-zerp-btn-ghost {
  background: #fff; color: var(--dgw-zerp-ink);
  border-color: var(--dgw-zerp-line);
  box-shadow: 0 1px 2px rgba(14,22,51,0.04);
}
.dgw-zerp-btn-ghost:hover { border-color: rgba(27,61,245,0.3); color: var(--dgw-zerp-brand); transform: translateY(-2px); }
.dgw-zerp-btn-light {
  background: #fff; color: var(--dgw-zerp-brand-deep);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.4);
}
.dgw-zerp-btn-light:hover { transform: translateY(-2px); }
.dgw-zerp-btn-light:hover svg { transform: translateX(4px); }
.dgw-zerp-btn-outline {
  background: rgba(255,255,255,0.08); color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.dgw-zerp-btn-outline:hover { background: rgba(255,255,255,0.16); border-color: #fff; }

/* -------------------------------------------------------------
   NAV (light glass)
   ------------------------------------------------------------- */
.dgw-zerp-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--dgw-zerp-line-soft);
}
.dgw-zerp-nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 15px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.dgw-zerp-nav-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
  color: var(--dgw-zerp-ink); text-decoration: none;
}
.dgw-zerp-nav-links { display: flex; gap: 28px; }
.dgw-zerp-nav-links a {
  font-size: 14px; font-weight: 500; color: var(--dgw-zerp-muted);
  text-decoration: none; transition: color 0.2s ease;
}
.dgw-zerp-nav-links a:hover { color: var(--dgw-zerp-ink); }
.dgw-zerp-nav-cta {
  display: inline-flex; align-items: center; padding: 10px 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-brand-deep) 100%);
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 13px; text-decoration: none;
  box-shadow: 0 8px 22px -10px rgba(27,61,245,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dgw-zerp-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(27,61,245,0.7); }

/* -------------------------------------------------------------
   1. HERO (light · centered copy + wide dashboard)
   ------------------------------------------------------------- */
.dgw-zerp-hero {
  position: relative;
  padding: 84px 0 96px;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(27, 61, 245, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #fbfcff 0%, var(--dgw-zerp-bg-tint) 100%);
  overflow: hidden; isolation: isolate;
}
.dgw-zerp-hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(27, 61, 245, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 61, 245, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 0%, transparent 75%);
  pointer-events: none;
}
.dgw-zerp-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; }
.dgw-zerp-hero-glow-a { top: -12%; right: 4%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(27,61,245,0.16) 0%, transparent 70%); }
.dgw-zerp-hero-glow-b { top: 6%; left: 2%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,122,69,0.12) 0%, transparent 70%); }

.dgw-zerp-hero-copy { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.dgw-zerp-hero-copy > * { animation: dgw-zerp-fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.dgw-zerp-hero-copy > *:nth-child(2){animation-delay:.08s} .dgw-zerp-hero-copy > *:nth-child(3){animation-delay:.16s}
.dgw-zerp-hero-copy > *:nth-child(4){animation-delay:.24s} .dgw-zerp-hero-copy > *:nth-child(5){animation-delay:.32s}

.dgw-zerp-hero-h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800; line-height: 1.07; letter-spacing: -0.03em;
  color: var(--dgw-zerp-ink); margin: 0 auto 22px; max-width: 17ch;
}
.dgw-zerp-hero-h1 .dgw-zerp-h2-grad { display: inline; }
.dgw-zerp-hero-sub {
  font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.62;
  color: var(--dgw-zerp-muted); margin: 0 auto 32px; max-width: 600px;
}
.dgw-zerp-hero-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.dgw-zerp-hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  padding-top: 8px;
}
.dgw-zerp-hero-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 12.5px;
  color: var(--dgw-zerp-ink-soft);
}
.dgw-zerp-hero-trust-item svg { color: var(--dgw-zerp-green); }

/* Floating accent cards (fill the hero side gutters) */
.dgw-zerp-hero-float {
  position: absolute; z-index: 2; width: 212px;
  display: flex; flex-direction: column; gap: 9px; text-align: left;
  padding: 16px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--dgw-zerp-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 18px 44px -20px rgba(27,61,245,0.28), 0 4px 12px rgba(14,22,51,0.05);
  animation: dgw-zerp-floatCard 6s ease-in-out infinite;
}
.dgw-zerp-hero-float-l { left: -18px; top: 118px; }
.dgw-zerp-hero-float-r { right: -18px; top: 188px; animation-delay: 1.8s; }
.dgw-zerp-hf-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--dgw-zerp-brand); }
.dgw-zerp-hf-row { display: flex; align-items: center; gap: 9px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 13px; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-hf-row svg { color: var(--dgw-zerp-green); flex-shrink: 0; }
.dgw-zerp-hf-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--dgw-zerp-ink); }
.dgw-zerp-hf-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-hf-trend { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-green); }

/* Light dashboard mockup */
.dgw-zerp-dash {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 56px auto 0;
  animation: dgw-zerp-dashIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}
.dgw-zerp-dash-glow {
  position: absolute; inset: -30px -10px; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(27,61,245,0.16) 0%, transparent 70%);
  filter: blur(40px);
}
.dgw-zerp-dash-frame {
  display: grid; grid-template-columns: 188px 1fr;
  background: #fff;
  border: 1px solid var(--dgw-zerp-line);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 40px 90px -40px rgba(27,61,245,0.4), 0 12px 30px -16px rgba(14,22,51,0.12);
  text-align: left;
}
.dgw-zerp-dash-side {
  background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%);
  border-right: 1px solid var(--dgw-zerp-line-soft);
  padding: 18px 16px;
}
.dgw-zerp-dash-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 0 6px; }
.dgw-zerp-dash-brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-accent) 130%);
}
.dgw-zerp-dash-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; color: var(--dgw-zerp-ink); }
.dgw-zerp-dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dgw-zerp-dash-navitem {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--dgw-zerp-muted);
}
.dgw-zerp-dash-navitem.is-active { background: rgba(27,61,245,0.10); color: var(--dgw-zerp-brand); font-weight: 600; }
.dgw-zerp-dash-navdot { width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: .55; }
.dgw-zerp-dash-navitem.is-active .dgw-zerp-dash-navdot { opacity: 1; }

.dgw-zerp-dash-main { padding: 18px 20px 22px; }
.dgw-zerp-dash-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dgw-zerp-dash-topbar-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px; color: var(--dgw-zerp-ink); }
.dgw-zerp-dash-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 100px;
  background: rgba(22,160,106,0.10); border: 1px solid rgba(22,160,106,0.28);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--dgw-zerp-green);
  font-family: 'JetBrains Mono', monospace;
}
.dgw-zerp-dash-livepulse { width: 6px; height: 6px; border-radius: 50%; background: var(--dgw-zerp-green); animation: dgw-zerp-livePulse 1.8s ease-in-out infinite; }

.dgw-zerp-dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.dgw-zerp-dash-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 14px; border-radius: 11px;
  background: #fbfcff; border: 1px solid var(--dgw-zerp-line-soft);
}
.dgw-zerp-dash-tile-label { font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-dash-tile-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 19px; color: var(--dgw-zerp-ink); letter-spacing: -0.02em; }
.dgw-zerp-dash-tile-trend { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; }
.dgw-zerp-trend-up { color: var(--dgw-zerp-green); }
.dgw-zerp-trend-down { color: var(--dgw-zerp-red); }
.dgw-zerp-trend-flat { color: var(--dgw-zerp-muted-2); }

.dgw-zerp-dash-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.dgw-zerp-dash-chart, .dgw-zerp-dash-feed {
  padding: 14px 16px; border-radius: 12px;
  background: #fbfcff; border: 1px solid var(--dgw-zerp-line-soft);
}
.dgw-zerp-dash-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dgw-zerp-dash-chart-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-dash-chart-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-dash-chart-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 8px; margin-right: 1px; vertical-align: middle; }
.dgw-zerp-dash-swatch-brand { background: var(--dgw-zerp-brand); }
.dgw-zerp-dash-swatch-soft { background: #c3cdfb; }

.dgw-zerp-dash-bars { display: flex; align-items: flex-end; gap: 12px; height: 116px; }
.dgw-zerp-dash-baridx { flex: 1; position: relative; height: 100%; display: flex; justify-content: center; }
.dgw-zerp-dash-bar { position: absolute; bottom: 18px; width: 11px; border-radius: 3px 3px 0 0; }
.dgw-zerp-dash-bar-a { left: 50%; transform: translateX(2px); height: var(--h2); background: var(--dgw-zerp-brand); animation: dgw-zerp-barA 1s cubic-bezier(0.16,1,0.3,1) both; animation-delay: .4s; }
.dgw-zerp-dash-bar-b { left: 50%; transform: translateX(-13px); height: var(--h1); background: #c3cdfb; animation: dgw-zerp-barB 1s cubic-bezier(0.16,1,0.3,1) both; animation-delay: .5s; }
.dgw-zerp-dash-baridx-label { position: absolute; bottom: 0; font-size: 9.5px; color: var(--dgw-zerp-muted-2); }

.dgw-zerp-dash-feed { display: flex; flex-direction: column; gap: 7px; }
.dgw-zerp-dash-feed-head { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--dgw-zerp-ink-soft); margin-bottom: 3px; }
.dgw-zerp-dash-feed-line {
  font-size: 11px; color: var(--dgw-zerp-muted); display: flex; align-items: center; gap: 8px;
  animation: dgw-zerp-feedIn 0.6s ease both;
}
.dgw-zerp-dash-feed-line:nth-child(2){animation-delay:.7s} .dgw-zerp-dash-feed-line:nth-child(3){animation-delay:.95s} .dgw-zerp-dash-feed-line:nth-child(4){animation-delay:1.2s}
.dgw-zerp-dash-feed-tag { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; flex-shrink: 0; }
.dgw-zerp-feed-tag-fin { background: rgba(27,61,245,0.12); color: var(--dgw-zerp-brand); }
.dgw-zerp-feed-tag-inv { background: rgba(255,122,69,0.14); color: #d9551f; }
.dgw-zerp-feed-tag-shop { background: rgba(22,160,106,0.14); color: var(--dgw-zerp-green); }



/* =============================================================
   1B. YOUR PLANT, ONE SYSTEM — factory blueprint ↔ problems solved
   ============================================================= */
.dgw-zerp-plant-text .dgw-zerp-eyebrow {
    color: #c7d2ff;
    border-color: rgba(111, 134, 255, 0.32);
    background: rgba(111, 134, 255, 0.10);
}


.dgw-zerp-plant { position: relative; padding: 100px 0 110px; background: radial-gradient(120% 90% at 0% 0%, #17224f 0%, #0d1330 55%, #0a0f26 100%); color: #fff; scroll-margin-top: 76px; overflow: hidden; }
.dgw-zerp-plant::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 55% at 85% 50%, rgba(27,61,245,0.22), transparent 70%), radial-gradient(ellipse 30% 40% at 10% 90%, rgba(255,122,69,0.10), transparent 70%); }
.dgw-zerp-plant > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-plant-layout { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 56px; align-items: center; }
.dgw-zerp-plant-text .dgw-zerp-h2 { max-width: 520px; }
.dgw-zerp-plant-sub { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--dgw-zerp-muted); margin: 18px 0 0; max-width: 520px; }

.dgw-zerp-plant-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 4px; }
.dgw-zerp-plant-row { position: relative; display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; row-gap: 2px; padding: 9px 12px 9px 14px; border-radius: 12px; border: 1px solid transparent; cursor: default; transition: background .3s, border-color .3s, transform .3s; }
.dgw-zerp-plant-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--dgw-zerp-accent); opacity: 0; transition: opacity .3s; }
.dgw-zerp-plant-row-k { grid-row: 1 / span 2; align-self: start; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); padding-top: 1px; }
.dgw-zerp-plant-row-pain, .dgw-zerp-plant-row-fix { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.45; }
.dgw-zerp-plant-row-pain { color: var(--dgw-zerp-muted); }
.dgw-zerp-plant-row-fix { color: var(--dgw-zerp-ink-soft); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, margin .3s; }
.dgw-zerp-plant-row-pain::before, .dgw-zerp-plant-row-pain::after { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 1.5px; background: #e0533d; transform: rotate(45deg); }
.dgw-zerp-plant-row-pain::after { transform: rotate(-45deg); }
.dgw-zerp-plant-row-fix::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 4px; background: rgba(22,160,106,0.16); }
.dgw-zerp-plant-row-fix::after { content: ""; position: absolute; left: 5px; top: 8px; width: 5px; height: 3px; border-left: 1.5px solid var(--dgw-zerp-green); border-bottom: 1.5px solid var(--dgw-zerp-green); transform: rotate(-45deg); }
.dgw-zerp-plant-row.is-active { background: #fff; border-color: rgba(27,61,245,0.18); box-shadow: var(--dgw-zerp-card-shadow); transform: translateX(4px); }
.dgw-zerp-plant-row.is-active::before { opacity: 1; }
.dgw-zerp-plant-row.is-active .dgw-zerp-plant-row-fix { max-height: 80px; opacity: 1; margin-top: 4px; }
.dgw-zerp-plant-row.is-active .dgw-zerp-plant-row-k { color: var(--dgw-zerp-brand); }

/* map — architectural site plan */
.dgw-zerp-plant-map { position: relative; border-radius: 22px; padding: 16px 18px 14px; background: linear-gradient(180deg, #eef2ff 0%, #e3e9ff 100%); border: 1px solid rgba(27,61,245,0.18); box-shadow: 0 2px 4px rgba(14,22,51,0.04), 0 40px 90px -36px rgba(27,61,245,0.40), 0 0 0 6px rgba(255,255,255,0.7); container-type: inline-size; }
.dgw-zerp-plant-map-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-brand); }
.dgw-zerp-plant-map-h em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: #0f7a50; letter-spacing: 0.06em; }
.dgw-zerp-plant-map-h em i { width: 7px; height: 7px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 3px rgba(45,212,143,0.22); animation: dgw-zerp-pulse 2s ease-in-out infinite; }
.dgw-zerp-plant-map-f { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 11px; color: var(--dgw-zerp-muted); }
.dgw-zerp-plant-map-f span { display: inline-flex; align-items: center; gap: 7px; }
.dgw-zerp-plant-map-f i { width: 18px; height: 2px; background: repeating-linear-gradient(90deg, var(--dgw-zerp-accent) 0 4px, transparent 4px 7px); }
.dgw-zerp-plant-map-f i.is-sys { width: 8px; height: 8px; border-radius: 2px; background: var(--dgw-zerp-brand); }

/* the drawing */
.dgw-zerp-plant-site { --ink: #1b2a6b; --line: rgba(27,42,107,0.55); position: relative; width: 100%; aspect-ratio: 56 / 50; border-radius: 12px; overflow: hidden; background: #f7f9ff;
  background-image: linear-gradient(rgba(27,61,245,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(27,61,245,0.10) 1px, transparent 1px), linear-gradient(rgba(27,61,245,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(27,61,245,0.05) 1px, transparent 1px);
  background-size: 10% 10%, 10% 10%, 2.5% 2.5%, 2.5% 2.5%; font-size: clamp(7px, 2cqw, 11px); }
.dgw-zerp-plant-wall { position: absolute; inset: 2.5%; border: 3px solid var(--ink); border-radius: 4px; box-shadow: inset 0 0 0 2px #f7f9ff, inset 0 0 0 3px var(--line); pointer-events: none; }
.dgw-zerp-plant-wall::after { content: ""; position: absolute; left: -3px; top: calc(74% + 5%); height: 12%; width: 3px; background: #f7f9ff; } /* gate opening in the wall */
.dgw-zerp-plant-north { position: absolute; right: 3.5%; top: 2.5%; display: grid; justify-items: center; gap: 1px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .9em; color: var(--ink); z-index: 3; }
.dgw-zerp-plant-north i { width: 0; height: 0; border-left: .5em solid transparent; border-right: .5em solid transparent; border-bottom: 1.1em solid var(--ink); }
.dgw-zerp-plant-title { position: absolute; right: 3.5%; bottom: 3.5%; z-index: 3; display: grid; gap: 1px; padding: .45em .7em; border: 1.5px solid var(--ink); background: #fff; font-family: 'JetBrains Mono', monospace; font-size: .85em; color: var(--ink); line-height: 1.2; }
.dgw-zerp-plant-title b { letter-spacing: .14em; }
.dgw-zerp-plant-title span { color: var(--dgw-zerp-muted); font-size: .9em; }

/* areas (interactive) */
.dgw-zerp-plant-area { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 2; padding: .6em .8em; border: 1.5px solid var(--line); background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8); display: flex; flex-direction: column; justify-content: flex-start; gap: .1em; cursor: default; transition: background .35s, border-color .35s, box-shadow .35s, transform .35s; overflow: hidden; }
.dgw-zerp-plant-k { font-family: 'JetBrains Mono', monospace; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.dgw-zerp-plant-area b { position: relative; z-index: 1; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.25em; letter-spacing: -0.01em; line-height: 1.15; color: var(--dgw-zerp-ink); }
.dgw-zerp-plant-area.is-active { background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); box-shadow: 0 1.4em 2.4em -1em rgba(27,61,245,0.7), 0 0 0 .35em rgba(27,61,245,0.16); transform: translateY(-2px); z-index: 4; }
.dgw-zerp-plant-area.is-active .dgw-zerp-plant-k { color: rgba(255,255,255,0.7); }
.dgw-zerp-plant-area.is-active b { color: #fff; }

/* furniture inside areas (all pure CSS) */
.dgw-zerp-plant-area > i { position: absolute; pointer-events: none; }
.dgw-zerp-plant-desks { left: .8em; right: .8em; bottom: .7em; height: 1.2em; background: repeating-linear-gradient(90deg, var(--line) 0 1.1em, transparent 1.1em 1.7em); opacity: .55; border-radius: 2px; }
.dgw-zerp-plant-racks { left: .8em; right: .8em; top: 3.4em; bottom: .8em; background: repeating-linear-gradient(180deg, var(--line) 0 2px, transparent 2px .95em); opacity: .55; }
.dgw-zerp-plant-racks::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 1.1em, #fff 1.1em 1.5em); }
.dgw-zerp-plant-racks.is-short { top: 3.2em; bottom: 2.4em; }
.dgw-zerp-plant-machines { left: .8em; right: .8em; top: 3.4em; bottom: 2.2em; background-image: radial-gradient(var(--line) 0 30%, transparent 32%); background-size: 1.6em 1.6em; opacity: .6; }
.dgw-zerp-plant-conveyor { left: .8em; right: .8em; bottom: .9em; height: .7em; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 .6em, rgba(27,42,107,0.25) .6em 1.2em); animation: dgw-zerp-plant-belt .8s linear infinite; opacity: .85; }
@keyframes dgw-zerp-plant-belt { to { background-position: -1.2em 0 } }
.dgw-zerp-plant-bench { left: .8em; right: .8em; bottom: .7em; height: .9em; border: 1.5px solid var(--line); border-radius: 2px; opacity: .6; }
.dgw-zerp-plant-bench::after { content: ""; position: absolute; left: .4em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: var(--line); box-shadow: 1em 0 0 var(--line), 2em 0 0 var(--line); }
.dgw-zerp-plant-bays { left: 0; right: 0; bottom: -1.5px; height: 1.6em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; padding: 0 .9em; }
.dgw-zerp-plant-bays u { display: block; border: 1.5px solid var(--line); border-bottom: 0; background: #eef2ff; border-radius: 3px 3px 0 0; }
.dgw-zerp-plant-area.is-active .dgw-zerp-plant-bays u { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.7); }
.dgw-zerp-plant-area.is-active > i:not(.dgw-zerp-plant-bays) { filter: brightness(3) saturate(0); opacity: .5; }

/* gate area */
.dgw-zerp-plant-area.is-gate { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.dgw-zerp-plant-area.is-gate .dgw-zerp-plant-k, .dgw-zerp-plant-area.is-gate b { position: absolute; left: 40%; white-space: nowrap; }
.dgw-zerp-plant-area.is-gate b { top: -2%; }
.dgw-zerp-plant-area.is-gate .dgw-zerp-plant-k { top: 80%; }
.dgw-zerp-plant-cabin { left: 22%; top: 8%; width: 12%; height: 26%; border: 1.5px solid var(--line); background: #fff; }
.dgw-zerp-plant-cabin::after { content: ""; position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; background: var(--line); opacity: .4; }
.dgw-zerp-plant-barrier { left: 12%; top: 32%; width: 24%; height: 3px; background: repeating-linear-gradient(90deg, var(--dgw-zerp-red) 0 .6em, #fff .6em 1.2em); border: 1px solid var(--line); transform-origin: left center; animation: dgw-zerp-plant-barrier 6s ease-in-out infinite; }
@keyframes dgw-zerp-plant-barrier { 0%, 30% { transform: rotate(0deg) } 40%, 70% { transform: rotate(-70deg) } 80%, 100% { transform: rotate(0deg) } }
.dgw-zerp-plant-wb { left: 44%; top: 30%; width: 30%; height: 40%; border: 1.5px solid var(--line); background: repeating-linear-gradient(45deg, rgba(27,42,107,0.18) 0 3px, transparent 3px 8px); border-radius: 2px; }
.dgw-zerp-plant-area.is-gate.is-active { background: transparent; box-shadow: none; transform: none; }
.dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-k { color: var(--dgw-zerp-brand); }
.dgw-zerp-plant-area.is-gate.is-active b { color: var(--dgw-zerp-brand); }
.dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-cabin, .dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-wb { border-color: var(--dgw-zerp-brand); box-shadow: 0 0 0 .3em rgba(27,61,245,0.18), 0 1em 1.6em -.6em rgba(27,61,245,0.7); background-color: rgba(27,61,245,0.12); }

/* road + trucks */
.dgw-zerp-plant-road { position: absolute; left: 0; right: 2.5%; top: 79%; height: 12%; background: #d6dcf0; z-index: 1; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.dgw-zerp-plant-road i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, #fff 0 1.4em, transparent 1.4em 2.4em); }
.dgw-zerp-plant-truck { position: absolute; z-index: 2; width: 8%; height: 5%; top: 81.5%; left: var(--x); background: #fff; border: 1.5px solid var(--ink); border-radius: 2px; }
.dgw-zerp-plant-truck::before { content: ""; position: absolute; right: -1.5px; top: -1.5px; bottom: -1.5px; width: 32%; background: var(--ink); border-radius: 2px 3px 3px 2px; }
.dgw-zerp-plant-truck::after { content: ""; position: absolute; left: 12%; bottom: -.45em; width: .5em; height: .5em; border-radius: 50%; background: var(--ink); box-shadow: 1.6em 0 0 var(--ink), 3.6em 0 0 var(--ink); }
.dgw-zerp-plant-truck.is-dock { top: 73%; width: 5.5%; height: 6.5%; transform: rotate(-90deg); transform-origin: center; }
.dgw-zerp-plant-truck.is-move { animation: dgw-zerp-plant-truck 9s linear infinite; }
@keyframes dgw-zerp-plant-truck { 0% { left: -10%; opacity: 0 } 5% { opacity: 1 } 24% { left: 14% } 34% { left: 14% } 90% { left: 100%; opacity: 1 } 100% { left: 100%; opacity: 0 } }

/* static areas */
.dgw-zerp-plant-static { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 1.5px dashed var(--line); background: rgba(255,255,255,0.6); padding: .5em .7em; z-index: 1; }
.dgw-zerp-plant-static span { font-family: 'JetBrains Mono', monospace; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-plant-static.is-parking i { position: absolute; left: .7em; right: .7em; bottom: .6em; height: 1.6em; background: repeating-linear-gradient(90deg, var(--line) 0 1.5px, transparent 1.5px 1.3em); opacity: .5; border-bottom: 1.5px solid var(--line); }

/* material flow arrows */
.dgw-zerp-plant-arr { position: absolute; z-index: 3; pointer-events: none; }
.dgw-zerp-plant-arr.is-r { top: var(--y); left: var(--x1); width: calc(var(--x2) - var(--x1)); height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--dgw-zerp-accent) 0 3px, transparent 3px 6px); animation: dgw-zerp-inv-dash .6s linear infinite; }
.dgw-zerp-plant-arr.is-r::after { content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); border-left: .55em solid var(--dgw-zerp-accent); border-top: .38em solid transparent; border-bottom: .38em solid transparent; }
.dgw-zerp-plant-arr.is-d { left: var(--x); top: min(var(--y1), var(--y2)); height: max(calc(var(--y2) - var(--y1)), calc(var(--y1) - var(--y2))); width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, var(--dgw-zerp-accent) 0 3px, transparent 3px 6px); animation: dgw-zerp-plant-dashv .6s linear infinite; }
.dgw-zerp-plant-arr.is-d::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: .38em solid transparent; border-right: .38em solid transparent; }
.dgw-zerp-plant-arr.is-d.is-up::after { top: -2px; border-bottom: .55em solid var(--dgw-zerp-accent); }
.dgw-zerp-plant-arr.is-d:not(.is-up)::after { bottom: -2px; border-top: .55em solid var(--dgw-zerp-accent); }
@keyframes dgw-zerp-plant-dashv { to { background-position: 0 6px } }

@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-plant-conveyor, .dgw-zerp-plant-barrier, .dgw-zerp-plant-truck.is-move, .dgw-zerp-plant-arr, .dgw-zerp-plant-map-h em i { animation: none !important; }
  .dgw-zerp-plant-truck.is-move { left: 40%; }
  .dgw-zerp-plant-row-fix { max-height: none; opacity: 1; margin-top: 4px; }
}

@media (max-width: 1100px) { .dgw-zerp-plant-layout { grid-template-columns: minmax(0, 1fr) 460px; gap: 36px; } }
@media (max-width: 880px) { .dgw-zerp-plant-layout { grid-template-columns: 1fr; gap: 36px; } .dgw-zerp-plant-map { order: -1; } }
@media (max-width: 600px) {
  .dgw-zerp-plant-map { padding: 14px; border-radius: 16px; }
  .dgw-zerp-plant-row { grid-template-columns: 1fr; }
  .dgw-zerp-plant-row-k { grid-row: auto; }
}
}


/* ---- PLANT SECTION · DARK THEME OVERRIDES ---- */
.dgw-zerp-plant .dgw-zerp-eyebrow { color: #fff; border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); }
.dgw-zerp-plant .dgw-zerp-h2 { color: #fff; }
.dgw-zerp-plant .dgw-zerp-h2-grad { background: linear-gradient(120deg, #8fd3ff 0%, #ffb08a 120%); -webkit-background-clip: text; background-clip: text; }
.dgw-zerp-plant-sub { color: rgba(255,255,255,0.92); }
.dgw-zerp-plant-row-k { color: #fff; }
.dgw-zerp-plant-row-pain { color: rgba(255,255,255,0.82); }
.dgw-zerp-plant-row-fix { color: #fff; }
.dgw-zerp-plant-row-pain::before, .dgw-zerp-plant-row-pain::after { background: #ff7a7a; }
.dgw-zerp-plant-row-fix::before { background: rgba(45,212,143,0.18); }
.dgw-zerp-plant-row-fix::after { border-color: #2dd48f; }
.dgw-zerp-plant-row.is-active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.6); }
.dgw-zerp-plant-row.is-active .dgw-zerp-plant-row-k { color: #9db4ff; }

.dgw-zerp-plant-map { background: linear-gradient(180deg, #101c52 0%, #0b1440 100%); border-color: rgba(157,180,255,0.28); box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 50px 100px -40px rgba(0,0,0,0.7), 0 0 0 6px rgba(255,255,255,0.06); }
.dgw-zerp-plant-map-h { color: #9db4ff; }
.dgw-zerp-plant-map-h em { color: #2dd48f; }
.dgw-zerp-plant-map-f { color: rgba(255,255,255,0.6); }
.dgw-zerp-plant-map-f i.is-sys { background: #4d6bff; }

.dgw-zerp-plant-site { --ink: #dbe6ff; --line: rgba(219,230,255,0.55); --paper: #0c1a4a; background: var(--paper);
  background-image: linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); }
.dgw-zerp-plant-wall { box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--line); }
.dgw-zerp-plant-wall::after { background: var(--paper); }
.dgw-zerp-plant-title { background: var(--paper); }
.dgw-zerp-plant-title span { color: rgba(219,230,255,0.6); }
.dgw-zerp-plant-area { background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
.dgw-zerp-plant-k { color: rgba(219,230,255,0.55); }
.dgw-zerp-plant-area b { color: #fff; }
.dgw-zerp-plant-area.is-active { background: #1b3df5; border-color: #6f86ff; box-shadow: 0 1.4em 2.4em -1em rgba(27,61,245,0.9), 0 0 0 .35em rgba(77,107,255,0.28); }
.dgw-zerp-plant-racks::after { background: repeating-linear-gradient(90deg, transparent 0 1.1em, var(--paper) 1.1em 1.5em); }
.dgw-zerp-plant-area.is-active .dgw-zerp-plant-racks::after { background: repeating-linear-gradient(90deg, transparent 0 1.1em, #1b3df5 1.1em 1.5em); }
.dgw-zerp-plant-bays u { background: rgba(255,255,255,0.08); }
.dgw-zerp-plant-area.is-active > i:not(.dgw-zerp-plant-bays) { filter: none; opacity: .75; }
.dgw-zerp-plant-static { background: rgba(255,255,255,0.03); }
.dgw-zerp-plant-static span { color: rgba(219,230,255,0.5); }
.dgw-zerp-plant-road { background: #1b2758; }
.dgw-zerp-plant-road i { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.7) 0 1.4em, transparent 1.4em 2.4em); }
.dgw-zerp-plant-truck { background: var(--paper); }
.dgw-zerp-plant-cabin { background: var(--paper); }
.dgw-zerp-plant-barrier { background: repeating-linear-gradient(90deg, #ff5c5c 0 .6em, #fff .6em 1.2em); }
.dgw-zerp-plant-wb { background: repeating-linear-gradient(45deg, rgba(219,230,255,0.22) 0 3px, transparent 3px 8px); }
.dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-k, .dgw-zerp-plant-area.is-gate.is-active b { color: #9db4ff; }
.dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-cabin, .dgw-zerp-plant-area.is-gate.is-active .dgw-zerp-plant-wb { border-color: #6f86ff; background-color: rgba(27,61,245,0.45); box-shadow: 0 0 0 .3em rgba(77,107,255,0.28), 0 1em 1.6em -.6em rgba(27,61,245,0.9); }





/* =============================================================
   WHY DIGIWAH — the one section where we sell ourselves.
   Warm paper ground (deliberately different from the cool page),
   proof cards + an engagement "route" from site visit to go-live.
   ============================================================= */
.dgw-zerp-why { position: relative; padding: 110px 0 100px; background: linear-gradient(180deg, #fbf8f2 0%, #f6f1e8 100%); scroll-margin-top: 76px; overflow: hidden; }
.dgw-zerp-why-tex { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(14,22,51,0.09) 1px, transparent 1.4px), radial-gradient(ellipse 40% 50% at 90% 10%, rgba(255,122,69,0.16), transparent 70%), radial-gradient(ellipse 35% 45% at 5% 90%, rgba(27,61,245,0.10), transparent 70%);
  background-size: 24px 24px, 100% 100%, 100% 100%; }
.dgw-zerp-why > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-why .dgw-zerp-eyebrow { color: #b5541f; border-color: rgba(255,122,69,0.35); background: rgba(255,122,69,0.10); }
.dgw-zerp-why .dgw-zerp-h2-grad { background: linear-gradient(120deg, var(--dgw-zerp-accent) 0%, var(--dgw-zerp-brand) 110%); -webkit-background-clip: text; background-clip: text; }

.dgw-zerp-why-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.dgw-zerp-why-intro .dgw-zerp-h2 { max-width: 640px; }
.dgw-zerp-why-sub { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--dgw-zerp-muted); margin: 18px 0 0; max-width: 600px; }
.dgw-zerp-why-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 13px 22px; border-radius: 12px; background: var(--dgw-zerp-ink); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: 0 14px 28px -14px rgba(14,22,51,0.7); transition: transform .25s, box-shadow .25s, background .25s; }
.dgw-zerp-why-cta:hover { transform: translateY(-2px); background: var(--dgw-zerp-brand); box-shadow: 0 18px 34px -14px rgba(27,61,245,0.7); }
.dgw-zerp-why-cta svg { transition: transform .25s; }
.dgw-zerp-why-cta:hover svg { transform: translateX(3px); }

.dgw-zerp-why-proof { display: grid; gap: 12px; }
.dgw-zerp-why-proof-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; align-items: start; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid rgba(14,22,51,0.08); box-shadow: 0 1px 2px rgba(14,22,51,0.04), 0 16px 34px -22px rgba(14,22,51,0.30); transition: transform .3s, box-shadow .3s; }
.dgw-zerp-why-proof-card:hover { transform: translateX(4px); box-shadow: 0 1px 2px rgba(14,22,51,0.05), 0 24px 44px -22px rgba(255,122,69,0.35); }
.dgw-zerp-why-proof-ico { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--dgw-zerp-accent), #ffa27a); box-shadow: 0 8px 16px -8px rgba(255,122,69,0.8); }
.dgw-zerp-why-proof-card:nth-child(2) .dgw-zerp-why-proof-ico { background: linear-gradient(135deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); box-shadow: 0 8px 16px -8px rgba(27,61,245,0.8); }
.dgw-zerp-why-proof-card:nth-child(3) .dgw-zerp-why-proof-ico { background: linear-gradient(135deg, var(--dgw-zerp-ink), #34406b); box-shadow: 0 8px 16px -8px rgba(14,22,51,0.7); }
.dgw-zerp-why-proof-card b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); }
.dgw-zerp-why-proof-card > span:last-child { font-size: 12.5px; line-height: 1.5; color: var(--dgw-zerp-muted); }

/* route */
.dgw-zerp-why-route { position: relative; margin-top: 64px; padding-top: 22px; }
.dgw-zerp-why-track { position: absolute; left: 9%; right: 9%; top: 21px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(14,22,51,0.16) 0 6px, transparent 6px 12px); }
.dgw-zerp-why-track i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--dgw-zerp-accent), var(--dgw-zerp-brand)); transform-origin: left; transform: scaleX(0); }
.dgw-zerp-why.is-in .dgw-zerp-why-track i { animation: dgw-zerp-why-draw 1.8s cubic-bezier(.2,.7,.2,1) .2s forwards; }
@keyframes dgw-zerp-why-draw { to { transform: scaleX(1) } }
.dgw-zerp-why-stops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dgw-zerp-why-stop { position: relative; padding: 42px 16px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(14,22,51,0.08); box-shadow: 0 1px 2px rgba(14,22,51,0.04), 0 18px 40px -26px rgba(14,22,51,0.35); opacity: 1; transform: translateY(14px); min-width: 0; }
.dgw-zerp-why.is-in .dgw-zerp-why-stop { animation: dgw-zerp-acc-in .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(0.35s + var(--i) * 0.28s); }
.dgw-zerp-why-pin { position: absolute; left: 16px; top: -21px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--dgw-zerp-brand); border: 4px solid #fbf8f2; box-shadow: 0 10px 20px -8px rgba(27,61,245,0.7); }
.dgw-zerp-why-pin.is-start { background: var(--dgw-zerp-accent); box-shadow: 0 10px 20px -8px rgba(255,122,69,0.8); }
.dgw-zerp-why-pin.is-end { background: var(--dgw-zerp-green); box-shadow: 0 10px 20px -8px rgba(22,160,106,0.8); }
.dgw-zerp-why-pin.is-start::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255,122,69,0.45); animation: dgw-zerp-why-ring 2.2s ease-out infinite; }
@keyframes dgw-zerp-why-ring { 0% { transform: scale(.7); opacity: 1 } 100% { transform: scale(1.5); opacity: 0 } }
.dgw-zerp-why-stop-n { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b5541f; margin-bottom: 6px; }
.dgw-zerp-why-stop h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--dgw-zerp-ink); margin: 0 0 8px; }
.dgw-zerp-why-stop p { font-size: 13px; line-height: 1.58; color: var(--dgw-zerp-muted); margin: 0; }
.dgw-zerp-why-videos { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(14,22,51,0.12); display: grid; gap: 6px; }
.dgw-zerp-why-videos li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-why-videos li i { width: 22px; height: 16px; border-radius: 4px; background: var(--dgw-zerp-ink); position: relative; }
.dgw-zerp-why-videos li i::after { content: ""; position: absolute; left: 8px; top: 4px; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.dgw-zerp-why-videos li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-why-videos li em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-why-foot { margin: 34px auto 0; max-width: 720px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--dgw-zerp-muted); }

@media (max-width: 1100px) {
  .dgw-zerp-why-stops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 14px; }
  .dgw-zerp-why-track { display: none; }
  .dgw-zerp-why-stop.is-wide { grid-column: span 2; }
}
@media (max-width: 880px) {
  .dgw-zerp-why-top { grid-template-columns: 1fr; gap: 28px; }
  .dgw-zerp-why-stops { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .dgw-zerp-why-stops { grid-template-columns: 1fr; }
  .dgw-zerp-why-stop.is-wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-why-stop { opacity: 1; transform: none; animation: none !important; }
  .dgw-zerp-why-track i { transform: none; animation: none !important; }
  .dgw-zerp-why-pin.is-start::after { animation: none; }
}



/* =============================================================
   MODULE 01 · ACCOUNTING & FINANCE — explorer
   ============================================================= */
.dgw-zerp-acc { background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%); }
.dgw-zerp-acc-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(27,61,245,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(27,61,245,0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 0%, transparent 70%); }
.dgw-zerp-acc > .dgw-zerp-container { position: relative; z-index: 1; }

.dgw-zerp-acc-explorer { display: grid; grid-template-columns: 330px 1fr; gap: 28px; align-items: start; }

/* rail */
.dgw-zerp-acc-rail { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 96px; }
.dgw-zerp-acc-tab { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; width: 100%; text-align: left; padding: 14px 16px 16px; border-radius: 14px; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: inherit; color: inherit; transition: background .25s, border-color .25s, box-shadow .25s, transform .25s; overflow: hidden; }
.dgw-zerp-acc-tab:hover { background: rgba(255,255,255,0.7); border-color: var(--dgw-zerp-line-soft); }
.dgw-zerp-acc-tab.is-active { background: #fff; border-color: rgba(27,61,245,0.18); box-shadow: var(--dgw-zerp-card-shadow); transform: translateX(4px); }
.dgw-zerp-acc-tab-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); transition: background .25s, color .25s; }
.dgw-zerp-acc-tab.is-active .dgw-zerp-acc-tab-ico { background: linear-gradient(135deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); color: #fff; box-shadow: 0 8px 18px -8px rgba(27,61,245,0.6); }
.dgw-zerp-acc-tab-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dgw-zerp-acc-tab-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); }
.dgw-zerp-acc-tab-sub { font-size: 12.5px; line-height: 1.45; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(27,61,245,0.08); opacity: 0; transition: opacity .25s; }
.dgw-zerp-acc-tab-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); }
.dgw-zerp-acc-tab.is-active .dgw-zerp-acc-tab-bar { opacity: 1; }
.dgw-zerp-acc-tab.is-active .dgw-zerp-acc-tab-bar i { animation: dgw-zerp-acc-progress var(--dgw-zerp-acc-dur, 7s) linear forwards; }
.dgw-zerp-acc-explorer.is-paused .dgw-zerp-acc-tab-bar i { animation-play-state: paused; }
@keyframes dgw-zerp-acc-progress { from { width: 0 } to { width: 100% } }

/* screen */
.dgw-zerp-acc-screen-wrap { min-width: 0; }
.dgw-zerp-acc-screen { position: relative; border-radius: 18px; background: #fff; border: 1px solid rgba(27,61,245,0.14); box-shadow: 0 2px 4px rgba(14,22,51,0.04), 0 30px 70px -30px rgba(27,61,245,0.35), 0 0 0 6px rgba(255,255,255,0.55); overflow: hidden; }
.dgw-zerp-acc-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--dgw-zerp-line-soft); background: linear-gradient(180deg, #fbfcff, #f5f7ff); }
.dgw-zerp-acc-dots { display: inline-flex; gap: 5px; }
.dgw-zerp-acc-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e4e8f5; }
.dgw-zerp-acc-dots i:nth-child(1) { background: #ff7a7a } .dgw-zerp-acc-dots i:nth-child(2) { background: #ffcc5c } .dgw-zerp-acc-dots i:nth-child(3) { background: #5fd68a }
.dgw-zerp-acc-crumb { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500; color: var(--dgw-zerp-muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; }
.dgw-zerp-acc-crumb b { color: var(--dgw-zerp-brand); font-weight: 700; }
.dgw-zerp-acc-crumb em { font-style: normal; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-acc-crumb [data-acc-crumb] { color: var(--dgw-zerp-ink); font-weight: 700; }
.dgw-zerp-acc-org { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--dgw-zerp-muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dgw-zerp-acc-org i { width: 7px; height: 7px; border-radius: 50%; background: var(--dgw-zerp-green); box-shadow: 0 0 0 3px rgba(22,160,106,0.18); }

.dgw-zerp-acc-stage { position: relative; display: grid; background: linear-gradient(180deg, #fff 0%, #f8faff 100%); }
.dgw-zerp-acc-panel { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 20px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.985); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.dgw-zerp-acc-panel > * { flex: 1; }
.dgw-zerp-acc-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .08s, transform .5s ease .08s, visibility 0s; }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-card { animation: dgw-zerp-acc-in .55s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-card:nth-child(2) { animation-delay: .09s }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-card:nth-child(3) { animation-delay: .18s }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-col .dgw-zerp-acc-card:nth-child(1) { animation-delay: .09s }
.dgw-zerp-acc-panel.is-active .dgw-zerp-acc-col .dgw-zerp-acc-card:nth-child(2) { animation-delay: .18s }
@keyframes dgw-zerp-acc-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

.dgw-zerp-acc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dgw-zerp-acc-grid2.is-gst { grid-template-columns: 1.15fr 1fr; }
.dgw-zerp-acc-grid2.is-rep { grid-template-columns: 1.1fr 1fr; }
.dgw-zerp-acc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dgw-zerp-acc-col { display: grid; gap: 16px; grid-template-rows: auto 1fr; }

.dgw-zerp-acc-card { background: #fff; border: 1px solid var(--dgw-zerp-line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(14,22,51,0.03); min-width: 0; }
.dgw-zerp-acc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13px; color: var(--dgw-zerp-ink); margin-bottom: 12px; flex-wrap: wrap; }
.dgw-zerp-acc-pill { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 100px; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); white-space: nowrap; }
.dgw-zerp-acc-pill.is-green { color: #0f7a50; background: rgba(22,160,106,0.12); }

/* ledger */
.dgw-zerp-acc-tree { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.dgw-zerp-acc-tree li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 6px 18px; border-top: 1px dashed var(--dgw-zerp-line-soft); color: var(--dgw-zerp-muted); position: relative; }
.dgw-zerp-acc-tree li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 1px; background: rgba(27,61,245,0.35); }
.dgw-zerp-acc-tree li.dgw-zerp-acc-tree-root { padding-left: 0; color: var(--dgw-zerp-ink); font-weight: 700; border-top: 0; margin-top: 6px; }
.dgw-zerp-acc-tree li.dgw-zerp-acc-tree-root::before { display: none; }
.dgw-zerp-acc-tree li:first-child { margin-top: 0; }
.dgw-zerp-acc-tree b { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-acc-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.dgw-zerp-acc-tbl th { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); padding: 0 6px 8px 0; border-bottom: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-acc-tbl td { padding: 7px 6px 7px 0; border-bottom: 1px solid var(--dgw-zerp-line-soft); color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-acc-tbl td i { font-style: normal; color: var(--dgw-zerp-muted-2); font-size: 11px; }
.dgw-zerp-acc-tbl td:nth-child(n+3), .dgw-zerp-acc-tbl th:nth-child(n+3) { text-align: right; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.dgw-zerp-acc-tbl tfoot td { border-bottom: 0; font-weight: 700; color: var(--dgw-zerp-ink); padding-top: 9px; }
.dgw-zerp-acc-tbl.is-pl td:nth-child(n+2), .dgw-zerp-acc-tbl.is-pl th:nth-child(n+2) { text-align: right; font-family: 'JetBrains Mono', monospace; }
.dgw-zerp-acc-tbl .is-green { color: var(--dgw-zerp-green); font-weight: 700; }
.dgw-zerp-acc-tbl .is-warn { color: var(--dgw-zerp-accent); font-weight: 700; }
.dgw-zerp-acc-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dgw-zerp-line-soft); font-size: 11.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dgw-zerp-acc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dgw-zerp-accent); }

/* banking */
.dgw-zerp-acc-recon { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 11.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-recon b { color: var(--dgw-zerp-ink); }
.dgw-zerp-acc-recon-bar { width: 90px; height: 6px; border-radius: 100px; background: rgba(27,61,245,0.10); overflow: hidden; }
.dgw-zerp-acc-recon-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-green)); border-radius: 100px; transform-origin: left; animation: dgw-zerp-acc-grow .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes dgw-zerp-acc-grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.dgw-zerp-acc-feed { list-style: none; margin: 0; padding: 0; }
.dgw-zerp-acc-feed li { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--dgw-zerp-line-soft); font-size: 12px; animation: dgw-zerp-acc-in .5s both; }
.dgw-zerp-acc-feed li:nth-child(1){animation-delay:.05s}.dgw-zerp-acc-feed li:nth-child(2){animation-delay:.12s}.dgw-zerp-acc-feed li:nth-child(3){animation-delay:.19s}.dgw-zerp-acc-feed li:nth-child(4){animation-delay:.26s}.dgw-zerp-acc-feed li:nth-child(5){animation-delay:.33s}.dgw-zerp-acc-feed li:nth-child(6){animation-delay:.40s}
.dgw-zerp-acc-feed-d { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-acc-feed-n { color: var(--dgw-zerp-ink-soft); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgw-zerp-acc-feed-a { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-acc-feed-a.is-in { color: var(--dgw-zerp-green); }
.dgw-zerp-acc-feed-t { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 6px; white-space: nowrap; min-width: 120px; text-align: center; }
.dgw-zerp-acc-feed-t.is-match { color: #0f7a50; background: rgba(22,160,106,0.12); }
.dgw-zerp-acc-feed-t.is-rule { color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); }
.dgw-zerp-acc-feed-t.is-todo { color: #b5541f; background: rgba(255,122,69,0.14); }

/* AR / AP */
.dgw-zerp-acc-age { display: grid; gap: 8px; }
.dgw-zerp-acc-age-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-age-row i { display: block; height: 10px; border-radius: 100px; background: rgba(27,61,245,0.10); position: relative; overflow: hidden; }
.dgw-zerp-acc-age-row i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); border-radius: 100px; transform-origin: left; animation: dgw-zerp-acc-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-acc-age-row.is-warn i::after { background: linear-gradient(90deg, var(--dgw-zerp-accent), #ffb08a); }
.dgw-zerp-acc-age-row b { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-acc-inv { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); font-size: 12px; }
.dgw-zerp-acc-inv b { display: block; color: var(--dgw-zerp-ink); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.dgw-zerp-acc-inv span { display: block; color: var(--dgw-zerp-muted); margin-top: 2px; }
.dgw-zerp-acc-inv em { display: block; font-style: normal; color: var(--dgw-zerp-brand); font-size: 11px; margin-top: 3px; font-weight: 600; }
.dgw-zerp-acc-inv-qr, .dgw-zerp-acc-irn-qr { position: relative; width: 54px; height: 54px; border-radius: 6px; background-color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--dgw-zerp-line);
  background-image: repeating-conic-gradient(var(--dgw-zerp-ink) 0 25%, transparent 0 50%), repeating-conic-gradient(var(--dgw-zerp-ink) 0 25%, transparent 0 50%);
  background-size: 8px 8px, 12px 12px; background-position: 0 0, 2px 6px; background-clip: padding-box; }
.dgw-zerp-acc-inv-qr::before, .dgw-zerp-acc-inv-qr::after, .dgw-zerp-acc-irn-qr::before, .dgw-zerp-acc-irn-qr::after { content: ""; position: absolute; width: 14px; height: 14px; border: 3px solid var(--dgw-zerp-ink); background: #fff; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px var(--dgw-zerp-ink); }
.dgw-zerp-acc-inv-qr::before, .dgw-zerp-acc-irn-qr::before { top: 0; left: 0; }
.dgw-zerp-acc-inv-qr::after, .dgw-zerp-acc-irn-qr::after { top: 0; right: 0; }
.dgw-zerp-acc-match { display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; align-items: center; gap: 3px; margin-bottom: 12px; }
.dgw-zerp-acc-match-n { border: 1px solid rgba(22,160,106,0.35); background: rgba(22,160,106,0.06); border-radius: 8px; padding: 7px 6px; text-align: center; min-width: 0; }
.dgw-zerp-acc-match-n em { display: block; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0f7a50; margin-bottom: 2px; }
.dgw-zerp-acc-match-n b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-acc-match-n span { display: block; font-size: 10px; color: var(--dgw-zerp-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-acc-match-l { height: 2px; background: repeating-linear-gradient(90deg, var(--dgw-zerp-green) 0 4px, transparent 4px 7px); }
.dgw-zerp-acc-lines { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.dgw-zerp-acc-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--dgw-zerp-line-soft); color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-lines li:first-child { border-top: 0; padding-top: 0; }
.dgw-zerp-acc-lines li.is-total { color: var(--dgw-zerp-ink); font-weight: 600; border-top: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-acc-lines b { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--dgw-zerp-ink); white-space: nowrap; text-align: right; }
.dgw-zerp-acc-lines b.is-green { color: var(--dgw-zerp-green); }
.dgw-zerp-acc-lines b.is-muted { color: var(--dgw-zerp-muted-2); }

/* GST */
.dgw-zerp-acc-irn-body { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; }
.dgw-zerp-acc-irn-qr { width: 76px; height: 76px; background-size: 9px 9px, 14px 14px; }
.dgw-zerp-acc-irn-qr::before, .dgw-zerp-acc-irn-qr::after { width: 18px; height: 18px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px var(--dgw-zerp-ink); }
.dgw-zerp-acc-irn-txt { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12px; align-content: start; }
.dgw-zerp-acc-irn-k { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); padding-top: 2px; }
.dgw-zerp-acc-irn-v { color: var(--dgw-zerp-ink-soft); font-weight: 500; }
.dgw-zerp-acc-gstin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dgw-zerp-line-soft); }
.dgw-zerp-acc-gstin span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 7px; color: var(--dgw-zerp-muted); background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); }
.dgw-zerp-acc-gstin span.is-on { color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); border-color: rgba(27,61,245,0.2); }
.dgw-zerp-acc-ret { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dgw-zerp-acc-ret li { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: var(--dgw-zerp-ink-soft); font-weight: 600; }
.dgw-zerp-acc-ret i { display: block; height: 8px; border-radius: 100px; background: rgba(27,61,245,0.10); overflow: hidden; }
.dgw-zerp-acc-ret i b { display: block; height: 100%; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); transform-origin: left; animation: dgw-zerp-acc-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-acc-ret em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; color: var(--dgw-zerp-muted); white-space: nowrap; }
.dgw-zerp-acc-ret em.is-green { color: var(--dgw-zerp-green); }

/* statutory */
.dgw-zerp-acc-msme { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dgw-zerp-acc-msme li { display: grid; grid-template-columns: 1fr; gap: 5px; font-size: 12px; color: var(--dgw-zerp-ink-soft); font-weight: 500; }
.dgw-zerp-acc-msme li i { display: block; height: 7px; border-radius: 100px; background: rgba(27,61,245,0.10); position: relative; overflow: hidden; }
.dgw-zerp-acc-msme li i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); transform-origin: left; animation: dgw-zerp-acc-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-acc-msme li i.is-warn::after { background: linear-gradient(90deg, var(--dgw-zerp-accent), var(--dgw-zerp-red)); }
.dgw-zerp-acc-msme li b { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-acc-msme li span, .dgw-zerp-acc-msme li b { grid-row: 1; }
.dgw-zerp-acc-msme li { grid-template-columns: 1fr auto; }
.dgw-zerp-acc-msme li i { grid-column: 1 / -1; }
.dgw-zerp-acc-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dgw-zerp-muted); padding-top: 10px; border-top: 1px solid var(--dgw-zerp-line-soft); }

/* reporting */
.dgw-zerp-acc-spark { display: block; width: 100%; height: 90px; }
.dgw-zerp-acc-spark-line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: dgw-zerp-acc-draw 1.6s cubic-bezier(.2,.7,.2,1) .2s forwards; }
.dgw-zerp-acc-spark-fill { opacity: 0; animation: dgw-zerp-acc-fade .8s ease 1.1s forwards; }
@keyframes dgw-zerp-acc-draw { to { stroke-dashoffset: 0 } }
@keyframes dgw-zerp-acc-fade { to { opacity: 1 } }
.dgw-zerp-acc-sched .dgw-zerp-acc-lines b { color: var(--dgw-zerp-brand); font-size: 11px; }

/* responsive */
@media (max-width: 1024px) {
  .dgw-zerp-acc-explorer { grid-template-columns: 1fr; }
  .dgw-zerp-acc-rail { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dgw-zerp-acc-tab { padding: 12px 12px 14px; }
  .dgw-zerp-acc-tab.is-active { transform: none; }
  .dgw-zerp-acc-tab-sub { display: none; }
  .dgw-zerp-deep-index-num { font-size: 72px; }
  .dgw-zerp-acc-grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .dgw-zerp-deep-head { grid-template-columns: 1fr; gap: 20px; }
  .dgw-zerp-deep-index { justify-content: start; text-align: left; }
}
@media (max-width: 700px) {
  .dgw-zerp-acc-rail { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-acc-tab { grid-template-columns: 30px 1fr; gap: 9px; }
  .dgw-zerp-acc-tab-ico { width: 30px; height: 30px; border-radius: 8px; }
  .dgw-zerp-acc-tab-title { font-size: 13.5px; }
  .dgw-zerp-acc-grid2, .dgw-zerp-acc-grid2.is-gst, .dgw-zerp-acc-grid2.is-rep, .dgw-zerp-acc-grid3 { grid-template-columns: 1fr; }
  .dgw-zerp-acc-stage { display: block; }
  .dgw-zerp-acc-panel { position: absolute; inset: 0; padding: 14px; }
  .dgw-zerp-acc-panel.is-active { position: relative; }
  .dgw-zerp-acc-org { display: none; }
  .dgw-zerp-acc-feed li { grid-template-columns: 44px 1fr auto; }
  .dgw-zerp-acc-feed-t { grid-column: 2 / -1; justify-self: start; min-width: 0; }
  .dgw-zerp-acc-match { grid-template-columns: 1fr; gap: 6px; }
  .dgw-zerp-acc-match-l { width: 2px; height: 14px; justify-self: center; background: repeating-linear-gradient(180deg, var(--dgw-zerp-green) 0 4px, transparent 4px 7px); }
  .dgw-zerp-deep-index-num { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-acc-tab.is-active .dgw-zerp-acc-tab-bar i,
  .dgw-zerp-acc-panel.is-active .dgw-zerp-acc-card,
  .dgw-zerp-acc-feed li,
  .dgw-zerp-acc-recon-bar i, .dgw-zerp-acc-age-row i::after, .dgw-zerp-acc-ret i b, .dgw-zerp-acc-msme li i::after,
  .dgw-zerp-acc-spark-line, .dgw-zerp-acc-spark-fill { animation: none !important; opacity: 1; stroke-dashoffset: 0; transform: none; }
  .dgw-zerp-acc-panel { transition: none; }
}




/* =============================================================
   DEEP-DIVE SERIES (Module 01…10) — shared head
   ============================================================= */
.dgw-zerp-deep { position: relative; padding: 110px 0 100px; scroll-margin-top: 76px; overflow: hidden; }
.dgw-zerp-deep-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 52px; }
.dgw-zerp-deep-head-l { max-width: 760px; }
.dgw-zerp-deep-head-l .dgw-zerp-h2 { max-width: 680px; }
.dgw-zerp-deep-sub { margin-left: 0 !important; margin-right: 0 !important; max-width: 640px !important; }
.dgw-zerp-deep-index { display: flex; align-items: baseline; gap: 12px; text-align: right; justify-content: flex-end; padding-bottom: 6px; }
.dgw-zerp-deep-index-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 96px; line-height: 0.85; letter-spacing: -0.05em; background: linear-gradient(180deg, rgba(27,61,245,0.20) 0%, rgba(27,61,245,0.04) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dgw-zerp-deep-index-of { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-deep-index-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--dgw-zerp-ink); }



/* =============================================================
   DEEP-DIVE SERIES (Module 01…10) — shared head
   ============================================================= */
.dgw-zerp-deep { position: relative; padding: 110px 0 100px; scroll-margin-top: 76px; overflow: hidden; }
.dgw-zerp-deep-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 52px; }
.dgw-zerp-deep-head-l { max-width: 760px; }
.dgw-zerp-deep-head-l .dgw-zerp-h2 { max-width: 680px; }
.dgw-zerp-deep-sub { margin-left: 0 !important; margin-right: 0 !important; max-width: 640px !important; }
.dgw-zerp-deep-index { display: flex; align-items: baseline; gap: 12px; text-align: right; justify-content: flex-end; padding-bottom: 6px; }
.dgw-zerp-deep-index-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 96px; line-height: 0.85; letter-spacing: -0.05em; background: linear-gradient(180deg, rgba(27,61,245,0.20) 0%, rgba(27,61,245,0.04) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dgw-zerp-deep-index-of { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-deep-index-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--dgw-zerp-ink); }

/* =============================================================
   MODULE 02 · ITEMS & INVENTORY — stock map board + cards + lifecycle
   ============================================================= */
.dgw-zerp-inv { background: #fff; }
.dgw-zerp-inv-glow { position: absolute; left: 50%; top: 38%; width: 1100px; height: 700px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(27,61,245,0.10) 0%, rgba(27,61,245,0.04) 35%, transparent 70%); filter: blur(10px); }
.dgw-zerp-inv > .dgw-zerp-container { position: relative; z-index: 1; }

/* ---- board (dark control-room card on a light section) ---- */
.dgw-zerp-inv-board { position: relative; border-radius: 22px; padding: 22px 26px 20px; color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, #17224f 0%, #0d1330 55%, #0a0f26 100%);
  box-shadow: 0 2px 4px rgba(14,22,51,0.06), 0 40px 90px -40px rgba(14,22,51,0.55), 0 0 0 6px rgba(27,61,245,0.06); overflow: hidden; }
.dgw-zerp-inv-board::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%); }
.dgw-zerp-inv-board > * { position: relative; }
.dgw-zerp-inv-board-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dgw-zerp-inv-board-title { display: inline-flex; align-items: center; gap: 9px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.dgw-zerp-inv-live { width: 8px; height: 8px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 4px rgba(45,212,143,0.18); animation: dgw-zerp-pulse 2s ease-in-out infinite; }
.dgw-zerp-inv-board-kpis { display: inline-flex; gap: 18px; }
.dgw-zerp-inv-board-kpis span { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; font-family: 'JetBrains Mono', monospace; }
.dgw-zerp-inv-board-kpis b { white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; letter-spacing: -0.01em; color: #fff; text-transform: none; }
.dgw-zerp-inv-legend { margin-left: auto; display: inline-flex; gap: 14px; flex-wrap: wrap; }
.dgw-zerp-inv-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.62); }
.dgw-zerp-inv-legend i { width: 10px; height: 10px; border-radius: 3px; }

.dgw-zerp-inv-map { display: grid; grid-template-columns: 1fr 160px 1fr; gap: 18px; padding: 20px 0 6px; align-items: start; }
.dgw-zerp-inv-loc { position: relative; border-radius: 14px; padding: 14px 14px 12px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
.dgw-zerp-inv-loc-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.dgw-zerp-inv-loc-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; }
.dgw-zerp-inv-loc-gst { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.42); letter-spacing: 0.04em; }
.dgw-zerp-inv-loc-val { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; color: #9db4ff; }
.dgw-zerp-inv-zone { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.dgw-zerp-inv-zone + .dgw-zerp-inv-zone { border-top: 1px dashed rgba(255,255,255,0.07); }
.dgw-zerp-inv-zone-lbl { font-size: 10.5px; color: rgba(255,255,255,0.55); line-height: 1.2; }
.dgw-zerp-inv-zone-lbl b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; margin-right: 7px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.10); vertical-align: middle; }
.dgw-zerp-inv-bins { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.dgw-zerp-inv-bin { position: relative; display: block; aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,0.06); opacity: 0; transform: scale(0.6); }
.dgw-zerp-inv.is-in .dgw-zerp-inv-bin { animation: dgw-zerp-inv-bin-in .5s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) forwards; }
@keyframes dgw-zerp-inv-bin-in { to { opacity: 1; transform: none } }
.dgw-zerp-inv-bin.is-full { background: #4d6bff; box-shadow: 0 0 10px -2px rgba(77,107,255,0.7); }
.dgw-zerp-inv-bin.is-part { background: rgba(77,107,255,0.38); }
.dgw-zerp-inv-bin.is-empty { background: rgba(255,255,255,0.06); }
.dgw-zerp-inv-bin.is-low { background: #ff7a45; box-shadow: 0 0 12px -2px rgba(255,122,69,0.8); animation-name: dgw-zerp-inv-bin-in, dgw-zerp-inv-low !important; animation-duration: .5s, 1.6s !important; animation-iteration-count: 1, infinite !important; animation-delay: var(--d, 0ms), .6s !important; }
@keyframes dgw-zerp-inv-low { 0%,100% { box-shadow: 0 0 12px -2px rgba(255,122,69,0.8) } 50% { box-shadow: 0 0 18px 2px rgba(255,122,69,0.95) } }
.dgw-zerp-inv-bin.is-res { background: repeating-linear-gradient(135deg, #2dd48f 0 3px, rgba(45,212,143,0.35) 3px 6px); }
.dgw-zerp-inv-bin.is-qc { background: repeating-linear-gradient(135deg, #ff5c5c 0 3px, rgba(255,92,92,0.3) 3px 6px); }
.dgw-zerp-inv-legend .is-full { background: #4d6bff } .dgw-zerp-inv-legend .is-part { background: rgba(77,107,255,0.45) } .dgw-zerp-inv-legend .is-low { background: #ff7a45 }
.dgw-zerp-inv-legend .is-res { background: repeating-linear-gradient(135deg, #2dd48f 0 2px, rgba(45,212,143,0.35) 2px 4px) } .dgw-zerp-inv-legend .is-qc { background: repeating-linear-gradient(135deg, #ff5c5c 0 2px, rgba(255,92,92,0.3) 2px 4px) }
/* scanner bin */
.dgw-zerp-inv-bin.is-scan { outline: 2px solid #fff; outline-offset: 2px; z-index: 2; }
.dgw-zerp-inv-bin.is-scan::after { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,0.9); animation: dgw-zerp-inv-scan 1.4s ease-in-out infinite alternate; }
@keyframes dgw-zerp-inv-scan { from { top: -3px } to { top: calc(100% - 0px) } }
.dgw-zerp-inv-bin.is-hold { outline: 2px solid #ff5c5c; outline-offset: 2px; z-index: 2; }
/* callouts */
.dgw-zerp-inv-callout { position: relative; margin-top: 12px; padding: 9px 12px 9px 14px; border-radius: 9px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); color: #fff; font-size: 11.5px; line-height: 1.4; opacity: 0; transform: translateY(6px); }
.dgw-zerp-inv.is-in .dgw-zerp-inv-callout { animation: dgw-zerp-acc-in .6s cubic-bezier(.2,.7,.2,1) 1.1s forwards; }
.dgw-zerp-inv-callout::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.6); }
.dgw-zerp-inv-callout-hold::before { background: #ff5c5c; box-shadow: 0 0 10px rgba(255,92,92,0.6); }
.dgw-zerp-inv-callout-k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9db4ff; margin-bottom: 3px; }
.dgw-zerp-inv-callout-hold .dgw-zerp-inv-callout-k { color: #ff8a8a; }
.dgw-zerp-inv-callout-v { display: block; color: #fff; }
.dgw-zerp-inv-callout-v b { font-family: 'JetBrains Mono', monospace; }
.dgw-zerp-inv-callout-v b.is-warn { color: #ffb08a; }
.dgw-zerp-inv-callout-s { display: block; color: rgba(255,255,255,0.55); font-size: 11px; margin-top: 2px; }

/* transit */
.dgw-zerp-inv-transit { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-top: 26px; }
.dgw-zerp-inv-transit-path { position: relative; width: 100%; height: 22px; }
.dgw-zerp-inv-transit-path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(157,180,255,0.7) 0 6px, transparent 6px 12px); animation: dgw-zerp-inv-dash 1s linear infinite; }
@keyframes dgw-zerp-inv-dash { to { background-position: 12px 0 } }
.dgw-zerp-inv-transit-path::after { content: ""; position: absolute; right: -2px; top: 50%; width: 0; height: 0; border-left: 7px solid #9db4ff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: translateY(-50%); }
.dgw-zerp-inv-transit-truck { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #0d1330; background: #fff; box-shadow: 0 6px 16px -4px rgba(255,255,255,0.5); transform: translate(0, -50%); animation: dgw-zerp-inv-truck 4.5s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes dgw-zerp-inv-truck { 0% { left: 0; opacity: 0 } 8% { opacity: 1 } 88% { opacity: 1 } 100% { left: calc(100% - 26px); opacity: 0 } }
.dgw-zerp-inv-transit-card { width: 100%; border-radius: 10px; padding: 10px 11px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); display: grid; gap: 4px; text-align: center; }
.dgw-zerp-inv-transit-id { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; color: #fff; }
.dgw-zerp-inv-transit-what { font-size: 11px; color: rgba(255,255,255,0.62); }
.dgw-zerp-inv-transit-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.dgw-zerp-inv-transit-steps i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 5px; border-radius: 4px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.dgw-zerp-inv-transit-steps i.is-done { color: #2dd48f; background: rgba(45,212,143,0.14); }
.dgw-zerp-inv-transit-steps i.is-on { color: #fff; background: #1b3df5; box-shadow: 0 0 12px -2px rgba(27,61,245,0.9); }
.dgw-zerp-inv-transit-lbl { font-size: 10.5px; color: rgba(255,255,255,0.45); text-align: center; line-height: 1.3; }

.dgw-zerp-inv-board-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11.5px; color: rgba(255,255,255,0.62); }
.dgw-zerp-inv-board-foot span { display: inline-flex; align-items: center; gap: 7px; }
.dgw-zerp-inv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dgw-zerp-accent); }

/* ---- follow-one-item trace strip (inside the board) ---- */
.dgw-zerp-inv-trace { margin-top: 16px; padding: 14px 16px 12px; border-radius: 14px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
.dgw-zerp-inv-trace-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dgw-zerp-inv-trace-tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-accent); padding: 4px 8px; border-radius: 6px; background: rgba(255,122,69,0.14); }
.dgw-zerp-inv-trace-sku { font-size: 12.5px; color: rgba(255,255,255,0.7); }
.dgw-zerp-inv-trace-sku b { font-family: 'JetBrains Mono', monospace; color: #fff; margin-right: 4px; }
.dgw-zerp-inv-trace-flags { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2dd48f; }
.dgw-zerp-inv-trace-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 0 22px; padding-top: 12px; }
.dgw-zerp-inv-trace-col { min-width: 0; }
.dgw-zerp-inv-trace-col + .dgw-zerp-inv-trace-col { border-left: 1px dashed rgba(255,255,255,0.10); padding-left: 22px; }
.dgw-zerp-inv-trace-k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.dgw-zerp-inv-trace-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dgw-zerp-inv-trace-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; color: rgba(255,255,255,0.72); }
.dgw-zerp-inv-trace-list li b { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #fff; }
.dgw-zerp-inv-trace-list li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-inv-trace-list li em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); white-space: nowrap; }
.dgw-zerp-inv-trace-list li.is-next em { color: #fff; background: #1b3df5; }
.dgw-zerp-inv-trace-list li.is-hold em { color: #ff8a8a; background: rgba(255,92,92,0.16); }
.dgw-zerp-inv-trace-list li:only-child, .dgw-zerp-inv-trace-col:first-child .dgw-zerp-inv-trace-list li { grid-template-columns: 1fr; }
.dgw-zerp-inv-trace-col:first-child .dgw-zerp-inv-trace-list li span { white-space: normal; }
.dgw-zerp-inv-trace-col:first-child .dgw-zerp-inv-trace-list li::before { content: none; }
.dgw-zerp-inv-trace-reorder { position: relative; margin-top: 10px; padding-top: 12px; height: 6px; box-sizing: content-box; }
.dgw-zerp-inv-trace-reorder::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 6px; border-radius: 100px; background: linear-gradient(90deg, rgba(255,122,69,0.3) 0 30%, rgba(255,255,255,0.10) 30%); }
.dgw-zerp-inv-trace-reorder i { position: absolute; left: 0; top: 4px; height: 6px; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, #1b3df5, #6f86ff); transform-origin: left; animation: dgw-zerp-acc-grow 1s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-inv-trace-reorder em { position: absolute; left: var(--x); top: 1px; width: 2px; height: 12px; background: var(--dgw-zerp-accent); border-radius: 2px; }
.dgw-zerp-inv-trace-reorder span { position: absolute; left: 0; top: 16px; font-size: 10.5px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.dgw-zerp-inv-trace-reorder span b { font-family: 'JetBrains Mono', monospace; color: #fff; }
.dgw-zerp-inv-trace-col:first-child { padding-bottom: 18px; }
.dgw-zerp-inv-trace-serials { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(255,255,255,0.10); }
.dgw-zerp-inv-trace-serials i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); }
.dgw-zerp-inv-trace-serials i.is-more { color: #9db4ff; background: rgba(27,61,245,0.25); }
.dgw-zerp-inv-trace-serials span { font-size: 10.5px; color: #2dd48f; font-weight: 600; margin-left: 4px; }
.dgw-zerp-inv-trace-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dgw-zerp-inv-trace-steps li { position: relative; display: grid; grid-template-columns: 14px 1fr; column-gap: 9px; padding: 2px 0 7px; font-size: 11.5px;
/* 	color: rgba(255,255,255,0.85); */
}
.dgw-zerp-inv-trace-steps li b { font-weight: 600; font-size: 11.5px; }
.dgw-zerp-inv-trace-steps li span { grid-column: 2; font-size: 10.5px;
/* 	color: rgba(255,255,255,0.48); */
}
.dgw-zerp-inv-trace-steps li i { grid-row: 1 / span 2; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.22); position: relative; z-index: 1; background: #0d1330; }
.dgw-zerp-inv-trace-steps li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: rgba(255,255,255,0.12); }
.dgw-zerp-inv-trace-steps li:last-child::before { display: none; }
.dgw-zerp-inv-trace-steps li.is-done i { border-color: #2dd48f; background: #2dd48f; }
.dgw-zerp-inv-trace-steps li.is-done i::after { content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border-right: 2px solid #0d1330; border-bottom: 2px solid #0d1330; transform: rotate(45deg); }
.dgw-zerp-inv-trace-steps li.is-done::before { background: #2dd48f; }
.dgw-zerp-inv-trace-steps li.is-on i { border-color: #4d6bff; box-shadow: 0 0 0 4px rgba(77,107,255,0.2); animation: dgw-zerp-pulse 1.8s ease-in-out infinite; }
.dgw-zerp-inv-trace-steps li.is-on i::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #4d6bff; }
.dgw-zerp-inv-trace-steps li.is-on b { color: #9db4ff; }

/* ---- lifecycle strip ---- */
.dgw-zerp-inv-flow { position: relative; margin-top: 40px; padding: 26px 0 0; }
.dgw-zerp-inv-flow-line { position: absolute; left: 8.33%; right: 8.33%; top: 26px; height: 2px; margin-top: 21px; background: linear-gradient(90deg, rgba(27,61,245,0.10), rgba(27,61,245,0.28), rgba(27,61,245,0.10)); border-radius: 2px; overflow: visible; }
.dgw-zerp-inv-flow-pulse { position: absolute; top: 50%; left: 0; width: 60px; height: 4px; margin-top: -2px; border-radius: 100px; background: linear-gradient(90deg, transparent, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); box-shadow: 0 0 14px rgba(27,61,245,0.5); animation: dgw-zerp-inv-pulse 7.2s linear infinite; }
@keyframes dgw-zerp-inv-pulse { from { left: -60px } to { left: 100% } }
.dgw-zerp-inv-flow-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.dgw-zerp-inv-flow-step { text-align: center; padding: 0 4px; }
.dgw-zerp-inv-flow-node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px; color: var(--dgw-zerp-brand); background: #fff; border: 1px solid rgba(27,61,245,0.18); box-shadow: var(--dgw-zerp-card-shadow); animation: dgw-zerp-inv-lit 7.2s linear infinite; animation-delay: calc(var(--i) * 1.2s + 0.3s); }
@keyframes dgw-zerp-inv-lit { 0%, 4% { color: var(--dgw-zerp-brand); background: #fff; transform: none } 8% { color: #fff; background: var(--dgw-zerp-brand); transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 24px -8px rgba(27,61,245,0.6) } 20% { color: var(--dgw-zerp-brand); background: #fff; transform: none } 100% { color: var(--dgw-zerp-brand); background: #fff } }
.dgw-zerp-inv-flow-step b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); margin-bottom: 5px; }
.dgw-zerp-inv-flow-step span:last-child { display: block; font-size: 12px; line-height: 1.45; color: var(--dgw-zerp-muted); }

/* ---- shared "We configure" strip (used by every deep-dive module) ---- */
.dgw-zerp-deep-config { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--dgw-zerp-line); border-left: 3px solid var(--dgw-zerp-accent); box-shadow: var(--dgw-zerp-card-shadow); }
.dgw-zerp-deep-config-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-accent); white-space: nowrap; }
.dgw-zerp-deep-config-items { position: relative; min-height: 22px; display: grid; }
.dgw-zerp-deep-config-items span { grid-area: 1 / 1; font-size: 13.5px; line-height: 1.55; color: var(--dgw-zerp-ink-soft); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; pointer-events: none; }
.dgw-zerp-deep-config-items span.is-active { opacity: 1; transform: none; pointer-events: auto; }
.dgw-zerp-inv .dgw-zerp-deep-config { margin-top: 36px; }

/* responsive */
@media (max-width: 1024px) {
  .dgw-zerp-inv-map { grid-template-columns: 1fr; gap: 14px; }
  .dgw-zerp-inv-transit { flex-direction: row; padding-top: 0; gap: 14px; }
  .dgw-zerp-inv-transit-path { width: 30%; }
  .dgw-zerp-inv-transit-card { width: auto; flex: 1; }
  .dgw-zerp-inv-transit-lbl { display: none; }
  .dgw-zerp-inv-flow-steps { grid-template-columns: repeat(3, 1fr); gap: 22px 14px; }
  .dgw-zerp-inv-flow-line { display: none; }
  .dgw-zerp-inv-legend { margin-left: 0; }
  .dgw-zerp-inv-trace-grid { grid-template-columns: 1fr; gap: 14px; }
  .dgw-zerp-inv-trace-col + .dgw-zerp-inv-trace-col { border-left: 0; padding-left: 0; border-top: 1px dashed rgba(255,255,255,0.10); padding-top: 12px; }
  .dgw-zerp-inv-trace-flags { margin-left: 0; }
}
@media (max-width: 700px) {
  .dgw-zerp-inv-board { padding: 16px; border-radius: 16px; }
  .dgw-zerp-inv-board-kpis { gap: 12px; }
  .dgw-zerp-inv-zone { grid-template-columns: 74px 1fr; }
  .dgw-zerp-inv-zone-lbl { font-size: 9.5px; }
  .dgw-zerp-inv-flow-steps { grid-template-columns: 1fr 1fr; }
  .dgw-zerp-inv-transit { flex-direction: column; }
  .dgw-zerp-inv-transit-path { width: 100%; }
  .dgw-zerp-deep-config { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-inv-bin { opacity: 1; transform: none; animation: none !important; }
  .dgw-zerp-inv-callout { opacity: 1; transform: none; animation: none !important; }
  .dgw-zerp-inv-bin.is-scan::after, .dgw-zerp-inv-transit-truck, .dgw-zerp-inv-transit-path::before, .dgw-zerp-inv-flow-pulse, .dgw-zerp-inv-flow-node, .dgw-zerp-inv-live, .dgw-zerp-inv-trace-steps li.is-on i, .dgw-zerp-inv-trace-reorder i { animation: none !important; }
  .dgw-zerp-deep-config-items span { transition: none; }
}


/* =============================================================
   MODULE 03 · MANUFACTURING & PRODUCTION — the production floor
   ============================================================= */
.dgw-zerp-mfg { background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%); }
.dgw-zerp-mfg-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(27,61,245,0.05) 0 1px, transparent 1px 22px);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 72%); }
.dgw-zerp-mfg > .dgw-zerp-container { position: relative; z-index: 1; }

/* ---- console ---- */
.dgw-zerp-mfg-console { background: #fff; border: 1px solid rgba(27,61,245,0.14); border-radius: 22px; padding: 18px 20px 20px;
  box-shadow: 0 2px 4px rgba(14,22,51,0.04), 0 40px 90px -36px rgba(27,61,245,0.38), 0 0 0 6px rgba(255,255,255,0.6); }

/* MO header */
.dgw-zerp-mfg-mo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-mfg-mo-id { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: #fff; background: var(--dgw-zerp-ink); padding: 7px 12px; border-radius: 9px; }
.dgw-zerp-mfg-live { width: 7px; height: 7px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 3px rgba(45,212,143,0.25); animation: dgw-zerp-pulse 2s ease-in-out infinite; }
.dgw-zerp-mfg-mo-what { display: flex; flex-direction: column; gap: 1px; }
.dgw-zerp-mfg-mo-what b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: var(--dgw-zerp-ink); letter-spacing: -0.01em; }
.dgw-zerp-mfg-mo-what span { font-size: 11.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-mo-steps { display: inline-flex; gap: 4px; }
.dgw-zerp-mfg-mo-steps i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; color: var(--dgw-zerp-muted-2); background: var(--dgw-zerp-bg-tint); }
.dgw-zerp-mfg-mo-steps i.is-done { color: #0f7a50; background: rgba(22,160,106,0.12); }
.dgw-zerp-mfg-mo-steps i.is-on { color: #fff; background: var(--dgw-zerp-brand); box-shadow: 0 6px 14px -6px rgba(27,61,245,0.8); }
.dgw-zerp-mfg-mo-prog { display: flex; flex-direction: column; gap: 5px; min-width: 200px; margin-left: auto; }
.dgw-zerp-mfg-mo-prog-bar { height: 8px; border-radius: 100px; background: rgba(27,61,245,0.10); overflow: hidden; }
.dgw-zerp-mfg-mo-prog-bar i { display: block; height: 100%; width: 62.4%; border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); transition: width .6s ease; }
.dgw-zerp-mfg-mo-prog-v { font-size: 11px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-mo-prog-v b { font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink); font-size: 12px; }
.dgw-zerp-mfg-mo-ok { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: #0f7a50; background: rgba(22,160,106,0.12); padding: 6px 10px; border-radius: 7px; white-space: nowrap; }

/* body */
.dgw-zerp-mfg-body { display: grid; grid-template-columns: 222px minmax(0,1fr) 222px; gap: 18px; padding-top: 18px; align-items: start; }
.dgw-zerp-mfg-bom, .dgw-zerp-mfg-cost { background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); border-radius: 14px; padding: 14px; min-width: 0; }
.dgw-zerp-mfg-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--dgw-zerp-ink); margin-bottom: 10px; }
.dgw-zerp-mfg-panel-h2 { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-mfg-pill { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 100px; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); white-space: nowrap; }
.dgw-zerp-mfg-pill.is-warn { color: #b5541f; background: rgba(255,122,69,0.16); }

/* BOM tree */
.dgw-zerp-mfg-tree { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
.dgw-zerp-mfg-tree li { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; padding: 5px 0 5px var(--ind, 0px); border-top: 1px dashed var(--dgw-zerp-line-soft); color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-mfg-tree li:first-child { border-top: 0; }
.dgw-zerp-mfg-tree-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-mfg-tree li b { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--dgw-zerp-muted); white-space: nowrap; }
.dgw-zerp-mfg-tree li em { grid-column: 1 / -1; font-style: normal; font-size: 10px; color: var(--dgw-zerp-muted-2); margin-top: -2px; }
.dgw-zerp-mfg-tree-fg { font-weight: 700; color: var(--dgw-zerp-ink) !important; }
.dgw-zerp-mfg-tree-fg b { color: #fff !important; background: var(--dgw-zerp-ink); padding: 2px 6px; border-radius: 4px; }
.dgw-zerp-mfg-tree-sa { --ind: 16px; font-weight: 600; }
.dgw-zerp-mfg-tree-sa b { color: var(--dgw-zerp-brand) !important; }
.dgw-zerp-mfg-tree-c1 { --ind: 16px; }
.dgw-zerp-mfg-tree-c2 { --ind: 32px; }
.dgw-zerp-mfg-tree li:not(.dgw-zerp-mfg-tree-fg)::before { content: ""; position: absolute; left: calc(var(--ind) - 10px); top: 50%; width: 6px; height: 1px; background: rgba(27,61,245,0.35); }
.dgw-zerp-mfg-tree li:not(.dgw-zerp-mfg-tree-fg)::after { content: ""; position: absolute; left: calc(var(--ind) - 12px); top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--dgw-zerp-accent); opacity: 0; transform: scale(0.4); animation: dgw-zerp-mfg-consume 12s linear infinite; animation-delay: calc(var(--k) * 1.5s); }
@keyframes dgw-zerp-mfg-consume { 0%, 3% { opacity: 0; transform: scale(0.4) } 6% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 0 4px rgba(255,122,69,0.25) } 12%, 100% { opacity: 0; transform: scale(0.4) } }
.dgw-zerp-mfg-bom-foot { display: grid; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dgw-zerp-line); font-size: 10.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-bom-foot span { display: flex; align-items: center; gap: 7px; }
.dgw-zerp-mfg-bom-foot i { width: 5px; height: 5px; border-radius: 50%; background: var(--dgw-zerp-accent); flex: none; }

/* ---- THE LINE ---- */
.dgw-zerp-mfg-linewrap { min-width: 0; }
.dgw-zerp-mfg-line { position: relative; padding: 14px 14px 0; border-radius: 14px; border: 1px solid var(--dgw-zerp-line);
  background: linear-gradient(180deg, #fbfcff 0%, #f1f4fb 100%); overflow: hidden; }
.dgw-zerp-mfg-line::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(27,61,245,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(27,61,245,0.05) 1px, transparent 1px); background-size: 28px 28px; }
.dgw-zerp-mfg-stations { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dgw-zerp-mfg-st { position: relative; min-width: 0; background: #fff; border: 1px solid var(--dgw-zerp-line); border-radius: 12px; padding: 8px 8px 7px; animation: dgw-zerp-mfg-stglow 12s linear infinite; animation-delay: calc(0.9s + var(--i) * 2.22s); }
@keyframes dgw-zerp-mfg-stglow { 0%, 2% { border-color: var(--dgw-zerp-line); box-shadow: none; transform: none } 6% { border-color: rgba(27,61,245,0.55); box-shadow: 0 14px 30px -12px rgba(27,61,245,0.55), 0 0 0 3px rgba(27,61,245,0.12); transform: translateY(-2px) } 18%, 100% { border-color: var(--dgw-zerp-line); box-shadow: none; transform: none } }
.dgw-zerp-mfg-st-h { display: flex; align-items: center; gap: 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12px; color: var(--dgw-zerp-ink); margin-bottom: 7px; }
.dgw-zerp-mfg-st-h b { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--dgw-zerp-accent); }
.dgw-zerp-mfg-st-run { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 2px rgba(45,212,143,0.22); animation: dgw-zerp-pulse 1.6s ease-in-out infinite; }
.dgw-zerp-mfg-st-f { display: flex; justify-content: space-between; gap: 6px; margin-top: 7px; font-size: 10px; color: var(--dgw-zerp-muted); white-space: nowrap; overflow: hidden; min-width: 0; }
.dgw-zerp-mfg-st-f > span, .dgw-zerp-mfg-st-f { text-overflow: ellipsis; }
.dgw-zerp-mfg-st-f em { font-style: normal; font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-mfg-machine { position: relative; height: 76px; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #1a2450 0%, #0f1633 70%); }
.dgw-zerp-mfg-machine::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 6px, transparent 6px 12px); }
.dgw-zerp-mfg-machine > span { position: absolute; }

/* 01 CUT */
.dgw-zerp-mfg-cut-rail { top: 12px; left: 10px; right: 10px; height: 3px; background: #3a4670; border-radius: 2px; }
.dgw-zerp-mfg-cut-head { top: 8px; left: 10%; width: 10px; height: 20px; background: linear-gradient(180deg, #fff, #cfd6e6); border-radius: 2px 2px 3px 3px; animation: dgw-zerp-mfg-cut 1.7s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-cut { from { left: 12% } to { left: 78% } }
.dgw-zerp-mfg-cut-head::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffb08a 30%, rgba(255,122,69,0) 70%); animation: dgw-zerp-mfg-spark .18s steps(2) infinite; }
@keyframes dgw-zerp-mfg-spark { from { transform: scale(0.6); opacity: .6 } to { transform: scale(1.3); opacity: 1 } }
.dgw-zerp-mfg-cut-plate { bottom: 16px; left: 12px; right: 12px; height: 9px; background: rgba(77,107,255,0.55); border-radius: 2px; }
.dgw-zerp-mfg-cut-plate::after { content: ""; position: absolute; left: 0; top: 50%; height: 1px; width: 100%; background: repeating-linear-gradient(90deg, #ffb08a 0 3px, transparent 3px 6px); opacity: .8; }

/* 02 WELD */
.dgw-zerp-mfg-weld-part { bottom: 14px; left: 50%; width: 46px; height: 9px; margin-left: -23px; background: #2a3358; border-radius: 2px; }
.dgw-zerp-mfg-weld-part::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ffb08a; }
.dgw-zerp-mfg-weld-torch { bottom: 22px; left: 50%; width: 7px; height: 32px; margin-left: 2px; background: linear-gradient(180deg, #cfd6e6, #8f9bbf); border-radius: 3px; transform: rotate(-32deg); transform-origin: bottom center; animation: dgw-zerp-mfg-torch 2.2s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-torch { from { transform: rotate(-38deg) translateX(-3px) } to { transform: rotate(-26deg) translateX(3px) } }
.dgw-zerp-mfg-weld-arc { bottom: 18px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffd7a8 25%, rgba(255,122,69,0.6) 45%, rgba(255,122,69,0) 70%); animation: dgw-zerp-mfg-arc .32s steps(3) infinite alternate; }
@keyframes dgw-zerp-mfg-arc { from { transform: scale(.6); opacity: .35 } to { transform: scale(1.5); opacity: 1 } }

/* 03 ASSEMBLE */
.dgw-zerp-mfg-asm-base { bottom: 12px; left: 16px; width: 24px; height: 10px; background: #2a3358; border-radius: 2px; }
.dgw-zerp-mfg-asm-arm { bottom: 20px; left: 25px; width: 6px; height: 36px; background: linear-gradient(180deg, #e6ebf7, #aab5d6); border-radius: 3px; transform-origin: bottom center; animation: dgw-zerp-mfg-arm 2.6s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-arm { from { transform: rotate(-34deg) } to { transform: rotate(28deg) } }
.dgw-zerp-mfg-asm-fore { position: absolute; top: -2px; left: 0; width: 6px; height: 24px; background: #9db4ff; border-radius: 3px; transform-origin: top center; transform: rotate(60deg); animation: dgw-zerp-mfg-fore 2.6s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-fore { from { transform: rotate(58deg) } to { transform: rotate(-12deg) } }
.dgw-zerp-mfg-asm-grip { position: absolute; bottom: -8px; left: -4px; width: 14px; height: 9px; border: 2px solid var(--dgw-zerp-accent); border-top: 0; border-radius: 0 0 5px 5px; }
.dgw-zerp-mfg-m-asm::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 18px; height: 16px; background: #4d6bff; border-radius: 4px 4px 2px 2px; box-shadow: inset 0 -5px 0 #0e1633; }

/* 04 QC */
.dgw-zerp-mfg-qc-gate { top: 8px; bottom: 12px; left: 22px; right: 22px; border: 2px solid #3a4670; border-radius: 5px; }
.dgw-zerp-mfg-qc-gate::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 18px; height: 16px; margin-left: -9px; background: #4d6bff; border-radius: 4px 4px 2px 2px; box-shadow: inset 0 -5px 0 #0e1633; }
.dgw-zerp-mfg-qc-beam { left: 26px; right: 26px; height: 2px; top: 12px; background: #2dd48f; box-shadow: 0 0 8px 2px rgba(45,212,143,0.6); animation: dgw-zerp-mfg-beam 1.3s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-beam { from { top: 12px } to { top: 56px } }
.dgw-zerp-mfg-qc-tick { top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: #2dd48f; opacity: 0; animation: dgw-zerp-mfg-tick 3.9s ease-in-out infinite; }
.dgw-zerp-mfg-qc-tick::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border-right: 2px solid #0f1633; border-bottom: 2px solid #0f1633; transform: rotate(45deg); }
@keyframes dgw-zerp-mfg-tick { 0%, 62% { opacity: 0; transform: scale(.4) } 68%, 92% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(.4) } }

/* 05 PACK */
.dgw-zerp-mfg-pack-box { bottom: 13px; left: 50%; width: 32px; height: 22px; margin-left: -20px; background: #d9a066; border-radius: 2px; }
.dgw-zerp-mfg-pack-box::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #b9834d; }
.dgw-zerp-mfg-pack-lid { position: absolute; left: 0; top: 0; width: 100%; height: 9px; background: #c58a52; border-radius: 2px 2px 0 0; transform-origin: top center; animation: dgw-zerp-mfg-lid 2.4s ease-in-out infinite alternate; }
@keyframes dgw-zerp-mfg-lid { from { transform: rotateX(0deg) } 40% { transform: rotateX(0deg) } to { transform: rotateX(-115deg) } }
.dgw-zerp-mfg-pack-label { top: 14px; right: 12px; width: 20px; height: 10px; background: #fff; border-radius: 2px; opacity: 0; animation: dgw-zerp-mfg-label 2.4s ease-in-out infinite alternate; }
.dgw-zerp-mfg-pack-label::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 4px; background: repeating-linear-gradient(90deg, #0e1633 0 1px, transparent 1px 3px); }
@keyframes dgw-zerp-mfg-label { from { opacity: 0; transform: translateY(-6px) } 50% { opacity: 0 } to { opacity: 1; transform: translateY(0) } }

/* belt */
.dgw-zerp-mfg-belt { position: relative; height: 72px; margin: 10px -14px 0; }
.dgw-zerp-mfg-belt-track { position: absolute; left: 0; right: 0; bottom: 14px; height: 14px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #2a3358 0 16px, #1c2444 16px 32px); animation: dgw-zerp-mfg-belt .7s linear infinite; box-shadow: 0 6px 14px -8px rgba(14,22,51,0.6); }
@keyframes dgw-zerp-mfg-belt { to { background-position: -32px 0 } }
.dgw-zerp-mfg-belt-track::before, .dgw-zerp-mfg-belt-track::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #3a4670; }
.dgw-zerp-mfg-belt-track::before { top: -2px } .dgw-zerp-mfg-belt-track::after { bottom: -2px }
.dgw-zerp-mfg-belt-in, .dgw-zerp-mfg-belt-out { position: absolute; top: 4px; font-size: 9.5px; line-height: 1.3; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-belt-in { left: 14px; } .dgw-zerp-mfg-belt-out { right: 14px; text-align: right; }
.dgw-zerp-mfg-belt-in b, .dgw-zerp-mfg-belt-out b { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--dgw-zerp-ink); }
.dgw-zerp-mfg-unit { position: absolute; bottom: 30px; left: -4%; width: 24px; height: 8px; border-radius: 2px; background: #b8c2da; animation: dgw-zerp-mfg-unit 12s linear infinite; animation-delay: var(--d, 0s); box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
@keyframes dgw-zerp-mfg-unit {
  0%   { left: -4%;  width: 24px; height: 8px;  border-radius: 2px; background: #b8c2da; box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
  11%  { left: 8%;   width: 24px; height: 8px;  border-radius: 2px; background: #b8c2da; box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
  15%  { left: 12%;  width: 22px; height: 10px; border-radius: 3px; background: #9db4ff; box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
  29%  { left: 27%;  width: 22px; height: 10px; border-radius: 3px; background: #9db4ff; box-shadow: 0 4px 8px -3px rgba(14,22,51,0.5); }
  33%  { left: 32%;  width: 22px; height: 10px; border-radius: 3px; background: #1b3df5; box-shadow: 0 -2px 0 0 #ff7a45, 0 4px 8px -3px rgba(14,22,51,0.5); }
  48%  { left: 47%;  width: 22px; height: 10px; border-radius: 3px; background: #1b3df5; box-shadow: 0 -2px 0 0 #ff7a45, 0 4px 8px -3px rgba(14,22,51,0.5); }
  52%  { left: 52%;  width: 18px; height: 18px; border-radius: 4px 4px 2px 2px; background: #1b3df5; box-shadow: inset 0 -6px 0 #0e1633, 0 4px 8px -3px rgba(14,22,51,0.5); }
  66%  { left: 66%;  width: 18px; height: 18px; border-radius: 4px 4px 2px 2px; background: #1b3df5; box-shadow: inset 0 -6px 0 #0e1633, 0 4px 8px -3px rgba(14,22,51,0.5); }
  70%  { left: 70%;  width: 18px; height: 18px; border-radius: 4px 4px 2px 2px; background: #1b3df5; box-shadow: inset 0 -6px 0 #0e1633, 0 0 0 3px rgba(45,212,143,0.9), 0 4px 8px -3px rgba(14,22,51,0.5); }
  85%  { left: 85%;  width: 18px; height: 18px; border-radius: 4px 4px 2px 2px; background: #1b3df5; box-shadow: inset 0 -6px 0 #0e1633, 0 0 0 3px rgba(45,212,143,0.9), 0 4px 8px -3px rgba(14,22,51,0.5); }
  89%  { left: 89%;  width: 24px; height: 18px; border-radius: 3px; background: #d9a066; box-shadow: inset 0 0 0 0 #0e1633, inset 4px 0 0 -2px #b9834d, 0 4px 8px -3px rgba(14,22,51,0.5); }
  100% { left: 104%; width: 24px; height: 18px; border-radius: 3px; background: #d9a066; box-shadow: inset 0 0 0 0 #0e1633, inset 4px 0 0 -2px #b9834d, 0 4px 8px -3px rgba(14,22,51,0.5); }
}

/* job cards */
.dgw-zerp-mfg-jobs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.dgw-zerp-mfg-job { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--dgw-zerp-line); min-width: 0; }
.dgw-zerp-mfg-job.is-done { background: rgba(22,160,106,0.06); border-color: rgba(22,160,106,0.28); }
.dgw-zerp-mfg-job.is-warn { background: rgba(255,122,69,0.06); border-color: rgba(255,122,69,0.32); }
.dgw-zerp-mfg-job-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--dgw-zerp-brand); }
.dgw-zerp-mfg-job.is-done .dgw-zerp-mfg-job-id { color: #0f7a50; } .dgw-zerp-mfg-job.is-warn .dgw-zerp-mfg-job-id { color: #b5541f; }
.dgw-zerp-mfg-job-op { font-size: 11px; font-weight: 600; color: var(--dgw-zerp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-mfg-job-t { font-size: 10px; color: var(--dgw-zerp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-mfg-job-q { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zerp-muted); margin-top: 2px; }
.dgw-zerp-mfg-job-q b { color: var(--dgw-zerp-ink); font-size: 12px; }

/* cost & output */
.dgw-zerp-mfg-costrows { display: grid; gap: 7px; }
.dgw-zerp-mfg-costrow { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: center; font-size: 11px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mfg-costrow i { display: block; height: 7px; border-radius: 100px; background: rgba(27,61,245,0.10); overflow: hidden; }
.dgw-zerp-mfg-costrow i b { display: block; height: 100%; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); transform-origin: left; animation: dgw-zerp-acc-grow 1s cubic-bezier(.2,.7,.2,1) both; }
.dgw-zerp-mfg-costrow em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-mfg-costrow.is-total { padding-top: 6px; border-top: 1px solid var(--dgw-zerp-line); color: var(--dgw-zerp-ink); font-weight: 700; }
.dgw-zerp-mfg-costrow.is-total i, .dgw-zerp-mfg-costrow.is-std i { background: none; }
.dgw-zerp-mfg-costrow.is-total em { font-weight: 700; color: var(--dgw-zerp-accent); }
.dgw-zerp-mfg-costrow.is-std em { color: var(--dgw-zerp-muted-2); }
.dgw-zerp-mfg-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 11px; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-mfg-out li { position: relative; padding-left: 18px; line-height: 1.4; }
.dgw-zerp-mfg-out li::before { content: ""; position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 3px; background: rgba(22,160,106,0.16); }
.dgw-zerp-mfg-out li::after { content: ""; position: absolute; left: 3px; top: 5px; width: 4px; height: 3px; border-left: 1.5px solid var(--dgw-zerp-green); border-bottom: 1.5px solid var(--dgw-zerp-green); transform: rotate(-45deg); }
.dgw-zerp-mfg-out li b { font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink); }
.dgw-zerp-mfg-out li.is-notify { color: var(--dgw-zerp-brand); font-weight: 600; }
.dgw-zerp-mfg-out li.is-notify::before { background: rgba(27,61,245,0.12); } .dgw-zerp-mfg-out li.is-notify::after { border-color: var(--dgw-zerp-brand); }

/* ---- plan-to-produce chain ---- */
.dgw-zerp-mfg-chain { margin-top: 30px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.dgw-zerp-mfg-chain-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-brand); white-space: nowrap; }
.dgw-zerp-mfg-chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dgw-zerp-mfg-chip { font-size: 12px; font-weight: 600; color: var(--dgw-zerp-ink-soft); background: #fff; border: 1px solid var(--dgw-zerp-line); padding: 6px 11px; border-radius: 100px; white-space: nowrap; box-shadow: 0 1px 2px rgba(14,22,51,0.04); }
.dgw-zerp-mfg-chip.is-hot { color: #fff; background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); box-shadow: 0 8px 18px -8px rgba(27,61,245,0.7); }
.dgw-zerp-mfg-chain-row i { width: 6px; height: 6px; border-right: 1.5px solid var(--dgw-zerp-muted-2); border-bottom: 1.5px solid var(--dgw-zerp-muted-2); transform: rotate(-45deg); margin: 0 2px; flex: none; }
.dgw-zerp-mfg .dgw-zerp-deep-config { margin-top: 22px; }

/* responsive */
@media (max-width: 1100px) {
  .dgw-zerp-mfg-body { grid-template-columns: 1fr; }
  .dgw-zerp-mfg-linewrap { order: -1; }
  .dgw-zerp-mfg-bom, .dgw-zerp-mfg-cost { display: block; }
  .dgw-zerp-mfg-body::after { content: none; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .dgw-zerp-mfg-body { grid-template-columns: 1fr 1fr; }
  .dgw-zerp-mfg-linewrap { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .dgw-zerp-mfg-mo-prog { margin-left: 0; min-width: 0; width: 100%; }
}
@media (max-width: 700px) {
  .dgw-zerp-mfg-console { padding: 14px; border-radius: 16px; }
  .dgw-zerp-mfg-line { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dgw-zerp-mfg-stations, .dgw-zerp-mfg-belt { min-width: 620px; }
  .dgw-zerp-mfg-jobs { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-mfg-chain { grid-template-columns: 1fr; gap: 8px; }
  .dgw-zerp-mfg-mo-steps { order: 5; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-mfg-st, .dgw-zerp-mfg-cut-head, .dgw-zerp-mfg-cut-head::after, .dgw-zerp-mfg-weld-torch, .dgw-zerp-mfg-weld-arc, .dgw-zerp-mfg-asm-arm, .dgw-zerp-mfg-asm-fore, .dgw-zerp-mfg-qc-beam, .dgw-zerp-mfg-qc-tick, .dgw-zerp-mfg-pack-lid, .dgw-zerp-mfg-pack-label, .dgw-zerp-mfg-belt-track, .dgw-zerp-mfg-unit, .dgw-zerp-mfg-tree li::after, .dgw-zerp-mfg-live, .dgw-zerp-mfg-st-run, .dgw-zerp-mfg-costrow i b { animation: none !important; }
  .dgw-zerp-mfg-qc-tick, .dgw-zerp-mfg-pack-label { opacity: 1; }
  .dgw-zerp-mfg-unit { left: 50%; }
}


/* =============================================================
   MODULE 04 · PAYROLL & PEOPLE — split: text left · live payslip right
   ============================================================= */
.dgw-zerp-pay { background: linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%); }
.dgw-zerp-pay-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 50% at 82% 50%, rgba(27,61,245,0.10), transparent 70%), radial-gradient(ellipse 30% 40% at 95% 90%, rgba(255,122,69,0.08), transparent 70%); }
.dgw-zerp-pay > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-pay-split { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; align-items: center; }
.dgw-zerp-pay-text .dgw-zerp-h2 { max-width: 560px; }
.dgw-zerp-pay-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.dgw-zerp-pay-points li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.6; color: var(--dgw-zerp-muted); }
.dgw-zerp-pay-points li b { color: var(--dgw-zerp-ink); font-weight: 700; }
.dgw-zerp-pay-points li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 4px; background: rgba(22,160,106,0.14); }
.dgw-zerp-pay-points li::after { content: ""; position: absolute; left: 4px; top: 9px; width: 5px; height: 3px; border-left: 2px solid var(--dgw-zerp-green); border-bottom: 2px solid var(--dgw-zerp-green); transform: rotate(-45deg); }
.dgw-zerp-pay-config { margin: 24px 0 0; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--dgw-zerp-line); border-left: 3px solid var(--dgw-zerp-accent); box-shadow: var(--dgw-zerp-card-shadow); font-size: 13px; line-height: 1.55; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-pay-config span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-accent); margin-bottom: 4px; }

.dgw-zerp-pay-visual { position: relative; }
.dgw-zerp-pay-console { position: relative; }
.dgw-zerp-pay-slip { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 2px 4px rgba(14,22,51,0.05), 0 40px 80px -30px rgba(27,61,245,0.40), 0 0 0 1px var(--dgw-zerp-line), 0 0 0 8px rgba(255,255,255,0.7); overflow: hidden; transform: rotate(-1.2deg); }
.dgw-zerp-pay-slip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); z-index: 1; }
.dgw-zerp-pay-slip-h { padding: 22px 24px 16px; background: var(--dgw-zerp-ink); color: #fff; display: grid; gap: 3px; }
.dgw-zerp-pay-slip-co { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9db4ff; }
.dgw-zerp-pay-slip-emp { font-size: 12.5px; color: rgba(255,255,255,0.72); }
.dgw-zerp-pay-slip-emp b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -0.01em; margin-right: 2px; }
.dgw-zerp-pay-slip-ids { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: rgba(255,255,255,0.42); letter-spacing: 0.04em; }
.dgw-zerp-pay-slip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 16px 24px 6px; }
.dgw-zerp-pay-slip-k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); padding-bottom: 7px; border-bottom: 1px solid var(--dgw-zerp-line); margin-bottom: 4px; }
.dgw-zerp-pay-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--dgw-zerp-line-soft); font-size: 12.5px; color: var(--dgw-zerp-ink-soft); opacity: 0; transform: translateX(-8px); }
.dgw-zerp-pay-row em { font-style: normal; font-size: 10px; color: var(--dgw-zerp-muted-2); margin-left: 4px; }
.dgw-zerp-pay-row b { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-pay-row.is-sum { border-bottom: 0; border-top: 1px solid var(--dgw-zerp-line); margin-top: 2px; font-weight: 700; color: var(--dgw-zerp-ink); }
.dgw-zerp-pay-console.is-run .dgw-zerp-pay-row { animation: dgw-zerp-pay-in .45s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(0.5s + var(--n) * 0.5s); }
@keyframes dgw-zerp-pay-in { to { opacity: 1; transform: none } }
.dgw-zerp-pay-net { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; margin: 10px 24px 0; padding: 14px 16px; border-radius: 12px; background: linear-gradient(90deg, rgba(27,61,245,0.08), rgba(255,122,69,0.08)); opacity: 0; transform: translateY(6px); }
.dgw-zerp-pay-console.is-run .dgw-zerp-pay-net { animation: dgw-zerp-pay-in .5s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(0.5s + var(--n) * 0.5s); }
.dgw-zerp-pay-net > span { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-brand); }
.dgw-zerp-pay-net > b { grid-row: 1 / span 2; justify-self: end; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.03em; color: var(--dgw-zerp-ink); }
.dgw-zerp-pay-net > em { font-style: normal; font-size: 10.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-pay-stamp { position: absolute; right: 30px; bottom: 62px; padding: 7px 14px; border: 3px double #16a06a; border-radius: 8px; color: #16a06a; text-align: center; transform: rotate(-12deg) scale(0); opacity: 0; line-height: 1; z-index: 2; }
.dgw-zerp-pay-stamp span { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 0.16em; text-transform: uppercase; }
.dgw-zerp-pay-stamp small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.08em; margin-top: 2px; }
.dgw-zerp-pay-console.is-run .dgw-zerp-pay-stamp { animation: dgw-zerp-pay-stamp .55s cubic-bezier(.2,1.5,.4,1) 8.6s forwards; }
@keyframes dgw-zerp-pay-stamp { from { transform: rotate(-12deg) scale(1.8); opacity: 0 } to { transform: rotate(-12deg) scale(1); opacity: .9 } }
.dgw-zerp-pay-slip-f { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 10px 24px 16px; border-top: 1px solid var(--dgw-zerp-line-soft); font-size: 10.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-pay-console.is-fade .dgw-zerp-pay-row, .dgw-zerp-pay-console.is-fade .dgw-zerp-pay-net, .dgw-zerp-pay-console.is-fade .dgw-zerp-pay-stamp { transition: opacity .45s ease; opacity: 0 !important; }

.dgw-zerp-pay-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 26px; }
.dgw-zerp-pay-caption span { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--dgw-zerp-muted); background: #fff; border: 1px solid var(--dgw-zerp-line); padding: 5px 9px; border-radius: 100px; white-space: nowrap; }
.dgw-zerp-pay-caption span.is-hot { color: #fff; background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); }
.dgw-zerp-pay-caption i { width: 5px; height: 5px; border-right: 1.5px solid var(--dgw-zerp-muted-2); border-bottom: 1.5px solid var(--dgw-zerp-muted-2); transform: rotate(-45deg); }

@media (max-width: 1100px) { .dgw-zerp-pay-split { grid-template-columns: minmax(0,1fr) 440px; gap: 40px; } }
@media (max-width: 880px) { .dgw-zerp-pay-split { grid-template-columns: 1fr; gap: 40px; } .dgw-zerp-pay-visual { max-width: 520px; } }
@media (max-width: 700px) {
  .dgw-zerp-pay-slip { transform: none; }
  .dgw-zerp-pay-slip-cols { grid-template-columns: 1fr; padding: 12px 16px 4px; }
  .dgw-zerp-pay-slip-h { padding: 18px 16px 14px; }
  .dgw-zerp-pay-net { margin: 8px 16px 0; }
  .dgw-zerp-pay-slip-f { padding: 10px 16px 14px; }
  .dgw-zerp-pay-stamp { right: 16px; bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-pay-row, .dgw-zerp-pay-net { opacity: 1 !important; transform: none !important; animation: none !important; }
  .dgw-zerp-pay-stamp { opacity: .9; transform: rotate(-12deg) scale(1); animation: none !important; }
}


/* =============================================================
   MODULE 05 · MRP, PLANNING & PROCUREMENT — the MRP run
   ============================================================= */
/* dark electric-blue band — deliberately different from the navy used elsewhere */
.dgw-zerp-mrp { background: radial-gradient(120% 80% at 0% 0%, #1a3fd1 0%, #0f2694 38%, #0a1a66 70%, #071347 100%); color: #fff; }
.dgw-zerp-mrp-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1.5px), radial-gradient(ellipse 40% 50% at 85% 15%, rgba(120,200,255,0.22), transparent 70%), radial-gradient(ellipse 35% 45% at 10% 95%, rgba(255,122,69,0.22), transparent 70%);
  background-size: 22px 22px, 100% 100%, 100% 100%; }
.dgw-zerp-mrp > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-mrp .dgw-zerp-eyebrow { color: #cfe0ff; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.10); }
.dgw-zerp-mrp .dgw-zerp-h2 { color: #fff; }
.dgw-zerp-mrp .dgw-zerp-h2-grad { background: linear-gradient(120deg, #8fd3ff 0%, #ffb08a 120%); -webkit-background-clip: text; background-clip: text; }
.dgw-zerp-mrp .dgw-zerp-section-sub { color: rgba(255,255,255,0.72); }
.dgw-zerp-mrp .dgw-zerp-deep-index-num { background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.05) 100%); -webkit-background-clip: text; background-clip: text; }
.dgw-zerp-mrp .dgw-zerp-deep-index-lbl { color: #fff; }
.dgw-zerp-mrp-console { border-color: rgba(255,255,255,0.35); box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 50px 100px -40px rgba(0,0,0,0.6), 0 0 0 6px rgba(255,255,255,0.10); }
.dgw-zerp-mrp .dgw-zerp-mrp-chain-lbl { color: #fff; opacity: .9; }
.dgw-zerp-mrp .dgw-zerp-mrp-chip { color: var(--dgw-zerp-ink); background: #fff; border-color: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,0.45); }
.dgw-zerp-mrp .dgw-zerp-mrp-chip.is-hot { color: #fff; background: var(--dgw-zerp-accent); border-color: var(--dgw-zerp-accent); box-shadow: 0 10px 24px -10px rgba(255,122,69,0.9); }
.dgw-zerp-mrp .dgw-zerp-mrp-chain-row i { border-color: rgba(255,255,255,0.7); }

.dgw-zerp-mrp-console { background: #fff; border: 1px solid rgba(27,61,245,0.14); border-radius: 22px; padding: 16px 20px 18px;
  box-shadow: 0 2px 4px rgba(14,22,51,0.04), 0 40px 90px -36px rgba(27,61,245,0.38), 0 0 0 6px rgba(255,255,255,0.6); }

/* run bar */
.dgw-zerp-mrp-bar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-mrp-title { display: inline-flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--dgw-zerp-ink); letter-spacing: -0.01em; }
.dgw-zerp-mrp-live { width: 7px; height: 7px; border-radius: 50%; background: #2dd48f; box-shadow: 0 0 0 3px rgba(45,212,143,0.22); animation: dgw-zerp-pulse 2s ease-in-out infinite; }
.dgw-zerp-mrp-field { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--dgw-zerp-line); }
.dgw-zerp-mrp-field em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-mrp-field b { font-size: 12.5px; font-weight: 600; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-mrp-run { position: relative; margin-left: auto; display: grid; place-items: center; min-width: 170px; height: 38px; border-radius: 10px; background: var(--dgw-zerp-brand); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13px; overflow: hidden; box-shadow: 0 10px 22px -10px rgba(27,61,245,0.8); }
.dgw-zerp-mrp-run-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,0.22); }
.dgw-zerp-mrp-run-txt, .dgw-zerp-mrp-run-done { grid-area: 1 / 1; position: relative; white-space: nowrap; padding: 0 16px; }
.dgw-zerp-mrp-run-done { opacity: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-run-fill { animation: dgw-zerp-mrp-fill 2.4s linear forwards; }
@keyframes dgw-zerp-mrp-fill { to { width: 100% } }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-run-txt { animation: dgw-zerp-mrp-hide .3s ease 2.4s forwards; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-run-done { animation: dgw-zerp-mrp-show .3s ease 2.5s forwards; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-run { animation: dgw-zerp-mrp-runok .4s ease 2.5s forwards; }
@keyframes dgw-zerp-mrp-hide { to { opacity: 0 } }
@keyframes dgw-zerp-mrp-show { to { opacity: 1 } }
@keyframes dgw-zerp-mrp-runok { to { background: #16a06a; box-shadow: 0 10px 22px -10px rgba(22,160,106,0.8) } }

/* pipeline */
.dgw-zerp-mrp-pipe { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: center; gap: 0; padding: 16px 0 14px; }
.dgw-zerp-mrp-step { position: relative; display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); min-width: 0; opacity: .55; transform: translateY(4px); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-step { animation: dgw-zerp-mrp-lit .5s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(0.3s + var(--i) * 0.6s); }
@keyframes dgw-zerp-mrp-lit { to { opacity: 1; transform: none; background: #fff; border-color: rgba(27,61,245,0.28); box-shadow: 0 14px 30px -16px rgba(27,61,245,0.45) } }
.dgw-zerp-mrp-step.is-out { background: rgba(255,122,69,0.06); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-step.is-out { animation-name: dgw-zerp-mrp-lit-out; }
@keyframes dgw-zerp-mrp-lit-out { to { opacity: 1; transform: none; background: #fff; border-color: rgba(255,122,69,0.5); box-shadow: 0 14px 30px -16px rgba(255,122,69,0.5) } }
.dgw-zerp-mrp-step-n { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; color: var(--dgw-zerp-accent); }
.dgw-zerp-mrp-step-k { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13px; color: var(--dgw-zerp-ink); }
.dgw-zerp-mrp-step-v { font-size: 12px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mrp-step-v b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--dgw-zerp-ink); margin-right: 2px; }
.dgw-zerp-mrp-step.is-out .dgw-zerp-mrp-step-v b { color: var(--dgw-zerp-accent); }
.dgw-zerp-mrp-step-s { font-size: 10.5px; color: var(--dgw-zerp-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zerp-mrp-step-s b { font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink-soft); }
.dgw-zerp-mrp-link { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgba(27,61,245,0.55) 0 5px, transparent 5px 10px); animation: dgw-zerp-inv-dash 1s linear infinite; }
.dgw-zerp-mrp-link::after { content: ""; position: absolute; right: -1px; top: 50%; width: 0; height: 0; border-left: 6px solid rgba(27,61,245,0.7); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: translateY(-50%); }

/* table */
.dgw-zerp-mrp-tblwrap { border: 1px solid var(--dgw-zerp-line); border-radius: 14px; overflow: hidden; }
.dgw-zerp-mrp-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.dgw-zerp-mrp-tbl th { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); padding: 10px 12px; background: var(--dgw-zerp-bg-tint); border-bottom: 1px solid var(--dgw-zerp-line); white-space: nowrap; }
.dgw-zerp-mrp-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--dgw-zerp-line-soft); color: var(--dgw-zerp-ink-soft); vertical-align: middle; }
.dgw-zerp-mrp-tbl tbody tr:last-child td { border-bottom: 0; }
.dgw-zerp-mrp-tbl tbody tr { opacity: 0; transform: translateX(-8px); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-tbl tbody tr { animation: dgw-zerp-pay-in .4s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(2.5s + var(--r) * 0.13s); }
.dgw-zerp-mrp-tbl td:nth-child(n+2):nth-child(-n+5), .dgw-zerp-mrp-tbl th:nth-child(n+2):nth-child(-n+5) { text-align: right; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.dgw-zerp-mrp-tbl td:first-child b { display: block; font-weight: 600; color: var(--dgw-zerp-ink); white-space: nowrap; }
.dgw-zerp-mrp-tbl td:first-child span { display: block; font-size: 10.5px; color: var(--dgw-zerp-muted-2); }
.dgw-zerp-mrp-tbl td.is-short { color: var(--dgw-zerp-accent); font-weight: 700; }
.dgw-zerp-mrp-tbl td.is-ok { color: var(--dgw-zerp-green); font-weight: 700; font-family: 'Inter', sans-serif; font-size: 11px; }
.dgw-zerp-mrp-tbl td:nth-child(6) { white-space: nowrap; color: var(--dgw-zerp-ink); font-weight: 500; }
.dgw-zerp-mrp-tbl td:nth-child(6) em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); margin-left: 4px; }
.dgw-zerp-mrp-tbl td:nth-child(7) { font-family: 'JetBrains Mono', monospace; white-space: nowrap; color: var(--dgw-zerp-muted); }
.dgw-zerp-mrp-act { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; margin-right: 8px; border-radius: 5px; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: var(--dgw-zerp-brand); vertical-align: middle; }
.dgw-zerp-mrp-act.is-mo { background: var(--dgw-zerp-accent); } .dgw-zerp-mrp-act.is-tr { background: #16a06a; } .dgw-zerp-mrp-act.is-ok { background: #cfd6e6; color: var(--dgw-zerp-ink); }
.dgw-zerp-mrp-more { display: flex; gap: 22px; flex-wrap: wrap; padding: 9px 12px; background: var(--dgw-zerp-bg-tint); border-top: 1px solid var(--dgw-zerp-line); font-size: 11.5px; color: var(--dgw-zerp-muted); }
.dgw-zerp-mrp-more b { font-family: 'JetBrains Mono', monospace; color: var(--dgw-zerp-ink); }
.dgw-zerp-mrp-more b.is-warn { color: var(--dgw-zerp-accent); }

/* rules + actions */
.dgw-zerp-mrp-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 14px; }
.dgw-zerp-mrp-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dgw-zerp-mrp-rules-k { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-muted-2); margin-bottom: 2px; }
.dgw-zerp-mrp-rule { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--dgw-zerp-muted); background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); padding: 5px 10px 5px 7px; border-radius: 100px; white-space: nowrap; }
.dgw-zerp-mrp-rule i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--dgw-zerp-line); position: relative; background: #fff; }
.dgw-zerp-mrp-rule i::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 6px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); opacity: 0; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule { animation: dgw-zerp-mrp-rule .35s ease forwards; animation-delay: calc(3.5s + var(--i) * 0.1s); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule i { animation: dgw-zerp-mrp-rulei .35s ease forwards; animation-delay: calc(3.5s + var(--i) * 0.1s); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule i::after { animation: dgw-zerp-mrp-show .2s ease forwards; animation-delay: calc(3.65s + var(--i) * 0.1s); }
@keyframes dgw-zerp-mrp-rule { to { color: var(--dgw-zerp-ink); background: #fff; border-color: rgba(22,160,106,0.35) } }
@keyframes dgw-zerp-mrp-rulei { to { border-color: #16a06a; background: #16a06a } }
.dgw-zerp-mrp-rule.is-custom { border-style: dashed; }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule.is-custom { animation-name: dgw-zerp-mrp-rule-c; }
@keyframes dgw-zerp-mrp-rule-c { to { color: #fff; background: var(--dgw-zerp-accent); border-color: var(--dgw-zerp-accent); border-style: solid } }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-rule.is-custom i { animation-name: dgw-zerp-mrp-rulei-c; }
@keyframes dgw-zerp-mrp-rulei-c { to { border-color: #fff; background: #fff } }
.dgw-zerp-mrp-rule.is-custom i::after { border-color: var(--dgw-zerp-accent); }
.dgw-zerp-mrp-actions { display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(6px); }
.dgw-zerp-mrp-console.is-run .dgw-zerp-mrp-actions { animation: dgw-zerp-pay-in .5s cubic-bezier(.2,.7,.2,1) 4.3s forwards; }
.dgw-zerp-mrp-btn { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 9px; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.07); border: 1px solid rgba(27,61,245,0.18); white-space: nowrap; text-align: center; }
.dgw-zerp-mrp-btn.is-primary { color: #fff; background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); box-shadow: 0 10px 22px -10px rgba(27,61,245,0.8); }

/* chain */
.dgw-zerp-mrp-chain { margin-top: 30px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.dgw-zerp-mrp-chain-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-brand); white-space: nowrap; }
.dgw-zerp-mrp-chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dgw-zerp-mrp-chip { font-size: 12px; font-weight: 600; color: var(--dgw-zerp-ink-soft); background: #fff; border: 1px solid var(--dgw-zerp-line); padding: 6px 11px; border-radius: 100px; white-space: nowrap; box-shadow: 0 1px 2px rgba(14,22,51,0.04); }
.dgw-zerp-mrp-chip.is-hot { color: #fff; background: var(--dgw-zerp-brand); border-color: var(--dgw-zerp-brand); box-shadow: 0 8px 18px -8px rgba(27,61,245,0.7); }
.dgw-zerp-mrp-chain-row i { width: 6px; height: 6px; border-right: 1.5px solid var(--dgw-zerp-muted-2); border-bottom: 1.5px solid var(--dgw-zerp-muted-2); transform: rotate(-45deg); margin: 0 2px; flex: none; }
.dgw-zerp-mrp .dgw-zerp-deep-config { margin-top: 22px; }

/* responsive */
@media (max-width: 1024px) {
  .dgw-zerp-mrp-pipe { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dgw-zerp-mrp-link { display: none; }
  .dgw-zerp-mrp-foot { grid-template-columns: 1fr; }
  .dgw-zerp-mrp-actions { flex-direction: row; flex-wrap: wrap; }
  .dgw-zerp-mrp-tblwrap { overflow-x: auto; }
  .dgw-zerp-mrp-tbl { min-width: 760px; }
  .dgw-zerp-mrp-run { margin-left: 0; }
}
@media (max-width: 700px) {
  .dgw-zerp-mrp-console { padding: 14px; border-radius: 16px; }
  .dgw-zerp-mrp-field { border-left: 0; padding-left: 0; }
  .dgw-zerp-mrp-pipe { grid-template-columns: 1fr; }
  .dgw-zerp-mrp-chain { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-mrp-step, .dgw-zerp-mrp-tbl tbody tr, .dgw-zerp-mrp-actions { opacity: 1 !important; transform: none !important; animation: none !important; }
  .dgw-zerp-mrp-run-fill, .dgw-zerp-mrp-run-txt, .dgw-zerp-mrp-run-done, .dgw-zerp-mrp-run, .dgw-zerp-mrp-rule, .dgw-zerp-mrp-rule i, .dgw-zerp-mrp-rule i::after, .dgw-zerp-mrp-link, .dgw-zerp-mrp-live { animation: none !important; }
  .dgw-zerp-mrp-run-done { opacity: 1 } .dgw-zerp-mrp-run-txt { opacity: 0 }
  .dgw-zerp-mrp-rule i { border-color: #16a06a; background: #16a06a } .dgw-zerp-mrp-rule i::after { opacity: 1 }
}



/* =============================================================
   MODULE 06 · CUSTOMISATION — informational grid
   ============================================================= */
.dgw-zerp-cus { background: linear-gradient(180deg, #fff 0%, #f3f6ff 100%); }
.dgw-zerp-cus-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 40% at 15% 20%, rgba(27,61,245,0.08), transparent 70%), radial-gradient(ellipse 35% 40% at 90% 80%, rgba(255,122,69,0.07), transparent 70%); }
.dgw-zerp-cus > .dgw-zerp-container { position: relative; z-index: 1; }
.dgw-zerp-cus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dgw-zerp-cus-card { position: relative; background: #fff; border: 1px solid var(--dgw-zerp-line); border-radius: 18px; padding: 22px 22px 20px; box-shadow: var(--dgw-zerp-card-shadow); transition: transform .3s, box-shadow .3s, border-color .3s; overflow: hidden; }
.dgw-zerp-cus-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent)); opacity: 0; transition: opacity .3s; }
.dgw-zerp-cus-card:hover { transform: translateY(-4px); box-shadow: var(--dgw-zerp-card-shadow-h); border-color: rgba(27,61,245,0.2); }
.dgw-zerp-cus-card:hover::before { opacity: 1; }
.dgw-zerp-cus-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--dgw-zerp-brand); background: rgba(27,61,245,0.08); margin-bottom: 14px; transition: background .3s, color .3s; }
.dgw-zerp-cus-card:hover .dgw-zerp-cus-ico { color: #fff; background: linear-gradient(135deg, var(--dgw-zerp-brand), var(--dgw-zerp-brand-soft)); }
.dgw-zerp-cus-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--dgw-zerp-ink); margin: 0 0 8px; }
.dgw-zerp-cus-card p { font-size: 13.5px; line-height: 1.6; color: var(--dgw-zerp-muted); margin: 0 0 14px; }
.dgw-zerp-cus-eg { display: block; padding-top: 12px; border-top: 1px solid var(--dgw-zerp-line-soft); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 1.5; color: var(--dgw-zerp-accent); }
.dgw-zerp-cus-note { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft); }
.dgw-zerp-cus-note-k { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dgw-zerp-brand); white-space: nowrap; }
.dgw-zerp-cus-note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dgw-zerp-ink-soft); }
@media (max-width: 1024px) { .dgw-zerp-cus-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .dgw-zerp-cus-grid { grid-template-columns: 1fr; } .dgw-zerp-cus-note { grid-template-columns: 1fr; gap: 8px; } }




















/* -------------------------------------------------------------
   3. THE PAIN — dark "chaos wall": pains rendered as the real
   artifacts they live in (Excel, WhatsApp, sticky note, memo).
   ------------------------------------------------------------- */
.dgw-zerp-pain {
  position: relative; padding: 110px 0; scroll-margin-top: 76px; overflow: hidden;
  background:
    radial-gradient(900px 380px at 14% -12%, rgba(27,61,245,0.18) 0%, transparent 60%),
    radial-gradient(760px 440px at 92% 116%, rgba(255,86,61,0.16) 0%, transparent 55%),
    linear-gradient(165deg, #0a0f22 0%, #0e1633 55%, #121a3c 100%);
}
.dgw-zerp-pain::before { /* faint dotted texture = background clutter */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.dgw-zerp-pain > .dgw-zerp-container { position: relative; z-index: 1; }

/* section head recoloured for the dark band */
.dgw-zerp-pain .dgw-zerp-eyebrow { color: #ffd7c4; border-color: rgba(255,122,69,0.30); background: rgba(255,122,69,0.10); }
.dgw-zerp-pain .dgw-zerp-h2 { color: #fff; }
.dgw-zerp-pain .dgw-zerp-section-sub { color: rgba(255,255,255,0.62); }

/* the scattered wall */
.dgw-zerp-chaos-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; margin-top: 46px; }
.dgw-zerp-chaos {
  position: relative; padding: 15px 17px 20px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 44px -18px rgba(0,0,0,0.6);
  transform: rotate(var(--rot)) translateY(var(--dy));
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.dgw-zerp-chaos::after { /* red 'problem' tab at the top */
  content: ''; position: absolute; top: 0; left: 17px; right: 17px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--dgw-zerp-red), #ff8a5c);
}
.dgw-zerp-chaos:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 32px 64px -20px rgba(0,0,0,0.65); z-index: 5; }
.dgw-zerp-chaos-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--dgw-zerp-ink); margin: 15px 0 7px; }
.dgw-zerp-chaos-body { font-size: 13.5px; line-height: 1.55; color: var(--dgw-zerp-muted); margin: 0; }

/* shared art shell */
.dgw-zerp-chaos-art {
  border-radius: 10px; min-height: 108px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  border: 1px solid var(--dgw-zerp-line-soft);
}

/* Excel artifact */
.dgw-zerp-art-excel { background: #f4f8f4; }
.dgw-zerp-xl-bar { display: flex; align-items: center; gap: 7px; background: #107C41; color: #fff; font-size: 10.5px; font-weight: 600; padding: 7px 10px; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.dgw-zerp-xl-dot { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,0.75); flex-shrink: 0; }
.dgw-zerp-xl-grid { display: grid; grid-template-columns: repeat(3, 1fr); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.dgw-zerp-xl-grid > span { padding: 6px 9px; border-right: 1px solid #dde7dd; border-bottom: 1px solid #dde7dd; color: var(--dgw-zerp-ink-soft); background: #fff; }
.dgw-zerp-xl-grid > span:nth-child(-n+3) { background: #e7f0e7; font-weight: 700; color: #2c6b43; }
.dgw-zerp-xl-warn { color: var(--dgw-zerp-red) !important; background: rgba(224,83,61,0.08) !important; font-weight: 700; }

/* Browser-tabs artifact (GST) */
.dgw-zerp-art-tabs { background: #eef1f8; padding: 12px 12px 14px; justify-content: center; gap: 0; }
.dgw-zerp-tabs-row { display: flex; gap: 5px; }
.dgw-zerp-tab { font-size: 10px; font-weight: 600; padding: 6px 9px; border-radius: 7px 7px 0 0; background: #d8ddec; color: var(--dgw-zerp-muted); white-space: nowrap; }
.dgw-zerp-tab.is-on { background: #fff; color: var(--dgw-zerp-brand); box-shadow: inset 0 -2px 0 var(--dgw-zerp-brand); }
.dgw-zerp-tabs-alert { margin-top: 9px; font-size: 11px; font-weight: 600; color: var(--dgw-zerp-red); background: rgba(224,83,61,0.10); border: 1px solid rgba(224,83,61,0.22); border-radius: 8px; padding: 8px 10px; }

/* Sticky-note artifact (stock) */
.dgw-zerp-art-note { background: linear-gradient(180deg, #fff6b8, #ffec84); border-color: rgba(0,0,0,0.06); justify-content: center; padding: 18px 14px 14px; position: relative; }
.dgw-zerp-note-pin { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--dgw-zerp-red); box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.dgw-zerp-note-line { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: #5b4a00; padding: 3px 0; }
.dgw-zerp-note-q { color: #b23a14; font-weight: 700; }

/* WhatsApp artifact (shop floor) */
.dgw-zerp-art-wa { background: #e7ded5; }
.dgw-zerp-wa-head { display: flex; align-items: center; gap: 7px; background: #075E54; color: #fff; font-size: 11px; font-weight: 600; padding: 8px 10px; }
.dgw-zerp-wa-ava { width: 16px; height: 16px; border-radius: 50%; background: #25D366; flex-shrink: 0; }
.dgw-zerp-wa-bub { align-self: flex-start; max-width: 84%; background: #fff; font-size: 11.5px; color: var(--dgw-zerp-ink-soft); padding: 7px 10px; border-radius: 3px 10px 10px 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.12); margin: 8px 0 0 10px; }
.dgw-zerp-wa-me { align-self: flex-end; background: #dcf8c6; border-radius: 10px 3px 10px 10px; margin: 7px 10px 11px 0; }

/* Memo artifact (cash position) */
.dgw-zerp-art-memo { background: #fbfaf6; justify-content: center; gap: 8px; padding: 16px 15px; }
.dgw-zerp-memo-q { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--dgw-zerp-ink); }
.dgw-zerp-memo-a { font-size: 11.5px; color: var(--dgw-zerp-muted-2); border-bottom: 1px dashed var(--dgw-zerp-line); padding-bottom: 9px; }
.dgw-zerp-memo-clock { align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--dgw-zerp-red); background: rgba(224,83,61,0.10); border: 1px solid rgba(224,83,61,0.22); border-radius: 8px; padding: 5px 9px; }

/* -------------------------------------------------------------
   3. MODULES (light tint · what we implement)
   ------------------------------------------------------------- */
.dgw-zerp-modules { padding: 110px 0; background: #fff; scroll-margin-top: 76px; }
.dgw-zerp-modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dgw-zerp-module {
  position: relative; padding: 30px 28px;
  background: #fff; border: 1px solid var(--dgw-zerp-line);
  border-radius: 18px; box-shadow: var(--dgw-zerp-card-shadow);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.dgw-zerp-module::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-accent) 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.dgw-zerp-module:hover { transform: translateY(-4px); box-shadow: var(--dgw-zerp-card-shadow-h); border-color: rgba(27,61,245,0.2); }
.dgw-zerp-module:hover::before { opacity: 1; }
.dgw-zerp-module-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12.5px; color: var(--dgw-zerp-accent); }
.dgw-zerp-module-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; margin: 12px 0 16px;
  background: linear-gradient(135deg, rgba(27,61,245,0.10) 0%, rgba(27,61,245,0.04) 100%);
  border: 1px solid rgba(27,61,245,0.18); color: var(--dgw-zerp-brand);
}
.dgw-zerp-module-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.018em; color: var(--dgw-zerp-ink); margin: 0 0 10px; }
.dgw-zerp-module-body { font-size: 14px; line-height: 1.6; color: var(--dgw-zerp-muted); margin: 0 0 16px; }
.dgw-zerp-module-extend { font-size: 13px; line-height: 1.55; color: var(--dgw-zerp-ink-soft); margin: 0; padding-top: 14px; border-top: 1px solid var(--dgw-zerp-line-soft); }
.dgw-zerp-module-extend-tag { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-accent); margin-bottom: 5px; }

/* -------------------------------------------------------------
   4. ROLLOUT (light · 8-stage flow)
   ------------------------------------------------------------- */
.dgw-zerp-rollout { padding: 110px 0; background: #fff; scroll-margin-top: 76px; }
.dgw-zerp-rollout .dgw-zerp-section-head { margin-bottom: 0; }

/* Live head — green badge + lead */
.dgw-zerp-flow-livehead { text-align: center; max-width: 760px; margin: 28px auto 0; }
.dgw-zerp-flow-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px;
  background: rgba(22,160,106,0.10); color: #0f7a4f;
  border: 1px solid rgba(22,160,106,0.26);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
}
.dgw-zerp-flow-badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dgw-zerp-green); box-shadow: 0 0 0 4px rgba(22,160,106,0.18);
  animation: dgw-zerp-flowpulse 2s ease infinite;
}
@keyframes dgw-zerp-flowpulse { 0%,100% { box-shadow: 0 0 0 4px rgba(22,160,106,0.18); } 50% { box-shadow: 0 0 0 7px rgba(22,160,106,0.04); } }
.dgw-zerp-flow-lead { margin: 16px auto 0; font-size: 14.5px; line-height: 1.62; color: var(--dgw-zerp-muted); }

/* 8-step horizontal flow */
.dgw-zerp-flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 48px; position: relative; }
.dgw-zerp-flow-step {
  position: relative; padding: 20px 12px 16px;
  border: 1.5px solid var(--dgw-zerp-line); border-radius: 14px; background: #fff; text-align: center;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.dgw-zerp-flow-step:hover { transform: translateY(-4px); border-color: rgba(27,61,245,0.28); box-shadow: var(--dgw-zerp-card-shadow-h); }
.dgw-zerp-flow-step:not(:last-child)::after {
  content: '\2192'; position: absolute; top: 38px; right: -9px; transform: translateY(-50%);
  color: var(--dgw-zerp-brand); font-size: 16px; font-weight: 700; z-index: 1;
}
.dgw-zerp-flow-icon {
  width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: linear-gradient(135deg, var(--dgw-zerp-bg-blue), #fff); border: 1px solid var(--dgw-zerp-line);
}
.dgw-zerp-flow-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--dgw-zerp-ink); margin: 0 0 4px; }
.dgw-zerp-flow-body { font-size: 11.5px; line-height: 1.45; color: var(--dgw-zerp-muted); margin: 0 0 10px; }
.dgw-zerp-flow-mod {
  display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(27,61,245,0.08); color: var(--dgw-zerp-brand); border: 1px solid rgba(27,61,245,0.18);
}
.dgw-zerp-flow-mod-creator { background: rgba(255,122,69,0.10); color: #d9551f; border-color: rgba(255,122,69,0.24); }

/* Legend */
.dgw-zerp-flow-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 30px; font-size: 13px; color: var(--dgw-zerp-muted); }
.dgw-zerp-flow-legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 7px; }
.dgw-zerp-flow-sw-zoho { background: rgba(27,61,245,0.16); border: 1px solid rgba(27,61,245,0.3); }
.dgw-zerp-flow-sw-creator { background: rgba(255,122,69,0.18); border: 1px solid rgba(255,122,69,0.34); }

/* Result box */
.dgw-zerp-flow-result {
  margin-top: 48px; padding: 28px 32px;
  background: var(--dgw-zerp-bg-blue); border-radius: 18px; border-left: 4px solid var(--dgw-zerp-accent);
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
}
.dgw-zerp-flow-result-icon { font-size: 34px; line-height: 1; }
.dgw-zerp-flow-result-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--dgw-zerp-ink); margin: 0 0 5px; }
.dgw-zerp-flow-result-body { font-size: 14px; line-height: 1.58; color: var(--dgw-zerp-ink-soft); margin: 0; }
.dgw-zerp-flow-result-body strong { color: var(--dgw-zerp-ink); font-weight: 700; }
.dgw-zerp-flow-result-cta { white-space: nowrap; }

/* -------------------------------------------------------------
   5. WHY DIGIWAH — split layout: sticky intro + differentiator list
   ------------------------------------------------------------- */
.dgw-zerp-why { position: relative; padding: 110px 0; background: linear-gradient(180deg, #fff 0%, var(--dgw-zerp-bg-blue) 100%); overflow: hidden; }
.dgw-zerp-why-glow {
  position: absolute; top: 12%; left: -8%; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,61,245,0.10) 0%, transparent 65%); filter: blur(40px); pointer-events: none;
}
.dgw-zerp-why-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; }

/* left intro (sticky on desktop) */
.dgw-zerp-why-intro { position: sticky; top: 96px; }
.dgw-zerp-why-intro .dgw-zerp-h2 { margin-top: 6px; }
.dgw-zerp-why-sub { font-size: 15px; line-height: 1.68; color: var(--dgw-zerp-muted); margin: 18px 0 0; max-width: 42ch; }
.dgw-zerp-why-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--dgw-zerp-brand);
  padding: 8px 14px; border-radius: 100px;
  background: rgba(27,61,245,0.06); border: 1px solid rgba(27,61,245,0.16);
}

/* right differentiator list */
.dgw-zerp-why-list { display: flex; flex-direction: column; gap: 14px; }
.dgw-zerp-why-item {
  position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 18px;
  padding: 24px 26px; background: rgba(255,255,255,0.7); backdrop-filter: blur(6px);
  border: 1px solid var(--dgw-zerp-line); border-radius: 16px;
  box-shadow: var(--dgw-zerp-card-shadow);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  overflow: hidden;
}
.dgw-zerp-why-item::before { /* accent edge that grows on hover */
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--dgw-zerp-brand), var(--dgw-zerp-accent));
  transform: scaleY(0); transform-origin: top; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.dgw-zerp-why-item:hover { transform: translateX(4px); background: #fff; border-color: rgba(27,61,245,0.22); box-shadow: var(--dgw-zerp-card-shadow-h); }
.dgw-zerp-why-item:hover::before { transform: scaleY(1); }
.dgw-zerp-why-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px;
  color: var(--dgw-zerp-accent); padding-top: 13px; min-width: 22px;
}
.dgw-zerp-why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(27,61,245,0.10) 0%, rgba(27,61,245,0.04) 100%);
  border: 1px solid rgba(27,61,245,0.18); color: var(--dgw-zerp-brand);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.dgw-zerp-why-item:hover .dgw-zerp-why-icon {
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, #3b56ff 100%);
  color: #fff; border-color: transparent;
}
.dgw-zerp-why-item-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.018em; color: var(--dgw-zerp-ink); margin: 2px 0 7px; }
.dgw-zerp-why-item-body { font-size: 14px; line-height: 1.62; color: var(--dgw-zerp-muted); margin: 0; }

/* -------------------------------------------------------------
   6. INDUSTRIES (light)
   ------------------------------------------------------------- */
.dgw-zerp-industries { padding: 110px 0; background: #fff; }
.dgw-zerp-ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.dgw-zerp-ind-card {
  background: #fff; border: 1px solid var(--dgw-zerp-line);
  border-radius: 20px; overflow: hidden; box-shadow: var(--dgw-zerp-card-shadow);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.dgw-zerp-ind-card:hover { transform: translateY(-5px); box-shadow: var(--dgw-zerp-card-shadow-h); }

/* --- canvas: gridded backdrop with floating photo + mono chips --- */
.dgw-zerp-ind-canvas {
  position: relative; height: 300px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--dgw-zerp-bg-tint);
  background-image:
    linear-gradient(rgba(14,22,51,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,22,51,0.055) 1px, transparent 1px);
  background-size: 40px 40px;
  border-bottom: 1px solid var(--dgw-zerp-line-soft);
  overflow: hidden;
}
.dgw-zerp-ind-canvas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(243,246,255,0.85) 100%);
}
.dgw-zerp-ind-photo {
  position: relative; z-index: 2;
  width: 44%; max-width: 240px; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 10px; box-shadow: 0 22px 48px -18px rgba(14,22,51,0.42);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.dgw-zerp-ind-card:hover .dgw-zerp-ind-photo { transform: scale(1.035); }

.dgw-zerp-ind-chip {
  position: absolute; z-index: 3; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--dgw-zerp-muted);
  background: rgba(255,255,255,0.94); border: 1px solid var(--dgw-zerp-line);
  border-radius: 7px; padding: 6px 11px;
  box-shadow: 0 6px 18px -8px rgba(14,22,51,0.22);
  backdrop-filter: blur(4px);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.dgw-zerp-ind-chip-a { top: 20%; left: 7%; }
.dgw-zerp-ind-chip-b { bottom: 17%; left: 4%; }
.dgw-zerp-ind-chip-c { top: 45%; right: 6%; }
.dgw-zerp-ind-card:hover .dgw-zerp-ind-chip-a { transform: translate(-3px,-3px); }
.dgw-zerp-ind-card:hover .dgw-zerp-ind-chip-b { transform: translate(-3px,3px); }
.dgw-zerp-ind-card:hover .dgw-zerp-ind-chip-c { transform: translate(3px,0); }

.dgw-zerp-ind-text { padding: 26px 30px 32px; }
.dgw-zerp-ind-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--dgw-zerp-ink); margin: 0 0 10px; }
.dgw-zerp-ind-body { font-size: 14.5px; line-height: 1.62; color: var(--dgw-zerp-muted); margin: 0; }

/* === 6B. HOW WE WORK (light · vertical timeline) === */
.dgw-zerp-how { padding: 110px 0; background: linear-gradient(180deg, #fff 0%, var(--dgw-zerp-bg-tint) 100%); }
.dgw-zerp-how-timeline { max-width: 720px; margin: 0 auto; }
.dgw-zerp-how-step { display: grid; grid-template-columns: 56px 1fr; gap: 26px; padding-bottom: 34px; }
.dgw-zerp-how-step:last-child { padding-bottom: 0; }
.dgw-zerp-how-node { position: relative; display: flex; justify-content: center; }
/* connecting gradient line between nodes */
.dgw-zerp-how-step:not(:last-child) .dgw-zerp-how-node::after {
  content: ''; position: absolute; top: 60px; bottom: -22px; left: 50%; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(27,61,245,0.45) 0%, rgba(27,61,245,0.08) 100%);
}
.dgw-zerp-how-num {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--dgw-zerp-brand) 0%, var(--dgw-zerp-brand-deep) 100%);
  box-shadow: 0 14px 30px -12px rgba(27,61,245,0.55);
}
.dgw-zerp-how-body { padding-top: 2px; }
.dgw-zerp-how-phase {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dgw-zerp-brand);
}
.dgw-zerp-how-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--dgw-zerp-ink); margin: 9px 0 9px; }
.dgw-zerp-how-text { font-size: 14.5px; line-height: 1.65; color: var(--dgw-zerp-muted); margin: 0 0 14px; }
.dgw-zerp-how-deliver {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 500; color: var(--dgw-zerp-ink-soft);
  background: var(--dgw-zerp-bg-blue); border: 1px solid rgba(27,61,245,0.14);
  border-radius: 100px; padding: 7px 16px 7px 13px;
}
.dgw-zerp-how-deliver svg { color: var(--dgw-zerp-brand); flex-shrink: 0; }

/* === 7. INFRASTRUCTURE / GLOBAL SCALE (dark band + rotating wireframe globe) === */
.dgw-zerp-infra {
  position: relative; overflow: hidden; padding: 130px 0 120px; min-height: 780px;
  background:
    radial-gradient(900px 520px at 88% 38%, rgba(27,61,245,0.28) 0%, transparent 60%),
    linear-gradient(160deg, #070b1c 0%, #0c1430 52%, #0a1130 100%);
  background-color: #0a0f24;
}
/* angled lighter wedge — adds the bold "panel" feel */
.dgw-zerp-infra-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 0%, transparent 46%, rgba(27,61,245,0.10) 46.3%, transparent 70%);
}
.dgw-zerp-infra-inner { position: relative; z-index: 2; }
.dgw-zerp-infra-head { max-width: 560px; margin: 0 0 64px; }
.dgw-zerp-infra .dgw-zerp-eyebrow { color: #c7d2ff; border-color: rgba(111,134,255,0.32); background: rgba(111,134,255,0.10); }
.dgw-zerp-infra .dgw-zerp-h2 { color: #fff; }
.dgw-zerp-infra-sub { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: rgba(255,255,255,0.66); margin: 20px 0 0; max-width: 540px; }

/* cadence cards */
.dgw-zerp-infra-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.dgw-zerp-infra-card {
  padding: 22px 20px 24px; border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, background 0.35s ease;
}
.dgw-zerp-infra-card:hover { transform: translateY(-5px); border-color: rgba(111,134,255,0.5); background: rgba(111,134,255,0.07); }
.dgw-zerp-infra-cadence {
  display: inline-block; margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dgw-zerp-brand-soft);
}
.dgw-zerp-infra-card-body { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0; }

/* --- rotating wireframe globe (pure CSS 3D) --- */
.dgw-zerp-globe {
  position: absolute; top: 50%; right: -120px;
  transform: translateY(-50%) scale(1.42); transform-origin: center;
  width: 520px; height: 520px; z-index: 1; pointer-events: none;
  perspective: 1300px; opacity: 1;
}
.dgw-zerp-globe-core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(38,74,255,0.28) 0%, rgba(12,20,48,0.10) 58%, rgba(10,15,36,0) 72%);
  box-shadow: 0 0 90px 6px rgba(27,61,245,0.20) inset;
}
/* static tilt so latitude rings open into visible curves (the grid that reads as a sphere) */
.dgw-zerp-globe-tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateZ(-8deg);
}
.dgw-zerp-globe-sphere {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: dgw-zerp-globe-spin 36s linear infinite;
}
.dgw-zerp-globe-m {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(140,166,255,0.24);
}
.dgw-zerp-globe-lat {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid rgba(140,166,255,0.22);
}
@keyframes dgw-zerp-globe-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

/* === 7C. INTEGRATIONS / ECOSYSTEM (light · cell grid · animated connectors) === */
.dgw-zerp-eco { position: relative; overflow: hidden; padding: 100px 0 110px; background: #fff; }
.dgw-zerp-eco-h2 {
  text-align: center; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em;
  color: var(--dgw-zerp-ink); max-width: 18ch; margin: 0 auto 14px;
}
.dgw-zerp-eco-sub { text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--dgw-zerp-muted); max-width: 580px; margin: 0 auto 28px; }

/* the board */
.dgw-zerp-eco-board { position: relative; width: 100%; max-width: 1440px; height: 600px; margin: 0 auto; }
.dgw-zerp-eco-gridbg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(14,22,51,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,22,51,0.055) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 78% 76% at 50% 50%, #000 55%, transparent 92%);
  mask-image: radial-gradient(ellipse 78% 76% at 50% 50%, #000 55%, transparent 92%);
}

/* animated connector wires */
.dgw-zerp-eco-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.dgw-zerp-eco-path-bg { stroke: rgba(27,61,245,0.13); stroke-width: 1.5; }
.dgw-zerp-eco-path {
  stroke: var(--dgw-zerp-brand); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 3 11; opacity: 0.9;
  animation: dgw-zerp-eco-flow 1.25s linear infinite;
}
@keyframes dgw-zerp-eco-flow { to { stroke-dashoffset: -42; } }
.dgw-zerp-eco-dot { fill: var(--dgw-zerp-brand); opacity: 0.55; }

/* logo cells + labels */
.dgw-zerp-eco-group { position: absolute; display: flex; align-items: center; gap: 16px; transform: translateY(-50%); }
.dgw-zerp-eco-gl { left: 1%; width: 33%; justify-content: flex-end; }
.dgw-zerp-eco-gr { right: 1%; width: 33%; justify-content: flex-start; }
.dgw-zerp-eco-logos { display: flex; gap: 10px; }
.dgw-zerp-eco-logo {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e0ebf4;
  box-shadow: 0 4px 9px rgba(0,0,0,0.07);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.dgw-zerp-eco-logo img { width: 28px; height: 28px; object-fit: contain; display: block; }
.dgw-zerp-eco-logo:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgba(27,61,245,0.4); }
.dgw-zerp-eco-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(90deg, #4199EA 0%, #21629F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* central hub */
.dgw-zerp-eco-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; }
.dgw-zerp-eco-hub-card {
  position: relative; width: 100px; height: 100px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center; background: #fff;
  border: 1px solid #e0ebf4;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 30px 60px -22px rgba(27,61,245,0.5), 0 8px 22px -12px rgba(14,22,51,0.2);
}
.dgw-zerp-eco-hub-card::before {
  content: ''; position: absolute; inset: -12px; border-radius: 32px; z-index: -1;
  background: radial-gradient(circle, rgba(27,61,245,0.22) 0%, transparent 70%);
  animation: dgw-zerp-pulse 3s ease-in-out infinite;
}
.dgw-zerp-eco-hub-card img { width: 52px; height: 52px; object-fit: contain; }
.dgw-zerp-eco-hub-label {
  position: absolute; left: 50%; top: calc(50% + 64px); transform: translateX(-50%); z-index: 3; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dgw-zerp-brand);
}

/* === LIVE ERP OPERATIONS CONSOLE (dark card · used in the hero) === */
/* hero wrapper — keeps the dashboard's entrance animation + glow */
.dgw-zerp-herocon {
  position: relative; z-index: 1; max-width: 1000px; margin: 56px auto 0; text-align: left;
  animation: dgw-zerp-dashIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}
.dgw-zerp-ops {
  max-width: 940px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  background: linear-gradient(165deg, #0b1126 0%, #0e1838 100%);
  border: 1px solid rgba(14,22,51,0.12);
  box-shadow: 0 40px 90px -36px rgba(14,22,51,0.55), 0 2px 0 rgba(255,255,255,0.5) inset;
}
.dgw-zerp-ops-hero { max-width: none; }
/* top bar */
.dgw-zerp-ops-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.dgw-zerp-ops-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; color: #6ee7a8;
}
.dgw-zerp-ops-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: dgw-zerp-ops-pulse 1.8s ease-out infinite;
}
@keyframes dgw-zerp-ops-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.dgw-zerp-ops-bar-title { font-size: 13px; color: rgba(255,255,255,0.55); }
.dgw-zerp-ops-uptime { margin-left: auto; font-size: 12.5px; color: rgba(255,255,255,0.5); }
.dgw-zerp-ops-uptime strong { color: #fff; font-weight: 700; }

/* stat tiles */
.dgw-zerp-ops-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.07); }
.dgw-zerp-ops-stat { padding: 22px 24px; background: #0c1430; }
.dgw-zerp-ops-num {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -0.02em; color: #fff; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dgw-zerp-ops-num small { font-size: 0.42em; font-weight: 600; color: rgba(255,255,255,0.45); margin-left: 3px; letter-spacing: 0; }
.dgw-zerp-ops-num-ok { color: #6ee7a8; }
.dgw-zerp-ops-label { display: block; margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,0.5); }

/* throughput equaliser bars */
.dgw-zerp-ops-chart {
  display: flex; align-items: flex-end; gap: 5px; height: 110px;
  padding: 22px 24px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.dgw-zerp-ops-chart span {
  flex: 1; height: var(--h); border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--dgw-zerp-brand-soft) 0%, var(--dgw-zerp-brand) 100%);
  opacity: 0.85; transform-origin: bottom;
  animation: dgw-zerp-ops-eq 2.6s ease-in-out infinite;
}
@keyframes dgw-zerp-ops-eq {
  0%, 100% { transform: scaleY(0.62); }
  50% { transform: scaleY(1); }
}
.dgw-zerp-ops-chart span:nth-child(3n)   { animation-delay: -0.4s; }
.dgw-zerp-ops-chart span:nth-child(3n+1) { animation-delay: -1.1s; }
.dgw-zerp-ops-chart span:nth-child(4n)   { animation-delay: -1.7s; }
.dgw-zerp-ops-chart span:nth-child(5n)   { animation-delay: -2.2s; }

/* live activity feed (auto-scroll) */
.dgw-zerp-ops-feed {
  height: 156px; overflow: hidden; position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.dgw-zerp-ops-feed-track { animation: dgw-zerp-ops-scroll 16s linear infinite; }
@keyframes dgw-zerp-ops-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.dgw-zerp-ops-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 24px; font-size: 13px; color: rgba(255,255,255,0.74);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dgw-zerp-ops-row b { color: #fff; font-weight: 600; }
.dgw-zerp-ops-t { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--dgw-zerp-brand-soft); }
.dgw-zerp-ops-loc {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: rgba(255,255,255,0.5); padding: 3px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
}
.dgw-zerp-ops-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
}
.dgw-zerp-ops-tag.fin  { color: #9db4ff; background: rgba(27,61,245,0.20); }
.dgw-zerp-ops-tag.inv  { color: #ffb98f; background: rgba(255,122,69,0.18); }
.dgw-zerp-ops-tag.shop { color: #7fe3b3; background: rgba(22,160,106,0.20); }

/* --- enriched analytics layout (hero console) --- */
.dgw-zerp-ops-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: rgba(255,255,255,0.07); }
.dgw-zerp-ops-kpi { padding: 16px 18px; background: #0c1430; }
.dgw-zerp-ops-kpi-label { display: block; font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 9px; }
.dgw-zerp-ops-kpi-val {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -0.02em; color: #fff; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dgw-zerp-ops-kpi-val small { font-size: 0.46em; font-weight: 600; color: rgba(255,255,255,0.45); margin-left: 2px; }
.dgw-zerp-ops-kpi-trend { display: block; margin-top: 7px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(255,255,255,0.42); }
.dgw-zerp-ops-kpi-trend.up   { color: #6ee7a8; }
.dgw-zerp-ops-kpi-trend.down { color: #f0816a; }

.dgw-zerp-ops-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1px; background: rgba(255,255,255,0.07); }
.dgw-zerp-ops-panel { padding: 18px 20px 20px; background: #0c1430; }
.dgw-zerp-ops-panel-head {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.5); margin-bottom: 14px;
}
/* hero-scoped resets so the reused chart/feed sit flush inside panels */
.dgw-zerp-ops-hero .dgw-zerp-ops-chart { padding: 0; height: 104px; border-top: none; }
.dgw-zerp-ops-hero .dgw-zerp-ops-feed { height: 132px; border-top: none; }
.dgw-zerp-ops-hero .dgw-zerp-ops-row { padding-left: 0; padding-right: 0; }
.dgw-zerp-ops-panel-feed { padding-bottom: 6px; }

/* -------------------------------------------------------------
   8. FAQ (light · accordion)
   ------------------------------------------------------------- */
.dgw-zerp-faq { padding: 110px 0; background: #fff; scroll-margin-top: 76px; }
.dgw-zerp-faq-container { max-width: 820px; }
.dgw-zerp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.dgw-zerp-faq-item {
  background: var(--dgw-zerp-bg-tint); border: 1px solid var(--dgw-zerp-line-soft);
  border-radius: 14px; padding: 4px 22px; transition: border-color 0.25s ease, background 0.25s ease;
}
.dgw-zerp-faq-item[open] { background: #fff; border-color: rgba(27,61,245,0.2); box-shadow: var(--dgw-zerp-card-shadow); }
.dgw-zerp-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer; padding: 18px 0;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: -0.01em; color: var(--dgw-zerp-ink);
}
.dgw-zerp-faq-q::-webkit-details-marker { display: none; }
.dgw-zerp-faq-icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.dgw-zerp-faq-icon::before, .dgw-zerp-faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--dgw-zerp-brand); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease;
}
.dgw-zerp-faq-icon::before { width: 14px; height: 2px; }
.dgw-zerp-faq-icon::after { width: 2px; height: 14px; }
.dgw-zerp-faq-item[open] .dgw-zerp-faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.dgw-zerp-faq-a { padding: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--dgw-zerp-muted); max-width: 92%; }

/* -------------------------------------------------------------
   9. FINAL CTA (blue gradient band)
   ------------------------------------------------------------- */
.dgw-zerp-finalcta {
  position: relative; padding: 104px 0 110px;
  background: linear-gradient(135deg, var(--dgw-zerp-brand-deep) 0%, var(--dgw-zerp-brand) 55%, #3b56ff 100%);
  overflow: hidden; isolation: isolate;
}
.dgw-zerp-finalcta-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 0%, transparent 78%);
}
.dgw-zerp-finalcta-glow {
  position: absolute; top: -30%; right: -5%; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,69,0.4) 0%, transparent 65%); filter: blur(80px); z-index: 0;
}
.dgw-zerp-finalcta-glow-2 {
  top: auto; bottom: -34%; right: auto; left: -6%; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(120,150,255,0.5) 0%, transparent 66%);
}
.dgw-zerp-finalcta-inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto; }
.dgw-zerp-finalcta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  padding: 6px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.10);
}
.dgw-zerp-finalcta-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dgw-zerp-accent); box-shadow: 0 0 0 4px rgba(255,122,69,0.3); animation: dgw-zerp-pulse 2.4s ease-in-out infinite; }
.dgw-zerp-finalcta-h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(30px, 4vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; color: #fff; margin: 0 0 20px; }
.dgw-zerp-finalcta-em { color: #ffd7c4; background: linear-gradient(120deg, #ffd7c4, #ffb38f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dgw-zerp-finalcta-sub { font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.62; color: rgba(255,255,255,0.85); margin: 0 auto 32px; max-width: 580px; }
.dgw-zerp-finalcta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dgw-zerp-finalcta-assure {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; gap: 12px 26px; justify-content: center; flex-wrap: wrap;
}
.dgw-zerp-finalcta-assure li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,0.9); }
.dgw-zerp-finalcta-assure svg { color: #6ee7a8; flex-shrink: 0; }
.dgw-zerp-finalcta-direct { margin: 22px 0 0; font-size: 14px; color: rgba(255,255,255,0.7); }
.dgw-zerp-finalcta-direct a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dgw-zerp-finalcta-direct a:hover { color: #ffd7c4; }

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
.dgw-zerp-footer { padding: 40px 0; background: #0b1230; }
.dgw-zerp-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dgw-zerp-footer-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; color: #fff; text-decoration: none; }
.dgw-zerp-footer-links { display: flex; gap: 24px; }
.dgw-zerp-footer-links a { font-size: 13.5px; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.dgw-zerp-footer-links a:hover { color: #fff; }
.dgw-zerp-footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.5); }

/* -------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------- */
@keyframes dgw-zerp-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.6} }
@keyframes dgw-zerp-fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes dgw-zerp-dashIn { from{opacity:0;transform:translateY(28px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes dgw-zerp-livePulse { 0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(22,160,106,.5)} 50%{transform:scale(1.2);opacity:.7;box-shadow:0 0 0 5px rgba(22,160,106,0)} }
@keyframes dgw-zerp-barA { from{height:0} }
@keyframes dgw-zerp-barB { from{height:0} }
@keyframes dgw-zerp-feedIn { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:translateX(0)} }
@keyframes dgw-zerp-floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 1240px) {
  .dgw-zerp-hero-float { display: none; }
}
@media (max-width: 1024px) {
  .dgw-zerp-modules-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-chaos-wall { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
  .dgw-zerp-flow { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .dgw-zerp-flow-step:not(:last-child)::after { display: none; }
  .dgw-zerp-flow-result { grid-template-columns: 1fr; text-align: left; gap: 16px; }
  .dgw-zerp-flow-result-cta { justify-self: start; }
  .dgw-zerp-ind-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-infra-grid { grid-template-columns: repeat(3, 1fr); }
  .dgw-zerp-globe { transform: translateY(-50%) scale(1.2); right: -150px; opacity: 0.6; }
  .dgw-zerp-ops-kpis { grid-template-columns: repeat(3, 1fr); }
  .dgw-zerp-pain, .dgw-zerp-modules, .dgw-zerp-rollout, .dgw-zerp-why, .dgw-zerp-industries, .dgw-zerp-infra, .dgw-zerp-faq { padding: 84px 0; }
}
@media (max-width: 880px) {
  .dgw-zerp-container { padding: 0 24px; }
  .dgw-zerp-nav-inner { padding: 13px 24px; }
  .dgw-zerp-nav-links { display: none; }
  .dgw-zerp-why-layout { grid-template-columns: 1fr; gap: 36px; }
  .dgw-zerp-why-intro { position: static; }
  .dgw-zerp-why-sub { max-width: none; }
  .dgw-zerp-dash-frame { grid-template-columns: 1fr; }
  .dgw-zerp-dash-side { display: none; }
  .dgw-zerp-dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-dash-row { grid-template-columns: 1fr; }
  .dgw-zerp-section-head { margin-bottom: 40px; }
}
/* ecosystem board → stacked list when the 1080px board can't fit */
@media (max-width: 1180px) {
  .dgw-zerp-eco-board { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .dgw-zerp-eco-gridbg, .dgw-zerp-eco-wires, .dgw-zerp-eco-hub-label { display: none; }
  .dgw-zerp-eco-hub { position: static; transform: none; order: -1; margin-bottom: 8px; }
  .dgw-zerp-eco-group {
    position: static !important; transform: none !important; top: auto !important;
    width: 100% !important; max-width: 520px; flex-direction: column; gap: 12px;
    justify-content: center !important; align-items: center; text-align: center;
  }
  .dgw-zerp-eco-gr { flex-direction: column; }
  .dgw-zerp-eco-logos { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 600px) {
  .dgw-zerp-hero { padding: 60px 0 72px; }
  .dgw-zerp-modules-grid, .dgw-zerp-ind-grid { grid-template-columns: 1fr; }
  .dgw-zerp-ind-canvas { height: 260px; }
  .dgw-zerp-ind-photo { width: 50%; }
  .dgw-zerp-ind-chip { font-size: 9px; padding: 5px 9px; }
  .dgw-zerp-ind-chip-a { left: 4%; } .dgw-zerp-ind-chip-c { right: 3%; }
  .dgw-zerp-ind-text { padding: 22px 22px 26px; }
  .dgw-zerp-ind-title { font-size: 20px; }
  .dgw-zerp-flow { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-chaos-wall { grid-template-columns: 1fr; gap: 20px; }
  .dgw-zerp-chaos { transform: none; }
  .dgw-zerp-chaos:hover { transform: translateY(-6px); }
  .dgw-zerp-infra-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dgw-zerp-infra-head { margin-bottom: 40px; }
  .dgw-zerp-globe { transform: translate(50%,-50%) scale(1); top: 30%; right: 50%; opacity: 0.28; }
  .dgw-zerp-hero-cta-row .dgw-zerp-btn, .dgw-zerp-finalcta-row .dgw-zerp-btn { width: 100%; justify-content: center; }
  .dgw-zerp-dash-tiles { grid-template-columns: 1fr 1fr; }
  .dgw-zerp-footer-inner { flex-direction: column; text-align: center; }
  .dgw-zerp-how-step { grid-template-columns: 46px 1fr; gap: 16px; padding-bottom: 28px; }
  .dgw-zerp-how-num { width: 46px; height: 46px; border-radius: 13px; font-size: 16px; }
  .dgw-zerp-how-step:not(:last-child) .dgw-zerp-how-node::after { top: 50px; }
  .dgw-zerp-how-title { font-size: 19px; }
  .dgw-zerp-how-deliver { border-radius: 12px; align-items: flex-start; line-height: 1.45; }
  .dgw-zerp-ops-stat { padding: 16px 16px; }
  .dgw-zerp-ops-bar-title { display: none; }
  .dgw-zerp-ops-chart { height: 80px; }
  .dgw-zerp-ops-loc { display: none; }
  .dgw-zerp-ops-kpis { grid-template-columns: repeat(2, 1fr); }
  .dgw-zerp-ops-split { grid-template-columns: 1fr; }
  .dgw-zerp-ops-kpi { padding: 13px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zerp-eyebrow-dot, .dgw-zerp-hero-copy > *, .dgw-zerp-dash, .dgw-zerp-dash-bar,
  .dgw-zerp-dash-feed-line, .dgw-zerp-dash-livepulse, .dgw-zerp-pain-card, .dgw-zerp-module,
  .dgw-zerp-flow-step, .dgw-zerp-flow-badge::before, .dgw-zerp-why-item, .dgw-zerp-ind-card, .dgw-zerp-btn, .dgw-zerp-nav-cta,
  .dgw-zerp-chaos, .dgw-zerp-hero-float, .dgw-zerp-globe-sphere, .dgw-zerp-infra-card,
  .dgw-zerp-ops-dot, .dgw-zerp-ops-chart span, .dgw-zerp-ops-feed-track, .dgw-zerp-eco-hub-card::before, .dgw-zerp-eco-path, .dgw-zerp-finalcta-eyebrow-dot {
    animation: none !important; transition: none !important;
  }
  .dgw-zerp-eco-path { stroke-dasharray: none; }
  .dgw-zerp-module:hover, .dgw-zerp-flow-step:hover,
  .dgw-zerp-why-item:hover, .dgw-zerp-ind-card:hover, .dgw-zerp-btn:hover, .dgw-zerp-infra-card:hover { transform: none !important; }
  .dgw-zerp-chaos:hover { transform: rotate(var(--rot)) translateY(var(--dy)) !important; }
}





 /* PAGE: discovery-call | Prefix: .dc- */

  .dc-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
  .dc-wrap {
    --dc-navy:   #0d1c2e;
    --dc-teal:   #0abfbc;
    --dc-teal2:  #07a3a0;
    --dc-gray50: #f8fafc;
    --dc-gray100:#f1f5f9;
    --dc-gray600:#475569;
    --dc-gray800:#1e293b;
    font-family: 'Inter', sans-serif;
    color: var(--dc-gray800);
  }

  /* ── HERO ── */
  .dc-hero {
    background: linear-gradient(135deg, var(--dc-navy) 0%, #112240 100%);
    color: white;
    padding: 80px 24px 90px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .dc-hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(10,191,188,0.07);
    pointer-events: none;
  }
  .dc-hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(10,191,188,0.05);
    pointer-events: none;
  }
  .dc-hero-badge {
    display: inline-block;
    background: rgba(10,191,188,0.15);
    border: 1px solid rgba(10,191,188,0.35);
    color: var(--dc-teal);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 100px;
    margin-bottom: 24px;
    position: relative;
  }
  .dc-hero h1 {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
    position: relative;
  }
  .dc-hero h1 span { color: var(--dc-teal); }
  .dc-hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,0.7);
    max-width: 540px;
    margin: 0 auto 36px;
    line-height: 1.7;
    position: relative;
  }
  .dc-hero-meta {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    position: relative;
  }
  .dc-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
  }
  .dc-hero-meta-item svg { color: var(--dc-teal); flex-shrink: 0; }

  /* ── BOOKING ── */
  .dc-booking {
    background: var(--dc-gray50);
    padding: 80px 24px 80px;
  }
  .dc-booking-inner {
    max-width: 1200px;
    margin: 0 auto;
/*     display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 48px;
    align-items: start; */
  }
  .dc-booking-info h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--dc-navy);
    margin-bottom: 14px;
    line-height: 1.25;
  }
  .dc-booking-info > p {
    font-size: 15px;
    color: var(--dc-gray600);
    line-height: 1.7;
    margin-bottom: 30px;
  }
  .dc-info-list { list-style: none; }
  .dc-info-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 14px;
  }
  .dc-info-dot {
    width: 22px; height: 22px;
    background: rgba(10,191,188,0.14);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .dc-info-dot svg { color: var(--dc-teal); }
  .dc-info-list li strong {
    display: block;
    font-weight: 600;
    color: var(--dc-navy);
    margin-bottom: 2px;
  }
  .dc-info-list li span { color: var(--dc-gray600); font-size: 13px; }
  .dc-divider {
    border: none;
    border-top: 1px solid var(--dc-gray100);
    margin: 24px 0;
  }
  .dc-host-card {
    display: flex;
    gap: 14px;
    align-items: center;
  }
  .dc-host-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dc-teal), var(--dc-navy));
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: white;
    flex-shrink: 0;
  }
  .dc-host-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--dc-navy);
    margin-bottom: 2px;
  }
  .dc-host-title { font-size: 13px; color: var(--dc-gray600); margin-bottom: 8px; }
  .dc-badge-row { display: flex; gap: 6px; flex-wrap: wrap; }
  .dc-badge {
    font-size: 11px;
    font-weight: 600;
    background: rgba(10,191,188,0.1);
    color: var(--dc-teal2);
    border-radius: 100px;
    padding: 3px 10px;
    border: 1px solid rgba(10,191,188,0.2);
  }

  /* Embed box */
  .dc-booking-embed {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 40px rgba(13,28,46,0.09);
    overflow: hidden;
  }
  .dc-embed-header {
    background: var(--dc-navy);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .dc-embed-header svg { color: var(--dc-teal); }
  .dc-embed-header span { font-size: 14px; font-weight: 600; color: white; }
  #inline-container { width: 100%; min-height: 600px; }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .dc-booking-inner { grid-template-columns: 1fr; }
    .dc-booking-info { order: 2; }
    .dc-booking-embed { order: 1; }
  }
  @media (max-width: 500px) {
    .dc-hero { padding: 56px 20px 72px; }
    .dc-hero-meta { gap: 14px; }
  }




/* =============================================================
   Digiwah · Zoho Books Implementation Partner page (India)
   LIGHT, airy, GST/pain-led. Class prefix: dgw-zbk-
   Theme: Zoho Books azure (#006fda) + warm gold accent.
   Structure inspired by zoho.com/in/books (light, product-led).
   Sibling of the zoho-erp page — same Digiwah design system.
   ============================================================= */

/* Scoped reset — applies ONLY inside the page wrapper so it can't
   leak into (or be clobbered by) the WordPress theme when live. */
.dgw-zbk-body, .dgw-zbk-body *, .dgw-zbk-body *::before, .dgw-zbk-body *::after { box-sizing: border-box; }

:root {
  --dgw-zbk-brand: #006fda;        /* Zoho Books azure */
  --dgw-zbk-brand-deep: #0064a5;
  --dgw-zbk-brand-soft: #4f99df;
  --dgw-zbk-accent: #f5ba31;       /* warm gold */
  --dgw-zbk-accent-deep: #ffa813;  /* amber */
  --dgw-zbk-green: #16a06a;
  --dgw-zbk-red: #e0533d;
  --dgw-zbk-ink: #0c1b2e;
  --dgw-zbk-ink-soft: #16263c;
  --dgw-zbk-muted: #54657d;
  --dgw-zbk-muted-2: #7f8ea3;
  --dgw-zbk-bg: #ffffff;
  --dgw-zbk-bg-tint: #f3f8ff;      /* Books pale blue */
  --dgw-zbk-bg-blue: #e8f1fc;
  --dgw-zbk-bg-cream: #fef6e6;     /* warm cream */
  --dgw-zbk-line: rgba(12, 27, 46, 0.09);
  --dgw-zbk-line-soft: rgba(12, 27, 46, 0.06);
  --dgw-zbk-card-shadow: 0 1px 2px rgba(12,27,46,0.04), 0 12px 30px -18px rgba(0,111,218,0.20);
  --dgw-zbk-card-shadow-h: 0 1px 2px rgba(12,27,46,0.05), 0 24px 50px -22px rgba(0,111,218,0.30);
}

.dgw-zbk-body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--dgw-zbk-ink-soft);
  background: var(--dgw-zbk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* -------------------------------------------------------------
   SHARED
   ------------------------------------------------------------- */
.dgw-zbk-container {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.dgw-zbk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dgw-zbk-brand);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(0, 111, 218, 0.16);
  background: rgba(0, 111, 218, 0.05);
  margin-bottom: 22px;
}
.dgw-zbk-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dgw-zbk-accent-deep);
  box-shadow: 0 0 0 4px rgba(255, 168, 19, 0.18);
  animation: dgw-zbk-pulse 2.4s ease-in-out infinite;
}
.dgw-zbk-eyebrow-light {
  color: #cfe3fb;
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

.dgw-zbk-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--dgw-zbk-ink);
  margin: 0;
}
.dgw-zbk-h2-grad {
  background: linear-gradient(120deg, var(--dgw-zbk-brand) 0%, var(--dgw-zbk-accent-deep) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dgw-zbk-section-head {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 56px;
}
.dgw-zbk-section-sub {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--dgw-zbk-muted);
  margin: 18px auto 0;
  max-width: 640px;
}

/* Buttons */
.dgw-zbk-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.dgw-zbk-btn svg { transition: transform 0.25s ease; }
.dgw-zbk-btn-primary {
  background: linear-gradient(135deg, var(--dgw-zbk-brand) 0%, var(--dgw-zbk-brand-deep) 100%);
  color: #fff;
  box-shadow: 0 14px 34px -14px rgba(0, 111, 218, 0.55);
}
.dgw-zbk-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(0,111,218,0.65); }
.dgw-zbk-btn-primary:hover svg { transform: translateX(4px); }
.dgw-zbk-btn-ghost {
  background: #fff; color: var(--dgw-zbk-ink);
  border-color: var(--dgw-zbk-line);
  box-shadow: 0 1px 2px rgba(12,27,46,0.04);
}
.dgw-zbk-btn-ghost:hover { border-color: rgba(0,111,218,0.3); color: var(--dgw-zbk-brand); transform: translateY(-2px); }
.dgw-zbk-btn-light {
  background: #fff; color: var(--dgw-zbk-brand-deep);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.4);
}
.dgw-zbk-btn-light:hover { transform: translateY(-2px); }

/* -------------------------------------------------------------
   NAV (light glass, sticky)
   ------------------------------------------------------------- */
.dgw-zbk-nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(255,255,255,0.82);
  border-bottom: 1px solid var(--dgw-zbk-line-soft);
}
.dgw-zbk-nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  height: 66px; display: flex; align-items: center; justify-content: space-between;
}
.dgw-zbk-nav-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -0.03em;
  color: var(--dgw-zbk-ink); text-decoration: none;
}
.dgw-zbk-nav-links { display: flex; gap: 30px; }
.dgw-zbk-nav-links a {
  font-size: 14px; font-weight: 500; color: var(--dgw-zbk-muted);
  text-decoration: none; transition: color 0.2s ease;
}
.dgw-zbk-nav-links a:hover { color: var(--dgw-zbk-brand); }
.dgw-zbk-nav-cta {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none;
  padding: 10px 20px; border-radius: 100px;
  background: linear-gradient(135deg, var(--dgw-zbk-brand) 0%, var(--dgw-zbk-brand-deep) 100%);
  box-shadow: 0 10px 26px -12px rgba(0,111,218,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dgw-zbk-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,111,218,0.7); }
@media (max-width: 860px) { .dgw-zbk-nav-links { display: none; } }

/* -------------------------------------------------------------
   1. HERO  — bold azure band: heading up, big Books dashboard down.
   One sharp central dashboard, with faded product-widget columns
   sliding behind it (modelled on zoho.com/in/books home hero).
   ------------------------------------------------------------- */
.dgw-zbk-hero {
  position: relative; overflow: hidden;
  padding: 60px 0 96px;
  background:
    radial-gradient(900px 520px at 50% -6%, #2a86e6 0%, rgba(42,134,230,0) 60%),
    radial-gradient(700px 460px at 86% 92%, rgba(0,90,170,0.55), rgba(0,90,170,0) 65%),
    linear-gradient(170deg, #0a7bdc 0%, #006fda 42%, #0061c2 100%);
}
.dgw-zbk-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: radial-gradient(800px 520px at 50% 8%, #000 0%, transparent 76%);
  mask-image: radial-gradient(800px 520px at 50% 8%, #000 0%, transparent 76%);
  pointer-events: none;
}
.dgw-zbk-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.dgw-zbk-hero-glow-a { width: 480px; height: 480px; top: -160px; left: -100px; background: rgba(120,190,255,0.4); }
.dgw-zbk-hero-glow-b { width: 460px; height: 460px; bottom: -200px; right: -80px; background: rgba(245,186,49,0.22); }

/* --- copy (centered, on blue) --- */
.dgw-zbk-hero-copy { position: relative; z-index: 3; text-align: center; max-width: 760px; margin: 0 auto; }
.dgw-zbk-hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
  padding: 7px 16px 7px 9px; border-radius: 100px; margin-bottom: 22px; margin-top: 40px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dgw-zbk-hero-badge-mark {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #ffd24a 0%, #f5ba31 45%, #ffa617 100%);
  box-shadow: 0 4px 10px -3px rgba(0,0,0,0.25);
}
.dgw-zbk-hero-h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(34px, 4.8vw, 58px);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
  color: #fff; margin: 0 0 20px;
}
.dgw-zbk-hero-h1 .dgw-zbk-h2-grad {
  background: linear-gradient(120deg, #ffe7ad 0%, #f5ba31 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dgw-zbk-hero-sub {
  font-size: clamp(15.5px, 1.3vw, 18.5px); line-height: 1.62;
  color: #dbeafc; max-width: 600px; margin: 0 auto 30px;
}
.dgw-zbk-hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.dgw-zbk-btn-glass {
  background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dgw-zbk-btn-glass:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.dgw-zbk-hero-trust { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.dgw-zbk-hero-trust span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: #cfe3fb;
}
.dgw-zbk-hero-trust svg { color: #ffd24a; flex-shrink: 0; }

/* --- stage: faded slider behind + sharp central dashboard --- */
.dgw-zbk-hero-stage {
  position: relative; z-index: 1;
  margin-top: 54px; min-height: 470px;
}
/* faded product-widget rows sliding behind (horizontal marquee, full-bleed) */
.dgw-zbk-hero-back {
  position: absolute; top: 0; bottom: 0; z-index: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  opacity: 0.5; filter: blur(1.3px); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dgw-zbk-hero-row {
  display: flex; gap: 22px; width: max-content;
  animation: dgw-zbk-marqueeX 52s linear infinite;
}
.dgw-zbk-hero-row.dgw-zbk-is-r2 { animation-duration: 64s; animation-direction: reverse; }
.dgw-zbk-hero-row.r3 { animation-duration: 58s; }
.dgw-zbk-hero-row .dgw-zbk-wcard { width: 312px; padding: 18px 20px; }
.dgw-zbk-hero-back:hover .dgw-zbk-hero-row { animation-play-state: paused; }
/* central sharp dashboard "comes down" */
.dgw-zbk-dash {
  position: relative; z-index: 2; max-width: 880px; margin: 0 auto;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 60px 120px -40px rgba(3,28,64,0.6), 0 0 0 1px rgba(255,255,255,0.5);
  animation: dgw-zbk-dashIn 1s cubic-bezier(0.16,1,0.3,1) both;
}
.dgw-zbk-dash-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #f7f9fc; border-bottom: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-dash-dots { display: flex; gap: 6px; }
.dgw-zbk-dash-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d6dde7; display: block; }
.dgw-zbk-dash-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 13px; color: var(--dgw-zbk-ink); }
.dgw-zbk-dash-logo span { color: var(--dgw-zbk-brand); }
.dgw-zbk-dash-search { margin-left: auto; font-size: 11px; color: var(--dgw-zbk-muted-2); background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 100px; padding: 5px 14px; }
.dgw-zbk-dash-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.dgw-zbk-dash-body { display: grid; grid-template-columns: 156px 1fr; }
.dgw-zbk-dash-side { background: #fbfcfe; border-right: 1px solid var(--dgw-zbk-line); padding: 12px 10px; }
.dgw-zbk-dash-nav { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 12px; color: var(--dgw-zbk-muted); margin-bottom: 2px; }
.dgw-zbk-dash-nav i { width: 14px; height: 14px; border-radius: 4px; background: #d8e0ea; display: block; flex-shrink: 0; }
.dgw-zbk-dash-nav.dgw-zbk-is-act { background: rgba(0,111,218,0.09); color: var(--dgw-zbk-brand); font-weight: 600; }
.dgw-zbk-dash-nav.dgw-zbk-is-act i { background: var(--dgw-zbk-brand); }
.dgw-zbk-dash-main { padding: 18px; }
.dgw-zbk-dash-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dgw-zbk-dash-h b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: var(--dgw-zbk-ink); }
.dgw-zbk-dash-h span { font-size: 11px; color: var(--dgw-zbk-muted); background: var(--dgw-zbk-bg-tint); border: 1px solid var(--dgw-zbk-line); border-radius: 100px; padding: 4px 12px; }
.dgw-zbk-dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.dgw-zbk-dash-card { border: 1px solid var(--dgw-zbk-line); border-radius: 11px; padding: 14px; }
.dgw-zbk-dash-card-l { font-size: 11px; color: var(--dgw-zbk-muted); }
.dgw-zbk-dash-card-v { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: var(--dgw-zbk-ink); margin: 5px 0 10px; }
.dgw-zbk-dash-split { display: flex; height: 7px; border-radius: 100px; overflow: hidden; background: var(--dgw-zbk-bg-blue); }
.dgw-zbk-dash-split i { display: block; height: 100%; }
.dgw-zbk-dash-legend { display: flex; gap: 14px; margin-top: 9px; }
.dgw-zbk-dash-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dgw-zbk-muted); }
.dgw-zbk-dash-legend i { width: 8px; height: 8px; border-radius: 2px; }
.dgw-zbk-dash-chart { border: 1px solid var(--dgw-zbk-line); border-radius: 11px; padding: 14px 14px 6px; }
.dgw-zbk-dash-chart-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dgw-zbk-dash-chart-h b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--dgw-zbk-ink); }
.dgw-zbk-dash-chart-h span { font-size: 11px; color: var(--dgw-zbk-green); font-weight: 600; }
.dgw-zbk-dash-chart svg { width: 100%; height: 132px; display: block; }

/* ===== reusable product-widget cards (also used in back slider) ===== */
.dgw-zbk-wcard {
  background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 16px;
  padding: 15px 16px; box-shadow: 0 18px 36px -22px rgba(12,27,46,0.4);
  flex-shrink: 0;
}
.dgw-zbk-wcard-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.dgw-zbk-wcard-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.dgw-zbk-wcard-ic.dgw-zbk-is-blue { background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); }
.dgw-zbk-wcard-ic.dgw-zbk-is-gold { background: linear-gradient(135deg, var(--dgw-zbk-accent), var(--dgw-zbk-accent-deep)); }
.dgw-zbk-wcard-ic.dgw-zbk-is-green { background: linear-gradient(135deg, #22b67c, #0e7d51); }
.dgw-zbk-wcard-t { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-wcard-sub { font-size: 11px; color: var(--dgw-zbk-muted-2); margin-top: 1px; }
.dgw-zbk-wline { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; padding: 5px 0; border-bottom: 1px dashed var(--dgw-zbk-line); }
.dgw-zbk-wline:last-child { border-bottom: 0; }
.dgw-zbk-wline span:first-child { color: var(--dgw-zbk-muted); }
.dgw-zbk-wline span:last-child { color: var(--dgw-zbk-ink-soft); font-weight: 600; }
.dgw-zbk-wtotal { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-wtotal b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: var(--dgw-zbk-ink); }
.dgw-zbk-wchip { font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; }
.dgw-zbk-wchip.dgw-zbk-is-paid { color: #16a06a; background: rgba(22,160,106,0.12); }
.dgw-zbk-wchip.dgw-zbk-is-due { color: #b8860b; background: rgba(245,186,49,0.16); }
.dgw-zbk-wchip.dgw-zbk-is-irn { color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.1); font-family: 'JetBrains Mono', monospace; text-transform: none; }
.dgw-zbk-wbars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.dgw-zbk-wbar { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--dgw-zbk-brand-soft), var(--dgw-zbk-brand)); }
.dgw-zbk-wbar.dgw-zbk-is-g { background: linear-gradient(180deg, #ffd980, var(--dgw-zbk-accent)); }
.dgw-zbk-wmeta { display: flex; justify-content: space-between; margin-top: 9px; }
.dgw-zbk-wmeta b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--dgw-zbk-ink); }
.dgw-zbk-wmeta span { font-size: 11px; color: var(--dgw-zbk-green); font-weight: 600; align-self: flex-end; }
.dgw-zbk-wtimer { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; color: var(--dgw-zbk-ink); letter-spacing: 0.02em; }
.dgw-zbk-wtimer-ctrl { display: flex; gap: 7px; margin-top: 10px; }
.dgw-zbk-wtimer-btn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--dgw-zbk-bg-blue); color: var(--dgw-zbk-brand); }
.dgw-zbk-wuser { display: flex; align-items: center; gap: 10px; }
.dgw-zbk-wavatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; font-family: 'Plus Jakarta Sans', sans-serif; background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); flex-shrink: 0; }
.dgw-zbk-wuser.dgw-zbk-is-gold .dgw-zbk-wavatar { background: linear-gradient(135deg, var(--dgw-zbk-accent), var(--dgw-zbk-accent-deep)); }
.dgw-zbk-wuser-n { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-wuser-e { font-size: 11px; color: var(--dgw-zbk-muted-2); }
.dgw-zbk-wnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dgw-zbk-wnav span { font-size: 10.5px; color: var(--dgw-zbk-muted); background: var(--dgw-zbk-bg-tint); border: 1px solid var(--dgw-zbk-line-soft); padding: 4px 9px; border-radius: 7px; }
.dgw-zbk-wbank { display: flex; align-items: center; justify-content: space-between; }
.dgw-zbk-wbank-amt { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; color: var(--dgw-zbk-ink); }
.dgw-zbk-wbank-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--dgw-zbk-green); margin-top: 4px; }
.dgw-zbk-wfeed { margin-top: 12px; display: grid; gap: 7px; }
.dgw-zbk-wfeed-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dgw-zbk-muted); }
.dgw-zbk-wfeed-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* hero responsive */
@media (max-width: 980px) {
  .dgw-zbk-hero { padding: 48px 0 76px; }
  .dgw-zbk-hero-stage { margin-top: 40px; min-height: 0; }
  .dgw-zbk-hero-back { display: none; }
  .dgw-zbk-dash { max-width: 100%; }
}
@media (max-width: 600px) {
  .dgw-zbk-dash-body { grid-template-columns: 1fr; }
  .dgw-zbk-dash-side { display: none; }
  .dgw-zbk-dash-cards { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   2. TOOLS-WE-REPLACE STRIP
   ------------------------------------------------------------- */
.dgw-zbk-replace {
  background: var(--dgw-zbk-ink);
  padding: 26px 0;
}
.dgw-zbk-replace-inner {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; text-align: center;
}
.dgw-zbk-replace-from { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.dgw-zbk-replace-chip {
  font-size: 13.5px; font-weight: 600; color: #aebfd2;
  padding: 7px 15px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
}
.dgw-zbk-replace-chip s { color: #6c8099; text-decoration-color: var(--dgw-zbk-red); }
.dgw-zbk-replace-arrow { color: var(--dgw-zbk-accent); flex-shrink: 0; }
.dgw-zbk-replace-to {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: #fff;
  display: inline-flex; align-items: center; gap: 9px;
}
.dgw-zbk-replace-to b { color: var(--dgw-zbk-accent); }

/* -------------------------------------------------------------
   3. MODULES
   ------------------------------------------------------------- */
.dgw-zbk-modules { padding: 96px 0; background: #fff; }
.dgw-zbk-mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1100px; }
.dgw-zbk-mod-card {
  position: relative; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid var(--dgw-zbk-line);
  border-radius: 18px; padding: 30px 26px;
  box-shadow: var(--dgw-zbk-card-shadow);
  transform-style: preserve-3d; will-change: transform;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
/* top accent bar */
.dgw-zbk-mod-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 18px 18px 0 0; z-index: 3;
  background: linear-gradient(90deg, var(--dgw-zbk-brand), var(--dgw-zbk-accent));
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
/* cursor-tracking spotlight */
.dgw-zbk-mod-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(0,111,218,0.14), transparent 55%);
  opacity: 0; transition: opacity 0.35s ease;
}
.dgw-zbk-mod-card:hover { box-shadow: 0 34px 64px -28px rgba(0,111,218,0.42), 0 2px 6px rgba(12,27,46,0.05); border-color: rgba(0,111,218,0.3); }
.dgw-zbk-mod-card:hover::before { transform: scaleX(1); }
.dgw-zbk-mod-card:hover::after { opacity: 1; }
.dgw-zbk-mod-card.dgw-zbk-is-pain:hover { box-shadow: 0 34px 64px -28px rgba(224,83,61,0.34), 0 2px 6px rgba(12,27,46,0.05); border-color: rgba(224,83,61,0.28); }
.dgw-zbk-mod-card.dgw-zbk-is-pain::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(224,83,61,0.12), transparent 55%); }
/* big faded index number (injected by JS) */
.dgw-zbk-mod-num {
  position: absolute; top: 14px; right: 22px; z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 58px; font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; color: rgba(0,111,218,0.07); pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), color 0.35s ease;
}
.dgw-zbk-mod-card.dgw-zbk-is-pain .dgw-zbk-mod-num { color: rgba(224,83,61,0.08); }
.dgw-zbk-mod-card:hover .dgw-zbk-mod-num { transform: translateZ(12px); }
/* layered depth — content lifts off the surface on hover */
.dgw-zbk-mod-ic, .dgw-zbk-mod-title, .dgw-zbk-mod-body, .dgw-zbk-mod-extend, .dgw-zbk-mod-fix {
  position: relative; z-index: 2; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.dgw-zbk-mod-ic {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep));
  box-shadow: 0 10px 24px -10px rgba(0,111,218,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.dgw-zbk-mod-card:hover .dgw-zbk-mod-ic { transform: translateZ(46px) scale(1.05); box-shadow: 0 24px 42px -14px rgba(0,111,218,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.dgw-zbk-mod-card:hover .dgw-zbk-mod-title { transform: translateZ(28px); }
.dgw-zbk-mod-card:hover .dgw-zbk-mod-body { transform: translateZ(16px); }
.dgw-zbk-mod-card:hover .dgw-zbk-mod-extend, .dgw-zbk-mod-card:hover .dgw-zbk-mod-fix { transform: translateZ(10px); }
.dgw-zbk-mod-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700;
  color: var(--dgw-zbk-ink); margin: 0 0 8px;
}
.dgw-zbk-mod-body { font-size: 14px; line-height: 1.6; color: var(--dgw-zbk-muted); margin: 0 0 14px; }
.dgw-zbk-mod-extend {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--dgw-zbk-accent-deep); font-weight: 600;
  padding-top: 13px; border-top: 1px dashed var(--dgw-zbk-line);
}
.dgw-zbk-mod-extend svg { flex-shrink: 0; margin-top: 2px; }

/* -------------------------------------------------------------
   3B. LIVE FEATURE SHOWCASE (section 2 — auto-cycling list + live preview)
   ------------------------------------------------------------- */
.dgw-zbk-show { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 40px; align-items: stretch; margin-top: 6px; }

/* --- left: module list --- */
.dgw-zbk-show-list { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.dgw-zbk-show-item {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 14px;
  padding: 15px 18px; cursor: pointer; overflow: hidden; font-family: inherit;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.dgw-zbk-show-item:hover { border-color: rgba(0,111,218,0.25); }
.dgw-zbk-show-item.dgw-zbk-is-active { border-color: rgba(0,111,218,0.4); box-shadow: var(--dgw-zbk-card-shadow); transform: translateX(4px); }
.dgw-zbk-show-ic { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; color: var(--dgw-zbk-brand); background: var(--dgw-zbk-bg-blue); transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.dgw-zbk-show-item.dgw-zbk-is-active .dgw-zbk-show-ic { background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); color: #fff; box-shadow: 0 10px 22px -10px rgba(0,111,218,0.6); }
.dgw-zbk-show-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dgw-zbk-show-tx b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-show-tx i { font-style: normal; font-size: 12.5px; color: var(--dgw-zbk-muted); }
.dgw-zbk-show-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.dgw-zbk-show-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dgw-zbk-brand), var(--dgw-zbk-accent)); }
.dgw-zbk-show-item.dgw-zbk-is-active .dgw-zbk-show-bar i { animation: dgw-zbk-fill 5s linear forwards; }
.dgw-zbk-show.dgw-zbk-is-paused .dgw-zbk-show-item.dgw-zbk-is-active .dgw-zbk-show-bar i { animation-play-state: paused; }

/* --- right: device frame + panels --- */
.dgw-zbk-show-stage { position: relative; }
.dgw-zbk-show-frame {
  position: relative; height: 100%; min-height: 430px; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #f3f8ff 0%, #ffffff 60%); overflow: hidden;
  border: 1px solid var(--dgw-zbk-line); border-radius: 20px; box-shadow: var(--dgw-zbk-card-shadow);
}
.dgw-zbk-show-frame::before { content: ""; position: absolute; inset: -28% 8% auto 8%; height: 60%; background: radial-gradient(60% 100% at 50% 0%, rgba(0,111,218,0.16), transparent 70%); filter: blur(38px); pointer-events: none; }
.dgw-zbk-show-chrome { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--dgw-zbk-line); background: rgba(255,255,255,0.65); }
.dgw-zbk-show-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #d6dde7; }
.dgw-zbk-show-chrome b { margin-left: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-show-chrome b span { color: var(--dgw-zbk-brand); }
.dgw-zbk-show-live { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--dgw-zbk-green); display: inline-flex; align-items: center; gap: 6px; }
.dgw-zbk-show-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dgw-zbk-green); box-shadow: 0 0 0 3px rgba(22,160,106,0.2); animation: dgw-zbk-pulse 2s ease-in-out infinite; }
.dgw-zbk-show-panels { position: relative; flex: 1; padding: 22px; }
.dgw-zbk-show-panel { position: absolute; inset: 22px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .45s; }
.dgw-zbk-show-panel.dgw-zbk-is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1); }

/* --- preview shared bits --- */
.dgw-zbk-sp-card { background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 14px 30px -20px rgba(12,27,46,0.35); }
.dgw-zbk-sp-card + .dgw-zbk-sp-card { margin-top: 12px; }
.dgw-zbk-sp-cap { display: flex; align-items: center; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--dgw-zbk-muted-2); margin-bottom: 12px; }
.dgw-zbk-sp-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed var(--dgw-zbk-line); }
.dgw-zbk-sp-row:last-child { border-bottom: 0; }
.dgw-zbk-sp-row span:first-child { color: var(--dgw-zbk-muted); }
.dgw-zbk-sp-row span:last-child, .dgw-zbk-sp-row b { color: var(--dgw-zbk-ink-soft); font-weight: 600; }
.dgw-zbk-sp-tot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-sp-tot b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; color: var(--dgw-zbk-ink); }
.dgw-zbk-sp-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.dgw-zbk-sp-stamp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--dgw-zbk-green); border: 1.5px solid var(--dgw-zbk-green); border-radius: 8px; padding: 5px 10px; }
.dgw-zbk-sp-chip { font-size: 11px; font-weight: 600; color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.08); border-radius: 100px; padding: 5px 11px; }
.dgw-zbk-sp-chip.dgw-zbk-is-gold { color: var(--dgw-zbk-accent-deep); background: rgba(245,186,49,0.16); }
.dgw-zbk-sp-tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.dgw-zbk-sp-tag.dgw-zbk-is-blue { color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.1); }
.dgw-zbk-sp-tag.dgw-zbk-is-green { color: var(--dgw-zbk-green); background: rgba(22,160,106,0.12); }
.dgw-zbk-sp-tag.dgw-zbk-is-gold { color: var(--dgw-zbk-accent-deep); background: rgba(245,186,49,0.16); }
.dgw-zbk-sp-mono { font-family: 'JetBrains Mono', monospace; }

/* GST irn typing + qr */
.dgw-zbk-sp-irn { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.08); border-radius: 6px; padding: 6px 10px; white-space: nowrap; overflow: hidden; display: inline-block; max-width: 100%; }
.dgw-zbk-sp-taxes { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.dgw-zbk-sp-qr { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.dgw-zbk-sp-qrbox { width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0; border: 3px solid var(--dgw-zbk-ink); background: conic-gradient(from 0deg, #0c1b2e 0 25%, #fff 0 50%, #0c1b2e 0 75%, #fff 0); background-size: 12px 12px; }
.dgw-zbk-sp-qr p { margin: 0; font-size: 12px; color: var(--dgw-zbk-muted); }

/* stock bars */
.dgw-zbk-sp-stock { display: grid; gap: 12px; }
.dgw-zbk-sp-stockrow { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.dgw-zbk-sp-stockrow span { font-size: 12.5px; color: var(--dgw-zbk-ink-soft); }
.dgw-zbk-sp-track { grid-column: 1 / -1; height: 7px; border-radius: 100px; background: var(--dgw-zbk-bg-blue); overflow: hidden; }
.dgw-zbk-sp-track i { display: block; height: 100%; width: 0; border-radius: 100px; background: linear-gradient(90deg, var(--dgw-zbk-brand-soft), var(--dgw-zbk-brand)); }
.dgw-zbk-sp-track i.dgw-zbk-is-low { background: linear-gradient(90deg, #ffd980, var(--dgw-zbk-accent-deep)); }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-track i { animation: dgw-zbk-trackfill 1.1s .25s cubic-bezier(.16,1,.3,1) forwards; }

/* banking feed */
.dgw-zbk-sp-feed { display: grid; gap: 9px; }
.dgw-zbk-sp-feedrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dgw-zbk-ink-soft); }
.dgw-zbk-sp-feedrow .dgw-zbk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dgw-zbk-sp-feedrow .dgw-zbk-amt { margin-left: auto; font-weight: 600; }

/* reports chart */
.dgw-zbk-sp-chart svg { width: 100%; height: 120px; display: block; }
.dgw-zbk-sp-line { fill: none; stroke: var(--dgw-zbk-brand); stroke-width: 2.5; stroke-linecap: round; }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: dgw-zbk-draw 1.4s .3s cubic-bezier(.16,1,.3,1) forwards; }
.dgw-zbk-sp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.dgw-zbk-sp-kpi { text-align: center; }
.dgw-zbk-sp-kpi b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; color: var(--dgw-zbk-ink); }
.dgw-zbk-sp-kpi span { font-size: 10.5px; color: var(--dgw-zbk-muted); }

/* approve toggle (bills) */
.dgw-zbk-sp-toggle { width: 38px; height: 21px; border-radius: 100px; background: var(--dgw-zbk-bg-blue); position: relative; transition: background .4s ease; }
.dgw-zbk-sp-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-toggle { background: var(--dgw-zbk-green); }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-toggle::after { transform: translateX(17px); }

/* staggered entrance for tagged elements */
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-anim { animation: dgw-zbk-spUp .5s both; }
/* signature: stamp / tick pop, irn type */
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-pop { animation: dgw-zbk-pop .5s .55s both; }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-irn { animation: dgw-zbk-type 1.1s .35s steps(24) both; }
.dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-qrbox { animation: dgw-zbk-pop .5s .9s both; }
.dgw-zbk-sp-blink { animation: dgw-zbk-blink 1.4s ease-in-out infinite; }

/* showcase responsive */
@media (max-width: 980px) {
  .dgw-zbk-show { grid-template-columns: 1fr; gap: 22px; }
  .dgw-zbk-show-list { flex-direction: column; overflow-x: auto; gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dgw-zbk-show-list::-webkit-scrollbar { display: none; }
  .dgw-zbk-show-item { flex: 0 0 auto; min-width: 210px; }
  .dgw-zbk-show-item.dgw-zbk-is-active { transform: none; }
  .dgw-zbk-show-frame { min-height: 380px; }
}
@media (max-width: 560px) {
  .dgw-zbk-show-tx i { display: none; }
  .dgw-zbk-show-item { min-width: 168px; padding: 13px 14px; }
  .dgw-zbk-show-panel { inset: 18px; }
}
/* showcase reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dgw-zbk-show-item.dgw-zbk-is-active .dgw-zbk-show-bar i,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-anim,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-pop,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-irn,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-qrbox,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-track i,
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-line,
  .dgw-zbk-sp-blink { animation: none !important; }
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-irn { width: 100%; }
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-track i { width: var(--w, 60%); }
  .dgw-zbk-show-panel.dgw-zbk-is-active .dgw-zbk-sp-line { stroke-dashoffset: 0; }
}

/* -------------------------------------------------------------
   4. PAIN — clean card grid (matches §3 "What we set up" style)
   ------------------------------------------------------------- */
.dgw-zbk-pain {
  position: relative; overflow: hidden;
  padding: 96px 0;
  background: linear-gradient(180deg, var(--dgw-zbk-bg-tint) 0%, #ffffff 100%);
}
/* pain variant of the module card: red accent + green "fix" line */
.dgw-zbk-mod-card.dgw-zbk-is-pain::before { background: linear-gradient(90deg, var(--dgw-zbk-red), var(--dgw-zbk-accent)); }
.dgw-zbk-mod-ic.dgw-zbk-is-red {
  background: linear-gradient(135deg, #e0533d, #b8341f);
  box-shadow: 0 10px 24px -10px rgba(224,83,61,0.55);
}
.dgw-zbk-mod-fix {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--dgw-zbk-green); font-weight: 600;
  padding-top: 13px; border-top: 1px dashed var(--dgw-zbk-line);
}
.dgw-zbk-mod-fix svg { flex-shrink: 0; margin-top: 2px; }

.dgw-zbk-pain-bridge {
  text-align: center; margin-top: 50px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 600; color: var(--dgw-zbk-ink); line-height: 1.5;
}
.dgw-zbk-pain-bridge b { color: var(--dgw-zbk-brand); }

/* -------------------------------------------------------------
   5. GST COMPLIANCE
   ------------------------------------------------------------- */
.dgw-zbk-gst { padding: 96px 0; background: linear-gradient(180deg, #fff 0%, var(--dgw-zbk-bg-tint) 100%); }
.dgw-zbk-gst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dgw-zbk-gst-copy h2 { margin-bottom: 18px; }
.dgw-zbk-gst-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.dgw-zbk-gst-item { display: flex; gap: 14px; align-items: flex-start; }
.dgw-zbk-gst-ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; color: var(--dgw-zbk-brand);
  background: var(--dgw-zbk-bg-tint);
  border: 1px solid var(--dgw-zbk-bg-blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.dgw-zbk-gst-item:hover .dgw-zbk-gst-ic {
  color: #fff;
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep));
  border-color: var(--dgw-zbk-brand);
}
.dgw-zbk-gst-item b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--dgw-zbk-ink); display: block; margin-bottom: 2px; }
.dgw-zbk-gst-item span { font-size: 13.5px; line-height: 1.55; color: var(--dgw-zbk-muted); }

/* GST visual card */
.dgw-zbk-gst-card {
  position: relative; background: #fff; border: 1px solid var(--dgw-zbk-line);
  border-radius: 18px; padding: 24px; box-shadow: var(--dgw-zbk-card-shadow);
}
.dgw-zbk-gst-card-glow { position: absolute; inset: -20% 10% auto 10%; height: 60%; background: radial-gradient(60% 100% at 50% 0%, rgba(0,111,218,0.16), transparent 70%); filter: blur(36px); z-index: 0; }
.dgw-zbk-einv {
  position: relative; z-index: 1; border: 1px solid var(--dgw-zbk-line); border-radius: 12px; overflow: hidden;
}
.dgw-zbk-einv-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--dgw-zbk-bg-tint); border-bottom: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-einv-top b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; color: var(--dgw-zbk-ink); }
.dgw-zbk-einv-irn { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zbk-brand); background: rgba(0,111,218,0.08); padding: 4px 9px; border-radius: 6px; }
.dgw-zbk-einv-body { padding: 16px 18px; }
.dgw-zbk-einv-line { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--dgw-zbk-ink-soft); border-bottom: 1px dashed var(--dgw-zbk-line); }
.dgw-zbk-einv-line:last-child { border-bottom: 0; }
.dgw-zbk-einv-line span:first-child { color: var(--dgw-zbk-muted); }
.dgw-zbk-einv-tax { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.dgw-zbk-einv-tax span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--dgw-zbk-muted); background: var(--dgw-zbk-bg-blue); padding: 4px 9px; border-radius: 6px; }
.dgw-zbk-einv-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-einv-total b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; color: var(--dgw-zbk-ink); }
.dgw-zbk-einv-stamp {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: var(--dgw-zbk-green); border: 1.5px solid var(--dgw-zbk-green); border-radius: 8px;
  padding: 5px 10px; transform: rotate(-4deg);
}
.dgw-zbk-gst-qr { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px; background: var(--dgw-zbk-bg-tint); border-radius: 12px; }
.dgw-zbk-gst-qrbox { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; background:
  conic-gradient(from 0deg, #0c1b2e 0 25%, #fff 0 50%, #0c1b2e 0 75%, #fff 0) ;
  background-size: 14px 14px; border: 3px solid #0c1b2e; }
.dgw-zbk-gst-qr p { margin: 0; font-size: 12.5px; color: var(--dgw-zbk-muted); }
.dgw-zbk-gst-qr b { color: var(--dgw-zbk-ink); }

/* -------------------------------------------------------------
   6. MIGRATION (Tally -> Zoho Books)
   ------------------------------------------------------------- */
.dgw-zbk-mig {
  position: relative; overflow: hidden; padding: 92px 0;
  background:
    radial-gradient(900px 520px at 50% -6%, #2a86e6 0%, rgba(42,134,230,0) 60%),
    radial-gradient(700px 460px at 86% 92%, rgba(0,90,170,0.55), rgba(0,90,170,0) 65%),
    linear-gradient(170deg, #0a7bdc 0%, #006fda 42%, #0061c2 100%);
}
.dgw-zbk-mig > .dgw-zbk-container { position: relative; z-index: 3; }
.dgw-zbk-mig-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.dgw-zbk-mig-glow-a { width: 460px; height: 460px; top: -180px; left: -90px; background: rgba(120,190,255,0.38); }
.dgw-zbk-mig-glow-b { width: 440px; height: 440px; bottom: -200px; right: -70px; background: rgba(245,186,49,0.20); }

/* dark-band text overrides */
.dgw-zbk-mig .dgw-zbk-h2 { color: #fff; }
.dgw-zbk-mig .dgw-zbk-h2-grad {
  background: linear-gradient(120deg, #ffe7ad 0%, #f5ba31 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dgw-zbk-mig .dgw-zbk-section-sub { color: rgba(255,255,255,0.80); }
.dgw-zbk-mig .dgw-zbk-mig-step h4 { color: #fff; }
.dgw-zbk-mig .dgw-zbk-mig-step p { color: rgba(255,255,255,0.72); }
.dgw-zbk-mig .dgw-zbk-mig-stepnum {
  color: #fff; background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28);
}
.dgw-zbk-mig .dgw-zbk-mig-step:not(:last-child)::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 4px, transparent 4px 8px);
}
.dgw-zbk-mig .dgw-zbk-mig-arrow-c { background: #fff; color: var(--dgw-zbk-brand); }

/* Migration banner — bright bar over cream body (Zoho-style notice) */
.dgw-zbk-mig-banner {
  max-width: 880px; margin: 0 auto 44px; border-radius: 16px; overflow: hidden;
  border: 1px solid #f1e4c4;
  box-shadow: 0 18px 44px -28px rgba(12,27,46,.4);
}
.dgw-zbk-mig-banner-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep));
  padding: 11px 22px; color: #fff;
}
.dgw-zbk-mig-banner-bar-l {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: .01em;
}
.dgw-zbk-mig-banner-bar-r {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.82);
}
.dgw-zbk-mig-banner-body {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(180deg, #fdf3da, #fbedc8);
  padding: 22px 24px;
}
.dgw-zbk-mig-banner-ic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  color: var(--dgw-zbk-brand); background: #fff;
  border: 1px solid #f1e4c4; box-shadow: 0 6px 16px -10px rgba(12,27,46,.5);
}
.dgw-zbk-mig-banner-txt { flex: 1 1 320px; }
.dgw-zbk-mig-banner-txt b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800;
  color: var(--dgw-zbk-ink); margin-bottom: 3px;
}
.dgw-zbk-mig-banner-txt span { font-size: 13.5px; line-height: 1.55; color: #6b5b39; }
.dgw-zbk-mig-banner-cta {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--dgw-zbk-brand); text-decoration: none;
  padding: 10px 18px; border-radius: 100px; background: #fff; border: 1px solid #f1e4c4;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.dgw-zbk-mig-banner-cta:hover {
  background: var(--dgw-zbk-brand); color: #fff; border-color: var(--dgw-zbk-brand);
  transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(0,111,218,.7);
}
.dgw-zbk-mig-flow {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch;
  max-width: 980px; margin: 0 auto;
}
.dgw-zbk-mig-side { border-radius: 18px; padding: 28px 26px; border: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-mig-before { background: #fff; box-shadow: 0 14px 34px -26px rgba(12,27,46,.45); }
.dgw-zbk-mig-after {
  background: linear-gradient(160deg, var(--dgw-zbk-bg-tint), #fff);
  border-color: rgba(0,111,218,0.25);
  box-shadow: var(--dgw-zbk-card-shadow);
}
.dgw-zbk-mig-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.dgw-zbk-mig-before .dgw-zbk-mig-tag { color: var(--dgw-zbk-muted-2); }
.dgw-zbk-mig-after .dgw-zbk-mig-tag { color: var(--dgw-zbk-brand); }
.dgw-zbk-mig-li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 13.5px; line-height: 1.5; color: var(--dgw-zbk-ink-soft); }
.dgw-zbk-mig-li svg { flex-shrink: 0; margin-top: 2px; }
.dgw-zbk-mig-before .dgw-zbk-mig-li { color: var(--dgw-zbk-muted); }
.dgw-zbk-mig-arrow {
  display: grid; place-items: center; padding: 0 22px;
}
.dgw-zbk-mig-arrow-c {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep));
  box-shadow: 0 16px 34px -12px rgba(0,111,218,0.6);
}
.dgw-zbk-mig-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px;
}
.dgw-zbk-mig-step { position: relative; text-align: center; padding: 0 8px; }
.dgw-zbk-mig-stepnum {
  width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 12px;
  display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  color: var(--dgw-zbk-brand); background: var(--dgw-zbk-bg-blue); border: 1px solid rgba(0,111,218,0.2);
}
.dgw-zbk-mig-step h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--dgw-zbk-ink); margin: 0 0 6px; }
.dgw-zbk-mig-step p { font-size: 13px; line-height: 1.55; color: var(--dgw-zbk-muted); margin: 0; }
.dgw-zbk-mig-step:not(:last-child)::after {
  content: ""; position: absolute; top: 20px; right: -9px; width: 18px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--dgw-zbk-brand-soft) 0 4px, transparent 4px 8px);
}
.dgw-zbk-mig-assure {
  display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 44px; padding: 18px; border-radius: 14px;
  background: var(--dgw-zbk-bg-cream); border: 1px solid #f3e3b8;
  font-size: 14px; color: #6b5a13; text-align: center;
}
.dgw-zbk-mig-assure b { color: #4a3e0d; }

/* -------------------------------------------------------------
   7. WHY DIGIWAH (split, sticky intro)
   ------------------------------------------------------------- */
.dgw-zbk-why { position: relative; overflow: hidden; padding: 96px 0; background: linear-gradient(180deg, #fff 0%, var(--dgw-zbk-bg-tint) 100%); }
.dgw-zbk-why-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(100px); background: rgba(0,111,218,0.1); top: 6%; right: -180px; pointer-events: none; }

/* Implementation statement / ledger — premium build */
.dgw-zbk-ledger-shell {
  position: relative; max-width: 940px; margin: 54px auto 0;
  padding: 1.5px; border-radius: 26px;
  background: linear-gradient(135deg, rgba(0,111,218,0.55) 0%, rgba(245,186,49,0.55) 52%, rgba(0,111,218,0.32) 100%);
  box-shadow: 0 1px 2px rgba(12,27,46,0.05), 0 44px 90px -44px rgba(0,111,218,0.5), 0 20px 44px -32px rgba(12,27,46,0.32);
}
.dgw-zbk-ledger-shell::before {
  content: ""; position: absolute; inset: -34px -16px; z-index: -1; border-radius: 44px;
  background: radial-gradient(58% 60% at 50% 4%, rgba(0,111,218,0.20), transparent 70%),
              radial-gradient(40% 50% at 88% 96%, rgba(245,186,49,0.18), transparent 70%);
  filter: blur(22px); pointer-events: none;
}
.dgw-zbk-ledger {
  position: relative; border-radius: 24.5px; background: #fff; overflow: hidden;
}

/* azure header band */
.dgw-zbk-ledger-head {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 28px; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #0a78dc 0%, #006fda 52%, #0061c2 100%);
}
.dgw-zbk-ledger-head::after {
  content: ""; position: absolute; top: -70%; left: -12%; width: 46%; height: 240%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: rotate(13deg); pointer-events: none;
}
.dgw-zbk-ledger-brand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.dgw-zbk-ledger-mark {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; color: #fff;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 18px -10px rgba(0,0,0,0.5);
}
.dgw-zbk-ledger-id { display: flex; flex-direction: column; line-height: 1.25; }
.dgw-zbk-ledger-id b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: #fff; letter-spacing: -0.01em; }
.dgw-zbk-ledger-id i { font-style: normal; font-size: 10.5px; color: rgba(255,255,255,0.72); letter-spacing: 0.06em; text-transform: uppercase; }
.dgw-zbk-ledger-verify {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.42);
  border-radius: 100px; padding: 7px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.dgw-zbk-ledger-verify svg { stroke: #fff; }
.dgw-zbk-ledger-cols {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px; background: #f7fbff; border-bottom: 1px solid var(--dgw-zbk-line);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--dgw-zbk-muted-2);
}

/* ruled accounting-paper rows */
.dgw-zbk-ledger-rows { position: relative; }
/* .dgw-zbk-ledger-rows::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 64px; width: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(224,83,61,0.22) 10%, rgba(224,83,61,0.22) 90%, transparent);
} */
.dgw-zbk-ledger-row {
  position: relative; z-index: 2; display: grid; grid-template-columns: 42px 1fr auto; gap: 20px; align-items: center;
  padding: 20px 28px; border-bottom: 1px dashed var(--dgw-zbk-line);
  transition: background 0.3s ease;
}
.dgw-zbk-ledger-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--dgw-zbk-brand), var(--dgw-zbk-accent));
  transform: scaleY(0); transform-origin: center; transition: transform 0.35s ease;
}
.dgw-zbk-ledger-row:hover { background: linear-gradient(90deg, rgba(0,111,218,0.05), transparent 60%); }
.dgw-zbk-ledger-row:hover::before { transform: scaleY(1); }
.dgw-zbk-ledger-num {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 27px; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px rgba(0,111,218,0.4); transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
.dgw-zbk-ledger-row:hover .dgw-zbk-ledger-num { color: var(--dgw-zbk-brand); -webkit-text-stroke-color: transparent; }
.dgw-zbk-ledger-main h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: var(--dgw-zbk-ink); margin: 0 0 5px; letter-spacing: -0.01em; }
.dgw-zbk-ledger-main p { font-size: 13.5px; line-height: 1.6; color: var(--dgw-zbk-muted); margin: 0; max-width: 56ch; }
.dgw-zbk-ledger-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--dgw-zbk-brand-deep); background: var(--dgw-zbk-bg-blue);
  border: 1px solid rgba(0,111,218,0.18); border-radius: 8px; padding: 6px 11px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.dgw-zbk-ledger-pill::before {
  content: "✓"; font-size: 11px; font-weight: 800; color: var(--dgw-zbk-green);
}
.dgw-zbk-ledger-row:hover .dgw-zbk-ledger-pill {
  background: linear-gradient(135deg, var(--dgw-zbk-brand), var(--dgw-zbk-brand-deep)); color: #fff;
  border-color: transparent; box-shadow: 0 8px 18px -10px rgba(0,111,218,0.6);
}
.dgw-zbk-ledger-row:hover .dgw-zbk-ledger-pill::before { color: #fff; }

/* deep-azure bottom line */
.dgw-zbk-ledger-total {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 28px; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #00386f 0%, #005bb6 60%, #0a72d4 100%);
}
.dgw-zbk-ledger-total::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: radial-gradient(60% 120% at 80% 120%, rgba(245,186,49,0.22), transparent 60%);
}
.dgw-zbk-ledger-total-tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.dgw-zbk-ledger-total-tx span {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.66);
}
.dgw-zbk-ledger-total-tx b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; color: #fff; line-height: 1.4; max-width: 50ch; letter-spacing: -0.01em; }

/* circular embossed seal (SVG, stays crisp) */
.dgw-zbk-ledger-seal {
  position: relative; z-index: 1; width: 96px; height: 96px; flex-shrink: 0;
  filter: drop-shadow(0 14px 24px rgba(22,160,106,0.55));
}
.dgw-zbk-ledger-seal svg { width: 100%; height: 100%; display: block; }
.dgw-zbk-seal-arc { font-family: 'JetBrains Mono', monospace; font-size: 6.6px; font-weight: 700; letter-spacing: 0.12em; }
.dgw-zbk-seal-spin { transform-origin: 50px 50px; }

/* premium credential chips */
.dgw-zbk-why-creds {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  max-width: 940px; margin: 28px auto 0;
}
.dgw-zbk-why-cred {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--dgw-zbk-ink-soft);
  background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 100px;
  padding: 9px 16px; box-shadow: var(--dgw-zbk-card-shadow);
}
.dgw-zbk-why-cred i {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--dgw-zbk-accent), var(--dgw-zbk-accent-deep));
  color: #fff; font-size: 9px; font-weight: 900;
}
.dgw-zbk-why-cred i::before { content: "✓"; }

/* scroll reveal */
.dgw-zbk-why .dgw-zbk-ledger-row,
.dgw-zbk-why .dgw-zbk-ledger-cols { opacity: 0; transform: translateY(16px); }
.dgw-zbk-why .dgw-zbk-ledger-seal { opacity: 0; transform: scale(0.5) rotate(-18deg); }
.dgw-zbk-why .dgw-zbk-why-cred { opacity: 0; transform: translateY(10px); }
.dgw-zbk-why.dgw-zbk-in .dgw-zbk-ledger-cols,
.dgw-zbk-why.dgw-zbk-in .dgw-zbk-ledger-row {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--d, 0s);
}
.dgw-zbk-why.dgw-zbk-in .dgw-zbk-ledger-seal {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1); transition-delay: 0.6s;
}
.dgw-zbk-why.dgw-zbk-in .dgw-zbk-why-cred {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.4s ease; transition-delay: var(--d, 0s);
}

/* -------------------------------------------------------------
   7B. ZOHO BOOKS CERTIFICATE — highest authority (trophy register)
   ------------------------------------------------------------- */
.dgw-zbk-cert {
  position: relative; overflow: hidden; padding: 104px 0;
  background:
    radial-gradient(620px 420px at 78% 28%, rgba(245,186,49,0.16), transparent 62%),
    linear-gradient(160deg, #0d1d31 0%, #0a1729 48%, #081320 100%);
}
.dgw-zbk-cert-glow { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; }
.dgw-zbk-cert-glow { width: 520px; height: 520px; top: -120px; right: -60px; background: rgba(245,186,49,0.18); }
.dgw-zbk-cert-glow-2 { width: 480px; height: 480px; bottom: -200px; left: -120px; background: rgba(0,111,218,0.22); }
.dgw-zbk-cert .dgw-zbk-container { position: relative; z-index: 2; }
.dgw-zbk-cert-grid {
  display: grid; grid-template-columns: 1fr 0.92fr; gap: 56px; align-items: center;
}

.dgw-zbk-cert-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--dgw-zbk-accent);
  background: rgba(245,186,49,0.10); border: 1px solid rgba(245,186,49,0.30);
  padding: 7px 14px; border-radius: 100px;
}
.dgw-zbk-cert-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -0.025em;
  color: #fff; margin: 18px 0 0;
}
.dgw-zbk-cert-gold {
  background: linear-gradient(120deg, #ffe7ad 0%, #f5ba31 92%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dgw-zbk-cert-sub {
  font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.74); margin: 16px 0 0; max-width: 520px;
}
.dgw-zbk-cert-sub b { color: #fff; font-weight: 700; }

.dgw-zbk-cert-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 30px 0 0;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.dgw-zbk-cert-facts > div {
  padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dgw-zbk-cert-facts > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
.dgw-zbk-cert-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.dgw-zbk-cert-facts dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 5px;
}
.dgw-zbk-cert-facts dd {
  margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.4;
}
.dgw-zbk-cert-mono { font-family: 'JetBrains Mono', monospace !important; font-weight: 700 !important; color: var(--dgw-zbk-accent) !important; letter-spacing: 0.02em; }

.dgw-zbk-cert-sign {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 22px;
  font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.6);
}
.dgw-zbk-cert-sign svg { color: var(--dgw-zbk-accent); flex-shrink: 0; margin-top: 2px; }
.dgw-zbk-cert-sign b { color: rgba(255,255,255,0.9); font-weight: 700; }

/* certificate display */
.dgw-zbk-cert-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.dgw-zbk-cert-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  padding: 7px 14px; border-radius: 100px; backdrop-filter: blur(4px);
}
.dgw-zbk-cert-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2ec28a;
  box-shadow: 0 0 0 4px rgba(46,194,138,0.22);
}
.dgw-zbk-cert-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  padding: 10px; background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(245,186,49,0.10);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2.5deg);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease;
  max-width: 420px;
}
.dgw-zbk-cert-frame:hover {
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow: 0 48px 100px -36px rgba(0,0,0,0.85), 0 0 0 1px rgba(245,186,49,0.22);
}
.dgw-zbk-cert-img { display: block; width: 100%; height: auto; border-radius: 7px; }

@media (max-width: 900px) {
  .dgw-zbk-cert { padding: 72px 0; }
  .dgw-zbk-cert-grid { grid-template-columns: 1fr; gap: 40px; }
  .dgw-zbk-cert-stage { order: -1; }
  .dgw-zbk-cert-frame { transform: none; max-width: 300px; }
  .dgw-zbk-cert-frame:hover { transform: translateY(-4px); }
	.dgw-zbk-cert-sign{
		display: flex;
		flex-direction: column;
	}
}
@media (max-width: 480px) {
  .dgw-zbk-cert-facts { grid-template-columns: 1fr; }
  .dgw-zbk-cert-facts > div:nth-child(odd) { border-right: 0; }
  .dgw-zbk-cert-facts > div { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .dgw-zbk-cert-facts > div:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------
   8. PRICING REFERENCE
   ------------------------------------------------------------- */
.dgw-zbk-pricing { padding: 96px 0; background: #fff; }
.dgw-zbk-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dgw-zbk-price-card {
  position: relative; background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 16px;
  padding: 26px 24px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.dgw-zbk-price-card:hover { transform: translateY(-4px); box-shadow: var(--dgw-zbk-card-shadow-h); }
.dgw-zbk-price-card.dgw-zbk-is-pop { border-color: rgba(0,111,218,0.4); box-shadow: var(--dgw-zbk-card-shadow); }
.dgw-zbk-price-pop {
  position: absolute; top: -11px; left: 24px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #fff; background: linear-gradient(135deg, var(--dgw-zbk-accent), var(--dgw-zbk-accent-deep)); padding: 4px 12px; border-radius: 100px;
}
.dgw-zbk-price-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700; color: var(--dgw-zbk-ink); }
.dgw-zbk-price-amt { font-family: 'Plus Jakarta Sans', sans-serif; margin: 12px 0 4px; }
.dgw-zbk-price-amt b { font-size: 32px; font-weight: 800; color: var(--dgw-zbk-ink); }
.dgw-zbk-price-amt span { font-size: 13px; color: var(--dgw-zbk-muted); }
.dgw-zbk-price-cycle { font-size: 12px; color: var(--dgw-zbk-muted-2); }
.dgw-zbk-price-desc { font-size: 13px; line-height: 1.55; color: var(--dgw-zbk-muted); margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--dgw-zbk-line); }
.dgw-zbk-price-note {
  text-align: center; margin-top: 34px; font-size: 13px; color: var(--dgw-zbk-muted);
  max-width: 660px; margin-left: auto; margin-right: auto; line-height: 1.6;
}
.dgw-zbk-price-note b { color: var(--dgw-zbk-ink); }

/* -------------------------------------------------------------
   9. INTEGRATIONS (logo marquee)
   ------------------------------------------------------------- */
.dgw-zbk-integ { padding: 90px 0; background: linear-gradient(180deg, var(--dgw-zbk-bg-tint) 0%, #fff 100%); overflow: hidden; }
.dgw-zbk-marquee { position: relative; margin-top: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dgw-zbk-marquee-row { display: flex; gap: 16px; width: max-content; animation: dgw-zbk-marquee 36s linear infinite; }
.dgw-zbk-marquee-row.dgw-zbk-is-rev { animation-direction: reverse; animation-duration: 44s; margin-top: 16px; }
.dgw-zbk-marquee:hover .dgw-zbk-marquee-row { animation-play-state: paused; }
.dgw-zbk-logo {
  display: grid; place-items: center; width: 74px; height: 74px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--dgw-zbk-line); border-radius: 16px;
  box-shadow: 0 6px 18px -12px rgba(12,27,46,0.3); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dgw-zbk-logo:hover { transform: translateY(-4px); box-shadow: var(--dgw-zbk-card-shadow-h); }
.dgw-zbk-logo img { width: 38px; height: 38px; object-fit: contain; }
.dgw-zbk-integ-foot { text-align: center; margin-top: 34px; font-size: 13.5px; color: var(--dgw-zbk-muted); }
.dgw-zbk-integ-foot b { color: var(--dgw-zbk-ink); }

/* -------------------------------------------------------------
   10. FAQ
   ------------------------------------------------------------- */
.dgw-zbk-faq { padding: 96px 0; background: #fff; }
.dgw-zbk-faq-list { max-width: 800px; margin: 0 auto; }
.dgw-zbk-faq-item { border-bottom: 1px solid var(--dgw-zbk-line); }
.dgw-zbk-faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16.5px; font-weight: 600; color: var(--dgw-zbk-ink);
}
.dgw-zbk-faq-item summary::-webkit-details-marker { display: none; }
.dgw-zbk-faq-icon { flex-shrink: 0; width: 26px; height: 26px; position: relative; transition: transform 0.3s ease; }
.dgw-zbk-faq-icon::before, .dgw-zbk-faq-icon::after { content: ""; position: absolute; background: var(--dgw-zbk-brand); border-radius: 2px; }
.dgw-zbk-faq-icon::before { top: 12px; left: 4px; right: 4px; height: 2px; }
.dgw-zbk-faq-icon::after { left: 12px; top: 4px; bottom: 4px; width: 2px; transition: transform 0.3s ease; }
.dgw-zbk-faq-item[open] .dgw-zbk-faq-icon::after { transform: scaleY(0); }
.dgw-zbk-faq-answer { padding: 0 4px 24px; font-size: 14.5px; line-height: 1.7; color: var(--dgw-zbk-muted); max-width: 720px; }

/* -------------------------------------------------------------
   11. FINAL CTA
   ------------------------------------------------------------- */
.dgw-zbk-cta { position: relative; overflow: hidden; padding: 100px 0;
  background: linear-gradient(135deg, var(--dgw-zbk-brand) 0%, var(--dgw-zbk-brand-deep) 100%); }
.dgw-zbk-cta-grid { position: absolute; inset: 0; background-image:
  linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 50px 50px; -webkit-mask-image: radial-gradient(700px 400px at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(700px 400px at 50% 50%, #000, transparent 75%); pointer-events: none; }
.dgw-zbk-cta-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.dgw-zbk-cta-glow-1 { width: 420px; height: 420px; top: -120px; left: 8%; background: rgba(245,186,49,0.3); }
.dgw-zbk-cta-glow-2 { width: 460px; height: 460px; bottom: -160px; right: 6%; background: rgba(79,153,223,0.4); }
.dgw-zbk-cta-inner { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }
.dgw-zbk-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); border-radius: 100px; padding: 7px 16px;
}
.dgw-zbk-cta-eyebrow .dgw-zbk-eyebrow-dot { background: var(--dgw-zbk-accent); box-shadow: 0 0 0 4px rgba(245,186,49,0.3); }
.dgw-zbk-cta h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: #fff; margin: 0 0 18px; }
.dgw-zbk-cta-em { background: linear-gradient(120deg, #ffe7ad, var(--dgw-zbk-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dgw-zbk-cta p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #d6e7fb; margin: 0 0 30px; }
.dgw-zbk-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.dgw-zbk-cta-assure { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.dgw-zbk-cta-assure span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #d6e7fb; }
.dgw-zbk-cta-assure svg { color: #9fe3c2; }
.dgw-zbk-cta-direct { margin-top: 26px; font-size: 14px; color: #bcd6f4; }
.dgw-zbk-cta-direct a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); }

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
.dgw-zbk-footer { background: #0a1322; padding: 40px 0; }
.dgw-zbk-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dgw-zbk-footer-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; color: #fff; text-decoration: none; letter-spacing: -0.03em; }
.dgw-zbk-footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.dgw-zbk-footer-links a { font-size: 14px; color: #93a4bd; text-decoration: none; transition: color 0.2s ease; }
.dgw-zbk-footer-links a:hover { color: #fff; }
.dgw-zbk-footer-copy { font-size: 12.5px; color: #6c8099; }

/* -------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------- */
@keyframes dgw-zbk-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }
@keyframes dgw-zbk-marqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dgw-zbk-fill { from { width: 0; } to { width: 100%; } }
@keyframes dgw-zbk-spUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dgw-zbk-pop { 0% { opacity: 0; transform: scale(1.5) rotate(-8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes dgw-zbk-type { from { width: 0; } to { width: 100%; } }
@keyframes dgw-zbk-draw { to { stroke-dashoffset: 0; } }
@keyframes dgw-zbk-trackfill { from { width: 0; } to { width: var(--w, 60%); } }
@keyframes dgw-zbk-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes dgw-zbk-dashIn { from { opacity: 0; transform: translateY(-26px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dgw-zbk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .dgw-zbk-mod-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-zbk-gst-grid { grid-template-columns: 1fr; gap: 40px; }
  .dgw-zbk-price-grid { grid-template-columns: repeat(2, 1fr); }
  .dgw-zbk-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	span.dgw-zbk-ledger-mark {
    display: none;
}
	
  .dgw-zbk-container { padding: 0 22px; }
  .dgw-zbk-hero { padding: 84px 0 64px; }
  .dgw-zbk-modules, .dgw-zbk-pain, .dgw-zbk-gst, .dgw-zbk-mig, .dgw-zbk-why, .dgw-zbk-pricing, .dgw-zbk-faq { padding: 64px 0; }
  .dgw-zbk-mod-grid { grid-template-columns: 1fr; }
  .dgw-zbk-price-grid { grid-template-columns: 1fr; }
  .dgw-zbk-mig-flow { grid-template-columns: 1fr; }
  .dgw-zbk-mig-arrow { padding: 18px 0; transform: rotate(90deg); }
  .dgw-zbk-mig-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .dgw-zbk-mig-step:not(:last-child)::after { display: none; }
  .dgw-zbk-ledger-head, .dgw-zbk-ledger-cols, .dgw-zbk-ledger-row, .dgw-zbk-ledger-total { padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; align-items: flex-start; }
  .dgw-zbk-ledger-row { grid-template-columns: auto 1fr; gap: 6px 14px; }
  .dgw-zbk-ledger-pill { grid-column: 2; justify-self: start; margin-top: 4px; }
  .dgw-zbk-ledger-total { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dgw-zbk-console-split { grid-template-columns: 1fr; }
  .dgw-zbk-console-panel + .dgw-zbk-console-panel { border-left: 0; border-top: 1px solid rgba(255,255,255,0.06); }
  .dgw-zbk-kpis { grid-template-columns: 1fr 1fr; }
  .dgw-zbk-kpi:nth-child(2n) { border-right: 0; }
}

/* -------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dgw-zbk-eyebrow-dot, .dgw-zbk-hero-row, .dgw-zbk-dash, .dgw-zbk-marquee-row {
    animation: none !important;
  }
  .dgw-zbk-btn, .dgw-zbk-mod-card, .dgw-zbk-ledger-row, .dgw-zbk-ledger-pill, .dgw-zbk-price-card, .dgw-zbk-logo {
    transition: none !important;
  }
}







/* ============================================================
   DIGIWAH — CASE STUDY: OAS ENERGY (Zoho CRM + Creator)
   Page-scoped prefix: OASdgw-cs- / OASdgw-oas-  (reuses OASdgw-nav-* / OASdgw-footer-*)
   Client accent flipped teal -> OAS cyan via --ct-* vars.
   ============================================================ */

.oasPage {
  /* Digiwah brand (page chrome) */
  --brand: #010ED0;
  --brand-light: #7c8fff;
  --accent: #FF7A45;
  --accent-soft: #ffb284;
  --navy-deep: #050a2e;
  --navy: #0a1145;
  --ink: #0a0f2c;
  --muted: #6b7280;
  --line: rgba(255,255,255,0.08);

  /* OAS Energy brand (client story accent) — cyan */
  --ct-teal: #16a9e6;
  --ct-teal-d: #0c7cb5;
  --ct-teal-dd: #07567f;
  --ct-green: #5cc8f2;
  --ct-mint: #cfeffb;
  --oas-ink: #0c2233;
  --oas-violet: #7c5cff;

  /* App/product palette */
  --cl-navy: #0c1f3d;
  --cl-sky: #0ea5e9;
  --cl-indigo: #6366f1;
  --cl-bg: #f1f5f9;
  --cl-border: #e2e8f0;
  --cl-text: #0f172a;
  --cl-muted: #64748b;
  --cl-ok: #10b981;
  --cl-warn: #f59e0b;
  --cl-danger: #ef4444;

  --surf-light: #f5f8fc;
  --surf-white: #ffffff;
}

.oasPage * { margin: 0; padding: 0; box-sizing: border-box; }
.oasPage { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
.oasPage h1, .oasPage h2, .oasPage h3, .oasPage h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
.oasPage a { color: inherit; text-decoration: none; }
.oasPage code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: rgba(99,102,241,0.12); color: #4338ca; padding: 1px 6px; border-radius: 5px; }

/* ============================================================
   NAVBAR (inherited)
   ============================================================ */
.OASdgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.OASdgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.OASdgw-nav-logo { display: flex; align-items: center; }
.OASdgw-nav-logo-img { height: 38px; width: auto; display: block; }
.OASdgw-nav-links { display: flex; gap: 30px; }
.OASdgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.OASdgw-nav-links a:hover { color: #fff; }
.OASdgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.OASdgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
.OASdgw-cs-sec-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.OASdgw-cs-kicker { display: inline-block; font: 700 12px/1 'Inter'; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 18px; }
.OASdgw-cs-kicker--teal { color: var(--ct-teal); }
.OASdgw-cs-kicker--warn { color: #d97706; }
.OASdgw-cs-kicker--light { color: var(--brand-light); }
.OASdgw-cs-kicker--center { display: block; text-align: center; }
.OASdgw-cs-h2 { font: 800 clamp(28px, 4vw, 44px)/1.12 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-h2--light { color: #fff; }
.OASdgw-cs-p { font: 400 17px/1.7 'Inter'; color: #475569; margin-top: 18px; max-width: 640px; }
.OASdgw-cs-p--light { color: rgba(205,213,255,0.78); }
.OASdgw-cs-p--center { margin-left: auto; margin-right: auto; }
.OASdgw-cs-p strong { color: var(--ink); font-weight: 700; }
.OASdgw-cs-p--light strong { color: #fff; }

.OASdgw-cs-how-head { max-width: 720px; margin-bottom: 48px; }
.OASdgw-cs-how-head--center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }

.OASdgw-cs-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cl-ok); display: inline-block; box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: dgwCsPulse 2.2s infinite; }
@keyframes dgwCsPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

.OASreveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.OASreveal.OASis-in { opacity: 1; transform: none; }

.OASdgw-cs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.OASdgw-cs-dot--info { background: var(--cl-sky); }
.OASdgw-cs-dot--warn { background: var(--cl-warn); }
.OASdgw-cs-dot--ok { background: var(--cl-ok); }
.OASdgw-cs-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 9.5px/1 'Inter'; }

/* Buttons */
.OASdgw-cs-btn { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1 'Inter'; padding: 15px 26px; border-radius: 10px; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
.OASdgw-cs-btn--onbrand { background: #fff; color: var(--ct-teal-d); box-shadow: 0 10px 26px -10px rgba(0,0,0,0.4); }
.OASdgw-cs-btn--onbrand:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,0,0,0.5); }
.OASdgw-cs-btn--onbrand-ghost { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.OASdgw-cs-btn--onbrand-ghost:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.OASdgw-cs-btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(255,122,69,0.4); }
.OASdgw-cs-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,122,69,0.55); }
.OASdgw-cs-btn--ghost { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(124,143,255,0.3); }
.OASdgw-cs-btn--ghost:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* ============================================================
   1 · HERO (Climat teal brand band)
   ============================================================ */
.OASdgw-cs-hero { position: relative; overflow: hidden; padding: 150px 0 96px; text-align: center;
  background: linear-gradient(160deg, var(--ct-teal) 0%, var(--ct-teal-d) 55%, var(--ct-teal-dd) 100%); }
.OASdgw-cs-hero-mesh { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 10%, rgba(84,184,127,0.4) 0%, transparent 45%),
              radial-gradient(ellipse at 85% 20%, rgba(199,245,236,0.18) 0%, transparent 40%),
              radial-gradient(ellipse at 70% 90%, rgba(0,60,53,0.5) 0%, transparent 55%); }
.OASdgw-cs-hero-grid-floor { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); }
.OASdgw-cs-hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.OASdgw-cs-hero-glow--1 { width: 520px; height: 520px; top: -160px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(84,184,127,0.3), transparent 70%); }
.OASdgw-cs-hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 32px; }
.OASdgw-cs-hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.OASdgw-cs-tag { font: 700 11.5px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: #eafff9; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28); padding: 8px 13px; border-radius: 100px; }
.OASdgw-cs-tag--case { background: #fff; color: var(--ct-teal-d); border-color: #fff; }
.OASdgw-cs-hero-logocard { display: inline-flex; background: #fff; padding: 18px 26px; border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.45); margin-bottom: 30px; }
.OASdgw-cs-hero-logocard img { height: 56px; width: auto; display: block; }
.OASdgw-cs-hero-title { font: 800 clamp(34px, 5.4vw, 60px)/1.05 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.03em; }
.OASdgw-cs-hl { position: relative; color: #fff; background: linear-gradient(100deg, #eafff9, var(--ct-mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.OASdgw-cs-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 7px; background: rgba(199,245,236,0.45); border-radius: 4px; z-index: -1; }
.OASdgw-cs-hero-lead { font: 400 18px/1.7 'Inter'; color: rgba(234,255,249,0.9); margin: 22px auto 0; max-width: 600px; }
.OASdgw-cs-hero-lead strong { color: #fff; font-weight: 700; }
.OASdgw-cs-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 38px auto 0; max-width: 720px; }
.OASdgw-cs-hstat { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 18px 12px; backdrop-filter: blur(6px); }
.OASdgw-cs-hstat-n { font: 800 24px/1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-cs-hstat-n--live { display: inline-flex; align-items: center; gap: 7px; }
.OASdgw-cs-hstat-l { font: 600 11.5px/1.3 'Inter'; color: rgba(234,255,249,0.72); margin-top: 8px; letter-spacing: 0.02em; }
.OASdgw-cs-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* ============================================================
   2 · ABOUT THE CLIENT (light)
   ============================================================ */
.OASdgw-cs-about { background: var(--surf-white); padding: 96px 0; }
.OASdgw-cs-about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.OASdgw-cs-tagline { display: flex; align-items: center; gap: 12px; margin: 24px 0; padding: 16px 20px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(22,169,230,0.08), transparent); border-left: 3px solid var(--ct-teal);
  font: 600 17px/1.4 'Plus Jakarta Sans'; color: var(--ct-teal-d); }
.OASdgw-cs-tagline svg { color: var(--ct-teal); flex-shrink: 0; }
.OASdgw-cs-about-copy em { font-style: normal; color: var(--ct-teal-d); font-weight: 600; }
.OASdgw-cs-about-facts { background: var(--surf-light); border: 1px solid #e7edf5; border-radius: 20px; padding: 14px 22px; }
.OASdgw-cs-fact { display: flex; align-items: center; gap: 15px; padding: 16px 0; border-bottom: 1px solid #e7edf5; }
.OASdgw-cs-fact:last-of-type { border-bottom: none; }
.OASdgw-cs-fact-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(22,169,230,0.1); color: var(--ct-teal-d); }
.OASdgw-cs-fact-ico svg { width: 21px; height: 21px; }
.OASdgw-cs-fact-l { font: 700 10.5px/1 'Inter'; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.OASdgw-cs-fact-v { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-fact-v span { font: 500 13px 'Inter'; color: var(--muted); }
.OASdgw-cs-about-brands { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 10px; }
.OASdgw-cs-about-brands span { font: 600 12px/1 'Inter'; color: var(--ct-teal-d); background: rgba(22,169,230,0.08); border: 1px solid rgba(22,169,230,0.18); padding: 7px 12px; border-radius: 7px; }

/* ============================================================
   3 · CHALLENGE (light tinted)
   ============================================================ */
.OASdgw-cs-challenge { background: var(--surf-light); padding: 100px 0; }
.OASdgw-cs-broken { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 6px; padding: 26px; margin-bottom: 44px;
  background: #fff; border: 1px solid #e7edf5; border-radius: 18px; box-shadow: 0 2px 4px rgba(10,17,69,0.03); }
.OASdgw-cs-broken-step { display: inline-flex; align-items: center; gap: 9px; font: 600 13.5px/1 'Inter'; color: #334155; background: var(--surf-light); border: 1px solid #e2e8f0; padding: 11px 14px; border-radius: 10px; }
.OASdgw-cs-broken-ico { color: var(--cl-muted); display: inline-flex; }
.OASdgw-cs-broken-ico svg { width: 18px; height: 18px; }
.OASdgw-cs-broken-arr { color: #cbd5e1; font-size: 17px; font-weight: 700; }
.OASdgw-cs-broken-arr--late { color: var(--cl-danger); }
.OASdgw-cs-broken-gap { font: 700 11px/1 'Inter'; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cl-danger); background: rgba(239,68,68,0.08); border: 1px dashed rgba(239,68,68,0.4); padding: 9px 12px; border-radius: 100px; }
.OASdgw-cs-broken-step--late { color: var(--cl-danger); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
.OASdgw-cs-broken-step--late .OASdgw-cs-broken-ico { color: var(--cl-danger); }

.OASdgw-cs-painwall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.OASdgw-cs-pain-card { background: #fff; border: 1px solid #e7edf5; border-radius: 14px; padding: 24px 20px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.OASdgw-cs-pain-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -20px rgba(10,17,69,0.28); border-color: #dbe3ef; }
.OASdgw-cs-pain-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(245,158,11,0.12); color: #d97706; margin-bottom: 14px; }
.OASdgw-cs-pain-ico svg { width: 22px; height: 22px; }
.OASdgw-cs-pain-t { font: 700 16px/1.2 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 7px; }
.OASdgw-cs-pain-d { font: 400 13.5px/1.55 'Inter'; color: var(--muted); }

.OASdgw-cs-pull { margin-top: 40px; max-width: 760px; position: relative; padding: 22px 26px 22px 52px; border-left: 3px solid var(--accent);
  background: linear-gradient(100deg, rgba(255,122,69,0.06), transparent); border-radius: 0 12px 12px 0; font: 500 19px/1.6 'Inter'; color: #334155; }
.OASdgw-cs-pull-mark { position: absolute; top: 20px; left: 16px; font: 800 40px/0 'Plus Jakarta Sans'; color: var(--accent-soft); opacity: 0.55; }
.OASdgw-cs-pull strong { color: var(--ink); font-weight: 700; }
.OASdgw-cs-pull cite { display: block; margin-top: 12px; font: 600 13.5px/1 'Inter'; font-style: normal; color: var(--muted); }

/* ============================================================
   4 · SOLUTION (dark)
   ============================================================ */
.OASdgw-cs-solution { padding: 100px 0; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 80% 0%, rgba(22,169,230,0.16) 0%, transparent 55%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
.OASdgw-cs-sol-head { max-width: 760px; }
.OASdgw-cs-systems { display: grid; grid-template-columns: 1fr 1.3fr 1.05fr 1.3fr 1fr; gap: 10px; align-items: stretch; margin-top: 54px; }
.OASdgw-cs-sys { background: rgba(255,255,255,0.04); border: 1px solid rgba(124,143,255,0.2); border-radius: 16px; padding: 24px 22px; backdrop-filter: blur(6px); }
.OASdgw-cs-sys--core { background: linear-gradient(160deg, rgba(22,169,230,0.2), rgba(92,200,242,0.12)); border-color: rgba(92,200,242,0.5); box-shadow: 0 0 40px -10px rgba(22,169,230,0.4); animation: dgwCoreGlow 2.8s ease-in-out infinite; }
@keyframes dgwCoreGlow { 0%,100% { box-shadow: 0 0 40px -14px rgba(22,169,230,0.55); } 50% { box-shadow: 0 0 56px -6px rgba(22,169,230,0.9); } }
.OASdgw-cs-sys-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); color: var(--brand-light); margin-bottom: 14px; }
.OASdgw-cs-sys-ico svg { width: 22px; height: 22px; }
.OASdgw-cs-sys-ico--core { background: linear-gradient(135deg, var(--ct-teal), var(--ct-green)); color: #fff; font: 800 18px/1 'Plus Jakarta Sans'; }
.OASdgw-cs-sys-tag { font: 700 10px/1 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(124,143,255,0.8); margin-bottom: 9px; }
.OASdgw-cs-sys--core .OASdgw-cs-sys-tag { color: var(--ct-mint); }
.OASdgw-cs-sys-name { font: 800 21px/1.1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-cs-sys-note { font: 500 13px/1.4 'Inter'; color: rgba(205,213,255,0.62); margin-top: 7px; }
/* --- animated flow lanes --- */
.OASdgw-cs-flowlane { position: relative; display: flex; align-items: center; min-width: 110px; }
.OASdgw-cs-flowtrack { width: 100%; height: 3px; border-radius: 3px;
  background-image: linear-gradient(90deg, rgba(124,143,255,0.55) 0 52%, transparent 52% 100%);
  background-size: 15px 3px; background-repeat: repeat-x; animation: dgwDash 0.7s linear infinite; }
@keyframes dgwDash { to { background-position: 15px 0; } }

.OASdgw-cs-flowdot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--cl-sky); box-shadow: 0 0 11px 1px var(--cl-sky); opacity: 0; animation: dgwDotGo 2.6s linear infinite; animation-delay: var(--d, 0s); }
@keyframes dgwDotGo { 0% { left: -3%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: 103%; opacity: 0; } }
.OASdgw-cs-flowdot--ok { background: var(--cl-ok); box-shadow: 0 0 11px 1px var(--cl-ok); }
.OASdgw-cs-flowdot--back { margin-top: 3px; background: var(--ct-mint); box-shadow: 0 0 11px 1px rgba(199,245,236,0.8); animation-name: dgwDotBack; animation-duration: 3.1s; }
@keyframes dgwDotBack { 0% { left: 103%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: -3%; opacity: 0; } }

.OASdgw-cs-flowtruck { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: var(--accent-soft); animation: dgwTruck 3.6s linear infinite; }
.OASdgw-cs-flowtruck svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 4px 8px rgba(255,122,69,0.45)); animation: dgwTruckBob 0.5s ease-in-out infinite alternate; }
@keyframes dgwTruck { 0% { left: -14%; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes dgwTruckBob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }

.OASdgw-cs-flowchevrons { position: absolute; right: -1px; top: 50%; transform: translateY(-50%); display: flex; }
.OASdgw-cs-flowchevrons i { width: 6px; height: 6px; margin-left: -3px; border-top: 2px solid var(--brand-light); border-right: 2px solid var(--brand-light); transform: rotate(45deg); opacity: 0.25; animation: dgwChev 1.4s ease-in-out infinite; }
.OASdgw-cs-flowchevrons i:nth-child(2) { animation-delay: 0.16s; }
.OASdgw-cs-flowchevrons i:nth-child(3) { animation-delay: 0.32s; }
.OASdgw-cs-flowchevrons--ok i { border-color: var(--cl-ok); }
@keyframes dgwChev { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

.OASdgw-cs-flowlabel { position: absolute; left: 50%; transform: translateX(-50%); top: calc(50% - 30px); font: 600 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(205,213,255,0.6); white-space: nowrap; }
.OASdgw-cs-flowlabel--back { top: auto; bottom: calc(50% - 30px); color: var(--ct-mint); opacity: 0.85; }

/* ============================================================
   5 · ANIMATED WALKTHROUGH (centerpiece)
   ============================================================ */
.OASdgw-cs-walk { padding: 100px 0; background: var(--surf-light); }
.OASdgw-cs-walk-stage { display: grid; grid-template-columns: 350px 1fr; gap: 30px; align-items: start; }

/* step rail */
.OASdgw-cs-walk-rail { position: relative; padding-left: 4px; }
.OASdgw-cs-walk-rail::before { content: ""; position: absolute; left: 26px; top: 22px; bottom: 22px; width: 2px; background: #dbe3ef; border-radius: 2px; }
.OASdgw-cs-walk-railfill { position: absolute; left: 26px; top: 22px; bottom: 22px; width: 2px; }
.OASdgw-cs-walk-railfill span { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--cl-sky), var(--cl-indigo)); border-radius: 2px; transition: height 0.5s ease; }
.OASdgw-cs-wstep { position: relative; z-index: 2; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; font-family: inherit; }
.OASdgw-cs-wstep:hover { background: rgba(255,255,255,0.6); }
.OASdgw-cs-wstep.OASis-active { background: #fff; border-color: #e2e8f0; box-shadow: 0 12px 28px -16px rgba(10,17,69,0.3); }
.OASdgw-cs-wstep-no { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 15px/1 'Plus Jakarta Sans'; color: var(--cl-muted); background: #fff; border: 1px solid #e2e8f0; transition: all 0.25s; }
.OASdgw-cs-wstep.OASis-active .OASdgw-cs-wstep-no { background: linear-gradient(140deg, var(--cl-sky), var(--cl-indigo)); color: #fff; border-color: transparent; }
.OASdgw-cs-wstep-tx { display: flex; flex-direction: column; gap: 3px; }
.OASdgw-cs-wstep-tx strong { font: 700 14.5px/1.25 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-wstep-tx span { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); }

/* screen */
.OASdgw-cs-walk-screen { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 30px 70px -36px rgba(10,17,69,0.4); overflow: hidden; min-height: 430px; }
.OASdgw-cs-walk-screenbar { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid #eef2f7; background: #f8fafc; }
.OASdgw-cs-wdot { width: 10px; height: 10px; border-radius: 50%; background: #d7deea; }
.OASdgw-cs-wdot:nth-child(1) { background: #f1a7a0; } .OASdgw-cs-wdot:nth-child(2) { background: #f3cf8a; } .OASdgw-cs-wdot:nth-child(3) { background: #a9dcae; }
.OASdgw-cs-walk-screenlabel { margin-left: 8px; font: 600 12px/1 'Inter'; color: var(--cl-muted); }

.OASdgw-cs-scene { position: absolute; inset: 0; top: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.OASdgw-cs-scene.OASis-active { opacity: 1; visibility: visible; transform: none; position: relative; }
.OASdgw-cs-scene-cap { font: 700 10.5px/1 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cl-muted); }

/* Scene 1 — Unleashed order + DELIVERY stamp */
.OASdgw-cs-ucard { width: 320px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; padding: 16px 18px; box-shadow: 0 8px 24px -14px rgba(10,17,69,0.3); }
.OASdgw-cs-ucard-head { display: flex; justify-content: space-between; align-items: center; font: 700 14px/1 'JetBrains Mono', monospace; color: var(--cl-navy); }
.OASdgw-cs-ustatus { font: 700 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); background: #eef2f7; padding: 5px 9px; border-radius: 100px; }
.OASdgw-cs-ucard-cust { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--cl-text); margin: 10px 0 12px; }
.OASdgw-cs-uline { display: flex; justify-content: space-between; font: 500 12.5px/1.4 'Inter'; color: #475569; padding: 6px 0; border-top: 1px dashed #eef2f7; }
.OASdgw-cs-uline span:last-child { color: var(--cl-muted); font-family: 'JetBrains Mono', monospace; }
.OASdgw-cs-ucard-foot { font: 500 11.5px/1.3 'Inter'; color: var(--cl-muted); margin-top: 12px; }
.OASdgw-cs-stamp { font: 800 22px/1 'Plus Jakarta Sans'; letter-spacing: 0.1em; color: var(--cl-ok); border: 3px solid var(--cl-ok); border-radius: 10px; padding: 8px 16px; transform: rotate(-9deg) scale(0); opacity: 0; }
.OASdgw-cs-scene.OASis-active[data-scene="0"] .OASdgw-cs-stamp { animation: dgwStampIn 0.6s 0.5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes dgwStampIn { 0% { transform: rotate(-9deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } }

/* shared flow nodes (scenes 2 + 6) */
.OASdgw-cs-wflow { display: flex; align-items: center; gap: 10px; }
.OASdgw-cs-wnode { font: 700 12.5px/1 'Inter'; color: #fff; padding: 11px 16px; border-radius: 10px; white-space: nowrap; }
.OASdgw-cs-wnode--ext { background: #64748b; }
.OASdgw-cs-wnode--core { background: linear-gradient(135deg, var(--ct-teal), var(--ct-green)); }
.OASdgw-cs-wnode--down { background: var(--cl-ok); }
.OASdgw-cs-wpipe { position: relative; width: 70px; height: 2px; background: #dbe3ef; border-radius: 2px; }
.OASdgw-cs-wpacket { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--cl-sky); transform: translate(-50%,-50%); box-shadow: 0 0 10px var(--cl-sky); opacity: 0; }
.OASdgw-cs-wpacket--ok { background: var(--cl-ok); box-shadow: 0 0 10px var(--cl-ok); }
.OASdgw-cs-scene.OASis-active[data-scene="1"] .OASdgw-cs-wpacket { animation: dgwPacket 1.3s 0.3s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-wpacket { animation: dgwPacket 1.1s 0.3s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-wpacket--d2 { animation-delay: 0.9s; }
@keyframes dgwPacket { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.OASdgw-cs-jobcard { width: 300px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; padding: 15px 17px; box-shadow: 0 8px 24px -14px rgba(10,17,69,0.3); transform: scale(0.85); opacity: 0; }
.OASdgw-cs-scene.OASis-active[data-scene="1"] .OASdgw-cs-jobcard { animation: dgwPop 0.6s 0.9s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes dgwPop { to { transform: scale(1); opacity: 1; } }
.OASdgw-cs-jobcard-head { display: flex; align-items: center; gap: 8px; font: 700 12px/1 'JetBrains Mono', monospace; color: var(--cl-muted); }
.OASdgw-cs-jobcard-name { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--cl-navy); margin: 8px 0 4px; }
.OASdgw-cs-jobcard-meta { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); }
.OASdgw-cs-zeropill { font: 700 12.5px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); padding: 9px 15px; border-radius: 100px; opacity: 0; }
.OASdgw-cs-scene.OASis-active[data-scene="1"] .OASdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.5s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="2"] .OASdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.6s ease forwards; }
@keyframes dgwFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Scene 3 — mini board with flying card */
.OASdgw-cs-miniboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 380px; max-width: 100%; }
.OASdgw-cs-mb-col { background: var(--cl-bg); border-radius: 10px; padding: 10px; min-height: 130px; }
.OASdgw-cs-mb-col--rail { background: #eef2f7; }
.OASdgw-cs-mb-tag { display: flex; align-items: center; gap: 6px; font: 700 11px/1 'Inter'; color: var(--cl-navy); margin-bottom: 10px; }
.OASdgw-cs-mb-card { background: #fff; border: 1px solid var(--cl-border); border-radius: 9px; padding: 9px 10px; box-shadow: 0 2px 6px rgba(14,165,233,0.16); }
.OASdgw-cs-mb-so { font: 700 10px/1 'JetBrains Mono', monospace; color: var(--cl-muted); }
.OASdgw-cs-mb-cn { font: 700 12px/1.2 'Inter'; color: var(--cl-navy); margin-top: 4px; }
.OASdgw-cs-mb-card--fly { position: relative; }
.OASdgw-cs-scene.OASis-active[data-scene="2"] .OASdgw-cs-mb-card--fly { animation: dgwFly 2.4s 0.5s ease-in-out infinite; }
@keyframes dgwFly { 0%,12% { transform: translate(0,0) rotate(0); } 45%,62% { transform: translate(135px, 38px) rotate(-4deg); } 90%,100% { transform: translate(135px, 38px) rotate(0); } }
.OASdgw-cs-mb-drop { border: 1.5px dashed #c3d0e2; border-radius: 8px; color: #94a3b8; font: 600 10.5px/1 'Inter'; text-align: center; padding: 22px 6px; }

/* Scene 4 + 5 — phone */
.OASdgw-cs-phone { width: 240px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 22px; padding: 12px; box-shadow: 0 20px 44px -22px rgba(10,17,69,0.4); }
.OASdgw-cs-phone-bar { font: 700 12px/1 'Plus Jakarta Sans'; color: var(--cl-navy); text-align: center; padding: 8px 0 12px; }
.OASdgw-cs-map { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e7eef5, #dde7f1); }
.OASdgw-cs-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.25) 1px, transparent 1px); background-size: 26px 26px; }
.OASdgw-cs-map-route { position: absolute; left: 18%; top: 80%; width: 60%; height: 50%; border-top: 3px solid var(--cl-sky); border-right: 3px solid var(--cl-sky); border-top-right-radius: 40px; opacity: 0.85; }
.OASdgw-cs-map-pin { position: absolute; right: 20%; top: 26%; color: var(--cl-danger); }
.OASdgw-cs-map-pin svg { width: 26px; height: 26px; }
.OASdgw-cs-ping { position: absolute; left: 50%; top: 60%; width: 14px; height: 14px; border-radius: 50%; background: rgba(239,68,68,0.4); transform: translate(-50%,-50%); }
.OASdgw-cs-scene.OASis-active[data-scene="3"] .OASdgw-cs-ping { animation: dgwPing 1.6s ease-out infinite; }
@keyframes dgwPing { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 18px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.OASdgw-cs-phone-addr { font: 600 13px/1 'Inter'; color: var(--cl-text); text-align: center; margin: 12px 0 10px; }
.OASdgw-cs-phone-btn { font: 600 12.5px/1 'Inter'; color: #fff; background: linear-gradient(135deg, var(--cl-sky), var(--cl-indigo)); text-align: center; padding: 12px; border-radius: 11px; }
.OASdgw-cs-pod-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 11px; }
.OASdgw-cs-pod-photo, .OASdgw-cs-pod-gps { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 11px; background: var(--cl-bg); font: 600 10.5px/1 'Inter'; color: var(--cl-muted); }
.OASdgw-cs-pod-photo svg, .OASdgw-cs-pod-gps svg { width: 22px; height: 22px; color: var(--cl-indigo); }
.OASdgw-cs-pod-gps svg { color: var(--cl-ok); }
.OASdgw-cs-pod-signlabel { font: 600 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: 5px; }
.OASdgw-cs-pod-sign { height: 60px; border: 1px solid var(--cl-border); border-radius: 11px; background: #f8fafc; overflow: hidden; }
.OASdgw-cs-pod-sign svg { width: 100%; height: 100%; }
.OASdgw-cs-signpath { stroke-dasharray: 520; stroke-dashoffset: 520; }
.OASdgw-cs-scene.OASis-active[data-scene="4"] .OASdgw-cs-signpath { animation: dgwSign 1.6s 0.4s ease forwards; }
@keyframes dgwSign { to { stroke-dashoffset: 0; } }
.OASdgw-cs-pod-qty { display: flex; align-items: center; gap: 8px; font: 700 12px/1 'Inter'; color: var(--cl-ok); margin-top: 11px; opacity: 0; }
.OASdgw-cs-scene.OASis-active[data-scene="4"] .OASdgw-cs-pod-qty { animation: dgwFadeUp 0.5s 2s ease forwards; }

/* Scene 6 — invoice */
.OASdgw-cs-invoice { width: 280px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px -16px rgba(10,17,69,0.35); transform: translateY(14px) rotateX(12deg); opacity: 0; transform-origin: top center; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-invoice { animation: dgwInvoice 0.7s 1.8s cubic-bezier(.2,1.2,.4,1) forwards; }
@keyframes dgwInvoice { to { transform: none; opacity: 1; } }
.OASdgw-cs-invoice-top { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; background: var(--cl-navy); color: #fff; font: 800 12px/1 'Plus Jakarta Sans'; letter-spacing: 0.1em; }
.OASdgw-cs-invoice-no { font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: 0; color: var(--cl-sky); }
.OASdgw-cs-invoice-.oasPage { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
.OASdgw-cs-invoice-line { font: 700 14px/1.3 'Plus Jakarta Sans'; color: var(--cl-text); }
.OASdgw-cs-invoice-line--muted { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); margin-top: 4px; }
.OASdgw-cs-invoice-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef2f7; font: 700 12px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.06); }

/* ============================================================
   6 · FEATURES (dark)
   ============================================================ */
.OASdgw-cs-features { padding: 100px 0; background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%); }
.OASdgw-cs-features .OASdgw-cs-how-head { max-width: 760px; }
.OASdgw-cs-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.OASdgw-cs-feat-col { background: rgba(255,255,255,0.035); border: 1px solid rgba(124,143,255,0.16); border-radius: 18px; padding: 26px 24px; transition: border-color 0.3s ease, transform 0.3s ease; }
.OASdgw-cs-feat-col:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-4px); }
.OASdgw-cs-feat-head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(124,143,255,0.14); }
.OASdgw-cs-feat-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.OASdgw-cs-feat-ico svg { width: 23px; height: 23px; }
.OASdgw-cs-feat-head--office .OASdgw-cs-feat-ico { background: rgba(14,165,233,0.16); color: #7dd3fc; }
.OASdgw-cs-feat-head--driver .OASdgw-cs-feat-ico { background: rgba(99,102,241,0.16); color: #a5b4fc; }
.OASdgw-cs-feat-head--integ .OASdgw-cs-feat-ico { background: rgba(16,185,129,0.16); color: #6ee7b7; }
.OASdgw-cs-feat-col-t { font: 700 17px/1.1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-cs-feat-col-s { font: 500 12px/1 'Inter'; color: rgba(205,213,255,0.5); margin-top: 4px; }
.OASdgw-cs-feat-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.OASdgw-cs-feat-list li { position: relative; padding-left: 24px; font: 400 14px/1.5 'Inter'; color: rgba(205,213,255,0.82); }
.OASdgw-cs-feat-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* ============================================================
   7 · ARCHITECTURE + DEPTH (light)
   ============================================================ */
.OASdgw-cs-arch { padding: 100px 0; background: var(--surf-white); }
.OASdgw-cs-arch .OASdgw-cs-how-head { max-width: 720px; }
.OASdgw-cs-archmap { max-width: 760px; margin: 0 auto 56px; }
.OASdgw-cs-archrow { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 20px 24px; border-radius: 16px; border: 1px solid #e7edf5; background: var(--surf-light); }
.OASdgw-cs-archrow--driver { border-left: 4px solid var(--cl-indigo); }
.OASdgw-cs-archrow--core { border-left: 4px solid var(--ct-teal); }
.OASdgw-cs-archrow--integ { border-left: 4px solid var(--cl-warn); }
.OASdgw-cs-archrow--ext { border-left: 4px solid #64748b; }
.OASdgw-cs-archrow-label { font: 800 15px/1.2 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-archrow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.OASdgw-cs-archrow-chips span { font: 600 12.5px/1 'Inter'; color: #334155; background: #fff; border: 1px solid #e2e8f0; padding: 8px 12px; border-radius: 8px; }
.OASdgw-cs-archconn { display: flex; justify-content: center; height: 22px; }
.OASdgw-cs-archconn span { width: 2px; height: 100%; background: linear-gradient(180deg, #cbd5e1, #94a3b8); position: relative; }
.OASdgw-cs-archconn span::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 7px; height: 7px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: translateX(-50%) rotate(45deg); }

.OASdgw-cs-tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.OASdgw-cs-tech-card { position: relative; background: var(--surf-light); border: 1px solid #e8edf5; border-radius: 16px; padding: 24px 24px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.OASdgw-cs-tech-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(10,17,69,0.3); border-color: #d3ddec; }
.OASdgw-cs-tech-no { font: 800 13px/1 'JetBrains Mono', monospace; color: var(--brand); letter-spacing: 0.05em; margin-bottom: 12px; }
.OASdgw-cs-tech-t { font: 700 16.5px/1.3 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-tech-d { font: 400 13.5px/1.6 'Inter'; color: var(--muted); margin-top: 9px; }

/* ============================================================
   8 · RESULTS (dark + glow)
   ============================================================ */
.OASdgw-cs-results { position: relative; overflow: hidden; padding: 100px 0; background: linear-gradient(180deg, var(--navy) 0%, #060b2e 100%); }
.OASdgw-cs-results-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -200px; right: -120px; background: radial-gradient(circle, rgba(16,185,129,0.12), transparent 70%); filter: blur(50px); pointer-events: none; }
.OASdgw-cs-results .OASdgw-cs-sec-inner { position: relative; z-index: 2; }
.OASdgw-cs-res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.OASdgw-cs-res-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(124,143,255,0.18); border-radius: 16px; padding: 24px 22px; transition: transform 0.3s ease, border-color 0.3s ease; }
.OASdgw-cs-res-card:hover { transform: translateY(-4px); border-color: rgba(16,185,129,0.4); }
.OASdgw-cs-res-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(16,185,129,0.14); color: #6ee7b7; margin-bottom: 15px; }
.OASdgw-cs-res-ico svg { width: 22px; height: 22px; }
.OASdgw-cs-res-t { font: 700 16px/1.25 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-cs-res-d { font: 400 13.5px/1.55 'Inter'; color: rgba(205,213,255,0.68); margin-top: 9px; }

.OASdgw-cs-quote { margin-top: 36px; position: relative; text-align: center; background: linear-gradient(160deg, rgba(22,169,230,0.16), rgba(84,184,127,0.08)); border: 1px solid rgba(84,184,127,0.3); border-radius: 22px; padding: 44px 32px 32px; }
.OASdgw-cs-quote-mark { font: 800 70px/0.5 'Plus Jakarta Sans'; color: var(--ct-mint); opacity: 0.55; height: 30px; }
.OASdgw-cs-quote-text { font: 800 clamp(30px, 4vw, 46px)/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; margin: 10px 0 22px; }
.OASdgw-cs-quote-cite { display: inline-flex; align-items: center; gap: 13px; text-align: left; }
.OASdgw-cs-quote-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--ct-teal), var(--ct-green)); color: #fff; font: 800 15px/1 'Plus Jakarta Sans'; display: flex; align-items: center; justify-content: center; }
.OASdgw-cs-quote-meta { display: flex; flex-direction: column; gap: 4px; }
.OASdgw-cs-quote-meta strong { font: 700 15px/1 'Inter'; color: #fff; }
.OASdgw-cs-quote-meta span { font: 500 12.5px/1.4 'Inter'; color: rgba(205,213,255,0.62); }
.OASdgw-cs-quote-note { margin-top: 22px; display: inline-block; font: 600 12px/1 'Inter'; letter-spacing: 0.04em; color: var(--ct-mint); background: rgba(22,169,230,0.16); border: 1px solid rgba(84,184,127,0.35); padding: 9px 16px; border-radius: 100px; }

/* ============================================================
   9 · WHAT'S NEXT (light)
   ============================================================ */
.OASdgw-cs-next { padding: 100px 0; background: var(--surf-light); }
.OASdgw-cs-next .OASdgw-cs-how-head { max-width: 680px; }
.OASdgw-cs-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.OASdgw-cs-next-card { background: #fff; border: 1px solid #e8edf5; border-radius: 16px; padding: 24px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.OASdgw-cs-next-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(10,17,69,0.25); }
.OASdgw-cs-next-tag { display: inline-block; font: 700 10px/1 'Inter'; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ct-teal-d); background: rgba(22,169,230,0.08); border: 1px solid rgba(22,169,230,0.18); padding: 6px 11px; border-radius: 100px; margin-bottom: 15px; }
.OASdgw-cs-next-t { font: 700 17px/1.25 'Plus Jakarta Sans'; color: var(--ink); }
.OASdgw-cs-next-d { font: 400 13.5px/1.6 'Inter'; color: var(--muted); margin-top: 9px; }

/* ============================================================
   10 · CTA (dark finale)
   ============================================================ */
.OASdgw-cs-cta { position: relative; overflow: hidden; padding: 110px 0; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); text-align: center; }
.OASdgw-cs-cta-glow { position: absolute; width: 760px; height: 760px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(22,169,230,0.16), transparent 65%); filter: blur(60px); pointer-events: none; }
.OASdgw-cs-cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 32px; }
.OASdgw-cs-cta-title { font: 800 clamp(30px, 4.5vw, 48px)/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.OASdgw-cs-cta-p { font: 400 18px/1.7 'Inter'; color: rgba(205,213,255,0.78); margin: 22px auto 34px; max-width: 580px; }
.OASdgw-cs-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER (inherited)
   ============================================================ */
.OASdgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.OASdgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.OASdgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.OASdgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.OASdgw-footer-brand { max-width: 360px; }
.OASdgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.OASdgw-footer-logo { height: 40px; width: auto; display: block; }
.OASdgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.OASdgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.OASdgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.OASdgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.OASdgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.OASdgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.OASdgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.OASdgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.OASdgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.OASdgw-footer-col { min-width: 0; }
.OASdgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.OASdgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.OASdgw-footer-list a, .OASdgw-footer-list li, .OASdgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.OASdgw-footer-list a:hover { color: #ffb284; }
.OASdgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.OASdgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.OASdgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.OASdgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.OASdgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.OASdgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.OASdgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.OASdgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.OASdgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.OASdgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.OASdgw-footer-legal a:hover { color: #fff; }
.OASdgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.OASdgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .OASdgw-nav-links { display: none; }
  .OASdgw-cs-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .OASdgw-cs-systems { grid-template-columns: 1fr; gap: 4px; }
  .OASdgw-cs-flowlane { width: 170px; height: 52px; margin: 14px auto; transform: rotate(90deg); }
  .OASdgw-cs-flowlabel { display: none; }
  .OASdgw-cs-flowtruck { display: none; }
  .OASdgw-cs-walk-stage { grid-template-columns: 1fr; gap: 22px; }
  .OASdgw-cs-walk-screen { min-height: 400px; }
  .OASdgw-cs-feat-grid, .OASdgw-cs-next-grid { grid-template-columns: 1fr; }
  .OASdgw-cs-tech-grid { grid-template-columns: 1fr; }
  .OASdgw-cs-res-grid { grid-template-columns: 1fr 1fr; }
  .OASdgw-cs-painwall { grid-template-columns: 1fr 1fr; }
  .OASdgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .OASdgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 640px) {
  .OASdgw-cs-hero { padding: 130px 0 76px; }
  .OASdgw-cs-hero-stats { grid-template-columns: 1fr 1fr; }
  .OASdgw-cs-sec-inner, .OASdgw-cs-hero-inner { padding-left: 22px; padding-right: 22px; }
  .OASdgw-cs-painwall { grid-template-columns: 1fr; }
  .OASdgw-cs-res-grid { grid-template-columns: 1fr; }
  .OASdgw-cs-broken { gap: 8px; }
  .OASdgw-cs-broken-step { font-size: 12px; padding: 9px 11px; }
  .OASdgw-cs-archrow { grid-template-columns: 1fr; gap: 12px; }
  .OASdgw-cs-about, .OASdgw-cs-challenge, .OASdgw-cs-solution, .OASdgw-cs-walk, .OASdgw-cs-features, .OASdgw-cs-arch, .OASdgw-cs-results, .OASdgw-cs-next, .OASdgw-cs-cta { padding: 72px 0; }
  .OASdgw-footer { padding: 72px 22px 28px; }
  .OASdgw-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .OASdgw-footer-bottom { flex-direction: column; text-align: center; gap: 18px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .OASreveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .OASdgw-cs-live-dot { animation: none !important; }
  .OASdgw-cs-sys--core, .OASdgw-cs-flowtrack, .OASdgw-cs-flowtruck, .OASdgw-cs-flowtruck svg, .OASdgw-cs-flowchevrons i { animation: none !important; }
  .OASdgw-cs-flowdot { animation: none !important; opacity: 0.9 !important; left: 44% !important; }
  .OASdgw-cs-flowdot--back { left: 56% !important; }
  .OASdgw-cs-flowtruck { left: 40% !important; opacity: 1 !important; }
  .OASdgw-cs-scene * { animation: none !important; }
  .OASdgw-cs-stamp, .OASdgw-cs-jobcard, .OASdgw-cs-zeropill, .OASdgw-cs-invoice, .OASdgw-cs-pod-qty { opacity: 1 !important; transform: none !important; }
  .OASdgw-cs-signpath { stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   OAS — OVERRIDES & ADDITIONS
   ============================================================ */

/* Hero: cyan solar band overrides */
.OASdgw-cs-hero--solar .OASdgw-cs-hero-mesh { background:
  radial-gradient(ellipse at 20% 10%, rgba(92,200,242,0.45) 0, transparent 45%),
  radial-gradient(ellipse at 85% 20%, rgba(207,239,251,0.2) 0, transparent 42%),
  radial-gradient(ellipse at 70% 90%, rgba(7,60,95,0.55) 0, transparent 55%); }
.OASdgw-cs-hero--solar .OASdgw-cs-hero-glow--1 { background: radial-gradient(circle, rgba(207,239,251,0.32), transparent 70%); }
.OASdgw-cs-hero--solar .OASdgw-cs-hl { background: linear-gradient(100deg, #eaf8ff, var(--ct-mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.OASdgw-cs-hero--solar .OASdgw-cs-hl::after { background: rgba(207,239,251,0.5); }
.OASdgw-cs-hero--solar .OASdgw-cs-tag { color: #eaf8ff; }
.OASdgw-cs-hero--solar .OASdgw-cs-tag--case { color: var(--ct-teal-d); }
.OASdgw-cs-hero--solar .OASdgw-cs-hero-lead { color: rgba(235,248,255,0.92); }
.OASdgw-cs-hero--solar .OASdgw-cs-hero-lead strong { color: #fff; }
.OASdgw-cs-hero--solar .OASdgw-cs-hstat-l { color: rgba(235,248,255,0.78); }

/* Solution: two engines, one platform */
.OASdgw-cs-oas-flowwrap { margin-top: 48px; }
.OASdgw-cs-oas-systems { grid-template-columns: 1fr auto 1fr; max-width: 860px; margin: 0 auto; }
.OASdgw-cs-oas-flowtop { text-align: center; font: 600 12px/1 'Inter'; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(205,213,255,0.55); margin-bottom: 14px; }
.OASdgw-cs-oas-flowbot { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; font: 600 13px/1 'Inter'; color: rgba(205,213,255,0.72); }

/* Walkthrough legend */
.OASdgw-cs-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 22px; }
.OASdgw-cs-legend-item { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 'Inter'; color: #5b6b78; }
.OASdgw-cs-legend-dot { width: 11px; height: 11px; border-radius: 50%; }
.OASdgw-oas-lg--crm { background: var(--cl-sky); }
.OASdgw-oas-lg--integ { background: var(--oas-violet); }
.OASdgw-oas-lg--field { background: var(--cl-indigo); }
.OASdgw-oas-lg--comms { background: var(--cl-ok); }
.OASdgw-oas-dot--crm { background: var(--cl-sky); }

/* Scene activation (OAS order) */
.OASdgw-cs-scene.OASis-active[data-scene="0"] .OASdgw-cs-jobcard { animation: dgwPop 0.55s 0.25s cubic-bezier(.2,1.3,.4,1) forwards; }
.OASdgw-cs-scene[data-scene="0"] .OASdgw-oas-stamp { color: var(--cl-sky); border-color: var(--cl-sky); }
.OASdgw-cs-scene.OASis-active[data-scene="2"] .OASdgw-cs-wpacket { animation: dgwPacket 1.3s 0.3s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="3"] .OASdgw-cs-jobcard { animation: dgwPop 0.55s 0.3s cubic-bezier(.2,1.3,.4,1) forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="3"] .OASdgw-cs-stamp { animation: dgwStampIn 0.6s 0.7s cubic-bezier(.2,1.4,.4,1) forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="3"] .OASdgw-oas-email { animation: dgwFadeUp 0.5s 1.3s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="4"] .OASdgw-cs-wpacket { animation: dgwPacket 1.2s 0.3s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="4"] .OASdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.4s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-mb-card--fly { animation: dgwFly 2.4s 0.5s ease-in-out infinite; }
.OASdgw-cs-scene.OASis-active[data-scene="5"] .OASdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.6s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="6"] .OASdgw-oas-day { animation: dgwDayOn 0.5s ease forwards; animation-delay: var(--dd, 0s); }
.OASdgw-cs-scene.OASis-active[data-scene="7"] .OASdgw-cs-signpath { animation: dgwSign 1.6s 0.4s ease forwards; }
.OASdgw-cs-scene.OASis-active[data-scene="7"] .OASdgw-cs-pod-qty { animation: dgwFadeUp 0.5s 2s ease forwards; }

/* Scene: lead sources */
.OASdgw-oas-srcs { display: flex; gap: 8px; }
.OASdgw-oas-src { font: 600 11.5px/1 'Inter'; color: var(--cl-muted); background: var(--cl-bg); border: 1px solid var(--cl-border); padding: 9px 13px; border-radius: 9px; }
.OASdgw-oas-src--on { color: #fff; background: linear-gradient(135deg, #1877f2, #4267b2); border-color: transparent; }

/* Scene: convert / auto-create flow nodes */
.OASdgw-oas-wnode--crm { background: linear-gradient(135deg, var(--ct-teal), var(--ct-teal-d)); }
.OASdgw-oas-wnode--xero { background: #13b5ea; }
.OASdgw-oas-wnode--field { background: var(--cl-indigo); }
.OASdgw-oas-packet--violet { background: var(--oas-violet); box-shadow: 0 0 10px var(--oas-violet); }
.OASdgw-oas-fork-out { display: flex; flex-direction: column; gap: 8px; }
.OASdgw-oas-email { font: 700 11.5px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 100px; padding: 8px 14px; opacity: 0; }

/* Scene: multi-day install */
.OASdgw-oas-checkin { display: flex; align-items: center; gap: 7px; font: 600 12px/1 'Inter'; color: var(--cl-ok); margin-bottom: 11px; }
.OASdgw-oas-days { display: flex; gap: 8px; margin-bottom: 10px; }
.OASdgw-oas-day { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center; font: 700 11px/1.1 'Inter'; color: var(--cl-muted); background: var(--cl-bg); border: 1px solid var(--cl-border); border-radius: 9px; padding: 9px 5px; }
.OASdgw-oas-day small { font: 500 8.5px/1 'Inter'; color: var(--cl-muted); }
@keyframes dgwDayOn { to { color: #fff; background: linear-gradient(135deg, var(--cl-sky), var(--cl-indigo)); border-color: transparent; } }
.OASdgw-cs-scene.OASis-active[data-scene="6"] .OASdgw-oas-day small { transition: color 0.4s; }
.OASdgw-cs-scene.OASis-active[data-scene="6"] .OASdgw-oas-day { color: var(--cl-muted); background: var(--cl-bg); }
.OASdgw-oas-day-note { font: 600 11px/1.3 'Inter'; color: var(--cl-text); text-align: center; }

/* By the Numbers — cyan band */
.OASdgw-oas-numbers { padding: 84px 0; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ct-teal) 0%, var(--ct-teal-d) 100%); }
.OASdgw-oas-numbers::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 15% 8%, rgba(255,255,255,0.16), transparent 45%),
              radial-gradient(ellipse at 85% 92%, rgba(7,86,127,0.5), transparent 55%); }
.OASdgw-oas-numbers .OASdgw-cs-sec-inner { position: relative; z-index: 2; }
.OASdgw-oas-numbers-head { text-align: center; margin-bottom: 44px; }
.OASdgw-oas-kicker--on { color: rgba(255,255,255,0.85); }
.OASdgw-oas-numbers-title { font: 800 clamp(26px, 3.6vw, 40px)/1.1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-oas-numgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.OASdgw-oas-num { text-align: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 16px; padding: 26px 12px; backdrop-filter: blur(4px); }
.OASdgw-oas-num-n { font: 800 clamp(28px, 3vw, 38px)/1 'Plus Jakarta Sans'; color: #fff; font-variant-numeric: tabular-nums; }
.OASdgw-oas-num-l { font: 600 12px/1.35 'Inter'; color: rgba(255,255,255,0.85); margin-top: 9px; }

/* Results: 6 cards in 3 columns */
.OASdgw-oas-res-grid { grid-template-columns: repeat(3, 1fr); }

/* OAS responsive */
@media (max-width: 980px) {
  .OASdgw-oas-numgrid { grid-template-columns: repeat(3, 1fr); }
  .OASdgw-oas-res-grid { grid-template-columns: 1fr 1fr; }
  .OASdgw-cs-oas-systems { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .OASdgw-oas-numgrid { grid-template-columns: 1fr 1fr; }
  .OASdgw-oas-res-grid { grid-template-columns: 1fr; }
  .OASdgw-cs-legend { gap: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .OASdgw-oas-day, .OASdgw-oas-email { animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   OAS — THE JOB BOARD (field-engine spotlight)
   ============================================================ */
.OASdgw-oas-board { padding: 100px 0; background: var(--surf-white); }
.OASdgw-oas-board .OASdgw-cs-how-head { margin-bottom: 30px; }

.OASdgw-oas-caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 38px; }
.OASdgw-oas-cap { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 'Inter'; color: var(--ct-teal-d); background: rgba(22,169,230,0.08); border: 1px solid rgba(22,169,230,0.22); padding: 10px 14px; border-radius: 100px; }
.OASdgw-oas-cap svg { width: 15px; height: 15px; }

.OASdgw-oas-board-console { background: linear-gradient(160deg, #0a2438, #061626); border: 1px solid rgba(34,170,230,0.22); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(6,22,42,0.7); }
.OASdgw-oas-board-bar { display: flex; align-items: center; gap: 7px; padding: 14px 20px; border-bottom: 1px solid rgba(34,170,230,0.16); background: rgba(255,255,255,0.02); }
.OASdgw-oas-board-label { margin-left: 8px; font: 600 12px/1 'Inter'; color: rgba(205,229,245,0.8); }
.OASdgw-oas-guard { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 'Inter'; letter-spacing: 0.02em; color: #7dd3fc; background: rgba(34,170,230,0.12); border: 1px solid rgba(34,170,230,0.3); padding: 7px 11px; border-radius: 100px; }
.OASdgw-oas-board-.oasPage { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

/* broadcast job */
.OASdgw-oas-broadcast { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(34,170,230,0.2); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px; }
.OASdgw-oas-bc-id { font: 700 11px/1 'JetBrains Mono', monospace; color: #7dd3fc; }
.OASdgw-oas-bc-nm { font: 700 16px/1.2 'Plus Jakarta Sans'; color: #fff; margin-top: 5px; }
.OASdgw-oas-bc-state { position: relative; min-width: 190px; height: 32px; }
.OASdgw-oas-bc-idle, .OASdgw-oas-bc-res { position: absolute; right: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 700 12px/1 'Inter'; padding: 8px 14px; border-radius: 100px; }
.OASdgw-oas-bc-idle { color: #7dd3fc; background: rgba(34,170,230,0.14); animation: oasBcIdle 5s ease-in-out infinite; }
.OASdgw-oas-bc-res { color: #04231a; background: #34d399; opacity: 0; animation: oasBcRes 5s ease-in-out infinite; }
@keyframes oasBcIdle { 0%,42% { opacity: 1; } 48%,100% { opacity: 0; } }
@keyframes oasBcRes { 0%,44% { opacity: 0; } 50%,92% { opacity: 1; } 100% { opacity: 0; } }

/* crews race */
.OASdgw-oas-crews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.OASdgw-oas-crew { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(34,170,230,0.4); border-radius: 13px; padding: 15px 10px; animation: oasLose 5s ease-in-out infinite; }
.OASdgw-oas-crew--win { animation: oasWin 5s ease-in-out infinite; }
@keyframes oasWin { 0%,42% { border-color: rgba(34,170,230,0.5); box-shadow: none; transform: none; } 50%,92% { border-color: #34d399; box-shadow: 0 0 28px -6px rgba(52,211,153,0.75); transform: translateY(-3px); } 100% { border-color: rgba(34,170,230,0.5); box-shadow: none; transform: none; } }
@keyframes oasLose { 0%,44% { opacity: 1; border-color: rgba(34,170,230,0.4); } 52%,92% { opacity: 0.4; border-color: rgba(148,163,184,0.25); } 100% { opacity: 1; border-color: rgba(34,170,230,0.4); } }
.OASdgw-oas-crew-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 11px/1 'Inter'; }
.OASdgw-oas-crew-nm { font: 700 12px/1 'Inter'; color: #fff; }
.OASdgw-oas-crew-st { position: relative; height: 24px; width: 100%; display: flex; align-items: center; justify-content: center; }
.OASdgw-oas-st-idle, .OASdgw-oas-st-res { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 10px/1 'Inter'; padding: 6px 11px; border-radius: 100px; }
.OASdgw-oas-st-idle { color: #7dd3fc; background: rgba(34,170,230,0.14); animation: oasBcIdle 5s ease-in-out infinite; }
.OASdgw-oas-st-res { opacity: 0; animation: oasBcRes 5s ease-in-out infinite; }
.OASdgw-oas-st-res--won { color: #04231a; background: #34d399; }
.OASdgw-oas-st-res--taken { color: #94a3b8; background: rgba(148,163,184,0.15); }

/* after strip */
.OASdgw-oas-after { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(34,170,230,0.14); }
.OASdgw-oas-after-step { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,0.03); border: 1px solid rgba(34,170,230,0.16); border-radius: 12px; padding: 13px 16px; }
.OASdgw-oas-after-ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.OASdgw-oas-after-ico svg { width: 17px; height: 17px; }
.OASdgw-oas-after-ico--ok { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.OASdgw-oas-after-ico--day { background: rgba(99,102,241,0.18); color: #a5b4fc; }
.OASdgw-oas-after-ico--sign { background: rgba(34,170,230,0.18); color: #7dd3fc; }
.OASdgw-oas-after-t { font: 700 13px/1.1 'Plus Jakarta Sans'; color: #fff; }
.OASdgw-oas-after-d { font: 500 11px/1.3 'Inter'; color: rgba(205,229,245,0.62); margin-top: 3px; }
.OASdgw-oas-after-bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,0.1); margin-top: 6px; overflow: hidden; }
.OASdgw-oas-after-bar i { display: block; height: 100%; width: 17%; border-radius: 4px; background: linear-gradient(90deg, var(--cl-sky), var(--cl-indigo)); animation: oasDayBar 3s ease-in-out infinite; }
@keyframes oasDayBar { 0% { width: 8%; } 50% { width: 20%; } 100% { width: 8%; } }
.OASdgw-oas-after-arr { display: flex; align-items: center; font: 800 18px/1 'Plus Jakarta Sans'; color: #2f4658; }

@media (max-width: 760px) {
  .OASdgw-oas-crews { grid-template-columns: 1fr 1fr; }
  .OASdgw-oas-after { flex-direction: column; }
  .OASdgw-oas-after-arr { transform: rotate(90deg); justify-content: center; }
  .OASdgw-oas-after-step { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .OASdgw-oas-crew, .OASdgw-oas-st-idle, .OASdgw-oas-st-res, .OASdgw-oas-bc-idle, .OASdgw-oas-bc-res, .OASdgw-oas-after-bar i { animation: none !important; }
  .OASdgw-oas-crew--win { border-color: #34d399 !important; box-shadow: 0 0 24px -8px rgba(52,211,153,0.6) !important; }
  .OASdgw-oas-st-idle, .OASdgw-oas-bc-idle { opacity: 0 !important; }
  .OASdgw-oas-st-res, .OASdgw-oas-bc-res { opacity: 1 !important; }
  .OASdgw-oas-crew--lose { opacity: 0.5 !important; }
}
/* ============================================================
   DIGIWAH — CASE STUDIES HUB
   Prefix: dgw-cstud-  (reuses dgw-nav-* / dgw-footer-*)
   ============================================================ */

:root {
  --brand: #010ED0;
  --brand-light: #7c8fff;
  --accent: #FF7A45;
  --accent-soft: #ffb284;
  --navy-deep: #050a2e;
  --navy: #0a1145;
  --ink: #0a0f2c;
  --muted: #6b7280;
  --line: rgba(255,255,255,0.08);
  --surf-light: #f4f7fc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }

/* ===== NAVBAR (inherited) ===== */
.dgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.dgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dgw-nav-logo { display: flex; align-items: center; }
.dgw-nav-logo-img { height: 38px; width: auto; display: block; }
.dgw-nav-links { display: flex; gap: 30px; }
.dgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.dgw-nav-links a:hover, .dgw-nav-links a.is-active { color: #fff; }
.dgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.dgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }


/* ===== SHARED ===== */
.dgw-cstud-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.dgw-cstud-grad { background: linear-gradient(100deg, #9fb0ff 0%, #ffb284 55%, #FF7A45 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dgw-cstud-eyebrow { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.dgw-cstud-h2 { font: 800 clamp(26px, 3.2vw, 38px)/1.15 'Plus Jakarta Sans'; color: var(--ink); letter-spacing: -0.03em; }

/* ===== HERO ===== */
.dgw-cstud-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 15% 0%, #0d1660 0%, var(--navy-deep) 55%, #030620 100%); color: #fff; padding: 150px 0 96px; }
.dgw-cstud-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(124,143,255,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(124,143,255,0.09) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 20%, transparent 75%); pointer-events: none; }
.dgw-cstud-hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.dgw-cstud-hero-glow--a { width: 560px; height: 560px; top: -180px; right: -80px; background: radial-gradient(circle, rgba(1,14,208,0.55), transparent 70%); }
.dgw-cstud-hero-glow--b { width: 420px; height: 420px; bottom: -220px; left: 18%; background: radial-gradient(circle, rgba(255,122,69,0.28), transparent 70%); }
.dgw-cstud-hero-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.dgw-cstud-kicker { display: inline-flex; align-items: center; gap: 9px; font: 600 12px/1 'Inter'; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); padding: 8px 14px; border: 1px solid rgba(255,178,132,0.25); border-radius: 100px; background: rgba(255,122,69,0.07); margin-bottom: 24px; }
.dgw-cstud-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,122,69,0.2); }
.dgw-cstud-title { font: 800 clamp(34px, 4.6vw, 56px)/1.06 'Plus Jakarta Sans'; letter-spacing: -0.035em; margin-bottom: 22px; }
.dgw-cstud-title .dgw-cstud-grad { display: inline; }
.dgw-cstud-sub { font: 400 17px/1.65 'Inter'; color: rgba(214,221,255,0.78); max-width: 540px; margin-bottom: 36px; }
.dgw-cstud-hero-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.dgw-cstud-hero-stack span { font: 600 13px/1 'Inter'; color: #fff; padding: 9px 14px; border-radius: 100px; background: rgba(255,255,255,0.06); border: 1px solid rgba(124,143,255,0.28); }
.dgw-cstud-hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 10px; background: #fff; color: var(--ink); font: 700 14.5px/1 'Inter'; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 10px 30px -10px rgba(124,143,255,0.6); }
.dgw-cstud-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(124,143,255,0.8); }

/* hero visual: delivery map */
.dgw-cstud-map { position: relative; padding: 24px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)); border: 1px solid rgba(124,143,255,0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08); transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); }
.dgw-cstud-map-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px dashed rgba(124,143,255,0.22); }
.dgw-cstud-map-live { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: #7ef0b5; }
.dgw-cstud-map-live i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: dgwCstudPulse 2s infinite; }
.dgw-cstud-map-from { font: 500 12px/1 'Inter'; color: rgba(205,213,255,0.55); }
@keyframes dgwCstudPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); } 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.dgw-cstud-region { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid rgba(124,143,255,0.12); }
.dgw-cstud-region:last-of-type { border-bottom: 0; }
.dgw-cstud-region-name { display: flex; align-items: center; gap: 8px; font: 700 14px/1.2 'Plus Jakarta Sans'; color: #fff; padding-top: 8px; }
.dgw-cstud-app { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dgw-cstud-app--crm { background: #e42527; box-shadow: 0 0 10px rgba(228,37,39,0.7); }
.dgw-cstud-app--books { background: #2d8cf0; box-shadow: 0 0 10px rgba(45,140,240,0.7); }
.dgw-cstud-app--erp { background: #ff9a1f; box-shadow: 0 0 10px rgba(255,154,31,0.7); }
.dgw-cstud-app--creator { background: #22b573; box-shadow: 0 0 10px rgba(34,181,115,0.7); }
.dgw-cstud-region-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dgw-cstud-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font: 600 13px/1 'Inter'; color: #fff; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.dgw-cstud-chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.dgw-cstud-chip small { font: 600 10.5px/1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.02em; }
.dgw-cstud-chip:hover { border-color: var(--c); background: rgba(255,255,255,0.09); transform: translateY(-2px); }

/* ===== WORK GRID ===== */
.dgw-cstud-work { position: relative; overflow: hidden; background: var(--surf-light); padding: 96px 0 110px; }
.dgw-cstud-work::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(1,14,208,0.08) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 40%); mask-image: linear-gradient(180deg, #000, transparent 40%); pointer-events: none; }
.dgw-cstud-work > .dgw-cstud-inner { position: relative; }
.dgw-cstud-work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }

.dgw-cstud-filters { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px; margin-bottom: 36px; background: #fff; border: 1px solid #e3e8f4; border-radius: 16px; box-shadow: 0 12px 30px -20px rgba(10,15,44,0.25); }
.dgw-cstud-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.dgw-cstud-fbtn, .dgw-cstud-rbtn { font: 600 13.5px/1 'Inter'; color: #3b4466; background: transparent; border: 1px solid transparent; padding: 10px 14px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.dgw-cstud-fbtn:hover, .dgw-cstud-rbtn:hover { background: #f1f4fb; }
.dgw-cstud-fbtn.is-on { background: var(--ink); color: #fff; }
.dgw-cstud-fbtn.is-on em { background: rgba(255,255,255,0.16); color: #fff; }
.dgw-cstud-rbtn { padding: 8px 12px; font-size: 13px; }
.dgw-cstud-rbtn.is-on { background: #fff; border-color: #dfe4f2; color: var(--ink); box-shadow: 0 4px 10px -6px rgba(10,15,44,0.3); }
.dgw-cstud-fbtn:focus-visible, .dgw-cstud-rbtn:focus-visible, .dgw-cstud-card:focus-visible { outline: 3px solid rgba(1,14,208,0.4); outline-offset: 2px; }

.dgw-cstud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dgw-cstud-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid #e3e8f4; box-shadow: 0 1px 2px rgba(10,15,44,0.04), 0 18px 40px -28px rgba(10,15,44,0.35); transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.dgw-cstud-card.reveal { transform: perspective(1000px) translateY(26px); }
.dgw-cstud-card.reveal.is-in { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); }
.dgw-cstud-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, #e3e8f4); box-shadow: 0 1px 2px rgba(10,15,44,0.04), 0 30px 60px -26px var(--glow); }
.dgw-cstud-card.is-hidden { display: none; }

.dgw-cstud-top { position: relative; height: 150px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(140% 120% at var(--mx) var(--my), color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 45%, var(--accent-d) 100%); overflow: hidden; }
.dgw-cstud-top::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 80% 90% at 100% 0%, #000, transparent 70%); }
.dgw-cstud-top::after { content: ''; position: absolute; width: 220px; height: 220px; right: -70px; bottom: -120px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 0 0 26px rgba(255,255,255,0.05), 0 0 0 54px rgba(255,255,255,0.035); }
.dgw-cstud-new { position: absolute; top: 18px; right: 18px; z-index: 2; font: 800 10px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-d); background: #fff; padding: 6px 9px; border-radius: 100px; box-shadow: 0 6px 14px -6px rgba(0,0,0,0.35); }
.dgw-cstud-logochip { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; height: 54px; min-width: 96px; padding: 9px 16px; background: #fff; border-radius: 14px; box-shadow: 0 12px 26px -12px rgba(0,0,0,0.45); transition: transform 0.3s ease; }
.dgw-cstud-logochip img { max-height: 36px; max-width: 130px; width: auto; display: block; object-fit: contain; }
.dgw-cstud-logochip--word { font: 800 19px/1 'Plus Jakarta Sans'; color: #0b3a6e; letter-spacing: -0.03em; }
.dgw-cstud-logochip--word span { color: #0ea5e9; }
.dgw-cstud-card:hover .dgw-cstud-logochip { transform: translateY(-3px) scale(1.03); }
.dgw-cstud-toptags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.dgw-cstud-toptag { font: 600 11.5px/1 'Inter'; color: #fff; padding: 6px 10px; border-radius: 100px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.dgw-cstud-body { flex: 1; display: flex; flex-direction: column; padding: 22px 22px 20px; }
.dgw-cstud-products { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dgw-cstud-products span { font: 700 11px/1 'Inter'; letter-spacing: 0.04em; color: var(--accent-d); background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); padding: 5px 9px; border-radius: 6px; }
.dgw-cstud-client { font: 600 13px/1 'Inter'; color: var(--muted); margin-bottom: 8px; }
.dgw-cstud-headline { font: 800 19px/1.3 'Plus Jakarta Sans'; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 16px; }
.dgw-cstud-cb { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.dgw-cstud-cb > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: baseline; }
.dgw-cstud-cb dt { font: 700 10.5px/1.5 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa3bd; }
.dgw-cstud-cb > div:last-child dt { color: var(--accent); }
.dgw-cstud-cb dd { font: 400 14px/1.55 'Inter'; color: #3b4466; }
.dgw-cstud-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid #edf0f7; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dgw-cstud-stat { font: 600 12px/1 'Inter'; color: #3b4466; background: #f4f6fb; padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
.dgw-cstud-link { display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px/1 'Inter'; color: var(--accent-d); white-space: nowrap; }
.dgw-cstud-link svg { transition: transform 0.25s ease; }
.dgw-cstud-card:hover .dgw-cstud-link svg { transform: translateX(4px); }
.dgw-cstud-soon { font: 700 12px/1 'Inter'; letter-spacing: 0.04em; color: var(--accent); white-space: nowrap; }
.dgw-cstud-empty { text-align: center; padding: 40px 0 0; font: 500 15px/1.5 'Inter'; color: var(--muted); }
.dgw-cstud-empty button { font: 700 15px/1 'Inter'; color: var(--brand); background: none; border: 0; cursor: pointer; text-decoration: underline; }

/* ===== HOW WE WORK + FAQ ===== */
.dgw-cstud-aeo { background: #fff; padding: 100px 0; }
.dgw-cstud-aeo-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.dgw-cstud-aeo-p { font: 400 16.5px/1.7 'Inter'; color: #3b4466; margin: 18px 0 28px; max-width: 520px; }
.dgw-cstud-steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
.dgw-cstud-steps li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--surf-light); border: 1px solid #e6ebf6; font: 700 14px/1.2 'Plus Jakarta Sans'; color: var(--ink); }
.dgw-cstud-steps li span { font: 800 12px/1 'Inter'; color: var(--accent); }
.dgw-cstud-faq { display: flex; flex-direction: column; gap: 12px; }
.dgw-cstud-faq details { border: 1px solid #e3e8f4; border-radius: 14px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.dgw-cstud-faq details[open] { border-color: rgba(1,14,208,0.25); box-shadow: 0 16px 36px -26px rgba(1,14,208,0.5); }
.dgw-cstud-faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative; font: 700 15.5px/1.4 'Plus Jakarta Sans'; color: var(--ink); }
.dgw-cstud-faq summary::-webkit-details-marker { display: none; }
.dgw-cstud-faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #f1f4fb; color: var(--brand); font: 600 18px/26px 'Inter'; text-align: center; transition: transform 0.25s; }
.dgw-cstud-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.dgw-cstud-faq details p { padding: 0 20px 20px; font: 400 14.5px/1.65 'Inter'; color: #3b4466; }

/* ===== CTA ===== */
.dgw-cstud-cta { position: relative; overflow: hidden; background: var(--navy-deep); color: #fff; padding: 100px 24px; text-align: center; }
.dgw-cstud-cta-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(124,143,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(124,143,255,0.08) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 75%); }
.dgw-cstud-cta-glow { position: absolute; width: 620px; height: 620px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(1,14,208,0.45), transparent 68%); filter: blur(50px); }
.dgw-cstud-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.dgw-cstud-cta-title { font: 800 clamp(28px, 3.6vw, 42px)/1.15 'Plus Jakarta Sans'; letter-spacing: -0.03em; margin-bottom: 16px; }
.dgw-cstud-cta-p { font: 400 16.5px/1.65 'Inter'; color: rgba(214,221,255,0.75); margin-bottom: 30px; }
.dgw-cstud-btn { display: inline-block; background: var(--accent); color: #fff; padding: 15px 28px; border-radius: 10px; font: 700 15px/1 'Inter'; box-shadow: 0 12px 30px -10px rgba(255,122,69,0.7); transition: transform 0.2s, box-shadow 0.2s; }
.dgw-cstud-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(255,122,69,0.85); }

/* ===== FOOTER (inherited) ===== */
.dgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.dgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.dgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.dgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.dgw-footer-brand { max-width: 360px; }
.dgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.dgw-footer-logo { height: 40px; width: auto; display: block; }
.dgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.dgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.dgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.dgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.dgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.dgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.dgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.dgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.dgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.dgw-footer-col { min-width: 0; }
.dgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.dgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.dgw-footer-list a, .dgw-footer-list li, .dgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-list a:hover { color: #ffb284; }
.dgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.dgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.dgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.dgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.dgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.dgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.dgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.dgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.dgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.dgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-legal a:hover { color: #fff; }
.dgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.dgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }


/* ===== RESPONSIVE ===== */
@media (max-width: 1080px) {
  .dgw-cstud-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .dgw-cstud-map { transform: none; max-width: 620px; }
  .dgw-cstud-grid { grid-template-columns: 1fr 1fr; }
  .dgw-cstud-aeo-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 980px) {
  .dgw-nav-links { display: none; }
  .dgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .dgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 680px) {
  .dgw-nav-inner, .dgw-cstud-hero-inner, .dgw-cstud-inner { padding: 0 16px; }
  .dgw-nav-cta { padding: 9px 14px; font-size: 13px; }
  .dgw-cstud-hero { padding: 118px 0 64px; }
  .dgw-cstud-sub { font-size: 15.5px; }
  .dgw-cstud-map { padding: 18px; }
  .dgw-cstud-region { grid-template-columns: 1fr; gap: 10px; }
  .dgw-cstud-region-name { padding-top: 0; }
  .dgw-cstud-work { padding: 64px 0 76px; }
  .dgw-cstud-work-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dgw-cstud-filters { flex-direction: column; align-items: stretch; max-width: 100%; min-width: 0; }
  .dgw-cstud-filter-group { min-width: 0; max-width: 100%; }
  .dgw-cstud-filter-group { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dgw-cstud-filter-group::-webkit-scrollbar { display: none; }
  .dgw-cstud-fbtn, .dgw-cstud-rbtn { flex-shrink: 0; }
  .dgw-cstud-grid { grid-template-columns: 1fr; gap: 20px; }
  .dgw-cstud-aeo { padding: 64px 0; }
  .dgw-cstud-steps { grid-template-columns: 1fr; }
  .dgw-cstud-cta { padding: 72px 16px; }
  .dgw-footer { padding: 72px 22px 28px; }
  .dgw-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .dgw-footer-bottom { flex-direction: column; text-align: center; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .dgw-cstud-card.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dgw-cstud-card { transition: none !important; }
  .dgw-cstud-map-live i { animation: none; }
  html { scroll-behavior: auto; }
}



/* ============================================================
   DIGIWAH — CASE STUDY: CLIMAT TRADE CENTRE
   Page-scoped prefix: CTSdgw-cs-   (reuses CTSdgw-nav-* / CTSdgw-footer-*)
   ============================================================ */

:root {
  /* Digiwah brand (page chrome) */
  --brand: #010ED0;
  --brand-light: #7c8fff;
  --accent: #FF7A45;
  --accent-soft: #ffb284;
  --navy-deep: #050a2e;
  --navy: #0a1145;
  --ink: #0a0f2c;
  --muted: #6b7280;
  --line: rgba(255,255,255,0.08);

  /* Climat Trade Centre brand (client story accent) */
  --ct-teal: #00897b;
  --ct-teal-d: #00665b;
  --ct-teal-dd: #053f39;
  --ct-green: #54b87f;
  --ct-mint: #c7f5ec;

  /* Climat app/product palette (used inside product mockups + scenes) */
  --cl-navy: #0c1f3d;
  --cl-sky: #0ea5e9;
  --cl-indigo: #6366f1;
  --cl-bg: #f1f5f9;
  --cl-border: #e2e8f0;
  --cl-text: #0f172a;
  --cl-muted: #64748b;
  --cl-ok: #10b981;
  --cl-warn: #f59e0b;
  --cl-danger: #ef4444;

  --surf-light: #f5f8fc;
  --surf-white: #ffffff;
}

.climateTC * { margin: 0; padding: 0; box-sizing: border-box; }
.climateTC h1, .climateTC h2, .climateTC h3, .climateTC h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
.climateTC a { color: inherit; text-decoration: none; }
.climateTC code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: rgba(99,102,241,0.12); color: #4338ca; padding: 1px 6px; border-radius: 5px; }

/* ============================================================
   NAVBAR (inherited)
   ============================================================ */
.CTSdgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.CTSdgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.CTSdgw-nav-logo { display: flex; align-items: center; }
.CTSdgw-nav-logo-img { height: 38px; width: auto; display: block; }
.CTSdgw-nav-links { display: flex; gap: 30px; }
.CTSdgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.CTSdgw-nav-links a:hover { color: #fff; }
.CTSdgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.CTSdgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
.CTSdgw-cs-sec-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.CTSdgw-cs-kicker { display: inline-block; font: 700 12px/1 'Inter'; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 18px; }
.CTSdgw-cs-kicker--teal { color: var(--ct-teal); }
.CTSdgw-cs-kicker--warn { color: #d97706; }
.CTSdgw-cs-kicker--light { color: var(--brand-light); }
.CTSdgw-cs-kicker--center { display: block; text-align: center; }
.CTSdgw-cs-h2 { font: 800 clamp(28px, 4vw, 44px)/1.12 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-h2--light { color: #fff; }
.CTSdgw-cs-p { font: 400 17px/1.7 'Inter'; color: #475569; margin-top: 18px; max-width: 640px; }
.CTSdgw-cs-p--light { color: rgba(205,213,255,0.78); }
.CTSdgw-cs-p--center { margin-left: auto; margin-right: auto; }
.CTSdgw-cs-p strong { color: var(--ink); font-weight: 700; }
.CTSdgw-cs-p--light strong { color: #fff; }

.CTSdgw-cs-how-head { max-width: 720px; margin-bottom: 48px; }
.CTSdgw-cs-how-head--center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }

.CTSdgw-cs-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cl-ok); display: inline-block; box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: dgwCsPulse 2.2s infinite; }
@keyframes dgwCsPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

.CTSreveal { 
/* 	opacity: 0; */
	transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.CTSreveal.CTSis-in { opacity: 1; transform: none; }

.CTSdgw-cs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.CTSdgw-cs-dot--info { background: var(--cl-sky); }
.CTSdgw-cs-dot--warn { background: var(--cl-warn); }
.CTSdgw-cs-dot--ok { background: var(--cl-ok); }
.CTSdgw-cs-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 9.5px/1 'Inter'; }

/* Buttons */
.CTSdgw-cs-btn { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1 'Inter'; padding: 15px 26px; border-radius: 10px; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
.CTSdgw-cs-btn--onbrand { background: #fff; color: var(--ct-teal-d); box-shadow: 0 10px 26px -10px rgba(0,0,0,0.4); }
.CTSdgw-cs-btn--onbrand:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,0,0,0.5); }
.CTSdgw-cs-btn--onbrand-ghost { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.CTSdgw-cs-btn--onbrand-ghost:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.CTSdgw-cs-btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(255,122,69,0.4); }
.CTSdgw-cs-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,122,69,0.55); }
.CTSdgw-cs-btn--ghost { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(124,143,255,0.3); }
.CTSdgw-cs-btn--ghost:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* ============================================================
   1 · HERO (Climat teal brand band)
   ============================================================ */
.CTSdgw-cs-hero { position: relative; overflow: hidden; padding: 150px 0 96px; text-align: center;
  background: linear-gradient(160deg, var(--ct-teal) 0%, var(--ct-teal-d) 55%, var(--ct-teal-dd) 100%); }
.CTSdgw-cs-hero-mesh { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 10%, rgba(84,184,127,0.4) 0%, transparent 45%),
              radial-gradient(ellipse at 85% 20%, rgba(199,245,236,0.18) 0%, transparent 40%),
              radial-gradient(ellipse at 70% 90%, rgba(0,60,53,0.5) 0%, transparent 55%); }
.CTSdgw-cs-hero-grid-floor { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); }
.CTSdgw-cs-hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.CTSdgw-cs-hero-glow--1 { width: 520px; height: 520px; top: -160px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(84,184,127,0.3), transparent 70%); }
.CTSdgw-cs-hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 32px; }
.CTSdgw-cs-hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.CTSdgw-cs-tag { font: 700 11.5px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: #eafff9; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28); padding: 8px 13px; border-radius: 100px; }
.CTSdgw-cs-tag--case { background: #fff; color: var(--ct-teal-d); border-color: #fff; }
.CTSdgw-cs-hero-logocard { display: inline-flex; background: #fff; padding: 18px 26px; border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.45); margin-bottom: 30px; }
.CTSdgw-cs-hero-logocard img { height: 56px; width: auto; display: block; }
.CTSdgw-cs-hero-title { font: 800 clamp(34px, 5.4vw, 60px)/1.05 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.03em; }
.CTSdgw-cs-hl { position: relative; color: #fff; background: linear-gradient(100deg, #eafff9, var(--ct-mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.CTSdgw-cs-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 7px; background: rgba(199,245,236,0.45); border-radius: 4px; z-index: -1; }
.CTSdgw-cs-hero-lead { font: 400 18px/1.7 'Inter'; color: rgba(234,255,249,0.9); margin: 22px auto 0; max-width: 600px; }
.CTSdgw-cs-hero-lead strong { color: #fff; font-weight: 700; }
.CTSdgw-cs-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 38px auto 0; max-width: 720px; }
.CTSdgw-cs-hstat { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 18px 12px; backdrop-filter: blur(6px); }
.CTSdgw-cs-hstat-n { font: 800 24px/1 'Plus Jakarta Sans'; color: #fff; }
.CTSdgw-cs-hstat-n--live { display: inline-flex; align-items: center; gap: 7px; }
.CTSdgw-cs-hstat-l { font: 600 11.5px/1.3 'Inter'; color: rgba(234,255,249,0.72); margin-top: 8px; letter-spacing: 0.02em; }
.CTSdgw-cs-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* ============================================================
   2 · ABOUT THE CLIENT (light)
   ============================================================ */
.CTSdgw-cs-about { background: var(--surf-white); padding: 96px 0; }
.CTSdgw-cs-about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.CTSdgw-cs-tagline { display: flex; align-items: center; gap: 12px; margin: 24px 0; padding: 16px 20px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(0,137,123,0.08), transparent); border-left: 3px solid var(--ct-teal);
  font: 600 17px/1.4 'Plus Jakarta Sans'; color: var(--ct-teal-d); }
.CTSdgw-cs-tagline svg { color: var(--ct-teal); flex-shrink: 0; }
.CTSdgw-cs-about-copy em { font-style: normal; color: var(--ct-teal-d); font-weight: 600; }
.CTSdgw-cs-about-facts { background: var(--surf-light); border: 1px solid #e7edf5; border-radius: 20px; padding: 14px 22px; }
.CTSdgw-cs-fact { display: flex; align-items: center; gap: 15px; padding: 16px 0; border-bottom: 1px solid #e7edf5; }
.CTSdgw-cs-fact:last-of-type { border-bottom: none; }
.CTSdgw-cs-fact-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(0,137,123,0.1); color: var(--ct-teal-d); }
.CTSdgw-cs-fact-ico svg { width: 21px; height: 21px; }
.CTSdgw-cs-fact-l { font: 700 10.5px/1 'Inter'; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.CTSdgw-cs-fact-v { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-fact-v span { font: 500 13px 'Inter'; color: var(--muted); }
.CTSdgw-cs-about-brands { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 10px; }
.CTSdgw-cs-about-brands span { font: 600 12px/1 'Inter'; color: var(--ct-teal-d); background: rgba(0,137,123,0.08); border: 1px solid rgba(0,137,123,0.18); padding: 7px 12px; border-radius: 7px; }

/* ============================================================
   3 · CHALLENGE (light tinted)
   ============================================================ */
.CTSdgw-cs-challenge { background: var(--surf-light); padding: 100px 0; }
.CTSdgw-cs-broken { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 6px; padding: 26px; margin-bottom: 44px;
  background: #fff; border: 1px solid #e7edf5; border-radius: 18px; box-shadow: 0 2px 4px rgba(10,17,69,0.03); }
.CTSdgw-cs-broken-step { display: inline-flex; align-items: center; gap: 9px; font: 600 13.5px/1 'Inter'; color: #334155; background: var(--surf-light); border: 1px solid #e2e8f0; padding: 11px 14px; border-radius: 10px; }
.CTSdgw-cs-broken-ico { color: var(--cl-muted); display: inline-flex; }
.CTSdgw-cs-broken-ico svg { width: 18px; height: 18px; }
.CTSdgw-cs-broken-arr { color: #cbd5e1; font-size: 17px; font-weight: 700; }
.CTSdgw-cs-broken-arr--late { color: var(--cl-danger); }
.CTSdgw-cs-broken-gap { font: 700 11px/1 'Inter'; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cl-danger); background: rgba(239,68,68,0.08); border: 1px dashed rgba(239,68,68,0.4); padding: 9px 12px; border-radius: 100px; }
.CTSdgw-cs-broken-step--late { color: var(--cl-danger); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
.CTSdgw-cs-broken-step--late .CTSdgw-cs-broken-ico { color: var(--cl-danger); }

.CTSdgw-cs-painwall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.CTSdgw-cs-pain-card { background: #fff; border: 1px solid #e7edf5; border-radius: 14px; padding: 24px 20px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.CTSdgw-cs-pain-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -20px rgba(10,17,69,0.28); border-color: #dbe3ef; }
.CTSdgw-cs-pain-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(245,158,11,0.12); color: #d97706; margin-bottom: 14px; }
.CTSdgw-cs-pain-ico svg { width: 22px; height: 22px; }
.CTSdgw-cs-pain-t { font: 700 16px/1.2 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 7px; }
.CTSdgw-cs-pain-d { font: 400 13.5px/1.55 'Inter'; color: var(--muted); }

.CTSdgw-cs-pull { margin-top: 40px; max-width: 760px; position: relative; padding: 22px 26px 22px 52px; border-left: 3px solid var(--accent);
  background: linear-gradient(100deg, rgba(255,122,69,0.06), transparent); border-radius: 0 12px 12px 0; font: 500 19px/1.6 'Inter'; color: #334155; }
.CTSdgw-cs-pull-mark { position: absolute; top: 20px; left: 16px; font: 800 40px/0 'Plus Jakarta Sans'; color: var(--accent-soft); opacity: 0.55; }
.CTSdgw-cs-pull strong { color: var(--ink); font-weight: 700; }
.CTSdgw-cs-pull cite { display: block; margin-top: 12px; font: 600 13.5px/1 'Inter'; font-style: normal; color: var(--muted); }

/* ============================================================
   4 · SOLUTION (dark)
   ============================================================ */
.CTSdgw-cs-solution { padding: 100px 0; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 80% 0%, rgba(0,137,123,0.16) 0%, transparent 55%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
.CTSdgw-cs-sol-head { max-width: 760px; }
.CTSdgw-cs-systems { display: grid; grid-template-columns: 1fr 1.3fr 1.05fr 1.3fr 1fr; gap: 10px; align-items: stretch; margin-top: 54px; }
.CTSdgw-cs-sys { background: rgba(255,255,255,0.04); border: 1px solid rgba(124,143,255,0.2); border-radius: 16px; padding: 24px 22px; backdrop-filter: blur(6px); }
.CTSdgw-cs-sys--core { background: linear-gradient(160deg, rgba(0,137,123,0.2), rgba(84,184,127,0.12)); border-color: rgba(84,184,127,0.5); box-shadow: 0 0 40px -10px rgba(0,137,123,0.4); animation: dgwCoreGlow 2.8s ease-in-out infinite; }
@keyframes dgwCoreGlow { 0%,100% { box-shadow: 0 0 40px -14px rgba(0,137,123,0.55); } 50% { box-shadow: 0 0 56px -6px rgba(0,137,123,0.9); } }
.CTSdgw-cs-sys-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); color: var(--brand-light); margin-bottom: 14px; }
.CTSdgw-cs-sys-ico svg { width: 22px; height: 22px; }
.CTSdgw-cs-sys-ico--core { background: linear-gradient(135deg, var(--ct-teal), var(--ct-green)); color: #fff; font: 800 18px/1 'Plus Jakarta Sans'; }
.CTSdgw-cs-sys-tag { font: 700 10px/1 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(124,143,255,0.8); margin-bottom: 9px; }
.CTSdgw-cs-sys--core .CTSdgw-cs-sys-tag { color: var(--ct-mint); }
.CTSdgw-cs-sys-name { font: 800 21px/1.1 'Plus Jakarta Sans'; color: #fff; }
.CTSdgw-cs-sys-note { font: 500 13px/1.4 'Inter'; color: rgba(205,213,255,0.62); margin-top: 7px; }
/* --- animated flow lanes --- */
.CTSdgw-cs-flowlane { position: relative; display: flex; align-items: center; min-width: 110px; }
.CTSdgw-cs-flowtrack { width: 100%; height: 3px; border-radius: 3px;
  background-image: linear-gradient(90deg, rgba(124,143,255,0.55) 0 52%, transparent 52% 100%);
  background-size: 15px 3px; background-repeat: repeat-x; animation: dgwDash 0.7s linear infinite; }
@keyframes dgwDash { to { background-position: 15px 0; } }

.CTSdgw-cs-flowdot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--cl-sky); box-shadow: 0 0 11px 1px var(--cl-sky); opacity: 0; animation: dgwDotGo 2.6s linear infinite; animation-delay: var(--d, 0s); }
@keyframes dgwDotGo { 0% { left: -3%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: 103%; opacity: 0; } }
.CTSdgw-cs-flowdot--ok { background: var(--cl-ok); box-shadow: 0 0 11px 1px var(--cl-ok); }
.CTSdgw-cs-flowdot--back { margin-top: 3px; background: var(--ct-mint); box-shadow: 0 0 11px 1px rgba(199,245,236,0.8); animation-name: dgwDotBack; animation-duration: 3.1s; }
@keyframes dgwDotBack { 0% { left: 103%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: -3%; opacity: 0; } }

.CTSdgw-cs-flowtruck { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: var(--accent-soft); animation: dgwTruck 3.6s linear infinite; }
.CTSdgw-cs-flowtruck svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 4px 8px rgba(255,122,69,0.45)); animation: dgwTruckBob 0.5s ease-in-out infinite alternate; }
@keyframes dgwTruck { 0% { left: -14%; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes dgwTruckBob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }

.CTSdgw-cs-flowchevrons { position: absolute; right: -1px; top: 50%; transform: translateY(-50%); display: flex; }
.CTSdgw-cs-flowchevrons i { width: 6px; height: 6px; margin-left: -3px; border-top: 2px solid var(--brand-light); border-right: 2px solid var(--brand-light); transform: rotate(45deg); opacity: 0.25; animation: dgwChev 1.4s ease-in-out infinite; }
.CTSdgw-cs-flowchevrons i:nth-child(2) { animation-delay: 0.16s; }
.CTSdgw-cs-flowchevrons i:nth-child(3) { animation-delay: 0.32s; }
.CTSdgw-cs-flowchevrons--ok i { border-color: var(--cl-ok); }
@keyframes dgwChev { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

.CTSdgw-cs-flowlabel { position: absolute; left: 50%; transform: translateX(-50%); top: calc(50% - 30px); font: 600 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(205,213,255,0.6); white-space: nowrap; }
.CTSdgw-cs-flowlabel--back { top: auto; bottom: calc(50% - 30px); color: var(--ct-mint); opacity: 0.85; }

/* ============================================================
   5 · ANIMATED WALKTHROUGH (centerpiece)
   ============================================================ */
.CTSdgw-cs-walk { padding: 100px 0; background: var(--surf-light); }
.CTSdgw-cs-walk-stage { display: grid; grid-template-columns: 350px 1fr; gap: 30px; align-items: start; }

/* step rail */
.CTSdgw-cs-walk-rail { position: relative; padding-left: 4px; }
.CTSdgw-cs-walk-rail::before { content: ""; position: absolute; left: 26px; top: 22px; bottom: 22px; width: 2px; background: #dbe3ef; border-radius: 2px; }
.CTSdgw-cs-walk-railfill { position: absolute; left: 26px; top: 22px; bottom: 22px; width: 2px; }
.CTSdgw-cs-walk-railfill span { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--cl-sky), var(--cl-indigo)); border-radius: 2px; transition: height 0.5s ease; }
.CTSdgw-cs-wstep { position: relative; z-index: 2; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; font-family: inherit; }
.CTSdgw-cs-wstep:hover { background: rgba(255,255,255,0.6); }
.CTSdgw-cs-wstep.CTSis-active { background: #fff; border-color: #e2e8f0; box-shadow: 0 12px 28px -16px rgba(10,17,69,0.3); }
.CTSdgw-cs-wstep-no { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 15px/1 'Plus Jakarta Sans'; color: var(--cl-muted); background: #fff; border: 1px solid #e2e8f0; transition: all 0.25s; }
.CTSdgw-cs-wstep.CTSis-active .CTSdgw-cs-wstep-no { background: linear-gradient(140deg, var(--cl-sky), var(--cl-indigo)); color: #fff; border-color: transparent; }
.CTSdgw-cs-wstep-tx { display: flex; flex-direction: column; gap: 3px; }
.CTSdgw-cs-wstep-tx strong { font: 700 14.5px/1.25 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-wstep-tx span { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); }

/* screen */
.CTSdgw-cs-walk-screen { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 30px 70px -36px rgba(10,17,69,0.4); overflow: hidden; min-height: 430px; }
.CTSdgw-cs-walk-screenbar { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid #eef2f7; background: #f8fafc; }
.CTSdgw-cs-wdot { width: 10px; height: 10px; border-radius: 50%; background: #d7deea; }
.CTSdgw-cs-wdot:nth-child(1) { background: #f1a7a0; } .CTSdgw-cs-wdot:nth-child(2) { background: #f3cf8a; } .CTSdgw-cs-wdot:nth-child(3) { background: #a9dcae; }
.CTSdgw-cs-walk-screenlabel { margin-left: 8px; font: 600 12px/1 'Inter'; color: var(--cl-muted); }

.CTSdgw-cs-scene { position: absolute; inset: 0; top: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.CTSdgw-cs-scene.CTSis-active { opacity: 1; visibility: visible; transform: none; position: relative; }
.CTSdgw-cs-scene-cap { font: 700 10.5px/1 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cl-muted); }

/* Scene 1 — Unleashed order + DELIVERY stamp */
.CTSdgw-cs-ucard { width: 320px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; padding: 16px 18px; box-shadow: 0 8px 24px -14px rgba(10,17,69,0.3); }
.CTSdgw-cs-ucard-head { display: flex; justify-content: space-between; align-items: center; font: 700 14px/1 'JetBrains Mono', monospace; color: var(--cl-navy); }
.CTSdgw-cs-ustatus { font: 700 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); background: #eef2f7; padding: 5px 9px; border-radius: 100px; }
.CTSdgw-cs-ucard-cust { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--cl-text); margin: 10px 0 12px; }
.CTSdgw-cs-uline { display: flex; justify-content: space-between; font: 500 12.5px/1.4 'Inter'; color: #475569; padding: 6px 0; border-top: 1px dashed #eef2f7; }
.CTSdgw-cs-uline span:last-child { color: var(--cl-muted); font-family: 'JetBrains Mono', monospace; }
.CTSdgw-cs-ucard-foot { font: 500 11.5px/1.3 'Inter'; color: var(--cl-muted); margin-top: 12px; }
.CTSdgw-cs-stamp { font: 800 22px/1 'Plus Jakarta Sans'; letter-spacing: 0.1em; color: var(--cl-ok); border: 3px solid var(--cl-ok); border-radius: 10px; padding: 8px 16px; transform: rotate(-9deg) scale(0); opacity: 0; }
.CTSdgw-cs-scene.CTSis-active[data-scene="0"] .CTSdgw-cs-stamp { animation: dgwStampIn 0.6s 0.5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes dgwStampIn { 0% { transform: rotate(-9deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } }

/* shared flow nodes (scenes 2 + 6) */
.CTSdgw-cs-wflow { display: flex; align-items: center; gap: 10px; }
.CTSdgw-cs-wnode { font: 700 12.5px/1 'Inter'; color: #fff; padding: 11px 16px; border-radius: 10px; white-space: nowrap; }
.CTSdgw-cs-wnode--ext { background: #64748b; }
.CTSdgw-cs-wnode--core { background: linear-gradient(135deg, var(--ct-teal), var(--ct-green)); }
.CTSdgw-cs-wnode--down { background: var(--cl-ok); }
.CTSdgw-cs-wpipe { position: relative; width: 70px; height: 2px; background: #dbe3ef; border-radius: 2px; }
.CTSdgw-cs-wpacket { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--cl-sky); transform: translate(-50%,-50%); box-shadow: 0 0 10px var(--cl-sky); opacity: 0; }
.CTSdgw-cs-wpacket--ok { background: var(--cl-ok); box-shadow: 0 0 10px var(--cl-ok); }
.CTSdgw-cs-scene.CTSis-active[data-scene="1"] .CTSdgw-cs-wpacket { animation: dgwPacket 1.3s 0.3s ease-in-out infinite; }
.CTSdgw-cs-scene.CTSis-active[data-scene="5"] .CTSdgw-cs-wpacket { animation: dgwPacket 1.1s 0.3s ease-in-out infinite; }
.CTSdgw-cs-scene.CTSis-active[data-scene="5"] .CTSdgw-cs-wpacket--d2 { animation-delay: 0.9s; }
@keyframes dgwPacket { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.CTSdgw-cs-jobcard { width: 300px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; padding: 15px 17px; box-shadow: 0 8px 24px -14px rgba(10,17,69,0.3); transform: scale(0.85); opacity: 0; }
.CTSdgw-cs-scene.CTSis-active[data-scene="1"] .CTSdgw-cs-jobcard { animation: dgwPop 0.6s 0.9s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes dgwPop { to { transform: scale(1); opacity: 1; } }
.CTSdgw-cs-jobcard-head { display: flex; align-items: center; gap: 8px; font: 700 12px/1 'JetBrains Mono', monospace; color: var(--cl-muted); }
.CTSdgw-cs-jobcard-name { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--cl-navy); margin: 8px 0 4px; }
.CTSdgw-cs-jobcard-meta { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); }
.CTSdgw-cs-zeropill { font: 700 12.5px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); padding: 9px 15px; border-radius: 100px; opacity: 0; }
.CTSdgw-cs-scene.CTSis-active[data-scene="1"] .CTSdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.5s ease forwards; }
.CTSdgw-cs-scene.CTSis-active[data-scene="2"] .CTSdgw-cs-zeropill { animation: dgwFadeUp 0.5s 1.6s ease forwards; }
@keyframes dgwFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Scene 3 — mini board with flying card */
.CTSdgw-cs-miniboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 380px; max-width: 100%; }
.CTSdgw-cs-mb-col { background: var(--cl-bg); border-radius: 10px; padding: 10px; min-height: 130px; }
.CTSdgw-cs-mb-col--rail { background: #eef2f7; }
.CTSdgw-cs-mb-tag { display: flex; align-items: center; gap: 6px; font: 700 11px/1 'Inter'; color: var(--cl-navy); margin-bottom: 10px; }
.CTSdgw-cs-mb-card { background: #fff; border: 1px solid var(--cl-border); border-radius: 9px; padding: 9px 10px; box-shadow: 0 2px 6px rgba(14,165,233,0.16); }
.CTSdgw-cs-mb-so { font: 700 10px/1 'JetBrains Mono', monospace; color: var(--cl-muted); }
.CTSdgw-cs-mb-cn { font: 700 12px/1.2 'Inter'; color: var(--cl-navy); margin-top: 4px; }
.CTSdgw-cs-mb-card--fly { position: relative; }
.CTSdgw-cs-scene.CTSis-active[data-scene="2"] .CTSdgw-cs-mb-card--fly { animation: dgwFly 2.4s 0.5s ease-in-out infinite; }
@keyframes dgwFly { 0%,12% { transform: translate(0,0) rotate(0); } 45%,62% { transform: translate(135px, 38px) rotate(-4deg); } 90%,100% { transform: translate(135px, 38px) rotate(0); } }
.CTSdgw-cs-mb-drop { border: 1.5px dashed #c3d0e2; border-radius: 8px; color: #94a3b8; font: 600 10.5px/1 'Inter'; text-align: center; padding: 22px 6px; }

/* Scene 4 + 5 — phone */
.CTSdgw-cs-phone { width: 240px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 22px; padding: 12px; box-shadow: 0 20px 44px -22px rgba(10,17,69,0.4); }
.CTSdgw-cs-phone-bar { font: 700 12px/1 'Plus Jakarta Sans'; color: var(--cl-navy); text-align: center; padding: 8px 0 12px; }
.CTSdgw-cs-map { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e7eef5, #dde7f1); }
.CTSdgw-cs-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.25) 1px, transparent 1px); background-size: 26px 26px; }
.CTSdgw-cs-map-route { position: absolute; left: 18%; top: 80%; width: 60%; height: 50%; border-top: 3px solid var(--cl-sky); border-right: 3px solid var(--cl-sky); border-top-right-radius: 40px; opacity: 0.85; }
.CTSdgw-cs-map-pin { position: absolute; right: 20%; top: 26%; color: var(--cl-danger); }
.CTSdgw-cs-map-pin svg { width: 26px; height: 26px; }
.CTSdgw-cs-ping { position: absolute; left: 50%; top: 60%; width: 14px; height: 14px; border-radius: 50%; background: rgba(239,68,68,0.4); transform: translate(-50%,-50%); }
.CTSdgw-cs-scene.CTSis-active[data-scene="3"] .CTSdgw-cs-ping { animation: dgwPing 1.6s ease-out infinite; }
@keyframes dgwPing { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 18px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.CTSdgw-cs-phone-addr { font: 600 13px/1 'Inter'; color: var(--cl-text); text-align: center; margin: 12px 0 10px; }
.CTSdgw-cs-phone-btn { font: 600 12.5px/1 'Inter'; color: #fff; background: linear-gradient(135deg, var(--cl-sky), var(--cl-indigo)); text-align: center; padding: 12px; border-radius: 11px; }
.CTSdgw-cs-pod-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 11px; }
.CTSdgw-cs-pod-photo, .CTSdgw-cs-pod-gps { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 11px; background: var(--cl-bg); font: 600 10.5px/1 'Inter'; color: var(--cl-muted); }
.CTSdgw-cs-pod-photo svg, .CTSdgw-cs-pod-gps svg { width: 22px; height: 22px; color: var(--cl-indigo); }
.CTSdgw-cs-pod-gps svg { color: var(--cl-ok); }
.CTSdgw-cs-pod-signlabel { font: 600 10px/1 'Inter'; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: 5px; }
.CTSdgw-cs-pod-sign { height: 60px; border: 1px solid var(--cl-border); border-radius: 11px; background: #f8fafc; overflow: hidden; }
.CTSdgw-cs-pod-sign svg { width: 100%; height: 100%; }
.CTSdgw-cs-signpath { stroke-dasharray: 520; stroke-dashoffset: 520; }
.CTSdgw-cs-scene.CTSis-active[data-scene="4"] .CTSdgw-cs-signpath { animation: dgwSign 1.6s 0.4s ease forwards; }
@keyframes dgwSign { to { stroke-dashoffset: 0; } }
.CTSdgw-cs-pod-qty { display: flex; align-items: center; gap: 8px; font: 700 12px/1 'Inter'; color: var(--cl-ok); margin-top: 11px; opacity: 0; }
.CTSdgw-cs-scene.CTSis-active[data-scene="4"] .CTSdgw-cs-pod-qty { animation: dgwFadeUp 0.5s 2s ease forwards; }

/* Scene 6 — invoice */
.CTSdgw-cs-invoice { width: 280px; max-width: 100%; background: #fff; border: 1px solid var(--cl-border); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px -16px rgba(10,17,69,0.35); transform: translateY(14px) rotateX(12deg); opacity: 0; transform-origin: top center; }
.CTSdgw-cs-scene.CTSis-active[data-scene="5"] .CTSdgw-cs-invoice { animation: dgwInvoice 0.7s 1.8s cubic-bezier(.2,1.2,.4,1) forwards; }
@keyframes dgwInvoice { to { transform: none; opacity: 1; } }
.CTSdgw-cs-invoice-top { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; background: var(--cl-navy); color: #fff; font: 800 12px/1 'Plus Jakarta Sans'; letter-spacing: 0.1em; }
.CTSdgw-cs-invoice-no { font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: 0; color: var(--cl-sky); }
.CTSdgw-cs-invoice-body { padding: 14px 16px; }
.CTSdgw-cs-invoice-line { font: 700 14px/1.3 'Plus Jakarta Sans'; color: var(--cl-text); }
.CTSdgw-cs-invoice-line--muted { font: 500 12px/1.3 'Inter'; color: var(--cl-muted); margin-top: 4px; }
.CTSdgw-cs-invoice-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef2f7; font: 700 12px/1 'Inter'; color: var(--cl-ok); background: rgba(16,185,129,0.06); }

/* ============================================================
   6 · FEATURES (dark)
   ============================================================ */
.CTSdgw-cs-features { padding: 100px 0; background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%); }
.CTSdgw-cs-features .CTSdgw-cs-how-head { max-width: 760px; }
.CTSdgw-cs-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.CTSdgw-cs-feat-col { background: rgba(255,255,255,0.035); border: 1px solid rgba(124,143,255,0.16); border-radius: 18px; padding: 26px 24px; transition: border-color 0.3s ease, transform 0.3s ease; }
.CTSdgw-cs-feat-col:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-4px); }
.CTSdgw-cs-feat-head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(124,143,255,0.14); }
.CTSdgw-cs-feat-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.CTSdgw-cs-feat-ico svg { width: 23px; height: 23px; }
.CTSdgw-cs-feat-head--office .CTSdgw-cs-feat-ico { background: rgba(14,165,233,0.16); color: #7dd3fc; }
.CTSdgw-cs-feat-head--driver .CTSdgw-cs-feat-ico { background: rgba(99,102,241,0.16); color: #a5b4fc; }
.CTSdgw-cs-feat-head--integ .CTSdgw-cs-feat-ico { background: rgba(16,185,129,0.16); color: #6ee7b7; }
.CTSdgw-cs-feat-col-t { font: 700 17px/1.1 'Plus Jakarta Sans'; color: #fff; }
.CTSdgw-cs-feat-col-s { font: 500 12px/1 'Inter'; color: rgba(205,213,255,0.5); margin-top: 4px; }
.CTSdgw-cs-feat-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.CTSdgw-cs-feat-list li { position: relative; padding-left: 24px; font: 400 14px/1.5 'Inter'; color: rgba(205,213,255,0.82); }
.CTSdgw-cs-feat-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* ============================================================
   7 · ARCHITECTURE + DEPTH (light)
   ============================================================ */
.CTSdgw-cs-arch { padding: 100px 0; background: var(--surf-white); }
.CTSdgw-cs-arch .CTSdgw-cs-how-head { max-width: 720px; }
.CTSdgw-cs-archmap { max-width: 760px; margin: 0 auto 56px; }
.CTSdgw-cs-archrow { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 20px 24px; border-radius: 16px; border: 1px solid #e7edf5; background: var(--surf-light); }
.CTSdgw-cs-archrow--driver { border-left: 4px solid var(--cl-indigo); }
.CTSdgw-cs-archrow--core { border-left: 4px solid var(--ct-teal); }
.CTSdgw-cs-archrow--integ { border-left: 4px solid var(--cl-warn); }
.CTSdgw-cs-archrow--ext { border-left: 4px solid #64748b; }
.CTSdgw-cs-archrow-label { font: 800 15px/1.2 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-archrow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.CTSdgw-cs-archrow-chips span { font: 600 12.5px/1 'Inter'; color: #334155; background: #fff; border: 1px solid #e2e8f0; padding: 8px 12px; border-radius: 8px; }
.CTSdgw-cs-archconn { display: flex; justify-content: center; height: 22px; }
.CTSdgw-cs-archconn span { width: 2px; height: 100%; background: linear-gradient(180deg, #cbd5e1, #94a3b8); position: relative; }
.CTSdgw-cs-archconn span::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 7px; height: 7px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: translateX(-50%) rotate(45deg); }

.CTSdgw-cs-tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.CTSdgw-cs-tech-card { position: relative; background: var(--surf-light); border: 1px solid #e8edf5; border-radius: 16px; padding: 24px 24px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.CTSdgw-cs-tech-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(10,17,69,0.3); border-color: #d3ddec; }
.CTSdgw-cs-tech-no { font: 800 13px/1 'JetBrains Mono', monospace; color: var(--brand); letter-spacing: 0.05em; margin-bottom: 12px; }
.CTSdgw-cs-tech-t { font: 700 16.5px/1.3 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-tech-d { font: 400 13.5px/1.6 'Inter'; color: var(--muted); margin-top: 9px; }

/* ============================================================
   8 · RESULTS (dark + glow)
   ============================================================ */
.CTSdgw-cs-results { position: relative; overflow: hidden; padding: 100px 0; background: linear-gradient(180deg, var(--navy) 0%, #060b2e 100%); }
.CTSdgw-cs-results-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -200px; right: -120px; background: radial-gradient(circle, rgba(16,185,129,0.12), transparent 70%); filter: blur(50px); pointer-events: none; }
.CTSdgw-cs-results .CTSdgw-cs-sec-inner { position: relative; z-index: 2; }
.CTSdgw-cs-res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.CTSdgw-cs-res-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(124,143,255,0.18); border-radius: 16px; padding: 24px 22px; transition: transform 0.3s ease, border-color 0.3s ease; }
.CTSdgw-cs-res-card:hover { transform: translateY(-4px); border-color: rgba(16,185,129,0.4); }
.CTSdgw-cs-res-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(16,185,129,0.14); color: #6ee7b7; margin-bottom: 15px; }
.CTSdgw-cs-res-ico svg { width: 22px; height: 22px; }
.CTSdgw-cs-res-t { font: 700 16px/1.25 'Plus Jakarta Sans'; color: #fff; }
.CTSdgw-cs-res-d { font: 400 13.5px/1.55 'Inter'; color: rgba(205,213,255,0.68); margin-top: 9px; }

.CTSdgw-cs-quote { margin-top: 36px; position: relative; text-align: center; background: linear-gradient(160deg, rgba(0,137,123,0.16), rgba(84,184,127,0.08)); border: 1px solid rgba(84,184,127,0.3); border-radius: 22px; padding: 44px 32px 32px; }
.CTSdgw-cs-quote-mark { font: 800 70px/0.5 'Plus Jakarta Sans'; color: var(--ct-mint); opacity: 0.55; height: 30px; }
.CTSdgw-cs-quote-text { font: 800 clamp(30px, 4vw, 46px)/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; margin: 10px 0 22px; }
.CTSdgw-cs-quote-cite { display: inline-flex; align-items: center; gap: 13px; text-align: left; }
.CTSdgw-cs-quote-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--ct-teal), var(--ct-green)); color: #fff; font: 800 15px/1 'Plus Jakarta Sans'; display: flex; align-items: center; justify-content: center; }
.CTSdgw-cs-quote-meta { display: flex; flex-direction: column; gap: 4px; }
.CTSdgw-cs-quote-meta strong { font: 700 15px/1 'Inter'; color: #fff; }
.CTSdgw-cs-quote-meta span { font: 500 12.5px/1.4 'Inter'; color: rgba(205,213,255,0.62); }
.CTSdgw-cs-quote-note { margin-top: 22px; display: inline-block; font: 600 12px/1 'Inter'; letter-spacing: 0.04em; color: var(--ct-mint); background: rgba(0,137,123,0.16); border: 1px solid rgba(84,184,127,0.35); padding: 9px 16px; border-radius: 100px; }

/* ============================================================
   9 · WHAT'S NEXT (light)
   ============================================================ */
.CTSdgw-cs-next { padding: 100px 0; background: var(--surf-light); }
.CTSdgw-cs-next .CTSdgw-cs-how-head { max-width: 680px; }
.CTSdgw-cs-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.CTSdgw-cs-next-card { background: #fff; border: 1px solid #e8edf5; border-radius: 16px; padding: 24px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.CTSdgw-cs-next-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(10,17,69,0.25); }
.CTSdgw-cs-next-tag { display: inline-block; font: 700 10px/1 'Inter'; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ct-teal-d); background: rgba(0,137,123,0.08); border: 1px solid rgba(0,137,123,0.18); padding: 6px 11px; border-radius: 100px; margin-bottom: 15px; }
.CTSdgw-cs-next-t { font: 700 17px/1.25 'Plus Jakarta Sans'; color: var(--ink); }
.CTSdgw-cs-next-d { font: 400 13.5px/1.6 'Inter'; color: var(--muted); margin-top: 9px; }

/* ============================================================
   10 · CTA (dark finale)
   ============================================================ */
.CTSdgw-cs-cta { position: relative; overflow: hidden; padding: 110px 0; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); text-align: center; }
.CTSdgw-cs-cta-glow { position: absolute; width: 760px; height: 760px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(0,137,123,0.16), transparent 65%); filter: blur(60px); pointer-events: none; }
.CTSdgw-cs-cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 32px; }
.CTSdgw-cs-cta-title { font: 800 clamp(30px, 4.5vw, 48px)/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.CTSdgw-cs-cta-p { font: 400 18px/1.7 'Inter'; color: rgba(205,213,255,0.78); margin: 22px auto 34px; max-width: 580px; }
.CTSdgw-cs-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER (inherited)
   ============================================================ */
.CTSdgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.CTSdgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.CTSdgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.CTSdgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.CTSdgw-footer-brand { max-width: 360px; }
.CTSdgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.CTSdgw-footer-logo { height: 40px; width: auto; display: block; }
.CTSdgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.CTSdgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.CTSdgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.CTSdgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.CTSdgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.CTSdgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.CTSdgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.CTSdgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.CTSdgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.CTSdgw-footer-col { min-width: 0; }
.CTSdgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.CTSdgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.CTSdgw-footer-list a, .CTSdgw-footer-list li, .CTSdgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.CTSdgw-footer-list a:hover { color: #ffb284; }
.CTSdgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.CTSdgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.CTSdgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.CTSdgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.CTSdgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.CTSdgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.CTSdgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.CTSdgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.CTSdgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.CTSdgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.CTSdgw-footer-legal a:hover { color: #fff; }
.CTSdgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.CTSdgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .CTSdgw-nav-links { display: none; }
  .CTSdgw-cs-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .CTSdgw-cs-systems { grid-template-columns: 1fr; gap: 4px; }
  .CTSdgw-cs-flowlane { width: 170px; height: 52px; margin: 14px auto; transform: rotate(90deg); }
  .CTSdgw-cs-flowlabel { display: none; }
  .CTSdgw-cs-flowtruck { display: none; }
  .CTSdgw-cs-walk-stage { grid-template-columns: 1fr; gap: 22px; }
  .CTSdgw-cs-walk-screen { min-height: 400px; }
  .CTSdgw-cs-feat-grid, .CTSdgw-cs-next-grid { grid-template-columns: 1fr; }
  .CTSdgw-cs-tech-grid { grid-template-columns: 1fr; }
  .CTSdgw-cs-res-grid { grid-template-columns: 1fr 1fr; }
  .CTSdgw-cs-painwall { grid-template-columns: 1fr 1fr; }
  .CTSdgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .CTSdgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 640px) {
  .CTSdgw-cs-hero { padding: 130px 0 76px; }
  .CTSdgw-cs-hero-stats { grid-template-columns: 1fr 1fr; }
  .CTSdgw-cs-sec-inner, .CTSdgw-cs-hero-inner { padding-left: 22px; padding-right: 22px; }
  .CTSdgw-cs-painwall { grid-template-columns: 1fr; }
  .CTSdgw-cs-res-grid { grid-template-columns: 1fr; }
  .CTSdgw-cs-broken { gap: 8px; }
  .CTSdgw-cs-broken-step { font-size: 12px; padding: 9px 11px; }
  .CTSdgw-cs-archrow { grid-template-columns: 1fr; gap: 12px; }
  .CTSdgw-cs-about, .CTSdgw-cs-challenge, .CTSdgw-cs-solution, .CTSdgw-cs-walk, .CTSdgw-cs-features, .CTSdgw-cs-arch, .CTSdgw-cs-results, .CTSdgw-cs-next, .CTSdgw-cs-cta { padding: 72px 0; }
  .CTSdgw-footer { padding: 72px 22px 28px; }
  .CTSdgw-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .CTSdgw-footer-bottom { flex-direction: column; text-align: center; gap: 18px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .CTSreveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .CTSdgw-cs-live-dot { animation: none !important; }
  .CTSdgw-cs-sys--core, .CTSdgw-cs-flowtrack, .CTSdgw-cs-flowtruck, .CTSdgw-cs-flowtruck svg, .CTSdgw-cs-flowchevrons i { animation: none !important; }
  .CTSdgw-cs-flowdot { animation: none !important; opacity: 0.9 !important; left: 44% !important; }
  .CTSdgw-cs-flowdot--back { left: 56% !important; }
  .CTSdgw-cs-flowtruck { left: 40% !important; opacity: 1 !important; }
  .CTSdgw-cs-scene * { animation: none !important; }
  .CTSdgw-cs-stamp, .CTSdgw-cs-jobcard, .CTSdgw-cs-zeropill, .CTSdgw-cs-invoice, .CTSdgw-cs-pod-qty { opacity: 1 !important; transform: none !important; }
  .CTSdgw-cs-signpath { stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
}



/* -------------------------------------------------------------
   PARTNER, NOT RESELLER
   ------------------------------------------------------------- */
.dgw-zerp-partner {
  padding: 110px 0;
  background: var(--dgw-zerp-bg-tint);
  scroll-margin-top: 76px;
}

.dgw-zerp-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 46px;
}

.dgw-zerp-partner-card {
  position: relative;
  padding: 32px 30px;
  background: #fff;
  border: 1px solid var(--dgw-zerp-line);
  border-radius: 18px;
  box-shadow: var(--dgw-zerp-card-shadow);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}

.dgw-zerp-partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dgw-zerp-card-shadow-h);
}

.dgw-zerp-partner-card-us {
  border-color: rgba(27, 61, 245, 0.22);
  box-shadow: var(--dgw-zerp-card-shadow-h);
}

.dgw-zerp-partner-tag {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dgw-zerp-muted-2);
  margin-bottom: 10px;
}

.dgw-zerp-partner-card-us .dgw-zerp-partner-tag {
  color: var(--dgw-zerp-brand);
}

.dgw-zerp-partner-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--dgw-zerp-ink);
  margin: 0 0 12px;
}

.dgw-zerp-partner-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--dgw-zerp-muted);
  margin: 0;
}

.dgw-zerp-partner-close {
  max-width: 780px;
  margin: 34px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--dgw-zerp-muted);
}

.dgw-zerp-partner-close a {
  color: var(--dgw-zerp-brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 61, 245, 0.28);
}

.dgw-zerp-partner-close a:hover {
  border-bottom-color: var(--dgw-zerp-brand);
}

@media (max-width: 860px) {
  .dgw-zerp-partner { padding: 76px 0; }
  .dgw-zerp-partner-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .dgw-zerp-partner-card { padding: 26px 24px; }
}


/* ===================== assets/ai-cockpit/ai-cockpit.css ===================== */
/* ==========================================================
   AI CEO COCKPIT — new homepage AI section (prefix dgw-aix-)
   ========================================================== */
.dgw-aix {
  --aix-bg: #040820;
  --aix-ink: #eef1ff;
  --aix-mute: #8f97c4;
  --aix-line: rgba(255,255,255,0.08);
  --aix-blue: #3d5bff;
  --aix-blue-2: #010ED0;
  --aix-orange: #FF7A45;
  --aix-green: #2ee59d;
  --aix-red: #ff5c7a;
  position: relative;
  background: radial-gradient(120% 80% at 50% 0%, #0b1650 0%, var(--aix-bg) 55%);
  padding: 120px 24px 110px;
  overflow: hidden;
  isolation: isolate;
  color: var(--aix-ink);
  font-family: 'Inter', sans-serif;
}
.dgw-aix-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 75%);
}
.dgw-aix-glow { position: absolute; border-radius: 50%; filter: blur(110px); z-index: -1; pointer-events: none; }
.dgw-aix-glow-1 { width: 620px; height: 620px; background: rgba(61,91,255,0.35); top: 18%; left: -12%; animation: dgwAixFloat 14s ease-in-out infinite; }
.dgw-aix-glow-2 { width: 520px; height: 520px; background: rgba(255,122,69,0.22); bottom: -8%; right: -10%; animation: dgwAixFloat 17s ease-in-out infinite reverse; }
@keyframes dgwAixFloat { 50% { transform: translate(60px, -40px) scale(1.08); } }

.dgw-aix-inner { max-width: 1240px; margin: 0 auto; }

/* ---------- header ---------- */
.dgw-aix-head { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.dgw-aix-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: #b9c3ff; padding: 7px 14px; border-radius: 100px;
  border: 1px solid rgba(124,145,255,0.3); background: rgba(61,91,255,0.08);
  margin-bottom: 20px;
}
.dgw-aix-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aix-green); box-shadow: 0 0 10px var(--aix-green); }
.dgw-aix-h2 {
  font: 700 50px/1.08 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.025em;
  color: #fff; margin: 0 0 18px;
}
.dgw-aix-grad {
  background: linear-gradient(90deg, #8ea2ff 0%, #c9b6ff 45%, #ff9a6b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dgw-aix-sub { font-size: 17px; line-height: 1.65; color: var(--aix-mute); margin: 0; }

/* ---------- window ---------- */
.dgw-aix-stage { position: relative; perspective: 1800px; }
.dgw-aix-window {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(16,24,72,0.82), rgba(8,13,44,0.92));
  border: 1px solid rgba(140,160,255,0.16);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 60px 120px -40px rgba(1,14,208,0.55),
    0 0 80px -20px rgba(61,91,255,0.35);
  overflow: hidden;
  transform: rotateX(8deg) translateY(30px) scale(.97);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .9s ease;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dgw-aix.is-in .dgw-aix-window { transform: none; opacity: 1; }
.dgw-aix-window::before { /* animated border sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--aix-angle, 0deg), transparent 0 70%, rgba(142,162,255,.9) 80%, rgba(255,154,107,.9) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: dgwAixSpin 6s linear infinite;
  opacity: .7;
}
@property --aix-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes dgwAixSpin { to { --aix-angle: 360deg; } }

.dgw-aix-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--aix-line);
  background: rgba(255,255,255,0.02);
}
.dgw-aix-dots { display: flex; gap: 7px; }
.dgw-aix-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dgw-aix-dots i:nth-child(2) { background: #febc2e; }
.dgw-aix-dots i:nth-child(3) { background: #28c840; }
.dgw-aix-bar-title { font: 600 13px/1 'Inter', sans-serif; color: #c7cdf2; }
.dgw-aix-bar-title em { font-style: normal; color: #5a6396; margin: 0 4px; }
.dgw-aix-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--aix-green);
  padding: 6px 10px; border-radius: 100px; background: rgba(46,229,157,0.08); border: 1px solid rgba(46,229,157,0.25);
}
.dgw-aix-live span { width: 6px; height: 6px; border-radius: 50%; background: var(--aix-green); animation: dgwAixPulse 1.6s ease-in-out infinite; }
@keyframes dgwAixPulse { 50% { box-shadow: 0 0 0 5px rgba(46,229,157,0); opacity: .5; } 0% { box-shadow: 0 0 0 0 rgba(46,229,157,.5); } }

/* ---------- ask bar ---------- */
.dgw-aix-ask {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin: 18px 20px 0; padding: 16px 18px;
  border-radius: 14px;
  background: rgba(4,8,32,0.7);
  border: 1px solid rgba(124,145,255,0.22);
  transition: border-color .3s ease, box-shadow .3s ease;
  min-height: 58px;
}
.dgw-aix-ask.is-typing { border-color: rgba(142,162,255,.6); box-shadow: 0 0 0 4px rgba(61,91,255,.12), 0 0 40px -6px rgba(61,91,255,.5); }
.dgw-aix-spark { width: 20px; height: 20px; color: #9fb0ff; flex: none; }
.dgw-aix-ask.is-thinking .dgw-aix-spark { animation: dgwAixSparkSpin 1.2s linear infinite; color: #ffb48f; }
@keyframes dgwAixSparkSpin { to { transform: rotate(360deg); } }
.dgw-aix-q { font: 500 17px/1.4 'Plus Jakarta Sans', sans-serif; color: #fff; }
.dgw-aix-caret { width: 2px; height: 22px; background: #9fb0ff; margin-left: -8px; animation: dgwAixBlink 1s steps(1) infinite; }
@keyframes dgwAixBlink { 50% { opacity: 0; } }
.dgw-aix-enter {
  margin-left: auto; flex: none;
  font: 600 12px/1 'Inter', sans-serif; color: #8f97c4;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--aix-line); background: rgba(255,255,255,0.03);
  transition: all .2s ease;
}
.dgw-aix-enter.is-hit { color: #fff; background: var(--aix-blue); border-color: var(--aix-blue); transform: scale(.94); box-shadow: 0 0 24px rgba(61,91,255,.8); }

/* ---------- body ---------- */
.dgw-aix-body { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 18px; padding: 18px 20px 20px; }
.dgw-aix-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* sources rail */
.dgw-aix-sources {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.dgw-aix-sources::before { /* rail line */
  content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142,162,255,.35), transparent);
}
.dgw-aix-src {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px;
  background: rgba(10,16,52,0.95); border: 1px solid var(--aix-line);
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.dgw-aix-src-ic {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04); color: #6f78a8; transition: all .35s ease;
}
.dgw-aix-src-ic svg { width: 16px; height: 16px; }
.dgw-aix-src b { display: block; font: 600 12.5px/1.2 'Inter', sans-serif;
/* 	color: #c7cdf2;  */
}
.dgw-aix-src small { display: block; font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #5a6396; margin-top: 3px; transition: color .3s; }
.dgw-aix-src.is-reading { border-color: rgba(142,162,255,.7); box-shadow: 0 0 0 3px rgba(61,91,255,.15), 0 0 30px -4px rgba(61,91,255,.7); background: rgba(22,34,100,.95); }
.dgw-aix-src.is-reading .dgw-aix-src-ic { background: var(--aix-blue); color: #fff; animation: dgwAixSparkSpin 1s linear infinite; }
.dgw-aix-src.is-done { border-color: rgba(46,229,157,.35); }
.dgw-aix-src.is-done .dgw-aix-src-ic { background: rgba(46,229,157,.14); color: var(--aix-green); }
.dgw-aix-src.is-done small { color: var(--aix-green); }
.dgw-aix-src::after { /* pulse ring when read */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--aix-green); opacity: 0; pointer-events: none;
}
.dgw-aix-src.is-done::after { animation: dgwAixRing .8s ease-out; }
@keyframes dgwAixRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }

/* KPIs */
.dgw-aix-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dgw-aix-kpi {
  position: relative; overflow: hidden;
  padding: 14px 14px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--aix-line);
  opacity: .28; transform: translateY(6px); filter: blur(2px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease, border-color .5s;
}
.dgw-aix-kpi.is-on { opacity: 1; transform: none; filter: none; }
.dgw-aix-kpi.is-alert { border-color: rgba(255,92,122,.4); background: linear-gradient(180deg, rgba(255,92,122,.08), rgba(255,255,255,.02)); }
.dgw-aix-kpi span { display: block; font: 500 11.5px/1.3 'Inter', sans-serif; color: var(--aix-mute); }
.dgw-aix-kpi strong { display: block; font: 700 25px/1.1 'Plus Jakarta Sans', sans-serif; color: #fff; margin: 8px 0 6px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dgw-aix-kpi em {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 11px/1 'Inter', sans-serif; font-style: normal;
  padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,0.05); color: var(--aix-mute);
}
.dgw-aix-kpi em.up { color: var(--aix-green); background: rgba(46,229,157,.1); }
.dgw-aix-kpi em.down { color: var(--aix-red); background: rgba(255,92,122,.12); }
.dgw-aix-kpi::after { /* shimmer sweep on land */
  content: ""; position: absolute; top: 0; bottom: 0; width: 60%; left: -70%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}
.dgw-aix-kpi.is-on::after { animation: dgwAixSweep 1s ease .1s; }
@keyframes dgwAixSweep { to { left: 120%; } }

/* lower: chart + insight */
.dgw-aix-lower { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.dgw-aix-card {
  position: relative;
  border-radius: 14px; padding: 16px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--aix-line);
  min-height: 270px;
  display: flex; flex-direction: column;
}
.dgw-aix-chart-svg { flex: 1; display: flex; align-items: center; }
.dgw-aix-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 13px/1.2 'Inter', sans-serif; color: #c7cdf2; margin-bottom: 10px; }
.dgw-aix-card-head span { display: inline-flex; align-items: center; gap: 7px; }
.dgw-aix-card-head svg { width: 14px; height: 14px; color: var(--aix-orange); }
.dgw-aix-card-tag { font: 600 10.5px/1 'Inter', sans-serif !important; letter-spacing: .08em; text-transform: uppercase; color: #6f78a8 !important; }
.dgw-aix-chart-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.dgw-aix-chart-svg .ax { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.dgw-aix-chart-svg .lbl { fill: #6f78a8; font: 500 10px 'Inter', sans-serif; }
.dgw-aix-chart-svg .val { fill: #c7cdf2; font: 600 10.5px 'Inter', sans-serif; opacity: 0; transition: opacity .4s ease; }
.dgw-aix-chart-svg .line { fill: none; stroke: url(#dgwAixLineGrad); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(124,145,255,.6)); }
.dgw-aix-chart-svg .area { fill: url(#dgwAixAreaGrad); opacity: 0; transition: opacity .8s ease; }
.dgw-aix-chart-svg .bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.dgw-aix-chart-svg.is-drawn .bar { transform: scaleY(1); }
.dgw-aix-chart-svg.is-drawn .val, .dgw-aix-chart-svg.is-drawn .area { opacity: 1; }
.dgw-aix-chart-svg .hot { fill: var(--aix-red); }
.dgw-aix-chart-svg .dot-hot { fill: var(--aix-red); opacity: 0; }
.dgw-aix-chart-svg.is-drawn .dot-hot { opacity: 1; animation: dgwAixDotPulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dgwAixDotPulse { 50% { transform: scale(1.6); opacity: .6; } }

.dgw-aix-insight {
  opacity: .25; filter: blur(3px);
  transition: opacity .6s ease, filter .6s ease, border-color .6s ease, box-shadow .6s ease;
  display: flex; flex-direction: column;
}
.dgw-aix-insight.is-on {
  opacity: 1; filter: none;
  border-color: rgba(255,154,107,.35);
  box-shadow: 0 0 0 1px rgba(255,154,107,.1) inset, 0 20px 60px -20px rgba(255,122,69,.45);
  background: linear-gradient(160deg, rgba(255,122,69,.09), rgba(61,91,255,.06) 60%, rgba(255,255,255,.02));
}
.dgw-aix-insight-text { font: 500 14.5px/1.6 'Inter', sans-serif; color: #e3e7ff; margin: 0 0 14px; min-height: 92px; }
.dgw-aix-insight-text b { color: #ffb48f; font-weight: 600; }
.dgw-aix-insight-text .w { opacity: 0; transition: opacity .25s ease; }
.dgw-aix-insight-text .w.on { opacity: 1; }
.dgw-aix-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.dgw-aix-act {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(4,8,32,.6); border: 1px solid var(--aix-line);
  font: 500 12.5px/1.35 'Inter', sans-serif; color: #c7cdf2;
  opacity: 0; transform: translateY(6px); transition: all .4s ease;
}
.dgw-aix-act.is-on { opacity: 1; transform: none; }
.dgw-aix-act i { width: 18px; height: 18px; border-radius: 6px; flex: none; border: 1.5px solid #5a6396; display: grid; place-items: center; font-style: normal; font-size: 11px; color: transparent; transition: all .3s ease; }
.dgw-aix-act.is-done i { background: var(--aix-green); border-color: var(--aix-green); color: #04120c; }
.dgw-aix-approve {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px; border: 0;
  font: 700 13px/1 'Inter', sans-serif; color: #fff; cursor: default;
  background: linear-gradient(90deg, var(--aix-blue-2), #3d5bff);
  box-shadow: 0 10px 30px -10px rgba(61,91,255,.9);
  opacity: 0; transform: translateY(6px); transition: all .4s ease;
}
.dgw-aix-approve.is-on { opacity: 1; transform: none; }
.dgw-aix-approve.is-pressed { transform: scale(.96); }
.dgw-aix-approve.is-done { background: linear-gradient(90deg, #0f9d6a, #2ee59d); color: #04120c; box-shadow: 0 10px 40px -10px rgba(46,229,157,.9); }
.dgw-aix-approve .rip { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.6); transform: scale(0); animation: dgwAixRip .7s ease-out forwards; pointer-events: none; }
@keyframes dgwAixRip { to { transform: scale(40); opacity: 0; } }

/* trace */
.dgw-aix-trace {
  border-radius: 14px; padding: 14px;
  background: rgba(4,8,32,.55); border: 1px solid var(--aix-line);
  display: flex; flex-direction: column; min-height: 0;
}
.dgw-aix-trace-head { display: flex; align-items: center; gap: 9px; font: 600 12px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8f97c4; margin-bottom: 12px; }
.dgw-aix-orb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8ea2ff 40%, #3d5bff 75%); box-shadow: 0 0 14px #3d5bff; }
.dgw-aix-orb.is-busy { animation: dgwAixOrb 1s ease-in-out infinite; }
@keyframes dgwAixOrb { 50% { transform: scale(1.35); box-shadow: 0 0 26px #ff9a6b; } }
.dgw-aix-trace-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.dgw-aix-step {
  display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start;
  font: 500 11.8px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #aab2de;
  opacity: 0; transform: translateX(8px); transition: all .35s ease;
}
.dgw-aix-step.is-on {
    opacity: 1;
    transform: none;
    padding: 8px;
    border-radius: 10px;
}
.dgw-aix-step i { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid rgba(142,162,255,.35); border-top-color: #8ea2ff; animation: dgwAixSparkSpin .8s linear infinite; }
.dgw-aix-step.is-done i { animation: none; border: 0; background: var(--aix-green); position: relative; }
.dgw-aix-step.is-done i::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 3px; height: 7px; border: solid #04120c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dgw-aix-step.is-final { color: #ffb48f; }
.dgw-aix-step.is-final.is-done i { background: var(--aix-orange); }
.dgw-aix-step small { display: block; color: #5a6396; font-size: 10.5px; }

/* timer */
.dgw-aix-timer {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.1);
}
.dgw-aix-timer span { display: block; font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6f78a8; }
.dgw-aix-timer strong {
  display: block; margin: 8px 0 6px;
  font: 700 34px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: #fff; transition: color .4s ease, text-shadow .4s ease;
}
.dgw-aix-timer.is-running strong { color: #b9c3ff; }
.dgw-aix-timer.is-stopped strong {
  background: linear-gradient(90deg, #8ea2ff, #ff9a6b); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(255,154,107,.25);
}
.dgw-aix-timer small { display: block; font: 500 11.5px/1.45 'Inter', sans-serif; color: #8f97c4; }

/* cursor + scan */
.dgw-aix-cursor {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 5;
  opacity: 0; pointer-events: none;
  transition: transform 1.1s cubic-bezier(.45,.05,.25,1), opacity .3s ease;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.dgw-aix-cursor.is-on { opacity: 1; }
.dgw-aix-cursor.is-click { animation: dgwAixClick .25s ease; }
@keyframes dgwAixClick { 50% { scale: .82; } }
.dgw-aix-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(124,145,255,.12) 70%, rgba(170,185,255,.55) 99%, transparent);
  opacity: 0; transform: translateY(-120px);
}
.dgw-aix-scan.is-run { animation: dgwAixScan 1.6s cubic-bezier(.5,0,.5,1); }
@keyframes dgwAixScan { 0% { opacity: 0; transform: translateY(80px); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(560px); } }

/* tabs = crawlable Q&A cards */
.dgw-aix-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.dgw-aix-tab {
  position: relative; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px 20px; border-radius: 16px;
  font-family: 'Inter', sans-serif; color: #aab2de;
  background: rgba(255,255,255,0.025); border: 1px solid var(--aix-line);
  cursor: pointer; transition: border-color .3s, background .3s, transform .3s;
}
.dgw-aix-tab:hover { border-color: rgba(142,162,255,.35); transform: translateY(-2px); }
.dgw-aix-tab[aria-selected="true"] { border-color: rgba(142,162,255,.5); background: linear-gradient(160deg, rgba(61,91,255,.16), rgba(255,255,255,.02)); }
.dgw-aix-tab b { font: 700 11px/1 ui-monospace, Menlo, monospace; color: #6f78a8; letter-spacing: .06em; }
.dgw-aix-tab[aria-selected="true"] b { color: #ffb48f; }
.dgw-aix-tab h3 { margin: 0; font: 700 17px/1.3 'Plus Jakarta Sans', sans-serif; color: #fff; letter-spacing: -0.01em; }
.dgw-aix-tab p { margin: 0; font: 400 13.5px/1.6 'Inter', sans-serif; color: #8f97c4; }
.dgw-aix-tab .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, #8ea2ff, #ff9a6b); }
.dgw-aix-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; flex-wrap: wrap; }
.dgw-aix-note { margin: 0; font: 400 12.5px/1.5 'Inter', sans-serif; color: #5a6396; max-width: 720px; }
.dgw-aix-cta {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 13px 20px; border-radius: 100px; text-decoration: none;
  font: 600 14px/1 'Inter', sans-serif; color: #fff;
  background: linear-gradient(90deg, #010ED0, #3d5bff);
  box-shadow: 0 12px 30px -12px rgba(61,91,255,.9);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dgw-aix-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(61,91,255,1); }
.dgw-aix-cta svg { transition: transform .25s ease; }
.dgw-aix-cta:hover svg { transform: translateX(3px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .dgw-aix-tabs { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .dgw-aix-tab p { font-size: 12.5px; }
  .dgw-aix-body { grid-template-columns: 1fr; }
  .dgw-aix-trace-list { display: grid; grid-template-columns: 1fr 1fr; }
  .dgw-aix-timer { margin-top: 14px; }
}
@media (max-width: 760px) {
  .dgw-aix { padding: 80px 16px 80px; }
  .dgw-aix-h2 { font-size: 32px; }
  .dgw-aix-sub { font-size: 15.5px; }
  .dgw-aix-sources, .dgw-aix-kpis { grid-template-columns: 1fr 1fr; }
  .dgw-aix-lower { grid-template-columns: 1fr; }
  .dgw-aix-card { min-height: 0; }
  .dgw-aix-ask { margin: 14px 12px 0; padding: 12px 14px; }
  .dgw-aix-q { font-size: 14.5px; }
  .dgw-aix-enter { display: none; }
  .dgw-aix-body { padding: 14px 12px 14px; }
  .dgw-aix-trace-list { grid-template-columns: 1fr; }
  .dgw-aix-kpi strong { font-size: 21px; }
  .dgw-aix-tabs { grid-template-columns: 1fr; }
  .dgw-aix-tab h3 { font-size: 16px; }
  .dgw-aix-foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .dgw-aix-glow, .dgw-aix-window::before, .dgw-aix-live span { animation: none; }
  .dgw-aix-window { transition: none; }
}


/* ===================== assets/home-erp.css ===================== */
/* Homepage ERP repositioning — small overrides on top of theme custom.css */

/* FAQ: questions are now <h3> (semantic, crawlable), answers wrapped in <p> */
.faq-question .faq-q-text { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.faq-answer p { margin: 0; }

/* FAQ: two independent columns (each opens without stretching the other) */
.faq .faq-inner { max-width: 1200px; }
.faq-list-2col { flex-direction: row; align-items: flex-start; gap: 16px; }
.faq-list-2col .faq-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) {
  .faq-list-2col { flex-direction: column; gap: 12px; }
  .faq-list-2col .faq-col { width: 100%; }
}
.faq .faq-header { max-width: 820px; margin-left: auto; margin-right: auto; }

/* ===== On-site implementation (plant visit proof) — dark band between logos and services ===== */
.dgw-onsite {
  position: relative; overflow: hidden;
  background: radial-gradient(900px 500px at 18% 30%, rgba(1,14,208,0.35), transparent 60%),
              radial-gradient(700px 420px at 90% 85%, rgba(255,122,69,0.14), transparent 60%),
              #060a26;
  padding: 110px 24px 120px; color: #e8ecff;
}
.dgw-onsite::before { /* masked grid, homepage signature */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}
.dgw-onsite-inner {
  position: relative; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: center;
}

/* Photo */
.dgw-onsite-photo { margin: 0; perspective: 1200px; }
.dgw-onsite-frame {
  position: relative; border-radius: 24px; padding: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(1,14,208,0.2);
  transform: rotateY(6deg) rotateX(2deg); transition: transform 0.6s ease;
}
.dgw-onsite-photo:hover .dgw-onsite-frame { transform: rotateY(0) rotateX(0); }
.dgw-onsite-frame img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px;
}
.dgw-onsite-tag {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 'Inter', sans-serif; color: #0a1233;
  background: rgba(255,255,255,0.94); padding: 10px 14px; border-radius: 100px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.5);
}
.dgw-onsite-tag-top { top: 28px; left: -18px; }
.dgw-onsite-tag-bottom { bottom: 40px; right: -22px; color: #010ED0; }
.dgw-onsite-pin {
  width: 8px; height: 8px; border-radius: 50%; background: #ff7a45;
  box-shadow: 0 0 0 0 rgba(255,122,69,0.6); animation: dgwOnsitePulse 2s infinite;
}
@keyframes dgwOnsitePulse { 70% { box-shadow: 0 0 0 10px rgba(255,122,69,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,69,0); } }
.dgw-onsite-caption { margin-top: 16px; text-align: center; font: 400 13px/1.4 'Inter', sans-serif; color: rgba(232,236,255,0.55); }

/* Copy */
.dgw-onsite-eyebrow {
  display: inline-flex; font: 600 11px/1 'Inter', sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
  color: #ffb08f; padding: 6px 12px; border: 1px solid rgba(255,122,69,0.35); border-radius: 100px;
  background: rgba(255,122,69,0.08); margin-bottom: 18px;
}
.dgw-onsite-h2 { font: 700 42px/1.15 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; color: #fff; margin: 0 0 18px; }
.dgw-onsite-grad {
  background: linear-gradient(90deg, #ff7a45, #ffb08f); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dgw-onsite-lead { font: 400 17px/1.65 'Inter', sans-serif; color: rgba(232,236,255,0.78); margin: 0 0 30px; }

.dgw-onsite-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.dgw-onsite-steps::before { /* timeline rail */
  content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px;
  background: linear-gradient(180deg, #ff7a45, rgba(74,92,245,0.6) 60%, rgba(74,92,245,0));
}
.dgw-onsite-step { position: relative; display: flex; gap: 18px; padding: 10px 0; }
.dgw-onsite-num {
  flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font: 700 13px/1 'Plus Jakarta Sans', sans-serif; color: #fff;
  background: #0d1440; border: 1px solid rgba(255,255,255,0.16); position: relative; z-index: 1;
}
.dgw-onsite-step:first-child .dgw-onsite-num { background: linear-gradient(135deg, #ff7a45, #ff9a6b); border-color: transparent; }
.dgw-onsite-step h3 { font: 600 16px/1.3 'Plus Jakarta Sans', sans-serif; color: #fff; margin: 2px 0 4px; }
.dgw-onsite-step p { font: 400 14.5px/1.55 'Inter', sans-serif; color: rgba(232,236,255,0.66); margin: 0; }

.dgw-onsite-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.dgw-onsite-cta {
  display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 'Inter', sans-serif; color: #fff;
  padding: 14px 22px; border-radius: 100px; text-decoration: none;
  background: linear-gradient(135deg, #ff7a45 0%, #ff9a6b 100%);
  box-shadow: 0 14px 36px -12px rgba(255,122,69,0.55); transition: transform 0.3s ease;
}
.dgw-onsite-cta:hover { transform: translateY(-2px); }
.dgw-onsite-link { font: 500 14px/1.4 'Inter', sans-serif; color: #aab4ff; text-decoration: none; }
.dgw-onsite-link:hover { color: #fff; }

@media (max-width: 960px) {
  .dgw-onsite { padding: 80px 16px 90px; }
  .dgw-onsite-inner { grid-template-columns: 1fr; gap: 48px; }
  .dgw-onsite-photo { max-width: 420px; margin: 0 auto; }
  .dgw-onsite-frame { transform: none; }
  .dgw-onsite-tag-top { left: 12px; } .dgw-onsite-tag-bottom { right: 12px; }
  .dgw-onsite-h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-onsite-frame { transform: none; transition: none; }
  .dgw-onsite-pin { animation: none; }
}





/* =============================================================
   Digiwah · Zoho CRM Implementation Partner page
   Light, process-led. Class prefix: dgw-zcrm-
   ============================================================= */

.dgw-zcrm-body, .dgw-zcrm-body *, .dgw-zcrm-body *::before, .dgw-zcrm-body *::after { box-sizing: border-box; }

:root {
  --dgw-zcrm-brand: #1b3df5;
  --dgw-zcrm-brand-deep: #010ED0;
  --dgw-zcrm-brand-soft: #6f86ff;
  --dgw-zcrm-accent: #FF7A45;
  --dgw-zcrm-green: #16a06a;
  --dgw-zcrm-ink: #0e1633;
  --dgw-zcrm-ink-soft: #1a2347;
  --dgw-zcrm-muted: #5b6489;
  --dgw-zcrm-muted-2: #8089a8;
  --dgw-zcrm-tint: #f3f6ff;
  --dgw-zcrm-line: rgba(14, 22, 51, 0.09);
  --dgw-zcrm-shadow: 0 1px 2px rgba(14,22,51,.04), 0 12px 30px -18px rgba(27,61,245,.18);
  --dgw-zcrm-shadow-h: 0 1px 2px rgba(14,22,51,.05), 0 28px 60px -24px rgba(27,61,245,.32);
}

.dgw-zcrm-body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--dgw-zcrm-ink-soft);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:where(.dgw-zcrm-body) :where(h1, h2, h3, p) { margin: 0; }

/* ---------- shared ---------- */
.dgw-zcrm-container { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.dgw-zcrm-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dgw-zcrm-brand); padding: 7px 14px; border-radius: 100px;
  border: 1px solid rgba(27,61,245,.16); background: rgba(27,61,245,.05); margin-bottom: 22px;
}
.dgw-zcrm-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dgw-zcrm-accent); box-shadow: 0 0 0 4px rgba(255,122,69,.16); animation: dgw-zcrm-pulse 2.4s ease-in-out infinite; }
@keyframes dgw-zcrm-pulse { 50% { box-shadow: 0 0 0 7px rgba(255,122,69,.05); } }
.dgw-zcrm-grad {
  background: linear-gradient(120deg, var(--dgw-zcrm-brand) 0%, #6a4dff 45%, var(--dgw-zcrm-accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dgw-zcrm-head { max-width: 900px; margin: 0 auto 48px; text-align: center; }
.dgw-zcrm-kicker { display: inline-block; font: 600 12px/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dgw-zcrm-accent); margin-bottom: 14px; }
.dgw-zcrm-h2 { font: 700 clamp(28px, 3.4vw, 42px)/1.15 'Plus Jakarta Sans', sans-serif; letter-spacing: -.025em; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-lead { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--dgw-zcrm-muted); }

.dgw-zcrm-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 12px; font: 600 15px/1 'Inter', sans-serif; text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; }
.dgw-zcrm-btn-primary { background: var(--dgw-zcrm-accent); color: #fff; box-shadow: 0 12px 30px -10px rgba(255,122,69,.6); }
.dgw-zcrm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(255,122,69,.7); }
.dgw-zcrm-btn-ghost { background: #fff; color: var(--dgw-zcrm-ink); border: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-btn-ghost:hover { border-color: rgba(27,61,245,.35); color: var(--dgw-zcrm-brand); }

/* ---------- nav ---------- */
.dgw-zcrm-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-nav-inner { max-width: 1180px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 32px; }
.dgw-zcrm-nav-logo { font: 800 22px/1 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-brand-deep); text-decoration: none; letter-spacing: -.02em; }
.dgw-zcrm-nav-links { display: flex; gap: 26px; margin-left: auto; }
.dgw-zcrm-nav-links a { font: 500 14px/1 'Inter', sans-serif; color: var(--dgw-zcrm-muted); text-decoration: none; }
.dgw-zcrm-nav-links a:hover { color: var(--dgw-zcrm-brand); }
.dgw-zcrm-nav-cta { font: 600 14px/1 'Inter', sans-serif; color: #fff; background: var(--dgw-zcrm-ink); padding: 11px 18px; border-radius: 10px; text-decoration: none; }

/* =============================================================
   1. HERO
   ============================================================= */
.dgw-zcrm-hero { position: relative; overflow: hidden; padding: 88px 0 56px; background: linear-gradient(180deg, #f6f8ff 0%, #fff 70%); }
.dgw-zcrm-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(27,61,245,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(27,61,245,.06) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); pointer-events: none; }
.dgw-zcrm-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.dgw-zcrm-glow-a { width: 520px; height: 520px; left: -160px; top: 120px; background: rgba(27,61,245,.16); }
.dgw-zcrm-glow-b { width: 460px; height: 460px; right: -140px; top: 280px; background: rgba(255,122,69,.14); }
.dgw-zcrm-hero-copy { position: relative; max-width: 860px; margin: 0 auto; text-align: center; }
.dgw-zcrm-hero-h1 { font: 800 clamp(36px, 5.2vw, 62px)/1.06 'Plus Jakarta Sans', sans-serif; letter-spacing: -.035em; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-hero-h1 .dgw-zcrm-grad { display: inline-block; padding-bottom: .06em; }
.dgw-zcrm-hero-sub { max-width: 680px; margin: 22px auto 0; font-size: 18px; line-height: 1.65; color: var(--dgw-zcrm-muted); }
.dgw-zcrm-cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.dgw-zcrm-trust { list-style: none; padding: 0; margin: 28px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; }
.dgw-zcrm-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--dgw-zcrm-ink-soft); }
.dgw-zcrm-trust svg { width: 17px; height: 17px; fill: none; stroke: var(--dgw-zcrm-green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* console */
.dgw-zcrm-console { position: relative; margin: 56px auto 0; max-width: 1060px; background: #fff; border: 1px solid var(--dgw-zcrm-line); border-radius: 22px; box-shadow: 0 2px 4px rgba(14,22,51,.04), 0 50px 100px -40px rgba(27,61,245,.35); overflow: hidden; }
.dgw-zcrm-console-bar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--dgw-zcrm-line); background: linear-gradient(180deg, #fbfcff, #f6f8ff); }
.dgw-zcrm-dots { display: flex; gap: 6px; }
.dgw-zcrm-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e3e7f3; }
.dgw-zcrm-dots i:first-child { background: #ff8a80; } .dgw-zcrm-dots i:nth-child(2) { background: #ffd36e; } .dgw-zcrm-dots i:nth-child(3) { background: #7be0a6; }
.dgw-zcrm-console-title { font: 600 13.5px/1 'Inter', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-console-title em { font-style: normal; color: var(--dgw-zcrm-muted-2); font-weight: 500; }
.dgw-zcrm-region { margin-left: auto; display: inline-flex; padding: 4px; border-radius: 999px; background: #eef1fb; border: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-region button { border: 0; background: transparent; font: 600 12.5px/1 'Inter', sans-serif; color: var(--dgw-zcrm-muted); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.dgw-zcrm-region button.is-on { background: #fff; color: var(--dgw-zcrm-brand); box-shadow: 0 2px 8px rgba(14,22,51,.1); }

.dgw-zcrm-rail-wrap { position: relative; padding: 26px 28px 22px; border-bottom: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-rail-track { position: absolute; left: calc(28px + 10%); right: calc(28px + 10%); top: 47px; height: 3px; border-radius: 3px; background: #e7ebf7; }
.dgw-zcrm-rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--dgw-zcrm-brand), var(--dgw-zcrm-accent)); transition: width .8s cubic-bezier(.6,.05,.2,1); }
.dgw-zcrm-rail { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.dgw-zcrm-rail li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.dgw-zcrm-node { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1.5px solid #dfe4f3; color: var(--dgw-zcrm-muted-2); margin-bottom: 8px; transition: all .45s cubic-bezier(.2,.8,.2,1); }
.dgw-zcrm-node svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dgw-zcrm-rail b { font: 700 14px/1.2 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-muted); transition: color .3s; }
.dgw-zcrm-rail small { font-size: 12px; color: var(--dgw-zcrm-muted-2); }
.dgw-zcrm-rail li.is-done .dgw-zcrm-node { background: #eef2ff; border-color: rgba(27,61,245,.3); color: var(--dgw-zcrm-brand); }
.dgw-zcrm-rail li.is-on .dgw-zcrm-node { background: linear-gradient(135deg, var(--dgw-zcrm-brand), #6a4dff); border-color: transparent; color: #fff; transform: scale(1.12); box-shadow: 0 10px 24px -8px rgba(27,61,245,.6); }
.dgw-zcrm-rail li.is-on b, .dgw-zcrm-rail li.is-done b { color: var(--dgw-zcrm-ink); }

.dgw-zcrm-console-body { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 300px; }
.dgw-zcrm-record { padding: 26px 28px; border-right: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-record-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dgw-zcrm-record-tag { font: 700 11px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--dgw-zcrm-brand); background: #eef2ff; padding: 6px 10px; border-radius: 6px; }
.dgw-zcrm-record-id { font: 500 12px/1 'JetBrains Mono', monospace; color: var(--dgw-zcrm-muted-2); }
.dgw-zcrm-record-title { font: 700 22px/1.25 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); margin-bottom: 16px !important; }
.dgw-zcrm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0; }
.dgw-zcrm-fields div { min-width: 0; animation: dgw-zcrm-in .45s both; }
.dgw-zcrm-fields dt { font-size: 11.5px; font-weight: 500; color: var(--dgw-zcrm-muted-2); margin-bottom: 4px; }
.dgw-zcrm-fields dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--dgw-zcrm-ink-soft); }
.dgw-zcrm-fields dd.is-ok { color: var(--dgw-zcrm-green); }
.dgw-zcrm-fields dd.is-auto::after { content: "AUTO"; margin-left: 6px; font: 700 9.5px/1 'Inter', sans-serif; letter-spacing: .08em; padding: 3px 5px; border-radius: 4px; background: rgba(255,122,69,.12); color: var(--dgw-zcrm-accent); vertical-align: 2px; }
@keyframes dgw-zcrm-in { from { opacity: 0; transform: translateY(6px); } }

.dgw-zcrm-timeline { padding: 22px 24px; background: #fafbff; }
.dgw-zcrm-timeline-head { font: 700 13px/1 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); margin-bottom: 16px; display: flex; justify-content: space-between; }
.dgw-zcrm-timeline-head span { font: 500 11.5px/1 'Inter', sans-serif; color: var(--dgw-zcrm-green); }
.dgw-zcrm-timeline ul { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid #e7ebf7; display: flex; flex-direction: column; gap: 12px; }
.dgw-zcrm-timeline li { position: relative; font-size: 13px; line-height: 1.45; color: var(--dgw-zcrm-ink-soft); animation: dgw-zcrm-in .45s both; }
.dgw-zcrm-timeline li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--dgw-zcrm-brand); }
.dgw-zcrm-timeline li.is-auto::before { border-color: var(--dgw-zcrm-accent); }
.dgw-zcrm-timeline li time { display: block; font: 500 11px/1.3 'JetBrains Mono', monospace; color: var(--dgw-zcrm-muted-2); }
.dgw-zcrm-console-note { text-align: center; margin-top: 16px !important; font-size: 12.5px; color: var(--dgw-zcrm-muted-2); }

/* =============================================================
   1B. IN SHORT (entity paragraph)
   ============================================================= */
.dgw-zcrm-short { padding: 24px 0 8px; }
.dgw-zcrm-short-card { position: relative; max-width: 960px; margin: 0 auto; padding: 30px 34px 30px 38px; border-radius: 18px; background: var(--dgw-zcrm-tint); border: 1px solid rgba(27,61,245,.1); }
.dgw-zcrm-short-card::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--dgw-zcrm-brand), var(--dgw-zcrm-accent)); }
.dgw-zcrm-short-h { font: 700 19px/1.35 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); margin-bottom: 12px !important; }
.dgw-zcrm-short-card p { font-size: 15.5px; line-height: 1.75; color: var(--dgw-zcrm-ink-soft); }
.dgw-zcrm-short-card strong { color: var(--dgw-zcrm-ink); }

/* =============================================================
   2. PAIN
   ============================================================= */
.dgw-zcrm-pain { position: relative; padding: 104px 0 112px; background: linear-gradient(180deg, #fff6ef 0%, #fdf1e8 100%); border-top: 1px solid rgba(255,122,69,.14); border-bottom: 1px solid rgba(255,122,69,.14); overflow: hidden; }
.dgw-zcrm-pain::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(170,90,40,.13) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 25%, transparent 80%); pointer-events: none; }
.dgw-zcrm-pain::after { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -180px; border-radius: 50%; background: rgba(255,122,69,.12); filter: blur(90px); pointer-events: none; }
.dgw-zcrm-pain .dgw-zcrm-pain-card { box-shadow: 0 1px 2px rgba(120,60,20,.05), 0 18px 40px -24px rgba(170,90,40,.35); border-color: rgba(170,90,40,.12); }
.dgw-zcrm-pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; perspective: 1200px; }
.dgw-zcrm-pain-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; padding: 22px 22px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--dgw-zcrm-line); box-shadow: var(--dgw-zcrm-shadow); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease, box-shadow .3s, border-color .3s; overflow: hidden; }
.dgw-zcrm-pain-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 12%, transparent), transparent 65%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.dgw-zcrm-pain-card:hover { box-shadow: var(--dgw-zcrm-shadow-h); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.dgw-zcrm-pain-card:hover::before { opacity: 1; }
.dgw-zcrm-pain-card h3 { font: 700 18px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); margin: 18px 0 10px; }
.dgw-zcrm-pain-card p { font-size: 14.5px; line-height: 1.6; color: var(--dgw-zcrm-muted); flex: 1; }
.dgw-zcrm-fix { position: relative; margin-top: 18px; align-self: flex-start; font: 600 12.5px/1.3 'Inter', sans-serif; color: var(--c); text-decoration: none; padding: 7px 11px; border-radius: 8px; background: color-mix(in srgb, var(--c) 8%, #fff); }
.dgw-zcrm-fix::after { content: " →"; }

/* mini visuals */
.dgw-zcrm-pain-viz { position: relative; height: 112px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 8%, #fff), #fff); border: 1px solid color-mix(in srgb, var(--c) 14%, transparent); overflow: hidden; }
.dgw-zcrm-viz-scatter span { position: absolute; font: 600 11px/1 'Inter', sans-serif; color: var(--c); background: #fff; border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); padding: 6px 9px; border-radius: 8px; box-shadow: 0 4px 10px -6px rgba(14,22,51,.2); animation: dgw-zcrm-drift 6s ease-in-out infinite alternate; }
.dgw-zcrm-viz-scatter span:nth-child(1) { left: 8%; top: 14%; }
.dgw-zcrm-viz-scatter span:nth-child(2) { right: 10%; top: 10%; animation-delay: -1s; }
.dgw-zcrm-viz-scatter span:nth-child(3) { left: 32%; top: 44%; animation-delay: -2s; }
.dgw-zcrm-viz-scatter span:nth-child(4) { left: 6%; bottom: 10%; animation-delay: -3s; }
.dgw-zcrm-viz-scatter span:nth-child(5) { right: 8%; bottom: 14%; animation-delay: -4s; }
@keyframes dgw-zcrm-drift { to { transform: translate(6px, -5px) rotate(2deg); } }
.dgw-zcrm-viz-files { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; gap: 6px; }
.dgw-zcrm-viz-files span { font: 500 11px/1 'JetBrains Mono', monospace; color: var(--dgw-zcrm-ink-soft); background: #fff; border: 1px solid var(--dgw-zcrm-line); padding: 7px 9px; border-radius: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgw-zcrm-viz-files span:nth-child(2) { margin-left: 10px; border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.dgw-zcrm-viz-files span:nth-child(3) { margin-left: 20px; opacity: .7; }
.dgw-zcrm-viz-memo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.dgw-zcrm-memo { font: 600 13px/1 'Inter', sans-serif; color: var(--dgw-zcrm-ink-soft); background: #fff8c9; padding: 10px 12px; border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 6px 14px -8px rgba(14,22,51,.35); }
.dgw-zcrm-memo-x { font: 600 11px/1 'Inter', sans-serif; color: #c0392b; background: #fdecea; padding: 5px 8px; border-radius: 6px; }
.dgw-zcrm-viz-clock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.dgw-zcrm-clock-day { font: 800 26px/1 'Plus Jakarta Sans', sans-serif; color: var(--c); letter-spacing: .04em; }
.dgw-zcrm-clock-txt { font: 500 11.5px/1 'Inter', sans-serif; color: var(--dgw-zcrm-muted); position: relative; padding-left: 16px; }
.dgw-zcrm-clock-txt::before { content: ""; position: absolute; left: 0; top: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); border-top-color: transparent; animation: dgw-zcrm-spin 1s linear infinite; }
@keyframes dgw-zcrm-spin { to { transform: rotate(360deg); } }

.dgw-zcrm-pain-close { max-width: 720px; margin: 48px auto 0 !important; text-align: center; font-size: 17px; line-height: 1.65; color: var(--dgw-zcrm-muted); }
.dgw-zcrm-pain-close strong { color: var(--dgw-zcrm-ink); }

/* =============================================================
   3. PROCESS-FIRST · whiteboard → Blueprint
   ============================================================= */
.dgw-zcrm-proc { position: relative; padding: 104px 0 112px; background: linear-gradient(180deg, #fff 0%, #f6f8ff 100%); }
.dgw-zcrm-proc-stage { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: stretch; gap: 0; }
.dgw-zcrm-board-cap { display: flex; align-items: center; gap: 10px; font: 600 12.5px/1.3 'Inter', sans-serif; letter-spacing: .02em; color: var(--dgw-zcrm-muted); margin-bottom: 18px; }
.dgw-zcrm-board-cap span { font: 700 11px/1 'JetBrains Mono', monospace; color: #fff; background: var(--dgw-zcrm-ink); padding: 5px 7px; border-radius: 6px; }
.dgw-zcrm-board { position: relative; margin: 0; padding: 28px 30px 34px; border-radius: 20px; background: #fffef9; border: 1px solid #ece7d6; box-shadow: 0 1px 2px rgba(14,22,51,.04), 0 24px 50px -30px rgba(120,100,40,.35); background-image: radial-gradient(rgba(120,100,40,.08) 1px, transparent 1px); background-size: 18px 18px; }
.dgw-zcrm-board-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: wb; }
.dgw-zcrm-board-steps li { counter-increment: wb; position: relative; padding: 10px 14px 10px 46px; font: 600 21px/1.25 'Caveat', 'Comic Sans MS', cursive; color: #23305e; border: 2px solid #23305e; border-radius: 12px 16px 10px 14px; background: #fff; transform: rotate(var(--r, -.6deg)); }
.dgw-zcrm-board-steps li:nth-child(2) { --r: .7deg; } .dgw-zcrm-board-steps li:nth-child(3) { --r: -.3deg; border-color: #d2452c; color: #8a2a17; } .dgw-zcrm-board-steps li:nth-child(4) { --r: .5deg; }
.dgw-zcrm-board-steps li::before { content: counter(wb); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font-size: 16px; }
.dgw-zcrm-board-steps em { display: block; font-style: normal; font-size: 17px; color: #d2452c; }
.dgw-zcrm-board-scribble { position: absolute; right: 18px; bottom: 6px; font: 600 18px/1 'Caveat', cursive; color: #d2452c; transform: rotate(-4deg); }

.dgw-zcrm-proc-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.dgw-zcrm-proc-arrow svg { width: 80px; height: 24px; fill: none; stroke: var(--dgw-zcrm-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 6; animation: dgw-zcrm-dash 1.2s linear infinite; }
@keyframes dgw-zcrm-dash { to { stroke-dashoffset: -24; } }
.dgw-zcrm-proc-arrow span { font: 700 11px/1.3 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--dgw-zcrm-accent); text-align: center; }

.dgw-zcrm-bp { margin: 0; padding: 28px 30px 30px; border-radius: 20px; background: #fff; border: 1px solid var(--dgw-zcrm-line); box-shadow: var(--dgw-zcrm-shadow-h); }
.dgw-zcrm-bp-steps { list-style: none; margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.dgw-zcrm-bp-steps::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--dgw-zcrm-brand), var(--dgw-zcrm-accent)); border-radius: 2px; }
.dgw-zcrm-bp-steps li { position: relative; padding: 12px 16px; border-radius: 12px; background: var(--dgw-zcrm-tint); border: 1px solid rgba(27,61,245,.1); opacity: 0; transform: translateX(14px); transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); }
.dgw-zcrm-bp-steps li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--dgw-zcrm-brand); }
.dgw-zcrm-bp-steps li:nth-child(3) { background: #fff6f1; border-color: rgba(255,122,69,.25); }
.dgw-zcrm-bp-steps li:nth-child(3)::before { border-color: var(--dgw-zcrm-accent); }
.dgw-zcrm-bp-steps li:last-child::before { background: var(--dgw-zcrm-green); border-color: var(--dgw-zcrm-green); }
.dgw-zcrm-bp-steps b { display: block; font: 700 15px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-bp-steps small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; color: var(--dgw-zcrm-muted); }
.dgw-zcrm-lock, .dgw-zcrm-flag { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; background: var(--dgw-zcrm-brand); -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.dgw-zcrm-lock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1112 0v2h1v12H5V10zm2 0h8V8a4 4 0 10-8 0z'/%3E%3C/svg%3E"); }
.dgw-zcrm-flag { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h2v20H5zM8 3h11l-3 5 3 5H8z'/%3E%3C/svg%3E"); background: var(--dgw-zcrm-accent); }
.dgw-zcrm-proc-stage.is-in .dgw-zcrm-bp-steps li { opacity: 1; transform: none; }
.dgw-zcrm-proc-stage.is-in .dgw-zcrm-bp-steps li:nth-child(2) { transition-delay: .15s; }
.dgw-zcrm-proc-stage.is-in .dgw-zcrm-bp-steps li:nth-child(3) { transition-delay: .3s; }
.dgw-zcrm-proc-stage.is-in .dgw-zcrm-bp-steps li:nth-child(4) { transition-delay: .45s; }
.dgw-zcrm-proc-stage.is-in .dgw-zcrm-bp-steps li:nth-child(5) { transition-delay: .6s; }

.dgw-zcrm-proc-points { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dgw-zcrm-proc-points li { padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--dgw-zcrm-line); font-size: 14.5px; line-height: 1.6; color: var(--dgw-zcrm-muted); }
.dgw-zcrm-proc-points b { display: block; margin-bottom: 4px; font: 700 15.5px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }

/* =============================================================
   4. JOURNEY · dark band + sticky screen
   ============================================================= */
.dgw-zcrm-jr { position: relative; padding: 112px 0 120px; background: radial-gradient(ellipse at 15% 10%, rgba(124,143,255,.18), transparent 55%), radial-gradient(ellipse at 90% 80%, rgba(255,122,69,.10), transparent 50%), linear-gradient(180deg, #050a2e 0%, #0a1145 100%); color: #fff; }
.dgw-zcrm-jr-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(124,143,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(124,143,255,.07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 10%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 40% at 50% 10%, #000 20%, transparent 75%); pointer-events: none; }
.dgw-zcrm-head-dark .dgw-zcrm-h2 { color: #fff; }
.dgw-zcrm-head-dark .dgw-zcrm-lead { color: #b6bde3; }
.dgw-zcrm-head-dark .dgw-zcrm-kicker { color: #ffb284; }
.dgw-zcrm-grad-lt { background: linear-gradient(120deg, #9fb0ff 0%, #c7a8ff 45%, #ffb284 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.dgw-zcrm-jr-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.dgw-zcrm-jr-sticky { position: sticky; top: 110px; }
.dgw-zcrm-jr-screen { border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 40px 90px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); overflow: hidden; }
.dgw-zcrm-jr-screen-bar { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font: 600 12.5px/1 'Inter', sans-serif; color: #c9d0ff; }
.dgw-zcrm-jr-screen-bar .dgw-zcrm-dots i { background: rgba(255,255,255,.2); }
.dgw-zcrm-jr-screen-body { min-height: 320px; padding: 28px; display: flex; align-items: center; justify-content: center; }
.dgw-zcrm-jr-screen-body > * { width: 100%; animation: dgw-zcrm-in .45s both; }

.dgw-zcrm-jr-steps { list-style: none; margin: 0; padding: 0; }
.dgw-zcrm-jr-step { position: relative; padding: 34px 0 34px 30px; border-left: 2px solid rgba(255,255,255,.1); opacity: .38; transition: opacity .4s, border-color .4s; }
.dgw-zcrm-jr-step.is-on { opacity: 1; border-left-color: var(--dgw-zcrm-accent); }
.dgw-zcrm-jr-num { font: 700 12px/1 'JetBrains Mono', monospace; color: #ffb284; letter-spacing: .1em; }
.dgw-zcrm-jr-step h3 { margin: 10px 0 10px; font: 700 22px/1.3 'Plus Jakarta Sans', sans-serif; color: #fff; }
.dgw-zcrm-jr-step p { font-size: 15.5px; line-height: 1.7; color: #b6bde3; }
.dgw-zcrm-jr-cfg { margin-top: 14px; font: 500 13px/1.5 'Inter', sans-serif; color: #e3e7ff; padding: 10px 14px; border-radius: 10px; background: rgba(124,143,255,.1); border: 1px solid rgba(124,143,255,.22); }
.dgw-zcrm-jr-cfg span { display: block; font: 700 10.5px/1.4 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9fb0ff; margin-bottom: 2px; }
.dgw-zcrm-jr-step .dgw-zcrm-jr-mock { display: none; }

/* mocks (shared by sticky screen + mobile inline) */
.dgw-zcrm-jr-mock { font-family: 'Inter', sans-serif; color: #fff; }
.dgw-zcrm-m-srcs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.dgw-zcrm-m-srcs i { font-style: normal; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); animation: dgw-zcrm-fall 2.4s ease-in-out infinite; }
.dgw-zcrm-m-srcs i:nth-child(2) { animation-delay: .3s; } .dgw-zcrm-m-srcs i:nth-child(3) { animation-delay: .6s; } .dgw-zcrm-m-srcs i:nth-child(4) { animation-delay: .9s; } .dgw-zcrm-m-srcs i:nth-child(5) { animation-delay: 1.2s; }
@keyframes dgw-zcrm-fall { 50% { transform: translateY(5px); border-color: rgba(255,178,132,.6); } }
.dgw-zcrm-m-inbox { border-radius: 14px; background: #fff; color: var(--dgw-zcrm-ink); padding: 14px 16px; }
.dgw-zcrm-m-inbox b { display: block; font: 700 13px/1 'Plus Jakarta Sans', sans-serif; margin-bottom: 10px; }
.dgw-zcrm-m-inbox p { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--dgw-zcrm-line); font-size: 13px; font-weight: 600; }
.dgw-zcrm-m-inbox p span { font-weight: 500; color: var(--dgw-zcrm-muted); }
.dgw-zcrm-m-assign p, .dgw-zcrm-m-bp p, .dgw-zcrm-m-q-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 13px 16px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.dgw-zcrm-m-assign span { font: 700 11px/1 'JetBrains Mono', monospace; color: #ffb284; min-width: 38px; }
.dgw-zcrm-m-assign em { font-style: normal; color: #9fb0ff; margin-left: auto; }
.dgw-zcrm-m-assign b { white-space: nowrap; padding: 5px 9px; border-radius: 6px; background: #fff; color: var(--dgw-zcrm-ink); font-size: 12.5px; }
.dgw-zcrm-m-bp p { justify-content: space-between; }
.dgw-zcrm-m-bp p.is-done::after { content: "✓"; color: #34e08a; font-weight: 700; }
.dgw-zcrm-m-bp p.is-lock { border-color: rgba(255,178,132,.55); background: rgba(255,122,69,.12); }
.dgw-zcrm-m-bp small { font-size: 11.5px; color: #ffcfae; }
.dgw-zcrm-m-q-row { justify-content: space-between; }
.dgw-zcrm-m-q-row span { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #c9d0ff; }
.dgw-zcrm-m-q-row b { font-size: 12px; padding: 5px 9px; border-radius: 6px; background: rgba(52,224,138,.15); color: #6ff0ad; }
.dgw-zcrm-m-q-row b.is-warn { background: rgba(255,178,132,.18); color: #ffcfae; }
.dgw-zcrm-m-q-row b.is-auto { background: rgba(124,143,255,.2); color: #c9d0ff; }
.dgw-zcrm-m-conv, .dgw-zcrm-m-sync { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.dgw-zcrm-m-conv span, .dgw-zcrm-m-sync span { font: 700 16px/1.2 'Plus Jakarta Sans', sans-serif; padding: 22px 22px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); text-align: center; }
.dgw-zcrm-m-conv span.is-on { background: #fff; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-m-conv em, .dgw-zcrm-m-sync em { font-style: normal; font-size: 26px; color: #ffb284; }
.dgw-zcrm-m-conv small { flex-basis: 100%; text-align: center; font-size: 13px; color: #6ff0ad; }
.dgw-zcrm-m-sync span small { display: block; font: 500 12px/1.4 'Inter', sans-serif; color: #b6bde3; }
.dgw-zcrm-m-sync em { animation: dgw-zcrm-sw 1.6s ease-in-out infinite; }
@keyframes dgw-zcrm-sw { 50% { transform: scale(1.25); } }
.dgw-zcrm-m-chart { height: 200px; display: flex; align-items: flex-end; gap: 14px; padding: 0 10px; border-bottom: 1px solid rgba(255,255,255,.15); }
.dgw-zcrm-m-chart i { flex: 1; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #ffb284, #6f86ff); animation: dgw-zcrm-grow .8s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; }
.dgw-zcrm-m-chart i:nth-child(2) { animation-delay: .08s; } .dgw-zcrm-m-chart i:nth-child(3) { animation-delay: .16s; } .dgw-zcrm-m-chart i:nth-child(4) { animation-delay: .24s; } .dgw-zcrm-m-chart i:nth-child(5) { animation-delay: .32s; } .dgw-zcrm-m-chart i:nth-child(6) { animation-delay: .4s; }
@keyframes dgw-zcrm-grow { from { transform: scaleY(0); } }

@media (max-width: 1024px) {
  .dgw-zcrm-proc-stage { grid-template-columns: 1fr; gap: 18px; }
  .dgw-zcrm-proc-arrow svg { transform: rotate(90deg); width: 50px; }
  .dgw-zcrm-proc-points { grid-template-columns: 1fr; }
  .dgw-zcrm-jr-layout { grid-template-columns: 1fr; gap: 0; }
  .dgw-zcrm-jr-sticky { display: none; }
  .dgw-zcrm-jr-step { opacity: 1; }
  .dgw-zcrm-jr-step .dgw-zcrm-jr-mock { display: block; margin-top: 18px; padding: 20px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 820px) {
  .dgw-zcrm-proc, .dgw-zcrm-jr { padding: 72px 0 80px; }
  .dgw-zcrm-board, .dgw-zcrm-bp { padding: 22px 18px 26px; }
  .dgw-zcrm-board-steps li { font-size: 19px; }
  .dgw-zcrm-jr-step { padding: 26px 0 26px 20px; }
  .dgw-zcrm-jr-step h3 { font-size: 19px; }
  .dgw-zcrm-jr-step .dgw-zcrm-jr-mock { padding: 14px; }
  .dgw-zcrm-m-assign p { padding: 11px 12px; font-size: 13px; }
}

/* =============================================================
   5. LEAD CAPTURE · LeadChain map
   ============================================================= */
.dgw-zcrm-lc { padding: 112px 0 104px; background: #fff; }
.dgw-zcrm-lc-map { position: relative; max-width: 1060px; height: 400px; margin: 0 auto; border-radius: 24px; background: linear-gradient(180deg, #f8faff, #f2f5ff); border: 1px solid rgba(27,61,245,.1); overflow: hidden; }
.dgw-zcrm-lc-map::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(27,61,245,.12) 1px, transparent 1.4px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 80%); }
.dgw-zcrm-lc-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.dgw-zcrm-lc-wire { fill: none; stroke: rgba(27,61,245,.18); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.dgw-zcrm-lc-wire.is-out { stroke: rgba(255,122,69,.28); stroke-dasharray: 5 6; }
.dgw-zcrm-lc-src, .dgw-zcrm-lc-own, .dgw-zcrm-lc-hub { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.dgw-zcrm-lc-src { display: flex; align-items: center; gap: 10px; width: 196px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--dgw-zcrm-line); box-shadow: var(--dgw-zcrm-shadow); font: 600 13px/1.2 'Inter', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-lc-src i { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 800 12px/1 'Inter', sans-serif; font-style: normal; color: #fff; background: var(--b); }
.dgw-zcrm-lc-hub { width: 220px; padding: 22px 20px; border-radius: 20px; text-align: center; background: linear-gradient(140deg, var(--dgw-zcrm-brand), #6a4dff); color: #fff; box-shadow: 0 24px 50px -18px rgba(27,61,245,.6); }
.dgw-zcrm-lc-hub::after { content: ""; position: absolute; inset: -10px; border-radius: 26px; border: 1px dashed rgba(27,61,245,.35); animation: dgw-zcrm-breath 3s ease-in-out infinite; }
@keyframes dgw-zcrm-breath { 50% { inset: -16px; opacity: .4; } }
.dgw-zcrm-lc-hub-k { display: block; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #c9d0ff; }
.dgw-zcrm-lc-hub b { display: block; margin: 8px 0 6px; font: 800 24px/1.1 'Plus Jakarta Sans', sans-serif; }
.dgw-zcrm-lc-hub small { font-size: 12.5px; color: #dfe3ff; }
.dgw-zcrm-lc-own { width: 190px; padding: 11px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(255,122,69,.25); box-shadow: 0 14px 30px -18px rgba(255,122,69,.45); }
.dgw-zcrm-lc-own span { display: block; font: 600 11px/1.3 'JetBrains Mono', monospace; color: var(--dgw-zcrm-accent); }
.dgw-zcrm-lc-own b { display: block; margin-top: 4px; font: 700 16px/1.2 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }

.dgw-zcrm-lc-how { max-width: 1060px; margin: 44px auto 0; }
.dgw-zcrm-lc-how-h { font: 700 20px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); margin-bottom: 18px !important; }
.dgw-zcrm-lc-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: lc; }
.dgw-zcrm-lc-how li { counter-increment: lc; position: relative; padding: 52px 18px 20px; border-radius: 16px; background: var(--dgw-zcrm-tint); font-size: 14px; line-height: 1.6; color: var(--dgw-zcrm-muted); }
.dgw-zcrm-lc-how li::before { content: counter(lc, decimal-leading-zero); position: absolute; left: 18px; top: 18px; font: 700 12px/1 'JetBrains Mono', monospace; color: var(--dgw-zcrm-brand); }
.dgw-zcrm-lc-how b { display: block; margin-bottom: 6px; font: 700 15.5px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }

/* =============================================================
   6. CUSTOMISATION A–Z
   ============================================================= */
.dgw-zcrm-cus { position: relative; padding: 112px 0 120px; background: linear-gradient(180deg, #f1efff 0%, #f7f5ff 60%, #fff 100%); border-top: 1px solid rgba(106,77,255,.12); overflow: hidden; }
.dgw-zcrm-cus-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(106,77,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(106,77,255,.07) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 50% at 50% 20%, #000 20%, transparent 75%); pointer-events: none; }
.dgw-zcrm-cus-stage { display: grid; grid-template-columns: 330px 1fr; gap: 36px; align-items: center; }
.dgw-zcrm-cus-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dgw-zcrm-cus-keys li { position: relative; padding: 16px 18px 16px 54px; border-radius: 14px; background: rgba(255,255,255,.6); border: 1px solid rgba(106,77,255,.12); font-size: 13.5px; line-height: 1.55; color: var(--dgw-zcrm-muted); cursor: pointer; transition: background .3s, border-color .3s, box-shadow .3s, transform .3s; }
.dgw-zcrm-cus-keys li span { position: absolute; left: 16px; top: 17px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 11px/1 'JetBrains Mono', monospace; color: #6a4dff; background: rgba(106,77,255,.1); transition: all .3s; }
.dgw-zcrm-cus-keys b { display: block; margin-bottom: 3px; font: 700 15.5px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-cus-keys li.is-on { background: #fff; border-color: rgba(106,77,255,.4); box-shadow: 0 16px 34px -20px rgba(106,77,255,.55); transform: translateX(6px); }
.dgw-zcrm-cus-keys li.is-on span { background: #6a4dff; color: #fff; }

.dgw-zcrm-cus-app { border-radius: 20px; background: #fff; border: 1px solid var(--dgw-zcrm-line); box-shadow: 0 2px 4px rgba(14,22,51,.04), 0 40px 80px -36px rgba(106,77,255,.45); overflow: hidden; }
.dgw-zcrm-cus-app-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--dgw-zcrm-line); background: #fafbff; font: 600 13px/1 'Inter', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-cus-app-body { display: grid; grid-template-columns: 215px 1fr; min-height: 340px; }
.dgw-zcrm-cus-side { padding: 14px 10px; background: #0e1633; display: flex; flex-direction: column; gap: 4px; }
.dgw-zcrm-cus-side p { margin: 0; padding: 9px 12px; border-radius: 8px; font: 500 13px/1.2 'Inter', sans-serif; color: #b6bde3; display: flex; justify-content: space-between; align-items: center; }
.dgw-zcrm-cus-side p.is-cur { background: rgba(255,255,255,.08); color: #fff; }
.dgw-zcrm-cus-side em { margin-left: 8px; flex: 0 0 auto; font-style: normal; font: 700 9px/1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 3px 5px; border-radius: 4px; background: rgba(255,178,132,.16); color: #ffcfae; }
.dgw-zcrm-cus-main { padding: 20px 22px; }
.dgw-zcrm-cus-rec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-cus-rec-head small { display: block; font-size: 11.5px; color: var(--dgw-zcrm-muted-2); }
.dgw-zcrm-cus-rec-head b { font: 700 18px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-cus-btn { font: 600 12.5px/1 'Inter', sans-serif; color: #fff; background: var(--dgw-zcrm-brand); padding: 10px 14px; border-radius: 9px; white-space: nowrap; }
.dgw-zcrm-cus-rec-grid { display: grid; grid-template-columns: 1fr 210px; gap: 18px; padding-top: 16px; }
.dgw-zcrm-cus-fields p { margin: 0; padding: 9px 0; border-bottom: 1px dashed var(--dgw-zcrm-line); font-size: 13.5px; font-weight: 600; color: var(--dgw-zcrm-ink-soft); }
.dgw-zcrm-cus-fields span { display: block; font-size: 11.5px; font-weight: 500; color: var(--dgw-zcrm-muted-2); margin-bottom: 2px; }
.dgw-zcrm-cus-widget { padding: 14px; border-radius: 14px; background: var(--dgw-zcrm-tint); border: 1px solid rgba(27,61,245,.12); align-self: start; }
.dgw-zcrm-cus-widget small { font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--dgw-zcrm-muted-2); }
.dgw-zcrm-cus-widget b { display: block; margin: 6px 0 8px; font: 700 15px/1.2 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-cus-widget p { margin: 0; display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--dgw-zcrm-line); font-size: 12.5px; color: var(--dgw-zcrm-ink-soft); }
.dgw-zcrm-cus-widget p span { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--dgw-zcrm-muted); }
/* hotspot highlight */
.dgw-zcrm-hot { position: relative; transition: box-shadow .35s, transform .35s, outline-color .35s; outline: 2px solid transparent; outline-offset: 3px; }
.dgw-zcrm-hot.is-lit { outline-color: var(--dgw-zcrm-accent); box-shadow: 0 0 0 6px rgba(255,122,69,.16); }
.dgw-zcrm-cus-side .dgw-zcrm-hot.is-lit { background: rgba(255,122,69,.16); color: #fff; }

.dgw-zcrm-cus-example { position: relative; max-width: 900px; margin: 48px auto 0; padding: 26px 30px 26px 34px; border-radius: 18px; background: #fff; border: 1px solid rgba(106,77,255,.16); box-shadow: 0 18px 40px -28px rgba(106,77,255,.45); }
.dgw-zcrm-cus-example::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #6a4dff, var(--dgw-zcrm-accent)); }
.dgw-zcrm-cus-example-k { display: block; font: 700 11px/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6a4dff; margin-bottom: 10px; }
.dgw-zcrm-cus-example p { font-size: 16px; line-height: 1.7; color: var(--dgw-zcrm-ink-soft); }
.dgw-zcrm-cus-example strong { color: var(--dgw-zcrm-ink); }

@media (max-width: 1024px) {
  .dgw-zcrm-lc-how ol { grid-template-columns: repeat(2, 1fr); }
  .dgw-zcrm-cus-stage { grid-template-columns: 1fr; }
  .dgw-zcrm-cus-keys { display: grid; grid-template-columns: 1fr 1fr; }
  .dgw-zcrm-cus-keys li.is-on { transform: none; }
}
@media (max-width: 820px) {
  .dgw-zcrm-lc, .dgw-zcrm-cus { padding: 72px 0 80px; }
  .dgw-zcrm-lc-map { height: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
  .dgw-zcrm-lc-wires { display: none; }
  .dgw-zcrm-lc-src, .dgw-zcrm-lc-own, .dgw-zcrm-lc-hub { position: relative; left: auto !important; top: auto !important; transform: none; width: auto; }
  .dgw-zcrm-lc-hub { margin: 12px 0; }
  .dgw-zcrm-lc-hub::after { display: none; }
  .dgw-zcrm-cus-app-body { grid-template-columns: 1fr; }
  .dgw-zcrm-cus-side { flex-direction: row; flex-wrap: wrap; }
  .dgw-zcrm-cus-rec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dgw-zcrm-lc-how ol, .dgw-zcrm-cus-keys { grid-template-columns: 1fr; }
  .dgw-zcrm-cus-example { padding: 22px 20px 22px 24px; }
}

/* =============================================================
   7. AI LAYER · dark band
   ============================================================= */
.dgw-zcrm-ai { position: relative; padding: 112px 0; overflow: hidden; background: linear-gradient(160deg, #070c35 0%, #0d1452 60%, #1a1460 100%); color: #fff; }
.dgw-zcrm-ai-glow { position: absolute; width: 640px; height: 640px; right: -200px; top: -160px; border-radius: 50%; background: rgba(124,143,255,.22); filter: blur(110px); pointer-events: none; }
.dgw-zcrm-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dgw-zcrm-ai .dgw-zcrm-kicker { color: #ffb284; }
.dgw-zcrm-ai .dgw-zcrm-h2 { color: #fff; }
.dgw-zcrm-ai-lead { margin-top: 16px !important; font-size: 17px; line-height: 1.65; color: #b6bde3; }
.dgw-zcrm-ai-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.dgw-zcrm-ai-card { padding: 18px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.dgw-zcrm-ai-card b { display: block; margin-bottom: 6px; font: 700 15.5px/1.3 'Plus Jakarta Sans', sans-serif; color: #fff; }
.dgw-zcrm-ai-card p { font-size: 13.8px; line-height: 1.6; color: #b6bde3; }
.dgw-zcrm-ai-note { margin-top: 18px !important; font-size: 13px; color: #8e97c8; padding-left: 22px; position: relative; }
.dgw-zcrm-ai-note::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; background: #34e08a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V5z'/%3E%3C/svg%3E") center/contain no-repeat; }

.dgw-zcrm-chat { border-radius: 22px; background: #fbfaf7; color: var(--dgw-zcrm-ink); box-shadow: 0 50px 100px -40px rgba(0,0,0,.7); overflow: hidden; }
.dgw-zcrm-chat-bar { padding: 12px; border-bottom: 1px solid #ece9e1; background: #f4f2ec; }
.dgw-zcrm-chat-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: #e9e6dd; }
.dgw-zcrm-chat-tabs button { flex: 1; border: 0; padding: 10px; border-radius: 9px; background: transparent; font: 600 13px/1 'Inter', sans-serif; color: #6b6656; cursor: pointer; transition: all .25s; }
.dgw-zcrm-chat-tabs button.is-on { background: #fff; color: #c15f3c; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.dgw-zcrm-chat-tabs button[data-c="zia"].is-on { color: var(--dgw-zcrm-brand); }
.dgw-zcrm-chat-body { padding: 22px 20px 8px; min-height: 420px; display: flex; flex-direction: column; gap: 12px; }
.dgw-zcrm-msg { max-width: 88%; margin: 0; font-size: 14px; line-height: 1.55; border-radius: 16px; padding: 12px 15px; transition: opacity .45s, transform .45s; }
.dgw-zcrm-chat.is-js .dgw-zcrm-msg { opacity: 0; transform: translateY(8px); }
.dgw-zcrm-chat.is-js .dgw-zcrm-msg.is-in { opacity: 1; transform: none; }
.dgw-zcrm-msg-me { align-self: flex-end; background: #ece8dd; border-bottom-right-radius: 5px; }
.dgw-zcrm-msg-ai { align-self: flex-start; background: #fff; border: 1px solid #ece9e1; border-bottom-left-radius: 5px; }
.dgw-zcrm-msg-ai ul { margin: 8px 0; padding-left: 18px; }
.dgw-zcrm-msg-ai li { margin: 3px 0; }
.dgw-zcrm-chat-body[hidden] { display: none; }
.dgw-zcrm-msg-tool { display: flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 8px; font: 600 11.5px/1 'Inter', sans-serif; color: #6b6656; background: #f4f2ec; padding: 6px 9px; border-radius: 7px; }
.dgw-zcrm-msg-tool::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34c77b; }
.dgw-zcrm-msg-alert { align-self: flex-start; background: #fff4ec; border: 1px solid rgba(255,122,69,.3); font-size: 13.5px; }
.dgw-zcrm-msg-alert b { display: block; color: var(--dgw-zcrm-accent); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.dgw-zcrm-zia-bars p { display: grid; grid-template-columns: 54px 1fr 20px; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 13px; }
.dgw-zcrm-zia-bars i { height: 12px; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--dgw-zcrm-brand), #6a4dff); }
.dgw-zcrm-zia-bars b { text-align: right; }
.dgw-zcrm-chat-foot { padding: 8px 20px 16px; font-size: 11.5px; color: #9a9585; }

/* =============================================================
   8. CEO DASHBOARD
   ============================================================= */
.dgw-zcrm-ceo { padding: 112px 0; background: #fff; }
.dgw-zcrm-dash { max-width: 1060px; margin: 0 auto; border-radius: 22px; background: #fff; border: 1px solid var(--dgw-zcrm-line); box-shadow: 0 2px 4px rgba(14,22,51,.04), 0 50px 100px -44px rgba(27,61,245,.4); overflow: hidden; }
.dgw-zcrm-dash-bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--dgw-zcrm-line); background: #fafbff; font-size: 13.5px; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-dash-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 'Inter', sans-serif; color: var(--dgw-zcrm-green); }
.dgw-zcrm-dash-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--dgw-zcrm-green); animation: dgw-zcrm-pulse 2s infinite; }
.dgw-zcrm-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-dash-kpis div { padding: 20px 22px; border-right: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-dash-kpis div:last-child { border-right: 0; }
.dgw-zcrm-dash-kpis small { display: block; font-size: 12px; color: var(--dgw-zcrm-muted-2); }
.dgw-zcrm-dash-kpis b { display: block; margin: 6px 0 4px; font: 800 26px/1.1 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-dash-kpis span { font-size: 12px; font-weight: 600; color: var(--dgw-zcrm-muted); }
.dgw-zcrm-dash-kpis .is-up { color: var(--dgw-zcrm-green); }
.dgw-zcrm-dash-kpis .is-warn, .dgw-zcrm-dash-team .is-warn { color: #d2452c; font-weight: 700; }
.dgw-zcrm-dash-row { display: grid; grid-template-columns: 1fr 1.2fr; }
.dgw-zcrm-dash-panel { padding: 20px 22px; }
.dgw-zcrm-dash-panel:first-child { border-right: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-dash-panel small { font: 600 12.5px/1 'Inter', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-dash-chart { height: 170px; margin-top: 18px; display: flex; align-items: flex-end; gap: 12px; border-bottom: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-dash-chart i { flex: 1; height: var(--h); border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #8a9dff, var(--dgw-zcrm-brand)); transform-origin: bottom; }
.dgw-zcrm-dash-chart i:last-child { background: linear-gradient(180deg, #ffb284, var(--dgw-zcrm-accent)); }
.dgw-zcrm-dash.is-in .dgw-zcrm-dash-chart i { animation: dgw-zcrm-grow .9s cubic-bezier(.2,.8,.2,1) both; }
.dgw-zcrm-dash-team { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13.5px; }
.dgw-zcrm-dash-team th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--dgw-zcrm-muted-2); padding: 8px 6px; }
.dgw-zcrm-dash-team td { padding: 11px 6px; border-top: 1px solid var(--dgw-zcrm-line); font-weight: 600; color: var(--dgw-zcrm-ink-soft); }
.dgw-zcrm-dash-team td i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--dgw-zcrm-brand), #6a4dff); min-width: 30px; }
.dgw-zcrm-ceo-points { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1060px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dgw-zcrm-ceo-points li { padding: 18px 20px; border-radius: 16px; background: var(--dgw-zcrm-tint); font-size: 14px; line-height: 1.6; color: var(--dgw-zcrm-muted); }
.dgw-zcrm-ceo-points b { display: block; margin-bottom: 4px; font: 700 15.5px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }

/* =============================================================
   9. MIGRATION
   ============================================================= */
.dgw-zcrm-mig { padding: 112px 0; background: linear-gradient(180deg, #fff6ef 0%, #fdf1e8 100%); border-top: 1px solid rgba(255,122,69,.14); border-bottom: 1px solid rgba(255,122,69,.14); }
.dgw-zcrm-mig-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.dgw-zcrm-mig-steps { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: mg; }
.dgw-zcrm-mig-steps li { counter-increment: mg; position: relative; padding: 14px 16px 14px 56px; border-radius: 14px; background: #fff; border: 1px solid rgba(170,90,40,.12); font-size: 14px; line-height: 1.55; color: var(--dgw-zcrm-muted); }
.dgw-zcrm-mig-steps li::before { content: counter(mg, decimal-leading-zero); position: absolute; left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 700 11px/1 'JetBrains Mono', monospace; color: #fff; background: var(--dgw-zcrm-accent); }
.dgw-zcrm-mig-steps b { display: block; margin-bottom: 2px; font: 700 15px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-mig-viz { display: grid; grid-template-columns: 1fr 60px 1.1fr; align-items: center; gap: 8px; }
.dgw-zcrm-mig-from { display: flex; flex-direction: column; gap: 10px; }
.dgw-zcrm-mig-from span { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(170,90,40,.14); border-left: 4px solid var(--b); font: 700 14px/1 'Inter', sans-serif; color: var(--dgw-zcrm-ink); box-shadow: 0 10px 24px -18px rgba(170,90,40,.5); }
.dgw-zcrm-mig-pipe { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dgw-zcrm-mig-pipe i { width: 10px; height: 10px; border-radius: 50%; background: var(--dgw-zcrm-accent); animation: dgw-zcrm-flow 1.4s ease-in-out infinite; }
.dgw-zcrm-mig-pipe i:nth-child(2) { animation-delay: .2s; } .dgw-zcrm-mig-pipe i:nth-child(3) { animation-delay: .4s; }
@keyframes dgw-zcrm-flow { 0%, 100% { transform: translateX(-10px); opacity: .3; } 50% { transform: translateX(10px); opacity: 1; } }
.dgw-zcrm-mig-to { padding: 20px; border-radius: 18px; background: linear-gradient(150deg, var(--dgw-zcrm-brand), #6a4dff); color: #fff; box-shadow: 0 30px 60px -28px rgba(27,61,245,.6); }
.dgw-zcrm-mig-to small { font: 600 11px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #c9d0ff; }
.dgw-zcrm-mig-to b { display: block; margin: 6px 0 12px; font: 800 19px/1.2 'Plus Jakarta Sans', sans-serif; }
.dgw-zcrm-mig-to p { margin: 0; display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.15); font-size: 13.5px; }
.dgw-zcrm-mig-to em { font-style: normal; color: #6ff0ad; font-weight: 700; }

/* =============================================================
   10. HOW WE WORK
   ============================================================= */
.dgw-zcrm-how { padding: 112px 0; background: linear-gradient(180deg, #f3f6ff 0%, #fff 100%); }
.dgw-zcrm-how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.dgw-zcrm-how-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 25px; height: 2px; background: linear-gradient(90deg, var(--dgw-zcrm-brand), #6a4dff, var(--dgw-zcrm-accent)); opacity: .35; }
.dgw-zcrm-how-steps li { position: relative; text-align: center; font-size: 14px; line-height: 1.6; color: var(--dgw-zcrm-muted); padding: 0 6px; }
.dgw-zcrm-how-steps span { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px; background: #fff; border: 1.5px solid rgba(27,61,245,.25); font: 700 14px/1 'JetBrains Mono', monospace; color: var(--dgw-zcrm-brand); box-shadow: 0 10px 24px -14px rgba(27,61,245,.5); }
.dgw-zcrm-how-steps li:last-child span { background: var(--dgw-zcrm-accent); border-color: transparent; color: #fff; }
.dgw-zcrm-how-steps b { display: block; margin-bottom: 6px; font: 700 16px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }

/* =============================================================
   11. FAQ
   ============================================================= */
.dgw-zcrm-faq { padding: 104px 0 112px; background: #fff; border-top: 1px solid var(--dgw-zcrm-line); }
.dgw-zcrm-faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.dgw-zcrm-faq-item { border-radius: 14px; border: 1px solid var(--dgw-zcrm-line); background: #fff; transition: border-color .25s, box-shadow .25s; }
.dgw-zcrm-faq-item[open] { border-color: rgba(27,61,245,.25); box-shadow: var(--dgw-zcrm-shadow); }
.dgw-zcrm-faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 18px 56px 18px 22px; font: 600 16px/1.4 'Plus Jakarta Sans', sans-serif; color: var(--dgw-zcrm-ink); }
.dgw-zcrm-faq-item summary::-webkit-details-marker { display: none; }
.dgw-zcrm-faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 500 20px/1 'Inter', sans-serif; color: var(--dgw-zcrm-brand); background: var(--dgw-zcrm-tint); transition: transform .3s; }
.dgw-zcrm-faq-item[open] summary::after { content: "−"; background: var(--dgw-zcrm-brand); color: #fff; }
.dgw-zcrm-faq-a { padding: 0 22px 20px; }
.dgw-zcrm-faq-a p { font-size: 15px; line-height: 1.7; color: var(--dgw-zcrm-muted); }

/* =============================================================
   12. CTA + FOOTER
   ============================================================= */
.dgw-zcrm-cta { position: relative; padding: 120px 0; overflow: hidden; text-align: center; background: radial-gradient(ellipse at 20% 0%, rgba(124,143,255,.25), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(255,122,69,.18), transparent 55%), linear-gradient(180deg, #070c35, #0a1145); color: #fff; }
.dgw-zcrm-cta-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(124,143,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(124,143,255,.08) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 75%); pointer-events: none; }
.dgw-zcrm-cta-inner { position: relative; max-width: 760px; margin: 0 auto; }
.dgw-zcrm-cta .dgw-zcrm-kicker { color: #ffb284; }
.dgw-zcrm-cta-h2 { font: 800 clamp(32px, 4.4vw, 54px)/1.1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em; }
.dgw-zcrm-cta-sub { margin: 20px auto 0 !important; max-width: 600px; font-size: 17px; line-height: 1.65; color: #b6bde3; }
.dgw-zcrm-cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.dgw-zcrm-btn-outline { color: #fff; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.05); }
.dgw-zcrm-btn-outline:hover { background: rgba(255,255,255,.12); }
.dgw-zcrm-cta-assure { list-style: none; margin: 28px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; font-size: 13.5px; color: #c9d0ff; }
.dgw-zcrm-cta-assure li::before { content: "✓ "; color: #34e08a; font-weight: 700; }
.dgw-zcrm-footer { padding: 36px 0; background: #050a2e; border-top: 1px solid rgba(255,255,255,.06); }
.dgw-zcrm-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dgw-zcrm-footer-logo { font: 800 20px/1 'Plus Jakarta Sans', sans-serif; color: #fff; text-decoration: none; }
.dgw-zcrm-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.dgw-zcrm-footer-links a { font-size: 13.5px; color: #b6bde3; text-decoration: none; }
.dgw-zcrm-footer-links a:hover { color: #fff; }
.dgw-zcrm-footer-copy { font-size: 12.5px; color: #8089a8; }

@media (max-width: 1024px) {
  .dgw-zcrm-ai-grid, .dgw-zcrm-mig-grid { grid-template-columns: 1fr; gap: 44px; }
  .dgw-zcrm-how-steps { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .dgw-zcrm-how-steps::before { display: none; }
  .dgw-zcrm-ceo-points { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .dgw-zcrm-ai, .dgw-zcrm-ceo, .dgw-zcrm-mig, .dgw-zcrm-how, .dgw-zcrm-faq, .dgw-zcrm-cta { padding: 72px 0 80px; }
  .dgw-zcrm-ai-pair { grid-template-columns: 1fr; }
  .dgw-zcrm-dash-kpis { grid-template-columns: 1fr 1fr; }
  .dgw-zcrm-dash-kpis div:nth-child(2) { border-right: 0; }
  .dgw-zcrm-dash-kpis div:nth-child(-n+2) { border-bottom: 1px solid var(--dgw-zcrm-line); }
  .dgw-zcrm-dash-row { grid-template-columns: 1fr; }
  .dgw-zcrm-dash-panel:first-child { border-right: 0; border-bottom: 1px solid var(--dgw-zcrm-line); }
  .dgw-zcrm-mig-viz { grid-template-columns: 1fr; }
  .dgw-zcrm-mig-from { flex-direction: row; flex-wrap: wrap; }
  .dgw-zcrm-mig-from span { flex: 1 1 40%; }
  .dgw-zcrm-mig-pipe { flex-direction: row; justify-content: center; transform: rotate(90deg); height: 40px; }
  .dgw-zcrm-faq-item summary { font-size: 15px; padding: 16px 52px 16px 18px; }
  .dgw-zcrm-faq-a { padding: 0 18px 18px; }
}
@media (max-width: 560px) {
  .dgw-zcrm-how-steps { grid-template-columns: 1fr; }
  .dgw-zcrm-chat-body { min-height: 0; }
  .dgw-zcrm-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  .dgw-zcrm-pain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .dgw-zcrm-nav-links { display: none; }
  .dgw-zcrm-nav-cta { margin-left: auto; }
  .dgw-zcrm-container { padding: 0 20px; }
  .dgw-zcrm-hero { padding: 56px 0 40px; }
  .dgw-zcrm-console-bar { flex-wrap: wrap; }
  .dgw-zcrm-region { margin-left: 0; width: 100%; }
  .dgw-zcrm-region button { flex: 1; }
  .dgw-zcrm-rail-wrap { padding: 20px 10px 16px; }
  .dgw-zcrm-rail-track { top: 41px; }
  .dgw-zcrm-node { width: 36px; height: 36px; border-radius: 11px; }
  .dgw-zcrm-rail b { font-size: 11.5px; }
  .dgw-zcrm-rail small { display: none; }
  .dgw-zcrm-console-body { grid-template-columns: 1fr; }
  .dgw-zcrm-record { border-right: 0; border-bottom: 1px solid var(--dgw-zcrm-line); padding: 20px; }
  .dgw-zcrm-short-card { padding: 24px 22px 24px 26px; }
  .dgw-zcrm-pain { padding: 72px 0 80px; }
}
@media (max-width: 560px) {
  .dgw-zcrm-pain-grid { grid-template-columns: 1fr; }
  .dgw-zcrm-fields { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dgw-zcrm-nav-cta { padding: 10px 13px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .dgw-zcrm-body *, .dgw-zcrm-body *::before { animation: none !important; transition: none !important; }
}



/* ============================================================
   DIGIWAH — CASE STUDY: ACE SPACES (Zoho CRM + Books + Forms + Sign)
   Page-scoped prefix: dgw-as-  (reuses dgw-nav-* / dgw-footer-*)
   ============================================================ */
:root {
  --brand: #010ED0; --accent: #FF7A45; --ink: #0a0f2c; --line: rgba(255,255,255,0.08);
  /* ACE Spaces brand (from logo) */
  --as-red: #ed1c24; --as-ink: #0b0b0d;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: rgba(99,102,241,0.12); color: #4338ca; padding: 1px 6px; border-radius: 5px; }

/* ============================================================
   NAVBAR (inherited)
   ============================================================ */
.dgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.dgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dgw-nav-logo { display: flex; align-items: center; }
.dgw-nav-logo-img { height: 38px; width: auto; display: block; }
.dgw-nav-links { display: flex; gap: 30px; }
.dgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.dgw-nav-links a:hover { color: #fff; }
.dgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.dgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }
/* ============================================================
   FOOTER (inherited)
   ============================================================ */
.dgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.dgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.dgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.dgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.dgw-footer-brand { max-width: 360px; }
.dgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.dgw-footer-logo { height: 40px; width: auto; display: block; }
.dgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.dgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.dgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.dgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.dgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.dgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.dgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.dgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.dgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.dgw-footer-col { min-width: 0; }
.dgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.dgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.dgw-footer-list a, .dgw-footer-list li, .dgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-list a:hover { color: #ffb284; }
.dgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.dgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.dgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.dgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.dgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.dgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.dgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.dgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.dgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.dgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-legal a:hover { color: #fff; }
.dgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.dgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }

/* ============================================================

/* ============================================================
   ACE SPACES — page-scoped (dgw-as-)
   ============================================================ */
.dgw-as-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.dgw-as-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dgw-as-kicker { display: inline-block; font: 700 12px/1 'Inter'; letter-spacing: .16em; text-transform: uppercase; color: var(--as-red); margin-bottom: 16px; }
.dgw-as-kicker--light { color: #ff6b70; }
.dgw-as-kicker--white { color: rgba(255,255,255,.85); }
.dgw-as-h2 { font: 800 clamp(27px, 3.6vw, 42px)/1.14 'Plus Jakarta Sans'; color: var(--as-ink); }
.dgw-as-h2--light { color: #fff; }
.dgw-as-p { font: 400 17px/1.7 'Inter'; color: #52525b; margin-top: 16px; max-width: 660px; }
.dgw-as-p strong { color: var(--as-ink); }
.dgw-as-p--light { color: rgba(244,244,245,.72); }
.dgw-as-p--center { margin-left: auto; margin-right: auto; }
.dgw-as-head { max-width: 760px; margin-bottom: 48px; }
.dgw-as-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.dgw-as-mono { font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--as-red); }
.dgw-as-amber { color: #d97706 !important; }
.dgw-as-ticks { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.dgw-as-ticks li { position: relative; padding-left: 30px; font: 400 15.5px/1.6 'Inter'; color: #3f3f46; }
.dgw-as-ticks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fde8e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.dgw-as-ticks strong { color: var(--as-ink); }
.dgw-as-live { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; flex-shrink: 0; animation: dgwAsPulse 2.2s infinite; }
@keyframes dgwAsPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.dgw-as-btn { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1 'Inter'; padding: 15px 26px; border-radius: 10px; transition: transform .2s, box-shadow .2s, background .2s; }
.dgw-as-btn:hover { transform: translateY(-2px); }
.dgw-as-btn--red { background: var(--as-red); color: #fff; box-shadow: 0 12px 28px -10px rgba(237,28,36,.6); }
.dgw-as-btn--glass { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.dgw-as-btn--orange { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(255,122,69,.4); }
.dgw-as-btn--ghost { background: rgba(255,255,255,.05); color: #fff; border: 1px solid rgba(124,143,255,.3); }
.dgw-as-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.dgw-as-actions--center { justify-content: center; }

/* ---------- HERO ---------- */
.dgw-as-hero { position: relative; overflow: hidden; padding: 150px 0 110px; background: radial-gradient(90% 70% at 85% 20%, rgba(237,28,36,.22), transparent 60%), #0b0b0d; color: #fff; }
.dgw-as-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%); }
.dgw-as-hero-glow { position: absolute; width: 600px; height: 600px; left: -200px; bottom: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(237,28,36,.25), transparent 65%); filter: blur(40px); }
.dgw-as-hero-mark { position: absolute; right: -60px; bottom: -70px; width: 420px; height: auto; opacity: .06; transform: rotate(-12deg); pointer-events: none; }
.dgw-as-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.2fr .95fr; gap: 56px; align-items: center; }
.dgw-as-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.dgw-as-tag { font: 600 12px/1 'Inter'; padding: 7px 12px; border-radius: 100px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.dgw-as-tag--case { background: var(--as-red); border-color: transparent; }
.dgw-as-logocard { display: inline-block; background: #fff; padding: 14px 22px; border-radius: 16px; margin-bottom: 26px; box-shadow: 0 20px 40px -18px rgba(237,28,36,.45); }
.dgw-as-logocard img { height: 58px; width: auto; display: block; }
.dgw-as-h1 { font: 800 clamp(30px, 3.6vw, 46px)/1.12 'Plus Jakarta Sans'; letter-spacing: -.025em; }
.dgw-as-hl { background: linear-gradient(90deg, #ff4d55, #ff9a9e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dgw-as-lead { font: 400 18px/1.65 'Inter'; color: rgba(244,244,245,.78); margin-top: 22px; max-width: 600px; }
.dgw-as-lead strong { color: #fff; }

.dgw-as-journey { background: #fff; color: var(--as-ink); border-radius: 20px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); font-family: 'Geist', 'Inter', sans-serif; transform: perspective(1200px) rotateY(-7deg); }
.dgw-as-journey-head { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid #f0f0f2; }
.dgw-as-journey-head b { font: 700 18px/1.2 'Geist', 'Plus Jakarta Sans'; }
.dgw-as-journey-head small { font: 500 12.5px/1 'Geist', 'Inter'; color: #71717a; }
.dgw-as-journey-steps { list-style: none; display: grid; gap: 4px; margin-top: 12px; position: relative; }
.dgw-as-journey-steps::before { content: ''; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: #f0f0f2; }
.dgw-as-journey-steps li { position: relative; display: flex; gap: 12px; align-items: center; padding: 7px 0; }
.dgw-as-journey-steps i { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 'JetBrains Mono'; font-style: normal; background: #f4f4f5; color: #a1a1aa; border: 2px solid #fff; animation: dgwAsStep 7.2s infinite; animation-delay: calc(var(--i) * .9s); }
@keyframes dgwAsStep { 0% { background: #f4f4f5; color: #a1a1aa; box-shadow: none; } 6%, 80% { background: var(--as-red); color: #fff; box-shadow: 0 0 0 5px rgba(237,28,36,.15); } 100% { background: #f4f4f5; color: #a1a1aa; } }
.dgw-as-journey-steps b { display: block; font: 600 14.5px/1.2 'Geist', 'Inter'; }
.dgw-as-journey-steps span { display: block; font: 400 12.5px/1.3 'Geist', 'Inter'; color: #71717a; margin-top: 2px; }
.dgw-as-journey-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f2; font: 600 12.5px/1 'Geist', 'Inter'; color: #3f3f46; }

/* ---------- CLIENT ---------- */
.dgw-as-client { padding: 110px 0; background: #fff; }
.dgw-as-facts { margin-top: 28px; border: 1px solid #e4e4e7; border-radius: 16px; overflow: hidden; }
.dgw-as-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #f4f4f5; font: 500 14px/1.4 'Inter'; }
.dgw-as-facts div:last-child { border-bottom: 0; }
.dgw-as-facts span { color: #71717a; } .dgw-as-facts b { color: var(--as-ink); text-align: right; }
.dgw-as-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dgw-as-offer-tile { background: #fafafa; border: 1px solid #ececef; border-radius: 16px; padding: 20px; display: grid; gap: 6px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.dgw-as-offer-tile:hover { transform: translateY(-4px); border-color: rgba(237,28,36,.35); box-shadow: 0 20px 36px -24px rgba(237,28,36,.45); }
.dgw-as-offer-tile svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #fde8e9; color: var(--as-red); margin-bottom: 6px; }
.dgw-as-offer-tile b { font: 700 16px/1.25 'Plus Jakarta Sans'; color: var(--as-ink); }
.dgw-as-offer-tile span { font: 400 13.5px/1.4 'Inter'; color: #71717a; }
.dgw-as-offer-tile--big { grid-column: 1 / -1; background: linear-gradient(135deg, #0b0b0d, #27272a); border-color: transparent; }
.dgw-as-offer-tile--big b { color: #fff; } .dgw-as-offer-tile--big span { color: rgba(255,255,255,.65); }
.dgw-as-offer-tile--big svg { background: var(--as-red); color: #fff; }

/* ---------- BEFORE ---------- */
.dgw-as-before { padding: 110px 0; background: #f6f5f3; }
.dgw-as-scatter { position: relative; height: 230px; max-width: 1080px; margin: 0 auto; }
.dgw-as-scatter-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.dgw-as-scatter-lines path { fill: none; stroke: #d4d4d8; stroke-width: 2; stroke-dasharray: 6 8; }
.dgw-as-sheet { position: absolute; left: var(--x); top: var(--y); width: 19%; z-index: 1; background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; padding: 16px; transform: rotate(var(--r)); box-shadow: 0 18px 30px -22px rgba(0,0,0,.35); display: grid; gap: 6px; transition: transform .3s; }
.dgw-as-sheet:hover { transform: rotate(0) translateY(-4px); }
.dgw-as-scatter.is-in .dgw-as-sheet { animation: dgwAsDrift 6s ease-in-out infinite alternate; }
.dgw-as-sheet:nth-child(2) { animation-delay: -1.5s !important; } .dgw-as-sheet:nth-child(3) { animation-delay: -3s !important; } .dgw-as-sheet:nth-child(4) { animation-delay: -4.5s !important; }
@keyframes dgwAsDrift { to { transform: rotate(calc(var(--r) * -1)) translateY(-6px); } }
.dgw-as-sheet-ico { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font: 800 12px/1 'Inter'; color: #fff; }
.dgw-as-sheet-ico--xls { background: #16a34a; } .dgw-as-sheet-ico--doc { background: #2563eb; } .dgw-as-sheet-ico--wa { background: #22c55e; } .dgw-as-sheet-ico--books { background: #0f62fe; }
.dgw-as-sheet b { font: 700 13.5px/1.25 'Inter'; color: var(--as-ink); word-break: break-word; }
.dgw-as-sheet small { font: 500 12px/1.35 'Inter'; color: #b91c1c; }

/* ---------- PIPELINE ---------- */
.dgw-as-pipe { padding: 110px 0; background: #fff; }
.dgw-as-stages { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin-bottom: 28px; }
.dgw-as-stage { position: relative; font: 600 12px/1.25 'Geist', 'Inter'; text-align: center; padding: 14px 6px; border-radius: 10px; background: #f4f4f5; color: #71717a; transition: background .35s, color .35s, transform .35s; }
.dgw-as-stage.is-lit { background: #fde8e9; color: #b91c1c; }
.dgw-as-stage.is-now { background: var(--as-red); color: #fff; transform: translateY(-4px); box-shadow: 0 12px 22px -10px rgba(237,28,36,.6); }
.dgw-as-stage--gate::after { content: ''; position: absolute; top: -8px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: #0b0b0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/11px no-repeat; }
.dgw-as-stage--won.is-lit, .dgw-as-stage--client.is-lit { background: #dcfce7; color: #15803d; }
.dgw-as-pipe-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dgw-as-pcard { border: 1px solid #ececef; border-radius: 16px; padding: 20px; background: #fafafa; transition: transform .25s, box-shadow .25s; }
.dgw-as-pcard:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -26px rgba(0,0,0,.4); }
.dgw-as-pcard h3 { font: 700 16px/1.3 'Plus Jakarta Sans'; color: var(--as-ink); margin-bottom: 8px; }
.dgw-as-pcard p { font: 400 14px/1.6 'Inter'; color: #71717a; }

/* ---------- FLOOR PLAN ---------- */
.dgw-as-floor { position: relative; overflow: hidden; padding: 120px 0; background: #0b0b0d; }
.dgw-as-floor::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 75%); }
.dgw-as-floor-glow { position: absolute; width: 900px; height: 600px; left: 50%; top: 40%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(237,28,36,.22), transparent 65%); filter: blur(40px); }
.dgw-as-legend { display: flex; gap: 14px; flex-wrap: wrap; font: 500 12.5px/1 'Geist', 'Inter'; color: #52525b; }
.dgw-as-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dgw-as-legend i { width: 12px; height: 12px; border-radius: 4px; }
.st-av { background: #22c55e; } .st-hold { background: #f59e0b; } .st-book { background: var(--as-red); } .st-cash { background: #166534; }
.dgw-as-plan-meta { display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.3 'Geist', 'Inter'; color: #52525b; }
.dgw-as-plan-client { font: 600 13px/1.3 'Geist', 'Inter'; color: var(--as-ink); padding: 9px 10px; border-radius: 9px; background: #f4f4f5; }
.dgw-as-plan-btns { display: grid; gap: 6px; margin-top: 4px; }
.dgw-as-plan-btns button { font: 600 13px/1 'Geist', 'Inter'; padding: 11px; border-radius: 9px; border: 1px solid #e4e4e7; background: #fff; color: var(--as-ink); cursor: pointer; transition: .2s; }
.dgw-as-plan-btns button:hover { border-color: var(--as-ink); }
.dgw-as-plan-btns [data-act="book"] { background: var(--as-red); border-color: var(--as-red); color: #fff; }
.dgw-as-plan-btns [data-act="hold"] { color: #b45309; }
.dgw-as-plan-btns button:disabled { opacity: .4; cursor: not-allowed; }
.dgw-as-plan-note { text-align: center; font: 500 12px/1.4 'Inter'; color: #a1a1aa; margin-top: 14px; }
.dgw-as-plan-noscript { grid-column: 1 / -1; font: 500 14px/1.5 'Inter'; color: #52525b; }

/* ---------- ONBOARDING ---------- */
.dgw-as-onb { padding: 110px 0; background: #fafafa; }
.dgw-as-2col--flip { grid-template-columns: 1.2fr .9fr; gap: 48px; }
.dgw-as-onb-visual { display: grid; grid-template-columns: 1fr auto .85fr; align-items: center; gap: 12px; }
.dgw-as-form { background: #fff; border: 1px solid #e4e4e7; border-radius: 18px; padding: 18px; box-shadow: 0 30px 50px -36px rgba(0,0,0,.45); display: grid; gap: 9px; font-family: 'Geist', 'Inter', sans-serif; }
.dgw-as-form-h { display: flex; align-items: center; gap: 8px; font: 700 15px/1 'Geist', 'Inter'; color: var(--as-ink); padding-bottom: 8px; border-bottom: 1px solid #f4f4f5; }
.dgw-as-form-h img { width: 20px; height: auto; }
.dgw-as-form-f span { display: block; font: 500 10.5px/1 'Geist', 'Inter'; color: #a1a1aa; margin-bottom: 4px; }
.dgw-as-form-f i { display: block; font: 500 12.5px/1 'Geist', 'Inter'; font-style: normal; color: #3f3f46; padding: 9px 10px; border: 1px solid #e4e4e7; border-radius: 8px; }
.dgw-as-form-f--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dgw-as-form-kyc { display: flex; flex-wrap: wrap; gap: 5px; }
.dgw-as-form-kyc span { font: 600 11px/1 'Geist', 'Inter'; padding: 7px 9px; border-radius: 7px; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.dgw-as-form-kyc span::before { content: '↑ '; }
.dgw-as-form-submit { text-align: center; font: 700 13px/1 'Geist', 'Inter'; color: #fff; background: var(--as-red); padding: 11px; border-radius: 9px; }
.dgw-as-onb-visual.is-in .dgw-as-form-submit { animation: dgwAsPress 4s ease-in-out infinite; }
@keyframes dgwAsPress { 0%, 20% { transform: none; } 25% { transform: scale(.95); } 30%, 100% { transform: none; } }
.dgw-as-onb-arrow { color: var(--as-red); }
.dgw-as-onb-visual.is-in .dgw-as-onb-arrow { animation: dgwAsNudge 4s ease-in-out infinite; }
@keyframes dgwAsNudge { 0%, 28% { opacity: .25; transform: translateX(-6px); } 40%, 100% { opacity: 1; transform: none; } }
.dgw-as-onb-deal { background: #0b0b0d; color: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.6); }
.dgw-as-onb-deal .dgw-as-mono { color: #ff6b70; }
.dgw-as-onb-stage { display: grid; gap: 4px; margin: 12px 0; }
.dgw-as-onb-stage s { font: 500 12.5px/1 'Geist', 'Inter'; color: #71717a; }
.dgw-as-onb-stage b { font: 700 17px/1.2 'Geist', 'Plus Jakarta Sans'; color: #4ade80; }
.dgw-as-onb-deal ul { list-style: none; display: grid; gap: 7px; }
.dgw-as-onb-deal li { font: 500 12.5px/1.35 'Geist', 'Inter'; color: rgba(255,255,255,.78); padding-left: 18px; position: relative; }
.dgw-as-onb-deal li::before { content: '✓'; position: absolute; left: 0; color: #4ade80; font-weight: 700; }
.dgw-as-onb-visual.is-in .dgw-as-onb-deal li { animation: dgwAsTick 4s ease infinite; }
.dgw-as-onb-deal li:nth-child(2) { animation-delay: .2s !important; } .dgw-as-onb-deal li:nth-child(3) { animation-delay: .4s !important; }
@keyframes dgwAsTick { 0%, 38% { opacity: .25; transform: translateX(-4px); } 46%, 100% { opacity: 1; transform: none; } }

/* ---------- SIGN ---------- */
.dgw-as-sign { padding: 110px 0; background: linear-gradient(180deg, #fff, #fff5f5); }
.dgw-as-signflow { display: grid; grid-template-columns: 1fr 70px 1fr 70px 1fr; align-items: start; max-width: 1000px; margin: 0 auto; }
.dgw-as-sstep { text-align: center; display: grid; justify-items: center; gap: 8px; opacity: .45; transition: opacity .4s; }
.dgw-as-sstep.is-on { opacity: 1; }
.dgw-as-sstep b { font: 700 16px/1.25 'Plus Jakarta Sans'; color: var(--as-ink); margin-top: 8px; }
.dgw-as-sstep span { font: 400 13.5px/1.5 'Inter'; color: #71717a; max-width: 230px; }
.dgw-as-sdoc { position: relative; width: 150px; height: 190px; background: #fff; border: 1px solid #ececef; border-radius: 10px; box-shadow: 0 24px 40px -26px rgba(0,0,0,.45); padding: 18px 16px 30px; display: flex; flex-direction: column; gap: 8px; transition: transform .4s, box-shadow .4s; }
.dgw-as-sstep.is-on .dgw-as-sdoc { transform: translateY(-6px); box-shadow: 0 30px 50px -26px rgba(237,28,36,.45); border-color: rgba(237,28,36,.35); }
.dgw-as-sdoc i { display: block; height: 6px; flex-shrink: 0; border-radius: 4px; background: #f0f0f2; }
.dgw-as-sdoc i:nth-child(1) { width: 60%; height: 9px; background: #fde2e3; } .dgw-as-sdoc i:nth-child(3n) { width: 78%; } .dgw-as-sdoc i:nth-child(4n) { width: 90%; }
.dgw-as-sdoc em { position: absolute; left: 0; right: 0; bottom: 12px; font: 600 11px/1 'Geist', 'Inter'; font-style: normal; color: var(--as-red); }
.dgw-as-sig { width: 100px; height: 30px; margin-top: auto; }
.dgw-as-sig--2 { margin-top: 0; margin-bottom: 18px; }
.dgw-as-sig path { fill: none; stroke: #1d4ed8; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.dgw-as-sig--2 path { stroke: var(--as-red); }
.dgw-as-sstep.is-on .dgw-as-sig path { animation: dgwAsDraw 1.1s ease forwards; }
.dgw-as-sstep.is-on .dgw-as-sig--2 path { animation-delay: .5s; }
@keyframes dgwAsDraw { to { stroke-dashoffset: 0; } }
.dgw-as-sline { height: 2px; margin-top: 95px; background: repeating-linear-gradient(90deg, #fca5a5 0 6px, transparent 6px 12px); }
.dgw-as-sign-note { text-align: center; font: 600 14px/1.5 'Inter'; color: #b91c1c; margin-top: 34px; }

/* ---------- DEAL 360 ---------- */
.dgw-as-d360 { padding: 110px 0; background: #fff; }
.dgw-as-d360-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; font-family: 'Geist', 'Inter', sans-serif; }
.dgw-as-d360-screen, .dgw-as-fu { background: #fff; border: 1px solid #e4e4e7; border-radius: 18px; padding: 20px; box-shadow: 0 30px 60px -44px rgba(0,0,0,.5); }
.dgw-as-d360-top { display: flex; justify-content: space-between; align-items: center; }
.dgw-as-d360-top b { font: 700 18px/1.2 'Geist', 'Inter'; color: var(--as-ink); }
.dgw-as-d360-top span { font: 600 12px/1 'Geist', 'Inter'; color: var(--as-red); background: #fde8e9; padding: 6px 10px; border-radius: 100px; }
.dgw-as-d360-track { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 16px 0; }
.dgw-as-d360-track i { height: 8px; border-radius: 4px; background: #f0f0f2; }
.dgw-as-d360-track i.done { background: #fca5a5; } .dgw-as-d360-track i.now { background: var(--as-red); animation: dgwAsBlink 1.4s infinite; }
@keyframes dgwAsBlink { 50% { opacity: .4; } }
.dgw-as-d360-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dgw-as-d360-kpis div { border: 1px solid #f0f0f2; border-radius: 11px; padding: 12px; background: #fafafa; }
.dgw-as-d360-kpis span { display: block; font: 500 11px/1.3 'Geist', 'Inter'; color: #71717a; }
.dgw-as-d360-kpis b { display: block; font: 700 17px/1 'Geist', 'Inter'; color: var(--as-ink); margin-top: 7px; letter-spacing: .02em; }
.dgw-as-d360-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dgw-as-d360-actions span { font: 600 12px/1 'Geist', 'Inter'; padding: 9px 11px; border-radius: 8px; border: 1px solid #e4e4e7; color: #3f3f46; }
.dgw-as-d360-actions span:nth-child(2) { background: var(--as-ink); color: #fff; border-color: var(--as-ink); }
.dgw-as-fu-h { font: 700 16px/1 'Geist', 'Inter'; color: var(--as-ink); margin-bottom: 12px; }
.dgw-as-fu-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.dgw-as-fu-tabs span { font: 600 11.5px/1 'Geist', 'Inter'; padding: 7px 9px; border-radius: 7px; background: #f4f4f5; color: #71717a; }
.dgw-as-fu-tabs .is-red { background: #fee2e2; color: #b91c1c; } .dgw-as-fu-tabs .is-on { background: var(--as-ink); color: #fff; }
.dgw-as-fu-item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed #f0f0f2; }
.dgw-as-fu-item i { font: 700 10.5px/1 'Geist', 'Inter'; font-style: normal; padding: 6px 8px; border-radius: 6px; min-width: 68px; text-align: center; }
.t-call { background: #dbeafe; color: #1d4ed8; } .t-wa { background: #dcfce7; color: #15803d; } .t-visit { background: #fde8e9; color: #b91c1c; }
.dgw-as-fu-item b { display: block; font: 600 13.5px/1.2 'Geist', 'Inter'; color: var(--as-ink); }
.dgw-as-fu-item small { display: block; font: 400 12px/1.3 'Geist', 'Inter'; color: #71717a; margin-top: 2px; }
.dgw-as-fu-bell { display: flex; align-items: center; gap: 7px; margin-top: 12px; font: 600 12px/1.3 'Geist', 'Inter'; color: #b45309; background: #fef3c7; padding: 9px 10px; border-radius: 9px; }

/* ---------- BOOKINGS / GST ---------- */
.dgw-as-book { padding: 110px 0; background: #f6f5f3; }
.dgw-as-gst { background: #fff; border: 1px solid #e4e4e7; border-radius: 20px; padding: 22px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.5); font-family: 'Geist', 'Inter', sans-serif; }
.dgw-as-gst-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dgw-as-gst-try { font: 600 11.5px/1 'Inter'; color: var(--as-red); background: #fde8e9; padding: 6px 9px; border-radius: 100px; }
.dgw-as-gst-booking { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dgw-as-gst-booking div { background: #fafafa; border: 1px solid #f0f0f2; border-radius: 10px; padding: 10px; }
.dgw-as-gst-booking span { display: block; font: 500 10.5px/1 'Geist', 'Inter'; color: #a1a1aa; }
.dgw-as-gst-booking b { display: block; font: 600 12.5px/1.25 'Geist', 'Inter'; color: var(--as-ink); margin-top: 5px; }
.dgw-as-gst-verify { color: #15803d !important; }
.dgw-as-gst-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 14px 0; background: #f4f4f5; padding: 4px; border-radius: 11px; }
.dgw-as-gst-toggle button { font: 600 12.5px/1.2 'Geist', 'Inter'; padding: 10px 8px; border: 0; border-radius: 8px; background: transparent; color: #71717a; cursor: pointer; transition: .2s; }
.dgw-as-gst-toggle button.is-on { background: #fff; color: var(--as-ink); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.dgw-as-invoice { border: 1px solid #e4e4e7; border-top: 4px solid #0f62fe; border-radius: 12px; padding: 14px 16px; }
.dgw-as-invoice-h { display: flex; justify-content: space-between; margin-bottom: 8px; }
.dgw-as-invoice-h b { font: 700 15px/1 'Geist', 'Inter'; color: var(--as-ink); }
.dgw-as-invoice-h span { font: 600 11px/1 'Geist', 'Inter'; color: #0f62fe; }
.dgw-as-invoice-r { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #f0f0f2; font: 500 13px/1 'Geist', 'Inter'; color: #52525b; }
.dgw-as-invoice-r b { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--as-ink); }
.dgw-as-invoice-t { border-bottom: 0; font-weight: 700; color: var(--as-ink); }
.dgw-as-tax-other { display: none; }
.dgw-as-gst.is-other .dgw-as-tax-same { display: none; }
.dgw-as-gst.is-other .dgw-as-tax-other { display: flex; animation: dgwAsIn .35s ease; }
.dgw-as-gst:not(.is-other) .dgw-as-tax-same { animation: dgwAsIn .35s ease; }
@keyframes dgwAsIn { from { opacity: 0; transform: translateX(8px); } }

/* ---------- BOOKS (dark) ---------- */
.dgw-as-books { position: relative; overflow: hidden; padding: 120px 0; background: linear-gradient(180deg, #08121f, #0b1a2e); }
.dgw-as-books-glow { position: absolute; width: 900px; height: 500px; left: 50%; top: 20%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(15,98,254,.25), transparent 60%), radial-gradient(ellipse at 20% 50%, rgba(237,28,36,.16), transparent 60%); filter: blur(30px); }
.dgw-as-sync { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; gap: 10px; max-width: 980px; margin: 0 auto 36px; }
.dgw-as-engine { background: rgba(255,255,255,.05); border: 1px solid rgba(255,107,112,.35); border-radius: 20px; padding: 22px; text-align: center; box-shadow: 0 0 50px -18px rgba(237,28,36,.6); }
.dgw-as-engine--books { border-color: rgba(96,165,250,.4); box-shadow: 0 0 50px -18px rgba(15,98,254,.7); }
.dgw-as-engine-ico { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font: 800 15px/1 'Plus Jakarta Sans'; color: #fff; background: var(--as-red); }
.dgw-as-engine--books .dgw-as-engine-ico { background: #0f62fe; font-size: 22px; }
.dgw-as-engine b { display: block; font: 700 18px/1 'Plus Jakarta Sans'; color: #fff; margin-bottom: 12px; }
.dgw-as-engine ul { list-style: none; display: grid; gap: 6px; }
.dgw-as-engine li { font: 500 12.5px/1.3 'Inter'; color: rgba(255,255,255,.7); background: rgba(255,255,255,.05); border-radius: 7px; padding: 7px; }
.dgw-as-lanes { display: grid; gap: 22px; }
.dgw-as-lane { position: relative; height: 34px; border-radius: 100px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.15); overflow: hidden; }
.dgw-as-lane span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 6px 12px; border-radius: 100px; background: #0c1b2f; font: 600 11.5px/1 'Inter'; color: rgba(255,255,255,.75); z-index: 1; }
.dgw-as-lane i { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; animation: dgwAsRunR 3s linear infinite; }
.dgw-as-lane--r i { background: #ff6b70; box-shadow: 0 0 12px #ff6b70; }
.dgw-as-lane--l i { background: #60a5fa; box-shadow: 0 0 12px #60a5fa; animation-name: dgwAsRunL; }
.dgw-as-lane i:nth-child(3) { animation-delay: -1s; } .dgw-as-lane i:nth-child(4) { animation-delay: -2s; }
@keyframes dgwAsRunR { from { left: -12px; } to { left: 100%; } }
@keyframes dgwAsRunL { from { left: 100%; } to { left: -12px; } }
.dgw-as-books-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dgw-as-bcard { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 22px; }
.dgw-as-bcard h3 { font: 700 17px/1.25 'Plus Jakarta Sans'; color: #fff; margin-bottom: 12px; }
.dgw-as-bcard ul { list-style: none; display: grid; gap: 9px; }
.dgw-as-bcard li { position: relative; padding-left: 20px; font: 400 14px/1.5 'Inter'; color: rgba(244,244,245,.72); }
.dgw-as-bcard li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: #60a5fa; }
.dgw-as-bcard:first-child li::before { background: #4ade80; }
.dgw-as-books-line { text-align: center; font: 600 15px/1.5 'Inter'; color: #fff; margin-top: 28px; }

/* ---------- RESULTS ---------- */
.dgw-as-results { position: relative; overflow: hidden; padding: 110px 0; background: linear-gradient(160deg, #ed1c24 0%, #a50f15 100%); }
.dgw-as-results::before { content: ''; position: absolute; right: -80px; top: -60px; width: 420px; height: 420px; background: url(assets/ace-icon.webp) center/contain no-repeat; opacity: .08; filter: brightness(0) invert(1); }
.dgw-as-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dgw-as-res { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 18px; padding: 24px; backdrop-filter: blur(6px); }
.dgw-as-res h3 { font: 700 18px/1.25 'Plus Jakarta Sans'; color: #fff; display: flex; gap: 10px; align-items: flex-start; }
.dgw-as-res h3::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.dgw-as-res p { font: 400 14.5px/1.6 'Inter'; color: rgba(255,255,255,.85); margin-top: 8px; padding-left: 32px; }
.dgw-as-tech { margin-top: 32px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 22px 24px; }
.dgw-as-tech .dgw-as-mono { color: rgba(255,255,255,.7); }
.dgw-as-tech ul { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.dgw-as-tech li { font: 500 12.5px/1 'Inter'; color: #fff; padding: 8px 11px; border-radius: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); }

/* ---------- FAQ ---------- */
.dgw-as-faq { padding: 100px 0; background: #fff; }
.dgw-as-faq-inner { max-width: 860px; }
.dgw-as-faq-list { display: grid; gap: 10px; }
.dgw-as-faq-list details { border: 1px solid #e4e4e7; border-radius: 14px; padding: 0 20px; background: #fff; transition: border-color .2s; }
.dgw-as-faq-list details[open] { border-color: var(--as-red); box-shadow: 0 14px 30px -24px rgba(237,28,36,.6); }
.dgw-as-faq-list summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative; font: 700 16px/1.4 'Plus Jakarta Sans'; color: var(--as-ink); }
.dgw-as-faq-list summary::-webkit-details-marker { display: none; }
.dgw-as-faq-list summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 500 22px/1 'Inter'; color: var(--as-red); transition: transform .25s; }
.dgw-as-faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.dgw-as-faq-list details p { font: 400 15px/1.7 'Inter'; color: #52525b; padding-bottom: 18px; }

/* ---------- CTA ---------- */
.dgw-as-cta { position: relative; overflow: hidden; padding: 110px 24px; background: #0b0b0d; text-align: center; }
.dgw-as-cta-glow { position: absolute; width: 700px; height: 500px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(237,28,36,.25), transparent 65%); filter: blur(40px); }
.dgw-as-cta-inner { position: relative; max-width: 720px; margin: 0 auto; }
.dgw-as-cta-title { font: 800 clamp(28px, 4vw, 44px)/1.15 'Plus Jakarta Sans'; color: #fff; }
.dgw-as-cta-p { font: 400 17px/1.7 'Inter'; color: rgba(244,244,245,.72); margin-top: 16px; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .dgw-nav-links { display: none; }
  .dgw-as-hero-inner, .dgw-as-2col, .dgw-as-d360-wrap { grid-template-columns: 1fr; gap: 40px; }
  .dgw-as-journey { max-width: 480px; transform: none; }
  .dgw-as-2col--flip > :first-child { order: 2; }
  .dgw-as-stages { grid-template-columns: repeat(5, 1fr); }
  .dgw-as-pipe-cards { grid-template-columns: 1fr 1fr; }
  .dgw-as-books-grid, .dgw-as-res-grid { grid-template-columns: 1fr 1fr; }
  .dgw-as-scatter { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .dgw-as-sheet { position: relative; left: auto; top: auto; width: auto; }
  .dgw-as-scatter-lines { display: none; }
  .dgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .dgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 720px) {
  .dgw-as-inner, .dgw-as-hero-inner { padding-left: 16px; padding-right: 16px; }
  .dgw-as-hero { padding: 120px 0 80px; }
  .dgw-as-client, .dgw-as-before, .dgw-as-pipe, .dgw-as-floor, .dgw-as-onb, .dgw-as-sign, .dgw-as-d360, .dgw-as-book, .dgw-as-books, .dgw-as-results, .dgw-as-faq, .dgw-as-cta { padding-top: 72px; padding-bottom: 72px; }
  .dgw-as-offer, .dgw-as-pipe-cards, .dgw-as-books-grid, .dgw-as-res-grid { grid-template-columns: 1fr; }
  .dgw-as-scatter { grid-template-columns: 1fr; }
  .dgw-as-stages { grid-template-columns: repeat(3, 1fr); }
  .dgw-as-onb-visual { grid-template-columns: 1fr; }
  .dgw-as-onb-arrow { justify-self: center; transform: rotate(90deg); }
  .dgw-as-onb-visual.is-in .dgw-as-onb-arrow { animation: none; }
  .dgw-as-signflow { grid-template-columns: 1fr; gap: 26px; }
  .dgw-as-sline { display: none; }
  .dgw-as-sstep { opacity: 1; }
  .dgw-as-d360-kpis { grid-template-columns: 1fr 1fr; }
  .dgw-as-gst-booking { grid-template-columns: 1fr; }
  .dgw-as-sync { grid-template-columns: 1fr; }
  .dgw-as-lanes { padding: 6px 0; }
  .dgw-footer { padding: 72px 16px 28px; }
  .dgw-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .dgw-footer-bottom { flex-direction: column; text-align: center; gap: 18px; }
}

/* ---------- FLOOR PLAN v2 (modelled on the CRM web tab) ---------- */
.dgw-as-floor .dgw-as-inner { max-width: 1400px; }
.dgw-as-plan { max-width: 1340px; margin: 0 auto; background: #f4f4f5; border-radius: 22px; padding: 18px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); font-family: 'Geist', 'Inter', sans-serif; }
.dgw-as-plan-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 4px 14px; }
.dgw-as-plan-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dgw-as-plan-title b { font: 700 19px/1 'Geist', 'Inter'; color: var(--as-ink); }
.dgw-as-plan-title span { font: 500 12.5px/1 'JetBrains Mono', monospace; color: #71717a; }
.dgw-as-legend i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid transparent; }
.st-av { background: #dcfce7; border-color: #22c55e !important; } .st-book { background: #fee2e2; border-color: #ef4444 !important; } .st-hold { background: #fef3c7; border-color: #f59e0b !important; } .st-cash { background: #166534; } .st-common { background: #f4f4f5; border-color: #d4d4d8 !important; }
.dgw-as-plan-body { display: grid; grid-template-columns: 1fr 270px; gap: 16px; align-items: start; }
.dgw-as-plan-stage { position: relative; overflow: hidden; border-radius: 12px; background: #fff; border: 4px solid #1f2937; box-shadow: inset 0 0 0 1px #e4e4e7; touch-action: pan-y; }
.dgw-as-plan-stage.is-zoomed { cursor: grab; touch-action: none; }
.dgw-as-plan-canvas { position: absolute; left: 0; top: 0; width: 1060px; height: 490px; transform-origin: 0 0; background-color: #fff; background-image: radial-gradient(#e4e4e7 1px, transparent 1px); background-size: 14px 14px; }
.dgw-as-common { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; background: #f4f4f5; border: 1px solid #d4d4d8; border-radius: 3px; font: 600 9px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #a1a1aa; }
.dgw-as-common.is-v { writing-mode: vertical-rl; transform: rotate(180deg); padding: 2px; }
.dgw-as-pass { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 500 7.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #c4c4c8; }
.dgw-as-sp { position: absolute; border: 1.5px solid; border-top-width: 4px; border-radius: 3px; cursor: pointer; padding: 0; text-align: center; overflow: hidden; transition: box-shadow .2s, filter .2s, background .35s, border-color .35s; font-family: 'Geist', 'Inter', sans-serif; }
.dgw-as-sp[data-st="av"] { background: #dcfce7; border-color: #4ade80; color: #166534; }
.dgw-as-sp[data-st="book"] { background: #fee2e2; border-color: #f87171; color: #7f1d1d; }
.dgw-as-sp[data-st="hold"] { background: #fef3c7; border-color: #f59e0b; color: #78350f; }
.dgw-as-sp[data-st="cash"] { background: #166534; border-color: #14532d; color: #fff; }
.dgw-as-sp:hover { filter: brightness(.97); box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); z-index: 3; }
.dgw-as-sp.is-sel { z-index: 4; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--as-ink), 0 10px 20px -6px rgba(0,0,0,.4); }
.dgw-as-sp.is-flash { animation: dgwAsFlash .6s ease; }
@keyframes dgwAsFlash { 40% { filter: brightness(1.15); box-shadow: 0 0 0 6px rgba(237,28,36,.35); } }
.dgw-as-sp-no { position: absolute; left: 4px; top: 2px; font: 800 12px/1 'Geist', 'Inter'; }
.dgw-as-sp-seat { position: absolute; right: 3px; top: 3px; font: 700 7.5px/1 'Geist', 'Inter'; padding: 2px 3px; border-radius: 3px; background: rgba(255,255,255,.8); color: #3f3f46; }
.dgw-as-sp[data-st="cash"] .dgw-as-sp-seat { background: rgba(255,255,255,.2); color: #fff; }
.dgw-as-sp-desks { position: absolute; left: 7px; right: 7px; top: 18px; bottom: 22px; opacity: .35; background-image: conic-gradient(from 270deg at 10px 5px, currentColor 25%, transparent 0); background-size: 17px 13px; background-position: center; }
.dgw-as-sp--c .dgw-as-sp-desks { background-image: conic-gradient(from 270deg at 9px 5px, currentColor 25%, transparent 0); background-size: 15px 12px; }
.dgw-as-sp--m .dgw-as-sp-desks { left: 30%; right: 30%; top: 22%; bottom: 30%; border-radius: 40%; background: currentColor; opacity: .18; }
.dgw-as-sp-name { position: absolute; left: 3px; right: 3px; bottom: 9px; font: 700 8px/1.1 'Geist', 'Inter'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: inherit; }
.dgw-as-sp-sub { position: absolute; left: 3px; right: 3px; bottom: 2px; font: 500 6.5px/1 'Geist', 'Inter'; opacity: .75; white-space: nowrap; overflow: hidden; }
.dgw-as-sp.is-big .dgw-as-sp-name { font-size: 9px; bottom: 11px; }
.dgw-as-plan-zoom { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; z-index: 5; }
.dgw-as-plan-zoom button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e4e4e7; background: #fff; color: var(--as-ink); font: 600 20px/1 'Geist', 'Inter'; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px -4px rgba(0,0,0,.2); }
.dgw-as-plan-zoom button:hover { border-color: var(--as-ink); }
.dgw-as-plan-side { display: grid; gap: 14px; }
.dgw-as-side-card { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 1px 0 #e4e4e7; display: flex; flex-direction: column; gap: 10px; }
.dgw-as-side-card h4 { font: 700 18px/1.1 'Geist', 'Inter'; color: var(--as-ink); }
.dgw-as-side-empty { font: 400 14px/1.4 'Geist', 'Inter'; color: #71717a; }
.dgw-as-side-info { display: flex; flex-direction: column; gap: 10px; }
.dgw-as-side-info[hidden] { display: none; }
.dgw-as-side-info b { font: 700 17px/1.2 'Geist', 'Inter'; color: var(--as-ink); }
.dgw-as-avail { display: grid; gap: 8px; max-height: 250px; overflow-y: auto; padding-right: 4px; }
.dgw-as-avail-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 12px; border: 1px solid #e4e4e7; border-radius: 12px; background: #fafafa; cursor: pointer; transition: border-color .2s, background .2s; }
.dgw-as-avail-row:hover { border-color: #22c55e; background: #f0fdf4; }
.dgw-as-avail-row i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.dgw-as-avail-row b { font: 700 13.5px/1.2 'Geist', 'Inter'; color: var(--as-ink); }
.dgw-as-avail-row span { font: 500 11px/1.2 'JetBrains Mono', monospace; color: #71717a; }
@media (max-width: 1024px) { .dgw-as-plan-body { grid-template-columns: 1fr; } .dgw-as-plan-side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .dgw-as-plan { padding: 10px; } .dgw-as-plan-side { grid-template-columns: 1fr; } .dgw-as-plan-zoom { right: 8px; top: 8px; gap: 6px; } .dgw-as-plan-zoom button { width: 30px; height: 30px; font-size: 16px; } .dgw-as-plan-stage { min-height: 300px; } .dgw-as-plan-title span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .dgw-as-onb-deal li { opacity: 1 !important; }
  .dgw-as-sig path { stroke-dashoffset: 0; }
}

/* ============================================================
   DIGIWAH — CASE STUDY: KUMAR POWERS (Zoho CRM Enterprise)
   Page-scoped prefix: dgw-kp-  (reuses dgw-nav-* / dgw-footer-*)
   ============================================================ */
:root {
  --brand: #010ED0; --accent: #FF7A45; --ink: #0a0f2c; --line: rgba(255,255,255,0.08);
  /* Kumar Powers brand (from logo) */
  --kp: #1a64a8; --kp-d: #0f4a82; --kp-dd: #0a3460; --kp-red: #c8505a; --kp-sky: #4fa3e8; --kp-tint: #e6f0fa;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: rgba(99,102,241,0.12); color: #4338ca; padding: 1px 6px; border-radius: 5px; }

/* ============================================================
   NAVBAR (inherited)
   ============================================================ */
.dgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.dgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dgw-nav-logo { display: flex; align-items: center; }
.dgw-nav-logo-img { height: 38px; width: auto; display: block; }
.dgw-nav-links { display: flex; gap: 30px; }
.dgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.dgw-nav-links a:hover { color: #fff; }
.dgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.dgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }
/* ============================================================
   FOOTER (inherited)
   ============================================================ */
.dgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.dgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.dgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.dgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.dgw-footer-brand { max-width: 360px; }
.dgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.dgw-footer-logo { height: 40px; width: auto; display: block; }
.dgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.dgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.dgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.dgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.dgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.dgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.dgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.dgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.dgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.dgw-footer-col { min-width: 0; }
.dgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.dgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.dgw-footer-list a, .dgw-footer-list li, .dgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-list a:hover { color: #ffb284; }
.dgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.dgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.dgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.dgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.dgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.dgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.dgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.dgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.dgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.dgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-legal a:hover { color: #fff; }
.dgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.dgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }

/* ============================================================

/* ============================================================
   KUMAR POWERS — page-scoped (dgw-kp-)
   ============================================================ */
.dgw-kp-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.dgw-kp-kicker { display: inline-block; font: 700 12px/1 'Inter'; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kp); margin-bottom: 16px; }
.dgw-kp-kicker--red { color: var(--kp-red); }
.dgw-kp-kicker--light { color: var(--kp-sky); }
.dgw-kp-kicker--white { color: rgba(255,255,255,0.8); }
.dgw-kp-h2 { font: 800 clamp(27px, 3.6vw, 42px)/1.14 'Plus Jakarta Sans'; color: var(--ink); }
.dgw-kp-h2--light { color: #fff; }
.dgw-kp-p { font: 400 17px/1.7 'Inter'; color: #475569; margin-top: 16px; max-width: 660px; }
.dgw-kp-p strong { color: var(--ink); font-weight: 700; }
.dgw-kp-p--light { color: rgba(214,226,255,0.78); }
.dgw-kp-p--light strong { color: #fff; }
.dgw-kp-p--center { margin-left: auto; margin-right: auto; }
.dgw-kp-head { max-width: 760px; margin-bottom: 48px; }
.dgw-kp-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.dgw-kp-mono { font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: var(--kp); }
.dgw-kp-mask { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; filter: blur(0.3px); }
.dgw-kp-red { color: #ef4444 !important; }
.dgw-kp-ticks { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.dgw-kp-ticks li { position: relative; padding-left: 30px; font: 400 15.5px/1.6 'Inter'; color: #334155; }
.dgw-kp-ticks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--kp-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a64a8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.dgw-kp-ticks strong { color: var(--ink); }

.dgw-kp-btn { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1 'Inter'; padding: 15px 26px; border-radius: 10px; transition: transform .2s, box-shadow .2s, background .2s; }
.dgw-kp-btn:hover { transform: translateY(-2px); }
.dgw-kp-btn--white { background: #fff; color: var(--kp-d); box-shadow: 0 12px 28px -12px rgba(0,0,0,.45); }
.dgw-kp-btn--glass { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.dgw-kp-btn--glass:hover { background: rgba(255,255,255,.18); }
.dgw-kp-btn--orange { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(255,122,69,.4); }
.dgw-kp-btn--ghost { background: rgba(255,255,255,.05); color: #fff; border: 1px solid rgba(124,143,255,.3); }
.dgw-kp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.dgw-kp-actions--center { justify-content: center; }

/* ---------- HERO ---------- */
.dgw-kp-hero { position: relative; overflow: hidden; padding: 150px 0 110px; color: #fff;
  background: radial-gradient(120% 90% at 85% 10%, #2f86d6 0%, transparent 55%), linear-gradient(160deg, var(--kp) 0%, var(--kp-d) 55%, var(--kp-dd) 100%); }
.dgw-kp-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); }
.dgw-kp-hero-wave { position: absolute; left: 0; right: 0; bottom: 30px; width: 100%; height: 160px; opacity: .55; }
.dgw-kp-wave { fill: none; stroke-width: 2; stroke-dasharray: 14 10; animation: dgwKpWave 9s linear infinite; }
.dgw-kp-wave--1 { stroke: rgba(255,255,255,.55); }
.dgw-kp-wave--2 { stroke: rgba(232,98,108,.75); animation-duration: 12s; animation-direction: reverse; }
@keyframes dgwKpWave { to { stroke-dashoffset: -480; } }
.dgw-kp-hero-glow { position: absolute; width: 520px; height: 520px; right: -120px; top: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(232,98,108,.35), transparent 65%); filter: blur(40px); }
.dgw-kp-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.25fr .9fr; gap: 56px; align-items: center; }
.dgw-kp-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.dgw-kp-tag { font: 600 12px/1 'Inter'; padding: 7px 12px; border-radius: 100px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.dgw-kp-tag--case { background: var(--kp-red); border-color: transparent; }
.dgw-kp-logocard { display: inline-flex; flex-direction: column; gap: 6px; background: #fff; padding: 14px 20px 12px; border-radius: 16px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); margin-bottom: 26px; }
.dgw-kp-logocard img { height: 50px; width: auto; display: block; }
.dgw-kp-logocard-sub { font: 700 10px/1 'Inter'; letter-spacing: .12em; text-transform: uppercase; color: var(--kp-d); }
.dgw-kp-h1 { font: 800 clamp(30px, 3.7vw, 46px)/1.12 'Plus Jakarta Sans'; letter-spacing: -.025em; }
.dgw-kp-hl { background: linear-gradient(90deg, #fff 0%, #ffd0d4 60%, #ff9aa3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dgw-kp-lead { font: 400 18px/1.65 'Inter'; color: rgba(255,255,255,.86); margin-top: 22px; max-width: 600px; }
.dgw-kp-lead strong { color: #fff; }
.dgw-kp-hstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.dgw-kp-hstat { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 14px 14px 12px; backdrop-filter: blur(6px); }
.dgw-kp-hstat b { display: block; font: 800 28px/1 'Plus Jakarta Sans'; }
.dgw-kp-hstat span { display: block; font: 500 12px/1.35 'Inter'; color: rgba(255,255,255,.75); margin-top: 6px; }

.dgw-kp-digest { background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.3); overflow: hidden; transform: perspective(1200px) rotateY(-8deg) rotateX(3deg); animation: dgwKpFloat 7s ease-in-out infinite; }
@keyframes dgwKpFloat { 50% { transform: perspective(1200px) rotateY(-6deg) rotateX(2deg) translateY(-8px); } }
.dgw-kp-digest-bar { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.dgw-kp-digest-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; margin-right: 5px; }
.dgw-kp-digest-time { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 'JetBrains Mono'; color: var(--kp); background: var(--kp-tint); padding: 5px 9px; border-radius: 100px; }
.dgw-kp-digest-head { padding: 18px 20px 8px; }
.dgw-kp-digest-from { font: 600 11px/1 'Inter'; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.dgw-kp-digest-subj { font: 700 17px/1.3 'Plus Jakarta Sans'; margin-top: 7px; }
.dgw-kp-digest-list { list-style: none; padding: 8px 14px 6px; }
.dgw-kp-digest-list li { display: flex; align-items: center; gap: 11px; padding: 11px 8px; border-bottom: 1px dashed #e2e8f0; font: 600 14px/1.2 'Inter'; opacity: 0; transform: translateX(14px); animation: dgwKpIn .5s ease forwards; animation-delay: calc(.6s + var(--d) * .18s); }
.dgw-kp-digest-list li:last-child { border-bottom: 0; }
.dgw-kp-digest-list em { margin-left: auto; font-style: normal; font-size: 13px; color: #94a3b8; }
@keyframes dgwKpIn { to { opacity: 1; transform: none; } }
.dgw-kp-dg-ico { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font: 800 12px/1 'Inter'; color: #fff; flex-shrink: 0; }
.dgw-kp-dg-ico--red { background: #ef4444; } .dgw-kp-dg-ico--green { background: #10b981; } .dgw-kp-dg-ico--blue { background: var(--kp); }
.dgw-kp-dg-ico--amber { background: #f59e0b; } .dgw-kp-dg-ico--violet { background: #7c5cff; } .dgw-kp-dg-ico--teal { background: #0ea5a4; }
.dgw-kp-digest-foot { padding: 10px 20px 14px; font: 500 11px/1 'Inter'; color: #94a3b8; }

/* ---------- CLIENT ---------- */
.dgw-kp-client { padding: 110px 0; background: #fff; }
.dgw-kp-client-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dgw-kp-facts { margin-top: 28px; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; }
.dgw-kp-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #eef2f7; font: 500 14px/1.4 'Inter'; }
.dgw-kp-facts div:last-child { border-bottom: 0; }
.dgw-kp-facts span { color: #64748b; } .dgw-kp-facts b { color: var(--ink); text-align: right; }
.dgw-kp-teams { position: relative; background: linear-gradient(180deg, #f6f9fd, #eef4fb); border: 1px solid #dfe8f3; border-radius: 22px; padding: 26px; display: grid; gap: 12px; }
.dgw-kp-teams::before { content: ''; position: absolute; left: 44px; top: 86px; bottom: 70px; width: 2px; background: linear-gradient(var(--kp), #7c5cff, #0ea5a4); opacity: .35; }
.dgw-kp-teams-order { background: var(--kp); color: #fff; border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.dgw-kp-teams-order .dgw-kp-mono { color: rgba(255,255,255,.7); }
.dgw-kp-teams-order b { font: 700 15px/1.2 'Plus Jakarta Sans'; }
.dgw-kp-team { position: relative; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid var(--c); border-radius: 12px; padding: 12px 14px; margin-left: 30px; box-shadow: 0 8px 20px -16px rgba(15,74,130,.5); }
.dgw-kp-team--sales { --c: var(--kp); } .dgw-kp-team--inst { --c: #7c5cff; } .dgw-kp-team--serv { --c: #0ea5a4; }
.dgw-kp-team-h { display: flex; align-items: center; gap: 8px; font: 700 14px/1 'Plus Jakarta Sans'; margin-bottom: 9px; }
.dgw-kp-team-h i { font: 700 10px/1 'JetBrains Mono'; font-style: normal; color: #fff; background: var(--c); border-radius: 5px; padding: 4px 5px; }
.dgw-kp-team-steps { display: flex; flex-wrap: wrap; gap: 5px; }
.dgw-kp-team-steps span { font: 500 11.5px/1 'Inter'; padding: 6px 8px; border-radius: 6px; background: #f1f5f9; color: #475569; }
.dgw-kp-team-steps span.is-key { background: var(--c); color: #fff; font-weight: 600; }
.dgw-kp-teams-eye { display: flex; align-items: center; gap: 8px; justify-content: center; font: 600 13px/1 'Inter'; color: var(--kp-d); padding-top: 6px; }

/* ---------- PROBLEM ---------- */
.dgw-kp-problem { padding: 110px 0; background: linear-gradient(180deg, #fbf7f5 0%, #fdf2f2 100%); }
.dgw-kp-register { background: #fff; border: 1px solid #f1d6d8; border-radius: 18px; box-shadow: 0 30px 60px -36px rgba(200,80,90,.45); overflow: hidden; }
.dgw-kp-register-top { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; background: #fff7f7; border-bottom: 1px solid #f6e1e2; }
.dgw-kp-register-top .dgw-kp-mono { color: #9f1239; }
.dgw-kp-register-scan { font: 600 11.5px/1 'Inter'; color: var(--kp-red); display: inline-flex; align-items: center; gap: 7px; }
.dgw-kp-register-scan::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kp-red); animation: dgwKpBlink 1.2s infinite; }
@keyframes dgwKpBlink { 50% { opacity: .25; } }
.dgw-kp-register-table { position: relative; padding: 6px 0; overflow: hidden; }
.dgw-kp-register-table::after { content: ''; position: absolute; left: 0; right: 0; height: 46px; top: -46px; background: linear-gradient(180deg, transparent, rgba(200,80,90,.12), transparent); animation: dgwKpScan 4.5s linear infinite; pointer-events: none; }
@keyframes dgwKpScan { to { top: 100%; } }
.dgw-kp-rrow { display: grid; grid-template-columns: 1fr 1fr .8fr 1.8fr .6fr; gap: 12px; padding: 11px 18px; font: 500 13px/1.35 'Inter'; color: #334155; border-bottom: 1px solid #f8eded; }
.dgw-kp-rrow:has(.is-flag) { padding-bottom: 32px; }
.dgw-kp-rrow--head { font: 700 11px/1 'Inter'; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.dgw-kp-rrow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgw-kp-rrow .is-empty { color: #cbd5e1; font-style: italic; }
.dgw-kp-rrow .is-blob { color: #94a3b8; }
.dgw-kp-rrow .is-flag { position: relative; overflow: visible; color: #be123c; font-weight: 600; text-decoration: underline wavy rgba(200,80,90,.6); text-underline-offset: 3px; }
.dgw-kp-rrow .is-flag::after { content: attr(data-flag); position: absolute; left: 0; top: calc(100% + 4px); z-index: 2; white-space: nowrap; font: 600 10.5px/1 'Inter'; color: #fff; background: #be123c; padding: 4px 7px; border-radius: 5px; opacity: 0; transform: translateY(-3px); transition: .25s; }
.dgw-kp-register.is-in .is-flag::after { opacity: 1; transform: none; transition-delay: .9s; }
.dgw-kp-register-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #f6e1e2; background: #fffafa; }
.dgw-kp-register-stats div { padding: 18px; border-right: 1px solid #f6e1e2; }
.dgw-kp-register-stats div:last-child { border-right: 0; }
.dgw-kp-register-stats b { display: block; font: 800 26px/1 'Plus Jakarta Sans'; color: #be123c; }
.dgw-kp-register-stats span { display: block; font: 500 12.5px/1.35 'Inter'; color: #64748b; margin-top: 6px; }
.dgw-kp-pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.dgw-kp-pain { background: #fff; border: 1px solid #f1e3e4; border-radius: 16px; padding: 22px; transition: transform .25s, box-shadow .25s; }
.dgw-kp-pain:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -24px rgba(200,80,90,.5); }
.dgw-kp-pain svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: #fde8ea; color: var(--kp-red); }
.dgw-kp-pain h3 { font: 700 16px/1.3 'Plus Jakarta Sans'; margin: 14px 0 7px; }
.dgw-kp-pain p { font: 400 14px/1.55 'Inter'; color: #64748b; }

/* ---------- CLEAN-UP ---------- */
.dgw-kp-clean { padding: 110px 0; background: #fff; }
.dgw-kp-clean-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.dgw-kp-merge { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; background: radial-gradient(circle at 70% 50%, var(--kp-tint), #f8fafc 70%); border: 1px solid #e2e8f0; border-radius: 22px; padding: 28px 22px; }
.dgw-kp-merge-col { display: grid; gap: 8px; }
.dgw-kp-merge-rec { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 12px; font: 600 13px/1.2 'Inter'; color: #334155; box-shadow: 0 6px 14px -12px rgba(0,0,0,.4); }
.dgw-kp-merge-rec small { display: block; font: 500 11px/1.2 'Inter'; color: #94a3b8; margin-top: 3px; }
.dgw-kp-merge.is-in .dgw-kp-merge-rec { animation: dgwKpSuck 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes dgwKpSuck { 0%, 18% { transform: none; opacity: 1; } 45%, 70% { transform: translateX(46px) scale(.9); opacity: .25; } 100% { transform: none; opacity: 1; } }
.dgw-kp-merge-key { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--kp); }
.dgw-kp-merge-key code { font: 600 12px/1 'JetBrains Mono'; background: var(--kp-tint); color: var(--kp-d); padding: 6px 8px; border-radius: 6px; }
.dgw-kp-merge-acc { background: #fff; border: 2px solid var(--kp); border-radius: 16px; padding: 18px; box-shadow: 0 20px 40px -22px rgba(26,100,168,.6); }
.dgw-kp-merge.is-in .dgw-kp-merge-acc { animation: dgwKpPop 4.8s ease-in-out infinite; }
@keyframes dgwKpPop { 0%, 40% { transform: scale(1); } 55% { transform: scale(1.05); box-shadow: 0 26px 50px -18px rgba(26,100,168,.8); } 70%, 100% { transform: scale(1); } }
.dgw-kp-merge-acc-h { font: 800 17px/1.2 'Plus Jakarta Sans'; }
.dgw-kp-merge-acc-h span { display: block; font: 700 10px/1 'Inter'; letter-spacing: .12em; text-transform: uppercase; color: var(--kp); margin-bottom: 6px; }
.dgw-kp-merge-acc-people { display: flex; margin: 14px 0 10px; }
.dgw-kp-merge-acc-people i { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; display: inline-flex; align-items: center; justify-content: center; font: 700 10.5px/1 'Inter'; font-style: normal; color: #fff; background: var(--kp); }
.dgw-kp-merge-acc-people i:first-child { margin-left: 0; }
.dgw-kp-merge-acc-people i:nth-child(2) { background: #2f86d6; } .dgw-kp-merge-acc-people i:nth-child(3) { background: var(--kp-red); } .dgw-kp-merge-acc-people i:nth-child(4) { background: #7c5cff; } .dgw-kp-merge-acc-people i:nth-child(5) { background: #0ea5a4; }
.dgw-kp-merge-acc-f { font: 600 12.5px/1 'Inter'; color: #64748b; }

/* ---------- SALES (dark) ---------- */
.dgw-kp-sales { position: relative; overflow: hidden; padding: 110px 0; background: linear-gradient(180deg, #071a33 0%, #0a2547 100%); }
.dgw-kp-sales-glow { position: absolute; width: 800px; height: 500px; left: 50%; top: -200px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(47,134,214,.35), transparent 65%); filter: blur(30px); }
.dgw-kp-pipes { display: grid; gap: 12px; max-width: 900px; margin: 0 auto 40px; }
.dgw-kp-pipe { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 16px; }
.dgw-kp-pipe-n { font: 700 14px/1 'Plus Jakarta Sans'; color: #fff; display: inline-flex; align-items: center; gap: 9px; }
.dgw-kp-pipe-n::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.dgw-kp-pipe--sales { --c: #4fa3e8; } .dgw-kp-pipe--inst { --c: #a08bff; } .dgw-kp-pipe--comm { --c: #2dd4bf; }
.dgw-kp-pipe-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dgw-kp-pipe-track i { height: 12px; border-radius: 4px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.dgw-kp-pipe-track i::after { content: ''; position: absolute; inset: 0; background: var(--c); transform: scaleX(0); transform-origin: left; }
.dgw-kp-pipes.is-in .dgw-kp-pipe-track i::after { animation: dgwKpFill 6s ease-in-out infinite; animation-delay: calc(var(--pd, 0s) + var(--n) * .35s); }
.dgw-kp-pipe-track i:nth-child(1) { --n: 0; } .dgw-kp-pipe-track i:nth-child(2) { --n: 1; } .dgw-kp-pipe-track i:nth-child(3) { --n: 2; } .dgw-kp-pipe-track i:nth-child(4) { --n: 3; } .dgw-kp-pipe-track i:nth-child(5) { --n: 4; }
.dgw-kp-pipe--inst { --pd: 1.2s; } .dgw-kp-pipe--comm { --pd: 2.4s; }
@keyframes dgwKpFill { 0% { transform: scaleX(0); } 25%, 80% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.dgw-kp-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dgw-kp-rule { background: rgba(255,255,255,.04); border: 1px solid rgba(124,170,255,.18); border-radius: 20px; padding: 24px; }
.dgw-kp-rule-h { display: flex; gap: 14px; margin-bottom: 20px; }
.dgw-kp-rule-ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: rgba(79,163,232,.15); display: inline-flex; align-items: center; justify-content: center; color: var(--kp-sky); }
.dgw-kp-rule h3 { font: 700 18px/1.2 'Plus Jakarta Sans'; color: #fff; }
.dgw-kp-rule p { font: 400 14px/1.55 'Inter'; color: rgba(214,226,255,.72); margin-top: 6px; }
/* gate */
.dgw-kp-gate { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; align-items: center; position: relative; }
.dgw-kp-gate-deal { background: #fff; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.dgw-kp-gate-deal b { font: 700 14px/1.25 'Plus Jakarta Sans'; color: var(--ink); }
.dgw-kp-gate-stage { align-self: flex-start; font: 600 11px/1 'Inter'; padding: 5px 8px; border-radius: 6px; background: #e0edfa; color: var(--kp-d); transition: .3s; }
.dgw-kp-gate.s-ok .dgw-kp-gate-stage { background: #d1fae5; color: #047857; }
.dgw-kp-gate-arrow { position: absolute; left: 34%; top: -14px; font: 600 11px/1 'JetBrains Mono'; color: var(--kp-sky); opacity: 0; transition: .3s; }
.dgw-kp-gate.s-try .dgw-kp-gate-arrow, .dgw-kp-gate.s-no .dgw-kp-gate-arrow { opacity: 1; }
.dgw-kp-gate-dialog { background: #0f2a4d; border: 1px solid rgba(124,170,255,.3); border-radius: 12px; padding: 12px; display: grid; gap: 8px; position: relative; min-height: 158px; }
.dgw-kp-gate-dh { font: 700 13px/1 'Plus Jakarta Sans'; color: #fff; display: flex; justify-content: space-between; }
.dgw-kp-gate-dh small { font: 500 10px/1 'Inter'; color: rgba(214,226,255,.55); }
.dgw-kp-gate-field { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px dashed rgba(214,226,255,.25); font: 500 11.5px/1.2 'Inter'; color: rgba(214,226,255,.75); transition: .3s; }
.dgw-kp-gate-field em { font: 600 11px/1 'JetBrains Mono'; font-style: normal; color: #fff; opacity: 0; transition: .3s; }
.dgw-kp-gate.s-no .dgw-kp-gate-field { border-color: #f87171; }
.dgw-kp-gate.s-fill .dgw-kp-gate-field--po, .dgw-kp-gate.s-ok .dgw-kp-gate-field { border-style: solid; border-color: #34d399; }
.dgw-kp-gate.s-fill .dgw-kp-gate-field--po em, .dgw-kp-gate.s-ok .dgw-kp-gate-field em { opacity: 1; }
.dgw-kp-gate-msg { font: 600 11.5px/1.2 'Inter'; padding: 7px 9px; border-radius: 7px; display: none; }
.dgw-kp-gate-msg--no { background: rgba(239,68,68,.16); color: #fca5a5; }
.dgw-kp-gate-msg--ok { background: rgba(16,185,129,.18); color: #6ee7b7; }
.dgw-kp-gate.s-no .dgw-kp-gate-msg--no, .dgw-kp-gate.s-ok .dgw-kp-gate-msg--ok { display: block; }
/* handover */
.dgw-kp-hand { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; }
.dgw-kp-hand-ring { position: relative; width: 130px; height: 130px; }
.dgw-kp-hand-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dgw-kp-hand-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 9; }
.dgw-kp-hand-fg { fill: none; stroke: var(--kp-sky); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke .3s; }
.dgw-kp-hand.s-warn .dgw-kp-hand-fg { stroke: #f59e0b; } .dgw-kp-hand.s-move .dgw-kp-hand-fg { stroke: #ef4444; }
.dgw-kp-hand-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.dgw-kp-hand-t b { font: 800 26px/1 'Plus Jakarta Sans'; } .dgw-kp-hand-t span { font: 500 11px/1 'Inter'; color: rgba(214,226,255,.6); margin-top: 4px; }
.dgw-kp-hand-people { display: grid; gap: 10px; }
.dgw-kp-hand-p { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font: 600 13.5px/1 'Inter'; color: rgba(214,226,255,.7); transition: .35s; }
.dgw-kp-hand-p i { width: 28px; height: 28px; border-radius: 50%; background: #1e3a5f; display: inline-flex; align-items: center; justify-content: center; font: 700 10.5px/1 'Inter'; font-style: normal; color: #fff; }
.dgw-kp-hand-p em { margin-left: auto; font: 600 10.5px/1 'Inter'; font-style: normal; padding: 5px 7px; border-radius: 6px; background: rgba(255,255,255,.07); }
.dgw-kp-hand-p.is-own { background: rgba(79,163,232,.14); border-color: rgba(79,163,232,.5); color: #fff; }
.dgw-kp-hand-p.is-own i { background: var(--kp); }
.dgw-kp-hand.s-warn [data-hand-flag] { background: rgba(245,158,11,.2); color: #fcd34d; }

/* ---------- DEAL 360 ---------- */
.dgw-kp-d360 { padding: 110px 0; background: linear-gradient(180deg, #f5f8fc, #fff); }
.dgw-kp-d360-screen { background: #fff; border: 1px solid #dfe8f3; border-radius: 20px; box-shadow: 0 40px 80px -50px rgba(15,74,130,.55); overflow: hidden; }
.dgw-kp-d360-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; background: linear-gradient(90deg, var(--kp), #2f86d6); color: #fff; }
.dgw-kp-d360-top .dgw-kp-mono { color: rgba(255,255,255,.7); display: block; margin-bottom: 6px; }
.dgw-kp-d360-top b { font: 700 16px/1.2 'Plus Jakarta Sans'; }
.dgw-kp-d360-stage { font: 600 12px/1 'Inter'; background: rgba(255,255,255,.18); padding: 7px 11px; border-radius: 100px; white-space: nowrap; }
.dgw-kp-d360-body { display: grid; grid-template-columns: .8fr 1.4fr 1fr; }
.dgw-kp-d360-col { padding: 20px; border-right: 1px solid #eef2f7; display: grid; gap: 10px; align-content: start; }
.dgw-kp-d360-col:last-child { border-right: 0; }
.dgw-kp-d360-health { position: relative; width: 120px; height: 120px; margin: 0 auto 4px; }
.dgw-kp-d360-health svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dgw-kp-hl-bg { fill: none; stroke: #eef2f7; stroke-width: 10; }
.dgw-kp-hl-fg { fill: none; stroke: #10b981; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .3s; }
.dgw-kp-d360-screen.is-in .dgw-kp-hl-fg { stroke-dashoffset: 56.5; }
.dgw-kp-d360-health div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dgw-kp-d360-health b { font: 800 30px/1 'Plus Jakarta Sans'; } .dgw-kp-d360-health span { font: 500 11px/1 'Inter'; color: #64748b; margin-top: 3px; }
.dgw-kp-d360-alert { font: 600 12px/1.2 'Inter'; padding: 9px 11px; border-radius: 9px; background: #e0edfa; color: var(--kp-d); }
.dgw-kp-d360-alert--warn { background: #fef3c7; color: #92400e; }
.dgw-kp-d360-compose { display: flex; justify-content: space-between; align-items: center; border: 1.5px solid var(--kp); border-radius: 10px; padding: 10px 12px; font: 500 13px/1 'Inter'; color: #94a3b8; }
.dgw-kp-d360-compose i { font-style: normal; font: 600 12px/1 'Inter'; color: #fff; background: var(--kp); padding: 6px 10px; border-radius: 6px; }
.dgw-kp-d360-tl { list-style: none; display: grid; gap: 2px; }
.dgw-kp-d360-tl li { display: flex; align-items: center; gap: 9px; font: 400 13px/1.35 'Inter'; color: #475569; padding: 7px 0; border-bottom: 1px dashed #eef2f7; opacity: 0; transform: translateY(6px); transition: .45s; }
.dgw-kp-d360-screen.is-in .dgw-kp-d360-tl li { opacity: 1; transform: none; }
.dgw-kp-d360-tl li:nth-child(2) { transition-delay: .15s; } .dgw-kp-d360-tl li:nth-child(3) { transition-delay: .3s; } .dgw-kp-d360-tl li:nth-child(4) { transition-delay: .45s; } .dgw-kp-d360-tl li:nth-child(5) { transition-delay: .6s; }
.dgw-kp-d360-tl b { color: var(--ink); font-weight: 600; min-width: 42px; }
.dgw-kp-d360-tl i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.c-call { background: #10b981; } .c-mail { background: var(--kp); } .c-stage { background: #7c5cff; } .c-task { background: #f59e0b; } .c-note { background: #94a3b8; }
.dgw-kp-d360-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dgw-kp-d360-fields div { border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; }
.dgw-kp-d360-fields span { display: block; font: 500 10.5px/1 'Inter'; color: #94a3b8; }
.dgw-kp-d360-fields b { display: block; font: 600 13px/1.2 'Inter'; margin-top: 5px; color: var(--ink); }
.dgw-kp-d360-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dgw-kp-d360-docs span { font: 600 11px/1 'JetBrains Mono'; padding: 7px 9px; border-radius: 7px; background: var(--kp-tint); color: var(--kp-d); }
.dgw-kp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.dgw-kp-chips li { font: 600 13px/1 'Inter'; padding: 9px 13px; border-radius: 100px; background: #fff; border: 1px solid #dfe8f3; color: var(--kp-d); }

/* ---------- QUOTE ENGINE ---------- */
.dgw-kp-quote { padding: 110px 0; background: #fff; }
.dgw-kp-quote-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.dgw-kp-qe { background: linear-gradient(170deg, #f3f8fe, #e9f1fb); border: 1px solid #d6e4f4; border-radius: 22px; padding: 26px; box-shadow: 0 30px 60px -40px rgba(15,74,130,.6); }
.dgw-kp-qe-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dgw-kp-qe-try { font: 600 11.5px/1 'Inter'; color: var(--kp-red); background: #fde8ea; padding: 6px 9px; border-radius: 100px; }
.dgw-kp-qe-label { font: 600 12px/1 'Inter'; color: #64748b; }
.dgw-kp-qe-kva { font: 800 44px/1 'Plus Jakarta Sans'; color: var(--kp-d); margin: 6px 0 12px; }
.dgw-kp-qe-kva b { font-weight: 800; }
.dgw-kp-qe-range { width: 100%; accent-color: var(--kp); cursor: pointer; }
.dgw-kp-qe-scale { display: flex; justify-content: space-between; font: 500 11px/1 'JetBrains Mono'; color: #94a3b8; margin-top: 6px; }
.dgw-kp-qe-out { margin-top: 18px; background: #fff; border-radius: 12px; border: 1px solid #dfe8f3; }
.dgw-kp-qe-row { display: flex; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid #eef2f7; font: 500 13.5px/1 'Inter'; color: #64748b; }
.dgw-kp-qe-row:last-child { border-bottom: 0; }
.dgw-kp-qe-row b { color: var(--ink); transition: color .3s; }
.dgw-kp-qe.is-koel [data-qe-tpl] { color: var(--kp-red); }
.dgw-kp-qe-pdf { position: relative; margin-top: 16px; background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid #e2e8f0; box-shadow: 0 14px 26px -18px rgba(0,0,0,.4); border-top: 4px solid var(--kp); transition: border-color .3s; }
.dgw-kp-qe.is-koel .dgw-kp-qe-pdf { border-top-color: var(--kp-red); }
.dgw-kp-qe-pdf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dgw-kp-qe-pdf-head img { height: 28px; width: auto; }
.dgw-kp-qe-pdf-head small { font: 700 9px/1.2 'Inter'; letter-spacing: .06em; text-transform: uppercase; color: var(--kp-d); text-align: right; }
.dgw-kp-qe-pdf-no { font: 600 11px/1 'JetBrains Mono'; color: #64748b; margin: 10px 0 8px; }
.dgw-kp-qe-pdf-lines i { display: block; height: 6px; border-radius: 3px; background: #eef2f7; margin-bottom: 6px; }
.dgw-kp-qe-pdf-lines i:nth-child(2) { width: 80%; } .dgw-kp-qe-pdf-lines i:nth-child(3) { width: 55%; }
.dgw-kp-qe-pdf-stamp { position: absolute; right: 16px; bottom: 12px; font: 800 13px/1 'Plus Jakarta Sans'; letter-spacing: .14em; color: #059669; border: 2px solid #059669; padding: 5px 9px; border-radius: 6px; transform: rotate(-8deg) scale(1.6); opacity: 0; }
.dgw-kp-qe.is-stamp .dgw-kp-qe-pdf-stamp { animation: dgwKpStamp .5s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes dgwKpStamp { to { opacity: .9; transform: rotate(-8deg) scale(1); } }

/* ---------- COMPLAINTS ---------- */
.dgw-kp-comp { padding: 110px 0; background: linear-gradient(180deg, #f6f5ff, #f5f8fc); }
.dgw-kp-kanban { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; background: #fff; border: 1px solid #e4e2f7; border-radius: 20px; padding: 16px; min-height: 210px; box-shadow: 0 30px 60px -44px rgba(124,92,255,.6); }
.dgw-kp-kcol { background: #f8f7fe; border-radius: 12px; padding: 10px; min-height: 176px; }
.dgw-kp-kghost { display: block; height: 40px; border-radius: 8px; background: #fff; border: 1px solid #ece9fb; border-left: 3px solid #d8d0fb; margin-top: 8px; }
.dgw-kp-kghost:first-of-type { margin-top: 84px; }
.dgw-kp-kcol:last-of-type .dgw-kp-kghost { border-left-color: #a7f3d0; }
.dgw-kp-kcol h4 { font: 700 11.5px/1.2 'Inter'; color: #6d28d9; letter-spacing: .02em; }
.dgw-kp-kcol:last-of-type h4 { color: #047857; }
.dgw-kp-kcard { --col: 0; position: absolute; top: 52px; left: calc(22px + var(--col) * ((100% - 82px) / 6 + 10px)); width: calc((100% - 82px) / 6 - 12px); background: #fff; border: 1px solid #ddd6fe; border-left: 4px solid #7c5cff; border-radius: 10px; padding: 10px; box-shadow: 0 14px 26px -14px rgba(124,92,255,.7); transition: left .7s cubic-bezier(.5,0,.2,1); display: grid; gap: 5px; }
.dgw-kp-kcard .dgw-kp-mono { color: #6d28d9; font-size: 10px; }
.dgw-kp-kcard b { font: 700 12.5px/1.25 'Plus Jakarta Sans'; }
.dgw-kp-kcard-stamp { font: 600 10px/1.2 'Inter'; color: #047857; min-height: 12px; }
.dgw-kp-kanban.is-done .dgw-kp-kcard { border-left-color: #10b981; }
.dgw-kp-comp-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.dgw-kp-comp-notes div { background: #fff; border: 1px solid #e4e2f7; border-radius: 14px; padding: 18px; }
.dgw-kp-comp-notes b { display: block; font: 700 15px/1.3 'Plus Jakarta Sans'; margin-bottom: 6px; }
.dgw-kp-comp-notes span { font: 400 14px/1.55 'Inter'; color: #64748b; }

/* ---------- SIX DESKS (dark centerpiece) ---------- */
.dgw-kp-desks { position: relative; overflow: hidden; padding: 120px 0; background: #050d1f; }
.dgw-kp-desks::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(79,163,232,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,163,232,.07) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%); }
.dgw-kp-desks-glow { position: absolute; width: 900px; height: 600px; left: 50%; top: 30%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(26,100,168,.45), transparent 65%); filter: blur(40px); }
.dgw-kp-desk { max-width: 1040px; margin: 0 auto; }
.dgw-kp-desk-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.dgw-kp-desk-tabs button { font: 600 13.5px/1 'Inter'; color: rgba(214,226,255,.7); background: rgba(255,255,255,.04); border: 1px solid rgba(124,170,255,.18); padding: 11px 16px; border-radius: 100px; cursor: pointer; transition: .25s; position: relative; overflow: hidden; }
.dgw-kp-desk-tabs button:hover { color: #fff; border-color: rgba(124,170,255,.4); }
.dgw-kp-desk-tabs button.is-on { color: #fff; background: var(--kp); border-color: var(--kp); box-shadow: 0 8px 24px -8px rgba(47,134,214,.8); }
.dgw-kp-desk-tabs button.is-on::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(255,255,255,.75); transform-origin: left; animation: dgwKpTabTime 6s linear forwards; }
.dgw-kp-desk.is-paused .dgw-kp-desk-tabs button.is-on::after { animation: none; transform: scaleX(0); }
@keyframes dgwKpTabTime { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dgw-kp-desk-frame { background: #f8fafc; border-radius: 20px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(124,170,255,.25); padding: 18px; min-height: 440px; }
.dgw-kp-desk-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dgw-kp-desk-range { display: inline-flex; background: #e9eef5; border-radius: 9px; padding: 3px; }
.dgw-kp-desk-range span { font: 600 12px/1 'Inter'; padding: 7px 12px; border-radius: 7px; color: #64748b; }
.dgw-kp-desk-range span.is-on { background: #fff; color: var(--kp-d); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.dgw-kp-desk-refresh { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 'Inter'; color: #64748b; }
.dgw-kp-desk-refresh svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.dgw-kp-desk-refresh circle { fill: none; stroke: var(--kp); stroke-width: 3; stroke-dasharray: 50.3; animation: dgwKpRef 6s linear infinite; }
@keyframes dgwKpRef { from { stroke-dashoffset: 50.3; } to { stroke-dashoffset: 0; } }
.dgw-kp-panel { display: none; }
.dgw-kp-panel.is-on { display: block; animation: dgwKpPanel .45s ease; }
@keyframes dgwKpPanel { from { opacity: 0; transform: translateY(8px); } }
.dgw-kp-panel-who { font: 600 13.5px/1.4 'Inter'; color: var(--kp-d); margin-bottom: 12px; }
.dgw-kp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dgw-kp-tiles div { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; cursor: default; transition: .2s; }
.dgw-kp-tiles div:hover { border-color: var(--kp); transform: translateY(-2px); }
.dgw-kp-tiles span { display: block; font: 500 12px/1.3 'Inter'; color: #64748b; }
.dgw-kp-tiles b { display: block; font: 800 24px/1 'Plus Jakarta Sans'; color: var(--ink); margin-top: 8px; }
.dgw-kp-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.dgw-kp-chart { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; min-height: 150px; }
.dgw-kp-chart h5 { font: 700 12.5px/1.2 'Inter'; color: #334155; margin-bottom: 12px; }
.dgw-kp-funnel { display: grid; gap: 6px; }
.dgw-kp-funnel i { font-style: normal; display: block; width: var(--w); margin: 0 auto; text-align: center; font: 600 11.5px/1 'Inter'; color: #fff; padding: 7px 0; border-radius: 6px; background: linear-gradient(90deg, var(--kp), #2f86d6); animation: dgwKpGrowX .8s ease both; }
@keyframes dgwKpGrowX { from { width: 0; } }
.dgw-kp-bars { display: flex; align-items: flex-end; gap: 10px; height: 96px; }
.dgw-kp-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #2f86d6, var(--kp)); animation: dgwKpGrowY .8s ease both; transform-origin: bottom; }
.dgw-kp-bars--violet i { background: linear-gradient(180deg, #a08bff, #7c5cff); cursor: pointer; }
@keyframes dgwKpGrowY { from { transform: scaleY(0); } }
.dgw-kp-line { width: 100%; height: 96px; }
.dgw-kp-line polyline { fill: none; stroke: var(--kp); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 400; animation: dgwKpDraw 1.2s ease both; vector-effect: non-scaling-stroke; }
@keyframes dgwKpDraw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.dgw-kp-flagrow { display: flex; flex-direction: column; gap: 8px; font: 500 13px/1.4 'Inter'; color: #64748b; }
.dgw-kp-flag20 { align-self: flex-start; font: 700 13px/1 'Inter'; color: #92400e; background: #fef3c7; padding: 9px 12px; border-radius: 8px; animation: dgwKpBlink 1.6s infinite; }
.dgw-kp-hbars { display: grid; gap: 9px; }
.dgw-kp-hbars i { display: block; height: 16px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #ef4444, #f59e0b 50%, #10b981); animation: dgwKpGrowX .8s ease both; }
.dgw-kp-hbars--violet i { background: linear-gradient(90deg, #7c5cff, #a08bff); }
.dgw-kp-steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dgw-kp-steps4 span { font: 600 11px/1.2 'Inter'; text-align: center; padding: 10px 4px; border-radius: 8px; background: #f1f5f9; color: #94a3b8; }
.dgw-kp-steps4 .is-done { background: #d1fae5; color: #047857; }
.dgw-kp-steps4 .is-now { background: #e0edfa; color: var(--kp-d); animation: dgwKpBlink 1.6s infinite; }
.dgw-kp-panel-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dgw-kp-panel-list li { font: 500 12px/1.3 'Inter'; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 10px; }
.dgw-kp-minikanban { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dgw-kp-minikanban div { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; min-height: 200px; display: flex; flex-direction: column; gap: 7px; }
.dgw-kp-minikanban h6 { font: 700 11px/1 'Inter'; color: #6d28d9; margin-bottom: 4px; }
.dgw-kp-minikanban i { display: block; height: 38px; border-radius: 7px; background: #f5f3ff; border-left: 3px solid #7c5cff; animation: dgwKpIn .5s ease both; opacity: 0; transform: translateX(8px); }
.dgw-kp-minikanban div:last-child i { background: #ecfdf5; border-left-color: #10b981; }
.dgw-kp-paylist { display: grid; gap: 8px; }
.dgw-kp-paylist div { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; animation: dgwKpIn .45s ease both; opacity: 0; transform: translateX(8px); }
.dgw-kp-paylist div:nth-child(2) { animation-delay: .08s; } .dgw-kp-paylist div:nth-child(3) { animation-delay: .16s; } .dgw-kp-paylist div:nth-child(4) { animation-delay: .24s; }
.dgw-kp-paylist b { font: 600 14px/1 'Inter'; } .dgw-kp-paylist span { font: 500 12.5px/1 'JetBrains Mono'; color: #64748b; }
.dgw-kp-paylist em { font: 700 11.5px/1 'Inter'; font-style: normal; padding: 6px 10px; border-radius: 100px; }
.is-over { background: #fee2e2; color: #b91c1c; } .is-pend { background: #fef3c7; color: #92400e; } .is-done { background: #d1fae5; color: #047857; }
.dgw-kp-desk-note { text-align: center; font: 500 12px/1 'Inter'; color: rgba(214,226,255,.5); margin-top: 16px; }

/* ---------- DAY + ROLES ---------- */
.dgw-kp-day { padding: 110px 0; background: #fff; }
.dgw-kp-clock { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 0 0 56px; }
.dgw-kp-clock-line { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #fcd34d, #4fa3e8 40%, var(--kp) 70%, #312e81); }
.dgw-kp-clock-pt { position: relative; text-align: center; }
.dgw-kp-clock-pt b { display: inline-block; font: 700 12.5px/1 'JetBrains Mono'; color: #fff; background: var(--kp); padding: 7px 10px; border-radius: 100px; margin-bottom: 30px; box-shadow: 0 0 0 5px #fff, 0 8px 18px -6px rgba(26,100,168,.6); }
.dgw-kp-clock-pt span { display: block; font: 400 13.5px/1.5 'Inter'; color: #475569; }
.dgw-kp-roles { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; background: #f5f8fc; border: 1px solid #e2e8f0; border-radius: 22px; padding: 32px; }
.dgw-kp-roles-h h3 { font: 800 24px/1.2 'Plus Jakarta Sans'; }
.dgw-kp-roles-h p { font: 400 15px/1.65 'Inter'; color: #475569; margin-top: 12px; }
.dgw-kp-matrix { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.dgw-kp-mrow { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); align-items: center; border-bottom: 1px solid #eef2f7; }
.dgw-kp-mrow:last-child { border-bottom: 0; }
.dgw-kp-mrow > * { padding: 11px 10px; }
.dgw-kp-mrow span { font: 500 13px/1.3 'Inter'; color: #334155; }
.dgw-kp-mrow--h span { font: 700 11px/1.25 'Inter'; color: #64748b; text-align: center; background: #f8fafc; }
.dgw-kp-mrow--h span:first-child { background: #f8fafc; }
.dgw-kp-mrow i { display: flex; justify-content: center; }
.dgw-kp-mrow i::before { content: ''; width: 9px; height: 2px; background: #e2e8f0; }
.dgw-kp-mrow i.y::before { width: 20px; height: 20px; border-radius: 50%; background: #d1fae5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.dgw-kp-mrow i.n::before { width: 20px; height: 20px; border-radius: 50%; background: #fee2e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/10px no-repeat; }

/* ---------- HOW ---------- */
.dgw-kp-how { padding: 100px 0; background: linear-gradient(180deg, #f5f8fc, #fff); }
.dgw-kp-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dgw-kp-how-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 24px; transition: transform .25s, box-shadow .25s; }
.dgw-kp-how-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(15,74,130,.5); }
.dgw-kp-how-card i { font: 700 12px/1 'JetBrains Mono'; font-style: normal; color: var(--kp-red); }
.dgw-kp-how-card h3 { font: 700 17px/1.25 'Plus Jakarta Sans'; margin: 12px 0 8px; }
.dgw-kp-how-card p { font: 400 14px/1.6 'Inter'; color: #64748b; }

/* ---------- RESULTS ---------- */
.dgw-kp-results { position: relative; overflow: hidden; padding: 110px 0; background: linear-gradient(160deg, var(--kp) 0%, var(--kp-dd) 100%); }
.dgw-kp-results::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.dgw-kp-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dgw-kp-res { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 24px; backdrop-filter: blur(6px); }
.dgw-kp-res h3 { font: 700 18px/1.25 'Plus Jakarta Sans'; color: #fff; display: flex; gap: 10px; align-items: flex-start; }
.dgw-kp-res h3::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a64a8' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.dgw-kp-res p { font: 400 14.5px/1.6 'Inter'; color: rgba(255,255,255,.78); margin-top: 8px; padding-left: 32px; }
.dgw-kp-tech { margin-top: 32px; background: rgba(4,20,45,.4); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 22px 24px; }
.dgw-kp-tech .dgw-kp-mono { color: rgba(255,255,255,.6); }
.dgw-kp-tech ul { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.dgw-kp-tech li { font: 500 12.5px/1 'Inter'; color: #fff; padding: 8px 11px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.dgw-kp-tech-status { display: flex; align-items: center; gap: 9px; margin-top: 16px; font: 500 13.5px/1.45 'Inter'; color: rgba(255,255,255,.82); }
.dgw-kp-live { width: 8px; height: 8px; border-radius: 50%; background: #34d399; flex-shrink: 0; animation: dgwCsPulse 2.2s infinite; }
@keyframes dgwCsPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* ---------- FAQ ---------- */
.dgw-kp-faq { padding: 100px 0; background: #fff; }
.dgw-kp-faq-inner { max-width: 860px; }
.dgw-kp-faq-list { display: grid; gap: 10px; }
.dgw-kp-faq-list details { border: 1px solid #e2e8f0; border-radius: 14px; padding: 0 20px; background: #fff; transition: border-color .2s; }
.dgw-kp-faq-list details[open] { border-color: var(--kp); box-shadow: 0 14px 30px -24px rgba(26,100,168,.6); }
.dgw-kp-faq-list summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative; font: 700 16px/1.4 'Plus Jakarta Sans'; color: var(--ink); }
.dgw-kp-faq-list summary::-webkit-details-marker { display: none; }
.dgw-kp-faq-list summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 500 22px/1 'Inter'; color: var(--kp); transition: transform .25s; }
.dgw-kp-faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.dgw-kp-faq-list details p { font: 400 15px/1.7 'Inter'; color: #475569; padding-bottom: 18px; }

/* ---------- CTA ---------- */
.dgw-kp-cta { position: relative; overflow: hidden; padding: 110px 24px; background: linear-gradient(180deg, #050a2e, #071a33); text-align: center; }
.dgw-kp-cta-glow { position: absolute; width: 700px; height: 500px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(26,100,168,.4), transparent 65%); filter: blur(40px); }
.dgw-kp-cta-inner { position: relative; max-width: 720px; margin: 0 auto; }
.dgw-kp-cta-title { font: 800 clamp(28px, 4vw, 44px)/1.15 'Plus Jakarta Sans'; color: #fff; }
.dgw-kp-cta-p { font: 400 17px/1.7 'Inter'; color: rgba(214,226,255,.78); margin-top: 16px; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .dgw-nav-links { display: none; }
  .dgw-kp-hero-inner, .dgw-kp-client-grid, .dgw-kp-clean-grid, .dgw-kp-quote-grid, .dgw-kp-roles { grid-template-columns: 1fr; gap: 40px; }
  .dgw-kp-digest { max-width: 460px; transform: none; animation: none; }
  .dgw-kp-rules { grid-template-columns: 1fr; }
  .dgw-kp-pains, .dgw-kp-how-grid { grid-template-columns: 1fr 1fr; }
  .dgw-kp-d360-body { grid-template-columns: 1fr 1fr; }
  .dgw-kp-d360-col--mid { grid-column: 1 / -1; grid-row: 1; border-right: 0; border-bottom: 1px solid #eef2f7; }
  .dgw-kp-res-grid { grid-template-columns: 1fr 1fr; }
  .dgw-kp-footer-grid, .dgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .dgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
  .dgw-kp-clock { grid-template-columns: 1fr; gap: 18px; padding-left: 26px; }
  .dgw-kp-clock-line { left: 6px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; background: linear-gradient(180deg, #fcd34d, #4fa3e8 40%, var(--kp) 70%, #312e81); }
  .dgw-kp-clock-pt { text-align: left; }
  .dgw-kp-clock-pt b { margin-bottom: 8px; }
}
@media (max-width: 720px) {
  .dgw-kp-inner, .dgw-kp-hero-inner { padding-left: 16px; padding-right: 16px; }
  .dgw-kp-hero { padding: 120px 0 80px; }
  .dgw-kp-hstats { grid-template-columns: 1fr 1fr; }
  .dgw-kp-client, .dgw-kp-problem, .dgw-kp-clean, .dgw-kp-sales, .dgw-kp-d360, .dgw-kp-quote, .dgw-kp-comp, .dgw-kp-desks, .dgw-kp-day, .dgw-kp-how, .dgw-kp-results, .dgw-kp-faq, .dgw-kp-cta { padding-top: 72px; padding-bottom: 72px; }
  .dgw-kp-rrow { grid-template-columns: 1fr 1fr .7fr; }
  .dgw-kp-rrow span:nth-child(4), .dgw-kp-rrow span:nth-child(5) { display: none; }
  .dgw-kp-register-stats { grid-template-columns: 1fr 1fr; }
  .dgw-kp-register-stats div:nth-child(2) { border-right: 0; }
  .dgw-kp-register-stats div:nth-child(-n+2) { border-bottom: 1px solid #f6e1e2; }
  .dgw-kp-pains, .dgw-kp-how-grid, .dgw-kp-res-grid, .dgw-kp-comp-notes { grid-template-columns: 1fr; }
  .dgw-kp-merge { grid-template-columns: 1fr; }
  .dgw-kp-merge-key svg { transform: rotate(90deg); }
  .dgw-kp-merge.is-in .dgw-kp-merge-rec { animation: none; }
  .dgw-kp-pipe { grid-template-columns: 1fr; gap: 8px; }
  .dgw-kp-gate { grid-template-columns: 1fr; }
  .dgw-kp-gate-arrow { display: none; }
  .dgw-kp-hand { grid-template-columns: 1fr; justify-items: center; }
  .dgw-kp-hand-people { width: 100%; }
  .dgw-kp-d360-body { grid-template-columns: 1fr; }
  .dgw-kp-d360-col { border-right: 0; border-bottom: 1px solid #eef2f7; }
  .dgw-kp-d360-top { flex-direction: column; align-items: flex-start; }
  .dgw-kp-kanban { grid-template-columns: repeat(3, 1fr); min-height: 0; }
  .dgw-kp-kcol { min-height: 120px; }
  .dgw-kp-kcard { display: none; }
  .dgw-kp-kghost:first-of-type { margin-top: 10px; }
  .dgw-kp-desk-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; scrollbar-width: none; }
  .dgw-kp-desk-tabs button { flex-shrink: 0; }
  .dgw-kp-desk-frame { padding: 12px; }
  .dgw-kp-tiles { grid-template-columns: 1fr 1fr; }
  .dgw-kp-panel-grid { grid-template-columns: 1fr; }
  .dgw-kp-minikanban { grid-template-columns: repeat(3, 1fr); }
  .dgw-kp-minikanban div { min-height: 110px; }
  .dgw-kp-paylist div { grid-template-columns: 1fr auto; }
  .dgw-kp-paylist span { display: none; }
  .dgw-kp-roles { padding: 20px; }
  .dgw-kp-matrix { overflow-x: auto; }
  .dgw-kp-mrow { min-width: 520px; }
  .dgw-footer { padding: 72px 16px 28px; }
  .dgw-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .dgw-footer-bottom { flex-direction: column; text-align: center; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .dgw-kp-digest-list li { opacity: 1; transform: none; }
}
.dgw-kp-qe-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.dgw-kp-qe-chips button { font: 600 13px/1 'Inter'; padding: 9px 13px; border-radius: 100px; border: 1px solid #c9dbef; background: #fff; color: var(--kp-d); cursor: pointer; transition: .2s; }
.dgw-kp-qe-chips button:hover { border-color: var(--kp); }
.dgw-kp-qe-chips button.is-on { background: var(--kp); border-color: var(--kp); color: #fff; box-shadow: 0 6px 16px -6px rgba(26,100,168,.6); }


/* ============================================================
   DIGIWAH — CASE STUDY: SKYPOD IMMIGRATION (Zoho CRM follow-up engine)
   Page-scoped prefix: dgw-sp-  (reuses dgw-nav-* / dgw-footer-*)
   ============================================================ */
:root {
  --brand: #010ED0; --accent: #FF7A45; --ink: #0a0f2c; --line: rgba(255,255,255,0.08);
  /* SkyPod (sky identity) */
  --sp-sky: #0ea5e9; --sp-sky-d: #0369a1; --sp-deep: #0b3a6e; --sp-ink: #0b1b33; --sp-ok: #10b981; --sp-due: #f59e0b; --sp-late: #ef4444; --sp-mist: #f0f8ff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: rgba(99,102,241,0.12); color: #4338ca; padding: 1px 6px; border-radius: 5px; }

/* ============================================================
   NAVBAR (inherited)
   ============================================================ */
.dgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.dgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dgw-nav-logo { display: flex; align-items: center; }
.dgw-nav-logo-img { height: 38px; width: auto; display: block; }
.dgw-nav-links { display: flex; gap: 30px; }
.dgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.dgw-nav-links a:hover { color: #fff; }
.dgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.dgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }
/* ============================================================
   FOOTER (inherited)
   ============================================================ */
.dgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.dgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.dgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.dgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.dgw-footer-brand { max-width: 360px; }
.dgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.dgw-footer-logo { height: 40px; width: auto; display: block; }
.dgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.dgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.dgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.dgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.dgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.dgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.dgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.dgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.dgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.dgw-footer-col { min-width: 0; }
.dgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.dgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.dgw-footer-list a, .dgw-footer-list li, .dgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-list a:hover { color: #ffb284; }
.dgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.dgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.dgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.dgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.dgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.dgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.dgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.dgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.dgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.dgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-legal a:hover { color: #fff; }
.dgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.dgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }

/* ============================================================
   SKYPOD — page-scoped (dgw-sp-)
   ============================================================ */
.dgw-sp-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.dgw-sp-sec { position: relative; padding: 112px 0; overflow: hidden; }
.dgw-sp-sec--mist { background: linear-gradient(180deg, #f5faff 0%, #eef6fd 100%); }
.dgw-sp-sec--dark { background: radial-gradient(1200px 600px at 80% -10%, rgba(14,165,233,0.22), transparent 60%), linear-gradient(180deg, #071a33 0%, #0b2547 100%); color: #e6f2ff; }
.dgw-sp-head { max-width: 760px; margin-bottom: 56px; }
.dgw-sp-head--c { margin-left: auto; margin-right: auto; text-align: center; }
.dgw-sp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 'Inter'; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-sky-d); margin-bottom: 18px; }
.dgw-sp-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sp-sky), var(--accent)); }
.dgw-sp-sec--dark .dgw-sp-eyebrow { color: #7dd3fc; }
.dgw-sp-h2 { font: 800 clamp(30px, 3.6vw, 46px)/1.1 'Plus Jakarta Sans'; color: var(--sp-ink); margin-bottom: 18px; }
.dgw-sp-sec--dark .dgw-sp-h2 { color: #fff; }
.dgw-sp-h2 em { font-style: normal; background: linear-gradient(100deg, var(--sp-sky) 0%, #6366f1 60%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dgw-sp-sec--dark .dgw-sp-h2 em { background: linear-gradient(100deg, #7dd3fc 0%, #a5b4fc 55%, #ffb284 100%); -webkit-background-clip: text; background-clip: text; }
.dgw-sp-lead { font: 400 17.5px/1.7 'Inter'; color: #3b4a63; }
.dgw-sp-sec--dark .dgw-sp-lead { color: rgba(220,236,255,0.78); }
.dgw-sp-lead strong { color: var(--sp-ink); font-weight: 600; }
.dgw-sp-sec--dark .dgw-sp-lead strong { color: #fff; }
.dgw-sp-grid-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(11,58,110,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,58,110,0.06) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); }
.dgw-sp-sec--dark .dgw-sp-grid-bg { background-image: linear-gradient(rgba(125,211,252,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,0.06) 1px, transparent 1px); }
.dgw-sp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 10px; font: 600 15px/1 'Inter'; transition: transform .2s, box-shadow .2s, background .2s; cursor: pointer; border: 0; }
.dgw-sp-btn--pri { background: var(--accent); color: #fff; box-shadow: 0 8px 22px -6px rgba(255,122,69,0.55); }
.dgw-sp-btn--pri:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(255,122,69,0.6); }
.dgw-sp-btn--ghost { background: #fff; color: var(--sp-deep); border: 1px solid rgba(11,58,110,0.16); }
.dgw-sp-btn--ghost:hover { border-color: var(--sp-sky); transform: translateY(-2px); }

/* ---------- 1 · HERO ---------- */
.dgw-sp-hero { position: relative; padding: 150px 0 110px; overflow: hidden;
  background: radial-gradient(900px 520px at 85% 10%, rgba(14,165,233,0.20), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(99,102,241,0.12), transparent 60%), linear-gradient(180deg, #e8f5ff 0%, #f7fbff 60%, #fff 100%); }
.dgw-sp-flight { top: 30%; height: 70%; }
.dgw-sp-hero .dgw-sp-grid-bg { -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 20%, transparent 75%); }
.dgw-sp-flight { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.dgw-sp-flight path { fill: none; stroke: var(--sp-sky); stroke-width: 1.6; stroke-dasharray: 2 9; stroke-linecap: round; animation: dgw-sp-dash 30s linear infinite; }
@keyframes dgw-sp-dash { to { stroke-dashoffset: -400; } }
.dgw-sp-hero-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.dgw-sp-crumb { font: 500 13px/1 'Inter'; color: #5b6b85; margin-bottom: 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.dgw-sp-crumb a:hover { color: var(--sp-sky-d); }
.dgw-sp-client-chip { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; background: #fff; border: 1px solid rgba(11,58,110,0.10); border-radius: 100px; box-shadow: 0 10px 30px -14px rgba(11,58,110,0.3); margin-bottom: 26px; }
.dgw-sp-wordmark { display: inline-flex; align-items: center; gap: 0; font: 800 18px/1 'Plus Jakarta Sans'; color: var(--sp-deep); letter-spacing: -0.03em; }
.dgw-sp-wordmark b { color: var(--sp-sky); font-weight: 800; }
.dgw-sp-wordmark-icon { margin-right: 8px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #0369a1); display: grid; place-items: center; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.15); }
.dgw-sp-client-chip small { font: 600 11px/1.2 'Inter'; color: #5b6b85; letter-spacing: 0.04em; border-left: 1px solid rgba(11,58,110,0.12); padding-left: 12px; }
.dgw-sp-h1 { font: 800 clamp(36px, 4.6vw, 60px)/1.04 'Plus Jakarta Sans'; color: var(--sp-ink); letter-spacing: -0.035em; margin-bottom: 22px; }
.dgw-sp-h1 em { font-style: normal; background: linear-gradient(100deg, var(--sp-sky) 0%, #4f46e5 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dgw-sp-hero-p { font: 400 18px/1.65 'Inter'; color: #3b4a63; max-width: 560px; margin-bottom: 30px; }
.dgw-sp-meta { display: grid; grid-template-columns: repeat(4, auto); gap: 10px 28px; margin-bottom: 34px; justify-content: start; }
.dgw-sp-meta div { border-left: 2px solid rgba(14,165,233,0.35); padding-left: 12px; }
.dgw-sp-meta dt { font: 600 10.5px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: #6b7a93; margin-bottom: 7px; }
.dgw-sp-meta dd { font: 700 14.5px/1.25 'Plus Jakarta Sans'; color: var(--sp-ink); }
.dgw-sp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* hero lead card (autoplay) */
.dgw-sp-card { position: relative; background: #fff; border-radius: 20px; border: 1px solid rgba(11,58,110,0.10);
  box-shadow: 0 40px 80px -30px rgba(11,58,110,0.35), 0 0 0 8px rgba(255,255,255,0.5); overflow: hidden; }
.dgw-sp-hero-visual { position: relative; perspective: 1400px; }
.dgw-sp-hero-visual .dgw-sp-card { transform: rotateY(-6deg) rotateX(3deg); transition: transform .5s ease; }
.dgw-sp-hero-visual:hover .dgw-sp-card { transform: none; }
.dgw-sp-card-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #edf2f8; background: linear-gradient(180deg, #fbfdff, #f4f8fd); }
.dgw-sp-card-dots { display: flex; gap: 5px; } .dgw-sp-card-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d7e0ec; }
.dgw-sp-card-title { font: 700 13px/1 'Inter'; color: var(--sp-ink); }
.dgw-sp-card-title span { color: #8090a8; font-weight: 500; }
.dgw-sp-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 'Inter'; color: #059669; background: #ecfdf5; padding: 5px 9px; border-radius: 100px; }
.dgw-sp-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: dgw-sp-pulse 1.6s infinite; }
@keyframes dgw-sp-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 100% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } }
.dgw-sp-hl { padding: 18px 20px 20px; }
.dgw-sp-hl-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dgw-sp-avatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #e0f2fe, #c7d2fe); display: grid; place-items: center; font: 800 14px/1 'Plus Jakarta Sans'; color: var(--sp-deep); }
.dgw-sp-hl-name { font: 700 15px/1.2 'Plus Jakarta Sans'; color: var(--sp-ink); }
.dgw-sp-hl-sub { font: 500 12px/1.3 'Inter'; color: #7a8aa3; }
.dgw-sp-owner { margin-left: auto; font: 600 11.5px/1 'Inter'; color: var(--sp-deep); background: #eef6ff; border: 1px solid #d6e9fb; padding: 6px 10px; border-radius: 8px; }
.dgw-sp-steps { display: flex; gap: 4px; margin-bottom: 16px; }
.dgw-sp-steps span { flex: 1; height: 6px; border-radius: 6px; background: #e8eef6; position: relative; transition: background .4s; }
.dgw-sp-steps span.is-on { background: linear-gradient(90deg, var(--sp-sky), #6366f1); }
.dgw-sp-steps-lbl { display: flex; justify-content: space-between; font: 600 10.5px/1 'Inter'; color: #8a99b0; margin: -8px 0 16px; letter-spacing: .02em; }
.dgw-sp-hl-status { font: 700 12px/1 'Inter'; color: var(--sp-sky-d); }
.dgw-sp-ttrack { display: flex; align-items: center; gap: 0; margin-bottom: 16px; }
.dgw-sp-t { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 'JetBrains Mono'; color: #8a99b0; background: #f1f5fa; border: 2px solid #e1e8f1; transition: all .35s; }
.dgw-sp-t-line { flex: 1; height: 2px; background: #e1e8f1; transition: background .35s; }
.dgw-sp-t.is-ok { background: #ecfdf5; border-color: var(--sp-ok); color: #047857; }
.dgw-sp-t.is-late { background: #fef2f2; border-color: var(--sp-late); color: #b91c1c; }
.dgw-sp-t.is-due { background: #fffbeb; border-color: var(--sp-due); color: #b45309; box-shadow: 0 0 0 0 rgba(245,158,11,.5); animation: dgw-sp-due 1.4s infinite; }
.dgw-sp-t.is-over { background: #fef2f2; border-color: var(--sp-late); color: #b91c1c; animation: dgw-sp-over 1.2s infinite; }
.dgw-sp-t.is-flag { background: var(--sp-late); border-color: var(--sp-late); color: #fff; }
.dgw-sp-t-line.is-ok { background: var(--sp-ok); }
@keyframes dgw-sp-due { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 100% { box-shadow: 0 0 0 9px rgba(245,158,11,0); } }
@keyframes dgw-sp-over { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 100% { box-shadow: 0 0 0 9px rgba(239,68,68,0); } }
.dgw-sp-task { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, #f7fbff, #eff7ff); border: 1px dashed #b9dcf7; margin-bottom: 14px; }
.dgw-sp-task-ic { width: 32px; height: 32px; border-radius: 9px; background: #fff; display: grid; place-items: center; color: var(--sp-sky-d); box-shadow: 0 4px 10px -4px rgba(11,58,110,.25); flex: none; }
.dgw-sp-task b { display: block; font: 700 13px/1.3 'Inter'; color: var(--sp-ink); }
.dgw-sp-task small { font: 500 12px/1.3 'Inter'; color: #6b7a93; }
.dgw-sp-task-tag { margin-left: auto; font: 700 10px/1 'Inter'; letter-spacing: .1em; text-transform: uppercase; color: #047857; background: #d1fae5; padding: 5px 8px; border-radius: 6px; flex: none; }
.dgw-sp-feed { list-style: none; display: flex; flex-direction: column; gap: 8px; min-height: 104px; }
.dgw-sp-feed li { display: flex; gap: 10px; align-items: flex-start; font: 500 12.5px/1.45 'Inter'; color: #3b4a63; animation: dgw-sp-in .45s ease both; }
.dgw-sp-feed li i { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--sp-sky); }
.dgw-sp-feed li.is-sys i { background: #6366f1; } .dgw-sp-feed li.is-warn i { background: var(--sp-late); }
.dgw-sp-feed li span { color: #8a99b0; font-family: 'JetBrains Mono'; font-size: 11px; margin-left: auto; flex: none; padding-left: 8px; }
@keyframes dgw-sp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dgw-sp-float { position: absolute; background: #fff; border-radius: 14px; padding: 11px 14px; box-shadow: 0 18px 40px -16px rgba(11,58,110,.4); border: 1px solid rgba(11,58,110,.08); font: 600 12.5px/1.3 'Inter'; color: var(--sp-ink); display: flex; gap: 10px; align-items: center; animation: dgw-sp-bob 6s ease-in-out infinite; z-index: 2; }
.dgw-sp-float small { display: block; font-weight: 500; color: #7a8aa3; font-size: 11px; }
.dgw-sp-float--a { left: -40px; bottom: -26px; }
.dgw-sp-float--b { right: -22px; top: -22px; animation-delay: -3s; }
.dgw-sp-float-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
@keyframes dgw-sp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- 2 · CLIENT + BEFORE ---------- */
.dgw-sp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.dgw-sp-pains { list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.dgw-sp-pains li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #e7eef7; font: 500 15px/1.5 'Inter'; color: #33415a; transition: transform .25s, box-shadow .25s; }
.dgw-sp-pains li:hover { transform: translateX(4px); box-shadow: 0 10px 24px -14px rgba(11,58,110,.3); }
.dgw-sp-pains li b { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #fff1f2; color: #e11d48; display: grid; place-items: center; font: 800 12px/1 'JetBrains Mono'; }
.dgw-sp-mess { position: relative; height: 470px; }
.dgw-sp-note { position: absolute; background: #fffbe8; border: 1px solid #f3e7b0; border-radius: 10px; padding: 16px 18px; width: 250px; box-shadow: 0 16px 34px -18px rgba(120,90,0,.35); font: 500 14px/1.55 'Inter'; color: #5a4a12; }
.dgw-sp-note h4 { font: 700 11px/1 'Inter'; letter-spacing: .12em; text-transform: uppercase; color: #a08316; margin-bottom: 10px; }
.dgw-sp-note p { font-family: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive; font-size: 17px; line-height: 1.35; }
.dgw-sp-note--1 { left: 0; top: 10px; transform: rotate(-4deg); }
.dgw-sp-note--2 { left: 120px; top: 190px; transform: rotate(3deg); width: 230px; }
.dgw-sp-tasklist { position: absolute; right: 0; top: 40px; width: 300px; background: #fff; border-radius: 14px; border: 1px solid #e3eaf3; box-shadow: 0 30px 60px -30px rgba(11,58,110,.35); overflow: hidden; }
.dgw-sp-tasklist-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f7f9fc; border-bottom: 1px solid #e9eef5; font: 700 13px/1 'Inter'; color: var(--sp-ink); }
.dgw-sp-tasklist-h span { font: 700 10.5px/1 'Inter'; color: #b91c1c; background: #fee2e2; padding: 4px 8px; border-radius: 6px; letter-spacing: .06em; text-transform: uppercase; }
.dgw-sp-tasklist li { list-style: none; display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #f1f4f8; font: 500 13px/1.3 'Inter'; color: #6b7a93; }
.dgw-sp-tasklist li::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #cbd5e1; flex: none; }
.dgw-sp-tasklist li em { margin-left: auto; font-style: normal; font: 600 11px/1 'JetBrains Mono'; color: #dc2626; }
.dgw-sp-tasklist-more { padding: 12px 16px; font: 600 12px/1 'Inter'; color: #94a3b8; text-align: center; background: repeating-linear-gradient(180deg, #fff 0 6px, #f8fafc 6px 12px); }
.dgw-sp-ghost { position: absolute; left: 30px; bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; width: 380px; }
.dgw-sp-ghost span { font: 600 12px/1 'Inter'; color: #94a3b8; background: #fff; border: 1px dashed #cbd5e1; padding: 8px 10px; border-radius: 8px; opacity: .85; }
.dgw-sp-ghost span:nth-child(odd) { opacity: .5; }

/* ---------- 3 · THE RULE ---------- */
.dgw-sp-rule { text-align: center; }
.dgw-sp-quote { font: 700 clamp(24px, 3.1vw, 40px)/1.32 'Plus Jakarta Sans'; color: #9aa9bf; letter-spacing: -0.025em; max-width: 1020px; margin: 0 auto 18px; }
.dgw-sp-quote button { all: unset; display: inline; cursor: pointer; color: #9aa9bf; transition: color .3s, text-decoration-color .4s; text-decoration: underline; text-decoration-thickness: .22em; text-underline-offset: .02em; text-decoration-skip-ink: none; text-decoration-color: transparent; }
.dgw-sp-quote button:hover { color: #64748b; }
.dgw-sp-quote button.is-on { color: var(--sp-ink); text-decoration-color: rgba(14,165,233,.38); }
.dgw-sp-quote-by { font: 600 13px/1 'Inter'; color: #6b7a93; letter-spacing: .06em; margin-bottom: 46px; }
.dgw-sp-clauses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; }
.dgw-sp-clause { position: relative; padding: 24px 22px 22px; border-radius: 16px; background: #fff; border: 1px solid #e5edf6; cursor: pointer; transition: all .35s; overflow: hidden; }
.dgw-sp-clause::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sp-sky), #6366f1); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.dgw-sp-clause.is-on { border-color: #bfe0fa; box-shadow: 0 24px 50px -26px rgba(14,116,233,.45); transform: translateY(-4px); }
.dgw-sp-clause.is-on::before { transform: scaleX(1); }
.dgw-sp-clause-n { font: 700 12px/1 'JetBrains Mono'; color: var(--sp-sky-d); margin-bottom: 14px; display: block; }
.dgw-sp-clause h3 { font: 700 18px/1.3 'Plus Jakarta Sans'; color: var(--sp-ink); margin-bottom: 10px; }
.dgw-sp-clause p { font: 400 14.5px/1.6 'Inter'; color: #4a5a73; }
.dgw-sp-clause a { display: inline-block; margin-top: 14px; font: 600 13px/1 'Inter'; color: var(--sp-sky-d); }
.dgw-sp-clause a:hover { color: var(--accent); }

/* ---------- 4 · APPROACH ---------- */
.dgw-sp-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dgw-sp-rulecard { display: flex; gap: 16px; padding: 22px; background: #fff; border-radius: 16px; border: 1px solid #e5edf6; transition: transform .3s, box-shadow .3s; transform-style: preserve-3d; }
.dgw-sp-rulecard:hover { box-shadow: 0 20px 40px -24px rgba(11,58,110,.4); }
.dgw-sp-rulecard-n { flex: none; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #e0f2fe, #e0e7ff); color: var(--sp-deep); display: grid; place-items: center; font: 800 15px/1 'Plus Jakarta Sans'; }
.dgw-sp-rulecard h3 { font: 700 16.5px/1.3 'Plus Jakarta Sans'; color: var(--sp-ink); margin-bottom: 6px; }
.dgw-sp-rulecard p { font: 400 14px/1.6 'Inter'; color: #4a5a73; }
.dgw-sp-tracks { margin-top: 44px; padding: 30px 32px; border-radius: 20px; background: #fff; border: 1px solid #e5edf6; box-shadow: 0 30px 60px -40px rgba(11,58,110,.35); }
.dgw-sp-tracks-h { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; flex-wrap: wrap; margin-bottom: 22px; }
.dgw-sp-tracks-h h3 { font: 700 19px/1.3 'Plus Jakarta Sans'; color: var(--sp-ink); }
.dgw-sp-tracks-h p { font: 400 14px/1.5 'Inter'; color: #5b6b85; max-width: 520px; }
.dgw-sp-track { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 12px 0; }
.dgw-sp-track-lbl { font: 700 13px/1.3 'Inter'; color: var(--sp-ink); }
.dgw-sp-track-lbl small { display: block; font-weight: 500; color: #7a8aa3; font-size: 12px; }
.dgw-sp-rail { position: relative; height: 42px; border-radius: 12px; background: #f5f8fc; border: 1px solid #e8eef6; display: flex; align-items: center; gap: 8px; padding: 0 12px; overflow: hidden; }
.dgw-sp-rail span { position: relative; z-index: 1; font: 600 11.5px/1 'Inter'; color: #3b4a63; background: #fff; border: 1px solid #e1e8f1; padding: 6px 9px; border-radius: 7px; white-space: nowrap; }
.dgw-sp-rail--test { background: repeating-linear-gradient(135deg, #f5f8ff 0 10px, #eef3ff 10px 20px); border-style: dashed; border-color: #c7d2fe; }
.dgw-sp-rail--test span { border-color: #c7d2fe; color: #4338ca; }
.dgw-sp-rail i { position: absolute; top: 50%; left: -30px; width: 30px; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--sp-sky)); animation: dgw-sp-run 4s linear infinite; }
.dgw-sp-rail--test i { background: linear-gradient(90deg, transparent, #6366f1); animation-duration: 2.6s; }
@keyframes dgw-sp-run { to { left: 100%; } }

/* ---------- 5 · SIMULATOR (dark) ---------- */
.dgw-sp-sim { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
.dgw-sp-panel { background: #fff; color: var(--sp-ink); border-radius: 20px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(125,211,252,.15); }
.dgw-sp-panel-body { padding: 20px 22px 22px; }
.dgw-sp-sim-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dgw-sp-pill { font: 700 11.5px/1 'Inter'; padding: 7px 11px; border-radius: 100px; background: #e0f2fe; color: var(--sp-sky-d); }
.dgw-sp-pill--flag { background: #fee2e2; color: #b91c1c; }
.dgw-sp-pill--tag { background: #ede9fe; color: #5b21b6; }
.dgw-sp-pill--muted { background: #f1f5f9; color: #475569; }
.dgw-sp-clock { margin-left: auto; font: 600 12px/1 'JetBrains Mono'; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; padding: 7px 10px; border-radius: 8px; }
.dgw-sp-sim-lbl { font: 700 10.5px/1 'Inter'; letter-spacing: .14em; text-transform: uppercase; color: #8a99b0; margin: 16px 0 10px; display: flex; justify-content: space-between; }
.dgw-sp-outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dgw-sp-oc { cursor: pointer; padding: 11px 8px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; font: 600 12.5px/1.25 'Inter'; color: #1e293b; transition: all .2s; text-align: center; }
.dgw-sp-oc:hover:not(:disabled) { border-color: var(--sp-sky); background: #f0f9ff; transform: translateY(-1px); }
.dgw-sp-oc.is-sel { border-color: var(--sp-sky); background: #e0f2fe; box-shadow: inset 0 0 0 1px var(--sp-sky); }
.dgw-sp-oc--neg { color: #9f1239; }
.dgw-sp-oc:disabled { opacity: .4; cursor: not-allowed; }
.dgw-sp-form { margin-top: 12px; padding: 14px; border-radius: 12px; background: #f8fbff; border: 1px solid #dbeafe; display: none; gap: 10px; }
.dgw-sp-form.is-open { display: grid; animation: dgw-sp-in .3s ease; }
.dgw-sp-form label { font: 600 12px/1.3 'Inter'; color: #334155; display: grid; gap: 6px; }
.dgw-sp-form label b { color: #e11d48; }
.dgw-sp-form textarea, .dgw-sp-form select, .dgw-sp-form input { font: 500 13px/1.4 'Inter'; color: var(--sp-ink); border: 1px solid #cbd5e1; border-radius: 8px; padding: 9px 10px; background: #fff; width: 100%; resize: none; }
.dgw-sp-form textarea:focus, .dgw-sp-form select:focus, .dgw-sp-form input:focus { outline: 2px solid rgba(14,165,233,.4); border-color: var(--sp-sky); }
.dgw-sp-form .is-err { border-color: #ef4444; animation: dgw-sp-shake .35s; }
@keyframes dgw-sp-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.dgw-sp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dgw-sp-form-act { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.dgw-sp-form-act small { margin-right: auto; font: 500 12px/1.3 'Inter'; color: #b91c1c; }
.dgw-sp-mini { cursor: pointer; padding: 9px 14px; border-radius: 8px; border: 0; font: 600 12.5px/1 'Inter'; background: var(--sp-sky-d); color: #fff; }
.dgw-sp-mini--ghost { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
.dgw-sp-sim-tools { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dgw-sp-tool { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 9px; border: 1px dashed #cbd5e1; background: #fff; font: 600 12px/1 'Inter'; color: #475569; transition: all .2s; }
.dgw-sp-tool:hover { border-color: var(--sp-sky); color: var(--sp-sky-d); }
.dgw-sp-side { display: grid; gap: 16px; }
.dgw-sp-glass { border-radius: 18px; padding: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(125,211,252,0.18); backdrop-filter: blur(10px); }
.dgw-sp-glass h3 { font: 700 13px/1 'Inter'; letter-spacing: .14em; text-transform: uppercase; color: #7dd3fc; margin-bottom: 14px; display: flex; justify-content: space-between; }
.dgw-sp-glass h3 span { color: rgba(220,236,255,.55); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.dgw-sp-open { border-radius: 12px; padding: 14px; background: #fff; color: var(--sp-ink); display: grid; gap: 4px; min-height: 76px; }
.dgw-sp-open b { font: 700 14px/1.3 'Plus Jakarta Sans'; }
.dgw-sp-open small { font: 500 12.5px/1.4 'Inter'; color: #5b6b85; }
.dgw-sp-open.is-none { background: rgba(255,255,255,.08); color: #fecaca; border: 1px dashed rgba(254,202,202,.4); }
.dgw-sp-open.is-none small { color: rgba(254,202,202,.8); }
.dgw-sp-open-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.dgw-sp-open-meta span { font: 600 10.5px/1 'Inter'; padding: 5px 7px; border-radius: 6px; background: #f1f5f9; color: #475569; }
.dgw-sp-open-meta span.is-due { background: #fef3c7; color: #92400e; } .dgw-sp-open-meta span.is-over { background: #fee2e2; color: #b91c1c; }
.dgw-sp-log { list-style: none; display: grid; gap: 9px; max-height: 286px; overflow: auto; padding-right: 4px; }
.dgw-sp-log li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; font: 500 13px/1.45 'Inter'; color: rgba(230,242,255,.86); animation: dgw-sp-in .35s ease both; }
.dgw-sp-log li i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: #7dd3fc; }
.dgw-sp-log li.is-sys i { background: #a5b4fc; } .dgw-sp-log li.is-warn i { background: #fca5a5; } .dgw-sp-log li.is-ok i { background: #6ee7b7; }
.dgw-sp-log li span { font: 500 11px/1.5 'JetBrains Mono'; color: rgba(220,236,255,.45); }
.dgw-sp-log li b { color: #fff; font-weight: 600; }
.dgw-sp-sim-note { margin-top: 18px; font: 400 13px/1.6 'Inter'; color: rgba(220,236,255,.55); text-align: center; }

/* ---------- 6 · ENGINE LANES ---------- */
.dgw-sp-lanes { display: grid; gap: 18px; }
.dgw-sp-lane { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: center; padding: 24px 26px; border-radius: 18px; background: #fff; border: 1px solid #e5edf6; position: relative; overflow: hidden; }
.dgw-sp-lane-h small { font: 700 11px/1 'JetBrains Mono'; color: var(--sp-sky-d); }
.dgw-sp-lane-h h3 { font: 700 18px/1.3 'Plus Jakarta Sans'; color: var(--sp-ink); margin: 8px 0 6px; }
.dgw-sp-lane-h p { font: 400 13.5px/1.55 'Inter'; color: #5b6b85; }
.dgw-sp-chain { position: relative; display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 6px 2px 10px; }
.dgw-sp-node { flex: none; position: relative; padding: 10px 12px; border-radius: 10px; background: #f5f9fe; border: 1px solid #dbe7f5; font: 700 12.5px/1.2 'Inter'; color: var(--sp-ink); text-align: center; min-width: 54px; transition: all .4s; }
.dgw-sp-node small { display: block; font: 500 10.5px/1.2 'Inter'; color: #7a8aa3; margin-top: 3px; }
.dgw-sp-node--end { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.dgw-sp-node--cal { background: #eef2ff; border-color: #c7d2fe; }
.dgw-sp-gap { flex: 1; min-width: 26px; position: relative; height: 2px; background: #dbe7f5; }
.dgw-sp-gap em { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font: 600 9.5px/1 'JetBrains Mono'; font-style: normal; color: #94a3b8; white-space: nowrap; }
.dgw-sp-lane.is-in .dgw-sp-node { animation: dgw-sp-lit 6s infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes dgw-sp-lit { 0%, 4% { background: #f5f9fe; } 8%, 20% { background: #e0f2fe; border-color: var(--sp-sky); box-shadow: 0 6px 16px -8px rgba(14,165,233,.6); } 30%, 100% { } }
.dgw-sp-guards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.dgw-sp-guard { padding: 22px; border-radius: 16px; background: linear-gradient(180deg, #fff, #f8fbff); border: 1px solid #e5edf6; }
.dgw-sp-guard-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 14px; color: #fff; }
.dgw-sp-guard h3 { font: 700 16px/1.3 'Plus Jakarta Sans'; color: var(--sp-ink); margin-bottom: 6px; }
.dgw-sp-guard p { font: 400 14px/1.6 'Inter'; color: #4a5a73; }

/* ---------- 7 · SETTINGS ---------- */
.dgw-sp-set { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: stretch; }
.dgw-sp-set-app { background: #fff; border-radius: 18px; border: 1px solid #e3eaf3; box-shadow: 0 40px 80px -46px rgba(11,58,110,.45); overflow: hidden; }
.dgw-sp-set-tabs { display: flex; gap: 4px; padding: 10px 14px 0; background: #f7f9fc; border-bottom: 1px solid #e9eef5; }
.dgw-sp-set-tabs span { font: 600 12.5px/1 'Inter'; color: #64748b; padding: 10px 12px; border-radius: 8px 8px 0 0; }
.dgw-sp-set-tabs span.is-on { background: #fff; color: var(--sp-ink); box-shadow: 0 -2px 0 var(--sp-sky) inset; }
.dgw-sp-set-body { padding: 18px 20px 20px; display: grid; gap: 16px; }
.dgw-sp-slider { display: grid; grid-template-columns: 1fr 64px; gap: 6px 14px; align-items: center; }
.dgw-sp-slider label { grid-column: 1 / -1; font: 600 13px/1.2 'Inter'; color: #334155; }
.dgw-sp-slider output { font: 700 13px/1 'JetBrains Mono'; color: var(--sp-sky-d); text-align: right; }
.dgw-sp-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--sp-sky) var(--p, 30%), #e2e8f0 var(--p, 30%)); outline: none; cursor: pointer; }
.dgw-sp-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--sp-sky); box-shadow: 0 4px 10px -2px rgba(14,165,233,.5); }
.dgw-sp-slider input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--sp-sky); }
.dgw-sp-advs { display: flex; gap: 8px; flex-wrap: wrap; }
.dgw-sp-adv { cursor: pointer; padding: 9px 12px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; font: 600 12.5px/1.25 'Inter'; color: #1e293b; text-align: left; }
.dgw-sp-adv small { display: block; font: 500 11px/1.3 'JetBrains Mono'; color: #64748b; margin-top: 2px; }
.dgw-sp-adv.is-on { border-color: var(--sp-sky); background: #f0f9ff; box-shadow: inset 0 0 0 1px var(--sp-sky); }
.dgw-sp-adv.is-leave { opacity: .55; text-decoration: line-through; }
.dgw-sp-hols { display: flex; gap: 8px; flex-wrap: wrap; }
.dgw-sp-hols span { font: 600 11.5px/1 'Inter'; padding: 7px 10px; border-radius: 100px; background: #fef3c7; color: #92400e; }
.dgw-sp-set-preview { border-radius: 18px; padding: 26px; background: linear-gradient(160deg, #0b2547 0%, #0b3a6e 100%); color: #e6f2ff; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.dgw-sp-set-preview::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -100px; top: -100px; background: radial-gradient(circle, rgba(14,165,233,.35), transparent 70%); }
.dgw-sp-set-preview h3 { font: 700 12px/1 'Inter'; letter-spacing: .14em; text-transform: uppercase; color: #7dd3fc; margin-bottom: 8px; }
.dgw-sp-set-preview p { font: 400 14px/1.55 'Inter'; color: rgba(220,236,255,.75); margin-bottom: 16px; position: relative; z-index: 1; }
.dgw-sp-sched { list-style: none; display: grid; gap: 8px; position: relative; z-index: 1; }
.dgw-sp-sched li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(125,211,252,.14); font: 600 13px/1.3 'Inter'; animation: dgw-sp-in .3s ease both; }
.dgw-sp-sched li b { font: 700 12px/1 'JetBrains Mono'; color: #7dd3fc; }
.dgw-sp-sched li small { display: block; font: 500 11.5px/1.3 'Inter'; color: rgba(220,236,255,.55); }
.dgw-sp-nocode { margin-top: auto; padding-top: 18px; font: 600 12.5px/1.4 'Inter'; color: #6ee7b7; position: relative; z-index: 1; }

/* ---------- 8 · DASHBOARDS (dark) ---------- */
.dgw-sp-dash { background: #0d2240; border: 1px solid rgba(125,211,252,.16); border-radius: 22px; padding: 18px; box-shadow: 0 60px 120px -50px rgba(0,0,0,.7); position: relative; }
.dgw-sp-dash-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dgw-sp-dtabs { display: inline-flex; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.06); }
.dgw-sp-dtab { cursor: pointer; border: 0; background: none; color: rgba(220,236,255,.7); font: 600 13px/1 'Inter'; padding: 10px 16px; border-radius: 9px; transition: all .2s; }
.dgw-sp-dtab.is-on { background: #fff; color: var(--sp-ink); }
.dgw-sp-ref { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 'Inter'; color: rgba(220,236,255,.7); }
.dgw-sp-ring { width: 22px; height: 22px; transform: rotate(-90deg); }
.dgw-sp-ring circle { fill: none; stroke-width: 3; }
.dgw-sp-ring .bg { stroke: rgba(255,255,255,.12); } .dgw-sp-ring .fg { stroke: #7dd3fc; stroke-dasharray: 56.5; stroke-dashoffset: 0; }
.dgw-sp-masked { font: 600 11px/1 'Inter'; color: #fcd34d; background: rgba(252,211,77,.1); border: 1px solid rgba(252,211,77,.25); padding: 6px 9px; border-radius: 100px; }
.dgw-sp-dview { display: none; } .dgw-sp-dview.is-on { display: block; animation: dgw-sp-in .35s ease; }
.dgw-sp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.dgw-sp-tile { cursor: pointer; text-align: left; border: 1px solid rgba(125,211,252,.12); background: rgba(255,255,255,.04); border-radius: 14px; padding: 16px; color: #fff; transition: all .25s; position: relative; overflow: hidden; }
.dgw-sp-tile:hover, .dgw-sp-tile.is-on { border-color: rgba(125,211,252,.5); background: rgba(14,165,233,.12); transform: translateY(-2px); }
.dgw-sp-tile small { display: block; font: 600 11.5px/1.3 'Inter'; color: rgba(220,236,255,.65); margin-bottom: 10px; }
.dgw-sp-tile b { display: block; font: 800 28px/1 'Plus Jakarta Sans'; filter: blur(6px); user-select: none; letter-spacing: -0.02em; }
.dgw-sp-tile em { font-style: normal; font: 600 11px/1 'Inter'; color: #7dd3fc; margin-top: 12px; display: block; }
.dgw-sp-tile--warn b { color: #fca5a5; } .dgw-sp-tile--ok b { color: #6ee7b7; } .dgw-sp-tile--due b { color: #fcd34d; }
.dgw-sp-tile::after { content: ''; position: absolute; right: -20px; bottom: -20px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(125,211,252,.18), transparent 70%); }
.dgw-sp-dgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.dgw-sp-dbox { border: 1px solid rgba(125,211,252,.12); background: rgba(255,255,255,.03); border-radius: 14px; padding: 16px; min-height: 200px; }
.dgw-sp-dbox h4 { font: 700 12px/1 'Inter'; letter-spacing: .08em; text-transform: uppercase; color: rgba(220,236,255,.7); margin-bottom: 14px; display: flex; justify-content: space-between; }
.dgw-sp-dbox h4 span { color: rgba(220,236,255,.4); letter-spacing: 0; text-transform: none; font-weight: 500; }
.dgw-sp-bars { display: grid; gap: 10px; }
.dgw-sp-bar { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; font: 500 12.5px/1.2 'Inter'; color: rgba(230,242,255,.85); }
.dgw-sp-bar div { height: 10px; border-radius: 10px; background: rgba(255,255,255,.06); overflow: hidden; display: flex; }
.dgw-sp-bar div i { display: block; height: 100%; width: 0; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.dgw-sp-bar div i.a { background: linear-gradient(90deg, #38bdf8, #6366f1); } .dgw-sp-bar div i.ok { background: #10b981; } .dgw-sp-bar div i.late { background: #f87171; }
.dgw-sp-trend { width: 100%; height: 150px; }
.dgw-sp-trend path.l { fill: none; stroke: #7dd3fc; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s ease; }
.dgw-sp-trend path.f { fill: url(#dgwSpG); opacity: 0; transition: opacity 1s .6s; }
.dgw-sp-dash.is-in .dgw-sp-trend path.l { stroke-dashoffset: 0; } .dgw-sp-dash.is-in .dgw-sp-trend path.f { opacity: 1; }
.dgw-sp-kpi { width: 100%; border-collapse: collapse; font: 500 12.5px/1.3 'Inter'; color: rgba(230,242,255,.85); }
.dgw-sp-kpi th { text-align: left; font: 600 10.5px/1 'Inter'; letter-spacing: .1em; text-transform: uppercase; color: rgba(220,236,255,.45); padding: 0 8px 10px; }
.dgw-sp-kpi td { padding: 10px 8px; border-top: 1px solid rgba(125,211,252,.08); }
.dgw-sp-kpi td .dgw-sp-bar { grid-template-columns: 1fr; }
.dgw-sp-drawer { position: absolute; top: 18px; right: 18px; bottom: 18px; width: min(360px, calc(100% - 36px)); background: #fff; color: var(--sp-ink); border-radius: 16px; box-shadow: -30px 0 60px -20px rgba(0,0,0,.5); padding: 18px; transform: translateX(30px); opacity: 0; pointer-events: none; transition: all .35s cubic-bezier(.2,.7,.2,1); z-index: 3; display: flex; flex-direction: column; }
.dgw-sp-drawer.is-open { transform: none; opacity: 1; pointer-events: auto; }
.dgw-sp-drawer-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.dgw-sp-drawer-h b { font: 700 15px/1.3 'Plus Jakarta Sans'; }
.dgw-sp-drawer-h button { cursor: pointer; border: 0; background: #f1f5f9; width: 30px; height: 30px; border-radius: 8px; font-size: 16px; color: #475569; }
.dgw-sp-drawer > small { font: 500 12px/1.4 'Inter'; color: #64748b; margin-bottom: 14px; }
.dgw-sp-drawer ul { list-style: none; display: grid; gap: 8px; overflow: auto; }
.dgw-sp-drawer li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef2f7; font: 600 13px/1.3 'Inter'; animation: dgw-sp-in .3s ease both; }
.dgw-sp-drawer li small { grid-column: 1; font: 500 11.5px/1.3 'Inter'; color: #64748b; }
.dgw-sp-drawer li em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font: 700 10.5px/1 'Inter'; padding: 5px 7px; border-radius: 6px; background: #fee2e2; color: #b91c1c; }
.dgw-sp-drawer li em.ok { background: #d1fae5; color: #047857; } .dgw-sp-drawer li em.due { background: #fef3c7; color: #92400e; }
.dgw-sp-dash-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.dgw-sp-dash-notes div { font: 400 14.5px/1.6 'Inter'; color: rgba(220,236,255,.75); padding-left: 16px; border-left: 2px solid rgba(125,211,252,.35); }
.dgw-sp-dash-notes b { display: block; color: #fff; font: 700 15px/1.3 'Plus Jakarta Sans'; margin-bottom: 4px; }

/* ---------- 9 · QA ---------- */
.dgw-sp-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.dgw-sp-fast { border-radius: 20px; padding: 26px; background: #fff; border: 1px solid #e5edf6; box-shadow: 0 40px 80px -50px rgba(11,58,110,.45); }
.dgw-sp-fast-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.dgw-sp-fast-top h3 { font: 700 17px/1.3 'Plus Jakarta Sans'; color: var(--sp-ink); margin-right: auto; }
.dgw-sp-switch { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 'Inter'; color: #475569; border: 0; background: none; }
.dgw-sp-switch i { width: 40px; height: 22px; border-radius: 22px; background: #cbd5e1; position: relative; transition: background .25s; }
.dgw-sp-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.dgw-sp-switch.is-on i { background: #6366f1; } .dgw-sp-switch.is-on i::after { transform: translateX(18px); }
.dgw-sp-fast-list { list-style: none; display: grid; gap: 6px; margin-bottom: 18px; }
.dgw-sp-fast-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; background: #f8fafc; font: 600 12.5px/1.2 'Inter'; color: #94a3b8; transition: all .3s; }
.dgw-sp-fast-list li b { font: 700 11.5px/1 'JetBrains Mono'; }
.dgw-sp-fast-list li span { font: 600 11.5px/1 'JetBrains Mono'; }
.dgw-sp-fast-list li.is-done { background: #ecfdf5; color: #065f46; }
.dgw-sp-fast-list li.is-flag { background: #fef2f2; color: #b91c1c; }
.dgw-sp-fast-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 500 13px/1.4 'Inter'; color: #5b6b85; }
.dgw-sp-fast-foot b { color: var(--sp-ink); }
.dgw-sp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dgw-sp-check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid #e5edf6; font: 500 14px/1.45 'Inter'; color: #33415a; }
.dgw-sp-check::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px; background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat; }
.dgw-sp-tz { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dgw-sp-tz div { padding: 14px; border-radius: 12px; background: linear-gradient(180deg, #f0f9ff, #fff); border: 1px solid #d6e9fb; text-align: center; }
.dgw-sp-tz small { display: block; font: 600 11px/1 'Inter'; letter-spacing: .1em; text-transform: uppercase; color: #64748b; margin-bottom: 8px; }
.dgw-sp-tz b { font: 700 20px/1 'JetBrains Mono'; color: var(--sp-deep); }

/* ---------- 10 · RESULTS ---------- */
.dgw-sp-results { position: relative; padding: 110px 0; overflow: hidden; background: linear-gradient(120deg, #0369a1 0%, #0ea5e9 55%, #38bdf8 100%); color: #fff; }
.dgw-sp-results .dgw-sp-eyebrow { color: #e0f2fe; } .dgw-sp-results .dgw-sp-eyebrow::before { background: #fff; }
.dgw-sp-results .dgw-sp-h2 { color: #fff; }
.dgw-sp-results .dgw-sp-lead { color: rgba(255,255,255,.88); }
.dgw-sp-cloud { position: absolute; border-radius: 100px; background: rgba(255,255,255,.12); filter: blur(2px); }
.dgw-sp-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dgw-sp-res { padding: 24px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); transition: transform .3s, background .3s; }
.dgw-sp-res:hover { transform: translateY(-4px); background: rgba(255,255,255,.18); }
.dgw-sp-res b { display: block; font: 800 22px/1.15 'Plus Jakarta Sans'; margin-bottom: 8px; letter-spacing: -0.02em; }
.dgw-sp-res p { font: 400 14.5px/1.6 'Inter'; color: rgba(255,255,255,.88); }

/* ---------- 11 · STACK + PHASE 2 ---------- */
.dgw-sp-stack { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 64px; justify-content: center; }
.dgw-sp-stack span { font: 600 13px/1 'Inter'; color: var(--sp-deep); padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid #dbe7f5; box-shadow: 0 6px 14px -10px rgba(11,58,110,.3); }
.dgw-sp-hub { position: relative; max-width: 880px; margin: 0 auto; height: 360px; }
.dgw-sp-hub svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dgw-sp-hub svg path { fill: none; stroke: #94c9ee; stroke-width: 1.6; stroke-dasharray: 5 6; animation: dgw-sp-dash 18s linear infinite; }
.dgw-sp-hub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 230px; padding: 22px; border-radius: 20px; text-align: center; background: linear-gradient(160deg, #0b2547, #0b3a6e); color: #fff; box-shadow: 0 30px 60px -30px rgba(11,58,110,.7), 0 0 0 10px rgba(14,165,233,.08); }
.dgw-sp-hub-core b { display: block; font: 800 17px/1.25 'Plus Jakarta Sans'; margin-bottom: 6px; }
.dgw-sp-hub-core small { font: 500 12.5px/1.45 'Inter'; color: rgba(220,236,255,.75); }
.dgw-sp-plug { position: absolute; width: 200px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px dashed #9cc8ec; font: 700 14px/1.3 'Plus Jakarta Sans'; color: var(--sp-ink); }
.dgw-sp-plug small { display: block; font: 600 10px/1 'Inter'; letter-spacing: .12em; text-transform: uppercase; color: #6366f1; margin-bottom: 6px; }
.dgw-sp-plug--1 { left: 0; top: 10px; } .dgw-sp-plug--2 { right: 0; top: 10px; } .dgw-sp-plug--3 { left: 0; bottom: 10px; } .dgw-sp-plug--4 { right: 0; bottom: 10px; }

/* ---------- 12 · FAQ + CTA ---------- */
.dgw-sp-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.dgw-sp-faq details { background: #fff; border: 1px solid #e3ecf6; border-radius: 14px; padding: 0 22px; transition: box-shadow .25s; }
.dgw-sp-faq details[open] { box-shadow: 0 20px 40px -28px rgba(11,58,110,.4); border-color: #bfe0fa; }
.dgw-sp-faq summary { cursor: pointer; list-style: none; padding: 20px 0; font: 700 16.5px/1.4 'Plus Jakarta Sans'; color: var(--sp-ink); display: flex; justify-content: space-between; gap: 16px; }
.dgw-sp-faq summary::-webkit-details-marker { display: none; }
.dgw-sp-faq summary::after { content: '+'; font: 500 22px/1 'Inter'; color: var(--sp-sky-d); transition: transform .25s; }
.dgw-sp-faq details[open] summary::after { transform: rotate(45deg); }
.dgw-sp-faq details p { padding: 0 0 20px; font: 400 15px/1.7 'Inter'; color: #3b4a63; }
.dgw-sp-cta { position: relative; padding: 120px 0; overflow: hidden; text-align: center; background: radial-gradient(800px 400px at 50% 0%, rgba(14,165,233,.3), transparent 70%), #061428; color: #fff; }
.dgw-sp-cta h2 { font: 800 clamp(30px, 4vw, 50px)/1.08 'Plus Jakarta Sans'; max-width: 820px; margin: 0 auto 18px; letter-spacing: -0.03em; }
.dgw-sp-cta p { font: 400 17.5px/1.65 'Inter'; color: rgba(220,236,255,.78); max-width: 640px; margin: 0 auto 32px; }
.dgw-sp-cta .dgw-sp-hero-cta { justify-content: center; }
.dgw-sp-cta .dgw-sp-btn--ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.2); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .dgw-nav-links { display: none; }
  .dgw-sp-hero-inner, .dgw-sp-2col, .dgw-sp-sim, .dgw-sp-set, .dgw-sp-qa { grid-template-columns: 1fr; gap: 40px; }
  .dgw-sp-hero-visual .dgw-sp-card { transform: none; }
  .dgw-sp-hero-visual { max-width: 560px; }
  .dgw-sp-clauses { grid-template-columns: 1fr 1fr; }
  .dgw-sp-lane { grid-template-columns: 1fr; gap: 16px; }
  .dgw-sp-tiles { grid-template-columns: 1fr 1fr; }
  .dgw-sp-dgrid { grid-template-columns: 1fr; }
  .dgw-sp-res-grid, .dgw-sp-guards { grid-template-columns: 1fr 1fr; }
  .dgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .dgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 720px) {
  .dgw-nav-inner { padding: 0 16px; }
  .dgw-sp-inner, .dgw-sp-hero-inner { padding-left: 16px; padding-right: 16px; }
  .dgw-sp-hero { padding: 116px 0 72px; }
  .dgw-sp-sec, .dgw-sp-results, .dgw-sp-cta { padding: 72px 0; }
  .dgw-sp-meta { grid-template-columns: 1fr 1fr; }
  .dgw-sp-float { display: none; }
  .dgw-sp-t { width: 28px; height: 28px; font-size: 10px; }
  .dgw-sp-mess { height: auto; display: grid; gap: 14px; }
  .dgw-sp-note, .dgw-sp-tasklist, .dgw-sp-ghost { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none; }
  .dgw-sp-clauses, .dgw-sp-rules, .dgw-sp-guards, .dgw-sp-res-grid, .dgw-sp-checks, .dgw-sp-dash-notes { grid-template-columns: 1fr; }
  .dgw-sp-outcomes { grid-template-columns: 1fr 1fr; }
  .dgw-sp-sim-lbl span:last-child { display: none; }
  .dgw-sp-form-row { grid-template-columns: 1fr; }
  .dgw-sp-track { grid-template-columns: 1fr; gap: 8px; }
  .dgw-sp-tiles { grid-template-columns: 1fr 1fr; }
  .dgw-sp-tile b { font-size: 22px; }
  .dgw-sp-bar { grid-template-columns: 96px 1fr; }
  .dgw-sp-hub { height: auto; display: grid; gap: 12px; }
  .dgw-sp-hub svg { display: none; }
  .dgw-sp-hub-core, .dgw-sp-plug { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: auto; }
  .dgw-sp-hub-core { order: -1; }
  .dgw-footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   DIGIWAH — CASE STUDY: EXCELOHUNT
   Prefix: dgw-eh-  (reuses dgw-nav-* / dgw-footer-*)
   ============================================================ */

:root {
  --brand: #010ED0;
  --brand-light: #7c8fff;
  --accent: #FF7A45;
  --accent-soft: #ffb284;
  --navy-deep: #050a2e;
  --navy: #0a1145;
  --ink: #0a0f2c;
  --muted: #6b7280;
  --line: rgba(255,255,255,0.08);
  --surf-light: #f4f7fc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }

/* ===== NAVBAR (inherited) ===== */
.dgw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(5,10,46,0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.dgw-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dgw-nav-logo { display: flex; align-items: center; }
.dgw-nav-logo-img { height: 38px; width: auto; display: block; }
.dgw-nav-links { display: flex; gap: 30px; }
.dgw-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.dgw-nav-links a:hover, .dgw-nav-links a.is-active { color: #fff; }
.dgw-nav-cta { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(255,122,69,0.35); }
.dgw-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,122,69,0.5); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }


/* ===== FOOTER (inherited) ===== */
.dgw-footer { position: relative; background: #040820; color: #cdd5ff; padding: 96px 24px 36px; overflow: hidden; border-top: 1px solid rgba(124,143,255,0.10); }
.dgw-footer-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -250px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(124,143,255,0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; }
.dgw-footer-inner { position: relative; max-width: 1240px; margin: 0 auto; z-index: 1; }
.dgw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; margin-bottom: 64px; }
.dgw-footer-brand { max-width: 360px; }
.dgw-footer-logo-wrap { display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 8px 18px -10px rgba(124,143,255,0.4); }
.dgw-footer-logo { height: 40px; width: auto; display: block; }
.dgw-footer-tagline { font: 400 14.5px/1.65 'Inter'; color: rgba(205,213,255,0.7); margin: 0 0 26px; }
.dgw-footer-partners { display: flex; gap: 10px; flex-wrap: wrap; }
.dgw-footer-partner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.16); border-radius: 10px; transition: border-color 0.25s ease, transform 0.25s ease; }
.dgw-footer-partner:hover { border-color: rgba(124,143,255,0.32); transform: translateY(-2px); }
.dgw-footer-partner-mark { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.02em; }
.dgw-footer-partner-mark--zoho { background: linear-gradient(135deg, #c1272d, #e63946); }
.dgw-footer-partner-mark--meta { background: linear-gradient(135deg, #1877f2, #4267b2); }
.dgw-footer-partner-line1 { font: 700 12px/1.1 'Plus Jakarta Sans'; color: #fff; letter-spacing: -0.01em; margin-bottom: 1px; }
.dgw-footer-partner-line2 { font: 600 9.5px/1.1 'Inter'; color: rgba(205,213,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.dgw-footer-col { min-width: 0; }
.dgw-footer-heading { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; margin: 0 0 22px; }
.dgw-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.dgw-footer-list a, .dgw-footer-list li, .dgw-footer-list span { font: 500 14px/1.4 'Inter'; color: rgba(205,213,255,0.72); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-list a:hover { color: #ffb284; }
.dgw-footer-list--contact li { display: flex; align-items: flex-start; gap: 10px; }
.dgw-footer-list--contact li svg { color: rgba(124,143,255,0.7); flex-shrink: 0; margin-top: 4px; }
.dgw-footer-socials { display: flex; gap: 10px; margin-top: 26px; }
.dgw-footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(124,143,255,0.18); color: rgba(205,213,255,0.78); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.dgw-footer-social:hover { background: rgba(255,122,69,0.14); border-color: #FF7A45; color: #ffb284; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(255,122,69,0.4); }
.dgw-footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,143,255,0.18), transparent); margin-bottom: 28px; }
.dgw-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.dgw-footer-copy { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); letter-spacing: 0.01em; }
.dgw-footer-legal { display: flex; align-items: center; gap: 12px; font: 500 13px/1 'Inter'; }
.dgw-footer-legal a { color: rgba(205,213,255,0.6); text-decoration: none; transition: color 0.2s ease; }
.dgw-footer-legal a:hover { color: #fff; }
.dgw-footer-legal-sep { color: rgba(124,143,255,0.30); }
.dgw-footer-made { font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.45); padding: 6px 12px; border: 1px solid rgba(124,143,255,0.18); border-radius: 100px; background: rgba(255,255,255,0.02); }



/* ===== EXCELOHUNT IDENTITY ===== */
:root {
  --eh-navy: #0a1144;
  --eh-ink: #070c33;
  --eh-indigo: #3d4fd6;
  --eh-indigo-l: #8b98ff;
  --eh-gold: #f5b83d;
  --eh-mist: #f5f6fc;
  --eh-line: #e3e6f3;
  --eh-text: #3b4466;
  --eh-ok: #18a874;
}
.dgw-eh-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.dgw-eh-grad { background: linear-gradient(100deg, #aab4ff 0%, #f5b83d 60%, #ff9b5c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dgw-eh-eyebrow { font: 700 12px/1 'Inter'; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eh-indigo); margin-bottom: 14px; }
.dgw-eh-eyebrow--light { color: var(--eh-gold); }
.dgw-eh-h2 { font: 800 clamp(26px, 3.2vw, 40px)/1.14 'Plus Jakarta Sans'; color: var(--eh-ink); letter-spacing: -0.03em; }
.dgw-eh-h2--light { color: #fff; }
.dgw-eh-p { font: 400 16.5px/1.7 'Inter'; color: var(--eh-text); margin-top: 16px; }
.dgw-eh-p--center { max-width: 720px; margin-left: auto; margin-right: auto; }
.dgw-eh-p--light { color: rgba(214,221,255,0.75); }
.dgw-eh-head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.dgw-eh-sec { position: relative; padding: 100px 0; background: #fff; overflow: hidden; }
.dgw-eh-sec--mist { background: var(--eh-mist); }
.dgw-eh-sec--dark { background: radial-gradient(110% 90% at 50% 0%, #121b6b 0%, var(--eh-navy) 50%, #050a2e 100%); color: #fff; }
.dgw-eh-dark-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(139,152,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(139,152,255,0.08) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); pointer-events: none; }

/* ===== HERO ===== */
.dgw-eh-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 10% 0%, #16207a 0%, var(--eh-navy) 50%, #040826 100%); color: #fff; padding: 140px 0 100px; }
.dgw-eh-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(139,152,255,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(139,152,255,0.09) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 65% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 65% 40%, #000 20%, transparent 75%); }
.dgw-eh-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.dgw-eh-glow--a { width: 560px; height: 560px; top: -200px; right: -60px; background: radial-gradient(circle, rgba(61,79,214,0.6), transparent 70%); }
.dgw-eh-glow--b { width: 420px; height: 420px; bottom: -230px; left: 25%; background: radial-gradient(circle, rgba(245,184,61,0.25), transparent 70%); }
.dgw-eh-hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.dgw-eh-crumb { font: 500 13px/1 'Inter'; color: rgba(205,213,255,0.55); margin-bottom: 26px; }
.dgw-eh-crumb a:hover { color: #fff; }
.dgw-eh-crumb span { margin: 0 6px; opacity: 0.6; }
.dgw-eh-logo-chip { display: inline-flex; background: #fff; padding: 12px 18px; border-radius: 14px; margin-bottom: 24px; box-shadow: 0 14px 30px -14px rgba(0,0,0,0.6); }
.dgw-eh-logo-chip img { height: 28px; width: auto; display: block; }
.dgw-eh-title { font: 800 clamp(34px, 4.6vw, 56px)/1.06 'Plus Jakarta Sans'; letter-spacing: -0.035em; margin-bottom: 22px; }
.dgw-eh-sub { font: 400 17px/1.65 'Inter'; color: rgba(214,221,255,0.78); max-width: 560px; margin-bottom: 32px; }
.dgw-eh-meta { display: flex; flex-wrap: wrap; gap: 0; }
.dgw-eh-meta > div { padding: 0 24px; border-left: 1px solid rgba(139,152,255,0.25); }
.dgw-eh-meta > div:first-child { padding-left: 0; border-left: 0; }
.dgw-eh-meta span { display: block; font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(205,213,255,0.5); margin-bottom: 8px; }
.dgw-eh-meta strong { font: 700 15px/1.2 'Plus Jakarta Sans'; color: #fff; }

/* hero invoice */
.dgw-eh-hinv { position: relative; background: #fff; color: var(--eh-ink); border-radius: 20px; padding: 26px 26px 20px; box-shadow: 0 50px 90px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1); transform: perspective(1200px) rotateY(-7deg) rotateX(4deg); }
.dgw-eh-hinv::before { content: ''; position: absolute; inset: -14px; border-radius: 28px; border: 1px solid rgba(139,152,255,0.3); background: rgba(255,255,255,0.03); z-index: -1; }
.dgw-eh-hinv.is-flip [data-h-amt], .dgw-eh-hinv.is-flip [data-h-total], .dgw-eh-hinv.is-flip [data-h-inr], .dgw-eh-hinv.is-flip [data-h-cur], .dgw-eh-hinv.is-flip [data-h-client] { animation: dgwEhFlip 0.5s ease; }
@keyframes dgwEhFlip { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.dgw-eh-hinv-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px dashed var(--eh-line); margin-bottom: 16px; }
.dgw-eh-hinv-lbl { font: 800 18px/1 'Plus Jakarta Sans'; letter-spacing: -0.02em; margin-bottom: 6px; }
.dgw-eh-hinv-no { font: 500 12.5px/1 'JetBrains Mono', monospace; color: #8a91ad; }
.dgw-eh-hinv-cur { display: inline-block; font: 700 13px/1 'JetBrains Mono', monospace; color: #fff; background: var(--eh-indigo); padding: 7px 10px; border-radius: 8px; box-shadow: 0 8px 16px -8px var(--eh-indigo); }
.dgw-eh-hinv-to { margin-bottom: 16px; }
.dgw-eh-hinv-to span { display: block; font: 600 10.5px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: #9aa1bb; margin-bottom: 6px; }
.dgw-eh-hinv-to strong { display: inline-block; font: 700 15px/1.3 'Plus Jakarta Sans'; }
.dgw-eh-hinv-row { display: flex; justify-content: space-between; padding: 10px 0; font: 500 14px/1.3 'Inter'; color: var(--eh-text); border-bottom: 1px solid #f0f2f8; }
.dgw-eh-hinv-row b, .dgw-eh-hinv-total b { display: inline-block; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--eh-ink); }
.dgw-eh-hinv-row--muted { color: #9aa1bb; }
.dgw-eh-hinv-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; font: 800 16px/1 'Plus Jakarta Sans'; }
.dgw-eh-hinv-total b { font-size: 22px; font-weight: 700; }
.dgw-eh-hinv-inr { font: 500 12.5px/1.4 'Inter'; color: #6b7391; margin-bottom: 14px; }
.dgw-eh-hinv-inr b { display: inline-block; font-family: 'JetBrains Mono', monospace; color: var(--eh-ink); }
.dgw-eh-hinv-inr em { font-style: normal; color: #9aa1bb; }
.dgw-eh-hinv-lut { font: 600 11.5px/1.45 'Inter'; color: #7a5a10; background: #fff7e3; border: 1px dashed #efcf86; border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
.dgw-eh-hinv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dgw-eh-hinv-pay { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 'Inter'; color: var(--eh-indigo); }
.dgw-eh-hinv-pay i { width: 8px; height: 8px; border-radius: 50%; background: var(--eh-indigo); }
.dgw-eh-hinv-stamp { font: 800 11px/1 'Inter'; letter-spacing: 0.12em; color: var(--eh-ok); border: 2px solid var(--eh-ok); padding: 6px 9px; border-radius: 6px; transform: rotate(-6deg); }
.dgw-eh-hinv-tabs { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px; background: rgba(255,255,255,0.08); border: 1px solid rgba(139,152,255,0.25); border-radius: 100px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dgw-eh-hinv-tabs span { font: 700 11px/1 'JetBrains Mono', monospace; color: rgba(214,221,255,0.6); padding: 7px 10px; border-radius: 100px; transition: background 0.3s, color 0.3s; }
.dgw-eh-hinv-tabs span.is-on { background: var(--eh-gold); color: var(--eh-ink); }

/* ===== CHALLENGE ===== */
.dgw-eh-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.dgw-eh-sheet { background: #fff; border-radius: 16px; border: 1px solid var(--eh-line); box-shadow: 0 30px 60px -36px rgba(10,17,68,0.4); overflow: hidden; transform: rotate(1.2deg); }
.dgw-eh-sheet-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #eef7f0; border-bottom: 1px solid #d9eadc; }
.dgw-eh-sheet-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3dbd5; }
.dgw-eh-sheet-bar span { margin-left: 8px; font: 600 12px/1 'JetBrains Mono', monospace; color: #3f7a52; }
.dgw-eh-sheet-head, .dgw-eh-sheet-row { display: grid; grid-template-columns: 1.1fr 1fr 0.8fr 1fr; }
.dgw-eh-sheet-head span { font: 700 11px/1 'Inter'; letter-spacing: 0.08em; text-transform: uppercase; color: #8a91ad; padding: 12px 14px; background: #fafbfe; border-bottom: 1px solid var(--eh-line); }
.dgw-eh-sheet-row { position: relative; border-bottom: 1px solid #f0f2f8; padding-bottom: 26px; }
.dgw-eh-sheet-row:last-child { border-bottom: 0; }
.dgw-eh-sheet-row > span { font: 500 13.5px/1 'JetBrains Mono', monospace; color: var(--eh-text); padding: 14px 14px 6px; }
.dgw-eh-bad { color: #d93b3b !important; font-weight: 700 !important; position: relative; }
.dgw-eh-bad::after { content: ''; position: absolute; left: 8px; right: 8px; top: 6px; bottom: 0; border: 2px solid rgba(217,59,59,0.5); border-radius: 50%; transform: rotate(-3deg); }
.dgw-eh-note { position: absolute; left: 14px; bottom: 8px; font: 500 12px/1 'Inter'; font-style: normal; color: #b0485a; }
.dgw-eh-note::before { content: '↳ '; }

/* ===== SIMULATOR ===== */
.dgw-eh-sim { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; background: var(--eh-mist); border: 1px solid var(--eh-line); border-radius: 24px; padding: 36px; }
.dgw-eh-sim-lbl { font: 700 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: #8a91ad; margin-bottom: 12px; }
.dgw-eh-sim-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.dgw-eh-sim-btns button { font: 600 13.5px/1 'Inter'; color: var(--eh-text); background: #fff; border: 1px solid var(--eh-line); padding: 11px 14px; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.dgw-eh-sim-btns button:hover { border-color: var(--eh-indigo-l); }
.dgw-eh-sim-btns button.is-on { background: var(--eh-navy); color: #fff; border-color: var(--eh-navy); box-shadow: 0 10px 20px -10px var(--eh-navy); }
.dgw-eh-range { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.dgw-eh-range input { flex: 1; accent-color: var(--eh-indigo); }
.dgw-eh-range output { min-width: 96px; text-align: right; font: 700 16px/1 'JetBrains Mono', monospace; color: var(--eh-ink); }
.dgw-eh-checks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dgw-eh-checks li { display: flex; align-items: center; gap: 12px; font: 500 14.5px/1.4 'Inter'; color: var(--eh-ink); padding: 12px 14px; background: #fff; border: 1px solid var(--eh-line); border-radius: 12px; transition: opacity 0.3s; }
.dgw-eh-checks li i { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--eh-ok); position: relative; }
.dgw-eh-checks li i::after { content: ''; position: absolute; left: 7px; top: 4px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dgw-eh-checks li.is-off { opacity: 0.4; }
.dgw-eh-checks li.is-off i { background: #c3c8da; }
.dgw-eh-sim-note { margin-top: 14px; font: 500 12px/1 'Inter'; color: #9aa1bb; }
.dgw-eh-inv { background: #fff; border-radius: 18px; padding: 30px; box-shadow: 0 40px 70px -40px rgba(10,17,68,0.5), 0 0 0 1px var(--eh-line); }
.dgw-eh-inv.is-flip [data-i-sub], .dgw-eh-inv.is-flip [data-i-total], .dgw-eh-inv.is-flip [data-i-tax], .dgw-eh-inv.is-flip [data-i-country], .dgw-eh-inv.is-flip [data-i-inr] { animation: dgwEhFlip 0.4s ease; }
.dgw-eh-inv-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 2px solid var(--eh-navy); margin-bottom: 20px; }
.dgw-eh-inv-top img { height: 22px; width: auto; }
.dgw-eh-inv-title { text-align: right; font: 800 15px/1 'Plus Jakarta Sans'; letter-spacing: 0.06em; color: var(--eh-navy); }
.dgw-eh-inv-title small { display: block; margin-top: 6px; font: 500 12px/1 'JetBrains Mono', monospace; color: #9aa1bb; letter-spacing: 0; }
.dgw-eh-inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.dgw-eh-inv-parties span { display: block; font: 600 10.5px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; color: #9aa1bb; margin-bottom: 7px; }
.dgw-eh-inv-parties strong { display: block; font: 700 15px/1.3 'Plus Jakarta Sans'; color: var(--eh-ink); }
.dgw-eh-inv-parties em { display: inline-block; font: 500 13px/1.4 'Inter'; font-style: normal; color: var(--eh-text); }
.dgw-eh-inv-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.dgw-eh-inv-table th { text-align: left; font: 700 11px/1 'Inter'; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--eh-navy); padding: 10px 12px; }
.dgw-eh-inv-table th:last-child, .dgw-eh-inv-table td:last-child { text-align: right; }
.dgw-eh-inv-table td { padding: 14px 12px; border-bottom: 1px solid #eef0f7; font: 500 14px/1.4 'Inter'; color: var(--eh-ink); vertical-align: top; }
.dgw-eh-inv-table td:last-child { font-family: 'JetBrains Mono', monospace; font-weight: 600; white-space: nowrap; }
.dgw-eh-inv-table td small { display: block; font-size: 12px; color: #9aa1bb; margin-top: 3px; }
.dgw-eh-inv-tax td { color: var(--eh-text); }
.dgw-eh-inv-table tfoot td { border-bottom: 0; font: 800 17px/1 'Plus Jakarta Sans'; padding-top: 16px; }
.dgw-eh-inv-table tfoot td:last-child { font: 700 20px/1 'JetBrains Mono', monospace; color: var(--eh-indigo); }
.dgw-eh-inv-fx { font: 500 13px/1.5 'Inter'; color: var(--eh-text); background: #f3f5ff; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.dgw-eh-inv-fx b { display: inline-block; font-family: 'JetBrains Mono', monospace; color: var(--eh-ink); }
.dgw-eh-inv-lut { font: 600 12px/1.5 'Inter'; color: #7a5a10; background: #fff7e3; border: 1px dashed #efcf86; border-radius: 10px; padding: 10px 12px; }

/* ===== MONEY-IN FLOW ===== */
.dgw-eh-flow { max-width: 1040px; margin: 0 auto; }
.dgw-eh-steps { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dgw-eh-steps button { width: 100%; text-align: left; font: 600 13px/1.3 'Inter'; color: rgba(214,221,255,0.6); background: rgba(255,255,255,0.03); border: 1px solid rgba(139,152,255,0.18); border-radius: 12px; padding: 12px; cursor: pointer; transition: all 0.25s; }
.dgw-eh-steps button span { display: block; font: 700 11px/1 'JetBrains Mono', monospace; color: rgba(139,152,255,0.7); margin-bottom: 7px; }
.dgw-eh-steps button.is-done { color: rgba(214,221,255,0.85); }
.dgw-eh-steps button.is-on { color: #fff; background: rgba(61,79,214,0.35); border-color: var(--eh-indigo-l); box-shadow: 0 12px 26px -14px var(--eh-indigo); }
.dgw-eh-steps button.is-on span { color: var(--eh-gold); }
.dgw-eh-steps-bar { height: 3px; background: rgba(139,152,255,0.15); border-radius: 3px; margin: 14px 0 28px; overflow: hidden; }
.dgw-eh-steps-bar i { display: block; height: 100%; width: 16%; background: linear-gradient(90deg, var(--eh-indigo-l), var(--eh-gold)); transition: width 0.5s ease; }
.dgw-eh-stage { position: relative; min-height: 270px; }
.dgw-eh-panel { display: none; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 34px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); border: 1px solid rgba(139,152,255,0.22); }
.dgw-eh-panel.is-on { display: grid; animation: dgwEhFlip 0.45s ease; }
.dgw-eh-panel-txt h3 { font: 800 24px/1.2 'Plus Jakarta Sans'; letter-spacing: -0.02em; margin-bottom: 12px; color: #fff; }
.dgw-eh-panel-txt p { font: 400 15.5px/1.7 'Inter'; color: rgba(214,221,255,0.78); }
.dgw-eh-mock { position: relative; background: #fff; color: var(--eh-ink); border-radius: 16px; padding: 22px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); transform: perspective(900px) rotateY(-5deg); }
.dgw-eh-mock-h { font: 800 15px/1 'Plus Jakarta Sans'; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--eh-line); }
.dgw-eh-mock-r { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font: 500 13.5px/1.3 'Inter'; color: #6b7391; }
.dgw-eh-mock-r b { color: var(--eh-ink); font-weight: 600; text-align: right; }
.dgw-eh-mock-tag { position: absolute; top: 18px; right: 18px; font: 700 11px/1 'Inter'; color: var(--eh-indigo); background: #eef0ff; padding: 6px 9px; border-radius: 100px; }
.dgw-eh-mock-tag--ok { color: var(--eh-ok); background: #e6f7ef; }

/* ===== RESULTS ===== */
.dgw-eh-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.dgw-eh-res { background: #fff; border: 1px solid var(--eh-line); border-radius: 18px; padding: 26px 22px; transition: transform 0.3s, box-shadow 0.3s; }
.dgw-eh-res:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(61,79,214,0.5); }
.dgw-eh-res-ic { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 10px; border-radius: 14px; background: linear-gradient(135deg, var(--eh-navy), var(--eh-indigo)); color: #fff; font: 800 14px/1 'JetBrains Mono', monospace; margin-bottom: 18px; box-shadow: 0 12px 24px -12px var(--eh-indigo); }
.dgw-eh-res h3 { font: 800 17px/1.3 'Plus Jakarta Sans'; color: var(--eh-ink); margin-bottom: 8px; }
.dgw-eh-res p { font: 400 14.5px/1.6 'Inter'; color: var(--eh-text); }
.dgw-eh-stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dgw-eh-stack span { font: 600 13px/1 'Inter'; color: var(--eh-navy); background: #fff; border: 1px solid var(--eh-line); padding: 9px 14px; border-radius: 100px; }

/* ===== FAQ ===== */
.dgw-eh-faq-wrap { max-width: 860px; }
.dgw-eh-faq { display: flex; flex-direction: column; gap: 12px; }
.dgw-eh-faq details { border: 1px solid var(--eh-line); border-radius: 14px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.dgw-eh-faq details[open] { border-color: rgba(61,79,214,0.3); box-shadow: 0 16px 36px -26px rgba(61,79,214,0.6); }
.dgw-eh-faq summary { list-style: none; cursor: pointer; padding: 19px 54px 19px 22px; position: relative; font: 700 16px/1.4 'Plus Jakarta Sans'; color: var(--eh-ink); }
.dgw-eh-faq summary::-webkit-details-marker { display: none; }
.dgw-eh-faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #eef0ff; color: var(--eh-indigo); font: 600 18px/26px 'Inter'; text-align: center; transition: transform 0.25s; }
.dgw-eh-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.dgw-eh-faq details p { padding: 0 22px 20px; font: 400 15px/1.65 'Inter'; color: var(--eh-text); }

/* ===== CTA ===== */
.dgw-eh-cta { position: relative; overflow: hidden; background: var(--eh-navy); color: #fff; padding: 100px 24px; text-align: center; }
.dgw-eh-cta-glow { position: absolute; width: 620px; height: 620px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(61,79,214,0.5), transparent 68%); filter: blur(50px); }
.dgw-eh-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.dgw-eh-cta-title { font: 800 clamp(28px, 3.6vw, 42px)/1.15 'Plus Jakarta Sans'; letter-spacing: -0.03em; margin-bottom: 16px; }
.dgw-eh-cta-p { font: 400 16.5px/1.65 'Inter'; color: rgba(214,221,255,0.75); margin-bottom: 30px; }
.dgw-eh-cta-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.dgw-eh-btn { display: inline-block; background: var(--accent); color: #fff; padding: 15px 26px; border-radius: 10px; font: 700 15px/1 'Inter'; box-shadow: 0 12px 30px -10px rgba(255,122,69,0.7); transition: transform 0.2s, box-shadow 0.2s; }
.dgw-eh-btn:hover { transform: translateY(-2px); }
.dgw-eh-btn--ghost { background: transparent; border: 1px solid rgba(214,221,255,0.3); box-shadow: none; }
.dgw-eh-btn--ghost:hover { border-color: #fff; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1080px) {
  .dgw-eh-hero-inner, .dgw-eh-split, .dgw-eh-sim { grid-template-columns: 1fr; gap: 48px; }
  .dgw-eh-hinv { transform: none; max-width: 520px; margin-bottom: 40px; }
  .dgw-eh-results { grid-template-columns: 1fr 1fr; }
  .dgw-eh-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .dgw-nav-links { display: none; }
  .dgw-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .dgw-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 680px) {
  .dgw-nav-inner, .dgw-eh-hero-inner, .dgw-eh-inner { padding: 0 16px; }
  .dgw-nav-cta { padding: 9px 14px; font-size: 13px; }
  .dgw-eh-hero { padding: 112px 0 72px; }
  .dgw-eh-sub { font-size: 15.5px; }
  .dgw-eh-meta { gap: 14px 0; }
  .dgw-eh-meta > div { padding: 0 14px; }
  .dgw-eh-hinv { padding: 20px 18px 16px; }
  .dgw-eh-sec { padding: 64px 0; }
  .dgw-eh-head { margin-bottom: 32px; }
  .dgw-eh-sheet { transform: none; }
  .dgw-eh-sheet-head span, .dgw-eh-sheet-row > span { padding-left: 10px; padding-right: 6px; font-size: 12px; }
  .dgw-eh-sim { padding: 18px; border-radius: 18px; }
  .dgw-eh-inv { padding: 20px 16px; }
  .dgw-eh-inv-parties { grid-template-columns: 1fr; gap: 12px; }
  .dgw-eh-steps { grid-template-columns: 1fr 1fr; }
  .dgw-eh-panel { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .dgw-eh-mock { transform: none; }
  .dgw-eh-results { grid-template-columns: 1fr; }
  .dgw-eh-cta { padding: 72px 16px; }
  .dgw-footer { padding: 72px 22px 28px; }
  .dgw-footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  .dgw-footer-bottom { flex-direction: column; text-align: center; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dgw-eh-panel.is-on, .dgw-eh-hinv.is-flip *, .dgw-eh-inv.is-flip * { animation: none !important; }
  html { scroll-behavior: auto; }
}