/* =====================================================================
   v2 — white→red theme, visible cards, tight rhythm, motion
   Loaded after wdm.css (before page CSS).
   ===================================================================== */
:root {
  --wdm-line: #f0dde1;
  --wdm-line-2: #ead3d8;
  --wdm-soft: #fff3f5;
  --wdm-soft-2: #ffe9ed;
  --wdm-grad-soft: linear-gradient(135deg, #fff 0%, #ffecef 100%);
  --wdm-shadow-card: 0 1px 2px rgba(18,20,43,.05), 0 8px 24px rgba(160,20,40,.09);
  --wdm-shadow-card-hover: 0 2px 4px rgba(18,20,43,.06), 0 22px 48px rgba(160,20,40,.18);
}
body.wdm-body { background: linear-gradient(180deg, #fff 0%, #fff6f7 50%, #fff 100%); }

/* ---- tight vertical rhythm ---- */
.wdm-section { padding: 44px 0 !important; background: transparent; }
.wdm-section--sm { padding: 32px 0 !important; }
.wdm-section--soft { background: rgba(216,24,48,.045) !important; }
.wdm-section--tint { background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,226,231,.6)) !important; }
.wdm-head { margin-bottom: 30px !important; }
.wdm-head .wdm-lead { margin-top: 10px; }
.wdm-eyebrow { margin-bottom: 12px; }
.wdm-pagehero { padding: 44px 0 40px !important; }
.wdm-pagehero h1 { margin-bottom: 6px; }
.wdm-cta-band { margin-bottom: -64px; }
.wdm-cta-band__in { padding: 40px 44px; }
.wdm-footer { padding-top: 104px; background: linear-gradient(180deg, #fff3f5, #ffe9ed); }
.wdm-footer__bar { margin-top: 36px; }
main > section[class*="-hero"]:first-child { padding-top: 40px !important; padding-bottom: 44px !important; }
@media (max-width: 767px) {
  .wdm-section { padding: 32px 0 !important; }
  .wdm-head { margin-bottom: 22px !important; }
  .wdm-pagehero { padding: 32px 0 30px !important; }
}

/* ---- cards must be visible: white on tinted bg, real border + red-tinted shadow ---- */
.wdm-card,
main [class*="-card"]:not(.wdm-cta-band__in):not([class*="card__"]):not([class*="card-"]) {
  background-color: #fff;
  border: 1px solid var(--wdm-line-2);
  box-shadow: var(--wdm-shadow-card);
}
.wdm-card--hover:hover,
main [class*="-card"]:not(.wdm-cta-band__in):not([class*="card__"]):not([class*="card-"]):hover { box-shadow: var(--wdm-shadow-card-hover); }
.wdm-btn--ghost { border-color: var(--wdm-line-2); background: #fff; }
.wdm-header { background: rgba(255,255,255,.9); }
.wdm-table th { background: var(--wdm-soft); }

/* ---- motion ---- */
@keyframes wdm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes wdm-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,24px) scale(1.08); } }
@keyframes wdm-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes wdm-shine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }

.wdm-pagehero::before, .wdm-pagehero::after { display: none !important; }
.wdm-pagehero .wdm-container > * { animation: wdm-rise .8s var(--wdm-ease) both; }
.wdm-pagehero .wdm-container > *:nth-child(2) { animation-delay: .1s; }
.wdm-pagehero .wdm-container > *:nth-child(3) { animation-delay: .2s; }

main > section:first-child [class*="__copy"] > *,
main > section:first-child [class*="-copy"] > * { animation: wdm-rise .9s var(--wdm-ease) both; }
main > section:first-child [class*="__copy"] > *:nth-child(2),
main > section:first-child [class*="-copy"] > *:nth-child(2) { animation-delay: .12s; }
main > section:first-child [class*="__copy"] > *:nth-child(3),
main > section:first-child [class*="-copy"] > *:nth-child(3) { animation-delay: .24s; }
main > section:first-child [class*="__copy"] > *:nth-child(4),
main > section:first-child [class*="-copy"] > *:nth-child(4) { animation-delay: .36s; }

main [class*="float"] { animation: wdm-float 6s ease-in-out infinite; }
main [class*="float"]:nth-of-type(2n) { animation-duration: 7.5s; animation-delay: -2s; }
.hm-blob, [class*="-blob"] { display: none !important; }

.wdm-btn--primary { position: relative; overflow: hidden; }
.wdm-btn--primary::after { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-120%) skewX(-20deg); }
.wdm-btn--primary:hover::after { animation: wdm-shine .9s ease; }

main [class*="-card"], .wdm-card { transition: transform .35s var(--wdm-ease), box-shadow .35s var(--wdm-ease), border-color .3s; }
main [class*="-card"]:not(.wdm-cta-band__in):hover { transform: translateY(-5px); }

.wdm-reveal { transition-delay: calc(var(--i, 0) * 80ms); }
/* ---- page-hero decorative background (transparent layers) ---- */
.wdm-pagehero {
  background-color: transparent !important;
  background-image:
    url('/assets/img/brand/hero-bg.svg?v=2'),
    radial-gradient(circle, rgba(216,24,48,.20) 1.2px, transparent 1.6px),
    linear-gradient(100deg, rgba(255,255,255,.95) 0%, rgba(255,240,243,.55) 55%, rgba(255,222,228,.5) 100%) !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-position: right -40px center, 0 0, 0 0 !important;
  background-size: auto 112%, 26px 26px, cover !important;
  animation: wdm-dots 40s linear infinite;
}
@keyframes wdm-dots { to { background-position: right -40px center, 260px 130px, 0 0; } }
.wdm-pagehero::before, .wdm-pagehero::after { pointer-events: none; }
.wdm-hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 70%); mask-image: linear-gradient(90deg, transparent 38%, #000 70%); }
.wdm-chipfloat { position: absolute; width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--wdm-red); background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(216,24,48,.20), inset 0 1px 0 #fff;
  animation: wdm-float 7s ease-in-out infinite; }
.wdm-chipfloat:nth-child(1) { right: 22%; top: 22%; }
.wdm-chipfloat:nth-child(2) { right: 9%; top: 52%; width: 68px; height: 68px; font-size: 26px; animation-duration: 8.5s; animation-delay: -2s; color: #fff; background: var(--wdm-grad); border-color: transparent; }
.wdm-chipfloat:nth-child(3) { right: 31%; top: 62%; width: 48px; height: 48px; font-size: 18px; border-radius: 50%; animation-duration: 6s; animation-delay: -1s; }
.wdm-chipfloat:nth-child(4) { right: 15%; top: 14%; width: 46px; height: 46px; font-size: 17px; border-radius: 14px; animation-duration: 9s; animation-delay: -4s; color: var(--wdm-blue); }
/* ---- home hero: same animated theme, larger ---- */
.hm-hero {
  background-color: transparent !important;
  background-image:
    url('/assets/img/brand/hero-bg.svg?v=2'),
    radial-gradient(circle, rgba(216,24,48,.20) 1.2px, transparent 1.6px),
    linear-gradient(115deg, rgba(255,255,255,.96) 0%, rgba(255,242,245,.7) 50%, rgba(255,218,225,.6) 100%) !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-position: right -80px center, 0 0, 0 0 !important;
  background-size: auto 125%, 26px 26px, cover !important;
  animation: wdm-dots 40s linear infinite;
}
.hm-hero .wdm-hero-deco { -webkit-mask-image: none; mask-image: none; z-index: 0; }
.hm-hero .wdm-chipfloat:nth-child(1) { right: auto; left: 3%; top: 12%; }
.hm-hero .wdm-chipfloat:nth-child(2) { right: auto; left: 47%; top: 6%; }
.hm-hero .wdm-chipfloat:nth-child(3) { right: auto; left: 46%; top: auto; bottom: 9%; }
.hm-hero .wdm-chipfloat:nth-child(4) { right: 3%; top: auto; bottom: 10%; }
.hm-hero .wdm-chipfloat:nth-child(5) { right: 2%; top: 10%; width: 52px; height: 52px; animation-duration: 8s; animation-delay: -3s; }
.hm-hero .wdm-chipfloat:nth-child(6) { left: 2%; bottom: 8%; width: 44px; height: 44px; border-radius: 50%; animation-duration: 6.5s; animation-delay: -5s; }
.hm-hero .hm-blob { display: none; }
/* subtle dotted texture on tinted bands */
.wdm-section--soft, .wdm-section--tint {
  background-image: radial-gradient(circle, rgba(216,24,48,.14) 1.2px, transparent 1.6px) !important;
  background-size: 28px 28px !important; background-repeat: repeat !important;
}
@media (max-width: 991px) { .wdm-hero-deco { opacity: .45; } .wdm-chipfloat:nth-child(3), .wdm-chipfloat:nth-child(4) { display: none; } }
/* ---- typewriter numbers (red) ---- */
.hm-strip b[data-typewriter] { color: var(--wdm-red) !important; background: var(--wdm-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: block; min-height: 1.25em; white-space: nowrap; }

/* ---- animated icons inside floating chips: spin / jump / beat / wiggle ---- */
@keyframes wdm-beat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.35); } 30% { transform: scale(1); } 45% { transform: scale(1.25); } 60% { transform: scale(1); } }
@keyframes wdm-spin { 0%,55% { transform: rotate(0) scale(1); } 75% { transform: rotate(180deg) scale(1.3); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes wdm-jump { 0%,100% { transform: translateY(0) scale(1,1); } 15% { transform: translateY(0) scale(1.15,.85); } 40% { transform: translateY(-11px) scale(.92,1.1); } 65% { transform: translateY(0) scale(1.1,.9); } 80% { transform: translateY(-4px); } }
@keyframes wdm-wiggle { 0%,100% { transform: rotate(0); } 10%,30%,50% { transform: rotate(-16deg); } 20%,40%,60% { transform: rotate(16deg); } 70% { transform: rotate(0); } }
@keyframes wdm-zap { 0%,100% { transform: scale(1) rotate(0); filter: none; } 8% { transform: scale(1.35) rotate(-10deg); } 16% { transform: scale(.9) rotate(8deg); } 24% { transform: scale(1.2) rotate(0); } 40% { transform: scale(1); } }
@keyframes wdm-flip { 0%,60%,100% { transform: rotateY(0); } 80% { transform: rotateY(360deg); } }
.wdm-chipfloat i { display: inline-block; transform-origin: center; }
.wdm-chipfloat:nth-child(1) i { animation: wdm-beat 2.2s ease-in-out infinite; }
.wdm-chipfloat:nth-child(2) i { animation: wdm-spin 4.2s ease-in-out infinite; }
.wdm-chipfloat:nth-child(3) i { animation: wdm-jump 2.4s ease-in-out infinite; }
.wdm-chipfloat:nth-child(4) i { animation: wdm-wiggle 3s ease-in-out infinite; }
.wdm-chipfloat:nth-child(5) i { animation: wdm-zap 2.8s ease-in-out infinite; }
.wdm-chipfloat:nth-child(6) i { animation: wdm-flip 3.6s ease-in-out infinite; }
.wdm-chipfloat { animation-name: wdm-float, wdm-hop; animation-duration: 7s, 5s; animation-iteration-count: infinite, infinite; animation-timing-function: ease-in-out, ease-in-out; }
@keyframes wdm-hop { 0%,70%,100% { margin-top: 0; } 78% { margin-top: -16px; } 86% { margin-top: 0; } 92% { margin-top: -6px; } }
.wdm-chipfloat:nth-child(2n) { animation-delay: -2s, -1s; } .wdm-chipfloat:nth-child(3n) { animation-delay: -4s, -3s; }
/* feature / category / step icons: playful on card hover */
main [class*="-card"]:hover [class*="ico"] i, main [class*="-card"]:hover [class*="icon"] i { animation: wdm-jump .9s ease; display: inline-block; }
main [class*="-card"]:hover [class*="ico"], main [class*="-card"]:hover [class*="icon"] { transition: transform .3s var(--wdm-ease); transform: rotate(-6deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }