/* ===================== The InfiniteCode Solutions — main stylesheet ===================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy-900:#060818;
  --navy-800:#0b0f29;
  --navy-700:#12163b;
  --navy-600:#1a2052;
  --card-dark:rgba(18, 22, 59, 0.6);
  --purple:#7a63ff;
  --purple-light:#9d7aff;
  --blue:#4facfe;
  --cyan:#00f2fe;
  --magenta: #ff0844;
  --gradient-brand: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);
  --gradient-text: linear-gradient(135deg, var(--magenta) 0%, var(--purple) 50%, var(--cyan) 100%);
  --text-light:#ffffff;
  --text-muted:#b0b8d6;
  --text-muted-dark:#838cae;
  --gray-bg:#f4f6fa;
  --white:#ffffff;
  --border-dark:rgba(255,255,255,0.08);
  --radius:20px;
  --radius-sm:12px;
  --shadow-soft:0 14px 40px rgba(10,10,35,0.08);
  --shadow-glow:0 0 40px rgba(122,99,255,0.25);
  --font-head:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--navy-900); }
::-webkit-scrollbar-thumb { background: var(--navy-700); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--text-muted-dark);
  background:var(--white);
  line-height:1.65;
  width: 100%; max-width: 100vw;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none;}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--text-light); line-height:1.25; letter-spacing: -0.5px;}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.section-tag{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--purple);
  margin-bottom:14px;
}
.section-head{text-align:center; max-width:640px; margin:0 auto 50px;}
.section-head h2{font-size:36px; color:#161b40; margin-bottom:14px;}
.section-head p{color:#6b7191; font-size:16px;}
.light-section h2{color:#161b40;}

.pt-90 { padding-top: 90px; }
.pt-80 { padding-top: 80px; }
.mt-40 { margin-top: 40px; }
.bg-gray { background: var(--gray-bg) !important; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:8px;
  font-weight:600;
  font-size:15px;
  transition:all .3s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 8px 20px rgba(59,130,246,0.35);
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 30px rgba(122,99,255,0.45);
}
.btn-outline{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.35);
}
.btn-outline:hover{
  background:rgba(255,255,255,0.1);
  border-color:#fff;
  transform:translateY(-3px);
}
.btn-white{
  background:#fff;
  color:var(--navy-800);
}
.btn-white:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,0.2);}
.btn-block{width:100%;}

/* ===================== Header ===================== */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(6, 8, 24, 0.75);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-dark);
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:1280px;
  margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{width:5rem;}
.brand .brand-text{font-family:var(--font-head); font-weight:700; font-size:15px; color:#fff; line-height:1.15;}
.brand .brand-text span{display:block; font-size:11px; font-weight:400; color:var(--text-muted); letter-spacing:.5px;}
.brand .brand-text b{background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;}

.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{
  font-size:14.5px;
  font-weight:500;
  color:var(--text-muted);
  position:relative;
  padding:6px 0;
  transition:color .25s;
}
.nav-links a:hover, .nav-links a.active{color:#fff;}
.nav-links a.active::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:2px;
  background:var(--gradient-brand);
  border-radius:2px;
}
.nav-cta{display:flex; align-items:center; gap:18px;}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; z-index:1100;}
.hamburger span{width:26px; height:2.5px; background:#fff; border-radius:2px; transition:.3s;}
.hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ===================== Hero (home) ===================== */
.hero{
  background: url('../images/hero-bg.jpg') center/cover no-repeat, var(--navy-900);
  position:relative;
  padding:100px 24px 60px;
  overflow:hidden;
}
.hero-inner{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.hero-text h1{
  font-size:46px;
  font-weight:700;
  color:#fff;
  margin-bottom:18px;
  animation:fadeUp .8s ease both;
}
.hero-text h1 .grad{
  background:var(--gradient-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-text p{
  color:var(--text-muted);
  font-size:16px;
  max-width:480px;
  margin-bottom:30px;
  animation:fadeUp .8s ease .1s both;
}
.hero-btns{display:flex; flex-wrap: wrap; justify-content: center; gap:16px; margin-bottom:50px; animation:fadeUp .8s ease .2s both;}
.hero-visual{animation:fadeIn 1.2s ease .2s both;}
.hero-visual img{width:100%; animation:float 6s ease-in-out infinite;}

.stat-bar{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  background:linear-gradient(180deg,#12173f,#0e1236);
  border:1px solid var(--border-dark);
  border-radius:16px;
  padding:28px 20px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  box-shadow:var(--shadow-glow);
  margin-top:20px;
}
.stat-item{display:flex; align-items:center; gap:14px; justify-content:center;}
.stat-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; color:#fff; flex-shrink:0;
}
.stat-item:nth-child(1) .stat-icon{background:linear-gradient(135deg,#8b5cf6,#6c5ce7);}
.stat-item:nth-child(2) .stat-icon{background:linear-gradient(135deg,#3b82f6,#2563eb);}
.stat-item:nth-child(3) .stat-icon{background:linear-gradient(135deg,#22d3ee,#06b6d4);}
.stat-item:nth-child(4) .stat-icon{background:linear-gradient(135deg,#f59e0b,#f97316);}
.stat-item h4{font-size:22px; color:#fff; margin-bottom:2px;}
.stat-item span{font-size:12.5px; color:var(--text-muted);}

/* ===================== Services grid ===================== */
.services-section{padding:90px 0; background:var(--white);}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.service-card{
  background:rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:var(--radius);
  padding:36px 28px;
  box-shadow:var(--shadow-soft);
  transition:transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .4s ease, border-color .4s ease;
}
.service-card:hover{
  transform:translateY(-10px) scale(1.02); 
  box-shadow:0 24px 48px rgba(30,30,80,0.12);
  border-color: rgba(122, 99, 255, 0.25);
}
.service-icon{
  width:54px; height:54px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff;
  margin-bottom:20px;
}
.service-card h3{font-size:19px; color:#161b40; margin-bottom:10px;}
.service-card p{font-size:14.5px; color:#6b7191; margin-bottom:16px;}
.service-card .learn-more{font-size:14px; font-weight:600; color:var(--purple); display:inline-flex; align-items:center; gap:6px; transition:gap .25s;}
.service-card .learn-more:hover{gap:10px;}

.icon-blue{background:linear-gradient(135deg,#3b82f6,#2563eb);}
.icon-green{background:linear-gradient(135deg,#10b981,#059669);}
.icon-cyan{background:linear-gradient(135deg,#22d3ee,#0891b2);}
.icon-orange{background:linear-gradient(135deg,#f59e0b,#ea580c);}
.icon-indigo{background:linear-gradient(135deg,#6366f1,#4f46e5);}
.icon-pink{background:linear-gradient(135deg,#ec4899,#db2777);}

/* ===================== Tech stack ===================== */
.tech-section{
  padding:70px 0;
  background:var(--navy-800);
  text-align:center;
}
.tech-section .section-tag{color:#8b93ff;}
.tech-section h2{color:#fff; margin-bottom:40px; font-size:30px;}
.tech-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
}
.tech-item{
  width:90px; height:90px;
  background:var(--card-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--border-dark);
  border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transition:transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .4s ease, border-color .4s;
}
.tech-item:hover{
  transform:translateY(-8px) scale(1.05); 
  border-color:var(--purple);
  box-shadow: var(--shadow-glow);
}
.tech-item i{font-size:26px;}
.tech-item span{font-size:11px; color:var(--text-muted);}

/* ===================== Why choose us ===================== */
.why-section{padding:90px 0; background:var(--gray-bg);}
.why-grid{
  display:grid;
  grid-template-columns:1fr 300px 1fr;
  gap:40px;
  align-items:center;
}
.why-col{display:flex; flex-direction:column; gap:34px;}
.why-item{display:flex; gap:16px; align-items:flex-start;}
.why-icon{
  width:48px; height:48px; flex-shrink:0;
  background:#fff; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--purple); font-size:19px;
  box-shadow:var(--shadow-soft);
}
.why-item h4{font-size:16px; color:#161b40; margin-bottom:5px;}
.why-item p{font-size:13.5px; color:#6b7191;}
.why-visual{position:relative; display:flex; justify-content:center;}
.why-visual .circle-img{
  width:280px; max-width:100%; aspect-ratio: 1 / 1; height:auto; border-radius:50%;
  overflow:hidden; box-shadow:var(--shadow-soft);
}
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:var(--gradient-brand);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:20px;
  box-shadow:0 0 0 12px rgba(108,92,231,0.15);
  animation:pulse 2.4s infinite;
}

/* ===================== Testimonials ===================== */
.testimonials-section{padding:90px 0; background:var(--navy-800); position:relative;}
.testimonials-section .section-head h2, .testimonials-section .section-head p{color:#fff;}
.testimonials-section .section-head p{color:var(--text-muted);}
.testi-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-card{
  flex: 0 0 calc(33.333% - 16px);
  scroll-snap-align: center;
  background:var(--card-dark);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid var(--border-dark);
  border-radius:var(--radius);
  padding:32px 28px;
  transition:all .4s ease;
}
.testi-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(122, 99, 255, 0.3);
}
.testi-stars{color:#facc15; font-size:14px; margin-bottom:14px;}
.testi-card p{color:var(--text-muted); font-size:14.5px; margin-bottom:22px;}
.testi-person{display:flex; align-items:center; gap:12px;}
.testi-person img{width:44px; height:44px; border-radius:50%;}
.testi-person h5{font-size:14.5px; color:#fff;}
.testi-person span{font-size:12.5px; color:var(--text-muted);}
.testi-nav{display:flex; justify-content:center; gap:16px; margin-top:36px;}
.testi-nav button{
  width:40px; height:40px; border-radius:50%;
  background:var(--navy-700); border:1px solid var(--border-dark);
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:.25s;
}
.testi-nav button:hover{background:var(--gradient-brand);}

/* ===================== CTA band ===================== */
.cta-band{
  background:var(--gradient-brand);
  padding:44px 0;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.cta-inner h3{color:#fff; font-size:24px; margin-bottom:6px;}
.cta-inner p{color:rgba(255,255,255,0.85); font-size:14.5px;}

/* ===================== Footer ===================== */
.site-footer{background:var(--navy-900); padding:70px 0 0; color:var(--text-muted);}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.footer-brand p{font-size:14px; margin:16px 0 20px; max-width:280px;}
.footer-brand .brand{margin-bottom:4px;}
.social-links{display:flex; gap:10px;}
.social-links a{
  width:36px; height:36px; border-radius:50%;
  background:var(--navy-700);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:.25s;
}
.social-links a:hover{background:var(--gradient-brand); transform:translateY(-3px);}
.footer-col h4{color:#fff; font-size:15.5px; margin-bottom:20px;}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{font-size:14px; transition:color .25s;}
.footer-col ul li a:hover{color:#fff;}
.footer-col .contact-line{display:flex; gap:10px; font-size:14px; margin-bottom:14px; align-items:flex-start;}
.footer-col .contact-line i{color:var(--purple); margin-top:3px;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:22px 0; font-size:13px;
}
.footer-bottom .legal-links{display:flex; gap:20px;}

/* ===================== Inner page banner ===================== */
.page-banner{
  position:relative;
  background:url('../images/banner-city.svg') center/cover no-repeat, var(--navy-800);
  padding:90px 24px 46px;
  text-align:left;
  overflow:hidden;
}
.page-banner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,11,34,0.3), rgba(8,11,34,0.85));
}
.page-banner .container{position:relative; z-index:2;}
.page-banner h1{color:#fff; font-size:38px; margin-bottom:10px;}
.breadcrumb{font-size:14px; color:var(--text-muted); display:flex; gap:8px; align-items:center;}
.breadcrumb a{color:var(--text-muted);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .current{color:var(--purple);}

/* ===================== About page ===================== */
.about-section{padding:90px 0;}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.about-grid img{border-radius:var(--radius); box-shadow:var(--shadow-soft);}
.about-text h2{font-size:32px; color:#161b40; margin:12px 0 16px;}
.about-text p{margin-bottom:14px; font-size:15px;}
.about-points{margin:20px 0;}
.about-points li{display:flex; gap:10px; align-items:center; margin-bottom:10px; font-size:14.5px; color:#42486a;}
.about-points li i{color:var(--purple);}

.info-band{background:var(--navy-800); padding:0;}
.info-grid{display:grid; grid-template-columns:repeat(3,1fr);}
.info-item{padding:44px 30px; border-right:1px solid var(--border-dark); text-align:center;}
.info-item:last-child{border-right:none;}
.info-item i{font-size:26px; color:var(--purple-light); margin-bottom:14px;}
.info-item h4{color:#fff; font-size:17px; margin-bottom:8px;}
.info-item p{color:var(--text-muted); font-size:13.5px;}

.milestones-section{padding:90px 0; background:var(--gray-bg);}
.milestone-track{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; align-items:center; position:relative;}
.milestone{
  background:#fff; border-radius:var(--radius); padding:26px 16px; text-align:center;
  box-shadow:var(--shadow-soft); position:relative;
}
.milestone h4{color:var(--purple); font-size:20px; margin-bottom:6px;}
.milestone p{font-size:13px; color:#6b7191;}
.milestone-arrow{text-align:center; color:#c7ccdf; font-size:18px;}

/* ===================== Services page ===================== */
.services-page-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

/* ===================== Portfolio ===================== */
.portfolio-filters{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:44px;}
.filter-btn{
  padding:10px 22px; border-radius:24px; font-size:14px; font-weight:500;
  border:1px solid #e4e6f2; color:#5a6089; background:#fff; transition:.25s;
}
.filter-btn.active, .filter-btn:hover{background:var(--gradient-brand); color:#fff; border-color:transparent;}
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.portfolio-card{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);
  border:1px solid #eef0f8; transition:transform .3s;
}
.portfolio-card:hover{transform:translateY(-6px);}
.portfolio-card .thumb{overflow:hidden;}
.portfolio-card .thumb img{transition:transform .4s ease;}
.portfolio-card:hover .thumb img{transform:scale(1.06);}
.portfolio-info{padding:20px 22px;}
.portfolio-info h4{font-size:17px; color:#161b40; margin-bottom:4px;}
.portfolio-info span{font-size:13px; color:var(--purple); font-weight:500;}

/* ===================== Careers ===================== */
.careers-intro{padding:90px 0;}
.careers-benefits{margin:18px 0 28px;}
.careers-benefits li{display:flex; gap:10px; align-items:center; margin-bottom:12px; font-size:14.5px; color:#42486a;}
.careers-benefits li i{color:var(--purple);}

.positions-section{padding:0 0 90px;}
.position-list{display:flex; flex-direction:column; gap:16px;}
.position-card{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:#fff; border:1px solid #eef0f8; border-radius:var(--radius);
  padding:22px 26px; box-shadow:var(--shadow-soft); transition:transform .25s;
}
.position-card:hover{transform:translateY(-4px);}
.position-card h4{font-size:17px; color:#161b40; margin-bottom:6px;}
.position-meta{display:flex; gap:16px; font-size:13px; color:#6b7191;}
.position-meta span{display:flex; align-items:center; gap:6px;}

.resume-cta{background:var(--gradient-brand); padding:38px 0;}

/* ===================== Contact ===================== */
.contact-info-band{padding:60px 0 20px;}
.contact-info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.contact-info-card{
  background:#fff; border:1px solid #eef0f8; border-radius:var(--radius);
  padding:26px 20px; text-align:center; box-shadow:var(--shadow-soft);
}
.contact-info-card i{font-size:22px; color:#fff; width:52px; height:52px; border-radius:50%; background:var(--gradient-brand); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.contact-info-card h4{font-size:15.5px; color:#161b40; margin-bottom:6px;}
.contact-info-card p{font-size:13.5px;}

.contact-main{padding:60px 0 90px;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.contact-form-wrap h3{font-size:24px; color:#161b40; margin-bottom:8px;}
.contact-form-wrap > p{margin-bottom:24px; font-size:14.5px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.form-group input, .form-group textarea{
  width:100%; padding:14px 16px; border:1px solid #e4e6f2; border-radius:8px;
  font-family:inherit; font-size:14.5px; color:#2b2f4a; transition:border-color .25s;
}
.form-group input:focus, .form-group textarea:focus{outline:none; border-color:var(--purple);}
.form-group{margin-bottom:16px;}
.contact-map img{border-radius:var(--radius); box-shadow:var(--shadow-soft); width:100%;}

/* ===================== Animations ===================== */
@keyframes fadeUp{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(122,99,255,0.4);} 70%{box-shadow:0 0 0 20px rgba(122,99,255,0);} 100%{box-shadow:0 0 0 0 rgba(122,99,255,0);}}
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.reveal{opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ===================== Responsive ===================== */
@media (max-width:1080px){
  .hero { background-position: left center; }
  .hero-inner{grid-template-columns:1fr; text-align:center;}
  .hero-text p{margin-left:auto; margin-right:auto;}
  .hero-btns{justify-content:center;}
  .hero-visual{order:-1; max-width:440px; margin:0 auto;}
  .why-grid{grid-template-columns:1fr; text-align:center;}
  .why-item{flex-direction:column; align-items:center; text-align:center;}
  .about-grid{grid-template-columns:1fr;}
  .about-grid .about-img{order:-1;}
  .testi-card{flex: 0 0 calc(50% - 12px);}
  .milestone-track{grid-template-columns:repeat(3,1fr); row-gap:30px;}
  .milestone-arrow:nth-child(6),.milestone-arrow:nth-child(8){display:none;}
  .contact-grid{grid-template-columns:1fr;}
}

@media (max-width:860px){
  body.menu-open { overflow: hidden; }
  body.menu-open::before {
    content: ''; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    z-index: 990; opacity: 1; transition: opacity 0.4s ease;
  }
  body:not(.menu-open)::before {
    content: ''; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0); z-index: -1; opacity: 0; transition: opacity 0.4s ease, z-index 0s 0.4s; pointer-events: none;
  }

  .hamburger{display:flex; position: relative; z-index: 1100;}
  .nav-links{
    position:fixed; top:0; right: 0; transform: translateX(110%);
    width:85%; max-width:360px; height:100vh;
    background:rgba(6, 8, 24, 0.85); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid var(--border-dark);
    flex-direction:column; padding:120px 40px 40px; gap:16px;
    transition:transform .5s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow:-20px 0 60px rgba(0,0,0,0.5);
    z-index: 1000;
    overflow-y: auto;
  }
  .nav-links.open{transform: translateX(0);}
  
  .nav-links a {
    font-size: 20px; font-weight: 600; padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06); width: 100%;
    opacity: 0; transform: translateX(30px); transition: all 0.4s ease;
  }
  .nav-links.open a { opacity: 1; transform: translateX(0); }
  .nav-links.open a:nth-child(1) { transition-delay: 0.1s; }
  .nav-links.open a:nth-child(2) { transition-delay: 0.15s; }
  .nav-links.open a:nth-child(3) { transition-delay: 0.2s; }
  .nav-links.open a:nth-child(4) { transition-delay: 0.25s; }
  .nav-links.open a:nth-child(5) { transition-delay: 0.3s; }
  .nav-links.open a:nth-child(6) { transition-delay: 0.35s; }
  .nav-links.open a:nth-child(7) { transition-delay: 0.4s; }

  .nav-links a.active { color: var(--cyan); border-bottom-color: rgba(34, 211, 238, 0.3); }
  .nav-links a.active::after { display: none; }
  
  .nav-cta .btn-primary{display:none;}
  .stat-bar{grid-template-columns:repeat(2,1fr);}
  .services-grid, .services-page-grid, .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .info-grid{grid-template-columns:1fr;}
  .info-item{border-right:none; border-bottom:1px solid var(--border-dark); padding: 34px 24px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-info-grid{grid-template-columns:repeat(2,1fr);}
  .testi-card{flex: 0 0 100%;}
  .milestone-track{grid-template-columns:repeat(2,1fr);}
  .milestone-arrow{display:none;}
  .services-section, .why-section, .testimonials-section, .about-section, .milestones-section, .careers-intro { padding: 70px 0; }
  .tech-section, .site-footer { padding-top: 60px; }
  .positions-section { padding-bottom: 70px; }
  .contact-main { padding: 50px 0 70px; }
  .pt-90, .pt-80 { padding-top: 60px; }
}

@media (max-width:560px){
  .hero-text h1{font-size:32px;}
  .stat-bar{grid-template-columns:1fr 1fr; padding:22px 14px;}
  .stat-item{flex-direction:column; text-align:center; gap:8px;}
  .services-grid, .services-page-grid, .portfolio-grid{grid-template-columns:1fr;}
  .section-head h2{font-size:26px;}
  .section-head{margin-bottom: 34px;}
  .footer-grid{grid-template-columns:1fr;}
  .contact-info-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column; text-align:center;}
  .milestone-track{grid-template-columns:1fr;}
  .position-card{flex-direction:column; align-items:flex-start;}
  .page-banner h1{font-size:28px;}
  .page-banner { padding: 60px 24px 30px; }
  .footer-bottom{flex-direction:column; text-align:center;}
  .services-section, .why-section, .testimonials-section, .about-section, .milestones-section, .careers-intro { padding: 50px 0; }
  .tech-section, .site-footer { padding-top: 40px; }
  .positions-section { padding-bottom: 50px; }
  .contact-main { padding: 40px 0 50px; }
  .pt-90, .pt-80 { padding-top: 50px; }
  .mt-40 { margin-top: 24px; }
  .about-text h2 { font-size: 26px; }
  .info-item { padding: 24px 20px; }
}