/* ------------------------------------------------------
   ART Concept – Pagina DESPRE NOI
   Totul este scos sub .page-despre ca să nu atingă indexul
------------------------------------------------------- */

body.page-despre{
  background:
    radial-gradient(circle at top left,rgba(59,130,246,0.09),transparent 55%),
    radial-gradient(circle at bottom right,rgba(14,165,233,0.06),transparent 55%),
    var(--bg-page);
}

/* text un pic mai mare + puțin mai gros (doar text mic, nu titluri) */
body.page-despre p,
body.page-despre li{
  font-size:1.02rem;
  line-height:1.7;
  font-weight:500;
}

body.page-despre .section-subtitle{
  font-size:1.02rem;
  font-weight:500;
}

/* ------------------------------------------------------
   HERO DESPRE – imagine lată ca pe index
------------------------------------------------------- */

.page-despre .hero-about{
  position:relative;
  height:clamp(420px,70vh,620px);
  background-image:url("images/hero-metal-2.avif");
  background-size:cover;
  background-position:center;
  color:#f9fafb;
  overflow:hidden;
}

.page-despre .hero-about::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(
    120deg,
    rgba(15,23,42,0.95) 0,
    rgba(15,23,42,0.75) 55%,
    rgba(15,23,42,0.2) 100%
  );
}

.page-despre .hero-about-inner{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
}

.page-despre .hero-panel{
  max-width:720px;
}

.page-despre .hero-about-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.9rem;
}

.page-despre .hero-about .about-tag{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:.32rem 1.1rem .34rem 1.1rem;
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#e5f2fc;
  background:linear-gradient(135deg,rgba(15,23,42,0.9),rgba(15,23,42,0.7));
  border:1px solid rgba(191,219,254,0.9);
  box-shadow:0 10px 28px rgba(15,23,42,0.7);
  overflow:hidden;
}

.page-despre .hero-about .about-tag::after{
  content:"";
  position:absolute;
  inset:1px 1px auto 1px;
  height:40%;
  border-radius:999px;
  background:linear-gradient(
    to right,
    rgba(148,197,253,0.25),
    rgba(56,189,248,0.5),
    rgba(148,197,253,0.25)
  );
  opacity:.35;
}

.page-despre .hero-about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1rem;
}

@media (min-width:1025px){
  .page-despre .hero-about .about-tag{
    transition:
      transform .14s ease-out,
      box-shadow .14s ease-out,
      border-color .14s ease-out,
      background .14s ease-out;
  }
  .page-despre .hero-about .about-tag:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 36px rgba(15,23,42,0.85);
    border-color:#38bdf8;
    background:linear-gradient(135deg,rgba(15,23,42,0.95),rgba(15,23,42,0.8));
  }
}

@media (max-width:768px){
  .page-despre .hero-about{
    height:auto;
    padding-top:3.5rem;
    padding-bottom:3rem;
  }

  .page-despre .hero-about-inner{
    height:auto;
    align-items:flex-start;
  }

  .page-despre .hero-panel{
    max-width:100%;
    padding-inline:1.3rem;
  }

  /* ascund tag-urile în HERO pe telefon */
  .page-despre .hero-about-tags{
    display:none;
  }
}

/* ------------------------------------------------------
   CINE SUNTEM / POVESTE
------------------------------------------------------- */

.page-despre .about-story{
  background:var(--bg-section-main);
  border-top:1px solid rgba(209,213,219,0.9);
}

.page-despre .about-story-layout{
  display:flex;
  flex-direction:column;
  gap:2.4rem;
}

.page-despre .about-story-main{
  text-align:center;
  margin:0;
}

.page-despre .about-story-main p{
  max-width:760px;
  margin:0.6rem auto 0;
  color:var(--text-muted);
}

.page-despre .about-story-main h2{
  margin-bottom:.45rem;
}

.page-despre .about-story-main h2::after{
  content:"";
  display:block;
  width:80px;
  height:3px;
  margin:0.5rem auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,#0369a1);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .9s cubic-bezier(.2,.9,.2,1);
}

.page-despre .about-story-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem;
}

.page-despre .about-story-item{
  position:relative;
  border-radius:16px;
  padding:1rem 1.15rem 1.2rem;
  border:1px solid rgba(148,163,184,0.55);
  box-shadow:0 14px 34px rgba(148,163,184,0.2);
  background:
    repeating-linear-gradient(
      -35deg,
      rgba(14,165,233,0.10) 0px,
      rgba(14,165,233,0.10) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(135deg, rgba(2,132,199,0.08), transparent 55%),
    #ffffff;
}

.page-despre .about-story-item:nth-child(2){
  background:
    repeating-linear-gradient(
      35deg,
      rgba(14,165,233,0.10) 0px,
      rgba(14,165,233,0.10) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(135deg, rgba(2,132,199,0.08), transparent 55%),
    #ffffff;
}

.page-despre .about-story-item::before{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,#0369a1);
}

.page-despre .about-story-item h3{
  font-size:1.02rem;
  margin:0 0 .25rem;
}

.page-despre .about-story-item p{
  color:var(--text-muted);
  margin:0;
}

@media (max-width:768px){
  .page-despre .about-story-main{
    text-align:left;
  }
  .page-despre .about-story-main h2::after{
    margin:0.5rem 0 0;
  }
  .page-despre .about-story-main p{
    margin-left:0;
    margin-right:0;
  }
  .page-despre .about-story-points{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ------------------------------------------------------
   PROCES
------------------------------------------------------- */

.page-despre .about-process{
  background:var(--bg-section-alt);
  border-top:1px solid rgba(209,213,219,0.9);
}

/* header secțiune: lățime ca restul */
.page-despre .about-section-header{
  max-width:none;
  margin:0 0 2rem;
  text-align:center;
}

/* doar textul mic îl limităm pentru lizibilitate */
.page-despre .about-section-header .section-subtitle{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

.page-despre .about-process-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.2rem;
}

.page-despre .about-process-steps::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:34px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(to right,#e5e7eb,#0ea5e9,#e5e7eb);
  z-index:0;
}

.page-despre .process-step{
  position:relative;
  padding-top:1.7rem;
}

.page-despre .process-index{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:32px;
  height:32px;
  border-radius:999px;
  background:#ffffff;
  border:2px solid #0ea5e9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  font-weight:600;
  color:#0369a1;
  z-index:1;
}

.page-despre .process-body{
  background:#ffffff;
  border-radius:14px;
  padding:.8rem .9rem .95rem;
  border:1px solid rgba(209,213,219,0.9);
  box-shadow:0 12px 30px rgba(148,163,184,0.25);
  min-height:170px;
}

.page-despre .process-body h3{
  font-size:1.02rem;
  margin-bottom:.25rem;
}

.page-despre .process-body p{
  color:var(--text-muted);
}

@media (max-width:1024px){
  .page-despre .about-process-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:768px){
  .page-despre .about-process-steps{
    grid-template-columns:minmax(0,1fr);
  }
  .page-despre .about-process-steps::before{
    display:none;
  }
  .page-despre .process-step{
    padding-top:0;
  }
  .page-despre .process-index{
    position:static;
    transform:none;
    margin-bottom:.35rem;
  }
}

/* alternanță la cardurile din "Cum lucrăm" (1/3 diferit, 2/4 alb) */
.page-despre .about-process-steps .process-step:nth-child(odd) .process-body{
  background:
    repeating-linear-gradient(
      -35deg,
      rgba(14,165,233,0.10) 0px,
      rgba(14,165,233,0.10) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(135deg, rgba(2,132,199,0.08), transparent 55%),
    #f8fbff;
  border-color:rgba(148,163,184,0.65);
}

.page-despre .about-process-steps .process-step:nth-child(even) .process-body{
  background:#ffffff;
}

/* ------------------------------------------------------
   VALORI – carduri cu poză din HTML + overlay albastru
------------------------------------------------------- */

.page-despre .about-values{
  background:var(--bg-section-main);
  border-top:1px solid rgba(209,213,219,0.9);
}

.page-despre .about-values-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.2rem;
}

.page-despre .about-value{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(209,213,219,0.95);
  box-shadow:0 14px 36px rgba(148,163,184,0.26);
  overflow:hidden;
}

.page-despre .about-value-media{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.page-despre .about-value-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.page-despre .about-value::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(15,23,42,0.92),rgba(15,23,42,0.8));
  z-index:1;
}

.page-despre .about-value-content{
  position:relative;
  z-index:2;
  padding:1rem 1.05rem 1.1rem;
  color:#e5f2fc;
}

.page-despre .about-value-content h3{
  font-size:1.02rem;
  margin:0 0 .3rem;
  color:#f9fafb;
  font-weight:600;
}

.page-despre .about-value-content h3::after{
  content:"";
  display:block;
  width:54px;
  height:2px;
  margin-top:.2rem;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,#38bdf8);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .9s cubic-bezier(.2,.9,.2,1);
}

.page-despre .about-value-content p{
  color:#e5e7eb;
  margin:0;
}

@media (max-width:1024px){
  .page-despre .about-values-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:768px){
  .page-despre .about-values-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ------------------------------------------------------
   PENTRU CINE LUCRĂM – fundal + accente, fără carduri
------------------------------------------------------- */

.page-despre .about-clients{
  position:relative;
  background:var(--bg-section-soft);
  border-top:1px solid rgba(209,213,219,0.9);
  overflow:hidden;
}

.page-despre .about-clients::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 0, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(circle at 0 80%, rgba(56,189,248,0.12), transparent 55%),
    linear-gradient(
      120deg,
      rgba(148,163,184,0.16) 0,
      rgba(148,163,184,0.06) 25%,
      transparent 55%
    );
  opacity:.9;
  pointer-events:none;
}

.page-despre .about-clients-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1.6fr);
  gap:2.4rem;
  align-items:flex-start;
}

.page-despre .about-clients-text h2{
  margin-bottom:.4rem;
}

.page-despre .about-clients-text h2::after{
  content:"";
  display:block;
  width:90px;
  height:3px;
  margin:.45rem 0 0;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,#0369a1);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .9s cubic-bezier(.2,.9,.2,1);
}

.page-despre .about-clients-text p{
  color:var(--text-muted);
}

.page-despre .about-clients-lists{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.8rem 2.4rem;
}

.page-despre .about-clients-lists h3{
  font-size:1.18rem;
  font-weight:600;
  margin:0 0 .35rem;
  position:relative;
  padding-left:.9rem;
}

.page-despre .about-clients-lists h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(135deg,#0ea5e9,#38bdf8);
}

/* LISTE – bife custom + linii albastre cu fade */
.page-despre .about-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  font-size:.98rem;
  color:var(--text-muted);
}

.page-despre .about-list li{
  position:relative;
  padding:.45rem 0 .45rem 1.6rem;
  margin:0;
}

/* bifă custom (NU emoji) */
.page-despre .about-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.9rem;
  width:14px;
  height:8px;
  border-left:2px solid #0ea5e9;
  border-bottom:2px solid #0ea5e9;
  transform:rotate(-45deg) scale(.85);
  opacity:0;
  transition:opacity .6s ease, transform .65s cubic-bezier(.2,.9,.2,1);
}

/* linie între elemente, cu fade */
.page-despre .about-list li + li{
  border-top:1px solid transparent;
  border-image:linear-gradient(
    to right,
    rgba(14,165,233,0.15),
    rgba(14,165,233,0.55),
    rgba(14,165,233,0.15)
  ) 1;
}

@media (max-width:1024px){
  .page-despre .about-clients-layout{
    grid-template-columns:minmax(0,1fr);
  }
}
@media (max-width:768px){
  .page-despre .about-clients-layout{
    padding-inline:1.3rem;
  }
  .page-despre .about-clients-lists{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ------------------------------------------------------
   CTA FINAL – poză full width pe secțiune
------------------------------------------------------- */

.page-despre .about-cta{
  position:relative;
  overflow:hidden;
  color:#f9fafb;
  border-top:1px solid rgba(15,23,42,0.35);

  background-image:
    linear-gradient(120deg, rgba(15,23,42,0.92) 0, rgba(15,23,42,0.70) 55%, rgba(15,23,42,0.30) 100%),
    var(--cta-bg);
  background-size:cover;
  background-position:center;
}

/* păstrăm conținutul peste overlay */
.page-despre .about-cta .about-cta-inner{
  position:relative;
  z-index:1;
}

/* texte */
.page-despre .about-cta .section-kicker{ color:#bae6fd; }
.page-despre .about-cta h2{ color:#e5f2fc; }
.page-despre .about-cta p{ color:#e5e7eb; }

/* buton outline pe fundal închis */
.page-despre .about-cta .btn-outline{
  background:transparent;
  color:#e5f2fc;
  border-color:rgba(148,163,184,0.9);
}
.page-despre .about-cta .btn-outline:hover{
  background:rgba(15,23,42,0.55);
  border-color:#0ea5e9;
}

/* mic efect de glow discret */
.page-despre .about-cta::after{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(circle at 15% 20%, rgba(14,165,233,0.22), transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(56,189,248,0.14), transparent 55%);
  pointer-events:none;
}

@media (max-width:768px){
  .page-despre .about-cta-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .page-despre .about-cta-actions .btn{
    width:100% !important;
    justify-content:center !important;
    margin:0 0 14px 0 !important;
  }

  .page-despre .about-cta-actions .btn:last-child{
    margin-bottom:0 !important;
  }
}

/* ------------------------------------------------------
   HOVER subtil (desktop) – fără să fie blocat de reveal
------------------------------------------------------- */

@media (min-width:1025px){
  .page-despre .process-body,
  .page-despre .about-value,
  .page-despre .about-story-item{
    transition:transform .16s ease-out, box-shadow .16s ease-out, border-color .16s ease-out;
  }

  .page-despre .process-body:hover,
  .page-despre .about-value:hover,
  .page-despre .about-story-item:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 46px rgba(15,23,42,0.28);
    border-color:rgba(37,99,235,0.6);
  }
}

/* ------------------------------------------------------
   DESPRE – Scroll Reveal extra-lite (fără !important)
------------------------------------------------------- */

.page-despre .reveal-up,
.page-despre .reveal-left,
.page-despre .reveal-right,
.page-despre .reveal-zoom,
.page-despre .reveal-stagger > *{
  opacity:0;
  transform:translate3d(0,10px,0);
  filter:blur(6px);
  transition:
    opacity .65s cubic-bezier(.2,.9,.2,1),
    transform .75s cubic-bezier(.2,.9,.2,1),
    filter .65s cubic-bezier(.2,.9,.2,1);
  will-change:transform,opacity,filter;
}

.page-despre .reveal-left{ transform:translate3d(-14px,8px,0); }
.page-despre .reveal-right{ transform:translate3d(14px,8px,0); }
.page-despre .reveal-up{ transform:translate3d(0,12px,0); }

.page-despre .reveal-zoom{
  transform:translate3d(0,10px,0) scale(.985);
  filter:blur(7px) saturate(.99);
}

/* când intră în view */
.page-despre .reveal-up.is-inview,
.page-despre .reveal-left.is-inview,
.page-despre .reveal-right.is-inview,
.page-despre .reveal-zoom.is-inview,
.page-despre .reveal-stagger > *.is-inview{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0) saturate(1);
}

/* “Draw” pentru liniile de sub titluri */
.page-despre .about-story-main.is-inview h2::after{
  transform:scaleX(1);
}
.page-despre .about-clients-text.is-inview h2::after{
  transform:scaleX(1);
}
.page-despre .about-value.is-inview .about-value-content h3::after{
  transform:scaleX(1);
}

/* bifele din liste apar când intră coloana în view */
.page-despre .about-clients-lists.is-inview .about-list li::before{
  opacity:.95;
  transform:rotate(-45deg) scale(1);
}

/* Motion redus */
@media (prefers-reduced-motion: reduce){
  .page-despre .reveal-up,
  .page-despre .reveal-left,
  .page-despre .reveal-right,
  .page-despre .reveal-zoom,
  .page-despre .reveal-stagger > *{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }

  .page-despre .about-story-main h2::after,
  .page-despre .about-clients-text h2::after,
  .page-despre .about-value-content h3::after{
    transition:none !important;
    transform:none !important;
  }

  .page-despre .about-list li::before{
    opacity:1 !important;
    transform:rotate(-45deg) scale(1) !important;
  }
}