/* ============================================================================
   Feroot product sections — shared module (DXComply / PaymentGuard / DXSecure)
   Text + animated visuals are IDENTICAL across concepts; only the theme tokens
   below change. Each concept supplies its own .products{ --pf-* } override block.
   Scope: everything is nested under .products so it never leaks into the host.
   Reveal: piggybacks on the host concept's own .reveal -> .in observer.
   ========================================================================== */

/* ---- theme tokens (defaults = Feroot light palette; concepts override) ---- */
.products{
  --pf-font:"Geist",system-ui,sans-serif;
  --pf-mono:"Geist Mono",ui-monospace,monospace;
  --pf-ease:cubic-bezier(.22,.7,.25,1);
  --pf-accent:#6c4bff;          --pf-accent-2:#8a6bff;
  --pf-accent-soft:rgba(108,75,255,.14);
  --pf-accent-glow:rgba(108,75,255,.5);
  --pf-grad:linear-gradient(110deg,#420bae,#6c4bff 52%,#2b4dff);
  --pf-on-accent:#fff;
  --pf-ink:#181436;             --pf-ink-2:#534f7d;
  --pf-surface:#fff;
  --pf-stage-bg:linear-gradient(165deg,rgba(255,255,255,.6),rgba(241,237,251,.72));
  --pf-inset-bg:#faf8ff;
  --pf-border:1px solid rgba(66,11,174,.14);
  --pf-radius:24px;             --pf-radius-card:14px;
  --pf-shadow-stage:0 40px 90px -50px rgba(108,75,255,.5);
  --pf-shadow-card:0 8px 22px -14px rgba(66,11,174,.4);
  --pf-ok:#138a4e;              --pf-ok-bg:#e3f7ea;
  --pf-warn:#cf2f2f;            --pf-warn-bg:#fde6e6;
  --pf-flag-border:#f0a3a3;     --pf-flag-bg:#fff6f6;
  --pf-alert:#d9820f;           --pf-alert-2:#b06a0c;  --pf-alert-soft:rgba(224,138,22,.18);
  --pf-threat:#e8632a;          --pf-threat-glow:#ff7a3c;
  --pf-map-dot:rgba(108,75,255,.30);
  color:var(--pf-ink);font-family:var(--pf-font);
}

/* ---- layout ---- */
.products .product{position:relative;padding:clamp(70px,10vh,130px) 0}
.products .product + .product{border-top:var(--pf-border)}
.products .wrap{max-width:1240px;margin:0 auto;padding:0 30px}
.products .product__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.products .product.rev .product__media{order:-1}
.products .pname{font-family:var(--pf-font);font-weight:700;font-size:clamp(20px,2.1vw,28px);letter-spacing:-.01em;color:var(--pf-accent);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.products .pname .pdot{width:11px;height:11px;border-radius:50%;background:var(--pf-accent);box-shadow:0 0 12px var(--pf-accent-2)}
.products .product h2{font-size:clamp(27px,3.3vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:0 0 18px;max-width:18ch;color:var(--pf-ink)}
.products .product p{color:var(--pf-ink-2);margin:0 0 28px;max-width:52ch;font-size:17px;line-height:1.6}
.products .pcta{display:flex;gap:14px;flex-wrap:wrap}
.products .pf-btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--pf-font);font-weight:600;font-size:15px;padding:14px 28px;border-radius:12px;border:1px solid transparent;cursor:pointer;background:var(--pf-grad);color:var(--pf-on-accent);box-shadow:var(--pf-shadow-stage);transition:transform .25s var(--pf-ease),box-shadow .25s var(--pf-ease);white-space:nowrap;text-decoration:none}
.products .pf-btn:hover{transform:translateY(-2px)}
.products .product__media{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}
@media(max-width:880px){.products .product__grid{grid-template-columns:1fr;gap:34px}.products .product.rev .product__media{order:0}}

/* ---- copy reveal: label, bold headline and small text rise + fade in on scroll ---- */
.products .product__grid.reveal{opacity:1;transform:none}
.products .product__copy > *{opacity:0;transform:translateY(30px);filter:blur(7px);transition:opacity .85s var(--pf-ease),transform .85s var(--pf-ease),filter .85s var(--pf-ease)}
.products .reveal.in .product__copy > *{opacity:1;transform:none;filter:none}
.products .reveal.in .product__copy > *:nth-child(1){transition-delay:.05s}
.products .reveal.in .product__copy > *:nth-child(2){transition-delay:.18s}
.products .reveal.in .product__copy > *:nth-child(3){transition-delay:.34s}
.products .reveal.in .product__copy > *:nth-child(4){transition-delay:.48s}

/* shared fade-in primitive for the animation elements */
.products .product .fx{opacity:0;transform:translateY(14px);transition:opacity .55s var(--pf-ease),transform .55s var(--pf-ease)}
.products .reveal.in .fx{opacity:1;transform:none}

/* ---- status card (shared by PaymentGuard + DXSecure) ---- */
.products .scard{display:flex;align-items:center;gap:14px;background:var(--pf-surface);border:var(--pf-border);border-radius:var(--pf-radius-card);padding:15px 18px;box-shadow:var(--pf-shadow-card)}
.products .scard .ic{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--pf-accent-soft);color:var(--pf-accent)}
.products .scard.alert .ic{background:var(--pf-alert-soft);color:var(--pf-alert)}
.products .scard .num{font-family:var(--pf-font);font-weight:800;font-size:26px;color:var(--pf-accent);letter-spacing:-.02em}
.products .scard.alert .num{color:var(--pf-alert)}
.products .scard .lbl{font-size:15px;font-weight:600;color:var(--pf-accent)}
.products .scard.alert .lbl{color:var(--pf-alert-2)}
.products .scard{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .55s var(--pf-ease),transform .55s var(--pf-ease)}
.products .reveal.in .scard{opacity:1;transform:none}
.products .reveal.in .scard:nth-child(1){transition-delay:.16s}
.products .reveal.in .scard:nth-child(2){transition-delay:.30s}
.products .reveal.in .scard:nth-child(3){transition-delay:.44s}

/* ============================ PaymentGuard ============================ */
.products .pg-stage{position:relative;width:100%;max-width:430px;aspect-ratio:7/8;border-radius:var(--pf-radius);border:var(--pf-border);overflow:hidden;background:var(--pf-stage-bg);box-shadow:var(--pf-shadow-stage)}
.products .pg-stage::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--pf-grad);z-index:4}
.products .pg-layer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:30px}
.products .pg-scan{position:absolute;left:8%;right:8%;top:0;height:2px;z-index:3;background:linear-gradient(90deg,transparent,var(--pf-accent),transparent);box-shadow:0 0 16px 3px var(--pf-accent-glow);opacity:0;animation:pgscan 9s var(--pf-ease) infinite}
@keyframes pgscan{0%{opacity:0;top:14%}5%{opacity:1}26%{opacity:1;top:84%}31%{opacity:0;top:84%}100%{opacity:0;top:84%}}
.products .pg-checkout{animation:pgcheck 9s var(--pf-ease) infinite}
@keyframes pgcheck{0%,30%{opacity:1;transform:scale(1)}40%,86%{opacity:0;transform:scale(.97)}96%,100%{opacity:1;transform:scale(1)}}
.products .pg-avatar{width:46px;height:46px;border-radius:50%;margin:0 auto;background:var(--pf-accent-soft);color:var(--pf-accent);display:grid;place-items:center}
.products .pg-title{text-align:center;font-weight:700;color:var(--pf-accent);font-size:15px;margin-top:-4px}
.products .pg-field{background:var(--pf-surface);border:var(--pf-border);border-radius:10px;padding:13px 16px;display:flex;align-items:center;gap:10px;font-family:var(--pf-mono);font-size:15px;letter-spacing:.18em;color:var(--pf-ink-2)}
.products .pg-row{display:flex;gap:12px}
.products .pg-row .pg-field{flex:1;letter-spacing:.05em}
.products .pg-pay{background:var(--pf-accent);color:var(--pf-on-accent);border:0;border-radius:10px;padding:13px;font-family:var(--pf-font);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:7px;animation:pgpay 2.2s ease-in-out infinite}
@keyframes pgpay{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px var(--pf-accent-glow)}}
.products .pg-status{justify-content:center;gap:16px}
.products .pg-stage .scard{opacity:0;transform:translateY(12px) scale(.96);transition:none;animation:pgcardpop 9s var(--pf-ease) infinite}
.products .pg-stage .scard:nth-child(2){animation-delay:.18s}
.products .pg-stage .scard:nth-child(3){animation-delay:.36s}
@keyframes pgcardpop{0%,40%{opacity:0;transform:translateY(12px) scale(.96)}52%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(8px) scale(.97)}}

/* ============================ DXComply =============================== */
.products .dxc-anim{width:100%;max-width:420px;display:flex;flex-direction:column;gap:11px}
.products .scriptrow{display:flex;align-items:center;gap:12px;background:var(--pf-surface);border:var(--pf-border);border-radius:12px;padding:13px 15px;box-shadow:var(--pf-shadow-card)}
.products .scriptrow.flagged{border-color:var(--pf-flag-border);background:var(--pf-flag-bg)}
.products .scriptrow .sname{font-family:var(--pf-mono);font-size:14px;color:var(--pf-ink-2);letter-spacing:.02em}
.products .scriptrow .badge{margin-left:auto;font-weight:700;font-size:12.5px;padding:5px 12px;border-radius:100px;display:inline-flex;align-items:center;gap:5px}
.products .scriptrow .badge.ok{background:var(--pf-ok-bg);color:var(--pf-ok)}
.products .scriptrow .badge.warn{background:var(--pf-warn-bg);color:var(--pf-warn)}
.products .consent{margin-top:4px;background:var(--pf-surface);border:var(--pf-border);border-radius:18px;padding:18px;box-shadow:var(--pf-shadow-card);text-align:center}
.products .consent__top{display:flex;align-items:center;justify-content:space-between;background:var(--pf-inset-bg);border:var(--pf-border);border-radius:12px;padding:9px 12px;margin-bottom:14px}
.products .consent__top .lg{display:flex;align-items:center;gap:7px;color:var(--pf-accent);font-weight:800;font-size:13px}
.products .switch{width:34px;height:18px;border-radius:100px;background:var(--pf-accent);position:relative;flex:none}
.products .switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--pf-on-accent);animation:swtog 3.6s var(--pf-ease) infinite}
@keyframes swtog{0%,38%{left:2px}54%,94%{left:18px}100%{left:2px}}
.products .consent .cookie{width:36px;height:36px;margin:0 auto 8px;border-radius:50%;background:var(--pf-accent-soft);color:var(--pf-accent);display:grid;place-items:center}
.products .consent__q{font-weight:700;color:var(--pf-accent);margin-bottom:14px;font-size:16px}
.products .consent__btns{display:flex;gap:10px}
.products .cbtn{flex:1;border:0;border-radius:10px;padding:11px;font-family:var(--pf-font);font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.products .cbtn.accept{background:var(--pf-accent);color:var(--pf-on-accent)}
.products .cbtn.reject{background:var(--pf-accent-soft);color:var(--pf-accent)}

/* ============================ DXSecure ============================== */
.products .dxs-stage{position:relative;width:100%;max-width:460px;aspect-ratio:1/1;border-radius:var(--pf-radius);border:var(--pf-border);overflow:hidden;background:var(--pf-stage-bg);box-shadow:var(--pf-shadow-stage)}
.products .dxs-stage::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--pf-grad);z-index:6}
.products .dxs-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* phase 1 — mobile app protected */
.products .dxs-phone{animation:dxsP1 9s var(--pf-ease) infinite}
@keyframes dxsP1{0%,100%{opacity:0;transform:scale(.9) translateY(8px)}5%,19%{opacity:1;transform:scale(1) translateY(0)}27%{opacity:0;transform:scale(1.07) translateY(-14px)}28%,93%{opacity:0;transform:scale(.9)}}
.products .phone{width:130px;height:214px;border-radius:20px;background:var(--pf-surface);border:var(--pf-border);box-shadow:var(--pf-shadow-stage);overflow:hidden;display:flex;flex-direction:column}
.products .phone__bar{height:32px;background:var(--pf-accent-soft);display:flex;align-items:center;justify-content:flex-end;padding:0 13px}
.products .phone__bar i{width:13px;height:2px;border-radius:2px;background:var(--pf-accent);box-shadow:0 4px 0 var(--pf-accent),0 -4px 0 var(--pf-accent)}
.products .phone__body{flex:1;display:grid;place-items:center}
.products .phone__chk{width:58px;height:58px;border-radius:50%;background:var(--pf-accent-soft);display:grid;place-items:center}
.products .phone__chk path{fill:none;stroke:var(--pf-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;animation:dxsChk 9s var(--pf-ease) infinite}
@keyframes dxsChk{0%,3%{stroke-dashoffset:34}9%,19%{stroke-dashoffset:0}26%,100%{stroke-dashoffset:34}}
/* phase 2 — global threat map */
.products .dxs-map{animation:dxsP2 9s var(--pf-ease) infinite}
@keyframes dxsP2{0%,20%{opacity:0;transform:scale(.93)}29%,55%{opacity:1;transform:scale(1)}65%{opacity:0;transform:scale(1.05)}66%,100%{opacity:0;transform:scale(.93)}}
.products .worldmap{position:absolute;inset:20% 6% 16% 6%;background-image:radial-gradient(var(--pf-map-dot) 1.4px,transparent 1.7px);background-size:11px 11px;-webkit-mask-image:radial-gradient(120% 92% at 50% 48%,#000 55%,transparent 100%);mask-image:radial-gradient(120% 92% at 50% 48%,#000 55%,transparent 100%);opacity:.8;transform-origin:36% 50%;animation:dxsMap 9s var(--pf-ease) infinite}
@keyframes dxsMap{0%,21%{opacity:0;transform:scale(.4)}25%{opacity:.45}33%,57%{opacity:.8;transform:scale(1)}64%,100%{opacity:0;transform:scale(1.04)}}
.products .dxs-svg{position:absolute;inset:0;width:100%;height:100%}
.products .dxs-svg .gs-a{stop-color:var(--pf-accent)}
.products .dxs-svg .gs-b{stop-color:var(--pf-accent-2)}
.products .dxs-svg .gs-c{stop-color:var(--pf-threat)}
.products .dxs-svg .gs-glow{stop-color:var(--pf-threat-glow)}
.products .flowline{fill:none;stroke:url(#dxsGrad);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.1 9;animation:dxsFlow 1s linear infinite,dxsDraw 9s var(--pf-ease) infinite}
@keyframes dxsFlow{to{stroke-dashoffset:-18.2}}
@keyframes dxsDraw{0%,28%{stroke-dasharray:.1 600}38%,60%{stroke-dasharray:.1 9}66%,100%{stroke-dasharray:.1 600}}
.products .dxs-ring{fill:none;stroke:var(--pf-threat);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:dxsRing 1.6s ease-out infinite}
@keyframes dxsRing{0%{transform:scale(.4);opacity:.7}100%{transform:scale(3.4);opacity:0}}
.products .tnode{opacity:0;color:var(--pf-threat);transform-box:fill-box;transform-origin:center;animation:dxsNode 9s var(--pf-ease) infinite}
@keyframes dxsNode{0%,38%{opacity:0;transform:scale(.4)}46%,58%{opacity:1;transform:scale(1)}64%,100%{opacity:0;transform:scale(.6)}}
.products .pin{position:absolute;left:36.5%;top:50%;transform:translate(-50%,-100%);z-index:3;animation:dxsPin 9s var(--pf-ease) infinite}
@keyframes dxsPin{0%,20%{opacity:0;transform:translate(-50%,-150%)}27%{opacity:1;transform:translate(-50%,-92%)}31%,57%{opacity:1;transform:translate(-50%,-100%)}64%,100%{opacity:0;transform:translate(-50%,-100%)}}
.products .pin .head{width:30px;height:30px;border-radius:50% 50% 50% 0;background:var(--pf-accent);transform:rotate(-45deg);display:grid;place-items:center;box-shadow:var(--pf-shadow-card)}
.products .pin .head svg{transform:rotate(45deg)}
.products .pin .dot{position:absolute;left:50%;bottom:-7px;width:13px;height:13px;border-radius:50%;background:var(--pf-accent);transform:translateX(-50%)}
.products .pin .dot::after{content:"";position:absolute;inset:-3px;border:2px solid var(--pf-accent);border-radius:50%;opacity:.6;animation:pinpulse 2.4s ease-out infinite}
@keyframes pinpulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(2.4);opacity:0}}
/* phase 3 — live inventory */
.products .dxs-cards2{animation:dxsP3 9s var(--pf-ease) infinite}
@keyframes dxsP3{0%,57%{opacity:0;transform:scale(.97)}66%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.99)}}
.products .cardstack{display:flex;flex-direction:column;gap:14px;width:80%}
.products .cardstack .scard{padding:15px 17px;gap:13px;animation:dxsSlide 9s var(--pf-ease) infinite}
.products .cardstack .scard:nth-child(2){animation-delay:.14s}
.products .cardstack .scard:nth-child(3){animation-delay:.28s}
@keyframes dxsSlide{0%,57%{transform:translateY(18px) scale(.95)}67%,90%{transform:translateY(0) scale(1)}96%,100%{transform:translateY(8px) scale(.98)}}
.products .cardstack .scard.block{border-color:var(--pf-threat)}
.products .cardstack .scard .ic{width:24px;height:24px}
.products .cardstack .scard .num{font-size:22px}
.products .cardstack .scard .lbl{font-size:14px;font-weight:600;color:var(--pf-ink-2)}
.products .blockbadge{margin-left:auto;background:var(--pf-threat);color:#fff;font-weight:700;font-size:11.5px;padding:5px 10px;border-radius:7px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}

/* ---- reduced motion: hold one frame, no looping ---- */
@media(prefers-reduced-motion:reduce){
  .products .scard,.products .product__copy > *,.products .fx{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .products .switch::after,.products .pin .dot::after{animation:none!important}
  .products .pg-checkout,.products .pg-scan,.products .pg-pay{animation:none!important}
  .products .pg-checkout{opacity:0!important}
  .products .pg-stage .scard{animation:none!important;opacity:1!important;transform:none!important}
  .products .dxs-phone,.products .dxs-map,.products .flowline,.products .dxs-ring,.products .phone__chk path,.products .cardstack .scard,.products .worldmap,.products .pin,.products .tnode{animation:none!important}
  .products .dxs-phone,.products .dxs-map{opacity:0!important}
  .products .dxs-cards2{animation:none!important;opacity:1!important;transform:none!important}
  .products .cardstack .scard{transform:none!important}
  .products .phone__chk path{stroke-dashoffset:0!important}
}