/* ============================================================
   INNOVATIVEBIZ TECHNOLOGIES (IBT) - MAIN STYLESHEET
   Industry Standard Modular CSS Architecture
   ============================================================ */

@import url('base.css');
@import url('nav.css');
@import url('hero.css');
@import url('services.css');
/* @import url('ai-band.css'); */
/* @import url('voice-demo.css'); */
@import url('work.css');
@import url('stats.css');
@import url('products.css');
/* @import url('engage.css'); */
@import url('process.css');
@import url('faq.css');
@import url('inquiry.css');
@import url('footer.css');



/* ============================================================
           DESIGN TOKENS & SYSTEM
           ============================================================ */
:root {
   --brand: #0e4b7a;
   --brand-hover: #093457;
   --navy: #091e32;
   --cyan: #00a8e8;
   --violet: #6366f1;
   --tint: #e7f1fc;
   --wash: #f8fbfe;
   --line: #e2ecf6;
   --line-hover: #b8d4f0;
   --mute: #64748b;
   --body: #334155;
   --ink: #0f172a;
   --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
   --sh-sm: 0 2px 8px -2px rgba(14, 75, 122, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
   --sh-hover: 0 14px 28px -6px rgba(14, 75, 122, 0.12), 0 6px 12px -3px rgba(0, 0, 0, 0.06);
}


/* ============================================================
           TECH STACK SECTION
           ============================================================ */
.tech {
   background: var(--wash);
   position: relative;
   padding: 1rem 0 1rem;
   overflow: hidden;
}

/* Ambient Glow Spheres */
.tech::before {
   content: "";
   position: absolute;
   top: 25%;
   left: 50%;
   transform: translate(-50%, -50%);
   /* width: 1000px; */
   height: 550px;
   background: radial-gradient(ellipse at center, rgba(0, 168, 232, 0.09) 0%, rgba(99, 102, 241, 0.04) 45%, transparent 70%);
   pointer-events: none;
   z-index: 0;
}

.tech::after {
   content: "";
   position: absolute;
   bottom: -5%;
   right: 5%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(14, 75, 122, 0.05) 0%, transparent 70%);
   pointer-events: none;
   z-index: 0;
}



/* ============================================================
           HEADER & TYPOGRAPHY
           ============================================================ */
.tech-head {
   text-align: start;
   /* max-width: 820px; */
   margin-bottom: 2rem;
}



@keyframes pulseDot {

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

   50% {
      transform: scale(0.8);
      opacity: 0.5;
   }
}

.tech-h2 {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 800;
   color: var(--navy);
   letter-spacing: -0.035em;
   margin: 0 auto 1.1rem;
   line-height: 1.18;
}

.tech-h2 .gradient-text {
   background: linear-gradient(135deg, #0e4b7a 0%, #0098db 50%, #6366f1 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.tech-sub {
   font-size: 1.1rem;
   color: var(--body);
   max-width: 680px;
   margin: 0 auto;
   line-height: 1.6;
}

/* ============================================================
           CATEGORY FILTER PILLS (UI ENHANCEMENT)
           ============================================================ */
.tech-filter-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 2.75rem;
   position: relative;
   z-index: 2;
}

.filter-chip {
   appearance: none;
   border: 1px solid var(--line);
   background: #ffffff;
   color: var(--body);
   font-family: var(--font-sans);
   font-size: 0.84rem;
   font-weight: 600;
   padding: 7px 16px;
   border-radius: 9999px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   box-shadow: var(--sh-sm);
   transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-chip:hover {
   color: var(--navy);
   border-color: var(--line-hover);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(14, 75, 122, 0.08);
}

.filter-chip.active {
   background: var(--brand);
   color: #ffffff;
   border-color: var(--brand);
   box-shadow: 0 4px 14px rgba(14, 75, 122, 0.25);
}

.filter-chip .chip-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
}

.filter-chip.active .chip-dot {
   background: #ffffff !important;
}

/* ============================================================
           MARQUEE DISPLAY
           ============================================================ */
.marquee-container {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 18px;
   padding: 10px 0;
   overflow: hidden;
   /* Modern smooth gradient edge fades */
   mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, transparent 100%);
   -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, transparent 100%);
}

.mq-track {
   display: flex;
   width: max-content;
   animation: scrollLeft 50s linear infinite;
   will-change: transform;
   padding: 6px 0;
}

.mq-track.reverse {
   animation: scrollRight 54s linear infinite;
}

@keyframes scrollLeft {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-50%);
   }
}

@keyframes scrollRight {
   from {
      transform: translateX(-50%);
   }

   to {
      transform: translateX(0);
   }
}

.marquee-container:hover .mq-track {
   animation-play-state: paused;
}

/* ============================================================
           TECH ITEM PILLS (PREMIUM CARD DESIGN)
           ============================================================ */
.mq-item {
   display: inline-flex;
   align-items: center;
   gap: 13px;
   padding: 9px 18px 9px 10px;
   margin: 0 8px;
   background: #ffffff;
   border: 1px solid var(--line);
   border-radius: 9999px;
   box-shadow: var(--sh-sm);
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   white-space: nowrap;
   cursor: pointer;
   flex-shrink: 0;
   user-select: none;
   position: relative;
}

.mq-item.dimmed {
   opacity: 0.28;
   transform: scale(0.96);
   filter: grayscale(85%);
}

.mq-item:hover {
   transform: translateY(-3px) scale(1.02);
   border-color: var(--item-brand-color, var(--line-hover));
   box-shadow: 0 12px 26px -6px var(--item-glow-color, rgba(14, 75, 122, 0.15)), 0 4px 10px rgba(0, 0, 0, 0.04);
   z-index: 3;
}

.mq-icon {
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 11px;
   background: var(--item-bg, #f1f6fb);
   border: 1px solid var(--item-border, rgba(0, 0, 0, 0.03));
   overflow: hidden;
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mq-item:hover .mq-icon {
   transform: scale(1.08);
}

.mq-icon svg {
   width: 20px;
   height: 20px;
   display: block;
   transition: transform 0.25s ease;
}

.mq-content {
   display: flex;
   flex-direction: column;
   line-height: 1.2;
}

.mq-name {
   font-weight: 700;
   font-size: 14px;
   color: var(--navy);
   letter-spacing: -0.015em;
}

.mq-tag {
   font-size: 10px;
   font-weight: 600;
   color: var(--mute);
   letter-spacing: 0.02em;
   text-transform: uppercase;
}

.mq-cat-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   flex-shrink: 0;
   margin-left: 2px;
}

/* ============================================================
           RESPONSIVENESS & ACCESSIBILITY
           ============================================================ */
@media (max-width: 768px) {
   /* .tech {
      padding: 3.5rem 0 4.5rem;
   } */

   .tech-head {
      margin-bottom: 2.25rem;
   }

   .tech-filter-nav {
      gap: 6px;
      margin-bottom: 2rem;
   }

   .filter-chip {
      font-size: 0.78rem;
      padding: 5px 12px;
   }

   .mq-item {
      padding: 7px 15px 7px 8px;
      margin: 0 6px;
      gap: 10px;
   }

   .mq-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
   }

   .mq-icon svg {
      width: 17px;
      height: 17px;
   }

   .mq-name {
      font-size: 13px;
   }

   .mq-tag {
      font-size: 9px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .mq-track {
      animation: none !important;
   }

   .marquee-container {
      overflow-x: auto;
      scrollbar-width: none;
   }

   .marquee-container::-webkit-scrollbar {
      display: none;
   }
}



.clients {
   background: var(--wash);
   position: relative;
   padding: 2rem 0 2rem;
   overflow: hidden;
}



.clients::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 1000px;
   height: 400px;
   background: radial-gradient(ellipse at center, rgba(124, 92, 255, .05) 0%, transparent 70%);
   pointer-events: none;
   z-index: 0;
}

.clients::after {
   content: "";
   position: absolute;
   top: 30%;
   left: 20%;
   width: 280px;
   height: 280px;
   background: radial-gradient(ellipse at center, rgba(42, 169, 232, .06) 0%, transparent 70%);
   pointer-events: none;
   z-index: 0;
}

.clients .wrap {
   /* max-width: 1240px; */
   margin: 0 auto;
   padding: 0 24px;
   position: relative;
   z-index: 1;
}

/* heading */
.clients-head {
   text-align: center;
   margin-bottom: 3rem;
}

.clients-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 600;
   font-size: 0.78rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--violet);
   background: #f3f0ff;
   padding: 7px 18px;
   border-radius: 999px;
   margin-bottom: 1.1rem;
}

.clients-kicker::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--violet);
   box-shadow: 0 0 0 3px rgba(124, 92, 255, .2);
   animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

   50% {
      opacity: .6;
      transform: scale(.85);
   }
}

.clients-h2 {
   font-size: clamp(1.8rem, 3.5vw, 2.6rem);
   font-weight: 700;
   color: var(--navy);
   letter-spacing: -0.025em;
   max-width: 720px;
   margin: 0 auto 0.85rem;
   line-height: 1.15;
}

.clients-sub {
   font-size: 1.08rem;
   color: var(--body);
   max-width: 600px;
   margin: 0 auto;
   line-height: 1.55;
}

/* ============================================================
       SINGLE-ROW MARQUEE
       ============================================================ */
.clients-marquee {
   position: relative;
   padding: 14px 0;
   overflow: hidden;
}

.clients-marquee::before,
.clients-marquee::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   width: 160px;
   z-index: 4;
   pointer-events: none;
}

.clients-marquee::before {
   left: 0;
   background: linear-gradient(90deg, var(--wash) 12%, transparent 100%);
}

.clients-marquee::after {
   right: 0;
   background: linear-gradient(270deg, var(--wash) 12%, transparent 100%);
}

.clients-mq-track {
   display: flex;
   width: max-content;
   animation: clientsScroll 60s linear infinite;
   will-change: transform;
}

@keyframes clientsScroll {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-50%);
   }
}

.clients-marquee:hover .clients-mq-track {
   animation-play-state: paused;
}

/* ============================================================
       CLIENT PILL
       ============================================================ */
.client-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 30px;
   margin: 0 11px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 999px;
   box-shadow: var(--sh-sm);
   transition:
      border-color .3s ease,
      box-shadow .3s ease,
      transform .3s cubic-bezier(.22, 1, .36, 1);
   white-space: nowrap;
   cursor: default;
   flex-shrink: 0;
}

.client-item:hover {
   border-color: #cfdeee;
   box-shadow: var(--sh-md);
   transform: translateY(-2px);
}

/* ---------- logo container (works for both image & monogram) ---------- */
.client-mark {
   width: 42px;
   height: 42px;
   border-radius: 11px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-weight: 800;
   font-size: 13.5px;
   letter-spacing: -0.02em;
   color: #fff;
   position: relative;
   overflow: hidden;
   background: var(--tint);
   /* fallback if no gradient */
}

/* when a real image logo is used */
.client-mark.has-logo {
   background: #fff;
   border: 1px solid var(--line);
   padding: 5px;
}

.client-mark.has-logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
   border-radius: 6px;
}

/* subtle inner glow only for monogram */
.client-mark:not(.has-logo)::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 60%);
   pointer-events: none;
}

.client-name {
   font-weight: 600;
   font-size: 15px;
   color: var(--navy);
   letter-spacing: -.01em;
}

/* ============================================================
       RESPONSIVE
       ============================================================ */
@media (max-width: 720px) {
   /* .clients {
      padding: 3rem 0 4rem;
   } */

   .clients-marquee::before,
   .clients-marquee::after {
      width: 70px;
   }

   .client-item {
      padding: 12px 22px;
      margin: 0 8px;
      gap: 10px;
   }

   .client-mark {
      width: 34px;
      height: 34px;
      font-size: 11.5px;
      border-radius: 9px;
   }

   .client-name {
      font-size: 13.5px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .clients-mq-track {
      animation: none !important;
   }

   .clients-marquee {
      overflow-x: auto;
      scrollbar-width: none;
   }

   .clients-marquee::-webkit-scrollbar {
      display: none;
   }
}