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

 html {
     scroll-behavior: smooth;
     scrollbar-color: var(--purple) var(--bg);
     scrollbar-width: thin;
 }

 ::-webkit-scrollbar {
     width: 10px;
 }

 ::-webkit-scrollbar-track {
     background: var(--bg);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--purple);
     border: 2px solid var(--bg);
     border-radius: 999px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: var(--purple-light);
 }

 @media (prefers-reduced-motion: reduce) {
     html {
         scroll-behavior: auto;
     }
 }

 :root {
     --purple: #7C3AED;
     --purple-light: #9F67FF;
     --pink: #EC4899;
     --cyan: #06B6D4;
     --blue: #3B82F6;
     --orange: #F59E0B;
     --green: #10B981;
     --bg: #F8F7FF;
     --card-bg: rgba(255, 255, 255, 0.85);
     --border: rgba(124, 58, 237, 0.10);
     --shadow: 0 4px 32px rgba(124, 58, 237, 0.08);
     --shadow-hover: 0 12px 18px rgba(187, 187, 187, 0.18);
     --radius: 28px;
     --radius-sm: 16px;
     --font-head1: "Roboto Flex", sans-serif;
     --font-body1: 'Nunito', sans-serif;
     --font-head: "Outfit", sans-serif;
     --font-body: "Outfit", sans-serif;


     --violet: #8b5cf6;
     --violet-2: #a855f7;
     --pink: #ec4899;
     --blue: #3b82f6;
     --bg-0: #05020c;
     --bg-1: #0e0620;
     --border: rgba(255, 255, 255, 0.08);
 }

 :root {
     --purple: #4a4fd9;
     --purple-light: #7176ff;
     --purple-badge: #5760e9;
     --dark-bg: #11091d;
     --card-dark: #160c25;
     --card-border: #8931ff;
     --text-dark: #30183f;
     --text-gray: #808080;
     --accent-purple: #9756f3;
     --accent-blue: #0a97eb;
     --accent-orange: #f28706;
     --green-accent: #87E64B;
 }

 body {
     font-family: var(--font-body);
     background: var(--bg);
     min-height: 100vh;
     overflow-x: hidden;
 }

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

 /* ── HERO ──────────────────────────────────────────────── */
 .hero {
     position: relative;
     background: linear-gradient(135deg, #f0f2ff 0%, #fdf6ff 60%, #f5f0ff 100%);
     overflow: hidden;
     padding: 175px 20px 120px;
     min-height: 100vh;
     height: 100%;
     background: url(../images/banner-bg.jpg);
     background-repeat: no-repeat;
     background-position: 100%;
     background-size: cover;
 }

 @media (max-width: 768px) {
     .hero {
         padding: 80px 16px 80px;
         min-height: auto;
     }
 }

 @media (max-width: 480px) {
     .hero {
         padding: 60px 12px 60px;
     }
 }

 .hero-main-img img {
     width: 100%;
     height: auto;
 }

 .hero::before {
     content: '';
     position: absolute;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, #87edff78 0%, transparent 70%);
     top: -252px;
     left: 23%;
     pointer-events: none;
     animation: zoomPulse 6s ease-in-out infinite;
     transform-origin: center;
 }

 .hero::after {
     content: '';
     position: absolute;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgb(157 10 244 / 30%) 0%, transparent 70%);
     bottom: -210px;
     left: -10%;
     pointer-events: none;
     animation: zoomPulse 6s ease-in-out infinite;
     transform-origin: center;
 }

 @keyframes zoomPulse {
     0% {
         transform: scale(1);
         opacity: 0.7;
     }

     50% {
         transform: scale(1.2);
         opacity: 1;
     }

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

 .hero-nav {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 60px;
 }

 .hero-nav .logo-text {
     font-size: 22px;
     font-weight: 700;
     background: linear-gradient(180deg, #4a4fd9 0%, #7176ff 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .hero-content {
     display: grid;
     grid-template-columns: 44% 1fr;
     gap: 60px;
     align-items: center;
 }

 @media (max-width: 1024px) {
     .hero-content {
         grid-template-columns: 1fr;
         gap: 40px;
     }
 }

 .hero-left {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .badge {
     display: inline-flex;
     align-items: center;
     padding: 8px 18px;
     border: 1px solid var(--purple-badge);
     background: rgb(87 96 233 / 10%) !important;
     border-radius: 60px;
     font-size: 16px;
     color: var(--purple-badge);
     font-weight: 500;
 }

 .hero-title {
     font-size: 74px;
     font-weight: 700;
     line-height: 75px;
     color: var(--text-dark);
     margin-bottom: 10px;
 }

 @media (max-width: 1024px) {
     .hero-title {
         font-size: 48px;
         line-height: 56px;
     }
 }

 @media (max-width: 768px) {
     .hero-title {
         font-size: 36px;
         line-height: 44px;
     }
 }

 @media (max-width: 480px) {
     .hero-title {
         font-size: 28px;
         line-height: 36px;
     }
 }

 .hero-title .gradient-text {
     background: linear-gradient(180deg, #c500e7 0%, #7912ff 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .hero-desc {
     font-size: 20px;
     line-height: 30px;
     color: var(--text-gray);
     max-width: 480px;
     margin-bottom: 30px;
 }

 @media (max-width: 768px) {
     .hero-desc {
         font-size: 16px;
         line-height: 26px;
         max-width: 100%;
     }
 }

 @media (max-width: 480px) {
     .hero-desc {
         font-size: 14px;
         line-height: 22px;
     }
 }

 .hero-btns {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
 }

 .sp_hasH_tag {
     background: linear-gradient(180deg, #2d2646 0%, rgba(200, 255, 234, 0) 100%);
     font-size: 120px;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     /* opacity: 0.1; */
     top: -52%;
     left: 0;
     line-height: 1.1;
 }

 .btn-primary {
     padding: 15px 30px;
     background: linear-gradient(180deg, #4a4fd9 0%, #7176ff 100%);
     color: #fff;
     border: none;
     border-radius: 60px;
     font-size: 16px;
     font-family: 'Outfit', sans-serif;
     font-weight: 500;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(74, 79, 217, 0.35);
 }

 .btn-secondary {
     padding: 15px 28px;
     /* background: linear-gradient(180deg, #0d0c21 0%, #2a3d9a 100%); */
     /* background:linear-gradient(180deg, #c500e7 0%, #7912ff 100%); */
     background: linear-gradient(96deg, #ec4899, #8b5cf6);
     color: #fff;
     height: 60px;
     border: none;
     border-radius: 10px;
     font-size: 18px;
     font-weight: 500;
     cursor: pointer;
     transition: transform 0.2s;
     font-family: 'Outfit', sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     text-decoration: none;
 }

 .btn-secondary svg {
     width: 26px;
     height: 24px;
 }



 .btn-secondary:hover {
     transform: translateY(-2px);
 }

 .btn-link {
     transition: transform 0.2s;
     height: 60px;
 }

 .btn-link img {
     height: 60px;
 }

 .btn-link:hover {
     transform: translateY(-2px);
 }

 .hero-right {
     position: relative;
 }

 .hero-rightanimation1 {
     position: absolute;
     bottom: 155px;
     left: 90px;
     animation: floatA 4s ease-in-out infinite;
     filter: drop-shadow(8px 8px 10px rgba(91, 79, 207, 0.18));
 }

 .hero-rightanimation1 img {
     width: 100%;
     height: 100%;
 }

 .hero-rightanimation2 img {
     width: 100%;
     height: 100%;
 }

 .hero-rightanimation2 {
     position: absolute;
     top: -15px;
     right: 25px;
     animation: floatE 4.2s ease-in-out infinite;
     filter: drop-shadow(8px 8px 10px rgba(91, 79, 207, 0.18));
 }

 @keyframes floatE {

     0%,
     100% {
         transform: translateY(0) rotate(0deg);
     }

     50% {
         transform: translateY(-12px) rotate(0deg);
     }
 }

 @keyframes floatA {

     0%,
     100% {
         transform: translateX(-50%) translateY(0);
     }

     50% {
         transform: translateX(-50%) translateY(-14px);
     }
 }

 .hero-rightanimation3 {
     position: absolute;
     bottom: -20px;
     right: 0;
 }

 .hero-rightanimation3 img {
     width: 100%;
     height: 100%;
 }

 .phone-mock {
     width: 160px;
     height: 320px;
     border: 1.5px solid #d4dbff;
     border-radius: 20px;
     background: linear-gradient(160deg, #e8eaff, #f3f5ff);
     box-shadow: 0 0 40px rgba(74, 79, 217, 0.18);
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     color: #7176ff;
     font-weight: 600;
 }

 .phone-mock.tilt-left {
     transform: rotate(-22deg);
 }

 .phone-mock.tilt-right {
     transform: rotate(27deg);
 }

 .phone-mock.center-phone {
     z-index: 2;
     width: 175px;
     height: 340px;
 }

 .stats-bar {
     background: #f2f2ff;
     border-radius: 20px;
     padding: 20px 20px;
     margin-top: 45px;
     display: flex;
     width: 100%;
     max-width: 835px;
     position: absolute;
     gap: 20px;
     bottom: -50px;
 }

 .stat-card {
     flex: 1;
     background: #fff;
     border: 1px solid #f6e4fb;
     border-radius: 15px;
     padding: 20px 24px;
     display: flex;
     align-items: center;
     gap: 16px;
     box-shadow: 0 0 30px rgba(86, 24, 92, 0.07);
 }

 .stat-icon {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     flex-shrink: 0;
 }

 .stat-icon.purple {
     background: linear-gradient(135deg, #F3EFFD, #cab6ff);
 }

 .stat-icon.blue {
     background: linear-gradient(135deg, #EDF7FE, #cbe9ff);
 }

 .stat-icon.orange {
     background: linear-gradient(135deg, #FDF4EA, #ffe2c1);
 }

 .stat-value {
     font-size: 26px;
     font-weight: 700;
 }

 .stat-value.purple {
     color: var(--accent-purple);
 }

 .stat-value.blue {
     color: var(--accent-blue);
 }

 .stat-value.orange {
     color: var(--accent-orange);
 }

 /* ── TICKER ─────────────────────────────────────────────── */
 .ticker {
     background: var(--purple);
     padding: 18px 0;
     overflow: hidden;
     white-space: nowrap;
     position: absolute;
     bottom: 0px;
     left: 0;
     right: 0;
     z-index: 1;
 }

 .ticker-track {
     display: inline-flex;
     gap: 0;
     animation: ticker 30s linear infinite;
 }

 .ticker-item {
     display: inline-flex;
     align-items: center;
     gap: 30px;
     font-size: 18px;
     font-weight: 500;
     color: #fff;
     padding: 0 20px;
 }

 .ticker-dot {
     height: 20px;
 }

 @keyframes ticker {
     0% {
         transform: translateX(0);
     }

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

 /* ── DARK SECTION ────────────────────────────────────────── */
 .dark-section {
     background: var(--dark-bg);
     padding: 80px 0px;
 }

 .section-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .section-badge {
     display: inline-flex;
     align-items: center;
     padding: 8px 18px;
     border: 1px solid var(--purple-badge);
     background: rgba(87, 96, 233, 0.1);
     border-radius: 60px;
     font-size: 14px;
     color: var(--purple-badge);
     font-weight: 500;
     margin-bottom: 16px;
 }

 .section-title {
     font-size: 40px;
     font-weight: 700;
     color: #fff;
 }

 /* Feature Cards */
 .feature-card {
     background: var(--card-dark);
     border-radius: 40px;
     padding: 50px 60px;
     display: grid;
     grid-template-columns: 50% 1fr;
     gap: 10px;
     align-items: center;
     /* margin-bottom: 40px; */
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .fs_option_div:hover {
     transform: translateY(-4px);
     box-shadow: 0 20px 60px rgba(137, 49, 255, 0.2);
 }

 .feature-card.reverse {
     grid-template-columns: 50% 1fr;
 }

 .feature-card.reverse .feature-text {
     order: 2;
 }

 .feature-card.reverse .feature-visual {
     order: 1;
 }

 .feature-imgage-boxes {
     position: relative;
 }

 .feature-imgage-box-main-img {
     position: relative;
 }

 .feature-imgage-box-main-img img {
     width: 100%;
     height: auto;
 }

 .feature-imgage-boxes::before {
     content: '';
     position: absolute;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgb(27 11 255 / 32%) 0%, transparent 70%);
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 0;
     left: 50%;
     pointer-events: none;
     transform-origin: center;
 }

 .feature-imgage-box-left-img {
     position: absolute;
     top: 115px;
     right: -120px;
     animation: floatA 4s ease-in-out infinite;
     filter: drop-shadow(8px 8px 12px rgba(54, 54, 54, 0.445));
 }

 .feature-imgage-box-right-img {
     position: absolute;
     bottom: 90px;
     left: 0px;
     animation: floatE 4s ease-in-out infinite;
     filter: drop-shadow(8px 8px 12px rgba(54, 54, 54, 0.445));
 }

 .feature-imgage-box-left-img img,
 .feature-imgage-box-right-img img {
     width: 100%;
     height: auto;
 }

 .feature-num {
     display: inline-flex;
     padding: 10px 20px;
     border: 1px solid var(--purple-badge);
     background: rgb(87 96 233 / 20%);
     border-radius: 60px;
     font-size: 16px;
     color: #fff;
     font-weight: 500;
     margin-bottom: 20px;
 }

 .feature-title {
     font-size: 30px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 16px;
 }

 .feature-desc {
     font-size: 18px;
     line-height: 1.75;
     color: rgb(255 255 255 / 88%);
 }

 .feature-visual {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .phone-preview {
     width: 180px;
     height: 360px;
     background: linear-gradient(160deg, #1e1440, #2a1d5e);
     border: 1.5px solid #3a2a70;
     border-radius: 24px;
     box-shadow: 0 0 40px rgba(137, 49, 255, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     color: rgba(255, 255, 255, 0.5);
     font-weight: 500;
     text-align: center;
     padding: 20px;
     position: relative;
     overflow: hidden;
 }

 .phone-preview::before {
     content: '';
     position: absolute;
     width: 120px;
     height: 120px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(137, 49, 255, 0.3) 0%, transparent 70%);
     top: -30px;
     right: -30px;
 }

 .fs_platform_option1 {
     background: linear-gradient(115.66deg, #8931FF 1.72%, #D722AF 89%) !important;
 }

 .fs_option_div {
     border-radius: 40px;
     padding: 1px;
     position: relative;
     height: 100%;
     text-align: start;
     transition: ease-in-out .3s;
     margin-bottom: 40px;
 }

 .fs_platform_option1 .sylb_platform_option_after {
     background: var(--card-dark) !important;
 }

 .sylb_platform_option_after {
     z-index: 8;
     inset: 1px;
 }

 /* ── APP Slider ─────────────────────────────────────────── */
 .slider-section {
     margin-top: 100px;
     /* padding: 10px 0px 80px; */
 }

 /* ── APP SHOWCASE ─────────────────────────────────────────── */
 .showcase-section {
     padding: 80px 0px 80px;
     text-align: center;
     /* background: url(/assets/images/showcase-bg.webp); */
     background: url(../images/showcase-bg.png);
     background-repeat: no-repeat;
     background-position: 100% 100%;
     background-size: cover;
     background-color: #fefdfe;
 }

 .showcase-section .section-badge {
     color: var(--purple-badge);
 }

 .showcase-title {
     font-size: 40px;
     font-weight: 700;
     color: #222;
     max-width: 720px;
     margin: 0 auto 60px;
     line-height: 50px;
 }

 .phones-showcase {
     position: relative;
     margin: 60px auto 0px;
     max-width: 100%;
     overflow: hidden;
 }

 .swiper-wrapper {
     display: flex;
     gap: 28px;
     align-items: flex-end;
     transition: transform 0.8s ease;
     padding: 0 40px;
 }

 .showcase-phone {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
     height: auto;
     min-width: auto;
 }

 .showcase-phone img {
     width: 100%;
     height: auto;
     max-width: 100%;
     display: block;
     object-fit: contain;
     transition: transform 0.3s ease;
 }

 .showcase-phone:hover img {
     transform: scale(1.01);
 }

 /* Swiper Navigation Arrows */
 .swiper-button-next,
 .swiper-button-prev {
     width: 48px;
     height: 48px;
     background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
     border-radius: 50%;
     top: 50%;
     transform: translateY(-50%);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     cursor: pointer;
     transition: all 0.3s ease;
     z-index: 10;
 }

 .swiper-button-next:after,
 .swiper-button-prev:after {
     font-size: 24px;
     font-weight: bold;
 }

 .swiper-button-prev:hover,
 .swiper-button-next:hover {
     background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
     box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
 }

 .swiper-button-prev {
     left: -60px;
 }

 .swiper-button-next {
     right: -60px;
 }

 /* Responsive breakpoints for navigation */
 @media (max-width: 1280px) {

     .swiper-button-prev,
     .swiper-button-next {
         width: 40px;
         height: 40px;
         font-size: 18px;
     }

     .swiper-button-prev {
         left: -50px;
     }

     .swiper-button-next {
         right: -50px;
     }
 }

 @media (max-width: 768px) {
     .phones-showcase {
         margin: 40px auto;
         padding-bottom: 30px;
         overflow: hidden;
     }

     .swiper-button-prev,
     .swiper-button-next {
         width: 36px;
         height: 36px;
         font-size: 16px;
         display: none;
     }

     .swiper-button-prev {
         left: -40px;
     }

     .swiper-button-next {
         right: -40px;
     }
 }

 @media (max-width: 480px) {
     .phones-showcase {
         margin: 30px auto;
         padding-bottom: 20px;
     }

     .swiper-button-prev,
     .swiper-button-next {
         display: none !important;
     }
 }

 .showcase-images {
     display: flex;
     /* flex-wrap: wrap; */
     gap: 16px;
     justify-content: center;
     align-items: center;
     margin-top: 40px;
 }

 @media (max-width: 768px) {
     .showcase-images {
         gap: 12px;
         margin-top: 30px;
     }
 }

 @media (max-width: 480px) {
     .showcase-images {
         gap: 8px;
         margin-top: 20px;
     }
 }

 .showcase-images img {
     max-width: 100%;
     height: auto;
 }

 /* ── ELITE / CTA ─────────────────────────────────────────── */
 .elite-section {
     padding: 80px 80px;
     text-align: center;
     position: relative;
     overflow: hidden;
     background: url(/assets/images/elite-bg.jpg);
     background-repeat: no-repeat;
     background-position: 100% 100%;
     background-size: cover;
 }

 .elite-sub-box {
     background: rgba(255, 255, 255, 0.1);
     display: inline-flex;
     padding: 16px 36px;
     border-radius: 60px;
     color: #fff;
     font-size: 24px;
     line-height: 40px;
     font-family: 'Outfit', sans-serif;
 }

 @media (max-width: 768px) {
     .elite-section {
         padding: 60px 24px;
     }

     .elite-sub-box {
         padding: 10px 20px;
         font-size: 14px;
     }

     .elite-number h2 {
         font-size: 60px;
         line-height: 58px;
     }
 }

 @media (max-width: 480px) {
     .elite-section {
         padding: 40px 16px;
     }
 }

 .elite-section::before {
     content: '';
     position: absolute;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(130, 180, 64, 0.15) 0%, transparent 70%);
     top: -100px;
     left: 50%;
     transform: translateX(-50%);
     pointer-events: none;
 }

 .elite-title {
     font-family: 'Outfit', sans-serif;
     font-size: 50px;
     font-weight: 900;
     color: var(--green-accent);
     margin-bottom: 12px;
 }

 @media (max-width: 768px) {
     .elite-title {
         font-size: 36px;
         line-height: 36px;
     }
 }

 @media (max-width: 480px) {
     .elite-title {
         font-size: 28px;
         line-height: 28px;
     }
 }

 .hero_logo {
     /* margin-bottom: 22px; */
     max-width: 190px;
 }

 .hero_logo img {
     width: 100%;
     height: auto;
 }

 .elite-subtitle {
     font-family: 'Outfit', sans-serif;
     font-size: 24px;
     font-weight: 500;
     color: #fff;
     margin-bottom: 40px;
 }

 @media (max-width: 768px) {
     .elite-subtitle {
         font-size: 18px;
     }
 }

 @media (max-width: 480px) {
     .elite-subtitle {
         font-size: 16px;
     }
 }

 .elite-number {
     font-family: 'Outfit', sans-serif;
     font-size: 72px;
     font-weight: 800;

 }

 .elite-number h2 {
     font-size: 80px;
     line-height: 80px;
     font-weight: 900;
     background: linear-gradient(90deg, #DD00FF, #00D9FF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
 }

 @media (max-width: 768px) {
     .elite-number h2 {
         font-size: 56px;
         line-height: 56px;
     }
 }

 @media (max-width: 480px) {
     .elite-number h2 {
         font-size: 40px;
         line-height: 40px;
     }
 }

 .elite-number-label {
     font-family: 'Outfit', sans-serif;
     font-size: 30px;
     font-weight: 500;
     color: #fff;
     margin-top: 4px;
     margin-bottom: 35px;
 }

 .elite-image {
     margin-bottom: 30px;
 }

 /* ── CTA FINAL ────────────────────────────────────────────── */
 .cta-section {
     background: var(--dark-bg);
     padding: 80px;
     text-align: center;
     /* background: url(../images/cta-bg.png); */
     background-repeat: no-repeat;
     background-position: 100% 100%;
     background-size: cover;
 }

 @media (max-width: 768px) {
     .cta-section {
         padding: 60px 24px;
     }
 }

 @media (max-width: 480px) {
     .cta-section {
         padding: 40px 16px;
     }
 }

 .cta-section-box {
     max-width: 540px;
     margin: auto;
 }

 .cta-section-box img {
     max-width: 250px;
 }

 .cta-title {
     font-size: 34px;
     font-weight: 700;
     line-height: 40px;
     color: #ffffff;
     margin-bottom: 12px;
     margin-top: 12px;
 }

 @media (max-width: 768px) {
     .cta-title {
         font-size: 26px;
         line-height: 32px;
     }
 }

 @media (max-width: 480px) {
     .cta-title {
         font-size: 22px;
         line-height: 28px;
     }
 }

 .cta-title span {
     /* color: var(--purple-badge); */
     background: linear-gradient(180deg, #f88241 10%, #c500e7 50%, #7912ff 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .cta-subtitle {
     font-size: 18px;
     color: rgb(255 255 255 / 88%);
     margin-bottom: 26px;
     line-height: 28px;
 }

 @media (max-width: 768px) {
     .cta-subtitle {
         font-size: 16px;
         line-height: 24px;
     }
 }

 @media (max-width: 480px) {
     .cta-subtitle {
         font-size: 14px;
         line-height: 20px;
     }
 }

 .btn-purchase {
     padding: 17px 38px;
     background: #82b440;
     color: #fff;
     border: none;
     border-radius: 8px;
     font-size: 18px;
     font-weight: 500;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .btn-purchase:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(130, 180, 64, 0.35);
 }

 /* ── FOOTER ────────────────────────────────────────────────── */
 footer {
     background: #11091d;
     border-top: 1px solid rgb(179 4 237 / 30%);
     padding: 28px 20px 5px;
     color: #aeb0c1;
     font-family: var(--font-head);
 }

 .footer-inner {
     max-width: 1120px;
     margin: 0 auto;
     text-align: center;
 }

 .footer-copyright {
     margin: 0;
     font-size: 16px;
     line-height: 22px;
     font-weight: 400;
     color: #bdbdbd;
 }

 .footer-copyright a,
 .footer-links a {
     color: #bdbdbd;
     font-size: 15px;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .footer-copyright a:hover,
 .footer-links a:hover {
     color: #ffffff;
 }

 .footer-heart {
     color: #ed3c4c;
     padding: 0 3px;
 }

 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px 24px;
     margin-top: 14px;
     font-size: 14px;
     line-height: 22px;
 }

 @media (max-width: 480px) {
     footer {
         padding: 24px 16px 28px;
     }

     .footer-copyright,
     .footer-links {
         font-size: 12px;
         line-height: 20px;
     }

     .footer-links {
         gap: 6px 14px;
         margin-top: 12px;
     }
 }

 /* hero close */

 /* ── Background ── */
 .scene {
     position: relative;
     width: 100%;
     padding: 64px 24px 80px;
     /* background: linear-gradient(160deg, #F0EDFF 0%, #F8F7FF 40%, #EDF6FF 80%, #FFF0FB 100%); */
     overflow: hidden;
 }

 .container {
     position: relative;
     max-width: 1310px;
     margin: 0 auto;
     padding: 0 15px;
 }

 .hero .container {
     max-width: 1620px;
 }

 @media (max-width: 768px) {
     .container {
         padding: 0 0px;
     }
 }

 @media (max-width: 480px) {
     .container {
         padding: 0 0px;
     }
 }

 /* ── Badge ── */
 .badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, 0.7);
     border: 1.5px solid rgba(124, 58, 237, 0.22);
     border-radius: 99px;
     padding: 8px 20px;
     font-family: var(--font-head);
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--purple);
     backdrop-filter: blur(8px);
     box-shadow: 0 2px 16px rgba(124, 58, 237, 0.10);
     margin-bottom: 15px;
 }

 /* ── Header ── */
 .header {
     text-align: center;
     margin-bottom: 56px;
 }

 .headline {
     margin-bottom: 10px;

     font-size: 50px;
     font-weight: 700;
     line-height: 60px;
     color: var(--text-dark);
 }

 .headline .gradient-text {
     background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .subtitle {
     /* font-weight: 500; */
     max-width: 620px;
     margin: 0 auto;
     font-size: 20px;
     line-height: 30px;
     color: var(--text-gray);
 }

 /* ── Grid ── */
 .grid-top {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-bottom: 20px;
 }

 .grid-mid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 20px;
     margin-bottom: 20px;
 }

 /* ── Cards ── */
 .card {
     background: var(--card-bg);
     border-radius: var(--radius);
     border: 1.5px solid var(--border);
     /* box-shadow: var(--shadow); */
     padding: 32px;
     backdrop-filter: blur(16px);
     transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .card:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-hover);
 }

 .card::after {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: inherit;
     opacity: 0;
     transition: opacity 0.3s;
     pointer-events: none;
 }

 .flex-card {
     display: flex;
     align-items: flex-start;
     gap: 18px;
     margin-bottom: 18px;
 }

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

 .card-ai {
     border-color: rgba(124, 58, 237, 0.18);
     background: linear-gradient(270deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 237, 255, 0.6) 100%);
 }

 .card-ai::after {
     box-shadow: inset 0 0 60px rgba(124, 58, 237, 0.06);
 }

 .card-game {
     border-color: rgba(6, 182, 212, 0.18);
     background: linear-gradient(270deg, rgba(255, 255, 255, 0.95) 0%, rgb(237 246 255 / 45%) 100%);
 }

 /* Mid card accent colors */
 .card-safe {
     border-color: rgba(59, 130, 246, 0.15);
     background: linear-gradient(270deg, rgba(255, 255, 255, 0.95) 0%, rgb(177 206 255 / 15%) 100%);
 }

 .card-quiz {
     border-color: rgba(245, 158, 11, 0.18);
     background: linear-gradient(270deg, rgba(255, 255, 255, 0.95) 0%, rgb(255 193 86 / 6%) 100%);
 }

 .card-progress {
     border-color: rgba(6, 182, 212, 0.15);
     background: linear-gradient(270deg, rgba(255, 255, 255, 0.95) 0%, rgb(178 244 255 / 15%) 100%);
 }

 /* ── Icon Box ── */
 .icon-box {
     width: 90px;
     height: 90px;
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     font-size: 28px;
     flex-shrink: 0;
     background: #fff;
     padding: 10px;
 }

 .icon-box img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .icon-box-purple {
     border: 2px solid var(--border);
 }

 .icon-box-cyan {
     border: 1px solid rgba(6, 182, 212, 0.18);
 }

 .icon-box-blue {
     border: 1px solid rgba(59, 130, 246, 0.15);
 }

 .icon-box-orange {
     border: 1px solid rgba(245, 158, 11, 0.18);
 }

 .icon-box-teal {
     border: 1px solid rgba(6, 182, 212, 0.15);
 }

 .card-title {
     font-family: var(--font-head);
     color: var(--text-dark);
     margin-bottom: 10px;
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .card-desc {
     font-size: 17px;
     color: #312153;
     margin-bottom: 10px;
     line-height: 26px;
 }

 /* ── Pills ── */
 .pills {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: auto;
 }

 .pill {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 6px 14px;
     border-radius: 99px;
     font-size: 15px;
     font-weight: 600;
     border: 1.5px solid;
     transition: transform 0.2s, box-shadow 0.2s;
     cursor: default;
 }

 .pe-80 {
     padding-right: 80px !important;
 }

 .pill:hover {
     transform: scale(1.05);
     box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
 }

 .pill-purple {
     background: #F5F3FF;
     color: var(--purple);
     border-color: rgba(124, 58, 237, 0.2);
 }

 .pill-cyan {
     background: #ECFEFF;
     color: #0891B2;
     border-color: rgba(6, 182, 212, 0.25);
 }

 .pill-blue {
     background: #EFF6FF;
     color: var(--blue);
     border-color: rgba(59, 130, 246, 0.22);
 }

 .pill-orange {
     background: #FFFBEB;
     color: #D97706;
     border-color: rgba(245, 158, 11, 0.25);
 }

 .pill-teal {
     background: #F0FDF4;
     color: var(--green);
     border-color: rgba(16, 185, 129, 0.22);
 }

 .pill-pink {
     background: #FDF2F8;
     color: var(--pink);
     border-color: rgba(236, 72, 153, 0.2);
 }

 /* Separator pill */
 .pill-dot-text {
     font-size: 13px;
     font-weight: 700;
     color: #6B7280;
     padding: 6px 0;
     letter-spacing: 0.04em;
 }

 .pill-dot-text span {
     color: inherit;
 }

 /* ── Wide stats card ── */
 .card-stats {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 40px;
     align-items: center;
     margin-bottom: 20px;
     background: linear-gradient(270deg, rgba(255, 255, 255, 0.95) 0%, rgb(240 237 255 / 70%) 100%);
     border-color: rgba(124, 58, 237, 0.14);
 }

 .stats-left .icon-box {
     margin-bottom: 16px;
 }

 .stats-left .card-title {
     font-size: 22px;
 }

 .stats-right {
     display: flex;
     gap: 40px;
     align-items: center;
 }

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

 .stat-item-img {
     width: 90px;
     height: 90px;
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     font-size: 28px;
     flex-shrink: 0;
     background: #fff;
     margin: 0 auto 10px;
     border: 1.5px solid var(--border);
 }

 .stat-item-img img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .stat-number {
     font-family: var(--font-head);
     font-size: 48px;
     font-weight: 700;
     line-height: 1;
     margin-bottom: 6px;
 }

 .stat-purple {
     background: linear-gradient(135deg, var(--purple), var(--pink));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .stat-cyan {
     color: var(--cyan);
 }

 .stat-orange {
     color: var(--orange);
 }

 .stat-label {
     font-size: 15px;
     font-weight: 600;
     color: #30183F;
 }

 .stat-label span {
     font-size: 14px;
     font-weight: 400;
     color: var(--text-gray);
     line-height: 2;
 }

 .stat-divider {
     width: 1px;
     height: 200px;
     background: rgba(124, 58, 237, 0.10);
 }

 /* ── Footer pills ── */
 .footer-pills {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 20px;
     gap: 12px;
     margin-top: 8px;
     border-radius: var(--radius);
     border: 1.5px solid var(--border);
 }

 .footer-pill-img {
     width: 60px;
     height: 60px;
     /* border-radius: 15px;
     font-size: 24px;
     border: 1px solid rgba(59, 130, 246, 0.15);
    padding: 5px; */
 }

 .footer-pill-text {
     display: grid;
     gap: 5px;
     font-size: 16px;
     font-weight: 600;
 }

 .footer-pill-text span {
     font-size: 14px;
     font-weight: 400;
     color: var(--text-gray);
 }

 .footer-pill-img img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .footer-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: #374151;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .footer-pill .fp-icon {
     font-size: 16px;
 }

 .top-card-row {
     display: flex;
     gap: 16px;
     align-items: flex-start;
     margin-bottom: 4px;
 }

 .card-small .card-title {
     font-size: 21px;
 }

 .card-small .card-desc {
     font-size: 15px;
     margin-bottom: 10px;
     line-height: 24px;
 }

 .card-small .icon-box {
     width: 70px;
     height: 70px;
     border-radius: 15px;
     font-size: 24px;
     margin-bottom: 16px;
     padding: 5px;
 }




 /* footer */


 /* Footer Section */

 .pxs_LandingFooter_wrapper {
     background-color: #0c1612;
     padding: 50px 40px 20px;
 }

 .pxs_LandingFooter_logo,
 .pxs_LandingCopy_txt {
     text-align: center;
 }

 .pxs_LandingFooter_logo a img {
     height: 90px;
     object-fit: contain;
 }

 .pxs_powered_txt h6 {
     color: #fff;
     padding: 10px 20px;
     border-radius: 50px;
     text-align: center;
     margin: auto;
     max-width: fit-content;
     /* border: 1px solid var(--purple-badge); */
     background: rgb(118 118 118 / 20%);
     font-size: 15px;
     font-weight: 500;
     margin-bottom: 20px;
     margin-top: 20px;
 }

 .pxs_LandingFooter_social {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 15px 25px;
 }

 .pxs_LandingFooter_social li a {
     position: relative;
     width: 50px;
     height: 50px;
     background-color: #13221c;
     border: 2px solid rgb(44 70 60 / 30%);
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     padding: 2px;
 }

 .pxs_LandingFooter_social li a:hover img {
     animation: jello-horizontal 0.9s both;
 }

 @keyframes jello-horizontal {
     0% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
     }

     30% {
         -webkit-transform: scale3d(1.25, 0.75, 1);
         transform: scale3d(1.25, 0.75, 1);
     }

     40% {
         -webkit-transform: scale3d(0.75, 1.25, 1);
         transform: scale3d(0.75, 1.25, 1);
     }

     50% {
         -webkit-transform: scale3d(1.15, 0.85, 1);
         transform: scale3d(1.15, 0.85, 1);
     }

     65% {
         -webkit-transform: scale3d(0.95, 1.05, 1);
         transform: scale3d(0.95, 1.05, 1);
     }

     75% {
         -webkit-transform: scale3d(1.05, 0.95, 1);
         transform: scale3d(1.05, 0.95, 1);
     }

     100% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
     }
 }

 .pxs_LandingFooter_social li a::before {
     position: absolute;
     content: "";
     height: calc(100% + 16px);
     width: calc(100% + 16px);
     /* top: -10px; */
     /* left: -10px; */
     border-radius: 50%;
     border: 2px solid #8484a459;
     animation: 1.5s linear infinite focuse;
 }

 .pxs_LandingFooter_social li a::after {
     position: absolute;
     top: 50%;
     left: 100%;
     height: 2px;
     content: "";
     width: 100%;
     background: url("/images/landing/line.png");
     z-index: 0;
     animation: 1s linear infinite slide;
     opacity: 0.3;
 }

 .pxs_LandingFooter_social li:last-child a::after {
     display: none;
 }

 @keyframes slide {
     from {
         background-position: 0 0;
     }

     to {
         background-position: 40px 0;
     }
 }

 @keyframes focuse {
     0% {
         transform: scale(0.8);
         opacity: 1;
     }

     75% {
         transform: scale(1.2);
         opacity: 0;
     }

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

 .pxs_Landing_Newsletter {
     text-align: center;
     max-width: 570px;
     margin: 20px auto 20px;
 }

 .pxs_Landing_Newsletter h4 {
     font-size: 24px;
     font-weight: 600;
     color: #ffffff;
 }

 .pxs_Landing_Newsletter p {
     margin: 5px 0 25px;
     font-size: 20px;
     color: var(--pxs-white-color);
 }

 .pxs_Landing_Newsletter .pxs_main_input input::placeholder {
     color: #717a77;
     opacity: 1;
 }

 .pxs_Landing_Newsletter .pxs_main_input input {
     background: #ffffff;
     border: none;
     color: #000000;
     width: 100%;
     border-radius: 60px;
     min-height: 50px;
     padding: 0 185px 0 30px;
     font-size: 16px;
     font-weight: 500;
 }

 .pxs_main_input {
     position: relative;
     width: 100%;
 }

 .pxs_Landing_Newsletter .pxs_main_input .btn-primary {
     position: absolute;
     right: 0;
     bottom: 0;
     top: 0;
     min-width: 170px;
     border-radius: 60px;
 }

 .pxs_btn {
     border-radius: 6px;
     color: #ffffff;
     background-color: var(--primary-color);
     padding: 14px 12px;
     min-width: 130px;
     overflow: hidden;
     position: relative;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
     text-transform: capitalize;
     border: 1px solid var(--pxs-primary-color);
     background-image: linear-gradient(30deg, var(--pxs-primary-color) 50%, transparent 50%);
     background-size: 400%;
     background-repeat: no-repeat;
     background-position: 0;
     transition: all 0.3s ease-in-out;
     box-shadow: -7px 11px 21.7px #21cc994d;
 }

 .pxs_Landing_Newsletter .pxs_main_input .pxs_btn {
     position: absolute;
     right: 0;
     min-width: 170px;
     border-radius: 60px;
 }

 .pxs_LandingFooter_box {
     border-radius: 40px;
     background: #13221c;
     border: 1px solid #2c463c;
     padding: 70px 110px;
 }

 .pxs_LandingFooter_menu h6,
 .pxs_LandingFooter_menu ul li a,
 .pxs_LandingFooter_menu ul li span,
 .pxs_LandingCopy_txt p {
     color: #ffffff;
     font-size: 15px;
     font-weight: 400;
 }

 .pxs_LandingFooter_menu ul {
     margin-top: 30px;
 }

 .pxs_LandingFooter_menu ul li {
     margin-bottom: 20px;
 }

 .pxs_LandingFooter_menu ul li:last-child {
     margin-bottom: 0;
 }

 .pxs_LandingFooter_menu ul li a {
     position: relative;
 }

 .pxs_LandingFooter_menu ul li a:hover {
     padding-left: 20px;
     color: var(--pxs-primary-color);
 }

 .pxs_LandingFooter_menu ul li a::before {
     content: "";
     position: absolute;
     left: 0;
     top: 50%;
     width: 0;
     height: 2px;
     background-color: var(--pxs-primary-color);
     transform: translateY(-50%);
 }

 .pxs_LandingFooter_menu ul li a:hover::before {
     width: 10px;
 }

 .pxs_Landing_copyright {
     padding: 25px 0;
 }

 .pxs_LandingTool_content,
 .pxs_LandingEditTool_img,
 .pxs_LandingEditTool_text {
     display: none;
 }

 .pxs_LandingFooter_social li a::after {
     background: url(./images/landing/line.png);
 }

 .pxs_Landing_copyright {
     border-top: 1px solid #ffffff21;
     margin-top: 35px;
 }

 .pxs_LandingCopy_txt {
     justify-content: space-between;
     display: flex;
     gap: 15px 25px;
     align-items: center;
 }

 .pxs_LandingCopy_txt p {
     position: relative;
 }

 .pxs_LandingCopy_txt ul {
     display: flex;
     gap: 10px;
     align-items: center;
     justify-self: center;
     flex-wrap: wrap;
     justify-content: center;
 }

 .pxs_LandingCopy_txt ul li {
     list-style: inside;
     color: #ffffff;
     padding-left: 10px;
 }

 .pxs_LandingCopy_txt ul li:first-child {
     list-style: none;
     padding-left: 0;
 }

 .pxs_LandingCopy_txt ul li a {
     color: #ffffff;
     text-decoration: none;
 }

 .pxs_LandingCopy_txt ul li a:hover {
     color: var(--pxs-primary-color);
 }

 ul.pxs_LandingFooter_social {
     padding: 0;
     margin: 0;
     list-style-type: none;
 }




 /* ---------------------------------------------------------------- */
 /* FOOTER                                                            */
 /* ---------------------------------------------------------------- */
 .gk-footer {
     position: relative;
     background: radial-gradient(circle at 88% 6%, rgba(236, 72, 153, 0.20), transparent 30%), radial-gradient(circle at 6% 90%, rgba(59, 130, 246, 0.18), transparent 32%), radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.14), transparent 45%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
 }

 .gk-inner {
     position: relative;
     z-index: 2;
     padding: 56px 40px 0;
 }

 /* decorative layer */
 .gk-deco {
     position: absolute;
     inset: 0;
     z-index: 1;
     pointer-events: none;
     overflow: hidden;
 }

 .gk-dotgrid {
     position: absolute;
     width: 110px;
     height: 90px;
     background-image: radial-gradient(rgba(196, 181, 253, 0.35) 1.6px, transparent 1.6px);
     background-size: 16px 16px;
 }

 .gk-dotgrid.top-right {
     top: 36px;
     right: 60px;
 }

 .gk-dotgrid.bottom-left {
     bottom: 120px;
     left: 70px;
     width: 90px;
     height: 70px;
     opacity: 0.7;
 }

 .gk-banner .gk-dotgrid.bottom-left {
     bottom: 120px;
     left: 30%;
     width: 90px;
     height: 70px;
     opacity: 0.8;
 }

 .gk-banner .gk-dotgrid.top-right {
     top: 136px;
     left: 60px;
 }

 .gk-sparkle {
     position: absolute;
     color: #c4b5fd;
     filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.7));
 }

 .gk-plane-wrap {
     position: absolute;
     left: 190px;
     bottom: 150px;
     width: 260px;
     height: 220px;
 }

 .gk-plane-wrap svg {
     width: 100%;
     height: 100%;
     overflow: visible;
 }

 .gk-trail {
     fill: none;
     stroke: #a78bfa;
     stroke-width: 2;
     stroke-dasharray: 5 7;
     stroke-linecap: round;
     opacity: 0.55;
 }

 /* ---- logo lockup ---- */
 .gk-brand {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .gk-brand-row {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .gk-icon {
     width: 76px;
     height: 76px;
     border-radius: 20px;
     background: linear-gradient(155deg, #f97316, #ec4899 45%, #8b5cf6 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 12px 30px -8px rgba(236, 72, 153, 0.55);
     flex: none;
 }

 .gk-icon svg {
     width: 44px;
     height: 44px;
 }

 .gk-wordmark {
     text-align: left;
     position: relative;
 }

 .gk-wordmark h1 {
     font-family: var(--font-head);
     font-weight: 800;
     font-size: 44px;
     color: #fff;
     margin: 0;
     line-height: 1;
     letter-spacing: -0.01em;
 }

 .gk-wordmark h1 .iq {
     background: linear-gradient(96deg, #f472b6 0%, #a78bfa 60%, #818cf8 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .gk-kids-badge {
     position: absolute;
     top: -14px;
     right: -58px;
     font-family: var(--font-head);
     font-weight: 700;
     font-size: 14px;
     color: #fff;
     padding: 3px 12px;
     border-radius: 999px;
     background: linear-gradient(96deg, #ec4899, #8b5cf6);
     transform: rotate(6deg);
     box-shadow: 0 4px 14px -2px rgba(236, 72, 153, 0.6);
 }

 .gk-tagline {
     font-family: var(--font-body);
     font-size: 13.5px;
     font-weight: 500;
     letter-spacing: 0.06em;
     color: rgba(255, 255, 255, 0.55);
     margin-top: 2px;
 }

 /* ---- eyebrow pill ---- */
 .gk-pill {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     margin-top: 26px;
     padding: 10px 22px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.14);
     background: rgba(255, 255, 255, 0.03);
     font-size: 14.5px;
     color: rgba(255, 255, 255, 0.85);
 }

 .gk-pill svg {
     width: 15px;
     height: 15px;
     flex: none;
     color: #facc15;
 }

 /* ---- social icons ---- */
 .gk-social {
     display: flex;
     gap: 16px;
     margin-top: 28px;
 }

 .gk-social a {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     border: 1.5px solid rgba(255, 255, 255, 0.14);
     transition: transform 0.2s ease;
 }

 .gk-social a:hover {
     transform: translateY(-3px);
 }

 .gk-social svg {
     width: 20px;
     height: 20px;
 }

 .gk-social .fb {
     background: #1877f2;
     border-color: #1877f2;
 }

 .gk-social .x {
     background: #0b0b0f;
 }

 .gk-social .yt {
     background: #ff0000;
     border-color: #ff0000;
 }

 .gk-social .li {
     background: #0a66c2;
     border-color: #0a66c2;
 }

 .gk-social .ig {
     background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 60%, #285AEB 90%);
 }

 /* ---- newsletter ---- */
 .gk-newsletter {
     margin-top: 12px;
     text-align: center;
 }

 .gk-nl-head {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 14px;
 }

 .gk-envelope {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     /* background: linear-gradient(135deg, #a78bfa, #8b5cf6); */
     display: flex;
     align-items: center;
     justify-content: center;
     flex: none;
     border: 1px solid #414468;
     background: rgb(27 36 169 / 31%);
 }

 .gk-envelope svg {
     width: 18px;
     height: 18px;
     color: #fff;
 }

 .gk-newsletter h2 {
     font-family: var(--font-head);
     font-weight: 700;
     font-size: 32px;
     color: #fff;
     margin: 0;
 }

 .gk-newsletter h2 span {
     background: linear-gradient(96deg, #f472b6, #a78bfa);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .gk-newsletter p {
     margin: 10px 0 0;
     font-size: 15px;
     color: rgba(255, 255, 255, 0.55);
 }

 .gk-form {
     display: flex;
     align-items: center;
     max-width: 600px;
     margin: 26px auto 0;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.14);
     padding: 6px;
     gap: 6px;
 }

 .gk-form-input {
     flex: 1;
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 0 8px 0 14px;
 }

 .gk-form-msg {
     height: 20px;
 }

 .gk-form-input svg {
     width: 17px;
     height: 17px;
     color: #a78bfa;
     flex: none;
 }

 .gk-form-input input {
     flex: 1;
     border: none;
     outline: none;
     background: transparent;
     color: #fff;
     font-size: 15px;
     padding: 12px 0;
     font-family: var(--font-body);
 }

 .gk-form-input input::placeholder {
     color: rgba(255, 255, 255, 0.4);
 }

 .gk-subscribe-btn {
     display: flex;
     align-items: center;
     gap: 8px;
     border: none;
     cursor: pointer;
     padding: 13px 24px;
     border-radius: 999px;
     background: linear-gradient(96deg, #ec4899, #8b5cf6);
     color: #fff;
     font-family: var(--font-head);
     font-weight: 700;
     font-size: 15px;
     white-space: nowrap;
     transition: opacity 0.2s ease;
 }

 .gk-subscribe-btn:hover {
     opacity: 0.9;
 }

 .gk-subscribe-btn svg {
     width: 16px;
     height: 16px;
 }

 .gk-privacy {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     margin-top: 16px;
     font-size: 13px;
     color: rgba(255, 255, 255, 0.45);
 }

 .gk-privacy svg {
     width: 13px;
     height: 13px;
     color: #a78bfa;
     flex: none;
 }

 /* ---- bottom bar ---- */
 .gk-bottom {
     position: relative;
     z-index: 2;
     margin-top: 46px;
     border-top: 1px solid var(--border);
     padding: 26px 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap;
 }

 .gk-copy {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .gk-shield {
     width: 38px;
     height: 38px;
     border-radius: 11px;
     background: rgba(139, 92, 246, 0.16);
     border: 1px solid rgba(139, 92, 246, 0.4);
     display: flex;
     align-items: center;
     justify-content: center;
     flex: none;
 }

 .gk-shield svg {
     width: 18px;
     height: 18px;
     color: #a78bfa;
 }

 .gk-copy-text p {
     margin: 0;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.85);
 }

 .gk-copy-text span {
     font-size: 12.5px;
     color: rgba(255, 255, 255, 0.45);
 }

 .gk-links {
     display: flex;
     align-items: center;
     gap: 26px;
     flex-wrap: wrap;
 }

 .gk-links a {
     display: flex;
     align-items: center;
     gap: 7px;
     color: rgba(255, 255, 255, 0.75);
     text-decoration: none;
     font-size: 14px;
     transition: color 0.2s ease;
 }

 .gk-links a:hover {
     color: #c4b5fd;
 }

 .gk-links svg {
     width: 15px;
     height: 15px;
     color: #a78bfa;
     flex: none;
 }

 .gk-madewith {
     padding: 10px 16px;
     border-radius: 14px;
     background: rgba(139, 92, 246, 0.12);
     border: 1px solid rgba(139, 92, 246, 0.35);
     font-size: 13px;
     line-height: 1.4;
     color: rgba(255, 255, 255, 0.85);
     text-align: center;
 }

 .gk-madewith b {
     color: #f472b6;
 }

 .showcase-mob-container .container {
     max-width: 1620px;
     margin: 0 auto;
 }

 .showcase-images1 {
     max-width: 900px;
     width: 100%;
 }

 .showcase-images img {
     width: 100%;
     height: auto;
 }

 /* ---------------------------------------------------------------- */
 /* RESPONSIVE                                                        */
 /* ---------------------------------------------------------------- */

 @media (max-width:1100px) {

     .gk-plane-wrap,
     .gk-dotgrid {
         display: none;
     }
 }

 @media (max-width: 900px) {

     .gk-plane-wrap,
     .gk-dotgrid {
         display: none;
     }

     .gk-bottom {
         justify-content: center;
         text-align: center;
     }

     .gk-links {
         justify-content: center;
     }
 }



 @media (max-width: 640px) {
     .gk-inner {
         padding: 40px 5px 0;
     }

     .gk-wordmark h1 {
         font-size: 34px;
     }

     .gk-icon {
         width: 60px;
         height: 60px;
         border-radius: 16px;
     }

     .gk-icon svg {
         width: 34px;
         height: 34px;
     }

     .gk-kids-badge {
         right: -40px;
         top: -10px;
         font-size: 12px;
     }

     .gk-newsletter h2 {
         font-size: 24px;
     }

     .gk-form {
         flex-direction: column;
         border-radius: 20px;
         padding: 10px;
     }

     .gk-form-input {
         width: 100%;
         padding: 6px 10px;
     }

     .gk-subscribe-btn {
         width: 100%;
         justify-content: center;
     }

     .gk-bottom {
         padding: 22px 20px;
         flex-direction: column;
     }
 }



 /* ── Responsive ── */

 @media (max-width: 1800px) {
     .hero-main-img {
         max-width: 900px !important;
     }

     .hero-main-img img {
         width: 100%;
         height: 100%;
     }
 }


 @media (max-width: 1600px) {
     .hero {
         position: relative;
         background: linear-gradient(135deg, #f0f2ff 0%, #fdf6ff 60%, #f5f0ff 100%);
         overflow: hidden;
         padding: 80px 40px 110px;
         min-height: 100%;
         height: 100%;
         background: url(../images/banner-bg.jpg);
         background-repeat: no-repeat;
         background-position: 100%;
         background-size: cover;
     }


     .hero-rightanimation3 {
         max-width: 165px;
     }

     .stats-bar {
         border-radius: 20px;
         padding: 10px 10px;
         margin-top: 25px;
         width: 100%;
         max-width: 100%;
         position: relative;
         gap: 10px;
         bottom: 0;
     }

     .stat-card {
         padding: 12px 12px;
         gap: 10px;
     }

     .badge {
         margin-bottom: 10px;
     }

     .hero-title {
         font-size: 54px;
         line-height: 56px;
         margin-bottom: 10px;
     }

     .hero-desc {
         font-size: 19px;
         line-height: 26px;
         color: var(--text-gray);
         max-width: 480px;
         margin-bottom: 24px;
     }




 }

 @media (max-width: 1400px) {
     .hero-rightanimation3 {
         display: none;
     }

     .cta-section {
         padding: 60px;
     }

     .gk-plane-wrap {
         position: absolute;
         left: 127px;
         bottom: 230px;
         width: 172px;
         height: 156px;
     }

     .hero::after {

         background: radial-gradient(circle, rgb(157 10 244 / 9%) 0%, transparent 70%);
         left: -20%;

     }


 }

 @media (max-width: 1200px) {
     .hero-content {
         grid-template-columns: 1fr;
         gap: 30px;
         margin-top: 80px;
     }

     .gk-navbar {
         height: 74px;
     }

     .hero {
         text-align: center;
         padding: 50px 40px 70px;
     }

     .hero-desc {
         margin: 0 auto 20px;
     }

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

     .stats-bar {
         margin: auto;
     }

     .hero-main-img {
         max-width: 724px !important;
         margin: auto;
     }

     .card-stats {
         display: grid;
         grid-template-columns: 1fr;
     }

     .elite-title {
         font-size: 42px;
         line-height: 40px;
     }

     .elite-number h2 {
         font-size: 70px;
         line-height: 58px;
     }

     .elite-number-label {
         font-size: 26px;
         margin-top: 0px;
         margin-bottom: 20px;
     }

     .flex-card {
         flex-direction: column;
         gap: 10px;
     }

     .icon-box {
         margin-bottom: 0px;
     }

     .pe-80 {
         padding-right: 0px !important;
     }

     .card {
         padding: 25px;
         gap: 24px;
     }

     .pill {
         gap: 5px;
         padding: 5px 12px;
         font-size: 13px;
     }

     .header {
         text-align: center;
         margin-bottom: 35px;
     }

     .showcase-section {
         padding: 40px 0px 60px;
         background-position: 100% 100%;
         background-size: cover;
     }

     .slider-section {
         margin-top: 0px;
         /* padding: 10px 0px 40px; */
     }

     .feature-imgage-box-right-img {
         max-width: 135px;
     }

     /* .feature-imgage-box-right-img img {
         width: 100%;
     } */

     .feature-imgage-box-left-img {
         max-width: 135px;
     }

     .feature-imgage-box-left-img img {
         width: 100%;
     }

     .feature-imgage-boxes::before {
         display: none;
     }

     .hero_logo {
         margin: 0 0 0 15px;
         max-width: 148px;
     }

     .hero_logo svg {
         width: 170px;
     }

     .hero-title {
         font-size: 46px;
         line-height: 50px;
     }

     .badge {
         margin-top: 0px;
         font-size: 14px;
         letter-spacing: 1px;
     }

     .elite-sub-box {
         padding: 12px 34px;
         font-size: 22px;
     }

     .hero-rightanimation1 {
         max-width: 140px;
     }

     .hero-rightanimation2 {
         max-width: 140px;
     }

     .feature-card,
     .feature-card.reverse {
         grid-template-columns: 1fr;
     }

     .feature-card {
         padding: 40px;
         gap: 15px;
     }

     .qiq-order-1 {
         order: 1;
     }

     .qiq-order-2 {
         order: 2;
     }

     .sp_hasH_tag {
         font-size: 100px;
     }

     .showcase-images-side {
         display: none;
     }

 }





 /* ── RESPONSIVE ─────────────────────────────────────────────── */
 @media (max-width: 900px) {
     .hero {
         padding: 40px 15px 60px;
     }

     .dark-section,
     .showcase-section,
     .elite-section,
     .cta-section {
         padding: 40px 24px;
     }

     .feature-card,
     .feature-card.reverse {
         grid-template-columns: 1fr;
     }

     .section-title {
         font-size: 30px;
     }

     .header {
         text-align: center;
         margin-bottom: 30px;
     }

     .feature-card {
         padding: 25px 30px;
         gap: 10px;
     }

     .feature-title {
         font-size: 25px;
         margin-bottom: 12px;
     }

     .feature-desc {
         font-size: 16px;
     }

     .feature-num {
         padding: 7px 16px;
         background: rgb(87 96 233 / 20%);
         font-size: 14px;
         margin-bottom: 20px;
     }

     .fs_option_div {
         margin-bottom: 20px;
     }

     .elite-number-label {
         font-size: 24px;
         margin-top: 1px;
         margin-bottom: 18px;
     }

     .headline {
         margin-bottom: 10px;
         font-size: 44px;
         line-height: 46px;
     }

     .subtitle {
         max-width: 620px;
         font-size: 17px;
         line-height: 23px;
     }

     .elite-image {
         max-width: 200px;
         margin: auto;
     }

     .elite-image img {
         width: 100%;
     }

     .card-stats {
         gap: 15px;
     }

     .stat-number {
         font-size: 36px;
         line-height: 1;
     }

     .stat-item-img {
         width: 65px;
         height: 65px;
         margin: 0 auto 10px;
     }

     .stats-right {
         display: flex;
         gap: 15px;
     }

     .showcase-title {
         font-size: 30px;
         margin: 0 auto 20px;
         line-height: 34px;
     }

     .showcase-images1 {
         max-width: 600px;
     }

     .gk-nav-actions {
         gap: 6px;
     }

     .gk-navbar {
         height: 76px;
     }


 }

 @media (max-width: 860px) {

     .grid-top,
     .grid-mid {
         grid-template-columns: 1fr;
     }

     .grid-mid .card:last-child {
         grid-column: 1 / -1;
     }

     .card-stats {
         grid-template-columns: 1fr;
     }

     .stats-right {
         justify-content: center;
     }
 }

 @media (max-width: 710px) {
     .hero {
         padding: 30px 5px 40px;
         text-align: center;
         background-position: center;
         background-size: contain;
     }

     .elite-number h2 {
         font-size: 60px;
         line-height: 58px;
     }

     .hero-title {
         font-size: 45px;
         line-height: 50px;
         margin-bottom: 10px;
     }

     .scene {
         padding: 40px 24px 40px;
     }

     .footer-pill-img {
         width: 60px;
         height: 60px;
     }

     .footer-pills {
         padding: 0px;
         gap: 8px;
         margin-top: 0px;
         flex-direction: column;
     }


     .footer-pill {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         /* justify-content: center; */
         max-width: 230px;
         width: 100%;
         margin: auto;

     }

     .footer-pill-text {
         font-size: 14px;
         font-weight: 600;
     }

     .footer-pill-text span {
         font-size: 12px;
     }

     .elite-image {
         max-width: 180px;
         margin: auto;
     }

     .feature-imgage-box-main-img {
         max-width: 300px;
     }

     .feature-imgage-box-main-img img {
         width: 100%;
     }

     .stats-right {
         gap: 35px;
         flex-wrap: wrap;
     }

     .stat-divider {
         display: none;
     }

     .elite-title {
         font-size: 36px;
         line-height: 40px;
     }

     .stats-bar {
         /* flex-direction: column; */
         gap: 8px;
         margin: auto;
         padding: 8px;
     }

     .stat-card {
         display: grid;
         justify-content: center;
         padding: 8px;
     }

     .stat-icon {
         margin: auto;
     }

     .stat-value {
         font-size: 23px;
         font-weight: 700;
     }

     .hero .stat-label {
         font-size: 14px;
     }

     .card-title {
         font-size: 21px;
         margin-bottom: 10px;
     }

     .card-desc {
         font-size: 15px;
         margin-bottom: 10px;
         line-height: 23px;
     }

     .icon-box {
         width: 80px;
         height: 80px;
         margin-bottom: 12px;
         padding: 4px;
     }

     .card-small .card-desc {
         line-height: 23px;
     }

     .card-small .icon-box {
         margin-bottom: 5px;
     }

     .elite-sub-box {
         padding: 10px 10px;
         font-size: 14px;
         line-height: 24px;
     }

     .elite-section {
         padding: 40px 5px;
     }

     .hero-rightanimation1 {
         max-width: 100px;
     }

     .hero-rightanimation2 {
         max-width: 100px;
     }

     .pxs_LandingCopy_txt {
         justify-content: center;
         display: flex;
         flex-wrap: wrap;
         gap: 15px 25px;
         align-items: center;
     }

     .footer-pill-img svg {
         width: 50px;
         height: 50px;
     }

     .feature-imgage-box-left-img {
         top: 75px;
         right: -80px;
     }

     .feature-card {
         padding: 20px 20px;
     }

     .pxs_LandingFooter_logo a img {
         max-height: 75px;
     }

     .sp_hasH_tag {
         font-size: 82px;
     }

 }

 @media (max-width: 560px) {

     .hero-rightanimation1 {
         max-width: 85px;
     }

     .hero-rightanimation2 {
         max-width: 85px;
     }

     .hero-rightanimation1 {
         bottom: 60px;
         left: 70px;
     }

     .hero-rightanimation2 {
         top: 17px;
         right: 20px;
     }

     .grid-top,
     .grid-mid {
         grid-template-columns: 1fr;
     }

     .grid-mid .card:last-child {
         grid-column: auto;
     }

     .stat-number {
         font-size: 32px;
     }

     .flex-card {
         display: grid;
         gap: 10px;
         margin-bottom: 10px;
     }

     .icon-box {
         margin-bottom: 5px;
     }

     .headline {
         margin-bottom: 10px;
         font-size: 36px;
         line-height: 38px;
     }

     .footer-pill-img {
         width: 50px;
         height: 50px;
     }

     .footer-pill-img svg {
         width: 45px;
         height: 45px;
     }

     .stats-bar {
         /* flex-direction: column; */
         gap: 4px;
         margin: auto;
         padding: 4px;
     }

     .stat-card {
         display: grid;
         justify-content: center;
         padding: 10px 5px;
         gap: 6px;
     }

     .hero-title {
         font-size: 40px;
         line-height: 43px;
         margin-bottom: 10px;
     }

     .hero-desc {
         font-size: 16px;
         line-height: 26px;
         color: var(--text-gray);
         max-width: 480px;
         margin-bottom: 24px;
     }

     .hero .stat-label {
         font-size: 12px;
     }

     .stat-value {
         font-size: 20px;
         font-weight: 700;
     }

     .feature-title {
         font-size: 22px;
         margin-bottom: 12px;
     }

     .elite-title {
         font-size: 34px;
         line-height: 40px;
     }

     .elite-image {
         max-width: 150px;
         margin: auto;
     }

     .btn-link img {
         height: 50px;
     }


     element.style {
         text-decoration: none;
         cursor: pointer;
     }

     .btn-secondary {
         padding: 15px 15px;
         height: 50px;
         font-size: 16px;
         gap: 5px;
     }

     .btn-secondary svg {
         display: none;
     }

     .pxs_Landing_copyright {
         margin-top: 5px;
     }

     .gk-inner {
         padding: 15px 0px 0;
     }
   
  


 }

 @media (max-width: 420px) {
     .pxs_powered_txt h6 {
         padding: 8px 16px;
         font-size: 14px;
         margin-bottom: 20px;
         margin-top: 15px;
     }

     .gk-newsletter {
         margin-top: 0px;
     }
 }

 /* ── NAVBAR ──────────────────────────────────────────────── */
 #hero,
 #why-us,
 #features,
 #showcase,
 #contact {
     scroll-margin-top: 84px;
 }

 .gk-navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     height: 90px;
     display: flex;
     align-items: center;
     background: transparent;
     border-bottom: 1px solid transparent;
     box-shadow: none;
     transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, backdrop-filter .3s ease;
 }

 .gk-navbar.gk-nav-scrolled {
     background: rgba(248, 247, 255, 0.80);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--border);
     box-shadow: 0 2px 20px rgba(124, 58, 237, 0.06);
 }

 @media (max-width: 992px) {

     .gk-navbar.gk-nav-open {
         background: rgba(248, 247, 255, 0.85);
         backdrop-filter: blur(12px);
         -webkit-backdrop-filter: blur(12px);
         border-bottom: 1px solid var(--border);
         box-shadow: 0 2px 20px rgba(124, 58, 237, 0.06);
     }
 }

 .gk-nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     width: 100%;
 }

 .gk-nav-logo {
     display: flex;
     align-items: center;
     flex-shrink: 0;
 }

 .gk-nav-logo img {
     height: 42px;
     width: auto;
     display: block;
 }

 .gk-nav-links {
     display: flex;
     align-items: center;
     gap: 8px;
     margin: 0 auto;
 }

 .gk-nav-link {
     font-family: var(--font-body);
     font-size: 16px;
     font-weight: 600;
     color: var(--text-dark, #30183f);
     text-decoration: none;
     padding: 8px 16px;
     border-radius: 999px;
     transition: background .2s ease, color .2s ease;
     white-space: nowrap;
 }

 .gk-nav-link:hover {
     background: rgba(124, 58, 237, 0.08);
     color: var(--purple);
 }

 .gk-nav-link.active {
     background: rgba(124, 58, 237, 0.12);
     color: var(--purple);
 }

 .gk-nav-actions {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
 }

 .gk-nav-download {
     display: flex;
     gap: 8px;
     align-items: center;
     justify-content: center;
     font-family: var(--font-body);
     font-size: 17px;
     font-weight: 600;
     color: #fff;
     /* background: linear-gradient(135deg, var(--purple), var(--purple-light)); */
     background: linear-gradient(96deg, #ec4899, #8b5cf6);
     padding: 11px 22px;
     border-radius: 999px;
     text-decoration: none;
     white-space: nowrap;
     box-shadow: 0 6px 18px rgba(124, 58, 237, 0.28);
     transition: transform .15s ease, box-shadow .15s ease;
 }

 .gk-nav-download:hover {
     transform: translateY(-1px);
     box-shadow: 0 10px 22px rgba(124, 58, 237, 0.35);
 }

 .gk-nav-toggle {
     display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 5px;
     width: 40px;
     height: 40px;
     border: none;
     background: transparent;
     cursor: pointer;
     padding: 0;
     flex-shrink: 0;
 }

 .gk-nav-toggle span {
     display: block;
     width: 22px;
     height: 2px;
     background: var(--purple);
     border-radius: 2px;
     transition: transform .25s ease, opacity .25s ease;
 }

 .gk-navbar.gk-nav-open .gk-nav-toggle span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 .gk-navbar.gk-nav-open .gk-nav-toggle span:nth-child(2) {
     opacity: 0;
 }

 .gk-navbar.gk-nav-open .gk-nav-toggle span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 @media (max-width: 992px) {
     .gk-nav-links {
         position: fixed;
         top: 80px;
         left: 0;
         right: 0;
         flex-direction: column;
         align-items: stretch;
         gap: 4px;
         background: #fdfcff;
         padding: 14px 20px 20px;
         margin: 0;
         border-bottom: 1px solid var(--border);
         box-shadow: 0 12px 24px rgba(124, 58, 237, 0.1);
         transform: translateY(-8px);
         opacity: 0;
         visibility: hidden;
         pointer-events: none;
         transition: transform .2s ease, opacity .2s ease;
     }

     .gk-navbar.gk-nav-open .gk-nav-links {
         transform: translateY(0);
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
     }

     .gk-nav-link {
         padding: 12px 14px;
         border-radius: 12px;
     }

     .gk-nav-toggle {
         display: flex;
     }

     .gk-nav-download {
         padding: 9px 12px;
         font-size: 14px;
         gap: 4px;
         font-weight: 500;
     }

     .gk-nav-download svg {
         width: 16px;
         height: 16px;
     }
      .gk-navbar {
    height: 70px;
}
 }

 @media (max-width: 480px) {
     .gk-nav-logo img {
         height: 34px;
     }

     .gk-nav-download {
         padding: 8px 12px;
         font-size: 12px;
     }
 }

 /* ── FOOTER STORE BUTTONS ──────────────────────────────────── */
 .gk-store-btns {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 14px;
     margin-top: 22px;
 }

 .gk-store-btn {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 10px 14px;
     border-radius: 999px;
     text-decoration: none;
     flex: 1 1 220px;
     min-width: 220px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
     transition: transform .18s ease, box-shadow .18s ease;
     max-width: 240px;
     text-align: start;
     border: 1.5px solid;
 }

 .gk-store-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
 }

 .gk-store-btn-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.18);
     flex-shrink: 0;
     color: #fff;
 }

 .gk-store-btn-icon svg {
     width: 18px;
     height: 18px;
 }

 .gk-store-btn-text {
     display: flex;
     flex-direction: column;
     line-height: 1.25;
     flex: 1;
 }

 .gk-store-btn-text em {
     font-style: normal;
     font-family: var(--font-body);
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: .06em;
     color: rgba(255, 255, 255, 0.85);
 }

 .gk-store-btn-text strong {
     font-family: var(--font-head);
     font-size: 16px;
     font-weight: 700;
     color: #fff;
 }

 .gk-store-btn-arrow {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.22);
     color: #fff;
     flex-shrink: 0;
 }

 .gk-store-btn-arrow svg {
     width: 16px;
     height: 16px;
 }

 /* .gk-store-btn-play {
     background: linear-gradient(135deg, #0b8f5f 0%, #063f2c 100%);
 } */

 .gk-store-btn-web {
     background: linear-gradient(135deg, var(--violet-2, #a855f7) 0%, var(--pink) 100%);
 }

 @media (max-width: 480px) {
   

     .gk-store-btn {
         min-width: 0;
     }
   
    .gk-store-btns {
         margin-top: 10px;
         margin-bottom: 15px;
     }
   
   
 }