/* =====================================================
   ShotByCristian — style.css
   Culorile se schimbă din variabilele de mai jos.
   ===================================================== */

:root{
  /* ---------- PALETA (schimbi doar aici) ---------- */
  --ink:   #0a0a0a;   /* cărbune  — fundalul principal */
  --sage:  #b38421;   /* salvie   — accentul */
  --sand:  #CBB8A0;   /* nisip    — textul */
  --deep:  #1b1f20;   /* petrol   — fundalul secundar */

  /* ---------- roluri (folosite în tot site-ul) ---------- */
  --bg:      var(--ink);   /* fundal principal */
  --bg-2:    var(--deep);  /* fundal secundar (marquee, contact, meniu) */
  --cream:   var(--sand);  /* text deschis */
  --muted:   rgba(203,184,160,.55); /* text secundar (nisip translucid) */
  --accent:  var(--sage);  /* accent: italice, săgeți, hover */
  --line:    rgba(203,184,160,.18);
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Space Grotesk', system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 90px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--cream);
  font-family:var(--sans); font-weight:300;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--accent);color:var(--ink)}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--sage)}

/* ---------- elemente comune ---------- */
.tag{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
/* titlurile de secțiune (SERVICII, LUCRĂRI RECENTE...) — cu majuscule */
.sec-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,7vw,86px); line-height:.98; letter-spacing:.02em;
  text-transform:uppercase;
}
em{font-style:italic; color:var(--accent)}

.btn{
  display:inline-block; margin-top:34px; padding:15px 34px;
  border:1px solid var(--line); border-radius:100px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  position:relative; overflow:hidden; z-index:0;
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--cream);
  transform:translateY(101%); transition:transform .45s cubic-bezier(.7,0,.2,1); z-index:-1;
}
.btn:hover{color:var(--ink); border-color:var(--cream)}
.btn:hover::after{transform:translateY(0)}

/* animatie de aparitie la scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* =====================================================
   PRELOADER
   ===================================================== */
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad); transition:transform 1s cubic-bezier(.8,0,.2,1);
}
.loader.done{transform:translateY(-100%)}
.loader__inner{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px}
.loader__name{font-size:12px; letter-spacing:.4em}
.loader__num{font-family:var(--serif); font-size:clamp(60px,14vw,150px); line-height:.8}
.loader__bar{height:1px; background:var(--line)}
.loader__bar span{display:block; height:100%; width:0; background:var(--cream)}

/* =====================================================
   CURSOR
   ===================================================== */
.cursor{
  position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
  background:var(--cream); pointer-events:none; z-index:9000;
  transform:translate(-50%,-50%); transition:width .3s, height .3s, background .3s;
  display:grid; place-items:center; mix-blend-mode:difference;
}
.cursor span{font-size:10px; letter-spacing:.15em; color:var(--ink); opacity:0; transition:opacity .25s}
.cursor.big{width:78px; height:78px; background:var(--accent); mix-blend-mode:normal}
.cursor.big span{opacity:1}
@media (hover:none){.cursor{display:none}}

/* =====================================================
   GRAIN
   ===================================================== */
.grain{
  position:fixed; inset:-50%; z-index:8000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,4%)}
}

/* =====================================================
   NAV
   ===================================================== */
/* bara neagră din spatele meniului — ca scrisul colorat să iasă în evidență */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  background:var(--ink);
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}
/* logo-ul (în bară, în preloader și în footer) — înălțimea o schimbi aici */
.logo-img{width:auto; display:block; object-fit:contain}
.nav__logo{display:flex; align-items:center}
.nav__logo .logo-img{height:42px}
.loader__name .logo-img{height:44px}
.footer .logo-img{height:26px; display:inline-block; vertical-align:middle}
.nav__links{display:flex; gap:34px}
.nav__links a, .nav__cta{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; position:relative;
}
/* numărul de telefon, în culoarea de accent */
.nav__cta{
  color:var(--accent); padding:9px 18px; border-radius:100px;
  border:1px solid rgba(255,255,255,.16); transition:background .35s, color .35s;
}
.nav__cta:hover{background:var(--accent); color:var(--ink); border-color:var(--accent)}
.nav__links a:hover{color:var(--accent)}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--accent); transition:width .35s;
}
.nav__links a:hover::after{width:100%}

.burger{display:none; background:none; border:0; cursor:pointer; width:30px; padding:6px 0}
.burger i{display:block; height:1px; background:var(--cream); margin:6px 0; transition:.35s}
.burger.on i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.on i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.menu{
  position:fixed; inset:0; background:var(--bg-2); z-index:700;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:var(--pad); clip-path:inset(0 0 100% 0); transition:clip-path .7s cubic-bezier(.8,0,.2,1);
}
.menu.on{clip-path:inset(0 0 0 0)}
.menu a{font-family:var(--serif); font-size:clamp(34px,9vw,64px); line-height:1.15}
.menu__foot{margin-top:40px; display:flex; gap:22px; font-size:11px; letter-spacing:.2em; text-transform:uppercase}
.menu__foot a{font-family:var(--sans); font-size:11px}

/* =====================================================
   HERO
   ===================================================== */
.hero{position:relative; height:100svh; min-height:600px; overflow:hidden; display:flex; align-items:flex-end}
.hero__bg{position:absolute; inset:0}
/* pozele stau una peste alta; se schimbă doar transparența => tranziție lină.
   Zoom-ul lent merge tot timpul pe fiecare poză, deci nu apare niciun salt. */
.hero__bg img{
  position:absolute; inset:0; opacity:0;
  object-position:50% 35%;   /* implicit: se vede mai mult din partea de sus (capetele) */
  transition:opacity 2.2s cubic-bezier(.4,0,.2,1);
  animation:kb 26s ease-in-out infinite alternate;
  will-change:opacity, transform; backface-visibility:hidden;
}
.hero__bg img:nth-child(2){animation-delay:-9s}
.hero__bg img:nth-child(3){animation-delay:-18s}
.hero__bg img.on{opacity:1}
@keyframes kb{from{transform:scale(1)} to{transform:scale(1.06)}}

/* voal mai puternic jos, ca textul să se citească clar peste orice poză */
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.18) 32%, rgba(8,8,8,.72) 68%, rgba(8,8,8,.94) 100%),
    linear-gradient(90deg, rgba(8,8,8,.5) 0%, rgba(8,8,8,0) 62%);
}
.hero__content{position:relative; z-index:1; padding:0 var(--pad) clamp(60px,10vh,110px); width:100%}
/* umbră proprie în spatele textului, ca să se citească peste orice fotografie */
.hero__content::before{
  content:""; position:absolute; left:0; right:0; bottom:0; top:-40%;
  background:linear-gradient(180deg, rgba(6,6,6,0) 0%, rgba(6,6,6,.42) 38%, rgba(6,6,6,.72) 70%, rgba(6,6,6,.86) 100%);
  z-index:-1; pointer-events:none;
}
.hero__title{
  font-family:var(--serif); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(44px,9.5vw,150px); line-height:1;
  color:#fbf8f3;                       /* alb cald — se citește pe orice poză */
  text-shadow:0 1px 2px rgba(0,0,0,.5), 0 3px 12px rgba(0,0,0,.55), 0 16px 60px rgba(0,0,0,.6);
}
.hero__title em{
  color:#e0b545;   /* auriu mai luminos, doar aici, ca să se vadă peste poză */
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 3px 14px rgba(0,0,0,.6), 0 16px 50px rgba(0,0,0,.55);
}
/* padding-ul lasă loc cozii literelor (g, p) — altfel "imagini" apărea tăiat jos */
.hero__title .line{display:block; overflow:hidden; padding-bottom:.18em; margin-bottom:-.12em}
.hero__title .line > span{display:block; transform:translateY(105%); animation:up 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.hero__title .line:nth-child(1) > span{animation-delay:.15s}
.hero__title .line:nth-child(2) > span{animation-delay:.28s}
.hero__title .line:nth-child(3) > span{animation-delay:.41s}
@keyframes up{to{transform:translateY(0)}}
.hero__sub{
  margin-top:26px; color:#e6dfd3; font-size:clamp(14px,1.5vw,17px); line-height:1.7; max-width:520px;
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.5);
}
.hero .tag{color:#cfc7bb; text-shadow:0 1px 3px rgba(0,0,0,.7)}

.hero__scroll{
  position:absolute; left:var(--pad); bottom:26px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.hero__scroll span{width:40px; height:1px; background:var(--muted); position:relative; overflow:hidden}
.hero__scroll span::after{content:""; position:absolute; inset:0; background:var(--accent); animation:sc 2s infinite}
@keyframes sc{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.hero__count{
  position:absolute; right:var(--pad); bottom:26px; font-size:11px; letter-spacing:.2em; color:var(--muted);
}

/* =====================================================
   MARQUEE
   ===================================================== */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:16px 0; background:var(--bg-2);
}
/* banda infinită: 4 copii identice, iar animația mută exact 2 copii (-50%),
   deci textul se reia fix de unde a rămas — fără spațiu gol și fără salt */
.marquee__track{
  display:flex; width:max-content;
  animation:mar 44s linear infinite;
  will-change:transform; backface-visibility:hidden;
}
.marquee__track span{
  font-family:var(--serif); font-size:clamp(20px,3vw,34px); white-space:nowrap; color:var(--sage);
  padding-right:44px;   /* distanța dintre copii — face parte din lățimea copiei */
}
@keyframes mar{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}

/* =====================================================
   DESPRE
   ===================================================== */
.about{
  padding:clamp(80px,14vh,160px) var(--pad);
  display:grid; grid-template-columns:.85fr 1fr; gap:clamp(30px,6vw,90px); align-items:center;
}
.about__img{aspect-ratio:4/5; overflow:hidden; background:var(--bg-2)}
.about__img img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.about__img:hover img{transform:scale(1.06)}
.about__txt h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.4vw,58px);
  line-height:1.12; letter-spacing:.02em; margin-bottom:26px;
  text-transform:uppercase;
}
/* rândul al doilea rămâne auriu, dar cu aceleași litere ca rândul de deasupra
   (în varianta cursivă, Z-ul din FOTOGRAFIEZ avea altă formă) */
.about__txt h2 em{font-style:normal}
.about__txt p{color:var(--muted); line-height:1.85; margin-bottom:16px; max-width:56ch}
.stats{display:flex; gap:clamp(24px,5vw,60px); margin-top:44px; flex-wrap:wrap}
.stats b{display:block; font-family:var(--serif); font-size:clamp(32px,4vw,52px); font-weight:400; color:var(--cream)}
.stats span{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}

/* =====================================================
   SERVICII
   ===================================================== */
.services{padding:clamp(60px,10vh,120px) var(--pad); position:relative; border-top:1px solid var(--line)}
.services__list{margin-top:54px}
.srv{
  display:grid; grid-template-columns:70px 1fr 1.1fr 40px; align-items:center; gap:20px;
  padding:30px 0; border-top:1px solid var(--line); cursor:pointer; position:relative;
  transition:padding .4s ease, color .4s ease;
}
.srv:last-child{border-bottom:1px solid var(--line)}
.srv__num{font-size:11px; letter-spacing:.2em; color:var(--muted)}
.srv h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.6vw,46px);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.srv p{color:var(--muted); font-size:14px; line-height:1.7; max-width:44ch}
.srv__arrow{text-align:right; opacity:0; transform:translateX(-14px); transition:.45s; color:var(--accent); font-size:20px}
.srv:hover{padding-left:22px}
.srv:hover h3{color:var(--accent)}
.srv:hover .srv__arrow{opacity:1; transform:translateX(0)}

/* ---------- panoul care se deschide la click pe un serviciu ---------- */
.pan{
  position:fixed; inset:0; z-index:900; background:var(--ink);
  overflow-y:auto; overscroll-behavior:contain; visibility:hidden;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s cubic-bezier(.8,0,.2,1);
}
.pan.on{clip-path:inset(0 0 0 0); visibility:visible}
.pan__head{
  position:sticky; top:0; z-index:2; background:var(--ink);
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding:26px var(--pad) 22px; border-bottom:1px solid var(--line);
}
.pan__title{
  font-family:var(--serif); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,6vw,72px); line-height:1; letter-spacing:.02em;
}
.pan__close{
  background:none; border:1px solid var(--line); color:var(--cream); cursor:pointer;
  border-radius:100px; padding:12px 22px; white-space:nowrap;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; transition:.35s;
}
.pan__close:hover{background:var(--accent); color:var(--ink); border-color:var(--accent)}
.pan__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,20px);
  padding:clamp(22px,4vw,40px) var(--pad);
}
.pan__card{
  position:relative; overflow:hidden; background:var(--bg-2);
  aspect-ratio:4/5; cursor:none; opacity:0; animation:panIn .7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes panIn{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
.pan__card img{transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .6s}
.pan__card:hover img{transform:scale(1.06); filter:brightness(.72)}
.pan__card figcaption{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; transform:translateY(10px); transition:.5s cubic-bezier(.2,.8,.2,1);
}
.pan__card:hover figcaption{opacity:1; transform:none}
.pan__empty{grid-column:1/-1; color:var(--muted); font-size:14px; line-height:1.9}

/* ---------- panoul VIDEO (clipuri YouTube, redate pe site) ---------- */
.video-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,44px);
  padding:clamp(24px,4vw,44px) var(--pad) clamp(50px,9vh,100px);
}
.vid{opacity:0; animation:panIn .7s cubic-bezier(.2,.7,.2,1) forwards}
.vid h4{
  font-family:var(--serif); font-weight:400; text-transform:uppercase;
  font-size:clamp(15px,1.7vw,23px); letter-spacing:.03em; line-height:1.3; margin-bottom:14px;
}
.vid__box{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--bg-2); cursor:pointer; border:1px solid var(--line);
}
.vid__box img{transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .5s}
.vid__box:hover img{transform:scale(1.05); filter:brightness(.6)}
.vid__box iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vid__play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.vid__play i{
  width:72px; height:72px; border-radius:50%;
  background:rgba(10,10,10,.5); border:1px solid rgba(255,255,255,.4);
  display:grid; place-items:center; transition:background .35s, transform .35s;
}
.vid__play i::after{
  content:""; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--cream); margin-left:5px;
}
.vid__box:hover .vid__play i{background:var(--accent); transform:scale(1.08)}
.vid__box:hover .vid__play i::after{border-left-color:var(--ink)}
@media (max-width:760px){ .video-grid{grid-template-columns:1fr} }
@media (max-width:900px){.pan__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .pan__grid{grid-template-columns:1fr}
  .pan__head{align-items:center}
  .pan__close span{display:none}
}

/* =====================================================
   PORTOFOLIU
   ===================================================== */
/* spațiu mai mare între ultima poză și secțiunea de Contact */
.work{padding:clamp(60px,10vh,120px) var(--pad) clamp(100px,17vh,190px); border-top:1px solid var(--line)}
.work__head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:54px}
.work__note{font-size:12px; line-height:1.8; color:var(--muted); text-align:right}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.4vw,22px)}
.card{
  position:relative; overflow:hidden; background:var(--bg-2); cursor:none;
  grid-column:span 4; aspect-ratio:3/4;
}
/* ritm asimetric — ce dă senzatia de "editorial" */
.card:nth-child(6n+1){grid-column:span 7; aspect-ratio:4/3}
.card:nth-child(6n+2){grid-column:span 5; aspect-ratio:4/5}
.card:nth-child(6n+3){grid-column:span 4; aspect-ratio:3/4}
.card:nth-child(6n+4){grid-column:span 4; aspect-ratio:3/4}
.card:nth-child(6n+5){grid-column:span 4; aspect-ratio:3/4}
.card:nth-child(6n+6){grid-column:span 12; aspect-ratio:2/1}   /* caseta panoramică, mai înaltă ca să încapă tot subiectul */

.card img{transform:scale(1.02); transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .6s}
.card:hover img{transform:scale(1.07); filter:brightness(.72)}
.card__cap{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; transform:translateY(12px); transition:.5s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card__cap{opacity:1; transform:none}

/* =====================================================
   CONTACT
   ===================================================== */
.contact{
  padding:clamp(80px,14vh,160px) var(--pad);
  background:var(--bg-2); border-top:1px solid var(--line);
  text-align:center;   /* toată secțiunea e centrată */
}
.contact__big{
  font-family:var(--serif); font-weight:400; letter-spacing:.01em;
  font-size:clamp(42px,9vw,128px); line-height:.95; margin-bottom:60px;
  text-transform:uppercase;
}
.contact__wrap{max-width:680px; margin:0 auto}
/* emailul: bloc centrat, cu linia exact cât textul, fără rupere în două rânduri */
.contact__mail{
  display:block; width:fit-content; max-width:100%;
  margin:0 auto 44px; text-align:center;
  font-family:var(--serif); font-size:clamp(17px,3vw,34px);
  border-bottom:1px solid var(--line); padding-bottom:10px;
  transition:color .4s, border-color .4s; overflow-wrap:anywhere;
}
/* pe fundalul petrol, hover-ul luminează (nu întunecă) */
.contact__mail:hover{color:var(--sand); border-color:var(--sand)}
.contact__rows > div{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 0; border-top:1px solid var(--line);
}
.contact__rows span{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.contact__rows a:hover{color:var(--sand); text-decoration:underline; text-underline-offset:6px}
.contact__rows p{font-size:14px; color:var(--sand)}


/* =====================================================
   FOOTER
   ===================================================== */
.footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:26px var(--pad); border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.footer a:hover{color:var(--cream)}

/* =====================================================
   LIGHTBOX
   ===================================================== */
.lb{
  position:fixed; inset:0; z-index:9500; background:rgba(30,30,30,.97);
  display:grid; place-items:center; padding:60px 70px;
  opacity:0; pointer-events:none; transition:opacity .4s;
}
.lb.on{opacity:1; pointer-events:auto}
.lb img{max-width:min(1100px,88vw); max-height:82vh; width:auto; height:auto; object-fit:contain}
.lb__close{
  position:absolute; top:22px; right:26px; background:none; border:0;
  color:var(--cream); font-size:20px; cursor:pointer; line-height:1;
}
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:1px solid var(--line); color:var(--cream);
  width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:16px; transition:.3s;
}
.lb__nav:hover{background:var(--cream); color:var(--ink)}
.lb__prev{left:20px} .lb__next{right:20px}
.lb__cap{position:absolute; bottom:26px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1000px){
  .about{grid-template-columns:1fr}
  .srv{grid-template-columns:50px 1fr 30px}
  .srv p{display:none}
}
@media (max-width:760px){
  /* pe telefon rămân doar logo-ul, numărul de telefon și burgerul */
  .nav__links{display:none}
  .nav__logo .logo-img{height:30px}
  .nav__cta{padding:8px 13px; font-size:10px; letter-spacing:.12em}
  .burger{display:block}
  .card, .card:nth-child(6n+1), .card:nth-child(6n+2), .card:nth-child(6n+3),
  .card:nth-child(6n+4), .card:nth-child(6n+5), .card:nth-child(6n+6){
    grid-column:span 12; aspect-ratio:4/5;
  }
  .work__head{flex-direction:column; align-items:flex-start}
  .work__note{text-align:left}
  .lb{padding:70px 16px}
  .lb__nav{width:40px;height:40px}
  .hero__count{display:none}
}