/* =========================
   HERO
========================= */

.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;

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

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

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:0.45;

  filter:
    saturate(1.1)
    contrast(1.08)
    brightness(0.7);
}

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

  background:
    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0,0,0,0.55) 70%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.15),
      rgba(0,0,0,0.85)
    );
}

.hero-content{
  position:relative;
  z-index:3;

  width:100%;
  max-width:980px;

  text-align:center;

  padding:0 24px;
}

.eyebrow{
  display:block;

  margin-bottom:22px;

  font-size:0.78rem;
  letter-spacing:5px;

  opacity:0.58;
}

.hero-title{
  display:flex;
  flex-direction:column;

  font-size:7rem;
  line-height:0.92;
  letter-spacing:-5px;

  margin-bottom:28px;
}

.hero-title span{
  display:block;
}

.hero p{
  max-width:760px;

  margin:0 auto 42px;

  font-size:1.05rem;
  line-height:1.9;

  opacity:0.72;
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:18px;
}

/* =========================
   VISUAL PANELS
========================= */

.wide-visual{
  position:relative;

  width:100%;

  overflow:hidden;

  border-radius:34px;

  background:#0c0c0c;

  border:
    1px solid rgba(255,255,255,0.05);

  box-shadow:
    0 40px 120px rgba(0,0,0,0.5);

  transform-style:preserve-3d;

  transition:
    transform 0.5s ease,
    border 0.4s ease,
    box-shadow 0.5s ease;
}

.wide-visual:hover{
  border-color:
    rgba(180,140,255,0.2);

  box-shadow:
    0 45px 130px rgba(0,0,0,0.62),
    0 0 70px rgba(180,140,255,0.08);
}

.wide-visual img{
  width:100%;
  height:auto;

  display:block;

  object-fit:cover;

  transition:
    transform 1.2s ease,
    filter 1.2s ease;
}

.wide-visual:hover img{
  transform:scale(1.03);

  filter:
    brightness(1.05)
    contrast(1.03)
    saturate(1.04);
}

.wide-visual::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.035),
      transparent 32%,
      rgba(0,0,0,0.16)
    );
}

/* =========================
   PIPELINE
========================= */

.pipeline-visual{
  margin-top:42px;
  margin-bottom:44px;
}

.pipeline-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

/* =========================
   TECHNOLOGY
========================= */

.tech-visual{
  margin-top:42px;
  margin-bottom:44px;
}

.tech-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

/* =========================
   BUSINESS
========================= */

.business-visual{
  margin-top:42px;
  margin-bottom:44px;
  background:#050505;
}

.business-visual img{
  width:100%;
  height:auto !important;

  object-fit:contain !important;
}

.business-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;

  margin-top:40px;
}

/* =========================
   GALLERY
========================= */

.gallery-slider{
  position:relative;

  width:100%;
  height:72vh;

  overflow:hidden;

  border-radius:34px;

  border:
    1px solid rgba(255,255,255,0.06);

  background:#0b0b0b;

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

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

  opacity:0;

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

  transform:scale(1.04);

  transition:
    opacity 1s ease,
    transform 1.4s ease;
}

.gallery-slide.active{
  opacity:1;
  transform:scale(1);
}

.gallery-slide::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.82),
      rgba(0,0,0,0.08)
    );
}

.gallery-overlay{
  position:absolute;

  left:42px;
  bottom:42px;

  z-index:3;

  background:none;
}

.gallery-overlay h3{
  font-size:2rem;
  margin-bottom:12px;
}

.gallery-btn{
  position:absolute;

  top:50%;

  transform:
    translateY(-50%);

  width:54px;
  height:54px;

  border-radius:50%;

  background:
    rgba(0,0,0,0.42);

  border:
    1px solid rgba(255,255,255,0.14);

  backdrop-filter:blur(10px);

  color:white;

  z-index:4;

  cursor:pointer;

  transition:
    transform 0.35s ease,
    background 0.35s ease,
    border 0.35s ease;
}

.gallery-btn:hover{
  background:
    rgba(255,255,255,0.08);

  border-color:
    rgba(255,255,255,0.32);

  transform:
    translateY(-50%)
    scale(1.08);
}

.gallery-btn.prev{
  left:24px;
}

.gallery-btn.next{
  right:24px;
}

.gallery-dots{
  position:absolute;

  left:50%;
  bottom:26px;

  transform:
    translateX(-50%);

  display:flex;
  gap:10px;

  z-index:5;
}

.dot{
  width:10px;
  height:10px;

  border-radius:50%;

  background:
    rgba(255,255,255,0.28);

  cursor:pointer;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.dot.active{
  background:white;
  transform:scale(1.3);
}

/* =========================
   TIMELINE
========================= */

.timeline-list{
  display:flex;
  flex-direction:column;
  gap:22px;

  margin-top:56px;
}

.timeline-item{
  display:grid;
  grid-template-columns:160px 1fr;

  gap:26px;

  padding:34px;

  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.015)
    );

  border:
    1px solid rgba(255,255,255,0.05);

  backdrop-filter:blur(14px);

  transition:
    transform 0.4s ease,
    border 0.4s ease,
    box-shadow 0.4s ease;
}

.timeline-item:hover{
  transform:
    translateY(-4px);

  border-color:
    rgba(180,140,255,0.18);

  box-shadow:
    0 24px 80px rgba(0,0,0,0.42),
    0 0 32px rgba(180,140,255,0.06);
}

.timeline-year{
  font-size:1.15rem;
  font-weight:700;

  opacity:0.9;
}

.timeline-content h3{
  margin-bottom:12px;

  font-size:1.3rem;
}

.timeline-content p{
  opacity:0.68;

  line-height:1.85;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

  .business-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .hero-title{
    font-size:5.4rem;
  }

}

@media(max-width:700px){

  .hero{
    height:92vh;
  }

  .hero-title{
    font-size:3rem;
    letter-spacing:-2px;
    line-height:1;
  }

  .hero p{
    font-size:0.92rem;
    line-height:1.8;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:center;
  }

  .wide-visual,
  .gallery-slider{
    border-radius:22px;
  }

  .pipeline-visual,
  .tech-visual,
  .business-visual{
    margin-top:32px;
    margin-bottom:34px;
  }

  .pipeline-grid,
  .tech-grid,
  .business-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .gallery-slider{
    height:46vh;
  }

  .gallery-overlay{
    left:24px;
    bottom:24px;
  }

  .gallery-overlay h3{
    font-size:1.3rem;
  }

  .gallery-btn{
    width:42px;
    height:42px;
  }

  .timeline-item{
    grid-template-columns:1fr;
    gap:14px;
    padding:24px;
  }

}