/* Reset și variabile CSS */
      /* 1. ÎMBUNĂTĂȚIRI FONT LOADING */
      @font-face {
          font-family: 'AKONY';
          src: url('font/AKONY.woff2') format('woff2'),
              url('font/AKONY.woff') format('woff');
          font-weight: normal;
          font-style: normal;
          font-display: swap;
          /* Previne FOIT */
      }

      @font-face {
          font-family: "Font Awesome 6 Free";
          font-style: normal;
          font-weight: 900;
          /* fa-solid-900 */
          src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2") format("woff2"),
              url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff") format("woff");
          font-display: swap;
      }




      /* --------------------------------------------------------------------------------------ROOT + BODY------------------------------------------ */


      :root {
          /* 🌈 Culori */
          --color-bg: #121212;
          --color-secondary: #e9e9e9;
          --color-accent: #73bf44;
          --color-text: #111111;
          --color-muted: #444444;

          /* ✍️ Fonturi */
          --font-heading: "Poppins", sans-serif;
          --font-body: 'Inter', sans-serif;

          /* 🔠 Dimensiuni text (responsive cu clamp) */
          --fs-h1: clamp(2.5rem, 5vw, 4rem);
          --fs-h2: clamp(1.75rem, 4vw, 3rem);
          --fs-h3: clamp(1.5rem, 3vw, 2.25rem);
          --fs-body: clamp(1rem, 2.5vw, 1.125rem);

          --fs-small: clamp(0.875rem, 1vw, 1rem);
          --fs-xxs: clamp(0.625rem, 0.7vw, 0.75rem);

          /* 📏 Border */


          /* 🖋️ Grosime text */
          --fw-light: 300;
          --fw-normal: 400;
          --fw-medium: 500;
          --fw-bold: 700;
      }


      * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          scroll-behavior: smooth;

      }


      *,
      *::before,
      *::after {
          box-sizing: border-box;

      }


      html,
      body {
          margin: 0;
          padding: 0;
          overflow-x: hidden;
          /* ascunde scroll-ul orizontal */
      }


      body {
          overflow: hidden;
          /* ascunde tot ce iese din header */
          scroll-behavior: smooth;
          min-height: 100vh;
          background-color: var(--color-secondary);

      }

      /* --------------------------------------------------------------------------------------ANIMATII------------------------------------------ */

      .animate-on-scroll {
          opacity: 0;
          transform: translateY(50px);
          transition: all 0.8s ease-out;
      }

      .animate-on-scroll.visible {
          opacity: 1;
          transform: translateY(0);
      }




      .fade-in {
          transform: translateX(300px);
          opacity: 0;
          transition: all 3s ease;
      }

      .fade-in.active {
          transform: translateX(0);
          opacity: 1;
      }

      /* Venire din stanga */
      .fade-in-left {
          transform: translateX(-150px);
          /* start din stanga */
          opacity: 0;
          transition: all 2s ease;
      }

      .fade-in-left.active {
          transform: translateX(0);
          /* poziția normală */
          opacity: 1;
      }

      /* Venire din dreapta */
      .fade-in-right {
          transform: translateX(150px);
          /* start din dreapta */
          opacity: 0;
          transition: all 2s ease;
      }

      .fade-in-right.active {
          transform: translateX(0);
          /* poziția normală */
          opacity: 1;
      }

      .scroll-img {
          opacity: 0;
          transform: translateX(-50px);
          /* toate vin din stânga */
          transition: all 1s ease;
      }

      .scroll-img.show {
          opacity: 1;
          transform: translateX(0);
      }


      .scroll-left {
          opacity: 0;
          transform: translateX(-50px);
          /* vine din stânga */
          transition: all 0.7s ease;
      }

      .scroll-left.show {
          opacity: 1;
          transform: translateX(0);
      }

      .scroll-right {
          opacity: 0;
          transform: translateX(50px);
          /* vine din dreapta */
          transition: all 0.7s ease;
      }

      .scroll-right.show {
          opacity: 1;
          transform: translateX(0);
      }









      /* Ajustare navbar și secțiuni mari */
      .navbar,
      .container,
      .wrapper,
      section {
          max-width: 100%;
      }


      section {
          scroll-margin-top: 60px;
      }




      /* --------------------------------------------------------------------------------------HEADER LINE------------------------------------------ */


      .x-line {
          position: fixed;
          height: 1px;
          display: flex;
          align-items: center;
          transform-origin: center;
          pointer-events: none;
          z-index: -9999;
      }

      .line1 {
          transform: rotate(45deg);
          z-index: -9999;
          color: var(--color-muted);
      }

      .line2 {
          transform: rotate(-45deg);
          z-index: -9999;
          color: var(--color-muted);
      }

      .segment {
          width: 90vw;
          height: 1px;
          background-color: var(--color-muted);
      }

      .text {
          padding: 0 10px;
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-xxs);
          white-space: nowrap;
          color: var(--color-muted);
          background-color: var(--color-secondary);
      }


      /* --------------------------------------------------------------------------------------HEADER------------------------------------------ */


      h1 .word {
          display: block;
          /* fiecare cuvânt pe rând */
      }



      .word {
          display: inline-block;
          /* sau block cu margin 0 */
          transform: translateX(200px);
          /* din dreapta spre poziția normală */
          opacity: 0;
          transition: transform 0.6s ease, opacity 0.6s ease;
      }

      /* Clasa activă când vrei să apară */
      .word.active {
          transform: translateX(0);
          opacity: 1;
      }



      .container .texth1 {
          width: 100%;
          font-family: 'AKONY';
          text-align: start;
          font-size: var(--fs-h3);
          color: var(--color-bg);
          line-height: 0.9;
          max-width: 100%;
          overflow-wrap: break-word;
          word-break: break-word;


      }

      .container .texth1 .simbol {

          color: #73bf44;

      }

      .container h3 {
          font-family: var(--font-heading);
          font-size: var(--fs-h3);
          font-weight: var(--fw-light);
      }

      .tagline {
          font-family: 'AKONY';
          font-size: var(--fs-body);
          color: var(--color-accent);
      }



      .container .butontext {
          position: absolute;
          padding: 0rem 5rem 0rem 5rem;
          bottom: 48px;
          display: flex;
          justify-content: space-between;
          width: 100%;
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-muted);
      }

      .container .butontext a {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-secondary);
          text-decoration: none;
          width: 10rem;
          height: 3.3rem;
          background-color: var(--color-bg);

          border-radius: 3rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1.2rem;
          transition: transform 0.2s ease-in-out;
          animation: pulse 2s infinite;
      }



      @keyframes pulse {
          0% {
              transform: scale(1);
              box-shadow: 0 0 0 0 var(--color-muted);
          }

          70% {
              transform: scale(1.1);
              box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
          }

          100% {
              transform: scale(1);
              box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
          }
      }


      .fade-in {
          animation: fadeIn 0.6s ease-in-out;
      }

      @keyframes fadeIn {
          from {
              opacity: 0;
              transform: translateY(10px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .menubuton {
          display: none;
      }

      header {
          height: 100vh;
          width: 100%;
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          overflow: hidden;
          /* ca X-ul să nu iasă */
      }

      .line1,
      .line2 {
          position: absolute;

      }

      .container {
          padding-top: 1rem;
          padding-left: 5rem;
          padding-right: 3rem;
          padding-bottom: 3rem;
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
      }

      /* --------------------------------------------------------------------------------------NAVBAR------------------------------------------ */



      .navbar {
          display: flex;
          justify-content: space-between;
          align-items: center;

          width: 60%;
          position: fixed;
          top: 20px;
          /* distanța de sus */
          left: 50%;
          /* poziționează la jumătatea ecranului */
          transform: translateX(-50%);
          /* îl centrează pe orizontală */

          border-bottom: 1px solid #12121225;
          padding: 8px 2%;
          /* mai mic sus-jos, lași lateralul neschimbat */

          background: linear-gradient(135deg,
                  #e5e5e5 0%,
                  #f6f6f6 15%,
                  #e0e0e0 25%,
                  #f5f5f5 45%,
                  #dcdcdc 70%,
                  #f2f2f2 100%);
          border-radius: 50px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
          z-index: 10;
          box-sizing: border-box;
          border: 1px solid rgb(194, 194, 194);
      }

      nav .logo {
          height: 30px;
          width: auto;
      }

      .navbar .desktopnav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          list-style: none;
          color: var(--color-muted);
          height: 90%;
          transition: 0.3s, color 0.3s;
          gap: 2rem;
      }



      .desktopnav li a {
          text-decoration: none;
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-muted);
          padding: 0.5rem 1rem;
          display: block;
          transition: color 0.3s;
          /* doar pentru culoare */
      }

      .desktopnav li a:hover {

          color: var(--color-secondary);
          /* aici se schimbă culoarea la hover */
          background-color: gray;
          border-radius: 20px;
          height: 100%;
          width: 100%;
      }

      /* dropdown ascuns inițial */
      .desktopnav li {
          position: relative;
      }

      .desktopnav .dropdown-menu {
          display: none;
          position: absolute;
          top: 100%;
          /* imediat sub "Servicii" */
          left: 0;
          backdrop-filter: blur(25px) saturate(180%);
          -webkit-backdrop-filter: blur(25px) saturate(180%);
          background-color: rgba(255, 255, 255, 0.593);
          box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.084);
          min-width: 180px;
          z-index: 1;
          width: 15rem;

      }

      .desktopnav .dropdown-menu li {
          width: 100%;
          text-decoration: none;
          list-style: none;

      }

      .desktopnav .dropdown-menu li a {
          display: block;
          padding: 0.5rem 1rem;
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-muted);
          text-decoration: none;
          transition: 0.2s ease;
          list-style: none;
      }

      .desktopnav .dropdown-menu li a:hover {
          background: var(--color-muted);
          color: var(--color-secondary);
          border-radius: 0.5rem;
      }

      /* arată meniul doar la hover */
      .desktopnav li:hover>.dropdown-menu {
          display: block;
      }

      .navbar .desktopnav li {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          position: relative;
          /* necesar pentru dropdown */
      }

      .navbar a {
          text-decoration: none;

          font-family: "Inter", sans-serif;
      }



      .sidebar {
          position: fixed;
          top: 0;
          right: 0;
          height: 100vh;
          width: 250px;

          background: linear-gradient(135deg,
                  #e5e5e5 0%,
                  #f6f6f6 15%,
                  #e0e0e0 25%,
                  #f5f5f5 45%,
                  #dcdcdc 70%,
                  #f2f2f2 100%);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          border-left: 0.5px solid #b3b3b3;
          z-index: 9999;
          display: none;
          padding-left: 2rem;
          padding-top: 2rem;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          backdrop-filter: blur(10px);
          gap: 60px;
      }





      .sidebar li {
          width: 80%;
          text-decoration: none;
          font-family: var(--font-body);
          font-size: var(--fs-h3);
          color: var(--color-muted);
          list-style: none;
          border-bottom: 1px solid #66656583;
          padding-bottom: 10px;
      }

      .sidebar li a {
          text-decoration: none;
          color: var(--color-muted);

      }




      .sidebar a i {
          font-size: 1.2rem;
          width: 20px;
          /* aliniere uniformă */
          text-align: center;
          margin-right: 10px;
      }

      .sidebar .dropdown-menu {
          display: none;
          flex-direction: column;
          padding-left: 1rem;
          /* indent pentru submeniuri */
      }

      .sidebar .dropdown.open .dropdown-menu {
          display: flex;
          gap: 2rem;
          padding: 1rem;
          justify-content: space-around;
          height: auto;
          background-color: #8080801a;
          margin-top: 10px;
      }

      .dropdown-toggle {
          cursor: pointer;

      }

      /* Optional: săgeată care se rotește când meniul e deschis */
      .dropdown-toggle::after {
          content: ' \25BC';
          /* săgeată jos */
          display: inline-block;
          margin-left: 5px;
          transition: transform 0.3s;
          font-size: 0.7em;
          /* dimensiune mai mică */
      }

      .dropdown-menu {
          display: none;
      }

      .dropdown.open .dropdown-menu {
          display: block;
      }

      .dropdown.open .dropdown-toggle::after {
          transform: rotate(180deg);
      }

      /* dropdown menu */
      .dropdown-menu li a {
          display: block;

          text-decoration: none;
          color: var(--color-muted);
          /* culoarea normală */
          transition: 0.3s, color 0.3s;
      }

      .dropdown-menu {
          border-radius: 0.5rem;
      }

      /* la hover */
      .dropdown-menu li a:hover {
          background-color: #f0f0f0;
          /* fundal la hover */
          color: var(--color-bg);
          /* text la hover */
      }



      /* ====== ANIMAȚII SIDEBAR ====== */

      /* starea inițială (ascunsă) */
      .sidebar {
          opacity: 0;
          transform: translateX(100%);
          transition: all 0.4s ease;
      }

      /* când JS-ul setează display:flex, sidebarul se animă */
      .sidebar[style*="display: flex"] {
          opacity: 1;
          transform: translateX(0);
      }

      /* ====== Linkurile din sidebar ====== */
      .sidebar li {
          opacity: 0;
          transform: translateX(20px);
          transition: all 0.4s ease;
      }

      /* când sidebar-ul e vizibil, li-urile apar treptat */
      .sidebar[style*="display: flex"] li {
          opacity: 1;
          transform: translateX(0);
      }

      /* efect de întârziere pe fiecare link pentru un look fluid */
      .sidebar li:nth-child(1) {
          transition-delay: 0.1s;
          border-bottom: none;
      }

      .sidebar li:nth-child(2) {
          transition-delay: 0.2s;
      }

      .sidebar li:nth-child(3) {
          transition-delay: 0.3s;
      }

      .sidebar li:nth-child(4) {
          transition-delay: 0.4s;
      }

      .sidebar li:nth-child(5) {
          transition-delay: 0.5s;
      }

      /* ====== Efect la hover (și tap pe mobil) ====== */
      .sidebar li a {
          display: flex;
          align-items: center;
          gap: 14px;
          transition: transform 0.2s ease, color 0.3s ease;
      }

      .sidebar li a:hover {
          transform: translateX(6px) scale(1.03);
          color: var(--color-bg);
      }


      .dropdown .dropdown-menu li {
          border-bottom: none;
          font-size: 1.2rem;
      }

      /* --------------------------------------------------------------------------------------MAIN CONTAINER------------------------------------------ */

      #tagline-text {
          opacity: 0;
          font-family: var(--font-body);
          font-weight: var(--fw-bold);
          font-size: var(--fs-h3);
          transition: opacity 0.5s ease-in-out;
      }

      #tagline-text.fade-in {
          opacity: 1;
      }




      .main-container {
          background: var(--color-bg);
          height: 100vh;
          padding: 5rem;
          gap: 3rem;
          display: flex;
          justify-content: center;
          flex-direction: column;
          position: relative;
          width: 100%;
          /* să ocupe tot spațiul disponibil pe orizontală */
          /* sau auto, depinde cât conținut ai */
          box-sizing: border-box;
          /* padding-ul să nu strice layout-ul */
      }


      .main-container::before {
          content: "";
          position: absolute;
          top: -30px;
          /* cât să urce peste header */
          left: 50%;
          transform: translateX(-50%);
          width: 16rem;
          /* lățimea dreptunghiului */
          height: 3rem;
          /* înălțimea dreptunghiului */
          background-color: var(--color-bg);
          /* aceeași culoare ca section */
          border-radius: 20px;
          /* să arate ca un buton */

      }


      .titlu {
          color: var(--color-secondary);
          font-family: 'AKONY';
          font-size: clamp(4.5rem, 5vw, 7rem);
          text-align: start;
          line-height: 100%;

      }

      .punct {
          color: var(--color-accent);
      }

      .info {
          display: flex;
          flex-direction: column;
          gap: 3rem;
          width: 50%;
      }

      .info p {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-secondary);
          line-height: 150%;

      }


      .btn {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          text-decoration: none;
          color: var(--color-bg);
          width: 11rem;
          height: 3rem;
          background-color: var(--color-secondary);

          border-radius: 3rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1.2rem;
          transition: transform 0.2s ease-in-out;
          animation: pulse 2s infinite;
      }





      /* ================== Container secțiune ================== */
      .logo-lines {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 40px;
          padding: 5rem 0rem;
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
      }

      .logo-lines h3 {
          margin-bottom: 20px;
          font-family: var(--font-body);
          font-weight: var(--fw-bold);
          color: var(--color-bg);
          font-size: var(--fs-h2);
          text-align: start;
      }

      /* ================== Carusel general ================== */
      .logo-carousel {
          width: 80%;
          /* full width */
          overflow: hidden;
          position: relative;
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      }

      /* Fade alternativ pentru browsere care nu suportă mask */
      .logo-carousel::before,
      .logo-carousel::after {
          content: "";
          position: absolute;
          top: 0;
          width: 60px;
          height: 100%;
          z-index: 2;
          pointer-events: none;
      }

      .logo-carousel::before {
          left: 0;
          background: linear-gradient(to right, #e9e9e9, transparent);
      }

      .logo-carousel::after {
          right: 0;
          background: linear-gradient(to left, #e9e9e9, transparent);
      }

      /* ================== Track-uri ================== */
      /* Clienți → scroll stânga */
      .logo-carousel.clients .logo-track {
          display: flex;
          gap: 40px;
          animation: scroll-left 20s linear infinite;
      }

      /* Tool-uri → scroll dreapta */
      .logo-carousel.tools .logo-track {
          display: flex;
          gap: 40px;
          animation: scroll-right 20s linear infinite;
      }

      /* Logo-uri */
      .logo-track img {
          height: 60px;
          width: auto;
          object-fit: contain;
          opacity: 0.8;
          transition: filter 0.3s, opacity 0.3s;
      }

      .logo-track img:hover {
          filter: grayscale(0%);
          opacity: 1;
      }

      /* ================== Keyframes ================== */
      @keyframes scroll-left {
          0% {
              transform: translateX(0);
          }

          100% {
              transform: translateX(-50%);
          }

          /* jumătate din track dublat */
      }

      @keyframes scroll-right {
          0% {
              transform: translateX(-50%);
          }

          100% {
              transform: translateX(0);
          }
      }

      /* ================== Responsive ================== */
      @media (max-width: 768px) {
          .logo-carousel {
              width: 100%;
          }

          .logo-track {
              gap: 20px;
          }

          .logo-track img {
              height: 40px;
          }


      }


      /* --------------------------------------------------------------------------------------SERVICII------------------------------------------ */



      .servicii {
          background-color: var(--color-secondary);
          height: auto;
          min-height: auto;
          padding: 5rem;
          box-sizing: border-box;
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
      }

      .servicii .container-servicii {
          display: flex;
          flex-direction: row;
          /* spațiu între left și right */
          align-items: flex-start;
          /* aliniază partea de sus a coloanelor */
          flex-wrap: wrap;
          /* pentru mobil, să meargă pe vertical dacă e nevoie */
          height: auto;

      }

      .left-s {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          flex: 0 0 30%;
          padding: 0rem 1rem 0rem 0rem;
          /* nu crește, nu scade, ocupă 40% */
          gap: 2rem;

      }

      .left-s p {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-muted);
          line-height: 150%;

      }

      .titlu-s {
          color: var(--color-muted);
      }

      .left-s .mini-t {
          font-family: var(--font-body);
          font-weight: bolder;
          font-size: 1rem;
      }

      .left-s h2 {
          font-family: var(--font-body);
          font-size: 5rem;
          letter-spacing: 0.6px;
          line-height: 0.8;
          color: var(--color-muted);
      }

      /* CSS */
      .fancy-button {
          position: relative;
          display: inline-flex;
          align-items: center;
          padding: 12px 24px;
          background: #cacaca;
          border: 1px solid #b3b3b3;
          border-radius: 50px;
          overflow: hidden;
          text-decoration: none;
          color: #000;
          font-weight: 500;
          transition: color 0.3s ease;
          width: fit-content;
      }

      .fancy-button .circle {
          position: absolute;
          left: 12px;
          width: 32px;
          height: 32px;
          background: var(--color-bg);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1;
          transition: transform 0.9s ease;
      }



      .fancy-button .text-bt {
          margin-left: 48px;
          position: relative;
          z-index: 2;
          color: var(--color-bg);
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
      }

      .fancy-button:hover .circle {
          transform: scale(24);

      }



      .fancy-button .text-bt:hover {
          color: var(--color-secondary);
      }

      .fancy-button:hover {
          color: #fff;

      }

      figcaption {
          font-family: var(--font-body);
          color: var(--color-muted);
          font-size: var(--fw-medium);
      }

      .right-s {
          height: 100%;


          flex: 0 0 70%;
          /* ocupă 60% */
          display: flex;
          flex-wrap: wrap;
          /* să se împartă cardurile pe rânduri dacă e nevoie */
          flex-direction: column;
          gap: 2rem;
          padding: 10px;
      }

      .right-s .card {
          flex: 1;
          /* fiecare card ocupă spațiu egal */
          background-color: var(--color-secondary);
          /* doar ca exemplu */
          padding: 10px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
          display: flex;
          flex-direction: row;
          align-items: center;
          text-align: center;
          gap: 10px;
          position: relative;
          /* necesar pentru ::before */
          overflow: hidden;
          /* ca gradientul să nu iasă în afară */
          transition: color 0.3s ease;
          /* pentru text */
      }



      .right-s .card::before {
          content: "";
          position: absolute;
          top: 0;
          left: -100%;
          /* start din stânga */
          width: 100%;
          height: 100%;
          background-color: var(--color-accent);
          /* gradient */
          transition: all 0.5s ease;
          z-index: 0;
          /* să fie sub text */
      }

      .right-s .card:hover::before {
          left: 0;
          /* animarea gradientului de la stânga la dreapta */
      }

      .right-s .card>* {
          position: relative;
          /* să stea peste gradient */
          z-index: 1;
      }


      /* --------------------------------------------------------------------------------------SERVICII-CARD------------------------------------------ */


      .card .serviciile {
          flex-direction: column;
          display: flex;
          align-items: start;
          justify-content: start;
      }

      .card .serviciile p {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-muted);
          transition: color 0.3s ease;
          /* tranziție lină la hover */
          text-align: start;
      }

      .card:hover .serviciile p {
          color: var(--color-bg);
          /* culoarea pe hover */
      }

      .card .serviciile h3 {
          font-family: var(--font-body);
          font-weight: var(--fw-bold);
          font-size: var(--fs-h4);

      }



      .card .serviciile .nr {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-muted);
          transition: color 0.3s ease;
          /* tranziție lină la hover */
      }

      .card:hover .serviciile .nr {
          color: var(--color-bg);
          /* culoarea pe hover */
      }

      .card img {
          width: 8%;
          /* ocupă toată lățimea cardului */
          aspect-ratio: 1 / 1;
          /* pătrat perfect */
          object-fit: cover;
          /* crop inteligent ca să umple pătratul */
          border-radius: 8px;
          /* optional, colțuri rotunjite */
      }



      /* Container general */
      .services-cards {
          position: relative;
          width: 100%;
          max-width: 1200px;
          height: 100vh;
          margin: auto;
          display: flex;
          justify-content: center;
          align-items: center;
          perspective: 1500px;
          /* pentru efect 3D */
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
      }

      /* Card */
      .service-card {
          position: absolute;
          width: 380px;
          height: 550px;
          transition: transform 0.6s ease, opacity 0.6s ease;
          cursor: pointer;
          z-index: 1;
          opacity: 0.5;
          transform: scale(0.8) translateX(0) translateZ(-100px);
          /* perspective direct pe card */
          font-family: var(--font-body);
          color: var(--color-bg);

      }



      .service-card.center {
          transform: scale(1) translateX(0) translateZ(0);
          z-index: 3;
          opacity: 1;
      }

      .service-card.left {
          transform: scale(0.85) translateX(-400px) translateZ(-50px);
          z-index: 2;
          opacity: 0.6;
      }


      .service-card.right {
          transform: scale(0.85) translateX(400px) translateZ(-50px);
          z-index: 2;
          opacity: 0.6;
      }

      .service-card-inner {
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          transition: transform 0.8s;
      }

      .service-card:hover .service-card-inner {
          transform: rotateY(180deg);
      }

      /* Flip doar pentru cardul central */
      .service-card.center .service-card-inner:hover {
          transform: rotateY(180deg);
      }

      /* Cardurile laterale nu se mai pot întoarce */
      .service-card.left .service-card-inner,
      .service-card.right .service-card-inner {
          transform: rotateY(0);
      }




      /* Front și Back */
      .service-card-front,
      .service-card-back {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          top: 0;
          left: 0;
          padding: 10px 30px 10px 30px;
          backdrop-filter: blur(25px) saturate(180%);
          -webkit-backdrop-filter: blur(25px) saturate(180%);
          background: linear-gradient(135deg,
                  #e5e5e5 0%,
                  #f6f6f6 15%,
                  #e0e0e0 25%,
                  #f5f5f5 45%,
                  #dcdcdc 70%,
                  #f2f2f2 100%);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          border: 1px solid rgb(110, 110, 110);
          padding: 1.5rem;
          box-sizing: border-box;
          overflow-y: auto;
          border-radius: 1rem;

      }

      .service-card-front {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

      }

      .service-card-front h2 {
          text-align: center;
          font-size: var(--fs-h3);
          font-weight: var(--fw-bold);

          /* Gradient doar pe text */
          background: linear-gradient(90deg, #73bf44, #147e71, #26640b, #33c9dd);
          background-size: 300% 300%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

          animation: gradientMove 5s ease infinite;
      }

      @keyframes gradientMove {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
          }
      }

      .service-card-front p {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-muted);
          line-height: 150%;

      }

      .service-card-back h3 {
          font-size: var(--fs-h3);
      }

      .service-card-back ul li {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-muted);
          line-height: 150%;

      }


      /* Back card rotit */
      .service-card-back {
          transform: rotateY(180deg);
          display: flex;
          justify-content: start;
          padding: 2rem 2rem 2rem 2rem;
          flex-direction: column;

      }

      /* Stil text simplu */
      .service-card-front h2,
      .service-card-back h3 {
          margin-top: 0;
      }

      .service-card-front p,
      .service-card-back ul {
          margin: 1rem 0;
      }



      .service-card-front a,
      .service-card-back a {
          display: inline-block;
          margin-top: 1rem;
          text-decoration: none;
          color: #fff;
          background: #333;
          padding: 0.5rem 1rem;
          border-radius: 5px;
          text-align: center;
      }



      /* --------------------------------------------------------------------------------------PROIECTE-GALERIE------------------------------------------ */


      .proiecte {
          padding: 5rem;
          text-align: center;
          background-color: var(--color-secondary);
      }

      .proiecte h2 {
          margin-bottom: 2rem;
          font-size: 2rem;
          font-family: var(--font-body);
          font-weight: var(--fw-bold);
          color: var(--color-bg);
          font-size: var(--fs-h2);
          text-align: start;
      }

      .paranteza {
          font-family: var(--font-body);
          font-weight: var(--fw-bold);
          font-size: var(--fs-body);
          color: var(--color-accent);
      }

      .proiecte img {
          border: 5px solid var(--color-muted);
          border-radius: 1rem;

      }

      .bold {
          font-weight: var(--fw-bold);
      }


      .row {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          /* 4 coloane */
          /* spatiu intre imagini */
          row-gap: 2rem;
          /* sus-jos */
          column-gap: 1rem;
          justify-items: center;
          /* centreaza continutul in celule */
          margin-top: 2rem;
      }

      .card-rand .hint {
          position: absolute;
          bottom: 0%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: var(--color-muted);
          font-size: 1.2rem;
          font-weight: bold;
          font-family: var(--font-body);
          padding: 0.5rem 1rem;
          border-radius: 8px;
          transition: opacity 0.3s ease;
          pointer-events: none;
          /* sa nu blocheze hover-ul */
      }

      /* dispare la hover */
      .card-rand:hover .hint {
          opacity: 0;
      }

      .card-rand {
          position: relative;
          width: 100%;
          max-width: 550px;
          /* limiteaza dimensiunea cardului */

          overflow: hidden;
      }

      /* toate imaginile */
      .card-rand img {
          border-radius: 2rem;
          width: 100%;
          height: auto;
          object-fit: contain;
          display: block;
          transition: opacity 0.6s ease;
      }

      /* doar cele cu hover */
      .card-rand .hover {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
      }

      .card-rand:hover .hover {
          opacity: 1;
      }

      .card-rand:hover .normal {
          opacity: 0;
      }


      .studiu-container {
          gap: 2rem;
          padding: 5rem 0rem 0rem 0rem;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          height: auto;
          box-sizing: border-box;
      }



      .kinevo-backg {
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 2rem;
          max-width: 80%;
          height: auto;
          width: 50vw;
      }


      .text-studiu {
          box-sizing: border-box;
          text-align: start;
          word-break: break-word;
          overflow-wrap: break-word;
          width: 50vw;
          gap: 2rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
      }

      .text-studiu p {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-muted);
          word-break: break-word;
          overflow-wrap: break-word;
          line-height: 150%;


      }

      .text-studiu a {
          text-decoration: none;
          color: var(--color-accent);
      }



      a .studiu-b {
          position: relative;
          display: inline-flex;
          align-items: center;
          padding: 12px 24px;
          background: linear-gradient(90deg, #73bf44, #147e71);
          background-size: 300% 300%;
          animation: gradientMove 5s ease infinite, pulse 2s ease-in-out infinite;
          border: 1px solid #b3b3b3;
          border-radius: 50px;
          overflow: hidden;
          text-decoration: none;
          color: var(--color-bg);
          font-weight: 500;
          transition: color 0.3s ease;
          width: fit-content;
          margin-top: 2rem;
          color: var(--color-secondary);

      }

      /* --------------------------------------------------------------------------------------DESPRE NOI------------------------------------------ */


      .despre-noi {
          height: auto;
          background-color: var(--color-accent);
          padding: 5rem;
          display: flex;
          flex-direction: column;
          gap: 5rem;
      }

      .proces-lucru {
          display: flex;
          flex: row;
          flex: 1 1 50%;
          gap: 2rem;

      }

      .proces-lucru h3 {
          font-family: 'AKONY';
          flex: 1 1 50%;
          font-size: var(--fs-h3);
          line-height: 1.4;
          display: flex;
          justify-content: center;
          align-items: start;
      }

      .proces-lucru .descriere-p {
          flex: 1 1 50%;
          display: flex;
          flex-direction: column;
          gap: 1rem;
      }

      .proces-lucru .descriere-p h4 {
          font-family: var(--font-body);
          font-weight: var(--fw-bold);
          font-size: var(--fs-body);
          color: var(--color-bg);
      }

      .proces-lucru .descriere-p p {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-bg);
          line-height: 150%;

      }

      .proces-lucru .descriere-p .nr-descriere {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-bg);
      }



      .de-ce-noi {
          display: flex;
          flex: row;
          flex: 1 1 50%;
          gap: 2rem;

      }

      .de-ce-noi h3 {
          font-family: 'AKONY';
          flex: 1 1 50%;
          font-size: var(--fs-h3);
          line-height: 1.4;
          display: flex;
          justify-content: center;
          align-items: end;
          text-align: end;
      }

      .de-ce-noi .motiv {
          flex: 1 1 50%;
          display: flex;
          flex-direction: column;
          gap: 1rem;
          line-height: 150%;

      }

      .de-ce-noi .motiv h4 {
          font-family: var(--font-body);
          font-weight: var(--fw-bold);
          font-size: var(--fs-body);
          color: var(--color-bg);
      }

      .de-ce-noi .motiv p {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-bg);
      }

      .de-ce-noi .motiv .nr-descriere {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-bg);
      }


      /* --------------------------------------------------------------------------------------CONTACT------------------------------------------ */


      .contact {
          height: 90vh;
          background-color: var(--color-bg);
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 5rem;
          gap: 5rem;
      }

      .form-container {
          flex: 0 0 70%;
          /* flex-grow:0, flex-shrink:0, flex-basis:70% */
          display: flex;
          flex-direction: row;
          gap: 2rem;
      }

      .form-text {
          display: flex;
          flex-direction: column;
          flex: 0 0 50%;
          /* ocupă 50% din lățimea parintelui */
          gap: 1rem;

      }

      .form-text h3 {
          font-family: var(--font-body);
          font-size: var(--fs-h1);
          color: var(--color-secondary);
      }


      .form-text h4 {
          font-family: var(--font-body);
          font-size: var(--fs-h3);
          color: var(--color-muted);
      }



      .form-text p {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: #aaaaaa;
          line-height: 150%;

      }


      .formularul {
          box-sizing: border-box;
          padding: 1rem;
          flex: 0 0 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-secondary);
          backdrop-filter: blur(10px) saturate(180%);
          -webkit-backdrop-filter: blur(10px) saturate(180%);
          background-color: rgba(68, 68, 68, 0.26);
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.125);
      }

      .formular-contact {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          width: 100%;

      }

      .formular-contact .rand {
          display: flex;
          flex-direction: row;
          gap: 2rem;
      }

      .formular-contact .rand .sus {
          display: flex;
          flex-direction: column;
          width: 100%;
          gap: 1rem;


      }


      .formular-contact .rand .sus input {
          height: 2rem;
          border-radius: 0.5rem;
          border: none;
          border: 1px solid #3d3d3d;
          background-color: #2b2b2b;
      }

      .formular-contact textarea {
          height: 6rem;
          border-radius: 0.5rem;
          border: none;
          border: 1px solid #666565;
          background-color: #2b2b2b;
      }

      .formular-contact input,
      .formular-contact textarea {
          color: #ffffff;
          /* text alb */
          /* background negru */
          border: 1px solid #3d3d3d;
          /* optional, ca să se vadă marginile */
          padding: 0.5rem;
          font-size: 1rem;
      }

      .formular-contact input::placeholder,
      .formular-contact textarea::placeholder {
          color: #aaaaaa;
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
      }

      .fancy-button {
          cursor: pointer;
      }

      .icon-contact {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          color: var(--color-secondary);
          font-family: var(--font-body);
      }

      .icon-contact div {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          justify-content: center;
          align-items: center;
      }

      .icon-contact div i {
          font-size: 36px;
      }


      /* --------------------------------------------------------------------------------------FOOTER----------------------------------------- */



      .site-footer {
          background: var(--color-bg);
          /* fundal inchis */
          color: #eee;
          align-items: center;
          justify-content: space-between;
          font-family: "Inter", sans-serif;
          display: flex;
          flex-direction: column;
          padding-top: 5rem;
      }

      .footer-container {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          gap: 12rem;
          max-width: 1200px;

      }

      /* Coloane footer */
      .site-footer h3,
      .site-footer h4 {
          color: var(--color-secondary);
          margin-bottom: 1rem;
      }

      .footer-about p {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: #aaaaaa;
          line-height: 1.5;
      }

      /* Linkuri */
      .footer-links ul,
      .footer-services ul {
          list-style: none;

          margin: 0;
      }

      .footer-links ul li,
      .footer-services ul li {
          padding: 8px 0px 0px 0px;
      }

      .footer-links a,
      .footer-services a {
          color: #aaa;
          text-decoration: none;
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: #aaaaaa;
          transition: color 0.3s ease;
      }

      .footer-links a:hover,
      .footer-services a:hover {
          color: var(--color-accent);
          /* verde accent */
      }

      /* Contact + Social */
      .footer-contact p {
          margin: 0.5rem 0;
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-secondary);
          padding: 8px 0px 0px 0px;

      }


      .footer-contact a {
          color: #aaa;
          text-decoration: none;
      }

      .footer-contact a:hover {
          color: var(--color-accent);
      }

      .social-icons {
          margin-top: 1rem;
      }

      .social-icons a {
          display: inline-block;
          margin-right: 0.7rem;
          font-size: 1.1rem;
          color: #aaa;
          transition: color 0.3s ease;
      }

      .social-icons a:hover {
          color: var(--color-accent);
      }

      /* Sub-footer */
      .footer-bottom {
          border-top: 1px solid #333;
          margin-top: 2rem;
          padding: 2rem;
          text-align: center;
          font-size: 0.85rem;
          color: #777;
      }




      .price-tag {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 12px 24px;
          background: var(--color-accent);
          border: 1px solid #6c6c6c;
          align-items: center;
          border-radius: 50px;
          color: var(--color-bg);
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          width: 100%;
      }

      /* Responsive */
      @media (max-width: 900px) {
          .footer-container {
              display: flex;
              flex-direction: column;
          }
      }

      @media (max-width: 600px) {
          .footer-container {
              display: flex;
              flex-direction: column;
              text-align: center;
          }

          .social-icons {
              margin-top: 1.5rem;
          }
      }

      /* --------------------------------------------------------------------------------------MEDIA Q----------------------------------------- */
      /* --------------------------------------------------------------------------------------MEDIA Q----------------------------------------- */


      @media (max-width: 800px) {


          .sidebar {
              top: -20px;
              right: -80px;
              width: 100%;
          }

          .price-tag {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 12px 24px;
              background: var(--color-accent);
              border: 1px solid #6c6c6c;
              align-items: center;
              border-radius: 50px;
              color: var(--color-bg);
              font-family: var(--font-body);
              font-weight: var(--fw-light);
              font-size: var(--fs-body);
              width: 100%;
          }

          .icon-contact div i {
              font-size: 28px;
          }

          .icon-contact i {
              font-size: 12px;
          }

          .icon-contact {
              font-size: 16px;
          }

          .footer-about p {
              text-align: center;
          }

          .footer-contact p {
              text-align: center;
          }

          .footer-bottom p {
              text-align: center;
          }


          .footer-container {
              gap: 4rem;
              padding: 3rem 0rem 3rem 0rem;
          }


          section {
              scroll-margin-top: 100px;
          }

          .container .navbar .desktopnav {
              background-color: transparent;
              margin-block-start: 0em;
              margin-block-end: 0em;
              width: auto;
              height: auto;
              border: none;
          }

          .container .navbar {
              position: sticky;
          }



          .navbar {
              width: 90%;
          }

          nav .logo {
              height: 20px;
              padding-left: 15px;
          }

          .hideonmobile {
              display: none;
          }

          .menubuton {
              display: block;
          }


          .container {
              padding: 20px;
              justify-content: center;

              box-sizing: border-box;

              white-space: normal;
              /* permite trecerea pe rând nou */
              overflow-wrap: normal;
              /* nu rupe cuvântul */
              word-break: normal;
          }

          .texth1 {
              box-sizing: content-box;
              align-items: start;
              justify-content: start;
              justify-items: start;

          }

          .texth1 h1 {
              margin-top: 3rem;
              font-size: 2.1rem;
              line-height: 1.2;
              /* sau chiar 1.5, în funcție de font */

              box-sizing: content-box;


              white-space: normal;
              /* permite trecerea pe rând nou */
              overflow-wrap: normal;
              /* nu rupe cuvântul */
              word-break: normal;
          }

          .x-line {
              top: 180px !important;
              /* mai sus pe mobil */
              left: 50% !important;
              transform: translate(-50%, -50%) rotate(45deg);
              /* sau -45 pentru line2 */
          }



          .butontext a {
              margin-bottom: 3rem;
          }

          .butontext .chenar {
              width: 100%;
          }

          .butontext a {
              width: 100%;
          }

          .chenar {
              display: none;
          }

          .container .butontext {
              padding: 20px;
          }



          .main-container {
              height: auto;
              padding: 40px 20px 40px 20px;


              box-sizing: border-box;
              gap: 2rem;
              white-space: normal;
              /* permite trecerea pe rând nou */
              overflow-wrap: normal;
              /* nu rupe cuvântul */
              word-break: normal;
          }

          .titlu {
              font-size: 4rem;
              text-align: start;
              overflow-wrap: break-word;
              word-wrap: break-word;
              /* suport pentru browsere vechi */
              word-break: break-word;
              /* fallback */
              line-height: 93%;

          }

          .info {
              width: 100%;
              gap: 2rem;

          }

          .info p {
              text-align: left;
          }

          .info .btn {
              justify-content: center;
          }






          .servicii .container-servicii {
              flex-direction: column;
              align-items: stretch;
              /* ocupa toată lățimea părinților */
              gap: 2rem;
              /* distanță între left și right */
              height: auto;
              /* lasă să se ajusteze în funcție de conținut */
              padding: 20px;
          }

          .servicii .container-servicii {
              padding: 0;
          }

          .servicii {
              padding: 40px 20px 40px 20px;
              height: auto;
          }


          .logo-lines {
              padding: 40px 0px 40px 0px;
          }

          .left-s,
          .right-s {
              flex: 1 1 100%;
              /* ambele ocupă 100% din lățimea containerului */
              padding: 0;
              /* eliminăm padding-ul mare dacă e nevoie */
          }

          .left-s {
              justify-content: flex-start;

              gap: 2rem;
          }



          .right-s {
              flex-direction: column;
              /* ca cardurile să stea orizontal dacă vrei */
              flex-wrap: wrap;
              /* să se împartă cardurile */
              gap: 10px;
              /* păstrează spațiu între carduri */
          }

          .left-s h4,
          p {
              text-align: start;

          }


          .card img {
              flex: 0 0 20%;
              /* ocupă exact 10% din lățime */
              aspect-ratio: 1 / 1;
              /* pătrată */
              object-fit: cover;
              border-radius: 8px;
              /* opțional, colțuri rotunjite */
          }

          .card .serviciile {
              flex: 1 1 80%;
              /* ocupă restul de 90% */
          }

          .card .serviciile .descriere-s {
              font-size: 0.9375rem;

          }

          .card .serviciile .nr {
              font-size: 0.875rem;
          }

          .servicii .container-servicii p {
              font-size: 0.9375rem;
          }





          .proiecte {
              padding: 40px 20px 40px 20px;

          }

          .row {
              grid-template-columns: repeat(1, 1fr);
              /* 2 coloane pe mobil */
          }

          .card-rand {
              max-width: 100%;
              /* ocupa toată lățimea disponibilă */
          }





          .despre-noi {
              padding: 40px 20px 40px 20px;
              flex-direction: column;

          }

          .proces-lucru {
              flex-direction: column;
          }

          .proces-lucru .descriere-p p {
              text-align: start;
          }


          .de-ce-noi {
              flex-direction: column-reverse;
              /* inversează ordinea pe orizontală */
          }

          .de-ce-noi .motiv p {
              text-align: start;
          }




          .studiu-container {
              width: 100%;
              flex-direction: column;
              flex-direction: column;
              padding-top: 2rem;
          }

          .kinevo-backg {
              width: 100%;
              max-width: 100%;
          }

          .text-studiu {
              width: 100%;
              text-align: start;
              gap: 0rem;
          }

          .text-studiu p {
              text-align: start;
          }


          .services-cards {
              padding: 5rem 1rem 5rem 1rem;
          }

          .service-card {
              width: 320px;
          }

          .service-card-front h2 {
              text-align: start;
          }

          .service-card-front p {
              text-align: start;
          }


          .contact {
              flex-direction: column;
              padding: 40px 20px 40px 20px;
              height: auto;
              gap: 3rem;
          }

          .form-container {
              flex-direction: column;
          }

          .form-container .form-text p {
              text-align: left;
          }

          .formular-contact {
              flex-direction: column;
              padding: 0;
          }

          .formular-contact .rand {
              flex-direction: column;
              gap: 1rem;
          }



          .formular-contact .rand {
              width: 100%;
          }

          .formular-contact .rand .sus input {
              width: 100%;
          }
      }

      @media (prefers-reduced-motion: reduce) {

          *,
          *::before,
          *::after {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              transition-duration: 0.01ms !important;
          }

          #main-cont {
              scroll-margin-top: 110px;
          }

      }




      /* preloader */
      #preloader {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--color-secondary);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 10000;
          pointer-events: auto;
          /* default, permite interacțiunea doar pe SVG dacă vrei */
          opacity: 1;
          transition: opacity 0.5s ease-out;
      }

      /* SVG */
      .preloader-logo svg {
          width: 120px;
          height: 120px;
          overflow: visible;
      }

      /* Contur desenat (stroke) */
      .st0,
      .st2,
      .std {
          stroke-dasharray: 500;
          stroke-dashoffset: 500;
          fill: transparent;
          stroke-width: 2;
          stroke-linecap: round;
      }

      /* Stroke animation și fill secvențial */
      .st0 {
          stroke: #231f20;
          animation: draw 1s ease forwards, fillSt0 1s ease forwards 1s;
      }

      .st2 {
          stroke: #74c044;
          animation: draw 1s ease forwards 0.5s, fillSt2 1s ease forwards 1.5s;
      }

      .std {
          stroke: #74c044;
          animation: draw 1s ease forwards 1s, fillStd 1s ease forwards 2s;
      }

      /* Animatie stroke */
      @keyframes draw {
          to {
              stroke-dashoffset: 0;
          }
      }

      /* Fill pentru fiecare culoare */
      @keyframes fillSt0 {
          to {
              fill: #231f20;
          }
      }

      @keyframes fillSt2 {
          to {
              fill: #74c044;
          }
      }

      @keyframes fillStd {
          to {
              fill: #74c044;
          }
      }

      /* Slide-up final */
      .preloader-slide-up {
          animation: slideUp 0.8s forwards ease-in-out;
      }

      @keyframes slideUp {
          0% {
              transform: translateY(0);
          }

          100% {
              transform: translateY(-100%);
          }
      }

      /* 13. ÎMBUNĂTĂȚIRI PENTRU ANIMAȚII - REDUCED MOTION */
      @media (prefers-reduced-motion: reduce) {

          .animate-on-scroll,
          .fade-in,
          .scroll-left,
          .scroll-right,
          .service-card-inner,
          .preloader-logo svg path {
              animation: none !important;
              transition: none !important;
          }

          .animate-on-scroll {
              opacity: 1;
              transform: none;
          }
      }


      #formOverlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          /* semi-transparent fundal */
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;
      }

      #formMessageOverlay {
          background: #fff;
          padding: 20px 30px;
          border-radius: 10px;
          color: #121212;
          font-size: 18px;
          max-width: 90%;
          text-align: center;
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: #aaaaaa;
      }


      @media (max-width: 768px) {
          .services-cards {
              flex-direction: row;
              /* carte in linie */
              overflow-x: auto;
              scroll-snap-type: x mandatory;
              -webkit-overflow-scrolling: touch;
              width: 100%;
          }


      }

      /* Optional: animatie intrare */
      .scroll-left {
          transform: translateX(-100px);
          opacity: 0;
          transition: all 0.6s ease-out;
      }

      .scroll-right {
          transform: translateX(100px);
          opacity: 0;
          transition: all 0.6s ease-out;
      }

      .animate-on-scroll.visible .scroll-left,
      .animate-on-scroll.visible .scroll-right {
          transform: translateX(0);
          opacity: 1;
      }

      @media (max-width: 768px) {
          .services-cards {
              height: 85vh;
              /* mai mic pe mobil */
              padding: 2rem;
              flex-wrap: nowrap;
              /* nu mai permite wrap */
              overflow-x: hidden;
              /* ascunde orice overflow */
              justify-content: center;
          }


          /* Pozițiile laterale mai apropiate pe mobil */
          .service-card.left {
              transform: scale(0.8) translateX(-150px) translateZ(-50px);
              opacity: 0.5;
          }

          .service-card.right {
              transform: scale(0.8) translateX(150px) translateZ(-50px);
              opacity: 0.5;
          }



          .site-footer {
              padding-top: 0rem;
          }

      }


      @media (max-width: 768px) {

          .proiecte h2 {
              padding: 0px;
          }

          .row {
              display: flex;
              overflow-x: auto;
              scroll-snap-type: x mandatory;
              -webkit-overflow-scrolling: touch;
              gap: 10px;
              /* spațiu între poze */
              padding-bottom: 10px;
          }

          .card-rand {
              flex: 0 0 auto;
              /* forțează fiecare card să rămână cât lățimea sa */
              scroll-snap-align: start;
              /* sau cât vrei să ocupe pe mobil */
              max-width: 325px;
          }

          /* ascunde scrollbar-ul dacă vrei un aspect mai curat */
          .row::-webkit-scrollbar {
              display: none;
          }


      }


      @media (max-width: 1200px) {
          .navbar {
              width: 90%;
          }

          .servicii .container-servicii {
              flex-wrap: nowrap;
          }

          .form-container {
              flex-direction: column;
              gap: 1rem;
          }


          .contact {
              height: auto;
          }

      }


      .price-tag {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          padding: 12px 24px;
          border: 1px solid #6c6c6c;
          border-radius: 50px;
          width: fit-content;

          /* Background gradient animat */
          background: linear-gradient(90deg, #73bf44, #147e71, #26640b, #33c9dd);
          background-size: 300% 300%;
          animation: gradientMove 5s ease infinite, pulse 2s ease-in-out infinite;
      }

      .price-tag span {
          font-family: var(--font-body);
          font-weight: var(--fw-light);
          font-size: var(--fs-body);
          color: var(--color-secondary);
          /* aici pui ce culoare vrei pentru text */
      }

      @keyframes gradientMove {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
          }
      }

      @keyframes pulse {

          0%,
          100% {
              transform: scale(1);
          }

          50% {
              transform: scale(1.05);
          }
      }