/* ═══════════════════════════════════════
   HELIA — products.css
   3 Cards · Motion Graphics Animations
═══════════════════════════════════════ */

#S-PROD{padding:100px 44px;background:transparent;position:relative;z-index:1}
.PROD-IN{max-width:1200px;margin:0 auto}
.PROD-H{margin-bottom:56px}
.PROD-EY{font-family:var(--M);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--p2);margin-bottom:14px}
.PROD-TI{font-size:clamp(28px,4.5vw,56px);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin-bottom:10px}
.PROD-SU{font-size:15px;color:var(--m);font-weight:300;max-width:500px}

.PROD-CARDS{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ── SHARED CARD ── */
.P-CARD{
  background:rgba(255,255,255,.85);border-radius:20px;
  border:1px solid rgba(200,200,200,.25);overflow:hidden;
  display:flex;flex-direction:column;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:box-shadow .4s,border-color .4s;
  opacity:0;transform:translateY(20px);
}
.P-CARD.visible{opacity:1;transform:none;transition:opacity .6s,transform .7s cubic-bezier(.34,1.56,.64,1)}
.P-CARD:hover{box-shadow:0 20px 60px rgba(0,0,0,.06);border-color:rgba(139,92,246,.15)}

/* ── ANIM AREA ── */
.P-ANIM{height:240px;position:relative;overflow:hidden;border-bottom:1px solid rgba(139,92,246,.06);flex-shrink:0}

/* ── BODY ── */
.P-BODY{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1}
.P-TAG{font-family:var(--M);font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--p2);margin-bottom:12px}
.P-TI{font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin-bottom:8px}
.P-DESC{font-size:13px;line-height:1.55;color:var(--m);font-weight:400;margin-bottom:16px}
.P-FEATS{list-style:none;margin-bottom:16px}
.P-FEATS li{font-size:13px;color:var(--k);padding:6px 0;display:flex;align-items:center;gap:8px;font-weight:500}
.P-FEATS li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--p1);flex-shrink:0}
.P-PRICE{margin-top:auto;padding-top:16px;border-top:1px solid rgba(139,92,246,.06)}
.P-PRICES-ROW{display:flex;gap:16px}
.P-PRICES-ROW .P-PRICE{flex:1;border-top:none;padding-top:0}
.P-PR{font-size:28px;font-weight:800;letter-spacing:-.02em}
.P-SM{font-size:14px;font-weight:400;color:var(--m)}
.P-PS{font-size:11px;color:var(--m);margin-top:3px}
.P-CTA{display:block;text-align:center;margin-top:18px;padding:13px;border-radius:10px;background:var(--p3);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s;border:none;cursor:pointer;font-family:var(--S)}
.P-CTA:hover{background:var(--p1)}

/* ═══ P2 — FEATURED (PURPLE GLASS) ═══ */
.P2{background:rgba(255,255,255,.9);border-color:rgba(139,92,246,.12)}
.P2 .P-ANIM{background:rgba(139,92,246,.04)}
.P2 .P-CTA{background:var(--p1)}.P2 .P-CTA:hover{background:var(--p2)}

/* ═══════════════════════════════════════
   ANIM 1: APP — Screens morphing + deploying
═══════════════════════════════════════ */
.PA-APPS{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(139,92,246,.03),rgba(167,139,250,.06))}

/* 3 screens that pulse, shift, and morph */
.PA-SCR{
  position:absolute;border-radius:12px;
  background:rgba(255,255,255,.9);
  border:1.5px solid rgba(200,200,200,.3);
  box-shadow:
    0 12px 32px rgba(0,0,0,.08),
    0 0 0 .5px rgba(255,255,255,.5) inset,
    0 1px 0 rgba(255,255,255,.7) inset;
  overflow:hidden;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
/* Glass reflection */
.PA-SCR::before{
  content:'';position:absolute;top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.15),transparent);
  pointer-events:none;z-index:1;border-radius:inherit;
}
/* Phone */
.PA-S1{width:68px;height:118px;border-radius:14px;z-index:4;animation:PA1F 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes PA1F{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(-8px,-6px) rotate(-2deg)}
  50%{transform:translate(4px,-10px) rotate(1deg)}
  75%{transform:translate(-4px,4px) rotate(-1deg)}
}
/* Tablet */
.PA-S2{width:100px;height:72px;z-index:3;animation:PA2F 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes PA2F{
  0%,100%{transform:translate(50px,-20px) rotate(2deg)}
  30%{transform:translate(55px,-28px) rotate(0deg)}
  60%{transform:translate(45px,-16px) rotate(3deg)}
}
/* Backend */
.PA-S3{
  width:80px;height:52px;z-index:2;
  background:rgba(13,12,10,.92) !important;
  border-color:rgba(139,92,246,.2) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.15),0 0 0 .5px rgba(139,92,246,.1) inset !important;
  animation:PA3F 5s cubic-bezier(.4,0,.2,1) infinite;
}
.PA-S3::before{background:linear-gradient(180deg,rgba(139,92,246,.06),transparent) !important}
@keyframes PA3F{
  0%,100%{transform:translate(-48px,34px) rotate(-1deg)}
  40%{transform:translate(-52px,26px) rotate(0deg)}
  70%{transform:translate(-44px,38px) rotate(-2deg)}
}
/* Inner elements */
.PA-SBAR{height:3px;margin:6px 8px 3px;border-radius:2px;background:rgba(139,92,246,.1)}
.PA-SBAR.w60{width:60%}.PA-SBAR.w40{width:40%}
.PA-SBLK{height:12px;margin:3px 8px;border-radius:4px;background:rgba(139,92,246,.05)}
.PA-S3 .PA-SBAR{background:rgba(139,92,246,.2)}
.PA-S3 .PA-SBLK{background:rgba(139,92,246,.1)}

/* Orbit ring */
.PA-RING{
  position:absolute;width:200px;height:200px;
  border:1px dashed rgba(139,92,246,.08);border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%);
  animation:PARING 20s linear infinite;
}
@keyframes PARING{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Orbit dots */
.PA-ODOT{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--p1);box-shadow:0 0 12px rgba(139,92,246,.4);
}
.PA-OD1{top:-4px;left:50%;animation:PAODP 2s ease-in-out infinite}
.PA-OD2{bottom:-4px;right:20%;animation:PAODP 2s ease-in-out .7s infinite}
.PA-OD3{top:40%;left:-4px;animation:PAODP 2s ease-in-out 1.4s infinite}
@keyframes PAODP{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* Deploy pulse */
.PA-PULSE{
  position:absolute;left:50%;top:50%;width:160px;height:160px;
  border:1px solid rgba(139,92,246,.06);border-radius:50%;
  transform:translate(-50%,-50%);
  animation:PAPULSE 3s ease-out infinite;
}
.PA-PULSE2{animation-delay:1.5s}
@keyframes PAPULSE{0%{transform:translate(-50%,-50%) scale(.8);opacity:.4}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}

/* Tags */
.PA-FTAG{position:absolute;padding:4px 10px;border-radius:8px;font-family:var(--M);font-size:7px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;background:rgba(255,255,255,.8);border:1px solid rgba(139,92,246,.08);color:var(--p1);backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(109,40,217,.04)}
.PA-FT1{bottom:20px;left:18px;animation:PAFT 3s ease-in-out infinite}
.PA-FT2{top:20px;right:18px;animation:PAFT 3s ease-in-out .8s infinite}
.PA-FT3{bottom:50px;right:24px;animation:PAFT 3s ease-in-out 1.6s infinite}
@keyframes PAFT{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-4px);opacity:1}}

/* ═══════════════════════════════════════
   ANIM 2: ENVIRONMENT — OS with live panels
═══════════════════════════════════════ */
.PA-ENV{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(139,92,246,.04),rgba(109,40,217,.08))}

/* ── TWO DEVICES: Desktop + Phone ── */
.PA-ENV{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:linear-gradient(135deg,rgba(139,92,246,.03),rgba(109,40,217,.06))}

/* Desktop */
.PA-DK{
  width:180px;height:130px;z-index:2;
  background:rgba(13,12,10,.95);border-radius:8px;
  border:1.5px solid rgba(80,80,80,.3);overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.05) inset;
  animation:PADKF 6s ease-in-out infinite;
  flex-shrink:0;
}
.PA-DK::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 50%);pointer-events:none;z-index:1;border-radius:inherit}
@keyframes PADKF{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-6px) rotate(.5deg)}}
.PA-DKTOP{height:14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;padding:0 6px;gap:3px}
.PA-DKTOP span{width:3.5px;height:3.5px;border-radius:50%}
.PA-DKWINS{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;padding:3px 4px;height:calc(100% - 14px)}
.PA-DKW{border-radius:3px;border:1px solid;padding:3px 4px;overflow:hidden;background:rgba(255,255,255,.02)}
.PA-DKWL{font-family:var(--M);font-size:4px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;margin-bottom:2px}
.PA-DKBAR{height:1.5px;border-radius:1px;margin:1.5px 0}
.PA-DKCHAT{display:flex;flex-direction:column;gap:1.5px;margin-top:1px}
.PA-DKCU{font-family:var(--M);font-size:3.5px;color:rgba(255,255,255,.3);background:rgba(255,255,255,.04);padding:1px 3px;border-radius:2px}
.PA-DKCB{font-family:var(--M);font-size:3.5px;color:var(--p2);background:rgba(139,92,246,.1);padding:1px 3px;border-radius:2px}
.PA-CCUR{display:inline-block;width:1px;height:5px;background:var(--p1);animation:PAIP 1s steps(1) infinite;vertical-align:middle;margin-left:1px}

/* Phone */
.PA-PH{
  width:72px;height:120px;z-index:3;
  background:rgba(255,255,255,.88);border-radius:12px;
  border:1.5px solid rgba(200,200,200,.3);overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.08),0 1px 0 rgba(255,255,255,.7) inset;
  padding:6px 5px;flex-shrink:0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:PAPHF2 5s ease-in-out .5s infinite;
}
.PA-PH::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 40%);pointer-events:none;z-index:1;border-radius:inherit}
@keyframes PAPHF2{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.PA-PHNOT{width:20px;height:3px;background:rgba(0,0,0,.08);border-radius:2px;margin:0 auto 5px}
.PA-PHROW{display:flex;justify-content:space-between;font-family:var(--M);font-size:5.5px;color:rgba(0,0,0,.3);padding:3px 0;border-bottom:1px solid rgba(0,0,0,.03)}
.PA-PHROW span:last-child{font-weight:600;color:rgba(0,0,0,.5)}
.PA-PHCHAT{margin-top:4px}

/* Connection line between desktop and phone */
.PA-CONN{
  position:absolute;left:50%;top:50%;width:20px;height:1px;z-index:1;
  background:linear-gradient(90deg,rgba(139,92,246,.15),rgba(139,92,246,.06));
  transform:translate(-50%,-50%);
}

.PA-PBAR{height:2px;border-radius:1px;background:rgba(139,92,246,.15);margin:2px 0}
.PA-PBAR.w80{width:80%}.PA-PBAR.w60{width:60%}.PA-PBAR.w50{width:50%}.PA-PBAR.w70{width:70%}.PA-PBAR.w40{width:40%}

/* Mini server */
.PA-SRV{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:32px;height:32px;border-radius:8px;
  background:rgba(13,12,10,.85);
  display:flex;align-items:center;justify-content:center;gap:3px;
  box-shadow:0 4px 16px rgba(0,0,0,.12),0 0 20px rgba(139,92,246,.06);
}
.PA-SLED{width:3px;height:3px;border-radius:50%;animation:PAIP 1.8s infinite alternate}

/* Blinking app icons in background */
.PA-BAPP{
  position:absolute;width:18px;height:18px;object-fit:contain;z-index:0;
  opacity:0;filter:blur(0.5px);
}
.PA-BA1{top:12%;left:8%;animation:PABLINK 4s ease 0s infinite}
.PA-BA2{top:8%;right:12%;animation:PABLINK 4s ease .5s infinite}
.PA-BA3{bottom:15%;left:5%;animation:PABLINK 4s ease 1s infinite}
.PA-BA4{bottom:10%;right:8%;animation:PABLINK 4s ease 1.5s infinite}
.PA-BA5{top:45%;left:4%;animation:PABLINK 4s ease 2s infinite}
.PA-BA6{top:40%;right:5%;animation:PABLINK 4s ease 2.5s infinite}
.PA-BA7{top:18%;left:35%;animation:PABLINK 4s ease 3s infinite}
.PA-BA8{bottom:20%;right:30%;animation:PABLINK 4s ease 3.5s infinite}
@keyframes PABLINK{
  0%,80%,100%{opacity:0;transform:scale(.6);filter:blur(1px)}
  8%{opacity:.7;transform:scale(1.2);filter:blur(0);box-shadow:0 0 12px rgba(139,92,246,.3)}
  16%{opacity:.3;transform:scale(1);filter:blur(.5px)}
}

/* KI Agents flying */
.PA-AGENT{
  position:absolute;z-index:1;
  width:8px;height:8px;border-radius:50%;
  box-shadow:0 0 12px currentColor;
  opacity:.4;
}
.PA-AG1{color:var(--p1);animation:PAFLY1 6s ease-in-out infinite}
.PA-AG2{color:var(--p2);animation:PAFLY2 7s ease-in-out .5s infinite}
.PA-AG3{color:#EC4899;animation:PAFLY3 5.5s ease-in-out 1s infinite}
.PA-AG4{color:#3B82F6;animation:PAFLY4 8s ease-in-out 1.5s infinite}
.PA-AG5{color:#22C55E;animation:PAFLY5 6.5s ease-in-out 2s infinite}
@keyframes PAFLY1{0%{left:10%;top:20%;opacity:.3}25%{left:70%;top:15%;opacity:.7}50%{left:85%;top:60%;opacity:.4}75%{left:30%;top:80%;opacity:.6}100%{left:10%;top:20%;opacity:.3}}
@keyframes PAFLY2{0%{left:80%;top:15%;opacity:.2}33%{left:20%;top:50%;opacity:.6}66%{left:60%;top:85%;opacity:.3}100%{left:80%;top:15%;opacity:.2}}
@keyframes PAFLY3{0%{left:50%;top:80%;opacity:.3}30%{left:15%;top:30%;opacity:.5}60%{left:75%;top:45%;opacity:.7}100%{left:50%;top:80%;opacity:.3}}
@keyframes PAFLY4{0%{left:90%;top:70%;opacity:.2}40%{left:25%;top:20%;opacity:.5}70%{left:50%;top:65%;opacity:.3}100%{left:90%;top:70%;opacity:.2}}
@keyframes PAFLY5{0%{left:5%;top:60%;opacity:.3}35%{left:65%;top:30%;opacity:.6}65%{left:40%;top:75%;opacity:.4}100%{left:5%;top:60%;opacity:.3}}
.PA-AG6{color:#F59E0B;animation:PAFLY6 7s ease-in-out .3s infinite}
.PA-AG7{color:#8B5CF6;animation:PAFLY7 5s ease-in-out 1.2s infinite}
@keyframes PAFLY6{0%{left:15%;top:75%;opacity:.2}40%{left:80%;top:40%;opacity:.6}80%{left:35%;top:15%;opacity:.3}100%{left:15%;top:75%;opacity:.2}}
@keyframes PAFLY7{0%{left:70%;top:80%;opacity:.3}30%{left:10%;top:45%;opacity:.5}70%{left:55%;top:10%;opacity:.4}100%{left:70%;top:80%;opacity:.3}}

/* Scanning line */
.PA-SCANLINE{
  position:absolute;left:0;right:0;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.15),transparent);
  animation:PASCAN 4s linear infinite;
}
@keyframes PASCAN{0%{top:15%}100%{top:90%}}
@keyframes PAIP{from{opacity:.4;box-shadow:0 0 0 var(--p1)}to{opacity:1;box-shadow:0 0 8px var(--p1)}}

/* ═══════════════════════════════════════
   ANIM 3: WEBSITE — Scrolling page + conversions
═══════════════════════════════════════ */
.PA-WEB{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(139,92,246,.02),rgba(167,139,250,.05))}

.PA-WEB{padding:12px 16px;overflow:visible !important}
.PA-BFRAME{width:100%;max-width:240px;height:200px;background:rgba(255,255,255,.9);border-radius:10px;border:1px solid rgba(139,92,246,.08);box-shadow:0 8px 28px rgba(109,40,217,.05);overflow:hidden;position:relative;margin:auto}
.PA-BBAR{height:16px;background:rgba(139,92,246,.02);border-bottom:1px solid rgba(139,92,246,.04);display:flex;align-items:center;padding:0 7px;gap:3px}
.PA-BBAR span{width:4px;height:4px;border-radius:50%;background:rgba(139,92,246,.12)}
.PA-BURL{margin-left:6px;height:6px;width:60px;border-radius:3px;background:rgba(139,92,246,.04)}
.PA-SCROLL{animation:PASC 8s ease-in-out infinite}
@keyframes PASC{0%,12%{transform:translateY(0)}20%,32%{transform:translateY(-60px)}40%,52%{transform:translateY(-130px)}60%,72%{transform:translateY(-200px)}80%,100%{transform:translateY(0)}}
.PA-MHERO{padding:12px 14px;height:80px;background:linear-gradient(135deg,rgba(139,92,246,.04),rgba(167,139,250,.08))}
.PA-MH1{height:5px;width:70%;background:rgba(0,0,0,.08);border-radius:2px;margin-bottom:4px}
.PA-MH2{height:5px;width:50%;background:rgba(139,92,246,.2);border-radius:2px;margin-bottom:8px}
.PA-MSUB{height:3px;width:80%;background:rgba(0,0,0,.03);border-radius:2px;margin-bottom:3px}
.PA-MBTN{margin-top:8px;width:40px;height:10px;border-radius:4px;background:var(--p3)}
.PA-MPROOF{padding:10px 14px;height:70px}
.PA-MLOGOS{display:flex;gap:6px;margin-bottom:6px}.PA-MLOGOS span{width:16px;height:16px;border-radius:4px;background:rgba(139,92,246,.04);display:block}
.PA-MLINE{height:3px;width:60%;background:rgba(0,0,0,.03);border-radius:2px;margin-bottom:3px}.PA-MLINE.short{width:40%}
.PA-MSTARS{font-size:5px;color:var(--p1)}
.PA-MFEATS{padding:10px 14px;height:80px;background:rgba(139,92,246,.02)}
.PA-MFR{display:flex;gap:6px;margin-bottom:5px;align-items:center}
.PA-MFI{width:10px;height:10px;border-radius:3px;background:rgba(139,92,246,.06);flex-shrink:0}
.PA-MFL{flex:1}
.PA-MCTA{padding:12px 14px;height:70px;background:linear-gradient(180deg,rgba(13,12,10,.9),rgba(13,12,10,.95));display:flex;flex-direction:column;align-items:center;justify-content:center}
.PA-MCTXT{height:4px;width:50%;background:rgba(255,255,255,.1);border-radius:2px;margin-bottom:6px}
.PA-MCBTN{width:50px;height:12px;border-radius:5px;background:var(--p1);animation:PACTP 2s infinite}
@keyframes PACTP{0%,100%{box-shadow:0 0 0 rgba(139,92,246,0)}50%{box-shadow:0 0 16px rgba(139,92,246,.4)}}

/* Conversion badges — flying in */
.PA-CONV1{
  position:absolute;top:16px;right:4px;padding:5px 10px;border-radius:8px;
  background:rgba(34,197,94,.9);color:#fff;font-family:var(--M);font-size:8px;font-weight:700;
  box-shadow:0 4px 14px rgba(34,197,94,.25);z-index:2;
  animation:PACONV 4s ease-in-out infinite;
}
.PA-CONV2{
  position:absolute;bottom:40px;left:4px;padding:5px 10px;border-radius:8px;
  background:rgba(255,255,255,.9);color:var(--k);font-family:var(--M);font-size:7px;font-weight:600;
  border:1px solid rgba(139,92,246,.08);box-shadow:0 4px 14px rgba(0,0,0,.04);z-index:2;
  animation:PACONV 4s ease-in-out 2s infinite;
}
.PA-CONV3{
  position:absolute;top:50%;right:4px;padding:4px 8px;border-radius:6px;
  background:rgba(139,92,246,.9);color:#fff;font-family:var(--M);font-size:7px;font-weight:600;
  box-shadow:0 4px 12px rgba(109,40,217,.2);z-index:2;
  animation:PACONV 4s ease-in-out 3s infinite;
}
@keyframes PACONV{
  0%{opacity:0;transform:translateY(8px) scale(.9)}
  15%{opacity:1;transform:translateY(0) scale(1)}
  85%{opacity:1;transform:translateY(-2px) scale(1)}
  100%{opacity:0;transform:translateY(-8px) scale(.95)}
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  #S-PROD{padding:40px 16px}
  .PROD-H{margin-bottom:20px}
  .PROD-CARDS{display:flex;flex-direction:column;gap:12px;max-width:100%}
  .P-CARD{width:100%}
  .P-CARD{opacity:1;transform:none}
  .P-ANIM{height:120px;overflow:hidden !important}
  .PA-CONV1,.PA-CONV2,.PA-CONV3{display:none}
  .P-BODY{padding:14px 16px 14px}
  .P-TAG{display:none}
  .P-TI{font-size:16px;margin-bottom:4px}
  .P-DESC{font-size:12px;margin-bottom:8px}
  .P-FEATS{display:none}
  .P-PRICE{padding-top:8px}
  .P-BODY{flex-direction:column}
  .P-PRICE{margin-top:auto;display:flex;align-items:center;flex-wrap:wrap}
  .P-PRICES-ROW{display:flex;align-items:center;flex:1}
  .P-CTA{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0;margin:0;margin-left:auto;margin-top:0;border-radius:8px;font-size:0;line-height:0;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 4px rgba(0,0,0,.06);position:absolute;right:16px;bottom:14px}
  .P-CTA::before{content:'';display:block;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3Cpath d='M13 13l6 6'/%3E%3C/svg%3E") no-repeat center/contain}
  .PROD-SU{display:none}
}
@media(max-width:768px){
  #S-PROD{padding:32px 16px}
  .P-ANIM{height:100px}
}