/* ============ Design Tokens ============ */
:root{
  --red: #e82127;
  --dark: #181818;
  --light: #ffffff;
  --glass: rgba(255,255,255,.84);
  --card-bg: #0f0f10;
  --panel-bg: rgba(18,18,20,.9);
  --shadow-1: 0 10px 26px #0002, 0 2px 10px #e8212714;
  --shadow-2: 0 18px 48px #0003, 0 8px 20px #e821271f;
  --radius-lg: 18px;
  --radius-xl: 22px;
}

/* ============ Reset de bază ============ */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; min-height:100vh; color:#181818;
  font: 16px/1.45 'BaronNeue', Arial, sans-serif;
  background:
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.9)),
    #f6f7f9;
}

/* ============ Navbar ============ */
header{ position:sticky; top:0; z-index:1000 }
.glass-navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 1.25rem;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 1px 20px #0001;
  transition: opacity .35s, transform .35s;
}
.logo{ font-weight:800; font-size:1.6rem; letter-spacing:.04em; color:inherit; text-decoration:none }
.ggb-font{ font-weight:800; letter-spacing:.08em }

/* nav links */
.nav-links{
  display:flex; gap:1.1rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; color:var(--dark); font-weight:600; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:10%; right:90%; bottom:-6px; height:2px;
  background:var(--red); transition: all .25s ease;
}
.nav-links a:hover{ color:var(--red) }
.nav-links a:hover::after{ right:10% }

/* hamburger */

/* desktop: hide .nav-toggle like .hamburger */
.nav-toggle{ display:none; background:transparent; border:0; cursor:pointer; font-size:28px; }

@media (max-width: 820px){
  .nav-toggle{ display:flex; align-items:center; justify-content:center; width:38px; height:30px; }
}

.hamburger{
  width:38px; height:30px; display:none; flex-direction:column; gap:6px;
  background:transparent; border:0; cursor:pointer; margin-right:.5rem;
}
.hamburger span{ display:block; height:2px; background:#1b1b1b; border-radius:2px }

/* mobil */
@media (max-width: 900px){
  .hamburger{ display:flex }
  .nav-links{
    position: fixed; inset: 64px 0 auto 0;
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    box-shadow: 0 12px 32px #0002;
    display:none; flex-direction:column; gap:.6rem; padding: 16px 20px;
  }
  .nav-links.open{ display:flex }
}

/* ============ HERO ============ */
.hero{
  position:relative; width:100vw;
  left:50%; margin-left:-50vw; /* full-bleed */
  height: min(88vh, 820px); min-height: 420px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  transform: scale(1.03);
}
.hero-overlay{
  position:absolute; inset:0; z-index:2; background: rgba(24,24,24,.45); pointer-events:none;
}
.hero-content{
  position:absolute; z-index:3; color:#fff;
  top:50%; left:50%; transform: translate(-50%,-50%);
  text-align:center; width:min(100%, 1100px); padding: 0 1rem;
}
.hero-content h1{
  font-size: clamp(1.6rem, 3vw + 1rem, 3.2rem);
  line-height:1.1; letter-spacing:.04em; margin: 0 0 1rem;
  filter: drop-shadow(0 4px 16px #0007);
}
.hero-content p{ font-size: clamp(1rem, .6vw + .7rem, 1.2rem); margin:.2rem 0 1.4rem }

/* animații sigure (NU animăm transform pe .hero-content ca să nu-i stricăm centrul) */
.slide-up{ opacity:0; transform: translateY(32px); animation: slideUp .8s .15s both }
.fade-in-delay{ opacity:0; animation: fadeIn .9s .45s both }
@keyframes slideUp{ to{ opacity:1; transform:none } }
@keyframes fadeIn{ to{ opacity:1 } }

/* CTA */
.btn-main,.btn-secondary,.neon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .9rem 1.6rem; border-radius: 28px; font-weight:800; font-size:1rem;
  text-decoration:none; border:0; cursor:pointer; line-height:1; white-space:nowrap;
  box-shadow: 0 2px 14px #0002;
}
.btn-main,.neon-btn{ background:var(--red); color:#fff }
.btn-main:hover,.neon-btn:hover{ background:#111; color:#fff }
.btn-secondary{ background:#fff; color:var(--red) }
.btn-secondary:hover{ background:var(--red); color:#fff }

/* efect neon subtil */
.neon-btn{ filter: drop-shadow(0 0 10px rgba(232,33,39,.5)) }

/* ============ FLOTA – carusel orizontal ============ */
.flota-section{ padding: 3.2rem 1rem 2rem }
.flota-section h2{ text-align:center; font-size: clamp(1.5rem, 1.6vw + 1rem, 2.4rem); margin:0 0 1.6rem }

.flota-scroller{
  display:flex; gap: clamp(.9rem, 1.6vw, 1.6rem);
  overflow-x:auto; overflow-y:visible; padding: .5rem 1rem 1.2rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x: contain;
}
.flota-scroller::-webkit-scrollbar{ height:10px }
.flota-scroller::-webkit-scrollbar-thumb{ background:#e6e6e6; border-radius:10px }

/* card comun (folosim .van-card-horz peste tot) */
.van-card-horz, .van-card{
  flex: 0 0 clamp(270px, 30vw, 360px);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  position:relative; isolation:isolate; overflow:hidden;
  transition: transform .22s, box-shadow .22s;
}
.van-card-horz:hover, .van-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
}

/* imagine */
.van-card-horz > img,
.van-card .van-card-img img{
  width:100%; display:block; background:#000;
  height: clamp(170px, 26vw, 240px);
  object-fit: cover;
}
@media (max-width: 700px){
  .van-card-horz > img,
  .van-card .van-card-img img{ object-fit: contain }
}

/* panoul de detalii, sub poză */
.van-card-details, .van-meta{
  margin: .8rem 1rem 1rem;
  padding: 1rem 1.2rem 1.2rem;
  background: var(--panel-bg);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1rem;
  backdrop-filter: blur(4px);
  color:#fff;
}
.van-card-details h3, .van-meta h3{
  margin:0 0 .35rem; font-weight:800; font-size:1.05rem
}
.van-card-details p, .van-meta p{
  margin:.15rem 0; font-size:.98rem; color:#eee; opacity:.95
}
.van-card-details .price span, .van-meta .price span{
  color:var(--red); font-weight:800
}

/* efect “sheen/halo” (cradle-like) */
.van-card-horz::before, .van-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: conic-gradient(from 140deg at 50% 50%, #e8212730, #ffffff10, #e8212730, #ffffff05, #e8212730);
  padding:1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.7;
}
.van-card-horz::after, .van-card::after{
  content:""; position:absolute; inset:-20%; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:
    radial-gradient(120% 60% at var(--mx,50%) var(--my,0%), rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    linear-gradient(to right, rgba(255,255,255,.06), rgba(255,255,255,0) 35%);
}
.van-card-horz:hover::after, .van-card:hover::after{ opacity:1 }

/* responsive mici */
@media (max-width: 600px){
  .flota-section{ padding-inline:.5rem }
  .van-card-horz, .van-card{ flex-basis: 82vw }
  .van-card-horz > img, .van-card .van-card-img img{ height: 48vw; max-height:260px }
}

/* ============ Testimoniale ============ */
.testimonials-section{ padding: 2.6rem 1rem }
.testimonials-section h2{ text-align:center; margin:0 0 1rem }
.testimonials-slider{ position:relative; max-width: 560px; margin: 0 auto }
.testimonial-slide{
  display:none; background:#fff; border-radius: var(--radius-lg); box-shadow: 0 2px 16px #0002;
  padding: 1.6rem 1.2rem; color:#222; min-height:120px;
}
.testimonial-slide.active{ display:block }
.testimonial-text{ font-size:1.06rem; margin-bottom:.8rem }
.testimonial-author{ color:var(--red); font-weight:800 }
.testimonial-nav{ display:flex; gap:.6rem; justify-content:center; margin-top:.8rem }
.dot{
  width:13px; height:13px; border-radius:50%; background:#fff; border:2px solid var(--red);
  box-shadow: 0 1px 8px #e8212770; opacity:.5; cursor:pointer
}
.dot.active,.dot:hover{ background:var(--red); opacity:1 }

/* ============ Footer ============ */
footer{
  background: var(--dark); color:#fff; text-align:center; padding:2rem 1rem;
  border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl);
  margin-top: 3rem;
}
.footer-content{ display:flex; flex-direction:column; gap:.7rem; align-items:center }

/* ============ Lightbox (galerie pe paginile de produs) ============ */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center; z-index:2000;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto }
.lightbox img{
  max-width:90vw; max-height:85vh; object-fit:contain; border-radius:10px; box-shadow:0 10px 30px #0008
}
.lightbox .lb-close{
  position:absolute; top:14px; right:16px; background:#fff; color:#000; border:0; border-radius:999px;
  width:38px; height:38px; font-weight:800; cursor:pointer
}

/* --- Mobile menu visibility (override) --- */
@media (max-width: 900px) {
  .glass-navbar { position: sticky; top: 0; z-index: 1000; }
  .hamburger { display: inline-flex; gap: 6px; flex-direction: column; border: 0; background: transparent; }
  .hamburger span { width: 24px; height: 2px; background: #181818; display: block; }

  .nav-links { display: none; position: absolute; right: 1rem; top: 64px;
               background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
               border-radius: 12px; padding: .6rem .8rem; box-shadow: 0 10px 26px #0002; }
  .nav-links.open { display: block; }
  .nav-links li { margin: .4rem 0; }
  .nav-links a { display: block; padding: .45rem .7rem; }
}

/* --- Buttons: compact on small screens --- */
@media (max-width: 600px){
  .btn-main, .btn-secondary { padding: .65rem 1rem; font-size: 1rem; line-height: 1; }
}

/* --- Flota & Testimonials: ensure real horizontal scroll --- */
.flota-scroller,
.testimonials-slider {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

/* Slides lay out horizontally & snap */
.testimonials-slider { display: flex; gap: 1rem; padding-bottom: .5rem; }
.testimonial-slide   { flex: 0 0 85%; scroll-snap-align: center; }

/* Horizontal wheel bar style (optional) */
.flota-scroller::-webkit-scrollbar,
.testimonials-slider::-webkit-scrollbar { height: 10px; }