 :root {
   --tp-purple: #7B2FBE;
   --tp-purple-dark: #4A1070;
   --tp-purple-deeper: #2D0050;
   --tp-green: #3ABF5E;
   --tp-green-dark: #28A348;
   --tp-yellow: #F5A623;
   --tp-text-dark: #1A1A2E;
   --tp-text-mid: #4A4A6A;
   --tp-text-light: #8A8AA8;
   --tp-border: #E8E8F0;
   --tp-bg-light: #F6F7FB;
   --tp-white: #FFFFFF;
   --tp-footer-bg: #1E0038;
   --tp-radius: 10px;
   --tp-shadow: 0 4px 20px rgba(123, 47, 190, .12);
   --tp-shadow-hover: 0 8px 32px rgba(123, 47, 190, .22);
   --font-main: 'Inter', 'Segoe UI', 'Tajawal', 'Cairo', Arial, sans-serif;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box
 }

 html {
   scroll-behavior: smooth;
   overflow-x: hidden;
 }

 body {
   font-family: var(--font-main);
   color: var(--tp-text-dark);
   background: var(--tp-white);
   font-size: 15px;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }

 a {
   text-decoration: none;
   color: inherit
 }

 a:hover {
   color: var(--tp-purple)
 }

 img {
   max-width: 100%;
   height: auto;
   display: block
 }

 /* BUTTONS */
 .btn-purple {
   background: var(--tp-purple);
   color: #fff;
   border: none;
   border-radius: 6px;
   padding: 10px 24px;
   font-weight: 600;
   font-size: 14px;
   transition: background .2s, transform .15s;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap
 }

 .btn-purple:hover {
   background: #6520a8;
   color: #fff;
   transform: translateY(-1px)
 }

 .btn-green {
   background: var(--tp-green);
   color: #fff;
   border: none;
   border-radius: 6px;
   padding: 10px 22px;
   font-weight: 600;
   font-size: 14px;
   transition: background .2s;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   white-space: nowrap
 }

 .btn-green:hover {
   background: var(--tp-green-dark);
   color: #fff
 }

 .btn-outline-lt {
   background: transparent;
   color: rgba(255, 255, 255, .9);
   border: 1.5px solid rgba(255, 255, 255, .5);
   border-radius: 6px;
   padding: 10px 22px;
   font-weight: 600;
   font-size: 14px;
   transition: all .2s;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   white-space: nowrap
 }

 .btn-outline-lt:hover {
   background: rgba(255, 255, 255, .15);
   color: #fff
 }

 /* UTILITIES */
 .section-title {
   font-size: 2rem;
   font-weight: 700;
   color: var(--tp-text-dark);
   margin-bottom: .4rem
 }

 .section-subtitle {
   font-size: .92rem;
   color: var(--tp-text-light);
   margin-bottom: 2rem
 }

 .badge-pill-green {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(58, 191, 94, .12);
   color: #28A348;
   border-radius: 100px;
   padding: 4px 14px;
   font-size: .78rem;
   font-weight: 600;
   margin-bottom: .8rem
 }

 .text-purple {
   color: var(--tp-purple) !important
 }

 /* ── TOP BAR ── */
 .tp-topbar {
   background: #fff;
   border-bottom: 1px solid var(--tp-border);
   padding: 10px 0;
   position: sticky;
   top: 0;
   z-index: 1050
 }

 .tp-search-wrap {
   position: relative;
   flex: 1;
   max-width: 480px
 }

 .tp-search-wrap input {
   width: 100%;
   border: 1.5px solid var(--tp-border);
   border-radius: 100px;
   padding: 8px 18px 8px 44px;
   font-size: 14px;
   outline: none;
   transition: border .2s;
   background: var(--tp-bg-light)
 }

 .tp-search-wrap input:focus {
   border-color: var(--tp-purple);
   background: #fff
 }

 .tp-search-wrap .sicon {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--tp-text-light);
   font-size: 14px
 }

 .logo-name {
   font-size: 1rem;
   font-weight: 700;
   color: var(--tp-purple-dark)
 }

 .logo-sub {
   font-size: .65rem;
   color: var(--tp-text-light)
 }

 .icon-btn {
   background: none;
   border: none;
   cursor: pointer;
   color: var(--tp-text-mid);
   font-size: 18px;
   padding: 4px;
   transition: color .2s
 }

 .icon-btn:hover {
   color: var(--tp-purple)
 }

 .sign-in-btn {
   font-size: 14px;
   font-weight: 500;
   color: var(--tp-text-dark);
   cursor: pointer;
   border: none;
   background: none
 }

 .sign-in-btn:hover {
   color: var(--tp-purple)
 }

 /* ── NAV ── */
 .tp-navbar {
   background: #fff;
   border-bottom: 1px solid var(--tp-border);
   padding: 0
 }

 .tp-navbar .navbar-nav .nav-link {
   font-size: 14px;
   font-weight: 500;
   color: var(--tp-text-mid) !important;
   padding: 14px 16px !important;
   transition: color .2s;
   position: relative
 }

 .tp-navbar .navbar-nav .nav-link.active,
 .tp-navbar .navbar-nav .nav-link:hover {
   color: var(--tp-purple) !important
 }

 .tp-navbar .navbar-nav .nav-link.active::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 16px;
   right: 16px;
   height: 2px;
   background: var(--tp-purple);
   border-radius: 2px
 }

 .tp-navbar .dropdown-menu {
   border: 1px solid var(--tp-border);
   border-radius: 10px;
   padding: 8px 0;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
   margin-top: 0
 }

 .tp-navbar .dropdown-item {
   font-size: 14px;
   padding: 8px 18px
 }

 .tp-navbar .dropdown-item:hover {
   background: rgba(123, 47, 190, .07);
   color: var(--tp-purple)
 }

 /* ── PAGE TABS ── */
 .page-tabs {
   display: flex;
   gap: 0;
   border-bottom: 2px solid var(--tp-border);
   margin-bottom: 40px;
   overflow-x: auto
 }

 .page-tab {
   padding: 10px 20px;
   font-size: .88rem;
   font-weight: 600;
   color: var(--tp-text-light);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   margin-bottom: -2px;
   white-space: nowrap;
   transition: all .2s
 }

 .page-tab.active {
   color: var(--tp-purple);
   border-bottom-color: var(--tp-purple)
 }

 .page-tab:hover {
   color: var(--tp-purple)
 }

 .page-section {
   display: none
 }

 .page-section.active {
   display: block
 }

 /* ── PAGE HERO BANNER ── */
 .tp-hero-banner {
   background: linear-gradient(135deg, #4A1070 0%, #9B30E0 100%);
   padding: 60px 0 70px;
   position: relative;
   overflow: hidden;
   min-height: 200px
 }

 .tp-hero-banner::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
   background-size: 80px 80px
 }

 .tp-hero-banner h1 {
   font-size: 2rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: .5rem;
   position: relative
 }

 .tp-hero-banner .breadcrumb {
   background: none;
   margin: 0;
   padding: 0;
   justify-content: center
 }

 .tp-hero-banner .breadcrumb-item {
   color: rgba(255, 255, 255, .7);
   font-size: .88rem
 }

 .tp-hero-banner .breadcrumb-item a {
   color: rgba(255, 255, 255, .7)
 }

 .tp-hero-banner .breadcrumb-item.active {
   color: #fff
 }

 .tp-hero-banner .breadcrumb-item+.breadcrumb-item::before {
   color: rgba(255, 255, 255, .5);
   content: '//'
 }

 /* ── HOME HERO ── */
 .tp-home-hero {
   background: linear-gradient(135deg, #4A1070 0%, #9B30E0 100%);
   padding: 60px 0 0;
   position: relative;
   overflow: hidden;
   min-height: 400px
 }

 .tp-home-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
   background-size: 80px 80px
 }

 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, .12);
   color: rgba(255, 255, 255, .9);
   border-radius: 100px;
   padding: 5px 14px;
   font-size: .78rem;
   font-weight: 600;
   margin-bottom: 1.2rem;
   border: 1px solid rgba(255, 255, 255, .2)
 }

 .tp-home-hero h1 {
   font-size: 2.4rem;
   font-weight: 800;
   color: #fff;
   line-height: 1.25;
   margin-bottom: 1rem
 }

 .tp-home-hero .hero-desc {
   color: rgba(255, 255, 255, .8);
   font-size: .95rem;
   margin-bottom: 2rem;
   max-width: 480px
 }

 .hero-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 2rem
 }

 /* ── OFFER CARDS ── */
 .tp-offer-section {
   padding: 80px 0
 }

 .tp-offer-card {
   padding: 20px;
   border-radius: var(--tp-radius);
   border: 1px solid var(--tp-border);
   background: #fff;
   transition: box-shadow .25s, transform .25s;
   height: 100%
 }

 .tp-offer-card:hover {
   box-shadow: var(--tp-shadow-hover);
   transform: translateY(-4px)
 }

 .tp-offer-card .icon-wrap {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: rgba(123, 47, 190, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px;
   font-size: 20px;
   color: var(--tp-purple)
 }

 .tp-offer-card h5 {
   font-size: .95rem;
   font-weight: 700;
   margin-bottom: .4rem
 }

 .tp-offer-card p {
   font-size: .84rem;
   color: var(--tp-text-light);
   margin: 0;
   line-height: 1.6
 }

 .tp-pmp-section {
   padding: 80px 0;
   background: var(--tp-bg-light);
 }

 /* reuse tp-offer-card base — just add flex for the feature card variant */
 .tp-pmp-cat-card {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }

 .tp-pmp-feature-card {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin-top: 20px;
 }

 .tp-pmp-feature-card .icon-wrap {
   flex-shrink: 0;
 }

 .tp-pmp-feature-card h5 {
   margin-bottom: .3rem;
 }

 /* Platform block wrapper */
 .tp-pmp-platform {
   background: #fff;
   border: 1px solid var(--tp-border);
   border-radius: 16px;
   padding: 48px 40px;
 }

 .tp-pmp-platform-title {
   font-size: 1.45rem;
   font-weight: 700;
   margin: 12px 0 10px;
   color: var(--tp-text-dark);
 }

 .tp-pmp-platform-desc {
   font-size: .88rem;
   color: var(--tp-text-light);
   line-height: 1.65;
   margin-bottom: 0;
 }

 /* Badge grid */
 .tp-pmp-badge-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
 }

 @media (min-width: 576px) {
   .tp-pmp-badge-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 .tp-pmp-badge {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
   background: var(--tp-bg-light);
   border: 1px solid var(--tp-border);
   border-radius: var(--tp-radius);
   font-size: .82rem;
   font-weight: 600;
   color: var(--tp-text-dark);
   transition: background .2s, border-color .2s, color .2s;
   cursor: default;
 }

 .tp-pmp-badge:hover {
   background: rgba(123, 47, 190, .06);
   border-color: var(--tp-purple);
   color: var(--tp-purple);
 }

 .tp-pmp-badge i {
   font-size: 1.1rem;
   color: var(--tp-purple);
   flex-shrink: 0;
 }

 @media (max-width: 991px) {
   .tp-pmp-platform {
     padding: 32px 24px;
   }
 }

 /* MARKETPLACE SECTION */
 .tp-mkt-section {
   background: #F3F4FA;
   padding: 80px 0;
 }

 .tp-service-card {
   border-radius: 18px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 4px 15px rgba(0, 0, 0, .06);
   transition: .3s ease;
   margin: 10px;
   height: 100%;
 }

 .tp-service-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
 }

 .tp-service-card img {
   width: 100%;
   height: 170px;
   object-fit: cover;
 }

 .tp-service-card .card-body {
   padding: 18px;
   text-align: center;
 }

 .tp-service-card .card-title {
   font-size: 15px;
   font-weight: 700;
   margin-bottom: 10px;
   color: #1f1f1f;
 }

 .tp-service-card .card-text {
   font-size: 13px;
   line-height: 1.6;
   color: #6c757d;
   margin: 0;
 }

 .badge-pill-green {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
   border-radius: 50px;
   background: rgba(107, 203, 69, .1);
   color: #6BCB45;
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 20px;
 }

 .section-title {
   font-size: 42px;
   font-weight: 700;
   margin-bottom: 10px;
 }

 .section-subtitle {
   color: #777;
   max-width: 650px;
   margin: auto;
 }

 /* Slick */
 .service-slider .slick-track {
   display: flex;
 }

 .service-slider .slick-slide {
   height: inherit;
 }

 .service-slider .slick-slide>div {
   height: 100%;
 }

 .service-slider .slick-dots {
   bottom: -50px;
 }

 .service-slider .slick-dots li {
   margin: 0 4px;
 }

 .service-slider .slick-dots li button:before {
   font-size: 10px;
   color: #6BCB45;
   opacity: .3;
 }

 .service-slider .slick-dots li.slick-active button:before {
   color: #6BCB45;
   opacity: 1;
 }

 /* ── HOW SECTION ── */
 .tp-how-section {
   background: #1E0038;
   padding: 80px 0;
   position: relative;
   overflow: hidden
 }

 .tp-how-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
   background-size: 60px 60px
 }

 .tp-how-section .section-title {
   color: #fff
 }

 .tp-how-section .section-subtitle {
   color: rgba(255, 255, 255, .6)
 }

 .tp-step-card {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 14px;
   padding: 28px 22px;
   height: 100%
 }

 .tp-step-card .step-num {
   font-size: 2.2rem;
   font-weight: 800;
   color: rgba(255, 255, 255, .12);
   line-height: 1;
   margin-bottom: 14px
 }

 .tp-step-card h5 {
   font-size: .95rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: .5rem
 }

 .tp-step-card p {
   font-size: .82rem;
   color: rgba(255, 255, 255, .6);
   margin: 0
 }

 .tp-step-card .tags {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-top: 12px
 }

 .tp-step-card .tags span {
   background: rgba(255, 255, 255, .1);
   color: rgba(255, 255, 255, .7);
   border-radius: 4px;
   padding: 2px 8px;
   font-size: .72rem
 }

 /* ── CST CARDS ── */
 .tp-cst-section {
   padding: 80px 0
 }

 .tp-cst-card {
   border: 1px solid var(--tp-border);
   border-radius: 14px;
   padding: 22px;
   height: 100%
 }

 .tp-cst-card h5 {
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: .3rem
 }

 .tp-cst-card .desc {
   font-size: .83rem;
   color: var(--tp-text-light);
   margin-bottom: 14px
 }

 /* ── INDUSTRIES ── */
 .tp-ind-section {
   padding: 80px 0;
   background: var(--tp-bg-light)
 }

 .tp-industry-card {
   background: #fff;
   border: 1px solid var(--tp-border);
   border-radius: 14px;
   padding: 22px;
   height: 100%;
   transition: box-shadow .25s, transform .25s
 }

 .tp-industry-card:hover {
   box-shadow: var(--tp-shadow);
   transform: translateY(-3px)
 }

 .tp-ind-section .row {
   align-items: stretch;
 }

 .tp-ind-section .col-lg-4 {
   display: flex;
   transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
 }

 .tp-ind-section .tp-industry-card {
   position: relative;
   width: 100%;
   border: 0;
   border-top: 0;
   border-radius: 8px;
   padding: 26px 24px;
   background: #fff;
   box-shadow: 0 10px 28px rgba(16, 24, 40, .06);
   isolation: isolate;
 }

 .tp-ind-section .tp-industry-card::after {
   display: none;
 }

 .tp-ind-section .tp-industry-card:hover {
   box-shadow: 0 22px 48px rgba(16, 24, 40, .12);
   transform: translateY(-6px);
 }

 .tp-ind-section .tp-industry-card .icon-wrap {
   width: 54px;
   height: 54px;
   border-radius: 8px;
   border: 1px solid rgba(95, 45, 186, .14);
   background: linear-gradient(135deg, #F3F0FF, #ECFDF3);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
 }

 .tp-ind-section .tp-industry-card h5 {
   font-size: 1rem;
   margin-bottom: 8px;
 }

 .tp-ind-section .tp-industry-card p {
   line-height: 1.68;
 }

 .tp-ind-section .col-lg-4:has(.tp-industry-card.is-active) {
   position: relative;
   z-index: 3;
   transform: scale(1.08);
 }

 .tp-ind-section .col-lg-4:not(:has(.tp-industry-card.is-active)) {
   transform: scale(.94);
   opacity: .88;
 }

 .tp-ind-section .tp-industry-card.is-active {
   border: 0;
   background:
     radial-gradient(circle at 86% 12%, rgba(22, 166, 106, .12), transparent 30%),
     linear-gradient(180deg, #fff 0%, #FCFCFF 100%);
   box-shadow: 0 28px 64px rgba(16, 24, 40, .16);
   min-height: 260px;
 }

 .tp-ind-section .tp-industry-card.is-active::before {
   opacity: 1;
 }

 .tp-ind-section .tp-industry-card.is-active .icon-wrap {
   background: var(--tp-purple);
   color: #fff;
   border-color: var(--tp-purple);
   box-shadow: 0 16px 28px rgba(95, 45, 186, .22);
 }

 .tp-ind-section .tp-industry-card.is-active h5 {
   font-size: 1.08rem;
 }

 @supports not selector(:has(*)) {
   .tp-ind-section .tp-industry-card.is-active {
     transform: scale(1.08);
   }
 }

 .tp-industry-card .icon-wrap {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: rgba(123, 47, 190, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: var(--tp-purple);
   margin-bottom: 14px
 }

 .tp-industry-card h5 {
   font-size: .95rem;
   font-weight: 700;
   margin-bottom: .4rem
 }

 .tp-industry-card p {
   font-size: .82rem;
   color: var(--tp-text-light);
   margin-bottom: 12px
 }

 /* ── ABOUT ── */
 .tp-about-intro {
   padding: 80px 0
 }

 .tp-vm-card {
   border-radius: 16px;
   padding: 32px 28px;
   height: 100%
 }

 /* .tp-vm-card.vision {
   background: #4A1070
 }

 .tp-vm-card.mission {
   background: #1A3CA8
 } */

 .tp-vm-card .vm-icon {
   width: 52px;
   height: 52px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: var(--tp-yellow);
   margin-bottom: 20px
 }

 .tp-vm-card .vm-label {
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--tp-yellow);
   margin-bottom: .5rem
 }

 .tp-vm-card h4 {
   font-size: 1.05rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: .4rem
 }

 .tp-vm-card p {
   font-size: .85rem;
   color: rgba(255, 255, 255, .75);
   margin: 0
 }



 .tp-value-card {
   border: 1px solid var(--tp-border);
   border-radius: 14px;
   padding: 24px;
   height: 100%;
   transition: box-shadow .25s, transform .25s
 }

 .tp-value-card:hover {
   border: 1px solid var(--tp-purple);
   box-shadow: var(--tp-shadow);
   transform: translateY(-3px)
 }

 .tp-value-card .val-icon {
   font-size: 22px;
   color: var(--tp-purple);
   margin-bottom: 10px
 }

 .tp-value-card h6 {
   font-size: .9rem;
   font-weight: 700;
   margin-bottom: .4rem
 }

 .tp-value-card p {
   font-size: .82rem;
   color: var(--tp-text-light);
   margin: 0
 }

 /* ── SERVICES PAGE ── */
 .tp-services-section {
   padding: 60px 0
 }

 .tp-service-category h4 {
   font-size: 1.15rem;
   font-weight: 700;
   margin-bottom: 1.2rem;
   padding-bottom: 8px;
   border-bottom: 2px solid var(--tp-border)
 }

 .tp-service-thumb {
   border-radius: 10px;
   overflow: hidden;
   cursor: pointer;
   transition: box-shadow .2s, transform .2s;
   border: 1px solid gainsboro;
 }

 .tp-service-thumb:hover {
   box-shadow: var(--tp-shadow-hover);
   transform: translateY(-3px)
 }

 .tp-service-thumb img {
   width: 100%;
   height: 140px;
   object-fit: cover;
   display: block
 }

 .tp-service-thumb .thumb-label {
   text-align: center;
   font-size: .85rem;
   font-weight: 600;
   padding: 10px 8px;
   color: var(--tp-text-dark)
 }

 /* ── PRODUCT CARDS ── */
 .tp-mp-section {
   padding: 40px 0 60px
 }

 .tp-mp-cat-title {
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center
 }

 .tp-mp-cat-title a {
   font-size: .82rem;
   font-weight: 600;
   color: var(--tp-purple)
 }

 .tp-product-card {
   background: #fff;
   border: 1px solid var(--tp-border);
   border-radius: 12px;
   overflow: hidden;
   transition: box-shadow .25s
 }

 .tp-product-card:hover {
   box-shadow: var(--tp-shadow)
 }

 .tp-product-card .img-wrap {
   position: relative;
   height: 140px;
   overflow: hidden
 }

 .tp-product-card .img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover
 }

 .tp-product-card .badge-new {
   position: absolute;
   top: 8px;
   left: 8px;
   background: var(--tp-purple);
   color: #fff;
   border-radius: 4px;
   padding: 2px 8px;
   font-size: .7rem;
   font-weight: 700
 }

 .tp-product-card .badge-sale {
   position: absolute;
   top: 8px;
   left: 8px;
   background: #E53935;
   color: #fff;
   border-radius: 4px;
   padding: 2px 8px;
   font-size: .7rem;
   font-weight: 700
 }

 .tp-product-card .fav-btn {
   position: absolute;
   top: 8px;
   right: 8px;
   background: rgba(255, 255, 255, .9);
   border: none;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   color: var(--tp-text-light);
   cursor: pointer;
   transition: color .2s
 }

 .tp-product-card .fav-btn:hover {
   color: #E53935
 }

 .tp-product-card .card-body {
   padding: 12px 14px 14px
 }

 .tp-product-card .product-title {
   font-size: .88rem;
   font-weight: 700;
   margin-bottom: 3px
 }

 .tp-product-card .product-desc {
   font-size: .75rem;
   color: var(--tp-text-light);
   margin-bottom: 6px;
   line-height: 1.4
 }

 .tp-product-card .stars {
   color: var(--tp-yellow);
   font-size: .75rem;
   margin-bottom: 6px
 }

 .tp-product-card .price {
   font-size: .95rem;
   font-weight: 700;
   color: var(--tp-text-dark);
   margin-bottom: 10px
 }

 .tp-product-card .btn-add-cart {
   width: 100%;
   background: var(--tp-purple);
   color: #fff;
   border: none;
   border-radius: 6px;
   padding: 8px;
   font-size: .82rem;
   font-weight: 600;
   cursor: pointer;
   transition: background .2s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px
 }

 .tp-product-card .btn-add-cart:hover {
   background: #6520a8
 }

 .tp-incubator {
   background: var(--tp-bg-light);
   border-radius: 14px;
   padding: 40px;
   margin: 20px 0
 }

 .tp-incubator h4 {
   font-size: 1.3rem;
   font-weight: 700;
   margin-bottom: .5rem
 }

 .tp-incubator p {
   font-size: .88rem;
   color: var(--tp-text-light);
   margin-bottom: 1.2rem
 }

 .tp-incubator ul {
   list-style: none;
   padding: 0;
   margin: 0 0 1.5rem
 }

 .tp-incubator ul li {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: .85rem;
   margin-bottom: 8px
 }

 .tp-incubator ul li i {
   color: var(--tp-green);
   font-size: 14px
 }

 /* ── REGISTRATION ── */
 .tp-reg-section {
   padding: 60px 0
 }

 .tp-reg-form-wrap {
   background: #fff;
   border: 1px solid var(--tp-border);
   border-radius: 16px;
   padding: 40px;
   max-width: 720px;
   margin: 0 auto
 }

 .tp-reg-form-wrap h3 {
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: .3rem
 }

 .tp-form-label {
   font-size: .82rem;
   font-weight: 600;
   color: var(--tp-text-dark);
   margin-bottom: 4px;
   display: block
 }

 .req {
   color: #E53935
 }

 .tp-form-control {
   border: 1.5px solid var(--tp-border);
   border-radius: 8px;
   padding: 10px 14px;
   font-size: .88rem;
   width: 100%;
   outline: none;
   transition: border .2s;
   background: #fff;
   color: var(--tp-text-dark)
 }

 .tp-form-control:focus {
   border-color: var(--tp-purple);
   box-shadow: 0 0 0 3px rgba(123, 47, 190, .1)
 }

 .tp-form-control::placeholder {
   color: var(--tp-text-light)
 }

 .tp-form-control.icon-left {
   padding-left: 36px
 }

 .tp-input-wrap {
   position: relative
 }

 .tp-input-wrap .iicon {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--tp-text-light);
   font-size: 14px
 }

 select.tp-form-control {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238A8AA8' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
   background-size: 14px;
   padding-right: 36px;
   cursor: pointer
 }

 textarea.tp-form-control {
   resize: vertical;
   min-height: 110px
 }

 /* ── CONTACT ── */
 .tp-contact-section {
   padding: 70px 0
 }

 .tp-contact-info h3 {
   font-size: 1.4rem;
   font-weight: 700;
   line-height: 1.35;
   margin-bottom: 1rem
 }

 .tp-contact-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin-bottom: 1.5rem
 }

 .tp-contact-item .ci-icon {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: #4A1070;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   color: #fff;
   flex-shrink: 0
 }

 .tp-contact-item .ci-text h6 {
   font-size: .9rem;
   font-weight: 700;
   margin-bottom: .25rem
 }

 .tp-contact-item .ci-text p {
   font-size: .83rem;
   color: var(--tp-text-light);
   margin: 0;
   line-height: 1.6
 }

 .tp-social-btns {
   display: flex;
   gap: 10px;
   margin-top: .8rem
 }

 .tp-social-btns a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1.5px solid var(--tp-border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   color: var(--tp-text-mid);
   transition: all .2s
 }

 .tp-social-btns a:hover {
   border-color: var(--tp-purple);
   color: var(--tp-purple)
 }

 .tp-contact-form-wrap {
   background: #fff;
   border: 1px solid var(--tp-border);
   border-radius: 16px;
   padding: 36px
 }

 .tp-contact-form-wrap h4 {
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: 1.5rem
 }

 /* ── EVENTS ── */
 .tp-events-section {
   padding: 60px 0
 }

 .tp-events-tabs {
   display: flex;
   align-items: center;
   gap: 24px;
   margin-bottom: 2rem;
   flex-wrap: wrap
 }

 .tp-events-tabs .tab-item {
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--tp-text-light);
   cursor: pointer;
   padding-bottom: 4px;
   border-bottom: 2px solid transparent;
   transition: all .2s
 }

 .tp-events-tabs .tab-item.active {
   color: var(--tp-text-dark);
   border-bottom-color: var(--tp-text-dark);
   font-weight: 700
 }

 .next-btn {
   margin-left: auto;
   background: var(--tp-bg-light);
   border: 1.5px solid var(--tp-border);
   border-radius: 10px;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 18px;
   color: var(--tp-text-mid);
   transition: all .2s
 }

 .next-btn:hover {
   border-color: var(--tp-purple);
   color: var(--tp-purple)
 }

 .tp-events-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 12px
 }

 .tp-event-card {
   border-radius: 12px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   transition: transform .2s
 }

 .tp-event-card:hover {
   transform: scale(1.02)
 }

 .tp-event-card img {
   width: 100%;
   height: 320px;
   object-fit: cover;
   display: block
 }

 .tp-event-card.featured {
   grid-column: span 2
 }

 .tp-event-card.featured img {
   height: 320px
 }

 .tp-event-card .event-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, transparent 60%)
 }

 .tp-event-card .event-label {
   position: absolute;
   bottom: 20px;
   left: 20px;
   right: 20px
 }

 .tp-event-card .event-label h5 {
   color: #fff;
   font-size: .95rem;
   font-weight: 700;
   margin-bottom: .3rem
 }

 .tp-event-card .event-label p {
   color: rgba(255, 255, 255, .8);
   font-size: .78rem;
   margin: 0
 }

 /* ── FOOTER ── */
 .tp-footer {
   background: #1E0038;
   padding: 60px 0 0
 }

 .tp-footer .footer-desc {
   font-size: .83rem;
   color: rgba(255, 255, 255, .5);
   margin-bottom: 1.2rem;
   line-height: 1.7
 }

 .tp-footer .footer-social {
   display: flex;
   gap: 10px
 }

 .tp-footer .footer-social a {
   width: 32px;
   height: 32px;
   border-radius: 6px;
   background: rgba(255, 255, 255, .08);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   color: rgba(255, 255, 255, .6);
   transition: all .2s
 }

 .tp-footer .footer-social a:hover {
   background: var(--tp-purple);
   color: #fff
 }

 .tp-footer .footer-col-title {
   font-size: .85rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 1rem
 }

 .tp-footer .footer-link {
   display: block;
   font-size: .82rem;
   color: rgba(255, 255, 255, .5);
   margin-bottom: .5rem;
   transition: color .2s
 }

 .tp-footer .footer-link:hover {
   color: rgba(255, 255, 255, .9)
 }

 .tp-footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding: 16px 0;
   margin-top: 40px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px
 }

 .tp-footer-bottom p,
 .tp-footer-bottom a {
   font-size: .78rem;
   color: rgba(255, 255, 255, .4);
   margin: 0
 }

 .tp-footer-bottom a:hover {
   color: rgba(255, 255, 255, .8)
 }

 /* ── RESPONSIVE ── */
 @media(max-width:991.98px) {
   .tp-events-grid {
     grid-template-columns: 1fr 1fr
   }

   .tp-event-card.featured {
     grid-column: span 2
   }

   .tp-home-hero h1 {
     font-size: 1.9rem
   }
 }

 @media(max-width:767.98px) {
   .tp-search-wrap {
     display: none
   }

   .section-title {
     font-size: 1.5rem
   }

   .tp-home-hero h1 {
     font-size: 1.5rem
   }

   .tp-reg-form-wrap {
     padding: 24px 16px
   }

   .tp-contact-form-wrap {
     padding: 24px 16px
   }

   .tp-events-grid {
     grid-template-columns: 1fr
   }

   .tp-event-card.featured {
     grid-column: span 1
   }

   .tp-footer-bottom {
     justify-content: center;
     text-align: center
   }
 }

 @media(max-width:575.98px) {
   .tp-home-hero {
     padding: 40px 0 0
   }

   .hero-actions {
     flex-direction: column
   }
 }

 /* Modern welcome page refresh */
 :root {
   --tp-purple: #5F2DBA;
   --tp-purple-dark: #35136B;
   --tp-purple-deeper: #180B33;
   --tp-green: #16A66A;
   --tp-green-dark: #0F8755;
   --tp-yellow: #F4B740;
   --tp-text-dark: #101828;
   --tp-text-mid: #475467;
   --tp-text-light: #667085;
   --tp-border: #EAECF0;
   --tp-bg-light: #F8FAFC;
   --tp-radius: 8px;
   --tp-shadow: 0 14px 35px rgba(16, 24, 40, .08);
   --tp-shadow-hover: 0 22px 50px rgba(16, 24, 40, .14);
 }

 .tp-home-hero {
   background:
     radial-gradient(circle at 80% 15%, rgba(22, 166, 106, .25), transparent 28%),
     linear-gradient(135deg, #180B33 0%, #35136B 48%, #5F2DBA 100%);
   padding: 92px 0 72px;
   min-height: 620px;
 }

 .tp-home-hero::before {
   background-image:
     linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
   background-size: 56px 56px;
   mask-image: linear-gradient(to bottom, #000, transparent 90%);
 }

 .hero-badge,
 .tp-section-kicker {
   border-radius: 999px;
   letter-spacing: 0;
 }

 .hero-badge {
   padding: 8px 16px;
   background: rgba(255, 255, 255, .11);
   border: 1px solid rgba(255, 255, 255, .2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
 }

 .tp-home-hero h1 {
   max-width: 650px;
   font-size: 3.05rem;
   line-height: 1.12;
   letter-spacing: 0;
   margin-bottom: 1.25rem;
 }

 .tp-home-hero .hero-title {
   display: flex;
   flex-direction: column;
   gap: 4px;
   max-width: 680px;
   margin-bottom: 1.35rem;
   color: #fff;
   font-size: 2.35rem;
   font-weight: 500;
   line-height: 1.02;
   letter-spacing: 0;
 }

 .tp-home-hero .hero-title span {
   display: block;
   text-wrap: balance;
 }

 .tp-home-hero .hero-title-accent {
   width: fit-content;
   background: linear-gradient(90deg, #FFFFFF 0%, #BFF4D6 46%, #F4B740 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-shadow: none;
   position: relative;
 }

 .tp-home-hero .hero-title-accent::after {
   display: none;
 }

 .tp-home-hero .hero-desc {
   max-width: 560px;
   color: rgba(255, 255, 255, .76);
   font-size: 1rem;
   line-height: 1.72;
 }

 .hero-actions {
   gap: 10px;
   margin-bottom: 2.2rem;
 }

 .btn-purple,
 .btn-green,
 .btn-outline-lt {
   border-radius: 8px;
   min-height: 44px;
   padding: 11px 20px;
   box-shadow: none;
 }

 .btn-purple {
   background: #fff;
   color: var(--tp-purple-dark);
 }

 .btn-purple:hover {
   background: #F3F0FF;
   color: var(--tp-purple-dark);
 }

 .btn-outline-lt {
   background: rgba(255, 255, 255, .08);
   border-color: rgba(255, 255, 255, .24);
 }

 .hero-metrics {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
   max-width: 560px;
 }

 .hero-metric {
   padding: 14px 16px;
   border: 1px solid rgba(255, 255, 255, .16);
   border-radius: 8px;
   background: rgba(255, 255, 255, .08);
   backdrop-filter: blur(12px);
 }

 .hero-metric strong {
   display: block;
   color: #fff;
   font-size: 1.15rem;
   line-height: 1.1;
 }

 .hero-metric span {
   display: block;
   color: rgba(255, 255, 255, .68);
   font-size: .76rem;
   margin-top: 5px;
 }

 .hero-visual-panel {
   position: relative;
   width: min(520px, 100%);
   min-height: 500px;
   padding: 18px;
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 24px;
   background: rgba(255, 255, 255, .1);
   box-shadow: 0 28px 70px rgba(0, 0, 0, .25);
   backdrop-filter: blur(18px);
 }

 .hero-main-image {
   width: 100%;
   height: 464px;
   object-fit: cover;
   border-radius: 18px;
 }

 .hero-floating-card,
 .hero-progress-card {
   position: absolute;
   display: flex;
   align-items: center;
   gap: 10px;
   border: 1px solid rgba(255, 255, 255, .72);
   border-radius: 8px;
   background: rgba(255, 255, 255, .94);
   box-shadow: 0 18px 40px rgba(16, 24, 40, .18);
   color: var(--tp-text-dark);
 }

 .hero-floating-card {
   padding: 12px 14px;
 }

 .hero-floating-card i {
   width: 38px;
   height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   background: rgba(95, 45, 186, .1);
   color: var(--tp-purple);
   font-size: 1.15rem;
 }

 .hero-floating-card span,
 .hero-progress-head span {
   display: block;
   color: var(--tp-text-light);
   font-size: .72rem;
 }

 .hero-floating-card strong,
 .hero-progress-head strong {
   display: block;
   color: var(--tp-text-dark);
   font-size: .9rem;
 }

 .hero-card-top {
   top: 46px;
   left: -28px;
 }

 .hero-card-bottom {
   right: -18px;
   bottom: 118px;
 }

 .hero-progress-card {
   left: 46px;
   right: 46px;
   bottom: 30px;
   display: block;
   padding: 14px 16px;
 }

 .hero-progress-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 10px;
 }

 .hero-progress-track {
   height: 8px;
   border-radius: 999px;
   background: #EEF2F6;
   overflow: hidden;
 }

 .hero-progress-track span {
   display: block;
   width: 78%;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--tp-green), var(--tp-yellow));
 }

 .tp-section-heading {
   max-width: 720px;
   margin-bottom: 34px;
 }

 .tp-section-heading.text-center {
   margin-left: auto;
   margin-right: auto;
 }

 .tp-section-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 13px;
   margin-bottom: 12px;
   background: rgba(22, 166, 106, .1);
   color: var(--tp-green-dark);
   font-size: .78rem;
   font-weight: 700;
 }

 .tp-section-heading h2 {
   margin: 0;
   color: var(--tp-text-dark);
   font-size: 1.9rem;
   font-weight: 800;
   line-height: 1.18;
   letter-spacing: 0;
 }

 .tp-section-heading p,
 .tp-section-heading .section-subtitle {
   margin: 12px 0 0;
   color: var(--tp-text-light);
   font-size: .94rem;
   line-height: 1.68;
 }

 .tp-section-heading-light h2 {
   color: #fff;
 }

 .tp-section-heading-light p {
   color: rgba(255, 255, 255, .7);
 }

 .tp-offer-section,
 .tp-cst-section {
   background: #fff;
   padding: 88px 0;
 }

 .tp-mkt-section,
 .tp-ind-section {
   background: #F8FAFC;
   padding: 88px 0;
 }

 .tp-offer-card,
 .tp-cst-card,
 .tp-service-card,
 .tp-industry-card {
   border-radius: 8px;
   border: 1px solid var(--tp-border);
   box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
 }

 .tp-offer-card,
 .tp-cst-card,
 .tp-industry-card {
   padding: 24px;
 }

 .tp-offer-card:hover,
 .tp-cst-card:hover,
 .tp-service-card:hover,
 .tp-industry-card:hover {
   box-shadow: var(--tp-shadow-hover);
   transform: translateY(-4px);
 }

 .tp-offer-card .icon-wrap,
 .tp-industry-card .icon-wrap,
 .tp-cst-icon {
   width: 48px;
   height: 48px;
   border-radius: 8px;
   background: #F3F0FF;
   color: var(--tp-purple);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
 }

 .tp-offer-card .icon-wrap img,
 .tp-industry-card .icon-wrap img {
   max-width: 28px;
   max-height: 28px;
   object-fit: contain;
 }

 .tp-offer-card h5,
 .tp-cst-card h5,
 .tp-industry-card h5 {
   color: var(--tp-text-dark);
   font-size: .96rem;
   line-height: 1.35;
 }

 .tp-offer-card p,
 .tp-cst-card .desc,
 .tp-industry-card p {
   color: var(--tp-text-light);
   font-size: .84rem;
   line-height: 1.62;
 }

 .tp-service-card {
   border-radius: 8px;
   box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
 }

 .tp-service-card img {
   height: 190px;
 }

 .tp-service-card .card-body {
   text-align: left;
 }

 .tp-service-card .card-title {
   color: var(--tp-text-dark);
   font-size: .94rem;
 }

 .tp-service-card .card-text {
   color: var(--tp-text-light);
   font-size: .82rem;
   line-height: 1.6;
 }

 .tp-cst-card {
   background: linear-gradient(180deg, #fff 0%, #FCFCFD 100%);
 }

 .tp-cst-section .row {
   align-items: center;
 }

 .tp-cst-section .col-lg-4 {
   transition: transform .38s cubic-bezier(.16, 1, .3, 1);
 }

 .tp-cst-section .col-lg-4:nth-child(2) {
   position: relative;
   z-index: 2;
   transform: scale(1.08);
 }

 .tp-cst-section .col-lg-4:nth-child(2) .tp-cst-card {
   border: 2px solid rgba(95, 45, 186, .35);
   background: #fff;
   box-shadow: 0 26px 64px rgba(16, 24, 40, .16);
   min-height: 430px;
 }

 .tp-cst-section .col-lg-4:nth-child(2) .tp-cst-card::after {
   display: none;
 }

 .tp-cst-section .col-lg-4:nth-child(1),
 .tp-cst-section .col-lg-4:nth-child(3) {
   transform: scale(.94);
   opacity: .92;
 }

 .tp-cst-card table {
   width: 100%;
   border-collapse: collapse;
   font-size: .84rem;
 }

 .tp-cst-card th {
   padding-bottom: 10px;
   color: var(--tp-text-light);
   font-size: .74rem;
   font-weight: 700;
 }

 .tp-cst-card td {
   padding: 10px 0;
   border-top: 1px solid var(--tp-border);
   color: var(--tp-text-light) !important;
   font-size: .8rem !important;
 }

 .tp-cst-card td:first-child {
   color: var(--tp-text-dark) !important;
   font-weight: 700;
 }

 .tp-cst-card td:nth-child(2) {
   color: var(--tp-yellow) !important;
   font-weight: 800;
 }

 .tp-cst-card .mt-3.text-center a,
 .tp-card-link {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   margin-top: 14px;
   color: var(--tp-purple) !important;
   font-size: .84rem !important;
   font-weight: 700;
 }

 .tp-cst-card [style*="display:flex"][style*="align-items:center"] {
   border-radius: 8px !important;
   border-color: var(--tp-border) !important;
   background: #fff;
   min-height: 66px;
 }

 .tp-cst-card button[style*="background"] {
   border-radius: 999px !important;
   min-height: 28px;
 }

 .tp-cst-card [style*="font-family:monospace"] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: 8px !important;
   background: #F8FAFC !important;
   font-family: var(--font-main) !important;
 }

 .tp-how-section {
   background:
     radial-gradient(circle at 15% 20%, rgba(95, 45, 186, .35), transparent 26%),
     linear-gradient(135deg, #180B33, #101828);
 }

 .tp-step-card {
   border-radius: 8px;
   background: rgba(255, 255, 255, .07);
   backdrop-filter: blur(12px);
 }

 .tp-how-section .row {
   align-items: center;
 }

 .tp-how-section .col-lg-4 {
   transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
 }

 .tp-how-section .col-lg-4:has(.tp-step-card.is-active) {
   position: relative;
   z-index: 3;
   transform: scale(1.12);
 }

 .tp-step-card.is-active {
   min-height: 390px;
   border: 1px solid rgba(255, 255, 255, .28);
   background:
     linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)),
     radial-gradient(circle at 80% 10%, rgba(22, 166, 106, .22), transparent 34%);
   box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
   animation: tpActiveCardFloat 4.8s ease-in-out infinite;
 }

 .tp-step-card.is-active::after {
   content: 'Active';
   position: absolute;
   top: 18px;
   right: 18px;
   padding: 5px 11px;
   border-radius: 999px;
   background: rgba(22, 166, 106, .16);
   color: #BFF4D6;
   border: 1px solid rgba(22, 166, 106, .28);
   font-size: .7rem;
   font-weight: 800;
 }

 .tp-step-card.is-active .step-num {
   color: rgba(255, 255, 255, .95) !important;
   text-shadow: 0 10px 30px rgba(22, 166, 106, .35);
 }

 .tp-step-card.is-active h5 {
   font-size: 1.08rem;
 }

 .tp-step-card.is-active p {
   color: rgba(255, 255, 255, .78);
 }

 .tp-step-card.is-active .tags span {
   background: rgba(255, 255, 255, .14);
   color: rgba(255, 255, 255, .86);
   border: 1px solid rgba(255, 255, 255, .12);
 }

 .tp-how-section .col-lg-4:not(:has(.tp-step-card.is-active)) {
   transform: scale(.9);
   opacity: .78;
 }

 .tp-how-section .col-lg-4:not(:has(.tp-step-card.is-active)) .tp-step-card {
   min-height: 310px;
 }

 .tp-step-card:hover {
   transform: translateY(-6px);
 }

 @supports not selector(:has(*)) {
   .tp-step-card.is-active {
     transform: scale(1.12);
   }
 }

 @keyframes tpActiveCardFloat {

   0%,
   100% {
     transform: translate3d(0, 0, 0);
   }

   50% {
     transform: translate3d(0, -8px, 0);
   }
 }

 @media(max-width:991.98px) {
   .tp-home-hero {
     min-height: auto;
     padding: 68px 0;
   }

   .tp-home-hero h1 {
     font-size: 2.25rem;
   }

   .tp-home-hero .hero-title {
     font-size: 2.45rem;
     line-height: 1.08;
   }
 }

 @media(max-width:767.98px) {
   .tp-home-hero {
     padding: 50px 0;
   }

   .tp-home-hero h1 {
     font-size: 1.78rem;
     line-height: 1.2;
   }

   .tp-home-hero .hero-title {
     font-size: 2rem;
     line-height: 1.12;
     gap: 3px;
   }

   .tp-home-hero .hero-title-accent::after {
     bottom: -4px;
     height: 3px;
   }

   .tp-home-hero .hero-desc {
     font-size: .9rem;
     line-height: 1.62;
   }

   .hero-badge,
   .tp-section-kicker {
     font-size: .72rem;
   }

   .hero-actions .btn-purple,
   .hero-actions .btn-outline-lt {
     width: 100%;
     justify-content: center;
     font-size: .86rem;
   }

   .hero-metrics {
     grid-template-columns: 1fr;
   }

   .tp-section-heading h2 {
     font-size: 1.42rem;
     line-height: 1.24;
   }

   .tp-section-heading p,
   .tp-section-heading .section-subtitle {
     font-size: .86rem;
   }

   .tp-offer-card h5,
   .tp-cst-card h5,
   .tp-industry-card h5,
   .tp-service-card .card-title,
   .tp-step-card h5 {
     font-size: .9rem;
   }

   .tp-offer-card p,
   .tp-cst-card .desc,
   .tp-industry-card p,
   .tp-service-card .card-text,
   .tp-step-card p {
     font-size: .8rem;
   }

   .tp-ind-section .tp-industry-card {
     padding: 22px 18px;
   }

   .tp-ind-section .col-lg-4,
   .tp-ind-section .col-lg-4:has(.tp-industry-card.is-active),
   .tp-ind-section .col-lg-4:not(:has(.tp-industry-card.is-active)) {
     transform: none;
     opacity: 1;
   }

   .tp-ind-section .tp-industry-card.is-active {
     min-height: auto;
   }

   .tp-offer-section,
   .tp-mkt-section,
   .tp-cst-section,
   .tp-how-section,
   .tp-ind-section {
     padding: 58px 0;
   }

   .tp-cst-section .col-lg-4,
   .tp-cst-section .col-lg-4:nth-child(1),
   .tp-cst-section .col-lg-4:nth-child(2),
   .tp-cst-section .col-lg-4:nth-child(3) {
     transform: none;
     opacity: 1;
   }

   .tp-cst-section .col-lg-4:nth-child(2) .tp-cst-card {
     min-height: auto;
   }

   .tp-how-section .col-lg-4,
   .tp-how-section .col-lg-4:has(.tp-step-card.is-active),
   .tp-how-section .col-lg-4:not(:has(.tp-step-card.is-active)) {
     transform: none;
     opacity: 1;
   }

   .tp-step-card.is-active,
   .tp-how-section .col-lg-4:not(:has(.tp-step-card.is-active)) .tp-step-card {
     min-height: auto;
     animation: none;
   }
 }

 /* Eye-catching motion and smooth interactions */
 @keyframes tpFadeUp {
   from {
     opacity: 0;
     transform: translate3d(0, 28px, 0);
   }

   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);
   }
 }

 @keyframes tpFloatSoft {

   0%,
   100% {
     transform: translate3d(0, 0, 0);
   }

   50% {
     transform: translate3d(0, -10px, 0);
   }
 }

 @keyframes tpPulseGlow {

   0%,
   100% {
     box-shadow: 0 0 0 rgba(22, 166, 106, 0);
   }

   50% {
     box-shadow: 0 0 34px rgba(22, 166, 106, .26);
   }
 }

 @keyframes tpProgressShine {
   from {
     background-position: 120% 0;
   }

   to {
     background-position: -120% 0;
   }
 }

 .reveal-up {
   opacity: 0;
   transform: translate3d(0, 28px, 0);
   animation: tpFadeUp .9s cubic-bezier(.16, 1, .3, 1) forwards;
 }

 .reveal-delay-1 {
   animation-delay: .12s;
 }

 .reveal-delay-2 {
   animation-delay: .24s;
 }

 .reveal-delay-3 {
   animation-delay: .36s;
 }

 .reveal-delay-4 {
   animation-delay: .48s;
 }

 body.tp-motion-ready .tp-reveal-item,
 body.tp-motion-ready .tp-section-heading {
   opacity: 0;
   transform: translate3d(0, 34px, 0);
   transition:
     opacity .82s cubic-bezier(.16, 1, .3, 1),
     transform .82s cubic-bezier(.16, 1, .3, 1);
   transition-delay: var(--tp-reveal-delay, 0ms);
   will-change: opacity, transform;
 }

 body.tp-motion-ready .tp-reveal-section.is-visible .tp-section-heading,
 body.tp-motion-ready .tp-reveal-section.is-visible .tp-reveal-item,
 body.tp-motion-ready .tp-section-heading.is-visible,
 body.tp-motion-ready .tp-reveal-item.is-visible {
   opacity: 1;
   transform: translate3d(0, 0, 0);
 }

 body.tp-motion-ready .tp-how-section .tp-reveal-item.tp-delay-1 {
   transition-delay: .08s;
 }

 body.tp-motion-ready .tp-how-section .tp-reveal-item.tp-delay-2 {
   transition-delay: .18s;
 }

 body.tp-motion-ready .tp-how-section .tp-reveal-item.tp-delay-3 {
   transition-delay: .28s;
 }

 .tp-reveal-section.is-visible .tp-reveal-item:nth-child(1),
 .tp-reveal-section.is-visible .col-lg-4:nth-child(1) .tp-reveal-item,
 .tp-reveal-section.is-visible .slick-slide:nth-child(1) .tp-reveal-item {
   --tp-reveal-delay: 60ms;
 }

 .tp-reveal-section.is-visible .tp-reveal-item:nth-child(2),
 .tp-reveal-section.is-visible .col-lg-4:nth-child(2) .tp-reveal-item,
 .tp-reveal-section.is-visible .slick-slide:nth-child(2) .tp-reveal-item {
   --tp-reveal-delay: 130ms;
 }

 .tp-reveal-section.is-visible .tp-reveal-item:nth-child(3),
 .tp-reveal-section.is-visible .col-lg-4:nth-child(3) .tp-reveal-item,
 .tp-reveal-section.is-visible .slick-slide:nth-child(3) .tp-reveal-item {
   --tp-reveal-delay: 200ms;
 }

 .tp-reveal-section.is-visible .tp-reveal-item:nth-child(4),
 .tp-reveal-section.is-visible .slick-slide:nth-child(4) .tp-reveal-item {
   --tp-reveal-delay: 270ms;
 }

 .tp-home-hero {
   isolation: isolate;
 }

 .tp-home-hero::after {
   content: '';
   position: absolute;
   inset: auto 8% -110px 8%;
   height: 220px;
   background: radial-gradient(ellipse at center, rgba(255, 255, 255, .18), transparent 68%);
   pointer-events: none;
   z-index: 0;
 }

 .tp-home-hero .container {
   z-index: 1;
 }

 .hero-visual-panel {
   transition:
     transform .55s cubic-bezier(.16, 1, .3, 1),
     box-shadow .55s cubic-bezier(.16, 1, .3, 1),
     border-color .55s cubic-bezier(.16, 1, .3, 1);
 }

 .hero-visual-panel:hover {
   transform: translateY(-8px) scale(1.01);
   border-color: rgba(255, 255, 255, .32);
   box-shadow: 0 36px 86px rgba(0, 0, 0, .32);
 }

 .hero-card-top {
   animation: tpFloatSoft 5s ease-in-out infinite;
 }

 .hero-card-bottom {
   animation: tpFloatSoft 5.6s ease-in-out .45s infinite;
 }

 .hero-progress-card {
   animation: tpPulseGlow 4s ease-in-out infinite;
 }

 .hero-progress-track span {
   position: relative;
   overflow: hidden;
 }

 .hero-progress-track span::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
   background-size: 180% 100%;
   animation: tpProgressShine 2.8s linear infinite;
 }

 .btn-purple,
 .btn-green,
 .btn-outline-lt,
 .tp-card-link,
 .tp-cst-card .mt-3.text-center a {
   transition:
     transform .22s cubic-bezier(.16, 1, .3, 1),
     box-shadow .22s cubic-bezier(.16, 1, .3, 1),
     background-color .22s ease,
     border-color .22s ease,
     color .22s ease;
 }

 .btn-purple:hover,
 .btn-green:hover,
 .btn-outline-lt:hover {
   transform: translateY(-2px);
   box-shadow: 0 14px 28px rgba(16, 24, 40, .14);
 }

 .tp-card-link:hover,
 .tp-cst-card .mt-3.text-center a:hover {
   transform: translateX(3px);
 }

 .tp-offer-card,
 .tp-cst-card,
 .tp-service-card,
 .tp-industry-card,
 .tp-step-card {
   position: relative;
   overflow: hidden;
   transition:
     transform .35s cubic-bezier(.16, 1, .3, 1),
     box-shadow .35s cubic-bezier(.16, 1, .3, 1),
     border-color .35s cubic-bezier(.16, 1, .3, 1),
     background-color .35s ease;
 }

 .tp-offer-card::before,
 .tp-cst-card::before,
 .tp-service-card::before,
 .tp-industry-card::before,
 .tp-step-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(95, 45, 186, .1), rgba(22, 166, 106, .08));
   opacity: 0;
   transition: opacity .35s ease;
   pointer-events: none;
 }

 .tp-offer-card:hover,
 .tp-cst-card:hover,
 .tp-service-card:hover,
 .tp-industry-card:hover {
   border-color: rgba(95, 45, 186, .22);
 }

 .tp-step-card:hover {
   transform: translateY(-4px);
   border-color: rgba(255, 255, 255, .2);
   background: rgba(255, 255, 255, .1);
 }

 .tp-offer-card:hover::before,
 .tp-cst-card:hover::before,
 .tp-service-card:hover::before,
 .tp-industry-card:hover::before,
 .tp-step-card:hover::before {
   opacity: 1;
 }

 .tp-offer-card>*,
 .tp-cst-card>*,
 .tp-service-card>*,
 .tp-industry-card>*,
 .tp-step-card>* {
   position: relative;
   z-index: 1;
 }

 .tp-service-card img,
 .hero-main-image {
   transition: transform .65s cubic-bezier(.16, 1, .3, 1), filter .65s ease;
 }

 .tp-service-card:hover img {
   transform: scale(1.045);
   filter: saturate(1.05) contrast(1.03);
 }

 .tp-offer-card .icon-wrap,
 .tp-industry-card .icon-wrap,
 .tp-cst-icon {
   transition:
     transform .35s cubic-bezier(.16, 1, .3, 1),
     background-color .35s ease,
     color .35s ease;
 }

 .tp-offer-card:hover .icon-wrap,
 .tp-industry-card:hover .icon-wrap,
 .tp-cst-card:hover .tp-cst-icon {
   transform: translateY(-2px) rotate(-3deg);
   background: var(--tp-purple);
   color: #fff;
 }

 .tp-offer-card:hover .icon-wrap i,
 .tp-offer-card:hover .icon-wrap img,
 .tp-industry-card:hover .icon-wrap i,
 .tp-industry-card:hover .icon-wrap img {
   color: #fff;
   filter: brightness(0) invert(1);
 }

 .service-slider .slick-dots li button:before {
   transition: transform .2s ease, opacity .2s ease, color .2s ease;
 }

 .service-slider .slick-dots li.slick-active button:before {
   transform: scale(1.25);
 }

 /* Service marketplace center carousel */
 .service-marketplace-frame {
   position: relative;
   margin: 0 auto;
   padding: 18px 0 66px;
   max-width: 1120px;
   overflow: hidden;
 }

 .service-slider {
   position: relative;
   z-index: 1;
 }

 .service-slider .slick-list {
   overflow: visible;
   padding-top: 6px !important;
   padding-bottom: 14px !important;
 }

 .service-slider .slick-track {
   display: flex;
   align-items: center;
 }

 .service-slider .slick-slide {
   height: auto;
   opacity: .58;
   transform: scale(.86);
   transition:
     opacity .45s cubic-bezier(.16, 1, .3, 1),
     transform .45s cubic-bezier(.16, 1, .3, 1),
     filter .45s ease;
   filter: saturate(.9);
 }

 .service-slider .slick-center {
   opacity: 1;
   transform: scale(1.08);
   filter: saturate(1.05);
   z-index: 5;
 }

 .service-slide {
   padding: 0 7px;
 }

 .service-marketplace-frame .tp-service-card {
   min-height: 350px;
   border: 2px dashed #101828;
   border-radius: 18px;
   background: #fff;
   box-shadow: 10px 10px 0 rgba(16, 24, 40, .18);
   overflow: hidden;
   transform: none;
 }

 .service-slider .slick-center .tp-service-card {
   min-height: 390px;
   border: 3px solid #101828;
   border-radius: 22px;
   box-shadow: 0 24px 60px rgba(16, 24, 40, .24);
 }

 .service-card-media {
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 22px 22px 8px;
   background: #fff;
 }

 .service-slider .slick-center .service-card-media {
   height: 230px;
   padding-top: 28px;
 }

 .service-card-media img {
   width: 100%;
   max-width: 190px;
   height: 170px;
   object-fit: contain;
   border-radius: 0;
 }

 .service-slider .slick-center .service-card-media img {
   max-width: 230px;
   height: 200px;
 }

 .service-marketplace-frame .tp-service-card .card-body {
   padding: 12px 16px 18px;
   text-align: center;
 }

 .service-marketplace-frame .tp-service-card .card-title {
   font-size: .98rem;
   margin-bottom: 6px;
 }

 .service-marketplace-frame .tp-service-card .card-text {
   max-width: 280px;
   margin: 0 auto;
 }

 .service-marketplace-frame .slick-dots {
   bottom: -18px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
 }

 .service-marketplace-frame .slick-dots li {
   width: 14px;
   height: 14px;
   margin: 0;
 }

 .service-marketplace-frame .slick-dots li button {
   width: 14px;
   height: 14px;
   padding: 0;
   border: 1px solid rgba(95, 45, 186, .35);
   border-radius: 50%;
   background: #fff;
   transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
 }

 .service-marketplace-frame .slick-dots li button:before {
   display: none;
 }

 .service-marketplace-frame .slick-dots li.slick-active button {
   background: var(--tp-purple);
   border-color: var(--tp-purple);
   transform: scale(1.2);
 }

 .service-marketplace-frame .tp-service-card:hover {
   transform: none;
 }

 .service-marketplace-frame .tp-service-card:hover img {
   transform: scale(1.04);
 }

 @media(max-width:991.98px) {
   .service-marketplace-frame {
     max-width: 820px;
   }

   .service-marketplace-frame .tp-service-card {
     min-height: 320px;
   }

   .service-slider .slick-center .tp-service-card {
     min-height: 355px;
   }
 }

 @media(max-width:767.98px) {
   .service-marketplace-frame {
     padding-top: 10px;
     padding-bottom: 58px;
   }

   .service-slider .slick-slide {
     transform: scale(.9);
   }

   .service-slider .slick-center {
     transform: scale(1);
   }

   .service-marketplace-frame .tp-service-card,
   .service-slider .slick-center .tp-service-card {
     min-height: 310px;
     box-shadow: 7px 7px 0 rgba(16, 24, 40, .16);
   }

   .service-card-media,
   .service-slider .slick-center .service-card-media {
     height: 178px;
     padding: 18px 16px 6px;
   }

   .service-card-media img,
   .service-slider .slick-center .service-card-media img {
     max-width: 180px;
     height: 155px;
   }
 }

 @media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
     animation-duration: .01ms !important;
     animation-iteration-count: 1 !important;
     scroll-behavior: auto !important;
     transition-duration: .01ms !important;
   }

   .reveal-up,
   .tp-reveal-item,
   .tp-section-heading {
     opacity: 1;
     transform: none;
   }
 }

 /* ── RTL BREADCRUMB FIX ────────────────────────────────────────
    Bootstrap breadcrumb uses CSS ::before for the "/" separator.
    In RTL the separator appears on the wrong side — this fixes it.
 ── */
 [dir="rtl"] .breadcrumb-item + .breadcrumb-item {
   padding-right: var(--bs-breadcrumb-item-padding-x, .5rem);
   padding-left: 0;
 }

 [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
   float: right;
   padding-right: 0;
   padding-left: var(--bs-breadcrumb-item-padding-x, .5rem);
   content: var(--bs-breadcrumb-divider, "/");
 }

 /* Remove the default LTR ::before so it doesn't double-render */
 [dir="rtl"] .breadcrumb-item + .breadcrumb-item::after {
   display: none;
 }

 /* ── WHAT WE PROVIDE SECTION ────────────────────────────────── */
 .tp-provide-section {
   padding: 80px 0;
   background: #fff;
 }

 .tp-provide-section .tp-section-kicker {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: .8rem;
   font-weight: 600;
   color: var(--tp-purple);
   background: rgba(123, 47, 190, .08);
   padding: 5px 14px;
   border-radius: 50px;
   margin-bottom: 16px;
 }

 .tp-provide-title {
   font-size: 1.55rem;
   font-weight: 800;
   line-height: 1.3;
   color: var(--tp-text-dark);
   margin-bottom: 14px;
 }

 .tp-provide-desc {
   font-size: .9rem;
   color: var(--tp-text-light);
   line-height: 1.7;
   margin-bottom: 0;
 }

 /* List */
 .tp-provide-list {
   display: flex;
   flex-direction: column;
   gap: 14px;
 }

 .tp-provide-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 16px 20px;
   background: var(--tp-bg-light);
   border: 1px solid var(--tp-border);
   border-radius: var(--tp-radius);
   transition: border-color .2s, box-shadow .2s, transform .2s;
 }

 .tp-provide-item:hover {
   border-color: var(--tp-purple);
   box-shadow: var(--tp-shadow);
   transform: translateX(-4px);
 }

 [dir="ltr"] .tp-provide-item:hover {
   transform: translateX(4px);
 }

 .tp-provide-num {
   font-size: .75rem;
   font-weight: 800;
   color: var(--tp-purple);
   opacity: .4;
   min-width: 24px;
   line-height: 1;
 }

 .tp-provide-icon {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: rgba(123, 47, 190, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   color: var(--tp-purple);
   flex-shrink: 0;
   transition: background .2s, color .2s;
 }

 .tp-provide-item:hover .tp-provide-icon {
   background: var(--tp-purple);
   color: #fff;
 }

 .tp-provide-text {
   flex: 1;
 }

 .tp-provide-text h6 {
   font-size: .9rem;
   font-weight: 700;
   margin-bottom: 2px;
   color: var(--tp-text-dark);
 }

 .tp-provide-text p {
   font-size: .8rem;
   color: var(--tp-text-light);
   margin: 0;
   line-height: 1.5;
 }

 @media (max-width: 991px) {
   .tp-provide-section .col-lg-5 {
     text-align: center;
   }
   .tp-provide-section .col-lg-5 .btn-purple {
     margin: 0 auto;
   }
 }

 /* ── CATEGORY PILLS ─────────────────────────────────────────── */
 .tp-cat-pill {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 16px;
   background: #fff;
   border: 1.5px solid var(--tp-border);
   border-radius: 12px;
   cursor: default;
   transition: border-color .22s, box-shadow .22s, transform .22s, background .22s;
 }

 .tp-cat-pill:hover {
   border-color: var(--tp-purple);
   background: rgba(123, 47, 190, .04);
   box-shadow: 0 6px 20px rgba(123, 47, 190, .12);
   transform: translateY(-3px);
 }

 .tp-cat-pill-icon {
   width: 36px;
   height: 36px;
   border-radius: 9px;
   background: rgba(123, 47, 190, .08);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   color: var(--tp-purple);
   flex-shrink: 0;
   transition: background .22s, color .22s;
 }

 .tp-cat-pill:hover .tp-cat-pill-icon {
   background: var(--tp-purple);
   color: #fff;
 }

 .tp-cat-pill span {
   font-size: .85rem;
   font-weight: 600;
   color: var(--tp-text-dark);
   line-height: 1.3;
 }

 .market-section-sub {
   margin: -18px 0 22px;
   color: #8692a4;
   font-size: .85rem;
   font-weight: 500;
 }

 /* ── FAQ PAGE ─────────────────────────────────────────────── */
 .tp-faq-section {
   padding: 70px 0 90px;
 }

 .tp-faq-accordion .tp-faq-item {
   border: 1px solid var(--tp-border);
   border-radius: var(--tp-radius) !important;
   margin-bottom: 12px;
   overflow: hidden;
 }

 .tp-faq-accordion .accordion-button {
   font-size: .95rem;
   font-weight: 600;
   color: var(--tp-text-dark);
   background: #fff;
   box-shadow: none;
   padding: 18px 22px;
 }

 .tp-faq-accordion .accordion-button:not(.collapsed) {
   color: var(--tp-purple);
   background: rgba(123, 47, 190, .04);
   box-shadow: none;
 }

 .tp-faq-accordion .accordion-button::after {
   filter: none;
 }

 .tp-faq-accordion .accordion-button:not(.collapsed)::after {
   filter: invert(27%) sepia(80%) saturate(800%) hue-rotate(250deg);
 }

 .tp-faq-accordion .accordion-body {
   font-size: .9rem;
   color: var(--tp-text-light);
   line-height: 1.7;
   padding: 0 22px 20px;
   background: #fff;
 }

 /* ══════════════════════════════════════════════════════════════
    FAQ PAGE
    ══════════════════════════════════════════════════════════════ */
 .tp-faq-page {
   padding: 70px 0 90px;
   background: var(--tp-bg-light);
 }

 /* ── Intro heading ── */
 .tp-faq-intro {
   text-align: center;
   margin-bottom: 48px;
 }

 .tp-faq-intro h2 {
   font-size: 2rem;
   font-weight: 800;
   margin: 12px 0 10px;
   color: var(--tp-text-dark);
 }

 .tp-faq-intro p {
   font-size: .95rem;
   color: var(--tp-text-light);
   margin: 0;
 }

 /* ── Category tabs ── */
 .tp-faq-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-bottom: 40px;
 }

 .tp-faq-tab {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
   border: 1.5px solid var(--tp-border);
   border-radius: 50px;
   background: #fff;
   font-size: .85rem;
   font-weight: 600;
   color: var(--tp-text-mid);
   cursor: pointer;
   transition: all .22s ease;
 }

 .tp-faq-tab:hover {
   border-color: var(--tp-purple);
   color: var(--tp-purple);
 }

 .tp-faq-tab.active {
   background: var(--tp-purple);
   border-color: var(--tp-purple);
   color: #fff;
   box-shadow: 0 6px 18px rgba(123, 47, 190, .28);
 }

 .tp-faq-tab-icon {
   font-size: 1rem;
   line-height: 1;
 }

 /* ── Panel ── */
 .tp-faq-panel {
   display: none;
 }

 .tp-faq-panel.active {
   display: block;
 }

 .tp-faq-cat-label {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1.1rem;
   font-weight: 800;
   color: var(--tp-text-dark);
   margin-bottom: 20px;
   padding-bottom: 14px;
   border-bottom: 2px solid var(--tp-border);
 }

 .tp-faq-cat-label span {
   font-size: 1.3rem;
 }

 /* ── Accordion ── */
 .tp-faq-accordion {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 48px;
 }

 .tp-faq-item {
   background: #fff;
   border: 1.5px solid var(--tp-border);
   border-radius: 14px;
   overflow: hidden;
   transition: border-color .22s, box-shadow .22s;
 }

 .tp-faq-item.open {
   border-color: var(--tp-purple);
   box-shadow: 0 6px 24px rgba(123, 47, 190, .1);
 }

 .tp-faq-q {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px 22px;
   background: transparent;
   border: none;
   cursor: pointer;
   text-align: start;
 }

 .tp-faq-q-num {
   font-size: .72rem;
   font-weight: 800;
   color: var(--tp-purple);
   opacity: .5;
   min-width: 22px;
   flex-shrink: 0;
   line-height: 1;
 }

 .tp-faq-item.open .tp-faq-q-num {
   opacity: 1;
 }

 .tp-faq-q-text {
   flex: 1;
   font-size: .95rem;
   font-weight: 700;
   color: var(--tp-text-dark);
   line-height: 1.45;
 }

 .tp-faq-item.open .tp-faq-q-text {
   color: var(--tp-purple);
 }

 .tp-faq-chevron {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--tp-bg-light);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: .8rem;
   color: var(--tp-text-light);
   transition: transform .28s cubic-bezier(.16, 1, .3, 1), background .22s, color .22s;
 }

 .tp-faq-item.open .tp-faq-chevron {
   transform: rotate(180deg);
   background: rgba(123, 47, 190, .1);
   color: var(--tp-purple);
 }

 /* Collapse animation */
 .tp-faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .38s cubic-bezier(.16, 1, .3, 1);
 }

 .tp-faq-item.open .tp-faq-a {
   max-height: 400px;
 }

 .tp-faq-a-inner {
   padding: 0 22px 20px calc(22px + 14px + 22px);
   font-size: .9rem;
   color: var(--tp-text-light);
   line-height: 1.75;
 }

 [dir="rtl"] .tp-faq-a-inner {
   padding: 0 calc(22px + 14px + 22px) 20px 22px;
 }

 /* ── CTA block ── */
 .tp-faq-cta {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 28px 32px;
   background: #fff;
   border: 1.5px solid var(--tp-border);
   border-radius: 16px;
   flex-wrap: wrap;
 }

 .tp-faq-cta-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: rgba(123, 47, 190, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   color: var(--tp-purple);
   flex-shrink: 0;
 }

 .tp-faq-cta h5 {
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 3px;
   color: var(--tp-text-dark);
 }

 .tp-faq-cta p {
   font-size: .85rem;
   color: var(--tp-text-light);
   margin: 0;
 }

 .tp-faq-cta .btn-purple {
   margin-inline-start: auto;
 }

 @media (max-width: 767px) {
   .tp-faq-intro h2 {
     font-size: 1.5rem;
   }

   .tp-faq-q {
     padding: 14px 16px;
   }

   .tp-faq-a-inner {
     padding: 0 16px 16px 16px;
   }

   [dir="rtl"] .tp-faq-a-inner {
     padding: 0 16px 16px 16px;
   }

   .tp-faq-cta {
     padding: 20px;
     gap: 14px;
   }

   .tp-faq-cta .btn-purple {
     margin-inline-start: 0;
     width: 100%;
     justify-content: center;
   }
 }

 /* ── FAQ section title divider ── */
 .tp-faq-section-title {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1rem;
   font-weight: 800;
   color: var(--tp-purple);
   padding: 28px 0 14px;
   border-bottom: 2px solid rgba(123, 47, 190, .15);
   margin-bottom: 4px;
 }

 .tp-faq-section-title i {
   font-size: 1.15rem;
 }

 .tp-faq-section-title:first-child {
   padding-top: 0;
 }

 /* ══════════════════════════════════════════════════════════════
    HELP CENTER PAGE
    ══════════════════════════════════════════════════════════════ */
 .tp-hc-page {
   padding: 70px 0 90px;
   background: var(--tp-bg-light);
 }

 /* Intro block */
 .tp-hc-intro {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   background: linear-gradient(135deg, #4A1070, #9B30E0);
   border-radius: 16px;
   padding: 36px 40px;
   color: #fff;
   margin-bottom: 8px;
 }

 .tp-hc-intro-icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.6rem;
   flex-shrink: 0;
 }

 .tp-hc-intro h2 {
   font-size: 1.4rem;
   font-weight: 800;
   margin-bottom: 8px;
   color: #fff;
 }

 .tp-hc-intro p {
   font-size: .92rem;
   color: rgba(255, 255, 255, .82);
   margin: 0;
   line-height: 1.7;
 }

 /* Cards */
 .tp-hc-card {
   background: #fff;
   border: 1.5px solid var(--tp-border);
   border-radius: 16px;
   padding: 28px 28px 24px;
   height: 100%;
   transition: border-color .22s, box-shadow .22s;
 }

 .tp-hc-card:hover {
   border-color: var(--tp-purple);
   box-shadow: var(--tp-shadow);
 }

 .tp-hc-card-head {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 20px;
 }

 .tp-hc-card-icon {
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: rgba(123, 47, 190, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   color: var(--tp-purple);
   flex-shrink: 0;
 }

 .tp-hc-card h4 {
   font-size: 1rem;
   font-weight: 800;
   color: var(--tp-text-dark);
   margin: 0;
 }

 /* List */
 .tp-hc-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .tp-hc-list li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: .9rem;
   color: var(--tp-text-mid);
   line-height: 1.55;
 }

 .tp-hc-list li i {
   font-size: .85rem;
   color: var(--tp-green);
   flex-shrink: 0;
   margin-top: 3px;
 }

 @media (max-width: 767px) {
   .tp-hc-intro {
     flex-direction: column;
     padding: 24px 20px;
   }
 }

 /* ══════════════════════════════════════════════════════════════
    TERMS & CONDITIONS PAGE
    ══════════════════════════════════════════════════════════════ */
 .tp-terms-page {
   padding: 70px 0 90px;
   background: var(--tp-bg-light);
 }

 /* Intro notice */
 .tp-terms-notice {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   background: rgba(123, 47, 190, .06);
   border: 1.5px solid rgba(123, 47, 190, .2);
   border-radius: 12px;
   padding: 18px 22px;
   margin-bottom: 40px;
 }

 .tp-terms-notice i {
   font-size: 1.2rem;
   color: var(--tp-purple);
   flex-shrink: 0;
   margin-top: 2px;
 }

 .tp-terms-notice p {
   margin: 0;
   font-size: .92rem;
   color: var(--tp-text-mid);
   line-height: 1.65;
 }

 /* Sections wrapper */
 .tp-terms-sections {
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 /* Single section */
 .tp-terms-section {
   background: #fff;
   border: 1.5px solid var(--tp-border);
   border-radius: 16px;
   overflow: hidden;
   transition: border-color .22s, box-shadow .22s;
 }

 .tp-terms-section:hover {
   border-color: rgba(123, 47, 190, .3);
   box-shadow: 0 6px 24px rgba(123, 47, 190, .07);
 }

 /* Section header */
 .tp-terms-section-head {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 20px 24px;
   background: linear-gradient(90deg, rgba(123, 47, 190, .06), transparent);
   border-bottom: 1px solid var(--tp-border);
 }

 .tp-terms-section-icon {
   width: 42px;
   height: 42px;
   border-radius: 10px;
   background: rgba(123, 47, 190, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   color: var(--tp-purple);
   flex-shrink: 0;
 }

 .tp-terms-section-num {
   display: none;
 }

 .tp-terms-section-head h3 {
   font-size: .98rem;
   font-weight: 800;
   color: var(--tp-text-dark);
   margin: 0;
   flex: 1;
 }

 /* Items */
 .tp-terms-items {
   padding: 20px 24px;
   display: flex;
   flex-direction: column;
   gap: 14px;
 }

 .tp-terms-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
 }

 .tp-terms-item-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--tp-purple);
   flex-shrink: 0;
   margin-top: 6px;
   opacity: .6;
 }

 .tp-terms-item-body {
   font-size: .9rem;
   color: var(--tp-text-light);
   line-height: 1.7;
 }

 .tp-terms-item-body strong {
   color: var(--tp-text-dark);
   font-weight: 700;
 }

 @media (max-width: 767px) {
   .tp-terms-section-head {
     padding: 16px 18px;
   }

   .tp-terms-items {
     padding: 16px 18px;
   }
 }

 /* ── Suppliers info section ── */
 .tp-suppliers-info {
   padding: 60px 0 0;
   background: var(--tp-bg-light);
 }

 /* ══════════════════════════════════════════════════════════════
    MEDIA CENTER / ARTICLES PAGE
    ══════════════════════════════════════════════════════════════ */
 .tp-media-info {
   padding: 60px 0 0;
   background: var(--tp-bg-light);
 }

 /* Outro notice */
 .tp-media-outro {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   background: rgba(58, 191, 94, .06);
   border: 1.5px solid rgba(58, 191, 94, .25);
   border-radius: 12px;
   padding: 18px 22px;
   margin-bottom: 0;
 }

 .tp-media-outro i {
   font-size: 1.2rem;
   color: var(--tp-green);
   flex-shrink: 0;
   margin-top: 2px;
 }

 .tp-media-outro p {
   margin: 0;
   font-size: .92rem;
   color: var(--tp-text-mid);
   line-height: 1.65;
 }

 /* 2-col grid for list items */
 .tp-hc-list-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px 24px;
 }

 @media (max-width: 576px) {
   .tp-hc-list-grid {
     grid-template-columns: 1fr;
   }
 }

 /* Articles section */
 .tp-articles-section {
   padding: 70px 0 90px;
   background: #fff;
 }

 .tp-article-card {
   background: #fff;
   border: 1.5px solid var(--tp-border);
   border-radius: 14px;
   overflow: hidden;
   height: 100%;
   display: flex;
   flex-direction: column;
   transition: border-color .22s, box-shadow .22s, transform .22s;
 }

 .tp-article-card:hover {
   border-color: var(--tp-purple);
   box-shadow: var(--tp-shadow);
   transform: translateY(-4px);
 }

 .tp-article-img-wrap {
   display: block;
   height: 200px;
   overflow: hidden;
 }

 .tp-article-img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s ease;
 }

 .tp-article-card:hover .tp-article-img-wrap img {
   transform: scale(1.04);
 }

 .tp-article-body {
   padding: 20px;
   flex: 1;
   display: flex;
   flex-direction: column;
 }

 .tp-article-body h5 {
   font-size: .95rem;
   font-weight: 700;
   margin-bottom: 8px;
   line-height: 1.45;
 }

 .tp-article-body h5 a {
   color: var(--tp-text-dark);
   transition: color .2s;
 }

 .tp-article-body h5 a:hover {
   color: var(--tp-purple);
 }

 .tp-article-body p {
   font-size: .83rem;
   color: var(--tp-text-light);
   line-height: 1.6;
   flex: 1;
   margin-bottom: 14px;
 }

 .tp-article-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: .82rem;
   font-weight: 700;
   color: var(--tp-purple);
   transition: gap .2s;
 }

 .tp-article-link:hover {
   color: var(--tp-purple);
   gap: 10px;
 }
