/* ==========================================================
   4Green 2026
   O singură suprafață întunecată de la hero până la footer.
   Pozele sunt singurele lucruri luminoase din pagină.
   Motiv structural: dunga de tuns.
   ========================================================== */

:root{
  --ink:#0B1410;
  --ink-2:#111E17;
  --ink-3:#18291F;
  --paper:#E7ECE2;
  --mutefg:rgba(231,236,226,.62);
  --grass:#4C8F35;
  --grass-dk:#356524;
  --sun:#C9DA3E;
  --soil:#6B4A2F;

  --hair:rgba(231,236,226,.13);
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Instrument Sans", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --wrap:1240px;
  --pad:clamp(1.15rem,4vw,3rem);
  --sec:clamp(5rem,10vw,9rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .22vw,1.1rem);line-height:1.62;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(2.55rem,7.4vw,5.5rem)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.35rem,2.6vw,2rem);font-weight:600;letter-spacing:-.02em}
p{margin:0 0 1rem}
.hl{color:var(--sun)}
.mute{color:var(--mutefg)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;background:var(--sun);color:var(--ink);padding:.7rem 1rem;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sun);display:flex;align-items:center;gap:.7rem;margin:0 0 1.4rem;
}
.eyebrow::before{
  content:"";width:38px;height:9px;flex:none;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--sun) 0 5px,transparent 5px 10px);
}

/* ---------- butoane ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  padding:.95rem 1.7rem;border-radius:999px;text-decoration:none;border:1.5px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),background .25s,color .25s,border-color .25s;
}
.btn--solid{background:var(--grass);color:#fff}
.btn--solid:hover{background:var(--sun);color:var(--ink);transform:translateY(-2px)}
.btn--ghost{border-color:rgba(231,236,226,.4);color:var(--paper)}
.btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);transform:translateY(-2px)}
.btn--full{width:100%}

/* ---------- navigație ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:.85rem var(--pad);transition:background .35s,box-shadow .35s}
.nav.is-stuck{background:rgba(11,20,16,.82);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--hair)}
.nav__brand img{height:38px;width:auto;filter:brightness(0) invert(1)}
.nav__links{display:flex;gap:1.5rem;margin-left:auto;font-size:.94rem;font-weight:500}
.nav__links a{color:var(--paper);text-decoration:none;position:relative;padding:.2rem 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{font-family:var(--mono);font-size:.86rem;font-weight:600;text-decoration:none;color:var(--paper);display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid rgba(231,236,226,.35);padding:.5rem 1rem;border-radius:999px;white-space:nowrap;transition:.3s}
.nav__cta:hover{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sun);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.nav__burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.nav__burger span{display:block;width:24px;height:2px;background:var(--paper);margin:5px 0}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:7rem var(--pad) 0;overflow:hidden;isolation:isolate}
.hero__field{position:absolute;inset:0;z-index:-2;clip-path:inset(0 100% 0 0);animation:unrollField 1.9s cubic-bezier(.72,0,.24,1) .25s both}
.hero__field img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.62)}
.hero__mow{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(11,20,16,.92) 8%,rgba(11,20,16,.56) 48%,rgba(11,20,16,.28) 100%),
    repeating-linear-gradient(94deg,rgba(255,255,255,.055) 0 62px,transparent 62px 124px);
}
.hero__roll{position:absolute;top:0;bottom:0;left:-70px;width:62px;z-index:-1;animation:rollTravel 1.9s cubic-bezier(.72,0,.24,1) .25s both}
.hero__roll i{position:absolute;inset:6% 0;border-radius:10px;background:linear-gradient(90deg,#254a1b,#4a8a37 45%,#2d5a22);box-shadow:0 0 60px rgba(0,0,0,.6);overflow:hidden}
.hero__roll i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(107,74,47,.55) 0 3px,transparent 3px 16px);animation:rollSpin .5s linear infinite}
@keyframes unrollField{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rollTravel{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 70px))}}
@keyframes rollSpin{from{background-position-y:0}to{background-position-y:16px}}

.hero__copy{max-width:min(920px,100%);margin-inline:auto;width:100%;animation:riseIn .9s cubic-bezier(.2,.8,.3,1) 1.5s both}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:56ch;color:rgba(231,236,226,.86);margin-top:1.4rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:2.5rem;max-width:min(920px,100%);margin:auto auto 0;width:100%;padding:2.5rem 0;border-top:1px solid var(--hair);animation:riseIn .9s cubic-bezier(.2,.8,.3,1) 1.75s both}
.hero__facts b{display:block;font-family:var(--mono);font-size:1.3rem;font-weight:600;color:var(--sun)}
.hero__facts span{font-size:.85rem;color:var(--mutefg)}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- secțiuni: o singură suprafață ---------- */
.sec{padding:var(--sec) 0;position:relative}
.sec + .sec::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:8px;
  background:repeating-linear-gradient(90deg,rgba(76,143,53,.55) 0 26px,transparent 26px 52px);
  opacity:.5;
}
.sec h2{max-width:20ch}
.claim{max-width:16ch;font-size:clamp(2.4rem,6.4vw,5rem)}

/* rulou desfășurat pe toată lățimea */
.unroll{margin:clamp(2.5rem,6vw,4.5rem) 0;position:relative;overflow:hidden}
.unroll img{width:100%;height:clamp(240px,42vw,520px);object-fit:cover;clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.72,0,.24,1)}
.unroll.is-in img{clip-path:inset(0 0 0 0)}
.unroll::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(94deg,rgba(11,20,16,.28) 0 62px,transparent 62px 124px);
}

.cols{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.cols p{font-size:clamp(1.05rem,1.5vw,1.25rem)}
.specs{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.specs li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1rem 0;border-bottom:1px solid var(--hair)}
.specs b{font-family:var(--mono);font-size:1rem;font-weight:600;color:var(--sun);white-space:nowrap}
.specs span{font-size:.88rem;color:var(--mutefg);text-align:right}

/* ---------- servicii: rânduri de gazon ---------- */
.rows{margin-top:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--hair)}
.row{
  position:relative;border-bottom:1px solid var(--hair);
  padding:clamp(1.6rem,3.4vw,2.4rem) var(--pad);
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1rem clamp(2rem,6vw,5rem);align-items:baseline;
  overflow:hidden;isolation:isolate;transition:color .4s;
}
.row::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grass-dk);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.72,0,.24,1);
}
.row::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(94deg,rgba(0,0,0,.14) 0 34px,transparent 34px 68px);
  opacity:0;transition:opacity .55s;
}
.row:hover::before{transform:scaleY(1)}
.row:hover::after{opacity:1}
.row h3{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.row:hover h3{transform:translateX(14px)}
.row p{margin:0;color:var(--mutefg);transition:color .4s}
.row:hover p{color:rgba(255,255,255,.9)}
.row__thumb{
  position:absolute;right:var(--pad);top:50%;width:190px;height:120px;z-index:-1;
  transform:translate(30px,-50%);opacity:0;border-radius:8px;overflow:hidden;
  transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.3,1);pointer-events:none;
}
.row__thumb img{width:100%;height:100%;object-fit:cover}
.row:hover .row__thumb{opacity:.9;transform:translate(0,-50%)}

/* ---------- calculator + plan ---------- */
.calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:center;margin-top:clamp(2.5rem,6vw,4rem)}
.calc__label{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sun)}
.calc__input{display:flex;align-items:baseline;gap:.6rem;border-bottom:2px solid var(--hair);padding:.4rem 0;margin:.6rem 0 1.2rem}
.calc__input input{flex:1;background:none;border:0;color:var(--paper);font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6.5vw,4rem);letter-spacing:-.04em;width:100%}
.calc__input input:focus{outline:none}
.calc__input input::-webkit-outer-spin-button,.calc__input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__input span{font-family:var(--mono);color:var(--sun);font-size:1.1rem}
.calc__range{width:100%;accent-color:var(--sun);margin-bottom:1.8rem}
.calc__out{margin:0 0 1.8rem;border-top:1px solid var(--hair)}
.calc__out div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--hair)}
.calc__out dt{font-size:.9rem;color:var(--mutefg)}
.calc__out dd{margin:0;font-family:var(--mono);font-size:1.1rem;font-weight:600}
.calc__out output{color:var(--sun)}
.calc__fine{font-size:.82rem;color:rgba(231,236,226,.45);margin:1rem 0 0;line-height:1.55}

.plan{margin:0}
.plan__box{background:var(--ink-2);border:1px solid var(--hair);border-radius:12px;padding:clamp(1rem,2.5vw,1.8rem)}
.plan__box svg{width:100%;height:auto;display:block}
.plan figcaption{font-size:.85rem;color:var(--mutefg);margin-top:1rem}
.plan figcaption b{font-family:var(--mono);color:var(--sun);font-weight:600}
.strip{fill:var(--grass);opacity:.9}
.strip--alt{fill:var(--grass-dk)}
.plot{fill:none;stroke:var(--sun);stroke-width:1.5;stroke-dasharray:5 4}
.cote{stroke:rgba(231,236,226,.45);stroke-width:1}
.cotetx{fill:rgba(231,236,226,.6);font-family:"JetBrains Mono",monospace;font-size:11px}

/* ---------- galerie full bleed ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:clamp(2.5rem,6vw,4rem)}
.shot{padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;position:relative;aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.88);transition:transform .8s cubic-bezier(.2,.8,.3,1),filter .5s}
.shot::after{content:"";position:absolute;inset:auto 0 0;height:0;background:repeating-linear-gradient(90deg,var(--sun) 0 10px,transparent 10px 20px);transition:height .35s}
.shot:hover img{transform:scale(1.06);filter:saturate(1.05) brightness(1)}
.shot:hover::after{height:5px}
.shot:nth-child(1),.shot:nth-child(8){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

/* ---------- video (în standby, stilurile rămân) ---------- */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-top:clamp(2.5rem,6vw,4rem)}
.yt{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:16/9;background:var(--ink-2)}
.yt img{width:100%;height:100%;object-fit:cover;filter:brightness(.72);transition:transform .6s,filter .4s}
.yt:hover img{transform:scale(1.05);filter:brightness(.58)}
.yt b{position:absolute;left:1.1rem;bottom:1rem;font-family:var(--display);font-size:1.05rem}
.yt__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:var(--sun);display:grid;place-items:center;transition:transform .35s}
.yt__play::before{content:"";border-left:18px solid var(--ink);border-block:11px solid transparent;margin-left:5px}
.yt:hover .yt__play{transform:scale(1.12)}
.yt iframe{width:100%;height:100%;border:0}

/* ---------- întrebări ---------- */
.qas{margin-top:clamp(2.5rem,6vw,4rem);max-width:900px;margin-inline:auto}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{cursor:pointer;list-style:none;padding:1.3rem 2.5rem 1.3rem 0;position:relative;font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:-.02em;transition:color .3s}
.qa summary:hover{color:var(--sun)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:.3rem;top:50%;width:13px;height:13px;border-right:2px solid var(--sun);border-bottom:2px solid var(--sun);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa p{padding-bottom:1.3rem;margin:0;max-width:66ch;color:var(--mutefg)}

/* ---------- închidere: contact ---------- */
.close__lead{font-size:clamp(1.15rem,2.4vw,1.7rem);max-width:26ch;font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.phone{
  display:block;text-decoration:none;font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,9.5vw,7rem);letter-spacing:-.05em;line-height:1;
  margin:clamp(1.5rem,4vw,2.5rem) 0;color:var(--paper);transition:color .3s;
}
.phone:hover{color:var(--sun)}
.close__grid{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,6vw,5rem);align-items:start;margin-top:clamp(2rem,5vw,3.5rem)}
.contactlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.contactlist li{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;padding:.95rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.contactlist span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(231,236,226,.45);min-width:110px}
.contactlist a{font-weight:600;text-decoration:none;border-bottom:2px solid var(--grass);transition:.25s}
.contactlist a:hover{color:var(--sun);border-color:var(--sun)}
.fb{width:min(360px,100%)}
.fb__lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(231,236,226,.45);margin-bottom:.9rem}
.fb iframe{border-radius:10px;background:#fff;max-width:100%}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair);color:var(--mutefg);padding:4rem 0 6.5rem}
.foot__in{display:grid;gap:1.2rem;justify-items:start}
.foot img{height:40px;width:auto;filter:brightness(0) invert(1)}
.foot p{margin:0;font-size:.95rem;max-width:48ch}
.foot__links{display:flex;flex-wrap:wrap;gap:1.3rem;font-size:.92rem}
.foot__links a{text-decoration:none;color:var(--paper);border-bottom:1px solid transparent;transition:.25s}
.foot__links a:hover{border-color:var(--sun);color:var(--sun)}
.foot__c{font-family:var(--mono);font-size:.75rem;color:rgba(231,236,226,.35);margin-top:1rem}

/* ---------- bara fixă mobil ---------- */
.callbar{display:none;position:fixed;inset:auto 0 0;z-index:60;background:var(--ink-2);border-top:1px solid var(--hair)}
.callbar a{flex:1;text-align:center;padding:1rem .5rem;color:var(--paper);text-decoration:none;font-family:var(--display);font-weight:600}
.callbar a:first-child{background:var(--grass);color:#fff}

/* ---------- lightbox ---------- */
.lb{border:0;padding:0;background:transparent;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;overflow:hidden}
.lb::backdrop{background:rgba(11,20,16,.96)}
.lb__stage{position:absolute;inset:0;display:grid;place-items:center;padding:4.5rem 1rem 5.5rem;touch-action:pan-y}
.lb__stage img{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain;animation:lbIn .3s ease both}
@keyframes lbIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

.lb__x{position:absolute;top:1rem;right:1rem;width:46px;height:46px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer;z-index:2}

.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(231,236,226,.3);
  background:rgba(11,20,16,.6);backdrop-filter:blur(8px);cursor:pointer;
  display:grid;place-items:center;transition:background .25s,border-color .25s,transform .25s;
}
.lb__nav:hover{background:var(--sun);border-color:var(--sun)}
.lb__nav span{width:13px;height:13px;border-top:2px solid var(--paper);border-right:2px solid var(--paper);transition:border-color .25s}
.lb__nav:hover span{border-color:var(--ink)}
.lb__nav--prev{left:1rem}
.lb__nav--prev span{transform:rotate(-135deg);margin-left:4px}
.lb__nav--next{right:1rem}
.lb__nav--next span{transform:rotate(45deg);margin-right:4px}

.lb__count{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);margin:0;z-index:2;
  font-family:var(--mono);font-size:.85rem;color:rgba(231,236,226,.6);
  background:rgba(11,20,16,.6);backdrop-filter:blur(8px);padding:.45rem 1rem;border-radius:999px;
}
.lb__count b{color:var(--sun);font-weight:600}

@media (max-width:700px){
  .lb__stage{padding:4rem .5rem 6.5rem}
  .lb__nav{top:auto;bottom:1rem;transform:none;width:52px;height:52px}
  .lb__nav--prev{left:1.2rem}
  .lb__nav--next{right:1.2rem}
  .lb__count{bottom:1.75rem}
}

/* ---------- apariții ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.unroll.reveal{transform:none}
.gallery .reveal{transition-delay:calc(var(--i,0) * 50ms)}
.rows .reveal{transition-delay:calc(var(--i,0) * 60ms)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cols,.calc,.close__grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:.5rem}
  .row__thumb{display:none}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .shot:nth-child(1),.shot:nth-child(8){grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .nav__links{position:fixed;inset:62px 0 auto;flex-direction:column;gap:0;background:var(--ink-2);padding:1rem var(--pad) 2rem;box-shadow:0 20px 50px rgba(0,0,0,.5);display:none}
  .nav__links.is-open{display:flex}
  .nav__links a{padding:.9rem 0;border-bottom:1px solid var(--hair);font-size:1.05rem}
  .nav__burger{display:block;order:3}
  .nav__cta{margin-left:auto}
}
@media (max-width:640px){
  .hero{min-height:92svh;padding-top:6rem}
  .hero__facts{gap:1.4rem 2rem;padding:1.6rem 0 5rem}
  .hero__facts b{font-size:1.05rem}
  .specs li{flex-direction:column;gap:.15rem}
  .specs span{text-align:left}
  .callbar{display:flex}
  .foot{padding-bottom:6rem}
  .nav__cta{font-size:.8rem;padding:.45rem .8rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero__field{clip-path:none}
  .hero__roll{display:none}
  .reveal{opacity:1;transform:none}
  .unroll img{clip-path:none}
}