/* Hero animat: Autentificare, Creeaza cont, Contact (includes/page-hero.php) */
.ph{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1.2fr) 380px; gap:24px; align-items:center;
  padding:34px 36px; margin-bottom:22px; border-radius:22px; border:1px solid var(--card-border);
  background:radial-gradient(110% 140% at 100% 0%, rgba(var(--accent-rgb, 255,138,30), .26), transparent 55%),
             radial-gradient(80% 120% at 0% 100%, rgba(139,92,246,.16), transparent 60%), var(--card-bg); }
.ph-register{ background:radial-gradient(110% 140% at 100% 0%, rgba(236,72,153,.22), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(var(--accent-rgb, 255,138,30), .2), transparent 60%), var(--card-bg); }
.ph-contact{ background:radial-gradient(110% 140% at 100% 0%, rgba(59,130,246,.24), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(var(--accent-rgb, 255,138,30), .16), transparent 60%), var(--card-bg); }

/* bule de lumina care se misca lent in fundal */
.ph-bg{ position:absolute; inset:0; pointer-events:none; }
.ph-bg span{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.35; animation:phBlob 14s ease-in-out infinite alternate; }
.ph-bg span:nth-child(1){ width:220px; height:220px; left:-60px; top:-80px; background:var(--accent); }
.ph-bg span:nth-child(2){ width:180px; height:180px; left:40%; bottom:-110px; background:#8b5cf6; animation-delay:-5s; }
.ph-bg span:nth-child(3){ width:140px; height:140px; right:8%; top:-60px; background:#ec4899; animation-delay:-9s; opacity:.22; }
@keyframes phBlob{ to{ transform:translate(40px, 30px) scale(1.15); } }

.ph-text{ position:relative; z-index:1; }
.ph-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid var(--card-border);
  font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text); }
.ph-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:phPulse 1.6s infinite; }
.ph-contact .ph-dot{ background:#3b82f6; box-shadow:0 0 0 0 rgba(59,130,246,.7); }
.ph-register .ph-dot{ background:#ec4899; box-shadow:0 0 0 0 rgba(236,72,153,.7); }
@keyframes phPulse{ 70%{ box-shadow:0 0 0 10px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.ph h1{ font-size:38px; line-height:1.12; margin:16px 0 12px; letter-spacing:-.02em; }
.ph h1 span{ background:linear-gradient(90deg, var(--accent), #f472b6, #a78bfa, var(--accent)); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:phShine 6s linear infinite; }
@keyframes phShine{ to{ background-position:300% center; } }
.ph p{ margin:0; color:var(--text-dim); font-size:15.5px; line-height:1.6; max-width:540px; }
.ph-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.ph-chips span{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--card-border);
  font-size:13px; font-weight:600; opacity:0; transform:translateY(10px); animation:phIn .5s ease forwards; animation-delay:calc(.25s + var(--i) * .12s); }
.ph-chips span svg{ color:var(--accent); }
@keyframes phIn{ to{ opacity:1; transform:none; } }

.ph-visual{ position:relative; z-index:1; width:360px; height:260px; margin:0 auto; }
.ph-float{ position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; font-size:13px;
  background:rgba(20,22,30,.82); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px); box-shadow:0 14px 34px rgba(0,0,0,.4); animation:phBob 4s ease-in-out infinite; color:#fff; }
.ph-float b{ display:block; font-size:13.5px; } .ph-float small{ display:block; font-size:11.5px; color:#a3a7b5; }
@keyframes phBob{ 50%{ transform:translateY(-8px); } }

/* ----- Autentificare: casti + unde + orbita ----- */
.ph-core{ position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow:0 18px 50px rgba(var(--accent-rgb, 255,138,30), .45); animation:phBeat 1.2s ease-in-out infinite; }
@keyframes phBeat{ 0%,100%{ transform:scale(1); } 15%{ transform:scale(1.07); } 30%{ transform:scale(.98); } }
.ph-wave{ position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px; border-radius:50%; border:2px solid var(--accent); opacity:0; animation:phWave 3s ease-out infinite; }
.ph-wave.w2{ animation-delay:1s; } .ph-wave.w3{ animation-delay:2s; }
@keyframes phWave{ 0%{ transform:scale(.9); opacity:.6; } 100%{ transform:scale(2.6); opacity:0; } }
.ph-orbit{ position:absolute; left:50%; top:50%; width:250px; height:250px; margin:-125px; border-radius:50%; border:1px dashed rgba(255,255,255,.12); animation:phSpin 18s linear infinite; }
.ph-orbit span{ position:absolute; width:38px; height:38px; margin:-19px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-alt); border:1px solid var(--card-border); color:var(--accent); animation:phSpin 18s linear infinite reverse; }
.ph-orbit .o1{ left:50%; top:0; } .ph-orbit .o2{ left:100%; top:50%; } .ph-orbit .o3{ left:50%; top:100%; } .ph-orbit .o4{ left:0; top:50%; }
.ph-orbit .o1{ color:#f43f5e; } .ph-orbit .o2{ color:#fbbf24; }
@keyframes phSpin{ to{ transform:rotate(360deg); } }
.ph-np{ right:-6px; bottom:4px; }
.ph-np-play{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; flex-shrink:0; }
.ph-mini-eq{ display:flex; align-items:flex-end; gap:2px; height:16px; }
.ph-mini-eq i, .ph-typing i{ display:block; width:3px; border-radius:2px; background:var(--accent); animation:phEq .9s ease-in-out infinite alternate; }
.ph-mini-eq i:nth-child(1){ height:40%; } .ph-mini-eq i:nth-child(2){ height:100%; animation-delay:-.3s; } .ph-mini-eq i:nth-child(3){ height:60%; animation-delay:-.6s; } .ph-mini-eq i:nth-child(4){ height:85%; animation-delay:-.15s; }
@keyframes phEq{ from{ transform:scaleY(.3); } to{ transform:scaleY(1); } }
.ph-mini-eq i{ transform-origin:bottom; }

/* ----- Creeaza cont: card de membru 3D ----- */
.ph-card{ position:absolute; left:50%; top:50%; width:270px; height:170px; margin:-95px 0 0 -135px; padding:16px 18px; border-radius:18px; overflow:hidden; color:#fff;
  background:linear-gradient(135deg, var(--accent) 0%, #ec4899 55%, #8b5cf6 100%); box-shadow:0 26px 60px rgba(0,0,0,.45);
  transform:perspective(800px) rotateX(10deg) rotateY(-16deg); animation:phTilt 6s ease-in-out infinite; }
@keyframes phTilt{ 50%{ transform:perspective(800px) rotateX(-6deg) rotateY(14deg) translateY(-8px); } }
.ph-card-top{ display:flex; justify-content:space-between; align-items:center; }
.ph-card-logo{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; opacity:.95; }
.ph-card-chip{ width:34px; height:24px; border-radius:6px; background:linear-gradient(135deg, #fde68a, #f59e0b); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.ph-card-avatar{ position:absolute; left:18px; top:58px; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.6); }
.ph-card-name{ position:absolute; left:78px; top:62px; font-weight:800; font-size:16px; }
.ph-card-sub{ position:absolute; left:78px; top:84px; font-size:11.5px; opacity:.85; }
.ph-card-perks{ position:absolute; left:18px; right:18px; bottom:14px; display:flex; gap:6px; flex-wrap:wrap; }
.ph-card-perks span{ display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:10px; background:rgba(0,0,0,.2); font-size:10.5px; font-weight:700; }
.ph-card-shine{ position:absolute; top:-50%; left:-60%; width:40%; height:200%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform:rotate(20deg); animation:phShineCard 3.6s ease-in-out infinite; }
@keyframes phShineCard{ 0%{ left:-60%; } 60%,100%{ left:130%; } }
.ph-ok{ left:0; bottom:0; color:#4ade80; font-weight:700; }
.ph-note{ position:absolute; bottom:0; font-size:24px; color:var(--accent); opacity:0; animation:phNote 7s linear infinite; }
.ph-note.n1{ left:6%; } .ph-note.n2{ left:30%; animation-delay:1.7s; color:#f472b6; } .ph-note.n3{ left:62%; animation-delay:3.4s; color:#a78bfa; } .ph-note.n4{ left:88%; animation-delay:5.1s; }
@keyframes phNote{ 0%{ transform:translateY(20px) rotate(-12deg); opacity:0; } 15%{ opacity:.85; } 100%{ transform:translateY(-250px) rotate(18deg); opacity:0; } }

/* ----- Contact: avion de hartie + plic ----- */
.ph-path{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ph-path path{ fill:none; stroke:rgba(255,255,255,.18); stroke-width:2; stroke-dasharray:6 8; animation:phDash 1.2s linear infinite; }
@keyframes phDash{ to{ stroke-dashoffset:-28; } }
.ph-plane{ position:absolute; left:0; top:0; color:#60a5fa; offset-path:path('M10 200 C 90 60, 190 230, 300 70'); offset-rotate:auto 45deg; animation:phFly 4.5s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes phFly{ 0%{ offset-distance:0%; opacity:0; } 10%{ opacity:1; } 80%{ opacity:1; } 92%,100%{ offset-distance:100%; opacity:0; } }
.ph-envelope{ position:absolute; right:6px; top:56px; width:130px; height:90px; }
.ph-env-body{ position:absolute; inset:0; border-radius:10px; background:linear-gradient(160deg, #3b82f6, #1d4ed8); box-shadow:0 18px 40px rgba(29,78,216,.45);
  clip-path:polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); z-index:2; }
.ph-env-flap{ position:absolute; left:0; right:0; top:0; height:56px; background:#2563eb; clip-path:polygon(0 0, 100% 0, 50% 100%); transform-origin:top; z-index:3; animation:phFlap 4.5s ease-in-out infinite; border-radius:10px 10px 0 0; }
@keyframes phFlap{ 0%,70%{ transform:rotateX(0); } 80%,95%{ transform:rotateX(180deg); z-index:1; } 100%{ transform:rotateX(0); } }
.ph-letter{ position:absolute; left:12px; right:12px; top:8px; height:70px; border-radius:6px; background:#fff; z-index:1; padding:10px; display:flex; flex-direction:column; gap:6px; animation:phLetter 4.5s ease-in-out infinite; }
.ph-letter i{ display:block; height:5px; border-radius:3px; background:#cbd5e1; } .ph-letter i:nth-child(2){ width:70%; } .ph-letter i:nth-child(3){ width:45%; background:#93c5fd; }
@keyframes phLetter{ 0%,78%{ transform:translateY(0); } 88%,96%{ transform:translateY(-46px); } 100%{ transform:translateY(0); } }
.ph-env-badge{ position:absolute; right:-8px; top:-8px; z-index:4; width:26px; height:26px; border-radius:50%; background:#ef4444; color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px var(--card-bg); animation:phPop 4.5s ease-in-out infinite; }
@keyframes phPop{ 0%,82%{ transform:scale(0); } 88%{ transform:scale(1.25); } 92%,100%{ transform:scale(1); } }
.ph-reply{ left:30px; bottom:2px; }
.ph-typing{ display:flex; gap:3px; align-items:center; height:10px; }
.ph-typing i{ width:6px; height:6px; border-radius:50%; background:#60a5fa; animation:phType 1.2s ease-in-out infinite; }
.ph-typing i:nth-child(2){ animation-delay:.2s; } .ph-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes phType{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

@media (max-width:1000px){
  .ph{ grid-template-columns:minmax(0, 1fr); padding:26px 20px; }
  .ph-visual{ order:-1; justify-self:center; transform:scale(.8); margin:-26px 0 -30px; }
  .ph h1{ font-size:30px; }
}
@media (max-width:420px){ .ph-visual{ transform:scale(.72); margin:-36px 0 -40px; } }
@media (prefers-reduced-motion: reduce){
  .ph *, .ph *::before, .ph *::after{ animation:none !important; }
  .ph-chips span{ opacity:1; transform:none; }
  .ph-plane, .ph-note, .ph-wave{ display:none; }
}

/* ----- Intrebari frecvente: conversatie care se scrie singura ----- */
.ph-faq{ background:radial-gradient(110% 140% at 100% 0%, rgba(245,158,11,.24), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(16,185,129,.16), transparent 60%), var(--card-bg); }
.ph-faq .ph-dot{ background:#f59e0b; box-shadow:0 0 0 0 rgba(245,158,11,.7); }
.ph-chat{ position:absolute; left:0; right:40px; top:14px; display:flex; flex-direction:column; gap:10px; }
.ph-msg{ display:inline-flex; align-items:center; gap:7px; max-width:82%; padding:9px 13px; border-radius:14px; font-size:13px; font-weight:600;
  opacity:0; transform:translateY(10px) scale(.96); animation:phMsg 8s ease infinite; }
.ph-msg.ask{ align-self:flex-start; background:var(--bg-alt); border:1px solid var(--card-border); border-bottom-left-radius:4px; }
.ph-msg.ask svg{ color:#f59e0b; }
.ph-msg.ans{ align-self:flex-end; background:linear-gradient(135deg, #10b981, #059669); color:#fff; border-bottom-right-radius:4px; }
.ph-msg.m2{ animation-delay:.9s; } .ph-msg.m3{ animation-delay:1.8s; } .ph-msg.m4{ animation-delay:2.7s; }
@keyframes phMsg{ 0%{ opacity:0; transform:translateY(10px) scale(.96); } 6%,85%{ opacity:1; transform:none; } 95%,100%{ opacity:0; transform:translateY(-6px); } }
.ph-msg.m4 .ph-typing i{ background:#fff; }
.ph-bubble{ position:absolute; right:0; bottom:6px; width:96px; height:96px; border-radius:50% 50% 50% 12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #f59e0b, #f97316); box-shadow:0 18px 44px rgba(245,158,11,.4); animation:phBob 3.6s ease-in-out infinite; }
.ph-bubble span{ font-size:58px; font-weight:900; color:#fff; line-height:1; animation:phWiggle 3s ease-in-out infinite; }
@keyframes phWiggle{ 0%,100%{ transform:rotate(0); } 10%{ transform:rotate(-14deg); } 20%{ transform:rotate(10deg); } 30%{ transform:rotate(0); } }
.ph-q{ position:absolute; font-size:30px; font-weight:900; color:#f59e0b; opacity:0; animation:phNote 7s linear infinite; bottom:0; }
.ph-q.q1{ left:8%; } .ph-q.q2{ left:46%; animation-delay:2.3s; color:#10b981; } .ph-q.q3{ left:70%; animation-delay:4.6s; color:#a78bfa; }

/* ----- Trimite radio: antena + pasi ----- */
.ph-submit{ background:radial-gradient(110% 140% at 100% 0%, rgba(16,185,129,.22), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(var(--accent-rgb, 255,138,30), .2), transparent 60%), var(--card-bg); }
.ph-tower{ position:absolute; left:50%; top:4px; width:80px; margin-left:-40px; color:var(--accent); }
.ph-tower svg{ position:relative; z-index:1; display:block; }
.ph-sig{ position:absolute; left:50%; top:18px; width:40px; height:40px; margin:-20px; border-radius:50%; border:3px solid var(--accent); border-bottom-color:transparent; border-top-color:transparent; opacity:0; animation:phSig 2.4s ease-out infinite; }
.ph-sig.s2{ animation-delay:.8s; } .ph-sig.s3{ animation-delay:1.6s; }
@keyframes phSig{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(3.4); opacity:0; } }
.ph-onair{ position:absolute; right:10px; top:24px; padding:6px 12px; border-radius:8px; font-size:13px; font-weight:900; letter-spacing:.12em; color:#fff;
  background:#ef4444; box-shadow:0 0 0 rgba(239,68,68,0); animation:phOnAir 2s ease-in-out infinite; }
@keyframes phOnAir{ 0%,100%{ opacity:.45; box-shadow:0 0 0 rgba(239,68,68,0); } 50%{ opacity:1; box-shadow:0 0 24px rgba(239,68,68,.75); } }
.ph-steps{ position:absolute; left:0; right:0; bottom:8px; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding:14px 12px 22px; border-radius:16px;
  background:rgba(20,22,30,.78); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px); color:#fff; }
.ph-steps .st{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#a3a7b5; animation:phStepTxt 6s infinite; }
.ph-steps .st span{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#2a2d38; animation:phStep 6s infinite; }
.ph-steps .st2, .ph-steps .st2 span{ animation-delay:1.5s; } .ph-steps .st3, .ph-steps .st3 span{ animation-delay:3s; }
@keyframes phStep{ 0%,8%{ background:#2a2d38; transform:scale(1); } 14%{ transform:scale(1.18); } 18%,85%{ background:var(--accent); transform:scale(1); } 100%{ background:#2a2d38; } }
@keyframes phStepTxt{ 0%,10%{ color:#a3a7b5; } 18%,85%{ color:#fff; } 100%{ color:#a3a7b5; } }
.ph-steps-bar{ position:absolute; left:16%; right:16%; bottom:10px; height:4px; border-radius:3px; background:#2a2d38; overflow:hidden; }
.ph-steps-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent), #10b981); animation:phBar 6s ease-in-out infinite; }
@keyframes phBar{ 0%{ width:0; } 60%,85%{ width:100%; } 100%{ width:100%; opacity:0; } }

/* ----- Promovare: radioul tau urca pe locul 1 + crestere ----- */
.ph-promote{ background:radial-gradient(110% 140% at 100% 0%, rgba(250,204,21,.2), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(var(--accent-rgb, 255,138,30), .24), transparent 60%), var(--card-bg); }
.ph-promote .ph-dot{ background:#facc15; box-shadow:0 0 0 0 rgba(250,204,21,.7); }
.ph-rank{ position:absolute; left:0; top:10px; width:230px; height:190px; }
.rk{ position:absolute; left:0; right:0; height:52px; display:flex; align-items:center; gap:10px; padding:0 12px; border-radius:14px;
  background:var(--bg-alt); border:1px solid var(--card-border); }
.rk b{ width:22px; font-size:15px; color:var(--text-dim); text-align:center; }
.rk-logo{ width:30px; height:30px; border-radius:8px; background:#2a2d38; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rk-lines{ flex:1; display:flex; flex-direction:column; gap:6px; } .rk-lines i{ height:6px; border-radius:3px; background:#2a2d38; } .rk-lines i + i{ width:60%; }
.rk-a{ top:0; animation:rkA 6s ease-in-out infinite; } .rk-b{ top:66px; animation:rkB 6s ease-in-out infinite; }
.rk-you{ top:132px; z-index:2; color:#fff; background:linear-gradient(135deg, var(--accent), #f59e0b); border-color:transparent; box-shadow:0 14px 34px rgba(var(--accent-rgb, 255,138,30), .45); animation:rkYou 6s ease-in-out infinite; }
.rk-you b{ color:#fff; } .rk-you .rk-logo{ background:rgba(255,255,255,.25); }
.rk-name{ flex:1; font-weight:800; font-size:14px; line-height:1.15; } .rk-name small{ display:block; font-size:10px; letter-spacing:.12em; opacity:.85; }
.rk-star{ color:#fff8c5; animation:phWiggle 2s ease-in-out infinite; }
@keyframes rkYou{ 0%,15%{ top:132px; } 40%,85%{ top:0; } 100%{ top:132px; } }
@keyframes rkA{ 0%,15%{ top:0; } 40%,85%{ top:66px; } 100%{ top:0; } }
@keyframes rkB{ 0%,15%{ top:66px; } 40%,85%{ top:132px; } 100%{ top:66px; } }
.ph-growth{ position:absolute; right:0; bottom:10px; width:118px; padding:12px; border-radius:16px; background:rgba(20,22,30,.78); border:1px solid rgba(255,255,255,.08); color:#fff; animation:phBob 4s ease-in-out infinite; }
.gr-bars{ display:flex; align-items:flex-end; gap:6px; height:80px; }
.gr-bars i{ flex:1; height:var(--h); border-radius:5px 5px 0 0; background:linear-gradient(180deg, #4ade80, #16a34a); transform-origin:bottom; animation:phGrow 6s ease-in-out infinite; }
.gr-bars i:nth-child(2){ animation-delay:.15s; } .gr-bars i:nth-child(3){ animation-delay:.3s; } .gr-bars i:nth-child(4){ animation-delay:.45s; } .gr-bars i:nth-child(5){ animation-delay:.6s; }
@keyframes phGrow{ 0%,10%{ transform:scaleY(.15); } 40%,85%{ transform:scaleY(1); } 100%{ transform:scaleY(.15); } }
.gr-label{ display:flex; align-items:center; gap:4px; margin-top:8px; font-size:11.5px; font-weight:700; color:#4ade80; }

@media (prefers-reduced-motion: reduce){
  .ph-msg, .ph-steps .st, .ph-steps .st span{ opacity:1 !important; transform:none !important; }
  .ph-q, .ph-sig{ display:none; }
  .ph-steps-bar i{ width:100%; }
  .rk-you{ top:0; } .rk-a{ top:66px; } .rk-b{ top:132px; }
  .gr-bars i{ transform:none; }
}

/* ----- Parteneri: retea cu semnal intre site si parteneri ----- */
.ph-partners{ background:radial-gradient(110% 140% at 100% 0%, rgba(56,189,248,.2), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(var(--accent-rgb, 255,138,30), .2), transparent 60%), var(--card-bg); }
.ph-partners .ph-dot{ background:#38bdf8; box-shadow:0 0 0 0 rgba(56,189,248,.7); }
.ph-net{ position:absolute; inset:0; width:360px; height:260px; overflow:visible; }
.ph-net line{ stroke:rgba(255,255,255,.14); stroke-width:2; stroke-dasharray:4 6; }
.ph-net .ph-pkt{ fill:var(--accent); filter:drop-shadow(0 0 6px var(--accent)); }
.ph-hub{ position:absolute; left:180px; top:130px; width:82px; height:82px; margin:-41px; border-radius:24px; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow:0 0 0 10px rgba(var(--accent-rgb, 255,138,30), .12), 0 18px 40px rgba(var(--accent-rgb, 255,138,30), .4); animation:phBeat 2.4s ease-in-out infinite; }
.ph-node{ position:absolute; width:58px; height:58px; margin:-29px; border-radius:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:7px;
  background:#fff; box-shadow:0 10px 26px rgba(0,0,0,.35); color:#555; animation:phNode 3s ease-in-out infinite; animation-delay:calc(var(--i) * -.5s); }
.ph-node img{ max-width:100%; max-height:100%; object-fit:contain; }
@keyframes phNode{ 50%{ transform:translateY(-6px) scale(1.04); } }

/* ----- Favorite: inima care bate ----- */
.ph-favorites{ background:radial-gradient(110% 140% at 100% 0%, rgba(244,63,94,.26), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(236,72,153,.16), transparent 60%), var(--card-bg); }
.ph-favorites .ph-dot{ background:#f43f5e; box-shadow:0 0 0 0 rgba(244,63,94,.7); }
.ph-bigheart{ position:absolute; left:50%; top:46%; width:150px; height:150px; margin:-75px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  background:radial-gradient(circle at 30% 30%, #fb7185, #e11d48); box-shadow:0 0 0 14px rgba(244,63,94,.12), 0 0 0 30px rgba(244,63,94,.06), 0 24px 60px rgba(225,29,72,.45); animation:phHeart 1.4s ease-in-out infinite; }
@keyframes phHeart{ 0%,100%{ transform:scale(1); } 14%{ transform:scale(1.12); } 28%{ transform:scale(1); } 42%{ transform:scale(1.08); } 70%{ transform:scale(1); } }
.ph-heart-f{ position:absolute; bottom:0; font-size:22px; color:#f43f5e; opacity:0; animation:phNote 6s linear infinite; }
.ph-heart-f.f1{ left:6%; } .ph-heart-f.f2{ left:26%; animation-delay:1.2s; font-size:16px; color:#fb7185; } .ph-heart-f.f3{ left:70%; animation-delay:2.4s; }
.ph-heart-f.f4{ left:86%; animation-delay:3.6s; font-size:15px; color:#f9a8d4; } .ph-heart-f.f5{ left:48%; animation-delay:4.8s; font-size:18px; }
.ph-fav-card{ right:0; bottom:6px; }
.ph-fav-card .ph-np-play{ background:#e11d48; }
.ph-fav-card .ph-mini-eq i{ background:#f43f5e; }

/* ----- Recent ascultate: caseta audio ----- */
.ph-recent{ background:radial-gradient(110% 140% at 100% 0%, rgba(139,92,246,.24), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(var(--accent-rgb, 255,138,30), .18), transparent 60%), var(--card-bg); }
.ph-recent .ph-dot{ background:#a78bfa; box-shadow:0 0 0 0 rgba(167,139,250,.7); }
.ph-cassette{ position:absolute; left:50%; top:20px; width:280px; height:176px; margin-left:-140px; border-radius:16px; padding:14px;
  background:linear-gradient(160deg, #2b2f3b, #1a1d26); border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 50px rgba(0,0,0,.5); transform:rotate(-4deg); animation:phBob 5s ease-in-out infinite; }
.cs-label{ height:44px; border-radius:8px; background:linear-gradient(90deg, var(--accent), #ec4899, #8b5cf6); padding:6px 12px; color:#fff; position:relative; }
.cs-label span{ font-size:11px; font-weight:900; letter-spacing:.14em; }
.cs-label i{ position:absolute; left:12px; right:12px; bottom:8px; height:2px; background:rgba(255,255,255,.55); border-radius:2px; }
.cs-window{ position:relative; margin:12px auto 0; width:200px; height:56px; border-radius:28px; background:#0d0f14; border:2px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; padding:0 8px; }
.cs-reel{ position:relative; z-index:1; width:42px; height:42px; border-radius:50%; background:repeating-conic-gradient(#e8e9ed 0 20deg, #8b8f9c 20deg 60deg); animation:phSpin 1.6s linear infinite; }
.cs-reel i{ position:absolute; inset:12px; border-radius:50%; background:#0d0f14; }
.cs-reel.r2{ animation-duration:2.4s; }
.cs-tape{ position:absolute; left:30px; right:30px; top:50%; height:26px; margin-top:-13px; border-radius:13px; background:linear-gradient(90deg, #3b2a1e, #5a3b24 50%, #3b2a1e); }
.cs-bottom{ position:absolute; left:50px; right:50px; bottom:0; height:22px; background:#13161d; clip-path:polygon(10% 0, 90% 0, 100% 100%, 0 100%); border-radius:4px 4px 0 0; }
.ph-clock{ left:0; bottom:4px; }
.ph-clockface{ position:relative; width:30px; height:30px; border-radius:50%; border:2px solid #a78bfa; flex-shrink:0; }
.ph-clockface i{ position:absolute; left:50%; bottom:50%; width:2px; margin-left:-1px; background:#fff; border-radius:2px; transform-origin:bottom; }
.ph-clockface .h{ height:8px; animation:phSpinBack 12s linear infinite; } .ph-clockface .m{ height:11px; background:#a78bfa; animation:phSpinBack 2s linear infinite; }
@keyframes phSpinBack{ to{ transform:rotate(-360deg); } }

/* ----- Bannere: formate de banner + copiere cod ----- */
.ph-banners{ background:radial-gradient(110% 140% at 100% 0%, rgba(var(--accent-rgb, 255,138,30), .26), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(59,130,246,.18), transparent 60%), var(--card-bg); }
.ph-bn{ position:absolute; overflow:hidden; border-radius:10px; color:#fff; font-weight:800; display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow:0 14px 34px rgba(0,0,0,.4); animation:phBob 4.5s ease-in-out infinite; }
.ph-bn::after{ content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-20deg); animation:phSweep 3.2s ease-in-out infinite; }
@keyframes phSweep{ 0%{ left:-40%; } 60%,100%{ left:130%; } }
.ph-bn small{ font-weight:600; opacity:.8; font-size:10.5px; }
.b728{ left:0; right:0; top:4px; height:46px; padding:0 14px; justify-content:space-between; font-size:13px; }
.b300{ left:0; top:66px; width:150px; height:125px; flex-direction:column; justify-content:center; gap:4px; font-size:12px; text-align:center; animation-delay:-1.5s;
  background:linear-gradient(160deg, #8b5cf6, #ec4899); }
.b300 b{ font-size:12px; }
.b88{ left:166px; top:70px; padding:6px 9px; font-size:10.5px; animation-delay:-3s; background:linear-gradient(135deg, #3b82f6, #1d4ed8); }
.ph-code{ position:absolute; left:166px; right:0; top:116px; padding:12px; border-radius:12px; background:#0d0f14; border:1px solid rgba(255,255,255,.08); box-shadow:0 14px 34px rgba(0,0,0,.4); }
.ph-code code{ display:block; font-family:ui-monospace, Consolas, monospace; font-size:11.5px; color:#e8e9ed; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-code .t{ color:#f472b6; } .ph-code .a{ color:#60a5fa; } .ph-code .s{ color:#4ade80; }
.ph-copy{ position:relative; display:block; margin-top:10px; height:30px; }
.ph-copy span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; border-radius:8px; font-size:12px; font-weight:700; }
.ph-copy .c1{ background:var(--bg-alt); border:1px solid var(--card-border); color:var(--text); animation:phCopy1 4s ease-in-out infinite; }
.ph-copy .c2{ background:#16a34a; color:#fff; opacity:0; animation:phCopy2 4s ease-in-out infinite; }
@keyframes phCopy1{ 0%,45%{ opacity:1; transform:scale(1); } 50%{ transform:scale(.94); } 55%,100%{ opacity:0; } }
@keyframes phCopy2{ 0%,52%{ opacity:0; transform:scale(.9); } 58%,92%{ opacity:1; transform:scale(1); } 100%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .ph-heart-f{ display:none; }
  .ph-copy .c2{ opacity:0; }
}