/* ======= Base Reset & Variables ======= */
      :root {
         --tp-black:   #0d0d0d;
         --tp-black-2: #080808;
         --tp-black-3: #141414;
         --tp-black-4: #1c1c1c;
         --tp-white:   #F3F1F2;
         --tp-grey:    #777777;
         --tp-grey-2:  #999999;
         --tp-grey-5:  #c8c8c8;
         --tp-green:   #B4E717;
         --tp-green-2: #B4E717;
         --tp-green-3: #C8F032;
         --tp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
      }
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { scroll-behavior: smooth; overscroll-behavior: none; }
      body {
         background-color: var(--tp-black);
         color: var(--tp-white);
         font-family: var(--tp-font);
         font-size: 16px;
         line-height: 1.6;
         overflow-x: hidden;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
      }
      img { max-width: 100%; display: block; }
      a { text-decoration: none; color: inherit; transition: all .3s ease; }
      ul { list-style: none; padding: 0; margin: 0; }
      /* ======= Container ======= */
      .container-1524 { max-width: 1524px; margin: 0 auto; padding: 0 20px; }
      /* ======= Typography Utilities ======= */
      .tp-ff-inter { font-family: var(--tp-font) !important; }
      .tp-text-white, .tp-text-common-white { color: var(--tp-white) !important; }
      .tp-text-black { color: var(--tp-black) !important; }
      .tp-text-green { color: var(--tp-green) !important; }
      .tp-text-grey { color: var(--tp-grey) !important; }
      .tp-text-grey-2 { color: var(--tp-grey-2) !important; }
      .tp-text-grey-5 { color: var(--tp-grey-5) !important; }
      .tp-text-common-black-1 { color: var(--tp-black) !important; }
      .fw-300 { font-weight: 300; }
      .fw-400 { font-weight: 400; }
      .fw-500 { font-weight: 500; }
      .fw-600 { font-weight: 600; }
      .fw-700 { font-weight: 700; }
      .fw-800 { font-weight: 800; }
      .fs-72 { font-size: clamp(40px, 5vw, 72px); }
      .fs-60 { font-size: clamp(32px, 4vw, 60px); }
      .fs-50 { font-size: clamp(28px, 3.5vw, 50px); }
      .fs-40 { font-size: clamp(24px, 3vw, 40px); }
      .fs-36 { font-size: clamp(22px, 2.5vw, 36px); }
      .fs-30 { font-size: clamp(18px, 2.2vw, 30px); }
      .fs-28 { font-size: clamp(18px, 2vw, 28px); }
      .fs-24 { font-size: clamp(16px, 1.8vw, 24px); }
      .fs-22 { font-size: 22px; }
      .fs-20 { font-size: 20px; }
      .fs-18 { font-size: 18px; }
      .fs-16 { font-size: 16px; }
      .fs-15 { font-size: 15px; }
      .fs-14 { font-size: 14px; }
      .fs-13 { font-size: 13px; }
      .ls-m-4 { letter-spacing: -0.04em; }
      .ls-m-3 { letter-spacing: -0.03em; }
      .ls-m-2 { letter-spacing: -0.02em; }
      .ls-m-1 { letter-spacing: -0.01em; }
      .lh-1 { line-height: 1; }
      .lh-120-per { line-height: 1.2; }
      .lh-150-per { line-height: 1.5; }
      .lh-140-per { line-height: 1.4; }
      .fix { overflow: hidden; }
      .p-relative { position: relative; }
      .z-index-1 { z-index: 1; }
      .text-italic { font-style: italic; }
      /* ======= Background Utilities ======= */
      .tp-bg-common-black { background-color: var(--tp-black) !important; }
      .tp-bg-grey-8 { background-color: var(--tp-black-3) !important; }
      .tp-bg-common-green-2 { background-color: var(--tp-green) !important; }
      .tp-bg-common-green-3 { background-color: #1a2a1a !important; }
      .black-bg-4 { background-color: var(--tp-black-4) !important; }
      .sticky-black-bg { background-color: rgba(18,18,18,0.95); }
      /* ======= Spacing ======= */
      .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-70 { padding-top: 70px; }
      .pt-95 { padding-top: 95px; } .pt-110 { padding-top: 110px; } .pt-120 { padding-top: 120px; }
      .pt-140 { padding-top: 140px; } .pt-160 { padding-top: 160px; } .pt-180 { padding-top: 180px; }
      .pb-40 { padding-bottom: 40px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; }
      .pb-120 { padding-bottom: 120px; } .pb-130 { padding-bottom: 130px; } .pb-145 { padding-bottom: 145px; }
      .pb-150 { padding-bottom: 150px; } .pb-170 { padding-bottom: 170px; }
      .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px !important; }
      .mb-20 { margin-bottom: 20px !important; } .mb-25 { margin-bottom: 25px !important; }
      .mb-30 { margin-bottom: 30px !important; } .mb-35 { margin-bottom: 35px !important; }
      .mb-40 { margin-bottom: 40px !important; } .mb-45 { margin-bottom: 45px !important; }
      .mb-50 { margin-bottom: 50px !important; } .mb-70 { margin-bottom: 70px !important; }
      .mb-80 { margin-bottom: 80px !important; } .mb-90 { margin-bottom: 90px !important; }
      @media (min-width: 992px) {
         .mb-lg-60 { margin-bottom: 60px !important; }
      }
      .mb-110 { margin-bottom: 110px !important; } .mb-115 { margin-bottom: 115px !important; }
      .mt-10 { margin-top: 10px; } .mt-30 { margin-top: 30px; } .mt-45 { margin-top: 45px; }
      .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; }
      .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; }
      .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; }
      .ml-20 { margin-left: 20px; } .ml-45 { margin-left: 45px; } .ml-65 { margin-left: 65px; }
      .ml-80 { margin-left: 80px; } .ml-100 { margin-left: 100px; } .ml-115 { margin-left: 115px; }
      /* ======= Magic Cursor ======= */
      #magic-cursor { position: fixed; pointer-events: none; z-index: 99999; top: 0; left: 0; }
      #ball {
         position: fixed;
         width: 14px; height: 14px;
         background: transparent;
         border: 1px solid rgba(255,255,255,0.6);
         border-radius: 50%;
         transform: translate(-50%, -50%);
         pointer-events: none;
         transition: width .2s, height .2s, background .2s, border .2s;
         z-index: 99999;
      }
      body:has(a:hover) #ball, body:has(button:hover) #ball {
         width: 40px; height: 40px;
         background: rgba(180,231,23,0.15);
         border-color: var(--tp-green);
      }
      /* ======= Back to Top ======= */
      .scrollToTop {
         position: fixed; bottom: 30px; right: 30px;
         width: 48px; height: 48px;
         background: var(--tp-green);
         border-radius: 50%;
         display: flex; align-items: center; justify-content: center;
         cursor: pointer; z-index: 9999; transition: all .3s;
         font-size: 18px; color: var(--tp-black);
         box-shadow: 0 4px 20px rgba(180,231,23,0.4);
      }
      .scrollToTop:hover { transform: translateY(-4px); }
      /* ======= Header — floating pill bar (Aleric-style) ======= */
      .tp-header-area {
         position: fixed;
         top: 0; left: 0; width: 100%;
         z-index: 9990;
         padding: 20px 16px 0;
         transition: padding .35s ease, box-shadow .35s ease;
         background: transparent !important;
         border: none !important;
         backdrop-filter: none;
      }
      .tp-header-area.header-scrolled {
         padding: 0.75rem 16px 12px;
         background: rgba(0, 0, 0, 0.42) !important;
         backdrop-filter: blur(14px);
         -webkit-backdrop-filter: blur(14px);
      }
      .tp-header-area.header-scrolled .tp-header-pill {
         box-shadow: 0 12px 40px rgba(0,0,0,0.55);
         border-color: rgba(255,255,255,0.1);
      }
      .tp-header-pill-wrap {
         display: flex;
         justify-content: center;
         max-width: 100%;
      }
      .tp-header-pill {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         max-width: 1320px;
         margin: 0 auto;
         background: #212121;
         border-radius: 100px;
         padding: 14px 28px 14px 40px;
         gap: 1rem;
         border: 1px solid rgba(255,255,255,0.08);
         box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      }
      .tp-header-logo a {
         display: inline-flex;
         align-items: center;
         text-decoration: none;
      }
      .tp-header-logo img {
         height: 38px;
         width: auto;
         max-width: 200px;
         display: block;
         object-fit: contain;
      }
      .tp-main-menu {
         flex: 1 1 auto;
         min-width: 0;
      }
      .tp-main-menu ul {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-wrap: wrap;
         gap: clamp(0.75rem, 2vw, 1.75rem);
         margin: 0; padding: 0; list-style: none;
      }
      .tp-main-menu ul li { margin: 0; }
      .tp-main-menu ul li a {
         font-size: 12px;
         font-weight: 700;
         letter-spacing: 0.08em;
         text-transform: uppercase;
         color: #fff;
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         gap: 5px;
         white-space: nowrap;
         transition: color .2s ease, opacity .2s ease;
      }
      .tp-main-menu ul li a:hover {
         color: var(--tp-green);
         opacity: 1;
      }
      .nav-link-caret {
         font-size: 0.45em;
         line-height: 1;
         opacity: 0.75;
         transform: translateY(1px);
         margin-left: 1px;
      }
      .tp-header-pill-btn {
         background: #fff;
         color: #111;
         border-radius: 999px;
         padding: 10px 26px;
         font-size: 13px;
         font-weight: 700;
         letter-spacing: 0.02em;
         text-decoration: none;
         align-items: center;
         justify-content: center;
         border: none;
         transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
      }
      .tp-header-pill-btn:hover {
         background: var(--tp-green);
         color: #111;
         box-shadow: 0 4px 20px rgba(180,231,23,0.35);
      }
      .tp-btn-it-lg {
         padding: 12px 28px;
         border-radius: 26px;
         font-size: 15px; font-weight: 600;
         letter-spacing: -0.02em;
         transition: all .3s;
         display: inline-flex; align-items: center; gap: 8px;
      }
      /* Hamburger — middle line slightly longer (reference) */
      .tp-menu-bar {
         background: none; border: none; cursor: pointer;
         display: flex; flex-direction: column;
         align-items: flex-end;
         justify-content: center;
         gap: 6px;
         padding: 8px 4px;
         min-width: 40px;
      }
      .tp-menu-bar span {
         display: block;
         height: 2px;
         background: var(--tp-white);
         border-radius: 2px;
         transition: all .3s;
      }
      .tp-menu-bar span:nth-child(1) { width: 22px; }
      .tp-menu-bar span:nth-child(2) { width: 28px; }
      .tp-menu-bar span:nth-child(3) { width: 24px; }
      /* ======= Off-Canvas ======= */
      .tp-offcanvas-area {
         position: fixed; top: 0; right: -380px;
         width: 360px; height: 100vh;
         background: var(--tp-black-2);
         border-left: 1px solid rgba(255,255,255,0.07);
         z-index: 99998; transition: right .4s cubic-bezier(.4,0,.2,1);
         overflow-y: auto;
         padding: 40px 30px;
      }
      .tp-offcanvas-area.open { right: 0; }
      .body-overlay {
         position: fixed; inset: 0;
         background: rgba(0,0,0,0.7);
         z-index: 99997;
         opacity: 0; pointer-events: none;
         transition: opacity .4s;
      }
      .body-overlay.open { opacity: 1; pointer-events: all; }
      .tp-offcanvas-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
      .tp-offcanvas-logo img { height: 34px; width: auto; display: block; object-fit: contain; }
      .close-btn {
         background: none; border: none; cursor: pointer;
         color: var(--tp-white); font-size: 22px;
      }
      .tp-offcanvas-menu ul { display: flex; flex-direction: column; gap: 0; }
      .tp-offcanvas-menu ul li a {
         display: block; padding: 14px 0;
         font-size: 17px; font-weight: 600;
         color: var(--tp-white);
         border-bottom: 1px solid rgba(255,255,255,0.07);
         letter-spacing: -0.02em;
      }
      .tp-offcanvas-menu ul li a:hover { color: var(--tp-green); padding-left: 8px; }
      .tp-offcanvas-contact { margin-top: 40px; }
      .tp-offcanvas-title { font-size: 13px; font-weight: 600; color: var(--tp-grey); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
      .tp-offcanvas-contact ul li { margin-bottom: 10px; }
      .tp-offcanvas-contact ul li a { font-size: 16px; color: var(--tp-white); font-weight: 500; }
      .tp-offcanvas-contact ul li a:hover { color: var(--tp-green); }
      .tp-offcanvas-social { margin-top: 30px; }
      .tp-offcanvas-social ul { display: flex; gap: 14px; margin-top: 16px; }
      .tp-offcanvas-social ul li a {
         width: 40px; height: 40px;
         border: 1px solid rgba(255,255,255,0.15);
         border-radius: 50%;
         display: flex; align-items: center; justify-content: center;
         color: var(--tp-white); font-size: 15px;
      }
      .tp-offcanvas-social ul li a:hover { background: var(--tp-green); border-color: var(--tp-green); color: var(--tp-black); }
      /* ======= Hero ======= */
      .tp-hero-area {
         min-height: 100vh;
         padding-top: 160px; padding-bottom: 0;
         /* Dark background matching screenshot — near-black with faint dark-green radial glow top-right */
         background: radial-gradient(ellipse 70% 60% at 75% 20%, #0d2317 0%, #0d0d0d 55%);
         position: relative; overflow: hidden;
      }
      .tp-hero-it-shape {
         position: absolute; top: 0; right: 0;
         width: 65%; pointer-events: none; opacity: 0.12;
      }
      /* Left social sidebar — exactly like screenshot */
      .tp-hero-social {
         position: absolute; left: 24px; top: 50%;
         transform: translateY(-50%);
         display: flex; flex-direction: column; align-items: center; gap: 18px;
         z-index: 10;
      }
      .tp-hero-social .follow-label {
         font-size: 10px; font-weight: 700;
         color: rgba(255,255,255,0.35);
         writing-mode: vertical-rl;
         letter-spacing: 0.18em;
         text-transform: uppercase;
         transform: rotate(180deg);
         margin-bottom: 4px;
      }
      .tp-hero-social .follow-line {
         width: 1px; height: 36px;
         background: rgba(255,255,255,0.15);
      }
      .tp-hero-social a {
         font-size: 13px; color: rgba(255,255,255,0.35);
         width: 30px; height: 30px;
         display: flex; align-items: center; justify-content: center;
         transition: color .3s;
      }
      .tp-hero-social a:hover { color: var(--tp-green); }
      .tp-hero-it-content { position: relative; z-index: 2; }
      /* Hero title — Inter, semi-bold, tight tracking, matching screenshot */
      .tp-hero-it-title {
         font-size: clamp(38px, 4.8vw, 68px);
         font-weight: 600;
         line-height: 1.08;
         letter-spacing: -0.04em;
         color: var(--tp-white);
         margin-bottom: 0;
         font-family: var(--tp-font);
      }
      .tp-hero-it-title .text-italic {
         font-style: italic;
         font-weight: 400;
         color: var(--tp-white);
      }
      .tp-hero-it-counter-wrap { display: flex; gap: 48px; flex-wrap: wrap; }
      .tp-hero-it-counter h2 {
         line-height: 1;
         letter-spacing: -0.04em;
         font-family: var(--tp-font);
      }
      .tp-hero-it-counter .subtitle {
         display: block; font-size: 14px;
         color: rgba(255,255,255,0.45);
         line-height: 1.45; margin-top: 8px;
         font-weight: 400;
         font-family: var(--tp-font);
      }
      .tp-hero-it-bigtitle-wrap {
         padding-top: 50px;
         border-top: 1px solid rgba(255,255,255,0.06);
         margin-top: 24px;
         overflow: hidden;
         text-align: center;
      }
      /* Big variable-weight title — each char has its own font-weight as per the template */
      .tp-hero-it-bigtitle {
         font-size: clamp(64px, 11.5vw, 180px);
         line-height: 0.92;
         letter-spacing: -0.055em;
         color: var(--tp-white);
         font-family: var(--tp-font);
         white-space: nowrap;
      }
      .tp-hero-it-bigtitle .char { display: inline-block; }
      /* Text slider strip below hero title */
      .tp-hero-slider-strip {
         border-top: 1px solid rgba(255,255,255,0.06);
         padding: 20px 0 0;
         overflow: hidden;
      }
      /* ======= Text Slider ======= */
      .tp-text-slider-area {
         padding: 18px 0;
         background: var(--tp-black);
         border-top: 1px solid rgba(255,255,255,0.07);
         border-bottom: 1px solid rgba(255,255,255,0.07);
      }
      .tp-text-it-slider-item span {
         font-size: 13px; font-weight: 500;
         color: rgba(255,255,255,0.45);
         letter-spacing: 0.06em; text-transform: uppercase;
         padding: 0 22px;
         white-space: nowrap;
         font-family: var(--tp-font);
      }
      .tp-text-it-slider-item span a {
         color: inherit;
         text-decoration: none;
         transition: color 0.2s ease;
      }
      .tp-text-it-slider-item span a:hover {
         color: var(--tp-green);
      }
      /* Each slide must be auto-width so ALL items are visible at once */
      .tp-text-it-slider-active .swiper-wrapper { transition-timing-function: linear !important; }
      .tp-text-it-slider-active .swiper-slide { width: auto !important; flex-shrink: 0; }
      .swiper-slide .tp-text-it-slider-item { display: flex; align-items: center; }
      .swiper-slide .tp-text-it-slider-item span::before {
         content: '●';
         margin-right: 22px;
         font-size: 5px;
         color: rgba(255,255,255,0.2);
         vertical-align: middle;
      }
      .swiper-slide .tp-text-it-slider-item span::after {
         content: '';
         margin-left: 0;
         color: var(--tp-green);
      }
      /* Landing: service page interlink strip */
      .landing-service-nav {
         display: flex;
         flex-wrap: wrap;
         gap: 0.35rem 0.65rem;
         align-items: center;
         justify-content: center;
         margin-bottom: 2rem;
         padding: 1rem 1.25rem;
         border-radius: 12px;
         background: rgba(255, 255, 255, 0.03);
         border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .landing-service-nav__label {
         font-size: 0.8rem;
         font-weight: 600;
         letter-spacing: 0.08em;
         text-transform: uppercase;
         color: rgba(255, 255, 255, 0.35);
         margin-right: 0.25rem;
      }
      .landing-service-nav a {
         font-size: 0.95rem;
         font-weight: 600;
         color: var(--tp-green);
         text-decoration: none;
      }
      .landing-service-nav a:hover {
         text-decoration: underline;
      }
      .landing-service-nav .sep {
         color: rgba(255, 255, 255, 0.2);
         user-select: none;
      }
      .tp-portfolio-it-title a:hover {
         color: var(--tp-green) !important;
      }
      /* ======= Banner ======= */
      .tp-banner-area {
         height: clamp(340px, 50vw, 580px);
         overflow: hidden;
         position: relative;
      }
      .tp-banner-it-thumb {
         width: 100%;
         height: 100%;
         will-change: transform;
      }
      .tp-banner-it-thumb img {
         width: 100%;
         height: 110%;           /* slightly taller so parallax shift stays in-frame */
         object-fit: cover;
         object-position: center;
         display: block;
         transform: scale(1.08); /* start gently zoomed in */
         transform-origin: center center;
         transition: transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         will-change: transform;
      }
      /* State set by JS when the section enters the viewport */
      .tp-banner-area.is-visible .tp-banner-it-thumb img {
         transform: scale(1.0);
      }
      /* Once revealed, a subtle hover re-zoom adds a nice touch */
      .tp-banner-area.is-visible:hover .tp-banner-it-thumb img {
         transform: scale(1.03);
      }
      /* ======= About ======= */
      .tp-about-area {
         background: var(--tp-black);
         padding-top: 100px;
         padding-bottom: 80px;
      }
      /* "What We Do" section tag pill */
      .tp-about-tag {
         display: inline-flex; align-items: center; gap: 8px;
         border: 1px solid rgba(255,255,255,0.18);
         border-radius: 30px;
         padding: 8px 20px;
         font-size: 13px; font-weight: 600;
         color: var(--tp-white);
         letter-spacing: 0.04em;
         margin-bottom: 48px;
         font-family: var(--tp-font);
      }
      /* Left column: big counter with floating pill badges */
      .tp-about-counter-wrap {
         position: relative;
         display: flex;
         align-items: center;
         justify-content: flex-start;
         min-height: 320px;
      }
      /* Soft green glow behind number */
      .tp-about-counter-glow {
         position: absolute;
         width: 380px; height: 380px;
         background: radial-gradient(circle, rgba(180,231,23,0.12) 0%, transparent 70%);
         border-radius: 50%;
         left: -40px; top: 50%;
         transform: translateY(-50%);
         pointer-events: none;
      }
      .tp-about-big-num {
         font-size: clamp(110px, 16vw, 220px);
         font-weight: 800;
         letter-spacing: -0.06em;
         line-height: 1;
         color: var(--tp-white);
         font-family: var(--tp-font);
         position: relative; z-index: 2;
         user-select: none;
      }
      /* Floating badge pills */
      .tp-about-badge {
         position: absolute;
         display: inline-flex; align-items: center;
         padding: 10px 20px;
         border-radius: 30px;
         font-size: 14px; font-weight: 700;
         font-family: var(--tp-font);
         white-space: nowrap;
         z-index: 3;
         box-shadow: 0 8px 32px rgba(0,0,0,0.35);
         animation: badgeFloat 3.5s ease-in-out infinite;
      }
      .tp-about-badge.badge-green {
         background: var(--tp-green);
         color: #111;
      }
      .tp-about-badge.badge-orange {
         background: #FF6B35;
         color: #fff;
         animation-delay: 0.9s;
      }
      .tp-about-badge.badge-top {
         top: 10%; right: 0;
         animation-delay: 0.4s;
      }
      .tp-about-badge.badge-left {
         left: 0; top: 52%;
         transform: translateY(-50%);
      }
      .tp-about-badge.badge-bottom {
         bottom: 8%; right: 0;
         animation-delay: 1.4s;
      }
      @keyframes badgeFloat {
         0%, 100% { transform: translateY(0); }
         50%       { transform: translateY(-9px); }
      }
      .tp-about-badge.badge-left { animation-name: badgeFloatLeft; }
      @keyframes badgeFloatLeft {
         0%, 100% { transform: translateY(-50%) translateX(0); }
         50%       { transform: translateY(-50%) translateX(7px); }
      }
      /* Right column */
      .tp-about-it-content h2 {
         line-height: 1.12;
         font-family: var(--tp-font);
      }
      /* Rating row */
      .tp-about-it-rating-wrap {
         display: flex; align-items: center; gap: 0;
         flex-wrap: wrap;
         padding: 24px 0;
         border-top: 1px solid rgba(255,255,255,0.08);
         border-bottom: 1px solid rgba(255,255,255,0.08);
         margin-bottom: 28px;
      }
      .tp-about-it-total-rating {
         padding-right: 24px;
         margin-right: 24px;
         border-right: 1px solid rgba(255,255,255,0.12);
      }
      .tp-about-it-total-rating h3 { line-height: 1; font-family: var(--tp-font); }
      .tp-about-it-total-rating small {
         display: block; font-size: 13px;
         color: rgba(255,255,255,0.4);
         margin-top: 4px; font-family: var(--tp-font);
      }
      .tp-about-it-rating .rating-label {
         display: block; font-size: 13px; font-weight: 500;
         color: rgba(255,255,255,0.5);
         margin-bottom: 8px; font-family: var(--tp-font);
      }
      .tp-about-it-rating .rating {
         color: var(--tp-green); font-size: 18px;
         display: flex; gap: 4px;
      }
      /* Testimonial quote */
      .tp-about-quote {
         font-size: 16px; line-height: 1.7;
         color: rgba(255,255,255,0.55);
         font-family: var(--tp-font);
         margin-bottom: 24px;
      }
      .tp-about-author-name {
         font-size: 18px; font-weight: 700;
         color: var(--tp-white); font-family: var(--tp-font);
         margin-bottom: 4px;
      }
      .tp-about-author-role {
         font-size: 14px; color: rgba(255,255,255,0.4);
         font-family: var(--tp-font);
      }
      .tp-section-it-subtitle {
         display: inline-block;
         font-size: 13px; font-weight: 600;
         color: var(--tp-grey);
         letter-spacing: 0.08em; text-transform: uppercase;
      }
      /* ======= Counter ======= */
      .tp-counter-area {
         background: #0a0a0a;
         border-top: 1px solid rgba(255,255,255,0.07);
         border-bottom: 1px solid rgba(255,255,255,0.07);
         padding: 52px 0;
      }
      .tp-counter-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-wrap: wrap;
         gap: 0;
      }
      .tp-counter-item {
         display: flex;
         align-items: center;
         gap: 18px;
         flex: 1;
         min-width: 200px;
         padding: 20px 32px;
         position: relative;
      }
      /* Divider between items */
      .tp-counter-item + .tp-counter-item::before {
         content: '';
         position: absolute; left: 0; top: 50%;
         transform: translateY(-50%);
         width: 1px; height: 52px;
         background: rgba(255,255,255,0.1);
      }
      .tp-counter-icon {
         color: rgba(255,255,255,0.75);
         flex-shrink: 0;
         line-height: 1;
         display: flex; align-items: center; justify-content: center;
         width: 44px; height: 44px;
      }
      .tp-counter-icon svg { width: 40px; height: 40px; }
      .tp-counter-text {}
      .tp-counter-num-val {
         font-size: clamp(36px, 4vw, 52px);
         font-weight: 800;
         letter-spacing: -0.04em;
         line-height: 1;
         color: var(--tp-white);
         font-family: var(--tp-font);
         display: block;
      }
      .tp-counter-label {
         font-size: 13px;
         font-weight: 400;
         color: rgba(255,255,255,0.4);
         font-family: var(--tp-font);
         margin-top: 5px;
         display: block;
         letter-spacing: 0.01em;
      }
      @media (max-width: 767px) {
         .tp-counter-item { min-width: 45%; padding: 16px 20px; }
         .tp-counter-item + .tp-counter-item::before { display: none; }
      }
      @media (max-width: 480px) {
         .tp-counter-item { min-width: 100%; border-bottom: 1px solid rgba(255,255,255,0.07); }
      }
      /* ======= Services ======= */
      .tp-service-area { background: var(--tp-black-3); }
      /* Services hero: vertical label + futuristic IT stage */
      .tp-service-hero-visual-row { min-height: 280px; }
      .tp-service-hero-side-label {
         writing-mode: vertical-rl;
         transform: rotate(180deg);
         font-size: 11px;
         font-weight: 700;
         letter-spacing: 0.22em;
         text-transform: uppercase;
         color: rgba(255, 255, 255, 0.45);
         white-space: nowrap;
         padding-top: 4px;
         flex-shrink: 0;
      }
      /* Services hero headline — right column beside futuristic SVG */
      .tp-service-hero-headline {
         display: block;
         width: 100%;
         max-width: 100%;
         font-size: clamp(2rem, 2.4vw + 1.35rem, 4rem);
         font-weight: 800;
         line-height: 1.08;
         letter-spacing: -0.04em;
         color: var(--tp-grey-5);
         margin: 0;
         text-wrap: balance;
      }
      @media (max-width: 767px) {
         .tp-service-hero-headline {
            font-size: clamp(1.85rem, 6vw + 0.5rem, 2.65rem);
            line-height: 1.12;
         }
      }
      .it-fusion-stage {
         position: relative;
         flex: 1;
         width: 100%;
         min-height: 280px;
         max-width: 100%;
         border-radius: 20px;
         overflow: hidden;
         background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(180, 231, 23, 0.08) 0%, #060a09 55%, #030504 100%);
         border: 1px solid rgba(180, 231, 23, 0.22);
         box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.4) inset,
            0 20px 50px rgba(0, 0, 0, 0.55),
            0 0 80px rgba(180, 231, 23, 0.06);
      }
      .it-fusion-glow {
         position: absolute;
         inset: -40%;
         background: conic-gradient(from 120deg at 50% 50%, transparent 0%, rgba(180, 231, 23, 0.12) 40%, transparent 65%);
         animation: itFusionSpin 14s linear infinite;
         pointer-events: none;
      }
      @keyframes itFusionSpin {
         to { transform: rotate(360deg); }
      }
      .it-fusion-grid {
         position: absolute;
         inset: 0;
         background-image:
            linear-gradient(rgba(180, 231, 23, 0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(180, 231, 23, 0.06) 1px, transparent 1px);
         background-size: 28px 28px;
         opacity: 0.5;
         animation: itGridDrift 20s linear infinite;
         pointer-events: none;
      }
      @keyframes itGridDrift {
         0% { transform: translate(0, 0); }
         100% { transform: translate(-28px, -28px); }
      }
      .it-fusion-scan {
         position: absolute;
         left: 0; right: 0;
         height: 28%;
         background: linear-gradient(
            to bottom,
            transparent,
            rgba(180, 231, 23, 0.07) 45%,
            rgba(180, 231, 23, 0.14) 50%,
            rgba(180, 231, 23, 0.07) 55%,
            transparent
         );
         animation: itScanMove 4.2s ease-in-out infinite;
         pointer-events: none;
         z-index: 2;
      }
      @keyframes itScanMove {
         0%, 100% { top: -30%; opacity: 0.4; }
         50% { top: 75%; opacity: 1; }
      }
      .it-fusion-svg {
         position: relative;
         z-index: 1;
         width: 100%;
         height: 100%;
         min-height: 260px;
         display: block;
      }
      .it-fusion-orbit {
         transform-origin: 210px 190px;
         animation: itOrbitPulse 6s ease-in-out infinite;
      }
      @keyframes itOrbitPulse {
         0%, 100% { opacity: 0.25; transform: scale(1); }
         50% { opacity: 0.45; transform: scale(1.03); }
      }
      .it-fusion-path {
         stroke-dasharray: 40 80;
         stroke-dashoffset: 0;
         animation: itPathFlow 3s linear infinite;
      }
      .it-fusion-path.it-p2 { animation-duration: 4.2s; animation-direction: reverse; opacity: 0.8; }
      .it-fusion-path.it-p3 { animation-duration: 5s; stroke-dasharray: 20 60; opacity: 0.6; }
      @keyframes itPathFlow {
         to { stroke-dashoffset: -240; }
      }
      .it-node { animation: itNodePulse 2.4s ease-in-out infinite; }
      .it-n1 { animation-delay: 0s; }
      .it-n2 { animation-delay: 0.4s; }
      .it-n3 { animation-delay: 0.8s; }
      .it-n4 { animation-delay: 1.2s; }
      .it-n5 { animation-delay: 1.6s; }
      @keyframes itNodePulse {
         0%, 100% { opacity: 0.45; }
         50% { opacity: 1; }
      }
      .it-fusion-data text { animation: itDataFlicker 4s ease-in-out infinite; }
      .it-fusion-data text:nth-child(2) { animation-delay: 1s; }
      .it-fusion-data text:nth-child(3) { animation-delay: 2s; }
      .it-fusion-data text:nth-child(4) { animation-delay: 0.5s; }
      @keyframes itDataFlicker {
         0%, 100% { opacity: 0.35; }
         50% { opacity: 0.85; }
      }
      .it-fusion-particles {
         position: absolute;
         inset: 0;
         z-index: 3;
         pointer-events: none;
         overflow: hidden;
      }
      .it-fusion-particles span {
         position: absolute;
         width: 3px;
         height: 3px;
         border-radius: 50%;
         background: var(--tp-green);
         box-shadow: 0 0 8px var(--tp-green);
         opacity: 0;
         animation: itParticle 5s ease-in-out infinite;
      }
      .it-fusion-particles span:nth-child(1) { left: 15%; top: 20%; animation-delay: 0s; }
      .it-fusion-particles span:nth-child(2) { left: 55%; top: 18%; animation-delay: 0.8s; }
      .it-fusion-particles span:nth-child(3) { left: 72%; top: 45%; animation-delay: 1.6s; }
      .it-fusion-particles span:nth-child(4) { left: 28%; top: 68%; animation-delay: 2.2s; }
      .it-fusion-particles span:nth-child(5) { left: 85%; top: 72%; animation-delay: 3s; }
      .it-fusion-particles span:nth-child(6) { left: 40%; top: 40%; animation-delay: 3.8s; }
      @keyframes itParticle {
         0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
         20% { opacity: 0.9; transform: translate(0, 0) scale(1); }
         50% { opacity: 0.4; transform: translate(12px, -20px) scale(0.8); }
         80% { opacity: 0.7; transform: translate(-8px, 10px) scale(1); }
      }
      @media (max-width: 575px) {
         .tp-service-hero-side-label {
            writing-mode: horizontal-tb;
            transform: none;
            margin-bottom: 0.5rem;
         }
      }
      .tp-service-it-subtitle { position: relative; }
      .tp-service-it-shape {
         position: absolute; top: -20px; left: -20px;
         width: 250px; pointer-events: none; opacity: 0.04;
      }
      /* ---- Service visual animation box ---- */
      .tp-service-it-visual {
         width: 100%;
         height: 200px;
         border-radius: 6px;
         overflow: hidden;
         margin-bottom: 32px;
         position: relative;
         background: #0e0e0e;
         border: 1px solid rgba(255,255,255,0.06);
      }

      /* === VISUAL 1: Animated bar chart (Digital Marketing) === */
      .svc-bars {
         position: absolute; inset: 0;
         display: flex; align-items: flex-end;
         justify-content: center; gap: 10px;
         padding: 20px 24px 28px;
      }
      .svc-bars .bar {
         flex: 1; border-radius: 4px 4px 0 0;
         background: linear-gradient(180deg, #B4E717 0%, rgba(180,231,23,.25) 100%);
         animation: barPulse 2.4s ease-in-out infinite;
         transform-origin: bottom;
      }
      .svc-bars .bar:nth-child(1){ height:35%; animation-delay:0s; }
      .svc-bars .bar:nth-child(2){ height:65%; animation-delay:.2s; }
      .svc-bars .bar:nth-child(3){ height:45%; animation-delay:.4s; }
      .svc-bars .bar:nth-child(4){ height:80%; animation-delay:.6s; background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.2) 100%); }
      .svc-bars .bar:nth-child(5){ height:55%; animation-delay:.8s; }
      .svc-bars .bar:nth-child(6){ height:90%; animation-delay:1s; }
      .svc-bars .bar:nth-child(7){ height:40%; animation-delay:1.2s; }
      @keyframes barPulse {
         0%,100%{ transform:scaleY(1);   opacity:.85; }
         50%    { transform:scaleY(.55); opacity:.5;  }
      }
      /* grid lines behind bars */
      .svc-bars::before {
         content:'';
         position:absolute; inset:0;
         background: repeating-linear-gradient(
            to top,
            rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px,
            transparent 1px, transparent 40px
         );
         pointer-events:none;
      }
      /* floating metric label */
      .svc-bars .metric {
         position:absolute; top:14px; right:18px;
         font-size:11px; font-weight:700; letter-spacing:.04em;
         color:var(--tp-green); font-family:var(--tp-font);
         animation: metricFade 3s ease-in-out infinite;
      }
      @keyframes metricFade{ 0%,100%{opacity:.5} 50%{opacity:1} }

      /* === VISUAL 2: Neural network (AI Automation) === */
      .svc-neural { position:absolute; inset:0; }
      .svc-neural svg { width:100%; height:100%; }
      /* pulsing nodes */
      .nn-node {
         animation: nnPulse 2s ease-in-out infinite;
      }
      .nn-line {
         stroke-dasharray: 120;
         stroke-dashoffset: 120;
         animation: nnLine 2.2s linear infinite;
      }
      @keyframes nnPulse {
         0%,100%{ r:5; opacity:.7; }
         50%    { r:8; opacity:1;  }
      }
      @keyframes nnLine {
         0%  { stroke-dashoffset: 120; }
         100%{ stroke-dashoffset: -120; }
      }
      /* staggered delays for lines */
      .nn-line:nth-child(1) { animation-delay:0s;    }
      .nn-line:nth-child(2) { animation-delay:.3s;   }
      .nn-line:nth-child(3) { animation-delay:.6s;   }
      .nn-line:nth-child(4) { animation-delay:.9s;   }
      .nn-line:nth-child(5) { animation-delay:1.2s;  }
      .nn-line:nth-child(6) { animation-delay:1.5s;  }
      .nn-line:nth-child(7) { animation-delay:1.8s;  }
      .nn-node:nth-child(1) { animation-delay:0s;    }
      .nn-node:nth-child(2) { animation-delay:.4s;   }
      .nn-node:nth-child(3) { animation-delay:.8s;   }
      .nn-node:nth-child(4) { animation-delay:1.2s;  }
      .nn-node:nth-child(5) { animation-delay:1.6s;  }
      .nn-node:nth-child(6) { animation-delay:2s;    }

      /* === VISUAL 3: Terminal / code (Web Dev) === */
      .svc-terminal {
         position:absolute; inset:0;
         padding:18px 20px;
         font-family:'Courier New', monospace;
         font-size:12px;
         overflow:hidden;
      }
      .svc-terminal .t-bar {
         display:flex; gap:6px; margin-bottom:14px;
      }
      .svc-terminal .t-bar span {
         width:10px; height:10px; border-radius:50%;
      }
      .svc-terminal .t-bar .t-red   { background:#ff5f57; }
      .svc-terminal .t-bar .t-yel   { background:#ffbd2e; }
      .svc-terminal .t-bar .t-grn   { background:#28c840; }
      .svc-terminal .t-line {
         color:rgba(255,255,255,.55);
         line-height:1.8;
         white-space:nowrap;
         overflow:hidden;
         animation: typeIn 1s steps(30) both;
      }
      .svc-terminal .t-line.kw  { color:#B4E717; }
      .svc-terminal .t-line.fn  { color:#61dafb; }
      .svc-terminal .t-line.str { color:#e6db74; }
      .svc-terminal .t-line:nth-child(2){ animation-delay:.6s;  }
      .svc-terminal .t-line:nth-child(3){ animation-delay:1.2s; }
      .svc-terminal .t-line:nth-child(4){ animation-delay:1.8s; }
      .svc-terminal .t-line:nth-child(5){ animation-delay:2.4s; }
      .svc-terminal .t-line:nth-child(6){ animation-delay:3s;   }
      .svc-terminal .t-line:nth-child(7){ animation-delay:3.6s; }
      @keyframes typeIn {
         from{ max-width:0; opacity:0; }
         to  { max-width:100%; opacity:1; }
      }
      .svc-terminal .t-cursor {
         display:inline-block; width:8px; height:13px;
         background:var(--tp-green); vertical-align:middle;
         animation:blink .7s step-end infinite;
      }
      @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }

      /* === VISUAL 4: Phone UI (Mobile App) === */
      .svc-phone { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
      .svc-phone svg { width:auto; height:90%; }
      .ph-bar {
         animation: phBar 1.8s ease-in-out infinite;
         transform-origin: left;
      }
      .ph-bar:nth-child(1){ animation-delay:0s;   }
      .ph-bar:nth-child(2){ animation-delay:.3s;  }
      .ph-bar:nth-child(3){ animation-delay:.6s;  }
      .ph-dot { animation: phDot 2s ease-in-out infinite; }
      .ph-dot:nth-child(1){ animation-delay:0s;   }
      .ph-dot:nth-child(2){ animation-delay:.5s;  }
      .ph-dot:nth-child(3){ animation-delay:1s;   }
      @keyframes phBar {
         0%,100%{ transform:scaleX(1);   opacity:.8; }
         50%    { transform:scaleX(.5); opacity:.4; }
      }
      @keyframes phDot {
         0%,100%{ fill:#B4E717; r:3; }
         50%    { fill:#fff;    r:5; }
      }

      .tp-service-it-item {
         background: var(--tp-black-4);
         border: 1px solid rgba(255,255,255,0.06);
         border-radius: 4px;
         padding: 40px 32px;
         height: 100%;
         transition: border-color .3s, transform .3s;
      }
      .tp-service-it-item:hover { border-color: rgba(180,231,23,0.3); transform: translateY(-4px); }
      .tp-service-it-circale {
         position: absolute; top: 16px; right: 16px;
         width: 60px; opacity: 0.15;
         animation: rotate 12s linear infinite;
      }
      @keyframes rotate { to { transform: rotate(360deg); } }
      .tp-service-it-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
      .tp-service-it-title a { color: var(--tp-grey-5); }
      .tp-service-it-icon { color: var(--tp-green); flex-shrink: 0; margin-top: 4px; }
      .tp-service-it-para { color: var(--tp-grey-2); font-size: 15px; line-height: 1.6; margin-bottom: 30px; }
      .tp-service-it-tag { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.07); }
      .tp-service-it-tag a {
         font-size: 12px; font-weight: 600;
         color: var(--tp-grey);
         padding: 5px 12px;
         border: 1px solid rgba(255,255,255,0.1);
         border-radius: 20px;
         letter-spacing: 0.04em;
         text-transform: uppercase;
      }
      .tp-service-it-tag a:hover { background: var(--tp-green); color: var(--tp-black); border-color: var(--tp-green); }
      .tp-service-it-pagenation { text-align: center; }
      /* ======= Buttons ======= */
      .tp-btn-it-lg {
         padding: 14px 28px;
         border-radius: 26px;
         font-size: 15px; font-weight: 700;
         letter-spacing: -0.02em;
         display: inline-flex; align-items: center; gap: 8px;
         transition: all .3s;
         cursor: pointer; border: none;
      }
      .tp-btn-border-white {
         background: transparent;
         border: 1px solid rgba(255,255,255,0.25) !important;
         color: var(--tp-white);
      }
      .tp-btn-border-white:hover { background: var(--tp-white); color: var(--tp-black); border-color: var(--tp-white) !important; }
      .tp-btn-cst {
         background: var(--tp-green);
         color: var(--tp-black);
         padding: 14px 28px;
         border-radius: 26px;
         font-size: 15px; font-weight: 700;
         display: inline-flex; align-items: center; gap: 8px;
         transition: all .3s;
         letter-spacing: -0.02em;
      }
      .tp-btn-cst:hover { background: var(--tp-white); color: var(--tp-black); }
      .tp-btn-it-xl {
         padding: 14px 32px;
         border-radius: 10px;
         font-size: 15px; font-weight: 700;
         display: inline-flex; align-items: center; gap: 8px;
         cursor: pointer; border: none;
         transition: all .3s;
      }
      .tp-btn-switch-animation span.btn-icon:last-child { display: none; }
      /* ======= Moving Text ======= */
      .tp-text-moving-area { overflow: hidden; }
      .tp-text-it-moving-top, .tp-text-it-moving-bottom { white-space: nowrap; }
      .tp-text-it-item {
         display: inline-flex; gap: 0;
         animation: marquee-left 20s linear infinite;
      }
      .tp-text-it-moving-bottom .tp-text-it-item {
         animation: marquee-right 20s linear infinite;
      }
      .tp-text-it-item span {
         font-size: clamp(40px, 6vw, 80px);
         font-weight: 700;
         color: rgba(255,255,255,0.08);
         letter-spacing: -0.04em;
         text-transform: uppercase;
         padding: 0 20px;
         white-space: nowrap;
      }
      @keyframes marquee-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
      @keyframes marquee-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
      /* ======= Process ======= */
      .tp-process-it-bg { background: var(--tp-black-4); }
      .tp-process-area { background: var(--tp-black-4); }
      .tp-process-it-shape {
         position: absolute; right: 0; top: 0;
         width: 300px; opacity: 0.03; pointer-events: none;
      }
      .tp-process-pp-video-wrap { position: relative; }
      .tp-process-it-icon {
         position: absolute; left: -60px; top: 50%;
         transform: translateY(-50%);
      }
      .tp-process-pp-video-inner {
         position: relative; overflow: hidden;
         border-radius: 4px;
      }
      .tp-process-pp-video-img { width: 100%; height: 380px; object-fit: cover; display: block; }
      .tp-video-main { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
      .popup-video {
         width: 64px; height: 64px;
         background: var(--tp-green);
         border-radius: 50%;
         display: flex; align-items: center; justify-content: center;
         color: var(--tp-black);
         font-size: 20px;
      }
      .popup-video:hover { background: var(--tp-white); transform: scale(1.08); }
      .tp-process-it-item { text-align: center; padding: 20px; }
      .tp-process-it-position {
         font-size: 22px; font-weight: 700;
         color: var(--tp-green);
         display: inline-block;
         margin-bottom: 80px;
         font-family: monospace;
      }
      .tp-process-it-title { color: var(--tp-white); margin-bottom: 16px; line-height: 1.25; }
      .tp-process-it-para { color: var(--tp-grey-2); font-size: 15px; line-height: 1.55; }
      .tp-process-it-para-2 { color: var(--tp-grey-2); font-size: 16px; }
      /* ======= Portfolio ======= */
      .tp-portfolio-it-area { background: var(--tp-black); overflow: hidden; }
      .tp-portfolio-it-thumb { position: relative; }
      #service-bg-img { position: absolute; inset: 0; z-index: 0; }
      .service-bg {
         position: absolute; inset: 0;
         background-size: cover; background-position: center;
         opacity: 0; transition: opacity .5s ease;
      }
      .service-bg.active { opacity: 1; }
      .tp-portfolio-it-wrap {
         position: relative; z-index: 1;
         min-height: 400px;
         border-right: 1px solid rgba(255,255,255,0.06);
         padding: 50px 36px;
         background: rgba(18,18,18,0.85);
         transition: background .4s;
         cursor: pointer;
      }
      .col.service__item-8:last-child .tp-portfolio-it-wrap { border-right: none; }
      .tp-portfolio-it-wrap:hover { background: rgba(18,18,18,0.1); }
      .tp-portfolio-it-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
      .tp-portfolio-it-content-inner { }
      .tp-portfolio-it-title a { color: var(--tp-grey-5); }
      .tp-portfolio-it-title a:hover { color: var(--tp-green); }
      .tp-portfolio-it-tag { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
      .tp-portfolio-it-tag a {
         font-size: 12px; color: var(--tp-grey); font-weight: 500;
         padding: 4px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
         text-transform: uppercase; letter-spacing: 0.04em;
      }
      /* ======= Team ======= */
      .tp-team-area { background: var(--tp-black); }
      .tp-team-it-shape {
         position: absolute; right: -100px; bottom: -100px;
         width: 400px; opacity: 0.03; pointer-events: none;
      }
      .tp-team-it-big-title { margin-bottom: -100px; overflow: hidden; position: relative; z-index: 0; }
      .tp-team-it-big-title h2 {
         font-size: clamp(80px, 13vw, 220px);
         font-weight: 700;
         letter-spacing: -0.06em;
         color: rgba(255,255,255,0.04);
         white-space: nowrap;
         line-height: 1;
      }
      .tp-team-it-item { overflow: hidden; border-radius: 4px; }
      .tp-team-it-thumb { display: block; overflow: hidden; border-radius: 4px 4px 0 0; }
      .tp-team-it-thumb img { width: 100%; height: 280px; object-fit: cover; object-position: top; transition: transform .5s; }
      .tp-team-it-item:hover .tp-team-it-thumb img { transform: scale(1.05); }
      .tp-team-it-content {
         background: var(--tp-black-3);
         padding: 20px 22px 22px;
         border-radius: 0 0 4px 4px;
      }
      .tp-team-it-content h3 { margin-bottom: 4px; }
      .tp-team-it-content h3 a { color: var(--tp-white); }
      .tp-team-it-content span { color: var(--tp-grey-2); font-size: 14px; }
      .tp-team-it-socials { position: absolute; top: 14px; right: 14px; }
      .tp-team-it-socials-trigger { cursor: pointer; }
      .tp-team-it-socials-share {
         width: 38px; height: 38px;
         background: rgba(18,18,18,0.8);
         border: 1px solid rgba(255,255,255,0.12);
         border-radius: 50%;
         display: flex; align-items: center; justify-content: center;
         color: var(--tp-white);
      }
      .tp-team-it-socials-wrapper { display: none; }
      .tp-team-it-socials:hover .tp-team-it-socials-wrapper {
         display: flex; gap: 6px;
         position: absolute; top: 0; right: 44px;
         background: rgba(18,18,18,0.95);
         border: 1px solid rgba(255,255,255,0.1);
         border-radius: 30px; padding: 6px 10px;
         white-space: nowrap;
      }
      .tp-team-it-socials-icon { display: flex; gap: 8px; }
      .tp-team-it-socials-icon li a {
         width: 28px; height: 28px; font-size: 13px;
         color: var(--tp-grey); display: flex; align-items: center; justify-content: center;
      }
      .tp-team-it-socials-icon li a:hover { color: var(--tp-green); }
      .tp-team-it-item-right { }
      /* ======= Testimonials (Clutch-style v2) ======= */
      .tp-testimonial-area--v2 { background: #0a0a0a !important; }
      .tp-testimonial-mega-title {
         display: flex;
         flex-direction: column;
         gap: 0;
         font-size: clamp(4rem, 11vw, 130px);
         font-weight: 800;
         line-height: 0.85;
         letter-spacing: -0.04em;
         color: #fff;
         margin: 0;
      }
      .tp-testimonial-mega-title__line { display: block; }
      .tp-clutch-badge {
         display: flex;
         align-items: flex-start;
         gap: 14px;
         padding: 16px 20px;
         border: 1px solid rgba(255, 255, 255, 0.14);
         border-radius: 999px;
         background: rgba(255, 255, 255, 0.03);
         max-width: 320px;
         margin-left: auto;
      }
      .tp-clutch-badge__logo,
      .tp-clutch-badge__mark { flex-shrink: 0; }
      .tp-clutch-badge__rating-row {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 4px;
      }
      .tp-clutch-badge__score {
         font-size: 1.05rem;
         font-weight: 700;
         color: #fff;
      }
      .tp-clutch-badge__stars {
         display: inline-flex;
         gap: 0.15rem;
         color: #f5a623;
         font-size: 0.85rem;
      }
      .tp-clutch-badge__sub {
         font-size: 12px;
         color: rgba(255, 255, 255, 0.45);
         white-space: nowrap;
      }
      @media (max-width: 991px) {
         .tp-clutch-badge { margin-left: 0; max-width: none; }
      }
      .tp-testimonial-it-slider--v2 {
         overflow: visible;
         padding-bottom: 8px;
         margin-top: -150px;
         position: relative;
         z-index: 10;
      }
      .tp-testimonial-it-slider--v2 .swiper-slide { height: auto; }
      .tp-testimonial-it-item--v2 {
         background: rgba(18, 18, 18, 0.65);
         border: 1px solid rgba(255, 255, 255, 0.08);
         border-radius: 16px;
         padding: 34px 30px;
         height: 100%;
         display: flex;
         flex-direction: column;
         position: relative;
         overflow: hidden;
         min-height: 320px;
         backdrop-filter: blur(12px);
         -webkit-backdrop-filter: blur(12px);
      }
      .tp-testimonial-card-quote-icon {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 22px;
         flex-shrink: 0;
      }
      .tp-testimonial-card-quote-icon span {
         font-family: Georgia, serif;
         font-size: 1.35rem;
         font-weight: 700;
         color: #0a0a0a;
         line-height: 1;
         margin-top: -2px;
      }
      .tp-testimonial-card-text {
         font-size: 1.05rem;
         font-weight: 400;
         line-height: 1.6;
         color: rgba(255, 255, 255, 0.7);
         margin: 0 0 auto;
         flex-grow: 1;
      }
      .tp-testimonial-lead {
         color: #fff;
         font-weight: 700;
         margin-right: 0.25em;
      }
      .tp-testimonial-it-author--v2 {
         display: flex;
         align-items: center;
         gap: 14px;
         margin-top: 28px;
         padding-top: 0;
      }
      .tp-testimonial-it-author--v2 img {
         width: 48px;
         height: 48px;
         border-radius: 50%;
         object-fit: cover;
         flex-shrink: 0;
      }
      .tp-testimonial-name {
         font-size: 1.05rem;
         font-weight: 700;
         color: #fff;
         margin: 0 0 2px;
      }
      .tp-testimonial-role {
         font-size: 0.9rem;
         color: rgba(255, 255, 255, 0.45);
         display: block;
      }
      .tp-testimonial-it-pagenation { text-align: center; margin-top: 40px; }
      .tp-testimonial-it-pagenation .swiper-pagination-bullet {
         background: rgba(255, 255, 255, 0.25);
      }
      .tp-testimonial-it-pagenation .swiper-pagination-bullet-active { background: var(--tp-green); }
      /* Legacy testimonial classes (fallback) */
      .tp-testimonial-area { background: var(--tp-black-3); }
      .tp-testimonial-it-title h2 { font-size: clamp(40px, 6vw, 90px); line-height: 1; letter-spacing: -0.04em; }
      .tp-testimonial-it-ratings-wrap { display: flex; align-items: center; gap: 14px; }
      .tp-testimonial-it-star { color: var(--tp-green); font-size: 13px; display: flex; gap: 2px; }
      .tp-testimonial-it-item:not(.tp-testimonial-it-item--v2) {
         background: var(--tp-black-4);
         border: 1px solid rgba(255,255,255,0.06);
         border-radius: 4px;
         padding: 40px 36px;
         position: relative; overflow: hidden;
         height: 100%;
      }
      .tp-testimonial-it-shape { position: absolute; top: 0; right: 0; }
      .tp-testimonial-it-qoute { display: block; margin-bottom: 28px; color: var(--tp-green); }
      .tp-testimonial-it-author:not(.tp-testimonial-it-author--v2) { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
      .tp-testimonial-it-author:not(.tp-testimonial-it-author--v2) img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
      .tp-testimonial-it-author:not(.tp-testimonial-it-author--v2) h4 { margin-bottom: 3px; }
      /* ======= Gallery ======= */
      .tp-gallery-it-area { background: var(--tp-black); }
      .tp-gallery-it-thumb-main {
         background: var(--tp-black-3);
         border-radius: 4px; overflow: hidden; position: relative;
         min-height: 280px;
         background-size: cover; background-position: center;
      }
      .tp-gallery-it-item-wrap {
         position: absolute; inset: 0;
         display: flex; flex-direction: column; justify-content: space-between;
         padding: 32px;
         background: rgba(18,18,18,0.5);
      }
      .tp-gallery-it-title { font-size: 22px; line-height: 1.25; color: var(--tp-black); }
      .tp-gallery-it-btn-box { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
      .tp-gallery-it-btn-box span, .tp-gallery-it-btn-box a { font-size: 14px; font-weight: 600; color: var(--tp-black); }
      .tp-gallery-it-thumb { border-radius: 4px; overflow: hidden; position: relative; }
      .tp-gallery-it-thumb img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform .5s; }
      .tp-gallery-it-thumb:hover img { transform: scale(1.04); }
      
      .gallery-quote-overlay {
         position: absolute;
         inset: 0;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         padding: 24px;
         background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 80%);
         color: #fff;
         transition: background .4s ease;
         z-index: 1;
      }
      .tp-gallery-it-thumb:hover .gallery-quote-overlay {
         background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 100%);
      }
      .gallery-quote-text {
         font-size: 18px;
         font-weight: 600;
         font-style: italic;
         line-height: 1.4;
         margin-bottom: 8px;
         color: #ffffff;
      }
      .gallery-quote-author {
         font-size: 14px;
         font-weight: 700;
         color: var(--tp-green);
         text-transform: uppercase;
         letter-spacing: 0.04em;
      }
      .gx-10 { --bs-gutter-x: 10px; }
      .gx-30 { --bs-gutter-x: 30px; }
      .gx-50 { --bs-gutter-x: 50px; }
      /* ======= Blog ======= */
      .tp-blog-area { background: var(--tp-black); }
      .tp-blog-thumb { overflow: hidden; border-radius: 4px; }
      .tp-blog-thumb img { width: 100%; height: 280px; object-fit: cover; transition: transform .5s; }
      .tp-blog-thumb:hover img { transform: scale(1.04); }
      .tp-blog-content { padding-top: 22px; }
      .tp-blog-meta { display: flex; align-items: center; gap: 10px; }
      .tp-blog-meta span { font-size: 13px; color: var(--tp-grey); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
      .tp-blog-meta .borders { width: 4px; height: 4px; border-radius: 50%; background: var(--tp-grey); }
      .tp-blog-content h3 a { color: var(--tp-white); transition: color .3s; font-size: 22px; line-height: 1.3; }
      .tp-blog-content h3 a:hover { color: var(--tp-green); }
      /* ======= CTA ======= */
      .tp-cta-area { background: #0a0a0a; position: relative; overflow: hidden; padding: 120px 0; }
      .tp-cta-it-content { position: relative; z-index: 2; }
      .tp-cta-it-content h2 { color: #ffffff; font-weight: 700; letter-spacing: -0.04em; }
      
      .cta-input-modern {
         padding: 16px 20px;
         border-radius: 8px;
         background: rgba(255, 255, 255, 0.03);
         border: 1px solid rgba(255, 255, 255, 0.15);
         color: #ffffff;
         font-family: inherit;
         font-size: 16px;
         outline: none;
         width: 100%;
         transition: border-color .3s, background .3s;
      }
      .cta-input-modern::placeholder { color: rgba(255, 255, 255, 0.45); }
      .cta-input-modern:focus { border-color: var(--tp-green); background: rgba(255,255,255,0.08); }
      
      .cta-btn-modern {
         background: var(--tp-green);
         color: #0a0a0a;
         padding: 18px 48px;
         border-radius: 8px;
         font-size: 15px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.02em;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         border: none;
         transition: background .3s, transform .2s;
         width: auto;
      }
      .cta-btn-modern:hover { background: #ffffff; transform: translateY(-2px); }
      .cta-btn-modern:active { transform: translateY(0); }
      /* ======= Contact Form ======= */
      .tp-contact-area { background: var(--tp-black-3); padding: 120px 0; }
      .tp-contact-title-wrap h2 { color: var(--tp-white); line-height: 1.15; }
      .tp-contact-form { }
      .tp-contact-form input, .tp-contact-form textarea {
         width: 100%;
         padding: 14px 20px;
         background: var(--tp-black-4);
         border: 1px solid rgba(255,255,255,0.1);
         border-radius: 4px;
         color: var(--tp-white);
         font-family: var(--tp-font);
         font-size: 15px;
         outline: none;
         transition: border-color .3s;
         display: block;
         margin-bottom: 16px;
      }
      .tp-contact-form input:focus, .tp-contact-form textarea:focus { border-color: var(--tp-green); }
      .tp-contact-form textarea { height: 140px; resize: vertical; }
      .tp-contact-form input::placeholder, .tp-contact-form textarea::placeholder { color: var(--tp-grey); }
      .input-invalid { border-color: #ff4444 !important; }
      .field-error { display: block; color: #ff6666; font-size: 13px; margin-top: -12px; margin-bottom: 12px; }
      .contact-flash {
         padding: 14px 20px; border-radius: 4px; margin-bottom: 20px;
         font-size: 15px; font-weight: 500;
      }
      .contact-flash.success { background: rgba(180,231,23,0.12); border: 1px solid rgba(180,231,23,0.3); color: var(--tp-green); }
      .contact-flash.error { background: rgba(255,68,68,0.1); border: 1px solid rgba(255,68,68,0.25); color: #ff6666; }
      /* ======= CTA Scale Shape ======= */
      .tp-cta-it-scale { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; }
      .tp-cta-it-shape, .tp-cta-it-shape-2 { position: absolute; width: 200px; opacity: 0.15; pointer-events: none; }
      .tp-cta-it-shape { top: -50px; right: -50px; }
      .tp-cta-it-shape-2 { bottom: -50px; left: -50px; transform: rotate(180deg); }
      /* ======= Footer ======= */
      .tp-footer-area { background: #090909; }
      .tp-footer-wd-main { padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.06); }
      .tp-footer-logo a { display: inline-flex; align-items: center; text-decoration: none; }
      .tp-footer-logo img { height: 36px; width: auto; display: block; object-fit: contain; }
      .tp-footer-it-dec { color: var(--tp-grey-5); font-size: 16px; line-height: 1.65; }
      .tp-footer-widget-form .p-relative { position: relative; }
      .tp-input {
         width: 100%; padding: 12px 50px 12px 18px;
         background: rgba(255,255,255,0.05);
         border: 1px solid rgba(255,255,255,0.1);
         border-radius: 4px;
         color: var(--tp-white); font-family: var(--tp-font); font-size: 14px;
         outline: none; transition: border-color .3s;
      }
      .tp-input:focus { border-color: var(--tp-green); }
      .tp-input::placeholder { color: var(--tp-grey); }
      .tp-button {
         position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
         background: none; border: none; cursor: pointer;
         color: var(--tp-green); display: flex; align-items: center; justify-content: center;
      }
      .tp-footer-widget-title { color: var(--tp-white); margin-bottom: 24px; }
      .tp-footer-wd-widget ul li, .tp-footer-cst-widget ul li { margin-bottom: 12px; }
      .tp-footer-wd-widget ul li a, .tp-footer-cst-widget ul li a { color: var(--tp-grey); font-size: 16px; transition: color .3s, padding-left .3s; font-weight: 500; }
      .tp-footer-wd-widget ul li a:hover, .tp-footer-cst-widget ul li a:hover { color: var(--tp-white); padding-left: 6px; }
      .tp-footer-wd-widget ul li span, .tp-footer-cst-widget ul li span {
         font-size: 11px; font-weight: 700; text-transform: uppercase;
         letter-spacing: 0.06em; color: var(--tp-green);
         background: rgba(180,231,23,0.1);
         padding: 2px 7px; border-radius: 10px; margin-left: 8px;
      }
      .tp-footer-it-widget a { color: var(--tp-grey); font-size: 16px; }
      .tp-footer-it-widget a:hover { color: var(--tp-white); }
      .tp-footer-cst-bottom { padding: 28px 0; }
      .tp-footer-it-copyright { color: var(--tp-grey); font-size: 14px; }
      .tp-footer-it-copyright a:hover { color: var(--tp-white); }
      .tp-footer-it-bigtext-wrap { padding-top: 10px; overflow: hidden; }
      .tp-footer-it-bigtext {
         font-size: clamp(80px, 14vw, 240px);
         font-weight: 700; letter-spacing: -0.06em; line-height: 1;
         color: rgba(255,255,255,0.03);
         text-align: center;
      }
      /* ======= Section title reveal anim ======= */
      .tp-text-revel-anim { overflow: hidden; }
      /* ======= Swiper overrides ======= */
      .swiper-pagination-bullet { background: rgba(255,255,255,0.25); opacity: 1; width: 8px; height: 8px; }
      .swiper-pagination-bullet-active { background: var(--tp-green); }
      /* ======= Scale up hover images (gallery etc.) ======= */
      .scale-up-img { overflow: hidden; }
      .scale-up {
         transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         will-change: transform;
      }
      .scale-up-img:hover .scale-up { transform: scale(1.06); }
      /* Banner image uses its own zoom animation — prevent hover-scale from interfering */
      .tp-banner-area:hover .tp-banner-it-thumb img { transform: scale(1.0); }
      /* ======= tp-round ======= */
      .tp-round-26 { border-radius: 26px; }
      .tp-round-10 { border-radius: 10px; }
      /* ======= Text perspective ======= */
      .tp-text-perspective { perspective: 400px; }
      /* ======= Underline animations ======= */
      .underline-black { position: relative; }
      .underline-black::after {
         content: ''; position: absolute; bottom: -2px; left: 0;
         width: 0; height: 1px; background: currentColor;
         transition: width .3s;
      }
      .underline-black:hover::after { width: 100%; }
      /* ======= Fade animation ======= */
      .tp_fade_anim { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
      .tp_fade_anim.animated { opacity: 1; transform: translateY(0); }
      /* ======= search overlay ======= */
      .tp-search-body-overlay { display: none; }
      /* ======= Tooltip / text helpers ======= */
      .text-uppercase { text-transform: uppercase; }
      .d-inline-block { display: inline-block; }
      .opacity-8 { opacity: 0.8; }
      .hover-opacity-1:hover { opacity: 1; }
      /* ======= Responsive ======= */
      @media (max-width: 1199px) {
         .ml-65, .ml-80, .ml-100, .ml-115 { margin-left: 0; }
         .tp-hero-social { display: none; }
         .tp-process-it-icon { display: none; }
      }
      @media (max-width: 991px) {
         .tp-main-menu { display: none !important; }
         .tp-header-pill {
            padding: 12px 18px 12px 22px;
            border-radius: 80px;
         }
         .tp-header-logo img { height: 34px; }
         .tp-hero-area { padding-top: 120px; }
         .tp-hero-it-counter-wrap { gap: 30px; }
         .pt-160, .pt-140 { padding-top: 80px; }
         .pt-120, .pt-110 { padding-top: 60px; }
         .pb-120, .pb-130, .pb-145, .pb-150, .pb-170 { padding-bottom: 60px; }
         .tp-team-it-big-title { margin-bottom: -50px; }
         .tp-about-counter-wrap { min-height: 220px; }
         .tp-about-big-num { font-size: 140px; }
         .tp-about-badge.badge-top { right: 10%; }
         .tp-about-badge.badge-bottom { right: 10%; }
      }
      @media (max-width: 767px) {
         .tp-hero-it-title { font-size: clamp(30px, 8vw, 55px); }
         .tp-hero-it-bigtitle { font-size: 60px; }
         .pt-180 { padding-top: 60px; }
         .tp-cta-it-form { display: flex; flex-direction: column; align-items: stretch; }
         .cta-it-input { max-width: 100%; margin-right: 0; }
      }
      /* ======= Loading Screen ======= */
      .loader-wrap {
         position: fixed; inset: 0;
         background: var(--tp-black);
         z-index: 999999;
         display: flex; flex-direction: column;
         align-items: center; justify-content: center;
         transition: transform .7s cubic-bezier(.7,0,.3,1);
      }
      .loader-wrap.loaded { transform: translateY(-100%); }
      .load-text { display: flex; gap: 6px; }
      .load-text span {
         font-size: 48px; font-weight: 800;
         letter-spacing: -0.05em; color: var(--tp-white);
         animation: load-char .8s ease both;
      }
      .load-text span:nth-child(1) { animation-delay: .1s; }
      .load-text span:nth-child(2) { animation-delay: .2s; }
      .load-text span:nth-child(3) { animation-delay: .3s; }
      .load-text span:nth-child(4) { animation-delay: .4s; }
      .load-text span:nth-child(5) { animation-delay: .5s; }
      .load-text span:nth-child(6) { animation-delay: .6s; }
      @keyframes load-char { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }