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

  :root {
      --navy: #1a2a4c;
      --blue: #1d4ed8;
      --teal: #0ea5e9;
      --orange: #f97316;
      --light: #f0f4f8;
      --gray: #6b7280;
      --white: #ffffff;
      --dark: #111827;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'Segoe UI', Arial, sans-serif;
      color: var(--dark);
      background: var(--white);
  }

  a {
      text-decoration: none;
      color: inherit;
  }

  /* ===== TOPBAR ===== */
  .topbar {
      background: var(--navy);
      color: #ccd6f6;
      font-size: 13px;
      display: flex;
      justify-content: flex-end;
      gap: 24px;
      padding: 7px 60px;
  }

  .topbar a {
      color: #ccd6f6;
      transition: color .2s;
  }

  .topbar a:hover {
      color: var(--orange);
  }

  /* ===== NAVBAR ===== */
  nav {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: var(--white);
      box-shadow: 0 2px 16px rgba(0, 0, 0, .1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 60px;
      height: 72px;
  }

  .logo {
      font-size: 30px;
      font-weight: 900;
      letter-spacing: 3px;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 0;
  }

  .logo span {
      color: var(--orange);
  }

  .menu-toggle {
      display: none;
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none;
  }

  .nav-links>li {
      position: relative;
  }

  .nav-links>li>a {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 14px;
      font-size: 15px;
      font-weight: 600;
      color: var(--navy);
      border-radius: 6px;
      transition: background .2s, color .2s;
  }

  .nav-links>li>a:hover {
      background: var(--light);
      color: var(--blue);
  }

  .nav-links>li>a .arrow {
      font-size: 10px;
      transition: transform .2s;
  }

  .nav-links>li:hover>a .arrow {
      transform: rotate(180deg);
  }

  /* Dropdown */
  .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--white);
      border-radius: 10px;
      box-shadow: 0 8px 40px rgba(0, 0, 0, .14);
      min-width: 220px;
      padding: 12px 0;
      z-index: 2000;
  }

  .nav-links>li:hover .dropdown {
      display: block;
  }

  .dropdown a {
      display: block;
      padding: 9px 22px;
      font-size: 14px;
      color: var(--navy);
      transition: background .15s, color .15s;
  }

  .dropdown a:hover {
      background: var(--light);
      color: var(--blue);
  }

  .dropdown .sub-head {
      padding: 8px 22px 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--gray);
      text-transform: uppercase;
  }

  .dropdown hr {
      border: none;
      border-top: 1px solid #eee;
      margin: 8px 0;
  }

  /* Mega dropdown */
  .mega {
      min-width: 560px;
  }

  .mega-inner {
      display: flex;
  }

  .mega-col {
      flex: 1;
      min-width: 180px;
      padding: 16px 0;
  }

  .nav-cta {
      background: var(--orange) !important;
      color: var(--white) !important;
      padding: 10px 22px !important;
      border-radius: 6px !important;
      font-weight: 700 !important;
      transition: background .2s !important;
  }

  .nav-cta:hover {
      background: #ea6c0a !important;
  }

  /* ===== HERO ===== */
  .hero {
      color: var(--white);
      padding: 100px 60px 80px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 60px;
      min-height: 560px;
  }

  .hero-slider {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
  }

  .hero-slider .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
  }

  .hero-slider .slide.active {
      opacity: 1;
  }

  .hero-slider .slider-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.85) 0%, rgba(30, 58, 138, 0.85) 50%, rgba(3, 105, 161, 0.85) 100%);
      pointer-events: none;
  }

  .hero::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 500px;
      height: 500px;
      background: rgba(255, 255, 255, .05);
      border-radius: 50%;
  }

  .hero::after {
      content: '';
      position: absolute;
      bottom: -100px;
      left: 30%;
      width: 300px;
      height: 300px;
      background: rgba(249, 115, 22, .08);
      border-radius: 50%;
  }

  .hero-text {
      flex: 1;
      position: relative;
      z-index: 1;
  }

  .hero-text .eyebrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--teal);
      text-transform: uppercase;
      margin-bottom: 16px;
  }

  .hero-text h1 {
      font-size: 52px;
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 18px;
  }

  .hero-text h1 span {
      color: var(--orange);
  }

  .hero-text p {
      font-size: 20px;
      color: #bfdbfe;
      margin-bottom: 36px;
      max-width: 520px;
      line-height: 1.6;
  }

  .hero-btns {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
  }

  .btn-primary {
      background: var(--orange);
      color: var(--white);
      padding: 14px 32px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 16px;
      transition: background .2s, transform .15s;
      display: inline-block;
  }

  .btn-primary:hover {
      background: #ea6c0a;
      transform: translateY(-2px);
  }

  .btn-outline {
      border: 2px solid rgba(255, 255, 255, .6);
      color: var(--white);
      padding: 14px 32px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 16px;
      transition: background .2s;
      display: inline-block;
  }

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

  .hero-logos {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 40px;
  }

  .hero-logo-badge {
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .2);
      padding: 8px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--white);
  }

  .hero-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      flex: 0 0 420px;
      /* Increased from 300px to give cards more space so text fits on one line */
      position: relative;
      z-index: 1;
  }

  .stat-card {
      background: rgba(255, 255, 255, 0.08);
      /* More modern glass look */
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      /* Slightly rounder edges */
      padding: 30px 20px;
      /* Tweaked padding */
      text-align: center;
      backdrop-filter: blur(12px);
      /* Deepened blur */
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      /* Subtle shadow for depth */
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 140px;
      /* Ensures all cards look uniform */
  }

  .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
      border-color: rgba(255, 255, 255, 0.4);
  }

  .stat-card .num {
      font-size: 34px;
      /* Reduced slightly to ensure it stays on one line */
      font-weight: 900;
      color: var(--orange);
      line-height: 1.2;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      /* Pop the text out */
  }

  .stat-card .label {
      font-size: 14px;
      /* Bumped up readability slightly */
      color: #bfdbfe;
      margin-top: 8px;
  }

  /* ===== SECTIONS ===== */
  section {
      padding: 80px 60px;
  }

  .solutions-section {
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/01.jpg') center/cover no-repeat;
  }

  .solutions-section .section-tag {
      color: var(--teal);
  }

  .solutions-section h2.section-title {
      color: var(--white);
  }

  .solutions-section .section-sub {
      color: #bfdbfe;
      /* A light blue/gray color similar to before but for dark backgrounds */
  }

  .section-tag {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--teal);
      text-transform: uppercase;
      margin-bottom: 12px;
  }

  h2.section-title {
      font-size: 40px;
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 14px;
  }

  .section-sub {
      font-size: 18px;
      color: var(--gray);
      max-width: 620px;
      margin-bottom: 44px;
      line-height: 1.6;
  }

  /* ===== VALUE STRIP ===== */
  .value-strip {
      background: var(--navy);
      padding: 28px 60px;
      display: flex;
      justify-content: center;
      gap: 60px;
      flex-wrap: wrap;
  }

  .value-item {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--white);
  }

  .value-icon {
      font-size: 28px;
  }

  .value-item span {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
  }

  /* ===== JOURNEY ===== */
  .journey {
      background: var(--light);
  }

  .journey-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
  }

  .step-card {
      background: var(--white);
      border-radius: 14px;
      padding: 32px;
      box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
      transition: transform .2s, box-shadow .2s;
  }

  .step-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  }

  .step-num {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--blue);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 18px;
      margin-bottom: 18px;
  }

  .step-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 14px;
  }

  .step-card ul {
      list-style: none;
  }

  .step-card ul li {
      font-size: 14px;
      color: var(--gray);
      padding: 4px 0 4px 18px;
      position: relative;
      line-height: 1.5;
  }

  .step-card ul li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--teal);
      font-weight: 700;
  }

  .step-link {
      display: inline-block;
      margin-top: 18px;
      color: var(--blue);
      font-weight: 700;
      font-size: 14px;
  }

  .step-link:hover {
      color: var(--orange);
  }

  /* ===== SOFTWARE GRID ===== */
  .software-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 32px;
  }

  .sw-card {
      border: 2px solid #e5e7eb;
      border-radius: 14px;
      padding: 32px;
      transition: all .2s;
      cursor: pointer;
      display: flex;
      gap: 20px;
      align-items: flex-start;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }

  .sw-card:hover {
      border-color: var(--blue);
      box-shadow: 0 6px 28px rgba(29, 78, 216, .12);
      transform: translateY(-4px);
  }

  .sw-icon {
      font-size: 38px;
      flex-shrink: 0;
  }

  .sw-card h4 {
      font-size: 17px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 6px;
  }

  .sw-card p {
      font-size: 14px;
      color: var(--gray);
      line-height: 1.5;
  }

  .sw-card .sw-link {
      display: inline-block;
      margin-top: 12px;
      color: var(--blue);
      font-size: 13px;
      font-weight: 700;
  }

  /* ===== INDUSTRIES ===== */
  .industries {
      background: var(--light);
  }

  .industry-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
  }

  .ind-card {
      background: var(--white);
      border-radius: 12px;
      padding: 24px 16px;
      text-align: center;
      transition: all .2s;
      border: 2px solid transparent;
  }

  .ind-card:hover {
      border-color: var(--teal);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(14, 165, 233, .1);
  }

  .ind-icon {
      font-size: 38px;
      margin-bottom: 10px;
      height: 40px;
      /* added height to keep all icons aligned */
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .ind-icon img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
  }

  .ind-card p {
      font-size: 15px;
      font-weight: 800;
      color: var(--navy);
      position: relative;
      z-index: 1;
      letter-spacing: 0.5px;
      transition: color 0.3s ease, transform 0.3s ease;
  }

  .ind-card:hover p {
      color: var(--blue);
  }

  /* Industry Card Background Image Styling */
  .ind-card.has-bg {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 180px;
      padding: 0;
      border: none;
      background: var(--navy);
      /* Deep blue fallback */
      border-radius: 12px;
  }

  .ind-card.has-bg .card-img {
      flex: 1;
      width: 100%;
      background-size: cover;
      background-position: center;
      transition: transform 0.4s ease;
  }

  .ind-card.has-bg:hover .card-img {
      transform: scale(1.05);
  }

  .ind-card.has-bg .card-btn {
      background: #2563eb;
      /* Matches the button blue in the reference */
      color: var(--white);
      text-align: center;
      padding: 14px 10px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1px;
      transition: background 0.2s;
      z-index: 1;
      text-transform: uppercase;
  }

  .ind-card.has-bg:hover .card-btn {
      background: #1d4ed8;
      /* Darken slightly on hover */
  }

  /* ===== SUCCESS ===== */
  .success-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 40px;
  }

  .success-card {
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
      transition: transform .2s;
  }

  .success-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 48px rgba(0, 0, 0, .14);
  }

  .card-top {
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }

  .card-body {
      padding: 24px;
      background: var(--white);
  }

  .badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--blue);
      text-transform: uppercase;
      margin-bottom: 8px;
  }

  .success-card h4 {
      font-size: 18px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 6px;
  }

  .success-card .company-name {
      font-size: 14px;
      color: var(--gray);
  }

  /* ===== TESTIMONIALS ===== */
  .testimonials {
      background: var(--navy);
      color: var(--white);
  }

  .testimonials .section-title {
      color: var(--white);
  }

  .testi-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-top: 40px;
  }

  .testi-card {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 14px;
      padding: 32px;
  }

  .testi-card::before {
      content: '"';
      font-size: 60px;
      color: var(--orange);
      line-height: 0.8;
      display: block;
      margin-bottom: 12px;
  }

  .testi-card p {
      font-size: 16px;
      line-height: 1.75;
      color: #e0eaff;
      margin-bottom: 20px;
  }

  .testi-author {
      font-weight: 700;
      color: var(--orange);
      font-size: 14px;
  }

  .testi-company {
      font-size: 13px;
      color: #93c5fd;
  }

  /* ===== CTA ===== */
  .cta-banner {
      background: linear-gradient(135deg, var(--blue), var(--teal));
      color: var(--white);
      text-align: center;
      padding: 80px 60px;
  }

  .cta-banner h2 {
      font-size: 42px;
      font-weight: 900;
      margin-bottom: 16px;
  }

  .cta-banner p {
      font-size: 19px;
      color: #bfdbfe;
      margin-bottom: 40px;
  }

  .btn-white {
      background: var(--white);
      color: var(--blue);
      padding: 14px 36px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 16px;
      display: inline-block;
      transition: all .2s;
      margin: 0 8px 8px;
  }

  .btn-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  }

  .btn-ghost-light {
      border: 2px solid rgba(255, 255, 255, .6);
      color: var(--white);
      padding: 14px 36px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 16px;
      display: inline-block;
      transition: all .2s;
      margin: 0 8px 8px;
  }

  .btn-ghost-light:hover {
      background: rgba(255, 255, 255, .1);
  }

  /* ===== FOOTER ===== */
  footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 64px 60px 32px;
  }

  .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
  }

  .footer-brand .logo {
      font-size: 26px;
      color: var(--white);
      margin-bottom: 16px;
      display: block;
  }

  .footer-brand p {
      font-size: 14px;
      line-height: 1.7;
      color: #64748b;
      margin-bottom: 20px;
  }

  .footer-contact {
      font-size: 13px;
      line-height: 2.2;
  }

  .footer-contact a {
      color: var(--teal);
  }

  .footer-col h5 {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #e2e8f0;
      margin-bottom: 16px;
  }

  .footer-col ul {
      list-style: none;
  }

  .footer-col ul li {
      margin-bottom: 9px;
  }

  .footer-col ul li a {
      font-size: 14px;
      color: #64748b;
      transition: color .2s;
  }

  .footer-col ul li a:hover {
      color: var(--teal);
  }

  .social-links {
      display: flex;
      gap: 10px;
      margin-top: 20px;
  }

  .social-links a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .07);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #94a3b8;
      transition: background .2s, color .2s;
  }

  .social-links a:hover {
      background: var(--teal);
      color: var(--white);
  }

  .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #475569;
      flex-wrap: wrap;
      gap: 12px;
  }

  .footer-links {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
  }

  .footer-links a {
      color: #475569;
      transition: color .2s;
  }

  .footer-links a:hover {
      color: var(--teal);
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1100px) {

      nav,
      .topbar,
      section,
      .value-strip,
      .cta-banner,
      footer {
          padding-left: 24px;
          padding-right: 24px;
      }

      .journey-steps {
          grid-template-columns: repeat(2, 1fr);
      }

      .software-grid {
          grid-template-columns: repeat(2, 1fr);
      }

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

      .success-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .testi-grid {
          grid-template-columns: 1fr;
      }

      .footer-grid {
          grid-template-columns: 1fr 1fr;
      }
  }

  @media (max-width: 768px) {
      .menu-toggle {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 30px;
          height: 21px;
          background: transparent;
          border: none;
          cursor: pointer;
          z-index: 2001;
          /* Ensure above dropdowns */
      }

      .menu-toggle .bar {
          height: 3px;
          width: 100%;
          background-color: var(--navy);
          border-radius: 3px;
          transition: all 0.3s ease;
      }

      /* Hamburger animation to X */
      .menu-toggle.active .bar:nth-child(1) {
          transform: translateY(9px) rotate(45deg);
      }

      .menu-toggle.active .bar:nth-child(2) {
          opacity: 0;
      }

      .menu-toggle.active .bar:nth-child(3) {
          transform: translateY(-9px) rotate(-45deg);
      }

      .nav-links {
          display: flex;
          flex-direction: column;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          background-color: var(--white);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
          padding: 20px 0;
          clip-path: circle(0px at top right);
          transition: clip-path 0.4s ease-in-out;
          align-items: flex-start;
          border-top: 1px solid var(--light);
      }

      .nav-links.active {
          clip-path: circle(150% at top right);
          display: flex;
      }

      .nav-links>li {
          width: 100%;
          border-bottom: 1px solid var(--light);
      }

      .nav-links>li:last-child {
          border-bottom: none;
          padding: 10px 20px;
      }

      .nav-links>li>a {
          width: 100%;
          padding: 15px 24px;
          justify-content: space-between;
          border-radius: 0;
      }

      .nav-links>li>a:hover {
          background: transparent;
          color: var(--orange);
      }

      /* Mobile Dropdown reset */
      .dropdown,
      .mega,
      .dropdown.mega {
          position: static;
          box-shadow: none;
          width: 100%;
          min-width: 100%;
          display: none;
          background-color: var(--light);
          padding: 0;
          border-radius: 0;
      }

      .nav-links>li:hover .dropdown {
          display: none;
          /* Only open on click in mobile */
      }

      .nav-links>li.dropdown-open .dropdown {
          display: block;
      }

      .nav-links>li.dropdown-open>a .arrow {
          transform: rotate(180deg);
      }

      .dropdown a {
          padding: 12px 24px 12px 40px;
      }

      .mega-inner {
          flex-direction: column;
      }

      .mega-col {
          padding: 0;
      }

      .nav-cta {
          display: inline-block;
          text-align: center;
          width: 100%;
          margin-top: 10px;
      }

      .hero {
          padding: 60px 24px;
          flex-direction: column;
      }

      .hero-text h1 {
          font-size: 34px;
      }

      .hero-stats {
          grid-template-columns: repeat(2, 1fr);
          flex: unset;
          width: 100%;
      }

      .journey-steps,
      .software-grid,
      .industry-grid,
      .success-grid {
          grid-template-columns: 1fr;
      }

      h2.section-title {
          font-size: 28px;
      }

      .footer-grid {
          grid-template-columns: 1fr;
      }

      .value-strip {
          gap: 24px;
      }
  }

  /* ===== ERP SUBPAGE STYLES ===== */
  .erp-intro-section {
      padding: 80px 5%;
      text-align: center;
      max-width: 900px;
      margin: 0 auto;
  }

  .erp-intro-section h2 {
      font-size: 36px;
      color: var(--blue);
      margin-bottom: 20px;
  }

  .erp-intro-section p {
      color: var(--gray);
      font-size: 18px;
      line-height: 1.6;
  }

  .erp-features-section {
      padding: 80px 5%;
      background: var(--light);
      text-align: center;
  }

  .erp-features-section h2 {
      font-size: 36px;
      color: var(--blue);
      margin-bottom: 50px;
  }

  .erp-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 30px;
      max-width: 1200px;
      margin: 0 auto;
  }

  .erp-card {
      background: var(--white);
      padding: 40px 30px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      border: 1px solid #eaeaea;
      transition: transform 0.3s, box-shadow 0.3s;
      text-align: left;
  }

  .erp-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  }

  .erp-icon {
      font-size: 40px;
      margin-bottom: 20px;
  }

  .erp-card h3 {
      font-size: 22px;
      color: var(--blue);
      margin-bottom: 15px;
  }

  .erp-card p {
      color: var(--gray);
      font-size: 15px;
      line-height: 1.6;
  }

  .erp-resources-section {
      padding: 80px 5%;
      background: var(--white);
      text-align: center;
  }

  .resource-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 30px;
      max-width: 1000px;
      margin: 0 auto;
  }

  .resource-card {
      background: var(--light);
      padding: 50px 40px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      text-align: center;
  }

  .resource-card h3 {
      font-size: 26px;
      color: var(--blue);
      margin-bottom: 15px;
      line-height: 1.3;
  }

  .resource-card p {
      color: var(--gray);
      font-size: 16px;
      margin-bottom: 30px;
  }

  .resource-card .btn {
      transition: background 0.2s, transform 0.2s;
  }

  .resource-card .btn:hover {
      opacity: 0.9;
      transform: scale(1.05);
  }

  .erp-bottom-cta {
      padding: 100px 5%;
      background: var(--light);
      text-align: center;
      border-top: 1px solid #ddd;
  }

  .erp-bottom-cta h2 {
      font-size: 34px;
      color: var(--blue);
      margin-bottom: 20px;
  }

  .erp-bottom-cta p {
      color: var(--gray);
      font-size: 18px;
      max-width: 700px;
      margin: 0 auto 30px;
  }

  @media (max-width: 768px) {
      .resource-cards {
          grid-template-columns: 1fr;
      }

      .erp-features-section h2,
      .erp-intro-section h2,
      .erp-bottom-cta h2 {
          font-size: 28px;
      }

      .sap-trendy-hero h1 {
          font-size: 36px;
      }

      .sap-cta-section h2 {
          font-size: 28px;
      }
  }

  /* ===== TRENDY SAP B1 PAGES ===== */
  .sap-trendy-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/banner1.jpg') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .sap-trendy-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .sap-trendy-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .sage-intacct-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/sagein.png') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .sage-intacct-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .sage-intacct-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .sage-100-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/100 saga.png') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .sage-100-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .sage-100-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .consulting-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/consulting.png') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .consulting-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .consulting-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .development-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/Software & Tech.jpg') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .development-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .development-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .implementation-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/banner.jpg') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .implementation-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .implementation-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .hosting-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/01.jpg') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .hosting-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .hosting-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .support-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/banner1.jpg') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .support-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .support-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .about-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/SAP Business One.jpg') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .about-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .about-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .contact-hero {
      position: relative;
      background: linear-gradient(135deg, rgba(26, 42, 76, 0.8) 0%, rgba(29, 78, 216, 0.85) 100%), url('images/banner1.jpg') center/cover no-repeat;
      color: var(--white);
      padding: 120px 5% 80px;
      text-align: center;
      overflow: hidden;
  }

  .contact-hero h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }

  .contact-hero p {
      font-size: 22px;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
      position: relative;
      z-index: 2;
  }

  .sap-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
  }

  .sap-sub-hero {
      width: 100%;
      height: 350px;
      object-fit: cover;
      display: block;
  }

  .sap-trendy-intro {
      padding: 80px 5%;
      background: var(--white);
  }

  .sap-intro-split {
      display: flex;
      align-items: center;
      gap: 50px;
  }

  .sap-intro-image {
      flex: 1;
  }

  .sap-intro-image img {
      width: 100%;
      height: auto;
      border-radius: 12px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      display: block;
  }

  .sap-intro-content {
      flex: 1;
      text-align: left;
  }

  .sap-intro-content p {
      font-size: 18px;
      color: var(--gray);
      line-height: 1.8;
      margin-bottom: 20px;
  }

  @media (max-width: 992px) {
      .sap-intro-split {
          flex-direction: column;
          text-align: center;
      }

      .sap-intro-content {
          text-align: center;
      }
  }

  .sap-highlights-bg {
      background: var(--light);
      padding: 80px 5%;
  }

  .sap-highlights-intro {
      text-align: center;
      margin-bottom: 40px;
  }

  .sap-highlights-intro h2 {
      font-size: 32px;
      color: var(--navy);
      margin-bottom: 20px;
      font-weight: 800;
  }

  .sap-highlights-intro p {
      max-width: 800px;
      margin: 0 auto;
      color: var(--gray);
      font-size: 18px;
      line-height: 1.8;
  }

  .sap-highlights {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
  }

  .sap-highlight-card {
      background: var(--white);
      border-radius: 12px;
      padding: 40px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      border-top: 4px solid var(--orange);
      flex: 1 1 350px;
      max-width: 480px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .sap-highlight-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  }

  .sap-highlight-card h3 {
      font-size: 22px;
      color: var(--navy);
      margin-bottom: 20px;
  }

  .sap-bento-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      padding: 60px 5%;
  }

  .sap-bento-grid.consulting-grid {
      grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: 1200px) {
      .sap-bento-grid.consulting-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 768px) {
      .sap-bento-grid.consulting-grid {
          grid-template-columns: 1fr;
      }
  }

  .bento-item {
      background: linear-gradient(145deg, #ffffff, #f0f4f8);
      border-radius: 16px;
      padding: 35px;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05), -5px -5px 15px rgba(255, 255, 255, 0.8);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.5);
  }

  .bento-item:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.08), -8px -8px 20px rgba(255, 255, 255, 0.9);
  }

  .bento-icon {
      font-size: 36px;
      margin-bottom: 20px;
      background: var(--light);
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05);
  }

  .bento-item h3 {
      font-size: 22px;
      color: var(--navy);
      margin-bottom: 12px;
  }

  .bento-item p {
      color: var(--gray);
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 20px;
  }

  .bento-features {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .bento-features li {
      font-size: 15px;
      color: var(--dark);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .bento-features li::before {
      content: '✓';
      color: var(--teal);
      font-weight: bold;
  }

  .sap-industries-section {
      padding: 80px 5%;
      background: var(--navy);
      color: var(--white);
      text-align: center;
  }

  .sap-industries-section h2 {
      font-size: 32px;
      margin-bottom: 40px;
  }

  .sap-industries-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
  }

  .industry-tag {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      padding: 12px 24px;
      border-radius: 30px;
      font-size: 16px;
      font-weight: 500;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
      cursor: default;
  }

  .industry-tag:hover {
      background: var(--orange);
      border-color: var(--orange);
      transform: translateY(-3px);
  }

  .sap-cta-section {
      padding: 100px 5%;
      text-align: center;
      background: linear-gradient(135deg, var(--teal) 0%, var(--blue) 100%);
      color: var(--white);
  }

  .sap-cta-section h2 {
      font-size: 36px;
      margin-bottom: 20px;
  }

  .sap-cta-section p {
      font-size: 18px;
      max-width: 600px;
      margin: 0 auto 30px;
      opacity: 0.9;
      line-height: 1.6;
  }

  .sap-btn {
      display: inline-block;
      padding: 15px 35px;
      background: var(--orange);
      color: white;
      font-weight: 700;
      border-radius: 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: background 0.3s ease, transform 0.2s ease;
      font-size: 16px;
      box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
      border: none;
      cursor: pointer;
  }

  .sap-btn:hover {
      background: #ea6c0a;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(249, 115, 22, 0.6);
  }