/* Base Styles & Variables (Dark Futuristic with Liquid Gradients) */
:root{
  --bg:#0b0d16; /* deep space */
  --card:#121528;
  --text:#e9ecff;
  --muted:#94a0d8;
  --accent1:#6572F5; /* left */
  --accent2:#4B53AB; /* right */
  --accentGlow: 0 0 32px rgba(101,114,245,.35), 0 0 64px rgba(75,83,171,.25);
  --box-shadow: 0 10px 30px rgba(0,0,0,.25);
  --transition: all .2s ease;
}

*{margin:0; padding:0; box-sizing:border-box}

html { scroll-behavior: smooth; }

body{
  font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

.container{width:min(1200px, 92%); margin-inline:auto; padding:0 0}

h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.2; margin-bottom: 1rem; color: var(--text); }

h1 {
    font-size: 2.5rem;
}

/* Hero Title Professional Animation */
.hero h1 {
    background: linear-gradient(90deg, 
        var(--accent1) 0%, 
        var(--accent2) 25%, 
        #ffffff 50%, 
        var(--accent2) 75%, 
        var(--accent1) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
    position: relative;
    display: inline-block;
    padding-bottom: 1rem;
    text-shadow: 0 0 30px rgba(101,114,245,.3);
}

.hero h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    box-shadow: 0 0 20px rgba(101,114,245,.6);
    animation: expandWidth 1.5s ease-out 0.5s forwards;
}

@keyframes shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@keyframes expandWidth {
    from { width: 0; }
    to { width: 100%; }
}

h2 { font-size: 2rem; text-align: center; margin-bottom: 3rem; position: relative; padding-bottom: 1rem; }

h2:after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:80px; height:4px; background: linear-gradient(135deg,var(--accent1),var(--accent2)); border-radius:2px; box-shadow: var(--accentGlow); animation: pulse 2s ease-in-out infinite}

@keyframes pulse{0%, 100%{opacity: 1; box-shadow: var(--accentGlow)}50%{opacity: 0.7; box-shadow: 0 0 20px rgba(101,114,245,.2)}}

p { margin-bottom: 1.5rem; color: var(--muted); }

a { text-decoration:none; color: var(--text); transition: var(--transition); opacity:.9 }

a:hover { opacity:1 }

img { max-width:100%; height:auto }

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700; text-align:center; cursor:pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border:none; outline:none; font-size:1rem; position: relative; overflow: hidden}
.btn::before{content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background: rgba(255,255,255,.2); transform:translate(-50%,-50%); transition: width .4s, height .4s}
.btn:hover::before{width:300px; height:300px}
.btn:hover{transform:translateY(-3px) scale(1.02)}

.btn-primary{background: linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; box-shadow: var(--accentGlow); border:0}

.btn-primary:hover{filter:saturate(1.1) brightness(1.1); box-shadow: 0 0 40px rgba(101,114,245,.5), 0 0 80px rgba(75,83,171,.3)}

.btn-secondary{background: rgba(255,255,255,.06); color: var(--text); border:1px solid rgba(255,255,255,.08)}

.btn-secondary:hover{background: rgba(255,255,255,.1)}

/* Header & Navigation */
.header{position:fixed; top:0; left:0; width:100%; background: rgba(18,21,40,.8); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06); z-index:1000; padding:14px 0; transition: all 0.2s ease}

.header.scrolled{background: rgba(18,21,40,.95); box-shadow: 0 5px 30px rgba(0,0,0,.3); padding: 10px 0}

.navbar{display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; padding:0 20px; width:100%}

.logo a{display:block; height:100%}

.logo img{height:50px; width:auto; display:block; transition: all 0.2s ease}

.logo img:hover{transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(101,114,245,.5))}

.nav-links{display:flex; list-style:none; margin:0; padding:0; align-items:center}

.nav-links li{margin-left:1.2rem; display:flex; align-items:center}

.nav-links li:first-child {
    margin-left: 0;
}

.nav-links a{font-weight:600; color: var(--text); opacity:.85; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-decoration:none; font-size:1rem; padding: .5rem 0; position:relative}

.nav-links a:not(.btn):after{content:''; position:absolute; width:0; height:2px; bottom:0; left:0; background: linear-gradient(135deg,var(--accent1),var(--accent2)); transition: var(--transition); box-shadow: var(--accentGlow)}

.nav-links a:not(.btn):hover:after{width:100%}

.nav-links a:hover{opacity:1}

.nav-links .btn{padding: .5rem 1.1rem; margin-left: 1rem; color:#fff !important}

.nav-links .btn:hover{color:#fff !important}

.hamburger{display:none; flex-direction:column; cursor:pointer}

.hamburger span{display:block; width:25px; height:3px; background: linear-gradient(135deg,var(--accent1),var(--accent2)); margin:3px 0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}

/* Hero Section */
.hero{padding: 80px 0 60px; min-height: calc(100vh - 80px); background: radial-gradient(1200px 600px at 10% 10%, rgba(101,114,245,.15), transparent 40%), radial-gradient(900px 500px at 90% 10%, rgba(75,83,171,.15), transparent 40%); overflow:hidden; text-align:center; position: relative; transition: all 0.2s ease}

/* Section separators and banding */
section{position:relative}
section:not(.hero)::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent)}
section:nth-of-type(even){background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}

.hero .container{display:grid; place-items:center; min-height:inherit}

.hero-content{flex:unset; min-width:300px; padding-right:0; max-width:860px; margin:0 auto}


.hero .subheadline{font-size:1.4rem; font-weight:700; color: var(--text); opacity:0; margin-bottom:.5rem; animation: fadeInUp 0.8s ease-out 0.3s forwards}

.hero .tagline{font-size:1.1rem; color: var(--muted); margin: 0 auto 2rem; max-width: 720px; opacity:0; animation: fadeInUp 0.8s ease-out 0.6s forwards}

.cta-buttons{display:flex; gap:14px; margin-top:2rem; justify-content:center; align-items:center; flex-wrap:wrap; margin-left:auto; margin-right:auto; opacity:0; animation: fadeInUp 0.8s ease-out 0.9s forwards}
/* Ensure buttons align perfectly centered */
.cta-buttons .btn{display:inline-flex; align-items:center; justify-content:center}

@keyframes float{0%{ transform: translateY(0)}50%{ transform: translateY(-16px) scale(1.03)}100%{ transform: translateY(0)}}

/* Services Section */
.services{padding:100px 0; background: transparent}

.services-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:18px; margin-top:3rem}

.service-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:22px; text-align:center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}

.service-card:hover{transform: translateY(-8px) scale(1.02); box-shadow: var(--box-shadow), 0 0 40px rgba(101,114,245,.15)}

.service-icon{font-size:2.2rem; color: var(--text); margin-bottom:1.2rem; transition: all 0.25s ease}

.service-card:hover .service-icon{transform: scale(1.1) rotateY(360deg); color: var(--accent1)}

.service-card h3{margin-bottom:.6rem; color: var(--text)}

/* About Section */
.about{padding: 6rem 0; background: transparent}

.about-content{max-width:800px; margin:0 auto; text-align:center}

.seo-copy{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); padding:2rem; border-radius:18px; margin-top:3rem; border:1px solid rgba(255,255,255,.06)}

.seo-copy h3{color: var(--text); margin-bottom:1rem}

/* Why Choose Us Section */
.why-us{padding:100px 0; background: transparent}

.features-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:18px; margin-top:3rem}

.feature{text-align:center; padding:20px; border-radius:16px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06)}

.feature:hover{transform: translateY(-8px) scale(1.02); box-shadow: var(--box-shadow), 0 0 40px rgba(101,114,245,.15); border-color: rgba(101,114,245,.3)}

.feature-icon{font-size:2.2rem; color: var(--text); margin-bottom:1.2rem; transition: all 0.25s ease}

.feature:hover .feature-icon{transform: scale(1.15) rotate(5deg); color: var(--accent1)}

.feature h3{margin-bottom:.6rem; color: var(--text)}

/* Contact Section */
.contact{padding:100px 0; background: transparent}

.contact-container{display:grid; grid-template-columns:1.5fr 1fr; gap:3rem; margin-top:3rem}

.contact-form{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); padding:2rem; border-radius:18px; border:1px solid rgba(255,255,255,.06)}

.form-group{margin-bottom:1.2rem}

.form-group input,
.form-group select,
.form-group textarea{width:100%; padding:12px 14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--text); border-radius:12px; font-family:'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:1rem; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}

/* Placeholders */
input::placeholder,
textarea::placeholder{color:#b8c0f0}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{outline:none; border-color: var(--accent1); box-shadow: 0 0 0 3px rgba(101,114,245,.3), 0 0 20px rgba(101,114,245,.2); transform: translateY(-2px)}

.form-group textarea{resize:vertical; min-height:150px}

.contact-info{background:linear-gradient(135deg, rgba(101,114,245,.15), rgba(75,83,171,.15)); padding:2rem; border-radius:18px; color:var(--text); border:1px solid rgba(255,255,255,.08); box-shadow: var(--accentGlow)}

.contact-info h3{color:var(--text); margin-bottom:1.5rem; position:relative; padding-bottom:.8rem; font-size: 1.4rem}

.contact-info h3:after{content:''; position:absolute; bottom:0; left:0; width:60px; height:3px; background: linear-gradient(135deg,var(--accent1),var(--accent2)); box-shadow: var(--accentGlow)}

.contact-info p{margin-bottom:1.2rem; color: var(--text); opacity:.95; display:flex; align-items:center; font-size: 1rem}

.contact-info p a{color: var(--text); text-decoration: none; transition: all 0.2s ease}

.contact-info p a:hover{color: var(--accent1)}

.contact-info i{margin-right:12px; color: var(--accent1); font-size: 1.1rem; width: 20px}

.social-links{display:flex; gap:1rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); flex-wrap:wrap; justify-content:center}

.social-links a{display:flex; align-items:center; justify-content:center; width:45px; height:45px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:12px; color: var(--text); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.1rem}

.social-links a:hover{background: var(--accent1); border-color: var(--accent1); color: white; transform: translateY(-5px) scale(1.1); box-shadow: 0 5px 20px rgba(101,114,245,.5)}

/* Footer */
.footer{background: transparent; color: var(--text); padding:80px 0 20px; border-top:1px solid rgba(255,255,255,.06)}

.footer-content{display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:3rem; margin-bottom:3rem}

.footer-about h3{color: var(--text); font-size:1.5rem; margin-bottom:1.2rem}

.footer-about p{color: var(--muted); margin-bottom:1.2rem}

.footer h4{color: var(--text); font-size:1.2rem; margin-bottom:1rem; position:relative; padding-bottom:.5rem}

.footer h4:after{content:''; position:absolute; bottom:0; left:0; width:40px; height:2px; background: linear-gradient(135deg,var(--accent1),var(--accent2)); box-shadow: var(--accentGlow)}

.footer-links ul,
.footer-services ul{list-style:none}

.footer-links li,
.footer-services li{margin-bottom:.8rem}

.footer-links a,
.footer-services a{color: var(--muted); transition: var(--transition); display:block}

.footer-links a:hover,
.footer-services a:hover{color: var(--text); padding-left:5px}

.footer-contact p{color: var(--muted); margin-bottom:1rem; display:flex; align-items:center}

.footer-contact i{margin-right:10px; color: var(--accent1)}

.footer-bottom{border-top:1px solid rgba(255,255,255,.06); padding-top:20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem}

.footer-legal{display:flex; gap:1rem}

.footer-legal a{color: var(--muted); font-size:.9rem; transition: var(--transition)}

/* ======================
   Team Section (New Design)
   ====================== */
.team-section {
  padding: 100px 0;
  background: transparent;
  text-align: center;
}

.team-section .team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.team-section .team-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

.team-section .team-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--box-shadow), 0 0 40px rgba(101,114,245,.2);
  border-color: rgba(101,114,245,.3);
}

.team-section .team-photo {
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(101,114,245,.1), rgba(75,83,171,.1));
}

.team-section .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  filter: grayscale(20%);
}

.team-section .team-card:hover .team-photo img {
  transform: scale(1.08);
  filter: grayscale(0%);
}

.team-section .team-info {
  padding: 1.5rem;
}

.team-section .team-info h3 {
  color: var(--text);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.team-section .team-role {
  color: var(--accent1);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.team-section .team-bio {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.team-section .team-social {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 1rem;
}

.team-section .team-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.9rem;
}

.team-section .team-social a:hover {
  background: var(--accent1);
  border-color: var(--accent1);
  color: white;
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 5px 15px rgba(101,114,245,.4);
}

/* Old Team Section Styles (Keep for backward compatibility) */
#team {
  padding: 80px 0;
  background: var(--bg);
  text-align: center;
  width: 100%;
}

#team h2 {
  text-align: center;
  color: var(--text);
  margin: 0 auto 5px;
  padding-bottom: 0.8rem;
  position: relative;
  display: inline-block;
  width: auto;
}

#team h3 {
  text-align: center;
  color: var(--text);
  margin: 15px 0 20px;
  font-size: 1.6rem;
  position: relative;
  display: inline-block;
}

#team h3:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border-radius: 2px;
}

#team .tagline {
  text-align: center;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto 15px;
  font-size: 1.1rem;
  line-height: 1.5;
}

.team-hero {
  padding: 20px 0 15px;
  text-align: center;
  margin: 0 auto 10px;
  max-width: 100%;
  width: 100%;
}

.team-hero h2 {
  position: relative;
  display: inline-block;
  margin: 0 auto 1rem;
  padding-bottom: 0.5rem;
}

.team-hero h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border-radius: 2px;
  box-shadow: var(--accentGlow);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
  justify-items: center;
  width: 100%;
  box-sizing: border-box;
}
.team-card {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  height: 400px;
  width: 100%;
  max-width: 300px;
  transition: all 0.3s ease;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.team-card.premium {
  outline: 1px solid rgba(101, 114, 245, 0.3);
  box-shadow: 0 0 20px rgba(101, 114, 245, 0.3);
}

.team-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), var(--accentGlow);
}

.team-card .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: all 0.5s ease;
  z-index: 1;
}

.team-card .photo.placeholder {
  background: radial-gradient(120% 80% at 0% 0%, rgba(101, 114, 245, 0.25), transparent 50%),
              radial-gradient(120% 80% at 100% 0%, rgba(75, 83, 171, 0.25), transparent 50%),
              linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.team-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 60%);
  z-index: 2;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.team-card .info {
  position: relative;
  width: 100%;
  padding: 25px;
  color: white;
  z-index: 3;
  transform: translateY(20px);
  transition: all 0.3s ease;
  opacity: 0;
}

.team-card:hover .info {
  transform: translateY(0);
  opacity: 1;
}

.team-card .info h4 {
  font-size: 1.4rem;
  margin: 0 0 5px;
  color: white;
}

.team-card .info .role {
  margin: 0;
  color: var(--accent1);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ======================
   Clients Section
   ====================== */
.clients {
  padding: 100px 0;
  background: transparent;
  text-align: center;
}

.section-subtitle {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 3rem;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2rem;
  margin-bottom: 5rem;
  align-items: center;
}

.client-logo {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: none;
  transition: var(--transition);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-logo:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: var(--accentGlow), 0 10px 30px rgba(0,0,0,.3);
  border-color: rgba(101, 114, 245, 0.4);
}

.client-logo img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: var(--transition);
}

.client-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.testimonials {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
}

.testimonials h3 {
  color: var(--text);
  margin-bottom: 2.2rem;
  position: relative;
  display: inline-block;
}

.testimonials h3:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: var(--accentGlow);
}

.testimonial-slider {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.testimonial {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: none;
  margin: 1rem;
  transition: var(--transition);
}

.testimonial-content {
  position: relative;
}

.testimonial-content p {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text);
  opacity: 0.9;
  line-height: 1.8;
  margin-bottom: 1.2rem;
  position: relative;
  padding: 0 1.2rem;
}

.testimonial-content p:before,
.testimonial-content p:after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 2rem;
  color: var(--accent1);
  opacity: 0.35;
  position: absolute;
}

.testimonial-content p:before {
  content: '\f10d';
  top: -15px;
  left: -10px;
}

.testimonial-content p:after {
  content: '\f10e';
  bottom: -25px;
  right: -10px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
}

.testimonial-author h4 {
  margin: 0;
  color: var(--text);
  font-size: 1.1rem;
}

.testimonial-author p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.testimonial-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.testimonial-prev,
.testimonial-next {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.testimonial-prev:hover,
.testimonial-next:hover {
  background: var(--accent1);
  color: white;
  border-color: var(--accent1);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 5px 15px rgba(101,114,245,.4);
}

.testimonial-dots {
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: var(--transition);
}

.dot.active {
  background: var(--accent1);
  transform: scale(1.2);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 40px auto;
  }
  
  .team-card {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    padding: 0 15px;
  }
  
  .team-card {
    height: 400px;
    max-width: 100%;
  }
  
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .client-logo {
    height: 100px;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .clients-grid {
    grid-template-columns: 1fr;
  }
  
  .testimonial {
    padding: 1.5rem 1rem;
  }
  
  .testimonial-content p {
    font-size: 0.95rem;
    padding: 0 0.5rem;
  }
}

.footer-legal a:hover{color: var(--text)}

/* Back to Top Button */
#backToTop{position:fixed; bottom:30px; right:30px; width:50px; height:50px; background: linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.2rem; opacity:0; visibility:hidden; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index:999; box-shadow: var(--accentGlow)}

#backToTop.active{opacity:1; visibility:visible; animation: bounce 2s infinite}

#backToTop:hover{filter:saturate(1.1) brightness(1.1); transform: translateY(-5px) scale(1.1); box-shadow: 0 0 50px rgba(101,114,245,.6)}

@keyframes bounce{0%, 20%, 50%, 80%, 100%{transform: translateY(0)}40%{transform: translateY(-10px)}60%{transform: translateY(-5px)}}

/* Enhanced Reveal Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal{opacity:1; transform: translateY(0); transition: all .3s ease}
.reveal.visible{opacity:1; transform:none}
[data-reveal="left"]{transform: translateX(0);}
[data-reveal="right"]{transform: translateX(0);}
[data-reveal="zoom"]{transform: scale(1);}
[data-reveal="left"].visible,[data-reveal="right"].visible,[data-reveal="zoom"].visible{transform:none}

/* Responsive Styles */
@media (max-width: 992px){
  .hero .container{flex-direction:column; text-align:center}
  .hero-content{padding-right:0; margin-bottom:2rem}
  .cta-buttons{justify-content:center}
  .contact-container{grid-template-columns:1fr}
}

@media (max-width: 768px){
  .hamburger{display:flex}
  .nav-links{position:fixed; top:80px; left:-100%; width:80%; height:calc(100vh - 80px); background: rgba(18,21,40,.98); backdrop-filter: blur(8px); flex-direction:column; align-items:center; justify-content:flex-start; padding:3rem 0; transition: var(--transition); box-shadow: 5px 0 15px rgba(0,0,0,.3); z-index:999}
  .nav-links.active{left:0}
  .nav-links li{margin:1rem 0}
  h1{font-size:2.2rem}
  h2{font-size:1.8rem}
  .footer-content{grid-template-columns:1fr; gap:2rem}
  
  .team-section .team-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 100%;
  }
}

@media (max-width: 576px){
  .cta-buttons{flex-direction:column; gap:1rem}
  .btn{width:100%}
  .services-grid,
  .features-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; text-align:center}
  .footer-legal{flex-direction:column; gap:.5rem}
  .footer-legal span{display:none}
  
  .team-section .team-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .team-section .team-photo{
    height: 200px;
  }
  
  .team-section .team-info{
    padding: 1rem;
  }
  
  .team-section .team-info h3{
    font-size: 1.1rem;
  }
  
  .team-section .team-bio{
    font-size: 0.85rem;
  }
}