/* ==========================================================================
   Aopy · Home · CSS
   Secțiunile Home construite în widgeturi HTML: demo video (dock), tastatura
   „Trust” (aopy-kb) și „Un modul pentru fiecare nevoie” (tab-uri amod).
   Se încarcă doar pe Home (regulă WPCode: Homepage).
   Mutate 1:1 din vechiul snippet „CSS” (10864) pe 2026-10-15.
   ========================================================================== */


/* ============================================
   DOCK VIDEO — AOPY (stil Raycast)
   ============================================ */
.aopy-dock{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 3rem;font-family:var(--aopy-ff-body);text-align:center;}
.aopy-dock *{box-sizing:border-box;}

/* rama de ecran */
.aopy-dock .ad-screen{
  position:relative;width:100%;border-radius:18px;overflow:hidden;
  background:#130528;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px rgba(44,4,90,.3);
}
.aopy-dock .ad-bar{
  display:flex;gap:7px;padding:12px 16px;background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.aopy-dock .ad-bar span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18);}
.aopy-dock .ad-stage{position:relative;width:100%;aspect-ratio:1422/1080;background:#130528;}
.aopy-dock .ad-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s ease;}
.aopy-dock .ad-video.is-active{opacity:1;}

/* dock — pe desktop peste video */
.aopy-dock .ad-dock{
  position:relative;
  z-index:5;
  margin:-86px auto 0;        /* trage dock-ul în sus, peste video */
  display:flex;justify-content:center;gap:.6rem;
  padding:8px;border-radius:20px;width:max-content;
  background:rgba(19,5,40,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
}
.aopy-dock .ad-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:0;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  transition:background .2s,color .2s,transform .2s;overflow:hidden;
}
.aopy-dock .ad-btn:hover{transform:translateY(-3px);color:#fff;background:rgba(255,255,255,.14);}
.aopy-dock .ad-btn.is-active{background:#5B08BB;color:#fff;}
.aopy-dock .ad-btn svg{width:22px;height:22px;position:relative;z-index:2;}
.aopy-dock .ad-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:rgba(255,255,255,.9);z-index:3;}
.aopy-dock .ad-btn:not(.is-active) .ad-prog{width:0 !important;}

/* caption sub ramă — titlu + descriere */
.aopy-dock .ad-caption{margin:1.75rem auto 0;max-width:620px;}
.aopy-dock .ad-title{font-family:var(--aopy-ff-head);font-weight:600;font-size:1.4rem;color:#130528;margin:0 0 .4rem;}
.aopy-dock .ad-desc{font-family:var(--aopy-ff-body);font-size:1.05rem;line-height:1.5;color:#5a5467;margin:0;min-height:48px;}



/* ===== MOBIL ===== */
@media(max-width:600px){
  .aopy-dock{padding:1rem .5rem 2rem;}
  .aopy-dock .ad-screen{border-radius:14px;}

  /* dock iese sub fereastră, pe fundalul paginii */
  .aopy-dock .ad-dock{
    position:static;transform:none;margin:1.25rem auto 0;
    background:rgba(19,5,40,.06);border:1px solid rgba(19,5,40,.1);
  }
  .aopy-dock .ad-btn{background:rgba(19,5,40,.08);color:#5B08BB;}
  .aopy-dock .ad-btn.is-active{background:#5B08BB;color:#fff;}
  .aopy-dock .ad-btn:hover{color:#5B08BB;background:rgba(19,5,40,.14);}

  .aopy-dock .ad-title{font-size:1.25rem;}
  .aopy-dock .ad-desc{font-size:.95rem;}
}



/* ============================================
   TRUST TASTATURĂ FULL-WIDTH — AOPY
   ============================================ */
.aopy-kb{
  position:relative;overflow:hidden;background:#0a0410;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  min-height:560px;display:flex;align-items:center;justify-content:center;
  font-family:var(--aopy-ff-head);
}
.aopy-kb *{box-sizing:border-box;}

.aopy-kb .kb-keyboard{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;justify-content:center;padding:1.5rem;z-index:1;}
.aopy-kb .kb-row{display:flex;gap:9px;width:100%;}
.aopy-kb .kb-k{flex:1;height:80px;border-radius:12px;background:#17111f;border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.22);font-size:17px;font-weight:500;min-width:0;}
.aopy-kb .kb-k.kw{flex:1.4;font-size:13px;color:rgba(255,255,255,.18);}
.aopy-kb .kb-k.ksp{flex:5;}
.aopy-kb .kb-k.lit{color:#fff;background:#231538;border-color:rgba(155,127,212,.5);animation:kb-glow 3s ease-in-out infinite;}
/* hover: dispare borderul — doar pe tastele normale, nu A O P Y */
.aopy-kb .kb-k:not(.lit){transition:border-color .2s ease,background .2s ease;cursor:pointer;}
.aopy-kb .kb-k:not(.lit):hover{border-color:transparent;background:#120c1a;}
@keyframes kb-glow{0%,100%{box-shadow:0 0 16px rgba(91,8,187,.5);}50%{box-shadow:0 0 26px rgba(91,8,187,.8);}}

.aopy-kb .kb-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 48% 58% at 50% 50%,rgba(10,4,16,.92) 8%,rgba(10,4,16,.55) 48%,rgba(10,4,16,.12) 100%);}
.aopy-kb .kb-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:540px;height:340px;z-index:2;pointer-events:none;background:radial-gradient(ellipse,rgba(91,8,187,.4),transparent 70%);filter:blur(55px);}

.aopy-kb .kb-content{position:relative;z-index:3;text-align:center;padding:3rem 1.5rem;max-width:680px;}
.aopy-kb .kb-gif{position:relative;width:132px;height:132px;margin:0 auto 1.5rem;}
.aopy-kb .kb-gifglow{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(91,8,187,.6),transparent 70%);filter:blur(22px);animation:kb-pulse 4s ease-in-out infinite;}
.aopy-kb .kb-gifframe{position:relative;width:132px;height:132px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;}
.aopy-kb .kb-gifframe img{width:100%;height:100%;object-fit:contain;padding:.5rem;}

.aopy-kb .kb-title{font-size:2.6rem;font-weight:700;color:#fff;line-height:1.15;margin:0;}
.aopy-kb .kb-sub{font-size:1.15rem;color:rgba(255,255,255,.6);margin:.85rem auto 0;max-width:480px;}
.aopy-kb .kb-stats{display:flex;gap:4.5rem;justify-content:center;margin-top:2.25rem;}
.aopy-kb .kb-num{font-size:4rem;font-weight:800;line-height:1;background:linear-gradient(135deg,#fff,#9b7fd4);-webkit-background-clip:text;background-clip:text;color:transparent;}
.aopy-kb .kb-slabel{font-size:.95rem;color:#9b7fd4;margin-top:.4rem;}
.aopy-kb .kb-btn{display:inline-flex;align-items:center;gap:.6rem;margin-top:2.25rem;background:#5B08BB;color:#fff;font-weight:600;font-size:1.05rem;padding:1rem 2.1rem;border-radius:999px;text-decoration:none;transition:background .2s,transform .2s;}
.aopy-kb .kb-btn:hover{background:#7a2bd9;transform:translateY(-2px);color:#fff;}
.aopy-kb .kb-btn svg{width:18px;height:18px;transition:transform .2s;}
.aopy-kb .kb-btn:hover svg{transform:translateX(4px);}

@media(max-width:768px){
  .aopy-kb{min-height:600px;}
  /* tastele raman mari si se taie pe laterale, ca pe Raycast */
  .aopy-kb .kb-keyboard{padding:1.5rem 0;gap:7px;overflow:hidden;}
  .aopy-kb .kb-row{gap:7px;justify-content:center;width:auto;min-width:860px;}
  .aopy-kb .kb-k{flex:0 0 auto;width:58px;height:58px;border-radius:9px;font-size:14px;}
  .aopy-kb .kb-k.kw{width:78px;font-size:10px;}
  .aopy-kb .kb-k.ksp{width:220px;}
  .aopy-kb .kb-title{font-size:1.75rem;}
  .aopy-kb .kb-sub{font-size:1rem;}
  .aopy-kb .kb-stats{gap:2.5rem;margin-top:1.75rem;}
  .aopy-kb .kb-num{font-size:3rem;}
  .aopy-kb .kb-gif{width:110px;height:110px;}
  .aopy-kb .kb-gifframe{width:110px;height:110px;}
}


/* ============================================
   TRUST NATIV PE HOME (aopy-trust), din 2026-10-16
   Secțiunea „Experiență pe care te poți baza 100%.” (container e57f7ac):
   logo-ul, titlul, textul, cifrele și butonul sunt widgeturi Elementor.
   Aici e doar tastatura din fundal (widget HTML cu clasa aopy-trust-bg,
   varianta light a lui aopy-kb) și efectele care nu se pot seta în Elementor.
   ============================================ */
.aopy-trust.e-con{position:relative;overflow:hidden}
.aopy-trust.e-con > .aopy-trust-bg.elementor-widget{position:absolute;inset:0;z-index:1;width:auto;max-width:none;margin:0}
.aopy-trust .aopy-trust-bg .elementor-widget-container{height:100%}
.aopy-trust .aopy-kb{position:absolute;inset:0;width:auto;max-width:none;margin:0;min-height:0;background:#fff}
.aopy-trust.e-con > .aopy-trust-inner.e-con{position:relative;z-index:3}

/* tastatura light */
.aopy-trust .aopy-kb .kb-keyboard{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent)}
.aopy-trust .aopy-kb .kb-k{background:#fbfafd;border-color:#ebe8f1;color:#bdb6cb;box-shadow:inset 0 -2px 0 #efecf4,0 1px 2px rgba(19,5,40,.04)}
.aopy-trust .aopy-kb .kb-k.kw{color:#c9c3d4}
.aopy-trust .aopy-kb .kb-k.lit{color:#5b08bb;background:#f6f2fd;border-color:#c4a6f2;animation:aopy-trust-glow 3s ease-in-out infinite}
.aopy-trust .aopy-kb .kb-k:not(.lit):hover{background:#f1eff6;border-color:#e5e2ed}
@keyframes aopy-trust-glow{0%,100%{box-shadow:0 0 0 3px rgba(91,8,187,.07),0 8px 20px -8px rgba(91,8,187,.35)}50%{box-shadow:0 0 0 4px rgba(91,8,187,.13),0 10px 28px -8px rgba(91,8,187,.55)}}
.aopy-trust .aopy-kb .kb-vignette{background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(255,255,255,.97) 12%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.12) 100%)}
.aopy-trust .aopy-kb .kb-glow{background:radial-gradient(ellipse,rgba(196,166,242,.42),transparent 70%)}

/* logo: lumina din spatele cardului (cardul e setat în Elementor) */
.aopy-trust-logo.e-con{position:relative;overflow:visible}
.aopy-trust-logo.e-con::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(162,116,232,.45),transparent 70%);filter:blur(22px);z-index:-1;pointer-events:none}
.aopy-trust-logo .elementor-widget-image,.aopy-trust-logo .elementor-widget-container{width:100%;height:100%}
.aopy-trust-logo img{width:100%;height:100%;object-fit:contain}

/* text și cifre */
.aopy-trust-sub{max-width:480px}
.aopy-trust .aopy-trust-stat.e-con{--width:auto;width:auto;flex:0 0 auto}
.aopy-trust-num .elementor-heading-title{background:linear-gradient(135deg,#130528 10%,#7d3bda 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* buton: se ridică puțin și săgeata alunecă la hover */
.aopy-trust-btn .elementor-button{transition:background-color .2s,transform .2s}
.aopy-trust-btn .elementor-button:hover{transform:translateY(-2px)}
.aopy-trust-btn .elementor-button-icon{transition:transform .2s}
.aopy-trust-btn .elementor-button:hover .elementor-button-icon{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){.aopy-trust .aopy-kb .kb-k.lit{animation:none}}



/* ============================================
   AOPY — SECȚIUNE MODULE (tab-uri + carduri glass mov)
   Fundal transparent: preia culoarea paginii.
   ============================================ */
.amod{
  --mov:#5B08BB; --mov-d:#2C045A; --ink:#1a0b2e; --cer:#00B5C5; --rose:#C33357;
  --maxw:1180px;
  --gut:max(1.5rem, calc((100vw - var(--maxw)) / 2));
  position:relative; padding: 0; font-family:var(--aopy-ff-head);
  overflow:hidden;
  /* full-bleed: iese din container-ul Elementor, ocupa toata latimea ecranului */
  width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.amod *{box-sizing:border-box;}
.amod-wrap{max-width:none; margin:0;}

/* HEADER + TABS */
.amod-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:nowrap; gap:2rem; margin-bottom:2rem; padding:0 var(--gut);}
.amod-head > div:first-child{flex:1; min-width:0;}
.amod-head .amod-tabs{flex:0 0 auto;}
.amod-head h2{font-family:var(--aopy-ff-head); font-size:48px; font-weight:400; line-height:58px; letter-spacing:-.02em; color:#5B08BB; margin:0;}
.amod-head p{font-family:var(--aopy-ff-body); font-size:16px; font-weight:400; line-height:26px; color:#130528; margin:.75rem 0 0; max-width:420px;}

.amod-tabs{display:inline-flex; gap:.25rem; background:rgba(91,8,187,.07); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(91,8,187,.16); border-radius:999px; padding:.35rem; flex-wrap:wrap;}
.amod-tab{border:0; background:transparent; color:rgba(26,11,46,.55); font-weight:500; font-size:.9rem; padding:.6rem 1.15rem; border-radius:999px; cursor:pointer; font-family:inherit; transition:all .25s; white-space:nowrap;}
.amod-tab:hover{color:var(--mov);}
.amod-tab.on{background:var(--mov); color:#fff; font-weight:600; box-shadow:0 4px 16px rgba(91,8,187,.3);}

/* PANELS */
.amod-panel{display:none;}
.amod-panel.on{display:block; animation:amod-fade .5s ease;}
@keyframes amod-fade{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* aurora difuza in spatele intregii sectiuni — da material pentru blur */
.amod-aurora{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.amod-aurora i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;}
.amod-aurora i:nth-child(1){width:420px; height:420px; background:rgba(91,8,187,.4); top:-120px; left:8%;}
.amod-aurora i:nth-child(2){width:360px; height:360px; background:rgba(0,181,197,.28); top:40%; right:5%;}
.amod-aurora i:nth-child(3){width:300px; height:300px; background:rgba(195,51,87,.22); bottom:-80px; left:40%;}
.amod-wrap{position:relative; z-index:1;}

/* RAIL wrapper + fade la capete (doar dreapta — stanga e marginea paginii) */
.amod-railwrap{position:relative;}
.amod-railwrap::after{content:""; position:absolute; top:0; bottom:0; right:0; width:80px; z-index:3; pointer-events:none; transition:opacity .3s; background:linear-gradient(270deg, rgba(250,248,255,.85), transparent);}
.amod-railwrap.at-end::after{opacity:0;}

/* RAIL (slider orizontal) — primul card aliniat la header, curge spre dreapta */
.amod-rail{display:flex; gap:1.3rem; overflow-x:auto; overflow-y:visible; padding:1.5rem var(--gut) 2.5rem; scroll-snap-type:x proximity; scroll-padding-left:var(--gut); -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.amod-rail::-webkit-scrollbar{display:none;}
/* ultimul card sa aiba spatiu la dreapta cand se scrolleaza pana la capat */
.amod-rail::after{content:""; flex:0 0 1px;}

/* SAGETI navigare — aliniate la container */
.amod-nav{display:flex; justify-content:flex-end; gap:.6rem; margin-top:.5rem; padding:0 var(--gut);}
.amod-nav button{width:44px; height:44px; border-radius:50%; border:1px solid rgba(91,8,187,.25); background:rgba(255,255,255,.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; color:var(--mov);}
.amod-nav button:hover{background:var(--mov); border-color:var(--mov); color:#fff; transform:scale(1.05);}
.amod-nav button:disabled{opacity:.3; cursor:not-allowed; transform:none;}
.amod-nav button:disabled:hover{background:rgba(255,255,255,.5); color:var(--mov); border-color:rgba(91,8,187,.25);}
.amod-nav svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* CARD glass mov — blur puternic, umbra difuza pe straturi, highlight sus */
.amod-card{flex:0 0 300px; scroll-snap-align:start; position:relative; border-radius:24px; overflow:hidden;
  background:linear-gradient(160deg, #ffffff, #f5f0fc);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 10px 30px rgba(91,8,187,.08), inset 0 1px 0 rgba(255,255,255,.9);
  height:440px; display:flex; flex-direction:column; padding:1.6rem; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;}
.amod-card:hover{transform:translateY(-6px); box-shadow:0 18px 44px rgba(91,8,187,.12), inset 0 1px 0 rgba(255,255,255,.8);}

/* Hero card = mov deschis, gradient solid (fara glow/blur ca sa nu glitchuie) */
.amod-card.hero{background:linear-gradient(160deg, #e5d9f7 0%, #f0e8fb 60%, #f5eefc 100%); border-color:rgba(255,255,255,.7);}
/* Coming soon card */
.amod-card.soon{flex:0 0 230px; align-items:center; justify-content:center; text-align:center; background:linear-gradient(160deg, #e5d9f7 0%, #f0e8fb 100%); border-color:rgba(255,255,255,.7);}

/* glow colorat difuz — concentrat sus, se stinge inainte de marginea de jos */
/* glow scos complet — era sursa glitch-ului cu backdrop-filter */
.amod-card .glow{display:none;}
.amod-card > *:not(.glow):not(.amod-hero-logo):not(.amod-soon-logo){position:relative; z-index:1;}

.amod-ch{position:relative; display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem;}
.amod-ci{display:flex; align-items:center; gap:.6rem;}
.amod-ico{width:38px; height:38px; border-radius:11px; background:var(--mov); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(91,8,187,.4); flex:none;}
.amod-ico svg{width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.amod-cn{font-weight:700; font-size:1.05rem; color:var(--ink);}
.amod-arrow{width:28px; height:28px; border-radius:8px; background:rgba(91,8,187,.1); display:flex; align-items:center; justify-content:center; flex:none;}
.amod-arrow svg{width:15px; height:15px; stroke:var(--mov); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.amod-desc{position:relative; font-size:.88rem; color:rgba(26,11,46,.62); margin:0 0 1.1rem; line-height:1.45;}

/* demo-ul: la Raycast sta jos; vizualele umplu, datele stau la baza */
.amod-demo{position:relative; margin-top:1.2rem; flex:1; display:flex; flex-direction:column; justify-content:flex-end; min-height:0;}
/* galerie + before/after umplu toata inaltimea */
.amod-demo:has(.amod-gal), .amod-demo:has(.amod-ba){justify-content:stretch;}
/* galeriile 2x2 umplu toata inaltimea demo-ului */
.amod-demo > .amod-gal{flex:1; grid-auto-rows:1fr; min-height:0;}
.amod-demo > .amod-gal .amod-cre{aspect-ratio:auto; min-height:0;}
/* before/after umple inaltimea */
.amod-demo > .amod-ba{flex:1; min-height:0;}
.amod-demo > .amod-ba .side{flex:1; aspect-ratio:auto; min-height:0;}

/* ---- demo: stat grid ---- */
.amod-stats{display:grid; grid-template-columns:1fr 1fr; gap:.5rem;}
.amod-stat{background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8); border-radius:13px; padding:.7rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(44,4,90,.05);}
.amod-stat .l{font-size:.68rem; color:rgba(26,11,46,.45); text-transform:uppercase; letter-spacing:.04em;}
.amod-stat .v{font-size:1.1rem; font-weight:700; color:var(--ink); margin-top:.15rem;}
.amod-stat .v.up{color:var(--mov);} .amod-stat .v.down{color:var(--rose);}
.amod-badges{display:flex; gap:.4rem; margin-top:.55rem;}
.amod-badges span{flex:1; text-align:center; font-size:.68rem; font-weight:600; padding:.35rem; border-radius:8px;}
.amod-badges .w{background:rgba(29,158,117,.14); color:#1d9e75;}
.amod-badges .n{background:rgba(26,11,46,.07); color:rgba(26,11,46,.5);}
.amod-badges .ls{background:rgba(195,51,87,.13); color:var(--rose);}

/* ---- demo: check list ---- */
.amod-checks{display:flex; flex-direction:column; gap:.1rem; background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.7); border-radius:12px; padding:.4rem .2rem;}
.amod-checkrow{display:flex; justify-content:space-between; align-items:center; padding:.45rem .8rem; font-size:.82rem; color:rgba(26,11,46,.75);}
.amod-checkrow svg{width:16px; height:16px; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.amod-checkrow .ok{stroke:#1d9e75;} .amod-checkrow .bad{stroke:var(--rose);} .amod-checkrow .warn{stroke:#d98a00;}

/* ---- demo: rule card ---- */
.amod-rule{background:rgba(91,8,187,.07); border:1px solid rgba(91,8,187,.18); border-radius:12px; padding:1rem; font-family:ui-monospace,'SF Mono',monospace; font-size:.8rem; line-height:1.7; color:var(--ink);}
.amod-rule .if{color:var(--mov); font-weight:700;} .amod-rule .then{color:var(--cer); font-weight:700;}
.amod-rule .done{margin-top:.6rem; padding-top:.6rem; border-top:1px solid rgba(91,8,187,.15); color:#1d9e75; font-family:inherit; font-size:.76rem;}

/* ---- demo: chips ---- */
.amod-chips{display:flex; flex-wrap:wrap; gap:.4rem;}
.amod-chips span{font-size:.75rem; padding:.45rem .8rem; border-radius:999px; font-weight:500;}
.amod-chips .a{background:rgba(91,8,187,.14); color:var(--mov);}
.amod-chips .b{background:rgba(0,181,197,.12); color:#0094a1;}
.amod-chips .c{background:rgba(255,255,255,.6); color:rgba(26,11,46,.6); border:1px solid rgba(26,11,46,.08);}

/* ---- demo: channel rows ---- */
.amod-chan{display:flex; flex-direction:column; gap:.5rem;}
.amod-chanrow{display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); border-radius:10px; padding:.6rem .85rem; font-size:.84rem; color:rgba(26,11,46,.8); font-weight:500;}
.amod-chanrow b{color:#1d9e75; font-weight:600; font-size:.78rem;}

/* ---- demo: product table ---- */
.amod-table{background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.7); border-radius:12px; overflow:hidden;}
.amod-trow{display:grid; grid-template-columns:1.6fr 1fr; align-items:center; padding:.5rem .8rem; font-size:.8rem; color:rgba(26,11,46,.8); border-bottom:1px solid rgba(26,11,46,.05);}
.amod-trow:last-child{border-bottom:0;}
.amod-trow .st{font-size:.72rem; font-weight:600;}
.amod-trow .st.ok{color:#1d9e75;} .amod-trow .st.fix{color:var(--cer);}
.amod-thead{font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(26,11,46,.4); background:rgba(91,8,187,.04);}

/* ---- demo: creative gallery (poze reale) ---- */
.amod-gal{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; width:100%;}
.amod-gal.three{grid-template-columns:1fr 1fr 1fr;}
.amod-cre{position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; background:#ece3fb;}
.amod-gal.three .amod-cre{aspect-ratio:9/16;}
.amod-cre img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.amod-cre .grad{position:absolute; inset:0; background:linear-gradient(to top, rgba(44,4,90,.85), transparent 55%);}
.amod-cre .tl{position:absolute; top:.5rem; left:.6rem; font-size:.6rem; font-weight:800; letter-spacing:.12em; color:#fff; z-index:2;}
.amod-cre .bl{position:absolute; left:.6rem; right:.6rem; bottom:.5rem; z-index:2; color:#fff;}
.amod-cre .bl b{font-size:.78rem; font-weight:800; line-height:1.1; display:block;}
.amod-cre .bl .pr{font-size:.72rem; font-weight:700; margin-top:.15rem;}
.amod-cre .bl .pr s{opacity:.6; font-weight:500; font-size:.62rem; margin-left:.2rem;}
.amod-cre .disc{position:absolute; top:.5rem; right:.5rem; background:var(--rose); color:#fff; font-size:.72rem; font-weight:800; padding:.2rem .5rem; border-radius:999px; z-index:2;}
.amod-cre.lite .grad{background:linear-gradient(to top, rgba(244,239,230,.9), transparent 50%);}
.amod-cre.lite .bl{color:var(--mov-d);}

/* ---- demo: before/after ---- */
/* before/after stivuit vertical — umple cardul */
.amod-ba{display:flex; flex-direction:column; gap:.7rem; width:100%;}
.amod-ba .side{aspect-ratio:16/10; border-radius:14px; overflow:hidden; position:relative; background:#ece3fb;}
.amod-ba .side img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.amod-ba .side.raw img{filter:saturate(.3) brightness(.9);}
.amod-ba .side .tag{position:absolute; bottom:.5rem; left:.5rem; z-index:3; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:rgba(0,0,0,.6); color:#fff; padding:.25rem .6rem; border-radius:7px;}
.amod-ba .side.after .tag{background:var(--mov);}
.amod-ba .side.after .ov{position:absolute; inset:0; background:linear-gradient(to top, rgba(44,4,90,.55), transparent 50%);}
/* badge discount: dreapta-sus, separat de tag */
.amod-ba .side.after b{position:absolute; right:.5rem; top:.5rem; color:#fff; background:var(--rose); font-size:.72rem; font-weight:800; padding:.25rem .55rem; border-radius:999px; z-index:3;}
.amod-ba .arr{align-self:center; color:var(--mov); font-size:1.4rem; font-weight:700; line-height:.5;}

/* ---- demo: dynamic data labels ---- */
.amod-dyn{position:relative; aspect-ratio:1.4; border-radius:12px; overflow:hidden; background:#ece3fb;}
.amod-dyn img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.amod-dyn .lab{position:absolute; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); font-size:.62rem; font-weight:600; color:var(--mov); padding:.2rem .5rem; border-radius:6px; box-shadow:0 2px 8px rgba(44,4,90,.15); z-index:2;}

/* ---- demo: scale ---- */
.amod-scale{display:flex; align-items:center; justify-content:space-between; gap:.3rem;}
.amod-scale .n{text-align:center;}
.amod-scale .n b{display:block; font-size:1.4rem; font-weight:800; color:var(--mov); line-height:1;}
.amod-scale .n span{font-size:.6rem; color:rgba(26,11,46,.5); text-transform:uppercase; letter-spacing:.04em;}
.amod-scale .n.big b{font-size:1.9rem;}
.amod-scale .ar{color:rgba(91,8,187,.4); font-size:.9rem;}

/* ---- demo: flow step ---- */
.amod-step-num{position:absolute; top:1.2rem; right:1.3rem; font-size:2.4rem; font-weight:800; color:rgba(91,8,187,.12); line-height:1;}
.amod-card.hero .amod-step-num{color:rgba(91,8,187,.3);}
.amod-prodlist{display:flex; flex-direction:column; gap:.6rem; width:100%;}
.amod-prod{display:flex; align-items:center; gap:.8rem; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); border-radius:13px; padding:.7rem; position:relative;}
.amod-prod.sel{background:rgba(91,8,187,.1); border-color:rgba(91,8,187,.3);}
.amod-prod img{width:52px; height:52px; border-radius:10px; object-fit:cover; flex:none;}
.amod-prod b{font-size:.86rem; font-weight:600; color:var(--ink); display:block;}
.amod-prod span{font-size:.74rem; color:rgba(26,11,46,.45);}
.amod-tick{margin-left:auto; width:24px; height:24px; border-radius:50%; background:var(--mov); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.amod-tick svg{width:14px; height:14px;}
.amod-brief{display:flex; flex-direction:column; gap:.55rem;}
.amod-brief span{font-size:.82rem; padding:.6rem .8rem; border-radius:10px; background:rgba(255,255,255,.55); color:rgba(26,11,46,.65); display:flex; align-items:center; gap:.5rem;}
.amod-brief span.hl{background:rgba(91,8,187,.12); color:var(--mov);}

/* ---- demo: formats — 3 formate mari centrate ---- */
.amod-fmt{display:flex; gap:.7rem; align-items:center; justify-content:center; width:100%;}
.amod-fmt .f{position:relative; border-radius:13px; overflow:hidden; background:#ece3fb; box-shadow:0 8px 20px rgba(44,4,90,.12); flex:1;}
.amod-fmt .f img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.amod-fmt .f1{aspect-ratio:1;}
.amod-fmt .f2{aspect-ratio:4/5;}
.amod-fmt .f3{aspect-ratio:9/16;}
.amod-fmt .f span{position:absolute; bottom:.3rem; left:0; right:0; text-align:center; font-size:.64rem; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); z-index:2;}
.amod-fmt .f span{position:absolute; bottom:.2rem; left:0; right:0; text-align:center; font-size:.55rem; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);}

/* ---- demo: phone (email/sms) ---- */
.amod-phone{margin:0 auto; width:160px; border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 0 0 5px #1d1a24, 0 14px 30px rgba(44,4,90,.3); font-size:.6rem;}
.amod-phone .pbar{height:18px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 .6rem; font-size:.55rem; font-weight:600; color:#111;}
.amod-phone.dark{background:#000;}
.amod-phone.dark .pbar{background:#111; color:#fff;}
.amod-mail-h{padding:.4rem .6rem; border-bottom:1px solid #eee; display:flex; align-items:center; gap:.4rem;}
.amod-mail-h .av{width:20px; height:20px; border-radius:50%; background:var(--mov-d); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:700; flex:none;}
.amod-mail-h b{font-size:.6rem; color:#111;} .amod-mail-h span{font-size:.5rem; color:#999; display:block;}
.amod-mail-hero{position:relative; height:85px; overflow:hidden;}
.amod-mail-hero img{width:100%; height:100%; object-fit:cover;}
.amod-mail-hero .ov{position:absolute; inset:0; background:linear-gradient(to top, rgba(44,4,90,.8), transparent 60%);}
.amod-mail-hero b{position:absolute; left:.5rem; bottom:.4rem; color:#fff; font-size:.65rem; font-weight:700; z-index:2;}
.amod-mail-b{padding:.5rem .6rem; font-size:.55rem; color:#444; line-height:1.5;}
.amod-sms{padding:.6rem .5rem; display:flex; flex-direction:column; gap:.4rem; min-height:140px; justify-content:flex-end;}
.amod-bubble{max-width:82%; padding:.4rem .6rem; border-radius:12px; font-size:.56rem; line-height:1.35;}
.amod-bubble.them{align-self:flex-start; background:#26252a; color:#fff;}
.amod-bubble.me{align-self:flex-end; background:#30d158; color:#fff;}

/* ---- coming soon decor (logo cu multiply) ---- */
.amod-soon-logo{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;}
.amod-soon-logo img{width:160%; opacity:.16; mix-blend-mode:multiply;}
.amod-soon-txt{position:relative; z-index:2;}
.amod-soon-txt b{font-weight:700; font-size:1.1rem; color:var(--ink);}
.amod-soon-txt span{display:block; font-size:.8rem; color:rgba(26,11,46,.5); margin-top:.3rem;}

/* hero decor: logo pe jumatate */
.amod-hero-logo{position:absolute; right:-30px; top:50%; transform:translateY(-50%); height:70%; opacity:.12; mix-blend-mode:multiply; pointer-events:none;}

/* RESPONSIVE */
@media(max-width:768px){
  .amod{padding:2.5rem 0;}
  .amod-card{flex:0 0 80vw; height:420px;}
  .amod-card.soon{flex:0 0 60vw;}
  /* tab-uri pe un rand, scroll orizontal, fara wrap */
  .amod-tabs{width:auto; max-width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
  .amod-tabs::-webkit-scrollbar{display:none;}
  .amod-tab{flex:0 0 auto;}
  .amod-head{flex-direction:column; align-items:flex-start;}
  /* fade doar in interiorul rail-ului, nu creeaza umbra fantoma */
  .amod-railwrap::after{width:40px;}
}


/* ==========================================================
   POZE REALE (2026-10-19) — exporturi Feed Design pătrate
   .amod-fit = imaginea se vede întreagă (contain), pe fundalul
   ei (--fit-bg), în loc să fie tăiată (cover)
   ========================================================== */
.amod-fit{background:var(--fit-bg, #fff) !important;}
.amod-fit > img,
.amod-fit.amod-dyn > img{object-fit:contain !important;}


/* ============================================
   Hero: hub animat (hv)
   Magazinele → nodul AOPY → cele 5 funcționalități. Machetă fixă 600×600
   scalată la lățimea coloanei (--hv-s, din JS). Hover pe un nod = conectorul
   lui se aprinde și apare descrierea; fără hover, nodurile se aprind pe rând.
   Pe mobil (≤767) vizualul e ascuns.
   ============================================ */
.hv{--hv-p:#5B08BB;--hv-p2:#8D53DE;--hv-ink:#130528;--hv-mut:#5A5270;position:relative;width:100%;max-width:600px;aspect-ratio:1;margin:0 auto}
.hv-st{position:absolute;left:0;top:0;width:600px;height:600px;transform:scale(var(--hv-s,1));transform-origin:0 0}
.hv-lines{position:absolute;inset:0;overflow:visible}
.hv-c-b{fill:none;stroke:#E4DAF5;stroke-width:1.5;stroke-dasharray:3 6;transition:stroke .35s,stroke-dasharray .35s}
.hv-c-f{fill:none;stroke:var(--hv-p2);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 286;stroke-dashoffset:300;opacity:.75;animation:hv-flow var(--d,3s) linear var(--dl,0s) infinite;transition:stroke-width .3s,opacity .3s}
.hv-c.is-on .hv-c-b{stroke:#CDB8F2;stroke-dasharray:none}
.hv-c.is-on .hv-c-f{stroke-width:3;opacity:1;animation-duration:1.4s}
@keyframes hv-flow{to{stroke-dashoffset:0}}
/* nodul AOPY */
.hv-core{position:absolute;left:300px;top:262px;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:38px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#7426DC 0%,#5B08BB 55%,#8D53DE 100%);box-shadow:0 24px 50px -18px rgba(91,8,187,.65),inset 0 1px 0 rgba(255,255,255,.25);z-index:3;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.hv-core svg{width:86px;height:auto;margin-top:6px;fill:#fff}
.hv-ring{position:absolute;left:300px;top:262px;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:44px;border:1.5px solid rgba(141,83,222,.45);z-index:2;animation:hv-ring 3.2s cubic-bezier(.215,.61,.355,1) infinite;pointer-events:none}
.hv-ring.r2{animation-delay:1.6s}
@keyframes hv-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
/* noduri */
.hv-n{position:absolute;z-index:4;width:0;height:0;cursor:default}
.hv-n-ic{position:absolute;left:-31px;top:-31px;width:62px;height:62px;border-radius:50%;background:#fff;border:1px solid #E6E0F0;box-shadow:0 12px 26px -16px rgba(44,4,90,.35);display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.23,1,.32,1),border-color .3s,box-shadow .3s}
.hv-n-ic img{width:34px;height:34px;object-fit:contain;border-radius:8px}
.hv-n-mod .hv-n-ic{background:#F6F1FE;border-color:#E2D4F8}
.hv-n-ic svg{width:26px;height:26px;fill:none;stroke:var(--hv-p);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hv-n-l{position:absolute;left:0;top:38px;transform:translateX(-50%);white-space:nowrap;font-family:var(--aopy-ff-body);font-size:13px;font-weight:600;color:var(--hv-ink);transition:color .3s}
.hv-n.is-on .hv-n-ic{transform:scale(1.12);border-color:#C9AFF3;box-shadow:0 0 0 6px rgba(141,83,222,.12),0 16px 30px -14px rgba(91,8,187,.45)}
.hv-n.is-on .hv-n-l{color:var(--hv-p)}
/* integrări care vin în curând */
.hv-soon .hv-n-ic img{filter:grayscale(1);opacity:.55}
.hv-soon .hv-n-l{color:#A99FC0}
.hv-c.hv-c-soon .hv-c-f{display:none}
/* descrierea nodului activ */
.hv-tip{position:absolute;left:300px;top:528px;width:320px;margin-left:-160px;padding:12px 15px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid #ECE4F8;box-shadow:0 18px 36px -22px rgba(44,4,90,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s cubic-bezier(.23,1,.32,1);pointer-events:none}
.hv-tip.is-on{opacity:1;transform:none}
.hv-tip b{display:block;font-family:var(--aopy-ff-body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hv-p)}
.hv-tip span{display:block;margin-top:4px;font-family:var(--aopy-ff-body);font-size:13.5px;line-height:1.4;color:var(--hv-mut)}
/* paralaxă ușoară (JS setează --hv-x / --hv-y între -1 și 1) */
.hv-n{transform:translate(calc(var(--hv-x,0) * 7px),calc(var(--hv-y,0) * 7px));transition:transform .6s cubic-bezier(.23,1,.32,1)}
.hv-core{transform:translate(calc(var(--hv-x,0) * -4px),calc(var(--hv-y,0) * -4px))}
/* hero în două coloane pe desktop */
@media (min-width:1025px){
  .md-hero .md-hero-grid .md-hero-in h1.elementor-heading-title{font-size:56px!important}
}
@media (max-width:767px){.md-hero .hv-col{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .hv-c-f,.hv-ring{animation:none}
  .hv-c-f{opacity:0}
  .hv-c.is-on .hv-c-f{opacity:0}
  .hv-n,.hv-core{transform:none}
}
.hv.is-off .hv-c-f,.hv.is-off .hv-ring{animation-play-state:paused}

/* hero: integrările stau în coloana din stânga, pe un singur rând (desktop);
   „În curând” e o etichetă mică pe colțul pastilei, ca să nu lungească rândul */
@media (min-width:1025px){
  html body .md-hero .md-hero-grid .md-int-in.e-con{margin-top:22px}
  html body .md-hero .md-hero-grid .md-chips.e-con{flex-wrap:nowrap!important;gap:8px!important}
  html body .md-hero .md-hero-grid .md-chip.e-con{flex:0 0 auto!important;position:relative;overflow:visible;padding:6px 12px 6px 7px!important;gap:7px!important}
  html body .md-hero .md-hero-grid .md-chip .elementor-widget-image img{width:20px!important;height:20px!important}
  html body .md-hero .md-hero-grid .md-chip .md-chip-t .elementor-heading-title{font-size:13.5px!important}
  html body .md-hero .md-hero-grid .md-chip .md-chip-badge{position:absolute!important;top:-9px;right:-4px;padding:2px 7px!important;margin:0!important;box-shadow:0 0 0 2px #fff}
  html body .md-hero .md-hero-grid .md-chip .md-chip-badge .elementor-heading-title{font-size:9.5px!important;line-height:1.3!important}
}
@media (min-width:1025px) and (max-width:1279px){
  html body .md-hero .md-hero-grid .md-chips.e-con{gap:6px!important}
  html body .md-hero .md-hero-grid .md-chip.e-con{padding:5px 9px 5px 6px!important;gap:5px!important}
  html body .md-hero .md-hero-grid .md-chip .elementor-widget-image img{width:17px!important;height:17px!important}
  html body .md-hero .md-hero-grid .md-chip .md-chip-t .elementor-heading-title{font-size:12px!important}
}