body{
  font-family: system-ui, sans-serif;
  margin:0;
  color:#111;
}

.container{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
}

.site-hero{
  padding:80px 0;
  background:#f5f7fa;
}

.section-services{
  padding:80px 0;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}

.service-card{
  background:#fff;
  padding:24px;
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.site-works{
  padding:80px 0;
}

.works-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}

.work-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.work-img{
  height:200px;
  background-size:cover;
  background-position:center;
}

.work-body{
  padding:20px;
}

.work-link{
  display:inline-block;
  margin-top:12px;
  color:#2563eb;
  font-weight:600;
}

/* WORKS */

.vl24-works{
  padding: 80px 0;
  background:#f8fafc;
}

.vl24-works-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}

.vl24-work-card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  transition:.2s;
}

.vl24-work-card:hover{
  transform:translateY(-4px);
}

.vl24-work-card img{
  width:100%;
  border-radius:10px;
  margin-bottom:12px;
}

/* ============================
   VL24 – CINEMATIC HERO (FINAL)
============================ */

.hero-cinematic{
  position:relative;
  height:100vh;
  overflow:hidden;
  color:#fff;
}

.hero-slides{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.hero-slide{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  opacity:0;
  transform:scale(1.15);

  transition:
    opacity 1.2s ease-in-out,
    transform 5s cubic-bezier(.2,.8,.2,1);

  will-change:transform, opacity;
}

.hero-slide.active{
  opacity:1;
  z-index:2;
}

/* 3D SCENE */

.hero-cinematic{
  perspective:1200px;
  overflow:hidden;
}

/* SLIDE BASE */

.hero-slide{
  position:absolute;
  inset:-6%;

  background-size:cover;
  background-position:center;

  opacity:0;

  transform-style:preserve-3d;

  transition:
    opacity 1.2s ease,
    transform 8s linear;

  will-change:transform,opacity;
}

.hero-slide.active{
  opacity:1;
}

/* 3D MOTIONS */

.motion-a{
  transform:
    scale(1.25)
    rotateY(3deg)
    rotateX(-2deg)
    translateX(-4%)
    translateY(2%);
}

.motion-b{
  transform:
    scale(1.3)
    rotateY(-4deg)
    rotateX(2deg)
    translateX(5%)
    translateY(-3%);
}

.motion-c{
  transform:
    scale(1.2)
    rotateY(2deg)
    rotateX(3deg)
    translateX(-2%)
    translateY(-4%);
}

.motion-d{
  transform:
    scale(1.35)
    rotateY(-3deg)
    rotateX(-2deg)
    translateX(3%)
    translateY(3%);
}

/* ============================
   FIX TEXT VISIBILITY
============================ */

/* Slides kõige alla */
.hero-slides{
  z-index:1;
  position:absolute;
}

/* Overlay keskele */
.hero-overlay{
  z-index:2;
  position:absolute;
}

/* Tekst alati peal */
.hero-content,
.hero-meta{
  position:relative;
  z-index:5;
}

/* 3D ei tohi katta UI-d */
.hero-slide{
  backface-visibility:hidden;
  pointer-events:none;
}

/* ============================
   CORE LIGHTBOX
============================ */

.vl24-lightbox{
  position:fixed;
  inset:0;

  background:rgba(10,15,25,.9);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  pointer-events:none;

  transition:.25s ease;
  z-index:9999;
}

.vl24-lightbox.active{
  opacity:1;
  pointer-events:auto;
}

.vl24-lightbox img{
  max-width:90%;
  max-height:90%;

  border-radius:12px;

  box-shadow:0 40px 120px rgba(0,0,0,.6);
}

.vl24-lightbox-close{
  position:absolute;
  top:28px;
  right:32px;

  font-size:28px;
  color:#fff;

  cursor:pointer;
  opacity:.85;
}

.vl24-lightbox-close:hover{
  opacity:1;
}

/* PROJECTS LIGHTBOX HOVER */

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

.project-zoom-btn{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 600;
  font-size: 15px;

  opacity: 0;
  transition: .25s;
  pointer-events: none;
}

.project-image:hover .project-zoom-btn{
  opacity: 1;
}

/* mobiil: alati näha */
@media(max-width:768px){
  .project-zoom-btn{
    opacity:1;
    background: rgba(0,0,0,.35);
  }
}

section[id]{
  scroll-margin-top: 100px;
}