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

 body {
     font-family: system-ui, -apple-system, sans-serif;
     background: #fff;
     color: #0f172a;
     width: 100%;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 /* LAYOUT */
 .max-w {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 1.5rem;
 }

 .grid-6 {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 1rem;
 }

 .grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
 }

 .grid-4 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2rem;
 }

 @media(max-width:1024px) {
     .grid-6 {
         grid-template-columns: repeat(4, 1fr);
     }

     .grid-3 {
         grid-template-columns: repeat(2, 1fr);
     }

     .grid-4 {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media(max-width:640px) {
     .grid-6 {
         grid-template-columns: repeat(2, 1fr);
     }

     .grid-3 {
         grid-template-columns: 1fr;
     }

     .grid-4 {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* HERO */
 .hero {
     position: relative;
     height: 550px;
     overflow: hidden;
 }

 .hero img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
 }

 .hero-content {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
 }

 .hero-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     gap: 2rem;
 }

 .hero h1 {
     font-size: 3.5rem;
     font-weight: 800;
     color: #fff;
     line-height: 1.15;
     margin-bottom: 1rem;
 }

 .hero p {
     font-size: 1.3rem;
     color: #cbd5e1;
     font-style: italic;
 }

 @media(max-width:768px) {
     .hero h1 {
         font-size: 2rem;
     }

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

 .hero-dots {
     position: absolute;
     bottom: 1.5rem;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 0.5rem;
 }

 .hero-dots span {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
 }

 .hero-dots span.active {
     background: #fff;
 }

 /* FEATURED CARD */
 .feat-card-wrap {
     position: relative;
 }

 .feat-card-glow {
     position: absolute;
     inset: -1rem;
     background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3));
     border-radius: 1.5rem;
     filter: blur(24px);
 }

 .feat-card {
     position: relative;
     width: 288px;
     height: 176px;
     border-radius: 1rem;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
     transition: transform 0.3s;
 }

 .feat-card:hover {
     transform: scale(1.04);
 }

 .feat-card-bg {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, #0f172a, #1e293b, #0f172a);
 }

 .feat-card-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, transparent 50%, rgba(59, 130, 246, 0.2) 100%);
 }

 .feat-card-logo {
     position: absolute;
     top: 1rem;
     left: 1rem;
 }

 .feat-card-logo svg text {
     font-size: 28px;
     font-weight: 700;
     fill: white;
 }

 .feat-card-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 1.25rem;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
 }

 .feat-card-bottom .label {
     color: rgba(255, 255, 255, 0.6);
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-bottom: 0.25rem;
 }

 .feat-card-bottom h3 {
     color: #fff;
     font-size: 1.1rem;
     font-weight: 700;
     margin-bottom: 0.25rem;
 }

 .feat-card-bottom .prices {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .feat-card-bottom .price {
     color: #34d399;
     font-weight: 600;
 }

 .feat-card-bottom .badge {
     background: rgba(52, 211, 153, 0.2);
     color: #34d399;
     font-size: 0.7rem;
     padding: 0.2rem 0.6rem;
     border-radius: 999px;
 }

 .feat-card-btn {
     width: 100%;
     margin-top: 1.25rem;
     background: #fff;
     color: #0f172a;
     border: none;
     padding: 0.875rem;
     border-radius: 0.75rem;
     font-weight: 600;
     font-size: 1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: background 0.2s;
 }

 .feat-card-btn:hover {
     background: #f1f5f9;
 }

 /* SECTIONS */
 .section-popular {
     background-color: #fff;
     padding: 4rem 0;
 }

 .section-title {
     font-size: 1.875rem;
     font-weight: 800;
     color: #0f172a;
     margin-bottom: 2rem;
 }

 .tabs {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-bottom: 2.5rem;
 }

 .tab {
     padding: 0.5rem 1rem;
     border-radius: 999px;
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     border: 1.5px solid #cbd5e1;
     background: #fff;
     color: #334155;
     transition: all 0.2s;
 }

 .tab.active {
     background: #0f172a;
     color: #fff;
     border-color: #0f172a;
 }

 .tab:hover:not(.active) {
     border-color: #94a3b8;
 }

 /* BRAND CARDS */
 .brand-card {
     cursor: pointer;
 }

 .brand-card-inner {
     border-radius: 1rem;
     height: 7rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #e2e8f0;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     transition: box-shadow 0.2s, transform 0.2s;
     overflow: hidden;
 }

 .brand-card-inner:hover {
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     transform: translateY(-4px);
 }

 .brand-card-inner span {
     font-weight: 700;
     font-size: 1.1rem;
     color: #fff;
 }

 .brand-card p {
     margin-top: 0.5rem;
     font-size: 0.875rem;
     color: #334155;
     font-weight: 500;
 }

 /* bg colors */
 .bg-black {
     background: #000;
 }

 .bg-blue-600 {
     background: #2563eb;
 }

 .bg-paysafe {
     background: #00295a;
 }

 .bg-google {
     background: #fff;
 }

 .bg-lebara {
     background: #e5007d;
 }

 .bg-sfr {
     background: #dc2626;
 }

 .bg-laposte {
     background: #ffcc00;
 }

 .bg-lyca {
     background: #2563eb;
 }

 .bg-syma {
     background: #fff;
 }

 .bg-neosurf {
     background: #e6007e;
 }

 .bg-pcs {
     background: #000;
 }

 .bg-transcash {
     background: #1a1a1a;
 }

 .bg-cashlib {
     background: #ff6b35;
 }

 .bg-mifinity {
     background: #00a651;
 }

 .bg-netflix {
     background: linear-gradient(to bottom, #dc2626, #000);
 }

 .bg-spotify {
     background: linear-gradient(135deg, #4ade80, #16a34a);
 }

 .bg-twitch {
     background: #9146ff;
 }

 .bg-kobo {
     background: #bf0000;
 }

 .bg-apple {
     background: linear-gradient(135deg, #fce7f3, #dbeafe, #dcfce7);
 }

 .bg-zalando {
     background: #ff6900;
 }

 .bg-fnac {
     background: #e4a800;
 }

 .bg-mango {
     background: #fff;
 }

 .bg-primark {
     background: #00a0df;
 }

 .bg-uber {
     background: #000;
 }

 .bg-ps {
     background: #fff;
 }

 .bg-steam {
     background: #1b2838;
 }

 .bg-nintendo {
     background: #e60012;
 }

 .bg-xbox {
     background: #107c10;
 }

 .bg-google-play-multi {
     background: linear-gradient(135deg, #dbeafe, #dcfce7, #fef9c3);
 }

 .text-black {
     color: #000 !important;
 }

 .text-orange {
     color: #f97316 !important;
 }

 .text-blue-800 {
     color: #1e40af !important;
 }

 .text-red {
     color: #dc2626 !important;
 }

 /* CATEGORY SECTION */
 .cat-section {
     margin-bottom: 4rem;
 }

 .cat-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1.5rem;
 }

 .cat-header h2 {
     font-size: 1.5rem;
     font-weight: 800;
     color: #0f172a;
 }

 .cat-header a .btn-all {
     background: #0f172a;
     color: #fff;
     border: none;
     border-radius: 999px;
     padding: 0.5rem 1.25rem;
     font-size: 0.875rem;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 0.25rem;
     transition: background 0.2s;
 }

 .cat-header a .btn-all:hover {
     background: #1e293b;
 }

 /* PREMIUM */
 .premium-section {
     background-color: #fff;
     padding: 5rem 1.5rem;
 }

 .premium-box {
     background: linear-gradient(to right, #0f172a, #1e293b, #064e3b);
     border-radius: 1.5rem;
     padding: 3rem;
     overflow: hidden;
     position: relative;
 }

 .premium-blur-1 {
     position: absolute;
     top: 0;
     right: 0;
     width: 24rem;
     height: 24rem;
     background: #10b981;
     border-radius: 50%;
     filter: blur(80px);
     opacity: 0.1;
     pointer-events: none;
 }

 .premium-blur-2 {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 16rem;
     height: 16rem;
     background: #fff;
     border-radius: 50%;
     filter: blur(80px);
     opacity: 0.1;
     pointer-events: none;
 }

 .premium-inner {
     position: relative;
     z-index: 1;
 }

 .premium-header {
     text-align: center;
     margin-bottom: 3rem;
 }

 .premium-badge {
     display: inline-block;
     background: rgba(16, 185, 129, 0.2);
     color: #34d399;
     font-size: 0.875rem;
     font-weight: 500;
     padding: 0.375rem 1rem;
     border-radius: 999px;
     margin-bottom: 1rem;
 }

 .premium-header h2 {
     font-size: 2.25rem;
     font-weight: 800;
     color: #fff;
 }

 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 1rem;
 }

 @media(max-width:1024px) {
     .benefits-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media(max-width:640px) {
     .benefits-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 .benefit-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(8px);
     border-radius: 1rem;
     padding: 1.25rem;
     text-align: center;
     cursor: pointer;
     transition: background 0.2s;
 }

 .benefit-card:hover {
     background: rgba(255, 255, 255, 0.15);
 }

 .benefit-card .icon {
     font-size: 2rem;
     display: block;
     margin-bottom: 0.75rem;
 }

 .benefit-card .highlight {
     display: inline-block;
     background: #10b981;
     color: #fff;
     font-size: 0.7rem;
     font-weight: 700;
     padding: 0.15rem 0.5rem;
     border-radius: 999px;
     margin-bottom: 0.5rem;
 }

 .benefit-card h3 {
     color: #fff;
     font-size: 0.875rem;
     font-weight: 600;
     margin-bottom: 0.25rem;
 }

 .benefit-card p {
     color: #94a3b8;
     font-size: 0.75rem;
 }

 .premium-trial {
     margin-top: 3rem;
     background: linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.2), rgba(16, 185, 129, 0.2));
     border: 1px solid rgba(52, 211, 153, 0.4);
     border-radius: 1rem;
     padding: 2rem;
     text-align: center;
 }

 .premium-trial p {
     color: #fff;
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 0.75rem;
 }

 .premium-trial .sub {
     color: #f1f5f9;
     font-size: 1rem;
     margin-bottom: 0.5rem;
 }

 .premium-trial .price {
     color: #f8fafc;
     font-size: 0.875rem;
 }

 .premium-trial .price strong {
     color: #6ee7b7;
     font-size: 1rem;
 }

 .premium-cta {
     margin-top: 2.5rem;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 1rem;
 }

 .btn-premium {
     background: #10b981;
     color: #fff;
     border: none;
     border-radius: 999px;
     padding: 0.875rem 2.5rem;
     font-size: 1.1rem;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     transition: background 0.2s;
 }

 .btn-premium:hover {
     background: #059669;
 }

 /* REVIEWS */
 .reviews-section {
     background: #0f172a;
     padding: 6rem 1.5rem;
 }

 .reviews-header {
     text-align: center;
     margin-bottom: 4rem;
 }

 .reviews-header h2 {
     font-size: 2.75rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 1rem;
 }

 .stars {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
     margin-bottom: 0.75rem;
 }

 .stars svg {
     width: 1.5rem;
     height: 1.5rem;
     color: #facc15;
     fill: #facc15;
 }

 .stars span {
     color: #fff;
     font-weight: 600;
     font-size: 1.1rem;
 }

 .reviews-header .sub {
     color: #94a3b8;
     font-size: 1.1rem;
 }

 .reviews-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.5rem;
     margin-bottom: 4rem;
 }

 @media(max-width:1024px) {
     .reviews-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media(max-width:640px) {
     .reviews-grid {
         grid-template-columns: 1fr;
     }
 }

 .review-card {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 1rem;
     padding: 1.5rem;
 }

 .review-card .rev-stars {
     display: flex;
     gap: 0.25rem;
     margin-bottom: 0.75rem;
 }

 .review-card .rev-stars svg {
     width: 1rem;
     height: 1rem;
     fill: #facc15;
     color: #facc15;
 }

 .review-card p {
     color: #cbd5e1;
     font-size: 0.9rem;
     line-height: 1.6;
 }

 .rev-author {
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }

 .rev-avatar {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     color: #fff;
     font-size: 0.9rem;
 }

 .rev-author .name {
     color: #f1f5f9;
     font-weight: 600;
     font-size: 0.875rem;
 }

 .rev-author .date {
     color: #64748b;
     font-size: 0.75rem;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2rem;
     padding-top: 4rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
 }

 @media(max-width:768px) {
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 .stats-grid .num {
     font-size: 2.5rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 0.5rem;
 }

 .stats-grid .lbl {
     color: #94a3b8;
 }

 /* THREE PILLARS */
 .pillars-section {
     padding: 6rem 1.5rem;
     background: #fff;
 }

 .pillars-header {
     text-align: center;
     margin-bottom: 4rem;
 }

 .pillars-header h2 {
     font-size: 2.75rem;
     font-weight: 800;
     color: #0f172a;
     margin-bottom: 1rem;
 }

 .pillars-header p {
     font-size: 1.2rem;
     color: #475569;
     max-width: 48rem;
     margin: 0 auto;
 }

 .pillar-card {
     background: #f8fafc;
     border-radius: 1.5rem;
     padding: 2rem;
     transition: box-shadow 0.3s;
 }

 .pillar-card:hover {
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }

 .pillar-icon {
     width: 4rem;
     height: 4rem;
     background: linear-gradient(135deg, #d1fae5, #a7f3d0);
     border-radius: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     margin-bottom: 1.5rem;
     transition: transform 0.3s;
 }

 .pillar-card:hover .pillar-icon {
     transform: scale(1.1);
 }

 .pillar-card h3 {
     font-size: 1.375rem;
     font-weight: 800;
     color: #0f172a;
     margin-bottom: 1rem;
 }

 .pillar-card .desc {
     color: #475569;
     line-height: 1.7;
     margin-bottom: 1.5rem;
 }

 .pillar-card ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }

 .pillar-card li {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.875rem;
     color: #334155;
 }

 .pillar-card li svg {
     width: 1.25rem;
     height: 1.25rem;
     color: #10b981;
     flex-shrink: 0;
 }

 /* FINAL CTA */
 .final-cta {
     padding: 5rem 1.5rem;
     background: linear-gradient(135deg, #0f172a, #064e3b, #0f172a);
     text-align: center;
 }

 .final-cta h2 {
     font-size: 2.75rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 1.5rem;
 }

 @media(max-width:640px) {
     .final-cta h2 {
         font-size: 1.75rem;
     }
 }

 .final-cta p {
     font-size: 1.2rem;
     color: #cbd5e1;
     margin-bottom: 2.5rem;
 }

 .cta-btns {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
 }

 .btn-cta-primary {
     background: #10b981;
     color: #fff;
     border: none;
     border-radius: 999px;
     padding: 1rem 2.5rem;
     font-size: 1.1rem;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
     transition: background 0.2s;
 }

 .btn-cta-primary:hover {
     background: #059669;
 }

 .btn-cta-outline {
     background: transparent;
     color: #34d399;
     border: 2px solid #34d399;
     border-radius: 999px;
     padding: 1rem 2.5rem;
     font-size: 1.1rem;
     font-weight: 700;
     cursor: pointer;
     transition: background 0.2s;
 }

 .btn-cta-outline:hover {
     background: rgba(52, 211, 153, 0.1);
 }

 .final-cta .note {
     color: #64748b;
     font-size: 0.875rem;
 }

 @media(max-width: 786px) {
     .pillars-header h2 {
         font-size: 1.75rem;
         font-weight: 800;
         color: #0f172a;
         margin-bottom: 1rem;
     }

     .premium-section {
         background-color: #fff;
         padding: 5rem 5px;
     }

     .max-w {
         max-width: 1280px;
         margin: 0 auto;
         padding: 0 5px;
     }
 }