:root {
      --bg: #050509;
      --bg-soft: #101018;
      --accent: #0bfa92;
      --accent-soft: rgba(244, 182, 55, 0.07);
      --text: #f5f5f7;
      --muted: #a6a7b0;
      --border: #252534;
      --card: #14141f;
      --danger: #0bfa92;
    }

    header.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1030; /* above Bootstrap components */
  backdrop-filter: blur(14px);
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 9, 0.9),
    rgba(5, 5, 9, 0.4) 60%,
    transparent
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  /* remove padding from header, Bootstrap navbar has its own */
}


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

    body {
      font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top left, #1d1530 0, #050509 50%, #050509 100%);
      color: var(--text);
      line-height: 1.6;
      scroll-behavior: smooth;
    }


    h2,h5,h3,h4,h1 {
      font-family: playfair display, serif;
    }
    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    /* Layout */

    .container {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(14px);
      background: linear-gradient(to bottom, rgba(5, 5, 9, 0.9), rgba(5, 5, 9, 0.4) 60%, transparent);
      border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.9rem 0;
    }

    .logo-mark {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .logo-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 20%, #ffe6a7, #f4b637 40%, #b577ff 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      color: #120b07;
      box-shadow: 0 0 22px rgba(244, 182, 55, 0.4);
    }

    .logo-text-main {
      font-weight: 600;
      letter-spacing: 0.08em;
      font-size: 0.86rem;
      text-transform: uppercase;
    }

    .logo-text-sub {
      font-size: 0.7rem;
      color: var(--muted);
    }

    .nav-links {
      display: flex;
      gap: 1.75rem;
      font-size: 0.86rem;
    }

    .nav-links a {
      color: var(--muted);
      position: relative;
      padding-bottom: 0.2rem;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: var(--accent);
      transition: width 0.22s ease;
    }

    .nav-links a:hover {
      color: var(--text);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-cta {
      display: none;
    }

    @media (min-width: 900px) {
      .nav-cta {
        display: flex;
      }
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      padding: 0.55rem 1.1rem;
      border-radius: 999px;
      font-size: 0.85rem;
      font-weight: 500;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
      background: none;
      color: var(--text);
    }

    .btn-primary {
      /* background: linear-gradient(135deg, #f4b637, #0bfa92); */
      /* background: linear-gradient(135deg, #0bfa92, #0f2027); */
      background: linear-gradient(135deg, #0bfa92, #0ca3fe);

      /* background: linear-gradient(135deg, #0bfa92, #00c6ff); */

      color: #1b1206;
      box-shadow: 0 12px 30px rgba(22, 196, 249, 0.35);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 40px rgba(22, 147, 249, 0.45);
    }

    .btn-outline {
      border-color: var(--border);
      background: rgba(10, 10, 18, 0.8);
    }

    .btn-outline:hover {
      border-color: var(--accent);
      background: rgba(15, 15, 25, 0.9);
    }

    /* Hero */

    .hero {
      /* padding: 3.5rem 0 3rem; */
    }

    @media (min-width: 900px) {
      .hero {
        /* padding: 4.5rem 0 4rem; */
      }
    }

    .hero-grid {
      display: grid;
      gap: 2.5rem;
    }

    @media (min-width: 900px) {
      .hero-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: center;
      }
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.2rem 0.7rem 0.2rem 0.25rem;
      border-radius: 999px;
      background: rgba(10, 10, 18, 0.9);
      border: 1px solid rgba(55, 168, 244, 0.45);
      margin-bottom: 1rem;
      font-size: 0.75rem;
      color: var(--muted);
    }

    .hero-tag-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
    }

    .hero-title {
      font-family: "Playfair Display", serif;
      font-size: 2rem;
      line-height: 1.2;
      margin-bottom: 0.75rem;
    }

    @media (min-width: 900px) {
      .hero-title {
        font-size: 2.6rem;
      }
    }

    .hero-title span {
      background: linear-gradient(120deg, #009655, #0bfa92, #0bfa92, #0bfa92);
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-sub {
      font-size: 0.96rem;
      color: var(--muted);
      max-width: 480px;
      margin-bottom: 1.5rem;
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1.75rem;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      font-size: 0.8rem;
      color: var(--muted);
    }

    .hero-meta span strong {
      color: var(--accent);
      font-weight: 600;
    }

    .hero-showcase {
      border-radius: 1.5rem;
      background: radial-gradient(circle at top, rgba(244, 182, 55, 0.1), rgba(9, 9, 17, 0.95));
      border: 1px solid rgba(255, 255, 255, 0.04);
      padding: 1.2rem;
      display: grid;
      gap: 1rem;
      box-shadow: 0 20px 55px rgba(0, 0, 0, 0.65);
    }

    .hero-pill {
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.7rem;
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }

    .mini-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.4rem;
      margin-top: 0.8rem;
    }

    .mini-card {
      background: rgba(8, 8, 16, 0.9);
      border-radius: 0.75rem;
      border: 1px solid rgba(255, 255, 255, 0.05);
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      text-align: center;
      padding: 0.5rem;
      color: var(--muted);
      gap: 0.3rem;
    }

    .hero-stats {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1.1rem;
      margin-top: 0.5rem;
      font-size: 0.78rem;
    }

    .hero-stat {
      flex: 1;
      min-width: 90px;
    }

    .hero-stat strong {
      display: block;
      font-size: 1rem;
      color: var(--accent);
    }

    /* Sections */

    section {
      padding: 5.5rem 0rem;
    }

    section:nth-of-type(odd) {
      background: radial-gradient(circle at top, rgba(25, 25, 40, 0.85), #050509 40%, #050509 100%);
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .section-title {
      font-size: 1.4rem;
      font-weight: 600;
    }

    .section-sub {
      font-size: 0.84rem;
      color: var(--muted);
      max-width: 410px;
      border-left:  4px solid var(--accent);
      padding-left: 0.9rem;
    }

    /* About */

    .about-grid {
      display: grid;
      gap: 1.8rem;
    }

    @media (min-width: 800px) {
      .about-grid {
        grid-template-columns: 3fr 2fr;
        align-items: flex-start;
      }
    }

    .about-text {
      font-size: 0.9rem;
      color: var(--muted);
    }

    .about-text p + p {
      margin-top: 0.7rem;
    }

    .about-highlight {
      margin-top: 1.2rem;
      display: grid;
      gap: 0.7rem;
      font-size: 0.85rem;
    }

    .about-highlight strong {
      color: var(--accent);
      font-weight: 500;
    }

    .about-card {
      background: rgba(12, 12, 20, 0.95);
      border-radius: 1.1rem;
      padding: 1.1rem 1rem;
      border: 1px solid rgba(255, 255, 255, 0.04);
      font-size: 0.84rem;
      color: var(--muted);
    }

    .about-card h4 {
      font-size: 0.92rem;
      margin-bottom: 0.4rem;
      color: var(--text);
    }

    /* Services */
    .services-marquee {
                background: #0f2027;
                overflow: hidden;
            }

            .servicesSwiper .swiper-slide {

                width: auto;
                padding: 0 40px;
                font-size: 1.5rem;
                font-weight: 600;
                color: #0bfa92;
                white-space: nowrap;
                transition-timing-function: linear !important;
            }


            .servicesSwiper .swiper-slide i {
                font-size: 1.2rem;
                color: #0bfa92;
            }

            .servicesSwiper {
                touch-action: none;
                width: 100%;
            }

            .servicesSwiper * {
                pointer-events: none;
                /* 🚫 block click / mouse */
            }



            .servicesSwiper .swiper-slide {
                width: auto;
                padding: 0 30px;
                font-size: 18px;
                white-space: nowrap;
            }

            .marquee {
                width: 100%;
                overflow: hidden;
                background: transparent;
                touch-action: none;
                /* 🚫 disable mobile gestures */
            }

            .marquee-track {
                display: flex;
                gap: 40px;
                white-space: nowrap;
                will-change: transform;
                pointer-events: none;
                /* 🚫 disable mouse click */
            }

            .marquee-track {
                color: #0bfa92;
            }

            .marquee-track span {
                font-size: 18px;
                white-space: nowrap;
            }

    .grid-3 {
      display: grid;
      gap: 1.1rem;
    }

    @media (min-width: 900px) {
      .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .service-card {
      background: rgba(9, 9, 16, 0.96);
      border-radius: 1.1rem;
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 1.1rem 1rem;
      font-size: 0.86rem;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }

    .service-label {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }

    .service-card h3 {
      font-size: 0.98rem;
      margin-bottom: 0.15rem;
    }

    .service-pill {
      display: inline-flex;
   
      padding: 0.18rem 0.55rem;
      border-radius: 999px;
      font-size: 0.7rem;
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: var(--muted);
      margin-top: 0.35rem;
    }

    .price {
      margin-top: 0.45rem;
      font-size: 0.9rem;
    }

    .price strong {
      font-size: 1.1rem;
      color: var(--accent);
    }

    /* Work */

    .work-grid {
      display: grid;
      gap: 1.4rem;
    }

    @media (min-width: 900px) {
      .work-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .work-card {
      background: rgba(9, 9, 16, 0.96);
      border-radius: 1.1rem;
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 0.95rem 0.95rem 1.1rem;
      font-size: 0.83rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .work-tag {
      font-size: 0.7rem;
      color: var(--muted);
    }

    .work-name {
      font-size: 0.95rem;
      font-weight: 500;
      margin-bottom: 0.1rem;
    }

    .work-desc {
      color: var(--muted);
      font-size: 0.8rem;
    }

    .work-link {
      margin-top: 0.55rem;
      font-size: 0.78rem;
      color: var(--accent);
    }

    /* Logo Gallery */

    .logo-grid {
      display: grid;
      gap: 0.75rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (min-width: 800px) {
      .logo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    .logo-tile {
      border-radius: 0.9rem;
      background: radial-gradient(circle at top, rgba(255, 255, 255, 0.04), rgba(10, 10, 18, 0.98));
      border: 1px solid rgba(255, 255, 255, 0.05);
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      color: var(--muted);
      text-align: center;
      padding: 0.4rem;
    }

    /* Process */

    .process-grid {
      display: grid;
      gap: 1rem;
    }

    @media (min-width: 900px) {
      .process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .process-step {
      background: rgba(9, 9, 16, 0.96);
      border-radius: 1.1rem;
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 1rem 0.9rem;
      font-size: 0.84rem;
      color: var(--muted);
    }

    .process-step h4 {
      font-size: 0.9rem;
      margin-bottom: 0.2rem;
      color: var(--text);
    }

    .process-step span {
      display: inline-block;
      margin-bottom: 0.3rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent);
    }

    /* Testimonials */

    .testimonials {
      display: grid;
      gap: 1rem;
    }

    @media (min-width: 800px) {
      .testimonials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .testimonial-card {
      background: rgba(9, 9, 16, 0.96);
      border-radius: 1.1rem;
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 1rem;
      font-size: 0.84rem;
      color: var(--muted);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .testimonial-name {
      margin-top: 0.5rem;
      font-size: 0.88rem;
      color: var(--text);
    }

    .testimonial-role {
      color:#0ae286;
      font-size: 0.75rem;
      color: var(--muted);
    }

    /* Contact */

    .contact-grid {
      display: grid;
      gap: 1.5rem;
    }

    @media (min-width: 800px) {
      .contact-grid {
        grid-template-columns: 1.2fr 1fr;
        align-items: start;
      }
    }

    .contact-text {
      font-size: 0.9rem;
      color: var(--muted);
      margin-bottom: 1.1rem;
    }

    form {
      display: grid;
      gap: 0.7rem;
    }

    .field {
      display: grid;
      gap: 0.25rem;
      font-size: 0.8rem;
    }

    .field label {
      color: var(--muted);
    }

    .field input,
    .field textarea {
      background: rgba(9, 9, 16, 0.96);
      border-radius: 0.7rem;
      border: 1px solid rgba(255, 255, 255, 0.06);
      padding: 0.55rem 0.7rem;
      font-family: inherit;
      font-size: 0.85rem;
      color: var(--text);
      outline: none;
    }

    .field input:focus,
    .field textarea:focus {
      border-color: var(--accent);
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    footer {
      padding: 1.5rem 0 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 0.78rem;
      color: var(--muted);
    }

    .footer-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: space-between;
      align-items: center;
    }

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

    .mobile-menu {
      display: block;
      width: 28px;
      height: 22px;
      position: relative;
      cursor: pointer;
    }

    .mobile-menu span {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--muted);
      border-radius: 999px;
      transition: transform 0.16s ease, top 0.16s ease, opacity 0.16s ease;
    }

    .mobile-menu span:nth-child(1) {
      top: 3px;
    }

    .mobile-menu span:nth-child(2) {
      top: 10px;
    }

    .mobile-menu span:nth-child(3) {
      top: 17px;
    }

    .nav-links-mobile {
      display: none;
      flex-direction: column;
      gap: 0.8rem;
      font-size: 0.85rem;
      padding: 0.7rem 0 0.9rem;
    }

    .nav-links-mobile a {
      color: var(--muted);
    }

    .nav-open .mobile-menu span:nth-child(1) {
      top: 10px;
      transform: rotate(45deg);
    }

    .nav-open .mobile-menu span:nth-child(2) {
      opacity: 0;
    }

    .nav-open .mobile-menu span:nth-child(3) {
      top: 10px;
      transform: rotate(-45deg);
    }

    .nav-open .nav-links-mobile {
      display: flex;
    }

    @media (min-width: 900px) {
      .mobile-menu {
        display: none;
      }

      .nav-links-mobile {
        display: none !important;
      }
    }