/* Google Translate — ascunde bara și widgetul */
    .goog-te-banner-frame, .goog-te-gadget, #goog-gt-tt,
    .goog-tooltip, .goog-tooltip-content { display:none !important; }
    body { top: 0 !important; }
    .skiptranslate { display: none !important; }

    /* ============================================================
       1. VARIABILE GLOBALE (Design Tokens)
       Toate culorile, fonturile și timing-urile animațiilor.
       ============================================================ */

    :root {
      /* Paleta de culori — de la deschis la închis */
      --cream:  #f5f0e8;   /* fond deschis, cald */
      --sand:   #e8dcc8;   /* borduri, separatoare */
      --warm:   #c9b89a;   /* accent secundar, text subtil */
      --stone:  #9e8872;   /* text auxiliar */
      --earth:  #6b5744;   /* accent principal, dark-ish */
      --dark:   #2c221a;   /* text principal, fundaluri dark */
      --white:  #fdfaf5;   /* alb cald */
      --accent: #a07850;   /* accent CTA, hover */

      /* Fonturi */
      --ff-display: 'Cormorant Garamond', Georgia, serif;
      --ff-body:    'Montserrat', sans-serif;

      /* Easing custom pentru animații fluide */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    }


    /* ============================================================
       2. RESET GENERAL
       Normalizare cross-browser: box model, margini, comportament global.
       ============================================================ */

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: var(--ff-body);
      background-color: var(--white);
      color: var(--dark);
      overflow-x: hidden;
      cursor: none;       /* ascuns — înlocuit de cursorul custom */
    }

    img {
      display: block;
      width: 100%;
      object-fit: cover;
    }

    a {
      color: inherit;
      text-decoration: none;
    }


    /* ============================================================
       3. CURSOR PERSONALIZAT
       Un cerc mic care urmărește mouse-ul.
       Devine inel gol (expanded) la hover pe elemente interactive.
       ============================================================ */

    #cursor {
      position: fixed;
      width: 12px;
      height: 12px;
      background: var(--earth);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
      transition: width .25s, height .25s, background .25s, border .25s;
      mix-blend-mode: multiply;
      will-change: left, top;
    }

    #cursor.expanded {
      width: 38px;
      height: 38px;
      background: transparent;
      border: 1px solid var(--earth);
      mix-blend-mode: normal;
    }


    /* ============================================================
       4. BARA DE PROGRES SCROLL
       Linie subțire fixată sus care crește pe măsură ce derulezi pagina.
       ============================================================ */

    #progressBar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--warm));
      z-index: 200;
      transform-origin: left;
      transform: scaleX(0);   /* pleacă de la 0, JS o scalează */
      pointer-events: none;
    }


    /* ============================================================
       5. NAVIGAȚIE PRINCIPALĂ
       Meniu fix, transparent inițial → devine opac + blur la scroll.
       ============================================================ */

    #mainNav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 60px 28px 32px;
      transition: background .5s, padding .5s, box-shadow .5s;
    }

    /* Starea după scroll — fundal dark transparent cu blur */
    #mainNav.scrolled {
      background: rgba(30, 20, 12, .72);
      padding: 16px 60px;
      box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
      backdrop-filter: blur(14px);
    }

    /* ── Logo ── */
    .nav-logo {
      font-family: var(--ff-display);
      font-size: 1.6rem;
      font-weight: 400;
      letter-spacing: .12em;
      color: var(--white);
      transition: color .5s;
    }

    .nav-logo img {
      filter: brightness(0) invert(1);
      transition: filter .5s;
    }

    #mainNav.scrolled .nav-logo {
      color: var(--white);
    }

    #mainNav.scrolled .nav-logo img {
      filter: brightness(0) invert(1);
    }

    /* ── Lista de linkuri ── */
    .nav-links {
      display: flex;
      gap: 48px;
      list-style: none;
    }

    .nav-links a {
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(253, 250, 245, .85);
      transition: color .3s;
      position: relative;
      padding-bottom: 4px;
    }

    #mainNav.scrolled .nav-links a {
      color: rgba(253, 250, 245, .85);
    }

    /* Linie animată sub fiecare link la hover */
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s var(--ease-out);
    }

    .nav-links a:hover { color: var(--white); }
    #mainNav.scrolled .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { transform: scaleX(1); }


    /* ============================================================
       6. HERO SECTION
       Prima secțiune — fullscreen, imagine de fundal, text și CTA.
       ============================================================ */

    #hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 700px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }

    /* Imaginea de fundal — se mărește ușor la load (efect cinematic) */
    .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1800&q=85&auto=format&fit=crop');
      background-size: cover;
      background-position: center;
      transform: scale(1.06);
      transition: transform 9s var(--ease-out);
      will-change: transform;
    }

    #hero.loaded .hero-bg {
      transform: scale(1); /* se dezumflă lent după load */
    }

    /* Gradient întunecat jos — asigură lizibilitatea textului */
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(28, 18, 10, .82) 0%,
        rgba(28, 18, 10, .32) 55%,
        rgba(28, 18, 10, .10) 100%
      );
    }

    /* Textură film grain subtilă */
    .hero-grain {
      position: absolute;
      inset: 0;
      opacity: .035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    /* ── Conținut text (eyebrow, titlu, subtitlu, CTA) ── */
    .hero-content {
      position: relative;
      z-index: 2;
      padding: 0 60px 90px;
      max-width: 860px;
    }

    /* Fiecare element apare cu fade + slide-up la load */
    .hero-eyebrow {
      font-size: .65rem;
      font-weight: 500;
      letter-spacing: .38em;
      text-transform: uppercase;
      color: var(--warm);
      margin-bottom: 24px;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 1s .3s, transform 1s .3s var(--ease-out);
    }

    #hero.loaded .hero-eyebrow { opacity: 1; transform: translateY(0); }

    .hero-title {
      font-family: var(--ff-display);
      font-size: clamp(4rem, 8vw, 7.5rem);
      font-weight: 300;
      line-height: 1.0;
      color: var(--white);
      letter-spacing: -.01em;
      margin-bottom: 26px;
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 1s .5s, transform 1s .5s var(--ease-out);
    }

    #hero.loaded .hero-title { opacity: 1; transform: translateY(0); }
    .hero-title em { font-style: italic; color: var(--warm); }

    .hero-subtitle {
      font-size: .78rem;
      font-weight: 300;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(253, 250, 245, .65);
      margin-bottom: 52px;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 1s .7s, transform 1s .7s var(--ease-out);
    }

    #hero.loaded .hero-subtitle { opacity: 1; transform: translateY(0); }

    /* ── Buton CTA principal ── */
    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      padding: 18px 44px;
      border: 1px solid rgba(253, 250, 245, .4);
      color: var(--white);
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .26em;
      text-transform: uppercase;
      position: relative;
      overflow: hidden;
      opacity: 0;
      transition: opacity 1s .9s, border-color .35s, color .35s;
    }

    #hero.loaded .hero-cta { opacity: 1; }

    /* Fill alb care alunecă dinspre stânga la hover */
    .hero-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--white);
      transform: translateX(-101%);
      transition: transform .5s var(--ease-out);
    }

    .hero-cta:hover { color: var(--dark); border-color: var(--white); }
    .hero-cta:hover::before { transform: translateX(0); }
    .hero-cta span, .hero-cta-arrow { position: relative; z-index: 1; }
    .hero-cta-arrow { font-size: 1.1rem; }

    /* ── Indicator scroll (jos-dreapta) ── */
    .hero-scroll {
      position: absolute;
      bottom: 36px;
      right: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transition: opacity 1s 1.3s;
    }

    #hero.loaded .hero-scroll { opacity: .55; }

    .hero-scroll-label {
      font-size: .58rem;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--white);
      writing-mode: vertical-rl;
    }

    .scroll-line {
      width: 1px;
      height: 56px;
      background: linear-gradient(to bottom, var(--white), transparent);
      animation: scrollPulse 2.2s ease-in-out infinite;
    }


    /* ============================================================
       7. ANIMAȚII GENERALE
       Keyframes și clase utilitare de reveal.
       ============================================================ */

    /* Pulsul liniei de scroll din hero */
    @keyframes scrollPulse {
      0%, 100% { opacity: .6; transform: scaleY(1); }
      50%       { opacity: .15; transform: scaleY(.5); }
    }

    /* Animație marquee (banda derulantă) */
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ── Stiluri comune pentru secțiuni ── */
    section { padding: 120px 60px; }

    .section-label {
      display: block;
      font-size: .62rem;
      font-weight: 500;
      letter-spacing: .36em;
      text-transform: uppercase;
      color: var(--stone);
      margin-bottom: 18px;
    }

    .section-title {
      font-family: var(--ff-display);
      font-size: clamp(2.4rem, 4vw, 3.8rem);
      font-weight: 300;
      line-height: 1.1;
      color: var(--dark);
      letter-spacing: -.01em;
    }

    .section-title em { font-style: italic; color: var(--accent); }

    /* ── Reveal la scroll (fade + slide-up) ── */
    .reveal {
      opacity: 0;
      transform: translateY(38px);
      transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
    }

    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* Delay-uri pentru animații în cascadă */
    .reveal-delay-1 { transition-delay: .10s; }
    .reveal-delay-2 { transition-delay: .20s; }
    .reveal-delay-3 { transition-delay: .30s; }
    .reveal-delay-4 { transition-delay: .42s; }


    /* ============================================================
       8. ABOUT SECTION
       Layout 2 coloane: imagine stânga, text dreapta.
       ============================================================ */

    #about {
      background: var(--white);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 90px;
      align-items: center;
      padding: 140px 60px;
    }

    /* ── Imaginea cu bordura decorativă și tag ── */
    .about-image-wrap {
      position: relative;
      height: 640px;
    }

    .about-image-wrap img { height: 100%; }

    .about-image-border {
      position: absolute;
      bottom: -28px;
      right: -28px;
      width: 46%;
      height: 46%;
      border: 1px solid var(--sand);
      z-index: -1;
      pointer-events: none;
    }

    .about-image-tag {
      position: absolute;
      top: 30px;
      left: -18px;
      background: var(--cream);
      padding: 14px 22px;
      font-family: var(--ff-display);
      font-size: .92rem;
      font-weight: 300;
      letter-spacing: .06em;
      color: var(--earth);
      box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
    }

    /* ── Textul din dreapta ── */
    .about-text { max-width: 520px; }
    .about-text .section-title { margin-bottom: 30px; }

    .about-text p {
      font-size: .87rem;
      font-weight: 300;
      line-height: 1.9;
      color: var(--stone);
      margin-bottom: 18px;
    }

    /* ── Rândul de statistici (100%, ∞, 0) ── */
    .about-stat-row {
      display: flex;
      gap: 48px;
      margin-top: 50px;
      padding-top: 38px;
      border-top: 1px solid var(--sand);
    }

    .about-stat h3 {
      font-family: var(--ff-display);
      font-size: 2.8rem;
      font-weight: 300;
      color: var(--earth);
      line-height: 1;
    }

    .about-stat p {
      font-size: .66rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--stone);
      margin-top: 6px;
      margin-bottom: 0;
    }


    /* ============================================================
       9. BENEFITS SECTION
       Grid de 4 carduri pe fundal închis.
       ============================================================ */

    #benefits {
      background: var(--dark);
      padding: 120px 60px;
    }

    /* ── Header cu titlu stânga + tagline dreapta ── */
    .benefits-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 80px;
    }

    .benefits-header .section-label { color: var(--stone); }
    .benefits-header .section-title { color: var(--cream); }
    .benefits-header .section-title em { color: var(--warm); }

    .benefits-tagline {
      font-size: .82rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--stone);
      max-width: 280px;
      text-align: right;
    }

    /* ── Grila de carduri ── */
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(255, 255, 255, .06); /* crează iluzia de separator */
    }

    .benefit-card {
      background: var(--dark);
      padding: 52px 38px;
      position: relative;
      overflow: hidden;
      transition: background .4s;
    }

    /* Linie accent apare jos la hover */
    .benefit-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--warm));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s var(--ease-out);
    }

    .benefit-card:hover { background: rgba(255, 255, 255, .025); }
    .benefit-card:hover::after { transform: scaleX(1); }

    .benefit-icon {
      width: 44px;
      height: 44px;
      margin-bottom: 34px;
      opacity: .65;
      transition: opacity .3s;
    }

    .benefit-card:hover .benefit-icon { opacity: 1; }

    .benefit-number {
      font-family: var(--ff-display);
      font-size: .72rem;
      color: var(--stone);
      letter-spacing: .22em;
      margin-bottom: 12px;
    }

    .benefit-card h3 {
      font-family: var(--ff-display);
      font-size: 1.55rem;
      font-weight: 400;
      color: var(--cream);
      margin-bottom: 14px;
      line-height: 1.2;
    }

    .benefit-card p {
      font-size: .79rem;
      font-weight: 300;
      line-height: 1.78;
      color: var(--stone);
    }


    /* ============================================================
       10. MARQUEE — BANDĂ DERULANTĂ
       Animație CSS pură, conținut duplicat pentru loop infinit.
       ============================================================ */

    .marquee-section {
      overflow: hidden;
      padding: 30px 0;
      background: var(--cream);
      border-top: 1px solid var(--sand);
      border-bottom: 1px solid var(--sand);
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 32s linear infinite;
    }

    .marquee-item {
      display: flex;
      align-items: center;
      gap: 40px;
      padding: 0 40px;
      white-space: nowrap;
    }

    .marquee-item span {
      font-family: var(--ff-display);
      font-size: 1.08rem;
      font-weight: 300;
      letter-spacing: .06em;
      color: var(--earth);
    }

    .marquee-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--warm);
      flex-shrink: 0;
    }


    /* ============================================================
       11. PROJECTS SECTION
       Galerie asimetrică: card mare stânga + 3 carduri dreapta.
       ============================================================ */

    #projects {
      background: var(--white);
      padding: 120px 60px;
    }

    /* ── Header cu descriere pe 2 coloane ── */
    .projects-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: flex-end;
      gap: 40px;
      margin-bottom: 68px;
    }

    .projects-desc {
      font-size: .85rem;
      font-weight: 300;
      line-height: 1.82;
      color: var(--stone);
    }

    /* ── Grid asimetric de proiecte ── */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      gap: 18px;
    }

    .project-card {
      position: relative;
      overflow: hidden;
    }

    /* Plasarea cardurilor în grid — primul ocupă toată înălțimea */
    .project-card:nth-child(1) { grid-column: 1;   grid-row: 1 / 3; }
    .project-card:nth-child(2) { grid-column: 2;   grid-row: 1; }
    .project-card:nth-child(3) { grid-column: 3;   grid-row: 1; }
    .project-card:nth-child(4) { grid-column: 2/4; grid-row: 2; }

    .project-img {
      height: 100%;
      min-height: 280px;
      transition: transform .85s var(--ease-out);
    }

    .project-card:nth-child(1) .project-img { min-height: 580px; }
    .project-card:hover .project-img { transform: scale(1.06); }

    /* Overlay cu titlu — apare la hover */
    .project-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(28, 18, 10, .78) 0%, transparent 55%);
      opacity: 0;
      transition: opacity .4s;
      display: flex;
      align-items: flex-end;
      padding: 30px;
    }

    .project-card:hover .project-overlay { opacity: 1; }

    .project-info {
      transform: translateY(10px);
      transition: transform .42s var(--ease-out);
    }

    .project-card:hover .project-info { transform: translateY(0); }

    .project-info h3 {
      font-family: var(--ff-display);
      font-size: 1.35rem;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 4px;
    }

    .project-info span {
      font-size: .68rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--warm);
    }

    /* Tag tip proiect (Pool / Wall / Interior) */
    .project-tag {
      position: absolute;
      top: 18px;
      left: 18px;
      background: rgba(253, 250, 245, .92);
      padding: 5px 13px;
      font-size: .6rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--earth);
      font-weight: 500;
    }

    /* ── Taburi categorii ── */
    .projects-categories {
      display: flex;
      gap: 0;
      margin-bottom: 52px;
      border-bottom: 1px solid var(--sand);
    }

    .category-tab {
      font-family: var(--ff-body);
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--stone);
      background: none;
      border: none;
      padding: 16px 38px;
      cursor: none;
      position: relative;
      transition: color .3s;
    }

    .category-tab::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transition: transform .35s var(--ease-out);
    }

    .category-tab:hover { color: var(--earth); }
    .category-tab.active { color: var(--dark); }
    .category-tab.active::after { transform: scaleX(1); }

    /* ── Galerie per categorie ── */
    .category-gallery { display: none; }
    .category-gallery.active { display: block; }

    .gallery-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .gallery-container { flex: 1; overflow: hidden; }

    .gallery-track {
      display: flex;
      gap: 18px;
      transition: transform .65s var(--ease-out);
      will-change: transform;
    }

    .gallery-card {
      position: relative;
      overflow: hidden;
      flex: 0 0 calc(50% - 9px);
      aspect-ratio: 4 / 3;
    }

    .gallery-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .85s var(--ease-out);
    }

    .gallery-card:hover img { transform: scale(1.06); }

    .gallery-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(28,18,10,.78) 0%, transparent 55%);
      opacity: 0;
      transition: opacity .4s;
      display: flex;
      align-items: flex-end;
      padding: 28px;
    }

    .gallery-card:hover .gallery-overlay { opacity: 1; }

    .gallery-info {
      transform: translateY(10px);
      transition: transform .42s var(--ease-out);
    }

    .gallery-card:hover .gallery-info { transform: translateY(0); }

    .gallery-info h3 {
      font-family: var(--ff-display);
      font-size: 1.28rem;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 4px;
    }

    .gallery-info span {
      font-size: .68rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--warm);
    }

    .gallery-nav {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border: 1px solid var(--sand);
      background: var(--white);
      color: var(--earth);
      font-size: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: none;
      transition: border-color .3s, background .3s, color .3s;
    }

    .gallery-nav:hover {
      border-color: var(--warm);
      background: var(--cream);
      color: var(--accent);
    }

    .gallery-nav span { position: relative; top: -2px; }
    .gallery-nav:disabled { opacity: .3; pointer-events: none; }


    /* ============================================================
       12. PROCESS SECTION
       Cei 4 pași de lucru. Imagine sticky + pași cu hover offset.
       ============================================================ */

    #process {
      background: var(--cream);
      padding: 120px 60px;
    }

    .process-inner {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 100px;
      align-items: start;
    }

    .process-steps { margin-top: 56px; }

    .process-step {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 28px;
      padding: 36px 0;
      border-bottom: 1px solid var(--sand);
      transition: padding-left .4s var(--ease-out);
    }

    .process-step:last-child { border-bottom: none; }
    .process-step:hover { padding-left: 10px; } /* micro-interacțiune: pas care avansează */

    .step-num {
      font-family: var(--ff-display);
      font-size: .82rem;
      color: var(--warm);
      font-weight: 300;
      letter-spacing: .1em;
      padding-top: 4px;
    }

    .step-content h3 {
      font-family: var(--ff-display);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--dark);
      margin-bottom: 10px;
    }

    .step-content p {
      font-size: .82rem;
      font-weight: 300;
      line-height: 1.82;
      color: var(--stone);
    }

    /* Imaginea rămâne fixă în viewport la scroll */
    .process-image {
      position: sticky;
      top: 100px;
      height: 610px;
    }

    .process-image img { height: 100%; }


    /* ============================================================
       13. QUOTE SECTION
       Citat centrat pe fundal earth.
       ============================================================ */

    .quote-section {
      background: var(--earth);
      padding: 96px 60px;
      text-align: center;
    }

    .quote-mark {
      font-family: var(--ff-display);
      font-size: 5.5rem;
      color: rgba(253, 250, 245, .14);
      line-height: .5;
      margin-bottom: 22px;
    }

    .quote-text {
      font-family: var(--ff-display);
      font-size: clamp(1.5rem, 2.6vw, 2.3rem);
      font-weight: 300;
      font-style: italic;
      color: var(--cream);
      max-width: 820px;
      margin: 0 auto 26px;
      line-height: 1.52;
    }

    .quote-source {
      font-size: .66rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--warm);
    }


    /* ============================================================
       14. PARTNERS SECTION
       Slider orizontal cu butoane prev/next.
       ============================================================ */

    #partners {
      background: var(--white);
      padding: 120px 60px;
    }

    .partners-header {
      text-align: center;
      margin-bottom: 72px;
    }

    .partners-header .section-title { margin-top: 12px; }

    /* ── Wrapper slider: nav + container cu overflow hidden ── */
    .partners-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      gap: 20px;
      max-width: 1400px;
      margin: 0 auto;
    }

    .partners-container { flex: 1; overflow: hidden; }

    .partners-track {
      display: flex;
      gap: 24px;
      transition: transform .65s var(--ease-out);
      will-change: transform;
    }

    /* ── Card partener ── */
    .partner-card {
      border: 1px solid var(--sand);
      padding: 32px 28px 36px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: relative;
      overflow: hidden;
      transition: border-color .4s, box-shadow .4s;
      flex: 0 0 calc(25% - 18px);
      min-width: 0;
    }

    /* Fundal crem care apare la hover */
    .partner-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--cream);
      opacity: 0;
      transition: opacity .4s;
    }

    .partner-card:hover {
      border-color: var(--warm);
      box-shadow: 0 8px 48px rgba(107, 87, 68, .08);
    }

    .partner-card:hover::before { opacity: 1; }
    .partner-card > * { position: relative; z-index: 1; }

    /* ── Logo partener ── */
    .partner-logo-wrap {
      width: 100%;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--white);
      padding: 16px;
      margin-bottom: 4px;
      flex-shrink: 0;
    }

    .partner-logo {
      width: auto;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      display: block;
    }

    /* ── Steagul de țară (CSS pur) ── */
    .partner-flag {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .partner-flag-icon {
      width: 26px;
      height: 18px;
      border-radius: 2px;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    }

    /* Steaguri generate prin gradiente CSS */
    .flag-fr  { background: linear-gradient(90deg, #0055A4 33.3%, #FFFFFF 33.3%, #FFFFFF 66.6%, #EF4135 66.6%); }
    .flag-mc  { background: linear-gradient(180deg, #CE1126 50%, #FFFFFF 50%); }
    .flag-multi { background: linear-gradient(135deg, #0055A4 0%, #0055A4 33%, #CE1126 33%, #CE1126 66%, #003DA5 66%, #003DA5 100%); }
    .flag-st  { background: linear-gradient(90deg, #0055A4 33.3%, #FFFFFF 33.3%, #FFFFFF 66.6%, #EF4135 66.6%); }

    .partner-flag-label {
      font-size: .58rem;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--stone);
    }

    .partner-name {
      font-family: var(--ff-display);
      font-size: 1.45rem;
      font-weight: 300;
      color: var(--dark);
      letter-spacing: .03em;
      line-height: 1.15;
      word-break: break-word;
    }

    .partner-divider {
      width: 36px;
      height: 1px;
      background: var(--warm);
      flex-shrink: 0;
    }

    .partner-desc {
      font-size: .76rem;
      font-weight: 300;
      line-height: 1.72;
      color: var(--stone);
      flex-grow: 1;
      overflow-wrap: break-word;
    }

    /* ── Metadate partener (Tip, Locație, Adresă) ── */
    .partner-meta {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 14px;
      border-top: 1px solid var(--sand);
      flex-shrink: 0;
    }

    .partner-meta-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .partner-meta-item span:first-child {
      font-size: .55rem;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--warm);
      min-width: 56px;
      flex-shrink: 0;
      padding-top: 2px;
    }

    .partner-meta-item span:last-child {
      font-family: var(--ff-display);
      font-size: .85rem;
      color: var(--dark);
      line-height: 1.4;
    }

    /* ── Link de contact partener ── */
    .partner-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .6rem;
      font-weight: 500;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--earth);
      border-bottom: 1px solid var(--sand);
      padding-bottom: 4px;
      align-self: flex-start;
      transition: border-color .3s, color .3s;
      margin-top: 6px;
      flex-shrink: 0;
    }

    .partner-link:hover { color: var(--accent); border-color: var(--accent); }

    /* ── Iconița Instagram pe cardul de partener ── */
    .partner-insta {
      position: absolute;
      top: 16px;
      right: 18px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--sand);
      color: var(--stone);
      font-size: .9rem;
      background: transparent;
      transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease-out), box-shadow .3s;
      text-decoration: none;
    }

    .partner-insta:hover {
      color: #fff;
      border-color: transparent;
      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
      box-shadow: 0 4px 18px rgba(214, 36, 159, .35);
      transform: scale(1.15);
    }

    /* ── Butoane de navigare stânga/dreapta ── */
    .partners-nav {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border: 1px solid var(--sand);
      background: var(--white);
      color: var(--earth);
      font-size: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: none;
      transition: border-color .3s, background .3s, color .3s;
    }

    .partners-nav:hover {
      border-color: var(--warm);
      background: var(--cream);
      color: var(--accent);
    }

    .partners-nav span { position: relative; top: -2px; }
    .partners-nav:disabled { opacity: .3; pointer-events: none; }


    /* ============================================================
       15. CONTACT SECTION
       Layout 2 coloane: info stânga, formular dreapta.
       ============================================================ */

    #contact {
      background: var(--cream);
      padding: 120px 60px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: start;
    }

    /* ── Informații contact ── */
    .contact-info .section-title { margin-bottom: 26px; }

    .contact-info > p {
      font-size: .85rem;
      font-weight: 300;
      line-height: 1.88;
      color: var(--stone);
      margin-bottom: 48px;
    }

    .contact-detail { display: flex; flex-direction: column; gap: 20px; }

    .contact-detail-item { display: flex; flex-direction: column; gap: 4px; }

    .contact-detail-item span:first-child {
      font-size: .6rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--warm);
    }

    .contact-detail-item span:last-child {
      font-family: var(--ff-display);
      font-size: 1.08rem;
      color: var(--dark);
    }

    /* ── Formular de contact ── */
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .form-group { display: flex; flex-direction: column; gap: 8px; }

    .form-group label {
      font-size: .6rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--stone);
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--sand); /* stil minimal: doar linie jos */
      padding: 13px 0;
      font-family: var(--ff-body);
      font-size: .87rem;
      font-weight: 300;
      color: var(--dark);
      outline: none;
      transition: border-color .3s;
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder { color: var(--warm); }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus { border-color: var(--earth); }

    .form-group textarea { resize: none; height: 118px; }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    /* ── Butonul Submit ── */
    .btn-submit {
      align-self: flex-start;
      margin-top: 10px;
      padding: 17px 50px;
      background: var(--dark);
      color: var(--white);
      font-family: var(--ff-body);
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .26em;
      text-transform: uppercase;
      border: none;
      cursor: none;
      position: relative;
      overflow: hidden;
      transition: color .4s;
    }

    /* Fill accent care alunecă la hover */
    .btn-submit::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: translateX(-101%);
      transition: transform .5s var(--ease-out);
    }

    .btn-submit:hover::before { transform: translateX(0); }
    .btn-submit span { position: relative; z-index: 1; }


    /* ============================================================
       16. FOOTER
       3 coloane: logo, linkuri, social + copyright.
       ============================================================ */

    footer {
      background: var(--dark);
      padding: 58px 60px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
      align-items: end;
    }

    .footer-logo {
      font-family: var(--ff-display);
      font-size: 1.9rem;
      font-weight: 300;
      letter-spacing: .1em;
      color: var(--cream);
    }

    .footer-logo span {
      display: block;
      font-family: var(--ff-body);
      font-size: .6rem;
      letter-spacing: .32em;
      text-transform: uppercase;
      color: var(--stone);
      margin-top: 6px;
    }

    .footer-nav { display: flex; flex-direction: column; gap: 14px; }

    .footer-nav a {
      font-size: .7rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--stone);
      transition: color .3s;
    }

    .footer-nav a:hover { color: var(--warm); }

    .footer-right {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-end;
    }

    /* ── Iconițe social media (text, nu SVG) ── */
    .social-links { display: flex; gap: 16px; }

    .social-link {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--stone);
      font-size: .72rem;
      font-family: var(--ff-body);
      transition: border-color .3s, color .3s;
    }

    .social-link:hover { border-color: var(--warm); color: var(--warm); }

    .footer-copy {
      font-size: .6rem;
      color: rgba(158, 136, 114, .45);
      letter-spacing: .1em;
    }

    /* ============================================================
       17. LANGUAGE SWITCHER
    ============================================================ */

    .lang-switcher {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-left: 36px;
    }

    .lang-btn {
      background: none;
      border: none;
      border-bottom: 1px solid transparent;
      font-family: var(--ff-body);
      font-size: .60rem;
      font-weight: 500;
      letter-spacing: .20em;
      text-transform: uppercase;
      color: rgba(253, 250, 245, .50);
      cursor: none;
      padding: 3px 1px 2px;
      transition: color .3s, border-color .3s;
      line-height: 1;
    }

    .lang-btn:hover { color: rgba(253, 250, 245, .88); }

    .lang-btn.active {
      color: var(--white);
      border-bottom-color: var(--warm);
    }

    #mainNav.scrolled .lang-btn { color: rgba(253, 250, 245, .85); }
    #mainNav.scrolled .lang-btn:hover { color: var(--white); }
    #mainNav.scrolled .lang-btn.active {
      color: var(--white);
      border-bottom-color: var(--white);
    }

    .lang-sep {
      font-size: .52rem;
      color: rgba(253, 250, 245, .18);
      user-select: none;
      line-height: 1;
    }

    #mainNav.scrolled .lang-sep { color: rgba(253, 250, 245, .4); }


    /* ============================================================
       18. COLOR PALETTE SECTION
       Gamele de culori Chukum — cercuri texturate cu etichete.
       3 subsecțiuni: Pre-Pigmented / Pigments to Mix / Natural Base.
       ============================================================ */

    #colors {
      background-color: rgb(205, 188, 168); /* baza Chukum natural */
      padding: 120px 60px;
      position: relative;
      isolation: isolate;  /* context de stivuire propriu → z-index: -1 pe texture rămâne intern */
      overflow: hidden;
    }

    /* Conținutul stă deasupra tuturor straturilor de textură */
    .colors-content {
      position: relative;
      z-index: 1;
    }

    /* Toate straturile de textură nu interceptează click-urile
       și stau întotdeauna sub conținut (z-index: -1 în contextul
       de stivuire izolat al secțiunii — creat prin isolation: isolate). */
    .ct__blobs, .ct__mid, .ct__fine,
    .ct__grain, .ct__breathe, .ct__vignette {
      pointer-events: none;
      z-index: -1;
    }

    /* ── Secțiunile care primesc textura Chukum ────────────────
       isolation: isolate creează un context de stivuire local
       → z-index: -1 pe straturile de textură nu "scapă" în afara
         secțiunii și nu afectează alte elemente ale paginii.
       overflow: hidden conține ct__breathe (inset: -8%).
       #process nu primește overflow: hidden fiindcă are
       position: sticky intern (ar rupe comportamentul sticky).
    ─────────────────────────────────────────────────────────── */
    #about, #projects, #partners, #contact {
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    .marquee-section {
      /* overflow: hidden deja existent */
      position: relative;
      isolation: isolate;
    }

    #process {
      position: relative;
      isolation: isolate;
      /* fără overflow: hidden — ar rupe position: sticky pe .process-image */
    }

    /* ── STRAT 1: PETE ORGANICE MARI (500–920 px) ──────────────
       Variația tonală de ansamblu — zone mai calde vs. mai reci.
    ─────────────────────────────────────────────────────────── */
    .ct__blobs {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(ellipse 920px 640px at  8%  14%, rgba(158,138,115, 0.40) 0%, transparent 72%),
        radial-gradient(ellipse 780px 560px at 91%  78%, rgba(162,142,118, 0.35) 0%, transparent 68%),
        radial-gradient(ellipse 580px 440px at 68%  24%, rgba(165,145,122, 0.28) 0%, transparent 62%),
        radial-gradient(ellipse 460px 600px at 20%  80%, rgba(155,135,112, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 740px 500px at 54%   7%, rgba(230,217,200, 0.38) 0%, transparent 65%),
        radial-gradient(ellipse 640px 420px at 32%  50%, rgba(224,210,192, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 500px 380px at 80%  52%, rgba(232,220,204, 0.28) 0%, transparent 58%),
        radial-gradient(ellipse 360px 500px at 94%  32%, rgba(226,213,196, 0.22) 0%, transparent 55%);
    }

    /* ── STRAT 2: PETE MEDII (200–400 px) ──────────────────────
       Detalii la scară intermediară — urmele aplicării manuale.
    ─────────────────────────────────────────────────────────── */
    .ct__mid {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(ellipse 390px 290px at 42%  37%, rgba(172,152,130, 0.22) 0%, transparent 58%),
        radial-gradient(ellipse 330px 420px at 75%  62%, rgba(168,148,125, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 270px 210px at 22%  28%, rgba(222,207,188, 0.24) 0%, transparent 52%),
        radial-gradient(ellipse 310px 250px at 60%  87%, rgba(175,155,132, 0.20) 0%, transparent 54%),
        radial-gradient(ellipse 230px 340px at 87%  17%, rgba(217,202,182, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse 210px 170px at 12%  58%, rgba(162,142,120, 0.18) 0%, transparent 52%),
        radial-gradient(ellipse 290px 195px at 50%  50%, rgba(178,158,136, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 250px 310px at  3%  40%, rgba(220,206,188, 0.18) 0%, transparent 52%),
        radial-gradient(ellipse 200px 260px at 48%  90%, rgba(160,140,118, 0.16) 0%, transparent 50%);
    }

    /* ── STRAT 3: MICRO-DETALII (60–142 px) ────────────────────
       Pete mici distribuite neuniform — caracter și imperfecțiune.
    ─────────────────────────────────────────────────────────── */
    .ct__fine {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(ellipse 142px 104px at 27%  21%, rgba(158,138,115, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 114px 158px at 72%  17%, rgba(226,212,194, 0.20) 0%, transparent 52%),
        radial-gradient(ellipse  94px 128px at 48%  71%, rgba(165,145,122, 0.16) 0%, transparent 50%),
        radial-gradient(ellipse 126px  84px at 84%  44%, rgba(222,207,190, 0.18) 0%, transparent 48%),
        radial-gradient(ellipse  82px 116px at 15%  47%, rgba(172,152,130, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 104px  72px at 62%  29%, rgba(230,216,198, 0.16) 0%, transparent 48%),
        radial-gradient(ellipse  72px  96px at 38%  84%, rgba(160,140,118, 0.14) 0%, transparent 52%),
        radial-gradient(ellipse  88px  66px at 90%  67%, rgba(217,202,182, 0.16) 0%, transparent 48%),
        radial-gradient(ellipse  62px  84px at  5%  80%, rgba(168,148,126, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse  78px  56px at 55%   4%, rgba(224,210,192, 0.14) 0%, transparent 46%),
        radial-gradient(ellipse  96px  72px at 33%  58%, rgba(155,135,113, 0.13) 0%, transparent 50%),
        radial-gradient(ellipse  66px  88px at 78%  90%, rgba(220,205,186, 0.14) 0%, transparent 48%);
    }

    /* ── STRAT 4: GRAIN MINERAL ─────────────────────────────────
       SVG feTurbulence (fractalNoise) — granulația suprafeței.
       Tile 600×600 px reduce vizibilitatea repetării.
       mix-blend-mode: overlay — integrare cromatică fără suprascrierea culorilor.
    ─────────────────────────────────────────────────────────── */
    .ct__grain {
      position: absolute;
      inset: 0;
      opacity: 0.16;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 600px 600px;
    }

    /* ── STRAT 5: RESPIRAŢIA SUPRAFEȚEI (animat 90 s) ───────────
       Gradiente mari care se mișcă imperceptibil de lent.
       inset: -8% elimină artefactele de muchie la transform.
    ─────────────────────────────────────────────────────────── */
    .ct__breathe {
      position: absolute;
      inset: -8%;
      background-image:
        radial-gradient(ellipse 1100px 820px at 32%  42%, rgba(185,165,142, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse  920px 660px at 68%  63%, rgba(224,210,192, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse  760px 560px at 54%  19%, rgba(168,148,126, 0.16) 0%, transparent 62%);
      animation: ctBreathe 90s ease-in-out infinite alternate;
      will-change: transform, opacity;
    }

    @keyframes ctBreathe {
      0%   { transform: translate(  0%,    0%) scale(1.000); opacity: 0.70; }
      20%  { transform: translate(-1.2%,  0.7%) scale(1.014); opacity: 0.82; }
      40%  { transform: translate( 0.7%, -1.1%) scale(0.993); opacity: 0.76; }
      60%  { transform: translate(-0.4%,  1.3%) scale(1.007); opacity: 0.88; }
      80%  { transform: translate( 1.1%, -0.4%) scale(1.018); opacity: 0.73; }
      100% { transform: translate(-0.8%,  0.9%) scale(0.996); opacity: 0.80; }
    }

    /* ── STRAT 6: VIGNETĂ ───────────────────────────────────────
       Umbră radială la margini — adâncime și focus spre centru.
    ─────────────────────────────────────────────────────────── */
    .ct__vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse 88% 88% at 50% 50%,
        transparent 50%,
        rgba(148, 128, 106, 0.18) 76%,
        rgba(128, 108,  86, 0.30) 100%
      );
    }

    .colors-header {
      text-align: center;
      margin-bottom: 72px;
    }

    .colors-header .section-label { text-align: center; display: block; }
    .colors-header .section-title { margin-top: 12px; }

    .colors-header p {
      font-size: .85rem;
      font-weight: 300;
      line-height: 1.82;
      color: var(--earth);
      max-width: 520px;
      margin: 20px auto 0;
    }

    /* Pe fundalul Chukum, label-ul și titlul capătă culori mai calde */
    #colors .section-label { color: var(--earth); }
    #colors .section-title { color: var(--dark); }
    #colors .section-title em { color: var(--earth); }

    /* ── Subsecțiune (Pre-Pigmented / Pigments / Natural Base) ── */
    .color-group {
      margin-bottom: 72px;
    }

    .color-group:last-child { margin-bottom: 0; }

    .color-group-title {
      font-family: var(--ff-display);
      font-size: 1.1rem;
      font-weight: 400;
      color: var(--accent);
      letter-spacing: .08em;
      text-align: center;
      margin-bottom: 48px;
      position: relative;
      display: flex;
      align-items: center;
      gap: 20px;
      justify-content: center;
    }

    /* Linie decorativă de o parte și alta a titlului grupului */
    .color-group-title::before,
    .color-group-title::after {
      content: '';
      flex: 1;
      max-width: 160px;
      height: 1px;
      background: rgba(107, 87, 68, 0.30);
    }

    /* ── Grila de mostre de culoare ── */
    .color-swatches {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px 52px;
    }

    /* ── Item individual: cerc + etichetă ── */
    .color-swatch {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      width: 118px;
    }

    /* Cercul de culoare cu textură subtilă */
    .swatch-circle {
      width: 108px;
      height: 108px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 4px 18px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -2px 6px rgba(0,0,0,.12);
      transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
      cursor: none;
    }

    .color-swatch:hover .swatch-circle {
      transform: translateY(-5px) scale(1.04);
      box-shadow:
        0 12px 34px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -2px 6px rgba(0,0,0,.12);
    }

    /* Grain overlay — simulează textura materialului Chukum */
    .swatch-circle::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      pointer-events: none;
    }

    .swatch-label {
      font-family: var(--ff-body);
      font-size: .68rem;
      font-weight: 400;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--earth);
      text-align: center;
      line-height: 1.4;
      transition: color .3s;
    }

    .color-swatch:hover .swatch-label { color: var(--dark); }

    /* ── Culorile individuale ── */

    /* Pre-Pigmented */
    .swatch--greenish-blue  { background: radial-gradient(circle at 38% 35%, #6099aa 0%, #3d7a8e 45%, #2e6070 100%); }
    .swatch--olive-green    { background: radial-gradient(circle at 40% 38%, #8f9e72 0%, #737d5a 45%, #5c6345 100%); }
    .swatch--mint-green     { background: radial-gradient(circle at 38% 35%, #a8c4bc 0%, #8aada5 45%, #739690 100%); }
    .swatch--tulum-blue     { background: radial-gradient(circle at 40% 36%, #9ed4e8 0%, #7cbdd4 45%, #60a8c4 100%); }
    .swatch--military-green { background: radial-gradient(circle at 38% 36%, #6b7050 0%, #535840 45%, #3e4230 100%); }
    .swatch--bluish-black   { background: radial-gradient(circle at 40% 36%, #3a4060 0%, #262c46 45%, #181e32 100%); }
    .swatch--coral-pink     { background: radial-gradient(circle at 38% 35%, #e8a090 0%, #d4806c 45%, #be6254 100%); }

    /* Pigments to Mix */
    .swatch--black          { background: radial-gradient(circle at 38% 36%, #5a5a5a 0%, #3a3a3a 45%, #222222 100%); }
    .swatch--red-cankab     { background: radial-gradient(circle at 40% 36%, #d49060 0%, #be7040 45%, #a25830 100%); }
    .swatch--brown-cankab   { background: radial-gradient(circle at 38% 35%, #c8b080 0%, #b09060 45%, #907048 100%); }

    /* Natural Base Chukum */
    .swatch--natural-cream  { background: radial-gradient(circle at 40% 36%, #f2ece0 0%, #ddd4c0 45%, #c8bda8 100%); }
    .swatch--natural-grey   { background: radial-gradient(circle at 38% 36%, #8a8e8c 0%, #6e7270 45%, #565a58 100%); }
    .swatch--natural-white  { background: radial-gradient(circle at 40% 34%, #f8f6f2 0%, #e8e4de 45%, #d4d0ca 100%); }
    .swatch--natural-stone  { background: radial-gradient(circle at 38% 36%, #a8a49c 0%, #8c8880 45%, #706c64 100%); }

    /* Separator vizual între grupuri */
    .colors-divider {
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, transparent, rgba(107, 87, 68, 0.30), transparent);
      margin: 0 auto 72px;
    }


    /* ============================================================
       WALL PREVIEW
       ============================================================ */

    .wall-preview-section {
      margin-top: 96px;
      text-align: center;
    }

    .wall-preview-header { margin-bottom: 40px; }
    .wall-preview-header .section-title { margin-top: 12px; margin-bottom: 14px; }

    .wall-preview-hint {
      font-size: .76rem;
      font-weight: 300;
      color: var(--stone);
      letter-spacing: .08em;
    }

    .wall-preview-card {
      max-width: 980px;
      margin: 0 auto;
      border: 1px solid var(--sand);
      background: var(--cream);
      padding: 36px 36px 26px;
      position: relative;
      transition: border-color .4s, box-shadow .4s;
    }

    .wall-preview-card:hover {
      border-color: var(--warm);
      box-shadow: 0 8px 48px rgba(107,87,68,.08);
    }

    .wall-preview-svg { width: 100%; height: auto; display: block; }

    .wall-preview-name {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid var(--sand);
      font-family: var(--ff-display);
      font-size: 1.05rem;
      font-weight: 300;
      color: var(--dark);
      letter-spacing: .06em;
    }

    .wall-preview-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #ddd4c0;
      flex-shrink: 0;
      box-shadow: 0 1px 8px rgba(0,0,0,.14);
      transition: background .45s var(--ease-out);
    }

    /* Active swatch ring when color is selected in preview */
    .color-swatch.preview-active .swatch-circle {
      box-shadow:
        0 0 0 3px var(--white),
        0 0 0 5px var(--accent),
        0 12px 34px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -2px 6px rgba(0,0,0,.12) !important;
      transform: translateY(-5px) scale(1.06);
    }

    /* Responsive adjustments for preview */
    @media (max-width: 768px) {
      .wall-preview-section { margin-top: 60px; }
      .wall-preview-card { padding: 18px 14px 16px; }
      .wall-preview-name { font-size: .9rem; gap: 10px; }
    }


    /* ============================================================
       RESPONSIVE — Mobile & Tablet
       ============================================================ */

    /* ── Touch devices: ascunde cursorul custom ── */
    @media (pointer: coarse) {
      #cursor { display: none; }
      body { cursor: auto; }
      a, button, .category-tab, .swatch-circle,
      .gallery-nav, .partners-nav, .lang-btn { cursor: pointer; }
    }

    /* ── Hamburger button (ascuns pe desktop) ── */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      z-index: 101;
      background: none;
      border: none;
      padding: 6px;
      cursor: pointer;
    }

    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--white);
      transition: transform .35s var(--ease-out), opacity .25s, background .5s;
    }

    #mainNav.scrolled .nav-hamburger span { background: var(--white); }

    .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* Wrapper meniu mobil */
    #navMenu {
      display: flex;
      align-items: center;
    }


    /* ── TABLET (≤ 1024px) ── */
    @media (max-width: 1024px) {

      #mainNav { padding: 22px 32px; }
      #mainNav.scrolled { padding: 14px 32px; }
      .nav-links { gap: 28px; }
      .lang-switcher { margin-left: 20px; }

      section { padding: 80px 32px; }

      /* About */
      #about {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 80px 32px;
      }
      .about-image-wrap { height: 440px; }
      .about-text { max-width: 100%; }

      /* Benefits */
      .benefits-grid { grid-template-columns: repeat(2, 1fr); }

      /* Projects */
      .projects-header { grid-template-columns: 1fr; gap: 24px; }
      .projects-grid { grid-template-columns: 1fr 1fr; }
      .project-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
      .project-card:nth-child(2) { grid-column: 1; grid-row: 2; }
      .project-card:nth-child(3) { grid-column: 2; grid-row: 2; }
      .project-card:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }

      /* Process */
      .process-inner { grid-template-columns: 1fr; gap: 40px; }
      .process-image { position: relative; top: auto; height: 360px; }
      .process-steps { margin-top: 0; }

      /* Partners */
      .partner-card { flex: 0 0 calc(50% - 12px); }

      /* Contact */
      #contact { grid-template-columns: 1fr; gap: 60px; padding: 80px 32px; }

      /* Footer */
      footer { grid-template-columns: 1fr 1fr; padding: 48px 32px; }
      .footer-right { align-items: flex-start; }
    }


    /* ── MOBILE (≤ 768px) ── */
    @media (max-width: 768px) {

      /* Nav hamburger */
      #mainNav { padding: 18px 20px; }
      #mainNav.scrolled { padding: 12px 20px; }

      .nav-hamburger { display: flex; }

      #navMenu {
        position: fixed;
        inset: 0;
        background: var(--white);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        z-index: 100;
        transform: translateX(100%);
        transition: transform .45s var(--ease-out);
      }

      #navMenu.open { transform: translateX(0); }

      .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 28px;
      }

      .nav-links a {
        font-size: .88rem;
        color: var(--dark);
        letter-spacing: .18em;
      }

      #navMenu .lang-switcher {
        margin-left: 0;
      }

      .lang-btn { color: var(--stone); }
      .lang-btn.active { color: var(--dark); }
      .lang-sep { color: var(--sand); }

      /* Hero */
      .hero-content { padding: 0 20px 64px; max-width: 100%; }
      .hero-scroll { right: 20px; bottom: 24px; }
      .hero-cta { padding: 15px 28px; }

      /* Sections */
      section { padding: 64px 20px; }
      #about, #benefits, #projects, #process,
      #partners, #contact, #colors { padding: 64px 20px; }

      /* About */
      #about { grid-template-columns: 1fr; gap: 32px; }
      .about-image-wrap { height: 300px; }
      .about-image-border { display: none; }
      .about-image-tag { left: 0; font-size: .82rem; padding: 10px 16px; }
      .about-stat-row { gap: 24px; padding-top: 28px; margin-top: 36px; }

      /* Benefits */
      .benefits-header { flex-direction: column; align-items: flex-start; gap: 18px; }
      .benefits-tagline { max-width: 100%; text-align: left; }
      .benefits-grid { grid-template-columns: repeat(2, 1fr); }
      .benefit-card { padding: 36px 24px; }

      /* Projects */
      .projects-header { grid-template-columns: 1fr; }
      .projects-grid { grid-template-columns: 1fr; }
      .project-card:nth-child(1),
      .project-card:nth-child(2),
      .project-card:nth-child(3),
      .project-card:nth-child(4) { grid-column: 1; grid-row: auto; }
      .project-card:nth-child(1) .project-img { min-height: 300px; }
      .projects-categories { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .category-tab { padding: 14px 18px; white-space: nowrap; }
      .gallery-card { flex: 0 0 100%; }

      /* Process */
      .process-inner { grid-template-columns: 1fr; gap: 28px; }
      .process-image { position: relative; top: auto; height: 260px; order: -1; }
      .process-steps { margin-top: 0; }
      .process-step { padding: 28px 0; }

      /* Quote */
      .quote-section { padding: 72px 20px; }

      /* Partners slider — 1 card vizibil */
      #partners { padding: 64px 20px; }
      .partner-card { flex: 0 0 100%; }
      .partners-wrapper { gap: 10px; }
      .partner-name { font-size: 1.2rem; }

      /* Contact */
      #contact { grid-template-columns: 1fr; gap: 44px; }
      .form-row { grid-template-columns: 1fr; }
      .btn-submit { width: 100%; text-align: center; align-self: stretch; }

      /* Footer */
      footer { grid-template-columns: 1fr; gap: 32px; padding: 44px 20px; align-items: flex-start; }
      .footer-right { align-items: flex-start; }

      /* Colors */
      .color-swatches { gap: 28px 32px; }
      .color-swatch { width: 90px; }
      .swatch-circle { width: 80px; height: 80px; }
    }


    /* ── MOBILE SMALL (≤ 480px) ── */
    @media (max-width: 480px) {
      .benefits-grid { grid-template-columns: 1fr; }
      .about-stat-row { flex-wrap: wrap; gap: 20px; }
      .color-swatches { gap: 20px 22px; }
      .color-swatch { width: 76px; }
      .swatch-circle { width: 68px; height: 68px; }
      .partner-card { padding: 24px 20px 28px; }
    }