:root{--rose:#e11d48;--ink:#0f172a;--muted:#475569;--bg:#fff;--border:#ffe4e6}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:var(--ink);background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:'Playfair Display',serif;font-size:26px}
.menu a{margin-right:14px;text-decoration:none;color:var(--ink)}
.btn{background:var(--rose);color:#fff;padding:12px 18px;border-radius:14px;text-decoration:none;font-weight:600}
.btn-outline{border:1px solid var(--border);padding:12px 18px;border-radius:14px;text-decoration:none;color:var(--ink)}
.hero{min-height:70vh;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#fff0f3)}
.hero-inner{text-align:center}
.hero h1{font-family:'Playfair Display',serif;font-size:46px;line-height:1.1;margin:0}
.lead{color:var(--muted);font-size:18px;margin:14px 0 22px}
.section{padding:56px 0}
.bg{background:#fff7f9}
h2{font-family:'Playfair Display',serif;font-size:32px;margin:0 0 16px}
.grid3{display:grid;gap:16px}
@media(min-width:800px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px}
.price{color:var(--rose);font-weight:700}
.price.big{font-size:24px;margin-top:6px}
.photos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;border:1px solid var(--border)}
.section-head{display:flex;justify-content:space-between;align-items:center}
.about{display:grid;gap:20px}
@media(min-width:900px){.about{grid-template-columns:1.2fr 1fr}}
.about img{width:100%;border-radius:22px;border:1px solid var(--border)}
.bullets{padding-left:18px}
.form{display:grid;gap:12px;max-width:700px}
.form input,.form textarea{padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px}
.footer{border-top:1px solid var(--border);padding:24px;color:var(--muted)}
.footer .container{display:flex;justify-content:space-between;align-items:center}
.muted{color:var(--muted);margin-top:12px}
.link{color:var(--rose);text-decoration:none}

/* ===== Responsive tweaks ===== */
.menu{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.menu a{padding:8px 4px}

.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}
.btn,.btn-outline{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1.2}

@media (max-width:1024px){
  .hero h1{font-size:40px}
}

@media (max-width:768px){
  .container{padding:16px}
  .hero{min-height:60vh}
  .hero h1{font-size:36px}
  .lead{font-size:16px}
  .btn,.btn-outline{padding:12px 16px}
}

@media (max-width:560px){
  .brand{font-size:22px}
  .hero h1{font-size:32px}
  .cta{flex-direction:column;align-items:stretch}
  .btn,.btn-outline{width:100%;max-width:420px}
  .section{padding:40px 0}
  .grid3{grid-template-columns:1fr}
}

@media (min-width:560px) and (max-width:900px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .about{grid-template-columns:1fr}
}

/* === Hamburger menu (mobil) === */
.hamburger{display:none;border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0}

@media (max-width:768px){
  .nav{flex-wrap:wrap}
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .menu{display:none;width:100%}
  .menu.open{display:flex;flex-direction:column;gap:10px;padding-top:10px}
  .menu .btn{width:100%}
}
/* === Hamburger: 3 linii vizibile === */
.hamburger{display:none;border:1px solid var(--border);border-radius:12px;padding:10px;background:#fff}
.hamburger .bar{display:block;width:22px;height:2px;background:var(--ink)}
@media (max-width:768px){
  .hamburger{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}
}
/* === Hamburger animate to X === */
.hamburger .bar{transition:transform .22s ease, opacity .18s ease}
.hamburger.active .bar:nth-child(1){transform: translateY(6px) rotate(45deg)}
.hamburger.active .bar:nth-child(2){opacity:0}
.hamburger.active .bar:nth-child(3){transform: translateY(-6px) rotate(-45deg)}
/* === Mobile nav: slide down card === */
@media (max-width:768px){
  .nav{flex-wrap:wrap}
  .hamburger{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;margin-left:auto}

  /* starea implicită: ascuns, pregătit de animat */
  .menu{
    display:block;            /* ca să putem anima înăuntru */
    width:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    margin-top:10px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    transform-origin:top center;
    max-height:0;             /* animăm max-height */
    opacity:0;
    transform:translateY(-8px);
    transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
    overflow:hidden;
    pointer-events:none;
    padding:0;
  }

  /* deschis: curge în jos + devine coloană */
  .menu.open{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px;
    max-height:340px;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .menu a{padding:10px 8px}
  .menu .btn{width:100%}
}

/* hamburger animat (din pasul anterior) */
.hamburger .bar{transition:transform .22s ease, opacity .18s ease}
.hamburger.active .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.active .bar:nth-child(2){opacity:0}
.hamburger.active .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* --- Mobile nav: no-flash, slide-down --- */
@media (max-width:768px){
  .nav{position:relative; z-index:100}
  .hamburger{touch-action:manipulation}

  /* Meniul e mereu flex; îl ascundem doar prin max-height/opacity/visibility */
  .menu{
    position:absolute; left:0; right:0; top:100%; margin-top:8px;
    display:flex; flex-direction:column; gap:10px;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    overflow:hidden; padding:0 10px;

    max-height:0; opacity:0; transform:translateY(-8px);
    visibility:hidden; pointer-events:none;
    will-change:max-height,opacity,transform;
    transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
  }
  .menu.open{
    max-height:340px; opacity:1; transform:translateY(0);
    visibility:visible; pointer-events:auto;
  }
  .menu .btn{width:100%}
  /* Blochează scrollul paginii cât e deschis meniul */
  body.nav-open{overflow:hidden}
}
/* --- Mobile nav: stable slide-down (override) --- */
@media (max-width:768px){
  header.container.nav{position:relative; z-index:100}
  /* buton în dreapta */
  .hamburger{margin-left:auto}

  /* Meniul e ÎNTOTDEAUNA flex; doar îl ascundem prin max-height/opacity */
  header.container.nav .menu{
    position:absolute; left:16px; right:16px; top:100%; margin-top:8px;
    display:flex !important; flex-direction:column; gap:10px;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    overflow:hidden; padding:0 10px;

    max-height:0; opacity:0; transform:translateY(-8px);
    visibility:hidden; pointer-events:none;
    will-change:max-height,opacity,transform;
    transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
  }
  header.container.nav .menu.open{
    max-height:420px; opacity:1; transform:translateY(0);
    visibility:visible; pointer-events:auto;
  }
  header.container.nav .menu .btn{width:100%}
  body.nav-open{overflow:hidden}
}
/* --- Mobile nav: păstrăm cardul, eliminăm complet tranzițiile --- */
@media (max-width:768px){
  header.container.nav{position:relative; z-index:100}

  /* Stare implicită: ascuns (fără animații) */
  header.container.nav .menu{
    position:absolute; left:16px; right:16px; top:100%; margin-top:8px;
    display:flex !important; flex-direction:column; gap:10px;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    overflow:hidden; padding:10px;

    /* ascundere fără efecte */
    max-height:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    /* anulăm complet efectele anterioare */
    transform:none !important;
    transition:none !important;
  }

  /* Deschis: apare instant, fără tranziție */
  header.container.nav .menu.open{
    max-height:100vh;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none !important;
    transition:none !important;
  }

  body.nav-open{overflow:hidden}
}
/* --- Mobile nav: card sub header, fără overlap --- */
@media (max-width:768px){
  header.container.nav{position:relative}
  .hamburger{margin-left:auto}

  /* ascuns implicit */
  header.container.nav .menu{
    position:static !important;   /* în flux, nu peste conținut */
    display:none !important;      /* ascuns by default */
    width:100%;
    margin-top:10px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    padding:10px;
    overflow:hidden;
    transition:none !important;
  }
  /* deschis: apare sub header și împinge pagina în jos */
  header.container.nav .menu.open{
    display:flex !important;
    flex-direction:column;
    gap:10px;
  }
  header.container.nav .menu .btn{width:100%}
}
/* — Servicii: două coloane egale, responsive — */
#servicii .grid3{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 768px){
  #servicii .grid3{
    grid-template-columns: 1fr; /* pe mobil, o singură coloană */
  }
}
/* cardurile se întind pe înălțime egală în rând */
#servicii .grid3 .card{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
/* — Mobile gutters & spacing — */
@media (max-width:768px){
  .container{padding-left:22px; padding-right:22px}
  .section{padding:44px 0}
  /* asigură-te că grilele nu ating marginile */
  .grid3{gap:18px}
}
/* ==== Mobile gutters & layout fixes ==== */
@media (max-width: 768px){
  :root{ --gutter: 22px; }

  /* padding lateral consecvent pentru toate secțiunile cu .container */
  section.container{ padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }

  /* spațiu între carduri + coloană unică acolo unde e cazul */
  .grid3{ gap: 18px; }

  /* Despre: o singură coloană pe mobil, cu spațiu între imagine și text */
  #despre .about{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #despre .about img{
    width: 100%;
    border-radius: 16px;
  }

  /* Servicii/Testimoniale: cardurile nu ating marginile, au colțuri rotunjite */
  #servicii .card, #testimoniale .card{
    border-radius: 16px;
    padding: 16px;
  }
}
/* Margini laterale pe mobile pentru Servicii, Testimoniale, Despre */
@media (max-width: 768px){
  #servicii,
  #testimoniale,
  #despre{
    margin-inline: 20px !important;   /* echiv. margin-left/right */
  }
}
/* Margini laterale pe mobile pentru Servicii, Testimoniale, Despre */
@media (max-width: 768px){
  #servicii,
  #testimoniale,
  #despre{
    margin: 20px !important;   /* echiv. margin-left/right */
  }
}
/* === Portfolio: grid pe desktop, slider pe mobil === */
#portfolio-grid{display:block}
#portfolio-carousel{display:none}

@media (max-width:900px){
  #portfolio-grid{display:none}
  #portfolio-carousel{display:block}
}

/* Slider cu scroll-snap (mobil) */
.carousel{position:relative}
.carousel-track{
  display:flex; gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:8px;
}
.carousel-track::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 85%;
  scroll-snap-align:start;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.slide img{
  width:100%;
  aspect-ratio:4/5;      /* schimbă la 3/4 ori 1/1 dacă vrei */
  object-fit:cover;
  object-position:center top;
}

/* Butoane (se ascund pe ecrane foarte mici) */
.carousel .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  border:1px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.carousel .nav.prev{left:-6px}
.carousel .nav.next{right:-6px}
@media (max-width:480px){ .carousel .nav{display:none} }

/* (opțional) dacă vrei sens RTL: decomentează linia de mai jos */
/* .carousel-track{ direction: rtl; } */
/* === Portfolio: slider pe toate device-urile === */
#portfolio-grid{display:none !important;}
#portfolio-carousel{display:block !important;}

/* Dimensiunea slide-ului în funcție de ecran */
.carousel-track{gap:12px}
.slide{flex:0 0 85%;}                     /* mobil: 1 card aproape pe toată lățimea */
@media (min-width: 600px){ .slide{flex-basis: 60%;} }   /* telefoane mari / mici tablete: ~2 carduri */
@media (min-width: 900px){ .slide{flex-basis: 45%;} }   /* tablete: 2 carduri */
@media (min-width: 1200px){ .slide{flex-basis: 30%;} }  /* desktop: ~3 carduri */

/* restul stilurilor rămân (aspect-ratio, object-fit etc.) */
/* — Arată butoanele slider-ului pe toate dimensiunile — */
#portfolio-carousel .nav{ z-index:5; }

@media (max-width:600px){
  #portfolio-carousel .nav{
    display:flex !important;   /* anulează regula veche cu display:none */
    width:36px; height:36px;   /* puțin mai mici pe mobil */
    top:50%; transform:translateY(-50%);
    border-radius:999px;
  }
  #portfolio-carousel .nav.prev{ left:8px;  right:auto; }
  #portfolio-carousel .nav.next{ right:8px; left:auto;  }
}
/* Centrare vizuală în decupaj + mici ajustări */
#portfolio-carousel .carousel-track{
  padding-left: 12px; padding-right: 12px; /* margini egale st/dr */
  scroll-padding-left: 12px;               /* snap plăcut la început */
}
#portfolio-carousel .slide img{
  object-position: center; /* nu mai "trage" spre top/stânga */
}
/* Săgeți peste imagini și clickabile peste tot */
#portfolio-carousel .nav{
  z-index: 10;
  pointer-events: auto;
}
/* === Portfolio slider: aliniere la CENTRU pentru toate ecranele === */
#portfolio-carousel .slide{
  scroll-snap-align: center;     /* slide-ul activ se “lipește” pe centru */
}

/* Mobil: slide 85% din lățime → restul 15% împărțit pe stânga/dreapta = 7.5% */
#portfolio-carousel .carousel-track{
  padding-left: 7.5% !important;
  padding-right: 7.5% !important;
  scroll-padding-left: 7.5%;
  scroll-padding-right: 7.5%;
  gap: 12px; /* păstrăm același gap */
}

/* >=600px: slide ≈60% → padding st/dr 20% */
@media (min-width:600px){
  #portfolio-carousel .slide{ flex-basis: 60%; }
  #portfolio-carousel .carousel-track{
    padding-left: 20% !important;
    padding-right: 20% !important;
    scroll-padding-left: 20%;
    scroll-padding-right: 20%;
  }
}

/* >=900px: slide ≈45% → padding 27.5% */
@media (min-width:900px){
  #portfolio-carousel .slide{ flex-basis: 45%; }
  #portfolio-carousel .carousel-track{
    padding-left: 27.5% !important;
    padding-right: 27.5% !important;
    scroll-padding-left: 27.5%;
    scroll-padding-right: 27.5%;
  }
}

/* >=1200px: slide ≈30% → padding 35% (≈ trei carduri pe ecran) */
@media (min-width:1200px){
  #portfolio-carousel .slide{ flex-basis: 30%; }
  #portfolio-carousel .carousel-track{
    padding-left: 35% !important;
    padding-right: 35% !important;
    scroll-padding-left: 35%;
    scroll-padding-right: 35%;
  }
}

/* Săgeți deasupra conținutului, poziționate constant */
#portfolio-carousel .nav{
  z-index: 10;
  pointer-events: auto;
}
#portfolio-carousel .nav.prev{ left: 8px;  right: auto; }
#portfolio-carousel .nav.next{ right: 8px; left:  auto; }

/* Imagine centrată în decupaj */
#portfolio-carousel .slide img{
  object-position: center;
}
/* Slider: oprește mereu în punct de snap */
#portfolio-carousel .slide{ scroll-snap-stop: always; }
/* === Portfolio: desktop mare, fără spații între imagini (3 carduri pe ecran) === */
@media (min-width: 900px){
  #portfolio-carousel .carousel-track{
    gap: 0 !important;                     /* fără spații între carduri */
    padding-left: 33.3333% !important;     /* centru perfect: (100 - 33.33)/2 */
    padding-right: 33.3333% !important;
    scroll-padding-left: 33.3333%;
    scroll-padding-right: 33.3333%;
  }
  #portfolio-carousel .slide{
    flex-basis: 33.3333% !important;       /* 3 imagini pe lățime */
    border: none;
    border-radius: 14px;
  }
  #portfolio-carousel .slide img{
    width: 100%;
    aspect-ratio: 4/5;                     /* schimbă la 3/4 sau 1/1 dacă vrei alt crop */
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* Poziționare sigură a săgeților peste imagini */
#portfolio-carousel .nav{
  z-index: 10;
  pointer-events: auto;
}
/* ===== Portfolio: desktop only (≥1024px) – 3 imagini mari, fără spații ===== */
@media (min-width: 1024px){
  /* fără spații între carduri, centrare pe mijloc */
  #portfolio-carousel .carousel-track{
    gap: 0 !important;
    padding-left: 33.3333% !important;    /* (100 - 33.33)/2 => centru perfect */
    padding-right: 33.3333% !important;
    scroll-padding-left: 33.3333%;
    scroll-padding-right: 33.3333%;
  }
  /* 3 pe rând, card-uri mai mari */
  #portfolio-carousel .slide{
    flex-basis: 33.3333% !important;
    border: none;
    border-radius: 14px;
  }
  #portfolio-carousel .slide img{
    width: 100%;
    aspect-ratio: 4/5;        /* schimbă la 3/4 sau 1/1 dacă vrei alt crop */
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
/* ===== Portfolio: bază (mobile/tabletă) – păstrăm gap-ul și cardul mare ===== */
#portfolio-carousel .carousel-track{
  gap: 12px;
  padding-left: 7.5%;
  padding-right: 7.5%;
  scroll-padding-left: 7.5%;
  scroll-padding-right: 7.5%;
}
#portfolio-carousel .slide{ flex: 0 0 85%; }          /* 1 card mare pe mobil */
@media (min-width: 600px){ #portfolio-carousel .slide{ flex-basis: 60%; } }  /* ~2 pe lățime */
@media (min-width: 900px){ #portfolio-carousel .slide{ flex-basis: 45%; } }  /* 2 pe lățime */