/* Our Customers Section */
.customers-section {
  background: #fafaff;
  padding: 48px 0 32px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
  position: relative;
}
.customers-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-rows: 56px;
  gap: 18px 32px;
  font-size: 1.08rem;
  color: #000000;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0 32px;
  max-width: var(--max);
  margin: 0 auto;
  max-height: calc(3 * 56px + 2 * 18px); /* 3 rows, 56px + 2 gaps */
  overflow-y: auto;
  position: relative;
}
.customers-scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 12px 0 #eaeaea;
  border: 1px solid #eee;
  color: #6C5CE7;
  font-size: 1.6rem;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: 10;
  opacity: 0.92;
  transition: background 0.2s, box-shadow 0.2s;
  backdrop-filter: blur(6px);
}
.customers-scroll-arrow:hover {
  background: #f3f0ff;
  box-shadow: 0 4px 16px 0 #d1c4e9;
}
.customers-logos-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 4px 0 #eaeaea;
  border: 2px solid #f3f0ff;
  padding: 10px 18px;
  min-height: 48px;
  min-width: 120px;
  white-space: nowrap;
  transition: box-shadow 0.2s, border-color 0.2s;
  font-size: 1.08rem;
  font-weight: 500;
}
.customers-logos-grid span:hover {
  box-shadow: 0 2px 12px 0 #d1c4e9;
  border-color: #b39ddb;
}
@media (max-width: 900px) {
  .customers-logos-grid {
    grid-template-columns: repeat(3, minmax(100px,1fr));
    gap: 12px 16px;
    padding: 0 8px;
  }
}
@media (max-width: 600px) {
  .customers-logos-grid {
    grid-template-columns: repeat(2, minmax(80px,1fr));
    gap: 8px 8px;
    font-size: 0.98rem;
  }
}
 :root{
      --bg: #ffffff;
      --text: #0b0b0b;
      --muted:#6b7280;
      --purple:#6C5CE7; /* Primary */
      --purple-600:#5a49e4;
      --purple-100:#f2f1fe;
      --black:#111111;
      --shadow: 0 10px 30px rgba(108,92,231,.15);
      --radius: 16px;
      --max: 1200px;
    }
    /* Reset */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
    img{max-width:100%;height:auto;display:block}
    a{color:inherit;text-decoration:none}
    p{margin:0 0 1rem}

    /* Layout */
    .container{max-width:var(--max);margin:0 auto;padding:0 24px}
    header{position:sticky;top:0;background:rgba(255,255,255,.75);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #eee;z-index:40}
    .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
    .logo{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 210deg,var(--purple),#a78bfa,#000);box-shadow:var(--shadow)}
    .menu{display:flex;gap:24px}
    .menu a{color:#333;font-weight:600;opacity:.8}
    .menu a:hover{opacity:1}
    .cta{display:inline-flex;align-items:center;gap:10px;background:var(--purple);color:#fff;border:none;border-radius:999px;padding:12px 18px;font-weight:700;box-shadow:var(--shadow);cursor:pointer}
    .cta:is(:hover,:focus-visible){background:var(--purple-600)}
    .hamburger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid #e6e6e6;background:#fff;align-items:center;justify-content:center}

    /* Mobile menu */
    .mobile{display:none;position:fixed;inset:0;background:#fff;padding:24px}
    .mobile.open{display:block}
    .mobile a{display:block;padding:14px 8px;border-bottom:1px solid #f2f2f2;font-weight:600}

    /* Hero */
    .hero{padding:72px 0 24px;position:relative;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--purple-100);color:var(--purple);font-weight:700}
    h1{font-size:clamp(32px,6vw,56px);line-height:1.05;margin:.6rem 0}
    .lead{font-size:clamp(16px,2.6vw,20px);color:#3b3b3b;max-width:60ch}
    .actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
    .ghost{background:#000;color:#fff}
    .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
    .stat{border:1px solid #eee;padding:16px;border-radius:var(--radius);text-align:center; background:#ddeee3;box-shadow:var(--shadow);opacity:0.9}
    .stat strong{display:block;font-size:28px}


    /* Sections */
    section{padding:64px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
    h2{font-size:clamp(24px,4.2vw,36px);margin:0}
    .sub{color:var(--muted)}

    /* Services */
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{border:1px solid #eee;padding:20px;border-radius:18px;transition:transform .2s ease,box-shadow .2s ease;background:#fff}
    .card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .icon{width:42px;height:42px;border-radius:12px;background:var(--purple);display:grid;place-items:center;color:#fff;font-weight:800}
    .card h3{margin:16px 0 8px}

    /* Work */
    .work{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .work .shot{position:relative;border:1px solid #eee;border-radius:18px;overflow:hidden;background:#fff}
    .work .shot img{aspect-ratio:16/10;object-fit:cover}
    .pill{position:absolute;left:12px;top:12px;background:#000;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px}

    /* Process */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .step{padding:20px;border:1px solid #eee;border-radius:18px}
    .step b{display:inline-block;margin-bottom:6px;color:var(--purple)}

    /* Testimonials */
    .testis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .quote{padding:20px;border:1px solid #eee;border-radius:18px;background:#fff}
    .quote p{font-style:italic}

    /* Pricing */
    .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .plan{border:1px solid #eee;border-radius:18px;padding:22px;background:#fff;position:relative}
    .plan.popular{border-color:var(--purple)}
    .plan h3{margin:0 0 6px}
    .price{font-size:32px;font-weight:800;margin:10px 0}
    .features{padding:0;margin:14px 0 0;list-style:none}
    .features li{margin:8px 0;padding-left:24px;position:relative}
    .features li::before{content:"✔";position:absolute;left:0;color:var(--purple);font-weight:800}

    /* Contact */
    form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    form .full{grid-column:1/-1}
    input,textarea,select{width:100%;border:1px solid #e6e6e6;border-radius:12px;padding:12px 14px;font:inherit}
    textarea{min-height:120px;resize:vertical}

    /* Footer */
    footer{padding:24px 0;border-top:1px solid #eee;color:#555}

    /* Badges */
    .badge{display:inline-block;padding:6px 10px;border:1px solid #eee;border-radius:999px;color:#444;background:#fff}

    /* Header redesign overrides */
header{
  position:sticky;top:0;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid #eee; z-index:50;
  transition:box-shadow .2s ease,border-color .2s ease;
}
header.scrolled{ box-shadow:0 6px 24px rgba(17,17,17,.08); border-color:#eaeaea; }

.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.2px}
.right{display:flex;align-items:center;gap:10px}
.menu{display:flex;gap:24px;align-items:center}
.menu a{position:relative;color:#1f2937;font-weight:700;opacity:.9}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:linear-gradient(90deg,var(--purple),#000);
  transform:scaleX(0);transform-origin:left;transition:transform .2s;
}
.menu a:hover::after{ transform:scaleX(1) }

.hamburger{
  display:none;width:42px;height:42px;border-radius:12px;
  border:1px solid #e6e6e6;background:#fff;align-items:center;justify-content:center;font-size:20px
}

.slogan{
  font-size:14px;font-weight:600;color:var(--muted);margin-left:6px;letter-spacing:.5px
}

/* Mobile drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);z-index:40}
.mobile{
  position:fixed;inset:auto 0 0 auto;top:0;width:min(90vw,360px);height:100dvh;
  background:#fff;border-left:1px solid #eee;transform:translateX(100%);
  transition:transform .25s ease;z-index:41;box-shadow:var(--shadow)
}
.mobile.open{ transform:translateX(0) }
.mobile-inner{ padding:20px 18px }
.mobile a{ display:block;padding:14px 8px;border-bottom:1px solid #f3f3f3;font-weight:700 }
.mobile .close{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;border:1px solid #eee;background:#fff;margin-bottom:8px
}

/* Hero waves background */
.hero{
  position: relative;
  overflow: hidden;
  background: none;          /* let the canvas show */
  min-height: 520px;         /* ensures there's room to see waves */
}

/* Make hero a single-column now that the card is gone */
.hero-grid{ grid-template-columns: 1fr; }

/* Canvas sits behind text but ABOVE the section background */
#heroWaves{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;                /* not -1, so it isn't hidden by the hero background */
}

/* Ensure hero content stays above the canvas */
.hero > .container{ position: relative; z-index: 1; }

/* Animated gradient cycle for service icons */
@keyframes hueRotate {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.cards .icon{
  background: var(--purple);
  animation: hueRotate 8s linear infinite;
}

.cards .card:nth-child(1) .icon{ animation-delay: 0s; }
.cards .card:nth-child(2) .icon{ animation-delay: 2s; }
.cards .card:nth-child(3) .icon{ animation-delay: 4s; }
.cards .card:nth-child(4) .icon{ animation-delay: 6s; }
.cards .card:nth-child(5) .icon{ animation-delay: 8s; }
.cards .card:nth-child(6) .icon{ animation-delay: 10s; }


/* Colorful process steps */
.steps .step{
  color:#000000;               /* white text */
  border:none;
}

.steps .step:nth-child(1){
  background:#9cbce9;       /* purple */
}
.steps .step:nth-child(2){
  background:#a2dfcb;       /* emerald green */
}
.steps .step:nth-child(3){
  background:#c7e880;       /* amber */
}
.steps .step:nth-child(4){
  background:#9bdceb;       /* red */
}

/* Team Contact Section */
.team-contact{
  margin-top:64px;
  padding:48px 24px;
  border-radius:24px;
  position:relative;
  overflow:hidden;
  color:#fff;
}

/* animated gradient background */
.team-contact::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#6C5CE7,#a78bfa,#10B981,#F59E0B,#EF4444);
  background-size:300% 300%;
  animation: bgShift 12s ease infinite;
  z-index:0;
  opacity:0.9;
}

/* subtle overlay for readability */
.team-contact::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:1;
}

@keyframes bgShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* ensure content sits above */
.team-contact > *{
  position:relative;
  z-index:2;
}

/* team grid cards */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
  margin-top:16px;
}
.team-grid div{
  background:#fff;
  color:#111;
  padding:20px;
  border-radius:16px;
  box-shadow:var(--shadow);
  transition:transform .2s ease;
}
.team-grid div:hover{
  transform:translateY(-4px);
}

/* Locations maps grid */
.maps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.map-card{
  border:1px solid #eee;
  border-radius:18px;
  padding:16px;
  background:#fff;
  box-shadow:var(--shadow);
}

.map-card h3{
  margin:0 0 10px;
  font-size:18px;
}

.map-frame{
  border-radius:12px;
  overflow:hidden;
  /* Keep maps nicely proportioned */
  aspect-ratio:16/10;
}

.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
}

/* Responsive */
@media (max-width:1000px){
  .maps-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .maps-grid{ grid-template-columns:1fr; }
}



/* show hamburger / hide desktop menu on small screens */
@media (max-width: 640px){
  .menu{display:none}
  .hamburger{display:inline-flex}
}

    /* Responsive */
    @media (max-width: 1000px){
      .hero-grid{grid-template-columns:1fr}
      .stats{grid-template-columns:repeat(3,1fr)}
      .work,.cards,.pricing,.testis{grid-template-columns:repeat(2,1fr)}
      .steps{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 640px){
      .menu{display:none}
      .hamburger{display:inline-flex}
      .work,.cards,.pricing,.testis,.steps{grid-template-columns:1fr}
      form{grid-template-columns:1fr}
      .stats{grid-template-columns:repeat(3,1fr)}
    }

  .lang-switch .lang-link {
    color: #6C5CE7;
    text-decoration: none;
    font-weight: 500;
    border-radius: 4px;
    transition: background 0.2s;
  }
  .lang-switch .lang-link.active, .lang-switch .lang-link:hover {
    background: #f3f0ff;
  }
  @media (max-width: 900px) {
    .lang-switch-desktop { display: none !important; }
    .lang-switch-mobile { display: block !important; }
  }
  @media (min-width: 901px) {
    .lang-switch-mobile { display: none !important; }
    .lang-switch-desktop { display: inline-block !important; }
  }