:root {
  --bg-dark: #0f0f1a;
  --card-bg: #1a1a2e;
  --purple: #b967ff;
  --purple-light: #d4a5ff;
  --purple-glow: rgba(185, 103, 255, 0.35);
  --text-light: #f1f2f5;
  --text-muted: #94a3b8;
  --border: #000;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.22);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.35);
  --trans: all .35s ease;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg-dark);
  color:var(--text-light);
  line-height:1.7;
  overflow-x:hidden;
  padding-top:90px; /* fixed navbar */
}

/* Headings → Lato */
h1,h2,h3,h4,h5,h6{
  font-family:'Lato',sans-serif;
  font-weight:800;
  line-height:1.2;
  margin-bottom:1rem;
}
h1{font-size:clamp(2.8rem,7vw,4.5rem)}
h2{
  font-size:clamp(2.3rem,5.5vw,3.2rem);
  text-align:center;
  margin-bottom:3.5rem;
  position:relative;
}
h2::after{
  content:"";
  position:absolute;
  left:50%;bottom:-14px;
  transform:translateX(-50%);
  width:90px;height:5px;
  background:var(--purple);
  border-radius:3px;
}
h3{font-size:clamp(1.45rem,4vw,1.9rem)}
p{
  font-size:clamp(1rem,2.3vw,1.12rem);
  color:var(--text-muted);
  margin-bottom:1rem;
}

.container{width:92%;max-width:1300px;margin:0 auto}
section{padding:130px 0}

/* Buttons */
.btn{
  display:inline-block;
  padding:.9rem 2.2rem;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:clamp(.98rem,2.2vw,1.1rem);
  border-radius:999px;
  text-decoration:none;
  background:var(--purple);
  color:#fff;
  border:2px solid transparent;
  transition:var(--trans);
}
.btn:hover{
  transform:translateY(-4px);
  background:var(--purple-light);
  box-shadow:0 14px 32px var(--purple-glow);
}
.btn-outline{
  background:transparent;
  border:2px solid var(--purple);
  color:var(--purple);
}
.btn-outline:hover{background:var(--purple);color:#fff}

/* Hero */
.hero{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden}
.hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.45)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,26,.5),rgba(15,15,26,.95));z-index:-1}
.hero-content {
  text-align: center; /* Centers the text */
  max-width: 960px;   /* Restrict the width for better visual appeal */
  margin: 0 auto;     /* Centers the content horizontally */
  padding: 2rem;
  margin-top: 4rem;   /* Adds top margin for spacing from the top of the section */
  display: flex;
  flex-direction: column; /* Aligns content vertically */
  justify-content: center; /* Vertically centers the content */
  align-items: center; /* Centers the content horizontally */
  z-index: 2;
}

.hero-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video fills the container */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Slight dark overlay to enhance text visibility */
  z-index: 1;
}

.hero-btns {
  margin-top: 2rem; /* Adds space between the text and the buttons */
  display: flex;
  gap: 20px;
  justify-content: center; /* Centers the buttons */
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 24px;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

.hero-content h1 {
  font-size: clamp(36px, 8vw, 60px);
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 16px;
  text-transform: uppercase;
  animation: bounceIn 1s ease-out;
}

.hero-content p {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 32px;
  line-height: 1.6;
  opacity: 0.85;
  animation: fadeInText 1.5s ease-out;
}
.hero-btns{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.scroll-down{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  color:var(--purple);font-size:2rem;
  animation:bounce 2s infinite;
}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}
  40%{transform:translateX(-50%) translateY(-14px)}
  60%{transform:translateX(-50%) translateY(-7px)}
}

/* Services Grid */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}
.service-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:2rem;
  transition:var(--trans);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.service-card:hover{
  transform:translateY(-10px);
  border-color:var(--purple);
  box-shadow:var(--shadow-lg);
}
.service-icon{
  width:64px;height:64px;
  border-radius:14px;
  background:#141427;
  border:1px solid var(--border);
  color:var(--purple);
  font-size:1.8rem;
  display:grid;
  place-items:center;
  transition:border-color .3s;
}
.service-card:hover .service-icon{border-color:var(--purple)}

/* Timeline */
.process-wrap{max-width:1100px;margin:0 auto}
.timeline{
  position:relative;
  display:grid;
  grid-template-columns:1fr 2px 1fr;
  gap:3rem 2rem;
  align-items:start;
}
.timeline::before{
  content:"";
  position:absolute;
  left:50%;top:0;bottom:0;
  width:3px;
  background:linear-gradient(to bottom,#333,rgba(255,255,255,.08));
  transform:translateX(-50%);
}
.t-item{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.8rem;
  position:relative;
  box-shadow:var(--shadow-sm);
  transition:var(--trans);
}
.t-item:hover{
  transform:scale(1.05);
  z-index:10;
  border-color:var(--purple);
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px var(--purple-glow);
}
.t-item::after{
  content:"";
  position:absolute;
  top:2.2rem;
  width:16px;height:16px;
  background:var(--purple);
  border-radius:50%;
  box-shadow:0 0 20px var(--purple-glow);
}
.t-item:nth-child(odd)::after{right:-38px}
.t-item:nth-child(even)::after{left:-38px}
.badge{
  position:absolute;top:-14px;
  width:40px;height:40px;
  background:var(--purple);
  color:#fff;font-weight:900;font-size:1.1rem;
  border-radius:50%;
  display:grid;place-items:center;
  border:3px solid var(--border);
  transition:border-color .3s;
}
.t-item:nth-child(odd) .badge{right:1rem}
.t-item:nth-child(even) .badge{left:1rem}
.t-item:hover .badge{border-color:var(--purple)}
.t-item:nth-child(odd){grid-column:1}
.t-item:nth-child(even){grid-column:3}

/* Mobile Timeline */
@media (max-width:860px){
  .timeline{grid-template-columns:3px 1fr;gap:3rem 0}
  .timeline::before{left:0;transform:none}
  .t-item,.t-item:nth-child(odd),.t-item:nth-child(even){grid-column:2}
  .t-item::after{left:-38px}
  .badge{left:1rem}
}

/* CTA */
.cta-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:28px;
  padding:clamp(3rem,8vw,5rem) 2rem;
  max-width:900px;
  margin:5rem auto 0;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:var(--trans);
}
.cta-card:hover{
  border-color:var(--purple);
  box-shadow:0 16px 44px rgba(185,103,255,.3);
}
.cta-card h2::after{left:50%;transform:translateX(-50%)}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:all .7s ease}
.reveal.show{opacity:1;transform:none}

/* Responsive */
@media (max-width:768px){section{padding:100px 0}}
@media (max-width:480px){section{padding:80px 0}.hero-content{margin-top:2rem}}