:root{
--bg:#000000; /* Black */
--bg-2:#0a0d10; /* Card bg */
--text:#e6edf3; /* Primary text */
--muted:#a1aab6; /* Muted text */
--acc:#00bfff; /* Light Blue */
--acc-2:#66ccff; /* Cyan-ish light blue */
--line:rgba(0,191,255,.25);
--card:rgba(16,22,28,.75);
--ring:rgba(0,191,255,.35);
--shadow:0 10px 30px rgba(0,0,0,.35);
--radius:22px;
--maxw:1200px;
}


    *{
      box-sizing:border-box;
    }

    body{
      margin:0;
      color:var(--text);
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
      line-height:1.6;
      overflow-x:hidden;
    }

   a{
    color:inherit;
    text-decoration:none
  }
    
  .container{
    width:100%;
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 20px;
  }

/* ===== NAV ===== */

  .logo {
    width: 15vw;     
    height: 200px;
    background: url('image/deepsemi_logo-removebg-preview.png') no-repeat center/contain;
    position: absolute;
    left: 50%;      
    top: 50%;
    transform: translate(-50%, -50%); 
  }


  /* Tablets */
@media (max-width: 1024px) {
  .logo {
    width: 20vw;
    max-width: 120px;
  }
}

/* Small tablets / large phones */
@media (max-width: 768px) {
  .logo {
    width: 25vw;
    max-width: 100px;
  }
}

/* Phones */
@media (max-width: 480px) {
  .logo {
    width: 30vw;
    max-width: 80px;
  }
}
/*  */
/* navbar.css */
.navbar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
}

.navbar-container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
}

.logo img {
  width: 150px;       
  height:100px;
  display: block;
}

/* For responsive */
@media (max-width: 768px) {
  .logo img {
    width: 120px;
  }
}

@media (max-width: 480px) {
  .logo img {
    width: 100px;
  }
}


.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.nav-links li a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: 0.3s;
}

.nav-links li a:hover {
  color: #1A4DD8;
}

/* Hamburger for mobile */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  display: block;
  transition: 0.3s;
}

/* Mobile styles */
@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 70%;
    background: rgba(0,0,0,0.95);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: 0.5s;
  }
  .nav-links.show {
    right: 0;
  }
  .hamburger {
    display: flex;
  }
}
/* Add to navbar.css */
.talk-btn {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  background-color: #1A4DD8;
  color: #fff;
  font-weight: 600;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s;
}

.talk-btn:hover {
  background: linear-gradient(135deg,#0d0057,#1702ff); 
  box-shadow: 0 0 20px rgba(23,2,255,0.9);
  transform: translateY(-2px);}


/* Adjust for mobile */
@media (max-width: 768px) {
    .logoh1{
        font-size: 10px;
    }
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 70%;
    background: rgba(0,0,0,0.95);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: 0.5s;
  }
  .nav-links.show {
    right: 0;
  }
  .hamburger {
    display: flex;
  }
  .nav-links li a {
    font-size: 1.2rem;
  }
}

/* Add to navbar.css */
.rotate-top {
  transform: rotate(45deg) translate(5px, 5px);
}

.rotate-bottom {
  transform: rotate(-45deg) translate(5px, -5px);
}

.fade {
  opacity: 0;
}


/* ===== HERO ===== */
.hero{
  background-color: var(--bg); /* premium black */
  position:relative;
  padding:110px 0 60px;
  overflow:hidden;
}

.hero .grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:center;
}

h1{
  font-family:"Space Grotesk";
  font-size:clamp(36px,6vw,62px);
  line-height:1.08;
  margin:0 0 16px;
  letter-spacing:.3px;
  color: var(--text);
}

.lead{
  font-size:clamp(16px,2.2vw,20px);
  color:var(--muted);
  max-width:62ch;
}

.hero-visual{
  position:relative;
  height:380px;
  border-radius:var(--radius);
  background:
    linear-gradient(160deg, rgba(23,2,255,.06), rgba(102,204,255,.06)),
    radial-gradient(600px 280px at 70% 20%, rgba(23,2,255,.15), transparent),
    var(--bg-2);
  border:1px solid rgba(23,2,255,.06);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.orb{
  position:absolute;
  inset:auto auto 20% 10%;
  width:160px;height:160px;
  filter:blur(18px);
  background:radial-gradient(circle at 30% 30%, var(--acc), transparent 60%);
}

.orb.two{
  inset:auto 10% 10% auto;
  background:radial-gradient(circle at 70% 70%, var(--acc-2), transparent 60%);
}

.scanline{
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity:.35;
}

/* ===== SERVICES ===== */
.section{
  padding:70px 0;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color: var(--text);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  background-color: rgba(23,2,255,0.1);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
}

.sec-title{
  font-family:"Space Grotesk";
  font-size:clamp(28px,4.2vw,42px);
  margin:14px 0 10px;
  color: var(--text);
}

.sec-sub{
  color:var(--muted);
  max-width:70ch;
}

#services{
  background-color: var(--bg);
}

.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin-top:26px;
}

.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transform-style:preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover{
  border-color:var(--acc);
  transform: translateY(-5px) scale(1.02);
  box-shadow:0 12px 35px var(--ring);
}

.card h3{
  margin:14px 0 8px;
  font-size:20px;
  color:var(--acc);
}

.card p,
.card ul{
  color:var(--muted);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px){
  .hero .grid{grid-template-columns:1fr;}
  .hero-visual{height:320px;}
}

@media (max-width: 640px){
  .navlinks{display:none;}
}


    /* ===== PROCESS ===== */
    #process{
      background-color: black;
    }

    .process{
      position:relative;
      margin-top:22px
    }

    .rail{
      position:absolute;
      left:18px;
      top:0;
      bottom:0;
      width:2px;
      background:rgba(255,255,255,.06)
    }

    .rail .prog{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:0;
      background:linear-gradient(180deg,var(--acc),var(--acc-2))
    }

    .steps{
      display:grid;
      gap:20px
    
    }

    .step{
      position:relative;
      display:grid;
      grid-template-columns:40px 1fr;
      gap:16px;
      align-items:start;
      background:var(--card);
      border:1px solid rgba(255,255,255,.06);
      border-radius:18px;
      padding:16px
    }

    .dot{
      width:36px;
      height:36px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,rgba(22,242,179,.18),rgba(103,210,255,.18));
      border:1px solid rgba(255,255,255,.08);
      font-weight:700;
      color:#0b1116;
      box-shadow:inset 0 0 16px rgba(103,210,255,.18)
    }


    /* ===== ENGAGEMENT MODELS ===== */

    #engagement{
      background-color: rgb(0, 0, 0);
    }

    .price ,.tilt{
      background-color: black;
    }
    .pricing{
            display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      margin-top:26px
    }

    .price{
      background:linear-gradient(180deg,rgba(22,242,179,.04),rgba(103,210,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      padding:22px
    }

    .price h4{
      margin:8px 0 6px
    }


    .price ul{
      padding:0;
      margin:10px 0 0;
      list-style:none;
      display:grid;
      gap:8px;
      color:var(--muted)
    }









    /* ===== MARQUEE ===== */
    .marquee{margin-top:46px;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden;white-space:nowrap}
    .marquee-track{display:inline-block;animation:scroll 24s linear infinite;padding:14px 0}
    .tag{display:inline-flex;align-items:center;gap:10px;margin-right:28px;color:var(--muted)}
    .dotTag{width:8px;height:8px;border-radius:50%;background:var(--acc)}
    @keyframes scroll{to{transform:translateX(-50%)}}

    /* ===== CTA ===== */
    .cta-section{position:relative;margin:70px 0 30px;border-radius:var(--radius);padding:38px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(160deg,rgba(22,242,179,.06),rgba(103,210,255,.06)), #0b1015;box-shadow:0 0 0 0 var(--ring)}
    .cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;font-weight:700}
    .btn.primary{background:linear-gradient(90deg,var(--acc),var(--acc-2));color:#0a0d10}
    .btn.ghost{border:1px solid rgba(255,255,255,.16);color:var(--text);background:transparent}

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px){
      .hero .grid{grid-template-columns:1fr}
      .hero-visual{height:320px}
      .services{grid-template-columns:repeat(2,1fr)}
      .pricing{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 640px){
      .services{grid-template-columns:1fr}
      .pricing{grid-template-columns:1fr}
      .navlinks{display:none}
    }








    

/* Footer */
footer {
  background: linear-gradient(180deg, #000000, #0b0f29);
  padding: 30px 20px;
  text-align: center;
  color: #e0e0e0;
  margin-top: 80px;
  border-top: 1px solid rgba(23, 2, 255, 0.2);
  z-index: 10; 

}

footer h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  background: linear-gradient(to right, #ffffff, #1702ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  
}

.footer-links, .socials {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a, .socials a {
  color: #aaa;
  text-decoration: none;
  transition: 0.3s;
  font-weight: 500;
    z-index: 10; 

}

.footer-links a:hover, .socials a:hover {
  color: #1702ff;
  text-shadow: 0 0 8px rgba(23, 2, 255, 0.6);
}


.copy {
  margin-top: 40px;
  font-size: 0.9rem;
  color: #888;
}