/* ============================================================
   COMPANY OVERVIEW PAGE — company-overview.css
   IT Services & Digital Transformation
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --co-accent: #e8a025;
  --co-accent-hover: #d4911e;
  --co-dark: #0b1120;
  --co-dark-2: #101828;
  --co-dark-3: #1a2332;
  --co-white: #ffffff;
  --co-gray: #4b5563;
  --co-gray-light: #9ca3af;
  --co-light-bg: #f8f9fb;
  --co-light-bg-2: #f1f3f7;
  --co-text: #111827;
  --co-text-light: #6b7280;
  --co-border: #e5e7eb;
  --co-radius: 12px;
  --co-radius-lg: 20px;
  --co-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --co-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --co-transition: 0.3s ease;
}

/* ---------- Container ---------- */
.co-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ---------- Shared Accent ---------- */
.co-text-accent {
  color: var(--co-accent);
}

/* ---------- Shared Checklist ---------- */
.co-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.co-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--co-text);
  line-height: 1.5;
}

.co-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--co-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.co-hero {
  background: var(--co-dark);
  text-align: center;
  padding: 140px 20px 100px;
  position: relative;
  overflow: hidden;
}

.co-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(232, 160, 37, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.co-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.co-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--co-gray-light);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
}

.co-hero__breadcrumb-active {
  color: var(--co-accent);
}

.co-hero__title {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--co-white);
  margin-bottom: 20px;
  line-height: 1.2;
}

.co-hero__title-accent {
  color: var(--co-accent);
  font-style: italic;
  display: inline;
}

.co-hero__subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.co-hero__desc {
  font-size: 0.95rem;
  color: var(--co-gray-light);
  font-style: italic;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.co-about {
  padding: 80px 0;
  background: var(--co-white);
}

.co-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.co-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--co-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.co-about__text {
  font-size: 1rem;
  color: var(--co-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.co-about__text:last-child {
  margin-bottom: 0;
}

.co-about__image img {
  width: 100%;
  border-radius: var(--co-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.co-stats,
.co-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.co-stat {
  background: var(--co-light-bg);
  border-radius: var(--co-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--co-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.co-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--co-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.co-stat:hover::before {
  transform: scaleX(1);
}

.co-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--co-accent);
}

.co-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.co-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--co-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.co-stat--dark {
  background: var(--co-white);
  border-color: var(--co-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.co-whoweare {
  padding: 80px 0;
  background: var(--co-light-bg);
}

.co-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.co-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--co-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.co-whoweare__text {
  font-size: 1rem;
  color: var(--co-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.co-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.co-services {
  padding: 80px 0;
  background: var(--co-white);
}

.co-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.co-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--co-text);
}

.co-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.co-service-card {
  background: var(--co-light-bg);
  border-radius: var(--co-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.co-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--co-accent);
  background: var(--co-white);
}

.co-service-card--wide {
  grid-column: 1 / -1;
}

.co-service-card__badge {
  display: inline-block;
  background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%;
  color: var(--co-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
}

.co-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--co-text);
  margin-bottom: 10px;
}

.co-service-card__text {
  font-size: 0.9rem;
  color: var(--co-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.co-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.co-tag {
  display: inline-block;
  background: var(--co-white);
  color: var(--co-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--co-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.co-tag:hover {
  background: var(--co-accent);
  color: var(--co-white);
  border-color: var(--co-accent);
  transform: translateY(-2px);
}

/* Service List */
.co-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.co-service-card__list li {
  font-size: 0.85rem;
  color: var(--co-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.co-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--co-accent);
  font-weight: 700;
}

.co-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.co-delivery {
  padding: 80px 0;
  background: var(--co-dark);
  text-align: center;
}

.co-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--co-white);
  margin-bottom: 14px;
}

.co-delivery__text {
  font-size: 1rem;
  color: #cbd5e1;
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.co-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.co-step {
  display: flex;
  align-items: center;
}

.co-step__circle {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(37, 99, 235, 0.1);
  border: 2px solid rgba(37, 99, 235, 0.3);
  color: var(--co-white);
  font-weight: 600;
  font-size: 0.72rem;
  border-radius: 50%;
  letter-spacing: 0.3px;
  line-height: 1.2;
  padding: 8px;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.co-step:hover .co-step__circle {
  background: var(--color-signature-blue);
  border-color: var(--color-signature-blue);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
  transform: scale(1.08);
}

.co-step__arrow {
  color: var(--co-accent);
  font-size: 1.4rem;
  margin: 0 4px;
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.co-why {
  padding: 80px 0;
  background: var(--co-white);
}

.co-why__grid {
  max-width: 800px;
}

.co-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--co-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.co-why__text {
  font-size: 1rem;
  color: var(--co-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.co-industries {
  padding: 80px 0;
  background: var(--co-light-bg);
  text-align: center;
}

.co-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--co-text);
  margin-bottom: 48px;
}

.co-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.co-industry {
  background: var(--co-white);
  border-radius: var(--co-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--co-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
  cursor: default;
}

.co-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--co-accent);
}

.co-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.co-industry:hover .co-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.co-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--co-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.co-reliable {
  padding: 80px 0;
  background: var(--co-dark-2);
}

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

.co-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--co-white);
  margin-bottom: 18px;
  line-height: 1.35;
}

.co-reliable__text {
  font-size: 1rem;
  color: #cbd5e1;
  line-height: 1.7;
  margin-bottom: 40px;
}

.co-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.co-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--co-dark-3);
  border: 1px solid rgba(232, 160, 37, 0.2);
  border-radius: 30px;
  padding: 10px 20px;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  cursor: default;
}

.co-pillar:hover {
  background: rgba(232, 160, 37, 0.1);
  border-color: var(--co-accent);
  transform: translateY(-2px);
}

.co-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--co-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.co-pillar__label {
  font-size: 0.85rem;
  color: #cbd5e1;
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION (Native details/summary)
   ============================================================ */
.co-faq {
  padding: 80px 0;
  background: var(--co-light-bg);
}

.co-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
}

.co-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--co-text);
  margin-bottom: 36px;
  text-align: center;
}

.co-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.co-faq__item {
  border-bottom: 1px solid var(--co-border);
}

.co-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--co-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.3s ease;
}

.co-faq__question::-webkit-details-marker {
  display: none;
}

.co-faq__question::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--co-text);
  border-bottom: 2.5px solid var(--co-text);
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
  margin-left: 16px;
}

.co-faq__item[open] .co-faq__question::after {
  transform: rotate(45deg);
}

.co-faq__item[open] .co-faq__question {
  color: var(--co-accent);
}

.co-faq__item[open] .co-faq__question::after {
  border-color: var(--co-accent);
}

.co-faq__answer {
  padding: 0 0 18px;
}

.co-faq__answer p {
  font-size: 0.9rem;
  color: var(--co-gray);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.co-commitment {
  padding: 60px 0;
  background: var(--co-white);
}

.co-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.co-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--co-text);
  margin-bottom: 16px;
}

.co-commitment__text {
  font-size: 1rem;
  color: var(--co-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.co-cta {
  padding: 80px 0;
  background: var(--co-dark);
}

.co-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.co-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--co-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.co-cta__text {
  font-size: 1rem;
  color: #cbd5e1;
  line-height: 1.7;
  margin-bottom: 32px;
}

.co-cta__button {
  display: inline-block;
  background: var(--co-accent);
  color: var(--co-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.co-cta__button:hover {
  background: var(--co-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .co-hero__title {
    font-size: 2.2rem;
  }

  .co-about__grid,
  .co-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .co-services__grid {
    grid-template-columns: 1fr 1fr;
  }

  .co-industries__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .co-delivery__steps {
    gap: 12px;
  }

  .co-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
  }
}

@media (max-width: 768px) {
  .co-hero {
    padding: 120px 20px 80px;
  }

  .co-hero__title {
    font-size: 1.8rem;
  }

  .co-hero__subtitle {
    font-size: 1.05rem;
  }

  .co-about,
  .co-whoweare,
  .co-services,
  .co-delivery,
  .co-why,
  .co-industries,
  .co-reliable,
  .co-faq,
  .co-cta {
    padding: 60px 0;
  }

  .co-about__heading,
  .co-whoweare__heading,
  .co-services__title,
  .co-delivery__heading,
  .co-why__heading,
  .co-industries__heading,
  .co-reliable__heading,
  .co-commitment__heading,
  .co-cta__heading {
    font-size: 1.6rem;
  }

  .co-services__grid {
    grid-template-columns: 1fr;
  }

  .co-service-card--wide {
    grid-column: auto;
  }

  .co-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .co-stats,
  .co-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .co-delivery__steps {
    gap: 10px;
  }

  .co-step__circle {
    width: 70px;
    height: 70px;
    font-size: 0.6rem;
  }

  .co-step__arrow {
    font-size: 1rem;
  }

  .co-reliable__pillars {
    gap: 10px;
  }

  .co-pillar {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .co-service-card__list--horizontal {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .co-hero {
    padding: 110px 16px 60px;
  }

  .co-hero__title {
    font-size: 1.5rem;
  }

  .co-container {
    padding: 0 16px;
  }

  .co-industries__grid {
    grid-template-columns: 1fr;
  }

  .co-stats,
  .co-whoweare__stats {
    grid-template-columns: 1fr;
  }

  .co-stat__number {
    font-size: 2rem;
  }

  .co-step__circle {
    width: 60px;
    height: 60px;
    font-size: 0.55rem;
  }

  .co-step__arrow {
    font-size: 0.85rem;
    margin: 0 2px;
  }

  .co-faq__question {
    font-size: 0.9rem;
  }


/* ============================================================
   COMING SOON PAGE — coming-soon.css
   Import in page.tsx: import "../css/coming-soon.css";
   Place in: app/css/coming-soon.css
   ============================================================ */

.coming-soon {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #e8f6ff 0%, #f7eef8 100%);
    padding: 60px 20px;
}

.cs-inner {
    text-align: center;
    max-width: 760px;
    width: 100%;
}

.cs-rocket-wrap {
    width: 320px;
    height: 320px;
    margin: 26px auto 12px auto;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-rocket {
    width: 260px;
    height: 260px;
    object-fit: contain;
    border-radius: 999px;
    background: white;
    padding: 14px;
}

.cs-title {
    font-size: 32px;
    font-weight: 800;
    color: #0b2036;
    margin-bottom: 8px;
}

.cs-sub {
    font-size: 17px;
    color: #55606a;
    margin-bottom: 20px;
}

.cs-social {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.cs-social a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2f91f8;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 420px) {
    .cs-rocket-wrap {
        width: 200px;
        height: 200px;
    }

    .cs-rocket {
        width: 160px;
        height: 160px;
    }

    .cs-title {
        font-size: 20px;
    }

    /* ============================================
   ALIGNMENT FIX — App Maintenance (am-)
                  & Cross Platform (cp-)
   ============================================
   Problem: .am-container / .cp-container had
   no max-width or margin:auto — content was
   stretching full viewport width (1470px).
   ============================================ */

/* ===== CONTAINER FIX ===== */
.am-container,
.cp-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

/* ===== HERO FIX ===== */
.am-hero,
.cp-hero {
  max-width: 100%;
  overflow: hidden;
}

.am-hero__inner,
.cp-hero__inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ===== STATS ROW FIX ===== */
.am-stats,
.cp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.am-stat,
.cp-stat {
  text-align: center;
}

/* ===== ABOUT / WHY SECTION FIX ===== */
.am-about__content,
.cp-about__content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.am-about__grid,
.cp-about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* ===== CHECKLIST ITEMS FIX ===== */
.am-checklist,
.cp-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.am-checklist__item,
.cp-checklist__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== SERVICE CARDS FIX ===== */
.am-services__grid,
.cp-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* ===== DELIVERY / PROCESS STEPS FIX ===== */
.am-delivery__steps,
.cp-delivery__steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ===== RELIABLE / WHY CHOOSE SECTION ===== */
.am-reliable__inner,
.cp-reliable__inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.am-reliable__pillars,
.cp-reliable__pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* ===== INDUSTRIES GRID FIX ===== */
.am-industries__grid,
.cp-industries__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== TECH TAGS FIX ===== */
.am-tech__tags,
.cp-tech__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.am-tech__stats,
.cp-tech__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

/* ===== FAQ FIX ===== */
.am-faq__wrapper,
.cp-faq__wrapper {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== CTA FIX ===== */
.am-cta__inner,
.cp-cta__inner {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .am-stats,
  .cp-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .am-delivery__steps,
  .cp-delivery__steps {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 576px) {
  .am-container,
  .cp-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .am-hero__inner,
  .cp-hero__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .am-hero,
  .cp-hero {
    padding-top: 120px;
    padding-bottom: 60px;
  }

  .am-stats,
  .cp-stats {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .am-industries__grid,
  .cp-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .am-services__grid,
  .cp-services__grid {
    grid-template-columns: 1fr;
  }
}
}
/* ============================================================
   CROSS-PLATFORM PAGE — cp- prefix | All !important
   ============================================================ */
:root{--cp-accent:#e8a025;--cp-accent-hover:#d4911e;--cp-dark:#0b1120;--cp-dark-2:#101828;--cp-dark-3:#1a2332;--cp-white:#ffffff;--cp-gray:#000000;--cp-gray-light:#000000;--cp-light-bg:#f8f9fb;--cp-text:#000000;--cp-text-light:#000000;--cp-border:#e5e7eb;--cp-radius:12px;--cp-radius-lg:20px;--cp-transition:0.3s ease}

/* KEYFRAMES */
@keyframes cp-fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes cp-fadeLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes cp-fadeRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes cp-scaleIn{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}
@keyframes cp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,160,37,0.4)}50%{box-shadow:0 0 0 12px rgba(232,160,37,0)}}
@keyframes cp-shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes cp-statPop{0%{opacity:0;transform:scale(0) translateY(10px)}60%{opacity:1;transform:scale(1.15) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes cp-arrowPulse{0%,100%{opacity:0.4;transform:translateX(0)}50%{opacity:0.8;transform:translateX(3px)}}
@keyframes cp-stepGlow{0%,10%{border-color:var(--color-signature-blue);box-shadow:0 8px 30px rgba(37,99,235,0.25),0 0 0 4px rgba(37,99,235,0.1);transform:translateY(-4px) scale(1.03);background:linear-gradient(135deg,#f0f4ff 0%,#e0e7ff 100%)}22%,100%{border-color:#e0e7ff;box-shadow:0 4px 20px rgba(37,99,235,0.08);transform:translateY(0) scale(1);background:var(--cp-white)}}

/* SCROLL ANIMATIONS */
.cp-animate{opacity:0!important;transform:translateY(40px)!important;animation:cp-fadeUp 0.8s ease forwards!important;animation-timeline:view()!important;animation-range:entry 0% entry 30%!important}
.cp-animate--left{opacity:0!important;transform:translateX(-40px)!important;animation:cp-fadeLeft 0.8s ease forwards!important;animation-timeline:view()!important;animation-range:entry 0% entry 30%!important}
.cp-animate--right{opacity:0!important;transform:translateX(40px)!important;animation:cp-fadeRight 0.8s ease forwards!important;animation-timeline:view()!important;animation-range:entry 0% entry 30%!important}
.cp-animate--scale{opacity:0!important;transform:scale(0.85)!important;animation:cp-scaleIn 0.7s ease forwards!important;animation-timeline:view()!important;animation-range:entry 0% entry 25%!important}
.cp-stagger>*:nth-child(1){animation-delay:0s!important}.cp-stagger>*:nth-child(2){animation-delay:.08s!important}.cp-stagger>*:nth-child(3){animation-delay:.16s!important}.cp-stagger>*:nth-child(4){animation-delay:.24s!important}.cp-stagger>*:nth-child(5){animation-delay:.32s!important}.cp-stagger>*:nth-child(6){animation-delay:.4s!important}.cp-stagger>*:nth-child(7){animation-delay:.48s!important}
@supports not (animation-timeline:view()){.cp-animate,.cp-animate--left,.cp-animate--right,.cp-animate--scale{opacity:1!important;transform:none!important;animation:none!important}}

/* CONTAINER */
.cp-container{width:100%!important;max-width:1200px!important;margin:0 auto!important;padding:0 20px!important}
.cp-text-accent{color:var(--cp-accent)!important}

/* CHECKLIST */
.cp-checklist{list-style:none!important;padding:0!important;margin:0!important;display:flex!important;flex-direction:column!important;gap:12px!important}
.cp-checklist__item{display:flex!important;align-items:flex-start!important;gap:10px!important;font-size:0.95rem!important;color:var(--cp-text)!important;line-height:1.5!important}
.cp-checklist__icon{flex-shrink:0!important;width:22px!important;height:22px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:0.85rem!important;font-weight:700!important;color:var(--cp-accent)!important}

/* 1. HERO */
.cp-hero{background:var(--cp-dark)!important;text-align:center!important;padding:140px 20px 120px!important;position:relative!important;overflow:hidden!important}
.cp-hero::before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(ellipse at 30% 50%,rgba(232,160,37,0.08) 0%,transparent 60%),radial-gradient(ellipse at 70% 30%,rgba(59,130,246,0.06) 0%,transparent 50%)!important;pointer-events:none!important}
.cp-hero__inner{position:relative!important;z-index:1!important;max-width:800px!important;margin:0 auto!important}
.cp-hero__title{font-size:3rem!important;font-weight:700!important;color:var(--cp-white)!important;margin-bottom:20px!important;line-height:1.2!important;animation:cp-fadeUp 0.7s ease 0.25s both!important}
.cp-hero__title-accent{color:var(--cp-accent)!important;font-style:italic!important;display:inline-block!important}
.cp-hero__subtitle{font-size:1.3rem!important;color:var(--cp-white)!important;margin-bottom:14px!important;font-weight:500!important;line-height:1.5!important;animation:cp-fadeUp 0.7s ease 0.45s both!important}
.cp-hero__desc{font-size:0.95rem!important;color:var(--cp-gray-light)!important;font-style:italic!important;animation:cp-fadeUp 0.7s ease 0.6s both!important}

/* 2. INTRO */
.cp-intro{padding:80px 0!important;background:var(--cp-white)!important}
.cp-intro__grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:50px!important;align-items:center!important}
.cp-intro__heading{font-size:2.2rem!important;font-weight:700!important;color:var(--cp-text)!important;margin-bottom:20px!important;line-height:1.25!important}
.cp-intro__text{font-size:1rem!important;color:var(--cp-gray)!important;line-height:1.75!important;margin-bottom:14px!important}
.cp-intro__text:last-child{margin-bottom:0!important}

/* STATS */
.cp-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:20px!important}
.cp-stat{background:var(--cp-light-bg)!important;border-radius:var(--cp-radius)!important;padding:28px 20px!important;text-align:center!important;border:1px solid var(--cp-border)!important;transition:transform 0.4s ease,box-shadow 0.4s ease,border-color 0.4s ease!important;position:relative!important;overflow:hidden!important}
.cp-stat::before{content:""!important;position:absolute!important;top:0!important;left:0!important;width:100%!important;height:3px!important;background:linear-gradient(90deg,var(--cp-accent),var(--color-signature-blue))!important;transform:scaleX(0)!important;transform-origin:left!important;transition:transform 0.5s ease!important}
.cp-stat:hover::before{transform:scaleX(1)!important}
.cp-stat:hover{transform:translateY(-5px)!important;box-shadow:0 12px 30px rgba(0,0,0,0.08)!important;border-color:var(--cp-accent)!important}
.cp-stat__number{display:block!important;font-size:2.4rem!important;font-weight:800!important;color:var(--color-signature-blue)!important;line-height:1!important;margin-bottom:8px!important;letter-spacing:-1px!important;opacity:0!important;transform:scale(0) translateY(10px)!important;animation:cp-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards!important;animation-delay:0.3s!important}
.cp-stat:nth-child(1) .cp-stat__number{animation-delay:0.2s!important}
.cp-stat:nth-child(2) .cp-stat__number{animation-delay:0.4s!important}
.cp-stat:nth-child(3) .cp-stat__number{animation-delay:0.6s!important}
.cp-stat:nth-child(4) .cp-stat__number{animation-delay:0.8s!important}
.cp-stat__label{display:block!important;font-size:0.82rem!important;color:var(--cp-gray)!important;font-weight:500!important;line-height:1.3!important}
.cp-stat--dark{background:var(--cp-white)!important;border-color:var(--cp-border)!important}

/* 3. TECH */
.cp-tech{padding:80px 0!important;background:var(--cp-light-bg)!important}
.cp-tech__grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:50px!important;align-items:center!important}
.cp-tech__heading{font-size:2.2rem!important;font-weight:700!important;color:var(--cp-text)!important;margin-bottom:20px!important;line-height:1.25!important}
.cp-tech__text{font-size:1rem!important;color:var(--cp-gray)!important;line-height:1.75!important;margin-bottom:14px!important}
.cp-tech__text:last-child{margin-bottom:0!important}
.cp-tech__stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:20px!important}
.cp-tech__tags{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:20px!important}
.cp-tag{display:inline-block!important;background:var(--cp-white)!important;color:var(--cp-text)!important;font-size:0.75rem!important;font-weight:600!important;padding:4px 12px!important;border-radius:20px!important;border:1px solid var(--cp-border)!important;transition:background 0.3s,color 0.3s,border-color 0.3s,transform 0.3s!important}
.cp-tag:hover{background:var(--cp-accent)!important;color:var(--cp-white)!important;border-color:var(--cp-accent)!important;transform:translateY(-2px)!important}

/* 4. SERVICES */
.cp-services{padding:80px 0!important;background:var(--cp-white)!important}
.cp-services__header{text-align:center!important;margin-bottom:48px!important}
.cp-services__title{font-size:2.2rem!important;font-weight:700!important;color:var(--cp-text)!important}
.cp-services__grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:24px!important}
.cp-service-card{background:var(--cp-light-bg)!important;border-radius:var(--cp-radius)!important;padding:28px!important;border:1px solid transparent!important;transition:box-shadow 0.4s,transform 0.4s,border-color 0.4s,background 0.4s!important}
.cp-service-card:hover{box-shadow:0 12px 36px rgba(232,160,37,0.12)!important;transform:translateY(-5px)!important;border-color:var(--cp-accent)!important;background:var(--cp-white)!important}
.cp-service-card__badge{display:inline-block!important;background:linear-gradient(110deg,var(--color-signature-blue) 30%,#60a5fa 50%,var(--color-signature-blue) 70%)!important;background-size:200% 100%!important;color:var(--cp-white)!important;font-size:0.75rem!important;font-weight:700!important;width:34px!important;height:34px!important;line-height:34px!important;text-align:center!important;border-radius:8px!important;margin-bottom:16px!important;transition:transform 0.3s!important}
.cp-service-card:hover .cp-service-card__badge{animation:cp-shimmer 1.5s ease infinite!important;transform:scale(1.1)!important}
.cp-service-card__title{font-size:1.1rem!important;font-weight:600!important;color:var(--cp-text)!important;margin-bottom:10px!important}
.cp-service-card__text{font-size:0.9rem!important;color:var(--cp-gray)!important;line-height:1.65!important;margin-bottom:14px!important}
.cp-service-card__list{list-style:none!important;padding:0!important;margin:0!important;display:flex!important;flex-direction:column!important;gap:6px!important}
.cp-service-card__list li{font-size:0.85rem!important;color:var(--cp-gray)!important;padding-left:18px!important;position:relative!important;line-height:1.5!important}
.cp-service-card__list li::before{content:"•"!important;position:absolute!important;left:0!important;color:var(--cp-accent)!important;font-weight:700!important}

/* 5. DELIVERY */
.cp-delivery{padding:80px 0!important;background:linear-gradient(180deg,#ffffff 0%,#f0f4ff 100%)!important;text-align:center!important;position:relative!important;overflow:hidden!important}
.cp-delivery::before{content:""!important;position:absolute!important;top:0!important;left:50%!important;transform:translateX(-50%)!important;width:2px!important;height:100%!important;background:linear-gradient(180deg,transparent 0%,var(--color-signature-blue) 15%,var(--color-signature-blue) 85%,transparent 100%)!important;opacity:0.15!important;pointer-events:none!important}
.cp-delivery__heading{font-size:2rem!important;font-weight:700!important;color:var(--cp-text)!important;margin-bottom:14px!important;position:relative!important;z-index:1!important}
.cp-delivery__text{font-size:1rem!important;color:var(--cp-gray)!important;margin-bottom:48px!important;max-width:650px!important;margin-left:auto!important;margin-right:auto!important;line-height:1.6!important;position:relative!important;z-index:1!important}
.cp-delivery__steps{display:flex!important;align-items:stretch!important;justify-content:center!important;flex-wrap:wrap!important;gap:16px!important;position:relative!important;z-index:1!important;counter-reset:cp-step-counter!important}
.cp-step{display:flex!important;flex-direction:column!important;align-items:center!important;position:relative!important}
.cp-step__circle{width:110px!important;height:110px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;background:var(--cp-white)!important;border:2px solid #e0e7ff!important;color:var(--cp-text)!important;font-weight:700!important;font-size:0.72rem!important;border-radius:20px!important;line-height:1.3!important;padding:12px!important;position:relative!important;box-shadow:0 4px 20px rgba(37,99,235,0.08)!important;transition:all 0.4s ease!important}
.cp-step__circle::before{content:counter(cp-step-counter)!important;counter-increment:cp-step-counter!important;position:absolute!important;top:-10px!important;right:-10px!important;width:28px!important;height:28px!important;background:linear-gradient(135deg,var(--color-signature-blue) 0%,#6366f1 100%)!important;color:white!important;font-size:0.7rem!important;font-weight:800!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 8px rgba(37,99,235,0.3)!important}
.cp-step:hover .cp-step__circle{transform:translateY(-6px)!important;border-color:var(--color-signature-blue)!important;box-shadow:0 8px 30px rgba(37,99,235,0.18)!important;background:linear-gradient(135deg,#f8faff 0%,#eef2ff 100%)!important}
.cp-delivery__steps>:nth-child(1) .cp-step__circle{animation:cp-stepGlow 7s ease infinite 0s!important}
.cp-delivery__steps>:nth-child(3) .cp-step__circle{animation:cp-stepGlow 7s ease infinite 1s!important}
.cp-delivery__steps>:nth-child(5) .cp-step__circle{animation:cp-stepGlow 7s ease infinite 2s!important}
.cp-delivery__steps>:nth-child(7) .cp-step__circle{animation:cp-stepGlow 7s ease infinite 3s!important}
.cp-delivery__steps>:nth-child(9) .cp-step__circle{animation:cp-stepGlow 7s ease infinite 4s!important}
.cp-delivery__steps>:nth-child(11) .cp-step__circle{animation:cp-stepGlow 7s ease infinite 5s!important}
.cp-delivery__steps>:nth-child(13) .cp-step__circle{animation:cp-stepGlow 7s ease infinite 6s!important}
.cp-step__arrow{color:var(--color-signature-blue)!important;font-size:1.6rem!important;margin:0 6px!important;font-weight:300!important;opacity:0.5!important;display:flex!important;align-items:center!important;animation:cp-arrowPulse 2s ease infinite!important}

/* 6. WHY */
.cp-why{padding:80px 0!important;background:var(--cp-white)!important}
.cp-why__grid{display:grid!important;grid-template-columns:1fr!important;gap:50px!important;align-items:center!important;max-width:800px!important}
.cp-why__heading{font-size:2rem!important;font-weight:700!important;color:var(--cp-text)!important;margin-bottom:16px!important;line-height:1.3!important}
.cp-why__text{font-size:1rem!important;color:var(--cp-gray)!important;line-height:1.7!important;margin-bottom:24px!important}

/* 7. INDUSTRIES */
.cp-industries{padding:80px 0!important;background:var(--cp-light-bg)!important;text-align:center!important}
.cp-industries__heading{font-size:2rem!important;font-weight:700!important;color:var(--cp-text)!important;margin-bottom:48px!important}
.cp-industries__grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:24px!important}
.cp-industry{background:var(--cp-white)!important;border-radius:var(--cp-radius)!important;padding:32px 20px!important;text-align:center!important;border:1px solid var(--cp-border)!important;transition:box-shadow 0.4s,transform 0.4s,border-color 0.4s!important;cursor:default!important}
.cp-industry:hover{box-shadow:0 10px 30px rgba(232,160,37,0.1)!important;transform:translateY(-5px)!important;border-color:var(--cp-accent)!important}
.cp-industry__icon{font-size:2.2rem!important;display:block!important;margin-bottom:14px!important;transition:transform 0.4s!important}
.cp-industry:hover .cp-industry__icon{transform:scale(1.2) rotate(-5deg)!important}
.cp-industry__title{font-size:0.95rem!important;font-weight:600!important;color:var(--cp-text)!important}

/* 8. FAQ */
.cp-faq{padding:80px 0!important;background:var(--cp-light-bg)!important}
.cp-faq__wrapper{max-width:750px!important;margin:0 auto!important;text-align:center!important}
.cp-faq__heading{font-size:1.8rem!important;font-weight:700!important;color:var(--cp-text)!important;margin-bottom:36px!important}

/* 9. CTA */
.cp-cta{padding:80px 0!important;background:var(--cp-dark)!important}
.cp-cta__inner{text-align:center!important;max-width:650px!important;margin:0 auto!important}
.cp-cta__heading{font-size:2rem!important;font-weight:700!important;color:var(--cp-white)!important;margin-bottom:16px!important;line-height:1.3!important}
.cp-cta__text{font-size:1rem!important;color:var(--cp-gray-light)!important;line-height:1.7!important;margin-bottom:32px!important}
.cp-cta__button{display:inline-block!important;background:var(--cp-accent)!important;color:var(--cp-white)!important;font-size:1rem!important;font-weight:600!important;padding:14px 36px!important;border-radius:8px!important;text-decoration:none!important;transition:background 0.3s,transform 0.3s,box-shadow 0.3s!important;animation:cp-pulse 2.5s ease infinite!important}
.cp-cta__button:hover{background:var(--cp-accent-hover)!important;transform:translateY(-3px)!important;box-shadow:0 8px 24px rgba(232,160,37,0.35)!important;animation:none!important}

/* RESPONSIVE */
@media(max-width:1024px){.cp-hero__title{font-size:2.4rem!important}.cp-services__title{font-size:1.8rem!important}.cp-service-card{padding:24px!important}.cp-why__heading{font-size:1.8rem!important}.cp-faq__heading{font-size:1.6rem!important}.cp-cta__heading{font-size:1.7rem!important}.cp-delivery__heading{font-size:1.7rem!important}.cp-step__circle{width:95px!important;height:95px!important;font-size:0.68rem!important;border-radius:16px!important}.cp-step__circle::before{width:24px!important;height:24px!important;font-size:0.6rem!important}}
@media(max-width:768px){.cp-hero{padding:120px 0 60px!important}.cp-hero__title{font-size:1.8rem!important}.cp-hero__subtitle{font-size:0.95rem!important}.cp-hero__desc{font-size:0.85rem!important}.cp-intro__grid,.cp-tech__grid{grid-template-columns:1fr!important;gap:30px!important}.cp-intro__heading,.cp-tech__heading{font-size:1.6rem!important}.cp-stats{grid-template-columns:1fr 1fr!important;gap:16px!important}.cp-stat__number{font-size:2rem!important}.cp-services{padding:60px 0!important}.cp-services__title{font-size:1.5rem!important}.cp-services__grid{grid-template-columns:1fr!important;gap:16px!important}.cp-service-card{padding:22px!important}.cp-why{padding:60px 0!important}.cp-why__grid{grid-template-columns:1fr!important;gap:30px!important}.cp-why__heading{font-size:1.5rem!important}.cp-industries{padding:60px 0!important}.cp-industries__grid{grid-template-columns:repeat(2,1fr)!important;gap:16px!important}.cp-faq{padding:60px 0!important}.cp-faq__heading{font-size:1.4rem!important}.cp-cta{padding:60px 0!important}.cp-cta__heading{font-size:1.4rem!important}.cp-delivery{padding:60px 0!important}.cp-delivery__heading{font-size:1.5rem!important}.cp-delivery__steps{gap:12px!important}.cp-step__arrow{display:none!important}.cp-step__circle{width:90px!important;height:90px!important;font-size:0.68rem!important;border-radius:16px!important}.cp-tech__stats{grid-template-columns:1fr 1fr!important}.cp-animate,.cp-animate--left,.cp-animate--right,.cp-animate--scale{opacity:1!important;transform:none!important;animation:none!important}}
@media(max-width:480px){.cp-hero{padding:100px 0 50px!important}.cp-hero__title{font-size:1.5rem!important}.cp-hero__subtitle{font-size:0.85rem!important}.cp-intro__heading,.cp-tech__heading{font-size:1.4rem!important}.cp-stats{gap:12px!important}.cp-stat{padding:16px 12px!important}.cp-stat__number{font-size:1.6rem!important}.cp-stat__label{font-size:0.7rem!important}.cp-services__title{font-size:1.3rem!important}.cp-service-card{padding:18px!important}.cp-industries__grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.cp-faq__heading{font-size:1.2rem!important}.cp-cta__heading{font-size:1.2rem!important}.cp-cta__button{padding:10px 24px!important;font-size:0.85rem!important}.cp-step__circle{width:80px!important;height:80px!important;font-size:0.62rem!important;border-radius:14px!important;padding:8px!important}.cp-step__circle::before{width:22px!important;height:22px!important;font-size:0.58rem!important;top:-8px!important;right:-8px!important}}
/* ============================================================
   APP MAINTENANCE & SUPPORT PAGE — app-maintenance.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    --am-accent: #e8a025;
    --am-accent-hover: #d4911e;
    --am-dark: #0b1120;
    --am-dark-2: #101828;
    --am-dark-3: #1a2332;
    --am-white: #ffffff;
    --am-gray: #000000;
    --am-gray-light: #000000;
    --am-light-bg: #f8f9fb;
    --am-light-bg-2: #f1f3f7;
    --am-text: #000000;
    --am-text-light: #000000;
    --am-border: #e5e7eb;
    --am-radius: 12px;
    --am-radius-lg: 20px;
    --am-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --am-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
    --am-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes am-fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in from left */
@keyframes am-fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade in from right */
@keyframes am-fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale up pop */
@keyframes am-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
    from {
        width: 0;
    }

    to {
        width: 60px;
    }
}

/* Pulse glow for CTA */
@keyframes am-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
    }
}

/* Shimmer for badges */
@keyframes am-shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Float subtle */
@keyframes vm-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.am-animate {
    opacity: 0;
    transform: translateY(40px);
    animation: am-fadeUp 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.am-animate--left {
    opacity: 0;
    transform: translateX(-40px);
    animation: am-fadeLeft 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.am-animate--right {
    opacity: 0;
    transform: translateX(40px);
    animation: am-fadeRight 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.am-animate--scale {
    opacity: 0;
    transform: scale(0.85);
    animation: am-scaleIn 0.7s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.am-stagger>*:nth-child(1) {
    animation-delay: 0s;
}

.am-stagger>*:nth-child(2) {
    animation-delay: 0.08s;
}

.am-stagger>*:nth-child(3) {
    animation-delay: 0.16s;
}

.am-stagger>*:nth-child(4) {
    animation-delay: 0.24s;
}

.am-stagger>*:nth-child(5) {
    animation-delay: 0.32s;
}

.am-stagger>*:nth-child(6) {
    animation-delay: 0.40s;
}

.am-stagger>*:nth-child(7) {
    animation-delay: 0.48s;
}

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {

    .am-animate,
    .am-animate--left,
    .am-animate--right,
    .am-animate--scale {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---------- Container ---------- */
.am-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.am-text-accent {
    color: var(--am-accent);
}

/* ---------- Shared Checklist ---------- */
.am-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.am-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--am-text);
    line-height: 1.5;
}

.am-checklist__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--am-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.am-hero {
    background: var(--am-dark);
    text-align: center;
    padding: 140px 20px 120px;
    position: relative;
    overflow: hidden;
}

.am-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%,
            rgba(232, 160, 37, 0.08) 0%,
            transparent 60%),
        radial-gradient(ellipse at 70% 30%,
            rgba(59, 130, 246, 0.06) 0%,
            transparent 50%);
    pointer-events: none;
}

.am-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.am-hero__breadcrumb {
    font-size: 0.85rem;
    color: var(--am-gray);
    margin-bottom: 24px;
    letter-spacing: 0.3px;
    animation: am-fadeUp 0.6s ease 0.1s both;
}

.am-hero__breadcrumb-active {
    color: var(--am-accent);
}

.am-hero__title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--am-white);
    margin-bottom: 20px;
    line-height: 1.2;
    animation: am-fadeUp 0.7s ease 0.25s both;
}

.am-hero__title-accent {
    color: var(--am-accent);
    font-style: italic;
    display: inline-block;
}

.am-hero__subtitle {
    font-size: 1.3rem;
    color: var(--am-white);
    margin-bottom: 14px;
    font-weight: 500;
    line-height: 1.5;
    animation: am-fadeUp 0.7s ease 0.45s both;
}

.am-hero__desc {
    font-size: 0.95rem;
    color: var(--am-gray-light);
    font-style: italic;
    animation: am-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.am-about {
    padding: 80px 0;
    background: var(--am-white);
}

.am-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.am-about__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--am-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.am-about__text {
    font-size: 1rem;
    color: var(--am-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.am-about__text:last-child {
    margin-bottom: 0;
}

.am-about__image img {
    width: 100%;
    border-radius: var(--am-radius-lg);
    object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.am-stats,
.am-whoweare__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.am-stat {
    background: var(--am-light-bg);
    border-radius: var(--am-radius);
    padding: 28px 20px;
    text-align: center;
    border: 1px solid var(--am-border);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}

.am-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--am-accent), var(--color-signature-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.am-stat:hover::before {
    transform: scaleX(1);
}

.am-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--am-accent);
}

.am-stat__number {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-signature-blue);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: scale(0) translateY(10px);
    animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.am-stat:nth-child(1) .am-stat__number {
    animation-delay: 0.2s;
}

.am-stat:nth-child(2) .am-stat__number {
    animation-delay: 0.4s;
}

.am-stat:nth-child(3) .am-stat__number {
    animation-delay: 0.6s;
}

.am-stat:nth-child(4) .am-stat__number {
    animation-delay: 0.8s;
}

@keyframes vm-statPop {
    0% {
        opacity: 0;
        transform: scale(0) translateY(10px);
    }

    60% {
        opacity: 1;
        transform: scale(1.15) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.am-stat__label {
    display: block;
    font-size: 0.82rem;
    color: var(--am-gray);
    font-weight: 500;
    line-height: 1.3;
}

/* Dark variant for Who We Are section */
.am-stat--dark {
    background: var(--am-white);
    border-color: var(--am-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.am-whoweare {
    padding: 80px 0;
    background: var(--am-light-bg);
}

.am-whoweare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.am-whoweare__image img {
    width: 100%;
    border-radius: var(--am-radius-lg);
    object-fit: cover;
}

.am-whoweare__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--am-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.am-whoweare__text {
    font-size: 1rem;
    color: var(--am-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.am-whoweare__text:last-child {
    margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.am-services {
    padding: 80px 0;
    background: var(--am-white);
}

.am-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.am-services__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--am-text);
}

.am-services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Service Card */
.am-service-card {
    background: var(--am-light-bg);
    border-radius: var(--am-radius);
    padding: 28px;
    border: 1px solid transparent;
    transition: box-shadow 0.4s ease, transform 0.4s ease,
        border-color 0.4s ease, background 0.4s ease;
}

.am-service-card:hover {
    box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
    transform: translateY(-5px);
    border-color: var(--am-accent);
    background: var(--am-white);
}

.am-service-card--wide {
    grid-column: 1 / -1;
}

.am-service-card__badge {
    display: inline-block;
    background: linear-gradient(110deg,
            var(--color-signature-blue) 30%,
            #60a5fa 50%,
            var(--color-signature-blue) 70%);
    background-size: 200% 100%;
    color: var(--am-white);
    font-size: 0.75rem;
    font-weight: 700;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.am-service-card:hover .am-service-card__badge {
    animation: am-shimmer 1.5s ease infinite;
    transform: scale(1.1);
}

.am-service-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--am-text);
    margin-bottom: 10px;
}

.am-service-card__text {
    font-size: 0.9rem;
    color: var(--am-gray);
    line-height: 1.65;
    margin-bottom: 14px;
}

/* Tags */
.am-service-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.am-tag {
    display: inline-block;
    background: var(--am-white);
    color: var(--am-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--am-border);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease;
}

.am-tag:hover {
    background: var(--am-accent);
    color: var(--am-white);
    border-color: var(--am-accent);
    transform: translateY(-2px);
}

/* Service List */
.am-service-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.am-service-card__list li {
    font-size: 0.85rem;
    color: var(--am-gray);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}

.am-service-card__list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--am-accent);
    font-weight: 700;
}

.am-service-card__list--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.am-delivery {
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.am-delivery::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
    opacity: 0.15;
    pointer-events: none;
}

.am-delivery__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--am-text);
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.am-delivery__text {
    font-size: 1rem;
    color: var(--am-gray);
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.am-delivery__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.am-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.am-step__circle {
    width: 95px;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--am-white);
    border: 2px solid #e0e7ff;
    color: var(--am-text);
    font-weight: 700;
    font-size: 0.68rem;
    border-radius: 18px;
    letter-spacing: 0.3px;
    line-height: 1.3;
    padding: 8px;
    position: relative;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transition: all 0.4s ease;
}

.am-step__circle::before {
    content: counter(am-step-counter);
    counter-increment: am-step-counter;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.am-delivery__steps {
    counter-reset: am-step-counter;
}

.am-step:hover .am-step__circle {
    transform: translateY(-6px);
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
    background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes am-stepGlow {

    0%,
    10% {
        border-color: var(--color-signature-blue);
        box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
        transform: translateY(-4px) scale(1.03);
        background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
    }

    22%,
    100% {
        border-color: #e0e7ff;
        box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
        transform: translateY(0) scale(1);
        background: var(--am-white);
    }
}

/* Steps at odd positions (1,3,5,7,9,11), arrows at even */
.am-delivery__steps> :nth-child(1) .am-step__circle {
    animation: am-stepGlow 6s ease infinite 0s;
}

.am-delivery__steps> :nth-child(3) .am-step__circle {
    animation: am-stepGlow 6s ease infinite 1s;
}

.am-delivery__steps> :nth-child(5) .am-step__circle {
    animation: am-stepGlow 6s ease infinite 2s;
}

.am-delivery__steps> :nth-child(7) .am-step__circle {
    animation: am-stepGlow 6s ease infinite 3s;
}

.am-delivery__steps> :nth-child(9) .am-step__circle {
    animation: am-stepGlow 6s ease infinite 4s;
}

.am-delivery__steps> :nth-child(11) .am-step__circle {
    animation: am-stepGlow 6s ease infinite 5s;
}

.am-step__arrow {
    color: var(--color-signature-blue);
    font-size: 1.2rem;
    margin: 0 2px;
    font-weight: 300;
    opacity: 0.5;
    display: flex;
    align-items: center;
    animation: am-arrowPulse 2s ease infinite;
}

@keyframes am-arrowPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translateX(0);
    }

    50% {
        opacity: 0.8;
        transform: translateX(3px);
    }
}

}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.am-why {
    padding: 80px 0;
    background: var(--am-white);
}

.am-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
    max-width: 800px;
}

.am-why__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--am-text);
    margin-bottom: 16px;
    line-height: 1.3;
}

.am-why__text {
    font-size: 1rem;
    color: var(--am-gray);
    line-height: 1.7;
    margin-bottom: 24px;
}

.am-why__image img {
    width: 100%;
    border-radius: var(--am-radius-lg);
    object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.am-industries {
    padding: 80px 0;
    background: var(--am-light-bg);
    text-align: center;
}

.am-industries__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--am-text);
    margin-bottom: 48px;
}

.am-industries__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.am-industry {
    background: var(--am-white);
    border-radius: var(--am-radius);
    padding: 32px 20px;
    text-align: center;
    border: 1px solid var(--am-border);
    transition: box-shadow 0.4s ease, transform 0.4s ease,
        border-color 0.4s ease;
    cursor: default;
}

.am-industry:hover {
    box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
    transform: translateY(-5px);
    border-color: var(--am-accent);
}

.am-industry__icon {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 14px;
    transition: transform 0.4s ease;
}

.am-industry:hover .am-industry__icon {
    transform: scale(1.2) rotate(-5deg);
}

.am-industry__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--am-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.am-reliable {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.am-reliable__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--am-text);
    margin-bottom: 18px;
    line-height: 1.35;
}

.am-reliable__text {
    font-size: 1rem;
    color: var(--am-gray);
    line-height: 1.7;
    margin-bottom: 40px;
}

.am-reliable__pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.am-pillar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--am-white);
    border: 1px solid var(--am-border);
    border-radius: 30px;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.am-pillar:hover {
    background: rgba(232, 160, 37, 0.06);
    border-color: var(--am-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.am-pillar__dot {
    width: 8px;
    height: 8px;
    background: var(--am-accent);
    border-radius: 50%;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease;
}

.am-pillar:hover .am-pillar__dot {
    box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.am-pillar__label {
    font-size: 0.85rem;
    color: var(--am-text);
    font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.am-faq {
    padding: 80px 0;
    background: var(--am-light-bg);
}

.am-faq__wrapper {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.am-faq__heading {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--am-text);
    margin-bottom: 36px;
}

/* Accordion */
.accordion {
    text-align: left;
}

.accordion-item {
    border-bottom: 1px solid var(--am-border);
}

.accordion-item button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--am-text);
    text-align: left;
    gap: 16px;
}

.accordion-item button .icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--am-text);
    border-bottom: 2.5px solid var(--am-text);
    transform: translate(-50%, -25%) rotate(-135deg);
    transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
    display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
    transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--am-transition);
}

.accordion-item button[aria-expanded="true"]+.accordion-content {
    max-height: 300px;
}

.accordion-content p {
    padding: 0 0 18px;
    font-size: 0.9rem;
    color: var(--am-gray);
    line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.am-commitment {
    padding: 60px 0;
    background: var(--am-white);
}

.am-commitment__inner {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.am-commitment__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--am-text);
    margin-bottom: 16px;
}

.am-commitment__text {
    font-size: 1rem;
    color: var(--am-gray);
    line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.am-cta {
    padding: 80px 0;
    background: var(--am-dark);
}

.am-cta__inner {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.am-cta__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--am-white);
    margin-bottom: 16px;
    line-height: 1.3;
}

.am-cta__text {
    font-size: 1rem;
    color: var(--am-gray-light);
    line-height: 1.7;
    margin-bottom: 32px;
}

.am-cta__button {
    display: inline-block;
    background: var(--am-accent);
    color: var(--am-white);
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 36px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease,
        box-shadow 0.3s ease;
    animation: am-pulse 2.5s ease infinite;
}

.am-cta__button:hover {
    background: var(--am-accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
    animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.am-stat__icon {
    display: block;
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 10px;
}

/* Services subtitle */
.am-services__subtitle {
    font-size: 1rem;
    color: var(--am-gray);
    margin-top: 12px;
    line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
    .am-hero__title {
        font-size: 2.2rem;
    }

    .am-about__heading,
    .am-whoweare__heading {
        font-size: 1.8rem;
    }

    .am-services__title {
        font-size: 1.8rem;
    }

    .am-service-card__title {
        font-size: 1rem;
    }

    .am-delivery__heading {
        font-size: 1.8rem;
    }

    .am-step__circle {
        width: 85px;
        height: 85px;
        font-size: 0.62rem;
        border-radius: 14px;
        padding: 6px;
    }

    .am-step__circle::before {
        width: 22px;
        height: 22px;
        font-size: 0.58rem;
    }

    .am-step__arrow {
        font-size: 1rem;
        margin: 0 1px;
    }

    .am-reliable__heading {
        font-size: 1.8rem;
    }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
    .am-hero {
        padding: 100px 16px 80px;
    }

    .am-hero__title {
        font-size: 1.7rem;
    }

    .am-hero__subtitle {
        font-size: 1rem;
    }

    .am-about__grid,
    .am-whoweare__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .am-about__heading,
    .am-whoweare__heading {
        font-size: 1.6rem;
    }

    .am-stats,
    .am-whoweare__stats {
        grid-template-columns: 1fr 1fr;
        order: 2;
    }

    .am-about__content,
    .am-whoweare__content {
        order: 1;
    }

    .am-services__grid {
        grid-template-columns: 1fr;
    }

    .am-services__title {
        font-size: 1.5rem;
    }

    .am-service-card--wide {
        grid-column: span 1;
    }

    .am-delivery__heading {
        font-size: 1.5rem;
    }

    .am-delivery__steps {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .am-step__arrow {
        display: none;
    }

    .am-step__circle {
        width: 90px;
        height: 90px;
        font-size: 0.7rem;
        border-radius: 16px;
    }

    .am-reliable__heading {
        font-size: 1.5rem;
    }

    .am-reliable__pillars {
        flex-wrap: wrap;
        gap: 12px;
    }

    .am-why__heading {
        font-size: 1.5rem;
    }

    .am-industries__heading {
        font-size: 1.5rem;
    }

    .am-industries__grid {
        grid-template-columns: 1fr 1fr;
    }

    .am-faq__heading {
        font-size: 1.3rem;
    }

    .am-cta__heading {
        font-size: 1.5rem;
    }

    /* Disable scroll animations on mobile for performance */
    .am-animate,
    .am-animate--left,
    .am-animate--right,
    .am-animate--scale {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
    .am-hero {
        padding: 90px 14px 60px;
    }

    .am-hero__title {
        font-size: 1.4rem;
    }

    .am-hero__subtitle {
        font-size: 0.9rem;
    }

    .am-hero__breadcrumb {
        font-size: 0.75rem;
    }

    .am-about,
    .am-whoweare,
    .am-services,
    .am-delivery,
    .am-reliable,
    .am-why,
    .am-industries,
    .am-faq,
    .am-commitment,
    .am-cta {
        padding: 50px 0;
    }

    .am-about__heading,
    .am-whoweare__heading {
        font-size: 1.4rem;
    }

    .am-about__text,
    .am-whoweare__text {
        font-size: 0.9rem;
    }

    .am-stats,
    .am-whoweare__stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .am-stat {
        padding: 20px 14px;
    }

    .am-stat__number {
        font-size: 1.8rem;
    }

    .am-stat__icon {
        font-size: 1.8rem;
    }

    .am-stat__label {
        font-size: 0.75rem;
    }

    .am-services__title {
        font-size: 1.3rem;
    }

    .am-service-card {
        padding: 20px 16px;
    }

    .am-service-card__badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .am-delivery__heading {
        font-size: 1.3rem;
    }

    .am-step__circle {
        width: 80px;
        height: 80px;
        font-size: 0.65rem;
        border-radius: 14px;
    }

    .am-step__circle::before {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
        top: -8px;
        right: -8px;
    }

    .am-reliable__heading {
        font-size: 1.3rem;
    }

    .am-pillar {
        padding: 10px 14px;
        font-size: 0.82rem;
    }

    .am-industries__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .am-industry {
        padding: 20px 14px;
    }

    .am-cta__heading {
        font-size: 1.3rem;
    }

    .am-cta__button {
        font-size: 0.9rem;
        padding: 14px 28px;
    }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.am-tech {
    padding: 80px 0;
    background: var(--am-light-bg);
}

.am-tech__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.am-tech__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--am-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.am-tech__text {
    font-size: 1rem;
    color: var(--am-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.am-tech__content {}

.am-tech__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.am-tech__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .am-tech__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .am-tech__heading {
        font-size: 1.6rem;
    }

    .am-tech__stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .am-tech__heading {
        font-size: 1.4rem;
    }
}

/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    --ml-accent: #e8a025;
    --ml-accent-hover: #d4911e;
    --ml-dark: #0b1120;
    --ml-dark-2: #101828;
    --ml-dark-3: #1a2332;
    --ml-white: #ffffff;
    --ml-gray: #000000;
    --ml-gray-light: #000000;
    --ml-light-bg: #f8f9fb;
    --ml-light-bg-2: #f1f3f7;
    --ml-text: #000000;
    --ml-text-light: #000000;
    --ml-border: #e5e7eb;
    --ml-radius: 12px;
    --ml-radius-lg: 20px;
    --ml-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --ml-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
    --ml-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes ml-fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in from left */
@keyframes ml-fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade in from right */
@keyframes ml-fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale up pop */
@keyframes ml-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
    from {
        width: 0;
    }

    to {
        width: 60px;
    }
}

/* Pulse glow for CTA */
@keyframes ml-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
    }
}

/* Shimmer for badges */
@keyframes ml-shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Float subtle */
@keyframes vm-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.ml-animate {
    opacity: 0;
    transform: translateY(40px);
    animation: ml-fadeUp 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.ml-animate--left {
    opacity: 0;
    transform: translateX(-40px);
    animation: ml-fadeLeft 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.ml-animate--right {
    opacity: 0;
    transform: translateX(40px);
    animation: ml-fadeRight 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.ml-animate--scale {
    opacity: 0;
    transform: scale(0.85);
    animation: ml-scaleIn 0.7s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.ml-stagger>*:nth-child(1) {
    animation-delay: 0s;
}

.ml-stagger>*:nth-child(2) {
    animation-delay: 0.08s;
}

.ml-stagger>*:nth-child(3) {
    animation-delay: 0.16s;
}

.ml-stagger>*:nth-child(4) {
    animation-delay: 0.24s;
}

.ml-stagger>*:nth-child(5) {
    animation-delay: 0.32s;
}

.ml-stagger>*:nth-child(6) {
    animation-delay: 0.40s;
}

.ml-stagger>*:nth-child(7) {
    animation-delay: 0.48s;
}

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {

    .ml-animate,
    .ml-animate--left,
    .ml-animate--right,
    .ml-animate--scale {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---------- Container ---------- */
.ml-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.ml-text-accent {
    color: var(--ml-accent);
}

/* ---------- Shared Checklist ---------- */
.ml-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ml-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--ml-text);
    line-height: 1.5;
}

.ml-checklist__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ml-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.ml-hero {
    background: var(--ml-dark);
    text-align: center;
    padding: 140px 20px 120px;
    position: relative;
    overflow: hidden;
}

.ml-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%,
            rgba(232, 160, 37, 0.08) 0%,
            transparent 60%),
        radial-gradient(ellipse at 70% 30%,
            rgba(59, 130, 246, 0.06) 0%,
            transparent 50%);
    pointer-events: none;
}

.ml-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.ml-hero__breadcrumb {
    font-size: 0.85rem;
    color: var(--ml-gray);
    margin-bottom: 24px;
    letter-spacing: 0.3px;
    animation: ml-fadeUp 0.6s ease 0.1s both;
}

.ml-hero__breadcrumb-active {
    color: var(--ml-accent);
}

.ml-hero__title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--ml-white);
    margin-bottom: 20px;
    line-height: 1.2;
    animation: ml-fadeUp 0.7s ease 0.25s both;
}

.ml-hero__title-accent {
    color: var(--ml-accent);
    font-style: italic;
    display: inline-block;
}

.ml-hero__subtitle {
    font-size: 1.3rem;
    color: var(--ml-white);
    margin-bottom: 14px;
    font-weight: 500;
    line-height: 1.5;
    animation: ml-fadeUp 0.7s ease 0.45s both;
}

.ml-hero__desc {
    font-size: 0.95rem;
    color: var(--ml-gray-light);
    font-style: italic;
    animation: ml-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.ml-about {
    padding: 80px 0;
    background: var(--ml-white);
}

.ml-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.ml-about__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ml-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.ml-about__text {
    font-size: 1rem;
    color: var(--ml-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.ml-about__text:last-child {
    margin-bottom: 0;
}

.ml-about__image img {
    width: 100%;
    border-radius: var(--ml-radius-lg);
    object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.ml-stats,
.ml-whoweare__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ml-stat {
    background: var(--ml-light-bg);
    border-radius: var(--ml-radius);
    padding: 28px 20px;
    text-align: center;
    border: 1px solid var(--ml-border);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}

.ml-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--ml-accent), var(--color-signature-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.ml-stat:hover::before {
    transform: scaleX(1);
}

.ml-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--ml-accent);
}

.ml-stat__number {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-signature-blue);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: scale(0) translateY(10px);
    animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.ml-stat:nth-child(1) .ml-stat__number {
    animation-delay: 0.2s;
}

.ml-stat:nth-child(2) .ml-stat__number {
    animation-delay: 0.4s;
}

.ml-stat:nth-child(3) .ml-stat__number {
    animation-delay: 0.6s;
}

.ml-stat:nth-child(4) .ml-stat__number {
    animation-delay: 0.8s;
}

@keyframes vm-statPop {
    0% {
        opacity: 0;
        transform: scale(0) translateY(10px);
    }

    60% {
        opacity: 1;
        transform: scale(1.15) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ml-stat__label {
    display: block;
    font-size: 0.82rem;
    color: var(--ml-gray);
    font-weight: 500;
    line-height: 1.3;
}

/* Dark variant for Who We Are section */
.ml-stat--dark {
    background: var(--ml-white);
    border-color: var(--ml-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.ml-whoweare {
    padding: 80px 0;
    background: var(--ml-light-bg);
}

.ml-whoweare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.ml-whoweare__image img {
    width: 100%;
    border-radius: var(--ml-radius-lg);
    object-fit: cover;
}

.ml-whoweare__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ml-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.ml-whoweare__text {
    font-size: 1rem;
    color: var(--ml-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.ml-whoweare__text:last-child {
    margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.ml-services {
    padding: 80px 0;
    background: var(--ml-white);
}

.ml-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.ml-services__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ml-text);
}

.ml-services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Service Card */
.ml-service-card {
    background: var(--ml-light-bg);
    border-radius: var(--ml-radius);
    padding: 28px;
    border: 1px solid transparent;
    transition: box-shadow 0.4s ease, transform 0.4s ease,
        border-color 0.4s ease, background 0.4s ease;
}

.ml-service-card:hover {
    box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
    transform: translateY(-5px);
    border-color: var(--ml-accent);
    background: var(--ml-white);
}

.ml-service-card--wide {
    grid-column: 1 / -1;
}

.ml-service-card__badge {
    display: inline-block;
    background: linear-gradient(110deg,
            var(--color-signature-blue) 30%,
            #60a5fa 50%,
            var(--color-signature-blue) 70%);
    background-size: 200% 100%;
    color: var(--ml-white);
    font-size: 0.75rem;
    font-weight: 700;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.ml-service-card:hover .ml-service-card__badge {
    animation: ml-shimmer 1.5s ease infinite;
    transform: scale(1.1);
}

.ml-service-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ml-text);
    margin-bottom: 10px;
}

.ml-service-card__text {
    font-size: 0.9rem;
    color: var(--ml-gray);
    line-height: 1.65;
    margin-bottom: 14px;
}

/* Tags */
.ml-service-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ml-tag {
    display: inline-block;
    background: var(--ml-white);
    color: var(--ml-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--ml-border);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease;
}

.ml-tag:hover {
    background: var(--ml-accent);
    color: var(--ml-white);
    border-color: var(--ml-accent);
    transform: translateY(-2px);
}

/* Service List */
.ml-service-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ml-service-card__list li {
    font-size: 0.85rem;
    color: var(--ml-gray);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}

.ml-service-card__list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--ml-accent);
    font-weight: 700;
}

.ml-service-card__list--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.ml-delivery {
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ml-delivery::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
    opacity: 0.15;
    pointer-events: none;
}

.ml-delivery__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ml-text);
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.ml-delivery__text {
    font-size: 1rem;
    color: var(--ml-gray);
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.ml-delivery__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.ml-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.ml-step__circle {
    width: 95px;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--ml-white);
    border: 2px solid #e0e7ff;
    color: var(--ml-text);
    font-weight: 700;
    font-size: 0.68rem;
    border-radius: 18px;
    letter-spacing: 0.3px;
    line-height: 1.3;
    padding: 8px;
    position: relative;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transition: all 0.4s ease;
}

.ml-step__circle::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.ml-delivery__steps {
    counter-reset: step-counter;
}

.ml-step:hover .ml-step__circle {
    transform: translateY(-6px);
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
    background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes ml-stepGlow {

    0%,
    10% {
        border-color: var(--color-signature-blue);
        box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
        transform: translateY(-4px) scale(1.03);
        background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
    }

    22%,
    100% {
        border-color: #e0e7ff;
        box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
        transform: translateY(0) scale(1);
        background: var(--ml-white);
    }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.ml-delivery__steps> :nth-child(1) .ml-step__circle {
    animation: ml-stepGlow 7s ease infinite 0s;
}

.ml-delivery__steps> :nth-child(3) .ml-step__circle {
    animation: ml-stepGlow 7s ease infinite 1s;
}

.ml-delivery__steps> :nth-child(5) .ml-step__circle {
    animation: ml-stepGlow 7s ease infinite 2s;
}

.ml-delivery__steps> :nth-child(7) .ml-step__circle {
    animation: ml-stepGlow 7s ease infinite 3s;
}

.ml-delivery__steps> :nth-child(9) .ml-step__circle {
    animation: ml-stepGlow 7s ease infinite 4s;
}

.ml-delivery__steps> :nth-child(11) .ml-step__circle {
    animation: ml-stepGlow 7s ease infinite 5s;
}

.ml-delivery__steps> :nth-child(13) .ml-step__circle {
    animation: ml-stepGlow 7s ease infinite 6s;
}

.ml-step__arrow {
    color: var(--color-signature-blue);
    font-size: 1.2rem;
    margin: 0 2px;
    font-weight: 300;
    opacity: 0.5;
    display: flex;
    align-items: center;
    animation: ml-arrowPulse 2s ease infinite;
}

@keyframes ml-arrowPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translateX(0);
    }

    50% {
        opacity: 0.8;
        transform: translateX(3px);
    }
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.ml-why {
    padding: 80px 0;
    background: var(--ml-white);
}

.ml-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
    max-width: 800px;
}

.ml-why__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ml-text);
    margin-bottom: 16px;
    line-height: 1.3;
}

.ml-why__text {
    font-size: 1rem;
    color: var(--ml-gray);
    line-height: 1.7;
    margin-bottom: 24px;
}

.ml-why__image img {
    width: 100%;
    border-radius: var(--ml-radius-lg);
    object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.ml-industries {
    padding: 80px 0;
    background: var(--ml-light-bg);
    text-align: center;
}

.ml-industries__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ml-text);
    margin-bottom: 48px;
}

.ml-industries__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ml-industry {
    background: var(--ml-white);
    border-radius: var(--ml-radius);
    padding: 32px 20px;
    text-align: center;
    border: 1px solid var(--ml-border);
    transition: box-shadow 0.4s ease, transform 0.4s ease,
        border-color 0.4s ease;
    cursor: default;
}

.ml-industry:hover {
    box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
    transform: translateY(-5px);
    border-color: var(--ml-accent);
}

.ml-industry__icon {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 14px;
    transition: transform 0.4s ease;
}

.ml-industry:hover .ml-industry__icon {
    transform: scale(1.2) rotate(-5deg);
}

.ml-industry__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ml-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.ml-reliable {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.ml-reliable__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ml-text);
    margin-bottom: 18px;
    line-height: 1.35;
}

.ml-reliable__text {
    font-size: 1rem;
    color: var(--ml-gray);
    line-height: 1.7;
    margin-bottom: 40px;
}

.ml-reliable__pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.ml-pillar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ml-white);
    border: 1px solid var(--ml-border);
    border-radius: 30px;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.ml-pillar:hover {
    background: rgba(232, 160, 37, 0.06);
    border-color: var(--ml-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.ml-pillar__dot {
    width: 8px;
    height: 8px;
    background: var(--ml-accent);
    border-radius: 50%;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease;
}

.ml-pillar:hover .ml-pillar__dot {
    box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.ml-pillar__label {
    font-size: 0.85rem;
    color: var(--ml-text);
    font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.ml-faq {
    padding: 80px 0;
    background: var(--ml-light-bg);
}

.ml-faq__wrapper {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.ml-faq__heading {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ml-text);
    margin-bottom: 36px;
}

/* Accordion */
.accordion {
    text-align: left;
}

.accordion-item {
    border-bottom: 1px solid var(--ml-border);
}

.accordion-item button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ml-text);
    text-align: left;
    gap: 16px;
}

.accordion-item button .icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--ml-text);
    border-bottom: 2.5px solid var(--ml-text);
    transform: translate(-50%, -25%) rotate(-135deg);
    transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
    display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
    transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ml-transition);
}

.accordion-item button[aria-expanded="true"]+.accordion-content {
    max-height: 300px;
}

.accordion-content p {
    padding: 0 0 18px;
    font-size: 0.9rem;
    color: var(--ml-gray);
    line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.ml-commitment {
    padding: 60px 0;
    background: var(--ml-white);
}

.ml-commitment__inner {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.ml-commitment__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ml-text);
    margin-bottom: 16px;
}

.ml-commitment__text {
    font-size: 1rem;
    color: var(--ml-gray);
    line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.ml-cta {
    padding: 80px 0;
    background: var(--ml-dark);
}

.ml-cta__inner {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.ml-cta__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ml-white);
    margin-bottom: 16px;
    line-height: 1.3;
}

.ml-cta__text {
    font-size: 1rem;
    color: var(--ml-gray-light);
    line-height: 1.7;
    margin-bottom: 32px;
}

.ml-cta__button {
    display: inline-block;
    background: var(--ml-accent);
    color: var(--ml-white);
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 36px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease,
        box-shadow 0.3s ease;
    animation: ml-pulse 2.5s ease infinite;
}

.ml-cta__button:hover {
    background: var(--ml-accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
    animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.ml-stat__icon {
    display: block;
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 10px;
}

/* Services subtitle */
.ml-services__subtitle {
    font-size: 1rem;
    color: var(--ml-gray);
    margin-top: 12px;
    line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
    .ml-hero__title {
        font-size: 2.2rem;
    }

    .ml-about__heading,
    .ml-whoweare__heading {
        font-size: 1.8rem;
    }

    .ml-services__title {
        font-size: 1.8rem;
    }

    .ml-service-card__title {
        font-size: 1rem;
    }

    .ml-delivery__heading {
        font-size: 1.8rem;
    }

    .ml-step__circle {
        width: 85px;
        height: 85px;
        font-size: 0.62rem;
        border-radius: 14px;
        padding: 6px;
    }

    .ml-step__circle::before {
        width: 22px;
        height: 22px;
        font-size: 0.58rem;
    }

    .ml-step__arrow {
        font-size: 1rem;
        margin: 0 1px;
    }

    .ml-reliable__heading {
        font-size: 1.8rem;
    }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
    .ml-hero {
        padding: 100px 16px 80px;
    }

    .ml-hero__title {
        font-size: 1.7rem;
    }

    .ml-hero__subtitle {
        font-size: 1rem;
    }

    .ml-about__grid,
    .ml-whoweare__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ml-about__heading,
    .ml-whoweare__heading {
        font-size: 1.6rem;
    }

    .ml-stats,
    .ml-whoweare__stats {
        grid-template-columns: 1fr 1fr;
        order: 2;
    }

    .ml-about__content,
    .ml-whoweare__content {
        order: 1;
    }

    .ml-services__grid {
        grid-template-columns: 1fr;
    }

    .ml-services__title {
        font-size: 1.5rem;
    }

    .ml-service-card--wide {
        grid-column: span 1;
    }

    .ml-delivery__heading {
        font-size: 1.5rem;
    }

    .ml-delivery__steps {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .ml-step__arrow {
        display: none;
    }

    .ml-step__circle {
        width: 90px;
        height: 90px;
        font-size: 0.7rem;
        border-radius: 16px;
    }

    .ml-reliable__heading {
        font-size: 1.5rem;
    }

    .ml-reliable__pillars {
        flex-wrap: wrap;
        gap: 12px;
    }

    .ml-why__heading {
        font-size: 1.5rem;
    }

    .ml-industries__heading {
        font-size: 1.5rem;
    }

    .ml-industries__grid {
        grid-template-columns: 1fr 1fr;
    }

    .ml-faq__heading {
        font-size: 1.3rem;
    }

    .ml-cta__heading {
        font-size: 1.5rem;
    }

    /* Disable scroll animations on mobile for performance */
    .ml-animate,
    .ml-animate--left,
    .ml-animate--right,
    .ml-animate--scale {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
    .ml-hero {
        padding: 90px 14px 60px;
    }

    .ml-hero__title {
        font-size: 1.4rem;
    }

    .ml-hero__subtitle {
        font-size: 0.9rem;
    }

    .ml-hero__breadcrumb {
        font-size: 0.75rem;
    }

    .ml-about,
    .ml-whoweare,
    .ml-services,
    .ml-delivery,
    .ml-reliable,
    .ml-why,
    .ml-industries,
    .ml-faq,
    .ml-commitment,
    .ml-cta {
        padding: 50px 0;
    }

    .ml-about__heading,
    .ml-whoweare__heading {
        font-size: 1.4rem;
    }

    .ml-about__text,
    .ml-whoweare__text {
        font-size: 0.9rem;
    }

    .ml-stats,
    .ml-whoweare__stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .ml-stat {
        padding: 20px 14px;
    }

    .ml-stat__number {
        font-size: 1.8rem;
    }

    .ml-stat__icon {
        font-size: 1.8rem;
    }

    .ml-stat__label {
        font-size: 0.75rem;
    }

    .ml-services__title {
        font-size: 1.3rem;
    }

    .ml-service-card {
        padding: 20px 16px;
    }

    .ml-service-card__badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .ml-delivery__heading {
        font-size: 1.3rem;
    }

    .ml-step__circle {
        width: 80px;
        height: 80px;
        font-size: 0.65rem;
        border-radius: 14px;
    }

    .ml-step__circle::before {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
        top: -8px;
        right: -8px;
    }

    .ml-reliable__heading {
        font-size: 1.3rem;
    }

    .ml-pillar {
        padding: 10px 14px;
        font-size: 0.82rem;
    }

    .ml-industries__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .ml-industry {
        padding: 20px 14px;
    }

    .ml-cta__heading {
        font-size: 1.3rem;
    }

    .ml-cta__button {
        font-size: 0.9rem;
        padding: 14px 28px;
    }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.ml-tech {
    padding: 80px 0;
    background: var(--ml-light-bg);
}

.ml-tech__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.ml-tech__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ml-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.ml-tech__text {
    font-size: 1rem;
    color: var(--ml-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.ml-tech__content {}

.ml-tech__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ml-tech__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .ml-tech__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ml-tech__heading {
        font-size: 1.6rem;
    }

    .ml-tech__stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .ml-tech__heading {
        font-size: 1.4rem;
    }
}

/* ============================================================
   VISION & MISSION PAGE — vision-mission.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    --vm-accent: #e8a025;
    --vm-accent-hover: #d4911e;
    --vm-dark: #0b1120;
    --vm-dark-2: #101828;
    --vm-dark-3: #1a2332;
    --vm-white: #ffffff;
    --vm-gray: #000000;
    --vm-gray-light: #000000;
    --vm-light-bg: #f8f9fb;
    --vm-light-bg-2: #f1f3f7;
    --vm-text: #000000;
    --vm-text-light: #000000;
    --vm-border: #e5e7eb;
    --vm-radius: 12px;
    --vm-radius-lg: 20px;
    --vm-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --vm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
    --vm-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes vm-fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in from left */
@keyframes vm-fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade in from right */
@keyframes vm-fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale up pop */
@keyframes vm-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
    from {
        width: 0;
    }

    to {
        width: 60px;
    }
}

/* Pulse glow for CTA */
@keyframes vm-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
    }
}

/* Shimmer for badges */
@keyframes vm-shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Float subtle */
@keyframes vm-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.vm-animate {
    opacity: 0;
    transform: translateY(40px);
    animation: vm-fadeUp 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.vm-animate--left {
    opacity: 0;
    transform: translateX(-40px);
    animation: vm-fadeLeft 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.vm-animate--right {
    opacity: 0;
    transform: translateX(40px);
    animation: vm-fadeRight 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.vm-animate--scale {
    opacity: 0;
    transform: scale(0.85);
    animation: vm-scaleIn 0.7s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.vm-stagger>*:nth-child(1) {
    animation-delay: 0s;
}

.vm-stagger>*:nth-child(2) {
    animation-delay: 0.08s;
}

.vm-stagger>*:nth-child(3) {
    animation-delay: 0.16s;
}

.vm-stagger>*:nth-child(4) {
    animation-delay: 0.24s;
}

.vm-stagger>*:nth-child(5) {
    animation-delay: 0.32s;
}

.vm-stagger>*:nth-child(6) {
    animation-delay: 0.40s;
}

.vm-stagger>*:nth-child(7) {
    animation-delay: 0.48s;
}

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {

    .vm-animate,
    .vm-animate--left,
    .vm-animate--right,
    .vm-animate--scale {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---------- Container ---------- */
.vm-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.vm-text-accent {
    color: var(--vm-accent);
}

/* ---------- Shared Checklist ---------- */
.vm-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vm-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--vm-text);
    line-height: 1.5;
}

.vm-checklist__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--vm-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.vm-hero {
    background: var(--vm-dark);
    text-align: center;
    padding: 140px 20px 120px;
    position: relative;
    overflow: hidden;
}

.vm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%,
            rgba(232, 160, 37, 0.08) 0%,
            transparent 60%),
        radial-gradient(ellipse at 70% 30%,
            rgba(59, 130, 246, 0.06) 0%,
            transparent 50%);
    pointer-events: none;
}

.vm-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.vm-hero__breadcrumb {
    font-size: 0.85rem;
    color: var(--vm-gray);
    margin-bottom: 24px;
    letter-spacing: 0.3px;
    animation: vm-fadeUp 0.6s ease 0.1s both;
}

.vm-hero__breadcrumb-active {
    color: var(--vm-accent);
}

.vm-hero__title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--vm-white);
    margin-bottom: 20px;
    line-height: 1.2;
    animation: vm-fadeUp 0.7s ease 0.25s both;
}

.vm-hero__title-accent {
    color: var(--vm-accent);
    font-style: italic;
    display: inline-block;
}

.vm-hero__subtitle {
    font-size: 1.3rem;
    color: var(--vm-white);
    margin-bottom: 14px;
    font-weight: 500;
    line-height: 1.5;
    animation: vm-fadeUp 0.7s ease 0.45s both;
}

.vm-hero__desc {
    font-size: 0.95rem;
    color: var(--vm-gray-light);
    font-style: italic;
    animation: vm-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.vm-about {
    padding: 80px 0;
    background: var(--vm-white);
}

.vm-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.vm-about__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--vm-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.vm-about__text {
    font-size: 1rem;
    color: var(--vm-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.vm-about__text:last-child {
    margin-bottom: 0;
}

.vm-about__image img {
    width: 100%;
    border-radius: var(--vm-radius-lg);
    object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.vm-stats,
.vm-whoweare__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.vm-stat {
    background: var(--vm-light-bg);
    border-radius: var(--vm-radius);
    padding: 28px 20px;
    text-align: center;
    border: 1px solid var(--vm-border);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}

.vm-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--vm-accent), var(--color-signature-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.vm-stat:hover::before {
    transform: scaleX(1);
}

.vm-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--vm-accent);
}

.vm-stat__number {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-signature-blue);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: scale(0) translateY(10px);
    animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.vm-stat:nth-child(1) .vm-stat__number {
    animation-delay: 0.2s;
}

.vm-stat:nth-child(2) .vm-stat__number {
    animation-delay: 0.4s;
}

.vm-stat:nth-child(3) .vm-stat__number {
    animation-delay: 0.6s;
}

.vm-stat:nth-child(4) .vm-stat__number {
    animation-delay: 0.8s;
}

@keyframes vm-statPop {
    0% {
        opacity: 0;
        transform: scale(0) translateY(10px);
    }

    60% {
        opacity: 1;
        transform: scale(1.15) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.vm-stat__label {
    display: block;
    font-size: 0.82rem;
    color: var(--vm-gray);
    font-weight: 500;
    line-height: 1.3;
}

/* Dark variant for Who We Are section */
.vm-stat--dark {
    background: var(--vm-white);
    border-color: var(--vm-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.vm-whoweare {
    padding: 80px 0;
    background: var(--vm-light-bg);
}

.vm-whoweare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.vm-whoweare__image img {
    width: 100%;
    border-radius: var(--vm-radius-lg);
    object-fit: cover;
}

.vm-whoweare__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--vm-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.vm-whoweare__text {
    font-size: 1rem;
    color: var(--vm-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.vm-whoweare__text:last-child {
    margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.vm-services {
    padding: 80px 0;
    background: var(--vm-white);
}

.vm-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.vm-services__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--vm-text);
}

.vm-services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Service Card */
.vm-service-card {
    background: var(--vm-light-bg);
    border-radius: var(--vm-radius);
    padding: 28px;
    border: 1px solid transparent;
    transition: box-shadow 0.4s ease, transform 0.4s ease,
        border-color 0.4s ease, background 0.4s ease;
}

.vm-service-card:hover {
    box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
    transform: translateY(-5px);
    border-color: var(--vm-accent);
    background: var(--vm-white);
}

.vm-service-card--wide {
    grid-column: 1 / -1;
}

.vm-service-card__badge {
    display: inline-block;
    background: linear-gradient(110deg,
            var(--color-signature-blue) 30%,
            #60a5fa 50%,
            var(--color-signature-blue) 70%);
    background-size: 200% 100%;
    color: var(--vm-white);
    font-size: 0.75rem;
    font-weight: 700;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.vm-service-card:hover .vm-service-card__badge {
    animation: vm-shimmer 1.5s ease infinite;
    transform: scale(1.1);
}

.vm-service-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vm-text);
    margin-bottom: 10px;
}

.vm-service-card__text {
    font-size: 0.9rem;
    color: var(--vm-gray);
    line-height: 1.65;
    margin-bottom: 14px;
}

/* Tags */
.vm-service-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.vm-tag {
    display: inline-block;
    background: var(--vm-white);
    color: var(--vm-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--vm-border);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease;
}

.vm-tag:hover {
    background: var(--vm-accent);
    color: var(--vm-white);
    border-color: var(--vm-accent);
    transform: translateY(-2px);
}

/* Service List */
.vm-service-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vm-service-card__list li {
    font-size: 0.85rem;
    color: var(--vm-gray);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}

.vm-service-card__list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--vm-accent);
    font-weight: 700;
}

.vm-service-card__list--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.vm-delivery {
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vm-delivery::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
    opacity: 0.15;
    pointer-events: none;
}

.vm-delivery__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vm-text);
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.vm-delivery__text {
    font-size: 1rem;
    color: var(--vm-gray);
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.vm-delivery__steps {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.vm-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.vm-step__circle {
    width: 110px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--vm-white);
    border: 2px solid #e0e7ff;
    color: var(--vm-text);
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 20px;
    letter-spacing: 0.3px;
    line-height: 1.3;
    padding: 12px;
    position: relative;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transition: all 0.4s ease;
}

.vm-step__circle::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.vm-delivery__steps {
    counter-reset: step-counter;
}

.vm-step:hover .vm-step__circle {
    transform: translateY(-6px);
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
    background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 6 steps, 1s each = 6s total cycle */
@keyframes vm-stepGlow {

    0%,
    12% {
        border-color: var(--color-signature-blue);
        box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
        transform: translateY(-4px) scale(1.03);
        background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
    }

    25%,
    100% {
        border-color: #e0e7ff;
        box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
        transform: translateY(0) scale(1);
        background: var(--vm-white);
    }
}

/* Steps are at positions 1,3,5,7,9,11 (arrows at 2,4,6,8,10) */
.vm-delivery__steps> :nth-child(1) .vm-step__circle {
    animation: vm-stepGlow 6s ease infinite 0s;
}

.vm-delivery__steps> :nth-child(3) .vm-step__circle {
    animation: vm-stepGlow 6s ease infinite 1s;
}

.vm-delivery__steps> :nth-child(5) .vm-step__circle {
    animation: vm-stepGlow 6s ease infinite 2s;
}

.vm-delivery__steps> :nth-child(7) .vm-step__circle {
    animation: vm-stepGlow 6s ease infinite 3s;
}

.vm-delivery__steps> :nth-child(9) .vm-step__circle {
    animation: vm-stepGlow 6s ease infinite 4s;
}

.vm-delivery__steps> :nth-child(11) .vm-step__circle {
    animation: vm-stepGlow 6s ease infinite 5s;
}

.vm-step__arrow {
    color: var(--color-signature-blue);
    font-size: 1.6rem;
    margin: 0 6px;
    font-weight: 300;
    opacity: 0.5;
    display: flex;
    align-items: center;
    animation: vm-arrowPulse 2s ease infinite;
}

@keyframes vm-arrowPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translateX(0);
    }

    50% {
        opacity: 0.8;
        transform: translateX(3px);
    }
}

}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.vm-why {
    padding: 80px 0;
    background: var(--vm-white);
}

.vm-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
    max-width: 800px;
}

.vm-why__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vm-text);
    margin-bottom: 16px;
    line-height: 1.3;
}

.vm-why__text {
    font-size: 1rem;
    color: var(--vm-gray);
    line-height: 1.7;
    margin-bottom: 24px;
}

.vm-why__image img {
    width: 100%;
    border-radius: var(--vm-radius-lg);
    object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.vm-industries {
    padding: 80px 0;
    background: var(--vm-light-bg);
    text-align: center;
}

.vm-industries__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vm-text);
    margin-bottom: 48px;
}

.vm-industries__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.vm-industry {
    background: var(--vm-white);
    border-radius: var(--vm-radius);
    padding: 32px 20px;
    text-align: center;
    border: 1px solid var(--vm-border);
    transition: box-shadow 0.4s ease, transform 0.4s ease,
        border-color 0.4s ease;
    cursor: default;
}

.vm-industry:hover {
    box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
    transform: translateY(-5px);
    border-color: var(--vm-accent);
}

.vm-industry__icon {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 14px;
    transition: transform 0.4s ease;
}

.vm-industry:hover .vm-industry__icon {
    transform: scale(1.2) rotate(-5deg);
}

.vm-industry__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vm-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.vm-reliable {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.vm-reliable__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vm-text);
    margin-bottom: 18px;
    line-height: 1.35;
}

.vm-reliable__text {
    font-size: 1rem;
    color: var(--vm-gray);
    line-height: 1.7;
    margin-bottom: 40px;
}

.vm-reliable__pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.vm-pillar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--vm-white);
    border: 1px solid var(--vm-border);
    border-radius: 30px;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.vm-pillar:hover {
    background: rgba(232, 160, 37, 0.06);
    border-color: var(--vm-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.vm-pillar__dot {
    width: 8px;
    height: 8px;
    background: var(--vm-accent);
    border-radius: 50%;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease;
}

.vm-pillar:hover .vm-pillar__dot {
    box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.vm-pillar__label {
    font-size: 0.85rem;
    color: var(--vm-text);
    font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.vm-faq {
    padding: 80px 0;
    background: var(--vm-light-bg);
}

.vm-faq__wrapper {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.vm-faq__heading {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--vm-text);
    margin-bottom: 36px;
}

/* Accordion */
.accordion {
    text-align: left;
}

.accordion-item {
    border-bottom: 1px solid var(--vm-border);
}

.accordion-item button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vm-text);
    text-align: left;
    gap: 16px;
}

.accordion-item button .icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--vm-text);
    border-bottom: 2.5px solid var(--vm-text);
    transform: translate(-50%, -25%) rotate(-135deg);
    transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
    display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
    transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--vm-transition);
}

.accordion-item button[aria-expanded="true"]+.accordion-content {
    max-height: 300px;
}

.accordion-content p {
    padding: 0 0 18px;
    font-size: 0.9rem;
    color: var(--vm-gray);
    line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.vm-commitment {
    padding: 60px 0;
    background: var(--vm-white);
}

.vm-commitment__inner {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.vm-commitment__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vm-text);
    margin-bottom: 16px;
}

.vm-commitment__text {
    font-size: 1rem;
    color: var(--vm-gray);
    line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.vm-cta {
    padding: 80px 0;
    background: var(--vm-dark);
}

.vm-cta__inner {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.vm-cta__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vm-white);
    margin-bottom: 16px;
    line-height: 1.3;
}

.vm-cta__text {
    font-size: 1rem;
    color: var(--vm-gray-light);
    line-height: 1.7;
    margin-bottom: 32px;
}

.vm-cta__button {
    display: inline-block;
    background: var(--vm-accent);
    color: var(--vm-white);
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 36px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease,
        box-shadow 0.3s ease;
    animation: vm-pulse 2.5s ease infinite;
}

.vm-cta__button:hover {
    background: var(--vm-accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
    animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.vm-stat__icon {
    display: block;
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 10px;
}

/* Services subtitle */
.vm-services__subtitle {
    font-size: 1rem;
    color: var(--vm-gray);
    margin-top: 12px;
    line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
    .vm-hero__title {
        font-size: 2.2rem;
    }

    .vm-about__heading,
    .vm-whoweare__heading {
        font-size: 1.8rem;
    }

    .vm-services__title {
        font-size: 1.8rem;
    }

    .vm-service-card__title {
        font-size: 1rem;
    }

    .vm-delivery__heading {
        font-size: 1.8rem;
    }

    .vm-reliable__heading {
        font-size: 1.8rem;
    }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
    .vm-hero {
        padding: 100px 16px 80px;
    }

    .vm-hero__title {
        font-size: 1.7rem;
    }

    .vm-hero__subtitle {
        font-size: 1rem;
    }

    .vm-about__grid,
    .vm-whoweare__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .vm-about__heading,
    .vm-whoweare__heading {
        font-size: 1.6rem;
    }

    .vm-stats,
    .vm-whoweare__stats {
        grid-template-columns: 1fr 1fr;
        order: 2;
    }

    .vm-about__content,
    .vm-whoweare__content {
        order: 1;
    }

    .vm-services__grid {
        grid-template-columns: 1fr;
    }

    .vm-services__title {
        font-size: 1.5rem;
    }

    .vm-service-card--wide {
        grid-column: span 1;
    }

    .vm-delivery__heading {
        font-size: 1.5rem;
    }

    .vm-delivery__steps {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .vm-step__arrow {
        display: none;
    }

    .vm-step__circle {
        width: 90px;
        height: 90px;
        font-size: 0.7rem;
        border-radius: 16px;
    }

    .vm-reliable__heading {
        font-size: 1.5rem;
    }

    .vm-reliable__pillars {
        flex-wrap: wrap;
        gap: 12px;
    }

    .vm-why__heading {
        font-size: 1.5rem;
    }

    .vm-industries__heading {
        font-size: 1.5rem;
    }

    .vm-industries__grid {
        grid-template-columns: 1fr 1fr;
    }

    .vm-faq__heading {
        font-size: 1.3rem;
    }

    .vm-cta__heading {
        font-size: 1.5rem;
    }

    /* Disable scroll animations on mobile for performance */
    .vm-animate,
    .vm-animate--left,
    .vm-animate--right,
    .vm-animate--scale {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
    .vm-hero {
        padding: 90px 14px 60px;
    }

    .vm-hero__title {
        font-size: 1.4rem;
    }

    .vm-hero__subtitle {
        font-size: 0.9rem;
    }

    .vm-hero__breadcrumb {
        font-size: 0.75rem;
    }

    .vm-about,
    .vm-whoweare,
    .vm-services,
    .vm-delivery,
    .vm-reliable,
    .vm-why,
    .vm-industries,
    .vm-faq,
    .vm-commitment,
    .vm-cta {
        padding: 50px 0;
    }

    .vm-about__heading,
    .vm-whoweare__heading {
        font-size: 1.4rem;
    }

    .vm-about__text,
    .vm-whoweare__text {
        font-size: 0.9rem;
    }

    .vm-stats,
    .vm-whoweare__stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .vm-stat {
        padding: 20px 14px;
    }

    .vm-stat__number {
        font-size: 1.8rem;
    }

    .vm-stat__icon {
        font-size: 1.8rem;
    }

    .vm-stat__label {
        font-size: 0.75rem;
    }

    .vm-services__title {
        font-size: 1.3rem;
    }

    .vm-service-card {
        padding: 20px 16px;
    }

    .vm-service-card__badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .vm-delivery__heading {
        font-size: 1.3rem;
    }

    .vm-step__circle {
        width: 80px;
        height: 80px;
        font-size: 0.65rem;
        border-radius: 14px;
    }

    .vm-step__circle::before {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
        top: -8px;
        right: -8px;
    }

    .vm-reliable__heading {
        font-size: 1.3rem;
    }

    .vm-pillar {
        padding: 10px 14px;
        font-size: 0.82rem;
    }

    .vm-industries__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .vm-industry {
        padding: 20px 14px;
    }

    .vm-cta__heading {
        font-size: 1.3rem;
    }

    .vm-cta__button {
        font-size: 0.9rem;
        padding: 14px 28px;
    }
}


/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    --cs-accent: #e8a025;
    --cs-accent-hover: #d4911e;
    --cs-dark: #0b1120;
    --cs-dark-2: #101828;
    --cs-dark-3: #1a2332;
    --cs-white: #ffffff;
    --cs-gray: #000000;
    --cs-gray-light: #000000;
    --cs-light-bg: #f8f9fb;
    --cs-light-bg-2: #f1f3f7;
    --cs-text: #000000;
    --cs-text-light: #000000;
    --cs-border: #e5e7eb;
    --cs-radius: 12px;
    --cs-radius-lg: 20px;
    --cs-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --cs-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
    --cs-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes cs-fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in from left */
@keyframes cs-fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade in from right */
@keyframes cs-fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale up pop */
@keyframes cs-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
    from {
        width: 0;
    }

    to {
        width: 60px;
    }
}

/* Pulse glow for CTA */
@keyframes cs-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
    }
}

/* Shimmer for badges */
@keyframes cs-shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Float subtle */
@keyframes vm-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.cs-animate {
    opacity: 0;
    transform: translateY(40px);
    animation: cs-fadeUp 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.cs-animate--left {
    opacity: 0;
    transform: translateX(-40px);
    animation: cs-fadeLeft 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.cs-animate--right {
    opacity: 0;
    transform: translateX(40px);
    animation: cs-fadeRight 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.cs-animate--scale {
    opacity: 0;
    transform: scale(0.85);
    animation: cs-scaleIn 0.7s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.cs-stagger>*:nth-child(1) {
    animation-delay: 0s;
}

.cs-stagger>*:nth-child(2) {
    animation-delay: 0.08s;
}

.cs-stagger>*:nth-child(3) {
    animation-delay: 0.16s;
}

.cs-stagger>*:nth-child(4) {
    animation-delay: 0.24s;
}

.cs-stagger>*:nth-child(5) {
    animation-delay: 0.32s;
}

.cs-stagger>*:nth-child(6) {
    animation-delay: 0.40s;
}

.cs-stagger>*:nth-child(7) {
    animation-delay: 0.48s;
}

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {

    .cs-animate,
    .cs-animate--left,
    .cs-animate--right,
    .cs-animate--scale {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---------- Container ---------- */
.cs-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.cs-text-accent {
    color: var(--cs-accent);
}

/* ---------- Shared Checklist ---------- */
.cs-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--cs-text);
    line-height: 1.5;
}

.cs-checklist__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cs-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.cs-hero {
    background: var(--cs-dark);
    text-align: center;
    padding: 140px 20px 120px;
    position: relative;
    overflow: hidden;
}

.cs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%,
            rgba(232, 160, 37, 0.08) 0%,
            transparent 60%),
        radial-gradient(ellipse at 70% 30%,
            rgba(59, 130, 246, 0.06) 0%,
            transparent 50%);
    pointer-events: none;
}

.cs-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.cs-hero__breadcrumb {
    font-size: 0.85rem;
    color: var(--cs-gray);
    margin-bottom: 24px;
    letter-spacing: 0.3px;
    animation: cs-fadeUp 0.6s ease 0.1s both;
}

.cs-hero__breadcrumb-active {
    color: var(--cs-accent);
}

.cs-hero__title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--cs-white);
    margin-bottom: 20px;
    line-height: 1.2;
    animation: cs-fadeUp 0.7s ease 0.25s both;
}

.cs-hero__title-accent {
    color: var(--cs-accent);
    font-style: italic;
    display: inline-block;
}

.cs-hero__subtitle {
    font-size: 1.3rem;
    color: var(--cs-white);
    margin-bottom: 14px;
    font-weight: 500;
    line-height: 1.5;
    animation: cs-fadeUp 0.7s ease 0.45s both;
}

.cs-hero__desc {
    font-size: 0.95rem;
    color: var(--cs-gray-light);
    font-style: italic;
    animation: cs-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.cs-about {
    padding: 80px 0;
    background: var(--cs-white);
}

.cs-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.cs-about__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.cs-about__text {
    font-size: 1rem;
    color: var(--cs-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.cs-about__text:last-child {
    margin-bottom: 0;
}

.cs-about__image img {
    width: 100%;
    border-radius: var(--cs-radius-lg);
    object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.cs-stats,
.cs-whoweare__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cs-stat {
    background: var(--cs-light-bg);
    border-radius: var(--cs-radius);
    padding: 28px 20px;
    text-align: center;
    border: 1px solid var(--cs-border);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}

.cs-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--cs-accent), var(--color-signature-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.cs-stat:hover::before {
    transform: scaleX(1);
}

.cs-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--cs-accent);
}

.cs-stat__number {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-signature-blue);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: scale(0) translateY(10px);
    animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.cs-stat:nth-child(1) .cs-stat__number {
    animation-delay: 0.2s;
}

.cs-stat:nth-child(2) .cs-stat__number {
    animation-delay: 0.4s;
}

.cs-stat:nth-child(3) .cs-stat__number {
    animation-delay: 0.6s;
}

.cs-stat:nth-child(4) .cs-stat__number {
    animation-delay: 0.8s;
}

@keyframes vm-statPop {
    0% {
        opacity: 0;
        transform: scale(0) translateY(10px);
    }

    60% {
        opacity: 1;
        transform: scale(1.15) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.cs-stat__label {
    display: block;
    font-size: 0.82rem;
    color: var(--cs-gray);
    font-weight: 500;
    line-height: 1.3;
}

/* Dark variant for Who We Are section */
.cs-stat--dark {
    background: var(--cs-white);
    border-color: var(--cs-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.cs-whoweare {
    padding: 80px 0;
    background: var(--cs-light-bg);
}

.cs-whoweare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.cs-whoweare__image img {
    width: 100%;
    border-radius: var(--cs-radius-lg);
    object-fit: cover;
}

.cs-whoweare__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.cs-whoweare__text {
    font-size: 1rem;
    color: var(--cs-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.cs-whoweare__text:last-child {
    margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.cs-services {
    padding: 80px 0;
    background: var(--cs-white);
}

.cs-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.cs-services__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cs-text);
}

.cs-services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Service Card */
.cs-service-card {
    background: var(--cs-light-bg);
    border-radius: var(--cs-radius);
    padding: 28px;
    border: 1px solid transparent;
    transition: box-shadow 0.4s ease, transform 0.4s ease,
        border-color 0.4s ease, background 0.4s ease;
}

.cs-service-card:hover {
    box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
    transform: translateY(-5px);
    border-color: var(--cs-accent);
    background: var(--cs-white);
}

.cs-service-card--wide {
    grid-column: 1 / -1;
}

.cs-service-card__badge {
    display: inline-block;
    background: linear-gradient(110deg,
            var(--color-signature-blue) 30%,
            #60a5fa 50%,
            var(--color-signature-blue) 70%);
    background-size: 200% 100%;
    color: var(--cs-white);
    font-size: 0.75rem;
    font-weight: 700;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.cs-service-card:hover .cs-service-card__badge {
    animation: cs-shimmer 1.5s ease infinite;
    transform: scale(1.1);
}

.cs-service-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cs-text);
    margin-bottom: 10px;
}

.cs-service-card__text {
    font-size: 0.9rem;
    color: var(--cs-gray);
    line-height: 1.65;
    margin-bottom: 14px;
}

/* Tags */
.cs-service-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.cs-tag {
    display: inline-block;
    background: var(--cs-white);
    color: var(--cs-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--cs-border);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease;
}

.cs-tag:hover {
    background: var(--cs-accent);
    color: var(--cs-white);
    border-color: var(--cs-accent);
    transform: translateY(-2px);
}

/* Service List */
.cs-service-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-service-card__list li {
    font-size: 0.85rem;
    color: var(--cs-gray);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}

.cs-service-card__list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--cs-accent);
    font-weight: 700;
}

.cs-service-card__list--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.cs-delivery {
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cs-delivery::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
    opacity: 0.15;
    pointer-events: none;
}

.cs-delivery__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.cs-delivery__text {
    font-size: 1rem;
    color: var(--cs-gray);
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.cs-delivery__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.cs-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.cs-step__circle {
    width: 95px;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--cs-white);
    border: 2px solid #e0e7ff;
    color: var(--cs-text);
    font-weight: 700;
    font-size: 0.68rem;
    border-radius: 18px;
    letter-spacing: 0.3px;
    line-height: 1.3;
    padding: 8px;
    position: relative;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transition: all 0.4s ease;
}

.cs-step__circle::before {
    content: counter(cs-step-counter);
    counter-increment: cs-step-counter;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.cs-delivery__steps {
    counter-reset: cs-step-counter;
}

.cs-step:hover .cs-step__circle {
    transform: translateY(-6px);
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
    background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes cs-stepGlow {

    0%,
    10% {
        border-color: var(--color-signature-blue);
        box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
        transform: translateY(-4px) scale(1.03);
        background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
    }

    22%,
    100% {
        border-color: #e0e7ff;
        box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
        transform: translateY(0) scale(1);
        background: var(--cs-white);
    }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.cs-delivery__steps> :nth-child(1) .cs-step__circle {
    animation: cs-stepGlow 6s ease infinite 0s;
}

.cs-delivery__steps> :nth-child(3) .cs-step__circle {
    animation: cs-stepGlow 6s ease infinite 1s;
}

.cs-delivery__steps> :nth-child(5) .cs-step__circle {
    animation: cs-stepGlow 6s ease infinite 2s;
}

.cs-delivery__steps> :nth-child(7) .cs-step__circle {
    animation: cs-stepGlow 6s ease infinite 3s;
}

.cs-delivery__steps> :nth-child(9) .cs-step__circle {
    animation: cs-stepGlow 6s ease infinite 4s;
}

.cs-delivery__steps> :nth-child(11) .cs-step__circle {
    animation: cs-stepGlow 6s ease infinite 5s;
}

.cs-step__arrow {
    color: var(--color-signature-blue);
    font-size: 1.2rem;
    margin: 0 2px;
    font-weight: 300;
    opacity: 0.5;
    display: flex;
    align-items: center;
    animation: cs-arrowPulse 2s ease infinite;
}

@keyframes cs-arrowPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translateX(0);
    }

    50% {
        opacity: 0.8;
        transform: translateX(3px);
    }
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.cs-why {
    padding: 80px 0;
    background: var(--cs-white);
}

.cs-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
    max-width: 800px;
}

.cs-why__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 16px;
    line-height: 1.3;
}

.cs-why__text {
    font-size: 1rem;
    color: var(--cs-gray);
    line-height: 1.7;
    margin-bottom: 24px;
}

.cs-why__image img {
    width: 100%;
    border-radius: var(--cs-radius-lg);
    object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.cs-industries {
    padding: 80px 0;
    background: var(--cs-light-bg);
    text-align: center;
}

.cs-industries__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 48px;
}

.cs-industries__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cs-industry {
    background: var(--cs-white);
    border-radius: var(--cs-radius);
    padding: 32px 20px;
    text-align: center;
    border: 1px solid var(--cs-border);
    transition: box-shadow 0.4s ease, transform 0.4s ease,
        border-color 0.4s ease;
    cursor: default;
}

.cs-industry:hover {
    box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
    transform: translateY(-5px);
    border-color: var(--cs-accent);
}

.cs-industry__icon {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 14px;
    transition: transform 0.4s ease;
}

.cs-industry:hover .cs-industry__icon {
    transform: scale(1.2) rotate(-5deg);
}

.cs-industry__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cs-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.cs-reliable {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.cs-reliable__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 18px;
    line-height: 1.35;
}

.cs-reliable__text {
    font-size: 1rem;
    color: var(--cs-gray);
    line-height: 1.7;
    margin-bottom: 40px;
}

.cs-reliable__pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.cs-pillar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cs-white);
    border: 1px solid var(--cs-border);
    border-radius: 30px;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.cs-pillar:hover {
    background: rgba(232, 160, 37, 0.06);
    border-color: var(--cs-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.cs-pillar__dot {
    width: 8px;
    height: 8px;
    background: var(--cs-accent);
    border-radius: 50%;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease;
}

.cs-pillar:hover .cs-pillar__dot {
    box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.cs-pillar__label {
    font-size: 0.85rem;
    color: var(--cs-text);
    font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.cs-faq {
    padding: 80px 0;
    background: var(--cs-light-bg);
}

.cs-faq__wrapper {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.cs-faq__heading {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 36px;
}

/* Accordion */
.accordion {
    text-align: left;
}

.accordion-item {
    border-bottom: 1px solid var(--cs-border);
}

.accordion-item button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cs-text);
    text-align: left;
    gap: 16px;
}

.accordion-item button .icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--cs-text);
    border-bottom: 2.5px solid var(--cs-text);
    transform: translate(-50%, -25%) rotate(-135deg);
    transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
    display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
    transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--cs-transition);
}

.accordion-item button[aria-expanded="true"]+.accordion-content {
    max-height: 300px;
}

.accordion-content p {
    padding: 0 0 18px;
    font-size: 0.9rem;
    color: var(--cs-gray);
    line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.cs-commitment {
    padding: 60px 0;
    background: var(--cs-white);
}

.cs-commitment__inner {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cs-commitment__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 16px;
}

.cs-commitment__text {
    font-size: 1rem;
    color: var(--cs-gray);
    line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.cs-cta {
    padding: 80px 0;
    background: var(--cs-dark);
}

.cs-cta__inner {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.cs-cta__heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cs-white);
    margin-bottom: 16px;
    line-height: 1.3;
}

.cs-cta__text {
    font-size: 1rem;
    color: var(--cs-gray-light);
    line-height: 1.7;
    margin-bottom: 32px;
}

.cs-cta__button {
    display: inline-block;
    background: var(--cs-accent);
    color: var(--cs-white);
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 36px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease,
        box-shadow 0.3s ease;
    animation: cs-pulse 2.5s ease infinite;
}

.cs-cta__button:hover {
    background: var(--cs-accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
    animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.cs-stat__icon {
    display: block;
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 10px;
}

/* Services subtitle */
.cs-services__subtitle {
    font-size: 1rem;
    color: var(--cs-gray);
    margin-top: 12px;
    line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
    .cs-hero__title {
        font-size: 2.2rem;
    }

    .cs-about__heading,
    .cs-whoweare__heading {
        font-size: 1.8rem;
    }

    .cs-services__title {
        font-size: 1.8rem;
    }

    .cs-service-card__title {
        font-size: 1rem;
    }

    .cs-delivery__heading {
        font-size: 1.8rem;
    }

    .cs-step__circle {
        width: 85px;
        height: 85px;
        font-size: 0.62rem;
        border-radius: 14px;
        padding: 6px;
    }

    .cs-step__circle::before {
        width: 22px;
        height: 22px;
        font-size: 0.58rem;
    }

    .cs-step__arrow {
        font-size: 1rem;
        margin: 0 1px;
    }

    .cs-reliable__heading {
        font-size: 1.8rem;
    }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
    .cs-hero {
        padding: 100px 16px 80px;
    }

    .cs-hero__title {
        font-size: 1.7rem;
    }

    .cs-hero__subtitle {
        font-size: 1rem;
    }

    .cs-about__grid,
    .cs-whoweare__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cs-about__heading,
    .cs-whoweare__heading {
        font-size: 1.6rem;
    }

    .cs-stats,
    .cs-whoweare__stats {
        grid-template-columns: 1fr 1fr;
        order: 2;
    }

    .cs-about__content,
    .cs-whoweare__content {
        order: 1;
    }

    .cs-services__grid {
        grid-template-columns: 1fr;
    }

    .cs-services__title {
        font-size: 1.5rem;
    }

    .cs-service-card--wide {
        grid-column: span 1;
    }

    .cs-delivery__heading {
        font-size: 1.5rem;
    }

    .cs-delivery__steps {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .cs-step__arrow {
        display: none;
    }

    .cs-step__circle {
        width: 90px;
        height: 90px;
        font-size: 0.7rem;
        border-radius: 16px;
    }

    .cs-reliable__heading {
        font-size: 1.5rem;
    }

    .cs-reliable__pillars {
        flex-wrap: wrap;
        gap: 12px;
    }

    .cs-why__heading {
        font-size: 1.5rem;
    }

    .cs-industries__heading {
        font-size: 1.5rem;
    }

    .cs-industries__grid {
        grid-template-columns: 1fr 1fr;
    }

    .cs-faq__heading {
        font-size: 1.3rem;
    }

    .cs-cta__heading {
        font-size: 1.5rem;
    }

    /* Disable scroll animations on mobile for performance */
    .cs-animate,
    .cs-animate--left,
    .cs-animate--right,
    .cs-animate--scale {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
    .cs-hero {
        padding: 90px 14px 60px;
    }

    .cs-hero__title {
        font-size: 1.4rem;
    }

    .cs-hero__subtitle {
        font-size: 0.9rem;
    }

    .cs-hero__breadcrumb {
        font-size: 0.75rem;
    }

    .cs-about,
    .cs-whoweare,
    .cs-services,
    .cs-delivery,
    .cs-reliable,
    .cs-why,
    .cs-industries,
    .cs-faq,
    .cs-commitment,
    .cs-cta {
        padding: 50px 0;
    }

    .cs-about__heading,
    .cs-whoweare__heading {
        font-size: 1.4rem;
    }

    .cs-about__text,
    .cs-whoweare__text {
        font-size: 0.9rem;
    }

    .cs-stats,
    .cs-whoweare__stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .cs-stat {
        padding: 20px 14px;
    }

    .cs-stat__number {
        font-size: 1.8rem;
    }

    .cs-stat__icon {
        font-size: 1.8rem;
    }

    .cs-stat__label {
        font-size: 0.75rem;
    }

    .cs-services__title {
        font-size: 1.3rem;
    }

    .cs-service-card {
        padding: 20px 16px;
    }

    .cs-service-card__badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .cs-delivery__heading {
        font-size: 1.3rem;
    }

    .cs-step__circle {
        width: 80px;
        height: 80px;
        font-size: 0.65rem;
        border-radius: 14px;
    }

    .cs-step__circle::before {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
        top: -8px;
        right: -8px;
    }

    .cs-reliable__heading {
        font-size: 1.3rem;
    }

    .cs-pillar {
        padding: 10px 14px;
        font-size: 0.82rem;
    }

    .cs-industries__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .cs-industry {
        padding: 20px 14px;
    }

    .cs-cta__heading {
        font-size: 1.3rem;
    }

    .cs-cta__button {
        font-size: 0.9rem;
        padding: 14px 28px;
    }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.cs-tech {
    padding: 80px 0;
    background: var(--cs-light-bg);
}

.cs-tech__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.cs-tech__heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 20px;
    line-height: 1.25;
}

.cs-tech__text {
    font-size: 1rem;
    color: var(--cs-gray);
    line-height: 1.75;
    margin-bottom: 14px;
}

.cs-tech__content {}

.cs-tech__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cs-tech__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .cs-tech__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cs-tech__heading {
        font-size: 1.6rem;
    }

    .cs-tech__stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .cs-tech__heading {
        font-size: 1.4rem;
    }
}



/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --ma-accent: #e8a025;
  --ma-accent-hover: #d4911e;
  --ma-dark: #0b1120;
  --ma-dark-2: #101828;
  --ma-dark-3: #1a2332;
  --ma-white: #ffffff;
  --ma-gray: #000000;
  --ma-gray-light: #000000;
  --ma-light-bg: #f8f9fb;
  --ma-light-bg-2: #f1f3f7;
  --ma-text: #000000;
  --ma-text-light: #000000;
  --ma-border: #e5e7eb;
  --ma-radius: 12px;
  --ma-radius-lg: 20px;
  --ma-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ma-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ma-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes ma-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes ma-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes ma-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes ma-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes ma-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes ma-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.ma-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: ma-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ma-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: ma-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ma-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: ma-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ma-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: ma-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.ma-stagger > *:nth-child(1) { animation-delay: 0s; }
.ma-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ma-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ma-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ma-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ma-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ma-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .ma-animate,
  .ma-animate--left,
  .ma-animate--right,
  .ma-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.ma-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.ma-text-accent {
  color: var(--ma-accent);
}

/* ---------- Shared Checklist ---------- */
.ma-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ma-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ma-text);
  line-height: 1.5;
}

.ma-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ma-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.ma-hero {
  background: var(--ma-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.ma-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.ma-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.ma-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--ma-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: ma-fadeUp 0.6s ease 0.1s both;
}

.ma-hero__breadcrumb-active {
  color: var(--ma-accent);
}

.ma-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ma-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: ma-fadeUp 0.7s ease 0.25s both;
}

.ma-hero__title-accent {
  color: var(--ma-accent);
  font-style: italic;
  display: inline-block;
}

.ma-hero__subtitle {
  font-size: 1.3rem;
  color: var(--ma-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: ma-fadeUp 0.7s ease 0.45s both;
}

.ma-hero__desc {
  font-size: 0.95rem;
  color: var(--ma-gray-light);
  font-style: italic;
  animation: ma-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.ma-about {
  padding: 80px 0;
  background: var(--ma-white);
}

.ma-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ma-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ma-about__text {
  font-size: 1rem;
  color: var(--ma-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ma-about__text:last-child {
  margin-bottom: 0;
}

.ma-about__image img {
  width: 100%;
  border-radius: var(--ma-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.ma-stats,
.ma-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ma-stat {
  background: var(--ma-light-bg);
  border-radius: var(--ma-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--ma-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.ma-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ma-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.ma-stat:hover::before {
  transform: scaleX(1);
}

.ma-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--ma-accent);
}

.ma-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.ma-stat:nth-child(1) .ma-stat__number { animation-delay: 0.2s; }
.ma-stat:nth-child(2) .ma-stat__number { animation-delay: 0.4s; }
.ma-stat:nth-child(3) .ma-stat__number { animation-delay: 0.6s; }
.ma-stat:nth-child(4) .ma-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ma-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--ma-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.ma-stat--dark {
  background: var(--ma-white);
  border-color: var(--ma-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.ma-whoweare {
  padding: 80px 0;
  background: var(--ma-light-bg);
}

.ma-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ma-whoweare__image img {
  width: 100%;
  border-radius: var(--ma-radius-lg);
  object-fit: cover;
}

.ma-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ma-whoweare__text {
  font-size: 1rem;
  color: var(--ma-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ma-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.ma-services {
  padding: 80px 0;
  background: var(--ma-white);
}

.ma-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.ma-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ma-text);
}

.ma-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.ma-service-card {
  background: var(--ma-light-bg);
  border-radius: var(--ma-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.ma-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--ma-accent);
  background: var(--ma-white);
}

.ma-service-card--wide {
  grid-column: 1 / -1;
}

.ma-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--ma-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.ma-service-card:hover .ma-service-card__badge {
  animation: ma-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.ma-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ma-text);
  margin-bottom: 10px;
}

.ma-service-card__text {
  font-size: 0.9rem;
  color: var(--ma-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.ma-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ma-tag {
  display: inline-block;
  background: var(--ma-white);
  color: var(--ma-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--ma-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.ma-tag:hover {
  background: var(--ma-accent);
  color: var(--ma-white);
  border-color: var(--ma-accent);
  transform: translateY(-2px);
}

/* Service List */
.ma-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ma-service-card__list li {
  font-size: 0.85rem;
  color: var(--ma-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.ma-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ma-accent);
  font-weight: 700;
}

.ma-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.ma-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ma-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.ma-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.ma-delivery__text {
  font-size: 1rem;
  color: var(--ma-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.ma-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.ma-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ma-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ma-white);
  border: 2px solid #e0e7ff;
  color: var(--ma-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.ma-step__circle::before {
  content: counter(ma-step-counter);
  counter-increment: ma-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.ma-delivery__steps {
  counter-reset: ma-step-counter;
}

.ma-step:hover .ma-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes ma-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--ma-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.ma-delivery__steps > :nth-child(1) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 0s; }
.ma-delivery__steps > :nth-child(3) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 1s; }
.ma-delivery__steps > :nth-child(5) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 2s; }
.ma-delivery__steps > :nth-child(7) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 3s; }
.ma-delivery__steps > :nth-child(9) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 4s; }
.ma-delivery__steps > :nth-child(11) .ma-step__circle { animation: ma-stepGlow 7s ease infinite 5s; }
.ma-delivery__steps > :nth-child(13) .ma-step__circle { animation: ma-stepGlow 7s ease infinite 6s; }

.ma-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: ma-arrowPulse 2s ease infinite;
}

@keyframes ma-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.ma-why {
  padding: 80px 0;
  background: var(--ma-white);
}

.ma-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.ma-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ma-why__text {
  font-size: 1rem;
  color: var(--ma-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.ma-why__image img {
  width: 100%;
  border-radius: var(--ma-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.ma-industries {
  padding: 80px 0;
  background: var(--ma-light-bg);
  text-align: center;
}

.ma-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 48px;
}

.ma-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ma-industry {
  background: var(--ma-white);
  border-radius: var(--ma-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--ma-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.ma-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--ma-accent);
}

.ma-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.ma-industry:hover .ma-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.ma-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ma-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.ma-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.ma-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.ma-reliable__text {
  font-size: 1rem;
  color: var(--ma-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.ma-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.ma-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ma-white);
  border: 1px solid var(--ma-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.ma-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--ma-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.ma-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--ma-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.ma-pillar:hover .ma-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.ma-pillar__label {
  font-size: 0.85rem;
  color: var(--ma-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.ma-faq {
  padding: 80px 0;
  background: var(--ma-light-bg);
}

.ma-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.ma-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--ma-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ma-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--ma-text);
  border-bottom: 2.5px solid var(--ma-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ma-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--ma-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.ma-commitment {
  padding: 60px 0;
  background: var(--ma-white);
}

.ma-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.ma-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 16px;
}

.ma-commitment__text {
  font-size: 1rem;
  color: var(--ma-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.ma-cta {
  padding: 80px 0;
  background: var(--ma-dark);
}

.ma-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.ma-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ma-cta__text {
  font-size: 1rem;
  color: var(--ma-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.ma-cta__button {
  display: inline-block;
  background: var(--ma-accent);
  color: var(--ma-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: ma-pulse 2.5s ease infinite;
}

.ma-cta__button:hover {
  background: var(--ma-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.ma-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.ma-services__subtitle {
  font-size: 1rem;
  color: var(--ma-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .ma-hero__title {
    font-size: 2.2rem;
  }

  .ma-about__heading,
  .ma-whoweare__heading {
    font-size: 1.8rem;
  }

  .ma-services__title {
    font-size: 1.8rem;
  }

  .ma-service-card__title {
    font-size: 1rem;
  }

  .ma-delivery__heading {
    font-size: 1.8rem;
  }

  .ma-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .ma-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .ma-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .ma-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .ma-hero {
    padding: 100px 16px 80px;
  }

  .ma-hero__title {
    font-size: 1.7rem;
  }

  .ma-hero__subtitle {
    font-size: 1rem;
  }

  .ma-about__grid,
  .ma-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ma-about__heading,
  .ma-whoweare__heading {
    font-size: 1.6rem;
  }

  .ma-stats,
  .ma-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .ma-about__content,
  .ma-whoweare__content {
    order: 1;
  }

  .ma-services__grid {
    grid-template-columns: 1fr;
  }

  .ma-services__title {
    font-size: 1.5rem;
  }

  .ma-service-card--wide {
    grid-column: span 1;
  }

  .ma-delivery__heading {
    font-size: 1.5rem;
  }

  .ma-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .ma-step__arrow {
    display: none;
  }

  .ma-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .ma-reliable__heading {
    font-size: 1.5rem;
  }

  .ma-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .ma-why__heading {
    font-size: 1.5rem;
  }

  .ma-industries__heading {
    font-size: 1.5rem;
  }

  .ma-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .ma-faq__heading {
    font-size: 1.3rem;
  }

  .ma-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .ma-animate,
  .ma-animate--left,
  .ma-animate--right,
  .ma-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .ma-hero {
    padding: 90px 14px 60px;
  }

  .ma-hero__title {
    font-size: 1.4rem;
  }

  .ma-hero__subtitle {
    font-size: 0.9rem;
  }

  .ma-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .ma-about,
  .ma-whoweare,
  .ma-services,
  .ma-delivery,
  .ma-reliable,
  .ma-why,
  .ma-industries,
  .ma-faq,
  .ma-commitment,
  .ma-cta {
    padding: 50px 0;
  }

  .ma-about__heading,
  .ma-whoweare__heading {
    font-size: 1.4rem;
  }

  .ma-about__text,
  .ma-whoweare__text {
    font-size: 0.9rem;
  }

  .ma-stats,
  .ma-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ma-stat {
    padding: 20px 14px;
  }

  .ma-stat__number {
    font-size: 1.8rem;
  }

  .ma-stat__icon {
    font-size: 1.8rem;
  }

  .ma-stat__label {
    font-size: 0.75rem;
  }

  .ma-services__title {
    font-size: 1.3rem;
  }

  .ma-service-card {
    padding: 20px 16px;
  }

  .ma-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .ma-delivery__heading {
    font-size: 1.3rem;
  }

  .ma-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .ma-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .ma-reliable__heading {
    font-size: 1.3rem;
  }

  .ma-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .ma-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ma-industry {
    padding: 20px 14px;
  }

  .ma-cta__heading {
    font-size: 1.3rem;
  }

  .ma-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.ma-tech { padding: 80px 0; background: var(--ma-light-bg); }
.ma-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ma-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ma-text); margin-bottom: 20px; line-height: 1.25; }
.ma-tech__text { font-size: 1rem; color: var(--ma-gray); line-height: 1.75; margin-bottom: 14px; }
.ma-tech__content { }
.ma-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ma-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .ma-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ma-tech__heading { font-size: 1.6rem; }
  .ma-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .ma-tech__heading { font-size: 1.4rem; }
}



/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --sf-accent: #e8a025;
  --sf-accent-hover: #d4911e;
  --sf-dark: #0b1120;
  --sf-dark-2: #101828;
  --sf-dark-3: #1a2332;
  --sf-white: #ffffff;
  --sf-gray: #000000;
  --sf-gray-light: #000000;
  --sf-light-bg: #f8f9fb;
  --sf-light-bg-2: #f1f3f7;
  --sf-text: #000000;
  --sf-text-light: #000000;
  --sf-border: #e5e7eb;
  --sf-radius: 12px;
  --sf-radius-lg: 20px;
  --sf-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --sf-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --sf-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes sf-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes sf-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes sf-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes sf-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes sf-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes sf-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.sf-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: sf-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sf-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: sf-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sf-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: sf-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sf-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: sf-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.sf-stagger > *:nth-child(1) { animation-delay: 0s; }
.sf-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.sf-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.sf-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.sf-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.sf-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.sf-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .sf-animate,
  .sf-animate--left,
  .sf-animate--right,
  .sf-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.sf-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.sf-text-accent {
  color: var(--sf-accent);
}

/* ---------- Shared Checklist ---------- */
.sf-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sf-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--sf-text);
  line-height: 1.5;
}

.sf-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sf-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.sf-hero {
  background: var(--sf-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.sf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.sf-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.sf-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--sf-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: sf-fadeUp 0.6s ease 0.1s both;
}

.sf-hero__breadcrumb-active {
  color: var(--sf-accent);
}

.sf-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--sf-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: sf-fadeUp 0.7s ease 0.25s both;
}

.sf-hero__title-accent {
  color: var(--sf-accent);
  font-style: italic;
  display: inline-block;
}

.sf-hero__subtitle {
  font-size: 1.3rem;
  color: var(--sf-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: sf-fadeUp 0.7s ease 0.45s both;
}

.sf-hero__desc {
  font-size: 0.95rem;
  color: var(--sf-gray-light);
  font-style: italic;
  animation: sf-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.sf-about {
  padding: 80px 0;
  background: var(--sf-white);
}

.sf-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sf-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sf-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sf-about__text {
  font-size: 1rem;
  color: var(--sf-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sf-about__text:last-child {
  margin-bottom: 0;
}

.sf-about__image img {
  width: 100%;
  border-radius: var(--sf-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.sf-stats,
.sf-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sf-stat {
  background: var(--sf-light-bg);
  border-radius: var(--sf-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--sf-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.sf-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sf-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.sf-stat:hover::before {
  transform: scaleX(1);
}

.sf-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--sf-accent);
}

.sf-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.sf-stat:nth-child(1) .sf-stat__number { animation-delay: 0.2s; }
.sf-stat:nth-child(2) .sf-stat__number { animation-delay: 0.4s; }
.sf-stat:nth-child(3) .sf-stat__number { animation-delay: 0.6s; }
.sf-stat:nth-child(4) .sf-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sf-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--sf-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.sf-stat--dark {
  background: var(--sf-white);
  border-color: var(--sf-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.sf-whoweare {
  padding: 80px 0;
  background: var(--sf-light-bg);
}

.sf-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sf-whoweare__image img {
  width: 100%;
  border-radius: var(--sf-radius-lg);
  object-fit: cover;
}

.sf-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sf-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sf-whoweare__text {
  font-size: 1rem;
  color: var(--sf-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sf-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.sf-services {
  padding: 80px 0;
  background: var(--sf-white);
}

.sf-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.sf-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sf-text);
}

.sf-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.sf-service-card {
  background: var(--sf-light-bg);
  border-radius: var(--sf-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.sf-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--sf-accent);
  background: var(--sf-white);
}

.sf-service-card--wide {
  grid-column: 1 / -1;
}

.sf-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--sf-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.sf-service-card:hover .sf-service-card__badge {
  animation: sf-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.sf-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sf-text);
  margin-bottom: 10px;
}

.sf-service-card__text {
  font-size: 0.9rem;
  color: var(--sf-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.sf-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.sf-tag {
  display: inline-block;
  background: var(--sf-white);
  color: var(--sf-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--sf-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.sf-tag:hover {
  background: var(--sf-accent);
  color: var(--sf-white);
  border-color: var(--sf-accent);
  transform: translateY(-2px);
}

/* Service List */
.sf-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sf-service-card__list li {
  font-size: 0.85rem;
  color: var(--sf-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.sf-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--sf-accent);
  font-weight: 700;
}

.sf-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.sf-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sf-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.sf-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sf-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.sf-delivery__text {
  font-size: 1rem;
  color: var(--sf-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.sf-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.sf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.sf-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--sf-white);
  border: 2px solid #e0e7ff;
  color: var(--sf-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.sf-step__circle::before {
  content: counter(sf-step-counter);
  counter-increment: sf-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.sf-delivery__steps {
  counter-reset: sf-step-counter;
}

.sf-step:hover .sf-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes sf-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--sf-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.sf-delivery__steps > :nth-child(1) .sf-step__circle  { animation: sf-stepGlow 6s ease infinite 0s; }
.sf-delivery__steps > :nth-child(3) .sf-step__circle  { animation: sf-stepGlow 6s ease infinite 1s; }
.sf-delivery__steps > :nth-child(5) .sf-step__circle  { animation: sf-stepGlow 6s ease infinite 2s; }
.sf-delivery__steps > :nth-child(7) .sf-step__circle  { animation: sf-stepGlow 6s ease infinite 3s; }
.sf-delivery__steps > :nth-child(9) .sf-step__circle  { animation: sf-stepGlow 6s ease infinite 4s; }
.sf-delivery__steps > :nth-child(11) .sf-step__circle { animation: sf-stepGlow 6s ease infinite 5s; }

.sf-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: sf-arrowPulse 2s ease infinite;
}

@keyframes sf-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.sf-why {
  padding: 80px 0;
  background: var(--sf-white);
}

.sf-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.sf-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sf-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sf-why__text {
  font-size: 1rem;
  color: var(--sf-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.sf-why__image img {
  width: 100%;
  border-radius: var(--sf-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.sf-industries {
  padding: 80px 0;
  background: var(--sf-light-bg);
  text-align: center;
}

.sf-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sf-text);
  margin-bottom: 48px;
}

.sf-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sf-industry {
  background: var(--sf-white);
  border-radius: var(--sf-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--sf-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.sf-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--sf-accent);
}

.sf-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.sf-industry:hover .sf-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.sf-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sf-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.sf-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.sf-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sf-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.sf-reliable__text {
  font-size: 1rem;
  color: var(--sf-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.sf-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.sf-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.sf-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--sf-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.sf-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--sf-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.sf-pillar:hover .sf-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.sf-pillar__label {
  font-size: 0.85rem;
  color: var(--sf-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.sf-faq {
  padding: 80px 0;
  background: var(--sf-light-bg);
}

.sf-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.sf-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--sf-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--sf-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sf-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--sf-text);
  border-bottom: 2.5px solid var(--sf-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--sf-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--sf-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.sf-commitment {
  padding: 60px 0;
  background: var(--sf-white);
}

.sf-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.sf-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sf-text);
  margin-bottom: 16px;
}

.sf-commitment__text {
  font-size: 1rem;
  color: var(--sf-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.sf-cta {
  padding: 80px 0;
  background: var(--sf-dark);
}

.sf-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.sf-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sf-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sf-cta__text {
  font-size: 1rem;
  color: var(--sf-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.sf-cta__button {
  display: inline-block;
  background: var(--sf-accent);
  color: var(--sf-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: sf-pulse 2.5s ease infinite;
}

.sf-cta__button:hover {
  background: var(--sf-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.sf-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.sf-services__subtitle {
  font-size: 1rem;
  color: var(--sf-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .sf-hero__title {
    font-size: 2.2rem;
  }

  .sf-about__heading,
  .sf-whoweare__heading {
    font-size: 1.8rem;
  }

  .sf-services__title {
    font-size: 1.8rem;
  }

  .sf-service-card__title {
    font-size: 1rem;
  }

  .sf-delivery__heading {
    font-size: 1.8rem;
  }

  .sf-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .sf-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .sf-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .sf-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .sf-hero {
    padding: 100px 16px 80px;
  }

  .sf-hero__title {
    font-size: 1.7rem;
  }

  .sf-hero__subtitle {
    font-size: 1rem;
  }

  .sf-about__grid,
  .sf-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sf-about__heading,
  .sf-whoweare__heading {
    font-size: 1.6rem;
  }

  .sf-stats,
  .sf-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .sf-about__content,
  .sf-whoweare__content {
    order: 1;
  }

  .sf-services__grid {
    grid-template-columns: 1fr;
  }

  .sf-services__title {
    font-size: 1.5rem;
  }

  .sf-service-card--wide {
    grid-column: span 1;
  }

  .sf-delivery__heading {
    font-size: 1.5rem;
  }

  .sf-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .sf-step__arrow {
    display: none;
  }

  .sf-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .sf-reliable__heading {
    font-size: 1.5rem;
  }

  .sf-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .sf-why__heading {
    font-size: 1.5rem;
  }

  .sf-industries__heading {
    font-size: 1.5rem;
  }

  .sf-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sf-faq__heading {
    font-size: 1.3rem;
  }

  .sf-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .sf-animate,
  .sf-animate--left,
  .sf-animate--right,
  .sf-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .sf-hero {
    padding: 90px 14px 60px;
  }

  .sf-hero__title {
    font-size: 1.4rem;
  }

  .sf-hero__subtitle {
    font-size: 0.9rem;
  }

  .sf-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .sf-about,
  .sf-whoweare,
  .sf-services,
  .sf-delivery,
  .sf-reliable,
  .sf-why,
  .sf-industries,
  .sf-faq,
  .sf-commitment,
  .sf-cta {
    padding: 50px 0;
  }

  .sf-about__heading,
  .sf-whoweare__heading {
    font-size: 1.4rem;
  }

  .sf-about__text,
  .sf-whoweare__text {
    font-size: 0.9rem;
  }

  .sf-stats,
  .sf-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sf-stat {
    padding: 20px 14px;
  }

  .sf-stat__number {
    font-size: 1.8rem;
  }

  .sf-stat__icon {
    font-size: 1.8rem;
  }

  .sf-stat__label {
    font-size: 0.75rem;
  }

  .sf-services__title {
    font-size: 1.3rem;
  }

  .sf-service-card {
    padding: 20px 16px;
  }

  .sf-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .sf-delivery__heading {
    font-size: 1.3rem;
  }

  .sf-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .sf-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .sf-reliable__heading {
    font-size: 1.3rem;
  }

  .sf-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .sf-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sf-industry {
    padding: 20px 14px;
  }

  .sf-cta__heading {
    font-size: 1.3rem;
  }

  .sf-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.sf-tech { padding: 80px 0; background: var(--sf-light-bg); }
.sf-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sf-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--sf-text); margin-bottom: 20px; line-height: 1.25; }
.sf-tech__text { font-size: 1rem; color: var(--sf-gray); line-height: 1.75; margin-bottom: 14px; }
.sf-tech__content { }
.sf-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sf-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .sf-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .sf-tech__heading { font-size: 1.6rem; }
  .sf-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .sf-tech__heading { font-size: 1.4rem; }
}
/* ===== ml FAQ DETAILS/SUMMARY STYLES ===== */
.ml-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.ml-faq__list { text-align: left; }
.ml-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ml-faq__item summary { list-style: none; }
.ml-faq__item summary::-webkit-details-marker { display: none; }
.ml-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.ml-faq__question:hover { color: var(--ml-accent); }
.ml-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ml-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.ml-faq__item[open] .ml-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ml-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ml-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }

/* ===== sf FAQ DETAILS/SUMMARY STYLES ===== */
.sf-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.sf-faq__list { text-align: left; }
.sf-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.sf-faq__item summary { list-style: none; }
.sf-faq__item summary::-webkit-details-marker { display: none; }
.sf-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.sf-faq__question:hover { color: var(--sf-accent); }
.sf-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.sf-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.sf-faq__item[open] .sf-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.sf-faq__answer { padding: 0 0 18px; overflow: hidden; }
.sf-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }

/* ===== si FAQ DETAILS/SUMMARY STYLES ===== */
.si-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.si-faq__list { text-align: left; }
.si-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.si-faq__item summary { list-style: none; }
.si-faq__item summary::-webkit-details-marker { display: none; }
.si-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.si-faq__question:hover { color: var(--si-accent); }
.si-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.si-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.si-faq__item[open] .si-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.si-faq__answer { padding: 0 0 18px; overflow: hidden; }
.si-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }

/* ===== am FAQ DETAILS/SUMMARY STYLES ===== */
.am-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.am-faq__list { text-align: left; }
.am-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.am-faq__item summary { list-style: none; }
.am-faq__item summary::-webkit-details-marker { display: none; }
.am-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.am-faq__question:hover { color: var(--am-accent); }
.am-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.am-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.am-faq__item[open] .am-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.am-faq__answer { padding: 0 0 18px; overflow: hidden; }
.am-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }

/* ===== cs FAQ DETAILS/SUMMARY STYLES ===== */
.cs-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.cs-faq__list { text-align: left; }
.cs-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.cs-faq__item summary { list-style: none; }
.cs-faq__item summary::-webkit-details-marker { display: none; }
.cs-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.cs-faq__question:hover { color: var(--cs-accent); }
.cs-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.cs-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.cs-faq__item[open] .cs-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.cs-faq__answer { padding: 0 0 18px; overflow: hidden; }
.cs-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }

/* ===== ma FAQ DETAILS/SUMMARY STYLES ===== */
.ma-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.ma-faq__list { text-align: left; }
.ma-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ma-faq__item summary { list-style: none; }
.ma-faq__item summary::-webkit-details-marker { display: none; }
.ma-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.ma-faq__question:hover { color: var(--ma-accent); }
.ma-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ma-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.ma-faq__item[open] .ma-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ma-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ma-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }

/* ===== cp FAQ DETAILS/SUMMARY STYLES ===== */
.cp-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.cp-faq__list { text-align: left; }
.cp-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.cp-faq__item summary { list-style: none; }
.cp-faq__item summary::-webkit-details-marker { display: none; }
.cp-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.cp-faq__question:hover { color: var(--cp-accent); }
.cp-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.cp-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.cp-faq__item[open] .cp-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.cp-faq__answer { padding: 0 0 18px; overflow: hidden; }
.cp-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }

/* ===== vm FAQ DETAILS/SUMMARY STYLES ===== */
.vm-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.vm-faq__list { text-align: left; }
.vm-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.vm-faq__item summary { list-style: none; }
.vm-faq__item summary::-webkit-details-marker { display: none; }
.vm-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.vm-faq__question:hover { color: var(--vm-accent); }
.vm-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.vm-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.vm-faq__item[open] .vm-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.vm-faq__answer { padding: 0 0 18px; overflow: hidden; }
.vm-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }

/* ===== co FAQ DETAILS/SUMMARY STYLES ===== */
.co-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.co-faq__list { text-align: left; }
.co-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.co-faq__item summary { list-style: none; }
.co-faq__item summary::-webkit-details-marker { display: none; }
.co-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.co-faq__question:hover { color: var(--co-accent); }
.co-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.co-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.co-faq__item[open] .co-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.co-faq__answer { padding: 0 0 18px; overflow: hidden; }
.co-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }
/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --sl-accent: #e8a025;
  --sl-accent-hover: #d4911e;
  --sl-dark: #0b1120;
  --sl-dark-2: #101828;
  --sl-dark-3: #1a2332;
  --sl-white: #ffffff;
  --sl-gray: #000000;
  --sl-gray-light: #000000;
  --sl-light-bg: #f8f9fb;
  --sl-light-bg-2: #f1f3f7;
  --sl-text: #000000;
  --sl-text-light: #000000;
  --sl-border: #e5e7eb;
  --sl-radius: 12px;
  --sl-radius-lg: 20px;
  --sl-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --sl-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --sl-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes sl-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes sl-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes sl-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes sl-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes sl-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes sl-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.sl-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: sl-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sl-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: sl-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sl-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: sl-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sl-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: sl-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.sl-stagger > *:nth-child(1) { animation-delay: 0s; }
.sl-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.sl-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.sl-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.sl-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.sl-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.sl-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .sl-animate,
  .sl-animate--left,
  .sl-animate--right,
  .sl-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.sl-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.sl-text-accent {
  color: var(--sl-accent);
}

/* ---------- Shared Checklist ---------- */
.sl-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sl-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--sl-text);
  line-height: 1.5;
}

.sl-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sl-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.sl-hero {
  background: var(--sl-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.sl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.sl-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.sl-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--sl-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: sl-fadeUp 0.6s ease 0.1s both;
}

.sl-hero__breadcrumb-active {
  color: var(--sl-accent);
}

.sl-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--sl-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: sl-fadeUp 0.7s ease 0.25s both;
}

.sl-hero__title-accent {
  color: var(--sl-accent);
  font-style: italic;
  display: inline-block;
}

.sl-hero__subtitle {
  font-size: 1.3rem;
  color: var(--sl-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: sl-fadeUp 0.7s ease 0.45s both;
}

.sl-hero__desc {
  font-size: 0.95rem;
  color: var(--sl-gray-light);
  font-style: italic;
  animation: sl-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.sl-about {
  padding: 80px 0;
  background: var(--sl-white);
}

.sl-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sl-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sl-about__text {
  font-size: 1rem;
  color: var(--sl-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sl-about__text:last-child {
  margin-bottom: 0;
}

.sl-about__image img {
  width: 100%;
  border-radius: var(--sl-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.sl-stats,
.sl-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sl-stat {
  background: var(--sl-light-bg);
  border-radius: var(--sl-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--sl-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.sl-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sl-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.sl-stat:hover::before {
  transform: scaleX(1);
}

.sl-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--sl-accent);
}

.sl-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.sl-stat:nth-child(1) .sl-stat__number { animation-delay: 0.2s; }
.sl-stat:nth-child(2) .sl-stat__number { animation-delay: 0.4s; }
.sl-stat:nth-child(3) .sl-stat__number { animation-delay: 0.6s; }
.sl-stat:nth-child(4) .sl-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sl-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--sl-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.sl-stat--dark {
  background: var(--sl-white);
  border-color: var(--sl-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.sl-whoweare {
  padding: 80px 0;
  background: var(--sl-light-bg);
}

.sl-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sl-whoweare__image img {
  width: 100%;
  border-radius: var(--sl-radius-lg);
  object-fit: cover;
}

.sl-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sl-whoweare__text {
  font-size: 1rem;
  color: var(--sl-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sl-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.sl-services {
  padding: 80px 0;
  background: var(--sl-white);
}

.sl-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.sl-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sl-text);
}

.sl-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.sl-service-card {
  background: var(--sl-light-bg);
  border-radius: var(--sl-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.sl-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--sl-accent);
  background: var(--sl-white);
}

.sl-service-card--wide {
  grid-column: 1 / -1;
}

.sl-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--sl-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.sl-service-card:hover .sl-service-card__badge {
  animation: sl-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.sl-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sl-text);
  margin-bottom: 10px;
}

.sl-service-card__text {
  font-size: 0.9rem;
  color: var(--sl-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.sl-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.sl-tag {
  display: inline-block;
  background: var(--sl-white);
  color: var(--sl-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--sl-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.sl-tag:hover {
  background: var(--sl-accent);
  color: var(--sl-white);
  border-color: var(--sl-accent);
  transform: translateY(-2px);
}

/* Service List */
.sl-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sl-service-card__list li {
  font-size: 0.85rem;
  color: var(--sl-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.sl-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--sl-accent);
  font-weight: 700;
}

.sl-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.sl-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sl-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.sl-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.sl-delivery__text {
  font-size: 1rem;
  color: var(--sl-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.sl-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.sl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.sl-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--sl-white);
  border: 2px solid #e0e7ff;
  color: var(--sl-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.sl-step__circle::before {
  content: counter(sl-step-counter);
  counter-increment: sl-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.sl-delivery__steps {
  counter-reset: sl-step-counter;
}

.sl-step:hover .sl-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes sl-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--sl-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.sl-delivery__steps > :nth-child(1) .sl-step__circle  { animation: sl-stepGlow 7s ease infinite 0s; }
.sl-delivery__steps > :nth-child(3) .sl-step__circle  { animation: sl-stepGlow 7s ease infinite 1s; }
.sl-delivery__steps > :nth-child(5) .sl-step__circle  { animation: sl-stepGlow 7s ease infinite 2s; }
.sl-delivery__steps > :nth-child(7) .sl-step__circle  { animation: sl-stepGlow 7s ease infinite 3s; }
.sl-delivery__steps > :nth-child(9) .sl-step__circle  { animation: sl-stepGlow 7s ease infinite 4s; }
.sl-delivery__steps > :nth-child(11) .sl-step__circle { animation: sl-stepGlow 7s ease infinite 5s; }
.sl-delivery__steps > :nth-child(13) .sl-step__circle { animation: sl-stepGlow 7s ease infinite 6s; }

.sl-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: sl-arrowPulse 2s ease infinite;
}

@keyframes sl-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.sl-why {
  padding: 80px 0;
  background: var(--sl-white);
}

.sl-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.sl-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sl-why__text {
  font-size: 1rem;
  color: var(--sl-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.sl-why__image img {
  width: 100%;
  border-radius: var(--sl-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.sl-industries {
  padding: 80px 0;
  background: var(--sl-light-bg);
  text-align: center;
}

.sl-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 48px;
}

.sl-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sl-industry {
  background: var(--sl-white);
  border-radius: var(--sl-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--sl-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.sl-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--sl-accent);
}

.sl-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.sl-industry:hover .sl-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.sl-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sl-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.sl-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.sl-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.sl-reliable__text {
  font-size: 1rem;
  color: var(--sl-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.sl-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.sl-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sl-white);
  border: 1px solid var(--sl-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.sl-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--sl-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.sl-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--sl-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.sl-pillar:hover .sl-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.sl-pillar__label {
  font-size: 0.85rem;
  color: var(--sl-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.sl-faq {
  padding: 80px 0;
  background: var(--sl-light-bg);
}

.sl-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.sl-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--sl-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--sl-text);
  border-bottom: 2.5px solid var(--sl-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--sl-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--sl-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.sl-commitment {
  padding: 60px 0;
  background: var(--sl-white);
}

.sl-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.sl-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 16px;
}

.sl-commitment__text {
  font-size: 1rem;
  color: var(--sl-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.sl-cta {
  padding: 80px 0;
  background: var(--sl-dark);
}

.sl-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.sl-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sl-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sl-cta__text {
  font-size: 1rem;
  color: var(--sl-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.sl-cta__button {
  display: inline-block;
  background: var(--sl-accent);
  color: var(--sl-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: sl-pulse 2.5s ease infinite;
}

.sl-cta__button:hover {
  background: var(--sl-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.sl-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.sl-services__subtitle {
  font-size: 1rem;
  color: var(--sl-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .sl-hero__title {
    font-size: 2.2rem;
  }

  .sl-about__heading,
  .sl-whoweare__heading {
    font-size: 1.8rem;
  }

  .sl-services__title {
    font-size: 1.8rem;
  }

  .sl-service-card__title {
    font-size: 1rem;
  }

  .sl-delivery__heading {
    font-size: 1.8rem;
  }

  .sl-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .sl-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .sl-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .sl-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .sl-hero {
    padding: 100px 16px 80px;
  }

  .sl-hero__title {
    font-size: 1.7rem;
  }

  .sl-hero__subtitle {
    font-size: 1rem;
  }

  .sl-about__grid,
  .sl-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sl-about__heading,
  .sl-whoweare__heading {
    font-size: 1.6rem;
  }

  .sl-stats,
  .sl-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .sl-about__content,
  .sl-whoweare__content {
    order: 1;
  }

  .sl-services__grid {
    grid-template-columns: 1fr;
  }

  .sl-services__title {
    font-size: 1.5rem;
  }

  .sl-service-card--wide {
    grid-column: span 1;
  }

  .sl-delivery__heading {
    font-size: 1.5rem;
  }

  .sl-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .sl-step__arrow {
    display: none;
  }

  .sl-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .sl-reliable__heading {
    font-size: 1.5rem;
  }

  .sl-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .sl-why__heading {
    font-size: 1.5rem;
  }

  .sl-industries__heading {
    font-size: 1.5rem;
  }

  .sl-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sl-faq__heading {
    font-size: 1.3rem;
  }

  .sl-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .sl-animate,
  .sl-animate--left,
  .sl-animate--right,
  .sl-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .sl-hero {
    padding: 90px 14px 60px;
  }

  .sl-hero__title {
    font-size: 1.4rem;
  }

  .sl-hero__subtitle {
    font-size: 0.9rem;
  }

  .sl-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .sl-about,
  .sl-whoweare,
  .sl-services,
  .sl-delivery,
  .sl-reliable,
  .sl-why,
  .sl-industries,
  .sl-faq,
  .sl-commitment,
  .sl-cta {
    padding: 50px 0;
  }

  .sl-about__heading,
  .sl-whoweare__heading {
    font-size: 1.4rem;
  }

  .sl-about__text,
  .sl-whoweare__text {
    font-size: 0.9rem;
  }

  .sl-stats,
  .sl-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sl-stat {
    padding: 20px 14px;
  }

  .sl-stat__number {
    font-size: 1.8rem;
  }

  .sl-stat__icon {
    font-size: 1.8rem;
  }

  .sl-stat__label {
    font-size: 0.75rem;
  }

  .sl-services__title {
    font-size: 1.3rem;
  }

  .sl-service-card {
    padding: 20px 16px;
  }

  .sl-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .sl-delivery__heading {
    font-size: 1.3rem;
  }

  .sl-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .sl-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .sl-reliable__heading {
    font-size: 1.3rem;
  }

  .sl-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .sl-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sl-industry {
    padding: 20px 14px;
  }

  .sl-cta__heading {
    font-size: 1.3rem;
  }

  .sl-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.sl-tech { padding: 80px 0; background: var(--sl-light-bg); }
.sl-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sl-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--sl-text); margin-bottom: 20px; line-height: 1.25; }
.sl-tech__text { font-size: 1rem; color: var(--sl-gray); line-height: 1.75; margin-bottom: 14px; }
.sl-tech__content { }
.sl-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sl-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .sl-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .sl-tech__heading { font-size: 1.6rem; }
  .sl-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .sl-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.sl-faq__subtext {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 32px;
}

.sl-faq__list {
  text-align: left;
}

.sl-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.sl-faq__item summary {
  list-style: none;
}

.sl-faq__item summary::-webkit-details-marker {
  display: none;
}

.sl-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.sl-faq__question:hover {
  color: var(--sl-accent);
}

.sl-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.sl-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.sl-faq__item[open] .sl-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.sl-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.sl-faq__answer p {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
  margin: 0;
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.sl-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.sl-faq__list { text-align: left; }
.sl-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.sl-faq__item summary { list-style: none; }
.sl-faq__item summary::-webkit-details-marker { display: none; }
.sl-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.sl-faq__question:hover { color: var(--sl-accent); }
.sl-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.sl-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.sl-faq__item[open] .sl-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.sl-faq__answer { padding: 0 0 18px; overflow: hidden; }
.sl-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }


/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --sn-accent: #e8a025;
  --sn-accent-hover: #d4911e;
  --sn-dark: #0b1120;
  --sn-dark-2: #101828;
  --sn-dark-3: #1a2332;
  --sn-white: #ffffff;
  --sn-gray: #000000;
  --sn-gray-light: #000000;
  --sn-light-bg: #f8f9fb;
  --sn-light-bg-2: #f1f3f7;
  --sn-text: #000000;
  --sn-text-light: #000000;
  --sn-border: #e5e7eb;
  --sn-radius: 12px;
  --sn-radius-lg: 20px;
  --sn-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --sn-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --sn-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes sn-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes sn-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes sn-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes sn-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes sn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes sn-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.sn-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: sn-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sn-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: sn-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sn-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: sn-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sn-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: sn-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.sn-stagger > *:nth-child(1) { animation-delay: 0s; }
.sn-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.sn-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.sn-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.sn-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.sn-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.sn-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .sn-animate,
  .sn-animate--left,
  .sn-animate--right,
  .sn-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.sn-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.sn-text-accent {
  color: var(--sn-accent);
}

/* ---------- Shared Checklist ---------- */
.sn-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sn-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--sn-text);
  line-height: 1.5;
}

.sn-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sn-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.sn-hero {
  background: var(--sn-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.sn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.sn-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.sn-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--sn-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: sn-fadeUp 0.6s ease 0.1s both;
}

.sn-hero__breadcrumb-active {
  color: var(--sn-accent);
}

.sn-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--sn-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: sn-fadeUp 0.7s ease 0.25s both;
}

.sn-hero__title-accent {
  color: var(--sn-accent);
  font-style: italic;
  display: inline-block;
}

.sn-hero__subtitle {
  font-size: 1.3rem;
  color: var(--sn-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: sn-fadeUp 0.7s ease 0.45s both;
}

.sn-hero__desc {
  font-size: 0.95rem;
  color: var(--sn-gray-light);
  font-style: italic;
  animation: sn-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.sn-about {
  padding: 80px 0;
  background: var(--sn-white);
}

.sn-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sn-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sn-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sn-about__text {
  font-size: 1rem;
  color: var(--sn-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sn-about__text:last-child {
  margin-bottom: 0;
}

.sn-about__image img {
  width: 100%;
  border-radius: var(--sn-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.sn-stats,
.sn-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sn-stat {
  background: var(--sn-light-bg);
  border-radius: var(--sn-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--sn-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.sn-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sn-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.sn-stat:hover::before {
  transform: scaleX(1);
}

.sn-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--sn-accent);
}

.sn-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.sn-stat:nth-child(1) .sn-stat__number { animation-delay: 0.2s; }
.sn-stat:nth-child(2) .sn-stat__number { animation-delay: 0.4s; }
.sn-stat:nth-child(3) .sn-stat__number { animation-delay: 0.6s; }
.sn-stat:nth-child(4) .sn-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sn-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--sn-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.sn-stat--dark {
  background: var(--sn-white);
  border-color: var(--sn-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.sn-whoweare {
  padding: 80px 0;
  background: var(--sn-light-bg);
}

.sn-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sn-whoweare__image img {
  width: 100%;
  border-radius: var(--sn-radius-lg);
  object-fit: cover;
}

.sn-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sn-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sn-whoweare__text {
  font-size: 1rem;
  color: var(--sn-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sn-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.sn-services {
  padding: 80px 0;
  background: var(--sn-white);
}

.sn-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.sn-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sn-text);
}

.sn-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.sn-service-card {
  background: var(--sn-light-bg);
  border-radius: var(--sn-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.sn-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--sn-accent);
  background: var(--sn-white);
}

.sn-service-card--wide {
  grid-column: 1 / -1;
}

.sn-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--sn-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.sn-service-card:hover .sn-service-card__badge {
  animation: sn-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.sn-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sn-text);
  margin-bottom: 10px;
}

.sn-service-card__text {
  font-size: 0.9rem;
  color: var(--sn-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.sn-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.sn-tag {
  display: inline-block;
  background: var(--sn-white);
  color: var(--sn-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--sn-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.sn-tag:hover {
  background: var(--sn-accent);
  color: var(--sn-white);
  border-color: var(--sn-accent);
  transform: translateY(-2px);
}

/* Service List */
.sn-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sn-service-card__list li {
  font-size: 0.85rem;
  color: var(--sn-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.sn-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--sn-accent);
  font-weight: 700;
}

.sn-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.sn-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sn-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.sn-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sn-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.sn-delivery__text {
  font-size: 1rem;
  color: var(--sn-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.sn-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.sn-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.sn-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--sn-white);
  border: 2px solid #e0e7ff;
  color: var(--sn-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.sn-step__circle::before {
  content: counter(sn-step-counter);
  counter-increment: sn-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.sn-delivery__steps {
  counter-reset: sn-step-counter;
}

.sn-step:hover .sn-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes sn-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--sn-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.sn-delivery__steps > :nth-child(1) .sn-step__circle  { animation: sn-stepGlow 7s ease infinite 0s; }
.sn-delivery__steps > :nth-child(3) .sn-step__circle  { animation: sn-stepGlow 7s ease infinite 1s; }
.sn-delivery__steps > :nth-child(5) .sn-step__circle  { animation: sn-stepGlow 7s ease infinite 2s; }
.sn-delivery__steps > :nth-child(7) .sn-step__circle  { animation: sn-stepGlow 7s ease infinite 3s; }
.sn-delivery__steps > :nth-child(9) .sn-step__circle  { animation: sn-stepGlow 7s ease infinite 4s; }
.sn-delivery__steps > :nth-child(11) .sn-step__circle { animation: sn-stepGlow 7s ease infinite 5s; }
.sn-delivery__steps > :nth-child(13) .sn-step__circle { animation: sn-stepGlow 7s ease infinite 6s; }

.sn-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: sn-arrowPulse 2s ease infinite;
}

@keyframes sn-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.sn-why {
  padding: 80px 0;
  background: var(--sn-white);
}

.sn-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.sn-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sn-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sn-why__text {
  font-size: 1rem;
  color: var(--sn-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.sn-why__image img {
  width: 100%;
  border-radius: var(--sn-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.sn-industries {
  padding: 80px 0;
  background: var(--sn-light-bg);
  text-align: center;
}

.sn-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sn-text);
  margin-bottom: 48px;
}

.sn-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sn-industry {
  background: var(--sn-white);
  border-radius: var(--sn-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--sn-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.sn-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--sn-accent);
}

.sn-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.sn-industry:hover .sn-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.sn-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sn-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.sn-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.sn-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sn-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.sn-reliable__text {
  font-size: 1rem;
  color: var(--sn-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.sn-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.sn-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sn-white);
  border: 1px solid var(--sn-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.sn-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--sn-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.sn-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--sn-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.sn-pillar:hover .sn-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.sn-pillar__label {
  font-size: 0.85rem;
  color: var(--sn-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.sn-faq {
  padding: 80px 0;
  background: var(--sn-light-bg);
}

.sn-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.sn-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--sn-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--sn-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sn-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--sn-text);
  border-bottom: 2.5px solid var(--sn-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--sn-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--sn-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.sn-commitment {
  padding: 60px 0;
  background: var(--sn-white);
}

.sn-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.sn-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sn-text);
  margin-bottom: 16px;
}

.sn-commitment__text {
  font-size: 1rem;
  color: var(--sn-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.sn-cta {
  padding: 80px 0;
  background: var(--sn-dark);
}

.sn-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.sn-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sn-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sn-cta__text {
  font-size: 1rem;
  color: var(--sn-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.sn-cta__button {
  display: inline-block;
  background: var(--sn-accent);
  color: var(--sn-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: sn-pulse 2.5s ease infinite;
}

.sn-cta__button:hover {
  background: var(--sn-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.sn-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.sn-services__subtitle {
  font-size: 1rem;
  color: var(--sn-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .sn-hero__title {
    font-size: 2.2rem;
  }

  .sn-about__heading,
  .sn-whoweare__heading {
    font-size: 1.8rem;
  }

  .sn-services__title {
    font-size: 1.8rem;
  }

  .sn-service-card__title {
    font-size: 1rem;
  }

  .sn-delivery__heading {
    font-size: 1.8rem;
  }

  .sn-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .sn-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .sn-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .sn-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .sn-hero {
    padding: 100px 16px 80px;
  }

  .sn-hero__title {
    font-size: 1.7rem;
  }

  .sn-hero__subtitle {
    font-size: 1rem;
  }

  .sn-about__grid,
  .sn-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sn-about__heading,
  .sn-whoweare__heading {
    font-size: 1.6rem;
  }

  .sn-stats,
  .sn-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .sn-about__content,
  .sn-whoweare__content {
    order: 1;
  }

  .sn-services__grid {
    grid-template-columns: 1fr;
  }

  .sn-services__title {
    font-size: 1.5rem;
  }

  .sn-service-card--wide {
    grid-column: span 1;
  }

  .sn-delivery__heading {
    font-size: 1.5rem;
  }

  .sn-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .sn-step__arrow {
    display: none;
  }

  .sn-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .sn-reliable__heading {
    font-size: 1.5rem;
  }

  .sn-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .sn-why__heading {
    font-size: 1.5rem;
  }

  .sn-industries__heading {
    font-size: 1.5rem;
  }

  .sn-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sn-faq__heading {
    font-size: 1.3rem;
  }

  .sn-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .sn-animate,
  .sn-animate--left,
  .sn-animate--right,
  .sn-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .sn-hero {
    padding: 90px 14px 60px;
  }

  .sn-hero__title {
    font-size: 1.4rem;
  }

  .sn-hero__subtitle {
    font-size: 0.9rem;
  }

  .sn-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .sn-about,
  .sn-whoweare,
  .sn-services,
  .sn-delivery,
  .sn-reliable,
  .sn-why,
  .sn-industries,
  .sn-faq,
  .sn-commitment,
  .sn-cta {
    padding: 50px 0;
  }

  .sn-about__heading,
  .sn-whoweare__heading {
    font-size: 1.4rem;
  }

  .sn-about__text,
  .sn-whoweare__text {
    font-size: 0.9rem;
  }

  .sn-stats,
  .sn-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sn-stat {
    padding: 20px 14px;
  }

  .sn-stat__number {
    font-size: 1.8rem;
  }

  .sn-stat__icon {
    font-size: 1.8rem;
  }

  .sn-stat__label {
    font-size: 0.75rem;
  }

  .sn-services__title {
    font-size: 1.3rem;
  }

  .sn-service-card {
    padding: 20px 16px;
  }

  .sn-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .sn-delivery__heading {
    font-size: 1.3rem;
  }

  .sn-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .sn-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .sn-reliable__heading {
    font-size: 1.3rem;
  }

  .sn-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .sn-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sn-industry {
    padding: 20px 14px;
  }

  .sn-cta__heading {
    font-size: 1.3rem;
  }

  .sn-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.sn-tech { padding: 80px 0; background: var(--sn-light-bg); }
.sn-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sn-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--sn-text); margin-bottom: 20px; line-height: 1.25; }
.sn-tech__text { font-size: 1rem; color: var(--sn-gray); line-height: 1.75; margin-bottom: 14px; }
.sn-tech__content { }
.sn-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sn-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .sn-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .sn-tech__heading { font-size: 1.6rem; }
  .sn-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .sn-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.sn-faq__subtext {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 32px;
}

.sn-faq__list {
  text-align: left;
}

.sn-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.sn-faq__item summary {
  list-style: none;
}

.sn-faq__item summary::-webkit-details-marker {
  display: none;
}

.sn-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.sn-faq__question:hover {
  color: var(--sn-accent);
}

.sn-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.sn-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.sn-faq__item[open] .sn-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.sn-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.sn-faq__answer p {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
  margin: 0;
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.sn-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.sn-faq__list { text-align: left; }
.sn-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.sn-faq__item summary { list-style: none; }
.sn-faq__item summary::-webkit-details-marker { display: none; }
.sn-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.sn-faq__question:hover { color: var(--sn-accent); }
.sn-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.sn-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.sn-faq__item[open] .sn-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.sn-faq__answer { padding: 0 0 18px; overflow: hidden; }
.sn-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }


/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --sc-accent: #e8a025;
  --sc-accent-hover: #d4911e;
  --sc-dark: #0b1120;
  --sc-dark-2: #101828;
  --sc-dark-3: #1a2332;
  --sc-white: #ffffff;
  --sc-gray: #000000;
  --sc-gray-light: #000000;
  --sc-light-bg: #f8f9fb;
  --sc-light-bg-2: #f1f3f7;
  --sc-text: #000000;
  --sc-text-light: #000000;
  --sc-border: #e5e7eb;
  --sc-radius: 12px;
  --sc-radius-lg: 20px;
  --sc-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --sc-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --sc-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes sc-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes sc-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes sc-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes sc-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes sc-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes sc-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.sc-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: sc-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sc-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: sc-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sc-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: sc-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sc-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: sc-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.sc-stagger > *:nth-child(1) { animation-delay: 0s; }
.sc-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.sc-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.sc-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.sc-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.sc-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.sc-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .sc-animate,
  .sc-animate--left,
  .sc-animate--right,
  .sc-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.sc-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.sc-text-accent {
  color: var(--sc-accent);
}

/* ---------- Shared Checklist ---------- */
.sc-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--sc-text);
  line-height: 1.5;
}

.sc-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sc-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.sc-hero {
  background: var(--sc-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.sc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.sc-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.sc-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--sc-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: sc-fadeUp 0.6s ease 0.1s both;
}

.sc-hero__breadcrumb-active {
  color: var(--sc-accent);
}

.sc-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--sc-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: sc-fadeUp 0.7s ease 0.25s both;
}

.sc-hero__title-accent {
  color: var(--sc-accent);
  font-style: italic;
  display: inline-block;
}

.sc-hero__subtitle {
  font-size: 1.3rem;
  color: var(--sc-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: sc-fadeUp 0.7s ease 0.45s both;
}

.sc-hero__desc {
  font-size: 0.95rem;
  color: var(--sc-gray-light);
  font-style: italic;
  animation: sc-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.sc-about {
  padding: 80px 0;
  background: var(--sc-white);
}

.sc-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sc-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sc-about__text {
  font-size: 1rem;
  color: var(--sc-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sc-about__text:last-child {
  margin-bottom: 0;
}

.sc-about__image img {
  width: 100%;
  border-radius: var(--sc-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.sc-stats,
.sc-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sc-stat {
  background: var(--sc-light-bg);
  border-radius: var(--sc-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--sc-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.sc-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sc-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.sc-stat:hover::before {
  transform: scaleX(1);
}

.sc-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--sc-accent);
}

.sc-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.sc-stat:nth-child(1) .sc-stat__number { animation-delay: 0.2s; }
.sc-stat:nth-child(2) .sc-stat__number { animation-delay: 0.4s; }
.sc-stat:nth-child(3) .sc-stat__number { animation-delay: 0.6s; }
.sc-stat:nth-child(4) .sc-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sc-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--sc-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.sc-stat--dark {
  background: var(--sc-white);
  border-color: var(--sc-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.sc-whoweare {
  padding: 80px 0;
  background: var(--sc-light-bg);
}

.sc-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sc-whoweare__image img {
  width: 100%;
  border-radius: var(--sc-radius-lg);
  object-fit: cover;
}

.sc-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sc-whoweare__text {
  font-size: 1rem;
  color: var(--sc-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sc-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.sc-services {
  padding: 80px 0;
  background: var(--sc-white);
}

.sc-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.sc-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sc-text);
}

.sc-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.sc-service-card {
  background: var(--sc-light-bg);
  border-radius: var(--sc-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.sc-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--sc-accent);
  background: var(--sc-white);
}

.sc-service-card--wide {
  grid-column: 1 / -1;
}

.sc-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--sc-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.sc-service-card:hover .sc-service-card__badge {
  animation: sc-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.sc-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sc-text);
  margin-bottom: 10px;
}

.sc-service-card__text {
  font-size: 0.9rem;
  color: var(--sc-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.sc-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.sc-tag {
  display: inline-block;
  background: var(--sc-white);
  color: var(--sc-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--sc-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.sc-tag:hover {
  background: var(--sc-accent);
  color: var(--sc-white);
  border-color: var(--sc-accent);
  transform: translateY(-2px);
}

/* Service List */
.sc-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-service-card__list li {
  font-size: 0.85rem;
  color: var(--sc-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.sc-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--sc-accent);
  font-weight: 700;
}

.sc-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.sc-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sc-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.sc-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.sc-delivery__text {
  font-size: 1rem;
  color: var(--sc-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.sc-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.sc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.sc-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--sc-white);
  border: 2px solid #e0e7ff;
  color: var(--sc-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.sc-step__circle::before {
  content: counter(sc-step-counter);
  counter-increment: sc-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.sc-delivery__steps {
  counter-reset: sc-step-counter;
}

.sc-step:hover .sc-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes sc-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--sc-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.sc-delivery__steps > :nth-child(1) .sc-step__circle  { animation: sc-stepGlow 7s ease infinite 0s; }
.sc-delivery__steps > :nth-child(3) .sc-step__circle  { animation: sc-stepGlow 7s ease infinite 1s; }
.sc-delivery__steps > :nth-child(5) .sc-step__circle  { animation: sc-stepGlow 7s ease infinite 2s; }
.sc-delivery__steps > :nth-child(7) .sc-step__circle  { animation: sc-stepGlow 7s ease infinite 3s; }
.sc-delivery__steps > :nth-child(9) .sc-step__circle  { animation: sc-stepGlow 7s ease infinite 4s; }
.sc-delivery__steps > :nth-child(11) .sc-step__circle { animation: sc-stepGlow 7s ease infinite 5s; }
.sc-delivery__steps > :nth-child(13) .sc-step__circle { animation: sc-stepGlow 7s ease infinite 6s; }

.sc-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: sc-arrowPulse 2s ease infinite;
}

@keyframes sc-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.sc-why {
  padding: 80px 0;
  background: var(--sc-white);
}

.sc-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.sc-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sc-why__text {
  font-size: 1rem;
  color: var(--sc-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.sc-why__image img {
  width: 100%;
  border-radius: var(--sc-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.sc-industries {
  padding: 80px 0;
  background: var(--sc-light-bg);
  text-align: center;
}

.sc-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 48px;
}

.sc-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sc-industry {
  background: var(--sc-white);
  border-radius: var(--sc-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--sc-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.sc-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--sc-accent);
}

.sc-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.sc-industry:hover .sc-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.sc-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sc-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.sc-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.sc-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.sc-reliable__text {
  font-size: 1rem;
  color: var(--sc-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.sc-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.sc-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sc-white);
  border: 1px solid var(--sc-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.sc-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--sc-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.sc-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--sc-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.sc-pillar:hover .sc-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.sc-pillar__label {
  font-size: 0.85rem;
  color: var(--sc-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.sc-faq {
  padding: 80px 0;
  background: var(--sc-light-bg);
}

.sc-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.sc-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--sc-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sc-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--sc-text);
  border-bottom: 2.5px solid var(--sc-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--sc-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--sc-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.sc-commitment {
  padding: 60px 0;
  background: var(--sc-white);
}

.sc-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.sc-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 16px;
}

.sc-commitment__text {
  font-size: 1rem;
  color: var(--sc-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.sc-cta {
  padding: 80px 0;
  background: var(--sc-dark);
}

.sc-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.sc-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sc-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sc-cta__text {
  font-size: 1rem;
  color: var(--sc-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.sc-cta__button {
  display: inline-block;
  background: var(--sc-accent);
  color: var(--sc-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: sc-pulse 2.5s ease infinite;
}

.sc-cta__button:hover {
  background: var(--sc-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.sc-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.sc-services__subtitle {
  font-size: 1rem;
  color: var(--sc-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .sc-hero__title {
    font-size: 2.2rem;
  }

  .sc-about__heading,
  .sc-whoweare__heading {
    font-size: 1.8rem;
  }

  .sc-services__title {
    font-size: 1.8rem;
  }

  .sc-service-card__title {
    font-size: 1rem;
  }

  .sc-delivery__heading {
    font-size: 1.8rem;
  }

  .sc-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .sc-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .sc-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .sc-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .sc-hero {
    padding: 100px 16px 80px;
  }

  .sc-hero__title {
    font-size: 1.7rem;
  }

  .sc-hero__subtitle {
    font-size: 1rem;
  }

  .sc-about__grid,
  .sc-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sc-about__heading,
  .sc-whoweare__heading {
    font-size: 1.6rem;
  }

  .sc-stats,
  .sc-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .sc-about__content,
  .sc-whoweare__content {
    order: 1;
  }

  .sc-services__grid {
    grid-template-columns: 1fr;
  }

  .sc-services__title {
    font-size: 1.5rem;
  }

  .sc-service-card--wide {
    grid-column: span 1;
  }

  .sc-delivery__heading {
    font-size: 1.5rem;
  }

  .sc-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .sc-step__arrow {
    display: none;
  }

  .sc-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .sc-reliable__heading {
    font-size: 1.5rem;
  }

  .sc-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .sc-why__heading {
    font-size: 1.5rem;
  }

  .sc-industries__heading {
    font-size: 1.5rem;
  }

  .sc-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sc-faq__heading {
    font-size: 1.3rem;
  }

  .sc-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .sc-animate,
  .sc-animate--left,
  .sc-animate--right,
  .sc-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .sc-hero {
    padding: 90px 14px 60px;
  }

  .sc-hero__title {
    font-size: 1.4rem;
  }

  .sc-hero__subtitle {
    font-size: 0.9rem;
  }

  .sc-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .sc-about,
  .sc-whoweare,
  .sc-services,
  .sc-delivery,
  .sc-reliable,
  .sc-why,
  .sc-industries,
  .sc-faq,
  .sc-commitment,
  .sc-cta {
    padding: 50px 0;
  }

  .sc-about__heading,
  .sc-whoweare__heading {
    font-size: 1.4rem;
  }

  .sc-about__text,
  .sc-whoweare__text {
    font-size: 0.9rem;
  }

  .sc-stats,
  .sc-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sc-stat {
    padding: 20px 14px;
  }

  .sc-stat__number {
    font-size: 1.8rem;
  }

  .sc-stat__icon {
    font-size: 1.8rem;
  }

  .sc-stat__label {
    font-size: 0.75rem;
  }

  .sc-services__title {
    font-size: 1.3rem;
  }

  .sc-service-card {
    padding: 20px 16px;
  }

  .sc-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .sc-delivery__heading {
    font-size: 1.3rem;
  }

  .sc-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .sc-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .sc-reliable__heading {
    font-size: 1.3rem;
  }

  .sc-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .sc-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sc-industry {
    padding: 20px 14px;
  }

  .sc-cta__heading {
    font-size: 1.3rem;
  }

  .sc-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.sc-tech { padding: 80px 0; background: var(--sc-light-bg); }
.sc-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sc-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--sc-text); margin-bottom: 20px; line-height: 1.25; }
.sc-tech__text { font-size: 1rem; color: var(--sc-gray); line-height: 1.75; margin-bottom: 14px; }
.sc-tech__content { }
.sc-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sc-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .sc-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .sc-tech__heading { font-size: 1.6rem; }
  .sc-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .sc-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.sc-faq__subtext {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 32px;
}

.sc-faq__list {
  text-align: left;
}

.sc-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.sc-faq__item summary {
  list-style: none;
}

.sc-faq__item summary::-webkit-details-marker {
  display: none;
}

.sc-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.sc-faq__question:hover {
  color: var(--sc-accent);
}

.sc-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.sc-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.sc-faq__item[open] .sc-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.sc-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.sc-faq__answer p {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
  margin: 0;
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.sc-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.sc-faq__list { text-align: left; }
.sc-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.sc-faq__item summary { list-style: none; }
.sc-faq__item summary::-webkit-details-marker { display: none; }
.sc-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.sc-faq__question:hover { color: var(--sc-accent); }
.sc-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.sc-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.sc-faq__item[open] .sc-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.sc-faq__answer { padding: 0 0 18px; overflow: hidden; }
.sc-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }



/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --ea-accent: #e8a025;
  --ea-accent-hover: #d4911e;
  --ea-dark: #0b1120;
  --ea-dark-2: #101828;
  --ea-dark-3: #1a2332;
  --ea-white: #ffffff;
  --ea-gray: #000000;
  --ea-gray-light: #000000;
  --ea-light-bg: #f8f9fb;
  --ea-light-bg-2: #f1f3f7;
  --ea-text: #000000;
  --ea-text-light: #000000;
  --ea-border: #e5e7eb;
  --ea-radius: 12px;
  --ea-radius-lg: 20px;
  --ea-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ea-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ea-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes ea-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes ea-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes ea-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes ea-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes ea-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes ea-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.ea-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: ea-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ea-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: ea-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ea-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: ea-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ea-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: ea-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.ea-stagger > *:nth-child(1) { animation-delay: 0s; }
.ea-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ea-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ea-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ea-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ea-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ea-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .ea-animate,
  .ea-animate--left,
  .ea-animate--right,
  .ea-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.ea-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.ea-text-accent {
  color: var(--ea-accent);
}

/* ---------- Shared Checklist ---------- */
.ea-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ea-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ea-text);
  line-height: 1.5;
}

.ea-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ea-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.ea-hero {
  background: var(--ea-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.ea-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.ea-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.ea-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--ea-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: ea-fadeUp 0.6s ease 0.1s both;
}

.ea-hero__breadcrumb-active {
  color: var(--ea-accent);
}

.ea-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ea-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: ea-fadeUp 0.7s ease 0.25s both;
}

.ea-hero__title-accent {
  color: var(--ea-accent);
  font-style: italic;
  display: inline-block;
}

.ea-hero__subtitle {
  font-size: 1.3rem;
  color: var(--ea-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: ea-fadeUp 0.7s ease 0.45s both;
}

.ea-hero__desc {
  font-size: 0.95rem;
  color: var(--ea-gray-light);
  font-style: italic;
  animation: ea-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.ea-about {
  padding: 80px 0;
  background: var(--ea-white);
}

.ea-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ea-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ea-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ea-about__text {
  font-size: 1rem;
  color: var(--ea-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ea-about__text:last-child {
  margin-bottom: 0;
}

.ea-about__image img {
  width: 100%;
  border-radius: var(--ea-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.ea-stats,
.ea-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ea-stat {
  background: var(--ea-light-bg);
  border-radius: var(--ea-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--ea-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.ea-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ea-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.ea-stat:hover::before {
  transform: scaleX(1);
}

.ea-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--ea-accent);
}

.ea-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.ea-stat:nth-child(1) .ea-stat__number { animation-delay: 0.2s; }
.ea-stat:nth-child(2) .ea-stat__number { animation-delay: 0.4s; }
.ea-stat:nth-child(3) .ea-stat__number { animation-delay: 0.6s; }
.ea-stat:nth-child(4) .ea-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ea-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--ea-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.ea-stat--dark {
  background: var(--ea-white);
  border-color: var(--ea-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.ea-whoweare {
  padding: 80px 0;
  background: var(--ea-light-bg);
}

.ea-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ea-whoweare__image img {
  width: 100%;
  border-radius: var(--ea-radius-lg);
  object-fit: cover;
}

.ea-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ea-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ea-whoweare__text {
  font-size: 1rem;
  color: var(--ea-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ea-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.ea-services {
  padding: 80px 0;
  background: var(--ea-white);
}

.ea-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.ea-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ea-text);
}

.ea-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.ea-service-card {
  background: var(--ea-light-bg);
  border-radius: var(--ea-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.ea-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--ea-accent);
  background: var(--ea-white);
}

.ea-service-card--wide {
  grid-column: 1 / -1;
}

.ea-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--ea-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.ea-service-card:hover .ea-service-card__badge {
  animation: ea-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.ea-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ea-text);
  margin-bottom: 10px;
}

.ea-service-card__text {
  font-size: 0.9rem;
  color: var(--ea-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.ea-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ea-tag {
  display: inline-block;
  background: var(--ea-white);
  color: var(--ea-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--ea-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.ea-tag:hover {
  background: var(--ea-accent);
  color: var(--ea-white);
  border-color: var(--ea-accent);
  transform: translateY(-2px);
}

/* Service List */
.ea-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ea-service-card__list li {
  font-size: 0.85rem;
  color: var(--ea-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.ea-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ea-accent);
  font-weight: 700;
}

.ea-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.ea-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ea-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.ea-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ea-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.ea-delivery__text {
  font-size: 1rem;
  color: var(--ea-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.ea-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.ea-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ea-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ea-white);
  border: 2px solid #e0e7ff;
  color: var(--ea-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.ea-step__circle::before {
  content: counter(ea-step-counter);
  counter-increment: ea-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.ea-delivery__steps {
  counter-reset: ea-step-counter;
}

.ea-step:hover .ea-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes ea-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--ea-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.ea-delivery__steps > :nth-child(1) .ea-step__circle  { animation: ea-stepGlow 7s ease infinite 0s; }
.ea-delivery__steps > :nth-child(3) .ea-step__circle  { animation: ea-stepGlow 7s ease infinite 1s; }
.ea-delivery__steps > :nth-child(5) .ea-step__circle  { animation: ea-stepGlow 7s ease infinite 2s; }
.ea-delivery__steps > :nth-child(7) .ea-step__circle  { animation: ea-stepGlow 7s ease infinite 3s; }
.ea-delivery__steps > :nth-child(9) .ea-step__circle  { animation: ea-stepGlow 7s ease infinite 4s; }
.ea-delivery__steps > :nth-child(11) .ea-step__circle { animation: ea-stepGlow 7s ease infinite 5s; }
.ea-delivery__steps > :nth-child(13) .ea-step__circle { animation: ea-stepGlow 7s ease infinite 6s; }

.ea-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: ea-arrowPulse 2s ease infinite;
}

@keyframes ea-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.ea-why {
  padding: 80px 0;
  background: var(--ea-white);
}

.ea-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.ea-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ea-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ea-why__text {
  font-size: 1rem;
  color: var(--ea-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.ea-why__image img {
  width: 100%;
  border-radius: var(--ea-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.ea-industries {
  padding: 80px 0;
  background: var(--ea-light-bg);
  text-align: center;
}

.ea-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ea-text);
  margin-bottom: 48px;
}

.ea-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ea-industry {
  background: var(--ea-white);
  border-radius: var(--ea-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--ea-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.ea-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--ea-accent);
}

.ea-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.ea-industry:hover .ea-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.ea-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ea-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.ea-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.ea-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ea-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.ea-reliable__text {
  font-size: 1rem;
  color: var(--ea-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.ea-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.ea-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ea-white);
  border: 1px solid var(--ea-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.ea-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--ea-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.ea-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--ea-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.ea-pillar:hover .ea-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.ea-pillar__label {
  font-size: 0.85rem;
  color: var(--ea-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.ea-faq {
  padding: 80px 0;
  background: var(--ea-light-bg);
}

.ea-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.ea-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ea-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--ea-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ea-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--ea-text);
  border-bottom: 2.5px solid var(--ea-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ea-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--ea-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.ea-commitment {
  padding: 60px 0;
  background: var(--ea-white);
}

.ea-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.ea-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ea-text);
  margin-bottom: 16px;
}

.ea-commitment__text {
  font-size: 1rem;
  color: var(--ea-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.ea-cta {
  padding: 80px 0;
  background: var(--ea-dark);
}

.ea-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.ea-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ea-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ea-cta__text {
  font-size: 1rem;
  color: var(--ea-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.ea-cta__button {
  display: inline-block;
  background: var(--ea-accent);
  color: var(--ea-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: ea-pulse 2.5s ease infinite;
}

.ea-cta__button:hover {
  background: var(--ea-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.ea-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.ea-services__subtitle {
  font-size: 1rem;
  color: var(--ea-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .ea-hero__title {
    font-size: 2.2rem;
  }

  .ea-about__heading,
  .ea-whoweare__heading {
    font-size: 1.8rem;
  }

  .ea-services__title {
    font-size: 1.8rem;
  }

  .ea-service-card__title {
    font-size: 1rem;
  }

  .ea-delivery__heading {
    font-size: 1.8rem;
  }

  .ea-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .ea-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .ea-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .ea-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .ea-hero {
    padding: 100px 16px 80px;
  }

  .ea-hero__title {
    font-size: 1.7rem;
  }

  .ea-hero__subtitle {
    font-size: 1rem;
  }

  .ea-about__grid,
  .ea-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ea-about__heading,
  .ea-whoweare__heading {
    font-size: 1.6rem;
  }

  .ea-stats,
  .ea-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .ea-about__content,
  .ea-whoweare__content {
    order: 1;
  }

  .ea-services__grid {
    grid-template-columns: 1fr;
  }

  .ea-services__title {
    font-size: 1.5rem;
  }

  .ea-service-card--wide {
    grid-column: span 1;
  }

  .ea-delivery__heading {
    font-size: 1.5rem;
  }

  .ea-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .ea-step__arrow {
    display: none;
  }

  .ea-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .ea-reliable__heading {
    font-size: 1.5rem;
  }

  .ea-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .ea-why__heading {
    font-size: 1.5rem;
  }

  .ea-industries__heading {
    font-size: 1.5rem;
  }

  .ea-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .ea-faq__heading {
    font-size: 1.3rem;
  }

  .ea-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .ea-animate,
  .ea-animate--left,
  .ea-animate--right,
  .ea-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .ea-hero {
    padding: 90px 14px 60px;
  }

  .ea-hero__title {
    font-size: 1.4rem;
  }

  .ea-hero__subtitle {
    font-size: 0.9rem;
  }

  .ea-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .ea-about,
  .ea-whoweare,
  .ea-services,
  .ea-delivery,
  .ea-reliable,
  .ea-why,
  .ea-industries,
  .ea-faq,
  .ea-commitment,
  .ea-cta {
    padding: 50px 0;
  }

  .ea-about__heading,
  .ea-whoweare__heading {
    font-size: 1.4rem;
  }

  .ea-about__text,
  .ea-whoweare__text {
    font-size: 0.9rem;
  }

  .ea-stats,
  .ea-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ea-stat {
    padding: 20px 14px;
  }

  .ea-stat__number {
    font-size: 1.8rem;
  }

  .ea-stat__icon {
    font-size: 1.8rem;
  }

  .ea-stat__label {
    font-size: 0.75rem;
  }

  .ea-services__title {
    font-size: 1.3rem;
  }

  .ea-service-card {
    padding: 20px 16px;
  }

  .ea-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .ea-delivery__heading {
    font-size: 1.3rem;
  }

  .ea-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .ea-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .ea-reliable__heading {
    font-size: 1.3rem;
  }

  .ea-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .ea-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ea-industry {
    padding: 20px 14px;
  }

  .ea-cta__heading {
    font-size: 1.3rem;
  }

  .ea-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.ea-tech { padding: 80px 0; background: var(--ea-light-bg); }
.ea-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ea-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ea-text); margin-bottom: 20px; line-height: 1.25; }
.ea-tech__text { font-size: 1rem; color: var(--ea-gray); line-height: 1.75; margin-bottom: 14px; }
.ea-tech__content { }
.ea-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ea-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .ea-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ea-tech__heading { font-size: 1.6rem; }
  .ea-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .ea-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.ea-faq__subtext {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 32px;
}

.ea-faq__list {
  text-align: left;
}

.ea-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.ea-faq__item summary {
  list-style: none;
}

.ea-faq__item summary::-webkit-details-marker {
  display: none;
}

.ea-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.ea-faq__question:hover {
  color: var(--ea-accent);
}

.ea-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.ea-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.ea-faq__item[open] .ea-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.ea-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.ea-faq__answer p {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
  margin: 0;
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.ea-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.ea-faq__list { text-align: left; }
.ea-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ea-faq__item summary { list-style: none; }
.ea-faq__item summary::-webkit-details-marker { display: none; }
.ea-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.ea-faq__question:hover { color: var(--ea-accent); }
.ea-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ea-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.ea-faq__item[open] .ea-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ea-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ea-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }



/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --si-accent: #e8a025;
  --si-accent-hover: #d4911e;
  --si-dark: #0b1120;
  --si-dark-2: #101828;
  --si-dark-3: #1a2332;
  --si-white: #ffffff;
  --si-gray: #000000;
  --si-gray-light: #000000;
  --si-light-bg: #f8f9fb;
  --si-light-bg-2: #f1f3f7;
  --si-text: #000000;
  --si-text-light: #000000;
  --si-border: #e5e7eb;
  --si-radius: 12px;
  --si-radius-lg: 20px;
  --si-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --si-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --si-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes si-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes si-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes si-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes si-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes si-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes si-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.si-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: si-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.si-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: si-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.si-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: si-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.si-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: si-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.si-stagger > *:nth-child(1) { animation-delay: 0s; }
.si-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.si-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.si-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.si-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.si-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.si-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .si-animate,
  .si-animate--left,
  .si-animate--right,
  .si-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.si-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.si-text-accent {
  color: var(--si-accent);
}

/* ---------- Shared Checklist ---------- */
.si-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.si-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--si-text);
  line-height: 1.5;
}

.si-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--si-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.si-hero {
  background: var(--si-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.si-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.si-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.si-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--si-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: si-fadeUp 0.6s ease 0.1s both;
}

.si-hero__breadcrumb-active {
  color: var(--si-accent);
}

.si-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--si-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: si-fadeUp 0.7s ease 0.25s both;
}

.si-hero__title-accent {
  color: var(--si-accent);
  font-style: italic;
  display: inline-block;
}

.si-hero__subtitle {
  font-size: 1.3rem;
  color: var(--si-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: si-fadeUp 0.7s ease 0.45s both;
}

.si-hero__desc {
  font-size: 0.95rem;
  color: var(--si-gray-light);
  font-style: italic;
  animation: si-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.si-about {
  padding: 80px 0;
  background: var(--si-white);
}

.si-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.si-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--si-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.si-about__text {
  font-size: 1rem;
  color: var(--si-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.si-about__text:last-child {
  margin-bottom: 0;
}

.si-about__image img {
  width: 100%;
  border-radius: var(--si-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.si-stats,
.si-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.si-stat {
  background: var(--si-light-bg);
  border-radius: var(--si-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--si-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.si-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--si-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.si-stat:hover::before {
  transform: scaleX(1);
}

.si-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--si-accent);
}

.si-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.si-stat:nth-child(1) .si-stat__number { animation-delay: 0.2s; }
.si-stat:nth-child(2) .si-stat__number { animation-delay: 0.4s; }
.si-stat:nth-child(3) .si-stat__number { animation-delay: 0.6s; }
.si-stat:nth-child(4) .si-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.si-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--si-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.si-stat--dark {
  background: var(--si-white);
  border-color: var(--si-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.si-whoweare {
  padding: 80px 0;
  background: var(--si-light-bg);
}

.si-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.si-whoweare__image img {
  width: 100%;
  border-radius: var(--si-radius-lg);
  object-fit: cover;
}

.si-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--si-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.si-whoweare__text {
  font-size: 1rem;
  color: var(--si-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.si-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.si-services {
  padding: 80px 0;
  background: var(--si-white);
}

.si-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.si-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--si-text);
}

.si-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.si-service-card {
  background: var(--si-light-bg);
  border-radius: var(--si-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.si-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--si-accent);
  background: var(--si-white);
}

.si-service-card--wide {
  grid-column: 1 / -1;
}

.si-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--si-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.si-service-card:hover .si-service-card__badge {
  animation: si-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.si-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--si-text);
  margin-bottom: 10px;
}

.si-service-card__text {
  font-size: 0.9rem;
  color: var(--si-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.si-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.si-tag {
  display: inline-block;
  background: var(--si-white);
  color: var(--si-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--si-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.si-tag:hover {
  background: var(--si-accent);
  color: var(--si-white);
  border-color: var(--si-accent);
  transform: translateY(-2px);
}

/* Service List */
.si-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.si-service-card__list li {
  font-size: 0.85rem;
  color: var(--si-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.si-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--si-accent);
  font-weight: 700;
}

.si-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.si-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.si-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.si-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--si-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.si-delivery__text {
  font-size: 1rem;
  color: var(--si-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.si-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.si-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.si-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--si-white);
  border: 2px solid #e0e7ff;
  color: var(--si-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.si-step__circle::before {
  content: counter(si-step-counter);
  counter-increment: si-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.si-delivery__steps {
  counter-reset: si-step-counter;
}

.si-step:hover .si-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes si-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--si-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.si-delivery__steps > :nth-child(1) .si-step__circle  { animation: si-stepGlow 7s ease infinite 0s; }
.si-delivery__steps > :nth-child(3) .si-step__circle  { animation: si-stepGlow 7s ease infinite 1s; }
.si-delivery__steps > :nth-child(5) .si-step__circle  { animation: si-stepGlow 7s ease infinite 2s; }
.si-delivery__steps > :nth-child(7) .si-step__circle  { animation: si-stepGlow 7s ease infinite 3s; }
.si-delivery__steps > :nth-child(9) .si-step__circle  { animation: si-stepGlow 7s ease infinite 4s; }
.si-delivery__steps > :nth-child(11) .si-step__circle { animation: si-stepGlow 7s ease infinite 5s; }
.si-delivery__steps > :nth-child(13) .si-step__circle { animation: si-stepGlow 7s ease infinite 6s; }

.si-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: si-arrowPulse 2s ease infinite;
}

@keyframes si-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.si-why {
  padding: 80px 0;
  background: var(--si-white);
}

.si-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.si-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--si-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.si-why__text {
  font-size: 1rem;
  color: var(--si-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.si-why__image img {
  width: 100%;
  border-radius: var(--si-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.si-industries {
  padding: 80px 0;
  background: var(--si-light-bg);
  text-align: center;
}

.si-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--si-text);
  margin-bottom: 48px;
}

.si-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.si-industry {
  background: var(--si-white);
  border-radius: var(--si-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--si-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.si-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--si-accent);
}

.si-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.si-industry:hover .si-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.si-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--si-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.si-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.si-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--si-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.si-reliable__text {
  font-size: 1rem;
  color: var(--si-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.si-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.si-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--si-white);
  border: 1px solid var(--si-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.si-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--si-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.si-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--si-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.si-pillar:hover .si-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.si-pillar__label {
  font-size: 0.85rem;
  color: var(--si-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.si-faq {
  padding: 80px 0;
  background: var(--si-light-bg);
}

.si-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.si-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--si-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--si-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--si-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--si-text);
  border-bottom: 2.5px solid var(--si-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--si-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--si-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.si-commitment {
  padding: 60px 0;
  background: var(--si-white);
}

.si-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.si-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--si-text);
  margin-bottom: 16px;
}

.si-commitment__text {
  font-size: 1rem;
  color: var(--si-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.si-cta {
  padding: 80px 0;
  background: var(--si-dark);
}

.si-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.si-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--si-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.si-cta__text {
  font-size: 1rem;
  color: var(--si-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.si-cta__button {
  display: inline-block;
  background: var(--si-accent);
  color: var(--si-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: si-pulse 2.5s ease infinite;
}

.si-cta__button:hover {
  background: var(--si-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.si-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.si-services__subtitle {
  font-size: 1rem;
  color: var(--si-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .si-hero__title {
    font-size: 2.2rem;
  }

  .si-about__heading,
  .si-whoweare__heading {
    font-size: 1.8rem;
  }

  .si-services__title {
    font-size: 1.8rem;
  }

  .si-service-card__title {
    font-size: 1rem;
  }

  .si-delivery__heading {
    font-size: 1.8rem;
  }

  .si-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .si-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .si-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .si-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .si-hero {
    padding: 100px 16px 80px;
  }

  .si-hero__title {
    font-size: 1.7rem;
  }

  .si-hero__subtitle {
    font-size: 1rem;
  }

  .si-about__grid,
  .si-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .si-about__heading,
  .si-whoweare__heading {
    font-size: 1.6rem;
  }

  .si-stats,
  .si-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .si-about__content,
  .si-whoweare__content {
    order: 1;
  }

  .si-services__grid {
    grid-template-columns: 1fr;
  }

  .si-services__title {
    font-size: 1.5rem;
  }

  .si-service-card--wide {
    grid-column: span 1;
  }

  .si-delivery__heading {
    font-size: 1.5rem;
  }

  .si-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .si-step__arrow {
    display: none;
  }

  .si-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .si-reliable__heading {
    font-size: 1.5rem;
  }

  .si-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .si-why__heading {
    font-size: 1.5rem;
  }

  .si-industries__heading {
    font-size: 1.5rem;
  }

  .si-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .si-faq__heading {
    font-size: 1.3rem;
  }

  .si-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .si-animate,
  .si-animate--left,
  .si-animate--right,
  .si-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .si-hero {
    padding: 90px 14px 60px;
  }

  .si-hero__title {
    font-size: 1.4rem;
  }

  .si-hero__subtitle {
    font-size: 0.9rem;
  }

  .si-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .si-about,
  .si-whoweare,
  .si-services,
  .si-delivery,
  .si-reliable,
  .si-why,
  .si-industries,
  .si-faq,
  .si-commitment,
  .si-cta {
    padding: 50px 0;
  }

  .si-about__heading,
  .si-whoweare__heading {
    font-size: 1.4rem;
  }

  .si-about__text,
  .si-whoweare__text {
    font-size: 0.9rem;
  }

  .si-stats,
  .si-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .si-stat {
    padding: 20px 14px;
  }

  .si-stat__number {
    font-size: 1.8rem;
  }

  .si-stat__icon {
    font-size: 1.8rem;
  }

  .si-stat__label {
    font-size: 0.75rem;
  }

  .si-services__title {
    font-size: 1.3rem;
  }

  .si-service-card {
    padding: 20px 16px;
  }

  .si-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .si-delivery__heading {
    font-size: 1.3rem;
  }

  .si-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .si-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .si-reliable__heading {
    font-size: 1.3rem;
  }

  .si-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .si-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .si-industry {
    padding: 20px 14px;
  }

  .si-cta__heading {
    font-size: 1.3rem;
  }

  .si-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.si-tech { padding: 80px 0; background: var(--si-light-bg); }
.si-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.si-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--si-text); margin-bottom: 20px; line-height: 1.25; }
.si-tech__text { font-size: 1rem; color: var(--si-gray); line-height: 1.75; margin-bottom: 14px; }
.si-tech__content { }
.si-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.si-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .si-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .si-tech__heading { font-size: 1.6rem; }
  .si-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .si-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.si-faq__subtext {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 32px;
}

.si-faq__list {
  text-align: left;
}

.si-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.si-faq__item summary {
  list-style: none;
}

.si-faq__item summary::-webkit-details-marker {
  display: none;
}

.si-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.si-faq__question:hover {
  color: var(--si-accent);
}

.si-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.si-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.si-faq__item[open] .si-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.si-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.si-faq__answer p {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
  margin: 0;
}.ml-hero__desc { color: rgba(255,255,255,0.85) !important; }
.ml-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.sf-hero__desc { color: rgba(255,255,255,0.85) !important; }
.sf-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.si-hero__desc { color: rgba(255,255,255,0.85) !important; }
.si-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.am-hero__desc { color: rgba(255,255,255,0.85) !important; }
.am-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.cs-hero__desc { color: rgba(255,255,255,0.85) !important; }
.cs-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.ma-hero__desc { color: rgba(255,255,255,0.85) !important; }
.ma-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.cp-hero__desc { color: rgba(255,255,255,0.85) !important; }
.cp-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.vm-hero__desc { color: rgba(255,255,255,0.85) !important; }
.vm-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.co-hero__desc { color: rgba(255,255,255,0.85) !important; }
.co-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.sl-hero__desc { color: rgba(255,255,255,0.85) !important; }
.sl-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.sn-hero__desc { color: rgba(255,255,255,0.85) !important; }
.sn-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.sc-hero__desc { color: rgba(255,255,255,0.85) !important; }
.sc-hero__subtitle { color: rgba(255,255,255,0.9) !important; }
.ea-hero__desc { color: rgba(255,255,255,0.85) !important; }
.ea-hero__subtitle { color: rgba(255,255,255,0.9) !important; }


/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --wd-accent: #e8a025;
  --wd-accent-hover: #d4911e;
  --wd-dark: #0b1120;
  --wd-dark-2: #101828;
  --wd-dark-3: #1a2332;
  --wd-white: #ffffff;
  --wd-gray: #000000;
  --wd-gray-light: #000000;
  --wd-light-bg: #f8f9fb;
  --wd-light-bg-2: #f1f3f7;
  --wd-text: #000000;
  --wd-text-light: #000000;
  --wd-border: #e5e7eb;
  --wd-radius: 12px;
  --wd-radius-lg: 20px;
  --wd-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --wd-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --wd-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes wd-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes wd-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes wd-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes wd-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes wd-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes ea-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.wd-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: wd-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.wd-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: wd-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.wd-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: wd-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.wd-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: wd-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.wd-stagger > *:nth-child(1) { animation-delay: 0s; }
.wd-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.wd-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.wd-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.wd-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.wd-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.wd-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .wd-animate,
  .wd-animate--left,
  .wd-animate--right,
  .wd-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.wd-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.wd-text-accent {
  color: var(--wd-accent);
}

/* ---------- Shared Checklist ---------- */
.wd-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wd-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--wd-text);
  line-height: 1.5;
}

.wd-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wd-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.wd-hero {
  background: var(--wd-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.wd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.wd-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.wd-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--wd-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: wd-fadeUp 0.6s ease 0.1s both;
}

.wd-hero__breadcrumb-active {
  color: var(--wd-accent);
}

.wd-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--wd-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: wd-fadeUp 0.7s ease 0.25s both;
}

.wd-hero__title-accent {
  color: var(--wd-accent);
  font-style: italic;
  display: inline-block;
}

.wd-hero__subtitle {
  font-size: 1.3rem;
  color: var(--wd-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: wd-fadeUp 0.7s ease 0.45s both;
}

.wd-hero__desc {
  font-size: 0.95rem;
  color: var(--wd-gray-light);
  font-style: italic;
  animation: wd-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.wd-about {
  padding: 80px 0;
  background: var(--wd-white);
}

.wd-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.wd-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.wd-about__text {
  font-size: 1rem;
  color: var(--wd-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.wd-about__text:last-child {
  margin-bottom: 0;
}

.wd-about__image img {
  width: 100%;
  border-radius: var(--wd-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.wd-stats,
.wd-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.wd-stat {
  background: var(--wd-light-bg);
  border-radius: var(--wd-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--wd-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.wd-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--wd-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.wd-stat:hover::before {
  transform: scaleX(1);
}

.wd-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--wd-accent);
}

.wd-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.wd-stat:nth-child(1) .wd-stat__number { animation-delay: 0.2s; }
.wd-stat:nth-child(2) .wd-stat__number { animation-delay: 0.4s; }
.wd-stat:nth-child(3) .wd-stat__number { animation-delay: 0.6s; }
.wd-stat:nth-child(4) .wd-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.wd-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--wd-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.wd-stat--dark {
  background: var(--wd-white);
  border-color: var(--wd-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.wd-whoweare {
  padding: 80px 0;
  background: var(--wd-light-bg);
}

.wd-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.wd-whoweare__image img {
  width: 100%;
  border-radius: var(--wd-radius-lg);
  object-fit: cover;
}

.wd-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.wd-whoweare__text {
  font-size: 1rem;
  color: var(--wd-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.wd-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.wd-services {
  padding: 80px 0;
  background: var(--wd-white);
}

.wd-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.wd-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--wd-text);
}

.wd-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.wd-service-card {
  background: var(--wd-light-bg);
  border-radius: var(--wd-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.wd-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--wd-accent);
  background: var(--wd-white);
}

.wd-service-card--wide {
  grid-column: 1 / -1;
}

.wd-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--wd-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.wd-service-card:hover .wd-service-card__badge {
  animation: ea-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.wd-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--wd-text);
  margin-bottom: 10px;
}

.wd-service-card__text {
  font-size: 0.9rem;
  color: var(--wd-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.wd-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.wd-tag {
  display: inline-block;
  background: var(--wd-white);
  color: var(--wd-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--wd-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.wd-tag:hover {
  background: var(--wd-accent);
  color: var(--wd-white);
  border-color: var(--wd-accent);
  transform: translateY(-2px);
}

/* Service List */
.wd-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wd-service-card__list li {
  font-size: 0.85rem;
  color: var(--wd-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.wd-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--wd-accent);
  font-weight: 700;
}

.wd-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.wd-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.wd-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.wd-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.wd-delivery__text {
  font-size: 1rem;
  color: var(--wd-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.wd-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.wd-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.wd-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--wd-white);
  border: 2px solid #e0e7ff;
  color: var(--wd-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.wd-step__circle::before {
  content: counter(ea-step-counter);
  counter-increment: ea-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.wd-delivery__steps {
  counter-reset: ea-step-counter;
}

.wd-step:hover .wd-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes ea-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--wd-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.wd-delivery__steps > :nth-child(1) .wd-step__circle  { animation: ea-stepGlow 7s ease infinite 0s; }
.wd-delivery__steps > :nth-child(3) .wd-step__circle  { animation: ea-stepGlow 7s ease infinite 1s; }
.wd-delivery__steps > :nth-child(5) .wd-step__circle  { animation: ea-stepGlow 7s ease infinite 2s; }
.wd-delivery__steps > :nth-child(7) .wd-step__circle  { animation: ea-stepGlow 7s ease infinite 3s; }
.wd-delivery__steps > :nth-child(9) .wd-step__circle  { animation: ea-stepGlow 7s ease infinite 4s; }
.wd-delivery__steps > :nth-child(11) .wd-step__circle { animation: ea-stepGlow 7s ease infinite 5s; }
.wd-delivery__steps > :nth-child(13) .wd-step__circle { animation: ea-stepGlow 7s ease infinite 6s; }

.wd-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: ea-arrowPulse 2s ease infinite;
}

@keyframes ea-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.wd-why {
  padding: 80px 0;
  background: var(--wd-white);
}

.wd-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.wd-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.wd-why__text {
  font-size: 1rem;
  color: var(--wd-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.wd-why__image img {
  width: 100%;
  border-radius: var(--wd-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.wd-industries {
  padding: 80px 0;
  background: var(--wd-light-bg);
  text-align: center;
}

.wd-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 48px;
}

.wd-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.wd-industry {
  background: var(--wd-white);
  border-radius: var(--wd-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--wd-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.wd-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--wd-accent);
}

.wd-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.wd-industry:hover .wd-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.wd-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wd-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.wd-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.wd-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.wd-reliable__text {
  font-size: 1rem;
  color: var(--wd-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.wd-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.wd-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wd-white);
  border: 1px solid var(--wd-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.wd-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--wd-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.wd-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--wd-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.wd-pillar:hover .wd-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.wd-pillar__label {
  font-size: 0.85rem;
  color: var(--wd-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.wd-faq {
  padding: 80px 0;
  background: var(--wd-light-bg);
}

.wd-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.wd-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--wd-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wd-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--wd-text);
  border-bottom: 2.5px solid var(--wd-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--wd-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--wd-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.wd-commitment {
  padding: 60px 0;
  background: var(--wd-white);
}

.wd-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.wd-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 16px;
}

.wd-commitment__text {
  font-size: 1rem;
  color: var(--wd-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.wd-cta {
  padding: 80px 0;
  background: var(--wd-dark);
}

.wd-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.wd-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--wd-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.wd-cta__text {
  font-size: 1rem;
  color: var(--wd-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.wd-cta__button {
  display: inline-block;
  background: var(--wd-accent);
  color: var(--wd-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: wd-pulse 2.5s ease infinite;
}

.wd-cta__button:hover {
  background: var(--wd-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.wd-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.wd-services__subtitle {
  font-size: 1rem;
  color: var(--wd-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .wd-hero__title {
    font-size: 2.2rem;
  }

  .wd-about__heading,
  .wd-whoweare__heading {
    font-size: 1.8rem;
  }

  .wd-services__title {
    font-size: 1.8rem;
  }

  .wd-service-card__title {
    font-size: 1rem;
  }

  .wd-delivery__heading {
    font-size: 1.8rem;
  }

  .wd-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .wd-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .wd-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .wd-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .wd-hero {
    padding: 100px 16px 80px;
  }

  .wd-hero__title {
    font-size: 1.7rem;
  }

  .wd-hero__subtitle {
    font-size: 1rem;
  }

  .wd-about__grid,
  .wd-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .wd-about__heading,
  .wd-whoweare__heading {
    font-size: 1.6rem;
  }

  .wd-stats,
  .wd-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .wd-about__content,
  .wd-whoweare__content {
    order: 1;
  }

  .wd-services__grid {
    grid-template-columns: 1fr;
  }

  .wd-services__title {
    font-size: 1.5rem;
  }

  .wd-service-card--wide {
    grid-column: span 1;
  }

  .wd-delivery__heading {
    font-size: 1.5rem;
  }

  .wd-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .wd-step__arrow {
    display: none;
  }

  .wd-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .wd-reliable__heading {
    font-size: 1.5rem;
  }

  .wd-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .wd-why__heading {
    font-size: 1.5rem;
  }

  .wd-industries__heading {
    font-size: 1.5rem;
  }

  .wd-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .wd-faq__heading {
    font-size: 1.3rem;
  }

  .wd-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .wd-animate,
  .wd-animate--left,
  .wd-animate--right,
  .wd-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .wd-hero {
    padding: 90px 14px 60px;
  }

  .wd-hero__title {
    font-size: 1.4rem;
  }

  .wd-hero__subtitle {
    font-size: 0.9rem;
  }

  .wd-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .wd-about,
  .wd-whoweare,
  .wd-services,
  .wd-delivery,
  .wd-reliable,
  .wd-why,
  .wd-industries,
  .wd-faq,
  .wd-commitment,
  .wd-cta {
    padding: 50px 0;
  }

  .wd-about__heading,
  .wd-whoweare__heading {
    font-size: 1.4rem;
  }

  .wd-about__text,
  .wd-whoweare__text {
    font-size: 0.9rem;
  }

  .wd-stats,
  .wd-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .wd-stat {
    padding: 20px 14px;
  }

  .wd-stat__number {
    font-size: 1.8rem;
  }

  .wd-stat__icon {
    font-size: 1.8rem;
  }

  .wd-stat__label {
    font-size: 0.75rem;
  }

  .wd-services__title {
    font-size: 1.3rem;
  }

  .wd-service-card {
    padding: 20px 16px;
  }

  .wd-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .wd-delivery__heading {
    font-size: 1.3rem;
  }

  .wd-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .wd-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .wd-reliable__heading {
    font-size: 1.3rem;
  }

  .wd-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .wd-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .wd-industry {
    padding: 20px 14px;
  }

  .wd-cta__heading {
    font-size: 1.3rem;
  }

  .wd-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.wd-tech { padding: 80px 0; background: var(--wd-light-bg); }
.wd-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.wd-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--wd-text); margin-bottom: 20px; line-height: 1.25; }
.wd-tech__text { font-size: 1rem; color: var(--wd-gray); line-height: 1.75; margin-bottom: 14px; }
.wd-tech__content { }
.wd-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wd-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .wd-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .wd-tech__heading { font-size: 1.6rem; }
  .wd-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .wd-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.wd-faq__subtext {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 32px;
}

.wd-faq__list {
  text-align: left;
}

.wd-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.wd-faq__item summary {
  list-style: none;
}

.wd-faq__item summary::-webkit-details-marker {
  display: none;
}

.wd-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.wd-faq__question:hover {
  color: var(--wd-accent);
}

.wd-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.wd-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.wd-faq__item[open] .wd-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.wd-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.wd-faq__answer p {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
  margin: 0;
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.wd-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.wd-faq__list { text-align: left; }
.wd-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.wd-faq__item summary { list-style: none; }
.wd-faq__item summary::-webkit-details-marker { display: none; }
.wd-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.wd-faq__question:hover { color: var(--wd-accent); }
.wd-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.wd-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.wd-faq__item[open] .wd-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.wd-faq__answer { padding: 0 0 18px; overflow: hidden; }
.wd-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }



/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --io-accent: #e8a025;
  --io-accent-hover: #d4911e;
  --io-dark: #0b1120;
  --io-dark-2: #101828;
  --io-dark-3: #1a2332;
  --io-white: #ffffff;
  --io-gray: #000000;
  --io-gray-light: #000000;
  --io-light-bg: #f8f9fb;
  --io-light-bg-2: #f1f3f7;
  --io-text: #000000;
  --io-text-light: #000000;
  --io-border: #e5e7eb;
  --io-radius: 12px;
  --io-radius-lg: 20px;
  --io-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --io-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --io-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes io-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes io-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes io-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes io-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes io-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes ea-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.io-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: io-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.io-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: io-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.io-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: io-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.io-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: io-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.io-stagger > *:nth-child(1) { animation-delay: 0s; }
.io-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.io-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.io-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.io-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.io-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.io-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .io-animate,
  .io-animate--left,
  .io-animate--right,
  .io-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.io-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.io-text-accent {
  color: var(--io-accent);
}

/* ---------- Shared Checklist ---------- */
.io-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.io-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--io-text);
  line-height: 1.5;
}

.io-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--io-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.io-hero {
  background: var(--io-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.io-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.io-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.io-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--io-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: io-fadeUp 0.6s ease 0.1s both;
}

.io-hero__breadcrumb-active {
  color: var(--io-accent);
}

.io-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--io-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: io-fadeUp 0.7s ease 0.25s both;
}

.io-hero__title-accent {
  color: var(--io-accent);
  font-style: italic;
  display: inline-block;
}

.io-hero__subtitle {
  font-size: 1.3rem;
  color: var(--io-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: io-fadeUp 0.7s ease 0.45s both;
}

.io-hero__desc {
  font-size: 0.95rem;
  color: var(--io-gray-light);
  font-style: italic;
  animation: io-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.io-about {
  padding: 80px 0;
  background: var(--io-white);
}

.io-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.io-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--io-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.io-about__text {
  font-size: 1rem;
  color: var(--io-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.io-about__text:last-child {
  margin-bottom: 0;
}

.io-about__image img {
  width: 100%;
  border-radius: var(--io-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.io-stats,
.io-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.io-stat {
  background: var(--io-light-bg);
  border-radius: var(--io-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--io-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.io-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--io-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.io-stat:hover::before {
  transform: scaleX(1);
}

.io-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--io-accent);
}

.io-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.io-stat:nth-child(1) .io-stat__number { animation-delay: 0.2s; }
.io-stat:nth-child(2) .io-stat__number { animation-delay: 0.4s; }
.io-stat:nth-child(3) .io-stat__number { animation-delay: 0.6s; }
.io-stat:nth-child(4) .io-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.io-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--io-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.io-stat--dark {
  background: var(--io-white);
  border-color: var(--io-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.io-whoweare {
  padding: 80px 0;
  background: var(--io-light-bg);
}

.io-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.io-whoweare__image img {
  width: 100%;
  border-radius: var(--io-radius-lg);
  object-fit: cover;
}

.io-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--io-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.io-whoweare__text {
  font-size: 1rem;
  color: var(--io-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.io-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.io-services {
  padding: 80px 0;
  background: var(--io-white);
}

.io-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.io-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--io-text);
}

.io-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.io-service-card {
  background: var(--io-light-bg);
  border-radius: var(--io-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.io-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--io-accent);
  background: var(--io-white);
}

.io-service-card--wide {
  grid-column: 1 / -1;
}

.io-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--io-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.io-service-card:hover .io-service-card__badge {
  animation: ea-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.io-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--io-text);
  margin-bottom: 10px;
}

.io-service-card__text {
  font-size: 0.9rem;
  color: var(--io-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.io-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.io-tag {
  display: inline-block;
  background: var(--io-white);
  color: var(--io-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--io-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.io-tag:hover {
  background: var(--io-accent);
  color: var(--io-white);
  border-color: var(--io-accent);
  transform: translateY(-2px);
}

/* Service List */
.io-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.io-service-card__list li {
  font-size: 0.85rem;
  color: var(--io-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.io-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--io-accent);
  font-weight: 700;
}

.io-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.io-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.io-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.io-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--io-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.io-delivery__text {
  font-size: 1rem;
  color: var(--io-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.io-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.io-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.io-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--io-white);
  border: 2px solid #e0e7ff;
  color: var(--io-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.io-step__circle::before {
  content: counter(ea-step-counter);
  counter-increment: ea-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.io-delivery__steps {
  counter-reset: ea-step-counter;
}

.io-step:hover .io-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes ea-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--io-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.io-delivery__steps > :nth-child(1) .io-step__circle  { animation: ea-stepGlow 7s ease infinite 0s; }
.io-delivery__steps > :nth-child(3) .io-step__circle  { animation: ea-stepGlow 7s ease infinite 1s; }
.io-delivery__steps > :nth-child(5) .io-step__circle  { animation: ea-stepGlow 7s ease infinite 2s; }
.io-delivery__steps > :nth-child(7) .io-step__circle  { animation: ea-stepGlow 7s ease infinite 3s; }
.io-delivery__steps > :nth-child(9) .io-step__circle  { animation: ea-stepGlow 7s ease infinite 4s; }
.io-delivery__steps > :nth-child(11) .io-step__circle { animation: ea-stepGlow 7s ease infinite 5s; }
.io-delivery__steps > :nth-child(13) .io-step__circle { animation: ea-stepGlow 7s ease infinite 6s; }

.io-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: ea-arrowPulse 2s ease infinite;
}

@keyframes ea-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.io-why {
  padding: 80px 0;
  background: var(--io-white);
}

.io-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.io-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--io-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.io-why__text {
  font-size: 1rem;
  color: var(--io-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.io-why__image img {
  width: 100%;
  border-radius: var(--io-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.io-industries {
  padding: 80px 0;
  background: var(--io-light-bg);
  text-align: center;
}

.io-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--io-text);
  margin-bottom: 48px;
}

.io-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.io-industry {
  background: var(--io-white);
  border-radius: var(--io-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--io-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.io-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--io-accent);
}

.io-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.io-industry:hover .io-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.io-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--io-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.io-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.io-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--io-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.io-reliable__text {
  font-size: 1rem;
  color: var(--io-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.io-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.io-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--io-white);
  border: 1px solid var(--io-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.io-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--io-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.io-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--io-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.io-pillar:hover .io-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.io-pillar__label {
  font-size: 0.85rem;
  color: var(--io-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.io-faq {
  padding: 80px 0;
  background: var(--io-light-bg);
}

.io-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.io-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--io-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--io-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--io-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--io-text);
  border-bottom: 2.5px solid var(--io-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--io-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--io-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.io-commitment {
  padding: 60px 0;
  background: var(--io-white);
}

.io-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.io-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--io-text);
  margin-bottom: 16px;
}

.io-commitment__text {
  font-size: 1rem;
  color: var(--io-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.io-cta {
  padding: 80px 0;
  background: var(--io-dark);
}

.io-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.io-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--io-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.io-cta__text {
  font-size: 1rem;
  color: var(--io-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.io-cta__button {
  display: inline-block;
  background: var(--io-accent);
  color: var(--io-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: io-pulse 2.5s ease infinite;
}

.io-cta__button:hover {
  background: var(--io-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.io-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.io-services__subtitle {
  font-size: 1rem;
  color: var(--io-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .io-hero__title {
    font-size: 2.2rem;
  }

  .io-about__heading,
  .io-whoweare__heading {
    font-size: 1.8rem;
  }

  .io-services__title {
    font-size: 1.8rem;
  }

  .io-service-card__title {
    font-size: 1rem;
  }

  .io-delivery__heading {
    font-size: 1.8rem;
  }

  .io-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .io-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .io-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .io-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .io-hero {
    padding: 100px 16px 80px;
  }

  .io-hero__title {
    font-size: 1.7rem;
  }

  .io-hero__subtitle {
    font-size: 1rem;
  }

  .io-about__grid,
  .io-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .io-about__heading,
  .io-whoweare__heading {
    font-size: 1.6rem;
  }

  .io-stats,
  .io-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .io-about__content,
  .io-whoweare__content {
    order: 1;
  }

  .io-services__grid {
    grid-template-columns: 1fr;
  }

  .io-services__title {
    font-size: 1.5rem;
  }

  .io-service-card--wide {
    grid-column: span 1;
  }

  .io-delivery__heading {
    font-size: 1.5rem;
  }

  .io-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .io-step__arrow {
    display: none;
  }

  .io-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .io-reliable__heading {
    font-size: 1.5rem;
  }

  .io-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .io-why__heading {
    font-size: 1.5rem;
  }

  .io-industries__heading {
    font-size: 1.5rem;
  }

  .io-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .io-faq__heading {
    font-size: 1.3rem;
  }

  .io-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .io-animate,
  .io-animate--left,
  .io-animate--right,
  .io-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .io-hero {
    padding: 90px 14px 60px;
  }

  .io-hero__title {
    font-size: 1.4rem;
  }

  .io-hero__subtitle {
    font-size: 0.9rem;
  }

  .io-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .io-about,
  .io-whoweare,
  .io-services,
  .io-delivery,
  .io-reliable,
  .io-why,
  .io-industries,
  .io-faq,
  .io-commitment,
  .io-cta {
    padding: 50px 0;
  }

  .io-about__heading,
  .io-whoweare__heading {
    font-size: 1.4rem;
  }

  .io-about__text,
  .io-whoweare__text {
    font-size: 0.9rem;
  }

  .io-stats,
  .io-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .io-stat {
    padding: 20px 14px;
  }

  .io-stat__number {
    font-size: 1.8rem;
  }

  .io-stat__icon {
    font-size: 1.8rem;
  }

  .io-stat__label {
    font-size: 0.75rem;
  }

  .io-services__title {
    font-size: 1.3rem;
  }

  .io-service-card {
    padding: 20px 16px;
  }

  .io-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .io-delivery__heading {
    font-size: 1.3rem;
  }

  .io-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .io-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .io-reliable__heading {
    font-size: 1.3rem;
  }

  .io-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .io-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .io-industry {
    padding: 20px 14px;
  }

  .io-cta__heading {
    font-size: 1.3rem;
  }

  .io-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.io-tech { padding: 80px 0; background: var(--io-light-bg); }
.io-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.io-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--io-text); margin-bottom: 20px; line-height: 1.25; }
.io-tech__text { font-size: 1rem; color: var(--io-gray); line-height: 1.75; margin-bottom: 14px; }
.io-tech__content { }
.io-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.io-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .io-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .io-tech__heading { font-size: 1.6rem; }
  .io-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .io-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.io-faq__subtext {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 32px;
}

.io-faq__list {
  text-align: left;
}

.io-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.io-faq__item summary {
  list-style: none;
}

.io-faq__item summary::-webkit-details-marker {
  display: none;
}

.io-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.io-faq__question:hover {
  color: var(--io-accent);
}

.io-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.io-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.io-faq__item[open] .io-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.io-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.io-faq__answer p {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
  margin: 0;
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.io-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.io-faq__list { text-align: left; }
.io-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.io-faq__item summary { list-style: none; }
.io-faq__item summary::-webkit-details-marker { display: none; }
.io-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.io-faq__question:hover { color: var(--io-accent); }
.io-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.io-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.io-faq__item[open] .io-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.io-faq__answer { padding: 0 0 18px; overflow: hidden; }
.io-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }



/* ============================================================
   AI & MACHINE LEARNING PAGE — ai-machine-learning.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --sd-accent: #e8a025;
  --sd-accent-hover: #d4911e;
  --sd-dark: #0b1120;
  --sd-dark-2: #101828;
  --sd-dark-3: #1a2332;
  --sd-white: #ffffff;
  --sd-gray: #000000;
  --sd-gray-light: #000000;
  --sd-light-bg: #f8f9fb;
  --sd-light-bg-2: #f1f3f7;
  --sd-text: #000000;
  --sd-text-light: #000000;
  --sd-border: #e5e7eb;
  --sd-radius: 12px;
  --sd-radius-lg: 20px;
  --sd-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --sd-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --sd-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes sd-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes sd-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes sd-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes sd-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes sd-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes ea-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.sd-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: sd-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sd-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: sd-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sd-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: sd-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.sd-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: sd-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.sd-stagger > *:nth-child(1) { animation-delay: 0s; }
.sd-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.sd-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.sd-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.sd-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.sd-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.sd-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .sd-animate,
  .sd-animate--left,
  .sd-animate--right,
  .sd-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.sd-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.sd-text-accent {
  color: var(--sd-accent);
}

/* ---------- Shared Checklist ---------- */
.sd-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sd-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--sd-text);
  line-height: 1.5;
}

.sd-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sd-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.sd-hero {
  background: var(--sd-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.sd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.sd-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.sd-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--sd-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: sd-fadeUp 0.6s ease 0.1s both;
}

.sd-hero__breadcrumb-active {
  color: var(--sd-accent);
}

.sd-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--sd-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: sd-fadeUp 0.7s ease 0.25s both;
}

.sd-hero__title-accent {
  color: var(--sd-accent);
  font-style: italic;
  display: inline-block;
}

.sd-hero__subtitle {
  font-size: 1.3rem;
  color: var(--sd-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: sd-fadeUp 0.7s ease 0.45s both;
}

.sd-hero__desc {
  font-size: 0.95rem;
  color: var(--sd-gray-light);
  font-style: italic;
  animation: sd-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.sd-about {
  padding: 80px 0;
  background: var(--sd-white);
}

.sd-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sd-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sd-about__text {
  font-size: 1rem;
  color: var(--sd-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sd-about__text:last-child {
  margin-bottom: 0;
}

.sd-about__image img {
  width: 100%;
  border-radius: var(--sd-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.sd-stats,
.sd-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sd-stat {
  background: var(--sd-light-bg);
  border-radius: var(--sd-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--sd-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.sd-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sd-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.sd-stat:hover::before {
  transform: scaleX(1);
}

.sd-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--sd-accent);
}

.sd-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.sd-stat:nth-child(1) .sd-stat__number { animation-delay: 0.2s; }
.sd-stat:nth-child(2) .sd-stat__number { animation-delay: 0.4s; }
.sd-stat:nth-child(3) .sd-stat__number { animation-delay: 0.6s; }
.sd-stat:nth-child(4) .sd-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sd-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--sd-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.sd-stat--dark {
  background: var(--sd-white);
  border-color: var(--sd-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.sd-whoweare {
  padding: 80px 0;
  background: var(--sd-light-bg);
}

.sd-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sd-whoweare__image img {
  width: 100%;
  border-radius: var(--sd-radius-lg);
  object-fit: cover;
}

.sd-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.sd-whoweare__text {
  font-size: 1rem;
  color: var(--sd-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.sd-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.sd-services {
  padding: 80px 0;
  background: var(--sd-white);
}

.sd-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.sd-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sd-text);
}

.sd-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.sd-service-card {
  background: var(--sd-light-bg);
  border-radius: var(--sd-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.sd-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--sd-accent);
  background: var(--sd-white);
}

.sd-service-card--wide {
  grid-column: 1 / -1;
}

.sd-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--sd-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.sd-service-card:hover .sd-service-card__badge {
  animation: ea-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.sd-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sd-text);
  margin-bottom: 10px;
}

.sd-service-card__text {
  font-size: 0.9rem;
  color: var(--sd-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.sd-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.sd-tag {
  display: inline-block;
  background: var(--sd-white);
  color: var(--sd-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--sd-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.sd-tag:hover {
  background: var(--sd-accent);
  color: var(--sd-white);
  border-color: var(--sd-accent);
  transform: translateY(-2px);
}

/* Service List */
.sd-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sd-service-card__list li {
  font-size: 0.85rem;
  color: var(--sd-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.sd-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--sd-accent);
  font-weight: 700;
}

.sd-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.sd-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sd-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.sd-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.sd-delivery__text {
  font-size: 1rem;
  color: var(--sd-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.sd-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.sd-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.sd-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--sd-white);
  border: 2px solid #e0e7ff;
  color: var(--sd-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.sd-step__circle::before {
  content: counter(ea-step-counter);
  counter-increment: ea-step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.sd-delivery__steps {
  counter-reset: ea-step-counter;
}

.sd-step:hover .sd-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes ea-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--sd-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.sd-delivery__steps > :nth-child(1) .sd-step__circle  { animation: ea-stepGlow 7s ease infinite 0s; }
.sd-delivery__steps > :nth-child(3) .sd-step__circle  { animation: ea-stepGlow 7s ease infinite 1s; }
.sd-delivery__steps > :nth-child(5) .sd-step__circle  { animation: ea-stepGlow 7s ease infinite 2s; }
.sd-delivery__steps > :nth-child(7) .sd-step__circle  { animation: ea-stepGlow 7s ease infinite 3s; }
.sd-delivery__steps > :nth-child(9) .sd-step__circle  { animation: ea-stepGlow 7s ease infinite 4s; }
.sd-delivery__steps > :nth-child(11) .sd-step__circle { animation: ea-stepGlow 7s ease infinite 5s; }
.sd-delivery__steps > :nth-child(13) .sd-step__circle { animation: ea-stepGlow 7s ease infinite 6s; }

.sd-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: ea-arrowPulse 2s ease infinite;
}

@keyframes ea-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.sd-why {
  padding: 80px 0;
  background: var(--sd-white);
}

.sd-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.sd-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sd-why__text {
  font-size: 1rem;
  color: var(--sd-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.sd-why__image img {
  width: 100%;
  border-radius: var(--sd-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.sd-industries {
  padding: 80px 0;
  background: var(--sd-light-bg);
  text-align: center;
}

.sd-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 48px;
}

.sd-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sd-industry {
  background: var(--sd-white);
  border-radius: var(--sd-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--sd-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.sd-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--sd-accent);
}

.sd-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.sd-industry:hover .sd-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.sd-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sd-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.sd-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.sd-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.sd-reliable__text {
  font-size: 1rem;
  color: var(--sd-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.sd-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.sd-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sd-white);
  border: 1px solid var(--sd-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.sd-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--sd-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.sd-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--sd-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.sd-pillar:hover .sd-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.sd-pillar__label {
  font-size: 0.85rem;
  color: var(--sd-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.sd-faq {
  padding: 80px 0;
  background: var(--sd-light-bg);
}

.sd-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.sd-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--sd-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sd-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--sd-text);
  border-bottom: 2.5px solid var(--sd-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--sd-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--sd-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.sd-commitment {
  padding: 60px 0;
  background: var(--sd-white);
}

.sd-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.sd-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 16px;
}

.sd-commitment__text {
  font-size: 1rem;
  color: var(--sd-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.sd-cta {
  padding: 80px 0;
  background: var(--sd-dark);
}

.sd-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.sd-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sd-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.sd-cta__text {
  font-size: 1rem;
  color: var(--sd-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.sd-cta__button {
  display: inline-block;
  background: var(--sd-accent);
  color: var(--sd-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: sd-pulse 2.5s ease infinite;
}

.sd-cta__button:hover {
  background: var(--sd-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.sd-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.sd-services__subtitle {
  font-size: 1rem;
  color: var(--sd-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .sd-hero__title {
    font-size: 2.2rem;
  }

  .sd-about__heading,
  .sd-whoweare__heading {
    font-size: 1.8rem;
  }

  .sd-services__title {
    font-size: 1.8rem;
  }

  .sd-service-card__title {
    font-size: 1rem;
  }

  .sd-delivery__heading {
    font-size: 1.8rem;
  }

  .sd-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .sd-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .sd-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .sd-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .sd-hero {
    padding: 100px 16px 80px;
  }

  .sd-hero__title {
    font-size: 1.7rem;
  }

  .sd-hero__subtitle {
    font-size: 1rem;
  }

  .sd-about__grid,
  .sd-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sd-about__heading,
  .sd-whoweare__heading {
    font-size: 1.6rem;
  }

  .sd-stats,
  .sd-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .sd-about__content,
  .sd-whoweare__content {
    order: 1;
  }

  .sd-services__grid {
    grid-template-columns: 1fr;
  }

  .sd-services__title {
    font-size: 1.5rem;
  }

  .sd-service-card--wide {
    grid-column: span 1;
  }

  .sd-delivery__heading {
    font-size: 1.5rem;
  }

  .sd-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .sd-step__arrow {
    display: none;
  }

  .sd-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .sd-reliable__heading {
    font-size: 1.5rem;
  }

  .sd-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .sd-why__heading {
    font-size: 1.5rem;
  }

  .sd-industries__heading {
    font-size: 1.5rem;
  }

  .sd-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sd-faq__heading {
    font-size: 1.3rem;
  }

  .sd-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .sd-animate,
  .sd-animate--left,
  .sd-animate--right,
  .sd-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .sd-hero {
    padding: 90px 14px 60px;
  }

  .sd-hero__title {
    font-size: 1.4rem;
  }

  .sd-hero__subtitle {
    font-size: 0.9rem;
  }

  .sd-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .sd-about,
  .sd-whoweare,
  .sd-services,
  .sd-delivery,
  .sd-reliable,
  .sd-why,
  .sd-industries,
  .sd-faq,
  .sd-commitment,
  .sd-cta {
    padding: 50px 0;
  }

  .sd-about__heading,
  .sd-whoweare__heading {
    font-size: 1.4rem;
  }

  .sd-about__text,
  .sd-whoweare__text {
    font-size: 0.9rem;
  }

  .sd-stats,
  .sd-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sd-stat {
    padding: 20px 14px;
  }

  .sd-stat__number {
    font-size: 1.8rem;
  }

  .sd-stat__icon {
    font-size: 1.8rem;
  }

  .sd-stat__label {
    font-size: 0.75rem;
  }

  .sd-services__title {
    font-size: 1.3rem;
  }

  .sd-service-card {
    padding: 20px 16px;
  }

  .sd-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .sd-delivery__heading {
    font-size: 1.3rem;
  }

  .sd-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .sd-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .sd-reliable__heading {
    font-size: 1.3rem;
  }

  .sd-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .sd-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sd-industry {
    padding: 20px 14px;
  }

  .sd-cta__heading {
    font-size: 1.3rem;
  }

  .sd-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ml-tech)
   ============================================================ */
.sd-tech { padding: 80px 0; background: var(--sd-light-bg); }
.sd-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sd-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--sd-text); margin-bottom: 20px; line-height: 1.25; }
.sd-tech__text { font-size: 1rem; color: var(--sd-gray); line-height: 1.75; margin-bottom: 14px; }
.sd-tech__content { }
.sd-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sd-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .sd-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .sd-tech__heading { font-size: 1.6rem; }
  .sd-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .sd-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.sd-faq__subtext {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 32px;
}

.sd-faq__list {
  text-align: left;
}

.sd-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.sd-faq__item summary {
  list-style: none;
}

.sd-faq__item summary::-webkit-details-marker {
  display: none;
}

.sd-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.sd-faq__question:hover {
  color: var(--sd-accent);
}

.sd-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.sd-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.sd-faq__item[open] .sd-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.sd-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.sd-faq__answer p {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
  margin: 0;
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.sd-faq__subtext { font-size: 0.95rem; color: #000000; margin-bottom: 32px; }
.sd-faq__list { text-align: left; }
.sd-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.sd-faq__item summary { list-style: none; }
.sd-faq__item summary::-webkit-details-marker { display: none; }
.sd-faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000; text-align: left; gap: 16px; transition: color 0.3s ease; }
.sd-faq__question:hover { color: var(--sd-accent); }
.sd-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.sd-faq__chevron::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease; }
.sd-faq__item[open] .sd-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.sd-faq__answer { padding: 0 0 18px; overflow: hidden; }
.sd-faq__answer p { font-size: 0.9rem; color: #000000; line-height: 1.7; margin: 0; }
/* HERO DESC & SUBTITLE — WHITE TEXT FIX */
.ml-hero__desc, .ml-hero__subtitle,
.sf-hero__desc, .sf-hero__subtitle,
.si-hero__desc, .si-hero__subtitle,
.am-hero__desc, .am-hero__subtitle,
.cs-hero__desc, .cs-hero__subtitle,
.ma-hero__desc, .ma-hero__subtitle,
.cp-hero__desc, .cp-hero__subtitle,
.vm-hero__desc, .vm-hero__subtitle,
.co-hero__desc, .co-hero__subtitle,
.sl-hero__desc, .sl-hero__subtitle,
.sn-hero__desc, .sn-hero__subtitle,
.sc-hero__desc, .sc-hero__subtitle,
.ea-hero__desc, .ea-hero__subtitle,
.wd-hero__desc, .wd-hero__subtitle,
.sd-hero__desc, .sd-hero__subtitle,
.io-hero__desc, .io-hero__subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   BREADCRUMB — FORCE WHITE/GOLD ON DARK HERO BACKGROUNDS
   ============================================================ */
nav[aria-label="Breadcrumb"] ol {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
}
nav[aria-label="Breadcrumb"] ol li {
  display: flex !important;
  align-items: center !important;
}
nav[aria-label="Breadcrumb"] ol li a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
nav[aria-label="Breadcrumb"] ol li a:hover {
  color: #e8a025 !important;
  text-decoration: underline !important;
}
nav[aria-label="Breadcrumb"] ol li span {
  color: #e8a025 !important;
  font-weight: 700 !important;
}

/* BREADCRUMB NUCLEAR FIX */
section[class*="-hero"] nav[aria-label="Breadcrumb"] ol {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}
section[class*="-hero"] nav[aria-label="Breadcrumb"] a,
section[class*="-hero"] nav[aria-label="Breadcrumb"] a:link,
section[class*="-hero"] nav[aria-label="Breadcrumb"] a:visited,
section[class*="-hero"] nav[aria-label="Breadcrumb"] a:active {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
section[class*="-hero"] nav[aria-label="Breadcrumb"] a:hover {
  color: #e8a025 !important;
  text-decoration: underline !important;
}
section[class*="-hero"] nav[aria-label="Breadcrumb"] li > span {
  color: #e8a025 !important;
  font-weight: 700 !important;
}

/* CTA SECTION — WHITE TEXT ON DARK BG */
.co-cta__heading, .co-cta__text,
.cp-cta__heading, .cp-cta__text,
.am-cta__heading, .am-cta__text,
.ml-cta__heading, .ml-cta__text,
.vm-cta__heading, .vm-cta__text,
.cs-cta__heading, .cs-cta__text,
.ma-cta__heading, .ma-cta__text,
.sf-cta__heading, .sf-cta__text,
.sl-cta__heading, .sl-cta__text,
.sn-cta__heading, .sn-cta__text,
.sc-cta__heading, .sc-cta__text,
.ea-cta__heading, .ea-cta__text,
.si-cta__heading, .si-cta__text,
.wd-cta__heading, .wd-cta__text,
.sd-cta__heading, .sd-cta__text,
.io-cta__heading, .io-cta__text {
  color: #ffffff \!important;
}

section[class*="-cta"] h2,
section[class*="-cta"] p {
  color: #ffffff \!important;
}


.co-delivery__text, .co-cta__text, .co-reliable__text,
.cp-delivery__text, .cp-cta__text, .cp-reliable__text,
.am-delivery__text, .am-cta__text, .am-reliable__text,
.ml-delivery__text, .ml-cta__text, .ml-reliable__text,
.vm-delivery__text, .vm-cta__text, .vm-reliable__text,
.cs-delivery__text, .cs-cta__text, .cs-reliable__text,
.ma-delivery__text, .ma-cta__text, .ma-reliable__text,
.sf-delivery__text, .sf-cta__text, .sf-reliable__text,
.sl-delivery__text, .sl-cta__text, .sl-reliable__text,
.sn-delivery__text, .sn-cta__text, .sn-reliable__text,
.sc-delivery__text, .sc-cta__text, .sc-reliable__text,
.ea-delivery__text, .ea-cta__text, .ea-reliable__text,
.si-delivery__text, .si-cta__text, .si-reliable__text,
.wd-delivery__text, .wd-cta__text, .wd-reliable__text,
.sd-delivery__text, .sd-cta__text, .sd-reliable__text,
.io-delivery__text, .io-cta__text, .io-reliable__text {
  color: #e5e5e5;
}

.co-hero h1, .co-hero p, .co-hero a,
.cp-hero h1, .cp-hero p, .cp-hero a,
.am-hero h1, .am-hero p, .am-hero a,
.ml-hero h1, .ml-hero p, .ml-hero a,
.vm-hero h1, .vm-hero p, .vm-hero a,
.cs-hero h1, .cs-hero p, .cs-hero a,
.ma-hero h1, .ma-hero p, .ma-hero a,
.sf-hero h1, .sf-hero p, .sf-hero a,
.sl-hero h1, .sl-hero p, .sl-hero a,
.sn-hero h1, .sn-hero p, .sn-hero a,
.sc-hero h1, .sc-hero p, .sc-hero a,
.ea-hero h1, .ea-hero p, .ea-hero a,
.si-hero h1, .si-hero p, .si-hero a,
.wd-hero h1, .wd-hero p, .wd-hero a,
.sd-hero h1, .sd-hero p, .sd-hero a,
.io-hero h1, .io-hero p, .io-hero a {
  color: #ffffff;
}
.co-cta h2, .co-cta p,
.cp-cta h2, .cp-cta p,
.am-cta h2, .am-cta p,
.ml-cta h2, .ml-cta p,
.vm-cta h2, .vm-cta p,
.cs-cta h2, .cs-cta p,
.ma-cta h2, .ma-cta p,
.sf-cta h2, .sf-cta p,
.sl-cta h2, .sl-cta p,
.sn-cta h2, .sn-cta p,
.sc-cta h2, .sc-cta p,
.ea-cta h2, .ea-cta p,
.si-cta h2, .si-cta p,
.wd-cta h2, .wd-cta p,
.sd-cta h2, .sd-cta p,
.io-cta h2, .io-cta p {
  color: #ffffff;
}

.cp-about h2, .cp-about p, .cp-services h2, .cp-services p, .cp-delivery h2, .cp-delivery p, .cp-reliable h2, .cp-reliable p, .cp-industries h2, .cp-industries p, .cp-faq h3, .cp-faq p,
.am-about h2, .am-about p, .am-services h2, .am-services p, .am-delivery h2, .am-delivery p, .am-reliable h2, .am-reliable p, .am-industries h2, .am-industries p, .am-faq h3, .am-faq p,
.ml-about h2, .ml-about p, .ml-services h2, .ml-services p, .ml-delivery h2, .ml-delivery p, .ml-reliable h2, .ml-reliable p, .ml-industries h2, .ml-industries p, .ml-faq h3, .ml-faq p,
.vm-about h2, .vm-about p, .vm-services h2, .vm-services p, .vm-delivery h2, .vm-delivery p, .vm-reliable h2, .vm-reliable p, .vm-industries h2, .vm-industries p, .vm-faq h3, .vm-faq p,
.cs-about h2, .cs-about p, .cs-services h2, .cs-services p, .cs-delivery h2, .cs-delivery p, .cs-reliable h2, .cs-reliable p, .cs-industries h2, .cs-industries p, .cs-faq h3, .cs-faq p,
.ma-about h2, .ma-about p, .ma-services h2, .ma-services p, .ma-delivery h2, .ma-delivery p, .ma-reliable h2, .ma-reliable p, .ma-industries h2, .ma-industries p, .ma-faq h3, .ma-faq p,
.sf-about h2, .sf-about p, .sf-services h2, .sf-services p, .sf-delivery h2, .sf-delivery p, .sf-reliable h2, .sf-reliable p, .sf-industries h2, .sf-industries p, .sf-faq h3, .sf-faq p,
.sl-about h2, .sl-about p, .sl-services h2, .sl-services p, .sl-delivery h2, .sl-delivery p, .sl-reliable h2, .sl-reliable p, .sl-industries h2, .sl-industries p, .sl-faq h3, .sl-faq p,
.sn-about h2, .sn-about p, .sn-services h2, .sn-services p, .sn-delivery h2, .sn-delivery p, .sn-reliable h2, .sn-reliable p, .sn-industries h2, .sn-industries p, .sn-faq h3, .sn-faq p,
.sc-about h2, .sc-about p, .sc-services h2, .sc-services p, .sc-delivery h2, .sc-delivery p, .sc-reliable h2, .sc-reliable p, .sc-industries h2, .sc-industries p, .sc-faq h3, .sc-faq p,
.ea-about h2, .ea-about p, .ea-services h2, .ea-services p, .ea-delivery h2, .ea-delivery p, .ea-reliable h2, .ea-reliable p, .ea-industries h2, .ea-industries p, .ea-faq h3, .ea-faq p,
.si-about h2, .si-about p, .si-services h2, .si-services p, .si-delivery h2, .si-delivery p, .si-reliable h2, .si-reliable p, .si-industries h2, .si-industries p, .si-faq h3, .si-faq p,
.wd-about h2, .wd-about p, .wd-services h2, .wd-services p, .wd-delivery h2, .wd-delivery p, .wd-reliable h2, .wd-reliable p, .wd-industries h2, .wd-industries p, .wd-faq h3, .wd-faq p,
.sd-about h2, .sd-about p, .sd-services h2, .sd-services p, .sd-delivery h2, .sd-delivery p, .sd-reliable h2, .sd-reliable p, .sd-industries h2, .sd-industries p, .sd-faq h3, .sd-faq p,
.io-about h2, .io-about p, .io-services h2, .io-services p, .io-delivery h2, .io-delivery p, .io-reliable h2, .io-reliable p, .io-industries h2, .io-industries p, .io-faq h3, .io-faq p {
  color: #000000;
}
.co-about h2, .co-about p, .co-services h2, .co-services p, .co-delivery h2, .co-delivery p, .co-reliable h2, .co-reliable p, .co-industries h2, .co-industries p, .co-faq h3, .co-faq p,
{color:#ffffff}



/* ============================================================
   AWS CLOUD SERVICES PAGE — aws-cloud-services.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --aws-accent: #e8a025;
  --aws-accent-hover: #d4911e;
  --aws-dark: #0b1120;
  --aws-dark-2: #101828;
  --aws-dark-3: #1a2332;
  --aws-white: #ffffff;
  --aws-gray: #6b7280;
  --aws-gray-light: #9ca3af;
  --aws-light-bg: #f8f9fb;
  --aws-light-bg-2: #f1f3f7;
  --aws-text: #444444;
  --aws-text-light: #d1d5db;
  --aws-border: #e5e7eb;
  --aws-radius: 12px;
  --aws-radius-lg: 20px;
  --aws-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --aws-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --aws-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes aws-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes aws-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes aws-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes aws-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes aws-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes aws-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.aws-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: aws-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.aws-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: aws-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.aws-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: aws-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.aws-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: aws-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.aws-stagger > *:nth-child(1) { animation-delay: 0s; }
.aws-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.aws-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.aws-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.aws-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.aws-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.aws-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .aws-animate,
  .aws-animate--left,
  .aws-animate--right,
  .aws-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.aws-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.aws-text-accent {
  color: var(--aws-accent);
}

/* ---------- Shared Checklist ---------- */
.aws-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aws-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--aws-text);
  line-height: 1.5;
}

.aws-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--aws-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.aws-hero {
  background: var(--aws-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.aws-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.aws-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.aws-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--aws-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: aws-fadeUp 0.6s ease 0.1s both;
}

.aws-hero__breadcrumb-active {
  color: var(--aws-accent);
}

.aws-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--aws-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: aws-fadeUp 0.7s ease 0.25s both;
}

.aws-hero__title-accent {
  color: var(--aws-accent);
  font-style: italic;
  display: inline-block;
}

.aws-hero__subtitle {
  font-size: 1.3rem;
  color: var(--aws-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: aws-fadeUp 0.7s ease 0.45s both;
}

.aws-hero__desc {
  font-size: 0.95rem;
  color: var(--aws-gray-light);
  font-style: italic;
  animation: aws-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.aws-about {
  padding: 80px 0;
  background: var(--aws-white);
}

.aws-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.aws-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--aws-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.aws-about__text {
  font-size: 1rem;
  color: var(--aws-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.aws-about__text:last-child {
  margin-bottom: 0;
}

.aws-about__image img {
  width: 100%;
  border-radius: var(--aws-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.aws-stats,
.aws-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.aws-stat {
  background: var(--aws-light-bg);
  border-radius: var(--aws-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--aws-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.aws-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--aws-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.aws-stat:hover::before {
  transform: scaleX(1);
}

.aws-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--aws-accent);
}

.aws-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.aws-stat:nth-child(1) .aws-stat__number { animation-delay: 0.2s; }
.aws-stat:nth-child(2) .aws-stat__number { animation-delay: 0.4s; }
.aws-stat:nth-child(3) .aws-stat__number { animation-delay: 0.6s; }
.aws-stat:nth-child(4) .aws-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.aws-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--aws-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.aws-stat--dark {
  background: var(--aws-white);
  border-color: var(--aws-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.aws-whoweare {
  padding: 80px 0;
  background: var(--aws-light-bg);
}

.aws-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.aws-whoweare__image img {
  width: 100%;
  border-radius: var(--aws-radius-lg);
  object-fit: cover;
}

.aws-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--aws-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.aws-whoweare__text {
  font-size: 1rem;
  color: var(--aws-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.aws-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.aws-services {
  padding: 80px 0;
  background: var(--aws-white);
}

.aws-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.aws-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--aws-text);
}

.aws-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.aws-service-card {
  background: var(--aws-light-bg);
  border-radius: var(--aws-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.aws-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--aws-accent);
  background: var(--aws-white);
}

.aws-service-card--wide {
  grid-column: 1 / -1;
}

.aws-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--aws-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.aws-service-card:hover .aws-service-card__badge {
  animation: aws-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.aws-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--aws-text);
  margin-bottom: 10px;
}

.aws-service-card__text {
  font-size: 0.9rem;
  color: var(--aws-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.aws-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.aws-tag {
  display: inline-block;
  background: var(--aws-white);
  color: var(--aws-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--aws-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.aws-tag:hover {
  background: var(--aws-accent);
  color: var(--aws-white);
  border-color: var(--aws-accent);
  transform: translateY(-2px);
}

/* Service List */
.aws-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aws-service-card__list li {
  font-size: 0.85rem;
  color: var(--aws-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.aws-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--aws-accent);
  font-weight: 700;
}

.aws-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.aws-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.aws-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.aws-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aws-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.aws-delivery__text {
  font-size: 1rem;
  color: var(--aws-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.aws-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.aws-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.aws-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--aws-white);
  border: 2px solid #e0e7ff;
  color: var(--aws-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.aws-step__circle::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.aws-delivery__steps {
  counter-reset: step-counter;
}

.aws-step:hover .aws-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes aws-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--aws-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.aws-delivery__steps > :nth-child(1) .aws-step__circle  { animation: aws-stepGlow 7s ease infinite 0s; }
.aws-delivery__steps > :nth-child(3) .aws-step__circle  { animation: aws-stepGlow 7s ease infinite 1s; }
.aws-delivery__steps > :nth-child(5) .aws-step__circle  { animation: aws-stepGlow 7s ease infinite 2s; }
.aws-delivery__steps > :nth-child(7) .aws-step__circle  { animation: aws-stepGlow 7s ease infinite 3s; }
.aws-delivery__steps > :nth-child(9) .aws-step__circle  { animation: aws-stepGlow 7s ease infinite 4s; }
.aws-delivery__steps > :nth-child(11) .aws-step__circle { animation: aws-stepGlow 7s ease infinite 5s; }
.aws-delivery__steps > :nth-child(13) .aws-step__circle { animation: aws-stepGlow 7s ease infinite 6s; }

.aws-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: aws-arrowPulse 2s ease infinite;
}

@keyframes aws-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.aws-why {
  padding: 80px 0;
  background: var(--aws-white);
}

.aws-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.aws-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aws-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.aws-why__text {
  font-size: 1rem;
  color: var(--aws-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.aws-why__image img {
  width: 100%;
  border-radius: var(--aws-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.aws-industries {
  padding: 80px 0;
  background: var(--aws-light-bg);
  text-align: center;
}

.aws-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aws-text);
  margin-bottom: 48px;
}

.aws-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.aws-industry {
  background: var(--aws-white);
  border-radius: var(--aws-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--aws-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.aws-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--aws-accent);
}

.aws-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.aws-industry:hover .aws-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.aws-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--aws-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.aws-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.aws-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aws-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.aws-reliable__text {
  font-size: 1rem;
  color: var(--aws-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.aws-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.aws-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--aws-white);
  border: 1px solid var(--aws-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.aws-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--aws-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.aws-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--aws-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.aws-pillar:hover .aws-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.aws-pillar__label {
  font-size: 0.85rem;
  color: var(--aws-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.aws-faq {
  padding: 80px 0;
  background: var(--aws-light-bg);
}

.aws-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.aws-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--aws-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--aws-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--aws-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--aws-text);
  border-bottom: 2.5px solid var(--aws-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--aws-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--aws-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.aws-commitment {
  padding: 60px 0;
  background: var(--aws-white);
}

.aws-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.aws-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aws-text);
  margin-bottom: 16px;
}

.aws-commitment__text {
  font-size: 1rem;
  color: var(--aws-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.aws-cta {
  padding: 80px 0;
  background: var(--aws-dark);
}

.aws-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.aws-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aws-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.aws-cta__text {
  font-size: 1rem;
  color: var(--aws-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.aws-cta__button {
  display: inline-block;
  background: var(--aws-accent);
  color: var(--aws-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: aws-pulse 2.5s ease infinite;
}

.aws-cta__button:hover {
  background: var(--aws-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.aws-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.aws-services__subtitle {
  font-size: 1rem;
  color: var(--aws-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .aws-hero__title {
    font-size: 2.2rem;
  }

  .aws-about__heading,
  .aws-whoweare__heading {
    font-size: 1.8rem;
  }

  .aws-services__title {
    font-size: 1.8rem;
  }

  .aws-service-card__title {
    font-size: 1rem;
  }

  .aws-delivery__heading {
    font-size: 1.8rem;
  }

  .aws-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .aws-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .aws-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .aws-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .aws-hero {
    padding: 100px 16px 80px;
  }

  .aws-hero__title {
    font-size: 1.7rem;
  }

  .aws-hero__subtitle {
    font-size: 1rem;
  }

  .aws-about__grid,
  .aws-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .aws-about__heading,
  .aws-whoweare__heading {
    font-size: 1.6rem;
  }

  .aws-stats,
  .aws-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .aws-about__content,
  .aws-whoweare__content {
    order: 1;
  }

  .aws-services__grid {
    grid-template-columns: 1fr;
  }

  .aws-services__title {
    font-size: 1.5rem;
  }

  .aws-service-card--wide {
    grid-column: span 1;
  }

  .aws-delivery__heading {
    font-size: 1.5rem;
  }

  .aws-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .aws-step__arrow {
    display: none;
  }

  .aws-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .aws-reliable__heading {
    font-size: 1.5rem;
  }

  .aws-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .aws-why__heading {
    font-size: 1.5rem;
  }

  .aws-industries__heading {
    font-size: 1.5rem;
  }

  .aws-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .aws-faq__heading {
    font-size: 1.3rem;
  }

  .aws-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .aws-animate,
  .aws-animate--left,
  .aws-animate--right,
  .aws-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .aws-hero {
    padding: 90px 14px 60px;
  }

  .aws-hero__title {
    font-size: 1.4rem;
  }

  .aws-hero__subtitle {
    font-size: 0.9rem;
  }

  .aws-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .aws-about,
  .aws-whoweare,
  .aws-services,
  .aws-delivery,
  .aws-reliable,
  .aws-why,
  .aws-industries,
  .aws-faq,
  .aws-commitment,
  .aws-cta {
    padding: 50px 0;
  }

  .aws-about__heading,
  .aws-whoweare__heading {
    font-size: 1.4rem;
  }

  .aws-about__text,
  .aws-whoweare__text {
    font-size: 0.9rem;
  }

  .aws-stats,
  .aws-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .aws-stat {
    padding: 20px 14px;
  }

  .aws-stat__number {
    font-size: 1.8rem;
  }

  .aws-stat__icon {
    font-size: 1.8rem;
  }

  .aws-stat__label {
    font-size: 0.75rem;
  }

  .aws-services__title {
    font-size: 1.3rem;
  }

  .aws-service-card {
    padding: 20px 16px;
  }

  .aws-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .aws-delivery__heading {
    font-size: 1.3rem;
  }

  .aws-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .aws-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .aws-reliable__heading {
    font-size: 1.3rem;
  }

  .aws-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .aws-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .aws-industry {
    padding: 20px 14px;
  }

  .aws-cta__heading {
    font-size: 1.3rem;
  }

  .aws-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (aws-tech)
   ============================================================ */
.aws-tech { padding: 80px 0; background: var(--aws-light-bg); }
.aws-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.aws-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--aws-text); margin-bottom: 20px; line-height: 1.25; }
.aws-tech__text { font-size: 1rem; color: var(--aws-gray); line-height: 1.75; margin-bottom: 14px; }
.aws-tech__content { }
.aws-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.aws-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .aws-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .aws-tech__heading { font-size: 1.6rem; }
  .aws-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .aws-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.aws-faq__subtext {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 32px;
}

.aws-faq__list {
  text-align: left;
}

.aws-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.aws-faq__item summary {
  list-style: none;
}

.aws-faq__item summary::-webkit-details-marker {
  display: none;
}

.aws-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.aws-faq__question:hover {
  color: var(--aws-accent);
}

.aws-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.aws-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.aws-faq__item[open] .aws-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.aws-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.aws-faq__answer p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin: 0;
}



/* ============================================================
   IOT DEVELOPMENT PAGE — iot-development.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --iot-accent: #e8a025;
  --iot-accent-hover: #d4911e;
  --iot-dark: #0b1120;
  --iot-dark-2: #101828;
  --iot-dark-3: #1a2332;
  --iot-white: #ffffff;
  --iot-gray: #6b7280;
  --iot-gray-light: #9ca3af;
  --iot-light-bg: #f8f9fb;
  --iot-light-bg-2: #f1f3f7;
  --iot-text: #444444;
  --iot-text-light: #d1d5db;
  --iot-border: #e5e7eb;
  --iot-radius: 12px;
  --iot-radius-lg: 20px;
  --iot-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --iot-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --iot-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes iot-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes iot-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes iot-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes iot-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes iot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes iot-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.iot-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: iot-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.iot-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: iot-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.iot-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: iot-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.iot-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: iot-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.iot-stagger > *:nth-child(1) { animation-delay: 0s; }
.iot-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.iot-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.iot-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.iot-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.iot-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.iot-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .iot-animate,
  .iot-animate--left,
  .iot-animate--right,
  .iot-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.iot-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.iot-text-accent {
  color: var(--iot-accent);
}

/* ---------- Shared Checklist ---------- */
.iot-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iot-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--iot-text);
  line-height: 1.5;
}

.iot-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--iot-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.iot-hero {
  background: var(--iot-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.iot-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.iot-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.iot-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--iot-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: iot-fadeUp 0.6s ease 0.1s both;
}

.iot-hero__breadcrumb-active {
  color: var(--iot-accent);
}

.iot-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--iot-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: iot-fadeUp 0.7s ease 0.25s both;
}

.iot-hero__title-accent {
  color: var(--iot-accent);
  font-style: italic;
  display: inline-block;
}

.iot-hero__subtitle {
  font-size: 1.3rem;
  color: var(--iot-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: iot-fadeUp 0.7s ease 0.45s both;
}

.iot-hero__desc {
  font-size: 0.95rem;
  color: var(--iot-gray-light);
  font-style: italic;
  animation: iot-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.iot-about {
  padding: 80px 0;
  background: var(--iot-white);
}

.iot-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.iot-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--iot-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.iot-about__text {
  font-size: 1rem;
  color: var(--iot-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.iot-about__text:last-child {
  margin-bottom: 0;
}

.iot-about__image img {
  width: 100%;
  border-radius: var(--iot-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.iot-stats,
.iot-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.iot-stat {
  background: var(--iot-light-bg);
  border-radius: var(--iot-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--iot-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.iot-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--iot-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.iot-stat:hover::before {
  transform: scaleX(1);
}

.iot-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--iot-accent);
}

.iot-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.iot-stat:nth-child(1) .iot-stat__number { animation-delay: 0.2s; }
.iot-stat:nth-child(2) .iot-stat__number { animation-delay: 0.4s; }
.iot-stat:nth-child(3) .iot-stat__number { animation-delay: 0.6s; }
.iot-stat:nth-child(4) .iot-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.iot-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--iot-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.iot-stat--dark {
  background: var(--iot-white);
  border-color: var(--iot-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.iot-whoweare {
  padding: 80px 0;
  background: var(--iot-light-bg);
}

.iot-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.iot-whoweare__image img {
  width: 100%;
  border-radius: var(--iot-radius-lg);
  object-fit: cover;
}

.iot-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--iot-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.iot-whoweare__text {
  font-size: 1rem;
  color: var(--iot-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.iot-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.iot-services {
  padding: 80px 0;
  background: var(--iot-white);
}

.iot-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.iot-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--iot-text);
}

.iot-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.iot-service-card {
  background: var(--iot-light-bg);
  border-radius: var(--iot-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.iot-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--iot-accent);
  background: var(--iot-white);
}

.iot-service-card--wide {
  grid-column: 1 / -1;
}

.iot-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--iot-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.iot-service-card:hover .iot-service-card__badge {
  animation: iot-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.iot-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--iot-text);
  margin-bottom: 10px;
}

.iot-service-card__text {
  font-size: 0.9rem;
  color: var(--iot-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.iot-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.iot-tag {
  display: inline-block;
  background: var(--iot-white);
  color: var(--iot-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--iot-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.iot-tag:hover {
  background: var(--iot-accent);
  color: var(--iot-white);
  border-color: var(--iot-accent);
  transform: translateY(-2px);
}

/* Service List */
.iot-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.iot-service-card__list li {
  font-size: 0.85rem;
  color: var(--iot-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.iot-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--iot-accent);
  font-weight: 700;
}

.iot-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.iot-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.iot-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.iot-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--iot-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.iot-delivery__text {
  font-size: 1rem;
  color: var(--iot-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.iot-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.iot-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.iot-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--iot-white);
  border: 2px solid #e0e7ff;
  color: var(--iot-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.iot-step__circle::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.iot-delivery__steps {
  counter-reset: step-counter;
}

.iot-step:hover .iot-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes iot-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--iot-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.iot-delivery__steps > :nth-child(1) .iot-step__circle  { animation: iot-stepGlow 7s ease infinite 0s; }
.iot-delivery__steps > :nth-child(3) .iot-step__circle  { animation: iot-stepGlow 7s ease infinite 1s; }
.iot-delivery__steps > :nth-child(5) .iot-step__circle  { animation: iot-stepGlow 7s ease infinite 2s; }
.iot-delivery__steps > :nth-child(7) .iot-step__circle  { animation: iot-stepGlow 7s ease infinite 3s; }
.iot-delivery__steps > :nth-child(9) .iot-step__circle  { animation: iot-stepGlow 7s ease infinite 4s; }
.iot-delivery__steps > :nth-child(11) .iot-step__circle { animation: iot-stepGlow 7s ease infinite 5s; }
.iot-delivery__steps > :nth-child(13) .iot-step__circle { animation: iot-stepGlow 7s ease infinite 6s; }

.iot-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: iot-arrowPulse 2s ease infinite;
}

@keyframes iot-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.iot-why {
  padding: 80px 0;
  background: var(--iot-white);
}

.iot-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.iot-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--iot-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.iot-why__text {
  font-size: 1rem;
  color: var(--iot-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.iot-why__image img {
  width: 100%;
  border-radius: var(--iot-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.iot-industries {
  padding: 80px 0;
  background: var(--iot-light-bg);
  text-align: center;
}

.iot-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--iot-text);
  margin-bottom: 48px;
}

.iot-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.iot-industry {
  background: var(--iot-white);
  border-radius: var(--iot-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--iot-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.iot-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--iot-accent);
}

.iot-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.iot-industry:hover .iot-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.iot-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--iot-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.iot-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.iot-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--iot-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.iot-reliable__text {
  font-size: 1rem;
  color: var(--iot-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.iot-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.iot-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--iot-white);
  border: 1px solid var(--iot-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.iot-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--iot-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.iot-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--iot-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.iot-pillar:hover .iot-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.iot-pillar__label {
  font-size: 0.85rem;
  color: var(--iot-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.iot-faq {
  padding: 80px 0;
  background: var(--iot-light-bg);
}

.iot-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.iot-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--iot-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--iot-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--iot-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--iot-text);
  border-bottom: 2.5px solid var(--iot-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--iot-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--iot-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.iot-commitment {
  padding: 60px 0;
  background: var(--iot-white);
}

.iot-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.iot-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--iot-text);
  margin-bottom: 16px;
}

.iot-commitment__text {
  font-size: 1rem;
  color: var(--iot-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.iot-cta {
  padding: 80px 0;
  background: var(--iot-dark);
}

.iot-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.iot-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--iot-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.iot-cta__text {
  font-size: 1rem;
  color: var(--iot-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.iot-cta__button {
  display: inline-block;
  background: var(--iot-accent);
  color: var(--iot-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: iot-pulse 2.5s ease infinite;
}

.iot-cta__button:hover {
  background: var(--iot-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.iot-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.iot-services__subtitle {
  font-size: 1rem;
  color: var(--iot-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .iot-hero__title {
    font-size: 2.2rem;
  }

  .iot-about__heading,
  .iot-whoweare__heading {
    font-size: 1.8rem;
  }

  .iot-services__title {
    font-size: 1.8rem;
  }

  .iot-service-card__title {
    font-size: 1rem;
  }

  .iot-delivery__heading {
    font-size: 1.8rem;
  }

  .iot-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .iot-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .iot-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .iot-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .iot-hero {
    padding: 100px 16px 80px;
  }

  .iot-hero__title {
    font-size: 1.7rem;
  }

  .iot-hero__subtitle {
    font-size: 1rem;
  }

  .iot-about__grid,
  .iot-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .iot-about__heading,
  .iot-whoweare__heading {
    font-size: 1.6rem;
  }

  .iot-stats,
  .iot-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .iot-about__content,
  .iot-whoweare__content {
    order: 1;
  }

  .iot-services__grid {
    grid-template-columns: 1fr;
  }

  .iot-services__title {
    font-size: 1.5rem;
  }

  .iot-service-card--wide {
    grid-column: span 1;
  }

  .iot-delivery__heading {
    font-size: 1.5rem;
  }

  .iot-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .iot-step__arrow {
    display: none;
  }

  .iot-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .iot-reliable__heading {
    font-size: 1.5rem;
  }

  .iot-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .iot-why__heading {
    font-size: 1.5rem;
  }

  .iot-industries__heading {
    font-size: 1.5rem;
  }

  .iot-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .iot-faq__heading {
    font-size: 1.3rem;
  }

  .iot-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .iot-animate,
  .iot-animate--left,
  .iot-animate--right,
  .iot-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .iot-hero {
    padding: 90px 14px 60px;
  }

  .iot-hero__title {
    font-size: 1.4rem;
  }

  .iot-hero__subtitle {
    font-size: 0.9rem;
  }

  .iot-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .iot-about,
  .iot-whoweare,
  .iot-services,
  .iot-delivery,
  .iot-reliable,
  .iot-why,
  .iot-industries,
  .iot-faq,
  .iot-commitment,
  .iot-cta {
    padding: 50px 0;
  }

  .iot-about__heading,
  .iot-whoweare__heading {
    font-size: 1.4rem;
  }

  .iot-about__text,
  .iot-whoweare__text {
    font-size: 0.9rem;
  }

  .iot-stats,
  .iot-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .iot-stat {
    padding: 20px 14px;
  }

  .iot-stat__number {
    font-size: 1.8rem;
  }

  .iot-stat__icon {
    font-size: 1.8rem;
  }

  .iot-stat__label {
    font-size: 0.75rem;
  }

  .iot-services__title {
    font-size: 1.3rem;
  }

  .iot-service-card {
    padding: 20px 16px;
  }

  .iot-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .iot-delivery__heading {
    font-size: 1.3rem;
  }

  .iot-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .iot-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .iot-reliable__heading {
    font-size: 1.3rem;
  }

  .iot-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .iot-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .iot-industry {
    padding: 20px 14px;
  }

  .iot-cta__heading {
    font-size: 1.3rem;
  }

  .iot-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (iot-tech)
   ============================================================ */
.iot-tech { padding: 80px 0; background: var(--iot-light-bg); }
.iot-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.iot-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--iot-text); margin-bottom: 20px; line-height: 1.25; }
.iot-tech__text { font-size: 1rem; color: var(--iot-gray); line-height: 1.75; margin-bottom: 14px; }
.iot-tech__content { }
.iot-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.iot-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .iot-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .iot-tech__heading { font-size: 1.6rem; }
  .iot-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .iot-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.iot-faq__subtext {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 32px;
}

.iot-faq__list {
  text-align: left;
}

.iot-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.iot-faq__item summary {
  list-style: none;
}

.iot-faq__item summary::-webkit-details-marker {
  display: none;
}

.iot-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.iot-faq__question:hover {
  color: var(--iot-accent);
}

.iot-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.iot-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.iot-faq__item[open] .iot-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.iot-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.iot-faq__answer p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin: 0;
}




/* ============================================================
   UI UX DESIGN PAGE — ui-ux-design.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --ux-accent: #e8a025;
  --ux-accent-hover: #d4911e;
  --ux-dark: #0b1120;
  --ux-dark-2: #101828;
  --ux-dark-3: #1a2332;
  --ux-white: #ffffff;
  --ux-gray: #6b7280;
  --ux-gray-light: #9ca3af;
  --ux-light-bg: #f8f9fb;
  --ux-light-bg-2: #f1f3f7;
  --ux-text: #444444;
  --ux-text-light: #d1d5db;
  --ux-border: #e5e7eb;
  --ux-radius: 12px;
  --ux-radius-lg: 20px;
  --ux-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ux-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ux-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes ux-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes ux-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes ux-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes ux-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes ux-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes ux-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.ux-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: ux-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ux-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: ux-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ux-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: ux-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ux-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: ux-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.ux-stagger > *:nth-child(1) { animation-delay: 0s; }
.ux-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ux-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ux-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ux-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ux-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ux-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .ux-animate,
  .ux-animate--left,
  .ux-animate--right,
  .ux-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.ux-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.ux-text-accent {
  color: var(--ux-accent);
}

/* ---------- Shared Checklist ---------- */
.ux-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ux-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ux-text);
  line-height: 1.5;
}

.ux-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ux-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.ux-hero {
  background: var(--ux-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.ux-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.ux-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.ux-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--ux-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: ux-fadeUp 0.6s ease 0.1s both;
}

.ux-hero__breadcrumb-active {
  color: var(--ux-accent);
}

.ux-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ux-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: ux-fadeUp 0.7s ease 0.25s both;
}

.ux-hero__title-accent {
  color: var(--ux-accent);
  font-style: italic;
  display: inline-block;
}

.ux-hero__subtitle {
  font-size: 1.3rem;
  color: var(--ux-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: ux-fadeUp 0.7s ease 0.45s both;
}

.ux-hero__desc {
  font-size: 0.95rem;
  color: var(--ux-gray-light);
  font-style: italic;
  animation: ux-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.ux-about {
  padding: 80px 0;
  background: var(--ux-white);
}

.ux-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ux-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ux-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ux-about__text {
  font-size: 1rem;
  color: var(--ux-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ux-about__text:last-child {
  margin-bottom: 0;
}

.ux-about__image img {
  width: 100%;
  border-radius: var(--ux-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.ux-stats,
.ux-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ux-stat {
  background: var(--ux-light-bg);
  border-radius: var(--ux-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--ux-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.ux-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ux-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.ux-stat:hover::before {
  transform: scaleX(1);
}

.ux-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--ux-accent);
}

.ux-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.ux-stat:nth-child(1) .ux-stat__number { animation-delay: 0.2s; }
.ux-stat:nth-child(2) .ux-stat__number { animation-delay: 0.4s; }
.ux-stat:nth-child(3) .ux-stat__number { animation-delay: 0.6s; }
.ux-stat:nth-child(4) .ux-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ux-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--ux-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.ux-stat--dark {
  background: var(--ux-white);
  border-color: var(--ux-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.ux-whoweare {
  padding: 80px 0;
  background: var(--ux-light-bg);
}

.ux-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ux-whoweare__image img {
  width: 100%;
  border-radius: var(--ux-radius-lg);
  object-fit: cover;
}

.ux-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ux-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ux-whoweare__text {
  font-size: 1rem;
  color: var(--ux-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ux-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.ux-services {
  padding: 80px 0;
  background: var(--ux-white);
}

.ux-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.ux-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ux-text);
}

.ux-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.ux-service-card {
  background: var(--ux-light-bg);
  border-radius: var(--ux-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.ux-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--ux-accent);
  background: var(--ux-white);
}

.ux-service-card--wide {
  grid-column: 1 / -1;
}

.ux-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--ux-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.ux-service-card:hover .ux-service-card__badge {
  animation: ux-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.ux-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ux-text);
  margin-bottom: 10px;
}

.ux-service-card__text {
  font-size: 0.9rem;
  color: var(--ux-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.ux-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ux-tag {
  display: inline-block;
  background: var(--ux-white);
  color: var(--ux-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--ux-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.ux-tag:hover {
  background: var(--ux-accent);
  color: var(--ux-white);
  border-color: var(--ux-accent);
  transform: translateY(-2px);
}

/* Service List */
.ux-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ux-service-card__list li {
  font-size: 0.85rem;
  color: var(--ux-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.ux-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ux-accent);
  font-weight: 700;
}

.ux-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.ux-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ux-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.ux-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ux-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.ux-delivery__text {
  font-size: 1rem;
  color: var(--ux-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.ux-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.ux-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ux-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ux-white);
  border: 2px solid #e0e7ff;
  color: var(--ux-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.ux-step__circle::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.ux-delivery__steps {
  counter-reset: step-counter;
}

.ux-step:hover .ux-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes ux-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--ux-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.ux-delivery__steps > :nth-child(1) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 0s; }
.ux-delivery__steps > :nth-child(3) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 1s; }
.ux-delivery__steps > :nth-child(5) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 2s; }
.ux-delivery__steps > :nth-child(7) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 3s; }
.ux-delivery__steps > :nth-child(9) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 4s; }
.ux-delivery__steps > :nth-child(11) .ux-step__circle { animation: ux-stepGlow 7s ease infinite 5s; }
.ux-delivery__steps > :nth-child(13) .ux-step__circle { animation: ux-stepGlow 7s ease infinite 6s; }

.ux-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: ux-arrowPulse 2s ease infinite;
}

@keyframes ux-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.ux-why {
  padding: 80px 0;
  background: var(--ux-white);
}

.ux-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.ux-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ux-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ux-why__text {
  font-size: 1rem;
  color: var(--ux-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.ux-why__image img {
  width: 100%;
  border-radius: var(--ux-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.ux-industries {
  padding: 80px 0;
  background: var(--ux-light-bg);
  text-align: center;
}

.ux-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ux-text);
  margin-bottom: 48px;
}

.ux-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ux-industry {
  background: var(--ux-white);
  border-radius: var(--ux-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--ux-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.ux-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--ux-accent);
}

.ux-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.ux-industry:hover .ux-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.ux-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ux-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.ux-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.ux-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ux-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.ux-reliable__text {
  font-size: 1rem;
  color: var(--ux-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.ux-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.ux-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ux-white);
  border: 1px solid var(--ux-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.ux-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--ux-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.ux-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--ux-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.ux-pillar:hover .ux-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.ux-pillar__label {
  font-size: 0.85rem;
  color: var(--ux-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.ux-faq {
  padding: 80px 0;
  background: var(--ux-light-bg);
}

.ux-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.ux-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ux-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--ux-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ux-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--ux-text);
  border-bottom: 2.5px solid var(--ux-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ux-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--ux-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.ux-commitment {
  padding: 60px 0;
  background: var(--ux-white);
}

.ux-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.ux-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ux-text);
  margin-bottom: 16px;
}

.ux-commitment__text {
  font-size: 1rem;
  color: var(--ux-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.ux-cta {
  padding: 80px 0;
  background: var(--ux-dark);
}

.ux-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.ux-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ux-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ux-cta__text {
  font-size: 1rem;
  color: var(--ux-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.ux-cta__button {
  display: inline-block;
  background: var(--ux-accent);
  color: var(--ux-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: ux-pulse 2.5s ease infinite;
}

.ux-cta__button:hover {
  background: var(--ux-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.ux-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.ux-services__subtitle {
  font-size: 1rem;
  color: var(--ux-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .ux-hero__title {
    font-size: 2.2rem;
  }

  .ux-about__heading,
  .ux-whoweare__heading {
    font-size: 1.8rem;
  }

  .ux-services__title {
    font-size: 1.8rem;
  }

  .ux-service-card__title {
    font-size: 1rem;
  }

  .ux-delivery__heading {
    font-size: 1.8rem;
  }

  .ux-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .ux-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .ux-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .ux-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .ux-hero {
    padding: 100px 16px 80px;
  }

  .ux-hero__title {
    font-size: 1.7rem;
  }

  .ux-hero__subtitle {
    font-size: 1rem;
  }

  .ux-about__grid,
  .ux-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ux-about__heading,
  .ux-whoweare__heading {
    font-size: 1.6rem;
  }

  .ux-stats,
  .ux-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .ux-about__content,
  .ux-whoweare__content {
    order: 1;
  }

  .ux-services__grid {
    grid-template-columns: 1fr;
  }

  .ux-services__title {
    font-size: 1.5rem;
  }

  .ux-service-card--wide {
    grid-column: span 1;
  }

  .ux-delivery__heading {
    font-size: 1.5rem;
  }

  .ux-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .ux-step__arrow {
    display: none;
  }

  .ux-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .ux-reliable__heading {
    font-size: 1.5rem;
  }

  .ux-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .ux-why__heading {
    font-size: 1.5rem;
  }

  .ux-industries__heading {
    font-size: 1.5rem;
  }

  .ux-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .ux-faq__heading {
    font-size: 1.3rem;
  }

  .ux-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .ux-animate,
  .ux-animate--left,
  .ux-animate--right,
  .ux-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .ux-hero {
    padding: 90px 14px 60px;
  }

  .ux-hero__title {
    font-size: 1.4rem;
  }

  .ux-hero__subtitle {
    font-size: 0.9rem;
  }

  .ux-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .ux-about,
  .ux-whoweare,
  .ux-services,
  .ux-delivery,
  .ux-reliable,
  .ux-why,
  .ux-industries,
  .ux-faq,
  .ux-commitment,
  .ux-cta {
    padding: 50px 0;
  }

  .ux-about__heading,
  .ux-whoweare__heading {
    font-size: 1.4rem;
  }

  .ux-about__text,
  .ux-whoweare__text {
    font-size: 0.9rem;
  }

  .ux-stats,
  .ux-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ux-stat {
    padding: 20px 14px;
  }

  .ux-stat__number {
    font-size: 1.8rem;
  }

  .ux-stat__icon {
    font-size: 1.8rem;
  }

  .ux-stat__label {
    font-size: 0.75rem;
  }

  .ux-services__title {
    font-size: 1.3rem;
  }

  .ux-service-card {
    padding: 20px 16px;
  }

  .ux-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .ux-delivery__heading {
    font-size: 1.3rem;
  }

  .ux-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .ux-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .ux-reliable__heading {
    font-size: 1.3rem;
  }

  .ux-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .ux-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ux-industry {
    padding: 20px 14px;
  }

  .ux-cta__heading {
    font-size: 1.3rem;
  }

  .ux-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ux-tech)
   ============================================================ */
.ux-tech { padding: 80px 0; background: var(--ux-light-bg); }
.ux-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ux-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ux-text); margin-bottom: 20px; line-height: 1.25; }
.ux-tech__text { font-size: 1rem; color: var(--ux-gray); line-height: 1.75; margin-bottom: 14px; }
.ux-tech__content { }
.ux-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ux-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .ux-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ux-tech__heading { font-size: 1.6rem; }
  .ux-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .ux-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.ux-faq__subtext {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 32px;
}

.ux-faq__list {
  text-align: left;
}

.ux-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.ux-faq__item summary {
  list-style: none;
}

.ux-faq__item summary::-webkit-details-marker {
  display: none;
}

.ux-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.ux-faq__question:hover {
  color: var(--ux-accent);
}

.ux-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.ux-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.ux-faq__item[open] .ux-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.ux-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.ux-faq__answer p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   MOBILE APP DEVELOPMENT PAGE — mobile-app-development.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --ma-accent: #e8a025;
  --ma-accent-hover: #d4911e;
  --ma-dark: #0b1120;
  --ma-dark-2: #101828;
  --ma-dark-3: #1a2332;
  --ma-white: #ffffff;
  --ma-gray: #000000;
  --ma-gray-light: #000000;
  --ma-light-bg: #f8f9fb;
  --ma-light-bg-2: #f1f3f7;
  --ma-text: #444444;
  --ma-text-light: #d1d5db;
  --ma-border: #e5e7eb;
  --ma-radius: 12px;
  --ma-radius-lg: 20px;
  --ma-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ma-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ma-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

@keyframes ma-fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes ma-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(232, 160, 37, 0); }
}

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

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================================ */

.ma-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: ma-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ma-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: ma-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ma-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: ma-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ma-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: ma-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

.ma-stagger > *:nth-child(1) { animation-delay: 0s; }
.ma-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ma-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ma-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ma-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ma-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ma-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .ma-animate,
  .ma-animate--left,
  .ma-animate--right,
  .ma-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.ma-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.ma-text-accent {
  color: var(--ma-accent);
}

/* ---------- Shared Checklist ---------- */
.ma-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ma-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ma-text);
  line-height: 1.5;
}

.ma-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ma-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.ma-hero {
  background: var(--ma-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.ma-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.ma-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.ma-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--ma-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: ma-fadeUp 0.6s ease 0.1s both;
}

.ma-hero__breadcrumb a {
  color: var(--ma-gray);
  text-decoration: none;
  transition: color 0.3s ease;
}

.ma-hero__breadcrumb a:hover {
  color: var(--ma-accent);
}

.ma-hero__breadcrumb-active {
  color: var(--ma-accent);
}

.ma-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ma-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: ma-fadeUp 0.7s ease 0.25s both;
}

.ma-hero__title-accent {
  color: var(--ma-accent);
  font-style: italic;
  display: inline-block;
}

.ma-hero__subtitle {
  font-size: 1.3rem;
  color: var(--ma-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: ma-fadeUp 0.7s ease 0.45s both;
}

.ma-hero__desc {
  font-size: 0.95rem;
  color: var(--ma-gray-light);
  font-style: italic;
  animation: ma-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.ma-about {
  padding: 80px 0;
  background: var(--ma-white);
}

.ma-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ma-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ma-about__text {
  font-size: 1rem;
  color: var(--ma-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ma-about__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.ma-stats,
.ma-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ma-stat {
  background: var(--ma-light-bg);
  border-radius: var(--ma-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--ma-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.ma-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ma-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.ma-stat:hover::before {
  transform: scaleX(1);
}

.ma-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--ma-accent);
}

.ma-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: ma-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

.ma-stat:nth-child(1) .ma-stat__number { animation-delay: 0.2s; }
.ma-stat:nth-child(2) .ma-stat__number { animation-delay: 0.4s; }
.ma-stat:nth-child(3) .ma-stat__number { animation-delay: 0.6s; }
.ma-stat:nth-child(4) .ma-stat__number { animation-delay: 0.8s; }

@keyframes ma-statPop {
  0% { opacity: 0; transform: scale(0) translateY(10px); }
  60% { opacity: 1; transform: scale(1.15) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.ma-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--ma-gray);
  font-weight: 500;
  line-height: 1.3;
}

.ma-stat--dark {
  background: var(--ma-white);
  border-color: var(--ma-border);
}

.ma-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 1.8rem;
}

/* ============================================================
   3. WHO WE ARE / EXPERTISE SECTION
   ============================================================ */
.ma-whoweare {
  padding: 80px 0;
  background: var(--ma-light-bg);
}

.ma-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ma-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ma-whoweare__text {
  font-size: 1rem;
  color: var(--ma-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ma-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. SERVICES SECTION
   ============================================================ */
.ma-services {
  padding: 80px 0;
  background: var(--ma-white);
}

.ma-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.ma-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ma-text);
}

.ma-services__subtitle {
  font-size: 1rem;
  color: var(--ma-gray);
  margin-top: 12px;
  line-height: 1.6;
}

.ma-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ma-service-card {
  background: var(--ma-light-bg);
  border-radius: var(--ma-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.ma-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--ma-accent);
  background: var(--ma-white);
}

.ma-service-card--wide {
  grid-column: 1 / -1;
}

.ma-service-card__badge {
  display: inline-block;
  background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%;
  color: var(--ma-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.ma-service-card:hover .ma-service-card__badge {
  animation: ma-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.ma-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ma-text);
  margin-bottom: 10px;
}

.ma-service-card__text {
  font-size: 0.9rem;
  color: var(--ma-gray);
  line-height: 1.65;
  margin-bottom: 0;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.ma-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ma-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.ma-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.ma-delivery__text {
  font-size: 1rem;
  color: var(--ma-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.ma-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
  counter-reset: step-counter;
}

.ma-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ma-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ma-white);
  border: 2px solid #e0e7ff;
  color: var(--ma-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.ma-step__circle::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.ma-step:hover .ma-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

@keyframes ma-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--ma-white);
  }
}

.ma-delivery__steps > :nth-child(1) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 0s; }
.ma-delivery__steps > :nth-child(3) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 1s; }
.ma-delivery__steps > :nth-child(5) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 2s; }
.ma-delivery__steps > :nth-child(7) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 3s; }
.ma-delivery__steps > :nth-child(9) .ma-step__circle  { animation: ma-stepGlow 7s ease infinite 4s; }
.ma-delivery__steps > :nth-child(11) .ma-step__circle { animation: ma-stepGlow 7s ease infinite 5s; }
.ma-delivery__steps > :nth-child(13) .ma-step__circle { animation: ma-stepGlow 7s ease infinite 6s; }

.ma-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: ma-arrowPulse 2s ease infinite;
}

@keyframes ma-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}

/* ============================================================
   6. WHY CHOOSE US / RELIABLE SECTION
   ============================================================ */
.ma-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.ma-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.ma-reliable__text {
  font-size: 1rem;
  color: var(--ma-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.ma-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.ma-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ma-white);
  border: 1px solid var(--ma-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.ma-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--ma-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.ma-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--ma-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.ma-pillar:hover .ma-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.ma-pillar__label {
  font-size: 0.85rem;
  color: var(--ma-text);
  font-weight: 500;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.ma-industries {
  padding: 80px 0;
  background: var(--ma-light-bg);
  text-align: center;
}

.ma-industries__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 48px;
}

.ma-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ma-industry {
  background: var(--ma-white);
  border-radius: var(--ma-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--ma-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
  cursor: default;
}

.ma-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--ma-accent);
}

.ma-industry__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 2rem;
}

.ma-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ma-text);
}

/* ============================================================
   8. TECHNOLOGIES SECTION
   ============================================================ */
.ma-tech {
  padding: 80px 0;
  background: var(--ma-white);
}

.ma-tech__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ma-tech__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ma-tech__text {
  font-size: 1rem;
  color: var(--ma-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ma-tech__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.ma-tech__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ma-tag {
  display: inline-block;
  background: var(--ma-light-bg);
  color: var(--ma-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--ma-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ma-tag:hover {
  background: var(--ma-accent);
  color: var(--ma-white);
  border-color: var(--ma-accent);
  transform: translateY(-2px);
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.ma-faq {
  padding: 80px 0;
  background: var(--ma-light-bg);
}

.ma-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.ma-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ma-text);
  margin-bottom: 12px;
}

.ma-faq__subtext {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 32px;
}

.ma-faq__list {
  text-align: left;
}

.ma-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.ma-faq__item summary {
  list-style: none;
}

.ma-faq__item summary::-webkit-details-marker {
  display: none;
}

.ma-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.ma-faq__question:hover {
  color: var(--ma-accent);
}

.ma-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.ma-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.ma-faq__item[open] .ma-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.ma-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.ma-faq__answer p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   10. CTA SECTION
   ============================================================ */
.ma-cta {
  padding: 80px 0;
  background: var(--ma-dark);
}

.ma-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.ma-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ma-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ma-cta__text {
  font-size: 1rem;
  color: var(--ma-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.ma-cta__button {
  display: inline-block;
  background: var(--ma-accent);
  color: var(--ma-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: ma-pulse 2.5s ease infinite;
}

.ma-cta__button:hover {
  background: var(--ma-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* CTA as <button> reset */
button.ma-cta__button {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .ma-hero__title { font-size: 2.2rem; }
  .ma-about__heading, .ma-whoweare__heading { font-size: 1.8rem; }
  .ma-services__title { font-size: 1.8rem; }
  .ma-service-card__title { font-size: 1rem; }
  .ma-delivery__heading { font-size: 1.8rem; }
  .ma-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .ma-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .ma-step__arrow { font-size: 1rem; margin: 0 1px; }
  .ma-reliable__heading { font-size: 1.8rem; }
  .ma-tech__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .ma-hero { padding: 100px 16px 80px; }
  .ma-hero__title { font-size: 1.7rem; }
  .ma-hero__subtitle { font-size: 1rem; }
  .ma-about__grid, .ma-whoweare__grid { grid-template-columns: 1fr; gap: 30px; }
  .ma-about__heading, .ma-whoweare__heading { font-size: 1.6rem; }
  .ma-stats, .ma-whoweare__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .ma-about__content, .ma-whoweare__content { order: 1; }
  .ma-services__grid { grid-template-columns: 1fr; }
  .ma-services__title { font-size: 1.5rem; }
  .ma-service-card--wide { grid-column: span 1; }
  .ma-delivery__heading { font-size: 1.5rem; }
  .ma-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ma-step__arrow { display: none; }
  .ma-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .ma-reliable__heading { font-size: 1.5rem; }
  .ma-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .ma-industries__title { font-size: 1.5rem; }
  .ma-industries__grid { grid-template-columns: 1fr 1fr; }
  .ma-faq__heading { font-size: 1.3rem; }
  .ma-cta__heading { font-size: 1.5rem; }
  .ma-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ma-tech__heading { font-size: 1.6rem; }
  .ma-tech__stats { grid-template-columns: 1fr 1fr; }

  /* Disable scroll animations on mobile */
  .ma-animate, .ma-animate--left, .ma-animate--right, .ma-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 480px) {
  .ma-hero { padding: 90px 14px 60px; }
  .ma-hero__title { font-size: 1.4rem; }
  .ma-hero__subtitle { font-size: 0.9rem; }
  .ma-hero__breadcrumb { font-size: 0.75rem; }
  .ma-about, .ma-whoweare, .ma-services, .ma-delivery, .ma-reliable,
  .ma-industries, .ma-faq, .ma-cta, .ma-tech { padding: 50px 0; }
  .ma-about__heading, .ma-whoweare__heading { font-size: 1.4rem; }
  .ma-about__text, .ma-whoweare__text { font-size: 0.9rem; }
  .ma-stats, .ma-whoweare__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ma-stat { padding: 20px 14px; }
  .ma-stat__number { font-size: 1.8rem; }
  .ma-stat__label { font-size: 0.75rem; }
  .ma-services__title { font-size: 1.3rem; }
  .ma-service-card { padding: 20px 16px; }
  .ma-delivery__heading { font-size: 1.3rem; }
  .ma-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .ma-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .ma-reliable__heading { font-size: 1.3rem; }
  .ma-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .ma-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ma-industry { padding: 20px 14px; }
  .ma-cta__heading { font-size: 1.3rem; }
  .ma-cta__button { font-size: 0.9rem; padding: 14px 28px; }
  .ma-tech__heading { font-size: 1.4rem; }
}

/*End of MOBILE APP*/
/* ============================================================
   AMAZON WEB SERVICES PAGE — amazon-web-services.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --aw-accent: #e8a025;
  --aw-accent-hover: #d4911e;
  --aw-dark: #0b1120;
  --aw-dark-2: #101828;
  --aw-dark-3: #1a2332;
  --aw-white: #ffffff;
  --aw-gray: #6b7280;
  --aw-gray-light: #9ca3af;
  --aw-light-bg: #f8f9fb;
  --aw-light-bg-2: #f1f3f7;
  --aw-text: #444444;
  --aw-text-light: #d1d5db;
  --aw-border: #e5e7eb;
  --aw-radius: 12px;
  --aw-radius-lg: 20px;
  --aw-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --aw-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --aw-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes aw-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes aw-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes aw-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes aw-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes aw-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes aw-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.aw-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: aw-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.aw-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: aw-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.aw-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: aw-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.aw-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: aw-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.aw-stagger > *:nth-child(1) { animation-delay: 0s; }
.aw-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.aw-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.aw-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.aw-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.aw-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.aw-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .aw-animate,
  .aw-animate--left,
  .aw-animate--right,
  .aw-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.aw-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.aw-text-accent {
  color: var(--aw-accent);
}

/* ---------- Shared Checklist ---------- */
.aw-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aw-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--aw-text);
  line-height: 1.5;
}

.aw-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--aw-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.aw-hero {
  background: var(--aw-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.aw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.aw-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.aw-hero__breadcrumb {
  font-size: 0.85rem;
  color: var(--aw-gray);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: aw-fadeUp 0.6s ease 0.1s both;
}

.aw-hero__breadcrumb-active {
  color: var(--aw-accent);
}

.aw-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--aw-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: aw-fadeUp 0.7s ease 0.25s both;
}

.aw-hero__title-accent {
  color: var(--aw-accent);
  font-style: italic;
  display: inline-block;
}

.aw-hero__subtitle {
  font-size: 1.3rem;
  color: var(--aw-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: aw-fadeUp 0.7s ease 0.45s both;
}

.aw-hero__desc {
  font-size: 0.95rem;
  color: var(--aw-gray-light);
  font-style: italic;
  animation: aw-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.aw-about {
  padding: 80px 0;
  background: var(--aw-white);
}

.aw-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.aw-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--aw-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.aw-about__text {
  font-size: 1rem;
  color: var(--aw-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.aw-about__text:last-child {
  margin-bottom: 0;
}

.aw-about__image img {
  width: 100%;
  border-radius: var(--aw-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.aw-stats,
.aw-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.aw-stat {
  background: var(--aw-light-bg);
  border-radius: var(--aw-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--aw-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.aw-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--aw-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.aw-stat:hover::before {
  transform: scaleX(1);
}

.aw-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--aw-accent);
}

.aw-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.aw-stat:nth-child(1) .aw-stat__number { animation-delay: 0.2s; }
.aw-stat:nth-child(2) .aw-stat__number { animation-delay: 0.4s; }
.aw-stat:nth-child(3) .aw-stat__number { animation-delay: 0.6s; }
.aw-stat:nth-child(4) .aw-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.aw-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--aw-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.aw-stat--dark {
  background: var(--aw-white);
  border-color: var(--aw-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.aw-whoweare {
  padding: 80px 0;
  background: var(--aw-light-bg);
}

.aw-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.aw-whoweare__image img {
  width: 100%;
  border-radius: var(--aw-radius-lg);
  object-fit: cover;
}

.aw-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--aw-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.aw-whoweare__text {
  font-size: 1rem;
  color: var(--aw-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.aw-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.aw-services {
  padding: 80px 0;
  background: var(--aw-white);
}

.aw-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.aw-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--aw-text);
}

.aw-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.aw-service-card {
  background: var(--aw-light-bg);
  border-radius: var(--aw-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.aw-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--aw-accent);
  background: var(--aw-white);
}

.aw-service-card--wide {
  grid-column: 1 / -1;
}

.aw-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--aw-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.aw-service-card:hover .aw-service-card__badge {
  animation: aw-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.aw-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--aw-text);
  margin-bottom: 10px;
}

.aw-service-card__text {
  font-size: 0.9rem;
  color: var(--aw-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.aw-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.aw-tag {
  display: inline-block;
  background: var(--aw-white);
  color: var(--aw-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--aw-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.aw-tag:hover {
  background: var(--aw-accent);
  color: var(--aw-white);
  border-color: var(--aw-accent);
  transform: translateY(-2px);
}

/* Service List */
.aw-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aw-service-card__list li {
  font-size: 0.85rem;
  color: var(--aw-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.aw-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--aw-accent);
  font-weight: 700;
}

.aw-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.aw-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.aw-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.aw-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aw-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.aw-delivery__text {
  font-size: 1rem;
  color: var(--aw-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.aw-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.aw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.aw-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--aw-white);
  border: 2px solid #e0e7ff;
  color: var(--aw-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.aw-step__circle::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.aw-delivery__steps {
  counter-reset: step-counter;
}

.aw-step:hover .aw-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes aw-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--aw-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.aw-delivery__steps > :nth-child(1) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 0s; }
.aw-delivery__steps > :nth-child(3) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 1s; }
.aw-delivery__steps > :nth-child(5) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 2s; }
.aw-delivery__steps > :nth-child(7) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 3s; }
.aw-delivery__steps > :nth-child(9) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 4s; }
.aw-delivery__steps > :nth-child(11) .aw-step__circle { animation: aw-stepGlow 7s ease infinite 5s; }
.aw-delivery__steps > :nth-child(13) .aw-step__circle { animation: aw-stepGlow 7s ease infinite 6s; }

.aw-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: aw-arrowPulse 2s ease infinite;
}

@keyframes aw-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.aw-why {
  padding: 80px 0;
  background: var(--aw-white);
}

.aw-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.aw-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aw-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.aw-why__text {
  font-size: 1rem;
  color: var(--aw-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.aw-why__image img {
  width: 100%;
  border-radius: var(--aw-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.aw-industries {
  padding: 80px 0;
  background: var(--aw-light-bg);
  text-align: center;
}

.aw-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aw-text);
  margin-bottom: 48px;
}

.aw-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.aw-industry {
  background: var(--aw-white);
  border-radius: var(--aw-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--aw-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.aw-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--aw-accent);
}

.aw-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.aw-industry:hover .aw-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.aw-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--aw-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.aw-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.aw-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aw-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.aw-reliable__text {
  font-size: 1rem;
  color: var(--aw-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.aw-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.aw-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--aw-white);
  border: 1px solid var(--aw-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.aw-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--aw-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.aw-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--aw-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.aw-pillar:hover .aw-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.aw-pillar__label {
  font-size: 0.85rem;
  color: var(--aw-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.aw-faq {
  padding: 80px 0;
  background: var(--aw-light-bg);
}

.aw-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.aw-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--aw-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--aw-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--aw-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--aw-text);
  border-bottom: 2.5px solid var(--aw-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--aw-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--aw-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.aw-commitment {
  padding: 60px 0;
  background: var(--aw-white);
}

.aw-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.aw-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aw-text);
  margin-bottom: 16px;
}

.aw-commitment__text {
  font-size: 1rem;
  color: var(--aw-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.aw-cta {
  padding: 80px 0;
  background: var(--aw-dark);
}

.aw-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.aw-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--aw-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.aw-cta__text {
  font-size: 1rem;
  color: var(--aw-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.aw-cta__button {
  display: inline-block;
  background: var(--aw-accent);
  color: var(--aw-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: aw-pulse 2.5s ease infinite;
}

.aw-cta__button:hover {
  background: var(--aw-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.aw-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.aw-services__subtitle {
  font-size: 1rem;
  color: var(--aw-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .aw-hero__title {
    font-size: 2.2rem;
  }

  .aw-about__heading,
  .aw-whoweare__heading {
    font-size: 1.8rem;
  }

  .aw-services__title {
    font-size: 1.8rem;
  }

  .aw-service-card__title {
    font-size: 1rem;
  }

  .aw-delivery__heading {
    font-size: 1.8rem;
  }

  .aw-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .aw-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .aw-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .aw-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .aw-hero {
    padding: 100px 16px 80px;
  }

  .aw-hero__title {
    font-size: 1.7rem;
  }

  .aw-hero__subtitle {
    font-size: 1rem;
  }

  .aw-about__grid,
  .aw-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .aw-about__heading,
  .aw-whoweare__heading {
    font-size: 1.6rem;
  }

  .aw-stats,
  .aw-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .aw-about__content,
  .aw-whoweare__content {
    order: 1;
  }

  .aw-services__grid {
    grid-template-columns: 1fr;
  }

  .aw-services__title {
    font-size: 1.5rem;
  }

  .aw-service-card--wide {
    grid-column: span 1;
  }

  .aw-delivery__heading {
    font-size: 1.5rem;
  }

  .aw-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .aw-step__arrow {
    display: none;
  }

  .aw-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .aw-reliable__heading {
    font-size: 1.5rem;
  }

  .aw-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .aw-why__heading {
    font-size: 1.5rem;
  }

  .aw-industries__heading {
    font-size: 1.5rem;
  }

  .aw-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .aw-faq__heading {
    font-size: 1.3rem;
  }

  .aw-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .aw-animate,
  .aw-animate--left,
  .aw-animate--right,
  .aw-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .aw-hero {
    padding: 90px 14px 60px;
  }

  .aw-hero__title {
    font-size: 1.4rem;
  }

  .aw-hero__subtitle {
    font-size: 0.9rem;
  }

  .aw-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .aw-about,
  .aw-whoweare,
  .aw-services,
  .aw-delivery,
  .aw-reliable,
  .aw-why,
  .aw-industries,
  .aw-faq,
  .aw-commitment,
  .aw-cta {
    padding: 50px 0;
  }

  .aw-about__heading,
  .aw-whoweare__heading {
    font-size: 1.4rem;
  }

  .aw-about__text,
  .aw-whoweare__text {
    font-size: 0.9rem;
  }

  .aw-stats,
  .aw-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .aw-stat {
    padding: 20px 14px;
  }

  .aw-stat__number {
    font-size: 1.8rem;
  }

  .aw-stat__icon {
    font-size: 1.8rem;
  }

  .aw-stat__label {
    font-size: 0.75rem;
  }

  .aw-services__title {
    font-size: 1.3rem;
  }

  .aw-service-card {
    padding: 20px 16px;
  }

  .aw-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .aw-delivery__heading {
    font-size: 1.3rem;
  }

  .aw-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .aw-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .aw-reliable__heading {
    font-size: 1.3rem;
  }

  .aw-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .aw-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .aw-industry {
    padding: 20px 14px;
  }

  .aw-cta__heading {
    font-size: 1.3rem;
  }

  .aw-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (aw-tech)
   ============================================================ */
.aw-tech { padding: 80px 0; background: var(--aw-light-bg); }
.aw-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.aw-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--aw-text); margin-bottom: 20px; line-height: 1.25; }
.aw-tech__text { font-size: 1rem; color: var(--aw-gray); line-height: 1.75; margin-bottom: 14px; }
.aw-tech__content { }
.aw-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.aw-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .aw-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .aw-tech__heading { font-size: 1.6rem; }
  .aw-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .aw-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.aw-faq__subtext {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 32px;
}

.aw-faq__list {
  text-align: left;
}

.aw-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.aw-faq__item summary {
  list-style: none;
}

.aw-faq__item summary::-webkit-details-marker {
  display: none;
}

.aw-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.aw-faq__question:hover {
  color: var(--aw-accent);
}

.aw-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.aw-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.aw-faq__item[open] .aw-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.aw-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.aw-faq__answer p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin: 0;
}



/*FLUTTER STARTS

/* ============================================================
   FLUTTER APP DEVELOPMENT PAGE — flutter-app-development.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --fl-accent: #e8a025;
  --fl-accent-hover: #d4911e;
  --fl-dark: #0b1120;
  --fl-dark-2: #101828;
  --fl-dark-3: #1a2332;
  --fl-white: #ffffff;
  --fl-gray: #6b7280;
  --fl-gray-light: #9ca3af;
  --fl-light-bg: #f8f9fb;
  --fl-light-bg-2: #f1f3f7;
  --fl-text: #444444;
  --fl-text-light: #d1d5db;
  --fl-border: #e5e7eb;
  --fl-radius: 12px;
  --fl-radius-lg: 20px;
  --fl-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --fl-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --fl-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes fl-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes fl-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes fl-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes fl-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes fl-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes fl-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.fl-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: fl-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.fl-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: fl-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.fl-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: fl-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.fl-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: fl-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.fl-stagger > *:nth-child(1) { animation-delay: 0s; }
.fl-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.fl-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.fl-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.fl-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.fl-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.fl-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .fl-animate,
  .fl-animate--left,
  .fl-animate--right,
  .fl-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.fl-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.fl-text-accent {
  color: var(--fl-accent);
}

/* ---------- Shared Checklist ---------- */
.fl-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fl-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--fl-text);
  line-height: 1.5;
}

.fl-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fl-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.fl-hero {
  background: var(--fl-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.fl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.fl-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.fl-hero__breadcrumb {
  font-size: 0.85rem;
  color: #e0e7ff;
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: fl-fadeUp 0.6s ease 0.1s both;
}

.fl-hero__breadcrumb-active {
  color: var(--fl-accent);
}

.fl-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--fl-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: fl-fadeUp 0.7s ease 0.25s both;
}

.fl-hero__title-accent {
  color: var(--fl-accent);
  font-style: italic;
  display: inline-block;
}

.fl-hero__subtitle {
  font-size: 1.3rem;
  color: var(--fl-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: fl-fadeUp 0.7s ease 0.45s both;
}

.fl-hero__desc {
  font-size: 0.95rem;
  color: var(--fl-gray-light);
  font-style: italic;
  animation: fl-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.fl-about {
  padding: 80px 0;
  background: var(--fl-white);
}

.fl-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.fl-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--fl-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.fl-about__text {
  font-size: 1rem;
  color: var(--fl-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.fl-about__text:last-child {
  margin-bottom: 0;
}

.fl-about__image img {
  width: 100%;
  border-radius: var(--fl-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.fl-stats,
.fl-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.fl-stat {
  background: var(--fl-light-bg);
  border-radius: var(--fl-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--fl-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.fl-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--fl-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.fl-stat:hover::before {
  transform: scaleX(1);
}

.fl-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--fl-accent);
}

.fl-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.fl-stat:nth-child(1) .fl-stat__number { animation-delay: 0.2s; }
.fl-stat:nth-child(2) .fl-stat__number { animation-delay: 0.4s; }
.fl-stat:nth-child(3) .fl-stat__number { animation-delay: 0.6s; }
.fl-stat:nth-child(4) .fl-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.fl-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--fl-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.fl-stat--dark {
  background: var(--fl-white);
  border-color: var(--fl-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.fl-whoweare {
  padding: 80px 0;
  background: var(--fl-light-bg);
}

.fl-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.fl-whoweare__image img {
  width: 100%;
  border-radius: var(--fl-radius-lg);
  object-fit: cover;
}

.fl-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--fl-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.fl-whoweare__text {
  font-size: 1rem;
  color: var(--fl-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.fl-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.fl-services {
  padding: 80px 0;
  background: var(--fl-white);
}

.fl-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.fl-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--fl-text);
}

.fl-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.fl-service-card {
  background: var(--fl-light-bg);
  border-radius: var(--fl-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.fl-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--fl-accent);
  background: var(--fl-white);
}

.fl-service-card--wide {
  grid-column: 1 / -1;
}

.fl-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--fl-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.fl-service-card:hover .fl-service-card__badge {
  animation: fl-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.fl-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fl-text);
  margin-bottom: 10px;
}

.fl-service-card__text {
  font-size: 0.9rem;
  color: var(--fl-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.fl-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.fl-tag {
  display: inline-block;
  background: var(--fl-white);
  color: var(--fl-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--fl-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.fl-tag:hover {
  background: var(--fl-accent);
  color: var(--fl-white);
  border-color: var(--fl-accent);
  transform: translateY(-2px);
}

/* Service List */
.fl-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-service-card__list li {
  font-size: 0.85rem;
  color: var(--fl-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.fl-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--fl-accent);
  font-weight: 700;
}

.fl-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.fl-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.fl-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.fl-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fl-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.fl-delivery__text {
  font-size: 1rem;
  color: var(--fl-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.fl-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.fl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.fl-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--fl-white);
  border: 2px solid #e0e7ff;
  color: var(--fl-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.fl-step__circle::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.fl-delivery__steps {
  counter-reset: step-counter;
}

.fl-step:hover .fl-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes fl-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--fl-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.fl-delivery__steps > :nth-child(1) .fl-step__circle  { animation: fl-stepGlow 7s ease infinite 0s; }
.fl-delivery__steps > :nth-child(3) .fl-step__circle  { animation: fl-stepGlow 7s ease infinite 1s; }
.fl-delivery__steps > :nth-child(5) .fl-step__circle  { animation: fl-stepGlow 7s ease infinite 2s; }
.fl-delivery__steps > :nth-child(7) .fl-step__circle  { animation: fl-stepGlow 7s ease infinite 3s; }
.fl-delivery__steps > :nth-child(9) .fl-step__circle  { animation: fl-stepGlow 7s ease infinite 4s; }
.fl-delivery__steps > :nth-child(11) .fl-step__circle { animation: fl-stepGlow 7s ease infinite 5s; }
.fl-delivery__steps > :nth-child(13) .fl-step__circle { animation: fl-stepGlow 7s ease infinite 6s; }

.fl-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: fl-arrowPulse 2s ease infinite;
}

@keyframes fl-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.fl-why {
  padding: 80px 0;
  background: var(--fl-white);
}

.fl-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.fl-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fl-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.fl-why__text {
  font-size: 1rem;
  color: var(--fl-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.fl-why__image img {
  width: 100%;
  border-radius: var(--fl-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.fl-industries {
  padding: 80px 0;
  background: var(--fl-light-bg);
  text-align: center;
}

.fl-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fl-text);
  margin-bottom: 48px;
}

.fl-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fl-industry {
  background: var(--fl-white);
  border-radius: var(--fl-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--fl-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.fl-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--fl-accent);
}

.fl-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.fl-industry:hover .fl-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.fl-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fl-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.fl-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.fl-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fl-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.fl-reliable__text {
  font-size: 1rem;
  color: var(--fl-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.fl-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.fl-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--fl-white);
  border: 1px solid var(--fl-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.fl-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--fl-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.fl-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--fl-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.fl-pillar:hover .fl-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.fl-pillar__label {
  font-size: 0.85rem;
  color: var(--fl-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.fl-faq {
  padding: 80px 0;
  background: var(--fl-light-bg);
}

.fl-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.fl-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--fl-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--fl-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fl-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--fl-text);
  border-bottom: 2.5px solid var(--fl-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--fl-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--fl-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.fl-commitment {
  padding: 60px 0;
  background: var(--fl-white);
}

.fl-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.fl-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fl-text);
  margin-bottom: 16px;
}

.fl-commitment__text {
  font-size: 1rem;
  color: var(--fl-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.fl-cta {
  padding: 80px 0;
  background: var(--fl-dark);
}

.fl-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.fl-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fl-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.fl-cta__text {
  font-size: 1rem;
  color: var(--fl-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.fl-cta__button {
  display: inline-block;
  background: var(--fl-accent);
  color: var(--fl-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: fl-pulse 2.5s ease infinite;
}

.fl-cta__button:hover {
  background: var(--fl-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.fl-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.fl-services__subtitle {
  font-size: 1rem;
  color: var(--fl-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .fl-hero__title {
    font-size: 2.2rem;
  }

  .fl-about__heading,
  .fl-whoweare__heading {
    font-size: 1.8rem;
  }

  .fl-services__title {
    font-size: 1.8rem;
  }

  .fl-service-card__title {
    font-size: 1rem;
  }

  .fl-delivery__heading {
    font-size: 1.8rem;
  }

  .fl-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .fl-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .fl-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .fl-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .fl-hero {
    padding: 100px 16px 80px;
  }

  .fl-hero__title {
    font-size: 1.7rem;
  }

  .fl-hero__subtitle {
    font-size: 1rem;
  }

  .fl-about__grid,
  .fl-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .fl-about__heading,
  .fl-whoweare__heading {
    font-size: 1.6rem;
  }

  .fl-stats,
  .fl-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .fl-about__content,
  .fl-whoweare__content {
    order: 1;
  }

  .fl-services__grid {
    grid-template-columns: 1fr;
  }

  .fl-services__title {
    font-size: 1.5rem;
  }

  .fl-service-card--wide {
    grid-column: span 1;
  }

  .fl-delivery__heading {
    font-size: 1.5rem;
  }

  .fl-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .fl-step__arrow {
    display: none;
  }

  .fl-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .fl-reliable__heading {
    font-size: 1.5rem;
  }

  .fl-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .fl-why__heading {
    font-size: 1.5rem;
  }

  .fl-industries__heading {
    font-size: 1.5rem;
  }

  .fl-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .fl-faq__heading {
    font-size: 1.3rem;
  }

  .fl-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .fl-animate,
  .fl-animate--left,
  .fl-animate--right,
  .fl-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .fl-hero {
    padding: 90px 14px 60px;
  }

  .fl-hero__title {
    font-size: 1.4rem;
  }

  .fl-hero__subtitle {
    font-size: 0.9rem;
  }

  .fl-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .fl-about,
  .fl-whoweare,
  .fl-services,
  .fl-delivery,
  .fl-reliable,
  .fl-why,
  .fl-industries,
  .fl-faq,
  .fl-commitment,
  .fl-cta {
    padding: 50px 0;
  }

  .fl-about__heading,
  .fl-whoweare__heading {
    font-size: 1.4rem;
  }

  .fl-about__text,
  .fl-whoweare__text {
    font-size: 0.9rem;
  }

  .fl-stats,
  .fl-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .fl-stat {
    padding: 20px 14px;
  }

  .fl-stat__number {
    font-size: 1.8rem;
  }

  .fl-stat__icon {
    font-size: 1.8rem;
  }

  .fl-stat__label {
    font-size: 0.75rem;
  }

  .fl-services__title {
    font-size: 1.3rem;
  }

  .fl-service-card {
    padding: 20px 16px;
  }

  .fl-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .fl-delivery__heading {
    font-size: 1.3rem;
  }

  .fl-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .fl-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .fl-reliable__heading {
    font-size: 1.3rem;
  }

  .fl-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .fl-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .fl-industry {
    padding: 20px 14px;
  }

  .fl-cta__heading {
    font-size: 1.3rem;
  }

  .fl-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (fl-tech)
   ============================================================ */
.fl-tech { padding: 80px 0; background: var(--fl-light-bg); }
.fl-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.fl-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--fl-text); margin-bottom: 20px; line-height: 1.25; }
.fl-tech__text { font-size: 1rem; color: var(--fl-gray); line-height: 1.75; margin-bottom: 14px; }
.fl-tech__content { }
.fl-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fl-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .fl-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .fl-tech__heading { font-size: 1.6rem; }
  .fl-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .fl-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.fl-faq__subtext {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 32px;
}

.fl-faq__list {
  text-align: left;
}

.fl-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.fl-faq__item summary {
  list-style: none;
}

.fl-faq__item summary::-webkit-details-marker {
  display: none;
}

.fl-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.fl-faq__question:hover {
  color: var(--fl-accent);
}

.fl-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.fl-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.fl-faq__item[open] .fl-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.fl-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.fl-faq__answer p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin: 0;
}

/*FLUTTER ENDS


/*ANDROID DEVELOPMENT*/

/* ============================================================
   ANDROID APP DEVELOPMENT PAGE — android-app-development.css
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --ad-accent: #e8a025;
  --ad-accent-hover: #d4911e;
  --ad-dark: #0b1120;
  --ad-dark-2: #101828;
  --ad-dark-3: #1a2332;
  --ad-white: #ffffff;
  --ad-gray: #000000;
  --ad-gray-light: #9ca3af;
  --ad-light-bg: #f8f9fb;
  --ad-light-bg-2: #f1f3f7;
  --ad-text: #444444;
  --ad-text-light: #d1d5db;
  --ad-border: #e5e7eb;
  --ad-radius: 12px;
  --ad-radius-lg: 20px;
  --ad-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ad-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ad-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS — Keyframes
   ============================================================ */

/* Fade up from below */
@keyframes ad-fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes ad-fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes ad-fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up pop */
@keyframes ad-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accent underline grow */
@keyframes vm-lineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Pulse glow for CTA */
@keyframes ad-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 160, 37, 0);
  }
}

/* Shimmer for badges */
@keyframes ad-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Float subtle */
@keyframes vm-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS (CSS-only via scroll-timeline)
   Uses animation-timeline: view() for modern browsers,
   graceful fallback for older ones
   ============================================================ */

/* Base: hidden before scroll */
.ad-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: ad-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ad-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: ad-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ad-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: ad-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ad-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: ad-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Staggered children delays */
.ad-stagger > *:nth-child(1) { animation-delay: 0s; }
.ad-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ad-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ad-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ad-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ad-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ad-stagger > *:nth-child(7) { animation-delay: 0.48s; }

/* Fallback for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
  .ad-animate,
  .ad-animate--left,
  .ad-animate--right,
  .ad-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.ad-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.ad-text-accent {
  color: var(--ad-accent);
}

/* ---------- Shared Checklist ---------- */
.ad-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ad-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ad-text);
  line-height: 1.5;
}

.ad-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ad-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.ad-hero {
  background: var(--ad-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.ad-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.ad-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.ad-hero__breadcrumb {
  font-size: 0.85rem;
  color: #e0e7ff;
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: ad-fadeUp 0.6s ease 0.1s both;
}

.ad-hero__breadcrumb-active {
  color: var(--ad-accent);
}

.ad-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ad-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: ad-fadeUp 0.7s ease 0.25s both;
}

.ad-hero__title-accent {
  color: var(--ad-accent);
  font-style: italic;
  display: inline-block;
}

.ad-hero__subtitle {
  font-size: 1.3rem;
  color: var(--ad-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: ad-fadeUp 0.7s ease 0.45s both;
}

.ad-hero__desc {
  font-size: 0.95rem;
  color: var(--ad-gray-light);
  font-style: italic;
  animation: ad-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT / INTRO SECTION
   ============================================================ */
.ad-about {
  padding: 80px 0;
  background: var(--ad-white);
}

.ad-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ad-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ad-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ad-about__text {
  font-size: 1rem;
  color: var(--ad-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ad-about__text:last-child {
  margin-bottom: 0;
}

.ad-about__image img {
  width: 100%;
  border-radius: var(--ad-radius-lg);
  object-fit: cover;
}

/* ============================================================
   STAT COUNTER CARDS
   ============================================================ */
.ad-stats,
.ad-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ad-stat {
  background: var(--ad-light-bg);
  border-radius: var(--ad-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--ad-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.ad-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ad-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.ad-stat:hover::before {
  transform: scaleX(1);
}

.ad-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--ad-accent);
}

.ad-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: vm-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* Stagger each stat card's number */
.ad-stat:nth-child(1) .ad-stat__number { animation-delay: 0.2s; }
.ad-stat:nth-child(2) .ad-stat__number { animation-delay: 0.4s; }
.ad-stat:nth-child(3) .ad-stat__number { animation-delay: 0.6s; }
.ad-stat:nth-child(4) .ad-stat__number { animation-delay: 0.8s; }

@keyframes vm-statPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ad-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--ad-gray);
  font-weight: 500;
  line-height: 1.3;
}

/* Dark variant for Who We Are section */
.ad-stat--dark {
  background: var(--ad-white);
  border-color: var(--ad-border);
}

/* ============================================================
   3. WHO WE ARE SECTION
   ============================================================ */
.ad-whoweare {
  padding: 80px 0;
  background: var(--ad-light-bg);
}

.ad-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ad-whoweare__image img {
  width: 100%;
  border-radius: var(--ad-radius-lg);
  object-fit: cover;
}

.ad-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ad-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ad-whoweare__text {
  font-size: 1rem;
  color: var(--ad-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ad-whoweare__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   4. CORE IT SERVICES SECTION
   ============================================================ */
.ad-services {
  padding: 80px 0;
  background: var(--ad-white);
}

.ad-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.ad-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ad-text);
}

.ad-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Service Card */
.ad-service-card {
  background: var(--ad-light-bg);
  border-radius: var(--ad-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.ad-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--ad-accent);
  background: var(--ad-white);
}

.ad-service-card--wide {
  grid-column: 1 / -1;
}

.ad-service-card__badge {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--color-signature-blue) 30%,
    #60a5fa 50%,
    var(--color-signature-blue) 70%
  );
  background-size: 200% 100%;
  color: var(--ad-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.ad-service-card:hover .ad-service-card__badge {
  animation: ad-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.ad-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ad-text);
  margin-bottom: 10px;
}

.ad-service-card__text {
  font-size: 0.9rem;
  color: var(--ad-gray);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Tags */
.ad-service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ad-tag {
  display: inline-block;
  background: var(--ad-white);
  color: var(--ad-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--ad-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.ad-tag:hover {
  background: var(--ad-accent);
  color: var(--ad-white);
  border-color: var(--ad-accent);
  transform: translateY(-2px);
}

/* Service List */
.ad-service-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ad-service-card__list li {
  font-size: 0.85rem;
  color: var(--ad-gray);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.ad-service-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ad-accent);
  font-weight: 700;
}

.ad-service-card__list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ============================================================
   5. DELIVERY APPROACH SECTION
   ============================================================ */
.ad-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ad-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.ad-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ad-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.ad-delivery__text {
  font-size: 1rem;
  color: var(--ad-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.ad-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.ad-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ad-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ad-white);
  border: 2px solid #e0e7ff;
  color: var(--ad-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.ad-step__circle::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.ad-delivery__steps {
  counter-reset: step-counter;
}

.ad-step:hover .ad-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

/* Sequential glow — 7 steps, 1s each = 7s total cycle */
@keyframes ad-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--ad-white);
  }
}

/* Steps at odd positions (1,3,5,7,9,11,13), arrows at even */
.ad-delivery__steps > :nth-child(1) .ad-step__circle  { animation: ad-stepGlow 7s ease infinite 0s; }
.ad-delivery__steps > :nth-child(3) .ad-step__circle  { animation: ad-stepGlow 7s ease infinite 1s; }
.ad-delivery__steps > :nth-child(5) .ad-step__circle  { animation: ad-stepGlow 7s ease infinite 2s; }
.ad-delivery__steps > :nth-child(7) .ad-step__circle  { animation: ad-stepGlow 7s ease infinite 3s; }
.ad-delivery__steps > :nth-child(9) .ad-step__circle  { animation: ad-stepGlow 7s ease infinite 4s; }
.ad-delivery__steps > :nth-child(11) .ad-step__circle { animation: ad-stepGlow 7s ease infinite 5s; }
.ad-delivery__steps > :nth-child(13) .ad-step__circle { animation: ad-stepGlow 7s ease infinite 6s; }

.ad-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: ad-arrowPulse 2s ease infinite;
}

@keyframes ad-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}
  font-weight: 700;
}

/* ============================================================
   6. WHY CHOOSE US SECTION
   ============================================================ */
.ad-why {
  padding: 80px 0;
  background: var(--ad-white);
}

.ad-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
  max-width: 800px;
}

.ad-why__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ad-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ad-why__text {
  font-size: 1rem;
  color: var(--ad-gray);
  line-height: 1.7;
  margin-bottom: 24px;
}

.ad-why__image img {
  width: 100%;
  border-radius: var(--ad-radius-lg);
  object-fit: cover;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.ad-industries {
  padding: 80px 0;
  background: var(--ad-light-bg);
  text-align: center;
}

.ad-industries__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ad-text);
  margin-bottom: 48px;
}

.ad-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ad-industry {
  background: var(--ad-white);
  border-radius: var(--ad-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--ad-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease;
  cursor: default;
}

.ad-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--ad-accent);
}

.ad-industry__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 14px;
  transition: transform 0.4s ease;
}

.ad-industry:hover .ad-industry__icon {
  transform: scale(1.2) rotate(-5deg);
}

.ad-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ad-text);
}

/* ============================================================
   8. WHAT MAKES US RELIABLE SECTION
   ============================================================ */
.ad-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.ad-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ad-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.ad-reliable__text {
  font-size: 1rem;
  color: var(--ad-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.ad-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.ad-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ad-white);
  border: 1px solid var(--ad-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.ad-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--ad-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.ad-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--ad-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.ad-pillar:hover .ad-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.ad-pillar__label {
  font-size: 0.85rem;
  color: var(--ad-text);
  font-weight: 500;
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.ad-faq {
  padding: 80px 0;
  background: var(--ad-light-bg);
}

.ad-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.ad-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ad-text);
  margin-bottom: 36px;
}

/* Accordion */
.accordion {
  text-align: left;
}

.accordion-item {
  border-bottom: 1px solid var(--ad-border);
}

.accordion-item button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ad-text);
  text-align: left;
  gap: 16px;
}

.accordion-item button .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Chevron using borders — points UP by default */
.accordion-item button .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--ad-text);
  border-bottom: 2.5px solid var(--ad-text);
  transform: translate(-50%, -25%) rotate(-135deg);
  transition: transform 0.3s ease;
}

/* No second pseudo-element needed */
.accordion-item button .icon::after {
  display: none;
}

/* Rotate chevron to point DOWN when expanded */
.accordion-item button[aria-expanded="true"] .icon::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ad-transition);
}

.accordion-item button[aria-expanded="true"] + .accordion-content {
  max-height: 300px;
}

.accordion-content p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  color: var(--ad-gray);
  line-height: 1.7;
}

/* ============================================================
   10. COMMITMENT SECTION
   ============================================================ */
.ad-commitment {
  padding: 60px 0;
  background: var(--ad-white);
}

.ad-commitment__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.ad-commitment__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ad-text);
  margin-bottom: 16px;
}

.ad-commitment__text {
  font-size: 1rem;
  color: var(--ad-gray);
  line-height: 1.75;
}

/* ============================================================
   11. CTA SECTION
   ============================================================ */
.ad-cta {
  padding: 80px 0;
  background: var(--ad-dark);
}

.ad-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.ad-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ad-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ad-cta__text {
  font-size: 1rem;
  color: var(--ad-gray-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

.ad-cta__button {
  display: inline-block;
  background: var(--ad-accent);
  color: var(--ad-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: ad-pulse 2.5s ease infinite;
}

.ad-cta__button:hover {
  background: var(--ad-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

/* ============================================================
   RESPONSIVE STYLES → See responsive.css
   ============================================================ */

/* ============================================================
   VISION STAT ICON CARDS (replaces number stats in vision section)
   ============================================================ */
.ad-stat__icon {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Services subtitle */
.ad-services__subtitle {
  font-size: 1rem;
  color: var(--ad-gray);
  margin-top: 12px;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — Vision & Mission
   ============================================================ */

/* ---------- 1024px — Tablet ---------- */
@media (max-width: 1024px) {
  .ad-hero__title {
    font-size: 2.2rem;
  }

  .ad-about__heading,
  .ad-whoweare__heading {
    font-size: 1.8rem;
  }

  .ad-services__title {
    font-size: 1.8rem;
  }

  .ad-service-card__title {
    font-size: 1rem;
  }

  .ad-delivery__heading {
    font-size: 1.8rem;
  }

  .ad-step__circle {
    width: 85px;
    height: 85px;
    font-size: 0.62rem;
    border-radius: 14px;
    padding: 6px;
  }

  .ad-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.58rem;
  }

  .ad-step__arrow {
    font-size: 1rem;
    margin: 0 1px;
  }

  .ad-reliable__heading {
    font-size: 1.8rem;
  }
}

/* ---------- 768px — Mobile ---------- */
@media (max-width: 768px) {
  .ad-hero {
    padding: 100px 16px 80px;
  }

  .ad-hero__title {
    font-size: 1.7rem;
  }

  .ad-hero__subtitle {
    font-size: 1rem;
  }

  .ad-about__grid,
  .ad-whoweare__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ad-about__heading,
  .ad-whoweare__heading {
    font-size: 1.6rem;
  }

  .ad-stats,
  .ad-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    order: 2;
  }

  .ad-about__content,
  .ad-whoweare__content {
    order: 1;
  }

  .ad-services__grid {
    grid-template-columns: 1fr;
  }

  .ad-services__title {
    font-size: 1.5rem;
  }

  .ad-service-card--wide {
    grid-column: span 1;
  }

  .ad-delivery__heading {
    font-size: 1.5rem;
  }

  .ad-delivery__steps {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .ad-step__arrow {
    display: none;
  }

  .ad-step__circle {
    width: 90px;
    height: 90px;
    font-size: 0.7rem;
    border-radius: 16px;
  }

  .ad-reliable__heading {
    font-size: 1.5rem;
  }

  .ad-reliable__pillars {
    flex-wrap: wrap;
    gap: 12px;
  }

  .ad-why__heading {
    font-size: 1.5rem;
  }

  .ad-industries__heading {
    font-size: 1.5rem;
  }

  .ad-industries__grid {
    grid-template-columns: 1fr 1fr;
  }

  .ad-faq__heading {
    font-size: 1.3rem;
  }

  .ad-cta__heading {
    font-size: 1.5rem;
  }

  /* Disable scroll animations on mobile for performance */
  .ad-animate,
  .ad-animate--left,
  .ad-animate--right,
  .ad-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 480px — Small Mobile ---------- */
@media (max-width: 480px) {
  .ad-hero {
    padding: 90px 14px 60px;
  }

  .ad-hero__title {
    font-size: 1.4rem;
  }

  .ad-hero__subtitle {
    font-size: 0.9rem;
  }

  .ad-hero__breadcrumb {
    font-size: 0.75rem;
  }

  .ad-about,
  .ad-whoweare,
  .ad-services,
  .ad-delivery,
  .ad-reliable,
  .ad-why,
  .ad-industries,
  .ad-faq,
  .ad-commitment,
  .ad-cta {
    padding: 50px 0;
  }

  .ad-about__heading,
  .ad-whoweare__heading {
    font-size: 1.4rem;
  }

  .ad-about__text,
  .ad-whoweare__text {
    font-size: 0.9rem;
  }

  .ad-stats,
  .ad-whoweare__stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ad-stat {
    padding: 20px 14px;
  }

  .ad-stat__number {
    font-size: 1.8rem;
  }

  .ad-stat__icon {
    font-size: 1.8rem;
  }

  .ad-stat__label {
    font-size: 0.75rem;
  }

  .ad-services__title {
    font-size: 1.3rem;
  }

  .ad-service-card {
    padding: 20px 16px;
  }

  .ad-service-card__badge {
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .ad-delivery__heading {
    font-size: 1.3rem;
  }

  .ad-step__circle {
    width: 80px;
    height: 80px;
    font-size: 0.65rem;
    border-radius: 14px;
  }

  .ad-step__circle::before {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    top: -8px;
    right: -8px;
  }

  .ad-reliable__heading {
    font-size: 1.3rem;
  }

  .ad-pillar {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .ad-industries__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ad-industry {
    padding: 20px 14px;
  }

  .ad-cta__heading {
    font-size: 1.3rem;
  }

  .ad-cta__button {
    font-size: 0.9rem;
    padding: 14px 28px;
  }
}

/* ============================================================
   TECHNOLOGIES SECTION (ad-tech)
   ============================================================ */
.ad-tech { padding: 80px 0; background: var(--ad-light-bg); }
.ad-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ad-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ad-text); margin-bottom: 20px; line-height: 1.25; }
.ad-tech__text { font-size: 1rem; color: var(--ad-gray); line-height: 1.75; margin-bottom: 14px; }
.ad-tech__content { }
.ad-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ad-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 768px) {
  .ad-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ad-tech__heading { font-size: 1.6rem; }
  .ad-tech__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .ad-tech__heading { font-size: 1.4rem; }
}

/* ===== FAQ DETAILS/SUMMARY STYLES ===== */
.ad-faq__subtext {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 32px;
}

.ad-faq__list {
  text-align: left;
}

.ad-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.ad-faq__item summary {
  list-style: none;
}

.ad-faq__item summary::-webkit-details-marker {
  display: none;
}

.ad-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.ad-faq__question:hover {
  color: var(--ad-accent);
}

.ad-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.ad-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.ad-faq__item[open] .ad-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.ad-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.ad-faq__answer p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin: 0;
}

/*END ANDROID DEVELOPMENT




/*IPAD DEVE

/* ============================================================
   iPAD APP DEVELOPMENT PAGE — ipad-app-development.css
   Prefix: ip-
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --ip-accent: #e8a025;
  --ip-accent-hover: #d4911e;
  --ip-dark: #0b1120;
  --ip-dark-2: #101828;
  --ip-dark-3: #1a2332;
  --ip-white: #ffffff;
  --ip-gray: #000000;
  --ip-gray-light: #000000;
  --ip-light-bg: #f8f9fb;
  --ip-light-bg-2: #f1f3f7;
  --ip-text: #444444;
  --ip-text-light: #d1d5db;
  --ip-border: #e5e7eb;
  --ip-radius: 12px;
  --ip-radius-lg: 20px;
  --ip-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ip-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ip-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes ip-fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes ip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(232, 160, 37, 0); }
}

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

@keyframes ip-statPop {
  0% { opacity: 0; transform: scale(0) translateY(10px); }
  60% { opacity: 1; transform: scale(1.15) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes ip-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--ip-white);
  }
}

@keyframes ip-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================================ */

.ip-animate {
  opacity: 0;
  transform: translateY(40px);
  animation: ip-fadeUp 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ip-animate--left {
  opacity: 0;
  transform: translateX(-40px);
  animation: ip-fadeLeft 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ip-animate--right {
  opacity: 0;
  transform: translateX(40px);
  animation: ip-fadeRight 0.8s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.ip-animate--scale {
  opacity: 0;
  transform: scale(0.85);
  animation: ip-scaleIn 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

.ip-stagger > *:nth-child(1) { animation-delay: 0s; }
.ip-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ip-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ip-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ip-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ip-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ip-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .ip-animate,
  .ip-animate--left,
  .ip-animate--right,
  .ip-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- Container ---------- */
.ip-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Shared Accent ---------- */
.ip-text-accent {
  color: var(--ip-accent);
}

/* ---------- Shared Checklist ---------- */
.ip-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ip-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ip-text);
  line-height: 1.5;
}

.ip-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ip-accent);
}

/* ============================================================
   1. HERO SECTION
   ============================================================ */
.ip-hero {
  background: var(--ip-dark);
  text-align: center;
  padding: 140px 20px 120px;
  position: relative;
  overflow: hidden;
}

.ip-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 30% 50%,
      rgba(232, 160, 37, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(59, 130, 246, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.ip-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.ip-hero__breadcrumb {
  font-size: 0.85rem;
  color: #e0e7ff;
  margin-bottom: 24px;
  letter-spacing: 0.3px;
  animation: ip-fadeUp 0.6s ease 0.1s both;
}

.ip-hero__breadcrumb-active {
  color: var(--ip-accent);
}

.ip-hero__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ip-white);
  margin-bottom: 20px;
  line-height: 1.2;
  animation: ip-fadeUp 0.7s ease 0.25s both;
}

.ip-hero__title-accent {
  color: var(--ip-accent);
  font-style: italic;
  display: inline-block;
}

.ip-hero__subtitle {
  font-size: 1.3rem;
  color: var(--ip-white);
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: ip-fadeUp 0.7s ease 0.45s both;
}

.ip-hero__desc {
  font-size: 0.95rem;
  color: #e0e7ff;
  font-style: italic;
  animation: ip-fadeUp 0.7s ease 0.6s both;
}

/* ============================================================
   2. ABOUT SECTION
   ============================================================ */
.ip-about {
  padding: 80px 0;
  background: var(--ip-white);
}

.ip-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ip-about__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ip-about__text {
  font-size: 1rem;
  color: var(--ip-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ip-about__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.ip-stats,
.ip-whoweare__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ip-stat {
  background: var(--ip-light-bg);
  border-radius: var(--ip-radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--ip-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}

.ip-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ip-accent), var(--color-signature-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.ip-stat:hover::before {
  transform: scaleX(1);
}

.ip-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--ip-accent);
}

.ip-stat__number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-signature-blue);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0) translateY(10px);
  animation: ip-statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

.ip-stat:nth-child(1) .ip-stat__number { animation-delay: 0.2s; }
.ip-stat:nth-child(2) .ip-stat__number { animation-delay: 0.4s; }
.ip-stat:nth-child(3) .ip-stat__number { animation-delay: 0.6s; }
.ip-stat:nth-child(4) .ip-stat__number { animation-delay: 0.8s; }

.ip-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--ip-gray);
  font-weight: 500;
  line-height: 1.3;
}

.ip-stat--dark {
  background: var(--ip-white);
  border-color: var(--ip-border);
}

.ip-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 1.8rem;
}

/* ============================================================
   3. EXPERTISE SECTION
   ============================================================ */
.ip-whoweare {
  padding: 80px 0;
  background: var(--ip-light-bg);
}

.ip-whoweare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ip-whoweare__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ip-whoweare__text {
  font-size: 1rem;
  color: var(--ip-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

/* ============================================================
   4. SERVICES SECTION
   ============================================================ */
.ip-services {
  padding: 80px 0;
  background: var(--ip-white);
}

.ip-services__header {
  text-align: center;
  margin-bottom: 48px;
}

.ip-services__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ip-text);
}

.ip-services__subtitle {
  font-size: 1rem;
  color: var(--ip-gray);
  margin-top: 12px;
  line-height: 1.6;
}

.ip-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ip-service-card {
  background: var(--ip-light-bg);
  border-radius: var(--ip-radius);
  padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease,
    border-color 0.4s ease, background 0.4s ease;
}

.ip-service-card:hover {
  box-shadow: 0 12px 36px rgba(232, 160, 37, 0.12);
  transform: translateY(-5px);
  border-color: var(--ip-accent);
  background: var(--ip-white);
}

.ip-service-card--wide {
  grid-column: 1 / -1;
}

.ip-service-card__badge {
  display: inline-block;
  background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%;
  color: var(--ip-white);
  font-size: 0.75rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.ip-service-card:hover .ip-service-card__badge {
  animation: ip-shimmer 1.5s ease infinite;
  transform: scale(1.1);
}

.ip-service-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ip-text);
  margin-bottom: 10px;
}

.ip-service-card__text {
  font-size: 0.9rem;
  color: var(--ip-gray);
  line-height: 1.65;
  margin-bottom: 0;
}

/* ============================================================
   5. DELIVERY SECTION
   ============================================================ */
.ip-delivery {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ip-delivery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

.ip-delivery__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.ip-delivery__text {
  font-size: 1rem;
  color: var(--ip-gray);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.ip-delivery__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 1;
  counter-reset: step-counter;
}

.ip-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ip-step__circle {
  width: 95px;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ip-white);
  border: 2px solid #e0e7ff;
  color: var(--ip-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 18px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transition: all 0.4s ease;
}

.ip-step__circle::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.ip-step:hover .ip-step__circle {
  transform: translateY(-6px);
  border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

.ip-delivery__steps > :nth-child(1) .ip-step__circle  { animation: ip-stepGlow 7s ease infinite 0s; }
.ip-delivery__steps > :nth-child(3) .ip-step__circle  { animation: ip-stepGlow 7s ease infinite 1s; }
.ip-delivery__steps > :nth-child(5) .ip-step__circle  { animation: ip-stepGlow 7s ease infinite 2s; }
.ip-delivery__steps > :nth-child(7) .ip-step__circle  { animation: ip-stepGlow 7s ease infinite 3s; }
.ip-delivery__steps > :nth-child(9) .ip-step__circle  { animation: ip-stepGlow 7s ease infinite 4s; }
.ip-delivery__steps > :nth-child(11) .ip-step__circle { animation: ip-stepGlow 7s ease infinite 5s; }
.ip-delivery__steps > :nth-child(13) .ip-step__circle { animation: ip-stepGlow 7s ease infinite 6s; }

.ip-step__arrow {
  color: var(--color-signature-blue);
  font-size: 1.2rem;
  margin: 0 2px;
  font-weight: 300;
  opacity: 0.5;
  display: flex;
  align-items: center;
  animation: ip-arrowPulse 2s ease infinite;
}

/* ============================================================
   6. RELIABLE / WHY CHOOSE SECTION
   ============================================================ */
.ip-reliable {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%);
}

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

.ip-reliable__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 18px;
  line-height: 1.35;
}

.ip-reliable__text {
  font-size: 1rem;
  color: var(--ip-gray);
  line-height: 1.7;
  margin-bottom: 40px;
}

.ip-reliable__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.ip-pillar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ip-white);
  border: 1px solid var(--ip-border);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.ip-pillar:hover {
  background: rgba(232, 160, 37, 0.06);
  border-color: var(--ip-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 160, 37, 0.12);
}

.ip-pillar__dot {
  width: 8px;
  height: 8px;
  background: var(--ip-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.ip-pillar:hover .ip-pillar__dot {
  box-shadow: 0 0 8px rgba(232, 160, 37, 0.6);
}

.ip-pillar__label {
  font-size: 0.85rem;
  color: var(--ip-text);
  font-weight: 500;
}

/* ============================================================
   7. INDUSTRIES SECTION
   ============================================================ */
.ip-industries {
  padding: 80px 0;
  background: var(--ip-light-bg);
  text-align: center;
}

.ip-industries__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 48px;
}

.ip-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ip-industry {
  background: var(--ip-white);
  border-radius: var(--ip-radius);
  padding: 32px 20px;
  text-align: center;
  border: 1px solid var(--ip-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
  cursor: default;
}

.ip-industry:hover {
  box-shadow: 0 10px 30px rgba(232, 160, 37, 0.1);
  transform: translateY(-5px);
  border-color: var(--ip-accent);
}

.ip-industry__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 2rem;
}

.ip-industry__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ip-text);
}

/* ============================================================
   8. TECHNOLOGIES SECTION
   ============================================================ */
.ip-tech {
  padding: 80px 0;
  background: var(--ip-white);
}

.ip-tech__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.ip-tech__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ip-tech__text {
  font-size: 1rem;
  color: var(--ip-gray);
  line-height: 1.75;
  margin-bottom: 14px;
}

.ip-tech__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.ip-tech__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ip-tag {
  display: inline-block;
  background: var(--ip-light-bg);
  color: var(--ip-text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--ip-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ip-tag:hover {
  background: var(--ip-accent);
  color: var(--ip-white);
  border-color: var(--ip-accent);
  transform: translateY(-2px);
}

/* ============================================================
   9. FAQ SECTION
   ============================================================ */
.ip-faq {
  padding: 80px 0;
  background: var(--ip-light-bg);
}

.ip-faq__wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.ip-faq__heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 12px;
}

.ip-faq__subtext {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 32px;
}

.ip-faq__list {
  text-align: left;
}

.ip-faq__item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.ip-faq__item summary {
  list-style: none;
}

.ip-faq__item summary::-webkit-details-marker {
  display: none;
}

.ip-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.ip-faq__question:hover {
  color: var(--ip-accent);
}

.ip-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.ip-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg);
  transition: transform 0.3s ease;
}

.ip-faq__item[open] .ip-faq__chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

.ip-faq__answer {
  padding: 0 0 18px;
  overflow: hidden;
}

.ip-faq__answer p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   10. CTA SECTION
   ============================================================ */
.ip-cta {
  padding: 80px 0;
  background: var(--ip-dark);
}

.ip-cta__inner {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.ip-cta__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ip-white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.ip-cta__text {
  font-size: 1rem;
  color: #e0e7ff;
  line-height: 1.7;
  margin-bottom: 32px;
}

.ip-cta__button {
  display: inline-block;
  background: var(--ip-accent);
  color: var(--ip-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: ip-pulse 2.5s ease infinite;
}

.ip-cta__button:hover {
  background: var(--ip-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(232, 160, 37, 0.35);
  animation: none;
}

button.ip-cta__button {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .ip-hero__title { font-size: 2.2rem; }
  .ip-about__heading, .ip-whoweare__heading { font-size: 1.8rem; }
  .ip-services__title { font-size: 1.8rem; }
  .ip-delivery__heading { font-size: 1.8rem; }
  .ip-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .ip-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .ip-step__arrow { font-size: 1rem; margin: 0 1px; }
  .ip-reliable__heading { font-size: 1.8rem; }
  .ip-tech__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .ip-hero { padding: 100px 16px 80px; }
  .ip-hero__title { font-size: 1.7rem; }
  .ip-hero__subtitle { font-size: 1rem; }
  .ip-about__grid, .ip-whoweare__grid { grid-template-columns: 1fr; gap: 30px; }
  .ip-about__heading, .ip-whoweare__heading { font-size: 1.6rem; }
  .ip-stats, .ip-whoweare__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .ip-about__content, .ip-whoweare__content { order: 1; }
  .ip-services__grid { grid-template-columns: 1fr; }
  .ip-services__title { font-size: 1.5rem; }
  .ip-service-card--wide { grid-column: span 1; }
  .ip-delivery__heading { font-size: 1.5rem; }
  .ip-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ip-step__arrow { display: none; }
  .ip-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .ip-reliable__heading { font-size: 1.5rem; }
  .ip-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .ip-industries__title { font-size: 1.5rem; }
  .ip-industries__grid { grid-template-columns: 1fr 1fr; }
  .ip-faq__heading { font-size: 1.3rem; }
  .ip-cta__heading { font-size: 1.5rem; }
  .ip-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ip-tech__heading { font-size: 1.6rem; }
  .ip-tech__stats { grid-template-columns: 1fr 1fr; }

  .ip-animate, .ip-animate--left, .ip-animate--right, .ip-animate--scale {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 480px) {
  .ip-hero { padding: 90px 14px 60px; }
  .ip-hero__title { font-size: 1.4rem; }
  .ip-hero__subtitle { font-size: 0.9rem; }
  .ip-hero__breadcrumb { font-size: 0.75rem; }
  .ip-about, .ip-whoweare, .ip-services, .ip-delivery, .ip-reliable,
  .ip-industries, .ip-faq, .ip-cta, .ip-tech { padding: 50px 0; }
  .ip-about__heading, .ip-whoweare__heading { font-size: 1.4rem; }
  .ip-about__text, .ip-whoweare__text { font-size: 0.9rem; }
  .ip-stats, .ip-whoweare__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ip-stat { padding: 20px 14px; }
  .ip-stat__number { font-size: 1.8rem; }
  .ip-stat__label { font-size: 0.75rem; }
  .ip-services__title { font-size: 1.3rem; }
  .ip-service-card { padding: 20px 16px; }
  .ip-delivery__heading { font-size: 1.3rem; }
  .ip-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .ip-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .ip-reliable__heading { font-size: 1.3rem; }
  .ip-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .ip-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ip-industry { padding: 20px 14px; }
  .ip-cta__heading { font-size: 1.3rem; }
  .ip-cta__button { font-size: 0.9rem; padding: 14px 28px; }
  .ip-tech__heading { font-size: 1.4rem; }
}
/*END OF IPAD DEVELOPMENT


/*start REACT NATIVE
/* ============================================================
   REACT NATIVE APP DEVELOPMENT PAGE — react-native-app-development.css
   Prefix: rn-
   ============================================================ */

:root {
  --rn-accent: #e8a025;
  --rn-accent-hover: #d4911e;
  --rn-dark: #0b1120;
  --rn-dark-2: #101828;
  --rn-dark-3: #1a2332;
  --rn-white: #ffffff;
  --rn-gray: #000000;
  --rn-gray-light: #000000;
  --rn-light-bg: #f8f9fb;
  --rn-light-bg-2: #f1f3f7;
  --rn-text: #444444;
  --rn-text-light: #d1d5db;
  --rn-border: #e5e7eb;
  --rn-radius: 12px;
  --rn-radius-lg: 20px;
  --rn-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --rn-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --rn-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes rn-fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rn-fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes rn-fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes rn-scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 160, 37, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(232, 160, 37, 0); }
}
@keyframes rn-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes rn-statPop {
  0% { opacity: 0; transform: scale(0) translateY(10px); }
  60% { opacity: 1; transform: scale(1.15) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rn-stepGlow {
  0%, 10% {
    border-color: var(--color-signature-blue);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
  }
  22%, 100% {
    border-color: #e0e7ff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(0) scale(1);
    background: var(--rn-white);
  }
}
@keyframes rn-arrowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(3px); }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================================ */
.rn-animate {
  opacity: 0; transform: translateY(40px);
  animation: rn-fadeUp 0.8s ease forwards;
  animation-timeline: view(); animation-range: entry 0% entry 30%;
}
.rn-animate--left {
  opacity: 0; transform: translateX(-40px);
  animation: rn-fadeLeft 0.8s ease forwards;
  animation-timeline: view(); animation-range: entry 0% entry 30%;
}
.rn-animate--right {
  opacity: 0; transform: translateX(40px);
  animation: rn-fadeRight 0.8s ease forwards;
  animation-timeline: view(); animation-range: entry 0% entry 30%;
}
.rn-animate--scale {
  opacity: 0; transform: scale(0.85);
  animation: rn-scaleIn 0.7s ease forwards;
  animation-timeline: view(); animation-range: entry 0% entry 25%;
}

.rn-stagger > *:nth-child(1) { animation-delay: 0s; }
.rn-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.rn-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.rn-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.rn-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.rn-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.rn-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .rn-animate, .rn-animate--left, .rn-animate--right, .rn-animate--scale {
    opacity: 1; transform: none; animation: none;
  }
}

/* ---------- Container ---------- */
.rn-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.rn-text-accent { color: var(--rn-accent); }

/* ---------- Checklist ---------- */
.rn-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rn-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--rn-text); line-height: 1.5; }
.rn-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--rn-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.rn-hero {
  background: var(--rn-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.rn-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.rn-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.rn-hero__breadcrumb { font-size: 0.85rem; color: #e0e7ff; margin-bottom: 24px; letter-spacing: 0.3px; animation: rn-fadeUp 0.6s ease 0.1s both; }
.rn-hero__breadcrumb-active { color: var(--rn-accent); }
.rn-hero__title { font-size: 3rem; font-weight: 700; color: var(--rn-white); margin-bottom: 20px; line-height: 1.2; animation: rn-fadeUp 0.7s ease 0.25s both; }
.rn-hero__title-accent { color: var(--rn-accent); font-style: italic; display: inline-block; }
.rn-hero__subtitle { font-size: 1.3rem; color: var(--rn-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: rn-fadeUp 0.7s ease 0.45s both; }
.rn-hero__desc { font-size: 0.95rem; color: #e0e7ff; font-style: italic; animation: rn-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.rn-about { padding: 80px 0; background: var(--rn-white); }
.rn-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.rn-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--rn-text); margin-bottom: 20px; line-height: 1.25; }
.rn-about__text { font-size: 1rem; color: var(--rn-gray); line-height: 1.75; margin-bottom: 14px; }
.rn-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.rn-stats, .rn-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rn-stat {
  background: var(--rn-light-bg); border-radius: var(--rn-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--rn-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.rn-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--rn-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.rn-stat:hover::before { transform: scaleX(1); }
.rn-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--rn-accent); }
.rn-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: rn-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.rn-stat:nth-child(1) .rn-stat__number { animation-delay: 0.2s; }
.rn-stat:nth-child(2) .rn-stat__number { animation-delay: 0.4s; }
.rn-stat:nth-child(3) .rn-stat__number { animation-delay: 0.6s; }
.rn-stat:nth-child(4) .rn-stat__number { animation-delay: 0.8s; }
.rn-stat__label { display: block; font-size: 0.82rem; color: var(--rn-gray); font-weight: 500; line-height: 1.3; }
.rn-stat--dark { background: var(--rn-white); border-color: var(--rn-border); }
.rn-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.rn-whoweare { padding: 80px 0; background: var(--rn-light-bg); }
.rn-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.rn-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--rn-text); margin-bottom: 20px; line-height: 1.25; }
.rn-whoweare__text { font-size: 1rem; color: var(--rn-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.rn-services { padding: 80px 0; background: var(--rn-white); }
.rn-services__header { text-align: center; margin-bottom: 48px; }
.rn-services__title { font-size: 2.2rem; font-weight: 700; color: var(--rn-text); }
.rn-services__subtitle { font-size: 1rem; color: var(--rn-gray); margin-top: 12px; line-height: 1.6; }
.rn-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rn-service-card {
  background: var(--rn-light-bg); border-radius: var(--rn-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.rn-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--rn-accent); background: var(--rn-white); }
.rn-service-card--wide { grid-column: 1 / -1; }
.rn-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--rn-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.rn-service-card:hover .rn-service-card__badge { animation: rn-shimmer 1.5s ease infinite; transform: scale(1.1); }
.rn-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--rn-text); margin-bottom: 10px; }
.rn-service-card__text { font-size: 0.9rem; color: var(--rn-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.rn-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.rn-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.rn-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--rn-text); margin-bottom: 14px; position: relative; z-index: 1; }
.rn-delivery__text { font-size: 1rem; color: var(--rn-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.rn-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.rn-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.rn-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--rn-white); border: 2px solid #e0e7ff; color: var(--rn-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.rn-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.rn-step:hover .rn-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.rn-delivery__steps > :nth-child(1) .rn-step__circle  { animation: rn-stepGlow 7s ease infinite 0s; }
.rn-delivery__steps > :nth-child(3) .rn-step__circle  { animation: rn-stepGlow 7s ease infinite 1s; }
.rn-delivery__steps > :nth-child(5) .rn-step__circle  { animation: rn-stepGlow 7s ease infinite 2s; }
.rn-delivery__steps > :nth-child(7) .rn-step__circle  { animation: rn-stepGlow 7s ease infinite 3s; }
.rn-delivery__steps > :nth-child(9) .rn-step__circle  { animation: rn-stepGlow 7s ease infinite 4s; }
.rn-delivery__steps > :nth-child(11) .rn-step__circle { animation: rn-stepGlow 7s ease infinite 5s; }
.rn-delivery__steps > :nth-child(13) .rn-step__circle { animation: rn-stepGlow 7s ease infinite 6s; }
.rn-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: rn-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.rn-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.rn-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.rn-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--rn-text); margin-bottom: 18px; line-height: 1.35; }
.rn-reliable__text { font-size: 1rem; color: var(--rn-gray); line-height: 1.7; margin-bottom: 40px; }
.rn-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.rn-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--rn-white);
  border: 1px solid var(--rn-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.rn-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--rn-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.rn-pillar__dot { width: 8px; height: 8px; background: var(--rn-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.rn-pillar:hover .rn-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.rn-pillar__label { font-size: 0.85rem; color: var(--rn-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.rn-industries { padding: 80px 0; background: var(--rn-light-bg); text-align: center; }
.rn-industries__title { font-size: 2rem; font-weight: 700; color: var(--rn-text); margin-bottom: 48px; }
.rn-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rn-industry {
  background: var(--rn-white); border-radius: var(--rn-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--rn-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.rn-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--rn-accent); }
.rn-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.rn-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--rn-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.rn-tech { padding: 80px 0; background: var(--rn-white); }
.rn-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.rn-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--rn-text); margin-bottom: 20px; line-height: 1.25; }
.rn-tech__text { font-size: 1rem; color: var(--rn-gray); line-height: 1.75; margin-bottom: 14px; }
.rn-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.rn-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rn-tag {
  display: inline-block; background: var(--rn-light-bg); color: var(--rn-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--rn-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.rn-tag:hover { background: var(--rn-accent); color: var(--rn-white); border-color: var(--rn-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.rn-faq { padding: 80px 0; background: var(--rn-light-bg); }
.rn-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.rn-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--rn-text); margin-bottom: 12px; }
.rn-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.rn-faq__list { text-align: left; }
.rn-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.rn-faq__item summary { list-style: none; }
.rn-faq__item summary::-webkit-details-marker { display: none; }
.rn-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.rn-faq__question:hover { color: var(--rn-accent); }
.rn-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.rn-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.rn-faq__item[open] .rn-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.rn-faq__answer { padding: 0 0 18px; overflow: hidden; }
.rn-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.rn-cta { padding: 80px 0; background: var(--rn-dark); }
.rn-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.rn-cta__heading { font-size: 2rem; font-weight: 700; color: var(--rn-white); margin-bottom: 16px; line-height: 1.3; }
.rn-cta__text { font-size: 1rem; color: #e0e7ff; line-height: 1.7; margin-bottom: 32px; }
.rn-cta__button {
  display: inline-block; background: var(--rn-accent); color: var(--rn-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: rn-pulse 2.5s ease infinite;
}
.rn-cta__button:hover { background: var(--rn-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.rn-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .rn-hero__title { font-size: 2.2rem; }
  .rn-about__heading, .rn-whoweare__heading { font-size: 1.8rem; }
  .rn-services__title { font-size: 1.8rem; }
  .rn-delivery__heading { font-size: 1.8rem; }
  .rn-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .rn-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .rn-step__arrow { font-size: 1rem; margin: 0 1px; }
  .rn-reliable__heading { font-size: 1.8rem; }
  .rn-tech__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .rn-hero { padding: 100px 16px 80px; }
  .rn-hero__title { font-size: 1.7rem; }
  .rn-hero__subtitle { font-size: 1rem; }
  .rn-about__grid, .rn-whoweare__grid { grid-template-columns: 1fr; gap: 30px; }
  .rn-about__heading, .rn-whoweare__heading { font-size: 1.6rem; }
  .rn-stats, .rn-whoweare__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .rn-about__content, .rn-whoweare__content { order: 1; }
  .rn-services__grid { grid-template-columns: 1fr; }
  .rn-services__title { font-size: 1.5rem; }
  .rn-service-card--wide { grid-column: span 1; }
  .rn-delivery__heading { font-size: 1.5rem; }
  .rn-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .rn-step__arrow { display: none; }
  .rn-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .rn-reliable__heading { font-size: 1.5rem; }
  .rn-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .rn-industries__title { font-size: 1.5rem; }
  .rn-industries__grid { grid-template-columns: 1fr 1fr; }
  .rn-faq__heading { font-size: 1.3rem; }
  .rn-cta__heading { font-size: 1.5rem; }
  .rn-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .rn-tech__heading { font-size: 1.6rem; }
  .rn-tech__stats { grid-template-columns: 1fr 1fr; }

  .rn-animate, .rn-animate--left, .rn-animate--right, .rn-animate--scale {
    opacity: 1; transform: none; animation: none;
  }
}

@media (max-width: 480px) {
  .rn-hero { padding: 90px 14px 60px; }
  .rn-hero__title { font-size: 1.4rem; }
  .rn-hero__subtitle { font-size: 0.9rem; }
  .rn-hero__breadcrumb { font-size: 0.75rem; }
  .rn-about, .rn-whoweare, .rn-services, .rn-delivery, .rn-reliable,
  .rn-industries, .rn-faq, .rn-cta, .rn-tech { padding: 50px 0; }
  .rn-about__heading, .rn-whoweare__heading { font-size: 1.4rem; }
  .rn-about__text, .rn-whoweare__text { font-size: 0.9rem; }
  .rn-stats, .rn-whoweare__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rn-stat { padding: 20px 14px; }
  .rn-stat__number { font-size: 1.8rem; }
  .rn-stat__label { font-size: 0.75rem; }
  .rn-services__title { font-size: 1.3rem; }
  .rn-service-card { padding: 20px 16px; }
  .rn-delivery__heading { font-size: 1.3rem; }
  .rn-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .rn-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .rn-reliable__heading { font-size: 1.3rem; }
  .rn-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .rn-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rn-industry { padding: 20px 14px; }
  .rn-cta__heading { font-size: 1.3rem; }
  .rn-cta__button { font-size: 0.9rem; padding: 14px 28px; }
  .rn-tech__heading { font-size: 1.4rem; }
}

/* end of REACT NATIVE

/*CUSTOM CMS

/* ============================================================
   CUSTOM CMS DEVELOPMENT PAGE — custom-cms-development.css
   Prefix: cm-
   ============================================================ */

:root {
  --cm-accent: #e8a025;
  --cm-accent-hover: #d4911e;
  --cm-dark: #0b1120;
  --cm-dark-2: #101828;
  --cm-dark-3: #1a2332;
  --cm-white: #ffffff;
  --cm-gray: #000000;
  --cm-gray-light: #e0e7ff;
  --cm-light-bg: #f8f9fb;
  --cm-light-bg-2: #f1f3f7;
  --cm-text: #444444;
  --cm-text-light: #d1d5db;
  --cm-border: #e5e7eb;
  --cm-radius: 12px;
  --cm-radius-lg: 20px;
  --cm-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --cm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --cm-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes cm-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cm-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cm-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes cm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes cm-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes cm-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes cm-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--cm-white); }
}
@keyframes cm-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.cm-animate { opacity: 0; transform: translateY(40px); animation: cm-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.cm-animate--left { opacity: 0; transform: translateX(-40px); animation: cm-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.cm-animate--right { opacity: 0; transform: translateX(40px); animation: cm-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.cm-animate--scale { opacity: 0; transform: scale(0.85); animation: cm-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.cm-stagger > *:nth-child(1) { animation-delay: 0s; }
.cm-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.cm-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.cm-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.cm-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.cm-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.cm-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .cm-animate, .cm-animate--left, .cm-animate--right, .cm-animate--scale { opacity: 1; transform: none; animation: none; }
}

.cm-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cm-text-accent { color: var(--cm-accent); }

.cm-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cm-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--cm-text); line-height: 1.5; }
.cm-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--cm-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.cm-hero {
  background: var(--cm-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.cm-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.cm-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.cm-hero__title { font-size: 3rem; font-weight: 700; color: var(--cm-white); margin-bottom: 20px; line-height: 1.2; animation: cm-fadeUp 0.7s ease 0.25s both; }
.cm-hero__title-accent { color: var(--cm-accent); font-style: italic; display: inline-block; }
.cm-hero__subtitle { font-size: 1.3rem; color: var(--cm-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: cm-fadeUp 0.7s ease 0.45s both; }
.cm-hero__desc { font-size: 0.95rem; color: var(--cm-gray-light); font-style: italic; animation: cm-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.cm-about { padding: 80px 0; background: var(--cm-white); }
.cm-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cm-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 20px; line-height: 1.25; }
.cm-about__text { font-size: 1rem; color: var(--cm-gray); line-height: 1.75; margin-bottom: 14px; }
.cm-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.cm-stats, .cm-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cm-stat {
  background: var(--cm-light-bg); border-radius: var(--cm-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--cm-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.cm-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--cm-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.cm-stat:hover::before { transform: scaleX(1); }
.cm-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--cm-accent); }
.cm-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: cm-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.cm-stat:nth-child(1) .cm-stat__number { animation-delay: 0.2s; }
.cm-stat:nth-child(2) .cm-stat__number { animation-delay: 0.4s; }
.cm-stat:nth-child(3) .cm-stat__number { animation-delay: 0.6s; }
.cm-stat:nth-child(4) .cm-stat__number { animation-delay: 0.8s; }
.cm-stat__label { display: block; font-size: 0.82rem; color: var(--cm-gray); font-weight: 500; line-height: 1.3; }
.cm-stat--dark { background: var(--cm-white); border-color: var(--cm-border); }
.cm-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.cm-whoweare { padding: 80px 0; background: var(--cm-light-bg); }
.cm-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cm-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 20px; line-height: 1.25; }
.cm-whoweare__text { font-size: 1rem; color: var(--cm-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.cm-services { padding: 80px 0; background: var(--cm-white); }
.cm-services__header { text-align: center; margin-bottom: 48px; }
.cm-services__title { font-size: 2.2rem; font-weight: 700; color: var(--cm-text); }
.cm-services__subtitle { font-size: 1rem; color: var(--cm-gray); margin-top: 12px; line-height: 1.6; }
.cm-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cm-service-card {
  background: var(--cm-light-bg); border-radius: var(--cm-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.cm-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--cm-accent); background: var(--cm-white); }
.cm-service-card--wide { grid-column: 1 / -1; }
.cm-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--cm-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.cm-service-card:hover .cm-service-card__badge { animation: cm-shimmer 1.5s ease infinite; transform: scale(1.1); }
.cm-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--cm-text); margin-bottom: 10px; }
.cm-service-card__text { font-size: 0.9rem; color: var(--cm-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.cm-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.cm-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.cm-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 14px; position: relative; z-index: 1; }
.cm-delivery__text { font-size: 1rem; color: var(--cm-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.cm-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.cm-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.cm-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--cm-white); border: 2px solid #e0e7ff; color: var(--cm-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.cm-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.cm-step:hover .cm-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.cm-delivery__steps > :nth-child(1) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 0s; }
.cm-delivery__steps > :nth-child(3) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 1s; }
.cm-delivery__steps > :nth-child(5) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 2s; }
.cm-delivery__steps > :nth-child(7) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 3s; }
.cm-delivery__steps > :nth-child(9) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 4s; }
.cm-delivery__steps > :nth-child(11) .cm-step__circle { animation: cm-stepGlow 7s ease infinite 5s; }
.cm-delivery__steps > :nth-child(13) .cm-step__circle { animation: cm-stepGlow 7s ease infinite 6s; }
.cm-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: cm-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.cm-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.cm-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.cm-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 18px; line-height: 1.35; }
.cm-reliable__text { font-size: 1rem; color: var(--cm-gray); line-height: 1.7; margin-bottom: 40px; }
.cm-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cm-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--cm-white);
  border: 1px solid var(--cm-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.cm-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--cm-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.cm-pillar__dot { width: 8px; height: 8px; background: var(--cm-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.cm-pillar:hover .cm-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.cm-pillar__label { font-size: 0.85rem; color: var(--cm-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.cm-industries { padding: 80px 0; background: var(--cm-light-bg); text-align: center; }
.cm-industries__title { font-size: 2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 48px; }
.cm-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cm-industry {
  background: var(--cm-white); border-radius: var(--cm-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--cm-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.cm-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--cm-accent); }
.cm-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.cm-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--cm-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.cm-tech { padding: 80px 0; background: var(--cm-white); }
.cm-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cm-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 20px; line-height: 1.25; }
.cm-tech__text { font-size: 1rem; color: var(--cm-gray); line-height: 1.75; margin-bottom: 14px; }
.cm-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cm-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cm-tag {
  display: inline-block; background: var(--cm-light-bg); color: var(--cm-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--cm-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.cm-tag:hover { background: var(--cm-accent); color: var(--cm-white); border-color: var(--cm-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.cm-faq { padding: 80px 0; background: var(--cm-light-bg); }
.cm-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.cm-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--cm-text); margin-bottom: 12px; }
.cm-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.cm-faq__list { text-align: left; }
.cm-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.cm-faq__item summary { list-style: none; }
.cm-faq__item summary::-webkit-details-marker { display: none; }
.cm-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.cm-faq__question:hover { color: var(--cm-accent); }
.cm-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.cm-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.cm-faq__item[open] .cm-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.cm-faq__answer { padding: 0 0 18px; overflow: hidden; }
.cm-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.cm-cta { padding: 80px 0; background: var(--cm-dark); }
.cm-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.cm-cta__heading { font-size: 2rem; font-weight: 700; color: var(--cm-white); margin-bottom: 16px; line-height: 1.3; }
.cm-cta__text { font-size: 1rem; color: var(--cm-gray-light); line-height: 1.7; margin-bottom: 32px; }
.cm-cta__button {
  display: inline-block; background: var(--cm-accent); color: var(--cm-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: cm-pulse 2.5s ease infinite;
}
.cm-cta__button:hover { background: var(--cm-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.cm-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cm-hero__title { font-size: 2.2rem; }
  .cm-about__heading, .cm-whoweare__heading, .cm-tech__heading { font-size: 1.8rem; }
  .cm-services__title { font-size: 1.8rem; }
  .cm-delivery__heading { font-size: 1.8rem; }
  .cm-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .cm-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .cm-step__arrow { font-size: 1rem; margin: 0 1px; }
  .cm-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .cm-hero { padding: 100px 16px 80px; }
  .cm-hero__title { font-size: 1.7rem; }
  .cm-hero__subtitle { font-size: 1rem; }
  .cm-about__grid, .cm-whoweare__grid, .cm-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .cm-about__heading, .cm-whoweare__heading, .cm-tech__heading { font-size: 1.6rem; }
  .cm-stats, .cm-whoweare__stats, .cm-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .cm-about__content, .cm-whoweare__content { order: 1; }
  .cm-services__grid { grid-template-columns: 1fr; }
  .cm-services__title { font-size: 1.5rem; }
  .cm-service-card--wide { grid-column: span 1; }
  .cm-delivery__heading { font-size: 1.5rem; }
  .cm-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .cm-step__arrow { display: none; }
  .cm-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .cm-reliable__heading { font-size: 1.5rem; }
  .cm-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .cm-industries__title { font-size: 1.5rem; }
  .cm-industries__grid { grid-template-columns: 1fr 1fr; }
  .cm-faq__heading { font-size: 1.3rem; }
  .cm-cta__heading { font-size: 1.5rem; }
  .cm-animate, .cm-animate--left, .cm-animate--right, .cm-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .cm-hero { padding: 90px 14px 60px; }
  .cm-hero__title { font-size: 1.4rem; }
  .cm-hero__subtitle { font-size: 0.9rem; }
  .cm-about, .cm-whoweare, .cm-services, .cm-delivery, .cm-reliable,
  .cm-industries, .cm-faq, .cm-cta, .cm-tech { padding: 50px 0; }
  .cm-about__heading, .cm-whoweare__heading, .cm-tech__heading { font-size: 1.4rem; }
  .cm-about__text, .cm-whoweare__text, .cm-tech__text { font-size: 0.9rem; }
  .cm-stats, .cm-whoweare__stats, .cm-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cm-stat { padding: 20px 14px; }
  .cm-stat__number { font-size: 1.8rem; }
  .cm-stat__label { font-size: 0.75rem; }
  .cm-services__title { font-size: 1.3rem; }
  .cm-service-card { padding: 20px 16px; }
  .cm-delivery__heading { font-size: 1.3rem; }
  .cm-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .cm-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .cm-reliable__heading { font-size: 1.3rem; }
  .cm-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .cm-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cm-industry { padding: 20px 14px; }
  .cm-cta__heading { font-size: 1.3rem; }
  .cm-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}

/* END OF CUSTOM CMS


/*360 degree photography*/
/* ============================================================
   360 DEGREE PHOTOGRAPHY PAGE — 360-degree-photography.css
   Prefix: dp-
   ============================================================ */

:root {
  --dp-accent: #e8a025;
  --dp-accent-hover: #d4911e;
  --dp-dark: #0b1120;
  --dp-dark-2: #101828;
  --dp-dark-3: #1a2332;
  --dp-white: #ffffff;
  --dp-gray: #000000;
  --dp-gray-light: #e0e7ff;
  --dp-light-bg: #f8f9fb;
  --dp-light-bg-2: #f1f3f7;
  --dp-text: #444444;
  --dp-text-light: #d1d5db;
  --dp-border: #e5e7eb;
  --dp-radius: 12px;
  --dp-radius-lg: 20px;
  --dp-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --dp-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --dp-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes dp-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dp-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dp-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dp-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes dp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes dp-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes dp-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes dp-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--dp-white); }
}
@keyframes dp-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.dp-animate { opacity: 0; transform: translateY(40px); animation: dp-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dp-animate--left { opacity: 0; transform: translateX(-40px); animation: dp-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dp-animate--right { opacity: 0; transform: translateX(40px); animation: dp-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dp-animate--scale { opacity: 0; transform: scale(0.85); animation: dp-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.dp-stagger > *:nth-child(1) { animation-delay: 0s; }
.dp-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.dp-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.dp-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.dp-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.dp-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.dp-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .dp-animate, .dp-animate--left, .dp-animate--right, .dp-animate--scale { opacity: 1; transform: none; animation: none; }
}

.dp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.dp-text-accent { color: var(--dp-accent); }

.dp-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dp-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--dp-text); line-height: 1.5; }
.dp-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--dp-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.dp-hero {
  background: var(--dp-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.dp-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.dp-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.dp-hero__title { font-size: 3rem; font-weight: 700; color: var(--dp-white); margin-bottom: 20px; line-height: 1.2; animation: dp-fadeUp 0.7s ease 0.25s both; }
.dp-hero__title-accent { color: var(--dp-accent); font-style: italic; display: inline-block; }
.dp-hero__subtitle { font-size: 1.3rem; color: var(--dp-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: dp-fadeUp 0.7s ease 0.45s both; }
.dp-hero__desc { font-size: 0.95rem; color: var(--dp-gray-light); font-style: italic; animation: dp-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.dp-about { padding: 80px 0; background: var(--dp-white); }
.dp-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dp-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--dp-text); margin-bottom: 20px; line-height: 1.25; }
.dp-about__text { font-size: 1rem; color: var(--dp-gray); line-height: 1.75; margin-bottom: 14px; }
.dp-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.dp-stats, .dp-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dp-stat {
  background: var(--dp-light-bg); border-radius: var(--dp-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--dp-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.dp-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--dp-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.dp-stat:hover::before { transform: scaleX(1); }
.dp-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--dp-accent); }
.dp-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: dp-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.dp-stat:nth-child(1) .dp-stat__number { animation-delay: 0.2s; }
.dp-stat:nth-child(2) .dp-stat__number { animation-delay: 0.4s; }
.dp-stat:nth-child(3) .dp-stat__number { animation-delay: 0.6s; }
.dp-stat:nth-child(4) .dp-stat__number { animation-delay: 0.8s; }
.dp-stat__label { display: block; font-size: 0.82rem; color: var(--dp-gray); font-weight: 500; line-height: 1.3; }
.dp-stat--dark { background: var(--dp-white); border-color: var(--dp-border); }
.dp-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.dp-whoweare { padding: 80px 0; background: var(--dp-light-bg); }
.dp-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dp-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--dp-text); margin-bottom: 20px; line-height: 1.25; }
.dp-whoweare__text { font-size: 1rem; color: var(--dp-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.dp-services { padding: 80px 0; background: var(--dp-white); }
.dp-services__header { text-align: center; margin-bottom: 48px; }
.dp-services__title { font-size: 2.2rem; font-weight: 700; color: var(--dp-text); }
.dp-services__subtitle { font-size: 1rem; color: var(--dp-gray); margin-top: 12px; line-height: 1.6; }
.dp-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dp-service-card {
  background: var(--dp-light-bg); border-radius: var(--dp-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.dp-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--dp-accent); background: var(--dp-white); }
.dp-service-card--wide { grid-column: 1 / -1; }
.dp-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--dp-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.dp-service-card:hover .dp-service-card__badge { animation: dp-shimmer 1.5s ease infinite; transform: scale(1.1); }
.dp-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--dp-text); margin-bottom: 10px; }
.dp-service-card__text { font-size: 0.9rem; color: var(--dp-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.dp-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.dp-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.dp-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--dp-text); margin-bottom: 14px; position: relative; z-index: 1; }
.dp-delivery__text { font-size: 1rem; color: var(--dp-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.dp-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.dp-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.dp-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--dp-white); border: 2px solid #e0e7ff; color: var(--dp-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.dp-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.dp-step:hover .dp-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.dp-delivery__steps > :nth-child(1) .dp-step__circle  { animation: dp-stepGlow 7s ease infinite 0s; }
.dp-delivery__steps > :nth-child(3) .dp-step__circle  { animation: dp-stepGlow 7s ease infinite 1s; }
.dp-delivery__steps > :nth-child(5) .dp-step__circle  { animation: dp-stepGlow 7s ease infinite 2s; }
.dp-delivery__steps > :nth-child(7) .dp-step__circle  { animation: dp-stepGlow 7s ease infinite 3s; }
.dp-delivery__steps > :nth-child(9) .dp-step__circle  { animation: dp-stepGlow 7s ease infinite 4s; }
.dp-delivery__steps > :nth-child(11) .dp-step__circle { animation: dp-stepGlow 7s ease infinite 5s; }
.dp-delivery__steps > :nth-child(13) .dp-step__circle { animation: dp-stepGlow 7s ease infinite 6s; }
.dp-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: dp-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.dp-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.dp-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.dp-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--dp-text); margin-bottom: 18px; line-height: 1.35; }
.dp-reliable__text { font-size: 1rem; color: var(--dp-gray); line-height: 1.7; margin-bottom: 40px; }
.dp-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.dp-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--dp-white);
  border: 1px solid var(--dp-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.dp-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--dp-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.dp-pillar__dot { width: 8px; height: 8px; background: var(--dp-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.dp-pillar:hover .dp-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.dp-pillar__label { font-size: 0.85rem; color: var(--dp-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.dp-industries { padding: 80px 0; background: var(--dp-light-bg); text-align: center; }
.dp-industries__title { font-size: 2rem; font-weight: 700; color: var(--dp-text); margin-bottom: 48px; }
.dp-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dp-industry {
  background: var(--dp-white); border-radius: var(--dp-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--dp-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.dp-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--dp-accent); }
.dp-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.dp-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--dp-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.dp-tech { padding: 80px 0; background: var(--dp-white); }
.dp-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dp-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--dp-text); margin-bottom: 20px; line-height: 1.25; }
.dp-tech__text { font-size: 1rem; color: var(--dp-gray); line-height: 1.75; margin-bottom: 14px; }
.dp-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dp-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dp-tag {
  display: inline-block; background: var(--dp-light-bg); color: var(--dp-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--dp-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.dp-tag:hover { background: var(--dp-accent); color: var(--dp-white); border-color: var(--dp-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.dp-faq { padding: 80px 0; background: var(--dp-light-bg); }
.dp-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.dp-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--dp-text); margin-bottom: 12px; }
.dp-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.dp-faq__list { text-align: left; }
.dp-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.dp-faq__item summary { list-style: none; }
.dp-faq__item summary::-webkit-details-marker { display: none; }
.dp-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.dp-faq__question:hover { color: var(--dp-accent); }
.dp-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.dp-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.dp-faq__item[open] .dp-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.dp-faq__answer { padding: 0 0 18px; overflow: hidden; }
.dp-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.dp-cta { padding: 80px 0; background: var(--dp-dark); }
.dp-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.dp-cta__heading { font-size: 2rem; font-weight: 700; color: var(--dp-white); margin-bottom: 16px; line-height: 1.3; }
.dp-cta__text { font-size: 1rem; color: var(--dp-gray-light); line-height: 1.7; margin-bottom: 32px; }
.dp-cta__button {
  display: inline-block; background: var(--dp-accent); color: var(--dp-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: dp-pulse 2.5s ease infinite;
}
.dp-cta__button:hover { background: var(--dp-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.dp-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dp-hero__title { font-size: 2.2rem; }
  .dp-about__heading, .dp-whoweare__heading, .dp-tech__heading { font-size: 1.8rem; }
  .dp-services__title { font-size: 1.8rem; }
  .dp-delivery__heading { font-size: 1.8rem; }
  .dp-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .dp-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .dp-step__arrow { font-size: 1rem; margin: 0 1px; }
  .dp-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .dp-hero { padding: 100px 16px 80px; }
  .dp-hero__title { font-size: 1.7rem; }
  .dp-hero__subtitle { font-size: 1rem; }
  .dp-about__grid, .dp-whoweare__grid, .dp-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .dp-about__heading, .dp-whoweare__heading, .dp-tech__heading { font-size: 1.6rem; }
  .dp-stats, .dp-whoweare__stats, .dp-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .dp-about__content, .dp-whoweare__content { order: 1; }
  .dp-services__grid { grid-template-columns: 1fr; }
  .dp-services__title { font-size: 1.5rem; }
  .dp-service-card--wide { grid-column: span 1; }
  .dp-delivery__heading { font-size: 1.5rem; }
  .dp-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .dp-step__arrow { display: none; }
  .dp-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .dp-reliable__heading { font-size: 1.5rem; }
  .dp-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .dp-industries__title { font-size: 1.5rem; }
  .dp-industries__grid { grid-template-columns: 1fr 1fr; }
  .dp-faq__heading { font-size: 1.3rem; }
  .dp-cta__heading { font-size: 1.5rem; }
  .dp-animate, .dp-animate--left, .dp-animate--right, .dp-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .dp-hero { padding: 90px 14px 60px; }
  .dp-hero__title { font-size: 1.4rem; }
  .dp-hero__subtitle { font-size: 0.9rem; }
  .dp-about, .dp-whoweare, .dp-services, .dp-delivery, .dp-reliable,
  .dp-industries, .dp-faq, .dp-cta, .dp-tech { padding: 50px 0; }
  .dp-about__heading, .dp-whoweare__heading, .dp-tech__heading { font-size: 1.4rem; }
  .dp-about__text, .dp-whoweare__text, .dp-tech__text { font-size: 0.9rem; }
  .dp-stats, .dp-whoweare__stats, .dp-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dp-stat { padding: 20px 14px; }
  .dp-stat__number { font-size: 1.8rem; }
  .dp-stat__label { font-size: 0.75rem; }
  .dp-services__title { font-size: 1.3rem; }
  .dp-service-card { padding: 20px 16px; }
  .dp-delivery__heading { font-size: 1.3rem; }
  .dp-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .dp-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .dp-reliable__heading { font-size: 1.3rem; }
  .dp-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .dp-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dp-industry { padding: 20px 14px; }
  .dp-cta__heading { font-size: 1.3rem; }
  .dp-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}

/*END OF 360 degreee photography

/* ============================================================
   CLOUD SERVICES PAGE — cloud-services.css
   Prefix: cs-
   ============================================================ */

:root {
  --cs-accent: #e8a025;
  --cs-accent-hover: #d4911e;
  --cs-dark: #0b1120;
  --cs-dark-2: #101828;
  --cs-dark-3: #1a2332;
  --cs-white: #ffffff;
  --cs-gray: #000000;
  --cs-gray-light: #e0e7ff;
  --cs-light-bg: #f8f9fb;
  --cs-light-bg-2: #f1f3f7;
  --cs-text: #444444;
  --cs-text-light: #d1d5db;
  --cs-border: #e5e7eb;
  --cs-radius: 12px;
  --cs-radius-lg: 20px;
  --cs-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --cs-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --cs-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes cs-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cs-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cs-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cs-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes cs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes cs-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes cs-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes cs-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--cs-white); }
}
@keyframes cs-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.cs-animate { opacity: 0; transform: translateY(40px); animation: cs-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.cs-animate--left { opacity: 0; transform: translateX(-40px); animation: cs-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.cs-animate--right { opacity: 0; transform: translateX(40px); animation: cs-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.cs-animate--scale { opacity: 0; transform: scale(0.85); animation: cs-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.cs-stagger > *:nth-child(1) { animation-delay: 0s; }
.cs-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.cs-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.cs-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.cs-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.cs-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.cs-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .cs-animate, .cs-animate--left, .cs-animate--right, .cs-animate--scale { opacity: 1; transform: none; animation: none; }
}

.cs-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cs-text-accent { color: var(--cs-accent); }

.cs-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--cs-text); line-height: 1.5; }
.cs-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--cs-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.cs-hero {
  background: var(--cs-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.cs-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.cs-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.cs-hero__title { font-size: 3rem; font-weight: 700; color: var(--cs-white); margin-bottom: 20px; line-height: 1.2; animation: cs-fadeUp 0.7s ease 0.25s both; }
.cs-hero__title-accent { color: var(--cs-accent); font-style: italic; display: inline-block; }
.cs-hero__subtitle { font-size: 1.3rem; color: var(--cs-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: cs-fadeUp 0.7s ease 0.45s both; }
.cs-hero__desc { font-size: 0.95rem; color: var(--cs-gray-light); font-style: italic; animation: cs-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.cs-about { padding: 80px 0; background: var(--cs-white); }
.cs-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cs-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--cs-text); margin-bottom: 20px; line-height: 1.25; }
.cs-about__text { font-size: 1rem; color: var(--cs-gray); line-height: 1.75; margin-bottom: 14px; }
.cs-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.cs-stats, .cs-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-stat {
  background: var(--cs-light-bg); border-radius: var(--cs-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--cs-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.cs-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--cs-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.cs-stat:hover::before { transform: scaleX(1); }
.cs-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--cs-accent); }
.cs-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: cs-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.cs-stat:nth-child(1) .cs-stat__number { animation-delay: 0.2s; }
.cs-stat:nth-child(2) .cs-stat__number { animation-delay: 0.4s; }
.cs-stat:nth-child(3) .cs-stat__number { animation-delay: 0.6s; }
.cs-stat:nth-child(4) .cs-stat__number { animation-delay: 0.8s; }
.cs-stat__label { display: block; font-size: 0.82rem; color: var(--cs-gray); font-weight: 500; line-height: 1.3; }
.cs-stat--dark { background: var(--cs-white); border-color: var(--cs-border); }
.cs-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.cs-whoweare { padding: 80px 0; background: var(--cs-light-bg); }
.cs-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cs-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--cs-text); margin-bottom: 20px; line-height: 1.25; }
.cs-whoweare__text { font-size: 1rem; color: var(--cs-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.cs-services { padding: 80px 0; background: var(--cs-white); }
.cs-services__header { text-align: center; margin-bottom: 48px; }
.cs-services__title { font-size: 2.2rem; font-weight: 700; color: var(--cs-text); }
.cs-services__subtitle { font-size: 1rem; color: var(--cs-gray); margin-top: 12px; line-height: 1.6; }
.cs-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cs-service-card {
  background: var(--cs-light-bg); border-radius: var(--cs-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.cs-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--cs-accent); background: var(--cs-white); }
.cs-service-card--wide { grid-column: 1 / -1; }
.cs-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--cs-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.cs-service-card:hover .cs-service-card__badge { animation: cs-shimmer 1.5s ease infinite; transform: scale(1.1); }
.cs-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--cs-text); margin-bottom: 10px; }
.cs-service-card__text { font-size: 0.9rem; color: var(--cs-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.cs-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.cs-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.cs-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--cs-text); margin-bottom: 14px; position: relative; z-index: 1; }
.cs-delivery__text { font-size: 1rem; color: var(--cs-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.cs-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.cs-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.cs-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--cs-white); border: 2px solid #e0e7ff; color: var(--cs-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.cs-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.cs-step:hover .cs-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.cs-delivery__steps > :nth-child(1) .cs-step__circle  { animation: cs-stepGlow 7s ease infinite 0s; }
.cs-delivery__steps > :nth-child(3) .cs-step__circle  { animation: cs-stepGlow 7s ease infinite 1s; }
.cs-delivery__steps > :nth-child(5) .cs-step__circle  { animation: cs-stepGlow 7s ease infinite 2s; }
.cs-delivery__steps > :nth-child(7) .cs-step__circle  { animation: cs-stepGlow 7s ease infinite 3s; }
.cs-delivery__steps > :nth-child(9) .cs-step__circle  { animation: cs-stepGlow 7s ease infinite 4s; }
.cs-delivery__steps > :nth-child(11) .cs-step__circle { animation: cs-stepGlow 7s ease infinite 5s; }
.cs-delivery__steps > :nth-child(13) .cs-step__circle { animation: cs-stepGlow 7s ease infinite 6s; }
.cs-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: cs-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.cs-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.cs-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.cs-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--cs-text); margin-bottom: 18px; line-height: 1.35; }
.cs-reliable__text { font-size: 1rem; color: var(--cs-gray); line-height: 1.7; margin-bottom: 40px; }
.cs-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cs-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--cs-white);
  border: 1px solid var(--cs-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.cs-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--cs-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.cs-pillar__dot { width: 8px; height: 8px; background: var(--cs-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.cs-pillar:hover .cs-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.cs-pillar__label { font-size: 0.85rem; color: var(--cs-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.cs-industries { padding: 80px 0; background: var(--cs-light-bg); text-align: center; }
.cs-industries__title { font-size: 2rem; font-weight: 700; color: var(--cs-text); margin-bottom: 48px; }
.cs-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cs-industry {
  background: var(--cs-white); border-radius: var(--cs-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--cs-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.cs-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--cs-accent); }
.cs-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.cs-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--cs-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.cs-tech { padding: 80px 0; background: var(--cs-white); }
.cs-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cs-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--cs-text); margin-bottom: 20px; line-height: 1.25; }
.cs-tech__text { font-size: 1rem; color: var(--cs-gray); line-height: 1.75; margin-bottom: 14px; }
.cs-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cs-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-tag {
  display: inline-block; background: var(--cs-light-bg); color: var(--cs-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--cs-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.cs-tag:hover { background: var(--cs-accent); color: var(--cs-white); border-color: var(--cs-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.cs-faq { padding: 80px 0; background: var(--cs-light-bg); }
.cs-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.cs-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--cs-text); margin-bottom: 12px; }
.cs-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.cs-faq__list { text-align: left; }
.cs-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.cs-faq__item summary { list-style: none; }
.cs-faq__item summary::-webkit-details-marker { display: none; }
.cs-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.cs-faq__question:hover { color: var(--cs-accent); }
.cs-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.cs-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.cs-faq__item[open] .cs-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.cs-faq__answer { padding: 0 0 18px; overflow: hidden; }
.cs-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.cs-cta { padding: 80px 0; background: var(--cs-dark); }
.cs-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.cs-cta__heading { font-size: 2rem; font-weight: 700; color: var(--cs-white); margin-bottom: 16px; line-height: 1.3; }
.cs-cta__text { font-size: 1rem; color: var(--cs-gray-light); line-height: 1.7; margin-bottom: 32px; }
.cs-cta__button {
  display: inline-block; background: var(--cs-accent); color: var(--cs-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: cs-pulse 2.5s ease infinite;
}
.cs-cta__button:hover { background: var(--cs-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.cs-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cs-hero__title { font-size: 2.2rem; }
  .cs-about__heading, .cs-whoweare__heading, .cs-tech__heading { font-size: 1.8rem; }
  .cs-services__title { font-size: 1.8rem; }
  .cs-delivery__heading { font-size: 1.8rem; }
  .cs-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .cs-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .cs-step__arrow { font-size: 1rem; margin: 0 1px; }
  .cs-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .cs-hero { padding: 100px 16px 80px; }
  .cs-hero__title { font-size: 1.7rem; }
  .cs-hero__subtitle { font-size: 1rem; }
  .cs-about__grid, .cs-whoweare__grid, .cs-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .cs-about__heading, .cs-whoweare__heading, .cs-tech__heading { font-size: 1.6rem; }
  .cs-stats, .cs-whoweare__stats, .cs-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .cs-about__content, .cs-whoweare__content { order: 1; }
  .cs-services__grid { grid-template-columns: 1fr; }
  .cs-services__title { font-size: 1.5rem; }
  .cs-service-card--wide { grid-column: span 1; }
  .cs-delivery__heading { font-size: 1.5rem; }
  .cs-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .cs-step__arrow { display: none; }
  .cs-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .cs-reliable__heading { font-size: 1.5rem; }
  .cs-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .cs-industries__title { font-size: 1.5rem; }
  .cs-industries__grid { grid-template-columns: 1fr 1fr; }
  .cs-faq__heading { font-size: 1.3rem; }
  .cs-cta__heading { font-size: 1.5rem; }
  .cs-animate, .cs-animate--left, .cs-animate--right, .cs-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .cs-hero { padding: 90px 14px 60px; }
  .cs-hero__title { font-size: 1.4rem; }
  .cs-hero__subtitle { font-size: 0.9rem; }
  .cs-about, .cs-whoweare, .cs-services, .cs-delivery, .cs-reliable,
  .cs-industries, .cs-faq, .cs-cta, .cs-tech { padding: 50px 0; }
  .cs-about__heading, .cs-whoweare__heading, .cs-tech__heading { font-size: 1.4rem; }
  .cs-about__text, .cs-whoweare__text, .cs-tech__text { font-size: 0.9rem; }
  .cs-stats, .cs-whoweare__stats, .cs-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cs-stat { padding: 20px 14px; }
  .cs-stat__number { font-size: 1.8rem; }
  .cs-stat__label { font-size: 0.75rem; }
  .cs-services__title { font-size: 1.3rem; }
  .cs-service-card { padding: 20px 16px; }
  .cs-delivery__heading { font-size: 1.3rem; }
  .cs-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .cs-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .cs-reliable__heading { font-size: 1.3rem; }
  .cs-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .cs-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cs-industry { padding: 20px 14px; }
  .cs-cta__heading { font-size: 1.3rem; }
  .cs-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}
/*end of cloud services


/* ============================================================
   DEVOPS SERVICES PAGE — devops-services.css
   Prefix: do-
   ============================================================ */

:root {
  --do-accent: #e8a025;
  --do-accent-hover: #d4911e;
  --do-dark: #0b1120;
  --do-dark-2: #101828;
  --do-dark-3: #1a2332;
  --do-white: #ffffff;
  --do-gray: #000000;
  --do-gray-light: #e0e7ff;
  --do-light-bg: #f8f9fb;
  --do-light-bg-2: #f1f3f7;
  --do-text: #444444;
  --do-text-light: #d1d5db;
  --do-border: #e5e7eb;
  --do-radius: 12px;
  --do-radius-lg: 20px;
  --do-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --do-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --do-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes do-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes do-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes do-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes do-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes do-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes do-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes do-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes do-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--do-white); }
}
@keyframes do-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.do-animate { opacity: 0; transform: translateY(40px); animation: do-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.do-animate--left { opacity: 0; transform: translateX(-40px); animation: do-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.do-animate--right { opacity: 0; transform: translateX(40px); animation: do-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.do-animate--scale { opacity: 0; transform: scale(0.85); animation: do-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.do-stagger > *:nth-child(1) { animation-delay: 0s; }
.do-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.do-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.do-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.do-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.do-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.do-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .do-animate, .do-animate--left, .do-animate--right, .do-animate--scale { opacity: 1; transform: none; animation: none; }
}

.do-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.do-text-accent { color: var(--do-accent); }

.do-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.do-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--do-text); line-height: 1.5; }
.do-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--do-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.do-hero {
  background: var(--do-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.do-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.do-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.do-hero__title { font-size: 3rem; font-weight: 700; color: var(--do-white); margin-bottom: 20px; line-height: 1.2; animation: do-fadeUp 0.7s ease 0.25s both; }
.do-hero__title-accent { color: var(--do-accent); font-style: italic; display: inline-block; }
.do-hero__subtitle { font-size: 1.3rem; color: var(--do-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: do-fadeUp 0.7s ease 0.45s both; }
.do-hero__desc { font-size: 0.95rem; color: var(--do-gray-light); font-style: italic; animation: do-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.do-about { padding: 80px 0; background: var(--do-white); }
.do-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.do-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--do-text); margin-bottom: 20px; line-height: 1.25; }
.do-about__text { font-size: 1rem; color: var(--do-gray); line-height: 1.75; margin-bottom: 14px; }
.do-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.do-stats, .do-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.do-stat {
  background: var(--do-light-bg); border-radius: var(--do-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--do-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.do-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--do-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.do-stat:hover::before { transform: scaleX(1); }
.do-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--do-accent); }
.do-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: do-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.do-stat:nth-child(1) .do-stat__number { animation-delay: 0.2s; }
.do-stat:nth-child(2) .do-stat__number { animation-delay: 0.4s; }
.do-stat:nth-child(3) .do-stat__number { animation-delay: 0.6s; }
.do-stat:nth-child(4) .do-stat__number { animation-delay: 0.8s; }
.do-stat__label { display: block; font-size: 0.82rem; color: var(--do-gray); font-weight: 500; line-height: 1.3; }
.do-stat--dark { background: var(--do-white); border-color: var(--do-border); }
.do-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.do-whoweare { padding: 80px 0; background: var(--do-light-bg); }
.do-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.do-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--do-text); margin-bottom: 20px; line-height: 1.25; }
.do-whoweare__text { font-size: 1rem; color: var(--do-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.do-services { padding: 80px 0; background: var(--do-white); }
.do-services__header { text-align: center; margin-bottom: 48px; }
.do-services__title { font-size: 2.2rem; font-weight: 700; color: var(--do-text); }
.do-services__subtitle { font-size: 1rem; color: var(--do-gray); margin-top: 12px; line-height: 1.6; }
.do-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.do-service-card {
  background: var(--do-light-bg); border-radius: var(--do-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.do-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--do-accent); background: var(--do-white); }
.do-service-card--wide { grid-column: 1 / -1; }
.do-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--do-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.do-service-card:hover .do-service-card__badge { animation: do-shimmer 1.5s ease infinite; transform: scale(1.1); }
.do-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--do-text); margin-bottom: 10px; }
.do-service-card__text { font-size: 0.9rem; color: var(--do-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.do-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.do-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.do-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--do-text); margin-bottom: 14px; position: relative; z-index: 1; }
.do-delivery__text { font-size: 1rem; color: var(--do-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.do-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.do-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.do-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--do-white); border: 2px solid #e0e7ff; color: var(--do-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.do-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.do-step:hover .do-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.do-delivery__steps > :nth-child(1) .do-step__circle  { animation: do-stepGlow 7s ease infinite 0s; }
.do-delivery__steps > :nth-child(3) .do-step__circle  { animation: do-stepGlow 7s ease infinite 1s; }
.do-delivery__steps > :nth-child(5) .do-step__circle  { animation: do-stepGlow 7s ease infinite 2s; }
.do-delivery__steps > :nth-child(7) .do-step__circle  { animation: do-stepGlow 7s ease infinite 3s; }
.do-delivery__steps > :nth-child(9) .do-step__circle  { animation: do-stepGlow 7s ease infinite 4s; }
.do-delivery__steps > :nth-child(11) .do-step__circle { animation: do-stepGlow 7s ease infinite 5s; }
.do-delivery__steps > :nth-child(13) .do-step__circle { animation: do-stepGlow 7s ease infinite 6s; }
.do-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: do-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.do-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.do-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.do-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--do-text); margin-bottom: 18px; line-height: 1.35; }
.do-reliable__text { font-size: 1rem; color: var(--do-gray); line-height: 1.7; margin-bottom: 40px; }
.do-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.do-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--do-white);
  border: 1px solid var(--do-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.do-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--do-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.do-pillar__dot { width: 8px; height: 8px; background: var(--do-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.do-pillar:hover .do-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.do-pillar__label { font-size: 0.85rem; color: var(--do-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.do-industries { padding: 80px 0; background: var(--do-light-bg); text-align: center; }
.do-industries__title { font-size: 2rem; font-weight: 700; color: var(--do-text); margin-bottom: 48px; }
.do-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.do-industry {
  background: var(--do-white); border-radius: var(--do-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--do-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.do-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--do-accent); }
.do-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.do-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--do-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.do-tech { padding: 80px 0; background: var(--do-white); }
.do-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.do-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--do-text); margin-bottom: 20px; line-height: 1.25; }
.do-tech__text { font-size: 1rem; color: var(--do-gray); line-height: 1.75; margin-bottom: 14px; }
.do-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.do-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.do-tag {
  display: inline-block; background: var(--do-light-bg); color: var(--do-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--do-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.do-tag:hover { background: var(--do-accent); color: var(--do-white); border-color: var(--do-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.do-faq { padding: 80px 0; background: var(--do-light-bg); }
.do-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.do-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--do-text); margin-bottom: 12px; }
.do-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.do-faq__list { text-align: left; }
.do-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.do-faq__item summary { list-style: none; }
.do-faq__item summary::-webkit-details-marker { display: none; }
.do-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.do-faq__question:hover { color: var(--do-accent); }
.do-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.do-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.do-faq__item[open] .do-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.do-faq__answer { padding: 0 0 18px; overflow: hidden; }
.do-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.do-cta { padding: 80px 0; background: var(--do-dark); }
.do-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.do-cta__heading { font-size: 2rem; font-weight: 700; color: var(--do-white); margin-bottom: 16px; line-height: 1.3; }
.do-cta__text { font-size: 1rem; color: var(--do-gray-light); line-height: 1.7; margin-bottom: 32px; }
.do-cta__button {
  display: inline-block; background: var(--do-accent); color: var(--do-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: do-pulse 2.5s ease infinite;
}
.do-cta__button:hover { background: var(--do-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.do-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .do-hero__title { font-size: 2.2rem; }
  .do-about__heading, .do-whoweare__heading, .do-tech__heading { font-size: 1.8rem; }
  .do-services__title { font-size: 1.8rem; }
  .do-delivery__heading { font-size: 1.8rem; }
  .do-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .do-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .do-step__arrow { font-size: 1rem; margin: 0 1px; }
  .do-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .do-hero { padding: 100px 16px 80px; }
  .do-hero__title { font-size: 1.7rem; }
  .do-hero__subtitle { font-size: 1rem; }
  .do-about__grid, .do-whoweare__grid, .do-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .do-about__heading, .do-whoweare__heading, .do-tech__heading { font-size: 1.6rem; }
  .do-stats, .do-whoweare__stats, .do-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .do-about__content, .do-whoweare__content { order: 1; }
  .do-services__grid { grid-template-columns: 1fr; }
  .do-services__title { font-size: 1.5rem; }
  .do-service-card--wide { grid-column: span 1; }
  .do-delivery__heading { font-size: 1.5rem; }
  .do-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .do-step__arrow { display: none; }
  .do-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .do-reliable__heading { font-size: 1.5rem; }
  .do-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .do-industries__title { font-size: 1.5rem; }
  .do-industries__grid { grid-template-columns: 1fr 1fr; }
  .do-faq__heading { font-size: 1.3rem; }
  .do-cta__heading { font-size: 1.5rem; }
  .do-animate, .do-animate--left, .do-animate--right, .do-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .do-hero { padding: 90px 14px 60px; }
  .do-hero__title { font-size: 1.4rem; }
  .do-hero__subtitle { font-size: 0.9rem; }
  .do-about, .do-whoweare, .do-services, .do-delivery, .do-reliable,
  .do-industries, .do-faq, .do-cta, .do-tech { padding: 50px 0; }
  .do-about__heading, .do-whoweare__heading, .do-tech__heading { font-size: 1.4rem; }
  .do-about__text, .do-whoweare__text, .do-tech__text { font-size: 0.9rem; }
  .do-stats, .do-whoweare__stats, .do-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .do-stat { padding: 20px 14px; }
  .do-stat__number { font-size: 1.8rem; }
  .do-stat__label { font-size: 0.75rem; }
  .do-services__title { font-size: 1.3rem; }
  .do-service-card { padding: 20px 16px; }
  .do-delivery__heading { font-size: 1.3rem; }
  .do-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .do-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .do-reliable__heading { font-size: 1.3rem; }
  .do-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .do-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .do-industry { padding: 20px 14px; }
  .do-cta__heading { font-size: 1.3rem; }
  .do-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}
/*devops services end

/* ============================================================
   CLOUD MIGRATION SERVICES PAGE — cloud-migration-services.css
   Prefix: mi-
   ============================================================ */

:root {
  --mi-accent: #e8a025;
  --mi-accent-hover: #d4911e;
  --mi-dark: #0b1120;
  --mi-dark-2: #101828;
  --mi-dark-3: #1a2332;
  --mi-white: #ffffff;
  --mi-gray: #000000;
  --mi-gray-light: #e0e7ff;
  --mi-light-bg: #f8f9fb;
  --mi-light-bg-2: #f1f3f7;
  --mi-text: #444444;
  --mi-text-light: #d1d5db;
  --mi-border: #e5e7eb;
  --mi-radius: 12px;
  --mi-radius-lg: 20px;
  --mi-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --mi-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --mi-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes mi-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mi-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mi-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mi-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes mi-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes mi-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes mi-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes mi-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--mi-white); }
}
@keyframes mi-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.mi-animate { opacity: 0; transform: translateY(40px); animation: mi-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.mi-animate--left { opacity: 0; transform: translateX(-40px); animation: mi-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.mi-animate--right { opacity: 0; transform: translateX(40px); animation: mi-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.mi-animate--scale { opacity: 0; transform: scale(0.85); animation: mi-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.mi-stagger > *:nth-child(1) { animation-delay: 0s; }
.mi-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.mi-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.mi-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.mi-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.mi-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.mi-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .mi-animate, .mi-animate--left, .mi-animate--right, .mi-animate--scale { opacity: 1; transform: none; animation: none; }
}

.mi-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.mi-text-accent { color: var(--mi-accent); }

.mi-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.mi-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--mi-text); line-height: 1.5; }
.mi-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--mi-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.mi-hero {
  background: var(--mi-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.mi-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.mi-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.mi-hero__title { font-size: 3rem; font-weight: 700; color: var(--mi-white); margin-bottom: 20px; line-height: 1.2; animation: mi-fadeUp 0.7s ease 0.25s both; }
.mi-hero__title-accent { color: var(--mi-accent); font-style: italic; display: inline-block; }
.mi-hero__subtitle { font-size: 1.3rem; color: var(--mi-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: mi-fadeUp 0.7s ease 0.45s both; }
.mi-hero__desc { font-size: 0.95rem; color: var(--mi-gray-light); font-style: italic; animation: mi-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.mi-about { padding: 80px 0; background: var(--mi-white); }
.mi-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.mi-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--mi-text); margin-bottom: 20px; line-height: 1.25; }
.mi-about__text { font-size: 1rem; color: var(--mi-gray); line-height: 1.75; margin-bottom: 14px; }
.mi-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.mi-stats, .mi-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mi-stat {
  background: var(--mi-light-bg); border-radius: var(--mi-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--mi-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.mi-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--mi-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.mi-stat:hover::before { transform: scaleX(1); }
.mi-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--mi-accent); }
.mi-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: mi-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.mi-stat:nth-child(1) .mi-stat__number { animation-delay: 0.2s; }
.mi-stat:nth-child(2) .mi-stat__number { animation-delay: 0.4s; }
.mi-stat:nth-child(3) .mi-stat__number { animation-delay: 0.6s; }
.mi-stat:nth-child(4) .mi-stat__number { animation-delay: 0.8s; }
.mi-stat__label { display: block; font-size: 0.82rem; color: var(--mi-gray); font-weight: 500; line-height: 1.3; }
.mi-stat--dark { background: var(--mi-white); border-color: var(--mi-border); }
.mi-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.mi-whoweare { padding: 80px 0; background: var(--mi-light-bg); }
.mi-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.mi-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--mi-text); margin-bottom: 20px; line-height: 1.25; }
.mi-whoweare__text { font-size: 1rem; color: var(--mi-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.mi-services { padding: 80px 0; background: var(--mi-white); }
.mi-services__header { text-align: center; margin-bottom: 48px; }
.mi-services__title { font-size: 2.2rem; font-weight: 700; color: var(--mi-text); }
.mi-services__subtitle { font-size: 1rem; color: var(--mi-gray); margin-top: 12px; line-height: 1.6; }
.mi-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mi-service-card {
  background: var(--mi-light-bg); border-radius: var(--mi-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.mi-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--mi-accent); background: var(--mi-white); }
.mi-service-card--wide { grid-column: 1 / -1; }
.mi-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--mi-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.mi-service-card:hover .mi-service-card__badge { animation: mi-shimmer 1.5s ease infinite; transform: scale(1.1); }
.mi-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--mi-text); margin-bottom: 10px; }
.mi-service-card__text { font-size: 0.9rem; color: var(--mi-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.mi-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.mi-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.mi-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--mi-text); margin-bottom: 14px; position: relative; z-index: 1; }
.mi-delivery__text { font-size: 1rem; color: var(--mi-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.mi-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.mi-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.mi-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--mi-white); border: 2px solid #e0e7ff; color: var(--mi-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.mi-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.mi-step:hover .mi-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.mi-delivery__steps > :nth-child(1) .mi-step__circle  { animation: mi-stepGlow 7s ease infinite 0s; }
.mi-delivery__steps > :nth-child(3) .mi-step__circle  { animation: mi-stepGlow 7s ease infinite 1s; }
.mi-delivery__steps > :nth-child(5) .mi-step__circle  { animation: mi-stepGlow 7s ease infinite 2s; }
.mi-delivery__steps > :nth-child(7) .mi-step__circle  { animation: mi-stepGlow 7s ease infinite 3s; }
.mi-delivery__steps > :nth-child(9) .mi-step__circle  { animation: mi-stepGlow 7s ease infinite 4s; }
.mi-delivery__steps > :nth-child(11) .mi-step__circle { animation: mi-stepGlow 7s ease infinite 5s; }
.mi-delivery__steps > :nth-child(13) .mi-step__circle { animation: mi-stepGlow 7s ease infinite 6s; }
.mi-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: mi-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.mi-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.mi-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.mi-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--mi-text); margin-bottom: 18px; line-height: 1.35; }
.mi-reliable__text { font-size: 1rem; color: var(--mi-gray); line-height: 1.7; margin-bottom: 40px; }
.mi-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.mi-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--mi-white);
  border: 1px solid var(--mi-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.mi-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--mi-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.mi-pillar__dot { width: 8px; height: 8px; background: var(--mi-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.mi-pillar:hover .mi-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.mi-pillar__label { font-size: 0.85rem; color: var(--mi-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.mi-industries { padding: 80px 0; background: var(--mi-light-bg); text-align: center; }
.mi-industries__title { font-size: 2rem; font-weight: 700; color: var(--mi-text); margin-bottom: 48px; }
.mi-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mi-industry {
  background: var(--mi-white); border-radius: var(--mi-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--mi-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.mi-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--mi-accent); }
.mi-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.mi-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--mi-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.mi-tech { padding: 80px 0; background: var(--mi-white); }
.mi-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.mi-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--mi-text); margin-bottom: 20px; line-height: 1.25; }
.mi-tech__text { font-size: 1rem; color: var(--mi-gray); line-height: 1.75; margin-bottom: 14px; }
.mi-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mi-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mi-tag {
  display: inline-block; background: var(--mi-light-bg); color: var(--mi-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--mi-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.mi-tag:hover { background: var(--mi-accent); color: var(--mi-white); border-color: var(--mi-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.mi-faq { padding: 80px 0; background: var(--mi-light-bg); }
.mi-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.mi-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--mi-text); margin-bottom: 12px; }
.mi-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.mi-faq__list { text-align: left; }
.mi-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.mi-faq__item summary { list-style: none; }
.mi-faq__item summary::-webkit-details-marker { display: none; }
.mi-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.mi-faq__question:hover { color: var(--mi-accent); }
.mi-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.mi-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.mi-faq__item[open] .mi-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.mi-faq__answer { padding: 0 0 18px; overflow: hidden; }
.mi-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.mi-cta { padding: 80px 0; background: var(--mi-dark); }
.mi-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.mi-cta__heading { font-size: 2rem; font-weight: 700; color: var(--mi-white); margin-bottom: 16px; line-height: 1.3; }
.mi-cta__text { font-size: 1rem; color: var(--mi-gray-light); line-height: 1.7; margin-bottom: 32px; }
.mi-cta__button {
  display: inline-block; background: var(--mi-accent); color: var(--mi-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: mi-pulse 2.5s ease infinite;
}
.mi-cta__button:hover { background: var(--mi-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.mi-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .mi-hero__title { font-size: 2.2rem; }
  .mi-about__heading, .mi-whoweare__heading, .mi-tech__heading { font-size: 1.8rem; }
  .mi-services__title { font-size: 1.8rem; }
  .mi-delivery__heading { font-size: 1.8rem; }
  .mi-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .mi-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .mi-step__arrow { font-size: 1rem; margin: 0 1px; }
  .mi-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .mi-hero { padding: 100px 16px 80px; }
  .mi-hero__title { font-size: 1.7rem; }
  .mi-hero__subtitle { font-size: 1rem; }
  .mi-about__grid, .mi-whoweare__grid, .mi-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .mi-about__heading, .mi-whoweare__heading, .mi-tech__heading { font-size: 1.6rem; }
  .mi-stats, .mi-whoweare__stats, .mi-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .mi-about__content, .mi-whoweare__content { order: 1; }
  .mi-services__grid { grid-template-columns: 1fr; }
  .mi-services__title { font-size: 1.5rem; }
  .mi-service-card--wide { grid-column: span 1; }
  .mi-delivery__heading { font-size: 1.5rem; }
  .mi-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .mi-step__arrow { display: none; }
  .mi-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .mi-reliable__heading { font-size: 1.5rem; }
  .mi-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .mi-industries__title { font-size: 1.5rem; }
  .mi-industries__grid { grid-template-columns: 1fr 1fr; }
  .mi-faq__heading { font-size: 1.3rem; }
  .mi-cta__heading { font-size: 1.5rem; }
  .mi-animate, .mi-animate--left, .mi-animate--right, .mi-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .mi-hero { padding: 90px 14px 60px; }
  .mi-hero__title { font-size: 1.4rem; }
  .mi-hero__subtitle { font-size: 0.9rem; }
  .mi-about, .mi-whoweare, .mi-services, .mi-delivery, .mi-reliable,
  .mi-industries, .mi-faq, .mi-cta, .mi-tech { padding: 50px 0; }
  .mi-about__heading, .mi-whoweare__heading, .mi-tech__heading { font-size: 1.4rem; }
  .mi-about__text, .mi-whoweare__text, .mi-tech__text { font-size: 0.9rem; }
  .mi-stats, .mi-whoweare__stats, .mi-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mi-stat { padding: 20px 14px; }
  .mi-stat__number { font-size: 1.8rem; }
  .mi-stat__label { font-size: 0.75rem; }
  .mi-services__title { font-size: 1.3rem; }
  .mi-service-card { padding: 20px 16px; }
  .mi-delivery__heading { font-size: 1.3rem; }
  .mi-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .mi-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .mi-reliable__heading { font-size: 1.3rem; }
  .mi-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .mi-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mi-industry { padding: 20px 14px; }
  .mi-cta__heading { font-size: 1.3rem; }
  .mi-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}

/*end of cloud migration 



/* ============================================================
   CLOUD MANAGED SERVICES PAGE — cloud-managed-services.css
   Prefix: ms-
   ============================================================ */

:root {
  --ms-accent: #e8a025;
  --ms-accent-hover: #d4911e;
  --ms-dark: #0b1120;
  --ms-dark-2: #101828;
  --ms-dark-3: #1a2332;
  --ms-white: #ffffff;
  --ms-gray: #000000;
  --ms-gray-light: #e0e7ff;
  --ms-light-bg: #f8f9fb;
  --ms-light-bg-2: #f1f3f7;
  --ms-text: #444444;
  --ms-text-light: #d1d5db;
  --ms-border: #e5e7eb;
  --ms-radius: 12px;
  --ms-radius-lg: 20px;
  --ms-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ms-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ms-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ms-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ms-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ms-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ms-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ms-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes ms-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes ms-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ms-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--ms-white); }
}
@keyframes ms-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.ms-animate { opacity: 0; transform: translateY(40px); animation: ms-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ms-animate--left { opacity: 0; transform: translateX(-40px); animation: ms-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ms-animate--right { opacity: 0; transform: translateX(40px); animation: ms-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ms-animate--scale { opacity: 0; transform: scale(0.85); animation: ms-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.ms-stagger > *:nth-child(1) { animation-delay: 0s; }
.ms-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ms-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ms-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ms-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ms-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ms-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .ms-animate, .ms-animate--left, .ms-animate--right, .ms-animate--scale { opacity: 1; transform: none; animation: none; }
}

.ms-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ms-text-accent { color: var(--ms-accent); }

.ms-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--ms-text); line-height: 1.5; }
.ms-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--ms-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.ms-hero {
  background: var(--ms-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.ms-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.ms-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.ms-hero__title { font-size: 3rem; font-weight: 700; color: var(--ms-white); margin-bottom: 20px; line-height: 1.2; animation: ms-fadeUp 0.7s ease 0.25s both; }
.ms-hero__title-accent { color: var(--ms-accent); font-style: italic; display: inline-block; }
.ms-hero__subtitle { font-size: 1.3rem; color: var(--ms-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: ms-fadeUp 0.7s ease 0.45s both; }
.ms-hero__desc { font-size: 0.95rem; color: var(--ms-gray-light); font-style: italic; animation: ms-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.ms-about { padding: 80px 0; background: var(--ms-white); }
.ms-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ms-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--ms-text); margin-bottom: 20px; line-height: 1.25; }
.ms-about__text { font-size: 1rem; color: var(--ms-gray); line-height: 1.75; margin-bottom: 14px; }
.ms-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.ms-stats, .ms-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ms-stat {
  background: var(--ms-light-bg); border-radius: var(--ms-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--ms-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.ms-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ms-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.ms-stat:hover::before { transform: scaleX(1); }
.ms-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--ms-accent); }
.ms-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: ms-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.ms-stat:nth-child(1) .ms-stat__number { animation-delay: 0.2s; }
.ms-stat:nth-child(2) .ms-stat__number { animation-delay: 0.4s; }
.ms-stat:nth-child(3) .ms-stat__number { animation-delay: 0.6s; }
.ms-stat:nth-child(4) .ms-stat__number { animation-delay: 0.8s; }
.ms-stat__label { display: block; font-size: 0.82rem; color: var(--ms-gray); font-weight: 500; line-height: 1.3; }
.ms-stat--dark { background: var(--ms-white); border-color: var(--ms-border); }
.ms-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.ms-whoweare { padding: 80px 0; background: var(--ms-light-bg); }
.ms-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ms-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--ms-text); margin-bottom: 20px; line-height: 1.25; }
.ms-whoweare__text { font-size: 1rem; color: var(--ms-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.ms-services { padding: 80px 0; background: var(--ms-white); }
.ms-services__header { text-align: center; margin-bottom: 48px; }
.ms-services__title { font-size: 2.2rem; font-weight: 700; color: var(--ms-text); }
.ms-services__subtitle { font-size: 1rem; color: var(--ms-gray); margin-top: 12px; line-height: 1.6; }
.ms-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ms-service-card {
  background: var(--ms-light-bg); border-radius: var(--ms-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.ms-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--ms-accent); background: var(--ms-white); }
.ms-service-card--wide { grid-column: 1 / -1; }
.ms-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--ms-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.ms-service-card:hover .ms-service-card__badge { animation: ms-shimmer 1.5s ease infinite; transform: scale(1.1); }
.ms-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--ms-text); margin-bottom: 10px; }
.ms-service-card__text { font-size: 0.9rem; color: var(--ms-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.ms-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.ms-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.ms-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--ms-text); margin-bottom: 14px; position: relative; z-index: 1; }
.ms-delivery__text { font-size: 1rem; color: var(--ms-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.ms-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.ms-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.ms-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--ms-white); border: 2px solid #e0e7ff; color: var(--ms-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.ms-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.ms-step:hover .ms-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.ms-delivery__steps > :nth-child(1) .ms-step__circle  { animation: ms-stepGlow 7s ease infinite 0s; }
.ms-delivery__steps > :nth-child(3) .ms-step__circle  { animation: ms-stepGlow 7s ease infinite 1s; }
.ms-delivery__steps > :nth-child(5) .ms-step__circle  { animation: ms-stepGlow 7s ease infinite 2s; }
.ms-delivery__steps > :nth-child(7) .ms-step__circle  { animation: ms-stepGlow 7s ease infinite 3s; }
.ms-delivery__steps > :nth-child(9) .ms-step__circle  { animation: ms-stepGlow 7s ease infinite 4s; }
.ms-delivery__steps > :nth-child(11) .ms-step__circle { animation: ms-stepGlow 7s ease infinite 5s; }
.ms-delivery__steps > :nth-child(13) .ms-step__circle { animation: ms-stepGlow 7s ease infinite 6s; }
.ms-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: ms-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.ms-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.ms-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.ms-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--ms-text); margin-bottom: 18px; line-height: 1.35; }
.ms-reliable__text { font-size: 1rem; color: var(--ms-gray); line-height: 1.7; margin-bottom: 40px; }
.ms-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ms-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--ms-white);
  border: 1px solid var(--ms-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.ms-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--ms-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.ms-pillar__dot { width: 8px; height: 8px; background: var(--ms-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.ms-pillar:hover .ms-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.ms-pillar__label { font-size: 0.85rem; color: var(--ms-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.ms-industries { padding: 80px 0; background: var(--ms-light-bg); text-align: center; }
.ms-industries__title { font-size: 2rem; font-weight: 700; color: var(--ms-text); margin-bottom: 48px; }
.ms-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ms-industry {
  background: var(--ms-white); border-radius: var(--ms-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--ms-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.ms-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--ms-accent); }
.ms-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.ms-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--ms-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.ms-tech { padding: 80px 0; background: var(--ms-white); }
.ms-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ms-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ms-text); margin-bottom: 20px; line-height: 1.25; }
.ms-tech__text { font-size: 1rem; color: var(--ms-gray); line-height: 1.75; margin-bottom: 14px; }
.ms-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ms-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ms-tag {
  display: inline-block; background: var(--ms-light-bg); color: var(--ms-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--ms-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ms-tag:hover { background: var(--ms-accent); color: var(--ms-white); border-color: var(--ms-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.ms-faq { padding: 80px 0; background: var(--ms-light-bg); }
.ms-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.ms-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--ms-text); margin-bottom: 12px; }
.ms-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.ms-faq__list { text-align: left; }
.ms-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ms-faq__item summary { list-style: none; }
.ms-faq__item summary::-webkit-details-marker { display: none; }
.ms-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.ms-faq__question:hover { color: var(--ms-accent); }
.ms-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ms-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.ms-faq__item[open] .ms-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ms-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ms-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.ms-cta { padding: 80px 0; background: var(--ms-dark); }
.ms-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.ms-cta__heading { font-size: 2rem; font-weight: 700; color: var(--ms-white); margin-bottom: 16px; line-height: 1.3; }
.ms-cta__text { font-size: 1rem; color: var(--ms-gray-light); line-height: 1.7; margin-bottom: 32px; }
.ms-cta__button {
  display: inline-block; background: var(--ms-accent); color: var(--ms-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: ms-pulse 2.5s ease infinite;
}
.ms-cta__button:hover { background: var(--ms-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.ms-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ms-hero__title { font-size: 2.2rem; }
  .ms-about__heading, .ms-whoweare__heading, .ms-tech__heading { font-size: 1.8rem; }
  .ms-services__title { font-size: 1.8rem; }
  .ms-delivery__heading { font-size: 1.8rem; }
  .ms-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .ms-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .ms-step__arrow { font-size: 1rem; margin: 0 1px; }
  .ms-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .ms-hero { padding: 100px 16px 80px; }
  .ms-hero__title { font-size: 1.7rem; }
  .ms-hero__subtitle { font-size: 1rem; }
  .ms-about__grid, .ms-whoweare__grid, .ms-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ms-about__heading, .ms-whoweare__heading, .ms-tech__heading { font-size: 1.6rem; }
  .ms-stats, .ms-whoweare__stats, .ms-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .ms-about__content, .ms-whoweare__content { order: 1; }
  .ms-services__grid { grid-template-columns: 1fr; }
  .ms-services__title { font-size: 1.5rem; }
  .ms-service-card--wide { grid-column: span 1; }
  .ms-delivery__heading { font-size: 1.5rem; }
  .ms-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ms-step__arrow { display: none; }
  .ms-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .ms-reliable__heading { font-size: 1.5rem; }
  .ms-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .ms-industries__title { font-size: 1.5rem; }
  .ms-industries__grid { grid-template-columns: 1fr 1fr; }
  .ms-faq__heading { font-size: 1.3rem; }
  .ms-cta__heading { font-size: 1.5rem; }
  .ms-animate, .ms-animate--left, .ms-animate--right, .ms-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .ms-hero { padding: 90px 14px 60px; }
  .ms-hero__title { font-size: 1.4rem; }
  .ms-hero__subtitle { font-size: 0.9rem; }
  .ms-about, .ms-whoweare, .ms-services, .ms-delivery, .ms-reliable,
  .ms-industries, .ms-faq, .ms-cta, .ms-tech { padding: 50px 0; }
  .ms-about__heading, .ms-whoweare__heading, .ms-tech__heading { font-size: 1.4rem; }
  .ms-about__text, .ms-whoweare__text, .ms-tech__text { font-size: 0.9rem; }
  .ms-stats, .ms-whoweare__stats, .ms-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ms-stat { padding: 20px 14px; }
  .ms-stat__number { font-size: 1.8rem; }
  .ms-stat__label { font-size: 0.75rem; }
  .ms-services__title { font-size: 1.3rem; }
  .ms-service-card { padding: 20px 16px; }
  .ms-delivery__heading { font-size: 1.3rem; }
  .ms-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .ms-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .ms-reliable__heading { font-size: 1.3rem; }
  .ms-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .ms-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ms-industry { padding: 20px 14px; }
  .ms-cta__heading { font-size: 1.3rem; }
  .ms-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}

/*end of cloud managed


/* ============================================================
   CLOUD SECURITY SERVICES PAGE — cloud-security-services.css
   Prefix: se-
   ============================================================ */

:root {
  --se-accent: #e8a025;
  --se-accent-hover: #d4911e;
  --se-dark: #0b1120;
  --se-dark-2: #101828;
  --se-dark-3: #1a2332;
  --se-white: #ffffff;
  --se-gray: #000000;
  --se-gray-light: #e0e7ff;
  --se-light-bg: #f8f9fb;
  --se-light-bg-2: #f1f3f7;
  --se-text: #444444;
  --se-text-light: #d1d5db;
  --se-border: #e5e7eb;
  --se-radius: 12px;
  --se-radius-lg: 20px;
  --se-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --se-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --se-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes se-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes se-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes se-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes se-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes se-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes se-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes se-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes se-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--se-white); }
}
@keyframes se-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.se-animate { opacity: 0; transform: translateY(40px); animation: se-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.se-animate--left { opacity: 0; transform: translateX(-40px); animation: se-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.se-animate--right { opacity: 0; transform: translateX(40px); animation: se-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.se-animate--scale { opacity: 0; transform: scale(0.85); animation: se-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.se-stagger > *:nth-child(1) { animation-delay: 0s; }
.se-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.se-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.se-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.se-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.se-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.se-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .se-animate, .se-animate--left, .se-animate--right, .se-animate--scale { opacity: 1; transform: none; animation: none; }
}

.se-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.se-text-accent { color: var(--se-accent); }

.se-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.se-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--se-text); line-height: 1.5; }
.se-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--se-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.se-hero {
  background: var(--se-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.se-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.se-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.se-hero__title { font-size: 3rem; font-weight: 700; color: var(--se-white); margin-bottom: 20px; line-height: 1.2; animation: se-fadeUp 0.7s ease 0.25s both; }
.se-hero__title-accent { color: var(--se-accent); font-style: italic; display: inline-block; }
.se-hero__subtitle { font-size: 1.3rem; color: var(--se-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: se-fadeUp 0.7s ease 0.45s both; }
.se-hero__desc { font-size: 0.95rem; color: var(--se-gray-light); font-style: italic; animation: se-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.se-about { padding: 80px 0; background: var(--se-white); }
.se-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.se-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--se-text); margin-bottom: 20px; line-height: 1.25; }
.se-about__text { font-size: 1rem; color: var(--se-gray); line-height: 1.75; margin-bottom: 14px; }
.se-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.se-stats, .se-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.se-stat {
  background: var(--se-light-bg); border-radius: var(--se-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--se-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.se-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--se-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.se-stat:hover::before { transform: scaleX(1); }
.se-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--se-accent); }
.se-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: se-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.se-stat:nth-child(1) .se-stat__number { animation-delay: 0.2s; }
.se-stat:nth-child(2) .se-stat__number { animation-delay: 0.4s; }
.se-stat:nth-child(3) .se-stat__number { animation-delay: 0.6s; }
.se-stat:nth-child(4) .se-stat__number { animation-delay: 0.8s; }
.se-stat__label { display: block; font-size: 0.82rem; color: var(--se-gray); font-weight: 500; line-height: 1.3; }
.se-stat--dark { background: var(--se-white); border-color: var(--se-border); }
.se-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.se-whoweare { padding: 80px 0; background: var(--se-light-bg); }
.se-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.se-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--se-text); margin-bottom: 20px; line-height: 1.25; }
.se-whoweare__text { font-size: 1rem; color: var(--se-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.se-services { padding: 80px 0; background: var(--se-white); }
.se-services__header { text-align: center; margin-bottom: 48px; }
.se-services__title { font-size: 2.2rem; font-weight: 700; color: var(--se-text); }
.se-services__subtitle { font-size: 1rem; color: var(--se-gray); margin-top: 12px; line-height: 1.6; }
.se-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.se-service-card {
  background: var(--se-light-bg); border-radius: var(--se-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.se-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--se-accent); background: var(--se-white); }
.se-service-card--wide { grid-column: 1 / -1; }
.se-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--se-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.se-service-card:hover .se-service-card__badge { animation: se-shimmer 1.5s ease infinite; transform: scale(1.1); }
.se-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--se-text); margin-bottom: 10px; }
.se-service-card__text { font-size: 0.9rem; color: var(--se-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.se-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.se-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.se-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--se-text); margin-bottom: 14px; position: relative; z-index: 1; }
.se-delivery__text { font-size: 1rem; color: var(--se-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.se-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.se-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.se-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--se-white); border: 2px solid #e0e7ff; color: var(--se-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.se-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.se-step:hover .se-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.se-delivery__steps > :nth-child(1) .se-step__circle  { animation: se-stepGlow 7s ease infinite 0s; }
.se-delivery__steps > :nth-child(3) .se-step__circle  { animation: se-stepGlow 7s ease infinite 1s; }
.se-delivery__steps > :nth-child(5) .se-step__circle  { animation: se-stepGlow 7s ease infinite 2s; }
.se-delivery__steps > :nth-child(7) .se-step__circle  { animation: se-stepGlow 7s ease infinite 3s; }
.se-delivery__steps > :nth-child(9) .se-step__circle  { animation: se-stepGlow 7s ease infinite 4s; }
.se-delivery__steps > :nth-child(11) .se-step__circle { animation: se-stepGlow 7s ease infinite 5s; }
.se-delivery__steps > :nth-child(13) .se-step__circle { animation: se-stepGlow 7s ease infinite 6s; }
.se-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: se-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.se-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.se-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.se-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--se-text); margin-bottom: 18px; line-height: 1.35; }
.se-reliable__text { font-size: 1rem; color: var(--se-gray); line-height: 1.7; margin-bottom: 40px; }
.se-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.se-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--se-white);
  border: 1px solid var(--se-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.se-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--se-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.se-pillar__dot { width: 8px; height: 8px; background: var(--se-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.se-pillar:hover .se-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.se-pillar__label { font-size: 0.85rem; color: var(--se-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.se-industries { padding: 80px 0; background: var(--se-light-bg); text-align: center; }
.se-industries__title { font-size: 2rem; font-weight: 700; color: var(--se-text); margin-bottom: 48px; }
.se-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.se-industry {
  background: var(--se-white); border-radius: var(--se-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--se-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.se-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--se-accent); }
.se-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.se-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--se-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.se-tech { padding: 80px 0; background: var(--se-white); }
.se-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.se-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--se-text); margin-bottom: 20px; line-height: 1.25; }
.se-tech__text { font-size: 1rem; color: var(--se-gray); line-height: 1.75; margin-bottom: 14px; }
.se-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.se-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.se-tag {
  display: inline-block; background: var(--se-light-bg); color: var(--se-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--se-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.se-tag:hover { background: var(--se-accent); color: var(--se-white); border-color: var(--se-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.se-faq { padding: 80px 0; background: var(--se-light-bg); }
.se-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.se-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--se-text); margin-bottom: 12px; }
.se-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.se-faq__list { text-align: left; }
.se-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.se-faq__item summary { list-style: none; }
.se-faq__item summary::-webkit-details-marker { display: none; }
.se-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.se-faq__question:hover { color: var(--se-accent); }
.se-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.se-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.se-faq__item[open] .se-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.se-faq__answer { padding: 0 0 18px; overflow: hidden; }
.se-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.se-cta { padding: 80px 0; background: var(--se-dark); }
.se-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.se-cta__heading { font-size: 2rem; font-weight: 700; color: var(--se-white); margin-bottom: 16px; line-height: 1.3; }
.se-cta__text { font-size: 1rem; color: var(--se-gray-light); line-height: 1.7; margin-bottom: 32px; }
.se-cta__button {
  display: inline-block; background: var(--se-accent); color: var(--se-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: se-pulse 2.5s ease infinite;
}
.se-cta__button:hover { background: var(--se-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.se-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .se-hero__title { font-size: 2.2rem; }
  .se-about__heading, .se-whoweare__heading, .se-tech__heading { font-size: 1.8rem; }
  .se-services__title { font-size: 1.8rem; }
  .se-delivery__heading { font-size: 1.8rem; }
  .se-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .se-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .se-step__arrow { font-size: 1rem; margin: 0 1px; }
  .se-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .se-hero { padding: 100px 16px 80px; }
  .se-hero__title { font-size: 1.7rem; }
  .se-hero__subtitle { font-size: 1rem; }
  .se-about__grid, .se-whoweare__grid, .se-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .se-about__heading, .se-whoweare__heading, .se-tech__heading { font-size: 1.6rem; }
  .se-stats, .se-whoweare__stats, .se-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .se-about__content, .se-whoweare__content { order: 1; }
  .se-services__grid { grid-template-columns: 1fr; }
  .se-services__title { font-size: 1.5rem; }
  .se-service-card--wide { grid-column: span 1; }
  .se-delivery__heading { font-size: 1.5rem; }
  .se-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .se-step__arrow { display: none; }
  .se-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .se-reliable__heading { font-size: 1.5rem; }
  .se-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .se-industries__title { font-size: 1.5rem; }
  .se-industries__grid { grid-template-columns: 1fr 1fr; }
  .se-faq__heading { font-size: 1.3rem; }
  .se-cta__heading { font-size: 1.5rem; }
  .se-animate, .se-animate--left, .se-animate--right, .se-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .se-hero { padding: 90px 14px 60px; }
  .se-hero__title { font-size: 1.4rem; }
  .se-hero__subtitle { font-size: 0.9rem; }
  .se-about, .se-whoweare, .se-services, .se-delivery, .se-reliable,
  .se-industries, .se-faq, .se-cta, .se-tech { padding: 50px 0; }
  .se-about__heading, .se-whoweare__heading, .se-tech__heading { font-size: 1.4rem; }
  .se-about__text, .se-whoweare__text, .se-tech__text { font-size: 0.9rem; }
  .se-stats, .se-whoweare__stats, .se-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .se-stat { padding: 20px 14px; }
  .se-stat__number { font-size: 1.8rem; }
  .se-stat__label { font-size: 0.75rem; }
  .se-services__title { font-size: 1.3rem; }
  .se-service-card { padding: 20px 16px; }
  .se-delivery__heading { font-size: 1.3rem; }
  .se-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .se-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .se-reliable__heading { font-size: 1.3rem; }
  .se-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .se-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .se-industry { padding: 20px 14px; }
  .se-cta__heading { font-size: 1.3rem; }
  .se-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}

/*end of clous security services


/* ============================================================
   DEVOPS CONSULTING SERVICES PAGE — devops-consulting-services.css
   Prefix: dc-
   ============================================================ */

:root {
  --dc-accent: #e8a025;
  --dc-accent-hover: #d4911e;
  --dc-dark: #0b1120;
  --dc-dark-2: #101828;
  --dc-dark-3: #1a2332;
  --dc-white: #ffffff;
  --dc-gray: #000000;
  --dc-gray-light: #e0e7ff;
  --dc-light-bg: #f8f9fb;
  --dc-light-bg-2: #f1f3f7;
  --dc-text: #444444;
  --dc-text-light: #d1d5db;
  --dc-border: #e5e7eb;
  --dc-radius: 12px;
  --dc-radius-lg: 20px;
  --dc-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --dc-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --dc-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes dc-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dc-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dc-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dc-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes dc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes dc-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes dc-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes dc-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--dc-white); }
}
@keyframes dc-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.dc-animate { opacity: 0; transform: translateY(40px); animation: dc-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dc-animate--left { opacity: 0; transform: translateX(-40px); animation: dc-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dc-animate--right { opacity: 0; transform: translateX(40px); animation: dc-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dc-animate--scale { opacity: 0; transform: scale(0.85); animation: dc-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.dc-stagger > *:nth-child(1) { animation-delay: 0s; }
.dc-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.dc-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.dc-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.dc-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.dc-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.dc-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .dc-animate, .dc-animate--left, .dc-animate--right, .dc-animate--scale { opacity: 1; transform: none; animation: none; }
}

.dc-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.dc-text-accent { color: var(--dc-accent); }

.dc-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dc-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--dc-text); line-height: 1.5; }
.dc-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--dc-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.dc-hero {
  background: var(--dc-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.dc-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.dc-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.dc-hero__title { font-size: 3rem; font-weight: 700; color: var(--dc-white); margin-bottom: 20px; line-height: 1.2; animation: dc-fadeUp 0.7s ease 0.25s both; }
.dc-hero__title-accent { color: var(--dc-accent); font-style: italic; display: inline-block; }
.dc-hero__subtitle { font-size: 1.3rem; color: var(--dc-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: dc-fadeUp 0.7s ease 0.45s both; }
.dc-hero__desc { font-size: 0.95rem; color: var(--dc-gray-light); font-style: italic; animation: dc-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.dc-about { padding: 80px 0; background: var(--dc-white); }
.dc-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dc-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--dc-text); margin-bottom: 20px; line-height: 1.25; }
.dc-about__text { font-size: 1rem; color: var(--dc-gray); line-height: 1.75; margin-bottom: 14px; }
.dc-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.dc-stats, .dc-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dc-stat {
  background: var(--dc-light-bg); border-radius: var(--dc-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--dc-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.dc-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--dc-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.dc-stat:hover::before { transform: scaleX(1); }
.dc-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--dc-accent); }
.dc-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: dc-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.dc-stat:nth-child(1) .dc-stat__number { animation-delay: 0.2s; }
.dc-stat:nth-child(2) .dc-stat__number { animation-delay: 0.4s; }
.dc-stat:nth-child(3) .dc-stat__number { animation-delay: 0.6s; }
.dc-stat:nth-child(4) .dc-stat__number { animation-delay: 0.8s; }
.dc-stat__label { display: block; font-size: 0.82rem; color: var(--dc-gray); font-weight: 500; line-height: 1.3; }
.dc-stat--dark { background: var(--dc-white); border-color: var(--dc-border); }
.dc-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.dc-whoweare { padding: 80px 0; background: var(--dc-light-bg); }
.dc-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dc-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--dc-text); margin-bottom: 20px; line-height: 1.25; }
.dc-whoweare__text { font-size: 1rem; color: var(--dc-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.dc-services { padding: 80px 0; background: var(--dc-white); }
.dc-services__header { text-align: center; margin-bottom: 48px; }
.dc-services__title { font-size: 2.2rem; font-weight: 700; color: var(--dc-text); }
.dc-services__subtitle { font-size: 1rem; color: var(--dc-gray); margin-top: 12px; line-height: 1.6; }
.dc-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dc-service-card {
  background: var(--dc-light-bg); border-radius: var(--dc-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.dc-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--dc-accent); background: var(--dc-white); }
.dc-service-card--wide { grid-column: 1 / -1; }
.dc-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--dc-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.dc-service-card:hover .dc-service-card__badge { animation: dc-shimmer 1.5s ease infinite; transform: scale(1.1); }
.dc-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--dc-text); margin-bottom: 10px; }
.dc-service-card__text { font-size: 0.9rem; color: var(--dc-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.dc-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.dc-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.dc-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--dc-text); margin-bottom: 14px; position: relative; z-index: 1; }
.dc-delivery__text { font-size: 1rem; color: var(--dc-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.dc-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.dc-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.dc-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--dc-white); border: 2px solid #e0e7ff; color: var(--dc-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.dc-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.dc-step:hover .dc-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.dc-delivery__steps > :nth-child(1) .dc-step__circle  { animation: dc-stepGlow 7s ease infinite 0s; }
.dc-delivery__steps > :nth-child(3) .dc-step__circle  { animation: dc-stepGlow 7s ease infinite 1s; }
.dc-delivery__steps > :nth-child(5) .dc-step__circle  { animation: dc-stepGlow 7s ease infinite 2s; }
.dc-delivery__steps > :nth-child(7) .dc-step__circle  { animation: dc-stepGlow 7s ease infinite 3s; }
.dc-delivery__steps > :nth-child(9) .dc-step__circle  { animation: dc-stepGlow 7s ease infinite 4s; }
.dc-delivery__steps > :nth-child(11) .dc-step__circle { animation: dc-stepGlow 7s ease infinite 5s; }
.dc-delivery__steps > :nth-child(13) .dc-step__circle { animation: dc-stepGlow 7s ease infinite 6s; }
.dc-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: dc-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.dc-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.dc-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.dc-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--dc-text); margin-bottom: 18px; line-height: 1.35; }
.dc-reliable__text { font-size: 1rem; color: var(--dc-gray); line-height: 1.7; margin-bottom: 40px; }
.dc-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.dc-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--dc-white);
  border: 1px solid var(--dc-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.dc-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--dc-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.dc-pillar__dot { width: 8px; height: 8px; background: var(--dc-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.dc-pillar:hover .dc-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.dc-pillar__label { font-size: 0.85rem; color: var(--dc-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.dc-industries { padding: 80px 0; background: var(--dc-light-bg); text-align: center; }
.dc-industries__title { font-size: 2rem; font-weight: 700; color: var(--dc-text); margin-bottom: 48px; }
.dc-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dc-industry {
  background: var(--dc-white); border-radius: var(--dc-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--dc-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.dc-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--dc-accent); }
.dc-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.dc-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--dc-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.dc-tech { padding: 80px 0; background: var(--dc-white); }
.dc-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dc-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--dc-text); margin-bottom: 20px; line-height: 1.25; }
.dc-tech__text { font-size: 1rem; color: var(--dc-gray); line-height: 1.75; margin-bottom: 14px; }
.dc-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dc-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dc-tag {
  display: inline-block; background: var(--dc-light-bg); color: var(--dc-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--dc-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.dc-tag:hover { background: var(--dc-accent); color: var(--dc-white); border-color: var(--dc-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.dc-faq { padding: 80px 0; background: var(--dc-light-bg); }
.dc-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.dc-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--dc-text); margin-bottom: 12px; }
.dc-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.dc-faq__list { text-align: left; }
.dc-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.dc-faq__item summary { list-style: none; }
.dc-faq__item summary::-webkit-details-marker { display: none; }
.dc-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.dc-faq__question:hover { color: var(--dc-accent); }
.dc-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.dc-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.dc-faq__item[open] .dc-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.dc-faq__answer { padding: 0 0 18px; overflow: hidden; }
.dc-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.dc-cta { padding: 80px 0; background: var(--dc-dark); }
.dc-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.dc-cta__heading { font-size: 2rem; font-weight: 700; color: var(--dc-white); margin-bottom: 16px; line-height: 1.3; }
.dc-cta__text { font-size: 1rem; color: var(--dc-gray-light); line-height: 1.7; margin-bottom: 32px; }
.dc-cta__button {
  display: inline-block; background: var(--dc-accent); color: var(--dc-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: dc-pulse 2.5s ease infinite;
}
.dc-cta__button:hover { background: var(--dc-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.dc-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dc-hero__title { font-size: 2.2rem; }
  .dc-about__heading, .dc-whoweare__heading, .dc-tech__heading { font-size: 1.8rem; }
  .dc-services__title { font-size: 1.8rem; }
  .dc-delivery__heading { font-size: 1.8rem; }
  .dc-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .dc-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .dc-step__arrow { font-size: 1rem; margin: 0 1px; }
  .dc-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .dc-hero { padding: 100px 16px 80px; }
  .dc-hero__title { font-size: 1.7rem; }
  .dc-hero__subtitle { font-size: 1rem; }
  .dc-about__grid, .dc-whoweare__grid, .dc-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .dc-about__heading, .dc-whoweare__heading, .dc-tech__heading { font-size: 1.6rem; }
  .dc-stats, .dc-whoweare__stats, .dc-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .dc-about__content, .dc-whoweare__content { order: 1; }
  .dc-services__grid { grid-template-columns: 1fr; }
  .dc-services__title { font-size: 1.5rem; }
  .dc-service-card--wide { grid-column: span 1; }
  .dc-delivery__heading { font-size: 1.5rem; }
  .dc-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .dc-step__arrow { display: none; }
  .dc-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .dc-reliable__heading { font-size: 1.5rem; }
  .dc-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .dc-industries__title { font-size: 1.5rem; }
  .dc-industries__grid { grid-template-columns: 1fr 1fr; }
  .dc-faq__heading { font-size: 1.3rem; }
  .dc-cta__heading { font-size: 1.5rem; }
  .dc-animate, .dc-animate--left, .dc-animate--right, .dc-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .dc-hero { padding: 90px 14px 60px; }
  .dc-hero__title { font-size: 1.4rem; }
  .dc-hero__subtitle { font-size: 0.9rem; }
  .dc-about, .dc-whoweare, .dc-services, .dc-delivery, .dc-reliable,
  .dc-industries, .dc-faq, .dc-cta, .dc-tech { padding: 50px 0; }
  .dc-about__heading, .dc-whoweare__heading, .dc-tech__heading { font-size: 1.4rem; }
  .dc-about__text, .dc-whoweare__text, .dc-tech__text { font-size: 0.9rem; }
  .dc-stats, .dc-whoweare__stats, .dc-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dc-stat { padding: 20px 14px; }
  .dc-stat__number { font-size: 1.8rem; }
  .dc-stat__label { font-size: 0.75rem; }
  .dc-services__title { font-size: 1.3rem; }
  .dc-service-card { padding: 20px 16px; }
  .dc-delivery__heading { font-size: 1.3rem; }
  .dc-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .dc-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .dc-reliable__heading { font-size: 1.3rem; }
  .dc-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .dc-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dc-industry { padding: 20px 14px; }
  .dc-cta__heading { font-size: 1.3rem; }
  .dc-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}

/*end of devops 

/* ============================================================
   GENERATIVE AI DEVELOPMENT PAGE — generative-ai.css
   Prefix: ga-
   ============================================================ */

:root {
  --ga-accent: #e8a025;
  --ga-accent-hover: #d4911e;
  --ga-dark: #0b1120;
  --ga-dark-2: #101828;
  --ga-dark-3: #1a2332;
  --ga-white: #ffffff;
  --ga-gray: #000000;
  --ga-gray-light: #e0e7ff;
  --ga-light-bg: #f8f9fb;
  --ga-light-bg-2: #f1f3f7;
  --ga-text: #444444;
  --ga-text-light: #d1d5db;
  --ga-border: #e5e7eb;
  --ga-radius: 12px;
  --ga-radius-lg: 20px;
  --ga-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ga-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ga-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ga-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ga-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ga-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ga-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ga-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes ga-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes ga-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ga-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--ga-white); }
}
@keyframes ga-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.ga-animate { opacity: 0; transform: translateY(40px); animation: ga-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ga-animate--left { opacity: 0; transform: translateX(-40px); animation: ga-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ga-animate--right { opacity: 0; transform: translateX(40px); animation: ga-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ga-animate--scale { opacity: 0; transform: scale(0.85); animation: ga-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.ga-stagger > *:nth-child(1) { animation-delay: 0s; }
.ga-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ga-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ga-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ga-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ga-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ga-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .ga-animate, .ga-animate--left, .ga-animate--right, .ga-animate--scale { opacity: 1; transform: none; animation: none; }
}

.ga-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ga-text-accent { color: var(--ga-accent); }

.ga-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ga-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--ga-text); line-height: 1.5; }
.ga-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--ga-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.ga-hero {
  background: var(--ga-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.ga-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.ga-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.ga-hero__title { font-size: 3rem; font-weight: 700; color: var(--ga-white); margin-bottom: 20px; line-height: 1.2; animation: ga-fadeUp 0.7s ease 0.25s both; }
.ga-hero__title-accent { color: var(--ga-accent); font-style: italic; display: inline-block; }
.ga-hero__subtitle { font-size: 1.3rem; color: var(--ga-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: ga-fadeUp 0.7s ease 0.45s both; }
.ga-hero__desc { font-size: 0.95rem; color: var(--ga-gray-light); font-style: italic; animation: ga-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.ga-about { padding: 80px 0; background: var(--ga-white); }
.ga-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ga-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--ga-text); margin-bottom: 20px; line-height: 1.25; }
.ga-about__text { font-size: 1rem; color: var(--ga-gray); line-height: 1.75; margin-bottom: 14px; }
.ga-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.ga-stats, .ga-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ga-stat {
  background: var(--ga-light-bg); border-radius: var(--ga-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--ga-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.ga-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ga-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.ga-stat:hover::before { transform: scaleX(1); }
.ga-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--ga-accent); }
.ga-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: ga-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.ga-stat:nth-child(1) .ga-stat__number { animation-delay: 0.2s; }
.ga-stat:nth-child(2) .ga-stat__number { animation-delay: 0.4s; }
.ga-stat:nth-child(3) .ga-stat__number { animation-delay: 0.6s; }
.ga-stat:nth-child(4) .ga-stat__number { animation-delay: 0.8s; }
.ga-stat__label { display: block; font-size: 0.82rem; color: var(--ga-gray); font-weight: 500; line-height: 1.3; }
.ga-stat--dark { background: var(--ga-white); border-color: var(--ga-border); }
.ga-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.ga-whoweare { padding: 80px 0; background: var(--ga-light-bg); }
.ga-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ga-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--ga-text); margin-bottom: 20px; line-height: 1.25; }
.ga-whoweare__text { font-size: 1rem; color: var(--ga-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.ga-services { padding: 80px 0; background: var(--ga-white); }
.ga-services__header { text-align: center; margin-bottom: 48px; }
.ga-services__title { font-size: 2.2rem; font-weight: 700; color: var(--ga-text); }
.ga-services__subtitle { font-size: 1rem; color: var(--ga-gray); margin-top: 12px; line-height: 1.6; }
.ga-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ga-service-card {
  background: var(--ga-light-bg); border-radius: var(--ga-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.ga-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--ga-accent); background: var(--ga-white); }
.ga-service-card--wide { grid-column: 1 / -1; }
.ga-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--ga-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.ga-service-card:hover .ga-service-card__badge { animation: ga-shimmer 1.5s ease infinite; transform: scale(1.1); }
.ga-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--ga-text); margin-bottom: 10px; }
.ga-service-card__text { font-size: 0.9rem; color: var(--ga-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.ga-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.ga-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.ga-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--ga-text); margin-bottom: 14px; position: relative; z-index: 1; }
.ga-delivery__text { font-size: 1rem; color: var(--ga-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.ga-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.ga-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.ga-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--ga-white); border: 2px solid #e0e7ff; color: var(--ga-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.ga-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.ga-step:hover .ga-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.ga-delivery__steps > :nth-child(1) .ga-step__circle  { animation: ga-stepGlow 7s ease infinite 0s; }
.ga-delivery__steps > :nth-child(3) .ga-step__circle  { animation: ga-stepGlow 7s ease infinite 1s; }
.ga-delivery__steps > :nth-child(5) .ga-step__circle  { animation: ga-stepGlow 7s ease infinite 2s; }
.ga-delivery__steps > :nth-child(7) .ga-step__circle  { animation: ga-stepGlow 7s ease infinite 3s; }
.ga-delivery__steps > :nth-child(9) .ga-step__circle  { animation: ga-stepGlow 7s ease infinite 4s; }
.ga-delivery__steps > :nth-child(11) .ga-step__circle { animation: ga-stepGlow 7s ease infinite 5s; }
.ga-delivery__steps > :nth-child(13) .ga-step__circle { animation: ga-stepGlow 7s ease infinite 6s; }
.ga-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: ga-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.ga-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.ga-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.ga-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--ga-text); margin-bottom: 18px; line-height: 1.35; }
.ga-reliable__text { font-size: 1rem; color: var(--ga-gray); line-height: 1.7; margin-bottom: 40px; }
.ga-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ga-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--ga-white);
  border: 1px solid var(--ga-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.ga-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--ga-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.ga-pillar__dot { width: 8px; height: 8px; background: var(--ga-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.ga-pillar:hover .ga-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.ga-pillar__label { font-size: 0.85rem; color: var(--ga-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.ga-industries { padding: 80px 0; background: var(--ga-light-bg); text-align: center; }
.ga-industries__title { font-size: 2rem; font-weight: 700; color: var(--ga-text); margin-bottom: 48px; }
.ga-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ga-industry {
  background: var(--ga-white); border-radius: var(--ga-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--ga-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.ga-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--ga-accent); }
.ga-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.ga-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--ga-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.ga-tech { padding: 80px 0; background: var(--ga-white); }
.ga-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ga-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ga-text); margin-bottom: 20px; line-height: 1.25; }
.ga-tech__text { font-size: 1rem; color: var(--ga-gray); line-height: 1.75; margin-bottom: 14px; }
.ga-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ga-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ga-tag {
  display: inline-block; background: var(--ga-light-bg); color: var(--ga-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--ga-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ga-tag:hover { background: var(--ga-accent); color: var(--ga-white); border-color: var(--ga-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.ga-faq { padding: 80px 0; background: var(--ga-light-bg); }
.ga-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.ga-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--ga-text); margin-bottom: 12px; }
.ga-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.ga-faq__list { text-align: left; }
.ga-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ga-faq__item summary { list-style: none; }
.ga-faq__item summary::-webkit-details-marker { display: none; }
.ga-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.ga-faq__question:hover { color: var(--ga-accent); }
.ga-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ga-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.ga-faq__item[open] .ga-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ga-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ga-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.ga-cta { padding: 80px 0; background: var(--ga-dark); }
.ga-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.ga-cta__heading { font-size: 2rem; font-weight: 700; color: var(--ga-white); margin-bottom: 16px; line-height: 1.3; }
.ga-cta__text { font-size: 1rem; color: var(--ga-gray-light); line-height: 1.7; margin-bottom: 32px; }
.ga-cta__button {
  display: inline-block; background: var(--ga-accent); color: var(--ga-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: ga-pulse 2.5s ease infinite;
}
.ga-cta__button:hover { background: var(--ga-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.ga-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ga-hero__title { font-size: 2.2rem; }
  .ga-about__heading, .ga-whoweare__heading, .ga-tech__heading { font-size: 1.8rem; }
  .ga-services__title { font-size: 1.8rem; }
  .ga-delivery__heading { font-size: 1.8rem; }
  .ga-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .ga-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .ga-step__arrow { font-size: 1rem; margin: 0 1px; }
  .ga-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .ga-hero { padding: 100px 16px 80px; }
  .ga-hero__title { font-size: 1.7rem; }
  .ga-hero__subtitle { font-size: 1rem; }
  .ga-about__grid, .ga-whoweare__grid, .ga-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ga-about__heading, .ga-whoweare__heading, .ga-tech__heading { font-size: 1.6rem; }
  .ga-stats, .ga-whoweare__stats, .ga-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .ga-about__content, .ga-whoweare__content { order: 1; }
  .ga-services__grid { grid-template-columns: 1fr; }
  .ga-services__title { font-size: 1.5rem; }
  .ga-service-card--wide { grid-column: span 1; }
  .ga-delivery__heading { font-size: 1.5rem; }
  .ga-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ga-step__arrow { display: none; }
  .ga-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .ga-reliable__heading { font-size: 1.5rem; }
  .ga-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .ga-industries__title { font-size: 1.5rem; }
  .ga-industries__grid { grid-template-columns: 1fr 1fr; }
  .ga-faq__heading { font-size: 1.3rem; }
  .ga-cta__heading { font-size: 1.5rem; }
  .ga-animate, .ga-animate--left, .ga-animate--right, .ga-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .ga-hero { padding: 90px 14px 60px; }
  .ga-hero__title { font-size: 1.4rem; }
  .ga-hero__subtitle { font-size: 0.9rem; }
  .ga-about, .ga-whoweare, .ga-services, .ga-delivery, .ga-reliable,
  .ga-industries, .ga-faq, .ga-cta, .ga-tech { padding: 50px 0; }
  .ga-about__heading, .ga-whoweare__heading, .ga-tech__heading { font-size: 1.4rem; }
  .ga-about__text, .ga-whoweare__text, .ga-tech__text { font-size: 0.9rem; }
  .ga-stats, .ga-whoweare__stats, .ga-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ga-stat { padding: 20px 14px; }
  .ga-stat__number { font-size: 1.8rem; }
  .ga-stat__label { font-size: 0.75rem; }
  .ga-services__title { font-size: 1.3rem; }
  .ga-service-card { padding: 20px 16px; }
  .ga-delivery__heading { font-size: 1.3rem; }
  .ga-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .ga-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .ga-reliable__heading { font-size: 1.3rem; }
  .ga-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .ga-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ga-industry { padding: 20px 14px; }
  .ga-cta__heading { font-size: 1.3rem; }
  .ga-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}
/*genai end

/* ============================================================
   DATA SCIENCE SOLUTIONS PAGE — data-science.css
   Prefix: ds-
   ============================================================ */

:root {
  --ds-accent: #e8a025;
  --ds-accent-hover: #d4911e;
  --ds-dark: #0b1120;
  --ds-dark-2: #101828;
  --ds-dark-3: #1a2332;
  --ds-white: #ffffff;
  --ds-gray: #000000;
  --ds-gray-light: #e0e7ff;
  --ds-light-bg: #f8f9fb;
  --ds-light-bg-2: #f1f3f7;
  --ds-text: #444444;
  --ds-text-light: #d1d5db;
  --ds-border: #e5e7eb;
  --ds-radius: 12px;
  --ds-radius-lg: 20px;
  --ds-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ds-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ds-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ds-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ds-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ds-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ds-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes ds-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes ds-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ds-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--ds-white); }
}
@keyframes ds-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.ds-animate { opacity: 0; transform: translateY(40px); animation: ds-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ds-animate--left { opacity: 0; transform: translateX(-40px); animation: ds-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ds-animate--right { opacity: 0; transform: translateX(40px); animation: ds-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ds-animate--scale { opacity: 0; transform: scale(0.85); animation: ds-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.ds-stagger > *:nth-child(1) { animation-delay: 0s; }
.ds-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ds-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ds-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ds-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ds-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ds-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .ds-animate, .ds-animate--left, .ds-animate--right, .ds-animate--scale { opacity: 1; transform: none; animation: none; }
}

.ds-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ds-text-accent { color: var(--ds-accent); }

.ds-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ds-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--ds-text); line-height: 1.5; }
.ds-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--ds-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.ds-hero {
  background: var(--ds-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.ds-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.ds-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.ds-hero__title { font-size: 3rem; font-weight: 700; color: var(--ds-white); margin-bottom: 20px; line-height: 1.2; animation: ds-fadeUp 0.7s ease 0.25s both; }
.ds-hero__title-accent { color: var(--ds-accent); font-style: italic; display: inline-block; }
.ds-hero__subtitle { font-size: 1.3rem; color: var(--ds-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: ds-fadeUp 0.7s ease 0.45s both; }
.ds-hero__desc { font-size: 0.95rem; color: var(--ds-gray-light); font-style: italic; animation: ds-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.ds-about { padding: 80px 0; background: var(--ds-white); }
.ds-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ds-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--ds-text); margin-bottom: 20px; line-height: 1.25; }
.ds-about__text { font-size: 1rem; color: var(--ds-gray); line-height: 1.75; margin-bottom: 14px; }
.ds-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.ds-stats, .ds-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ds-stat {
  background: var(--ds-light-bg); border-radius: var(--ds-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--ds-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.ds-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ds-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.ds-stat:hover::before { transform: scaleX(1); }
.ds-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--ds-accent); }
.ds-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: ds-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.ds-stat:nth-child(1) .ds-stat__number { animation-delay: 0.2s; }
.ds-stat:nth-child(2) .ds-stat__number { animation-delay: 0.4s; }
.ds-stat:nth-child(3) .ds-stat__number { animation-delay: 0.6s; }
.ds-stat:nth-child(4) .ds-stat__number { animation-delay: 0.8s; }
.ds-stat__label { display: block; font-size: 0.82rem; color: var(--ds-gray); font-weight: 500; line-height: 1.3; }
.ds-stat--dark { background: var(--ds-white); border-color: var(--ds-border); }
.ds-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.ds-whoweare { padding: 80px 0; background: var(--ds-light-bg); }
.ds-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ds-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--ds-text); margin-bottom: 20px; line-height: 1.25; }
.ds-whoweare__text { font-size: 1rem; color: var(--ds-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.ds-services { padding: 80px 0; background: var(--ds-white); }
.ds-services__header { text-align: center; margin-bottom: 48px; }
.ds-services__title { font-size: 2.2rem; font-weight: 700; color: var(--ds-text); }
.ds-services__subtitle { font-size: 1rem; color: var(--ds-gray); margin-top: 12px; line-height: 1.6; }
.ds-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ds-service-card {
  background: var(--ds-light-bg); border-radius: var(--ds-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.ds-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--ds-accent); background: var(--ds-white); }
.ds-service-card--wide { grid-column: 1 / -1; }
.ds-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--ds-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.ds-service-card:hover .ds-service-card__badge { animation: ds-shimmer 1.5s ease infinite; transform: scale(1.1); }
.ds-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--ds-text); margin-bottom: 10px; }
.ds-service-card__text { font-size: 0.9rem; color: var(--ds-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.ds-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.ds-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.ds-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--ds-text); margin-bottom: 14px; position: relative; z-index: 1; }
.ds-delivery__text { font-size: 1rem; color: var(--ds-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.ds-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.ds-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.ds-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--ds-white); border: 2px solid #e0e7ff; color: var(--ds-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.ds-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.ds-step:hover .ds-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.ds-delivery__steps > :nth-child(1) .ds-step__circle  { animation: ds-stepGlow 7s ease infinite 0s; }
.ds-delivery__steps > :nth-child(3) .ds-step__circle  { animation: ds-stepGlow 7s ease infinite 1s; }
.ds-delivery__steps > :nth-child(5) .ds-step__circle  { animation: ds-stepGlow 7s ease infinite 2s; }
.ds-delivery__steps > :nth-child(7) .ds-step__circle  { animation: ds-stepGlow 7s ease infinite 3s; }
.ds-delivery__steps > :nth-child(9) .ds-step__circle  { animation: ds-stepGlow 7s ease infinite 4s; }
.ds-delivery__steps > :nth-child(11) .ds-step__circle { animation: ds-stepGlow 7s ease infinite 5s; }
.ds-delivery__steps > :nth-child(13) .ds-step__circle { animation: ds-stepGlow 7s ease infinite 6s; }
.ds-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: ds-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.ds-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.ds-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.ds-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--ds-text); margin-bottom: 18px; line-height: 1.35; }
.ds-reliable__text { font-size: 1rem; color: var(--ds-gray); line-height: 1.7; margin-bottom: 40px; }
.ds-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ds-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--ds-white);
  border: 1px solid var(--ds-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.ds-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--ds-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.ds-pillar__dot { width: 8px; height: 8px; background: var(--ds-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.ds-pillar:hover .ds-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.ds-pillar__label { font-size: 0.85rem; color: var(--ds-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.ds-industries { padding: 80px 0; background: var(--ds-light-bg); text-align: center; }
.ds-industries__title { font-size: 2rem; font-weight: 700; color: var(--ds-text); margin-bottom: 48px; }
.ds-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ds-industry {
  background: var(--ds-white); border-radius: var(--ds-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--ds-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.ds-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--ds-accent); }
.ds-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.ds-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--ds-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.ds-tech { padding: 80px 0; background: var(--ds-white); }
.ds-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ds-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ds-text); margin-bottom: 20px; line-height: 1.25; }
.ds-tech__text { font-size: 1rem; color: var(--ds-gray); line-height: 1.75; margin-bottom: 14px; }
.ds-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ds-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ds-tag {
  display: inline-block; background: var(--ds-light-bg); color: var(--ds-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--ds-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ds-tag:hover { background: var(--ds-accent); color: var(--ds-white); border-color: var(--ds-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.ds-faq { padding: 80px 0; background: var(--ds-light-bg); }
.ds-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.ds-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--ds-text); margin-bottom: 12px; }
.ds-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.ds-faq__list { text-align: left; }
.ds-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ds-faq__item summary { list-style: none; }
.ds-faq__item summary::-webkit-details-marker { display: none; }
.ds-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.ds-faq__question:hover { color: var(--ds-accent); }
.ds-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ds-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.ds-faq__item[open] .ds-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ds-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ds-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.ds-cta { padding: 80px 0; background: var(--ds-dark); }
.ds-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.ds-cta__heading { font-size: 2rem; font-weight: 700; color: var(--ds-white); margin-bottom: 16px; line-height: 1.3; }
.ds-cta__text { font-size: 1rem; color: var(--ds-gray-light); line-height: 1.7; margin-bottom: 32px; }
.ds-cta__button {
  display: inline-block; background: var(--ds-accent); color: var(--ds-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: ds-pulse 2.5s ease infinite;
}
.ds-cta__button:hover { background: var(--ds-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.ds-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ds-hero__title { font-size: 2.2rem; }
  .ds-about__heading, .ds-whoweare__heading, .ds-tech__heading { font-size: 1.8rem; }
  .ds-services__title { font-size: 1.8rem; }
  .ds-delivery__heading { font-size: 1.8rem; }
  .ds-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .ds-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .ds-step__arrow { font-size: 1rem; margin: 0 1px; }
  .ds-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .ds-hero { padding: 100px 16px 80px; }
  .ds-hero__title { font-size: 1.7rem; }
  .ds-hero__subtitle { font-size: 1rem; }
  .ds-about__grid, .ds-whoweare__grid, .ds-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ds-about__heading, .ds-whoweare__heading, .ds-tech__heading { font-size: 1.6rem; }
  .ds-stats, .ds-whoweare__stats, .ds-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .ds-about__content, .ds-whoweare__content { order: 1; }
  .ds-services__grid { grid-template-columns: 1fr; }
  .ds-services__title { font-size: 1.5rem; }
  .ds-service-card--wide { grid-column: span 1; }
  .ds-delivery__heading { font-size: 1.5rem; }
  .ds-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ds-step__arrow { display: none; }
  .ds-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .ds-reliable__heading { font-size: 1.5rem; }
  .ds-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .ds-industries__title { font-size: 1.5rem; }
  .ds-industries__grid { grid-template-columns: 1fr 1fr; }
  .ds-faq__heading { font-size: 1.3rem; }
  .ds-cta__heading { font-size: 1.5rem; }
  .ds-animate, .ds-animate--left, .ds-animate--right, .ds-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .ds-hero { padding: 90px 14px 60px; }
  .ds-hero__title { font-size: 1.4rem; }
  .ds-hero__subtitle { font-size: 0.9rem; }
  .ds-about, .ds-whoweare, .ds-services, .ds-delivery, .ds-reliable,
  .ds-industries, .ds-faq, .ds-cta, .ds-tech { padding: 50px 0; }
  .ds-about__heading, .ds-whoweare__heading, .ds-tech__heading { font-size: 1.4rem; }
  .ds-about__text, .ds-whoweare__text, .ds-tech__text { font-size: 0.9rem; }
  .ds-stats, .ds-whoweare__stats, .ds-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ds-stat { padding: 20px 14px; }
  .ds-stat__number { font-size: 1.8rem; }
  .ds-stat__label { font-size: 0.75rem; }
  .ds-services__title { font-size: 1.3rem; }
  .ds-service-card { padding: 20px 16px; }
  .ds-delivery__heading { font-size: 1.3rem; }
  .ds-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .ds-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .ds-reliable__heading { font-size: 1.3rem; }
  .ds-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .ds-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ds-industry { padding: 20px 14px; }
  .ds-cta__heading { font-size: 1.3rem; }
  .ds-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}
/*data science end


/* ============================================================
   IOT DEVELOPMENT INDIA PAGE — iot-development-india.css
   Prefix: ii-
   ============================================================ */

:root {
  --ii-accent: #e8a025;
  --ii-accent-hover: #d4911e;
  --ii-dark: #0b1120;
  --ii-dark-2: #101828;
  --ii-dark-3: #1a2332;
  --ii-white: #ffffff;
  --ii-gray: #000000;
  --ii-gray-light: #e0e7ff;
  --ii-light-bg: #f8f9fb;
  --ii-light-bg-2: #f1f3f7;
  --ii-text: #444444;
  --ii-text-light: #d1d5db;
  --ii-border: #e5e7eb;
  --ii-radius: 12px;
  --ii-radius-lg: 20px;
  --ii-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ii-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ii-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ii-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ii-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ii-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ii-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ii-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes ii-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes ii-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ii-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--ii-white); }
}
@keyframes ii-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.ii-animate { opacity: 0; transform: translateY(40px); animation: ii-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ii-animate--left { opacity: 0; transform: translateX(-40px); animation: ii-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ii-animate--right { opacity: 0; transform: translateX(40px); animation: ii-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ii-animate--scale { opacity: 0; transform: scale(0.85); animation: ii-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.ii-stagger > *:nth-child(1) { animation-delay: 0s; }
.ii-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ii-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ii-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ii-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ii-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ii-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .ii-animate, .ii-animate--left, .ii-animate--right, .ii-animate--scale { opacity: 1; transform: none; animation: none; }
}

.ii-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ii-text-accent { color: var(--ii-accent); }

.ii-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ii-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--ii-text); line-height: 1.5; }
.ii-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--ii-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.ii-hero {
  background: var(--ii-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.ii-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.ii-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.ii-hero__title { font-size: 3rem; font-weight: 700; color: var(--ii-white); margin-bottom: 20px; line-height: 1.2; animation: ii-fadeUp 0.7s ease 0.25s both; }
.ii-hero__title-accent { color: var(--ii-accent); font-style: italic; display: inline-block; }
.ii-hero__subtitle { font-size: 1.3rem; color: var(--ii-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: ii-fadeUp 0.7s ease 0.45s both; }
.ii-hero__desc { font-size: 0.95rem; color: var(--ii-gray-light); font-style: italic; animation: ii-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.ii-about { padding: 80px 0; background: var(--ii-white); }
.ii-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ii-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--ii-text); margin-bottom: 20px; line-height: 1.25; }
.ii-about__text { font-size: 1rem; color: var(--ii-gray); line-height: 1.75; margin-bottom: 14px; }
.ii-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.ii-stats, .ii-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ii-stat {
  background: var(--ii-light-bg); border-radius: var(--ii-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--ii-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.ii-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ii-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.ii-stat:hover::before { transform: scaleX(1); }
.ii-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--ii-accent); }
.ii-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: ii-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.ii-stat:nth-child(1) .ii-stat__number { animation-delay: 0.2s; }
.ii-stat:nth-child(2) .ii-stat__number { animation-delay: 0.4s; }
.ii-stat:nth-child(3) .ii-stat__number { animation-delay: 0.6s; }
.ii-stat:nth-child(4) .ii-stat__number { animation-delay: 0.8s; }
.ii-stat__label { display: block; font-size: 0.82rem; color: var(--ii-gray); font-weight: 500; line-height: 1.3; }
.ii-stat--dark { background: var(--ii-white); border-color: var(--ii-border); }
.ii-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.ii-whoweare { padding: 80px 0; background: var(--ii-light-bg); }
.ii-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ii-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--ii-text); margin-bottom: 20px; line-height: 1.25; }
.ii-whoweare__text { font-size: 1rem; color: var(--ii-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.ii-services { padding: 80px 0; background: var(--ii-white); }
.ii-services__header { text-align: center; margin-bottom: 48px; }
.ii-services__title { font-size: 2.2rem; font-weight: 700; color: var(--ii-text); }
.ii-services__subtitle { font-size: 1rem; color: var(--ii-gray); margin-top: 12px; line-height: 1.6; }
.ii-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ii-service-card {
  background: var(--ii-light-bg); border-radius: var(--ii-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.ii-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--ii-accent); background: var(--ii-white); }
.ii-service-card--wide { grid-column: 1 / -1; }
.ii-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--ii-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.ii-service-card:hover .ii-service-card__badge { animation: ii-shimmer 1.5s ease infinite; transform: scale(1.1); }
.ii-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--ii-text); margin-bottom: 10px; }
.ii-service-card__text { font-size: 0.9rem; color: var(--ii-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.ii-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.ii-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.ii-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--ii-text); margin-bottom: 14px; position: relative; z-index: 1; }
.ii-delivery__text { font-size: 1rem; color: var(--ii-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.ii-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.ii-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.ii-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--ii-white); border: 2px solid #e0e7ff; color: var(--ii-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.ii-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.ii-step:hover .ii-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.ii-delivery__steps > :nth-child(1) .ii-step__circle  { animation: ii-stepGlow 7s ease infinite 0s; }
.ii-delivery__steps > :nth-child(3) .ii-step__circle  { animation: ii-stepGlow 7s ease infinite 1s; }
.ii-delivery__steps > :nth-child(5) .ii-step__circle  { animation: ii-stepGlow 7s ease infinite 2s; }
.ii-delivery__steps > :nth-child(7) .ii-step__circle  { animation: ii-stepGlow 7s ease infinite 3s; }
.ii-delivery__steps > :nth-child(9) .ii-step__circle  { animation: ii-stepGlow 7s ease infinite 4s; }
.ii-delivery__steps > :nth-child(11) .ii-step__circle { animation: ii-stepGlow 7s ease infinite 5s; }
.ii-delivery__steps > :nth-child(13) .ii-step__circle { animation: ii-stepGlow 7s ease infinite 6s; }
.ii-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: ii-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.ii-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.ii-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.ii-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--ii-text); margin-bottom: 18px; line-height: 1.35; }
.ii-reliable__text { font-size: 1rem; color: var(--ii-gray); line-height: 1.7; margin-bottom: 40px; }
.ii-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ii-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--ii-white);
  border: 1px solid var(--ii-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.ii-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--ii-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.ii-pillar__dot { width: 8px; height: 8px; background: var(--ii-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.ii-pillar:hover .ii-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.ii-pillar__label { font-size: 0.85rem; color: var(--ii-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.ii-industries { padding: 80px 0; background: var(--ii-light-bg); text-align: center; }
.ii-industries__title { font-size: 2rem; font-weight: 700; color: var(--ii-text); margin-bottom: 48px; }
.ii-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ii-industry {
  background: var(--ii-white); border-radius: var(--ii-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--ii-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.ii-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--ii-accent); }
.ii-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.ii-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--ii-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.ii-tech { padding: 80px 0; background: var(--ii-white); }
.ii-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ii-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ii-text); margin-bottom: 20px; line-height: 1.25; }
.ii-tech__text { font-size: 1rem; color: var(--ii-gray); line-height: 1.75; margin-bottom: 14px; }
.ii-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ii-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ii-tag {
  display: inline-block; background: var(--ii-light-bg); color: var(--ii-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--ii-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ii-tag:hover { background: var(--ii-accent); color: var(--ii-white); border-color: var(--ii-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.ii-faq { padding: 80px 0; background: var(--ii-light-bg); }
.ii-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.ii-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--ii-text); margin-bottom: 12px; }
.ii-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.ii-faq__list { text-align: left; }
.ii-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ii-faq__item summary { list-style: none; }
.ii-faq__item summary::-webkit-details-marker { display: none; }
.ii-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.ii-faq__question:hover { color: var(--ii-accent); }
.ii-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ii-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.ii-faq__item[open] .ii-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ii-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ii-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.ii-cta { padding: 80px 0; background: var(--ii-dark); }
.ii-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.ii-cta__heading { font-size: 2rem; font-weight: 700; color: var(--ii-white); margin-bottom: 16px; line-height: 1.3; }
.ii-cta__text { font-size: 1rem; color: var(--ii-gray-light); line-height: 1.7; margin-bottom: 32px; }
.ii-cta__button {
  display: inline-block; background: var(--ii-accent); color: var(--ii-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: ii-pulse 2.5s ease infinite;
}
.ii-cta__button:hover { background: var(--ii-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.ii-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ii-hero__title { font-size: 2.2rem; }
  .ii-about__heading, .ii-whoweare__heading, .ii-tech__heading { font-size: 1.8rem; }
  .ii-services__title { font-size: 1.8rem; }
  .ii-delivery__heading { font-size: 1.8rem; }
  .ii-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .ii-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .ii-step__arrow { font-size: 1rem; margin: 0 1px; }
  .ii-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .ii-hero { padding: 100px 16px 80px; }
  .ii-hero__title { font-size: 1.7rem; }
  .ii-hero__subtitle { font-size: 1rem; }
  .ii-about__grid, .ii-whoweare__grid, .ii-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ii-about__heading, .ii-whoweare__heading, .ii-tech__heading { font-size: 1.6rem; }
  .ii-stats, .ii-whoweare__stats, .ii-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .ii-about__content, .ii-whoweare__content { order: 1; }
  .ii-services__grid { grid-template-columns: 1fr; }
  .ii-services__title { font-size: 1.5rem; }
  .ii-service-card--wide { grid-column: span 1; }
  .ii-delivery__heading { font-size: 1.5rem; }
  .ii-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ii-step__arrow { display: none; }
  .ii-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .ii-reliable__heading { font-size: 1.5rem; }
  .ii-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .ii-industries__title { font-size: 1.5rem; }
  .ii-industries__grid { grid-template-columns: 1fr 1fr; }
  .ii-faq__heading { font-size: 1.3rem; }
  .ii-cta__heading { font-size: 1.5rem; }
  .ii-animate, .ii-animate--left, .ii-animate--right, .ii-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .ii-hero { padding: 90px 14px 60px; }
  .ii-hero__title { font-size: 1.4rem; }
  .ii-hero__subtitle { font-size: 0.9rem; }
  .ii-about, .ii-whoweare, .ii-services, .ii-delivery, .ii-reliable,
  .ii-industries, .ii-faq, .ii-cta, .ii-tech { padding: 50px 0; }
  .ii-about__heading, .ii-whoweare__heading, .ii-tech__heading { font-size: 1.4rem; }
  .ii-about__text, .ii-whoweare__text, .ii-tech__text { font-size: 0.9rem; }
  .ii-stats, .ii-whoweare__stats, .ii-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ii-stat { padding: 20px 14px; }
  .ii-stat__number { font-size: 1.8rem; }
  .ii-stat__label { font-size: 0.75rem; }
  .ii-services__title { font-size: 1.3rem; }
  .ii-service-card { padding: 20px 16px; }
  .ii-delivery__heading { font-size: 1.3rem; }
  .ii-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .ii-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .ii-reliable__heading { font-size: 1.3rem; }
  .ii-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .ii-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ii-industry { padding: 20px 14px; }
  .ii-cta__heading { font-size: 1.3rem; }
  .ii-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}


/*end of IOT

/* ============================================================
   UI UX DESIGN COMPANY PAGE — ui-ux-design-company.css
   Prefix: ux-
   ============================================================ */

:root {
  --ux-accent: #e8a025;
  --ux-accent-hover: #d4911e;
  --ux-dark: #0b1120;
  --ux-dark-2: #101828;
  --ux-dark-3: #1a2332;
  --ux-white: #ffffff;
  --ux-gray: #000000;
  --ux-gray-light: #e0e7ff;
  --ux-light-bg: #f8f9fb;
  --ux-light-bg-2: #f1f3f7;
  --ux-text: #444444;
  --ux-text-light: #d1d5db;
  --ux-border: #e5e7eb;
  --ux-radius: 12px;
  --ux-radius-lg: 20px;
  --ux-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ux-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ux-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ux-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ux-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ux-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ux-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ux-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes ux-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes ux-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ux-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--ux-white); }
}
@keyframes ux-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.ux-animate { opacity: 0; transform: translateY(40px); animation: ux-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ux-animate--left { opacity: 0; transform: translateX(-40px); animation: ux-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ux-animate--right { opacity: 0; transform: translateX(40px); animation: ux-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ux-animate--scale { opacity: 0; transform: scale(0.85); animation: ux-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.ux-stagger > *:nth-child(1) { animation-delay: 0s; }
.ux-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ux-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ux-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ux-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ux-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ux-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .ux-animate, .ux-animate--left, .ux-animate--right, .ux-animate--scale { opacity: 1; transform: none; animation: none; }
}

.ux-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ux-text-accent { color: var(--ux-accent); }

.ux-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ux-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--ux-text); line-height: 1.5; }
.ux-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--ux-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.ux-hero {
  background: var(--ux-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.ux-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.ux-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.ux-hero__title { font-size: 3rem; font-weight: 700; color: var(--ux-white); margin-bottom: 20px; line-height: 1.2; animation: ux-fadeUp 0.7s ease 0.25s both; }
.ux-hero__title-accent { color: var(--ux-accent); font-style: italic; display: inline-block; }
.ux-hero__subtitle { font-size: 1.3rem; color: var(--ux-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: ux-fadeUp 0.7s ease 0.45s both; }
.ux-hero__desc { font-size: 0.95rem; color: var(--ux-gray-light); font-style: italic; animation: ux-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.ux-about { padding: 80px 0; background: var(--ux-white); }
.ux-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ux-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--ux-text); margin-bottom: 20px; line-height: 1.25; }
.ux-about__text { font-size: 1rem; color: var(--ux-gray); line-height: 1.75; margin-bottom: 14px; }
.ux-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.ux-stats, .ux-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ux-stat {
  background: var(--ux-light-bg); border-radius: var(--ux-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--ux-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.ux-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ux-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.ux-stat:hover::before { transform: scaleX(1); }
.ux-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--ux-accent); }
.ux-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: ux-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.ux-stat:nth-child(1) .ux-stat__number { animation-delay: 0.2s; }
.ux-stat:nth-child(2) .ux-stat__number { animation-delay: 0.4s; }
.ux-stat:nth-child(3) .ux-stat__number { animation-delay: 0.6s; }
.ux-stat:nth-child(4) .ux-stat__number { animation-delay: 0.8s; }
.ux-stat__label { display: block; font-size: 0.82rem; color: var(--ux-gray); font-weight: 500; line-height: 1.3; }
.ux-stat--dark { background: var(--ux-white); border-color: var(--ux-border); }
.ux-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.ux-whoweare { padding: 80px 0; background: var(--ux-light-bg); }
.ux-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ux-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--ux-text); margin-bottom: 20px; line-height: 1.25; }
.ux-whoweare__text { font-size: 1rem; color: var(--ux-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.ux-services { padding: 80px 0; background: var(--ux-white); }
.ux-services__header { text-align: center; margin-bottom: 48px; }
.ux-services__title { font-size: 2.2rem; font-weight: 700; color: var(--ux-text); }
.ux-services__subtitle { font-size: 1rem; color: var(--ux-gray); margin-top: 12px; line-height: 1.6; }
.ux-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ux-service-card {
  background: var(--ux-light-bg); border-radius: var(--ux-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.ux-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--ux-accent); background: var(--ux-white); }
.ux-service-card--wide { grid-column: 1 / -1; }
.ux-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--ux-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.ux-service-card:hover .ux-service-card__badge { animation: ux-shimmer 1.5s ease infinite; transform: scale(1.1); }
.ux-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--ux-text); margin-bottom: 10px; }
.ux-service-card__text { font-size: 0.9rem; color: var(--ux-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.ux-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.ux-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.ux-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--ux-text); margin-bottom: 14px; position: relative; z-index: 1; }
.ux-delivery__text { font-size: 1rem; color: var(--ux-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.ux-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.ux-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.ux-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--ux-white); border: 2px solid #e0e7ff; color: var(--ux-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.ux-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.ux-step:hover .ux-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.ux-delivery__steps > :nth-child(1) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 0s; }
.ux-delivery__steps > :nth-child(3) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 1s; }
.ux-delivery__steps > :nth-child(5) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 2s; }
.ux-delivery__steps > :nth-child(7) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 3s; }
.ux-delivery__steps > :nth-child(9) .ux-step__circle  { animation: ux-stepGlow 7s ease infinite 4s; }
.ux-delivery__steps > :nth-child(11) .ux-step__circle { animation: ux-stepGlow 7s ease infinite 5s; }
.ux-delivery__steps > :nth-child(13) .ux-step__circle { animation: ux-stepGlow 7s ease infinite 6s; }
.ux-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: ux-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.ux-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.ux-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.ux-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--ux-text); margin-bottom: 18px; line-height: 1.35; }
.ux-reliable__text { font-size: 1rem; color: var(--ux-gray); line-height: 1.7; margin-bottom: 40px; }
.ux-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ux-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--ux-white);
  border: 1px solid var(--ux-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.ux-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--ux-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.ux-pillar__dot { width: 8px; height: 8px; background: var(--ux-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.ux-pillar:hover .ux-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.ux-pillar__label { font-size: 0.85rem; color: var(--ux-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.ux-industries { padding: 80px 0; background: var(--ux-light-bg); text-align: center; }
.ux-industries__title { font-size: 2rem; font-weight: 700; color: var(--ux-text); margin-bottom: 48px; }
.ux-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ux-industry {
  background: var(--ux-white); border-radius: var(--ux-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--ux-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.ux-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--ux-accent); }
.ux-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.ux-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--ux-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.ux-tech { padding: 80px 0; background: var(--ux-white); }
.ux-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ux-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ux-text); margin-bottom: 20px; line-height: 1.25; }
.ux-tech__text { font-size: 1rem; color: var(--ux-gray); line-height: 1.75; margin-bottom: 14px; }
.ux-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ux-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ux-tag {
  display: inline-block; background: var(--ux-light-bg); color: var(--ux-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--ux-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ux-tag:hover { background: var(--ux-accent); color: var(--ux-white); border-color: var(--ux-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.ux-faq { padding: 80px 0; background: var(--ux-light-bg); }
.ux-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.ux-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--ux-text); margin-bottom: 12px; }
.ux-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.ux-faq__list { text-align: left; }
.ux-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ux-faq__item summary { list-style: none; }
.ux-faq__item summary::-webkit-details-marker { display: none; }
.ux-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.ux-faq__question:hover { color: var(--ux-accent); }
.ux-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ux-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.ux-faq__item[open] .ux-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ux-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ux-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.ux-cta { padding: 80px 0; background: var(--ux-dark); }
.ux-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.ux-cta__heading { font-size: 2rem; font-weight: 700; color: var(--ux-white); margin-bottom: 16px; line-height: 1.3; }
.ux-cta__text { font-size: 1rem; color: var(--ux-gray-light); line-height: 1.7; margin-bottom: 32px; }
.ux-cta__button {
  display: inline-block; background: var(--ux-accent); color: var(--ux-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: ux-pulse 2.5s ease infinite;
}
.ux-cta__button:hover { background: var(--ux-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.ux-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ux-hero__title { font-size: 2.2rem; }
  .ux-about__heading, .ux-whoweare__heading, .ux-tech__heading { font-size: 1.8rem; }
  .ux-services__title { font-size: 1.8rem; }
  .ux-delivery__heading { font-size: 1.8rem; }
  .ux-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .ux-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .ux-step__arrow { font-size: 1rem; margin: 0 1px; }
  .ux-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .ux-hero { padding: 100px 16px 80px; }
  .ux-hero__title { font-size: 1.7rem; }
  .ux-hero__subtitle { font-size: 1rem; }
  .ux-about__grid, .ux-whoweare__grid, .ux-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ux-about__heading, .ux-whoweare__heading, .ux-tech__heading { font-size: 1.6rem; }
  .ux-stats, .ux-whoweare__stats, .ux-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .ux-about__content, .ux-whoweare__content { order: 1; }
  .ux-services__grid { grid-template-columns: 1fr; }
  .ux-services__title { font-size: 1.5rem; }
  .ux-service-card--wide { grid-column: span 1; }
  .ux-delivery__heading { font-size: 1.5rem; }
  .ux-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ux-step__arrow { display: none; }
  .ux-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .ux-reliable__heading { font-size: 1.5rem; }
  .ux-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .ux-industries__title { font-size: 1.5rem; }
  .ux-industries__grid { grid-template-columns: 1fr 1fr; }
  .ux-faq__heading { font-size: 1.3rem; }
  .ux-cta__heading { font-size: 1.5rem; }
  .ux-animate, .ux-animate--left, .ux-animate--right, .ux-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .ux-hero { padding: 90px 14px 60px; }
  .ux-hero__title { font-size: 1.4rem; }
  .ux-hero__subtitle { font-size: 0.9rem; }
  .ux-about, .ux-whoweare, .ux-services, .ux-delivery, .ux-reliable,
  .ux-industries, .ux-faq, .ux-cta, .ux-tech { padding: 50px 0; }
  .ux-about__heading, .ux-whoweare__heading, .ux-tech__heading { font-size: 1.4rem; }
  .ux-about__text, .ux-whoweare__text, .ux-tech__text { font-size: 0.9rem; }
  .ux-stats, .ux-whoweare__stats, .ux-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ux-stat { padding: 20px 14px; }
  .ux-stat__number { font-size: 1.8rem; }
  .ux-stat__label { font-size: 0.75rem; }
  .ux-services__title { font-size: 1.3rem; }
  .ux-service-card { padding: 20px 16px; }
  .ux-delivery__heading { font-size: 1.3rem; }
  .ux-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .ux-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .ux-reliable__heading { font-size: 1.3rem; }
  .ux-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .ux-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ux-industry { padding: 20px 14px; }
  .ux-cta__heading { font-size: 1.3rem; }
  .ux-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}

/*end of UI/UX

/* ============================================================
   MOBILE APP DESIGN COMPANY PAGE — mobile-app-design-company.css
   Prefix: md-
   ============================================================ */

:root {
  --md-accent: #e8a025;
  --md-accent-hover: #d4911e;
  --md-dark: #0b1120;
  --md-dark-2: #101828;
  --md-dark-3: #1a2332;
  --md-white: #ffffff;
  --md-gray: #000000;
  --md-gray-light: #e0e7ff;
  --md-light-bg: #f8f9fb;
  --md-light-bg-2: #f1f3f7;
  --md-text: #444444;
  --md-text-light: #d1d5db;
  --md-border: #e5e7eb;
  --md-radius: 12px;
  --md-radius-lg: 20px;
  --md-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --md-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --md-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes md-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes md-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes md-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes md-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes md-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes md-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes md-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes md-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--md-white); }
}
@keyframes md-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.md-animate { opacity: 0; transform: translateY(40px); animation: md-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.md-animate--left { opacity: 0; transform: translateX(-40px); animation: md-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.md-animate--right { opacity: 0; transform: translateX(40px); animation: md-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.md-animate--scale { opacity: 0; transform: scale(0.85); animation: md-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.md-stagger > *:nth-child(1) { animation-delay: 0s; }
.md-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.md-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.md-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.md-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.md-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.md-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .md-animate, .md-animate--left, .md-animate--right, .md-animate--scale { opacity: 1; transform: none; animation: none; }
}

.md-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.md-text-accent { color: var(--md-accent); }

.md-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.md-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--md-text); line-height: 1.5; }
.md-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--md-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.md-hero {
  background: var(--md-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.md-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.md-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.md-hero__title { font-size: 3rem; font-weight: 700; color: var(--md-white); margin-bottom: 20px; line-height: 1.2; animation: md-fadeUp 0.7s ease 0.25s both; }
.md-hero__title-accent { color: var(--md-accent); font-style: italic; display: inline-block; }
.md-hero__subtitle { font-size: 1.3rem; color: var(--md-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: md-fadeUp 0.7s ease 0.45s both; }
.md-hero__desc { font-size: 0.95rem; color: var(--md-gray-light); font-style: italic; animation: md-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.md-about { padding: 80px 0; background: var(--md-white); }
.md-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.md-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--md-text); margin-bottom: 20px; line-height: 1.25; }
.md-about__text { font-size: 1rem; color: var(--md-gray); line-height: 1.75; margin-bottom: 14px; }
.md-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.md-stats, .md-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.md-stat {
  background: var(--md-light-bg); border-radius: var(--md-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--md-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.md-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--md-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.md-stat:hover::before { transform: scaleX(1); }
.md-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--md-accent); }
.md-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: md-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.md-stat:nth-child(1) .md-stat__number { animation-delay: 0.2s; }
.md-stat:nth-child(2) .md-stat__number { animation-delay: 0.4s; }
.md-stat:nth-child(3) .md-stat__number { animation-delay: 0.6s; }
.md-stat:nth-child(4) .md-stat__number { animation-delay: 0.8s; }
.md-stat__label { display: block; font-size: 0.82rem; color: var(--md-gray); font-weight: 500; line-height: 1.3; }
.md-stat--dark { background: var(--md-white); border-color: var(--md-border); }
.md-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.md-whoweare { padding: 80px 0; background: var(--md-light-bg); }
.md-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.md-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--md-text); margin-bottom: 20px; line-height: 1.25; }
.md-whoweare__text { font-size: 1rem; color: var(--md-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.md-services { padding: 80px 0; background: var(--md-white); }
.md-services__header { text-align: center; margin-bottom: 48px; }
.md-services__title { font-size: 2.2rem; font-weight: 700; color: var(--md-text); }
.md-services__subtitle { font-size: 1rem; color: var(--md-gray); margin-top: 12px; line-height: 1.6; }
.md-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.md-service-card {
  background: var(--md-light-bg); border-radius: var(--md-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.md-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--md-accent); background: var(--md-white); }
.md-service-card--wide { grid-column: 1 / -1; }
.md-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--md-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.md-service-card:hover .md-service-card__badge { animation: md-shimmer 1.5s ease infinite; transform: scale(1.1); }
.md-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--md-text); margin-bottom: 10px; }
.md-service-card__text { font-size: 0.9rem; color: var(--md-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.md-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.md-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.md-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--md-text); margin-bottom: 14px; position: relative; z-index: 1; }
.md-delivery__text { font-size: 1rem; color: var(--md-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.md-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.md-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.md-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--md-white); border: 2px solid #e0e7ff; color: var(--md-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.md-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.md-step:hover .md-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.md-delivery__steps > :nth-child(1) .md-step__circle  { animation: md-stepGlow 7s ease infinite 0s; }
.md-delivery__steps > :nth-child(3) .md-step__circle  { animation: md-stepGlow 7s ease infinite 1s; }
.md-delivery__steps > :nth-child(5) .md-step__circle  { animation: md-stepGlow 7s ease infinite 2s; }
.md-delivery__steps > :nth-child(7) .md-step__circle  { animation: md-stepGlow 7s ease infinite 3s; }
.md-delivery__steps > :nth-child(9) .md-step__circle  { animation: md-stepGlow 7s ease infinite 4s; }
.md-delivery__steps > :nth-child(11) .md-step__circle { animation: md-stepGlow 7s ease infinite 5s; }
.md-delivery__steps > :nth-child(13) .md-step__circle { animation: md-stepGlow 7s ease infinite 6s; }
.md-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: md-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.md-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.md-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.md-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--md-text); margin-bottom: 18px; line-height: 1.35; }
.md-reliable__text { font-size: 1rem; color: var(--md-gray); line-height: 1.7; margin-bottom: 40px; }
.md-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.md-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--md-white);
  border: 1px solid var(--md-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.md-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--md-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.md-pillar__dot { width: 8px; height: 8px; background: var(--md-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.md-pillar:hover .md-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.md-pillar__label { font-size: 0.85rem; color: var(--md-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.md-industries { padding: 80px 0; background: var(--md-light-bg); text-align: center; }
.md-industries__title { font-size: 2rem; font-weight: 700; color: var(--md-text); margin-bottom: 48px; }
.md-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.md-industry {
  background: var(--md-white); border-radius: var(--md-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--md-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.md-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--md-accent); }
.md-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.md-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--md-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.md-tech { padding: 80px 0; background: var(--md-white); }
.md-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.md-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--md-text); margin-bottom: 20px; line-height: 1.25; }
.md-tech__text { font-size: 1rem; color: var(--md-gray); line-height: 1.75; margin-bottom: 14px; }
.md-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.md-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.md-tag {
  display: inline-block; background: var(--md-light-bg); color: var(--md-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--md-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.md-tag:hover { background: var(--md-accent); color: var(--md-white); border-color: var(--md-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.md-faq { padding: 80px 0; background: var(--md-light-bg); }
.md-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.md-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--md-text); margin-bottom: 12px; }
.md-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.md-faq__list { text-align: left; }
.md-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.md-faq__item summary { list-style: none; }
.md-faq__item summary::-webkit-details-marker { display: none; }
.md-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.md-faq__question:hover { color: var(--md-accent); }
.md-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.md-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.md-faq__item[open] .md-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.md-faq__answer { padding: 0 0 18px; overflow: hidden; }
.md-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.md-cta { padding: 80px 0; background: var(--md-dark); }
.md-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.md-cta__heading { font-size: 2rem; font-weight: 700; color: var(--md-white); margin-bottom: 16px; line-height: 1.3; }
.md-cta__text { font-size: 1rem; color: var(--md-gray-light); line-height: 1.7; margin-bottom: 32px; }
.md-cta__button {
  display: inline-block; background: var(--md-accent); color: var(--md-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: md-pulse 2.5s ease infinite;
}
.md-cta__button:hover { background: var(--md-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.md-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .md-hero__title { font-size: 2.2rem; }
  .md-about__heading, .md-whoweare__heading, .md-tech__heading { font-size: 1.8rem; }
  .md-services__title { font-size: 1.8rem; }
  .md-delivery__heading { font-size: 1.8rem; }
  .md-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .md-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .md-step__arrow { font-size: 1rem; margin: 0 1px; }
  .md-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .md-hero { padding: 100px 16px 80px; }
  .md-hero__title { font-size: 1.7rem; }
  .md-hero__subtitle { font-size: 1rem; }
  .md-about__grid, .md-whoweare__grid, .md-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .md-about__heading, .md-whoweare__heading, .md-tech__heading { font-size: 1.6rem; }
  .md-stats, .md-whoweare__stats, .md-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .md-about__content, .md-whoweare__content { order: 1; }
  .md-services__grid { grid-template-columns: 1fr; }
  .md-services__title { font-size: 1.5rem; }
  .md-service-card--wide { grid-column: span 1; }
  .md-delivery__heading { font-size: 1.5rem; }
  .md-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .md-step__arrow { display: none; }
  .md-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .md-reliable__heading { font-size: 1.5rem; }
  .md-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .md-industries__title { font-size: 1.5rem; }
  .md-industries__grid { grid-template-columns: 1fr 1fr; }
  .md-faq__heading { font-size: 1.3rem; }
  .md-cta__heading { font-size: 1.5rem; }
  .md-animate, .md-animate--left, .md-animate--right, .md-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .md-hero { padding: 90px 14px 60px; }
  .md-hero__title { font-size: 1.4rem; }
  .md-hero__subtitle { font-size: 0.9rem; }
  .md-about, .md-whoweare, .md-services, .md-delivery, .md-reliable,
  .md-industries, .md-faq, .md-cta, .md-tech { padding: 50px 0; }
  .md-about__heading, .md-whoweare__heading, .md-tech__heading { font-size: 1.4rem; }
  .md-about__text, .md-whoweare__text, .md-tech__text { font-size: 0.9rem; }
  .md-stats, .md-whoweare__stats, .md-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .md-stat { padding: 20px 14px; }
  .md-stat__number { font-size: 1.8rem; }
  .md-stat__label { font-size: 0.75rem; }
  .md-services__title { font-size: 1.3rem; }
  .md-service-card { padding: 20px 16px; }
  .md-delivery__heading { font-size: 1.3rem; }
  .md-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .md-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .md-reliable__heading { font-size: 1.3rem; }
  .md-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .md-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .md-industry { padding: 20px 14px; }
  .md-cta__heading { font-size: 1.3rem; }
  .md-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}

/*end of MOBILE APP DESIGN*/

/* ============================================================
   PRODUCT DESIGN SERVICES PAGE — product-design-services.css
   Prefix: pd-
   ============================================================ */

:root {
  --pd-accent: #e8a025;
  --pd-accent-hover: #d4911e;
  --pd-dark: #0b1120;
  --pd-dark-2: #101828;
  --pd-dark-3: #1a2332;
  --pd-white: #ffffff;
  --pd-gray: #000000;
  --pd-gray-light: #e0e7ff;
  --pd-light-bg: #f8f9fb;
  --pd-light-bg-2: #f1f3f7;
  --pd-text: #444444;
  --pd-text-light: #d1d5db;
  --pd-border: #e5e7eb;
  --pd-radius: 12px;
  --pd-radius-lg: 20px;
  --pd-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --pd-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --pd-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes pd-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pd-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pd-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pd-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes pd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes pd-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes pd-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pd-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--pd-white); }
}
@keyframes pd-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.pd-animate { opacity: 0; transform: translateY(40px); animation: pd-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.pd-animate--left { opacity: 0; transform: translateX(-40px); animation: pd-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.pd-animate--right { opacity: 0; transform: translateX(40px); animation: pd-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.pd-animate--scale { opacity: 0; transform: scale(0.85); animation: pd-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.pd-stagger > *:nth-child(1) { animation-delay: 0s; }
.pd-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.pd-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.pd-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.pd-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.pd-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.pd-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .pd-animate, .pd-animate--left, .pd-animate--right, .pd-animate--scale { opacity: 1; transform: none; animation: none; }
}

.pd-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pd-text-accent { color: var(--pd-accent); }

.pd-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pd-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--pd-text); line-height: 1.5; }
.pd-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--pd-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.pd-hero {
  background: var(--pd-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.pd-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.pd-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.pd-hero__title { font-size: 3rem; font-weight: 700; color: var(--pd-white); margin-bottom: 20px; line-height: 1.2; animation: pd-fadeUp 0.7s ease 0.25s both; }
.pd-hero__title-accent { color: var(--pd-accent); font-style: italic; display: inline-block; }
.pd-hero__subtitle { font-size: 1.3rem; color: var(--pd-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: pd-fadeUp 0.7s ease 0.45s both; }
.pd-hero__desc { font-size: 0.95rem; color: var(--pd-gray-light); font-style: italic; animation: pd-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.pd-about { padding: 80px 0; background: var(--pd-white); }
.pd-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pd-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--pd-text); margin-bottom: 20px; line-height: 1.25; }
.pd-about__text { font-size: 1rem; color: var(--pd-gray); line-height: 1.75; margin-bottom: 14px; }
.pd-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.pd-stats, .pd-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pd-stat {
  background: var(--pd-light-bg); border-radius: var(--pd-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--pd-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.pd-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--pd-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.pd-stat:hover::before { transform: scaleX(1); }
.pd-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--pd-accent); }
.pd-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: pd-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.pd-stat:nth-child(1) .pd-stat__number { animation-delay: 0.2s; }
.pd-stat:nth-child(2) .pd-stat__number { animation-delay: 0.4s; }
.pd-stat:nth-child(3) .pd-stat__number { animation-delay: 0.6s; }
.pd-stat:nth-child(4) .pd-stat__number { animation-delay: 0.8s; }
.pd-stat__label { display: block; font-size: 0.82rem; color: var(--pd-gray); font-weight: 500; line-height: 1.3; }
.pd-stat--dark { background: var(--pd-white); border-color: var(--pd-border); }
.pd-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.pd-whoweare { padding: 80px 0; background: var(--pd-light-bg); }
.pd-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pd-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--pd-text); margin-bottom: 20px; line-height: 1.25; }
.pd-whoweare__text { font-size: 1rem; color: var(--pd-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.pd-services { padding: 80px 0; background: var(--pd-white); }
.pd-services__header { text-align: center; margin-bottom: 48px; }
.pd-services__title { font-size: 2.2rem; font-weight: 700; color: var(--pd-text); }
.pd-services__subtitle { font-size: 1rem; color: var(--pd-gray); margin-top: 12px; line-height: 1.6; }
.pd-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pd-service-card {
  background: var(--pd-light-bg); border-radius: var(--pd-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.pd-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--pd-accent); background: var(--pd-white); }
.pd-service-card--wide { grid-column: 1 / -1; }
.pd-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--pd-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.pd-service-card:hover .pd-service-card__badge { animation: pd-shimmer 1.5s ease infinite; transform: scale(1.1); }
.pd-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--pd-text); margin-bottom: 10px; }
.pd-service-card__text { font-size: 0.9rem; color: var(--pd-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.pd-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.pd-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.pd-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--pd-text); margin-bottom: 14px; position: relative; z-index: 1; }
.pd-delivery__text { font-size: 1rem; color: var(--pd-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.pd-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.pd-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.pd-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--pd-white); border: 2px solid #e0e7ff; color: var(--pd-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.pd-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.pd-step:hover .pd-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.pd-delivery__steps > :nth-child(1) .pd-step__circle  { animation: pd-stepGlow 7s ease infinite 0s; }
.pd-delivery__steps > :nth-child(3) .pd-step__circle  { animation: pd-stepGlow 7s ease infinite 1s; }
.pd-delivery__steps > :nth-child(5) .pd-step__circle  { animation: pd-stepGlow 7s ease infinite 2s; }
.pd-delivery__steps > :nth-child(7) .pd-step__circle  { animation: pd-stepGlow 7s ease infinite 3s; }
.pd-delivery__steps > :nth-child(9) .pd-step__circle  { animation: pd-stepGlow 7s ease infinite 4s; }
.pd-delivery__steps > :nth-child(11) .pd-step__circle { animation: pd-stepGlow 7s ease infinite 5s; }
.pd-delivery__steps > :nth-child(13) .pd-step__circle { animation: pd-stepGlow 7s ease infinite 6s; }
.pd-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: pd-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.pd-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.pd-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.pd-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--pd-text); margin-bottom: 18px; line-height: 1.35; }
.pd-reliable__text { font-size: 1rem; color: var(--pd-gray); line-height: 1.7; margin-bottom: 40px; }
.pd-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.pd-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--pd-white);
  border: 1px solid var(--pd-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.pd-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--pd-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.pd-pillar__dot { width: 8px; height: 8px; background: var(--pd-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.pd-pillar:hover .pd-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.pd-pillar__label { font-size: 0.85rem; color: var(--pd-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.pd-industries { padding: 80px 0; background: var(--pd-light-bg); text-align: center; }
.pd-industries__title { font-size: 2rem; font-weight: 700; color: var(--pd-text); margin-bottom: 48px; }
.pd-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pd-industry {
  background: var(--pd-white); border-radius: var(--pd-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--pd-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.pd-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--pd-accent); }
.pd-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.pd-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--pd-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.pd-tech { padding: 80px 0; background: var(--pd-white); }
.pd-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pd-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--pd-text); margin-bottom: 20px; line-height: 1.25; }
.pd-tech__text { font-size: 1rem; color: var(--pd-gray); line-height: 1.75; margin-bottom: 14px; }
.pd-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pd-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pd-tag {
  display: inline-block; background: var(--pd-light-bg); color: var(--pd-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--pd-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.pd-tag:hover { background: var(--pd-accent); color: var(--pd-white); border-color: var(--pd-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.pd-faq { padding: 80px 0; background: var(--pd-light-bg); }
.pd-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.pd-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--pd-text); margin-bottom: 12px; }
.pd-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.pd-faq__list { text-align: left; }
.pd-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.pd-faq__item summary { list-style: none; }
.pd-faq__item summary::-webkit-details-marker { display: none; }
.pd-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.pd-faq__question:hover { color: var(--pd-accent); }
.pd-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.pd-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.pd-faq__item[open] .pd-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.pd-faq__answer { padding: 0 0 18px; overflow: hidden; }
.pd-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.pd-cta { padding: 80px 0; background: var(--pd-dark); }
.pd-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.pd-cta__heading { font-size: 2rem; font-weight: 700; color: var(--pd-white); margin-bottom: 16px; line-height: 1.3; }
.pd-cta__text { font-size: 1rem; color: var(--pd-gray-light); line-height: 1.7; margin-bottom: 32px; }
.pd-cta__button {
  display: inline-block; background: var(--pd-accent); color: var(--pd-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: pd-pulse 2.5s ease infinite;
}
.pd-cta__button:hover { background: var(--pd-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.pd-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .pd-hero__title { font-size: 2.2rem; }
  .pd-about__heading, .pd-whoweare__heading, .pd-tech__heading { font-size: 1.8rem; }
  .pd-services__title { font-size: 1.8rem; }
  .pd-delivery__heading { font-size: 1.8rem; }
  .pd-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .pd-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .pd-step__arrow { font-size: 1rem; margin: 0 1px; }
  .pd-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .pd-hero { padding: 100px 16px 80px; }
  .pd-hero__title { font-size: 1.7rem; }
  .pd-hero__subtitle { font-size: 1rem; }
  .pd-about__grid, .pd-whoweare__grid, .pd-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .pd-about__heading, .pd-whoweare__heading, .pd-tech__heading { font-size: 1.6rem; }
  .pd-stats, .pd-whoweare__stats, .pd-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .pd-about__content, .pd-whoweare__content { order: 1; }
  .pd-services__grid { grid-template-columns: 1fr; }
  .pd-services__title { font-size: 1.5rem; }
  .pd-service-card--wide { grid-column: span 1; }
  .pd-delivery__heading { font-size: 1.5rem; }
  .pd-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .pd-step__arrow { display: none; }
  .pd-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .pd-reliable__heading { font-size: 1.5rem; }
  .pd-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .pd-industries__title { font-size: 1.5rem; }
  .pd-industries__grid { grid-template-columns: 1fr 1fr; }
  .pd-faq__heading { font-size: 1.3rem; }
  .pd-cta__heading { font-size: 1.5rem; }
  .pd-animate, .pd-animate--left, .pd-animate--right, .pd-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .pd-hero { padding: 90px 14px 60px; }
  .pd-hero__title { font-size: 1.4rem; }
  .pd-hero__subtitle { font-size: 0.9rem; }
  .pd-about, .pd-whoweare, .pd-services, .pd-delivery, .pd-reliable,
  .pd-industries, .pd-faq, .pd-cta, .pd-tech { padding: 50px 0; }
  .pd-about__heading, .pd-whoweare__heading, .pd-tech__heading { font-size: 1.4rem; }
  .pd-about__text, .pd-whoweare__text, .pd-tech__text { font-size: 0.9rem; }
  .pd-stats, .pd-whoweare__stats, .pd-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pd-stat { padding: 20px 14px; }
  .pd-stat__number { font-size: 1.8rem; }
  .pd-stat__label { font-size: 0.75rem; }
  .pd-services__title { font-size: 1.3rem; }
  .pd-service-card { padding: 20px 16px; }
  .pd-delivery__heading { font-size: 1.3rem; }
  .pd-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .pd-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .pd-reliable__heading { font-size: 1.3rem; }
  .pd-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .pd-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pd-industry { padding: 20px 14px; }
  .pd-cta__heading { font-size: 1.3rem; }
  .pd-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}

/*END OF PRODUCT DESIGN*/

/* ============================================================
   UX RESEARCH SERVICES PAGE — ux-research-services.css
   Prefix: ur-
   ============================================================ */

:root {
  --ur-accent: #e8a025;
  --ur-accent-hover: #d4911e;
  --ur-dark: #0b1120;
  --ur-dark-2: #101828;
  --ur-dark-3: #1a2332;
  --ur-white: #ffffff;
  --ur-gray: #000000;
  --ur-gray-light: #e0e7ff;
  --ur-light-bg: #f8f9fb;
  --ur-light-bg-2: #f1f3f7;
  --ur-text: #444444;
  --ur-text-light: #d1d5db;
  --ur-border: #e5e7eb;
  --ur-radius: 12px;
  --ur-radius-lg: 20px;
  --ur-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ur-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ur-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ur-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ur-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ur-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ur-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ur-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes ur-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes ur-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ur-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--ur-white); }
}
@keyframes ur-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.ur-animate { opacity: 0; transform: translateY(40px); animation: ur-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ur-animate--left { opacity: 0; transform: translateX(-40px); animation: ur-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ur-animate--right { opacity: 0; transform: translateX(40px); animation: ur-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ur-animate--scale { opacity: 0; transform: scale(0.85); animation: ur-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.ur-stagger > *:nth-child(1) { animation-delay: 0s; }
.ur-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ur-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ur-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ur-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ur-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ur-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .ur-animate, .ur-animate--left, .ur-animate--right, .ur-animate--scale { opacity: 1; transform: none; animation: none; }
}

.ur-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ur-text-accent { color: var(--ur-accent); }

.ur-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ur-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--ur-text); line-height: 1.5; }
.ur-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--ur-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.ur-hero {
  background: var(--ur-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.ur-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.ur-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.ur-hero__title { font-size: 3rem; font-weight: 700; color: var(--ur-white); margin-bottom: 20px; line-height: 1.2; animation: ur-fadeUp 0.7s ease 0.25s both; }
.ur-hero__title-accent { color: var(--ur-accent); font-style: italic; display: inline-block; }
.ur-hero__subtitle { font-size: 1.3rem; color: var(--ur-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: ur-fadeUp 0.7s ease 0.45s both; }
.ur-hero__desc { font-size: 0.95rem; color: var(--ur-gray-light); font-style: italic; animation: ur-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.ur-about { padding: 80px 0; background: var(--ur-white); }
.ur-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ur-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--ur-text); margin-bottom: 20px; line-height: 1.25; }
.ur-about__text { font-size: 1rem; color: var(--ur-gray); line-height: 1.75; margin-bottom: 14px; }
.ur-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.ur-stats, .ur-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ur-stat {
  background: var(--ur-light-bg); border-radius: var(--ur-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--ur-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.ur-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ur-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.ur-stat:hover::before { transform: scaleX(1); }
.ur-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--ur-accent); }
.ur-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: ur-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.ur-stat:nth-child(1) .ur-stat__number { animation-delay: 0.2s; }
.ur-stat:nth-child(2) .ur-stat__number { animation-delay: 0.4s; }
.ur-stat:nth-child(3) .ur-stat__number { animation-delay: 0.6s; }
.ur-stat:nth-child(4) .ur-stat__number { animation-delay: 0.8s; }
.ur-stat__label { display: block; font-size: 0.82rem; color: var(--ur-gray); font-weight: 500; line-height: 1.3; }
.ur-stat--dark { background: var(--ur-white); border-color: var(--ur-border); }
.ur-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.ur-whoweare { padding: 80px 0; background: var(--ur-light-bg); }
.ur-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ur-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--ur-text); margin-bottom: 20px; line-height: 1.25; }
.ur-whoweare__text { font-size: 1rem; color: var(--ur-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.ur-services { padding: 80px 0; background: var(--ur-white); }
.ur-services__header { text-align: center; margin-bottom: 48px; }
.ur-services__title { font-size: 2.2rem; font-weight: 700; color: var(--ur-text); }
.ur-services__subtitle { font-size: 1rem; color: var(--ur-gray); margin-top: 12px; line-height: 1.6; }
.ur-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ur-service-card {
  background: var(--ur-light-bg); border-radius: var(--ur-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.ur-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--ur-accent); background: var(--ur-white); }
.ur-service-card--wide { grid-column: 1 / -1; }
.ur-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--ur-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.ur-service-card:hover .ur-service-card__badge { animation: ur-shimmer 1.5s ease infinite; transform: scale(1.1); }
.ur-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--ur-text); margin-bottom: 10px; }
.ur-service-card__text { font-size: 0.9rem; color: var(--ur-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.ur-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.ur-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.ur-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--ur-text); margin-bottom: 14px; position: relative; z-index: 1; }
.ur-delivery__text { font-size: 1rem; color: var(--ur-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.ur-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.ur-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.ur-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--ur-white); border: 2px solid #e0e7ff; color: var(--ur-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.ur-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.ur-step:hover .ur-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.ur-delivery__steps > :nth-child(1) .ur-step__circle  { animation: ur-stepGlow 7s ease infinite 0s; }
.ur-delivery__steps > :nth-child(3) .ur-step__circle  { animation: ur-stepGlow 7s ease infinite 1s; }
.ur-delivery__steps > :nth-child(5) .ur-step__circle  { animation: ur-stepGlow 7s ease infinite 2s; }
.ur-delivery__steps > :nth-child(7) .ur-step__circle  { animation: ur-stepGlow 7s ease infinite 3s; }
.ur-delivery__steps > :nth-child(9) .ur-step__circle  { animation: ur-stepGlow 7s ease infinite 4s; }
.ur-delivery__steps > :nth-child(11) .ur-step__circle { animation: ur-stepGlow 7s ease infinite 5s; }
.ur-delivery__steps > :nth-child(13) .ur-step__circle { animation: ur-stepGlow 7s ease infinite 6s; }
.ur-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: ur-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.ur-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.ur-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.ur-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--ur-text); margin-bottom: 18px; line-height: 1.35; }
.ur-reliable__text { font-size: 1rem; color: var(--ur-gray); line-height: 1.7; margin-bottom: 40px; }
.ur-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ur-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--ur-white);
  border: 1px solid var(--ur-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.ur-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--ur-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.ur-pillar__dot { width: 8px; height: 8px; background: var(--ur-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.ur-pillar:hover .ur-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.ur-pillar__label { font-size: 0.85rem; color: var(--ur-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.ur-industries { padding: 80px 0; background: var(--ur-light-bg); text-align: center; }
.ur-industries__title { font-size: 2rem; font-weight: 700; color: var(--ur-text); margin-bottom: 48px; }
.ur-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ur-industry {
  background: var(--ur-white); border-radius: var(--ur-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--ur-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.ur-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--ur-accent); }
.ur-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.ur-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--ur-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.ur-tech { padding: 80px 0; background: var(--ur-white); }
.ur-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ur-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ur-text); margin-bottom: 20px; line-height: 1.25; }
.ur-tech__text { font-size: 1rem; color: var(--ur-gray); line-height: 1.75; margin-bottom: 14px; }
.ur-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ur-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ur-tag {
  display: inline-block; background: var(--ur-light-bg); color: var(--ur-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--ur-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ur-tag:hover { background: var(--ur-accent); color: var(--ur-white); border-color: var(--ur-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.ur-faq { padding: 80px 0; background: var(--ur-light-bg); }
.ur-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.ur-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--ur-text); margin-bottom: 12px; }
.ur-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.ur-faq__list { text-align: left; }
.ur-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ur-faq__item summary { list-style: none; }
.ur-faq__item summary::-webkit-details-marker { display: none; }
.ur-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.ur-faq__question:hover { color: var(--ur-accent); }
.ur-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ur-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.ur-faq__item[open] .ur-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ur-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ur-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.ur-cta { padding: 80px 0; background: var(--ur-dark); }
.ur-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.ur-cta__heading { font-size: 2rem; font-weight: 700; color: var(--ur-white); margin-bottom: 16px; line-height: 1.3; }
.ur-cta__text { font-size: 1rem; color: var(--ur-gray-light); line-height: 1.7; margin-bottom: 32px; }
.ur-cta__button {
  display: inline-block; background: var(--ur-accent); color: var(--ur-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: ur-pulse 2.5s ease infinite;
}
.ur-cta__button:hover { background: var(--ur-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.ur-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ur-hero__title { font-size: 2.2rem; }
  .ur-about__heading, .ur-whoweare__heading, .ur-tech__heading { font-size: 1.8rem; }
  .ur-services__title { font-size: 1.8rem; }
  .ur-delivery__heading { font-size: 1.8rem; }
  .ur-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .ur-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .ur-step__arrow { font-size: 1rem; margin: 0 1px; }
  .ur-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .ur-hero { padding: 100px 16px 80px; }
  .ur-hero__title { font-size: 1.7rem; }
  .ur-hero__subtitle { font-size: 1rem; }
  .ur-about__grid, .ur-whoweare__grid, .ur-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ur-about__heading, .ur-whoweare__heading, .ur-tech__heading { font-size: 1.6rem; }
  .ur-stats, .ur-whoweare__stats, .ur-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .ur-about__content, .ur-whoweare__content { order: 1; }
  .ur-services__grid { grid-template-columns: 1fr; }
  .ur-services__title { font-size: 1.5rem; }
  .ur-service-card--wide { grid-column: span 1; }
  .ur-delivery__heading { font-size: 1.5rem; }
  .ur-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ur-step__arrow { display: none; }
  .ur-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .ur-reliable__heading { font-size: 1.5rem; }
  .ur-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .ur-industries__title { font-size: 1.5rem; }
  .ur-industries__grid { grid-template-columns: 1fr 1fr; }
  .ur-faq__heading { font-size: 1.3rem; }
  .ur-cta__heading { font-size: 1.5rem; }
  .ur-animate, .ur-animate--left, .ur-animate--right, .ur-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .ur-hero { padding: 90px 14px 60px; }
  .ur-hero__title { font-size: 1.4rem; }
  .ur-hero__subtitle { font-size: 0.9rem; }
  .ur-about, .ur-whoweare, .ur-services, .ur-delivery, .ur-reliable,
  .ur-industries, .ur-faq, .ur-cta, .ur-tech { padding: 50px 0; }
  .ur-about__heading, .ur-whoweare__heading, .ur-tech__heading { font-size: 1.4rem; }
  .ur-about__text, .ur-whoweare__text, .ur-tech__text { font-size: 0.9rem; }
  .ur-stats, .ur-whoweare__stats, .ur-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ur-stat { padding: 20px 14px; }
  .ur-stat__number { font-size: 1.8rem; }
  .ur-stat__label { font-size: 0.75rem; }
  .ur-services__title { font-size: 1.3rem; }
  .ur-service-card { padding: 20px 16px; }
  .ur-delivery__heading { font-size: 1.3rem; }
  .ur-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .ur-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .ur-reliable__heading { font-size: 1.3rem; }
  .ur-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .ur-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ur-industry { padding: 20px 14px; }
  .ur-cta__heading { font-size: 1.3rem; }
  .ur-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}
/*END OF UX RESEARCH*/


/* ============================================================
   DESIGN SYSTEM DEVELOPMENT PAGE — design-system-development.css
   Prefix: dd-
   ============================================================ */

:root {
  --dd-accent: #e8a025;
  --dd-accent-hover: #d4911e;
  --dd-dark: #0b1120;
  --dd-dark-2: #101828;
  --dd-dark-3: #1a2332;
  --dd-white: #ffffff;
  --dd-gray: #000000;
  --dd-gray-light: #e0e7ff;
  --dd-light-bg: #f8f9fb;
  --dd-light-bg-2: #f1f3f7;
  --dd-text: #444444;
  --dd-text-light: #d1d5db;
  --dd-border: #e5e7eb;
  --dd-radius: 12px;
  --dd-radius-lg: 20px;
  --dd-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --dd-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --dd-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes dd-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dd-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dd-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dd-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes dd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes dd-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes dd-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes dd-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--dd-white); }
}
@keyframes dd-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.dd-animate { opacity: 0; transform: translateY(40px); animation: dd-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dd-animate--left { opacity: 0; transform: translateX(-40px); animation: dd-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dd-animate--right { opacity: 0; transform: translateX(40px); animation: dd-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dd-animate--scale { opacity: 0; transform: scale(0.85); animation: dd-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.dd-stagger > *:nth-child(1) { animation-delay: 0s; }
.dd-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.dd-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.dd-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.dd-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.dd-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.dd-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .dd-animate, .dd-animate--left, .dd-animate--right, .dd-animate--scale { opacity: 1; transform: none; animation: none; }
}

.dd-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.dd-text-accent { color: var(--dd-accent); }

.dd-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dd-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--dd-text); line-height: 1.5; }
.dd-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--dd-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.dd-hero {
  background: var(--dd-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.dd-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.dd-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.dd-hero__title { font-size: 3rem; font-weight: 700; color: var(--dd-white); margin-bottom: 20px; line-height: 1.2; animation: dd-fadeUp 0.7s ease 0.25s both; }
.dd-hero__title-accent { color: var(--dd-accent); font-style: italic; display: inline-block; }
.dd-hero__subtitle { font-size: 1.3rem; color: var(--dd-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: dd-fadeUp 0.7s ease 0.45s both; }
.dd-hero__desc { font-size: 0.95rem; color: var(--dd-gray-light); font-style: italic; animation: dd-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.dd-about { padding: 80px 0; background: var(--dd-white); }
.dd-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dd-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--dd-text); margin-bottom: 20px; line-height: 1.25; }
.dd-about__text { font-size: 1rem; color: var(--dd-gray); line-height: 1.75; margin-bottom: 14px; }
.dd-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.dd-stats, .dd-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dd-stat {
  background: var(--dd-light-bg); border-radius: var(--dd-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--dd-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.dd-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--dd-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.dd-stat:hover::before { transform: scaleX(1); }
.dd-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--dd-accent); }
.dd-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: dd-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.dd-stat:nth-child(1) .dd-stat__number { animation-delay: 0.2s; }
.dd-stat:nth-child(2) .dd-stat__number { animation-delay: 0.4s; }
.dd-stat:nth-child(3) .dd-stat__number { animation-delay: 0.6s; }
.dd-stat:nth-child(4) .dd-stat__number { animation-delay: 0.8s; }
.dd-stat__label { display: block; font-size: 0.82rem; color: var(--dd-gray); font-weight: 500; line-height: 1.3; }
.dd-stat--dark { background: var(--dd-white); border-color: var(--dd-border); }
.dd-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.dd-whoweare { padding: 80px 0; background: var(--dd-light-bg); }
.dd-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dd-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--dd-text); margin-bottom: 20px; line-height: 1.25; }
.dd-whoweare__text { font-size: 1rem; color: var(--dd-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.dd-services { padding: 80px 0; background: var(--dd-white); }
.dd-services__header { text-align: center; margin-bottom: 48px; }
.dd-services__title { font-size: 2.2rem; font-weight: 700; color: var(--dd-text); }
.dd-services__subtitle { font-size: 1rem; color: var(--dd-gray); margin-top: 12px; line-height: 1.6; }
.dd-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dd-service-card {
  background: var(--dd-light-bg); border-radius: var(--dd-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.dd-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--dd-accent); background: var(--dd-white); }
.dd-service-card--wide { grid-column: 1 / -1; }
.dd-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--dd-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.dd-service-card:hover .dd-service-card__badge { animation: dd-shimmer 1.5s ease infinite; transform: scale(1.1); }
.dd-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--dd-text); margin-bottom: 10px; }
.dd-service-card__text { font-size: 0.9rem; color: var(--dd-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.dd-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.dd-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.dd-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--dd-text); margin-bottom: 14px; position: relative; z-index: 1; }
.dd-delivery__text { font-size: 1rem; color: var(--dd-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.dd-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.dd-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.dd-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--dd-white); border: 2px solid #e0e7ff; color: var(--dd-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.dd-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.dd-step:hover .dd-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.dd-delivery__steps > :nth-child(1) .dd-step__circle  { animation: dd-stepGlow 7s ease infinite 0s; }
.dd-delivery__steps > :nth-child(3) .dd-step__circle  { animation: dd-stepGlow 7s ease infinite 1s; }
.dd-delivery__steps > :nth-child(5) .dd-step__circle  { animation: dd-stepGlow 7s ease infinite 2s; }
.dd-delivery__steps > :nth-child(7) .dd-step__circle  { animation: dd-stepGlow 7s ease infinite 3s; }
.dd-delivery__steps > :nth-child(9) .dd-step__circle  { animation: dd-stepGlow 7s ease infinite 4s; }
.dd-delivery__steps > :nth-child(11) .dd-step__circle { animation: dd-stepGlow 7s ease infinite 5s; }
.dd-delivery__steps > :nth-child(13) .dd-step__circle { animation: dd-stepGlow 7s ease infinite 6s; }
.dd-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: dd-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.dd-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.dd-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.dd-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--dd-text); margin-bottom: 18px; line-height: 1.35; }
.dd-reliable__text { font-size: 1rem; color: var(--dd-gray); line-height: 1.7; margin-bottom: 40px; }
.dd-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.dd-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--dd-white);
  border: 1px solid var(--dd-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.dd-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--dd-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.dd-pillar__dot { width: 8px; height: 8px; background: var(--dd-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.dd-pillar:hover .dd-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.dd-pillar__label { font-size: 0.85rem; color: var(--dd-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.dd-industries { padding: 80px 0; background: var(--dd-light-bg); text-align: center; }
.dd-industries__title { font-size: 2rem; font-weight: 700; color: var(--dd-text); margin-bottom: 48px; }
.dd-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dd-industry {
  background: var(--dd-white); border-radius: var(--dd-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--dd-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.dd-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--dd-accent); }
.dd-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.dd-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--dd-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.dd-tech { padding: 80px 0; background: var(--dd-white); }
.dd-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dd-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--dd-text); margin-bottom: 20px; line-height: 1.25; }
.dd-tech__text { font-size: 1rem; color: var(--dd-gray); line-height: 1.75; margin-bottom: 14px; }
.dd-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dd-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dd-tag {
  display: inline-block; background: var(--dd-light-bg); color: var(--dd-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--dd-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.dd-tag:hover { background: var(--dd-accent); color: var(--dd-white); border-color: var(--dd-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.dd-faq { padding: 80px 0; background: var(--dd-light-bg); }
.dd-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.dd-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--dd-text); margin-bottom: 12px; }
.dd-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.dd-faq__list { text-align: left; }
.dd-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.dd-faq__item summary { list-style: none; }
.dd-faq__item summary::-webkit-details-marker { display: none; }
.dd-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.dd-faq__question:hover { color: var(--dd-accent); }
.dd-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.dd-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.dd-faq__item[open] .dd-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.dd-faq__answer { padding: 0 0 18px; overflow: hidden; }
.dd-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.dd-cta { padding: 80px 0; background: var(--dd-dark); }
.dd-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.dd-cta__heading { font-size: 2rem; font-weight: 700; color: var(--dd-white); margin-bottom: 16px; line-height: 1.3; }
.dd-cta__text { font-size: 1rem; color: var(--dd-gray-light); line-height: 1.7; margin-bottom: 32px; }
.dd-cta__button {
  display: inline-block; background: var(--dd-accent); color: var(--dd-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: dd-pulse 2.5s ease infinite;
}
.dd-cta__button:hover { background: var(--dd-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.dd-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dd-hero__title { font-size: 2.2rem; }
  .dd-about__heading, .dd-whoweare__heading, .dd-tech__heading { font-size: 1.8rem; }
  .dd-services__title { font-size: 1.8rem; }
  .dd-delivery__heading { font-size: 1.8rem; }
  .dd-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .dd-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .dd-step__arrow { font-size: 1rem; margin: 0 1px; }
  .dd-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .dd-hero { padding: 100px 16px 80px; }
  .dd-hero__title { font-size: 1.7rem; }
  .dd-hero__subtitle { font-size: 1rem; }
  .dd-about__grid, .dd-whoweare__grid, .dd-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .dd-about__heading, .dd-whoweare__heading, .dd-tech__heading { font-size: 1.6rem; }
  .dd-stats, .dd-whoweare__stats, .dd-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .dd-about__content, .dd-whoweare__content { order: 1; }
  .dd-services__grid { grid-template-columns: 1fr; }
  .dd-services__title { font-size: 1.5rem; }
  .dd-service-card--wide { grid-column: span 1; }
  .dd-delivery__heading { font-size: 1.5rem; }
  .dd-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .dd-step__arrow { display: none; }
  .dd-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .dd-reliable__heading { font-size: 1.5rem; }
  .dd-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .dd-industries__title { font-size: 1.5rem; }
  .dd-industries__grid { grid-template-columns: 1fr 1fr; }
  .dd-faq__heading { font-size: 1.3rem; }
  .dd-cta__heading { font-size: 1.5rem; }
  .dd-animate, .dd-animate--left, .dd-animate--right, .dd-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .dd-hero { padding: 90px 14px 60px; }
  .dd-hero__title { font-size: 1.4rem; }
  .dd-hero__subtitle { font-size: 0.9rem; }
  .dd-about, .dd-whoweare, .dd-services, .dd-delivery, .dd-reliable,
  .dd-industries, .dd-faq, .dd-cta, .dd-tech { padding: 50px 0; }
  .dd-about__heading, .dd-whoweare__heading, .dd-tech__heading { font-size: 1.4rem; }
  .dd-about__text, .dd-whoweare__text, .dd-tech__text { font-size: 0.9rem; }
  .dd-stats, .dd-whoweare__stats, .dd-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dd-stat { padding: 20px 14px; }
  .dd-stat__number { font-size: 1.8rem; }
  .dd-stat__label { font-size: 0.75rem; }
  .dd-services__title { font-size: 1.3rem; }
  .dd-service-card { padding: 20px 16px; }
  .dd-delivery__heading { font-size: 1.3rem; }
  .dd-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .dd-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .dd-reliable__heading { font-size: 1.3rem; }
  .dd-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .dd-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dd-industry { padding: 20px 14px; }
  .dd-cta__heading { font-size: 1.3rem; }
  .dd-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}


/*END OF DESIGN DEVELOPEMENT*/


/* ============================================================
   DIGITAL MARKETING SOLUTIONS PAGE — digital-marketing-solutions.css
   Prefix: dm-
   ============================================================ */

:root {
  --dm-accent: #e8a025;
  --dm-accent-hover: #d4911e;
  --dm-dark: #0b1120;
  --dm-dark-2: #101828;
  --dm-dark-3: #1a2332;
  --dm-white: #ffffff;
  --dm-gray: #000000;
  --dm-gray-light: #e0e7ff;
  --dm-light-bg: #f8f9fb;
  --dm-light-bg-2: #f1f3f7;
  --dm-text: #444444;
  --dm-text-light: #d1d5db;
  --dm-border: #e5e7eb;
  --dm-radius: 12px;
  --dm-radius-lg: 20px;
  --dm-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --dm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --dm-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes dm-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dm-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dm-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dm-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes dm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes dm-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes dm-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes dm-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--dm-white); }
}
@keyframes dm-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.dm-animate { opacity: 0; transform: translateY(40px); animation: dm-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dm-animate--left { opacity: 0; transform: translateX(-40px); animation: dm-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dm-animate--right { opacity: 0; transform: translateX(40px); animation: dm-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.dm-animate--scale { opacity: 0; transform: scale(0.85); animation: dm-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.dm-stagger > *:nth-child(1) { animation-delay: 0s; }
.dm-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.dm-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.dm-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.dm-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.dm-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.dm-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .dm-animate, .dm-animate--left, .dm-animate--right, .dm-animate--scale { opacity: 1; transform: none; animation: none; }
}

.dm-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.dm-text-accent { color: var(--dm-accent); }

.dm-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dm-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--dm-text); line-height: 1.5; }
.dm-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--dm-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.dm-hero {
  background: var(--dm-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.dm-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.dm-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.dm-hero__title { font-size: 3rem; font-weight: 700; color: var(--dm-white); margin-bottom: 20px; line-height: 1.2; animation: dm-fadeUp 0.7s ease 0.25s both; }
.dm-hero__title-accent { color: var(--dm-accent); font-style: italic; display: inline-block; }
.dm-hero__subtitle { font-size: 1.3rem; color: var(--dm-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: dm-fadeUp 0.7s ease 0.45s both; }
.dm-hero__desc { font-size: 0.95rem; color: var(--dm-gray-light); font-style: italic; animation: dm-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.dm-about { padding: 80px 0; background: var(--dm-white); }
.dm-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dm-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--dm-text); margin-bottom: 20px; line-height: 1.25; }
.dm-about__text { font-size: 1rem; color: var(--dm-gray); line-height: 1.75; margin-bottom: 14px; }
.dm-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.dm-stats, .dm-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dm-stat {
  background: var(--dm-light-bg); border-radius: var(--dm-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--dm-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.dm-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--dm-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.dm-stat:hover::before { transform: scaleX(1); }
.dm-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--dm-accent); }
.dm-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: dm-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.dm-stat:nth-child(1) .dm-stat__number { animation-delay: 0.2s; }
.dm-stat:nth-child(2) .dm-stat__number { animation-delay: 0.4s; }
.dm-stat:nth-child(3) .dm-stat__number { animation-delay: 0.6s; }
.dm-stat:nth-child(4) .dm-stat__number { animation-delay: 0.8s; }
.dm-stat__label { display: block; font-size: 0.82rem; color: var(--dm-gray); font-weight: 500; line-height: 1.3; }
.dm-stat--dark { background: var(--dm-white); border-color: var(--dm-border); }
.dm-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.dm-whoweare { padding: 80px 0; background: var(--dm-light-bg); }
.dm-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dm-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--dm-text); margin-bottom: 20px; line-height: 1.25; }
.dm-whoweare__text { font-size: 1rem; color: var(--dm-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.dm-services { padding: 80px 0; background: var(--dm-white); }
.dm-services__header { text-align: center; margin-bottom: 48px; }
.dm-services__title { font-size: 2.2rem; font-weight: 700; color: var(--dm-text); }
.dm-services__subtitle { font-size: 1rem; color: var(--dm-gray); margin-top: 12px; line-height: 1.6; }
.dm-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dm-service-card {
  background: var(--dm-light-bg); border-radius: var(--dm-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.dm-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--dm-accent); background: var(--dm-white); }
.dm-service-card--wide { grid-column: 1 / -1; }
.dm-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--dm-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.dm-service-card:hover .dm-service-card__badge { animation: dm-shimmer 1.5s ease infinite; transform: scale(1.1); }
.dm-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--dm-text); margin-bottom: 10px; }
.dm-service-card__text { font-size: 0.9rem; color: var(--dm-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.dm-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.dm-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.dm-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--dm-text); margin-bottom: 14px; position: relative; z-index: 1; }
.dm-delivery__text { font-size: 1rem; color: var(--dm-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.dm-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.dm-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.dm-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--dm-white); border: 2px solid #e0e7ff; color: var(--dm-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.dm-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.dm-step:hover .dm-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.dm-delivery__steps > :nth-child(1) .dm-step__circle  { animation: dm-stepGlow 7s ease infinite 0s; }
.dm-delivery__steps > :nth-child(3) .dm-step__circle  { animation: dm-stepGlow 7s ease infinite 1s; }
.dm-delivery__steps > :nth-child(5) .dm-step__circle  { animation: dm-stepGlow 7s ease infinite 2s; }
.dm-delivery__steps > :nth-child(7) .dm-step__circle  { animation: dm-stepGlow 7s ease infinite 3s; }
.dm-delivery__steps > :nth-child(9) .dm-step__circle  { animation: dm-stepGlow 7s ease infinite 4s; }
.dm-delivery__steps > :nth-child(11) .dm-step__circle { animation: dm-stepGlow 7s ease infinite 5s; }
.dm-delivery__steps > :nth-child(13) .dm-step__circle { animation: dm-stepGlow 7s ease infinite 6s; }
.dm-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: dm-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.dm-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.dm-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.dm-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--dm-text); margin-bottom: 18px; line-height: 1.35; }
.dm-reliable__text { font-size: 1rem; color: var(--dm-gray); line-height: 1.7; margin-bottom: 40px; }
.dm-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.dm-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--dm-white);
  border: 1px solid var(--dm-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.dm-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--dm-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.dm-pillar__dot { width: 8px; height: 8px; background: var(--dm-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.dm-pillar:hover .dm-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.dm-pillar__label { font-size: 0.85rem; color: var(--dm-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.dm-industries { padding: 80px 0; background: var(--dm-light-bg); text-align: center; }
.dm-industries__title { font-size: 2rem; font-weight: 700; color: var(--dm-text); margin-bottom: 48px; }
.dm-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dm-industry {
  background: var(--dm-white); border-radius: var(--dm-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--dm-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.dm-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--dm-accent); }
.dm-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.dm-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--dm-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.dm-tech { padding: 80px 0; background: var(--dm-white); }
.dm-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.dm-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--dm-text); margin-bottom: 20px; line-height: 1.25; }
.dm-tech__text { font-size: 1rem; color: var(--dm-gray); line-height: 1.75; margin-bottom: 14px; }
.dm-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dm-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dm-tag {
  display: inline-block; background: var(--dm-light-bg); color: var(--dm-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--dm-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.dm-tag:hover { background: var(--dm-accent); color: var(--dm-white); border-color: var(--dm-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.dm-faq { padding: 80px 0; background: var(--dm-light-bg); }
.dm-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.dm-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--dm-text); margin-bottom: 12px; }
.dm-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.dm-faq__list { text-align: left; }
.dm-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.dm-faq__item summary { list-style: none; }
.dm-faq__item summary::-webkit-details-marker { display: none; }
.dm-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.dm-faq__question:hover { color: var(--dm-accent); }
.dm-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.dm-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.dm-faq__item[open] .dm-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.dm-faq__answer { padding: 0 0 18px; overflow: hidden; }
.dm-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.dm-cta { padding: 80px 0; background: var(--dm-dark); }
.dm-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.dm-cta__heading { font-size: 2rem; font-weight: 700; color: var(--dm-white); margin-bottom: 16px; line-height: 1.3; }
.dm-cta__text { font-size: 1rem; color: var(--dm-gray-light); line-height: 1.7; margin-bottom: 32px; }
.dm-cta__button {
  display: inline-block; background: var(--dm-accent); color: var(--dm-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: dm-pulse 2.5s ease infinite;
}
.dm-cta__button:hover { background: var(--dm-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.dm-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dm-hero__title { font-size: 2.2rem; }
  .dm-about__heading, .dm-whoweare__heading, .dm-tech__heading { font-size: 1.8rem; }
  .dm-services__title { font-size: 1.8rem; }
  .dm-delivery__heading { font-size: 1.8rem; }
  .dm-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .dm-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .dm-step__arrow { font-size: 1rem; margin: 0 1px; }
  .dm-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .dm-hero { padding: 100px 16px 80px; }
  .dm-hero__title { font-size: 1.7rem; }
  .dm-hero__subtitle { font-size: 1rem; }
  .dm-about__grid, .dm-whoweare__grid, .dm-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .dm-about__heading, .dm-whoweare__heading, .dm-tech__heading { font-size: 1.6rem; }
  .dm-stats, .dm-whoweare__stats, .dm-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .dm-about__content, .dm-whoweare__content { order: 1; }
  .dm-services__grid { grid-template-columns: 1fr; }
  .dm-services__title { font-size: 1.5rem; }
  .dm-service-card--wide { grid-column: span 1; }
  .dm-delivery__heading { font-size: 1.5rem; }
  .dm-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .dm-step__arrow { display: none; }
  .dm-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .dm-reliable__heading { font-size: 1.5rem; }
  .dm-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .dm-industries__title { font-size: 1.5rem; }
  .dm-industries__grid { grid-template-columns: 1fr 1fr; }
  .dm-faq__heading { font-size: 1.3rem; }
  .dm-cta__heading { font-size: 1.5rem; }
  .dm-animate, .dm-animate--left, .dm-animate--right, .dm-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .dm-hero { padding: 90px 14px 60px; }
  .dm-hero__title { font-size: 1.4rem; }
  .dm-hero__subtitle { font-size: 0.9rem; }
  .dm-about, .dm-whoweare, .dm-services, .dm-delivery, .dm-reliable,
  .dm-industries, .dm-faq, .dm-cta, .dm-tech { padding: 50px 0; }
  .dm-about__heading, .dm-whoweare__heading, .dm-tech__heading { font-size: 1.4rem; }
  .dm-about__text, .dm-whoweare__text, .dm-tech__text { font-size: 0.9rem; }
  .dm-stats, .dm-whoweare__stats, .dm-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dm-stat { padding: 20px 14px; }
  .dm-stat__number { font-size: 1.8rem; }
  .dm-stat__label { font-size: 0.75rem; }
  .dm-services__title { font-size: 1.3rem; }
  .dm-service-card { padding: 20px 16px; }
  .dm-delivery__heading { font-size: 1.3rem; }
  .dm-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .dm-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .dm-reliable__heading { font-size: 1.3rem; }
  .dm-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .dm-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dm-industry { padding: 20px 14px; }
  .dm-cta__heading { font-size: 1.3rem; }
  .dm-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}



/* ============================================================
   SEO SERVICES PAGE — seo-services.css
   Prefix: se-
   ============================================================ */

:root {
  --se-accent: #e8a025;
  --se-accent-hover: #d4911e;
  --se-dark: #0b1120;
  --se-dark-2: #101828;
  --se-dark-3: #1a2332;
  --se-white: #ffffff;
  --se-gray: #000000;
  --se-gray-light: #e0e7ff;
  --se-light-bg: #f8f9fb;
  --se-light-bg-2: #f1f3f7;
  --se-text: #444444;
  --se-text-light: #d1d5db;
  --se-border: #e5e7eb;
  --se-radius: 12px;
  --se-radius-lg: 20px;
  --se-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --se-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --se-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes se-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes se-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes se-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes se-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes se-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes se-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes se-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes se-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--se-white); }
}
@keyframes se-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.se-animate { opacity: 0; transform: translateY(40px); animation: se-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.se-animate--left { opacity: 0; transform: translateX(-40px); animation: se-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.se-animate--right { opacity: 0; transform: translateX(40px); animation: se-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.se-animate--scale { opacity: 0; transform: scale(0.85); animation: se-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.se-stagger > *:nth-child(1) { animation-delay: 0s; }
.se-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.se-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.se-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.se-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.se-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.se-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .se-animate, .se-animate--left, .se-animate--right, .se-animate--scale { opacity: 1; transform: none; animation: none; }
}

.se-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.se-text-accent { color: var(--se-accent); }

.se-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.se-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--se-text); line-height: 1.5; }
.se-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--se-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.se-hero {
  background: var(--se-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.se-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.se-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.se-hero__title { font-size: 3rem; font-weight: 700; color: var(--se-white); margin-bottom: 20px; line-height: 1.2; animation: se-fadeUp 0.7s ease 0.25s both; }
.se-hero__title-accent { color: var(--se-accent); font-style: italic; display: inline-block; }
.se-hero__subtitle { font-size: 1.3rem; color: var(--se-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: se-fadeUp 0.7s ease 0.45s both; }
.se-hero__desc { font-size: 0.95rem; color: var(--se-gray-light); font-style: italic; animation: se-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.se-about { padding: 80px 0; background: var(--se-white); }
.se-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.se-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--se-text); margin-bottom: 20px; line-height: 1.25; }
.se-about__text { font-size: 1rem; color: var(--se-gray); line-height: 1.75; margin-bottom: 14px; }
.se-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.se-stats, .se-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.se-stat {
  background: var(--se-light-bg); border-radius: var(--se-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--se-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.se-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--se-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.se-stat:hover::before { transform: scaleX(1); }
.se-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--se-accent); }
.se-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: se-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.se-stat:nth-child(1) .se-stat__number { animation-delay: 0.2s; }
.se-stat:nth-child(2) .se-stat__number { animation-delay: 0.4s; }
.se-stat:nth-child(3) .se-stat__number { animation-delay: 0.6s; }
.se-stat:nth-child(4) .se-stat__number { animation-delay: 0.8s; }
.se-stat__label { display: block; font-size: 0.82rem; color: var(--se-gray); font-weight: 500; line-height: 1.3; }
.se-stat--dark { background: var(--se-white); border-color: var(--se-border); }
.se-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.se-whoweare { padding: 80px 0; background: var(--se-light-bg); }
.se-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.se-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--se-text); margin-bottom: 20px; line-height: 1.25; }
.se-whoweare__text { font-size: 1rem; color: var(--se-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.se-services { padding: 80px 0; background: var(--se-white); }
.se-services__header { text-align: center; margin-bottom: 48px; }
.se-services__title { font-size: 2.2rem; font-weight: 700; color: var(--se-text); }
.se-services__subtitle { font-size: 1rem; color: var(--se-gray); margin-top: 12px; line-height: 1.6; }
.se-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.se-service-card {
  background: var(--se-light-bg); border-radius: var(--se-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.se-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--se-accent); background: var(--se-white); }
.se-service-card--wide { grid-column: 1 / -1; }
.se-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--se-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.se-service-card:hover .se-service-card__badge { animation: se-shimmer 1.5s ease infinite; transform: scale(1.1); }
.se-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--se-text); margin-bottom: 10px; }
.se-service-card__text { font-size: 0.9rem; color: var(--se-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.se-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.se-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.se-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--se-text); margin-bottom: 14px; position: relative; z-index: 1; }
.se-delivery__text { font-size: 1rem; color: var(--se-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.se-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.se-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.se-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--se-white); border: 2px solid #e0e7ff; color: var(--se-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.se-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.se-step:hover .se-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.se-delivery__steps > :nth-child(1) .se-step__circle  { animation: se-stepGlow 7s ease infinite 0s; }
.se-delivery__steps > :nth-child(3) .se-step__circle  { animation: se-stepGlow 7s ease infinite 1s; }
.se-delivery__steps > :nth-child(5) .se-step__circle  { animation: se-stepGlow 7s ease infinite 2s; }
.se-delivery__steps > :nth-child(7) .se-step__circle  { animation: se-stepGlow 7s ease infinite 3s; }
.se-delivery__steps > :nth-child(9) .se-step__circle  { animation: se-stepGlow 7s ease infinite 4s; }
.se-delivery__steps > :nth-child(11) .se-step__circle { animation: se-stepGlow 7s ease infinite 5s; }
.se-delivery__steps > :nth-child(13) .se-step__circle { animation: se-stepGlow 7s ease infinite 6s; }
.se-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: se-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.se-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.se-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.se-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--se-text); margin-bottom: 18px; line-height: 1.35; }
.se-reliable__text { font-size: 1rem; color: var(--se-gray); line-height: 1.7; margin-bottom: 40px; }
.se-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.se-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--se-white);
  border: 1px solid var(--se-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.se-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--se-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.se-pillar__dot { width: 8px; height: 8px; background: var(--se-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.se-pillar:hover .se-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.se-pillar__label { font-size: 0.85rem; color: var(--se-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.se-industries { padding: 80px 0; background: var(--se-light-bg); text-align: center; }
.se-industries__title { font-size: 2rem; font-weight: 700; color: var(--se-text); margin-bottom: 48px; }
.se-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.se-industry {
  background: var(--se-white); border-radius: var(--se-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--se-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.se-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--se-accent); }
.se-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.se-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--se-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.se-tech { padding: 80px 0; background: var(--se-white); }
.se-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.se-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--se-text); margin-bottom: 20px; line-height: 1.25; }
.se-tech__text { font-size: 1rem; color: var(--se-gray); line-height: 1.75; margin-bottom: 14px; }
.se-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.se-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.se-tag {
  display: inline-block; background: var(--se-light-bg); color: var(--se-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--se-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.se-tag:hover { background: var(--se-accent); color: var(--se-white); border-color: var(--se-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.se-faq { padding: 80px 0; background: var(--se-light-bg); }
.se-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.se-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--se-text); margin-bottom: 12px; }
.se-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.se-faq__list { text-align: left; }
.se-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.se-faq__item summary { list-style: none; }
.se-faq__item summary::-webkit-details-marker { display: none; }
.se-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.se-faq__question:hover { color: var(--se-accent); }
.se-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.se-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.se-faq__item[open] .se-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.se-faq__answer { padding: 0 0 18px; overflow: hidden; }
.se-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.se-cta { padding: 80px 0; background: var(--se-dark); }
.se-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.se-cta__heading { font-size: 2rem; font-weight: 700; color: var(--se-white); margin-bottom: 16px; line-height: 1.3; }
.se-cta__text { font-size: 1rem; color: var(--se-gray-light); line-height: 1.7; margin-bottom: 32px; }
.se-cta__button {
  display: inline-block; background: var(--se-accent); color: var(--se-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: se-pulse 2.5s ease infinite;
}
.se-cta__button:hover { background: var(--se-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.se-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .se-hero__title { font-size: 2.2rem; }
  .se-about__heading, .se-whoweare__heading, .se-tech__heading { font-size: 1.8rem; }
  .se-services__title { font-size: 1.8rem; }
  .se-delivery__heading { font-size: 1.8rem; }
  .se-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .se-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .se-step__arrow { font-size: 1rem; margin: 0 1px; }
  .se-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .se-hero { padding: 100px 16px 80px; }
  .se-hero__title { font-size: 1.7rem; }
  .se-hero__subtitle { font-size: 1rem; }
  .se-about__grid, .se-whoweare__grid, .se-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .se-about__heading, .se-whoweare__heading, .se-tech__heading { font-size: 1.6rem; }
  .se-stats, .se-whoweare__stats, .se-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .se-about__content, .se-whoweare__content { order: 1; }
  .se-services__grid { grid-template-columns: 1fr; }
  .se-services__title { font-size: 1.5rem; }
  .se-service-card--wide { grid-column: span 1; }
  .se-delivery__heading { font-size: 1.5rem; }
  .se-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .se-step__arrow { display: none; }
  .se-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .se-reliable__heading { font-size: 1.5rem; }
  .se-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .se-industries__title { font-size: 1.5rem; }
  .se-industries__grid { grid-template-columns: 1fr 1fr; }
  .se-faq__heading { font-size: 1.3rem; }
  .se-cta__heading { font-size: 1.5rem; }
  .se-animate, .se-animate--left, .se-animate--right, .se-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .se-hero { padding: 90px 14px 60px; }
  .se-hero__title { font-size: 1.4rem; }
  .se-hero__subtitle { font-size: 0.9rem; }
  .se-about, .se-whoweare, .se-services, .se-delivery, .se-reliable,
  .se-industries, .se-faq, .se-cta, .se-tech { padding: 50px 0; }
  .se-about__heading, .se-whoweare__heading, .se-tech__heading { font-size: 1.4rem; }
  .se-about__text, .se-whoweare__text, .se-tech__text { font-size: 0.9rem; }
  .se-stats, .se-whoweare__stats, .se-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .se-stat { padding: 20px 14px; }
  .se-stat__number { font-size: 1.8rem; }
  .se-stat__label { font-size: 0.75rem; }
  .se-services__title { font-size: 1.3rem; }
  .se-service-card { padding: 20px 16px; }
  .se-delivery__heading { font-size: 1.3rem; }
  .se-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .se-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .se-reliable__heading { font-size: 1.3rem; }
  .se-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .se-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .se-industry { padding: 20px 14px; }
  .se-cta__heading { font-size: 1.3rem; }
  .se-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}


/* ============================================================
   PPC ADVERTISING SERVICES PAGE — ppc-advertising-services.css
   Prefix: pp-
   ============================================================ */

:root {
  --pp-accent: #e8a025;
  --pp-accent-hover: #d4911e;
  --pp-dark: #0b1120;
  --pp-dark-2: #101828;
  --pp-dark-3: #1a2332;
  --pp-white: #ffffff;
  --pp-gray: #000000;
  --pp-gray-light: #e0e7ff;
  --pp-light-bg: #f8f9fb;
  --pp-light-bg-2: #f1f3f7;
  --pp-text: #444444;
  --pp-text-light: #d1d5db;
  --pp-border: #e5e7eb;
  --pp-radius: 12px;
  --pp-radius-lg: 20px;
  --pp-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --pp-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --pp-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes pp-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pp-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pp-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pp-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes pp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes pp-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes pp-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pp-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--pp-white); }
}
@keyframes pp-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.pp-animate { opacity: 0; transform: translateY(40px); animation: pp-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.pp-animate--left { opacity: 0; transform: translateX(-40px); animation: pp-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.pp-animate--right { opacity: 0; transform: translateX(40px); animation: pp-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.pp-animate--scale { opacity: 0; transform: scale(0.85); animation: pp-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.pp-stagger > *:nth-child(1) { animation-delay: 0s; }
.pp-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.pp-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.pp-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.pp-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.pp-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.pp-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .pp-animate, .pp-animate--left, .pp-animate--right, .pp-animate--scale { opacity: 1; transform: none; animation: none; }
}

.pp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pp-text-accent { color: var(--pp-accent); }

.pp-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pp-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--pp-text); line-height: 1.5; }
.pp-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--pp-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.pp-hero {
  background: var(--pp-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.pp-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.pp-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.pp-hero__title { font-size: 3rem; font-weight: 700; color: var(--pp-white); margin-bottom: 20px; line-height: 1.2; animation: pp-fadeUp 0.7s ease 0.25s both; }
.pp-hero__title-accent { color: var(--pp-accent); font-style: italic; display: inline-block; }
.pp-hero__subtitle { font-size: 1.3rem; color: var(--pp-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: pp-fadeUp 0.7s ease 0.45s both; }
.pp-hero__desc { font-size: 0.95rem; color: var(--pp-gray-light); font-style: italic; animation: pp-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.pp-about { padding: 80px 0; background: var(--pp-white); }
.pp-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pp-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--pp-text); margin-bottom: 20px; line-height: 1.25; }
.pp-about__text { font-size: 1rem; color: var(--pp-gray); line-height: 1.75; margin-bottom: 14px; }
.pp-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.pp-stats, .pp-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-stat {
  background: var(--pp-light-bg); border-radius: var(--pp-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--pp-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.pp-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--pp-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.pp-stat:hover::before { transform: scaleX(1); }
.pp-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--pp-accent); }
.pp-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: pp-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.pp-stat:nth-child(1) .pp-stat__number { animation-delay: 0.2s; }
.pp-stat:nth-child(2) .pp-stat__number { animation-delay: 0.4s; }
.pp-stat:nth-child(3) .pp-stat__number { animation-delay: 0.6s; }
.pp-stat:nth-child(4) .pp-stat__number { animation-delay: 0.8s; }
.pp-stat__label { display: block; font-size: 0.82rem; color: var(--pp-gray); font-weight: 500; line-height: 1.3; }
.pp-stat--dark { background: var(--pp-white); border-color: var(--pp-border); }
.pp-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.pp-whoweare { padding: 80px 0; background: var(--pp-light-bg); }
.pp-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pp-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--pp-text); margin-bottom: 20px; line-height: 1.25; }
.pp-whoweare__text { font-size: 1rem; color: var(--pp-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.pp-services { padding: 80px 0; background: var(--pp-white); }
.pp-services__header { text-align: center; margin-bottom: 48px; }
.pp-services__title { font-size: 2.2rem; font-weight: 700; color: var(--pp-text); }
.pp-services__subtitle { font-size: 1rem; color: var(--pp-gray); margin-top: 12px; line-height: 1.6; }
.pp-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pp-service-card {
  background: var(--pp-light-bg); border-radius: var(--pp-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.pp-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--pp-accent); background: var(--pp-white); }
.pp-service-card--wide { grid-column: 1 / -1; }
.pp-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--pp-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.pp-service-card:hover .pp-service-card__badge { animation: pp-shimmer 1.5s ease infinite; transform: scale(1.1); }
.pp-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--pp-text); margin-bottom: 10px; }
.pp-service-card__text { font-size: 0.9rem; color: var(--pp-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.pp-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.pp-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.pp-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--pp-text); margin-bottom: 14px; position: relative; z-index: 1; }
.pp-delivery__text { font-size: 1rem; color: var(--pp-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.pp-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.pp-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.pp-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--pp-white); border: 2px solid #e0e7ff; color: var(--pp-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.pp-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.pp-step:hover .pp-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.pp-delivery__steps > :nth-child(1) .pp-step__circle  { animation: pp-stepGlow 7s ease infinite 0s; }
.pp-delivery__steps > :nth-child(3) .pp-step__circle  { animation: pp-stepGlow 7s ease infinite 1s; }
.pp-delivery__steps > :nth-child(5) .pp-step__circle  { animation: pp-stepGlow 7s ease infinite 2s; }
.pp-delivery__steps > :nth-child(7) .pp-step__circle  { animation: pp-stepGlow 7s ease infinite 3s; }
.pp-delivery__steps > :nth-child(9) .pp-step__circle  { animation: pp-stepGlow 7s ease infinite 4s; }
.pp-delivery__steps > :nth-child(11) .pp-step__circle { animation: pp-stepGlow 7s ease infinite 5s; }
.pp-delivery__steps > :nth-child(13) .pp-step__circle { animation: pp-stepGlow 7s ease infinite 6s; }
.pp-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: pp-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.pp-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.pp-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.pp-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--pp-text); margin-bottom: 18px; line-height: 1.35; }
.pp-reliable__text { font-size: 1rem; color: var(--pp-gray); line-height: 1.7; margin-bottom: 40px; }
.pp-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.pp-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--pp-white);
  border: 1px solid var(--pp-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.pp-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--pp-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.pp-pillar__dot { width: 8px; height: 8px; background: var(--pp-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.pp-pillar:hover .pp-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.pp-pillar__label { font-size: 0.85rem; color: var(--pp-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.pp-industries { padding: 80px 0; background: var(--pp-light-bg); text-align: center; }
.pp-industries__title { font-size: 2rem; font-weight: 700; color: var(--pp-text); margin-bottom: 48px; }
.pp-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pp-industry {
  background: var(--pp-white); border-radius: var(--pp-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--pp-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.pp-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--pp-accent); }
.pp-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.pp-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--pp-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.pp-tech { padding: 80px 0; background: var(--pp-white); }
.pp-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pp-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--pp-text); margin-bottom: 20px; line-height: 1.25; }
.pp-tech__text { font-size: 1rem; color: var(--pp-gray); line-height: 1.75; margin-bottom: 14px; }
.pp-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pp-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-tag {
  display: inline-block; background: var(--pp-light-bg); color: var(--pp-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--pp-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.pp-tag:hover { background: var(--pp-accent); color: var(--pp-white); border-color: var(--pp-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.pp-faq { padding: 80px 0; background: var(--pp-light-bg); }
.pp-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.pp-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--pp-text); margin-bottom: 12px; }
.pp-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.pp-faq__list { text-align: left; }
.pp-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.pp-faq__item summary { list-style: none; }
.pp-faq__item summary::-webkit-details-marker { display: none; }
.pp-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.pp-faq__question:hover { color: var(--pp-accent); }
.pp-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.pp-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.pp-faq__item[open] .pp-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.pp-faq__answer { padding: 0 0 18px; overflow: hidden; }
.pp-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.pp-cta { padding: 80px 0; background: var(--pp-dark); }
.pp-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.pp-cta__heading { font-size: 2rem; font-weight: 700; color: var(--pp-white); margin-bottom: 16px; line-height: 1.3; }
.pp-cta__text { font-size: 1rem; color: var(--pp-gray-light); line-height: 1.7; margin-bottom: 32px; }
.pp-cta__button {
  display: inline-block; background: var(--pp-accent); color: var(--pp-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: pp-pulse 2.5s ease infinite;
}
.pp-cta__button:hover { background: var(--pp-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.pp-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .pp-hero__title { font-size: 2.2rem; }
  .pp-about__heading, .pp-whoweare__heading, .pp-tech__heading { font-size: 1.8rem; }
  .pp-services__title { font-size: 1.8rem; }
  .pp-delivery__heading { font-size: 1.8rem; }
  .pp-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .pp-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .pp-step__arrow { font-size: 1rem; margin: 0 1px; }
  .pp-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .pp-hero { padding: 100px 16px 80px; }
  .pp-hero__title { font-size: 1.7rem; }
  .pp-hero__subtitle { font-size: 1rem; }
  .pp-about__grid, .pp-whoweare__grid, .pp-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .pp-about__heading, .pp-whoweare__heading, .pp-tech__heading { font-size: 1.6rem; }
  .pp-stats, .pp-whoweare__stats, .pp-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .pp-about__content, .pp-whoweare__content { order: 1; }
  .pp-services__grid { grid-template-columns: 1fr; }
  .pp-services__title { font-size: 1.5rem; }
  .pp-service-card--wide { grid-column: span 1; }
  .pp-delivery__heading { font-size: 1.5rem; }
  .pp-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .pp-step__arrow { display: none; }
  .pp-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .pp-reliable__heading { font-size: 1.5rem; }
  .pp-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .pp-industries__title { font-size: 1.5rem; }
  .pp-industries__grid { grid-template-columns: 1fr 1fr; }
  .pp-faq__heading { font-size: 1.3rem; }
  .pp-cta__heading { font-size: 1.5rem; }
  .pp-animate, .pp-animate--left, .pp-animate--right, .pp-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .pp-hero { padding: 90px 14px 60px; }
  .pp-hero__title { font-size: 1.4rem; }
  .pp-hero__subtitle { font-size: 0.9rem; }
  .pp-about, .pp-whoweare, .pp-services, .pp-delivery, .pp-reliable,
  .pp-industries, .pp-faq, .pp-cta, .pp-tech { padding: 50px 0; }
  .pp-about__heading, .pp-whoweare__heading, .pp-tech__heading { font-size: 1.4rem; }
  .pp-about__text, .pp-whoweare__text, .pp-tech__text { font-size: 0.9rem; }
  .pp-stats, .pp-whoweare__stats, .pp-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pp-stat { padding: 20px 14px; }
  .pp-stat__number { font-size: 1.8rem; }
  .pp-stat__label { font-size: 0.75rem; }
  .pp-services__title { font-size: 1.3rem; }
  .pp-service-card { padding: 20px 16px; }
  .pp-delivery__heading { font-size: 1.3rem; }
  .pp-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .pp-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .pp-reliable__heading { font-size: 1.3rem; }
  .pp-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .pp-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pp-industry { padding: 20px 14px; }
  .pp-cta__heading { font-size: 1.3rem; }
  .pp-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}



/* ============================================================
   APP STORE OPTIMIZATION PAGE — app-store-optimization-services.css
   Prefix: ao-
   ============================================================ */

:root {
  --ao-accent: #e8a025;
  --ao-accent-hover: #d4911e;
  --ao-dark: #0b1120;
  --ao-dark-2: #101828;
  --ao-dark-3: #1a2332;
  --ao-white: #ffffff;
  --ao-gray: #000000;
  --ao-gray-light: #e0e7ff;
  --ao-light-bg: #f8f9fb;
  --ao-light-bg-2: #f1f3f7;
  --ao-text: #444444;
  --ao-text-light: #d1d5db;
  --ao-border: #e5e7eb;
  --ao-radius: 12px;
  --ao-radius-lg: 20px;
  --ao-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ao-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --ao-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ao-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ao-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ao-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ao-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ao-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes ao-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes ao-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ao-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--ao-white); }
}
@keyframes ao-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.ao-animate { opacity: 0; transform: translateY(40px); animation: ao-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ao-animate--left { opacity: 0; transform: translateX(-40px); animation: ao-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ao-animate--right { opacity: 0; transform: translateX(40px); animation: ao-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.ao-animate--scale { opacity: 0; transform: scale(0.85); animation: ao-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.ao-stagger > *:nth-child(1) { animation-delay: 0s; }
.ao-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.ao-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.ao-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.ao-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.ao-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.ao-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .ao-animate, .ao-animate--left, .ao-animate--right, .ao-animate--scale { opacity: 1; transform: none; animation: none; }
}

.ao-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ao-text-accent { color: var(--ao-accent); }

.ao-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ao-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--ao-text); line-height: 1.5; }
.ao-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--ao-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.ao-hero {
  background: var(--ao-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.ao-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.ao-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.ao-hero__title { font-size: 3rem; font-weight: 700; color: var(--ao-white); margin-bottom: 20px; line-height: 1.2; animation: ao-fadeUp 0.7s ease 0.25s both; }
.ao-hero__title-accent { color: var(--ao-accent); font-style: italic; display: inline-block; }
.ao-hero__subtitle { font-size: 1.3rem; color: var(--ao-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: ao-fadeUp 0.7s ease 0.45s both; }
.ao-hero__desc { font-size: 0.95rem; color: var(--ao-gray-light); font-style: italic; animation: ao-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.ao-about { padding: 80px 0; background: var(--ao-white); }
.ao-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ao-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--ao-text); margin-bottom: 20px; line-height: 1.25; }
.ao-about__text { font-size: 1rem; color: var(--ao-gray); line-height: 1.75; margin-bottom: 14px; }
.ao-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.ao-stats, .ao-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ao-stat {
  background: var(--ao-light-bg); border-radius: var(--ao-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--ao-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.ao-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ao-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.ao-stat:hover::before { transform: scaleX(1); }
.ao-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--ao-accent); }
.ao-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: ao-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.ao-stat:nth-child(1) .ao-stat__number { animation-delay: 0.2s; }
.ao-stat:nth-child(2) .ao-stat__number { animation-delay: 0.4s; }
.ao-stat:nth-child(3) .ao-stat__number { animation-delay: 0.6s; }
.ao-stat:nth-child(4) .ao-stat__number { animation-delay: 0.8s; }
.ao-stat__label { display: block; font-size: 0.82rem; color: var(--ao-gray); font-weight: 500; line-height: 1.3; }
.ao-stat--dark { background: var(--ao-white); border-color: var(--ao-border); }
.ao-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.ao-whoweare { padding: 80px 0; background: var(--ao-light-bg); }
.ao-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ao-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--ao-text); margin-bottom: 20px; line-height: 1.25; }
.ao-whoweare__text { font-size: 1rem; color: var(--ao-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.ao-services { padding: 80px 0; background: var(--ao-white); }
.ao-services__header { text-align: center; margin-bottom: 48px; }
.ao-services__title { font-size: 2.2rem; font-weight: 700; color: var(--ao-text); }
.ao-services__subtitle { font-size: 1rem; color: var(--ao-gray); margin-top: 12px; line-height: 1.6; }
.ao-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ao-service-card {
  background: var(--ao-light-bg); border-radius: var(--ao-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.ao-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--ao-accent); background: var(--ao-white); }
.ao-service-card--wide { grid-column: 1 / -1; }
.ao-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--ao-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.ao-service-card:hover .ao-service-card__badge { animation: ao-shimmer 1.5s ease infinite; transform: scale(1.1); }
.ao-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--ao-text); margin-bottom: 10px; }
.ao-service-card__text { font-size: 0.9rem; color: var(--ao-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.ao-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.ao-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.ao-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--ao-text); margin-bottom: 14px; position: relative; z-index: 1; }
.ao-delivery__text { font-size: 1rem; color: var(--ao-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.ao-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.ao-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.ao-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--ao-white); border: 2px solid #e0e7ff; color: var(--ao-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.ao-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.ao-step:hover .ao-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.ao-delivery__steps > :nth-child(1) .ao-step__circle  { animation: ao-stepGlow 7s ease infinite 0s; }
.ao-delivery__steps > :nth-child(3) .ao-step__circle  { animation: ao-stepGlow 7s ease infinite 1s; }
.ao-delivery__steps > :nth-child(5) .ao-step__circle  { animation: ao-stepGlow 7s ease infinite 2s; }
.ao-delivery__steps > :nth-child(7) .ao-step__circle  { animation: ao-stepGlow 7s ease infinite 3s; }
.ao-delivery__steps > :nth-child(9) .ao-step__circle  { animation: ao-stepGlow 7s ease infinite 4s; }
.ao-delivery__steps > :nth-child(11) .ao-step__circle { animation: ao-stepGlow 7s ease infinite 5s; }
.ao-delivery__steps > :nth-child(13) .ao-step__circle { animation: ao-stepGlow 7s ease infinite 6s; }
.ao-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: ao-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.ao-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.ao-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.ao-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--ao-text); margin-bottom: 18px; line-height: 1.35; }
.ao-reliable__text { font-size: 1rem; color: var(--ao-gray); line-height: 1.7; margin-bottom: 40px; }
.ao-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ao-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--ao-white);
  border: 1px solid var(--ao-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.ao-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--ao-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.ao-pillar__dot { width: 8px; height: 8px; background: var(--ao-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.ao-pillar:hover .ao-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.ao-pillar__label { font-size: 0.85rem; color: var(--ao-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.ao-industries { padding: 80px 0; background: var(--ao-light-bg); text-align: center; }
.ao-industries__title { font-size: 2rem; font-weight: 700; color: var(--ao-text); margin-bottom: 48px; }
.ao-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ao-industry {
  background: var(--ao-white); border-radius: var(--ao-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--ao-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.ao-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--ao-accent); }
.ao-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.ao-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--ao-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.ao-tech { padding: 80px 0; background: var(--ao-white); }
.ao-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ao-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--ao-text); margin-bottom: 20px; line-height: 1.25; }
.ao-tech__text { font-size: 1rem; color: var(--ao-gray); line-height: 1.75; margin-bottom: 14px; }
.ao-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ao-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ao-tag {
  display: inline-block; background: var(--ao-light-bg); color: var(--ao-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--ao-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ao-tag:hover { background: var(--ao-accent); color: var(--ao-white); border-color: var(--ao-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.ao-faq { padding: 80px 0; background: var(--ao-light-bg); }
.ao-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.ao-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--ao-text); margin-bottom: 12px; }
.ao-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.ao-faq__list { text-align: left; }
.ao-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.ao-faq__item summary { list-style: none; }
.ao-faq__item summary::-webkit-details-marker { display: none; }
.ao-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.ao-faq__question:hover { color: var(--ao-accent); }
.ao-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.ao-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.ao-faq__item[open] .ao-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.ao-faq__answer { padding: 0 0 18px; overflow: hidden; }
.ao-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.ao-cta { padding: 80px 0; background: var(--ao-dark); }
.ao-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.ao-cta__heading { font-size: 2rem; font-weight: 700; color: var(--ao-white); margin-bottom: 16px; line-height: 1.3; }
.ao-cta__text { font-size: 1rem; color: var(--ao-gray-light); line-height: 1.7; margin-bottom: 32px; }
.ao-cta__button {
  display: inline-block; background: var(--ao-accent); color: var(--ao-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: ao-pulse 2.5s ease infinite;
}
.ao-cta__button:hover { background: var(--ao-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.ao-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ao-hero__title { font-size: 2.2rem; }
  .ao-about__heading, .ao-whoweare__heading, .ao-tech__heading { font-size: 1.8rem; }
  .ao-services__title { font-size: 1.8rem; }
  .ao-delivery__heading { font-size: 1.8rem; }
  .ao-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .ao-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .ao-step__arrow { font-size: 1rem; margin: 0 1px; }
  .ao-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .ao-hero { padding: 100px 16px 80px; }
  .ao-hero__title { font-size: 1.7rem; }
  .ao-hero__subtitle { font-size: 1rem; }
  .ao-about__grid, .ao-whoweare__grid, .ao-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .ao-about__heading, .ao-whoweare__heading, .ao-tech__heading { font-size: 1.6rem; }
  .ao-stats, .ao-whoweare__stats, .ao-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .ao-about__content, .ao-whoweare__content { order: 1; }
  .ao-services__grid { grid-template-columns: 1fr; }
  .ao-services__title { font-size: 1.5rem; }
  .ao-service-card--wide { grid-column: span 1; }
  .ao-delivery__heading { font-size: 1.5rem; }
  .ao-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .ao-step__arrow { display: none; }
  .ao-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .ao-reliable__heading { font-size: 1.5rem; }
  .ao-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .ao-industries__title { font-size: 1.5rem; }
  .ao-industries__grid { grid-template-columns: 1fr 1fr; }
  .ao-faq__heading { font-size: 1.3rem; }
  .ao-cta__heading { font-size: 1.5rem; }
  .ao-animate, .ao-animate--left, .ao-animate--right, .ao-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .ao-hero { padding: 90px 14px 60px; }
  .ao-hero__title { font-size: 1.4rem; }
  .ao-hero__subtitle { font-size: 0.9rem; }
  .ao-about, .ao-whoweare, .ao-services, .ao-delivery, .ao-reliable,
  .ao-industries, .ao-faq, .ao-cta, .ao-tech { padding: 50px 0; }
  .ao-about__heading, .ao-whoweare__heading, .ao-tech__heading { font-size: 1.4rem; }
  .ao-about__text, .ao-whoweare__text, .ao-tech__text { font-size: 0.9rem; }
  .ao-stats, .ao-whoweare__stats, .ao-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ao-stat { padding: 20px 14px; }
  .ao-stat__number { font-size: 1.8rem; }
  .ao-stat__label { font-size: 0.75rem; }
  .ao-services__title { font-size: 1.3rem; }
  .ao-service-card { padding: 20px 16px; }
  .ao-delivery__heading { font-size: 1.3rem; }
  .ao-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .ao-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .ao-reliable__heading { font-size: 1.3rem; }
  .ao-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .ao-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ao-industry { padding: 20px 14px; }
  .ao-cta__heading { font-size: 1.3rem; }
  .ao-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}


/* ============================================================
   CONVERSION RATE OPTIMIZATION PAGE — conversion-rate-optimization-services.css
   Prefix: co-
   ============================================================ */

:root {
  --co-accent: #e8a025;
  --co-accent-hover: #d4911e;
  --co-dark: #0b1120;
  --co-dark-2: #101828;
  --co-dark-3: #1a2332;
  --co-white: #ffffff;
  --co-gray: #000000;
  --co-gray-light: #e0e7ff;
  --co-light-bg: #f8f9fb;
  --co-light-bg-2: #f1f3f7;
  --co-text: #444444;
  --co-text-light: #d1d5db;
  --co-border: #e5e7eb;
  --co-radius: 12px;
  --co-radius-lg: 20px;
  --co-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --co-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --co-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes co-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes co-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes co-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes co-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes co-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes co-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes co-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes co-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--co-white); }
}
@keyframes co-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.co-animate { opacity: 0; transform: translateY(40px); animation: co-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.co-animate--left { opacity: 0; transform: translateX(-40px); animation: co-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.co-animate--right { opacity: 0; transform: translateX(40px); animation: co-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.co-animate--scale { opacity: 0; transform: scale(0.85); animation: co-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.co-stagger > *:nth-child(1) { animation-delay: 0s; }
.co-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.co-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.co-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.co-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.co-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.co-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .co-animate, .co-animate--left, .co-animate--right, .co-animate--scale { opacity: 1; transform: none; animation: none; }
}

.co-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.co-text-accent { color: var(--co-accent); }

.co-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.co-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--co-text); line-height: 1.5; }
.co-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--co-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.co-hero {
  background: var(--co-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.co-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.co-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.co-hero__title { font-size: 3rem; font-weight: 700; color: var(--co-white); margin-bottom: 20px; line-height: 1.2; animation: co-fadeUp 0.7s ease 0.25s both; }
.co-hero__title-accent { color: var(--co-accent); font-style: italic; display: inline-block; }
.co-hero__subtitle { font-size: 1.3rem; color: var(--co-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: co-fadeUp 0.7s ease 0.45s both; }
.co-hero__desc { font-size: 0.95rem; color: var(--co-gray-light); font-style: italic; animation: co-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.co-about { padding: 80px 0; background: var(--co-white); }
.co-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.co-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--co-text); margin-bottom: 20px; line-height: 1.25; }
.co-about__text { font-size: 1rem; color: var(--co-gray); line-height: 1.75; margin-bottom: 14px; }
.co-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.co-stats, .co-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.co-stat {
  background: var(--co-light-bg); border-radius: var(--co-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--co-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.co-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--co-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.co-stat:hover::before { transform: scaleX(1); }
.co-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--co-accent); }
.co-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: co-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.co-stat:nth-child(1) .co-stat__number { animation-delay: 0.2s; }
.co-stat:nth-child(2) .co-stat__number { animation-delay: 0.4s; }
.co-stat:nth-child(3) .co-stat__number { animation-delay: 0.6s; }
.co-stat:nth-child(4) .co-stat__number { animation-delay: 0.8s; }
.co-stat__label { display: block; font-size: 0.82rem; color: var(--co-gray); font-weight: 500; line-height: 1.3; }
.co-stat--dark { background: var(--co-white); border-color: var(--co-border); }
.co-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.co-whoweare { padding: 80px 0; background: var(--co-light-bg); }
.co-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.co-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--co-text); margin-bottom: 20px; line-height: 1.25; }
.co-whoweare__text { font-size: 1rem; color: var(--co-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.co-services { padding: 80px 0; background: var(--co-white); }
.co-services__header { text-align: center; margin-bottom: 48px; }
.co-services__title { font-size: 2.2rem; font-weight: 700; color: var(--co-text); }
.co-services__subtitle { font-size: 1rem; color: var(--co-gray); margin-top: 12px; line-height: 1.6; }
.co-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.co-service-card {
  background: var(--co-light-bg); border-radius: var(--co-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.co-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--co-accent); background: var(--co-white); }
.co-service-card--wide { grid-column: 1 / -1; }
.co-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--co-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.co-service-card:hover .co-service-card__badge { animation: co-shimmer 1.5s ease infinite; transform: scale(1.1); }
.co-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--co-text); margin-bottom: 10px; }
.co-service-card__text { font-size: 0.9rem; color: var(--co-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.co-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.co-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.co-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--co-text); margin-bottom: 14px; position: relative; z-index: 1; }
.co-delivery__text { font-size: 1rem; color: var(--co-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.co-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.co-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.co-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--co-white); border: 2px solid #e0e7ff; color: var(--co-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.co-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.co-step:hover .co-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.co-delivery__steps > :nth-child(1) .co-step__circle  { animation: co-stepGlow 7s ease infinite 0s; }
.co-delivery__steps > :nth-child(3) .co-step__circle  { animation: co-stepGlow 7s ease infinite 1s; }
.co-delivery__steps > :nth-child(5) .co-step__circle  { animation: co-stepGlow 7s ease infinite 2s; }
.co-delivery__steps > :nth-child(7) .co-step__circle  { animation: co-stepGlow 7s ease infinite 3s; }
.co-delivery__steps > :nth-child(9) .co-step__circle  { animation: co-stepGlow 7s ease infinite 4s; }
.co-delivery__steps > :nth-child(11) .co-step__circle { animation: co-stepGlow 7s ease infinite 5s; }
.co-delivery__steps > :nth-child(13) .co-step__circle { animation: co-stepGlow 7s ease infinite 6s; }
.co-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: co-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.co-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.co-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.co-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--co-text); margin-bottom: 18px; line-height: 1.35; }
.co-reliable__text { font-size: 1rem; color: var(--co-gray); line-height: 1.7; margin-bottom: 40px; }
.co-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.co-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--co-white);
  border: 1px solid var(--co-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.co-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--co-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.co-pillar__dot { width: 8px; height: 8px; background: var(--co-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.co-pillar:hover .co-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.co-pillar__label { font-size: 0.85rem; color: var(--co-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.co-industries { padding: 80px 0; background: var(--co-light-bg); text-align: center; }
.co-industries__title { font-size: 2rem; font-weight: 700; color: var(--co-text); margin-bottom: 48px; }
.co-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.co-industry {
  background: var(--co-white); border-radius: var(--co-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--co-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.co-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--co-accent); }
.co-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.co-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--co-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.co-tech { padding: 80px 0; background: var(--co-white); }
.co-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.co-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--co-text); margin-bottom: 20px; line-height: 1.25; }
.co-tech__text { font-size: 1rem; color: var(--co-gray); line-height: 1.75; margin-bottom: 14px; }
.co-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.co-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.co-tag {
  display: inline-block; background: var(--co-light-bg); color: var(--co-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--co-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.co-tag:hover { background: var(--co-accent); color: var(--co-white); border-color: var(--co-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.co-faq { padding: 80px 0; background: var(--co-light-bg); }
.co-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.co-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--co-text); margin-bottom: 12px; }
.co-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.co-faq__list { text-align: left; }
.co-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.co-faq__item summary { list-style: none; }
.co-faq__item summary::-webkit-details-marker { display: none; }
.co-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.co-faq__question:hover { color: var(--co-accent); }
.co-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.co-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.co-faq__item[open] .co-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.co-faq__answer { padding: 0 0 18px; overflow: hidden; }
.co-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.co-cta { padding: 80px 0; background: var(--co-dark); }
.co-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.co-cta__heading { font-size: 2rem; font-weight: 700; color: var(--co-white); margin-bottom: 16px; line-height: 1.3; }
.co-cta__text { font-size: 1rem; color: var(--co-gray-light); line-height: 1.7; margin-bottom: 32px; }
.co-cta__button {
  display: inline-block; background: var(--co-accent); color: var(--co-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: co-pulse 2.5s ease infinite;
}
.co-cta__button:hover { background: var(--co-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.co-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .co-hero__title { font-size: 2.2rem; }
  .co-about__heading, .co-whoweare__heading, .co-tech__heading { font-size: 1.8rem; }
  .co-services__title { font-size: 1.8rem; }
  .co-delivery__heading { font-size: 1.8rem; }
  .co-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .co-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .co-step__arrow { font-size: 1rem; margin: 0 1px; }
  .co-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .co-hero { padding: 100px 16px 80px; }
  .co-hero__title { font-size: 1.7rem; }
  .co-hero__subtitle { font-size: 1rem; }
  .co-about__grid, .co-whoweare__grid, .co-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .co-about__heading, .co-whoweare__heading, .co-tech__heading { font-size: 1.6rem; }
  .co-stats, .co-whoweare__stats, .co-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .co-about__content, .co-whoweare__content { order: 1; }
  .co-services__grid { grid-template-columns: 1fr; }
  .co-services__title { font-size: 1.5rem; }
  .co-service-card--wide { grid-column: span 1; }
  .co-delivery__heading { font-size: 1.5rem; }
  .co-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .co-step__arrow { display: none; }
  .co-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .co-reliable__heading { font-size: 1.5rem; }
  .co-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .co-industries__title { font-size: 1.5rem; }
  .co-industries__grid { grid-template-columns: 1fr 1fr; }
  .co-faq__heading { font-size: 1.3rem; }
  .co-cta__heading { font-size: 1.5rem; }
  .co-animate, .co-animate--left, .co-animate--right, .co-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .co-hero { padding: 90px 14px 60px; }
  .co-hero__title { font-size: 1.4rem; }
  .co-hero__subtitle { font-size: 0.9rem; }
  .co-about, .co-whoweare, .co-services, .co-delivery, .co-reliable,
  .co-industries, .co-faq, .co-cta, .co-tech { padding: 50px 0; }
  .co-about__heading, .co-whoweare__heading, .co-tech__heading { font-size: 1.4rem; }
  .co-about__text, .co-whoweare__text, .co-tech__text { font-size: 0.9rem; }
  .co-stats, .co-whoweare__stats, .co-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .co-stat { padding: 20px 14px; }
  .co-stat__number { font-size: 1.8rem; }
  .co-stat__label { font-size: 0.75rem; }
  .co-services__title { font-size: 1.3rem; }
  .co-service-card { padding: 20px 16px; }
  .co-delivery__heading { font-size: 1.3rem; }
  .co-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .co-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .co-reliable__heading { font-size: 1.3rem; }
  .co-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .co-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .co-industry { padding: 20px 14px; }
  .co-cta__heading { font-size: 1.3rem; }
  .co-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}



/* ============================================================
   CONTENT MARKETING SERVICES PAGE — content-marketing-services.css
   Prefix: cm-
   ============================================================ */

:root {
  --cm-accent: #e8a025;
  --cm-accent-hover: #d4911e;
  --cm-dark: #0b1120;
  --cm-dark-2: #101828;
  --cm-dark-3: #1a2332;
  --cm-white: #ffffff;
  --cm-gray: #000000;
  --cm-gray-light: #e0e7ff;
  --cm-light-bg: #f8f9fb;
  --cm-light-bg-2: #f1f3f7;
  --cm-text: #444444;
  --cm-text-light: #d1d5db;
  --cm-border: #e5e7eb;
  --cm-radius: 12px;
  --cm-radius-lg: 20px;
  --cm-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --cm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --cm-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes cm-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cm-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cm-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes cm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes cm-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes cm-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes cm-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--cm-white); }
}
@keyframes cm-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.cm-animate { opacity: 0; transform: translateY(40px); animation: cm-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.cm-animate--left { opacity: 0; transform: translateX(-40px); animation: cm-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.cm-animate--right { opacity: 0; transform: translateX(40px); animation: cm-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.cm-animate--scale { opacity: 0; transform: scale(0.85); animation: cm-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.cm-stagger > *:nth-child(1) { animation-delay: 0s; }
.cm-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.cm-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.cm-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.cm-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.cm-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.cm-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .cm-animate, .cm-animate--left, .cm-animate--right, .cm-animate--scale { opacity: 1; transform: none; animation: none; }
}

.cm-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cm-text-accent { color: var(--cm-accent); }

.cm-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cm-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--cm-text); line-height: 1.5; }
.cm-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--cm-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.cm-hero {
  background: var(--cm-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.cm-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.cm-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.cm-hero__title { font-size: 3rem; font-weight: 700; color: var(--cm-white); margin-bottom: 20px; line-height: 1.2; animation: cm-fadeUp 0.7s ease 0.25s both; }
.cm-hero__title-accent { color: var(--cm-accent); font-style: italic; display: inline-block; }
.cm-hero__subtitle { font-size: 1.3rem; color: var(--cm-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: cm-fadeUp 0.7s ease 0.45s both; }
.cm-hero__desc { font-size: 0.95rem; color: var(--cm-gray-light); font-style: italic; animation: cm-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.cm-about { padding: 80px 0; background: var(--cm-white); }
.cm-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cm-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 20px; line-height: 1.25; }
.cm-about__text { font-size: 1rem; color: var(--cm-gray); line-height: 1.75; margin-bottom: 14px; }
.cm-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.cm-stats, .cm-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cm-stat {
  background: var(--cm-light-bg); border-radius: var(--cm-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--cm-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.cm-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--cm-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.cm-stat:hover::before { transform: scaleX(1); }
.cm-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--cm-accent); }
.cm-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: cm-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.cm-stat:nth-child(1) .cm-stat__number { animation-delay: 0.2s; }
.cm-stat:nth-child(2) .cm-stat__number { animation-delay: 0.4s; }
.cm-stat:nth-child(3) .cm-stat__number { animation-delay: 0.6s; }
.cm-stat:nth-child(4) .cm-stat__number { animation-delay: 0.8s; }
.cm-stat__label { display: block; font-size: 0.82rem; color: var(--cm-gray); font-weight: 500; line-height: 1.3; }
.cm-stat--dark { background: var(--cm-white); border-color: var(--cm-border); }
.cm-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.cm-whoweare { padding: 80px 0; background: var(--cm-light-bg); }
.cm-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cm-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 20px; line-height: 1.25; }
.cm-whoweare__text { font-size: 1rem; color: var(--cm-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.cm-services { padding: 80px 0; background: var(--cm-white); }
.cm-services__header { text-align: center; margin-bottom: 48px; }
.cm-services__title { font-size: 2.2rem; font-weight: 700; color: var(--cm-text); }
.cm-services__subtitle { font-size: 1rem; color: var(--cm-gray); margin-top: 12px; line-height: 1.6; }
.cm-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cm-service-card {
  background: var(--cm-light-bg); border-radius: var(--cm-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.cm-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--cm-accent); background: var(--cm-white); }
.cm-service-card--wide { grid-column: 1 / -1; }
.cm-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--cm-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.cm-service-card:hover .cm-service-card__badge { animation: cm-shimmer 1.5s ease infinite; transform: scale(1.1); }
.cm-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--cm-text); margin-bottom: 10px; }
.cm-service-card__text { font-size: 0.9rem; color: var(--cm-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.cm-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.cm-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.cm-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 14px; position: relative; z-index: 1; }
.cm-delivery__text { font-size: 1rem; color: var(--cm-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.cm-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.cm-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.cm-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--cm-white); border: 2px solid #e0e7ff; color: var(--cm-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.cm-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.cm-step:hover .cm-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.cm-delivery__steps > :nth-child(1) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 0s; }
.cm-delivery__steps > :nth-child(3) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 1s; }
.cm-delivery__steps > :nth-child(5) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 2s; }
.cm-delivery__steps > :nth-child(7) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 3s; }
.cm-delivery__steps > :nth-child(9) .cm-step__circle  { animation: cm-stepGlow 7s ease infinite 4s; }
.cm-delivery__steps > :nth-child(11) .cm-step__circle { animation: cm-stepGlow 7s ease infinite 5s; }
.cm-delivery__steps > :nth-child(13) .cm-step__circle { animation: cm-stepGlow 7s ease infinite 6s; }
.cm-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: cm-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.cm-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.cm-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.cm-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 18px; line-height: 1.35; }
.cm-reliable__text { font-size: 1rem; color: var(--cm-gray); line-height: 1.7; margin-bottom: 40px; }
.cm-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cm-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--cm-white);
  border: 1px solid var(--cm-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.cm-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--cm-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.cm-pillar__dot { width: 8px; height: 8px; background: var(--cm-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.cm-pillar:hover .cm-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.cm-pillar__label { font-size: 0.85rem; color: var(--cm-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.cm-industries { padding: 80px 0; background: var(--cm-light-bg); text-align: center; }
.cm-industries__title { font-size: 2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 48px; }
.cm-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cm-industry {
  background: var(--cm-white); border-radius: var(--cm-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--cm-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.cm-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--cm-accent); }
.cm-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.cm-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--cm-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.cm-tech { padding: 80px 0; background: var(--cm-white); }
.cm-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cm-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--cm-text); margin-bottom: 20px; line-height: 1.25; }
.cm-tech__text { font-size: 1rem; color: var(--cm-gray); line-height: 1.75; margin-bottom: 14px; }
.cm-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cm-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cm-tag {
  display: inline-block; background: var(--cm-light-bg); color: var(--cm-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--cm-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.cm-tag:hover { background: var(--cm-accent); color: var(--cm-white); border-color: var(--cm-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.cm-faq { padding: 80px 0; background: var(--cm-light-bg); }
.cm-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.cm-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--cm-text); margin-bottom: 12px; }
.cm-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.cm-faq__list { text-align: left; }
.cm-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.cm-faq__item summary { list-style: none; }
.cm-faq__item summary::-webkit-details-marker { display: none; }
.cm-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.cm-faq__question:hover { color: var(--cm-accent); }
.cm-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.cm-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.cm-faq__item[open] .cm-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.cm-faq__answer { padding: 0 0 18px; overflow: hidden; }
.cm-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.cm-cta { padding: 80px 0; background: var(--cm-dark); }
.cm-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.cm-cta__heading { font-size: 2rem; font-weight: 700; color: var(--cm-white); margin-bottom: 16px; line-height: 1.3; }
.cm-cta__text { font-size: 1rem; color: var(--cm-gray-light); line-height: 1.7; margin-bottom: 32px; }
.cm-cta__button {
  display: inline-block; background: var(--cm-accent); color: var(--cm-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: cm-pulse 2.5s ease infinite;
}
.cm-cta__button:hover { background: var(--cm-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.cm-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cm-hero__title { font-size: 2.2rem; }
  .cm-about__heading, .cm-whoweare__heading, .cm-tech__heading { font-size: 1.8rem; }
  .cm-services__title { font-size: 1.8rem; }
  .cm-delivery__heading { font-size: 1.8rem; }
  .cm-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .cm-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .cm-step__arrow { font-size: 1rem; margin: 0 1px; }
  .cm-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .cm-hero { padding: 100px 16px 80px; }
  .cm-hero__title { font-size: 1.7rem; }
  .cm-hero__subtitle { font-size: 1rem; }
  .cm-about__grid, .cm-whoweare__grid, .cm-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .cm-about__heading, .cm-whoweare__heading, .cm-tech__heading { font-size: 1.6rem; }
  .cm-stats, .cm-whoweare__stats, .cm-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .cm-about__content, .cm-whoweare__content { order: 1; }
  .cm-services__grid { grid-template-columns: 1fr; }
  .cm-services__title { font-size: 1.5rem; }
  .cm-service-card--wide { grid-column: span 1; }
  .cm-delivery__heading { font-size: 1.5rem; }
  .cm-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .cm-step__arrow { display: none; }
  .cm-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .cm-reliable__heading { font-size: 1.5rem; }
  .cm-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .cm-industries__title { font-size: 1.5rem; }
  .cm-industries__grid { grid-template-columns: 1fr 1fr; }
  .cm-faq__heading { font-size: 1.3rem; }
  .cm-cta__heading { font-size: 1.5rem; }
  .cm-animate, .cm-animate--left, .cm-animate--right, .cm-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .cm-hero { padding: 90px 14px 60px; }
  .cm-hero__title { font-size: 1.4rem; }
  .cm-hero__subtitle { font-size: 0.9rem; }
  .cm-about, .cm-whoweare, .cm-services, .cm-delivery, .cm-reliable,
  .cm-industries, .cm-faq, .cm-cta, .cm-tech { padding: 50px 0; }
  .cm-about__heading, .cm-whoweare__heading, .cm-tech__heading { font-size: 1.4rem; }
  .cm-about__text, .cm-whoweare__text, .cm-tech__text { font-size: 0.9rem; }
  .cm-stats, .cm-whoweare__stats, .cm-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cm-stat { padding: 20px 14px; }
  .cm-stat__number { font-size: 1.8rem; }
  .cm-stat__label { font-size: 0.75rem; }
  .cm-services__title { font-size: 1.3rem; }
  .cm-service-card { padding: 20px 16px; }
  .cm-delivery__heading { font-size: 1.3rem; }
  .cm-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .cm-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .cm-reliable__heading { font-size: 1.3rem; }
  .cm-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .cm-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cm-industry { padding: 20px 14px; }
  .cm-cta__heading { font-size: 1.3rem; }
  .cm-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}



/* ============================================================
   EMAIL MARKETING SERVICES PAGE — email-marketing-services.css
   Prefix: em-
   ============================================================ */

:root {
  --em-accent: #e8a025;
  --em-accent-hover: #d4911e;
  --em-dark: #0b1120;
  --em-dark-2: #101828;
  --em-dark-3: #1a2332;
  --em-white: #ffffff;
  --em-gray: #000000;
  --em-gray-light: #e0e7ff;
  --em-light-bg: #f8f9fb;
  --em-light-bg-2: #f1f3f7;
  --em-text: #444444;
  --em-text-light: #d1d5db;
  --em-border: #e5e7eb;
  --em-radius: 12px;
  --em-radius-lg: 20px;
  --em-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --em-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --em-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes em-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes em-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes em-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes em-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes em-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes em-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes em-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes em-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--em-white); }
}
@keyframes em-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.em-animate { opacity: 0; transform: translateY(40px); animation: em-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.em-animate--left { opacity: 0; transform: translateX(-40px); animation: em-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.em-animate--right { opacity: 0; transform: translateX(40px); animation: em-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.em-animate--scale { opacity: 0; transform: scale(0.85); animation: em-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.em-stagger > *:nth-child(1) { animation-delay: 0s; }
.em-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.em-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.em-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.em-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.em-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.em-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .em-animate, .em-animate--left, .em-animate--right, .em-animate--scale { opacity: 1; transform: none; animation: none; }
}

.em-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.em-text-accent { color: var(--em-accent); }

.em-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.em-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--em-text); line-height: 1.5; }
.em-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--em-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.em-hero {
  background: var(--em-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.em-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.em-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.em-hero__title { font-size: 3rem; font-weight: 700; color: var(--em-white); margin-bottom: 20px; line-height: 1.2; animation: em-fadeUp 0.7s ease 0.25s both; }
.em-hero__title-accent { color: var(--em-accent); font-style: italic; display: inline-block; }
.em-hero__subtitle { font-size: 1.3rem; color: var(--em-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: em-fadeUp 0.7s ease 0.45s both; }
.em-hero__desc { font-size: 0.95rem; color: var(--em-gray-light); font-style: italic; animation: em-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.em-about { padding: 80px 0; background: var(--em-white); }
.em-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.em-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--em-text); margin-bottom: 20px; line-height: 1.25; }
.em-about__text { font-size: 1rem; color: var(--em-gray); line-height: 1.75; margin-bottom: 14px; }
.em-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.em-stats, .em-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.em-stat {
  background: var(--em-light-bg); border-radius: var(--em-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--em-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.em-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--em-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.em-stat:hover::before { transform: scaleX(1); }
.em-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--em-accent); }
.em-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: em-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.em-stat:nth-child(1) .em-stat__number { animation-delay: 0.2s; }
.em-stat:nth-child(2) .em-stat__number { animation-delay: 0.4s; }
.em-stat:nth-child(3) .em-stat__number { animation-delay: 0.6s; }
.em-stat:nth-child(4) .em-stat__number { animation-delay: 0.8s; }
.em-stat__label { display: block; font-size: 0.82rem; color: var(--em-gray); font-weight: 500; line-height: 1.3; }
.em-stat--dark { background: var(--em-white); border-color: var(--em-border); }
.em-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.em-whoweare { padding: 80px 0; background: var(--em-light-bg); }
.em-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.em-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--em-text); margin-bottom: 20px; line-height: 1.25; }
.em-whoweare__text { font-size: 1rem; color: var(--em-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.em-services { padding: 80px 0; background: var(--em-white); }
.em-services__header { text-align: center; margin-bottom: 48px; }
.em-services__title { font-size: 2.2rem; font-weight: 700; color: var(--em-text); }
.em-services__subtitle { font-size: 1rem; color: var(--em-gray); margin-top: 12px; line-height: 1.6; }
.em-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.em-service-card {
  background: var(--em-light-bg); border-radius: var(--em-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.em-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--em-accent); background: var(--em-white); }
.em-service-card--wide { grid-column: 1 / -1; }
.em-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--em-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.em-service-card:hover .em-service-card__badge { animation: em-shimmer 1.5s ease infinite; transform: scale(1.1); }
.em-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--em-text); margin-bottom: 10px; }
.em-service-card__text { font-size: 0.9rem; color: var(--em-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.em-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.em-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.em-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--em-text); margin-bottom: 14px; position: relative; z-index: 1; }
.em-delivery__text { font-size: 1rem; color: var(--em-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.em-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.em-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.em-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--em-white); border: 2px solid #e0e7ff; color: var(--em-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.em-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.em-step:hover .em-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.em-delivery__steps > :nth-child(1) .em-step__circle  { animation: em-stepGlow 7s ease infinite 0s; }
.em-delivery__steps > :nth-child(3) .em-step__circle  { animation: em-stepGlow 7s ease infinite 1s; }
.em-delivery__steps > :nth-child(5) .em-step__circle  { animation: em-stepGlow 7s ease infinite 2s; }
.em-delivery__steps > :nth-child(7) .em-step__circle  { animation: em-stepGlow 7s ease infinite 3s; }
.em-delivery__steps > :nth-child(9) .em-step__circle  { animation: em-stepGlow 7s ease infinite 4s; }
.em-delivery__steps > :nth-child(11) .em-step__circle { animation: em-stepGlow 7s ease infinite 5s; }
.em-delivery__steps > :nth-child(13) .em-step__circle { animation: em-stepGlow 7s ease infinite 6s; }
.em-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: em-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.em-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.em-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.em-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--em-text); margin-bottom: 18px; line-height: 1.35; }
.em-reliable__text { font-size: 1rem; color: var(--em-gray); line-height: 1.7; margin-bottom: 40px; }
.em-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.em-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--em-white);
  border: 1px solid var(--em-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.em-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--em-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.em-pillar__dot { width: 8px; height: 8px; background: var(--em-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.em-pillar:hover .em-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.em-pillar__label { font-size: 0.85rem; color: var(--em-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.em-industries { padding: 80px 0; background: var(--em-light-bg); text-align: center; }
.em-industries__title { font-size: 2rem; font-weight: 700; color: var(--em-text); margin-bottom: 48px; }
.em-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.em-industry {
  background: var(--em-white); border-radius: var(--em-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--em-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.em-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--em-accent); }
.em-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.em-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--em-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.em-tech { padding: 80px 0; background: var(--em-white); }
.em-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.em-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--em-text); margin-bottom: 20px; line-height: 1.25; }
.em-tech__text { font-size: 1rem; color: var(--em-gray); line-height: 1.75; margin-bottom: 14px; }
.em-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.em-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.em-tag {
  display: inline-block; background: var(--em-light-bg); color: var(--em-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--em-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.em-tag:hover { background: var(--em-accent); color: var(--em-white); border-color: var(--em-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.em-faq { padding: 80px 0; background: var(--em-light-bg); }
.em-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.em-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--em-text); margin-bottom: 12px; }
.em-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.em-faq__list { text-align: left; }
.em-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.em-faq__item summary { list-style: none; }
.em-faq__item summary::-webkit-details-marker { display: none; }
.em-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.em-faq__question:hover { color: var(--em-accent); }
.em-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.em-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.em-faq__item[open] .em-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.em-faq__answer { padding: 0 0 18px; overflow: hidden; }
.em-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.em-cta { padding: 80px 0; background: var(--em-dark); }
.em-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.em-cta__heading { font-size: 2rem; font-weight: 700; color: var(--em-white); margin-bottom: 16px; line-height: 1.3; }
.em-cta__text { font-size: 1rem; color: var(--em-gray-light); line-height: 1.7; margin-bottom: 32px; }
.em-cta__button {
  display: inline-block; background: var(--em-accent); color: var(--em-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: em-pulse 2.5s ease infinite;
}
.em-cta__button:hover { background: var(--em-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.em-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .em-hero__title { font-size: 2.2rem; }
  .em-about__heading, .em-whoweare__heading, .em-tech__heading { font-size: 1.8rem; }
  .em-services__title { font-size: 1.8rem; }
  .em-delivery__heading { font-size: 1.8rem; }
  .em-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .em-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .em-step__arrow { font-size: 1rem; margin: 0 1px; }
  .em-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .em-hero { padding: 100px 16px 80px; }
  .em-hero__title { font-size: 1.7rem; }
  .em-hero__subtitle { font-size: 1rem; }
  .em-about__grid, .em-whoweare__grid, .em-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .em-about__heading, .em-whoweare__heading, .em-tech__heading { font-size: 1.6rem; }
  .em-stats, .em-whoweare__stats, .em-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .em-about__content, .em-whoweare__content { order: 1; }
  .em-services__grid { grid-template-columns: 1fr; }
  .em-services__title { font-size: 1.5rem; }
  .em-service-card--wide { grid-column: span 1; }
  .em-delivery__heading { font-size: 1.5rem; }
  .em-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .em-step__arrow { display: none; }
  .em-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .em-reliable__heading { font-size: 1.5rem; }
  .em-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .em-industries__title { font-size: 1.5rem; }
  .em-industries__grid { grid-template-columns: 1fr 1fr; }
  .em-faq__heading { font-size: 1.3rem; }
  .em-cta__heading { font-size: 1.5rem; }
  .em-animate, .em-animate--left, .em-animate--right, .em-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .em-hero { padding: 90px 14px 60px; }
  .em-hero__title { font-size: 1.4rem; }
  .em-hero__subtitle { font-size: 0.9rem; }
  .em-about, .em-whoweare, .em-services, .em-delivery, .em-reliable,
  .em-industries, .em-faq, .em-cta, .em-tech { padding: 50px 0; }
  .em-about__heading, .em-whoweare__heading, .em-tech__heading { font-size: 1.4rem; }
  .em-about__text, .em-whoweare__text, .em-tech__text { font-size: 0.9rem; }
  .em-stats, .em-whoweare__stats, .em-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .em-stat { padding: 20px 14px; }
  .em-stat__number { font-size: 1.8rem; }
  .em-stat__label { font-size: 0.75rem; }
  .em-services__title { font-size: 1.3rem; }
  .em-service-card { padding: 20px 16px; }
  .em-delivery__heading { font-size: 1.3rem; }
  .em-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .em-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .em-reliable__heading { font-size: 1.3rem; }
  .em-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .em-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .em-industry { padding: 20px 14px; }
  .em-cta__heading { font-size: 1.3rem; }
  .em-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}



/* ============================================================
   SOCIAL MEDIA MARKETING PAGE — social-media-marketing-services.css
   Prefix: sm-
   ============================================================ */

:root {
  --sm-accent: #e8a025;
  --sm-accent-hover: #d4911e;
  --sm-dark: #0b1120;
  --sm-dark-2: #101828;
  --sm-dark-3: #1a2332;
  --sm-white: #ffffff;
  --sm-gray: #000000;
  --sm-gray-light: #e0e7ff;
  --sm-light-bg: #f8f9fb;
  --sm-light-bg-2: #f1f3f7;
  --sm-text: #444444;
  --sm-text-light: #d1d5db;
  --sm-border: #e5e7eb;
  --sm-radius: 12px;
  --sm-radius-lg: 20px;
  --sm-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --sm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --sm-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes sm-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sm-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sm-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sm-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes sm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes sm-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes sm-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes sm-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--sm-white); }
}
@keyframes sm-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.sm-animate { opacity: 0; transform: translateY(40px); animation: sm-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.sm-animate--left { opacity: 0; transform: translateX(-40px); animation: sm-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.sm-animate--right { opacity: 0; transform: translateX(40px); animation: sm-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.sm-animate--scale { opacity: 0; transform: scale(0.85); animation: sm-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.sm-stagger > *:nth-child(1) { animation-delay: 0s; }
.sm-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.sm-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.sm-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.sm-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.sm-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.sm-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .sm-animate, .sm-animate--left, .sm-animate--right, .sm-animate--scale { opacity: 1; transform: none; animation: none; }
}

.sm-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sm-text-accent { color: var(--sm-accent); }

.sm-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sm-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--sm-text); line-height: 1.5; }
.sm-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--sm-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.sm-hero {
  background: var(--sm-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.sm-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.sm-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.sm-hero__title { font-size: 3rem; font-weight: 700; color: var(--sm-white); margin-bottom: 20px; line-height: 1.2; animation: sm-fadeUp 0.7s ease 0.25s both; }
.sm-hero__title-accent { color: var(--sm-accent); font-style: italic; display: inline-block; }
.sm-hero__subtitle { font-size: 1.3rem; color: var(--sm-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: sm-fadeUp 0.7s ease 0.45s both; }
.sm-hero__desc { font-size: 0.95rem; color: var(--sm-gray-light); font-style: italic; animation: sm-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.sm-about { padding: 80px 0; background: var(--sm-white); }
.sm-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sm-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--sm-text); margin-bottom: 20px; line-height: 1.25; }
.sm-about__text { font-size: 1rem; color: var(--sm-gray); line-height: 1.75; margin-bottom: 14px; }
.sm-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.sm-stats, .sm-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sm-stat {
  background: var(--sm-light-bg); border-radius: var(--sm-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--sm-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.sm-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--sm-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.sm-stat:hover::before { transform: scaleX(1); }
.sm-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--sm-accent); }
.sm-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: sm-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.sm-stat:nth-child(1) .sm-stat__number { animation-delay: 0.2s; }
.sm-stat:nth-child(2) .sm-stat__number { animation-delay: 0.4s; }
.sm-stat:nth-child(3) .sm-stat__number { animation-delay: 0.6s; }
.sm-stat:nth-child(4) .sm-stat__number { animation-delay: 0.8s; }
.sm-stat__label { display: block; font-size: 0.82rem; color: var(--sm-gray); font-weight: 500; line-height: 1.3; }
.sm-stat--dark { background: var(--sm-white); border-color: var(--sm-border); }
.sm-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.sm-whoweare { padding: 80px 0; background: var(--sm-light-bg); }
.sm-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sm-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--sm-text); margin-bottom: 20px; line-height: 1.25; }
.sm-whoweare__text { font-size: 1rem; color: var(--sm-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.sm-services { padding: 80px 0; background: var(--sm-white); }
.sm-services__header { text-align: center; margin-bottom: 48px; }
.sm-services__title { font-size: 2.2rem; font-weight: 700; color: var(--sm-text); }
.sm-services__subtitle { font-size: 1rem; color: var(--sm-gray); margin-top: 12px; line-height: 1.6; }
.sm-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sm-service-card {
  background: var(--sm-light-bg); border-radius: var(--sm-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.sm-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--sm-accent); background: var(--sm-white); }
.sm-service-card--wide { grid-column: 1 / -1; }
.sm-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--sm-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.sm-service-card:hover .sm-service-card__badge { animation: sm-shimmer 1.5s ease infinite; transform: scale(1.1); }
.sm-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--sm-text); margin-bottom: 10px; }
.sm-service-card__text { font-size: 0.9rem; color: var(--sm-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.sm-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.sm-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.sm-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--sm-text); margin-bottom: 14px; position: relative; z-index: 1; }
.sm-delivery__text { font-size: 1rem; color: var(--sm-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.sm-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.sm-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.sm-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--sm-white); border: 2px solid #e0e7ff; color: var(--sm-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.sm-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.sm-step:hover .sm-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.sm-delivery__steps > :nth-child(1) .sm-step__circle  { animation: sm-stepGlow 7s ease infinite 0s; }
.sm-delivery__steps > :nth-child(3) .sm-step__circle  { animation: sm-stepGlow 7s ease infinite 1s; }
.sm-delivery__steps > :nth-child(5) .sm-step__circle  { animation: sm-stepGlow 7s ease infinite 2s; }
.sm-delivery__steps > :nth-child(7) .sm-step__circle  { animation: sm-stepGlow 7s ease infinite 3s; }
.sm-delivery__steps > :nth-child(9) .sm-step__circle  { animation: sm-stepGlow 7s ease infinite 4s; }
.sm-delivery__steps > :nth-child(11) .sm-step__circle { animation: sm-stepGlow 7s ease infinite 5s; }
.sm-delivery__steps > :nth-child(13) .sm-step__circle { animation: sm-stepGlow 7s ease infinite 6s; }
.sm-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: sm-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.sm-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.sm-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.sm-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--sm-text); margin-bottom: 18px; line-height: 1.35; }
.sm-reliable__text { font-size: 1rem; color: var(--sm-gray); line-height: 1.7; margin-bottom: 40px; }
.sm-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sm-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--sm-white);
  border: 1px solid var(--sm-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.sm-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--sm-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.sm-pillar__dot { width: 8px; height: 8px; background: var(--sm-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.sm-pillar:hover .sm-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.sm-pillar__label { font-size: 0.85rem; color: var(--sm-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.sm-industries { padding: 80px 0; background: var(--sm-light-bg); text-align: center; }
.sm-industries__title { font-size: 2rem; font-weight: 700; color: var(--sm-text); margin-bottom: 48px; }
.sm-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sm-industry {
  background: var(--sm-white); border-radius: var(--sm-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--sm-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.sm-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--sm-accent); }
.sm-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.sm-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--sm-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.sm-tech { padding: 80px 0; background: var(--sm-white); }
.sm-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sm-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--sm-text); margin-bottom: 20px; line-height: 1.25; }
.sm-tech__text { font-size: 1rem; color: var(--sm-gray); line-height: 1.75; margin-bottom: 14px; }
.sm-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sm-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sm-tag {
  display: inline-block; background: var(--sm-light-bg); color: var(--sm-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--sm-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.sm-tag:hover { background: var(--sm-accent); color: var(--sm-white); border-color: var(--sm-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.sm-faq { padding: 80px 0; background: var(--sm-light-bg); }
.sm-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.sm-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--sm-text); margin-bottom: 12px; }
.sm-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.sm-faq__list { text-align: left; }
.sm-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.sm-faq__item summary { list-style: none; }
.sm-faq__item summary::-webkit-details-marker { display: none; }
.sm-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.sm-faq__question:hover { color: var(--sm-accent); }
.sm-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.sm-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.sm-faq__item[open] .sm-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.sm-faq__answer { padding: 0 0 18px; overflow: hidden; }
.sm-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.sm-cta { padding: 80px 0; background: var(--sm-dark); }
.sm-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.sm-cta__heading { font-size: 2rem; font-weight: 700; color: var(--sm-white); margin-bottom: 16px; line-height: 1.3; }
.sm-cta__text { font-size: 1rem; color: var(--sm-gray-light); line-height: 1.7; margin-bottom: 32px; }
.sm-cta__button {
  display: inline-block; background: var(--sm-accent); color: var(--sm-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: sm-pulse 2.5s ease infinite;
}
.sm-cta__button:hover { background: var(--sm-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.sm-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sm-hero__title { font-size: 2.2rem; }
  .sm-about__heading, .sm-whoweare__heading, .sm-tech__heading { font-size: 1.8rem; }
  .sm-services__title { font-size: 1.8rem; }
  .sm-delivery__heading { font-size: 1.8rem; }
  .sm-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .sm-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .sm-step__arrow { font-size: 1rem; margin: 0 1px; }
  .sm-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .sm-hero { padding: 100px 16px 80px; }
  .sm-hero__title { font-size: 1.7rem; }
  .sm-hero__subtitle { font-size: 1rem; }
  .sm-about__grid, .sm-whoweare__grid, .sm-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .sm-about__heading, .sm-whoweare__heading, .sm-tech__heading { font-size: 1.6rem; }
  .sm-stats, .sm-whoweare__stats, .sm-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .sm-about__content, .sm-whoweare__content { order: 1; }
  .sm-services__grid { grid-template-columns: 1fr; }
  .sm-services__title { font-size: 1.5rem; }
  .sm-service-card--wide { grid-column: span 1; }
  .sm-delivery__heading { font-size: 1.5rem; }
  .sm-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .sm-step__arrow { display: none; }
  .sm-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .sm-reliable__heading { font-size: 1.5rem; }
  .sm-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .sm-industries__title { font-size: 1.5rem; }
  .sm-industries__grid { grid-template-columns: 1fr 1fr; }
  .sm-faq__heading { font-size: 1.3rem; }
  .sm-cta__heading { font-size: 1.5rem; }
  .sm-animate, .sm-animate--left, .sm-animate--right, .sm-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .sm-hero { padding: 90px 14px 60px; }
  .sm-hero__title { font-size: 1.4rem; }
  .sm-hero__subtitle { font-size: 0.9rem; }
  .sm-about, .sm-whoweare, .sm-services, .sm-delivery, .sm-reliable,
  .sm-industries, .sm-faq, .sm-cta, .sm-tech { padding: 50px 0; }
  .sm-about__heading, .sm-whoweare__heading, .sm-tech__heading { font-size: 1.4rem; }
  .sm-about__text, .sm-whoweare__text, .sm-tech__text { font-size: 0.9rem; }
  .sm-stats, .sm-whoweare__stats, .sm-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sm-stat { padding: 20px 14px; }
  .sm-stat__number { font-size: 1.8rem; }
  .sm-stat__label { font-size: 0.75rem; }
  .sm-services__title { font-size: 1.3rem; }
  .sm-service-card { padding: 20px 16px; }
  .sm-delivery__heading { font-size: 1.3rem; }
  .sm-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .sm-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .sm-reliable__heading { font-size: 1.3rem; }
  .sm-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .sm-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sm-industry { padding: 20px 14px; }
  .sm-cta__heading { font-size: 1.3rem; }
  .sm-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}



/* ============================================================
   PERFORMANCE MARKETING PAGE — performance-marketing-services.css
   Prefix: pm-
   ============================================================ */

:root {
  --pm-accent: #e8a025;
  --pm-accent-hover: #d4911e;
  --pm-dark: #0b1120;
  --pm-dark-2: #101828;
  --pm-dark-3: #1a2332;
  --pm-white: #ffffff;
  --pm-gray: #000000;
  --pm-gray-light: #e0e7ff;
  --pm-light-bg: #f8f9fb;
  --pm-light-bg-2: #f1f3f7;
  --pm-text: #444444;
  --pm-text-light: #d1d5db;
  --pm-border: #e5e7eb;
  --pm-radius: 12px;
  --pm-radius-lg: 20px;
  --pm-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --pm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --pm-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes pm-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pm-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pm-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pm-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes pm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes pm-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes pm-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pm-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--pm-white); }
}
@keyframes pm-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.pm-animate { opacity: 0; transform: translateY(40px); animation: pm-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.pm-animate--left { opacity: 0; transform: translateX(-40px); animation: pm-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.pm-animate--right { opacity: 0; transform: translateX(40px); animation: pm-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.pm-animate--scale { opacity: 0; transform: scale(0.85); animation: pm-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.pm-stagger > *:nth-child(1) { animation-delay: 0s; }
.pm-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.pm-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.pm-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.pm-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.pm-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.pm-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .pm-animate, .pm-animate--left, .pm-animate--right, .pm-animate--scale { opacity: 1; transform: none; animation: none; }
}

.pm-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pm-text-accent { color: var(--pm-accent); }

.pm-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pm-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--pm-text); line-height: 1.5; }
.pm-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--pm-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.pm-hero {
  background: var(--pm-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.pm-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.pm-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.pm-hero__title { font-size: 3rem; font-weight: 700; color: var(--pm-white); margin-bottom: 20px; line-height: 1.2; animation: pm-fadeUp 0.7s ease 0.25s both; }
.pm-hero__title-accent { color: var(--pm-accent); font-style: italic; display: inline-block; }
.pm-hero__subtitle { font-size: 1.3rem; color: var(--pm-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: pm-fadeUp 0.7s ease 0.45s both; }
.pm-hero__desc { font-size: 0.95rem; color: var(--pm-gray-light); font-style: italic; animation: pm-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.pm-about { padding: 80px 0; background: var(--pm-white); }
.pm-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pm-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--pm-text); margin-bottom: 20px; line-height: 1.25; }
.pm-about__text { font-size: 1rem; color: var(--pm-gray); line-height: 1.75; margin-bottom: 14px; }
.pm-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.pm-stats, .pm-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pm-stat {
  background: var(--pm-light-bg); border-radius: var(--pm-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--pm-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.pm-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--pm-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.pm-stat:hover::before { transform: scaleX(1); }
.pm-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--pm-accent); }
.pm-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: pm-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.pm-stat:nth-child(1) .pm-stat__number { animation-delay: 0.2s; }
.pm-stat:nth-child(2) .pm-stat__number { animation-delay: 0.4s; }
.pm-stat:nth-child(3) .pm-stat__number { animation-delay: 0.6s; }
.pm-stat:nth-child(4) .pm-stat__number { animation-delay: 0.8s; }
.pm-stat__label { display: block; font-size: 0.82rem; color: var(--pm-gray); font-weight: 500; line-height: 1.3; }
.pm-stat--dark { background: var(--pm-white); border-color: var(--pm-border); }
.pm-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.pm-whoweare { padding: 80px 0; background: var(--pm-light-bg); }
.pm-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pm-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--pm-text); margin-bottom: 20px; line-height: 1.25; }
.pm-whoweare__text { font-size: 1rem; color: var(--pm-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.pm-services { padding: 80px 0; background: var(--pm-white); }
.pm-services__header { text-align: center; margin-bottom: 48px; }
.pm-services__title { font-size: 2.2rem; font-weight: 700; color: var(--pm-text); }
.pm-services__subtitle { font-size: 1rem; color: var(--pm-gray); margin-top: 12px; line-height: 1.6; }
.pm-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pm-service-card {
  background: var(--pm-light-bg); border-radius: var(--pm-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.pm-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--pm-accent); background: var(--pm-white); }
.pm-service-card--wide { grid-column: 1 / -1; }
.pm-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--pm-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.pm-service-card:hover .pm-service-card__badge { animation: pm-shimmer 1.5s ease infinite; transform: scale(1.1); }
.pm-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--pm-text); margin-bottom: 10px; }
.pm-service-card__text { font-size: 0.9rem; color: var(--pm-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.pm-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.pm-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.pm-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--pm-text); margin-bottom: 14px; position: relative; z-index: 1; }
.pm-delivery__text { font-size: 1rem; color: var(--pm-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.pm-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.pm-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.pm-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--pm-white); border: 2px solid #e0e7ff; color: var(--pm-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.pm-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.pm-step:hover .pm-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.pm-delivery__steps > :nth-child(1) .pm-step__circle  { animation: pm-stepGlow 7s ease infinite 0s; }
.pm-delivery__steps > :nth-child(3) .pm-step__circle  { animation: pm-stepGlow 7s ease infinite 1s; }
.pm-delivery__steps > :nth-child(5) .pm-step__circle  { animation: pm-stepGlow 7s ease infinite 2s; }
.pm-delivery__steps > :nth-child(7) .pm-step__circle  { animation: pm-stepGlow 7s ease infinite 3s; }
.pm-delivery__steps > :nth-child(9) .pm-step__circle  { animation: pm-stepGlow 7s ease infinite 4s; }
.pm-delivery__steps > :nth-child(11) .pm-step__circle { animation: pm-stepGlow 7s ease infinite 5s; }
.pm-delivery__steps > :nth-child(13) .pm-step__circle { animation: pm-stepGlow 7s ease infinite 6s; }
.pm-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: pm-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.pm-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.pm-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.pm-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--pm-text); margin-bottom: 18px; line-height: 1.35; }
.pm-reliable__text { font-size: 1rem; color: var(--pm-gray); line-height: 1.7; margin-bottom: 40px; }
.pm-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.pm-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--pm-white);
  border: 1px solid var(--pm-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.pm-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--pm-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.pm-pillar__dot { width: 8px; height: 8px; background: var(--pm-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.pm-pillar:hover .pm-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.pm-pillar__label { font-size: 0.85rem; color: var(--pm-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.pm-industries { padding: 80px 0; background: var(--pm-light-bg); text-align: center; }
.pm-industries__title { font-size: 2rem; font-weight: 700; color: var(--pm-text); margin-bottom: 48px; }
.pm-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pm-industry {
  background: var(--pm-white); border-radius: var(--pm-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--pm-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.pm-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--pm-accent); }
.pm-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.pm-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--pm-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.pm-tech { padding: 80px 0; background: var(--pm-white); }
.pm-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pm-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--pm-text); margin-bottom: 20px; line-height: 1.25; }
.pm-tech__text { font-size: 1rem; color: var(--pm-gray); line-height: 1.75; margin-bottom: 14px; }
.pm-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pm-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pm-tag {
  display: inline-block; background: var(--pm-light-bg); color: var(--pm-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--pm-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.pm-tag:hover { background: var(--pm-accent); color: var(--pm-white); border-color: var(--pm-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.pm-faq { padding: 80px 0; background: var(--pm-light-bg); }
.pm-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.pm-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--pm-text); margin-bottom: 12px; }
.pm-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.pm-faq__list { text-align: left; }
.pm-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.pm-faq__item summary { list-style: none; }
.pm-faq__item summary::-webkit-details-marker { display: none; }
.pm-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.pm-faq__question:hover { color: var(--pm-accent); }
.pm-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.pm-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.pm-faq__item[open] .pm-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.pm-faq__answer { padding: 0 0 18px; overflow: hidden; }
.pm-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.pm-cta { padding: 80px 0; background: var(--pm-dark); }
.pm-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.pm-cta__heading { font-size: 2rem; font-weight: 700; color: var(--pm-white); margin-bottom: 16px; line-height: 1.3; }
.pm-cta__text { font-size: 1rem; color: var(--pm-gray-light); line-height: 1.7; margin-bottom: 32px; }
.pm-cta__button {
  display: inline-block; background: var(--pm-accent); color: var(--pm-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: pm-pulse 2.5s ease infinite;
}
.pm-cta__button:hover { background: var(--pm-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.pm-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .pm-hero__title { font-size: 2.2rem; }
  .pm-about__heading, .pm-whoweare__heading, .pm-tech__heading { font-size: 1.8rem; }
  .pm-services__title { font-size: 1.8rem; }
  .pm-delivery__heading { font-size: 1.8rem; }
  .pm-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .pm-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .pm-step__arrow { font-size: 1rem; margin: 0 1px; }
  .pm-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .pm-hero { padding: 100px 16px 80px; }
  .pm-hero__title { font-size: 1.7rem; }
  .pm-hero__subtitle { font-size: 1rem; }
  .pm-about__grid, .pm-whoweare__grid, .pm-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .pm-about__heading, .pm-whoweare__heading, .pm-tech__heading { font-size: 1.6rem; }
  .pm-stats, .pm-whoweare__stats, .pm-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .pm-about__content, .pm-whoweare__content { order: 1; }
  .pm-services__grid { grid-template-columns: 1fr; }
  .pm-services__title { font-size: 1.5rem; }
  .pm-service-card--wide { grid-column: span 1; }
  .pm-delivery__heading { font-size: 1.5rem; }
  .pm-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .pm-step__arrow { display: none; }
  .pm-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .pm-reliable__heading { font-size: 1.5rem; }
  .pm-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .pm-industries__title { font-size: 1.5rem; }
  .pm-industries__grid { grid-template-columns: 1fr 1fr; }
  .pm-faq__heading { font-size: 1.3rem; }
  .pm-cta__heading { font-size: 1.5rem; }
  .pm-animate, .pm-animate--left, .pm-animate--right, .pm-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .pm-hero { padding: 90px 14px 60px; }
  .pm-hero__title { font-size: 1.4rem; }
  .pm-hero__subtitle { font-size: 0.9rem; }
  .pm-about, .pm-whoweare, .pm-services, .pm-delivery, .pm-reliable,
  .pm-industries, .pm-faq, .pm-cta, .pm-tech { padding: 50px 0; }
  .pm-about__heading, .pm-whoweare__heading, .pm-tech__heading { font-size: 1.4rem; }
  .pm-about__text, .pm-whoweare__text, .pm-tech__text { font-size: 0.9rem; }
  .pm-stats, .pm-whoweare__stats, .pm-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pm-stat { padding: 20px 14px; }
  .pm-stat__number { font-size: 1.8rem; }
  .pm-stat__label { font-size: 0.75rem; }
  .pm-services__title { font-size: 1.3rem; }
  .pm-service-card { padding: 20px 16px; }
  .pm-delivery__heading { font-size: 1.3rem; }
  .pm-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .pm-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .pm-reliable__heading { font-size: 1.3rem; }
  .pm-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .pm-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pm-industry { padding: 20px 14px; }
  .pm-cta__heading { font-size: 1.3rem; }
  .pm-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}





/* ============================================================
   AWS CLOUD SERVICES PAGE — aws-cloud-services.css
   Prefix: aw-
   ============================================================ */

:root {
  --aw-accent: #e8a025;
  --aw-accent-hover: #d4911e;
  --aw-dark: #0b1120;
  --aw-dark-2: #101828;
  --aw-dark-3: #1a2332;
  --aw-white: #ffffff;
  --aw-gray: #000000;
  --aw-gray-light: #e0e7ff;
  --aw-light-bg: #f8f9fb;
  --aw-light-bg-2: #f1f3f7;
  --aw-text: #444444;
  --aw-text-light: #d1d5db;
  --aw-border: #e5e7eb;
  --aw-radius: 12px;
  --aw-radius-lg: 20px;
  --aw-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --aw-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --aw-transition: 0.3s ease;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes aw-fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aw-fadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes aw-fadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes aw-scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes aw-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,37,0.4); } 50% { box-shadow: 0 0 0 12px rgba(232,160,37,0); } }
@keyframes aw-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes aw-statPop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { opacity: 1; transform: scale(1.15) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes aw-stepGlow {
  0%, 10% { border-color: var(--color-signature-blue); box-shadow: 0 8px 30px rgba(37,99,235,0.25), 0 0 0 4px rgba(37,99,235,0.1); transform: translateY(-4px) scale(1.03); background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%); }
  22%, 100% { border-color: #e0e7ff; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transform: translateY(0) scale(1); background: var(--aw-white); }
}
@keyframes aw-arrowPulse { 0%, 100% { opacity: 0.4; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(3px); } }

.aw-animate { opacity: 0; transform: translateY(40px); animation: aw-fadeUp 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.aw-animate--left { opacity: 0; transform: translateX(-40px); animation: aw-fadeLeft 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.aw-animate--right { opacity: 0; transform: translateX(40px); animation: aw-fadeRight 0.8s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 30%; }
.aw-animate--scale { opacity: 0; transform: scale(0.85); animation: aw-scaleIn 0.7s ease forwards; animation-timeline: view(); animation-range: entry 0% entry 25%; }

.aw-stagger > *:nth-child(1) { animation-delay: 0s; }
.aw-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.aw-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.aw-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.aw-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.aw-stagger > *:nth-child(6) { animation-delay: 0.40s; }
.aw-stagger > *:nth-child(7) { animation-delay: 0.48s; }

@supports not (animation-timeline: view()) {
  .aw-animate, .aw-animate--left, .aw-animate--right, .aw-animate--scale { opacity: 1; transform: none; animation: none; }
}

.aw-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.aw-text-accent { color: var(--aw-accent); }

.aw-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.aw-checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--aw-text); line-height: 1.5; }
.aw-checklist__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--aw-accent); }

/* ============================================================
   1. HERO
   ============================================================ */
.aw-hero {
  background: var(--aw-dark); text-align: center;
  padding: 140px 20px 120px; position: relative; overflow: hidden;
}
.aw-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.aw-hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.aw-hero__title { font-size: 3rem; font-weight: 700; color: var(--aw-white); margin-bottom: 20px; line-height: 1.2; animation: aw-fadeUp 0.7s ease 0.25s both; }
.aw-hero__title-accent { color: var(--aw-accent); font-style: italic; display: inline-block; }
.aw-hero__subtitle { font-size: 1.3rem; color: var(--aw-white); margin-bottom: 14px; font-weight: 500; line-height: 1.5; animation: aw-fadeUp 0.7s ease 0.45s both; }
.aw-hero__desc { font-size: 0.95rem; color: var(--aw-gray-light); font-style: italic; animation: aw-fadeUp 0.7s ease 0.6s both; }

/* ============================================================
   2. ABOUT
   ============================================================ */
.aw-about { padding: 80px 0; background: var(--aw-white); }
.aw-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.aw-about__heading { font-size: 2.2rem; font-weight: 700; color: var(--aw-text); margin-bottom: 20px; line-height: 1.25; }
.aw-about__text { font-size: 1rem; color: var(--aw-gray); line-height: 1.75; margin-bottom: 14px; }
.aw-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.aw-stats, .aw-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.aw-stat {
  background: var(--aw-light-bg); border-radius: var(--aw-radius);
  padding: 28px 20px; text-align: center; border: 1px solid var(--aw-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative; overflow: hidden;
}
.aw-stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--aw-accent), var(--color-signature-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.aw-stat:hover::before { transform: scaleX(1); }
.aw-stat:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--aw-accent); }
.aw-stat__number {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--color-signature-blue);
  line-height: 1; margin-bottom: 8px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(0) translateY(10px);
  animation: aw-statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; animation-delay: 0.3s;
}
.aw-stat:nth-child(1) .aw-stat__number { animation-delay: 0.2s; }
.aw-stat:nth-child(2) .aw-stat__number { animation-delay: 0.4s; }
.aw-stat:nth-child(3) .aw-stat__number { animation-delay: 0.6s; }
.aw-stat:nth-child(4) .aw-stat__number { animation-delay: 0.8s; }
.aw-stat__label { display: block; font-size: 0.82rem; color: var(--aw-gray); font-weight: 500; line-height: 1.3; }
.aw-stat--dark { background: var(--aw-white); border-color: var(--aw-border); }
.aw-stat__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.8rem; }

/* ============================================================
   3. EXPERTISE
   ============================================================ */
.aw-whoweare { padding: 80px 0; background: var(--aw-light-bg); }
.aw-whoweare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.aw-whoweare__heading { font-size: 2.2rem; font-weight: 700; color: var(--aw-text); margin-bottom: 20px; line-height: 1.25; }
.aw-whoweare__text { font-size: 1rem; color: var(--aw-gray); line-height: 1.75; margin-bottom: 14px; }

/* ============================================================
   4. SERVICES
   ============================================================ */
.aw-services { padding: 80px 0; background: var(--aw-white); }
.aw-services__header { text-align: center; margin-bottom: 48px; }
.aw-services__title { font-size: 2.2rem; font-weight: 700; color: var(--aw-text); }
.aw-services__subtitle { font-size: 1rem; color: var(--aw-gray); margin-top: 12px; line-height: 1.6; }
.aw-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.aw-service-card {
  background: var(--aw-light-bg); border-radius: var(--aw-radius); padding: 28px;
  border: 1px solid transparent;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.aw-service-card:hover { box-shadow: 0 12px 36px rgba(232,160,37,0.12); transform: translateY(-5px); border-color: var(--aw-accent); background: var(--aw-white); }
.aw-service-card--wide { grid-column: 1 / -1; }
.aw-service-card__badge {
  display: inline-block; background: linear-gradient(110deg, var(--color-signature-blue) 30%, #60a5fa 50%, var(--color-signature-blue) 70%);
  background-size: 200% 100%; color: var(--aw-white); font-size: 0.75rem; font-weight: 700;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 8px; margin-bottom: 16px; transition: transform 0.3s ease;
}
.aw-service-card:hover .aw-service-card__badge { animation: aw-shimmer 1.5s ease infinite; transform: scale(1.1); }
.aw-service-card__title { font-size: 1.1rem; font-weight: 600; color: var(--aw-text); margin-bottom: 10px; }
.aw-service-card__text { font-size: 0.9rem; color: var(--aw-gray); line-height: 1.65; margin-bottom: 0; }

/* ============================================================
   5. DELIVERY
   ============================================================ */
.aw-delivery {
  padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
  text-align: center; position: relative; overflow: hidden;
}
.aw-delivery::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--color-signature-blue) 15%, var(--color-signature-blue) 85%, transparent 100%);
  opacity: 0.15; pointer-events: none;
}
.aw-delivery__heading { font-size: 2rem; font-weight: 700; color: var(--aw-text); margin-bottom: 14px; position: relative; z-index: 1; }
.aw-delivery__text { font-size: 1rem; color: var(--aw-gray); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 1; }
.aw-delivery__steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: 6px; position: relative; z-index: 1; counter-reset: step-counter;
}
.aw-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.aw-step__circle {
  width: 95px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--aw-white); border: 2px solid #e0e7ff; color: var(--aw-text);
  font-weight: 700; font-size: 0.68rem; border-radius: 18px; letter-spacing: 0.3px; line-height: 1.3;
  padding: 8px; position: relative; box-shadow: 0 4px 20px rgba(37,99,235,0.08); transition: all 0.4s ease;
}
.aw-step__circle::before {
  content: counter(step-counter); counter-increment: step-counter;
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, #6366f1 100%); color: white;
  font-size: 0.7rem; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.aw-step:hover .aw-step__circle {
  transform: translateY(-6px); border-color: var(--color-signature-blue);
  box-shadow: 0 8px 30px rgba(37,99,235,0.18);
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.aw-delivery__steps > :nth-child(1) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 0s; }
.aw-delivery__steps > :nth-child(3) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 1s; }
.aw-delivery__steps > :nth-child(5) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 2s; }
.aw-delivery__steps > :nth-child(7) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 3s; }
.aw-delivery__steps > :nth-child(9) .aw-step__circle  { animation: aw-stepGlow 7s ease infinite 4s; }
.aw-delivery__steps > :nth-child(11) .aw-step__circle { animation: aw-stepGlow 7s ease infinite 5s; }
.aw-delivery__steps > :nth-child(13) .aw-step__circle { animation: aw-stepGlow 7s ease infinite 6s; }
.aw-step__arrow { color: var(--color-signature-blue); font-size: 1.2rem; margin: 0 2px; font-weight: 300; opacity: 0.5; display: flex; align-items: center; animation: aw-arrowPulse 2s ease infinite; }

/* ============================================================
   6. RELIABLE
   ============================================================ */
.aw-reliable { padding: 80px 0; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f8 100%); }
.aw-reliable__inner { text-align: center; max-width: 800px; margin: 0 auto; }
.aw-reliable__heading { font-size: 2rem; font-weight: 700; color: var(--aw-text); margin-bottom: 18px; line-height: 1.35; }
.aw-reliable__text { font-size: 1rem; color: var(--aw-gray); line-height: 1.7; margin-bottom: 40px; }
.aw-reliable__pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.aw-pillar {
  display: flex; align-items: center; gap: 8px; background: var(--aw-white);
  border: 1px solid var(--aw-border); border-radius: 30px; padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.aw-pillar:hover { background: rgba(232,160,37,0.06); border-color: var(--aw-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,160,37,0.12); }
.aw-pillar__dot { width: 8px; height: 8px; background: var(--aw-accent); border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.3s ease; }
.aw-pillar:hover .aw-pillar__dot { box-shadow: 0 0 8px rgba(232,160,37,0.6); }
.aw-pillar__label { font-size: 0.85rem; color: var(--aw-text); font-weight: 500; }

/* ============================================================
   7. INDUSTRIES
   ============================================================ */
.aw-industries { padding: 80px 0; background: var(--aw-light-bg); text-align: center; }
.aw-industries__title { font-size: 2rem; font-weight: 700; color: var(--aw-text); margin-bottom: 48px; }
.aw-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aw-industry {
  background: var(--aw-white); border-radius: var(--aw-radius); padding: 32px 20px;
  text-align: center; border: 1px solid var(--aw-border);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; cursor: default;
}
.aw-industry:hover { box-shadow: 0 10px 30px rgba(232,160,37,0.1); transform: translateY(-5px); border-color: var(--aw-accent); }
.aw-industry__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 2rem; }
.aw-industry__title { font-size: 0.95rem; font-weight: 600; color: var(--aw-text); }

/* ============================================================
   8. TECHNOLOGIES
   ============================================================ */
.aw-tech { padding: 80px 0; background: var(--aw-white); }
.aw-tech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.aw-tech__heading { font-size: 2.2rem; font-weight: 700; color: var(--aw-text); margin-bottom: 20px; line-height: 1.25; }
.aw-tech__text { font-size: 1rem; color: var(--aw-gray); line-height: 1.75; margin-bottom: 14px; }
.aw-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.aw-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.aw-tag {
  display: inline-block; background: var(--aw-light-bg); color: var(--aw-text);
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--aw-border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.aw-tag:hover { background: var(--aw-accent); color: var(--aw-white); border-color: var(--aw-accent); transform: translateY(-2px); }

/* ============================================================
   9. FAQ
   ============================================================ */
.aw-faq { padding: 80px 0; background: var(--aw-light-bg); }
.aw-faq__wrapper { max-width: 750px; margin: 0 auto; text-align: center; }
.aw-faq__heading { font-size: 1.8rem; font-weight: 700; color: var(--aw-text); margin-bottom: 12px; }
.aw-faq__subtext { font-size: 0.95rem; color: #666; margin-bottom: 32px; }
.aw-faq__list { text-align: left; }
.aw-faq__item { border-bottom: 1px solid #e5e7eb; overflow: hidden; }
.aw-faq__item summary { list-style: none; }
.aw-faq__item summary::-webkit-details-marker { display: none; }
.aw-faq__question {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 18px 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000;
  text-align: left; gap: 16px; transition: color 0.3s ease;
}
.aw-faq__question:hover { color: var(--aw-accent); }
.aw-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform 0.3s ease; }
.aw-faq__chevron::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid #000; border-bottom: 2.5px solid #000;
  transform: translate(-50%, -25%) rotate(45deg); transition: transform 0.3s ease;
}
.aw-faq__item[open] .aw-faq__chevron::before { transform: translate(-50%, -25%) rotate(-135deg); }
.aw-faq__answer { padding: 0 0 18px; overflow: hidden; }
.aw-faq__answer p { font-size: 0.9rem; color: #444; line-height: 1.7; margin: 0; }

/* ============================================================
   10. CTA
   ============================================================ */
.aw-cta { padding: 80px 0; background: var(--aw-dark); }
.aw-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.aw-cta__heading { font-size: 2rem; font-weight: 700; color: var(--aw-white); margin-bottom: 16px; line-height: 1.3; }
.aw-cta__text { font-size: 1rem; color: var(--aw-gray-light); line-height: 1.7; margin-bottom: 32px; }
.aw-cta__button {
  display: inline-block; background: var(--aw-accent); color: var(--aw-white);
  font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: aw-pulse 2.5s ease infinite;
}
.aw-cta__button:hover { background: var(--aw-accent-hover); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232,160,37,0.35); animation: none; }
button.aw-cta__button { border: none; cursor: pointer; font-family: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .aw-hero__title { font-size: 2.2rem; }
  .aw-about__heading, .aw-whoweare__heading, .aw-tech__heading { font-size: 1.8rem; }
  .aw-services__title { font-size: 1.8rem; }
  .aw-delivery__heading { font-size: 1.8rem; }
  .aw-step__circle { width: 85px; height: 85px; font-size: 0.62rem; border-radius: 14px; padding: 6px; }
  .aw-step__circle::before { width: 22px; height: 22px; font-size: 0.58rem; }
  .aw-step__arrow { font-size: 1rem; margin: 0 1px; }
  .aw-reliable__heading { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .aw-hero { padding: 100px 16px 80px; }
  .aw-hero__title { font-size: 1.7rem; }
  .aw-hero__subtitle { font-size: 1rem; }
  .aw-about__grid, .aw-whoweare__grid, .aw-tech__grid { grid-template-columns: 1fr; gap: 30px; }
  .aw-about__heading, .aw-whoweare__heading, .aw-tech__heading { font-size: 1.6rem; }
  .aw-stats, .aw-whoweare__stats, .aw-tech__stats { grid-template-columns: 1fr 1fr; order: 2; }
  .aw-about__content, .aw-whoweare__content { order: 1; }
  .aw-services__grid { grid-template-columns: 1fr; }
  .aw-services__title { font-size: 1.5rem; }
  .aw-service-card--wide { grid-column: span 1; }
  .aw-delivery__heading { font-size: 1.5rem; }
  .aw-delivery__steps { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .aw-step__arrow { display: none; }
  .aw-step__circle { width: 90px; height: 90px; font-size: 0.7rem; border-radius: 16px; }
  .aw-reliable__heading { font-size: 1.5rem; }
  .aw-reliable__pillars { flex-wrap: wrap; gap: 12px; }
  .aw-industries__title { font-size: 1.5rem; }
  .aw-industries__grid { grid-template-columns: 1fr 1fr; }
  .aw-faq__heading { font-size: 1.3rem; }
  .aw-cta__heading { font-size: 1.5rem; }
  .aw-animate, .aw-animate--left, .aw-animate--right, .aw-animate--scale { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 480px) {
  .aw-hero { padding: 90px 14px 60px; }
  .aw-hero__title { font-size: 1.4rem; }
  .aw-hero__subtitle { font-size: 0.9rem; }
  .aw-about, .aw-whoweare, .aw-services, .aw-delivery, .aw-reliable,
  .aw-industries, .aw-faq, .aw-cta, .aw-tech { padding: 50px 0; }
  .aw-about__heading, .aw-whoweare__heading, .aw-tech__heading { font-size: 1.4rem; }
  .aw-about__text, .aw-whoweare__text, .aw-tech__text { font-size: 0.9rem; }
  .aw-stats, .aw-whoweare__stats, .aw-tech__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .aw-stat { padding: 20px 14px; }
  .aw-stat__number { font-size: 1.8rem; }
  .aw-stat__label { font-size: 0.75rem; }
  .aw-services__title { font-size: 1.3rem; }
  .aw-service-card { padding: 20px 16px; }
  .aw-delivery__heading { font-size: 1.3rem; }
  .aw-step__circle { width: 80px; height: 80px; font-size: 0.65rem; border-radius: 14px; }
  .aw-step__circle::before { width: 22px; height: 22px; font-size: 0.6rem; top: -8px; right: -8px; }
  .aw-reliable__heading { font-size: 1.3rem; }
  .aw-pillar { padding: 10px 14px; font-size: 0.82rem; }
  .aw-industries__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .aw-industry { padding: 20px 14px; }
  .aw-cta__heading { font-size: 1.3rem; }
  .aw-cta__button { font-size: 0.9rem; padding: 14px 28px; }
}
/* ============================================
   LIFE AT MTOUCH — life-at-mtouch.css
   ============================================ */
:root { --lam-accent: #e8a025; --lam-dark: var(--color-deep-indigo); --lam-text: #374151; --lam-heading: #1a1a2e; --lam-light: #f8f9fb; --lam-radius: 12px; }
.lam-accent { color: var(--lam-accent); }
.lam-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lam-container--narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.lam-section-title { font-size: 34px; font-weight: 700; color: var(--lam-heading); text-align: center; margin: 0 0 12px; }
.lam-section-subtitle { font-size: 16px; color: var(--lam-text); text-align: center; margin: 0 auto 44px; max-width: 600px; }

/* HERO */
.lam-hero { background: linear-gradient(135deg, var(--color-deep-indigo) 0%, #1a2d4a 100%); padding: 100px 24px 64px; text-align: center; }
.lam-hero__inner { max-width: 900px; margin: 0 auto; }
.lam-hero__title { font-size: 46px; font-weight: 800; color: #fff; margin: 0 0 16px; line-height: 1.15; }
.lam-hero__accent { color: var(--lam-accent); }
.lam-hero__subtitle { font-size: 18px; color: rgba(255,255,255,.8); line-height: 1.6; max-width: 700px; margin: 0 auto 40px; }
.lam-hero__stats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.lam-hero__stat { text-align: center; }
.lam-hero__stat-num { display: block; font-size: 36px; font-weight: 800; color: var(--lam-accent); }
.lam-hero__stat-label { font-size: 13px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .5px; }

/* INTRO */
.lam-intro { padding: 72px 0; background: #fff; }
.lam-intro__grid { display: flex; align-items: center; gap: 48px; }
.lam-intro__content { flex: 1 1 55%; }
.lam-intro__heading { font-size: 36px; font-weight: 700; color: var(--lam-heading); margin: 0 0 24px; }
.lam-intro__text { font-size: 16px; color: var(--lam-text); line-height: 1.75; margin: 0 0 16px; }
.lam-intro__text:last-child { margin-bottom: 0; }
.lam-intro__image-wrap { flex: 0 0 420px; }
.lam-intro__image { width: 100%; border-radius: var(--lam-radius); box-shadow: 0 12px 30px rgba(3,9,24,.1); }

/* CULTURE CARDS */
.lam-culture { padding: 72px 0; background: var(--lam-light); }
.lam-culture__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lam-culture-card { background: #fff; border-radius: var(--lam-radius); padding: 32px 24px; border: 1px solid #e5e7eb; text-align: center; transition: box-shadow .3s, transform .2s; }
.lam-culture-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-4px); }
.lam-culture-card__icon { font-size: 36px; display: block; margin-bottom: 16px; }
.lam-culture-card__title { font-size: 17px; font-weight: 700; color: var(--lam-heading); margin: 0 0 10px; }
.lam-culture-card__text { font-size: 14px; color: var(--lam-text); line-height: 1.65; margin: 0; }

/* WHY WORK WITH US */
.lam-why { padding: 72px 0; background: #fff; }
.lam-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lam-why-card { background: var(--lam-light); border-radius: var(--lam-radius); padding: 28px 24px; border: 1px solid #e5e7eb; transition: box-shadow .3s, transform .2s; }
.lam-why-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-3px); }
.lam-why-card__icon { font-size: 28px; display: block; margin-bottom: 14px; }
.lam-why-card__title { font-size: 17px; font-weight: 700; color: var(--lam-heading); margin: 0 0 8px; }
.lam-why-card__text { font-size: 14px; color: var(--lam-text); line-height: 1.65; margin: 0; }

/* TEAM SECTION */
.lam-team { padding: 72px 0; background: var(--lam-light); }
.lam-team__grid { display: flex; align-items: center; gap: 48px; }
.lam-team__content { flex: 1 1 55%; }
.lam-team__heading { font-size: 34px; font-weight: 700; color: var(--lam-heading); margin: 0 0 20px; }
.lam-team__text { font-size: 16px; color: var(--lam-text); line-height: 1.75; margin: 0 0 14px; }
.lam-team__btn { display: inline-block; margin-top: 20px; padding: 14px 32px; background: var(--lam-accent); color: #fff; font-size: 15px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: background .3s, transform .2s; }
.lam-team__btn:hover { background: #d4911e; transform: translateY(-2px); }
.lam-team__image-wrap { flex: 0 0 420px; }
.lam-team__image { width: 100%; border-radius: var(--lam-radius); box-shadow: 0 12px 30px rgba(3,9,24,.12); }

/* FAQ */
.lam-faq { padding: 72px 0; background: #fff; }
.lam-faq__list { display: flex; flex-direction: column; gap: 12px; }
.lam-faq__item { background: var(--lam-light); border-radius: 10px; border: 1px solid #e5e7eb; overflow: hidden; transition: box-shadow .3s; }
.lam-faq__item[open] { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.lam-faq__question { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--lam-heading); list-style: none; gap: 16px; }
.lam-faq__question::-webkit-details-marker { display: none; }
.lam-faq__chevron { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.lam-faq__chevron::before, .lam-faq__chevron::after { content: ""; position: absolute; background: var(--lam-accent); border-radius: 2px; transition: transform .3s; }
.lam-faq__chevron::before { width: 14px; height: 2px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.lam-faq__chevron::after { width: 2px; height: 14px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.lam-faq__item[open] .lam-faq__chevron::after { transform: translate(-50%,-50%) rotate(90deg); }
.lam-faq__answer { padding: 0 22px 18px; }
.lam-faq__answer p { font-size: 15px; color: var(--lam-text); line-height: 1.7; margin: 0; }

/* CTA */
.lam-cta { padding: 72px 0; background: var(--lam-dark); }
.lam-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.lam-cta__heading { font-size: 34px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.lam-cta__text { font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.7; margin: 0 0 32px; }
.lam-cta__buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.lam-cta__btn { display: inline-block; padding: 14px 36px; font-size: 15px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: all .3s; }
.lam-cta__btn--primary { background: var(--lam-accent); color: #fff; }
.lam-cta__btn--primary:hover { background: #d4911e; transform: translateY(-2px); }
.lam-cta__btn--outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.3); }
.lam-cta__btn--outline:hover { border-color: var(--lam-accent); color: var(--lam-accent); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .lam-culture__grid { grid-template-columns: repeat(2, 1fr); }
  .lam-intro__image-wrap, .lam-team__image-wrap { flex: 0 0 340px; }
}
@media (max-width: 768px) {
  .lam-hero { padding: 80px 20px 48px; }
  .lam-hero__title { font-size: 32px; }
  .lam-hero__stats { gap: 24px; }
  .lam-hero__stat-num { font-size: 28px; }
  .lam-intro__grid, .lam-team__grid { flex-direction: column; }
  .lam-intro__image-wrap, .lam-team__image-wrap { flex: none; width: 100%; }
  .lam-intro__heading, .lam-team__heading { font-size: 28px; }
  .lam-why__grid { grid-template-columns: repeat(2, 1fr); }
  .lam-section-title { font-size: 28px; }
  .lam-cta__heading { font-size: 28px; }
}
@media (max-width: 480px) {
  .lam-hero__title { font-size: 26px; }
  .lam-hero__stats { flex-direction: column; gap: 16px; }
  .lam-culture__grid { grid-template-columns: 1fr; }
  .lam-why__grid { grid-template-columns: 1fr; }
  .lam-faq__question { font-size: 14px; padding: 14px 16px; }
  .lam-cta__buttons { flex-direction: column; align-items: center; }
}

.lam-hero {
  padding: 120px 24px 64px;
}

/* ============================================
   ABOUT US PAGE — about.css (redesigned)
   ============================================ */

:root {
  --abt-accent: #e8a025;
  --abt-dark: var(--color-deep-indigo);
  --abt-text: #374151;
  --abt-heading: #1a1a2e;
  --abt-light: #f8f9fb;
  --abt-radius: 12px;
}

.abt-accent { color: var(--abt-accent); }

.abt-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.abt-container--narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }

.abt-section-title {
  font-size: 34px; font-weight: 700; color: var(--abt-heading);
  text-align: center; margin: 0 0 12px;
}
.abt-section-subtitle {
  font-size: 16px; color: var(--abt-text); text-align: center;
  margin: 0 0 44px; max-width: 600px; margin-left: auto; margin-right: auto;
}

/* ========== HERO ========== */
.abt-hero {
  background: linear-gradient(135deg, var(--color-deep-indigo) 0%, #1a2d4a 100%);
  padding: 100px 24px 64px; text-align: center;
}
.abt-hero__inner { max-width: 900px; margin: 0 auto; }
.abt-hero__title {
  font-size: 46px; font-weight: 800; color: #fff; margin: 0 0 16px; line-height: 1.15;
}
.abt-hero__accent { color: var(--abt-accent); }
.abt-hero__subtitle {
  font-size: 18px; color: rgba(255,255,255,.8); line-height: 1.6;
  max-width: 700px; margin: 0 auto 40px;
}
.abt-hero__stats {
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
}
.abt-hero__stat { text-align: center; }
.abt-hero__stat-num {
  display: block; font-size: 36px; font-weight: 800; color: var(--abt-accent);
}
.abt-hero__stat-label {
  font-size: 13px; color: rgba(255,255,255,.65); text-transform: uppercase;
  letter-spacing: .5px;
}

/* ========== WHO WE ARE ========== */
.abt-who { padding: 72px 0; background: #fff; }
.abt-who__grid { display: flex; align-items: center; gap: 48px; }
.abt-who__content { flex: 1 1 55%; }
.abt-who__heading {
  font-size: 36px; font-weight: 700; color: var(--abt-heading); margin: 0 0 24px;
}
.abt-who__text {
  font-size: 16px; color: var(--abt-text); line-height: 1.75; margin: 0 0 16px;
}
.abt-who__text:last-child { margin-bottom: 0; }
.abt-who__image-wrap { flex: 0 0 420px; }
.abt-who__image {
  width: 100%; border-radius: var(--abt-radius);
  box-shadow: 0 12px 30px rgba(3,9,24,.1);
}

/* ========== WHY CHOOSE US ========== */
.abt-awards { padding: 72px 0; background: var(--abt-light); }
.abt-awards__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.abt-award {
  background: #fff; border-radius: var(--abt-radius); padding: 32px 24px;
  border: 1px solid #e5e7eb; text-align: center;
  transition: box-shadow .3s, transform .2s;
}
.abt-award:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-4px);
}
.abt-award__icon { font-size: 36px; display: block; margin-bottom: 16px; }
.abt-award__title {
  font-size: 17px; font-weight: 700; color: var(--abt-heading); margin: 0 0 10px;
}
.abt-award__text { font-size: 14px; color: var(--abt-text); line-height: 1.65; margin: 0; }

/* ========== PILLARS (Mission/Vision) ========== */
.abt-pillars { padding: 72px 0; background: #fff; }
.abt-pillars__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.abt-pillar {
  background: var(--abt-light); border-radius: var(--abt-radius); padding: 32px 28px;
  border-left: 4px solid var(--abt-accent); position: relative;
}
.abt-pillar__num {
  font-size: 42px; font-weight: 800; color:#1e4ea8;
  position: absolute; top: 16px; right: 24px; line-height: 1;
}
.abt-pillar__title {
  font-size: 20px; font-weight: 700; color: var(--abt-heading); margin: 0 0 12px;
}
.abt-pillar__text { font-size: 15px; color: var(--abt-text); line-height: 1.7; margin: 0; }

/* ========== VALUES ========== */
.abt-values { padding: 72px 0; background: var(--abt-light); }
.abt-values__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.abt-value {
  background: #fff; border-radius: var(--abt-radius); padding: 28px 24px;
  border: 1px solid #e5e7eb; transition: box-shadow .3s, transform .2s;
}
.abt-value:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-3px);
}
.abt-value__icon { font-size: 28px; display: block; margin-bottom: 14px; }
.abt-value__title {
  font-size: 17px; font-weight: 700; color: var(--abt-heading); margin: 0 0 8px;
}
.abt-value__text { font-size: 14px; color: var(--abt-text); line-height: 1.65; margin: 0; }

/* ========== EXPERTISE ========== */
.abt-expertise { padding: 72px 0; background: #fff; }
.abt-expertise__grid { display: flex; gap: 48px; align-items: flex-start; }
.abt-expertise__content { flex: 0 0 340px; }
.abt-expertise__heading {
  font-size: 32px; font-weight: 700; color: var(--abt-heading); margin: 0 0 16px;
}
.abt-expertise__text { font-size: 15px; color: var(--abt-text); line-height: 1.7; }
.abt-expertise__tags { flex: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.abt-tag {
  display: inline-block; padding: 10px 20px; background: var(--abt-light);
  border: 1px solid #e5e7eb; border-radius: 24px; font-size: 14px;
  font-weight: 500; color: var(--abt-heading); transition: all .3s;
}
.abt-tag:hover {
  background: var(--abt-accent); color: #fff; border-color: var(--abt-accent);
}

/* ========== FAQ ========== */
.abt-faq { padding: 72px 0; background: var(--abt-light); }
.abt-faq__list { display: flex; flex-direction: column; gap: 12px; }
.abt-faq__item {
  background: #fff; border-radius: 10px; border: 1px solid #e5e7eb;
  overflow: hidden; transition: box-shadow .3s;
}
.abt-faq__item[open] { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.abt-faq__question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; cursor: pointer; font-size: 16px; font-weight: 600;
  color: var(--abt-heading); list-style: none; gap: 16px;
}
.abt-faq__question::-webkit-details-marker { display: none; }
.abt-faq__chevron {
  width: 20px; height: 20px; flex-shrink: 0; position: relative;
}
.abt-faq__chevron::before, .abt-faq__chevron::after {
  content: ""; position: absolute; background: var(--abt-accent);
  border-radius: 2px; transition: transform .3s;
}
.abt-faq__chevron::before {
  width: 14px; height: 2px; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.abt-faq__chevron::after {
  width: 2px; height: 14px; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.abt-faq__item[open] .abt-faq__chevron::after {
  transform: translate(-50%,-50%) rotate(90deg);
}
.abt-faq__answer { padding: 0 22px 18px; }
.abt-faq__answer p { font-size: 15px; color: var(--abt-text); line-height: 1.7; margin: 0; }

/* ========== CTA ========== */
.abt-cta { padding: 72px 0; background: var(--abt-dark); }
.abt-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.abt-cta__heading { font-size: 34px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.abt-cta__text {
  font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.7; margin: 0 0 32px;
}
.abt-cta__buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.abt-cta__btn {
  display: inline-block; padding: 14px 36px; font-size: 15px; font-weight: 600;
  border-radius: 8px; text-decoration: none; transition: all .3s;
}
.abt-cta__btn--primary {
  background: var(--abt-accent); color: #fff;
}
.abt-cta__btn--primary:hover { background: #d4911e; transform: translateY(-2px); }
.abt-cta__btn--outline {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.3);
}
.abt-cta__btn--outline:hover {
  border-color: var(--abt-accent); color: var(--abt-accent);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .abt-awards__grid { grid-template-columns: repeat(2, 1fr); }
  .abt-who__image-wrap { flex: 0 0 340px; }
  .abt-expertise__grid { flex-direction: column; gap: 24px; }
  .abt-expertise__content { flex: none; }
}

@media (max-width: 768px) {
  .abt-hero { padding: 80px 20px 48px; }
  .abt-hero__title { font-size: 32px; }
  .abt-hero__stats { gap: 24px; }
  .abt-hero__stat-num { font-size: 28px; }
  .abt-who__grid { flex-direction: column; }
  .abt-who__image-wrap { flex: none; width: 100%; }
  .abt-who__heading { font-size: 28px; }
  .abt-pillars__grid { grid-template-columns: 1fr; }
  .abt-values__grid { grid-template-columns: repeat(2, 1fr); }
  .abt-section-title { font-size: 28px; }
  .abt-cta__heading { font-size: 28px; }
}

@media (max-width: 480px) {
  .abt-hero__title { font-size: 26px; }
  .abt-hero__stats { flex-direction: column; gap: 16px; }
  .abt-awards__grid { grid-template-columns: 1fr; }
  .abt-values__grid { grid-template-columns: 1fr; }
  .abt-faq__question { font-size: 14px; padding: 14px 16px; }
  .abt-cta__buttons { flex-direction: column; align-items: center; }
}
.abt-hero {
  padding: 120px 24px 64px;
}



/* ═══════════════════════════════════════════════════════ */
/* SaaS Development Services — mirrors IoT (ii-) styles   */
/* Prefix: ss-                                            */
/* ═══════════════════════════════════════════════════════ */

/* ── Shared Accent ── */
.ss-text-accent { color: var(--color-signature-blue); }

/* ═══════ HERO ═══════ */
.ss-hero {
  background: linear-gradient(160deg, #020617 0%, #0f172a 30%, #1e293b 70%, #334155 100%);
  padding: 160px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ss-hero::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(37,99,235,.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(37,99,235,.05) 0%, transparent 50%);
  pointer-events: none;
}
.ss-hero__inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.ss-hero__title {
  font-size: 48px; font-weight: 800; color: #fff;
  line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.5px;
}
.ss-hero__title-accent { color: #60a5fa; }
.ss-hero__subtitle {
  font-size: 18px; font-weight: 600; color: #93c5fd;
  margin-bottom: 20px; letter-spacing: 0.5px;
}
.ss-hero__desc {
  font-size: 16px; color: #94a3b8; line-height: 1.7;
  max-width: 700px; margin: 0 auto;
}

/* ═══════ CONTAINER ═══════ */
.ss-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ═══════ ABOUT ═══════ */
.ss-about { padding: 80px 0; background: #fff; }
.ss-about__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: start; }
.ss-about__heading { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 20px; line-height: 1.25; }
.ss-about__text { font-size: 15px; color: #475569; line-height: 1.75; margin-bottom: 14px; }
.ss-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss-stat {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.ss-stat:hover { border-color: var(--color-signature-blue); box-shadow: 0 4px 16px rgba(37,99,235,.1); transform: translateY(-2px); }
.ss-stat__icon { font-size: 28px; }
.ss-stat__label { font-size: 13px; font-weight: 600; color: #0f172a; }

/* ═══════ WHO WE ARE ═══════ */
.ss-whoweare { padding: 80px 0; background: #f8fafc; }
.ss-whoweare__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.ss-whoweare__heading { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 16px; line-height: 1.25; }
.ss-whoweare__text { font-size: 15px; color: #475569; line-height: 1.7; margin-bottom: 20px; }
.ss-whoweare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss-stat--dark {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px;
  padding: 24px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .3s, box-shadow .3s;
}
.ss-stat--dark:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(234,179,8,.2); }
.ss-stat__number { font-size: 28px; font-weight: 800; color: #b45309; }
.ss-stat--dark .ss-stat__label { font-size: 12px; font-weight: 500; color: #92400e; }

/* ── Checklist ── */
.ss-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-checklist__item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: #334155; line-height: 1.6;
}
.ss-checklist__icon {
  width: 24px; height: 24px; background: rgba(37,99,235,.1); color: var(--color-signature-blue);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}

/* ═══════ SERVICES ═══════ */
.ss-services { padding: 80px 0; background: #fff; }
.ss-services__header { text-align: center; margin-bottom: 48px; }
.ss-services__title { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.ss-services__subtitle { font-size: 15px; color: #64748b; }
.ss-services__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.ss-service-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 32px 28px; position: relative; overflow: hidden;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.ss-service-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.08); border-color: #cbd5e1; transform: scale(1.02);
}
.ss-service-card--wide { grid-column: 1 / -1; }
.ss-service-card__badge {
  position: absolute; top: 16px; right: 20px;
  font-size: 56px; font-weight: 700; color: #e2e8f0; line-height: 1; user-select: none;
}
.ss-service-card__title {
  font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.ss-service-card__text {
  font-size: 14px; color: #64748b; line-height: 1.65;
  position: relative; z-index: 1; margin: 0;
}

/* ═══════ DELIVERY ═══════ */
.ss-delivery { padding: 80px 0; background: #f8fafc; text-align: center; }
.ss-delivery__heading { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.ss-delivery__text { font-size: 15px; color: #64748b; margin-bottom: 40px; }
.ss-delivery__steps {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
}
.ss-step__circle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; background: #0f172a; color: #fff;
  border-radius: 100px; font-size: 13px; font-weight: 600;
  transition: background .3s, transform .3s;
}
.ss-step__circle:hover { background: var(--color-signature-blue); transform: scale(1.05); }
.ss-step__arrow { color: #94a3b8; font-size: 18px; font-weight: 300; }

/* ═══════ RELIABLE / SECURITY ═══════ */
.ss-reliable { padding: 80px 0; background: #fff; }
.ss-reliable__inner { text-align: center; }
.ss-reliable__heading { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.ss-reliable__text { font-size: 15px; color: #64748b; max-width: 600px; margin: 0 auto 36px; line-height: 1.7; }
.ss-reliable__pillars {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.ss-pillar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 100px; font-size: 14px; font-weight: 500; color: #0f172a;
  transition: border-color .3s, box-shadow .3s;
}
.ss-pillar:hover { border-color: var(--color-signature-blue); box-shadow: 0 2px 12px rgba(37,99,235,.1); }
.ss-pillar__dot {
  width: 8px; height: 8px; background: var(--color-signature-blue); border-radius: 50%; flex-shrink: 0;
}

/* ═══════ INDUSTRIES ═══════ */
.ss-industries { padding: 80px 0; background: #f8fafc; }
.ss-industries__title { font-size: 32px; font-weight: 700; color: #0f172a; text-align: center; margin-bottom: 40px; }
.ss-industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ss-industry {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 28px 20px; text-align: center;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.ss-industry:hover { border-color: var(--color-signature-blue); box-shadow: 0 4px 16px rgba(37,99,235,.1); transform: translateY(-3px); }
.ss-industry__icon { font-size: 32px; display: block; margin-bottom: 12px; }
.ss-industry__title { font-size: 15px; font-weight: 600; color: #0f172a; margin: 0; }

/* ═══════ TECH STACK ═══════ */
.ss-tech { padding: 80px 0; background: #fff; }
.ss-tech__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: start; }
.ss-tech__heading { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.ss-tech__text { font-size: 15px; color: #64748b; margin-bottom: 24px; }
.ss-tech__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-tag {
  padding: 8px 16px; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: #334155;
  transition: border-color .3s, background .3s, color .3s;
}
.ss-tag:hover { border-color: var(--color-signature-blue); background: #eff6ff; color: var(--color-signature-blue); }
.ss-tech__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ═══════ FAQ ═══════ */
.ss-faq { padding: 80px 0; background: #f8fafc; }
.ss-faq__wrapper { max-width: 800px; margin: 0 auto; }
.ss-faq__heading { font-size: 32px; font-weight: 700; color: #0f172a; text-align: center; margin-bottom: 6px; }
.ss-faq__subtext { font-size: 15px; color: #64748b; text-align: center; margin-bottom: 32px; }
.ss-faq__list { display: flex; flex-direction: column; gap: 12px; }
.ss-faq__item {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  overflow: hidden; transition: border-color .3s, box-shadow .3s;
}
.ss-faq__item:hover { border-color: #cbd5e1; }
.ss-faq__item[open] { border-color: var(--color-signature-blue); box-shadow: 0 2px 12px rgba(37,99,235,.08); }
.ss-faq__question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; cursor: pointer; font-size: 15px; font-weight: 600;
  color: #0f172a; list-style: none; gap: 16px;
}
.ss-faq__question::-webkit-details-marker { display: none; }
.ss-faq__chevron {
  width: 20px; height: 20px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .3s;
}
.ss-faq__item[open] .ss-faq__chevron { transform: rotate(180deg); }
.ss-faq__answer { padding: 0 22px 18px; }
.ss-faq__answer p { font-size: 14.5px; color: #475569; line-height: 1.65; margin: 0; }

/* ═══════ CTA ═══════ */
.ss-cta { padding: 80px 0; background: linear-gradient(160deg, #020617 0%, #0f172a 40%, #1e293b 100%); }
.ss-cta__inner { text-align: center; max-width: 650px; margin: 0 auto; }
.ss-cta__heading { font-size: 34px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.ss-cta__text { font-size: 16px; color: #94a3b8; line-height: 1.7; margin-bottom: 32px; }
.ss-cta__button {
  display: inline-block; background: var(--color-signature-blue); color: #fff;
  padding: 16px 36px; border-radius: 10px; font-size: 15px; font-weight: 600;
  border: none; cursor: pointer;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.ss-cta__button:hover { background: var(--color-heritage-navy); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,.35); }

/* ═══════ ANIMATIONS ═══════ */
.ss-animate--left { opacity: 1; }
.ss-animate--right { opacity: 1; }
.ss-animate--scale { opacity: 1; }
.ss-animate { opacity: 1; }
.ss-stagger > * { opacity: 1; }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1024px) {
  .ss-about__grid,
  .ss-whoweare__grid,
  .ss-tech__grid { grid-template-columns: 1fr; }
  .ss-services__grid { grid-template-columns: 1fr; }
  .ss-industries__grid { grid-template-columns: repeat(2, 1fr); }
  .ss-hero__title { font-size: 38px; }
}

@media (max-width: 768px) {
  .ss-hero { padding: 130px 20px 60px; }
  .ss-hero__title { font-size: 30px; }
  .ss-about, .ss-whoweare, .ss-services, .ss-delivery,
  .ss-reliable, .ss-industries, .ss-tech, .ss-faq, .ss-cta { padding: 56px 0; }
  .ss-about__heading, .ss-whoweare__heading, .ss-services__title,
  .ss-delivery__heading, .ss-reliable__heading, .ss-industries__title,
  .ss-tech__heading, .ss-faq__heading, .ss-cta__heading { font-size: 26px; }
  .ss-industries__grid { grid-template-columns: 1fr; }
  .ss-stats, .ss-whoweare__stats, .ss-tech__stats { grid-template-columns: 1fr 1fr; }
  .ss-delivery__steps { gap: 6px; }
  .ss-step__circle { padding: 10px 14px; font-size: 11px; }
}

@media (max-width: 480px) {
  .ss-hero__title { font-size: 26px; }
  .ss-hero__desc { font-size: 14px; }
  .ss-container { padding: 0 16px; }
  .ss-service-card__badge { font-size: 42px; }
}



/* ===========================
   Milk Delivery App Page Styles
/* ===========================
   Milk Delivery App Page Styles
   =========================== */

/* Page wrapper */
.milk-delivery-page {
  overflow-x: hidden;
}

/* Breadcrumb */
.milk-breadcrumb {
  padding: 10px 20px;
  font-size: 14px;
  color: #000;
}

.milk-breadcrumb a {
  color: #000;
  text-decoration: none;
}

.milk-breadcrumb a:hover {
  text-decoration: underline;
}

.milk-breadcrumb-separator {
  margin: 0 6px;
  color: #666;
}

.milk-breadcrumb-active {
  color: #000;
}

/* ===========================
   Hero Section
   =========================== */
.milk-hero-section {
  text-align: center;
  padding: 100px 20px 40px;
  position: relative;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(219, 234, 254, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(191, 219, 254, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(239, 246, 255, 0.8) 0%, transparent 60%),
    linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
}

.milk-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(37, 99, 235, 0.05) 0%, transparent 40%);
  pointer-events: none;
}

.milk-hero-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.milk-hero-heading-para {
  font-size: 28px;
  font-weight: 600;
  color: #000;
  line-height: 1.4;
}

.milk-hero-h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--color-signature-blue);
  margin: 10px 0 30px;
}

.milk-hero-demo-btn {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, var(--color-heritage-navy) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.milk-hero-demo-btn:hover {
  background: linear-gradient(135deg, var(--color-heritage-navy) 0%, var(--color-heritage-navy) 100%);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
}

.milk-hero-gif-wrapper {
  margin-top: 40px;
}

.milk-hero-gif {
  max-width: 100%;
  height: auto;
}

/* ===========================
   Container
   =========================== */
.milk-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===========================
   Header Section
   =========================== */
.milk-header-section {
  text-align: center;
  padding: 60px 0 30px;
  position: relative;
}

.milk-header-section h2 {
  font-size: 36px;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
  margin-bottom: 20px;
}

.milk-description {
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  max-width: 900px;
  margin: 0 auto 50px;
}

.milk-description a {
  color: var(--color-signature-blue);
  text-decoration: none;
}

.milk-description a:hover {
  text-decoration: underline;
}

/* ===========================
   Content Sections
   =========================== */
.milk-content-section {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
  flex-wrap: wrap;
  padding: 40px;
  border-radius: 16px;
  position: relative;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(219, 234, 254, 0.3) 0%, transparent 50%),
    #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.milk-content-section-narrow {
  max-width: 1000px;
  margin: auto;
}

.milk-content-img {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

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

.milk-three-screens-img {
  max-width: 100%;
  height: auto;
}

.milk-content-text {
  flex: 1;
  min-width: 300px;
}

.milk-content-text h3 {
  font-size: 26px;
  font-weight: 700;
  color: #000;
  margin-bottom: 15px;
}

.milk-content-text h6 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-signature-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.milk-section-heading {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.6;
  margin-bottom: 12px;
}

.milk-content-text p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 12px;
}

.milk-content-text a {
  color: var(--color-signature-blue);
  text-decoration: none;
}

.milk-content-text a:hover {
  text-decoration: underline;
}

.milk-cow-img {
  margin-bottom: 15px;
}

.milk-icons-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.milk-icons-row p {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* ===========================
   Desktop Content Section
   =========================== */
.milk-desktop-content-section {
  padding: 50px 30px;
  margin-bottom: 60px;
  border-radius: 16px;
  position: relative;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(191, 219, 254, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(219, 234, 254, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #f0f7ff 0%, #fafcff 50%, #eef6ff 100%);
  border: 1px solid rgba(219, 234, 254, 0.5);
}

.milk-desktop-content-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-signature-blue), transparent);
  border-radius: 2px;
}

/* ===========================
   Business Model
   =========================== */
.milk-business-model {
  text-align: center;
  padding: 60px 20px;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(240, 249, 240, 0.5) 0%, transparent 70%),
    #ffffff;
}

.milk-business-model-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* ===========================
   Features Section
   =========================== */
.milk-features-section {
  padding: 80px 20px;
  text-align: center;
  position: relative;
  background:
    radial-gradient(circle at 15% 85%, rgba(220, 252, 231, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(219, 234, 254, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 70%),
    linear-gradient(180deg, #f8fdf8 0%, #ffffff 30%, #f0f9ff 70%, #ffffff 100%);
}

.milk-features-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, var(--color-signature-blue), #22c55e);
  opacity: 0.3;
}

.milk-features-section h2 {
  font-size: 36px;
  font-weight: 700;
  color: #000;
  margin-bottom: 50px;
  position: relative;
}

.milk-features-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.milk-features-column {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.milk-feature-item {
  text-align: left;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.milk-feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.milk-feature-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.milk-feature-item p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}

.milk-features-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.milk-features-center img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.milk-request-quote-btn {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, var(--color-heritage-navy) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.milk-request-quote-btn:hover {
  background: linear-gradient(135deg, var(--color-heritage-navy) 0%, var(--color-heritage-navy) 100%);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
}

/* ===========================
   Process Section
   =========================== */
.milk-process-section {
  padding: 80px 20px;
  position: relative;
  background-color: #f0fdf0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2322c55e' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.milk-process-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(220, 252, 231, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(220, 252, 231, 0.4) 0%, transparent 50%);
  pointer-events: none;
}

.milk-process-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  opacity: 0.4;
  z-index: 1;
}

.milk-process-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.milk-process-content h6 {
  font-size: 14px;
  font-weight: 600;
  color: #16a34a;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.milk-process-content h3 {
  font-size: 30px;
  font-weight: 700;
  color: #000;
  margin-bottom: 40px;
}

.milk-process-cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}

.milk-process-card {
  flex: 1;
  min-width: 220px;
  max-width: 280px;
  background: #ffffff;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  border: 1px solid rgba(220, 252, 231, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.milk-process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.milk-process-card img {
  margin-bottom: 15px;
}

.milk-process-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.milk-process-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}

.milk-process-arrow {
  font-size: 24px;
  color: #22c55e;
  display: block;
  margin-top: 10px;
}

.milk-process-quote-btn {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.milk-process-quote-btn:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
  transform: translateY(-2px);
}

/* ===========================
   Journey Section
   =========================== */
.milk-journey-section {
  padding: 80px 20px;
  text-align: center;
  position: relative;
  background-color: #eef6ff;
  background-image:
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.03'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.milk-journey-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(191, 219, 254, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(219, 234, 254, 0.4) 0%, transparent 50%);
  pointer-events: none;
}

.milk-journey-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-signature-blue), transparent);
  opacity: 0.3;
  z-index: 1;
}

.milk-journey-content {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.milk-journey-content h3 {
  font-size: 30px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  line-height: 1.4;
}

.milk-journey-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

/* ===========================
   Application Features - CSS-only tabs
   =========================== */
.milk-app-features-wrapper {
  padding: 80px 20px;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.milk-app-features-heading {
  text-align: center;
  margin-bottom: 30px;
}

.milk-app-features-heading h3 {
  font-size: 30px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.milk-app-features-heading h6 {
  font-size: 15px;
  color: #666;
  font-weight: 400;
}

.milk-tab-radio {
  display: none;
}

.milk-panel-selector {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.milk-panel-btn {
  padding: 12px 28px;
  border: 2px solid var(--color-signature-blue);
  border-radius: 30px;
  background: #fff;
  color: var(--color-signature-blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.milk-panel-btn:hover {
  background-color: #eff6ff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.15);
}

/* Tab active states */
#milk-tab-admin:checked ~ .milk-panel-selector label[for="milk-tab-admin"],
#milk-tab-user:checked ~ .milk-panel-selector label[for="milk-tab-user"],
#milk-tab-delivery:checked ~ .milk-panel-selector label[for="milk-tab-delivery"] {
  background: linear-gradient(135deg, var(--color-signature-blue) 0%, var(--color-heritage-navy) 100%);
  color: #fff;
  border-color: var(--color-signature-blue);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Panel visibility */
.milk-panel {
  display: none;
}

#milk-tab-admin:checked ~ .milk-panels-wrapper .milk-panel-admin {
  display: block;
}

#milk-tab-user:checked ~ .milk-panels-wrapper .milk-panel-user {
  display: block;
}

#milk-tab-delivery:checked ~ .milk-panels-wrapper .milk-panel-delivery {
  display: block;
}

.milk-panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.milk-panel-list li {
  padding: 12px 24px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e8f4ff 100%);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  border: 1px solid #dbeafe;
  transition: all 0.3s ease;
}

.milk-panel-list li:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #c7d9f7 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);
}

/* ===========================
   FAQ Section
   =========================== */
.milk-faq-section {
  padding: 80px 20px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.milk-faq-heading {
  font-size: 30px;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin-bottom: 40px;
}

.milk-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.milk-faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.3s ease;
}

.milk-faq-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.milk-faq-item[open] {
  border-color: #bfdbfe;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08);
}

.milk-faq-question {
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  transition: background-color 0.2s ease;
}

.milk-faq-question:hover {
  background-color: #f8fafc;
}

.milk-faq-question::-webkit-details-marker {
  display: none;
}

.milk-faq-toggle {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-signature-blue);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.milk-faq-item[open] .milk-faq-toggle {
  transform: rotate(45deg);
}

.milk-faq-answer {
  padding: 0 20px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

/* ===========================
   Responsive Styles
   =========================== */
@media (max-width: 1024px) {
  .milk-hero-h1 {
    font-size: 34px;
  }

  .milk-header-section h2 {
    font-size: 30px;
  }

  .milk-features-grid {
    gap: 20px;
  }

  .milk-content-section {
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .milk-hero-heading-para {
    font-size: 22px;
  }

  .milk-hero-h1 {
    font-size: 28px;
  }

  .milk-hero-section {
    padding: 40px 16px 30px;
  }

  .milk-content-section {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .milk-content-text {
    text-align: left;
  }

  .milk-features-section {
    padding: 50px 16px;
  }

  .milk-features-grid {
    flex-direction: column;
    align-items: center;
  }

  .milk-features-center {
    order: -1;
  }

  .milk-process-section {
    padding: 50px 16px;
  }

  .milk-process-cards {
    flex-direction: column;
    align-items: center;
  }

  .milk-process-card {
    max-width: 100%;
  }

  .milk-header-section h2 {
    font-size: 26px;
  }

  .milk-features-section h2 {
    font-size: 28px;
  }

  .milk-process-content h3 {
    font-size: 24px;
  }

  .milk-journey-section {
    padding: 50px 16px;
  }

  .milk-journey-content h3 {
    font-size: 24px;
  }

  .milk-panel-selector {
    flex-direction: column;
    align-items: center;
  }

  .milk-app-features-wrapper {
    padding: 50px 16px;
  }

  .milk-faq-section {
    padding: 50px 16px;
  }

  .milk-desktop-content-section {
    padding: 30px 16px;
  }
}

@media (max-width: 480px) {
  .milk-hero-heading-para {
    font-size: 18px;
  }

  .milk-hero-h1 {
    font-size: 24px;
  }

  .milk-breadcrumb {
    font-size: 12px;
  }

  .milk-content-section {
    padding: 16px;
  }

  .milk-content-text h3 {
    font-size: 22px;
  }

  .milk-faq-heading {
    font-size: 24px;
  }

  .milk-app-features-heading h3 {
    font-size: 24px;
  }

  .milk-features-section h2 {
    font-size: 24px;
  }

  .milk-process-content h3 {
    font-size: 20px;
  }

  .milk-journey-content h3 {
    font-size: 20px;
  }

  .milk-feature-item {
    padding: 16px;
  }

  .milk-process-card {
    padding: 20px 16px;
  }
}
/* ===========================
   Chef Management App Page Styles
   =========================== */

.chef-page {
  overflow-x: hidden;
  font-family: "Roboto", sans-serif;
}

/* ===========================
   Hero Section
   =========================== */
.chef-hero-section {
  padding: 60px 20px 40px;
  position: relative;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(34, 197, 94, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(34, 197, 94, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.chef-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

.chef-hero-text {
  flex: 1;
}

.chef-hero-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.chef-highlight-green {
  color: #16a34a;
}

.chef-hero-subtitle {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}

.chef-hero-image {
  flex: 1;
  text-align: center;
}

.chef-hero-mockup {
  max-width: 100%;
  height: auto;
}

/* ===========================
   Key Features Section
   =========================== */
.chef-key-features {
  padding: 80px 20px;
  position: relative;
  background:
    radial-gradient(circle at 10% 80%, rgba(220, 252, 231, 0.3) 0%, transparent 40%),
    #ffffff;
}

.chef-key-features-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}

.chef-key-features-image {
  flex: 0 0 40%;
  text-align: center;
}

.chef-key-features-image img {
  max-width: 100%;
  height: auto;
}

.chef-key-features-content {
  flex: 1;
}

.chef-key-features-content h2 {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 40px;
  line-height: 1.3;
}

.chef-feature-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.chef-feature-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chef-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.chef-feature-icon {
  flex-shrink: 0;
}

.chef-feature-card h5 {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* ===========================
   On-Demand Section
   =========================== */
.chef-ondemand-section {
  padding: 80px 20px 120px;
  position: relative;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(254, 243, 199, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 80%, rgba(220, 252, 231, 0.3) 0%, transparent 50%),
    linear-gradient(180deg, #fffef5 0%, #ffffff 100%);
}

.chef-leaf-decor {
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 0.4;
  pointer-events: none;
}

.chef-tomato-decor {
  position: absolute;
  top: 40px;
  right: 40px;
  opacity: 0.4;
  pointer-events: none;
}

.chef-ondemand-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}

.chef-ondemand-image {
  flex: 0 0 45%;
  text-align: center;
}

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

.chef-ondemand-content {
  flex: 1;
}

.chef-ondemand-content h2 {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  line-height: 1.3;
}

.chef-ondemand-content p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 14px;
}

/* Banner */
.chef-custom-banner {
  max-width: 1200px;
  margin: 50px auto 0;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-radius: 16px;
  padding: 40px;
  position: relative;
}

.chef-banner-inner h3 {
  font-size: 22px;
  font-weight: 600;
  color: #0b1120;
  line-height: 1.5;
  max-width: 800px;
}

.chef-banner-img {
  position: absolute;
  bottom: 0;
  right: 60px;
  z-index: 2;
}

/* ===========================
   Custom-Built Section
   =========================== */
.chef-custom-built-section {
  padding: 80px 20px;
  position: relative;
  background:
    radial-gradient(circle at 80% 20%, rgba(219, 234, 254, 0.3) 0%, transparent 40%),
    #ffffff;
}

.chef-custom-built-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}

.chef-custom-content {
  flex: 1;
}

.chef-custom-content h2 {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  line-height: 1.3;
}

.chef-custom-content p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
}

.chef-custom-image {
  flex: 1;
  text-align: center;
}

.chef-custom-img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

/* ===========================
   Services Section
   =========================== */
.chef-services-section {
  padding: 80px 20px;
  text-align: center;
  position: relative;
  background:
    radial-gradient(circle at 15% 85%, rgba(220, 252, 231, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(254, 243, 199, 0.3) 0%, transparent 40%),
    linear-gradient(180deg, #fafff8 0%, #ffffff 100%);
}

.chef-services-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 50px;
  line-height: 1.3;
}

.chef-services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.chef-service-card {
  width: 200px;
  padding: 30px 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  text-align: center;
  border: 1px solid #e5e7eb;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chef-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.chef-service-icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.chef-service-bg-1 { background-color: #dcfce7; }
.chef-service-bg-2 { background-color: #fef3c7; }
.chef-service-bg-3 { background-color: #dbeafe; }
.chef-service-bg-4 { background-color: #fce7f3; }
.chef-service-bg-5 { background-color: #e0e7ff; }
.chef-service-bg-6 { background-color: #ccfbf1; }
.chef-service-bg-7 { background-color: #fef9c3; }
.chef-service-bg-8 { background-color: #ede9fe; }

.chef-service-card h5 {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  line-height: 1.4;
}

.chef-footer-leaf {
  position: absolute;
  bottom: 20px;
  right: 30px;
  opacity: 0.3;
  pointer-events: none;
}

/* ===========================
   App Screens Section
   =========================== */
.chef-screens-section {
  padding: 80px 20px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(220, 252, 231, 0.2) 0%, transparent 60%),
    #ffffff;
}

.chef-screens-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.chef-screens-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
  line-height: 1.5;
}

.chef-screens-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  max-width: 1200px;
  margin: 0 auto;
}

.chef-screens-scroll::-webkit-scrollbar {
  height: 6px;
}

.chef-screens-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.chef-screens-scroll::-webkit-scrollbar-thumb {
  background: #16a34a;
  border-radius: 3px;
}

.chef-screen-item {
  flex-shrink: 0;
  scroll-snap-align: center;
}

.chef-screen-item img {
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ===========================
   Features Tabs - CSS-only
   =========================== */
.chef-features-tabs-section {
  padding: 80px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 30% 70%, rgba(220, 252, 231, 0.3) 0%, transparent 40%),
    linear-gradient(180deg, #f8fdf8 0%, #ffffff 100%);
}

.chef-features-tabs-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.chef-tabs-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
}

.chef-features-content-box {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  border: 1px solid #e5e7eb;
}

.chef-tab-radio {
  display: none;
}

.chef-features-tab-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.chef-features-tab-btn {
  padding: 10px 24px;
  border: 2px solid #16a34a;
  border-radius: 30px;
  background: #fff;
  color: #16a34a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chef-features-tab-btn:hover {
  background: #f0fdf4;
}

/* Tab active states */
#chef-tab-user:checked ~ .chef-features-tab-nav label[for="chef-tab-user"],
#chef-tab-admin:checked ~ .chef-features-tab-nav label[for="chef-tab-admin"],
#chef-tab-manager:checked ~ .chef-features-tab-nav label[for="chef-tab-manager"] {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff;
  border-color: #16a34a;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

/* Panel visibility */
.chef-tab-pane {
  display: none;
}

#chef-tab-user:checked ~ .chef-tab-panels .chef-tab-pane-user {
  display: block;
}

#chef-tab-admin:checked ~ .chef-tab-panels .chef-tab-pane-admin {
  display: block;
}

#chef-tab-manager:checked ~ .chef-tab-panels .chef-tab-pane-manager {
  display: block;
}

.chef-features-list {
  text-align: left;
}

.chef-feature-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 15px;
  color: #333;
}

.chef-feature-list-item:last-child {
  border-bottom: none;
}

.chef-check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===========================
   Technology Stack
   =========================== */
.chef-tech-stack-section {
  padding: 60px 20px;
  text-align: center;
  background: #ffffff;
}

.chef-tech-stack-section h3 {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.chef-tech-stack-section > p {
  font-size: 15px;
  color: #666;
  margin-bottom: 40px;
}

.chef-tech-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.chef-tech-item {
  padding: 16px 24px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chef-tech-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.chef-tech-item img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* ===========================
   FAQ Section
   =========================== */
.chef-faq-section {
  padding: 80px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.chef-faq-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin-bottom: 40px;
}

.chef-faq-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chef-faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.3s ease;
}

.chef-faq-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.chef-faq-item[open] {
  border-color: #bbf7d0;
  box-shadow: 0 4px 15px rgba(22, 163, 74, 0.08);
}

.chef-faq-question {
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  transition: background-color 0.2s ease;
}

.chef-faq-question:hover {
  background-color: #f8fdf8;
}

.chef-faq-question::-webkit-details-marker {
  display: none;
}

.chef-faq-question h3 {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0;
  flex: 1;
}

.chef-faq-toggle-icon {
  font-size: 20px;
  font-weight: 700;
  color: #16a34a;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.chef-faq-item[open] .chef-faq-toggle-icon {
  transform: rotate(45deg);
}

.chef-faq-answer {
  padding: 0 20px 18px;
}

.chef-faq-answer p {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

/* ===========================
   Responsive Styles
   =========================== */
@media (max-width: 1024px) {
  .chef-hero-title {
    font-size: 34px;
  }

  .chef-key-features-container,
  .chef-ondemand-container,
  .chef-custom-built-container {
    gap: 30px;
  }

  .chef-banner-img {
    width: 150px;
    right: 30px;
  }
}

@media (max-width: 768px) {
  .chef-hero-container {
    flex-direction: column;
    text-align: center;
  }

  .chef-hero-image {
    display: none;
  }

  .chef-hero-title {
    font-size: 30px;
  }

  .chef-key-features-container {
    flex-direction: column;
  }

  .chef-key-features-image {
    flex: none;
    width: 60%;
    margin: 0 auto;
  }

  .chef-feature-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .chef-ondemand-container {
    flex-direction: column;
  }

  .chef-ondemand-image {
    flex: none;
    width: 70%;
    margin: 0 auto;
  }

  .chef-custom-built-container {
    flex-direction: column;
  }

  .chef-custom-content {
    order: 2;
  }

  .chef-custom-image {
    order: 1;
  }

  .chef-banner-img {
    display: none;
  }

  .chef-services-grid {
    gap: 16px;
  }

  .chef-service-card {
    width: 160px;
  }

  .chef-key-features-content h2,
  .chef-ondemand-content h2,
  .chef-custom-content h2,
  .chef-services-section h2,
  .chef-screens-section h2,
  .chef-features-tabs-section h2 {
    font-size: 26px;
  }

  .chef-features-tab-nav {
    flex-direction: column;
    align-items: center;
  }

  .chef-leaf-decor,
  .chef-tomato-decor,
  .chef-footer-leaf {
    display: none;
  }
}

@media (max-width: 480px) {
  .chef-hero-title {
    font-size: 26px;
  }

  .chef-hero-subtitle {
    font-size: 15px;
  }

  .chef-service-card {
    width: 140px;
    padding: 20px 12px;
  }

  .chef-custom-banner {
    padding: 24px;
  }

  .chef-banner-inner h3 {
    font-size: 18px;
  }

  .chef-faq-section h2 {
    font-size: 26px;
  }

  .chef-tech-stack-section h3 {
    font-size: 24px;
  }
}




/*Foood del

/* Food Delivery Page - SSR-compatible additions */

/* CSS-only tab system */
.food-tab-radio {
  display: none;
}

.food-application-panel-btn {
  padding: 10px 24px;
  border: 2px solid #f97316;
  border-radius: 30px;
  background: #fff;
  color: #f97316;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.food-application-panel-btn:hover {
  background: #fff7ed;
}

#food-tab-customer:checked ~ .food-application-panel-selector label[for="food-tab-customer"],
#food-tab-admin:checked ~ .food-application-panel-selector label[for="food-tab-admin"],
#food-tab-delivery:checked ~ .food-application-panel-selector label[for="food-tab-delivery"] {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #fff;
  border-color: #f97316;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.food-panel {
  display: none;
}

#food-tab-customer:checked ~ .food-panels-wrapper .food-panel-customer {
  display: block;
}

#food-tab-admin:checked ~ .food-panels-wrapper .food-panel-admin {
  display: block;
}

#food-tab-delivery:checked ~ .food-panels-wrapper .food-panel-delivery {
  display: block;
}

/* App screens horizontal scroll */
.food-app-screens-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.food-app-screens-scroll::-webkit-scrollbar {
  height: 6px;
}

.food-app-screens-scroll::-webkit-scrollbar-thumb {
  background: #f97316;
  border-radius: 3px;
}

.food-appscreen {
  flex-shrink: 0;
  scroll-snap-align: center;
}

.food-appscreen img {
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* FAQ - native details/summary */
.food-faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.food-faq-question {
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.food-faq-question::-webkit-details-marker {
  display: none;
}

.food-faq-toggle {
  font-size: 20px;
  font-weight: 700;
  color: #f97316;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.food-faq-item[open] .food-faq-toggle {
  transform: rotate(45deg);
}

.food-faq-answer {
  padding: 0 20px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

/* CTA button arrow */
.food-button-icon {
  margin-left: 8px;
  font-size: 18px;
}


/* ===========================
   Social Media App Page Styles
   =========================== */

.social-page {
  overflow-x: hidden;
  font-family: "Roboto", sans-serif;
}

/* ===========================
   Hero Section
   =========================== */
.social-hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 20px 60px;
  position: relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
}

.social-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.social-hero-h1 {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 30px;
}

.social-hero-span {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.social-hero-gif {
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
  border-radius: 16px;
}

.social-hero-demo-btn {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.social-hero-demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5);
}

/* ===========================
   Breadcrumb
   =========================== */
.social-breadcrumb {
  padding: 12px 20px;
  font-size: 14px;
  color: #000;
}

.social-breadcrumb a {
  color: #000;
  text-decoration: none;
}

.social-breadcrumb a:hover {
  text-decoration: underline;
}

.social-breadcrumb-sep {
  margin: 0 6px;
  color: #666;
}

/* ===========================
   Key Features
   =========================== */
.social-key-features {
  padding: 60px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 60%),
    #ffffff;
}

.social-key-features-heading {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin-bottom: 40px;
}

.social-features-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.social-feature-item {
  text-align: center;
  width: 160px;
}

.social-feature-icon {
  margin-bottom: 12px;
}

.social-feature-item p {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  white-space: pre-line;
  line-height: 1.4;
}

/* ===========================
   Dark Two-Column Sections
   =========================== */
.social-dark-section {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 80px 20px;
}

.social-agency-section {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
  padding: 80px 20px;
}

.social-two-col {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}

.social-two-col-reverse {
  flex-direction: row-reverse;
}

.social-two-col-img {
  flex: 0 0 40%;
  text-align: center;
}

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

.social-two-col-text {
  flex: 1;
}

.social-two-col-text h2,
.social-two-col-text h3 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.3;
}

.social-two-col-text p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 14px;
}

.social-two-col-text a {
  color: #c4b5fd;
  text-decoration: none;
}

.social-two-col-text a:hover {
  text-decoration: underline;
}

.social-dots-img {
  margin-top: 20px;
  opacity: 0.5;
}

/* ===========================
   Services Grid
   =========================== */
.social-services-container {
  padding: 80px 20px;
  background:
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.05) 0%, transparent 40%),
    #ffffff;
}

.social-services-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.social-services-heading {
  font-size: 30px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.social-services-para {
  font-size: 15px;
  color: #666;
  margin-bottom: 40px;
}

.social-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.social-service-card-main {
  text-align: center;
  padding: 24px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-service-card-main:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.social-service-card {
  width: 90px;
  height: 90px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: transform 0.3s ease;
}

.social-service-card-main:hover .social-service-card {
  transform: scale(1.08);
}

.social-service-card-1 { background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
.social-service-card-2 { background: linear-gradient(135deg, #fdf2f8, #fce7f3); }
.social-service-card-3 { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); }
.social-service-card-4 { background: linear-gradient(135deg, #fefce8, #fef3c7); }
.social-service-card-5 { background: linear-gradient(135deg, #f5f3ff, #ede9fe); }
.social-service-card-6 { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.social-service-card-7 { background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.social-service-card-8 { background: linear-gradient(135deg, #fef2f2, #fecaca); }

.social-service-card-main h6 {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
}

.social-service-card-main p {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* ===========================
   App Screens
   =========================== */
.social-screens-section {
  padding: 80px 20px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 60%),
    #f9fafb;
}

.social-screens-header {
  text-align: center;
  margin-bottom: 40px;
}

.social-screens-header h3 {
  font-size: 30px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.social-screens-header h6 {
  font-size: 15px;
  color: #666;
  font-weight: 400;
}

.social-screens-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  max-width: 1200px;
  margin: 0 auto;
}

.social-screens-scroll::-webkit-scrollbar {
  height: 6px;
}

.social-screens-scroll::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 3px;
}

.social-screen-item {
  flex-shrink: 0;
  scroll-snap-align: center;
}

.social-screen-item img {
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ===========================
   Application Features - CSS Tabs
   =========================== */
.social-app-features {
  padding: 80px 20px;
  background: #ffffff;
}

.social-app-features-heading {
  text-align: center;
  margin-bottom: 30px;
}

.social-app-features-heading h3 {
  font-size: 30px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.social-app-features-heading h6 {
  font-size: 15px;
  color: #666;
  font-weight: 400;
}

.social-app-features-container {
  max-width: 800px;
  margin: 0 auto;
}

.social-tab-radio {
  display: none;
}

.social-panel-selector {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.social-panel-btn {
  padding: 12px 28px;
  border: 2px solid #8b5cf6;
  border-radius: 30px;
  background: #fff;
  color: #8b5cf6;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-panel-btn:hover {
  background: #f5f3ff;
}

#social-tab-admin:checked ~ .social-panel-selector label[for="social-tab-admin"],
#social-tab-moderator:checked ~ .social-panel-selector label[for="social-tab-moderator"],
#social-tab-user:checked ~ .social-panel-selector label[for="social-tab-user"] {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #fff;
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.social-panel {
  display: none;
}

#social-tab-admin:checked ~ .social-panels-wrapper .social-panel-admin {
  display: block;
}

#social-tab-moderator:checked ~ .social-panels-wrapper .social-panel-moderator {
  display: block;
}

#social-tab-user:checked ~ .social-panels-wrapper .social-panel-user {
  display: block;
}

.social-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.social-panel li {
  padding: 12px 24px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  border: 1px solid #ddd6fe;
  transition: all 0.3s ease;
}

.social-panel li:hover {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.1);
}

/* ===========================
   Technology Stack
   =========================== */
.social-tech-section {
  padding: 60px 20px;
  background: #fff;
}

.social-tech-heading {
  text-align: center;
  margin-bottom: 40px;
}

.social-tech-heading h2 {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.social-tech-heading p {
  font-size: 15px;
  color: #666;
}

.social-tech-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.social-tech-item {
  padding: 16px 24px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-tech-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.social-tech-item img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* ===========================
   FAQ
   =========================== */
.social-faq-section {
  padding: 80px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.social-faq-heading {
  font-size: 30px;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin-bottom: 40px;
}

.social-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.3s ease;
}

.social-faq-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.social-faq-item[open] {
  border-color: #c4b5fd;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.08);
}

.social-faq-question {
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  transition: background-color 0.2s ease;
}

.social-faq-question:hover {
  background-color: #faf5ff;
}

.social-faq-question::-webkit-details-marker {
  display: none;
}

.social-faq-toggle {
  font-size: 20px;
  font-weight: 700;
  color: #8b5cf6;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.social-faq-item[open] .social-faq-toggle {
  transform: rotate(45deg);
}

.social-faq-answer {
  padding: 0 20px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px) {
  .social-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .social-hero-h1 {
    font-size: 38px;
  }
}

@media (max-width: 768px) {
  .social-hero-h1 {
    font-size: 32px;
  }

  .social-hero-section {
    min-height: auto;
    padding: 80px 16px 40px;
  }

  .social-two-col {
    flex-direction: column;
    text-align: center;
  }

  .social-two-col-reverse {
    flex-direction: column;
  }

  .social-two-col-img {
    flex: none;
    width: 60%;
    margin: 0 auto;
  }

  .social-two-col-text {
    text-align: left;
  }

  .social-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .social-features-row {
    gap: 24px;
  }

  .social-key-features-heading {
    font-size: 26px;
  }

  .social-services-heading {
    font-size: 24px;
  }

  .social-panel-selector {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .social-hero-h1 {
    font-size: 26px;
  }

  .social-services-grid {
    grid-template-columns: 1fr;
  }

  .social-features-row {
    flex-direction: column;
    align-items: center;
  }

  .social-two-col-text h2,
  .social-two-col-text h3 {
    font-size: 24px;
  }

  .social-faq-heading {
    font-size: 24px;
  }
}


/* ============================================
   Service / Info Pages — Shared CSS
   srv- prefix to avoid conflicts
   ============================================ */

/* ─── VARIABLES ─── */
:root {
  --srv-blue: var(--color-signature-blue);
  --srv-blue-dark: var(--color-heritage-navy);
  --srv-dark: #0f172a;
  --srv-text: #475569;
  --srv-heading: #1a1a2e;
  --srv-bg-alt: #f8fafc;
  --srv-border: #e2e8f0;
}

/* ─── ACCENT ─── */
.srv-accent { color: #e8a025 !important; }

/* ─── HERO ─── */
.srv-hero { position: relative !important; min-height: unset !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: var(--srv-dark) !important; }
.srv-hero__bg { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
.srv-hero__gradient { position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,58,138,0.85) 50%, rgba(15,23,42,0.9) 100%) !important; }
.srv-hero__content { position: relative !important; z-index: 2 !important; padding: 0 0 10px !important; max-width: 750px !important; }
.srv-hero__badge { display: inline-block !important; background: var(--srv-blue) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 5px 14px !important; border-radius: 4px !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 16px !important; }
.srv-hero__title { color: #fff !important; font-size: 44px !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 18px !important; }
.srv-hero__sub { color: rgba(255,255,255,0.8) !important; font-size: 17px !important; line-height: 1.7 !important; margin: 0 0 28px !important; }
.srv-hero__btns { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── BREADCRUMB ─── */
.srv-breadcrumb { margin-bottom: 20px !important; }
.srv-breadcrumb ol { display: flex !important; align-items: center !important; list-style: none !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; flex-wrap: wrap !important; }
.srv-breadcrumb li { font-size: 13px !important; }
.srv-breadcrumb a { color: rgba(255,255,255,0.7) !important; text-decoration: none !important; }
.srv-breadcrumb a:hover { color: #fff !important; }
.srv-breadcrumb__sep { color: rgba(255,255,255,0.4) !important; margin: 0 8px !important; }
.srv-breadcrumb__current { color: #fff !important; font-weight: 600 !important; }

/* ─── BUTTONS ─── */
.srv-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 12px 24px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s !important; border: none !important; cursor: pointer !important; }
.srv-btn--primary { background: var(--srv-blue) !important; color: #fff !important; }
.srv-btn--primary:hover { background: var(--srv-blue-dark) !important; transform: translateY(-2px) !important; }
.srv-btn--ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.srv-btn--ghost:hover { background: rgba(255,255,255,0.1) !important; }
.srv-btn--white { background: #fff !important; color: var(--srv-dark) !important; }
.srv-btn--white:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; }
.srv-btn--ghost-light { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.srv-btn--ghost-light:hover { background: rgba(255,255,255,0.1) !important; }

/* ─── TAG ─── */
.srv-tag { display: inline-block !important; font-size: 13px !important; font-weight: 600 !important; padding: 6px 16px !important; border-radius: 20px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; }
.srv-tag--light { background: rgba(255,255,255,0.15) !important; color: #fff !important; }

/* ─── SECTIONS ─── */
.srv-section { padding: 70px 0 !important; }
.srv-section--alt { background: var(--srv-bg-alt) !important; }
.srv-section--dark { background: var(--srv-dark) !important; }
.srv-section__title { font-size: 32px !important; font-weight: 800 !important; color: var(--srv-heading) !important; margin: 0 0 32px !important; text-align: center !important; line-height: 1.3 !important; }
.srv-section__title--light { color: #fff !important; }
.srv-section__desc { font-size: 16px !important; color: var(--srv-text) !important; text-align: center !important; max-width: 600px !important; margin: -16px auto 32px !important; line-height: 1.7 !important; }

/* ─── INTRO ─── */
.srv-intro { max-width: 800px !important; margin: 0 auto !important; text-align: center !important; }
.srv-intro h2 { font-size: 32px !important; font-weight: 800 !important; color: var(--srv-heading) !important; margin: 0 0 16px !important; line-height: 1.3 !important; }
.srv-intro p { font-size: 16px !important; color: var(--srv-text) !important; line-height: 1.8 !important; }
.srv-intro a { color: var(--srv-blue) !important; text-decoration: none !important; font-weight: 600 !important; }
.srv-intro a:hover { text-decoration: underline !important; }

/* ─── CARD GRID ─── */
.srv-grid { display: grid !important; gap: 24px !important; }
.srv-grid--2 { grid-template-columns: repeat(2, 1fr) !important; }
.srv-grid--3 { grid-template-columns: repeat(3, 1fr) !important; }

/* ─── CARDS ─── */
.srv-card { background: #fff !important; border: 1px solid var(--srv-border) !important; border-radius: 12px !important; padding: 28px !important; transition: all 0.3s !important; }
.srv-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important; transform: translateY(-4px) !important; }
.srv-card__icon { width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #eff6ff !important; border-radius: 10px !important; color: var(--srv-blue) !important; font-size: 20px !important; margin-bottom: 16px !important; }
.srv-card__icon--gold { background: #fef3c7 !important; color: #b45309 !important; }
.srv-card__title { font-size: 18px !important; font-weight: 700 !important; color: var(--srv-heading) !important; margin: 0 0 10px !important; }
.srv-card__tagline { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--srv-blue) !important; margin-bottom: 12px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.srv-card__desc { font-size: 14px !important; color: var(--srv-text) !important; line-height: 1.7 !important; margin: 0 0 8px !important; }
.srv-card__expertise { font-size: 13px !important; color: #64748b !important; line-height: 1.6 !important; margin: 0 !important; }
.srv-card__link { display: inline-block !important; margin-top: 12px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--srv-blue) !important; text-decoration: none !important; }
.srv-card__link:hover { text-decoration: underline !important; }
.srv-card__list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.srv-card__list li { font-size: 14px !important; color: var(--srv-text) !important; padding: 4px 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.srv-card__list li i { color: #22c55e !important; font-size: 12px !important; }

/* ─── INDUSTRIES ─── */
.srv-industries { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }
.srv-industry { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 24px !important; background: #fff !important; border: 1px solid var(--srv-border) !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--srv-heading) !important; transition: all 0.3s !important; }
.srv-industry:hover { border-color: var(--srv-blue) !important; box-shadow: 0 4px 16px rgba(37,99,235,0.1) !important; }
.srv-industry i { color: var(--srv-blue) !important; font-size: 18px !important; }
.srv-section--dark .srv-industry { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.15) !important; color: #1a1a2e  !important; }
.srv-section--dark .srv-industry i { color: #60a5fa !important; }

/* ─── STEPS ─── */
.srv-steps { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 16px !important; }
.srv-step { text-align: center !important; padding: 24px 12px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 12px !important; transition: all 0.3s !important; }
.srv-step:hover { background: rgba(255,255,255,0.1) !important; }
.srv-step__num { display: block !important; font-size: 28px !important; font-weight: 800 !important; color: var(--srv-blue) !important; margin-bottom: 8px !important; }
.srv-step__label { font-size: 13px !important; font-weight: 600 !important; color: rgba(255,255,255,0.8) !important; }

/* ─── WHY GRID ─── */
.srv-why-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
.srv-why-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 20px !important; background: #fff !important; border: 1px solid var(--srv-border) !important; border-radius: 10px !important; font-size: 14px !important; color: var(--srv-heading) !important; font-weight: 500 !important; }
.srv-why-item i { color: #22c55e !important; font-size: 16px !important; }
.srv-closing { text-align: center !important; font-size: 16px !important; color: var(--srv-text) !important; margin-top: 28px !important; font-weight: 500 !important; }
.srv-closing a { color: var(--srv-blue) !important; text-decoration: none !important; font-weight: 600 !important; }

/* ─── FAQ ─── */
.srv-faq-list { max-width: 800px !important; margin: 0 auto !important; }
.srv-faq-item { border: 1px solid var(--srv-border) !important; border-radius: 10px !important; margin-bottom: 10px !important; overflow: hidden !important; background: #fff !important; }
.srv-faq-item summary { padding: 18px 24px !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; list-style: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; color: var(--srv-heading) !important; }
.srv-faq-item summary::-webkit-details-marker { display: none !important; }
.srv-faq-item summary::after { content: "+" !important; font-size: 20px !important; color: #94a3b8 !important; font-weight: 400 !important; }
.srv-faq-item[open] summary::after { content: "−" !important; }
.srv-faq-item[open] summary { border-bottom: 1px solid var(--srv-border) !important; }
.srv-faq-item p { padding: 16px 24px !important; font-size: 14px !important; line-height: 1.7 !important; color: var(--srv-text) !important; margin: 0 !important; }

/* ─── CTA ─── */
.srv-cta { background: linear-gradient(135deg, var(--srv-dark) 0%, #1e3a5f 100%) !important; padding: 80px 0 !important; text-align: center !important; }
.srv-cta__inner { max-width: 600px !important; margin: 0 auto !important; }
.srv-cta h2 { font-size: 34px !important; font-weight: 800 !important; color: #fff !important; margin: 16px 0 12px !important; line-height: 1.3 !important; }
.srv-cta p { font-size: 16px !important; color: rgba(255,255,255,0.7) !important; margin: 0 0 28px !important; }
.srv-cta__btns { display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── RESPONSIVE ─── */
@media (max-width: 968px) {
  .srv-hero__title { font-size: 32px !important; }
  .srv-section__title { font-size: 26px !important; }
  .srv-grid--3 { grid-template-columns: repeat(2, 1fr) !important; }
  .srv-grid--2 { grid-template-columns: 1fr !important; }
  .srv-steps { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .srv-hero__title { font-size: 26px !important; }
  .srv-hero__content { padding: 60px 0 40px !important; }
  .srv-section { padding: 50px 0 !important; }
  .srv-grid--3 { grid-template-columns: 1fr !important; }
  .srv-steps { grid-template-columns: repeat(2, 1fr) !important; }
  .srv-cta h2 { font-size: 26px !important; }
  .srv-hero__btns { flex-direction: column !important; }
  .srv-btn { width: 100% !important; justify-content: center !important; }
}



/* ============================================
   Amazon Web Services Company Page — aws- prefix
   ============================================ */
.aws-accent { color: #f59e0b !important; }

/* ─── HERO ─── */
.aws-hero { position: relative !important; min-height: 480px !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: #0f172a !important; }
.aws-hero__bg { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
.aws-hero__gradient { position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,64,175,0.85) 50%, rgba(15,23,42,0.92) 100%) !important; }
.aws-hero__content { position: relative !important; z-index: 2 !important; padding: 80px 0 60px !important; max-width: 750px !important; }
.aws-hero__badge { display: inline-block !important; background: #f59e0b !important; color: #1a1a2e !important; font-size: 12px !important; font-weight: 700 !important; padding: 5px 14px !important; border-radius: 4px !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 16px !important; }
.aws-hero__title { color: #fff !important; font-size: 44px !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 18px !important; }
.aws-hero__sub { color: rgba(255,255,255,0.8) !important; font-size: 17px !important; line-height: 1.7 !important; margin: 0 0 28px !important; }
.aws-hero__btns { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── BREADCRUMB ─── */
.aws-crumb { margin-bottom: 20px !important; }
.aws-crumb ol { display: flex !important; align-items: center !important; list-style: none !important; padding: 0 !important; margin: 0 !important; flex-wrap: wrap !important; }
.aws-crumb li { font-size: 13px !important; }
.aws-crumb a { color: rgba(255,255,255,0.7) !important; text-decoration: none !important; }
.aws-crumb a:hover { color: #fff !important; }
.aws-crumb__sep { color: rgba(255,255,255,0.4) !important; margin: 0 8px !important; }
.aws-crumb__current { color: #fff !important; font-weight: 600 !important; }

/* ─── BUTTONS ─── */
.aws-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 12px 24px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s !important; border: none !important; cursor: pointer !important; }
.aws-btn--primary { background: #f59e0b !important; color: #1a1a2e !important; }
.aws-btn--primary:hover { background: #d97706 !important; transform: translateY(-2px) !important; }
.aws-btn--ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.aws-btn--ghost:hover { background: rgba(255,255,255,0.1) !important; }
.aws-btn--white { background: #fff !important; color: #0f172a !important; }
.aws-btn--white:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; }
.aws-btn--ghost-light { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.aws-btn--ghost-light:hover { background: rgba(255,255,255,0.1) !important; }

/* ─── TAG ─── */
.aws-tag { display: inline-block !important; font-size: 13px !important; font-weight: 600 !important; padding: 6px 16px !important; border-radius: 20px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; background: rgba(255,255,255,0.15) !important; color: #fff !important; }

/* ─── SECTIONS ─── */
.aws-section { padding: 70px 0 !important; }
.aws-section--alt { background: #f8fafc !important; }
.aws-section--dark { background: #0f172a !important; }
.aws-section__title { font-size: 32px !important; font-weight: 800 !important; color: #1a1a2e !important; margin: 0 0 32px !important; text-align: center !important; line-height: 1.3 !important; }
.aws-section__title--light { color: #fff !important; }

/* ─── INTRO ─── */
.aws-intro { max-width: 800px !important; margin: 0 auto !important; text-align: center !important; }
.aws-intro h2 { font-size: 32px !important; font-weight: 800 !important; color: #1a1a2e !important; margin: 0 0 16px !important; }
.aws-intro p { font-size: 16px !important; color: #475569 !important; line-height: 1.8 !important; }

/* ─── CARD GRID ─── */
.aws-grid { display: grid !important; gap: 24px !important; grid-template-columns: repeat(3, 1fr) !important; }
.aws-card { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 28px !important; transition: all 0.3s !important; }
.aws-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important; transform: translateY(-4px) !important; }
.aws-card__icon { width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fef3c7 !important; border-radius: 10px !important; color: #b45309 !important; font-size: 20px !important; margin-bottom: 16px !important; }
.aws-card__title { font-size: 18px !important; font-weight: 700 !important; color: #1a1a2e !important; margin: 0 0 12px !important; }
.aws-card__list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.aws-card__list li { font-size: 14px !important; color: #475569 !important; padding: 4px 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.aws-card__list li i { color: #22c55e !important; font-size: 12px !important; }

/* ─── INDUSTRIES ─── */
.aws-industries { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }
.aws-industry { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 24px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; color: #1a1a2e !important; transition: all 0.3s !important; }
.aws-industry:hover { border-color: #f59e0b !important; box-shadow: 0 4px 16px rgba(245,158,11,0.1) !important; }
.aws-industry i { color: #f59e0b !important; font-size: 18px !important; }

/* ─── STEPS ─── */
.aws-steps { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 16px !important; }
.aws-step { text-align: center !important; padding: 24px 12px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 12px !important; transition: all 0.3s !important; }
.aws-step:hover { background: rgba(255,255,255,0.1) !important; }
.aws-step__num { display: block !important; font-size: 28px !important; font-weight: 800 !important; color: #f59e0b !important; margin-bottom: 8px !important; }
.aws-step__label { font-size: 13px !important; font-weight: 600 !important; color: rgba(255,255,255,0.8) !important; }

/* ─── WHY GRID ─── */
.aws-why-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
.aws-why-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 20px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; font-size: 14px !important; color: #1a1a2e !important; font-weight: 500 !important; }
.aws-why-item i { color: #22c55e !important; font-size: 16px !important; }
.aws-closing { text-align: center !important; font-size: 16px !important; color: #475569 !important; margin-top: 28px !important; font-weight: 500 !important; }

/* ─── FAQ ─── */
.aws-faq-list { max-width: 800px !important; margin: 0 auto !important; }
.aws-faq-item { border: 1px solid #e2e8f0 !important; border-radius: 10px !important; margin-bottom: 10px !important; overflow: hidden !important; background: #fff !important; }
.aws-faq-item summary { padding: 18px 24px !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; list-style: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; color: #1a1a2e !important; }
.aws-faq-item summary::-webkit-details-marker { display: none !important; }
.aws-faq-item summary::after { content: "+" !important; font-size: 20px !important; color: #94a3b8 !important; }
.aws-faq-item[open] summary::after { content: "−" !important; }
.aws-faq-item[open] summary { border-bottom: 1px solid #e2e8f0 !important; }
.aws-faq-item p { padding: 16px 24px !important; font-size: 14px !important; line-height: 1.7 !important; color: #475569 !important; margin: 0 !important; }

/* ─── CTA ─── */
.aws-cta { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; padding: 80px 0 !important; text-align: center !important; }
.aws-cta__inner { max-width: 600px !important; margin: 0 auto !important; }
.aws-cta h2 { font-size: 34px !important; font-weight: 800 !important; color: #fff !important; margin: 16px 0 12px !important; line-height: 1.3 !important; }
.aws-cta p { font-size: 16px !important; color: rgba(255,255,255,0.7) !important; margin: 0 0 28px !important; }
.aws-cta__btns { display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── RESPONSIVE ─── */
@media (max-width: 968px) {
  .aws-hero__title { font-size: 32px !important; }
  .aws-section__title { font-size: 26px !important; }
  .aws-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .aws-steps { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .aws-hero__title { font-size: 26px !important; }
  .aws-grid { grid-template-columns: 1fr !important; }
  .aws-steps { grid-template-columns: repeat(2, 1fr) !important; }
  .aws-cta h2 { font-size: 26px !important; }
  .aws-hero__btns { flex-direction: column !important; }
  .aws-btn { width: 100% !important; justify-content: center !important; }
}




/* ============================================
   Leadership Team Page — ldr- prefix
   ============================================ */
.ldr-accent { color:#e8a025 !important; }

/* ─── HERO ─── */
.ldr-hero { position: relative !important; min-height: 480px !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: #0f172a !important; }
.ldr-hero__bg { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
.ldr-hero__gradient { position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,58,138,0.85) 50%, rgba(15,23,42,0.9) 100%) !important; }
.ldr-hero__content { position: relative !important; z-index: 2 !important; padding: 140px 0 60px !important; max-width: 750px !important; }
.ldr-hero__badge { display: inline-block !important; background: var(--color-signature-blue) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 5px 14px !important; border-radius: 4px !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 16px !important; }
.ldr-hero__title { color: #fff !important; font-size: 44px !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 18px !important; }
.ldr-hero__sub { color: rgba(255,255,255,0.8) !important; font-size: 17px !important; line-height: 1.7 !important; margin: 0 0 28px !important; }
.ldr-hero__btns { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── BREADCRUMB ─── */
.ldr-crumb { margin-bottom: 20px !important; }
.ldr-crumb ol { display: flex !important; align-items: center !important; list-style: none !important; padding: 0 !important; margin: 0 !important; flex-wrap: wrap !important; }
.ldr-crumb li { font-size: 13px !important; }
.ldr-crumb a { color: rgba(255,255,255,0.7) !important; text-decoration: none !important; }
.ldr-crumb a:hover { color: #fff !important; }
.ldr-crumb__sep { color: rgba(255,255,255,0.4) !important; margin: 0 8px !important; }
.ldr-crumb__current { color: #fff !important; font-weight: 600 !important; }

/* ─── BUTTONS ─── */
.ldr-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 12px 24px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s !important; border: none !important; cursor: pointer !important; }
.ldr-btn--primary { background: var(--color-signature-blue) !important; color: #fff !important; }
.ldr-btn--primary:hover { background: var(--color-heritage-navy) !important; transform: translateY(-2px) !important; }
.ldr-btn--ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.ldr-btn--ghost:hover { background: rgba(255,255,255,0.1) !important; }
.ldr-btn--white { background: #fff !important; color: #0f172a !important; }
.ldr-btn--white:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; }

/* ─── SECTIONS ─── */
.ldr-section { padding: 70px 0 !important; }
.ldr-section--alt { background: #f8fafc !important; }
.ldr-section__title { font-size: 32px !important; font-weight: 800 !important; color: #1a1a2e !important; margin: 0 0 32px !important; text-align: center !important; line-height: 1.3 !important; }

/* ─── INTRO ─── */
.ldr-intro { max-width: 800px !important; margin: 0 auto !important; text-align: center !important; }
.ldr-intro h2 { font-size: 32px !important; font-weight: 800 !important; color: #1a1a2e !important; margin: 0 0 16px !important; }
.ldr-intro p { font-size: 16px !important; color: #475569 !important; line-height: 1.8 !important; }
.ldr-intro a { color: var(--color-signature-blue) !important; text-decoration: none !important; font-weight: 600 !important; }
.ldr-intro a:hover { text-decoration: underline !important; }

/* ─── CARD GRID ─── */
.ldr-grid { display: grid !important; gap: 24px !important; }
.ldr-grid--2 { grid-template-columns: repeat(2, 1fr) !important; }
.ldr-card { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 28px !important; transition: all 0.3s !important; }
.ldr-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important; transform: translateY(-4px) !important; }
.ldr-card__icon { width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #eff6ff !important; border-radius: 10px !important; color: var(--color-signature-blue) !important; font-size: 20px !important; margin-bottom: 16px !important; }
.ldr-card__title { font-size: 18px !important; font-weight: 700 !important; color: #1a1a2e !important; margin: 0 0 4px !important; }
.ldr-card__tagline { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--color-signature-blue) !important; margin-bottom: 12px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.ldr-card__desc { font-size: 14px !important; color: #475569 !important; line-height: 1.7 !important; margin: 0 0 8px !important; }
.ldr-card__expertise { font-size: 13px !important; color: #64748b !important; line-height: 1.6 !important; margin: 0 !important; }

/* ─── WHY / VISION GRID ─── */
.ldr-why-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
.ldr-why-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 20px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; font-size: 14px !important; color: #1a1a2e !important; font-weight: 500 !important; }
.ldr-why-item i { color: #22c55e !important; font-size: 16px !important; }
.ldr-closing { text-align: center !important; font-size: 16px !important; color: #475569 !important; margin-top: 28px !important; font-weight: 500 !important; }

/* ─── INDUSTRIES ─── */
.ldr-industries { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }
.ldr-industry { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 24px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; color: #1a1a2e !important; transition: all 0.3s !important; }
.ldr-industry:hover { border-color: var(--color-signature-blue) !important; box-shadow: 0 4px 16px rgba(37,99,235,0.1) !important; }
.ldr-industry i { color: var(--color-signature-blue) !important; font-size: 18px !important; }

/* ─── FAQ ─── */
.ldr-faq-list { max-width: 800px !important; margin: 0 auto !important; }
.ldr-faq-item { border: 1px solid #e2e8f0 !important; border-radius: 10px !important; margin-bottom: 10px !important; overflow: hidden !important; background: #fff !important; }
.ldr-faq-item summary { padding: 18px 24px !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; list-style: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; color: #1a1a2e !important; }
.ldr-faq-item summary::-webkit-details-marker { display: none !important; }
.ldr-faq-item summary::after { content: "+" !important; font-size: 20px !important; color: #94a3b8 !important; }
.ldr-faq-item[open] summary::after { content: "−" !important; }
.ldr-faq-item[open] summary { border-bottom: 1px solid #e2e8f0 !important; }
.ldr-faq-item p { padding: 16px 24px !important; font-size: 14px !important; line-height: 1.7 !important; color: #475569 !important; margin: 0 !important; }

/* ─── CTA ─── */
.ldr-cta { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; padding: 80px 0 !important; text-align: center !important; }
.ldr-cta__inner { max-width: 600px !important; margin: 0 auto !important; }
.ldr-cta h2 { font-size: 34px !important; font-weight: 800 !important; color: #fff !important; margin: 16px 0 12px !important; line-height: 1.3 !important; }
.ldr-cta p { font-size: 16px !important; color: rgba(255,255,255,0.7) !important; margin: 0 0 28px !important; }
.ldr-cta__btns { display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── RESPONSIVE ─── */
@media (max-width: 968px) {
  .ldr-hero__title { font-size: 32px !important; }
  .ldr-section__title { font-size: 26px !important; }
  .ldr-grid--2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .ldr-hero__title { font-size: 26px !important; }
  .ldr-cta h2 { font-size: 26px !important; }
  .ldr-hero__btns { flex-direction: column !important; }
  .ldr-btn { width: 100% !important; justify-content: center !important; }
}


/* ============================================
   Our Journey Page — jrn- prefix
   ============================================ */
.jrn-accent { color: #e8a025 !important; }

/* ─── HERO ─── */
.jrn-hero { position: relative !important; min-height: 480px !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: #0f172a !important; }
.jrn-hero__bg { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
.jrn-hero__gradient { position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,58,138,0.85) 50%, rgba(15,23,42,0.9) 100%) !important; }
.jrn-hero__content { position: relative !important; z-index: 2 !important; padding: 140px 0 60px !important; max-width: 750px !important; }
.jrn-hero__badge { display: inline-block !important; background: var(--color-signature-blue) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 5px 14px !important; border-radius: 4px !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 16px !important; }
.jrn-hero__title { color: #fff !important; font-size: 44px !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 18px !important; }
.jrn-hero__sub { color: rgba(255,255,255,0.8) !important; font-size: 17px !important; line-height: 1.7 !important; margin: 0 0 28px !important; }
.jrn-hero__btns { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── BREADCRUMB ─── */
.jrn-crumb { margin-bottom: 20px !important; }
.jrn-crumb ol { display: flex !important; align-items: center !important; list-style: none !important; padding: 0 !important; margin: 0 !important; flex-wrap: wrap !important; }
.jrn-crumb li { font-size: 13px !important; }
.jrn-crumb a { color: rgba(255,255,255,0.7) !important; text-decoration: none !important; }
.jrn-crumb a:hover { color: #fff !important; }
.jrn-crumb__sep { color: rgba(255,255,255,0.4) !important; margin: 0 8px !important; }
.jrn-crumb__current { color: #fff !important; font-weight: 600 !important; }

/* ─── BUTTONS ─── */
.jrn-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 12px 24px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s !important; border: none !important; cursor: pointer !important; }
.jrn-btn--primary { background: var(--color-signature-blue) !important; color: #fff !important; }
.jrn-btn--primary:hover { background: var(--color-heritage-navy) !important; transform: translateY(-2px) !important; }
.jrn-btn--ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.jrn-btn--ghost:hover { background: rgba(255,255,255,0.1) !important; }
.jrn-btn--white { background: #fff !important; color: #0f172a !important; }
.jrn-btn--white:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; }
.jrn-btn--ghost-light { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.jrn-btn--ghost-light:hover { background: rgba(255,255,255,0.1) !important; }

/* ─── TAG ─── */
.jrn-tag { display: inline-block !important; font-size: 13px !important; font-weight: 600 !important; padding: 6px 16px !important; border-radius: 20px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; background: rgba(255,255,255,0.15) !important; color: #fff !important; }

/* ─── SECTIONS ─── */
.jrn-section { padding: 70px 0 !important; }
.jrn-section--alt { background: #f8fafc !important; }
.jrn-section--dark { background: #0f172a !important; }
.jrn-section__title { font-size: 32px !important; font-weight: 800 !important; color: #1a1a2e !important; margin: 0 0 32px !important; text-align: center !important; line-height: 1.3 !important; }
.jrn-section__title--light { color: #fff !important; }
.jrn-section__desc { font-size: 16px !important; color: #475569 !important; text-align: center !important; max-width: 600px !important; margin: -16px auto 32px !important; line-height: 1.7 !important; }

/* ─── TIMELINE ─── */
.jrn-timeline { position: relative !important; max-width: 800px !important; margin: 0 auto !important; padding-left: 48px !important; }
.jrn-timeline::before { content: '' !important; position: absolute !important; left: 20px !important; top: 0 !important; bottom: 0 !important; width: 3px !important; background: linear-gradient(180deg, var(--color-signature-blue) 0%, #93c5fd 100%) !important; border-radius: 3px !important; }
.jrn-timeline__item { position: relative !important; margin-bottom: 36px !important; }
.jrn-timeline__item:last-child { margin-bottom: 0 !important; }
.jrn-timeline__dot { position: absolute !important; left: -48px !important; top: 0 !important; width: 42px !important; height: 42px !important; background: var(--color-signature-blue) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-size: 16px !important; z-index: 2 !important; box-shadow: 0 0 0 5px #eff6ff !important; }
.jrn-timeline__card { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 24px 28px !important; transition: all 0.3s !important; }
.jrn-timeline__card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important; transform: translateY(-2px) !important; }
.jrn-timeline__year { display: inline-block !important; background: #eff6ff !important; color: var(--color-signature-blue) !important; font-size: 13px !important; font-weight: 700 !important; padding: 3px 12px !important; border-radius: 4px !important; margin-bottom: 8px !important; }
.jrn-timeline__heading { font-size: 18px !important; font-weight: 700 !important; color: #1a1a2e !important; margin: 0 0 8px !important; }
.jrn-timeline__desc { font-size: 14px !important; color: #475569 !important; line-height: 1.7 !important; margin: 0 !important; }

/* ─── MILESTONES ─── */
.jrn-milestones { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
.jrn-milestone { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 20px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; font-size: 14px !important; color: #1a1a2e !important; font-weight: 500 !important; }
.jrn-milestone i { color: #22c55e !important; font-size: 16px !important; }
.jrn-closing { text-align: center !important; font-size: 16px !important; color: #475569 !important; margin-top: 28px !important; font-weight: 500 !important; }

/* ─── TODAY GRID ─── */
.jrn-today-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }
.jrn-today-card { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 24px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; color: #1a1a2e !important; transition: all 0.3s !important; }
.jrn-today-card:hover { border-color: var(--color-signature-blue) !important; box-shadow: 0 4px 16px rgba(37,99,235,0.1) !important; }
.jrn-today-card i { color: var(--color-signature-blue) !important; font-size: 18px !important; }

/* ─── REGIONS ─── */
.jrn-regions { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }
.jrn-region { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 24px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; }
.jrn-region i { color: #60a5fa !important; font-size: 18px !important; }

/* ─── FAQ ─── */
.jrn-faq-list { max-width: 800px !important; margin: 0 auto !important; }
.jrn-faq-item { border: 1px solid #e2e8f0 !important; border-radius: 10px !important; margin-bottom: 10px !important; overflow: hidden !important; background: #fff !important; }
.jrn-faq-item summary { padding: 18px 24px !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; list-style: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; color: #1a1a2e !important; }
.jrn-faq-item summary::-webkit-details-marker { display: none !important; }
.jrn-faq-item summary::after { content: "+" !important; font-size: 20px !important; color: #94a3b8 !important; font-weight: 400 !important; }
.jrn-faq-item[open] summary::after { content: "−" !important; }
.jrn-faq-item[open] summary { border-bottom: 1px solid #e2e8f0 !important; }
.jrn-faq-item p { padding: 16px 24px !important; font-size: 14px !important; line-height: 1.7 !important; color: #475569 !important; margin: 0 !important; }

/* ─── CTA ─── */
.jrn-cta { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; padding: 80px 0 !important; text-align: center !important; }
.jrn-cta__inner { max-width: 600px !important; margin: 0 auto !important; }
.jrn-cta h2 { font-size: 34px !important; font-weight: 800 !important; color: #fff !important; margin: 16px 0 12px !important; line-height: 1.3 !important; }
.jrn-cta p { font-size: 16px !important; color: rgba(255,255,255,0.7) !important; margin: 0 0 28px !important; }
.jrn-cta__btns { display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .jrn-hero__title { font-size: 30px !important; }
  .jrn-section__title { font-size: 26px !important; }
  .jrn-timeline { padding-left: 40px !important; }
  .jrn-timeline__dot { left: -40px !important; width: 36px !important; height: 36px !important; font-size: 14px !important; }
  .jrn-cta h2 { font-size: 26px !important; }
}
@media (max-width: 480px) {
  .jrn-hero__title { font-size: 26px !important; }
  .jrn-hero__btns { flex-direction: column !important; }
  .jrn-btn { width: 100% !important; justify-content: center !important; }
}



/* ============================================
   NASSCOM Membership Page — nsc- prefix
   ============================================ */
.nsc-accent { color:  #e8a025  !important; }

/* ─── HERO ─── */
.nsc-hero { position: relative !important; min-height: 480px !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: #0f172a !important; }
.nsc-hero__bg { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
.nsc-hero__gradient { position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,58,138,0.85) 50%, rgba(15,23,42,0.9) 100%) !important; }
.nsc-hero__content { position: relative !important; z-index: 2 !important; padding: 80px 0 60px !important; max-width: 750px !important; }
.nsc-hero__badge { display: inline-block !important; background: var(--color-signature-blue) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 5px 14px !important; border-radius: 4px !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 16px !important; }
.nsc-hero__title { color: #fff !important; font-size: 44px !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 18px !important; }
.nsc-hero__sub { color: rgba(255,255,255,0.8) !important; font-size: 17px !important; line-height: 1.7 !important; margin: 0 0 28px !important; }
.nsc-hero__btns { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── BREADCRUMB ─── */
.nsc-crumb { margin-bottom: 20px !important; }
.nsc-crumb ol { display: flex !important; align-items: center !important; list-style: none !important; padding: 0 !important; margin: 0 !important; flex-wrap: wrap !important; }
.nsc-crumb li { font-size: 13px !important; }
.nsc-crumb a { color: rgba(255,255,255,0.7) !important; text-decoration: none !important; }
.nsc-crumb a:hover { color: #fff !important; }
.nsc-crumb__sep { color: rgba(255,255,255,0.4) !important; margin: 0 8px !important; }
.nsc-crumb__current { color: #fff !important; font-weight: 600 !important; }

/* ─── BUTTONS ─── */
.nsc-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 12px 24px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s !important; border: none !important; cursor: pointer !important; }
.nsc-btn--primary { background: var(--color-signature-blue) !important; color: #fff !important; }
.nsc-btn--primary:hover { background: var(--color-heritage-navy) !important; transform: translateY(-2px) !important; }
.nsc-btn--ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.nsc-btn--ghost:hover { background: rgba(255,255,255,0.1) !important; }
.nsc-btn--white { background: #fff !important; color: #0f172a !important; }
.nsc-btn--white:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; }
.nsc-btn--ghost-light { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.nsc-btn--ghost-light:hover { background: rgba(255,255,255,0.1) !important; }

/* ─── TAG ─── */
.nsc-tag { display: inline-block !important; font-size: 13px !important; font-weight: 600 !important; padding: 6px 16px !important; border-radius: 20px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; background: rgba(255,255,255,0.15) !important; color: #fff !important; }

/* ─── SECTIONS ─── */
.nsc-section { padding: 70px 0 !important; }
.nsc-section--alt { background: #f8fafc !important; }
.nsc-section__title { font-size: 32px !important; font-weight: 800 !important; color: #1a1a2e !important; margin: 0 0 32px !important; text-align: center !important; line-height: 1.3 !important; }

/* ─── SPLIT LAYOUT ─── */
.nsc-split { display: flex !important; align-items: center !important; gap: 48px !important; }
.nsc-split--reverse { flex-direction: row-reverse !important; }
.nsc-split__text { flex: 1 !important; }
.nsc-split__text h2 { font-size: 30px !important; font-weight: 800 !important; color: #1a1a2e !important; margin: 0 0 16px !important; line-height: 1.3 !important; }
.nsc-split__text p { font-size: 15px !important; color: #475569 !important; line-height: 1.8 !important; margin: 0 0 12px !important; }
.nsc-split__text a { color: var(--color-signature-blue) !important; text-decoration: none !important; font-weight: 600 !important; }
.nsc-split__text a:hover { text-decoration: underline !important; }
.nsc-split__img { flex: 0 0 400px !important; }
.nsc-split__img img { width: 100% !important; border-radius: 12px !important; }

/* ─── CHECKLIST ─── */
.nsc-checklist { list-style: none !important; padding: 0 !important; margin: 12px 0 !important; }
.nsc-checklist li { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 6px 0 !important; font-size: 15px !important; color: #1a1a2e !important; }
.nsc-checklist li i { color: #22c55e !important; margin-top: 4px !important; font-size: 14px !important; }
.nsc-note { font-size: 14px !important; color: #64748b !important; font-style: italic !important; margin-top: 8px !important; }

/* ─── CARD GRID ─── */
.nsc-grid { display: grid !important; gap: 24px !important; }
.nsc-grid--3 { grid-template-columns: repeat(3, 1fr) !important; }

/* ─── CARDS ─── */
.nsc-card { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 28px !important; transition: all 0.3s !important; }
.nsc-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important; transform: translateY(-4px) !important; }
.nsc-card--center { text-align: center !important; }
.nsc-card__icon { margin-bottom: 16px !important; }
.nsc-card__icon img { width: 48px !important; height: 48px !important; object-fit: contain !important; }
.nsc-card--center .nsc-card__icon img { margin: 0 auto !important; display: block !important; }
.nsc-card__title { font-size: 17px !important; font-weight: 700 !important; color: #1a1a2e !important; margin: 0 0 10px !important; }
.nsc-card__desc { font-size: 14px !important; color: #475569 !important; line-height: 1.7 !important; margin: 0 !important; }

/* ─── BANNER ─── */
.nsc-banner { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; padding: 60px 0 !important; }
.nsc-banner__inner { max-width: 800px !important; margin: 0 auto !important; text-align: center !important; }
.nsc-banner__inner p { font-size: 17px !important; color: rgba(255,255,255,0.85) !important; line-height: 1.8 !important; margin: 0 0 16px !important; }
.nsc-banner__inner p:last-child { margin-bottom: 0 !important; }

/* ─── CLOSING ─── */
.nsc-closing { text-align: center !important; font-size: 16px !important; color: #475569 !important; margin-top: 28px !important; font-weight: 500 !important; }

/* ─── FAQ ─── */
.nsc-faq-list { max-width: 800px !important; margin: 0 auto !important; }
.nsc-faq-item { border: 1px solid #e2e8f0 !important; border-radius: 10px !important; margin-bottom: 10px !important; overflow: hidden !important; background: #fff !important; }
.nsc-faq-item summary { padding: 18px 24px !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; list-style: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; color: #1a1a2e !important; }
.nsc-faq-item summary::-webkit-details-marker { display: none !important; }
.nsc-faq-item summary::after { content: "+" !important; font-size: 20px !important; color: #94a3b8 !important; font-weight: 400 !important; }
.nsc-faq-item[open] summary::after { content: "−" !important; }
.nsc-faq-item[open] summary { border-bottom: 1px solid #e2e8f0 !important; }
.nsc-faq-item p { padding: 16px 24px !important; font-size: 14px !important; line-height: 1.7 !important; color: #475569 !important; margin: 0 !important; }

/* ─── CTA ─── */
.nsc-cta { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; padding: 80px 0 !important; text-align: center !important; }
.nsc-cta__inner { max-width: 600px !important; margin: 0 auto !important; }
.nsc-cta h2 { font-size: 32px !important; font-weight: 800 !important; color: #fff !important; margin: 16px 0 12px !important; line-height: 1.3 !important; }
.nsc-cta p { font-size: 16px !important; color: rgba(255,255,255,0.7) !important; margin: 0 0 28px !important; }
.nsc-cta__btns { display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; }

/* ─── RESPONSIVE ─── */
@media (max-width: 968px) {
  .nsc-split { flex-direction: column !important; gap: 28px !important; }
  .nsc-split--reverse { flex-direction: column !important; }
  .nsc-split__img { flex: 0 0 auto !important; max-width: 400px !important; }
  .nsc-grid--3 { grid-template-columns: repeat(2, 1fr) !important; }
  .nsc-hero__title { font-size: 32px !important; }
  .nsc-section__title { font-size: 26px !important; }
}
@media (max-width: 640px) {
  .nsc-hero__title { font-size: 26px !important; }
  .nsc-hero__content { padding: 60px 0 40px !important; }
  .nsc-grid--3 { grid-template-columns: 1fr !important; }
  .nsc-hero__btns { flex-direction: column !important; }
  .nsc-btn { width: 100% !important; justify-content: center !important; }
  .nsc-cta h2 { font-size: 26px !important; }
}






/* ===== FIX: Restore padding stripped by navbar-dropdown.css * reset ===== */
.cp-stat,
.am-stat {
  padding: 28px 20px !important;
}
.cp-service-card,
.am-service-card {
  padding: 28px !important;
}
.cp-step__circle {
  padding: 12px !important;
}
.am-step__circle {
  padding: 8px !important;
}
.cp-industry,
.am-industry {
  padding: 32px 20px !important;
}
.cp-hero {
  padding: 140px 20px 120px !important;
}
.am-hero {
  padding: 140px 20px 120px !important;
}
.cp-pillar,
.am-pillar {
  padding: 10px 20px !important;
}
.cp-tag,
.am-tag {
  padding: 4px 12px !important;
}
.accordion-item button {
  padding: 18px 0 !important;
}
.accordion-content p {
  padding: 0 0 18px !important;
}
.cp-cta__button,
.am-cta__button {
  padding: 14px 36px !important;
}
.cp-container,
.am-container {
  padding: 0 20px !important;
}
.cp-service-card__badge,
.am-service-card__badge {
  margin-bottom: 16px !important;
}





/* ============================================================
   XP-PAGES CSS  —  shared by cross-platform + app-maintenance
   Paste at BOTTOM of navbar-dropdown.css
   All rules use !important to beat global * reset
   ============================================================ */

/* --- palette --- */
:root {
  --xp-blue: var(--color-signature-blue) !important;
  --xp-gold: #e8a025 !important;
  --xp-dk: #0b1120 !important;
  --xp-wh: #ffffff !important;
  --xp-lt: #f8f9fb !important;
  --xp-bdr: #e2e8f0 !important;
  --xp-txt: #1a1a2e !important;
  --xp-gr: #64748b !important;
  --xp-r: 12px !important;
}

/* --- helpers --- */
.xp-gold { color: var(--xp-gold) !important; }
.xp-glow { background: linear-gradient(135deg, #f59e0b, #e8a025) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.xp-w { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; }

/* --- tag / label --- */
.xp-tag { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 2px !important; color: var(--xp-blue) !important; background: #eff6ff !important; padding: 4px 14px !important; border-radius: 4px !important; margin-bottom: 12px !important; }
.xp-tag--c { display: block !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; }
.xp-tag--dk { color: #93c5fd !important; background: rgba(147,197,253,0.1) !important; }

/* --- section --- */
.xp-sec { padding: 80px 0 !important; }
.xp-sec--gray { background: var(--xp-lt) !important; }
.xp-sec--dark { background: linear-gradient(135deg, #0b1120 0%, #1e2a4a 50%, #0b1120 100%) !important; }

/* --- headings --- */
.xp-h2 { font-size: 2.2rem !important; font-weight: 800 !important; color: var(--xp-txt) !important; line-height: 1.25 !important; margin-bottom: 16px !important; }
.xp-h2--c { text-align: center !important; }
.xp-h2--w { color: #fff !important; }
.xp-sub { font-size: 1rem !important; color: var(--xp-gr) !important; text-align: center !important; max-width: 650px !important; margin: 0 auto 40px !important; line-height: 1.7 !important; }
.xp-sub--w { color: rgba(255,255,255,0.55) !important; }
.xp-p { font-size: 1rem !important; color: var(--xp-gr) !important; line-height: 1.75 !important; margin-bottom: 14px !important; }

/* ============ HERO ============ */
.xp-hero { position: relative !important; min-height: 520px !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: var(--xp-dk) !important; padding: 120px 0 80px !important; }
.xp-hero__bg { position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at 30% 50%, rgba(232,160,37,0.08) 0%, transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(37,99,235,0.06) 0%, transparent 50%) !important; pointer-events: none !important; }
.xp-hero__body { position: relative !important; z-index: 2 !important; text-align: center !important; max-width: 820px !important; margin: 0 auto !important; }

/* breadcrumb */
.xp-crumb { margin-bottom: 20px !important; font-size: 13px !important; }
.xp-crumb a { color: rgba(255,255,255,0.45) !important; text-decoration: none !important; }
.xp-crumb a:hover { color: #fff !important; }
.xp-crumb__sep { color: rgba(255,255,255,0.25) !important; margin: 0 6px !important; }
.xp-crumb__cur { color: rgba(255,255,255,0.8) !important; font-weight: 600 !important; }

.xp-hero__pill { display: inline-block !important; background: rgba(232,160,37,0.12) !important; color: #f59e0b !important; font-size: 11px !important; font-weight: 700 !important; padding: 6px 16px !important; border-radius: 20px !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; margin-bottom: 20px !important; border: 1px solid rgba(232,160,37,0.2) !important; }
.xp-hero__h1 { font-size: 3rem !important; font-weight: 800 !important; color: #fff !important; margin-bottom: 16px !important; line-height: 1.15 !important; }
.xp-hero__sub { font-size: 1.2rem !important; color: rgba(255,255,255,0.85) !important; margin-bottom: 12px !important; font-weight: 500 !important; }
.xp-hero__desc { font-size: 0.95rem !important; color: rgba(255,255,255,0.5) !important; line-height: 1.7 !important; margin-bottom: 32px !important; font-style: italic !important; }

/* hero stats row */
.xp-hero__row { display: flex !important; justify-content: center !important; align-items: center !important; gap: 24px !important; flex-wrap: wrap !important; }
.xp-hero__kpi { text-align: center !important; }
.xp-hero__kpi strong { display: block !important; font-size: 1.8rem !important; font-weight: 800 !important; color: #fff !important; line-height: 1 !important; }
.xp-hero__kpi span { font-size: 11px !important; color: rgba(255,255,255,0.4) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-top: 4px !important; display: block !important; }
.xp-hero__div { width: 1px !important; height: 32px !important; background: rgba(255,255,255,0.12) !important; }

/* ============ 2-COL GRID ============ */
.xp-grid2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 50px !important; align-items: center !important; }

/* ============ KPI STAT CARDS ============ */
.xp-stats2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.xp-kpi-card { background: var(--xp-lt) !important; border: 1px solid var(--xp-bdr) !important; border-radius: var(--xp-r) !important; padding: 28px 16px !important; text-align: center !important; position: relative !important; overflow: hidden !important; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s !important; }
.xp-kpi-card::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, var(--xp-gold), var(--xp-blue)) !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform 0.4s !important; }
.xp-kpi-card:hover::before { transform: scaleX(1) !important; }
.xp-kpi-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important; border-color: var(--xp-gold) !important; }
.xp-kpi-card strong { display: block !important; font-size: 2.2rem !important; font-weight: 800 !important; color: var(--xp-blue) !important; line-height: 1 !important; margin-bottom: 6px !important; }
.xp-kpi-card span { font-size: 0.82rem !important; color: var(--xp-gr) !important; font-weight: 500 !important; }
.xp-kpi-card--icon i { font-size: 1.8rem !important; color: var(--xp-blue) !important; display: block !important; margin-bottom: 10px !important; }

/* ============ CHECKLIST ============ */
.xp-checklist { list-style: none !important; padding: 0 !important; margin: 16px 0 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.xp-checklist li { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 0.95rem !important; color: var(--xp-txt) !important; }
.xp-checklist li i { color: #16a34a !important; font-size: 12px !important; flex-shrink: 0 !important; }

/* ============ TRUST BOX ============ */
.xp-trust { background: linear-gradient(135deg, #0b1120, #1e2a4a) !important; border-radius: 16px !important; padding: 40px 32px !important; text-align: center !important; }
.xp-trust h3 { font-size: 1.4rem !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 12px !important; }
.xp-trust p { font-size: 0.95rem !important; color: rgba(255,255,255,0.55) !important; line-height: 1.6 !important; margin-bottom: 24px !important; }

/* ============ SERVICE CARDS ============ */
.xp-cards2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
.xp-card { background: #fff !important; border: 1px solid var(--xp-bdr) !important; border-radius: var(--xp-r) !important; padding: 28px !important; position: relative !important; overflow: hidden !important; transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s !important; }
.xp-card::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, var(--xp-gold), var(--xp-blue)) !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform 0.4s !important; }
.xp-card:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.08) !important; border-color: var(--xp-gold) !important; }
.xp-card:hover::after { transform: scaleX(1) !important; }
.xp-card__num { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; background: linear-gradient(135deg, var(--xp-blue), #6366f1) !important; color: #fff !important; font-size: 0.75rem !important; font-weight: 700 !important; border-radius: 8px !important; margin-bottom: 14px !important; }
.xp-card__t { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--xp-txt) !important; margin-bottom: 8px !important; }
.xp-card__d { font-size: 0.9rem !important; color: var(--xp-gr) !important; line-height: 1.65 !important; margin-bottom: 12px !important; }
.xp-card__ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.xp-card__ul li { font-size: 0.85rem !important; color: var(--xp-gr) !important; padding-left: 16px !important; position: relative !important; line-height: 1.5 !important; }
.xp-card__ul li::before { content: "\2022" !important; position: absolute !important; left: 0 !important; color: var(--xp-gold) !important; font-weight: 700 !important; }

/* ============ PILLS / TAGS ============ */
.xp-pills { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
.xp-pill { display: inline-block !important; background: #fff !important; color: var(--xp-txt) !important; font-size: 0.82rem !important; font-weight: 600 !important; padding: 8px 18px !important; border-radius: 24px !important; border: 1px solid var(--xp-bdr) !important; transition: all 0.3s !important; }
.xp-pill:hover { background: var(--xp-gold) !important; color: #fff !important; border-color: var(--xp-gold) !important; transform: translateY(-2px) !important; }

/* ============ PROCESS STEPS ============ */
.xp-steps { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }
.xp-step { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 130px !important; }
.xp-step__n { width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,0.06) !important; border: 2px solid rgba(255,255,255,0.15) !important; border-radius: 50% !important; color: #fff !important; font-size: 0.85rem !important; font-weight: 800 !important; margin-bottom: 12px !important; transition: all 0.3s !important; }
.xp-step:hover .xp-step__n { background: var(--xp-gold) !important; border-color: var(--xp-gold) !important; transform: scale(1.1) !important; box-shadow: 0 4px 16px rgba(232,160,37,0.3) !important; }
.xp-step__t { font-size: 0.78rem !important; color: rgba(255,255,255,0.7) !important; font-weight: 600 !important; line-height: 1.35 !important; }

/* ============ BENEFITS ============ */
.xp-bens { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
.xp-ben { display: flex !important; align-items: center !important; gap: 14px !important; background: #fff !important; border: 1px solid var(--xp-bdr) !important; border-radius: var(--xp-r) !important; padding: 18px 20px !important; transition: all 0.3s !important; }
.xp-ben:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important; border-color: var(--xp-gold) !important; }
.xp-ben__ic { width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(37,99,235,0.08) !important; border-radius: 10px !important; color: var(--xp-blue) !important; font-size: 16px !important; flex-shrink: 0 !important; }
.xp-ben span { font-size: 0.9rem !important; font-weight: 500 !important; color: var(--xp-txt) !important; }

/* ============ INDUSTRIES ============ */
.xp-indus { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }
.xp-ind { display: flex !important; align-items: center !important; gap: 12px !important; background: #fff !important; border: 1px solid var(--xp-bdr) !important; border-radius: var(--xp-r) !important; padding: 16px 24px !important; font-size: 0.95rem !important; font-weight: 600 !important; color: var(--xp-txt) !important; transition: all 0.3s !important; }
.xp-ind:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important; border-color: var(--xp-gold) !important; }
.xp-ind i { color: var(--xp-blue) !important; font-size: 18px !important; }

/* ============ FAQ ============ */
.xp-faqs { max-width: 800px !important; margin: 0 auto !important; }
.xp-faq { border: 1px solid var(--xp-bdr) !important; border-radius: var(--xp-r) !important; margin-bottom: 12px !important; background: #fff !important; overflow: hidden !important; transition: all 0.3s !important; }
.xp-faq:hover { border-color: #cbd5e1 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important; }
.xp-faq summary { padding: 18px 24px !important; font-size: 0.95rem !important; font-weight: 600 !important; color: var(--xp-txt) !important; cursor: pointer !important; list-style: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.xp-faq summary::-webkit-details-marker { display: none !important; }
.xp-faq__plus { width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f1f5f9 !important; border-radius: 50% !important; flex-shrink: 0 !important; transition: all 0.3s !important; }
.xp-faq__plus::after { content: "+" !important; font-size: 15px !important; color: var(--xp-gr) !important; font-weight: 600 !important; }
.xp-faq[open] .xp-faq__plus { background: var(--xp-blue) !important; transform: rotate(45deg) !important; }
.xp-faq[open] .xp-faq__plus::after { color: #fff !important; }
.xp-faq[open] summary { border-bottom: 1px solid var(--xp-bdr) !important; }
.xp-faq p { padding: 16px 24px !important; font-size: 0.9rem !important; color: var(--xp-gr) !important; line-height: 1.75 !important; }

/* ============ CTA ============ */
.xp-cta { background: linear-gradient(135deg, #0b1120 0%, #1e3a5f 50%, #0b1120 100%) !important; padding: 80px 0 !important; text-align: center !important; position: relative !important; overflow: hidden !important; }
.xp-cta__body { max-width: 640px !important; margin: 0 auto !important; }
.xp-cta h2 { font-size: 2.2rem !important; font-weight: 800 !important; color: #fff !important; margin-bottom: 14px !important; line-height: 1.25 !important; }
.xp-cta p { font-size: 1rem !important; color: rgba(255,255,255,0.55) !important; line-height: 1.7 !important; margin-bottom: 28px !important; }

/* ============ BUTTONS ============ */
.xp-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 13px 28px !important; border-radius: 10px !important; font-size: 0.95rem !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s !important; border: none !important; cursor: pointer !important; }
.xp-btn--gold { background: var(--xp-gold) !important; color: #fff !important; }
.xp-btn--gold:hover { background: #d4911e !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(232,160,37,0.3) !important; }
.xp-btn--wh { background: #fff !important; color: var(--xp-dk) !important; }
.xp-btn--wh:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(255,255,255,0.15) !important; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .xp-hero__h1 { font-size: 2.4rem !important; }
  .xp-h2 { font-size: 1.8rem !important; }
  .xp-cards2 { grid-template-columns: 1fr 1fr !important; }
  .xp-bens { grid-template-columns: repeat(2, 1fr) !important; }
  .xp-step { width: 110px !important; }
}

@media (max-width: 768px) {
  .xp-hero { padding: 100px 0 60px !important; min-height: auto !important; }
  .xp-hero__h1 { font-size: 1.8rem !important; }
  .xp-hero__sub { font-size: 1rem !important; }
  .xp-hero__desc { font-size: 0.85rem !important; }
  .xp-hero__row { gap: 16px !important; }
  .xp-hero__kpi strong { font-size: 1.4rem !important; }
  .xp-hero__div { display: none !important; }
  .xp-sec { padding: 60px 0 !important; }
  .xp-h2 { font-size: 1.5rem !important; }
  .xp-grid2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .xp-cards2 { grid-template-columns: 1fr !important; }
  .xp-bens { grid-template-columns: 1fr !important; }
  .xp-stats2 { grid-template-columns: 1fr 1fr !important; }
  .xp-step { width: 100px !important; }
  .xp-step__n { width: 38px !important; height: 38px !important; font-size: 0.75rem !important; }
  .xp-step__t { font-size: 0.72rem !important; }
  .xp-cta h2 { font-size: 1.5rem !important; }
  .xp-cta { padding: 60px 0 !important; }
}

@media (max-width: 480px) {
  .xp-hero { padding: 90px 0 50px !important; }
  .xp-hero__h1 { font-size: 1.5rem !important; }
  .xp-hero__pill { font-size: 10px !important; }
  .xp-h2 { font-size: 1.3rem !important; }
  .xp-card { padding: 20px !important; }
  .xp-kpi-card { padding: 20px 12px !important; }
  .xp-kpi-card strong { font-size: 1.6rem !important; }
  .xp-trust { padding: 28px 20px !important; }
  .xp-indus { gap: 10px !important; }
  .xp-ind { padding: 12px 16px !important; font-size: 0.85rem !important; }
  .xp-pill { padding: 6px 14px !important; font-size: 0.75rem !important; }
  .xp-cta h2 { font-size: 1.3rem !important; }
  .xp-btn { padding: 12px 22px !important; font-size: 0.85rem !important; }
}
/* Internal links in service pages */
.co-service-card__text a,
.co-about__text a,
.vm-about__text a,
.vm-whoweare__text a,
.vm-checklist a,
.ldr-hero__sub a,
.ldr-intro a,
.jrn-section__desc a,
.jrn-hero__sub a {
  color: #3e8cfb;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.co-service-card__text a:hover,
.co-about__text a:hover,
.vm-about__text a:hover,
.vm-whoweare__text a:hover,
.vm-checklist a:hover,
.ldr-hero__sub a:hover,
.ldr-intro a:hover,
.jrn-section__desc a:hover,
.jrn-hero__sub a:hover {
  color: #60a5fa;
}