/* styles.css */
:root{
  --primary:#4f46e5;
  --primary-glow:rgba(79,70,229,.12);
  --dark:#0f172a;
  --text-main:#1e293b;
  --text-light:#64748b;
  --bg-white:#ffffff;
  --radius:24px;
  --transition:all .4s cubic-bezier(.23,1,.32,1);

  --container:1400px;

  --header-h:84px;
  --logo-h:100px;

  --hero-pad-top:calc(var(--header-h) + 44px);
  --hero-pad-bottom:60px;

  /* Adjusted drawer width based on request */
  --drawer-w:280px; 
  --drawer-pad:24px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;overflow-x:hidden;position:relative;background:var(--bg-white);color:var(--text-main);font-family:'Plus Jakarta Sans',sans-serif;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{isolation:isolate}

.ambient-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, var(--primary-glow) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(147,51,234,.08) 0%, transparent 50%);
  animation:pulseBg 12s infinite alternate ease-in-out;
}
.vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  box-shadow:inset 0 0 150px rgba(79,70,229,.12);
}
@keyframes pulseBg{0%{transform:scale(1)}100%{transform:scale(1.1)}}

/* HEADER */
header{
  position:fixed;top:0;left:0;width:100%;
  z-index:3000;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
nav{
  max-width:var(--container);
  margin:0 auto;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
}
.logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;position:relative;z-index:3050}
.logo-link img{height:var(--logo-h);width:auto;display:block;transition:var(--transition);will-change:transform}

.nav-links{display:flex;list-style:none;gap:3rem;align-items:center}
.nav-links a{text-decoration:none;color:var(--text-main);font-weight:950;font-size:.95rem}

/* EXACT SAME BUTTON AS OTHER PAGES */
.btn-nav{
  background:var(--dark);
  color:#fff !important;
  padding:.8rem 1.6rem;
  border-radius:12px;
  font-weight:950;
  transition:var(--transition);
}

/* Burger - Default Desktop State */
.burger{
  display:none;
  cursor:pointer;
  z-index:4000; /* High Z-index ensures it stays on top of drawer */
  flex-direction:column;
  gap:6px;
  padding:10px;
  background:transparent;
  border:none;
}
.burger span{display:block;width:28px;height:3px;background:var(--dark);border-radius:2px;transition:.3s}

/* Burger Animation to X */
.burger.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Backdrop */
.nav-backdrop{
  position:fixed;inset:0;
  background:transparent;
  opacity:0;visibility:hidden;
  transition:var(--transition);
  z-index:2500;
  pointer-events:none;
}
.nav-backdrop.active{
  opacity:1;visibility:visible;
  pointer-events:auto;
}

/* MOBILE DRAWER */
@media (max-width:900px){
  nav{padding:0 16px}
  
  /* Fixed Burger Position for Mobile */
  .burger{
    display:flex;
    position:fixed;
    top:22px; /* Aligned with header center */
    right:16px;
    margin:0;
  }

  .nav-links{
    position:fixed;
    top:0;
    right:0; /* Attached to side */
    width:var(--drawer-w); /* 280px - reduced width */
    height:100vh; /* Full height - no hover */
    border-radius:0; /* Flat edge */
    
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-left:1px solid rgba(0,0,0,.06);
    box-shadow:-10px 0 30px rgba(0,0,0,.10);
    
    /* Padding top allows space for the X button */
    padding:80px var(--drawer-pad) var(--drawer-pad);

    flex-direction:column;
    gap:10px !important;
    justify-content:flex-start;
    align-items:stretch;

    transform:translateX(100%);
    transition:.5s cubic-bezier(.23,1,.32,1);
    z-index:3200;
  }
  .nav-links.active{transform:translateX(0)}

  .nav-links li{width:100%}
  .nav-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 16px;
    border-radius:14px;
    font-size:1.15rem;
  }
  .nav-links a:hover{background:#f6f8ff}
  
  .nav-links .btn-nav{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 16px;
    border-radius:14px;
    font-size:1.15rem;
    background:transparent;
    color:var(--text-main) !important;
    box-shadow:none;
  }
  .nav-links .btn-nav:hover{
    background:#f6f8ff;
  }

  :root{
    --header-h:76px;
    --logo-h:100px;
    --hero-pad-top:calc(var(--header-h) + 28px);
  }
}

/* HERO */
.hero{
  padding:var(--hero-pad-top) 1.5rem var(--hero-pad-bottom);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  position:relative;
}
.hero-logo{
  height:110px;
  width:auto;
  margin:0 0 18px;
  animation:swooshIn 1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes swooshIn{from{opacity:0;transform:translateX(-40px) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}

h1{
  font-size:clamp(2.5rem,8vw,4.5rem);
  font-weight:950;
  line-height:1.1;
  margin-bottom:1rem;
  letter-spacing:-.04em;
}
.gradient-text{
  background:linear-gradient(135deg,#4f46e5 0%,#9333ea 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p{
  font-size:1.3rem;
  color:var(--text-light);
  max-width:750px;
  margin-bottom:2rem;
  line-height:1.6;
}
@media (max-width:900px){
  .hero{padding:var(--hero-pad-top) 1.25rem 44px}
  .hero-logo{height:92px;margin-bottom:14px}
  .hero p{font-size:1.08rem;margin-bottom:1.6rem}
}

/* ROCKET */
#rocket-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#rocket{
  position:absolute;
  font-size:clamp(12px, 1.6vw, 18px);
  line-height:1;
  color:var(--primary);
  z-index:10;
  pointer-events:none;
  display:none;
  filter:drop-shadow(0 0 10px var(--primary-glow));
  transform-origin:50% 50%;
  will-change:transform,left,top;
}
#rocket i{display:block;line-height:1}
@media (max-width:900px){
  #rocket{font-size:clamp(11px, 3.6vw, 15px)}
}

.hero-cta-group{display:flex;flex-direction:column;align-items:center;gap:20px}
#redo-box{
  opacity:0;visibility:hidden;transform:translateY(10px);
  background:#fff;padding:10px 20px;border-radius:100px;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
  border:1px solid rgba(79,70,229,.15);
  transition:var(--transition);cursor:pointer;
  display:flex;align-items:center;gap:8px;font-weight:950;color:var(--text-main);
  font-size:.9rem;
}
#redo-box.visible{opacity:1;visibility:visible;transform:translateY(0)}
#redo-box:hover{background:#f8faff;border-color:var(--primary)}

/* CONTENT */
.separator-container{width:100%;max-width:1000px;margin:34px auto 0;position:relative;padding-bottom:34px}
.tech-pills{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pill{
  background:#fff;border:1px solid rgba(0,0,0,.08);
  padding:8px 16px;border-radius:100px;font-size:.85rem;font-weight:950;
  opacity:0;transform:translateY(-100px);animation:pillDrop .8s forwards;
}
@keyframes pillDrop{to{opacity:1;transform:translateY(0)}}
.line-separator{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(79,70,229,.3),transparent)}

.section{padding:0 1.5rem 80px;max-width:1300px;margin:-10px auto 0;position:relative;z-index:10}

.bento-grid{display:grid;gap:24px;width:100%}
.bento-card{
  background:#fff;border-radius:var(--radius);
  padding:3.5rem;
  border:1px solid rgba(0,0,0,.05);
  transition:var(--transition);
  box-shadow:0 10px 40px rgba(0,0,0,.02);
  display:flex;flex-direction:column;
}
.bento-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px rgba(0,0,0,.08);border-color:var(--primary)}
.service-icon{
  font-size:2.5rem;color:var(--primary);
  margin-bottom:1.5rem;background:#f8fafc;
  width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:18px;
}
.bento-card h3{font-size:1.8rem;margin-bottom:1rem;font-weight:950}
.bento-card p{color:var(--text-light);font-size:1.1rem;line-height:1.6}

.bento-3{grid-template-columns:repeat(3,1fr)}
.bento-2{grid-template-columns:repeat(2,1fr)}
.wide{grid-column:span 2}
.tall{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}

@media (max-width:900px){
  .bento-3,.bento-2{grid-template-columns:1fr !important;gap:16px}
  .wide,.tall{grid-column:span 1 !important;grid-row:span 1 !important}
  .bento-card{padding:2rem !important}
}

/* Contact form */
.contact-form{display:grid;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-weight:950;font-size:.9rem;color:var(--text-main)}
.form-group input,.form-group textarea{
  padding:16px;border-radius:12px;border:1px solid rgba(0,0,0,.1);
  background:#fcfcfd;font-family:inherit;font-size:1rem;width:100%;transition:var(--transition);
}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}
.btn-submit{
  background:var(--primary);color:#fff;padding:18px;border:none;border-radius:12px;
  font-weight:950;font-size:1.1rem;cursor:pointer;transition:var(--transition);
}
.btn-submit:hover{background:var(--dark);transform:scale(1.02)}
@media (max-width:900px){.form-row{grid-template-columns:1fr !important}}

/* Contact info list */
.contact-info-list{list-style:none;display:grid;gap:30px;margin-top:20px}
.info-item{display:flex;align-items:flex-start;gap:15px}
.info-item i{font-size:1.2rem;color:var(--primary);background:#f8fafc;padding:12px;border-radius:10px}

/* Footer */
footer{
  background:var(--dark);color:#fff;
  padding:100px 2.5rem 60px;margin-top:100px;
  border-radius:60px 60px 0 0;
}
.footer-content{
  max-width:1300px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start}
.footer-logo{height:90px;width:auto;filter:brightness(0) invert(1);display:block;margin-bottom:12px}
.footer-brand p{opacity:.6;font-size:1rem;line-height:1.4}
.footer-email{font-size:2.2rem;font-weight:950;color:#fff;text-decoration:none;transition:var(--transition)}
.footer-email:hover{color:var(--primary)}
@media (max-width:900px){
  footer{padding:80px 1.5rem 50px;border-radius:44px 44px 0 0}
  .footer-content{flex-direction:column;align-items:center;text-align:center;gap:3rem}
  .footer-brand{align-items:center}
  .footer-email{font-size:1.5rem;word-break:break-all}
}

/* Thank you page */
.success-icon{font-size:4rem;color:#10b981;margin-bottom:1.5rem;animation:bounce 2s infinite}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}
.btn-home{background:var(--dark);color:#fff;padding:1.1rem 2.5rem;border-radius:14px;text-decoration:none;font-weight:950;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center}
.btn-home:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.1)}
.success-gradient{background:linear-gradient(135deg,#10b981 0%, #4f46e5 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.success-line{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(16,185,129,.3),transparent)}
/* Footer Button Styling */
.btn-footer {
  background: #ffffff;
  color: var(--dark);
  padding: 1.2rem 2.5rem;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 950;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-footer:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(79, 70, 229, 0.4);
}

.btn-footer i {
  transition: transform 0.3s ease;
}

.btn-footer:hover i {
  transform: translateX(4px);
}