/* ============================================================
   ProSoft — panou „Servicii & Produse” (overlay peste experiența 3D)
   Toate clasele au prefixul .pss- ca să nu intre în conflict
   cu stilurile aplicației Next.js de dedesubt.
   ============================================================ */

/* ---------- comutator de limbă vizibil pe site ---------- */
.pss-sitelang{
  position: fixed; top: 18px; right: 84px; z-index: 2147483000;
  display: flex; gap: 2px; padding: 3px;
  background: rgba(8, 10, 16, .55); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pss-sitelang button{
  border: 0; background: none; cursor: pointer; padding: 6px 11px; border-radius: 999px;
  font-family: "Barlow Bold", Barlow, Helvetica, Arial, sans-serif;
  font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .62);
  transition: background .2s, color .2s;
}
.pss-sitelang button:hover{ color: #fff; }
.pss-sitelang button.pss-on{ background: #FF7300; color: #160b02; }
@media (max-width: 640px){
  .pss-sitelang{ top: 14px; right: 70px; }
  .pss-sitelang button{ padding: 5px 9px; font-size: 11px; }
}

/* ---------- logo nou ProSoft (înlocuiește wordmark-ul SVG Rossinavi) ---------- */
[class*="logoWrap"] svg[class*="prosoft"]{ display: none !important; }
[class*="logoWrap"]{ height: 40px !important; mix-blend-mode: normal !important; }
[class*="logoWrap"] img[class*="prosoft"]{
  height: 40px !important; width: auto !important;
  margin-top: 0 !important; border-radius: 8px;
  box-shadow: 0 4px 18px -6px rgba(0, 40, 120, .6);
}

#pss-root{
  --pss-bg: rgba(6, 8, 12, .92);
  --pss-card: rgba(255, 255, 255, .05);
  --pss-line: rgba(255, 255, 255, .12);
  --pss-tx: #eef1f6;
  --pss-mu: #a2aabd;
  --pss-br: #FF7300;
  --pss-br2: #ffa24d;
  font-family: "Barlow Medium", Barlow, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pss-tx);
  -webkit-font-smoothing: antialiased;
}
#pss-root *, #pss-root *::before, #pss-root *::after{ box-sizing: border-box; }

/* ---------- butonul plutitor ---------- */
.pss-fab{
  position: fixed; left: 22px; bottom: 22px; z-index: 2147483000;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--pss-br2), var(--pss-br));
  color: #160b02; font-family: "Barlow Bold", Barlow, Helvetica, sans-serif;
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 12px 32px -10px rgba(255, 115, 0, .85);
  transition: transform .2s ease, box-shadow .25s ease;
}
.pss-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 40px -10px rgba(255,115,0,.95); }
.pss-fab svg{ width: 18px; height: 18px; fill: none; stroke: #160b02; stroke-width: 2; stroke-linecap: round; }
.pss-fab i{
  width: 9px; height: 9px; border-radius: 50%; background: #103c1f;
  position: relative; overflow: visible; flex: none;
}
.pss-fab i::after{
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(22, 60, 31, .55); animation: pss-ping 1.8s ease-out infinite;
}
@keyframes pss-ping{ 0%{ transform: scale(.5); opacity: 1 } 100%{ transform: scale(1.5); opacity: 0 } }

/* ---------- overlay ---------- */
.pss-ovl{
  position: fixed; inset: 0; z-index: 2147483200;
  background: var(--pss-bg);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.pss-ovl.pss-open{ opacity: 1; pointer-events: auto; }

/* ---------- bara de sus ---------- */
.pss-top{
  display: flex; align-items: center; gap: 18px;
  padding: 18px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid var(--pss-line); flex: none;
}
.pss-logo{ font-family: "Barlow Bold", Barlow, sans-serif; font-size: 22px; letter-spacing: .02em; }
.pss-logo b{ color: var(--pss-br); }
/* ProSoft si sloganul, unul sub altul (nu alaturi) pe desktop. */
.pss-brand{ display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.pss-slogan{ color: var(--pss-mu); font-size: 13px; display: none; }
@media (min-width: 760px){ .pss-slogan{ display: block; } }

.pss-langs{
  margin-left: auto; display: flex; gap: 2px;
  background: rgba(255,255,255,.06); border: 1px solid var(--pss-line);
  border-radius: 999px; padding: 3px;
}
.pss-langs button{
  border: 0; background: none; color: var(--pss-mu); cursor: pointer;
  font-family: "Barlow Bold", Barlow, sans-serif; font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px; transition: .2s;
}
.pss-langs button:hover{ color: var(--pss-tx); }
.pss-langs button.pss-on{ background: var(--pss-br); color: #160b02; }

.pss-x{
  width: 42px; height: 42px; border: 1px solid var(--pss-line); border-radius: 50%;
  background: none; color: var(--pss-tx); font-size: 22px; line-height: 1;
  cursor: pointer; transition: .2s; flex: none;
}
.pss-x:hover{ border-color: var(--pss-br); color: var(--pss-br2); transform: rotate(90deg); }

/* ---------- conținut scrollabil ---------- */
.pss-body{
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(28px, 5vh, 56px) clamp(18px, 4vw, 48px) 64px;
  scrollbar-width: thin; scrollbar-color: var(--pss-br) transparent;
}
.pss-body::-webkit-scrollbar{ width: 8px; }
.pss-body::-webkit-scrollbar-thumb{ background: rgba(255,115,0,.5); border-radius: 8px; }

.pss-wrap{ max-width: 1100px; margin: 0 auto; }

.pss-hero{ text-align: center; margin-bottom: clamp(36px, 6vh, 64px); }
.pss-kicker{
  display: inline-block; color: var(--pss-br); font-family: "Barlow Bold", Barlow, sans-serif;
  font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 14px;
}
.pss-h1{
  margin: 0 0 14px; font-family: "Barlow Bold", Barlow, sans-serif;
  font-size: clamp(30px, 5vw, 52px); line-height: 1.1; letter-spacing: -.02em;
}
.pss-h1 span{
  background: linear-gradient(100deg, var(--pss-br) 20%, var(--pss-br2) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pss-sub{ color: var(--pss-mu); max-width: 62ch; margin: 0 auto; font-size: 17px; }

.pss-h2{
  margin: 0 0 22px; font-family: "Barlow SemiBold", Barlow, sans-serif;
  font-size: clamp(21px, 2.6vw, 28px); letter-spacing: -.01em;
}
.pss-sect{ margin-bottom: clamp(40px, 7vh, 72px); }

/* ---------- grile & carduri ---------- */
.pss-grid{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.pss-card{
  padding: 24px 22px; border: 1px solid var(--pss-line); border-radius: 16px;
  background: var(--pss-card); transition: transform .22s ease, border-color .22s ease;
}
.pss-card:hover{ transform: translateY(-4px); border-color: rgba(255,115,0,.5); }
.pss-card h4{
  margin: 0 0 8px; font-family: "Barlow SemiBold", Barlow, sans-serif;
  font-size: 18.5px; display: flex; align-items: center; gap: 10px;
}
.pss-card h4 svg{
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: var(--pss-br2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pss-card p{ margin: 0; color: var(--pss-mu); font-size: 15px; }
.pss-tags{ display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.pss-tags li{
  font-size: 11.5px; letter-spacing: .04em; color: var(--pss-mu);
  border: 1px solid var(--pss-line); border-radius: 999px; padding: 3px 10px;
}

/* ---------- pachete ---------- */
.pss-plans{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pss-plan{
  position: relative; padding: 26px 24px; border: 1px solid var(--pss-line);
  border-radius: 18px; background: var(--pss-card); display: flex; flex-direction: column;
}
.pss-plan--hi{
  border-color: rgba(255,115,0,.55);
  background: linear-gradient(180deg, rgba(255,115,0,.12), var(--pss-card) 55%);
}
.pss-plan-badge{
  position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 999px;
  background: var(--pss-br); color: #160b02;
  font-family: "Barlow Bold", Barlow, sans-serif; font-size: 11.5px; letter-spacing: .05em;
}
.pss-plan h4{ margin: 0; font-family: "Barlow Bold", Barlow, sans-serif; font-size: 20px; }
.pss-plan-for{ color: var(--pss-mu); font-size: 14px; margin: 4px 0 12px; }
.pss-plan ul{ margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 9px; }
.pss-plan li{ position: relative; padding-left: 24px; color: var(--pss-mu); font-size: 14.5px; }
.pss-plan li::before{
  content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 5px;
  border-left: 2px solid var(--pss-br); border-bottom: 2px solid var(--pss-br);
  transform: rotate(-45deg);
}

/* butonul fiecarui pachet — trimite la calculator; lipit de baza cardului */
.pss-plan-cta{
  margin-top: auto; align-self: flex-start;
  display: inline-block; padding: 11px 20px; border-radius: 999px;
  background: var(--pss-br); color: #160b02; text-decoration: none;
  font-family: "Barlow Bold", Barlow, sans-serif; font-size: 14px;
  transition: transform .15s, filter .15s;
}
.pss-plan-cta:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.pss-plan--hi .pss-plan-cta{ box-shadow: 0 10px 24px -10px rgba(255,115,0,.7); }

/* ---------- contactele din bara de sus ---------- */
.pss-topcontacts{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  font-size: 13.5px; min-width: 0;
}
.pss-topcontacts a{ color: var(--pss-mu); text-decoration: none; white-space: nowrap; }
.pss-topcontacts a:hover{ color: var(--pss-br2); }
/* pe ecrane inguste bara de sus e aglomerata; contactele raman jos, dublate */
@media (max-width: 900px){ .pss-topcontacts{ display: none; } }

/* ---------- contactele dublate jos ---------- */
.pss-botcontacts{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin: 8px 0 4px; padding-top: 20px; border-top: 1px solid var(--pss-line);
}
.pss-botcontacts a{ color: var(--pss-br2); font-size: 15px; text-decoration: none; }
.pss-botcontacts a:hover{ text-decoration: underline; }

/* ---------- contact ---------- */
.pss-cta{
  text-align: center; padding: clamp(28px, 5vh, 44px) 24px;
  border: 1px solid rgba(255,115,0,.4); border-radius: 20px;
  background: radial-gradient(60% 120% at 50% 0%, rgba(255,115,0,.16), transparent 70%);
}
.pss-cta p{ color: var(--pss-mu); margin: 0 0 20px; }
.pss-btn{
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  background: linear-gradient(180deg, var(--pss-br2), var(--pss-br));
  color: #160b02 !important; text-decoration: none;
  font-family: "Barlow Bold", Barlow, sans-serif; font-size: 15px; letter-spacing: .03em;
  box-shadow: 0 12px 30px -10px rgba(255,115,0,.8); transition: transform .2s;
}
.pss-btn:hover{ transform: translateY(-2px); }
.pss-mail{ display: block; margin-top: 14px; color: var(--pss-br2); font-size: 15px; text-decoration: none; }
.pss-mail:hover{ text-decoration: underline; }

.pss-foot{
  text-align: center; color: #6d7588; font-size: 13px;
  padding-top: 34px; margin-top: 10px; border-top: 1px solid var(--pss-line);
}

/* ---------- animație de intrare a secțiunilor ---------- */
.pss-ovl.pss-open .pss-sect, .pss-ovl.pss-open .pss-hero{
  animation: pss-up .55s cubic-bezier(.22,1,.36,1) both;
}
.pss-ovl.pss-open .pss-hero{ animation-delay: .05s }
.pss-ovl.pss-open .pss-sect:nth-of-type(2){ animation-delay: .12s }
.pss-ovl.pss-open .pss-sect:nth-of-type(3){ animation-delay: .19s }
.pss-ovl.pss-open .pss-sect:nth-of-type(4){ animation-delay: .26s }
@keyframes pss-up{ from{ opacity: 0; transform: translateY(26px) } to{ opacity: 1; transform: none } }

@media (max-width: 640px){
  .pss-fab{ left: 14px; bottom: 14px; padding: 11px 18px; font-size: 13.5px; }
  .pss-slogan{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  #pss-root *{ animation: none !important; transition: none !important; }
}

/* contacte în panoul „Servicii & Produse” */
.pss-contacts{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 18px; }
.pss-contacts a{ color: var(--pss-br2); font-size: 15px; text-decoration: none; }
.pss-contacts a:hover{ text-decoration: underline; }

/* ============================================================
   Indiciu „swipe up & start sound” — mana alb-negru, pe mijloc
   ============================================================ */
.pss-tap{
  position: fixed; left: 50%; bottom: 30vh; z-index: 2147483100;
  transform: translate(-50%, 12px); opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events: none; text-align: center; user-select: none;
}
.pss-tap--in{ opacity: 1; transform: translate(-50%, 0); }

.pss-tap__ico{
  display: block; width: 84px; height: 84px; margin: 0 auto 10px;
  stroke: #fff; fill: none; stroke-width: 2.3;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.95));
}

/* mana urca scurt, ca un swipe */
.pss-tap__hand{ animation: pss-swipe 2.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes pss-swipe{
  0%, 14%   { transform: rotate(-12deg) translate(0, 9px) }
  54%, 72%  { transform: rotate(-12deg) translate(-4px, -9px) }
  100%      { transform: rotate(-12deg) translate(0, 9px) }
}
/* transform-box, ca rotate() din SVG sa nu intre in conflict cu animatia */
.pss-tap__hand{ transform-origin: 40px 38px; transform-box: view-box; }

/* arcul se deseneaza, apoi apare varful sagetii */
.pss-tap__arc{
  stroke-dasharray: 64; stroke-dashoffset: 64;
  animation: pss-arc 2.6s ease-in-out infinite;
}
.pss-tap__tip{ opacity: 0; animation: pss-tip 2.6s ease-in-out infinite; }

/* cuvantul din varful sagetii — apare odata cu varful.
   SVG-ul are stroke alb si fill none, deci textul are nevoie de invers,
   altfel ar aparea doar conturat si ilizibil la marimea asta. */
.pss-tap__word{
  fill: #fff; stroke: none;
  font-family: "Barlow Bold", Barlow, Helvetica, Arial, sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  opacity: 0; animation: pss-tip 2.6s ease-in-out infinite;
}
@keyframes pss-arc{
  0%, 10%   { stroke-dashoffset: 64 }
  52%, 80%  { stroke-dashoffset: 0 }
  100%      { stroke-dashoffset: 64 }
}
@keyframes pss-tip{
  0%, 42%   { opacity: 0 }
  58%, 80%  { opacity: 1 }
  100%      { opacity: 0 }
}

.pss-tap__txt{
  margin: 0; color: rgba(255,255,255,.92);
  font-family: "Barlow Bold", Barlow, Helvetica, Arial, sans-serif;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.95);
  white-space: nowrap;
}

@media (max-width: 640px){
  .pss-tap{ bottom: 34vh; }
  .pss-tap__ico{ width: 70px; height: 70px; }
  .pss-tap__txt{ font-size: 10px; letter-spacing: .12em; white-space: normal; max-width: 78vw; }
}

@media (prefers-reduced-motion: reduce){
  .pss-tap__hand, .pss-tap__arc, .pss-tap__tip, .pss-tap__word{ animation: none !important; }
  .pss-tap__arc{ stroke-dashoffset: 0 }
  .pss-tap__tip, .pss-tap__word{ opacity: 1 }
}