/*
 * index.css � Homepage styles
 * ────────────────────────────────────────────────────────
 *  01. UTILITIES      buttons, section typography helpers
 *  02. HERO           hero section, slide cycler, blobs
 *  03. ABOUT          about grid, image frame
 *  04. OUR WORK       outstanding band, video modal
 *  05. FOUNDERS       founder cards, social icons
 *  06. SERVICES       intro, flip cards
 *  07. STATS          stats grid, counters
 *  08. PORTFOLIO      carousel, portfolio items
 *  09. CLIENTS        scrolling logo belt rows
 *  10. TESTIMONIALS   testi carousel and cards
 *  11. FOUNDER QUOTES quote cards
 *  12. CTA            call-to-action band
 *  13. BACK TO TOP    fixed scroll-up button
 *  14. ANIMATIONS     reveal, pulse keyframes
 *  15. RESPONSIVE     media queries
 *  16. LIGHT MODE     premium light-theme overrides
 * ────────────────────────────────────────────────────────
 */

    /* === 01. UTILITIES � BUTTONS === */
    .btn-red {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent);
      color: #0a0a0f;
      padding: 14px 30px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.9rem;
      transition: all 0.3s;
      cursor: pointer;
      border: none;
    }

    .btn-red:hover {
      background: #15803d;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(22, 163, 74, 0.38);
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      color: var(--muted);
      padding: 14px 30px;
      border-radius: 999px;
      font-weight: 500;
      font-size: 0.9rem;
      transition: all 0.3s;
    }

    .btn-ghost:hover {
      border-color: var(--muted);
      color: var(--text);
    }

    .btn-white {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: white;
      color: #0a0a0f;
      padding: 14px 30px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.9rem;
      transition: all 0.3s;
    }

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

    .mt-btn {
      margin-top: 32px;
    }

    /* === 01. UTILITIES � SECTION TYPOGRAPHY === */
    .sec-eyebrow {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #a8e832 !important;
      margin-bottom: 14px;
      display: block;
    }

    .sec-heading {
      font-family: var(--font-head);
      font-size: clamp(2.8rem, 5vw, 4.5rem);
      line-height: 1.05;
      letter-spacing: 1px;
      margin-bottom: 18px;
      color: var(--text);
    }

    .sec-heading em {
      font-family: 'Outfit', sans-serif;
      font-style: normal;
      color: var(--accent2);
      font-size: 0.9em;
      font-weight: 700;
      text-transform: uppercase;
    }

    .sec-sub {
      color: var(--muted);
      font-size: 1rem;
      max-width: 520px;
    }

    .sec-body {
      color: var(--muted);
      font-size: 0.97rem;
      line-height: 1.85;
      margin-bottom: 20px;
    }

    .sec-header.centered {
      text-align: center;
      margin-bottom: 50px;
    }

    .sec-header.centered .sec-sub {
      margin: 0 auto;
    }

    .center-btn {
      text-align: center;
      margin-top: 40px;
    }

    /* === 02. HERO === */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 160px !important;
      padding-bottom: 100px;
      padding-left: 5%;
      padding-right: 5%;
      position: relative;
      overflow: hidden;
      background: var(--bg);
      width: 100%;
    }

    .hero-bg-img {
      position: absolute;
      inset: 0;
  background-image: url('../../images/testimonials-section-dark-background.png');
      background-size: cover;
      background-position: center;
      z-index: 0;
      transition: background-image 0.8s ease-in-out, background-position 0.8s ease-in-out;
    }

    .hero-bg-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.12) !important;
      z-index: 1;
    }

    [data-theme="light"] .hero-bg-overlay {
      background: rgba(0, 0, 0, 0.08) !important;
    }

    .hero-noise {
      position: absolute;
      inset: 0;
      opacity: var(--noise-op);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-size: 200px;
      pointer-events: none;
    }

    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.18;
      pointer-events: none;
      z-index: 1;
    }

    [data-theme="light"] .blob {
      opacity: 0.12;
    }

    .blob-1 {
      width: 600px;
      height: 600px;
      background: #16a34a;
      top: -200px;
      right: -100px;
    }

    .blob-2 {
      width: 400px;
      height: 400px;
      background: #a8e832;
      bottom: -100px;
      left: -100px;
    }

    .blob-3 {
      width: 300px;
      height: 300px;
      background: #15803d;
      top: 50%;
      left: 40%;
    }

    .hero-wrap {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      position: relative;
      z-index: 2;
      max-width: 860px;
      margin: auto;
    }

    .hero-heading-wrap {
      display: none !important;
    }

    .hero-sub {
      display: none !important;
    }

    #wordProgress {
      display: none !important;
    }

    /* Hero slide cycler */
    .hero-slide-wrap {
      position: relative;
      width: 100%;
      height: 32vh;
      min-height: 180px;
      max-height: 320px;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .hero-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      opacity: 0;
      transform: translateX(100%);
      transition: none;
      pointer-events: none;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .hero-slide.entering {
      animation: slideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .hero-slide.visible {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
      transition: none;
    }

    .hero-slide.exiting {
      animation: slideOut 0.6s cubic-bezier(0.4, 0, 1, 1) forwards;
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateX(80px) }
      to { opacity: 1; transform: translateX(0) }
    }

    @keyframes slideOut {
      from { opacity: 1; transform: translateX(0) }
      to { opacity: 0; transform: translateX(-80px) }
    }

    .hero-slide-big {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.9rem, 5.8vh, 5rem);
      line-height: 1.05;
      letter-spacing: 2px;
      color: #a8e832;
      margin: 0 0 10px;
      text-transform: uppercase;
      font-style: normal;
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
      max-width: 800px;
    }

    .hero-slide-small {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(0.8rem, 1.7vh, 1rem);
      color: rgba(255, 255, 255, 0.92) !important;
      line-height: 1.5;
      max-width: 520px;
      margin: 0 auto;
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    }

    .hero-slide-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 28px;
    }

    .hero-slide-dot {
      width: 28px;
      height: 3px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.22);
      overflow: hidden;
      position: relative;
    }

    .hero-slide-dot-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0;
      background: #a8e832;
      border-radius: 999px;
    }

    .hero-slide-dot.active .hero-slide-dot-fill {
      animation: dotProgress 3s linear forwards;
    }

    .hero-slide-dot.done .hero-slide-dot-fill {
      width: 100%;
      opacity: 0.45;
    }

    @keyframes dotProgress {
      from { width: 0 }
      to { width: 100% }
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 48px;
      justify-content: center;
    }

    .hero-stats {
      display: flex;
      align-items: center;
      gap: 24px;
      justify-content: center;
    }

    .hstat {
      text-align: center;
    }

    .hstat strong {
      display: block;
      font-family: var(--font-head);
      font-size: 2rem;
      color: #ffffff;
      line-height: 1;
    }

    .hstat span {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.55);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .hstat-divider {
      width: 1px;
      height: 40px;
      background: rgba(255, 255, 255, 0.2);
    }

    .hero-diagonal-svg {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 90px;
      z-index: 3;
      pointer-events: none;
    }

    /* Marquee top spacing on home page */
    .hero + .marquee-strip {
  margin-top: 0px;
    }

    /* === 03. ABOUT === */
    .about-section {
      background: var(--bg2);
      padding: 70px 0 0;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .about-img-col {
      position: relative;
    }

    .about-img-frame {
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
      height: 560px;
    }

    .about-img-ph {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #052e16 0%, #14532d 40%, #16a34a 100%);
      display: flex;
      align-items: flex-end;
      padding: 30px;
      position: relative;
      background-image: url('../../images/team-reviewing-documents-office.png');
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
    }

    .about-img-ph::before {
      content: '';
      position: absolute;
      inset: 0;
      background: 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='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .img-overlay-text {
      display: none;
    }

    .about-img-small {
      position: absolute;
      bottom: 50px;
      left: -40px;
      width: 140px;
      height: 140px;
      border-radius: var(--radius);
      border: 3px solid var(--bg2);
      overflow: hidden;
      z-index: 3;
    }

    .about-img-ph2 {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #052e16, #16a34a);
      background-image: url('../../images/flashlab-creative-logo-full.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .about-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 16px 0;
    }

    .about-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.92rem;
      color: var(--muted);
    }

    .about-list li i {
      color: #a8e832 !important;
      font-size: 1rem;
      flex-shrink: 0;
    }

    /* === 04. OUR WORK � OUTSTANDING BAND + VIDEO === */
    .outstanding-section {
      position: relative;
      width: 100vw;
  margin-left: calc(50% - 50vw);
      padding: 100px 8% 90px;
      overflow: hidden;
      isolation: isolate;
      margin-top: 60px;
    }

    .outstanding-bg {
      position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
      background-image: url('../../images/office-collaboration-dark.png');
      background-size: cover;
      background-position: center;
  background-repeat: no-repeat;
      z-index: -3;
    }

.outstanding-bg canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
    }

    .outstanding-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.62);
      z-index: -2;
    }

    .outstanding-slant-top {
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: 80px;
      background: var(--bg2);
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
      z-index: 1;
    }

    .outstanding-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 60px;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
    }

    .outstanding-heading {
      font-family: var(--font-head);
      font-size: clamp(2.6rem, 4.5vw, 4rem);
      line-height: 1.05;
      letter-spacing: 1px;
      color: #ffffff;
      margin-bottom: 22px;
    }

    .outstanding-heading em {
      font-family: 'Outfit', sans-serif;
      font-style: normal;
      font-weight: 700;
      background: var(--accent2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-transform: uppercase;
    }

    .outstanding-body {
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.92rem;
      line-height: 1.9;
      max-width: 560px;
    }

    .outstanding-video-col {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Video play button */
    .video-play-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      background: none;
      border: none;
      cursor: pointer;
      transition: transform 0.3s;
    }

    .video-play-btn:hover {
      transform: scale(1.06);
    }

    .video-play-icon {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      border: 2px solid rgba(255, 255, 255, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.2rem;
      color: #ffffff;
      position: relative;
      transition: background 0.3s, border-color 0.3s;
    }

    .video-play-btn:hover .video-play-icon {
      background: var(--accent);
      border-color: var(--accent);
    }

    .video-play-icon::before {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, 0.18);
      animation: videoRipple 2.2s ease-out infinite;
    }

    .video-play-icon::after {
      content: '';
      position: absolute;
      inset: -22px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.08);
      animation: videoRipple 2.2s ease-out 0.6s infinite;
    }

    @keyframes videoRipple {
      0% { opacity: 1; transform: scale(1) }
      100% { opacity: 0; transform: scale(1.35) }
    }

    .video-play-label {
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.65);
    }

    /* Video modal overlay */
    .video-modal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s, visibility 0.35s;
    }

    .video-modal.active {
      opacity: 1;
      visibility: visible;
    }

    .video-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.88);
      backdrop-filter: blur(8px);
      cursor: pointer;
    }

    .video-modal-box {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 900px;
      background: #0a0a0f;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transform: scale(0.92) translateY(20px);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .video-modal.active .video-modal-box {
      transform: scale(1) translateY(0);
    }

    .video-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .video-modal-title {
      font-family: var(--font-head);
      font-size: 1rem;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.7);
    }

    .video-modal-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .video-yt-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #a8e832;
      color: #0a0a0f;
      padding: 7px 16px;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 600;
      transition: background 0.2s;
    }

    .video-yt-link:hover {
      background: #c4f042;
    }

    .video-modal-close {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.7);
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s;
    }

    .video-modal-close:hover {
      background: rgba(255, 255, 255, 0.15);
      color: white;
    }

    .video-embed-wrap {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
    }

    .video-embed-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

/* === FEATURED SERVICES CARDS === */
.svc-grid-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .svc-grid-bottom { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .svc-grid-bottom { 
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
  }
  .svc-grid-bottom::-webkit-scrollbar { display: none; }
  .svc-grid-bottom .svc-card { 
    flex: 0 0 85%; 
    scroll-snap-align: center; 
  }
  .svc-card .svc-desc {
    color: rgba(255,255,255,0.72);
    transform: translateY(0);
    display: none; /* Hide desc to save space, but show Explore */
  }
  .svc-card .svc-explore {
    opacity: 1;
    transform: translateY(0);
  }
}
.svc-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 380px;
  display: block;
  cursor: pointer;
  text-decoration: none;
}
.svc-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
  filter: brightness(0.45) saturate(0.9);
}
.svc-card:hover .svc-bg {
  transform: scale(1.08);
  filter: brightness(0.25) saturate(0.7);
}
.svc-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.4) 45%, transparent 100%);
  transition: opacity 0.4s;
}
.svc-card:hover .svc-gradient { opacity: 0.85; }
.svc-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.svc-card:hover .svc-accent { transform: scaleY(1); }
.svc-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 28px 26px;
  z-index: 2;
}
.svc-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  opacity: 0.9;
}
.svc-title {
  font-family: var(--font-head);
  font-size: 1.55rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 10px;
}
.svc-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0);
  line-height: 1.6;
  max-width: 280px;
  transform: translateY(12px);
  transition: color 0.35s 0.05s, transform 0.35s 0.05s;
}
.svc-card:hover .svc-desc {
  color: rgba(255,255,255,0.72);
  transform: translateY(0);
}
.svc-explore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s 0.1s, transform 0.35s 0.1s;
}
.svc-explore i {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0f;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  transition: transform 0.2s;
}
.svc-card:hover .svc-explore { opacity: 1; transform: translateY(0); }
.svc-card:hover .svc-explore i { transform: rotate(-45deg); }
.svc-num-badge {
  position: absolute;
  top: 20px; right: 20px;
  font-family: var(--font-head);
  font-size: 3.5rem;
  line-height: 1;
  color: rgba(255,255,255,0.07);
  letter-spacing: 2px;
  z-index: 2;
  transition: color 0.4s;
  pointer-events: none;
}
.svc-card:hover .svc-num-badge { color: rgba(168,232,50,0.12); }

    /* === 05. FOUNDERS CARDS (Who Made It) === */
    .made-it {
      padding: 80px 0 60px;
    }

    .made-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 340px));
      gap: 24px;
      justify-content: center;
    }

    .founder-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    }

    .founder-card:hover {
      transform: translateY(-5px);
      border-color: rgba(168, 232, 50, 0.4);
      box-shadow: 0 12px 40px rgba(168, 232, 50, 0.12);
    }

    .founder-photo {
      width: 100%;
      aspect-ratio: 1/1;
      overflow: hidden;
      position: relative;
      background: #111;
    }

    .founder-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
      transition: transform 0.4s;
    }

    .founder-card:hover .founder-photo img {
      transform: scale(1.04);
    }

    .founder-info {
      padding: 20px 22px 24px;
    }

    .founder-info h4 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      margin: 0 0 4px;
    }

    .founder-info > p {
      font-size: 0.82rem;
      color: var(--muted);
      margin: 0 0 14px;
    }

    .founder-socials {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
      justify-content: center;
      max-width: 222px;
      margin-inline: auto;
    }

    .founder-socials a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      text-decoration: none;
      flex-shrink: 0;
      transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    }

    .founder-socials a .s-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      border: 1.5px solid var(--border);
      background: var(--card);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      color: #ffffff;
      transition: all 0.28s ease;
    }

    .founder-socials a .s-label {
      display: none;
    }

    .founder-socials a:hover {
      transform: translateY(-4px);
    }

    .founder-socials a:hover .s-icon {
      border-color: #a8e832;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.6);
      box-shadow:
        0 0 0 1px #a8e832,
        0 0 6px 2px #a8e832,
        0 0 16px 4px rgba(168, 232, 50, 0.7),
        0 0 32px 8px rgba(168, 232, 50, 0.4),
        0 0 56px 12px rgba(168, 232, 50, 0.15);
    }

    .founder-socials a:hover .s-label {
      color: #a8e832;
    }

    /* === 06. SERVICES === */
    .services-section {
      padding: 60px 0 70px;
      transition: background 0.3s;
    }

    [data-theme="light"] .services-section {
      background: linear-gradient(180deg, #eef3fc 0%, #e8eef8 100%);
    }

    [data-theme="dark"] .services-section {
      background: #0f0f14;
    }

    .services-comprehensive {
      text-align: center;
      margin-bottom: 40px;
    }

    .services-comprehensive .comp-eyebrow {
      font-family: 'Outfit', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: #a8e832;
      display: block;
      margin-bottom: 10px;
    }

    .services-comprehensive .comp-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.8rem, 4vw, 3.2rem);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin: 0 0 6px;
      line-height: 1.1;
    }

    [data-theme="light"] .services-comprehensive .comp-title { color: #0a0a0f; }
    [data-theme="dark"] .services-comprehensive .comp-title { color: #f0f0f0; }

    .services-comprehensive .comp-sub {
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-size: clamp(1rem, 2vw, 1.4rem);
      font-weight: 400;
      margin: 0;
    }

    [data-theme="light"] .services-comprehensive .comp-sub { color: #666; }
    [data-theme="dark"] .services-comprehensive .comp-sub { color: #999; }

    .services-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: end;
      margin-bottom: 48px;
    }

    /* Make the heading fill the left column */
    .services-intro-left {
      container-type: inline-size;   /* lets children size off this column's width */
      display: flex;
      align-items: center;           /* vertically centers so there's no empty gap below */
    }

    .services-intro-left h2.main-heading {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.4rem, 5vw, 4rem);
      line-height: 1.05;
      font-size: clamp(2.2rem, 13cqw, 8rem);
      line-height: 0.9;
      letter-spacing: 1px;
      margin: 0 0 8px;
      margin: 0;
      width: 100%;
      text-transform: uppercase;
    }

    [data-theme="light"] .services-intro-left h2.main-heading { color: #0a0a0f; }
    [data-theme="dark"] .services-intro-left h2.main-heading { color: #f0f0f0; }

    .services-intro-left h3.sub-heading {
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-size: clamp(1.3rem, 2.5vw, 2rem);
      margin: 0;
      font-weight: 400;
    }

    [data-theme="light"] .services-intro-left h3.sub-heading { color: #555; }
    [data-theme="dark"] .services-intro-left h3.sub-heading { color: #aaa; }

    .services-intro-right p {
      font-family: 'Outfit', sans-serif;
      font-size: 0.97rem;
      line-height: 1.75;
      margin: 0 0 20px;
    }

    [data-theme="light"] .services-intro-right p { color: #444; }
    [data-theme="dark"] .services-intro-right p { color: #bbb; }

    .services-intro-right .checklist {
      list-style: none;
      padding: 0;
      margin: 0 0 24px;
    }

    .services-intro-right .checklist li {
      font-family: 'Outfit', sans-serif;
      font-size: 0.9rem;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 8px;
    }

    [data-theme="light"] .services-intro-right .checklist li { color: #333; }
    [data-theme="dark"] .services-intro-right .checklist li { color: #ccc; }

    .services-intro-right .checklist li::before {
      content: '?';
      color: #a8e832;
      font-weight: 700;
      font-size: 1rem;
      margin-top: 1px;
      flex-shrink: 0;
    }

    .services-intro-right .btn-services-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #0a0a0f;
      color: #a8e832;
      font-family: 'Outfit', sans-serif;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-decoration: none;
      padding: 13px 26px;
      border-radius: 4px;
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    }

    [data-theme="dark"] .services-intro-right .btn-services-link {
      background: #a8e832;
      color: #0a0a0f;
    }

    .services-intro-right .btn-services-link:hover {
      background: #1a1a2a;
      color: #a8e832;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    /* Services flip cards grid */
    .flip-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .flip-card {
      height: 340px;
      perspective: 1200px;
      cursor: pointer;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 12px;
    }

    .flip-card:hover .flip-card-inner,
    .flip-card.flipped .flip-card-inner {
      transform: rotateY(180deg);
    }

    .flip-card-front,
    .flip-card-back {
      position: absolute;
      inset: 0;
      border-radius: 12px;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .flip-card-front { transform: rotateY(0deg); }
    .flip-card-back {
      transform: rotateY(180deg);
      pointer-events: none;
    }

    .flip-card:hover .flip-card-back,
    .flip-card.flipped .flip-card-back {
      pointer-events: auto;
    }

    .flip-face-img {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 1 � Brand Identity & Design ? Orange */
    .flip-cards-grid .flip-card:nth-child(1) .flip-face-img { background: linear-gradient(135deg, #f97316 0%, #F56D43 100%); }
    /* 2 � Web & App Development ? Sky Blue */
    .flip-cards-grid .flip-card:nth-child(2) .flip-face-img { background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%); }
    /* 3 � Social Media Management ? Purple */
    .flip-cards-grid .flip-card:nth-child(3) .flip-face-img { background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); }
    /* 4 � Digital Advertising & SEO ? Crimson */
    .flip-cards-grid .flip-card:nth-child(4) .flip-face-img { background: linear-gradient(135deg, #dc2626 0%, #f87171 100%); }
    /* 5 � Photography & Video ? Amber */
    .flip-cards-grid .flip-card:nth-child(5) .flip-face-img { background: linear-gradient(135deg, #b45309 0%, #fbbf24 100%); }
    /* 6 � Outdoor & Print Ads ? Teal */
    .flip-cards-grid .flip-card:nth-child(6) .flip-face-img { background: linear-gradient(135deg, #0f766e 0%, #2dd4bf 100%); }
    /* 7 � Event Production ? Rose */
    .flip-cards-grid .flip-card:nth-child(7) .flip-face-img { background: linear-gradient(135deg, #be185d 0%, #f472b6 100%); }
    /* 8 � Media Consulting ? Indigo */
    .flip-cards-grid .flip-card:nth-child(8) .flip-face-img { background: linear-gradient(135deg, #3730a3 0%, #818cf8 100%); }
    /* 9 � Animation & Motion ? Accent Green */
    .flip-cards-grid .flip-card:nth-child(9) .flip-face-img { background: linear-gradient(135deg, #4d7c0f 0%, #a8e832 100%); }

    .flip-face-img img {
      width: 55%;
      height: 55%;
      object-fit: contain;
      display: block;
      position: relative;
    }

    .flip-front-icon {
      font-size: 9rem;
      color: rgba(255, 255, 255, 0.22);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -55%);
      line-height: 1;
      pointer-events: none;
    }

    .flip-face-img .face-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.2) 70%, transparent 100%);
      padding: 20px 20px 22px;
    }

    .flip-face-img .face-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 3px;
      color: #a8e832;
      display: block;
      margin-bottom: 4px;
    }

    .flip-face-img .face-title {
      font-family: 'Outfit', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #fff;
      margin: 0;
    }

    .flip-face-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 32px 28px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background: #0a0a0f;
      border: 1.5px solid rgba(168, 232, 50, 0.2);
    }

    .flip-face-text .face-icon {
      font-size: 2.2rem;
      color: #a8e832;
      margin-bottom: 14px;
      line-height: 1;
    }

    .flip-face-text .face-num-text {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 3px;
      color: rgba(168, 232, 50, 0.5);
      margin-bottom: 8px;
      display: block;
    }

    .flip-face-text h3 {
      font-family: 'Outfit', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: #ffffff;
      margin: 0 0 10px;
      line-height: 1.3;
    }

    .flip-face-text p {
      font-family: 'Outfit', sans-serif;
      font-size: 0.86rem;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.75);
      margin: 0 0 18px;
    }

    .flip-face-text .face-link {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 10px 22px !important;
      background: #a8e832 !important;
      color: #0a0a0f !important;
      font-family: 'Outfit', sans-serif !important;
      font-size: 0.84rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px !important;
      text-decoration: none !important;
      border-radius: 999px !important;
      border: none !important;
      pointer-events: auto !important;
      position: relative !important;
      z-index: 10 !important;
      transition: background 0.2s, transform 0.2s, gap 0.2s !important;
    }

    .flip-face-text .face-link:hover {
      background: #c4f042 !important;
      transform: translateY(-2px) !important;
      gap: 12px !important;
    }

    /* === 07. STATS === */
    .stats-section {
      background: linear-gradient(145deg, var(--bg) 0%, var(--bg2) 100%);
      padding: 70px 5%;
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      width: 100%;
    }

    .stats-noise {
      position: absolute;
      inset: 0;
      opacity: var(--stats-noise-op);
      background-image: radial-gradient(circle, white 1px, transparent 1px);
      background-size: 30px 30px;
    }

    .stats-grid {
      width: min(1200px, 94%);
      margin: auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      position: relative;
      z-index: 2;
    }

    .stat-item { text-align: center; }

    .stat-top {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .stat-icon {
      width: clamp(3.5rem, 5vw, 5.5rem);
      height: clamp(3.5rem, 5vw, 5.5rem);
      object-fit: contain;
      flex-shrink: 0;
      position: relative;
      top: -10px;
    }

    .stat-item:nth-child(1) .stat-icon,
    .stat-item:nth-child(2) .stat-icon {
      transform: scale(1.8);
    }

    .stat-num-wrap {
      display: inline-flex;
      align-items: baseline;
    }

    .stat-num {
      font-family: var(--font-head);
      font-size: clamp(3.5rem, 5vw, 5.5rem);
      color: white;
      line-height: 1;
      display: inline-block;
    }

    .stat-suf {
      font-family: var(--font-head);
      font-size: clamp(2rem, 3vw, 3rem);
      color: #fff;
    }

    .stat-item p {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.82rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-top: 8px;
    }

    .stat-bar {
      width: 40px;
      height: 2px;
      background: #a8e832 !important;
      border-radius: 999px;
      margin: 10px auto 0;
    }

    /* === 08. PORTFOLIO CAROUSEL === */
    .carousel-outer { position: relative; padding: 0; }
    .carousel-viewport { overflow: hidden; border-radius: var(--radius-lg); }
    .carousel-track {
      display: flex;
      transition: transform 0.48s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .port-page {
      flex: 0 0 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 260px 240px;
      gap: 14px;
    }

    .port-item {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .port-item:hover {
      transform: scale(1.015);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    }

    .port-big { grid-column: 1; grid-row: 1/3; }
    .port-tall { grid-column: 3; grid-row: 1/3; }

    .port-bg {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.2rem;
      transition: transform 0.55s;
      position: absolute;
      inset: 0;
    }

    .port-item:hover .port-bg { transform: scale(1.07); }

    .port-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, transparent 55%);
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      opacity: 0;
      transition: opacity 0.38s;
    }

    .port-item:hover .port-overlay { opacity: 1; }

    .port-tag {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      padding: 4px 13px;
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      margin-bottom: 9px;
      width: fit-content;
    }

    .port-item:nth-child(2n) .port-tag { background: var(--accent2); }
    .port-item:nth-child(3n) .port-tag { background: var(--accent3); }

    .port-overlay h4 {
      font-size: 0.95rem;
      font-weight: 700;
      color: #fff;
      margin: 0 0 4px;
      line-height: 1.3;
    }

    .port-overlay p {
      color: rgba(255, 255, 255, 0.65);
      font-size: 0.75rem;
      margin: 0;
    }

    .port-arrow {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      background: #fff;
      color: #0a0a0f;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      transform: scale(0);
      transition: transform 0.28s;
      text-decoration: none;
    }

    .port-item:hover .port-arrow { transform: scale(1); }

    .carousel-nav { display: none !important; }

    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 20px;
    }

    .carousel-dots .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--muted2);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }

    .carousel-dots .dot.active {
      background: var(--text);
      transform: scale(1.4);
    }

    /* === 09. CLIENTS � LOGO BELTS === */
    .clients-section {
      padding: 80px 0 0;
      overflow: hidden;
      width: 100%;
      background: var(--bg);
      border-top: 1px solid var(--border);
    }

    .clients-header {
      text-align: center;
      margin-bottom: 32px;
      padding: 0 5%;
    }

    .clients-main-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3rem, 7vw, 6rem);
      line-height: 0.95;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #a8e832;
      margin-bottom: 10px;
      display: block;
    }

    .clients-sub-title {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--muted);
    }

    .clients-header-divider {
      border: none;
      height: 1px;
      background: rgba(255,255,255,0.1);
      margin: 0 0 0 0;
    }

    .clients-belt-wrapper {
      width: 100%;
      overflow: hidden;
    }

    /* Each row */
    .clients-row {
      overflow: hidden;
      padding: 18px 0;
      position: relative;
    }

    .clients-row::before,
    .clients-row::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 60px;
      z-index: 5;
      pointer-events: none;
    }

    /* Row 1 � dark bg so white/light logos are always readable */
    .clients-row-1 {
      background: var(--dark);
      border-radius: 16px 16px 0 0;
      transition: background 0.45s ease;
    }
    .clients-row-1::before {
      left: 0;
      background: linear-gradient(to right, var(--dark) 0%, transparent 100%);
      transition: background 0.45s ease;
    }
    .clients-row-1::after {
      right: 0;
      background: linear-gradient(to left, var(--dark) 0%, transparent 100%);
      transition: background 0.45s ease;
    }

    /* Row 2 � white background */
    .clients-row-2 {
      background: var(--dark);
      transition: background 0.45s ease;
    }
    .clients-row-2::before {
      left: 0;
      background: linear-gradient(to right, var(--dark) 0%, transparent 100%);
      transition: background 0.45s ease;
    }
    .clients-row-2::after {
      right: 0;
      background: linear-gradient(to left, var(--dark) 0%, transparent 100%);
      transition: background 0.45s ease;
    }

    /* Pause animation on hover */
    .clients-row:hover .clients-belt-track {
      animation-play-state: paused !important;
    }

    .clients-belt-track {
      display: flex;
      width: max-content;
      align-items: center;
        will-change: transform;
    }

    .clients-belt-track.belt-fwd {
      animation: beltScrollFwd 65s linear infinite;
    }

    .clients-belt-track.belt-rev {
      animation: beltScrollRev 72s linear infinite;
    }

    .clients-belt-track.belt-fwd2 {
      animation: beltScrollFwd 42s linear infinite;
    }

    @keyframes beltScrollFwd {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @keyframes beltScrollRev {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    /* Logo item */
    .cl-item {
      flex-shrink: 0;
      width: 260px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-radius: 12px;
      margin: 0 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      cursor: pointer;
      transition: transform 0.3s ease;
    }

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

    /* Row 1 � dark bg, logos render at natural brightness */
    .clients-row-1 .cl-item img {
      width: 180px;
      height: 90px;
      object-fit: contain;
      opacity: 0.85;
      filter: none;/*drop-shadow(0px 1px 2px rgba(0,0,0,0.9)) drop-shadow(0px 0px 6px rgba(0,0,0,0.3));*/
     transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .clients-row-1 .cl-item:hover img {
      opacity: 1;
      transform: scale(1.08);
    }

    /* Row 2 � white background, logos shown naturally */
    .clients-row-2 .cl-item img {
      width: 180px;
      height: 90px;
      object-fit: contain;
      opacity: 0.85;
      filter: none; /*drop-shadow(0px 1px 2px rgba(0,0,0,0.9)) drop-shadow(0px 0px 6px rgba(0,0,0,0.3));*/
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .clients-row-2 .cl-item:hover img {
      opacity: 1;
      transform: scale(1.08);
    }

    /* Separators */
    .cl-sep {
      display: none;
    }

    .clients-view-all {
      text-align: center;
      padding: 36px 5% 56px;
    }

    .clients-view-all a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1.5px solid #a8e832;
      color: #a8e832;
      padding: 12px 28px;
      border-radius: 999px;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.3s, color 0.3s, transform 0.2s;
    }

    .clients-view-all a:hover {
      background: #a8e832;
      color: #0a0a0f;
      transform: translateY(-2px);
    }

    /* === 10. TESTIMONIALS === */
    .testi-section {
      position: relative;
      padding: 100px 0 120px;
      overflow: hidden;
      isolation: isolate;
    }

    .testi-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-image: url("../../images/testimonials-section-dark-background.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -3;
    }

    .testi-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      z-index: -2;
    }

    .testi-section::before,
    .testi-section::after {
      display: none !important;
      content: none !important;
    }

    .testi-section .sec-eyebrow,
    .testi-section .sec-heading,
    .testi-section .sec-sub {
      color: white;
    }

    .testi-section .sec-sub { opacity: 0.85; }

    .testi-carousel-outer {
      position: relative;
      margin-top: 50px;
      overflow: hidden;
      width: 100%;
      padding: 0 5%;
      box-sizing: border-box;
    }

    .testi-carousel-outer::before,
    .testi-carousel-outer::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 60px;
      z-index: 5;
      pointer-events: none;
      display: none !important;
    }

    .testi-carousel-outer::before { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.6), transparent); }
    .testi-carousel-outer::after  { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.6), transparent); }

    .testi-carousel-viewport { overflow: hidden; width: 100%; }

    .testi-carousel-track {
      display: flex;
      gap: 20px;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .testi-card {
      background: rgba(255, 255, 255, 0.95);
      padding: 24px 22px;
      border-radius: 14px;
      text-align: left;
      position: relative;
      box-sizing: border-box;
      box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
      flex: 0 0 280px;
      width: 280px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
      text-decoration: none;
    }

    .testi-card::after {
      content: 'View on Google \2197';
      position: absolute;
      top: 12px; right: 14px;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #4285F4;
      opacity: 0;
      transition: opacity 0.25s;
      pointer-events: none;
    }

    .testi-card:hover::after { opacity: 1; }

    .testi-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
      border: 1.5px solid rgba(66, 133, 244, 0.25);
    }

    .testi-stars {
      color: #f59e0b;
      letter-spacing: 2px;
      font-size: 0.9rem;
    }

    .testi-card p {
      color: #444;
      font-size: 0.85rem;
      line-height: 1.7;
      font-style: normal;
      flex: 1;
      margin: 0;
      width: 100%;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .testi-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      padding-top: 12px;
    }

    .testi-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-head);
      font-size: 1rem;
      color: #0a0a0f;
      flex-shrink: 0;
      overflow: hidden;
      border: 2px solid rgba(168, 232, 50, 0.4);
      position: relative;
    }

    .testi-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
      border-radius: 50%;
    }

    .testi-author-info strong {
      display: block;
      font-size: 0.85rem;
      color: #1a1218;
      font-weight: 700;
    }
    .testi-author-info span {
      color: #888;
      font-size: 0.73rem;
    }

    .testi-carousel-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 28px;
    }

    .testi-nav-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: rgba(255, 255, 255, 0.8);
      width: 38px; height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .testi-nav-btn:hover {
      background: #a8e832;
      border-color: #a8e832;
      color: #0a0a0f;
    }
    .testi-nav-btn:disabled {
      opacity: 0.25;
      cursor: default;
      pointer-events: none;
    }

    .testi-nav-dots {
      display: flex;
      gap: 7px;
      align-items: center;
    }

    .testi-nav-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.28);
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      border: none;
      padding: 0;
    }

    .testi-nav-dot.active {
      background: #a8e832;
      transform: scale(1.4);
    }

    /* === 11. FOUNDER QUOTES === */
    .founder-quote-section {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 28px;
      width: 100vw;
      margin-left: calc(-1 * ((100vw - 100%) / 2));
      padding: 64px 5%;
      position: relative;
      background: var(--bg2);
      box-sizing: border-box;
    }

    .founder-quote {
      flex: 1;
      padding: 44px 40px;
      text-align: left;
      position: relative;
      display: flex;
      flex-direction: column; justify-content: space-between; gap: 24px;
      background: var(--card);
      border-radius: 20px;
      border: 1px solid rgba(168, 232, 50, 0.12);
      box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(168, 232, 50, 0.08) inset;
      transition: transform .3s ease, box-shadow .3s ease;
      overflow: hidden;
    }

    .founder-quote:hover {
      transform: translateY(-4px);
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(168, 232, 50, 0.22),
        0 1px 0 rgba(168, 232, 50, 0.12) inset;
    }

    /* Green top accent strip */
    .fq-accent-bar {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #a8e832 0%, rgba(168,232,50,0.2) 100%);
      border-radius: 20px 20px 0 0;
    }

    /* Background quote watermark */
    .founder-quote::after {
      content: '\201C';
      position: absolute;
      bottom: -20px; right: 20px;
      font-size: 12rem;
      line-height: 1;
      color: rgba(168, 232, 50, 0.04);
      font-family: Georgia, serif;
      pointer-events: none;
      user-select: none;
    }

    .fq-vdivider { display: none; }

    .fq-icon {
      font-size: 2.4rem;
      color: #a8e832 !important;
      line-height: 1;
      opacity: 0.5;
    }

    .fq-icon i { color: #a8e832 !important; }

    .founder-quote blockquote {
      font-family: 'Outfit', sans-serif;
      font-style: normal;
      font-size: clamp(0.98rem, 1.5vw, 1.28rem);
      color: var(--text);
      line-height: 1.85;
      margin: 0;
      flex: 1;
    }

    .fq-author {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 20px;
      border-top: 1px solid rgba(168, 232, 50, 0.12);
      margin-top: auto;
    }

    .fq-avatar {
      width: 60px; height: 60px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: #eee;
      border: 2px solid rgba(168, 232, 50, 0.5);
      box-shadow: 0 0 0 4px rgba(168, 232, 50, 0.1);
    }

    .fq-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }

    .fq-author strong {
      display: block;
      font-size: .95rem;
      color: var(--text);
      font-weight: 700;
    }
    .fq-author span {
      font-size: 0.78rem;
      color: var(--muted);
    }

    /* Light mode card adjustments */
    [data-theme="light"] .founder-quote {
      box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.10),
        0 1px 0 rgba(168, 232, 50, 0.15) inset;
      border-color: rgba(168, 232, 50, 0.25);
    }
    [data-theme="light"] .founder-quote:hover {
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(168, 232, 50, 0.4);
    }

    /* === 12. CTA === */
    .cta-section {
      background: var(--card2);
      padding: 30px 5%;
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--border);
      width: 100%;
    }

    .cta-noise {
      position: absolute;
      inset: 0;
      opacity: var(--cta-noise-op);
      background-image: radial-gradient(circle, white 1px, transparent 1px);
      background-size: 30px 30px;
    }

    [data-theme="light"] .cta-noise {
      background-image: radial-gradient(circle, black 1px, transparent 1px);
    }

    .cta-blob {
      position: absolute;
      width: 600px; height: 600px;
      background: radial-gradient(circle, var(--accent2) 0%, var(--accent) 60%, transparent 100%);
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.15;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }

    .cta-inner {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }

    .cta-heading {
      font-family: var(--font-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      line-height: 1.05;
      letter-spacing: 1px;
      color: var(--text);
    }

    .cta-heading em {
      font-family: 'Outfit', sans-serif;
      font-style: normal;
      color: var(--accent2);
      font-weight: 700;
      text-transform: uppercase;
    }

    .cta-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    /* === 13. BACK TO TOP === */
    .back-top {
      position: fixed;
      bottom: 72px; left: 30px;
      z-index: 9999;
      width: 46px; height: 46px;
      border-radius: 50%;
      background: #a8e832 !important;
      color: #0a0a0f !important;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      box-shadow: 0 4px 16px rgba(168, 232, 50, 0.35);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
      pointer-events: none;
    }

    .back-top.active {
      opacity: 1 !important;
      visibility: visible !important;
      transform: translateY(0) !important;
      pointer-events: all !important;
    }

    .back-top:hover {
      background: #bef54a !important;
      transform: translateY(-3px) !important;
    }

    /* === 14. ANIMATIONS & REVEAL === */
    .pulse {
      width: 8px; height: 8px;
      background: var(--accent3);
      border-radius: 50%;
      display: inline-block;
      animation: pulseAnim 2s infinite;
    }

    @keyframes pulseAnim {
      0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5) }
      70%  { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0) }
      100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0) }
    }

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s, transform 0.8s;
      transition-delay: var(--delay, 0s);
    }

    .reveal.active { opacity: 1; transform: translateY(0); }

    .reveal-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.8s, transform 0.8s;
    }

    .reveal-left.active { opacity: 1; transform: translateX(0); }

    .reveal-right {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.8s, transform 0.8s;
    }

    .reveal-right.active { opacity: 1; transform: translateX(0); }

    /* === 15. RESPONSIVE === */
    @media (max-width:1100px) {
      .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    }

    @media (max-width:900px) {
      .about-grid { grid-template-columns: 1fr; }
      .about-img-small { display: none; }
      .cta-inner { flex-direction: column; text-align: center; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .port-page { grid-template-columns: repeat(2, 1fr); grid-template-rows: 220px 200px 200px; }
      .port-big { grid-column: 1; grid-row: 1/3; }
      .port-tall { grid-column: 2; grid-row: 2/4; }
      .services-intro { grid-template-columns: 1fr; gap: 24px; }
      .flip-cards-grid { grid-template-columns: repeat(2, 1fr); }
      .outstanding-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
      }
      .outstanding-body { margin: 0 auto; }
    }

    @media (max-width:768px) {
      .site-logo-bar { height: 64px; padding: 0 16px; }
      .site-logo-bar img { height: 44px; }
      .navbar, .navbar.scrolled { top: 64px !important; min-height: 52px; }
      .nav-links { gap: 16px !important; font-size: 0.78rem !important; }
      .hero { padding-top: 136px !important; }
      .hero-slide-wrap {
        height: 38vh;
        min-height: 160px;
        max-height: 260px;
      }
      .nav-cta { display: none; }
      .hamburger {
        display: flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
      }
      .founder-quote-section {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px !important;
        padding: 40px 5% 60px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .founder-quote-section::-webkit-scrollbar { display: none; }
      .fq-vdivider { display: none; }
      .founder-quote { padding: 36px 28px; }
      .founder-quote blockquote { font-size: 1rem; }
      .made-grid { grid-template-columns: 1fr 1fr 1fr; }
      .testi-card { flex: 0 0 250px; width: 250px; }
      .cl-item { width: 160px; height: 108px; margin: 0 4px; }
    }

    @media (max-width:700px) {
      .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    }

    @media (max-width:640px) {
      .section { padding: 35px 0; }
      .about-section { padding-top: 25px; }
      .services-section { padding: 30px 0 35px; }
      .stats-section { padding: 20px 5% 30px; }
      .clients-section { padding-top: 35px; }
      .made-it { padding: 35px 0 25px; }
      .testi-section { padding: 40px 0 45px; }
      .cta-section { padding: 30px 5%; }
      .outstanding-section { padding: 40px 5% 30px; margin-top: 20px; }
      .outstanding-inner { gap: 24px; }
      .sec-header.centered { margin-bottom: 16px !important; }
      .services-intro { gap: 16px; margin-bottom: 24px; }
      .nav-links { display: none !important; }
      .hamburger { display: flex; }
      .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; row-gap: 24px; }
      .hero-stats { flex-wrap: wrap; gap: 16px; justify-content: center; }
      .hstat-divider { display: none; }
      .hstat { width: 40%; }
      .hstat strong { font-size: 1.6rem; }
      .hero { padding-bottom: 60px !important; }
      .hero-btns { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center; gap: 12px; width: 100%; margin: 0 auto 32px auto; }
      .hero-btns > * { width: auto !important; justify-content: center; padding: 12px 24px !important; font-size: 0.9rem !important; text-align: center; }
      .hero-heading { font-size: clamp(2.2rem, 10vw, 3rem) !important; line-height: 1.1; margin-bottom: 12px; }
      .hero-slide-small { font-size: 0.9rem; max-width: 95%; }
      .about-img-frame { height: 220px; }
      .made-grid { grid-template-columns: 1fr; gap: 16px; }
      .flip-cards-grid { grid-template-columns: 1fr; gap: 14px; }
      .services-intro-left .main-heading { font-size: 2.2rem; line-height: 1.1; }
      .sec-heading { font-size: 2.2rem; }
      .outstanding-heading { font-size: 2.2rem; }
      .port-page {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 170px 170px;
        gap: 10px;
      }
      .port-big { grid-column: 1/3; grid-row: 1; }
      .port-tall { grid-column: 1/3; grid-row: auto; }
      .footer-grid { grid-template-columns: 1fr; gap: 24px; }
      .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
      }
      .testi-carousel-outer::before,
      .testi-carousel-outer::after {
        display: none;
      }
      .testi-card { flex: 0 0 280px; width: 280px; }
      .cl-item {
        width: 130px;
        height: 88px;
        padding: 10px 14px;
        margin: 0 3px;
        border-radius: 8px;
      }
    }

    @media (max-width:480px) {
      .nav-links { display: none !important; }
      .site-logo-bar { height: 58px; }
      .site-logo-bar img { height: 40px; }
      .navbar, .navbar.scrolled { top: 58px !important; }
      .hero { padding-top: 126px !important; }
    }

    @media (max-width:440px) {
      .footer-grid { grid-template-columns: 1fr; }
      .made-grid { grid-template-columns: 1fr; }
    }

    .team-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }

    @media (max-width:860px) {
      .team-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }

    @media (max-width:480px) {
      .team-grid { grid-template-columns: 1fr !important; }
    }

    /* === 16. LIGHT MODE OVERRIDES === */

    /* Flip card backs � replace always-dark bg with light glass card */
    [data-theme="light"] .flip-face-text {
      background: linear-gradient(145deg, #f4f8ff 0%, #eaf1fc 100%);
      border: 1.5px solid rgba(168, 232, 50, 0.30);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
    }
    [data-theme="light"] .flip-face-text h3 {
      color: #0f172a;
    }
    [data-theme="light"] .flip-face-text p {
      color: #475569;
    }
    [data-theme="light"] .flip-face-text .face-num-text {
      color: rgba(80, 140, 10, 0.65);
    }

    /* Founder cards � elevated shadows */
    [data-theme="light"] .founder-card {
      box-shadow: 0 2px 14px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.05);
      border-color: rgba(15,23,42,0.09);
    }
    [data-theme="light"] .founder-card:hover {
      box-shadow: 0 14px 40px rgba(15,23,42,0.13), 0 2px 8px rgba(15,23,42,0.07);
      border-color: rgba(168,232,50,0.45);
    }

/* Service cards � lighter border in light mode */
[data-theme="light"] .svc-card {
  box-shadow: 0 4px 20px rgba(15,23,42,0.10);
}

    /* Social icon buttons � visible in light mode */
    [data-theme="light"] .founder-socials a .s-icon {
      color: #1e293b;
      background: #f1f5f9;
      border-color: rgba(15, 23, 42, 0.15);
    }
    [data-theme="light"] .founder-socials a:hover .s-icon {
      color: #ffffff;
      background: rgba(15, 23, 42, 0.75);
      border-color: #a8e832;
    }

    /* About section � crisp white */
    [data-theme="light"] .about-section {
      background: #ffffff;
    }
    [data-theme="light"] .about-img-small {
      border-color: #ffffff;
    }

    /* Founder quote section */
    [data-theme="light"] .founder-quote-section {
      background: linear-gradient(180deg, #f1f5f9 0%, #eaeff7 100%);
    }

    /* CTA section � subtle premium gradient */
    [data-theme="light"] .cta-section {
      background: linear-gradient(135deg, #eef3fc 0%, #e4edf8 100%);
      border-top: 1px solid rgba(15,23,42,0.08);
    }

    /* Made-it section (founders) */
    [data-theme="light"] .made-it {
      background: #ffffff;
    }

    /* Carousel dots */
    [data-theme="light"] .carousel-dots .dot {
      background: #cbd5e1;
    }
    [data-theme="light"] .carousel-dots .dot.active {
      background: #334155;
    }

    /* Services intro button � light mode */
    [data-theme="light"] .services-intro-right .btn-services-link {
      background: #0f172a;
      color: #a8e832;
      box-shadow: 0 4px 16px rgba(15,23,42,0.18);
    }
    [data-theme="light"] .services-intro-right .btn-services-link:hover {
      background: #1e293b;
      box-shadow: 0 8px 28px rgba(15,23,42,0.26);
    }

    /* --- OUR WORK AURORA BACKGROUND --------------------------- */
    .outstanding-section .outstanding-bg {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: radial-gradient(130% 130% at 72% 40%, #1a1838 0%, #0c0b1d 55%, #060510 100%) !important;
    }
    .outstanding-section .outstanding-bg #flAurora {
      position: absolute;
      inset: -14%;
      width: 128%;
      height: 128%;
      filter: blur(60px) saturate(125%);
      opacity: .95;
    }
    .outstanding-section .outstanding-bg #flDust {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

/* ============================================================
   NEW HERO SLIDER STYLES
   ============================================================ */
.hero-slider {
  position: relative;
  width: 100%;
  height: 32vh;
  min-height: 180px;
  max-height: 320px;
  margin-bottom: 20px;
}

.hero-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s;
  z-index: 1;
}

.hero-slider .slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 2;
}

.hero-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.9rem, 5.8vh, 5rem);
  line-height: 1.05;
  letter-spacing: 2px;
  color: #a8e832;
  margin: 0 0 10px;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  max-width: 800px;
}

.hero-heading.animate, .hero-slide-small.animate {
    animation: slideText 0.8s ease;
}

@keyframes slideText {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
  z-index: 5;
}

.dots span {
    width: 30px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: 0.3s;
}

.dots span.active {
    background: #a8e832;
    width: 50px;
}

/* ============================================================
   17. MOBILE FIXES (Append)
   ============================================================ */

@media (max-width: 640px) {

  /* tighter, single-column grid with comfortable spacing */
  .flip-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* stop flipping: lay the two faces out as a normal stacked card */
  .flip-card {
    height: auto;
    perspective: none;
    cursor: default;
  }
  .flip-card-inner {
    transform: none !important;
    transition: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  }
  .flip-card-front,
  .flip-card-back {
    position: relative;   /* in normal flow AND a positioning context for the overlay */
    inset: auto;
    transform: none !important;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    pointer-events: auto;
    border-radius: 0;
  }

  /* colored header strip (keeps the nice gradient + icon + title) */
  .flip-face-img { height: 158px; }
  .flip-front-icon { font-size: 3rem; }

  /* readable body: drop the duplicated icon/number/title, keep the
     description and the call-to-action */
  .flip-face-text {
    height: auto;
    padding: 20px 22px 24px;
    border-top: none;
  }
  .flip-face-text .face-icon,
  .flip-face-text .face-num-text,
  .flip-face-text h3 { display: none; }
  .flip-face-text p { margin: 0 0 16px; }

  /* full-width, finger-friendly CTA */
  .flip-face-text .face-link {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 22px !important;
  }

  /* ---- floating controls: move back-to-top to the right, above chatbot ---- */
  .back-top {
    left: auto !important;
    right: 16px !important;
    bottom: calc(142px + env(safe-area-inset-bottom)) !important;  /* above the chat button */
    width: 42px !important;
    height: 42px !important;
  }
}

/* Touch devices wider than 640px (e.g. tablets) also can't hover �
   give them tap-to-flip via the .flipped class your JS toggles, and
   make sure a tapped card's back is interactive. */
@media (hover: none) and (min-width: 641px) {
  .flip-card-back { pointer-events: none; }
  .flip-card.flipped .flip-card-back { pointer-events: auto; }
}

/* ============================================================
   18. FOUNDER-QUOTE SLIDER (mobile)
   ============================================================ */

/* controls hidden on desktop; the section stays a normal flex row */
.fq-nav { display: none; }

@media (max-width: 768px) {

  /* turn the section into a horizontal, snap-scrolling track */
  .founder-quote-section {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 40px 6% 20px;
    scrollbar-width: none;          /* Firefox */
  }
  .founder-quote-section::-webkit-scrollbar { display: none; }  /* WebKit */

  .fq-vdivider { display: none; }

  /* one card per view, with a small peek of the next */
  .founder-quote {
    flex: 0 0 88%;
    scroll-snap-align: center;
    margin: 0;
  }

  /* ---- nav row (arrows + dots) under the cards ---- */
  .fq-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 4px 0 36px;
    background: var(--bg2);
    width: 100vw;
    margin-left: calc(-1 * ((100vw - 100%) / 2));
    position: relative;
    z-index: 3;
  }

  .fq-arrow {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #a8e832;
    color: #0a0a0f;
    box-shadow: 0 6px 16px rgba(168, 232, 50, .32);
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .fq-arrow svg { width: 22px; height: 22px; display: block; }
  .fq-arrow:active { transform: scale(.9); }
  .fq-arrow:disabled { opacity: .3; cursor: default; box-shadow: none; }

  .fq-dots { display: flex; align-items: center; gap: 8px; }
  .fq-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(168, 232, 50, .3);
    cursor: pointer;
    transition: width .22s ease, background .22s ease;
  }
  .fq-dot.active { width: 22px; border-radius: 5px; background: #a8e832; }
}

/* light theme arrow contrast */
[data-theme="light"] .fq-arrow { color: #0a0a0f; }

/* ============================================================
   19. SERVICES ZIGZAG TIMELINE
   ============================================================ */

.svc-timeline {
  position: relative;
  margin: 8px 0 64px;
}

/* vertical spine running through the center */
.stl-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--accent2) 4%, var(--accent2) 96%, transparent);
  z-index: 0;
}

/* each row */
.stl-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 44px;
}

/* content card */
.stl-card {
  flex: 0 0 calc(50% - 36px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px 22px;
  position: relative;
  z-index: 1;
  transition: border-color .25s, box-shadow .25s;
}
.stl-card:hover {
  border-color: rgba(245, 109, 67, 0.35);
  box-shadow: 0 8px 32px rgba(245, 109, 67, 0.12);
}

/* empty spacer for the opposite side */
.stl-void {
  flex: 0 0 calc(50% - 36px);
}

/* dot column � always sits at center */
.stl-node {
  flex: 0 0 72px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 24px;
  position: relative;
  z-index: 2;
}
.stl-node::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent2);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent2);
  display: block;
  flex-shrink: 0;
}

/* card header row */
.stl-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.stl-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(245, 109, 67, 0.12);
  color: var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.stl-title {
  font-family: var(--font-head);
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.5px;
  color: var(--text-strong);
}

/* two-column bullet list */
.stl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 16px;
}
.stl-list li {
  font-size: 0.84rem;
  color: var(--muted);
  padding: 3px 0 3px 16px;
  position: relative;
  break-inside: avoid;
  line-height: 1.5;
}
.stl-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  opacity: 0.7;
}

/* light-mode overrides */
[data-theme="light"] .stl-title { color: #0a0a0f; }
[data-theme="light"] .stl-list li { color: #444; }
[data-theme="light"] .stl-node::before { border-color: var(--bg); }

/* mobile: collapse to single-column */
@media (max-width: 768px) {
  .stl-spine { display: none; }
  .stl-item {
    flex-direction: column !important;
    margin-bottom: 20px;
  }
  .stl-void { display: none; }
  .stl-node {
    display: none;
  }
  .stl-card {
    flex: 0 0 auto;
    width: 100%;
    border-radius: 12px;
    padding: 20px;
  }
  .stl-list {
    columns: 1;
  }
}
 /* ============================================================
       HEADING FILL � make "360� Creative Solutions / Built For
       Your / Business Growth" fill the left intro column.
       Appended last so it overrides the earlier .main-heading cap.
       ============================================================ */
    .services-intro-left {
      container-type: inline-size;   /* font scales off this column's width */
      display: flex;
      flex-direction: column;
      justify-content: center;       /* removes the empty gap above the heading */
      align-self: stretch;           /* fill the grid row's full height */
    }

    .services-intro-left h2.main-heading {
      width: 100%;
      margin: 0;
      line-height: 0.92;             /* tighten the 4 lines vertically */
      /* column width drives the size; 13.3cqw makes the longest line
         (CREATIVE SOLUTIONS) span the column edge-to-edge in Bebas Neue.
         clamp keeps it sane on phones and ultrawide screens. */
      font-size: clamp(2.4rem, 13.3cqw, 8rem);
    }

    /* On stacked mobile layout the column is full-width, so dial the
       fill ratio back down to avoid an oversized heading. */
    @media (max-width:900px) {
      .services-intro-left h2.main-heading {
        font-size: clamp(2.4rem, 9cqw, 5rem);
      }
    }
/* --- MOBILE FIX 1 --- */
@media (max-width: 480px) {
  .hero-slide-big {
    font-size: clamp(1.5rem, 6.5vw, 2.4rem) !important;
    line-height: 1.15;
  }
  .hero-slide-small {
    font-size: clamp(0.75rem, 3.2vw, 1rem) !important;
    letter-spacing: 1px;
  }
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero-btns a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hstat { width: 45%; }
  .hstat strong { font-size: 1.4rem; }
  .hstat span { font-size: 0.65rem; }
}

@media (max-width: 360px) {
  .hero-slide-big {
    font-size: clamp(1.3rem, 6vw, 2rem) !important;
  }
  .hero-stats {
    gap: 8px;
  }
  .hstat { width: 48%; }
}

/* --- MOBILE FIX 2 --- */
@media (max-width: 640px) {
  .about-img-frame {
    height: 260px !important;
    border-radius: 12px;
  }
  .about-img-small {
    display: none;
  }
  .about-text-col {
    padding: 0;
  }
  .about-list {
    gap: 10px;
  }
  .about-list li {
    font-size: 0.85rem;
  }
}

@media (max-width: 400px) {
  .about-img-frame {
    height: 220px !important;
  }
}

/* --- MOBILE FIX 3 --- */
@media (max-width: 640px) {
  .services-intro {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .services-intro-left h2.main-heading {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
    line-height: 1.05 !important;
  }
  .services-intro-right .checklist {
    gap: 10px;
  }
  .services-intro-right .checklist li {
    font-size: 0.85rem;
  }
  .btn-services-link {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 400px) {
  .services-intro-left h2.main-heading {
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
  }
}

/* --- MOBILE FIX 4 --- */
@media (max-width: 1024px) {
  .flip-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 4px;
  }
  .flip-card {
    height: 280px !important;
  }
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

@media (hover: none) {
  .flip-card:hover .flip-card-inner {
    transform: none;
  }
  .flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
  }
}

/* --- MOBILE FIX 5 --- */
@media (max-width: 640px) {
  .stat-item {
    padding: 24px 16px !important;
  }
  .stat-num {
    font-size: clamp(2.2rem, 9vw, 3.5rem) !important;
  }
  .stat-suf {
    font-size: clamp(1rem, 4vw, 1.4rem) !important;
  }
  .stat-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .stats-grid {
    gap: 16px !important;
  }
}

@media (max-width: 360px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .stat-num {
    font-size: 2rem !important;
  }
}

/* --- MOBILE FIX 6 --- */
@media (max-width: 640px) {
  .founder-card {
    flex-direction: column !important;
    gap: 20px;
    padding: 24px !important;
  }
  .founder-photo {
    width: 100% !important;
    height: 240px !important;
    border-radius: 12px;
    flex-shrink: 0;
  }
  .founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  .founder-socials {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 400px) {
  .founder-photo {
    height: 200px !important;
  }
  .founder-socials {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .s-label {
    display: none;
  }
}

/* --- MOBILE FIX 7 --- */
@media (max-width: 640px) {
  .cl-item {
    width: 130px !important;
    height: 88px !important;
    padding: 10px 14px !important;
    margin: 0 3px !important;
    border-radius: 8px !important;
  }
  .cl-item img { filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.9)) drop-shadow(0px 0px 6px rgba(0,0,0,0.3));
    max-height: 44px !important;
    max-width: 100px !important;
  }
}

@media (max-width: 400px) {
  .cl-item {
    width: 110px !important;
    height: 76px !important;
  }
}

/* --- MOBILE FIX 8 --- */
@media (max-width: 480px) {
  .testi-card {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    padding: 28px 20px !important;
  }
  .testi-carousel-outer {
    padding: 0 16px;
    margin-top: 15px !important;
  }
  .testi-nav-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
  }
  .testi-text {
    font-size: 0.88rem !important;
    line-height: 1.7;
  }
}

@media (max-width: 360px) {
  .testi-card {
    padding: 22px 16px !important;
  }
  .testi-name {
    font-size: 0.9rem !important;
  }
}

/* --- MOBILE FIX 9 --- */
@media (max-width: 480px) {
  .cta-section .cta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100%;
  }
  .cta-section .btn-white {
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
    padding: 14px 20px !important;
  }
  .cta-section .cta-heading {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
}


/* ============================================================
   MOBILE COMPRESSION: Compress large cards to prevent full-screen scrolling
   ============================================================ */
@media (max-width: 1024px) {
  /* 1. Service Cards */
  .svc-card {
    height: 240px !important;
  }
  .svc-card h3 {
    font-size: 1.15rem !important;
  }

  /* 2. Founder/Team Cards */
  .founder-card {
    padding: 16px !important;
    gap: 12px !important;
  }
  .founder-photo {
    height: 200px !important;
  }
  .founder-card h4 {
    font-size: 1.25rem !important;
    margin-bottom: 4px !important;
  }
  .founder-card p {
    font-size: 0.85rem !important;
  }

  /* 3. Founder Quotes Slider */
  .founder-quote {
    padding: 24px 20px !important;
  }
  .founder-quote blockquote {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
  .fq-author {
    padding-top: 14px !important;
    gap: 12px !important;
  }
  .fq-avatar {
    width: 48px !important;
    height: 48px !important;
  }
  .fq-author strong {
    font-size: 0.88rem !important;
  }
  .fq-author span {
    font-size: 0.75rem !important;
  }
}

/* ============================================================
   MOBILE COMPRESSION: Flip cards (Trademark, Web App)
   ============================================================ */
@media (max-width: 1024px) {
  .flip-face-img {
    height: 100px !important;
  }
  .flip-face-img .face-overlay {
    padding: 12px 14px 14px !important;
  }
  .flip-front-icon {
    font-size: 2rem !important;
  }
  .flip-face-text {
    padding: 16px 14px 18px !important;
  }
  .flip-face-text p {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
  }
  .flip-face-text .face-link {
    padding: 10px 14px !important;
  }
}

/* === AGGRESSIVE MOBILE COMPRESSION === */
@media (max-width: 1024px) {

  /* 1. Footer */
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 16px !important;
  }

  .hide-on-mobile {
    display: none !important;
  }

  .footer-brand {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-bottom: 0 !important;
  }

  .footer-brand p {
    margin: 0 !important;
  }

  .footer-brand {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* footer flex applied */
  .footer-list a {
    min-height: 24px !important;
    font-size: 0.75rem !important;
  }

  .footer-head {
    font-size: 0.8rem !important;
    margin-bottom: 6px !important;
  }

  /* 2. Service Cards */
  .svc-card {
    height: 220px !important;
    min-height: 220px !important;
    border-radius: 8px !important;
  }

  .svc-card h3 {
    font-size: 1.15rem !important;
    margin-bottom: 6px !important;
  }

  .svc-content {
    padding: 18px !important;
  }

  /* 4. Founder Cards */
  .founder-card {
    padding: 14px !important;
    gap: 12px !important;
    flex-direction: column !important;
    border-radius: 8px !important;
  }

  .founder-photo {
    height: auto !important;
    aspect-ratio: 1/1 !important;
    border-radius: 6px !important;
  }

  .founder-card h4 {
    font-size: 1.1rem !important;
    margin-bottom: 2px !important;
  }

  .founder-card p {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
  }

  .founder-socials {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 8px !important;
  }

  .founder-socials a {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 1rem !important;
  }

  /* 5. Founder Quotes */
  .founder-quote {
    padding: 20px !important;
    flex: 0 0 88% !important;
    width: 88% !important;
    border-radius: 12px !important;
    scroll-snap-align: center;
  }

  .founder-quote blockquote {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  .fq-author {
    padding-top: 8px !important;
    gap: 8px !important;
  }

  .fq-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .fq-author strong {
    font-size: 0.8rem !important;
  }

  .fq-author span {
    font-size: 0.65rem !important;
  }

  /* General Spacing */
  section {
    padding: 30px 0 !important;
  }

  .sec-heading {
    font-size: 1.5rem !important;
    margin-bottom: 12px !important;
  }

  .sec-sub {
    font-size: 0.85rem !important;
    margin-bottom: 20px !important;
  }

  .about-grid {
    gap: 20px !important;
  }

  .clients-view-all {
    padding: 20px 5% 0 !important;
  }

  .clients-section {
    padding-bottom: 20px !important;
  }

  /* 6. Clients Section */
  .clients-section {
    padding-top: 40px !important;
    padding-bottom: 0px !important;
  }

  .cl-item {
    width: 140px !important;
    height: 90px !important;
  }

  .cl-item img {
    max-height: 60px !important;
    max-width: 120px !important;
    opacity: 1 !important;
  }

  /* 8. About Section */
  .sec-body {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }

  .about-list {
    gap: 8px !important;
    margin: 12px 0 16px !important;
  }

  .about-list li {
    font-size: 0.8rem !important;
    gap: 8px !important;
  }

  .sec-heading {
    font-size: clamp(2rem, 8vw, 2.5rem) !important;
    margin-bottom: 12px !important;
    line-height: 1.1 !important;
  }
}