/* ── RESET & BASE ── */
 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Inter', sans-serif;
     color: #1a1a2e;
     background: #fff;
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5 {
     font-family: 'Poppins', sans-serif;
 }

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

 img {
     max-width: 100%;
     display: block;
 }

 ul {
     list-style: none;
 }

 /* ── CSS VARIABLES ── */
 :root {
     --blue: #0a3d91;
     --blue2: #1258c4;
     --blue3: #062a6b;
     --gold: #38bdf8;
     --green: #27ae60;
     --red: #e63946;
     --text: #1a1a2e;
     --text2: #4a5568;
     --text3: #718096;
     --bg: #ffffff;
     --bg2: #f7f9fc;
     --bg3: #eef2f9;
     --bd: #e2e8f0;
     --sh: 0 4px 24px rgba(10, 61, 145, .10);
     --sh2: 0 12px 48px rgba(10, 61, 145, .16);
     --r: 16px;
 }

 /* ── BUTTONS ── */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: .4rem;
     padding: 11px 24px;
     border-radius: 9px;
     font-family: 'Poppins', sans-serif;
     font-weight: 600;
     font-size: .875rem;
     cursor: pointer;
     transition: all .22s;
     border: none;
     line-height: 1;
 }

 .btn-blue {
     background: var(--blue);
     color: #fff;
 }

 .btn-blue:hover {
     background: var(--blue2);
     transform: translateY(-1px);
     box-shadow: 0 6px 20px rgba(10, 61, 145, .3);
 }

 .btn-gold {
     background: var(--gold);
     color: #fff;
 }

 .btn-gold:hover {
     background: #0ea5e9;
     transform: translateY(-1px);
     box-shadow: 0 6px 20px rgba(56, 189, 248, .4);
 }

 .btn-outline {
     background: transparent;
     border: 2px solid var(--blue);
     color: var(--blue);
 }

 .btn-outline:hover {
     background: var(--blue);
     color: #fff;
 }

 .btn-ghost {
     background: rgba(255, 255, 255, .14);
     color: #fff;
     border: 1.5px solid rgba(255, 255, 255, .38);
 }

 .btn-ghost:hover {
     background: rgba(255, 255, 255, .26);
 }

 .btn-lg {
     padding: 14px 34px;
     font-size: 1rem;
     border-radius: 11px;
 }

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

 /* ── SECTION COMMON ── */
 .sec {
     padding: 88px 6%;
 }

 .sec-label {
     display: block;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--blue);
     margin-bottom: .55rem;
 }

 .sec-h {
     font-family: 'Poppins', sans-serif;
     font-size: clamp(1.85rem, 3.2vw, 2.7rem);
     font-weight: 800;
     color: var(--text);
     line-height: 1.18;
     letter-spacing: -.02em;
     margin-bottom: .85rem;
 }

 .sec-h span {
     color: var(--blue);
 }

 .sec-p {
     color: var(--text2);
     line-height: 1.8;
     font-size: .96rem;
 }

 .bar {
     width: 52px;
     height: 4px;
     background: linear-gradient(90deg, var(--blue), var(--gold));
     border-radius: 2px;
     margin: 1rem 0 2rem;
 }

 .tc {
     text-align: center;
 }

 .tc .bar {
     margin: 1rem auto 2rem;
 }

 .tc .sec-p {
     max-width: 580px;
     margin: 0 auto;
 }

 .grid2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: center;
 }

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

 /* ── NAVBAR ── */
 .nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999;
     background: rgba(255, 255, 255, .97);
     backdrop-filter: blur(14px);
     border-bottom: 1px solid var(--bd);
     padding: 0 6%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 72px;
     box-shadow: 0 2px 14px rgba(10, 61, 145, .07);
 }

 .nav-logo {
     font-family: 'Poppins', sans-serif;
     font-weight: 900;
     font-size: 1.5rem;
     color: var(--blue);
     letter-spacing: -.02em;
 }

 .nav-logo span {
     color: var(--gold);
 }

 .nav-links {
     display: flex;
     gap: 1.75rem;
 }

 .nav-links a {
     color: var(--text2);
     font-size: .875rem;
     font-weight: 500;
     transition: color .2s;
 }

 .nav-links a:hover {
     color: var(--blue);
 }

 .nav-cta {
     display: flex;
     gap: .75rem;
 }

 /* ── HERO SLIDER ── */
 .hero {
     position: relative;
     height: 100vh;
     min-height: 620px;
     overflow: hidden;
     margin-top: 72px;
 }

 .slide {
     position: absolute;
     inset: 0;
     opacity: 0;
     transition: opacity .9s ease;
     pointer-events: none;
 }

 .slide.on {
     opacity: 1;
     pointer-events: auto;
 }

 .slide-bg {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
 }

 .s1 .slide-bg {
     background-image: linear-gradient(135deg, rgba(6, 42, 107, .91) 0%, rgba(18, 88, 196, .70) 55%, rgba(10, 61, 145, .48) 100%), url('https://images.unsplash.com/photo-1639762681485-074b7f938ba0?w=1600&q=80');
 }

 .s2 .slide-bg {
     background-image: linear-gradient(135deg, rgba(6, 42, 107, .88) 0%, rgba(39, 130, 100, .62) 55%, rgba(10, 61, 145, .48) 100%), url('https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=1600&q=80');
 }

 .slide-body {
     position: relative;
     z-index: 2;
     height: 100%;
     display: flex;
     align-items: center;
     padding: 0 8%;
 }

 .slide-inner {
     max-width: 680px;
 }

 .s-badge {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: rgba(255, 255, 255, .13);
     border: 1px solid rgba(255, 255, 255, .28);
     border-radius: 100px;
     padding: 6px 16px;
     font-size: .78rem;
     color: rgba(255, 255, 255, .92);
     margin-bottom: 1.25rem;
     backdrop-filter: blur(8px);
 }

 .slide-inner h1 {
     font-family: 'Poppins', sans-serif;
     font-size: clamp(2.6rem, 5.5vw, 4.4rem);
     font-weight: 900;
     color: #fff;
     line-height: 1.06;
     letter-spacing: -.035em;
     margin-bottom: 1.25rem;
 }

 .slide-inner h1 em {
     color: var(--gold);
     font-style: normal;
 }

 .slide-inner p {
     color: rgba(255, 255, 255, .84);
     font-size: 1.05rem;
     line-height: 1.78;
     margin-bottom: 2rem;
     max-width: 560px;
 }

 .slide-ctas {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .slider-arr {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
     display: flex;
     justify-content: space-between;
     padding: 0 1.5rem;
     z-index: 10;
     pointer-events: none;
 }

 .arr {
     pointer-events: all;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .14);
     border: 1px solid rgba(255, 255, 255, .3);
     color: #fff;
     font-size: 1.1rem;
     cursor: pointer;
     transition: all .2s;
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .arr:hover {
     background: rgba(255, 255, 255, .28);
 }

 .sdots {
     position: absolute;
     bottom: 1.75rem;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: .5rem;
     z-index: 10;
 }

 .sdot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .35);
     cursor: pointer;
     border: none;
     transition: all .3s;
 }

 .sdot.on {
     background: #fff;
     transform: scale(1.35);
 }

 /* ── TICKER ── */
 .ticker {
     background: var(--blue);
     padding: 10px 0;
     overflow: hidden;
 }

 .t-track {
     display: flex;
     animation: tick 36s linear infinite;
     white-space: nowrap;
 }

 .t-item {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     padding: 0 2.5rem;
     color: rgba(255, 255, 255, .88);
     font-size: .8rem;
     font-weight: 500;
 }

 .t-item strong {
     color: #fff;
 }

 .up {
     color: #4ade80;
 }

 .dn {
     color: #f87171;
 }

 @keyframes tick {
     from {
         transform: translateX(0)
     }

     to {
         transform: translateX(-50%)
     }
 }

 /* ── ABOUT SECTION ── */
 .about-sec {
     background: var(--bg2);
 }

 /* video thumbnail box — always visible */
 .vid-thumb {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: var(--sh2);
     cursor: pointer;
     display: block;
 }

 .vid-thumb .thumb-inner {
     width: 100%;
     aspect-ratio: 16/9;
     background: linear-gradient(135deg, #062a6b 0%, #1258c4 60%, #0a3d91 100%);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 260px;
 }

 .thumb-inner svg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
 }

 .vid-thumb .play-ring {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(6, 30, 80, .22);
     transition: background .25s;
 }

 .vid-thumb:hover .play-ring {
     background: rgba(6, 30, 80, .38);
 }

 .play-btn {
     width: 76px;
     height: 76px;
     border-radius: 50%;
     background: var(--gold);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.75rem;
     box-shadow: 0 0 0 14px rgba(56, 189, 248, .2), 0 8px 30px rgba(56, 189, 248, .5);
     transition: transform .25s;
     padding-left: 6px;
 }

 .vid-thumb:hover .play-btn {
     transform: scale(1.1);
 }

 .float-badge {
     position: absolute;
     bottom: -1.4rem;
     right: -1.4rem;
     background: #fff;
     border-radius: 14px;
     padding: .9rem 1.2rem;
     box-shadow: var(--sh2);
     display: flex;
     align-items: center;
     gap: .7rem;
     z-index: 3;
 }

 .float-badge .fb-icon {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: var(--blue);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.1rem;
     flex-shrink: 0;
 }

 .float-badge .fb-n {
     font-weight: 700;
     font-size: .86rem;
     color: var(--text);
 }

 .float-badge .fb-v {
     color: var(--green);
     font-size: .76rem;
     font-weight: 600;
 }

 .about-feats {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
     margin-top: 1.6rem;
 }

 .af {
     display: flex;
     align-items: flex-start;
     gap: .75rem;
 }

 .af-ico {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: var(--bg3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .95rem;
     flex-shrink: 0;
 }

 .af-t {
     font-weight: 600;
     font-size: .875rem;
     color: var(--text);
 }

 .af-d {
     color: var(--text3);
     font-size: .775rem;
     margin-top: .14rem;
     line-height: 1.5;
 }

 /* ── QFS CARD SECTION ── */
 .card-sec {
     background: #fff;
 }

 .card-visual {
     width: 100%;
     max-width: 400px;
     background: linear-gradient(135deg, #1a4fa0, #062a6b);
     border-radius: 22px;
     padding: 2.2rem;
     color: #fff;
     box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
     position: relative;
     overflow: hidden;
 }

 .card-visual::before {
     content: '';
     position: absolute;
     top: -60px;
     right: -60px;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .04);
 }

 .card-visual::after {
     content: '';
     position: absolute;
     bottom: -40px;
     left: -40px;
     width: 160px;
     height: 160px;
     border-radius: 50%;
     background: rgba(56, 189, 248, .06);
 }

 .cv-chip {
     width: 42px;
     height: 30px;
     background: linear-gradient(135deg, var(--gold), var(--blue3));
     border-radius: 6px;
     margin-bottom: 1.5rem;
 }

 .cv-num {
     font-family: 'Poppins', sans-serif;
     font-size: 1.05rem;
     letter-spacing: .14em;
     margin-bottom: 1.25rem;
     position: relative;
     z-index: 1;
 }

 .cv-bot {
     display: flex;
     justify-content: space-between;
     position: relative;
     z-index: 1;
 }

 .cv-bot .cl {
     font-size: .6rem;
     opacity: .5;
     text-transform: uppercase;
     letter-spacing: .08em;
 }

 .cv-bot .cv {
     font-size: .82rem;
     font-weight: 600;
     margin-top: .2rem;
 }

 .card-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
 }

 .card-caption {
     text-align: center;
     color: var(--text3);
     font-size: .8rem;
     margin-top: .5rem;
 }

 .steps-list {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }

 .step-item {
     display: flex;
     gap: 1.25rem;
     align-items: flex-start;
 }

 .step-num {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: var(--blue);
     color: #fff;
     font-family: 'Poppins', sans-serif;
     font-weight: 800;
     font-size: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: 0 4px 14px rgba(10, 61, 145, .25);
 }

 .step-h {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     margin-bottom: .3rem;
     font-size: .975rem;
 }

 .step-p {
     color: var(--text2);
     font-size: .875rem;
     line-height: 1.68;
 }

 /* ── FLARE NETWORK ── */
 .flare-sec {
     background: var(--bg2);
 }

 .flare-top {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: start;
     margin-bottom: 3rem;
 }

 .yt-ch-link {
     display: flex;
     align-items: center;
     gap: .85rem;
     background: #fff;
     border: 1px solid var(--bd);
     border-radius: 14px;
     padding: 1rem 1.25rem;
     box-shadow: var(--sh);
     transition: all .22s;
     margin-top: 1.25rem;
 }

 .yt-ch-link:hover {
     border-color: var(--blue);
     box-shadow: var(--sh2);
     transform: translateY(-2px);
 }

 .yt-ico {
     width: 46px;
     height: 46px;
     border-radius: 9px;
     background: #ff0000;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.1rem;
     flex-shrink: 0;
 }

 .yt-ch-name {
     font-weight: 700;
     font-size: .9rem;
     color: var(--text);
 }

 .yt-ch-sub {
     color: var(--text3);
     font-size: .76rem;
 }

 /* channel image placeholder */
 .ch-banner {
     width: 100%;
     border-radius: 14px;
     overflow: hidden;
     box-shadow: var(--sh);
     background: linear-gradient(135deg, #ff0000, #cc0000);
     padding: 1.5rem;
     display: flex;
     align-items: center;
     gap: 1rem;
     color: #fff;
     margin-top: 1rem;
 }

 .ch-banner-ico {
     width: 54px;
     height: 54px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .18);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     flex-shrink: 0;
 }

 .ch-banner-name {
     font-family: 'Poppins', sans-serif;
     font-weight: 800;
     font-size: 1.1rem;
 }

 .ch-banner-sub {
     font-size: .78rem;
     opacity: .82;
     margin-top: .2rem;
 }

 /* 4-video grid */
 .vids-label {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     font-size: 1.05rem;
     text-align: center;
     margin-bottom: 1.5rem;
     color: var(--text);
 }

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

 .yt-box {
     border-radius: 14px;
     overflow: hidden;
     aspect-ratio: 16/9;
     position: relative;
     box-shadow: var(--sh);
     background: #000;
 }

 .yt-box iframe {
     width: 100%;
     height: 100%;
     border: none;
     display: block;
 }

 /* yt placeholder visible card */
 .yt-ph {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, #0a1a3a, #0f3060);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: .7rem;
     text-align: center;
     padding: 1.25rem;
 }

 .yt-ph-play {
     width: 54px;
     height: 54px;
     border-radius: 50%;
     background: #ff0000;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.3rem;
     box-shadow: 0 4px 16px rgba(255, 0, 0, .4);
     padding-left: 4px;
     cursor: pointer;
     transition: transform .2s;
     flex-shrink: 0;
 }

 .yt-ph-play:hover {
     transform: scale(1.1);
 }

 .yt-ph strong {
     color: rgba(255, 255, 255, .9);
     font-size: .88rem;
     font-family: 'Poppins', sans-serif;
 }

 .yt-ph span {
     color: rgba(255, 255, 255, .55);
     font-size: .73rem;
 }

 .yt-ph code {
     color: rgba(255, 255, 255, .4);
     font-size: .68rem;
     background: rgba(255, 255, 255, .08);
     padding: 3px 8px;
     border-radius: 4px;
 }

 /* ── VIDEO BANNER SECTION (full-width background + big play btn) ── */
 .vid-banner {
     position: relative;
     background-image: linear-gradient(rgba(6, 30, 80, .78), rgba(6, 30, 80, .78)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     padding: 90px 6%;
     text-align: center;
 }

 .vid-banner h2 {
     font-family: 'Poppins', sans-serif;
     font-size: clamp(1.9rem, 3.5vw, 2.9rem);
     font-weight: 800;
     color: #fff;
     margin-bottom: .75rem;
 }

 .vid-banner p {
     color: rgba(255, 255, 255, .75);
     font-size: 1rem;
     margin-bottom: 2rem;
     max-width: 540px;
     margin-left: auto;
     margin-right: auto;
 }

 .big-play {
     width: 88px;
     height: 88px;
     border-radius: 50%;
     background: var(--gold);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 2rem;
     box-shadow: 0 0 0 16px rgba(56, 189, 248, .2), 0 0 0 32px rgba(56, 189, 248, .1);
     cursor: pointer;
     transition: transform .25s;
     padding-left: 7px;
     border: none;
     margin-bottom: 2rem;
 }

 .big-play:hover {
     transform: scale(1.1);
 }

 /* embedded video container inside banner */
 .vid-embed {
     width: 100%;
     max-width: 900px;
     margin: 0 auto;
     aspect-ratio: 16/9;
     border-radius: 18px;
     overflow: hidden;
     box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
     background: #000;
     position: relative;
 }

 .vid-embed iframe {
     width: 100%;
     height: 100%;
     border: none;
 }

 .vid-embed-ph {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, #050e22, #0a2a5e);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: .85rem;
     text-align: center;
     padding: 2rem;
 }

 .vid-embed-ph .yt-ph-play {
     width: 68px;
     height: 68px;
     font-size: 1.6rem;
 }

 .vid-embed-ph strong {
     color: rgba(255, 255, 255, .88);
     font-size: 1rem;
     font-family: 'Poppins', sans-serif;
 }

 .vid-embed-ph span {
     color: rgba(255, 255, 255, .55);
     font-size: .82rem;
     max-width: 340px;
 }

 .vid-embed-ph code {
     color: rgba(255, 255, 255, .4);
     font-size: .72rem;
     background: rgba(255, 255, 255, .08);
     padding: 4px 10px;
     border-radius: 5px;
 }

 .vid-embed-ph a {
     color: #ff8888;
     font-size: .8rem;
     margin-top: .25rem;
 }

 /* ── HOW IT WORKS ── */
 .hiw-sec {
     background: #fff;
 }

 .xrp-banner {
     width: 100%;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: var(--sh2);
 }

 .xrp-banner img {
     width: 100%;
     display: block;
 }

 .xrp-ph {
     width: 100%;
     aspect-ratio: 16/9;
     background: linear-gradient(135deg, #0a2040, #1a4fa0);
     border-radius: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: .75rem;
     text-align: center;
     padding: 2rem;
 }

 .xrp-ph .ico {
     font-size: 3.5rem;
 }

 .xrp-ph strong {
     color: rgba(255, 255, 255, .85);
     font-size: 1rem;
     font-family: 'Poppins', sans-serif;
 }

 .xrp-ph span {
     color: rgba(255, 255, 255, .5);
     font-size: .8rem;
 }

 .xrp-ph code {
     color: rgba(255, 255, 255, .4);
     font-size: .7rem;
     background: rgba(255, 255, 255, .08);
     padding: 3px 8px;
     border-radius: 4px;
 }

 /* ── FEATURES ── */
 .feat-sec {
     background: var(--bg2);
 }

 .feat-card {
     background: #fff;
     border: 1px solid var(--bd);
     border-radius: var(--r);
     padding: 2rem 1.75rem;
     transition: all .3s;
     position: relative;
     overflow: hidden;
 }

 .feat-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--blue), var(--gold));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .3s;
 }

 .feat-card:hover {
     box-shadow: var(--sh2);
     transform: translateY(-4px);
     border-color: transparent;
 }

 .feat-card:hover::after {
     transform: scaleX(1);
 }

 .fc-ico {
     width: 54px;
     height: 54px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.45rem;
     margin-bottom: 1.2rem;
 }

 .feat-card h3 {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     font-size: 1.05rem;
     margin-bottom: .55rem;
     color: var(--text);
 }

 .feat-card p {
     color: var(--text2);
     font-size: .875rem;
     line-height: 1.72;
 }

 /* ── STATS ── */
 .stats-sec {
     background: linear-gradient(135deg, var(--blue3) 0%, var(--blue) 55%, var(--blue2) 100%);
     padding: 80px 6%;
     position: relative;
     overflow: hidden;
 }

 .stats-sec::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, .04) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(56, 189, 248, .07) 0%, transparent 50%);
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
     position: relative;
     z-index: 1;
 }

 .stat-box {
     text-align: center;
     padding: 2.5rem 1rem;
     border-right: 1px solid rgba(255, 255, 255, .1);
 }

 .stat-box:last-child {
     border-right: none;
 }

 .stat-val {
     font-family: 'Poppins', sans-serif;
     font-size: clamp(1.5rem, 2.8vw, 2.4rem);
     font-weight: 900;
     color: #fff;
     line-height: 1.1;
     margin-bottom: .4rem;
     word-break: break-all;
 }

 .stat-sep {
     width: 32px;
     height: 3px;
     background: var(--gold);
     border-radius: 2px;
     margin: .55rem auto;
 }

 .stat-lbl {
     color: rgba(255, 255, 255, .72);
     font-size: .9rem;
     font-weight: 500;
 }

 /* ── CONTACT BANNER ── */
 .contact-banner {
     background-image: linear-gradient(135deg, rgba(6, 30, 80, .90) 0%, rgba(10, 61, 145, .82) 100%), url('https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=1600&q=80');
     background-size: cover;
     background-position: center;
     padding: 90px 6%;
 }

 .cb-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: center;
 }

 .cb-text h2 {
     font-family: 'Poppins', sans-serif;
     font-size: clamp(2rem, 3vw, 2.7rem);
     font-weight: 800;
     color: #fff;
     margin-bottom: .85rem;
 }

 .cb-text p {
     color: rgba(255, 255, 255, .75);
     font-size: .95rem;
     line-height: 1.8;
     margin-bottom: 1.5rem;
 }

 /* credit card mockup image placeholder in contact section */
 .cb-card-ph {
     margin-top: 2rem;
 }

 .cb-card-img {
     width: 100%;
     max-width: 360px;
     background: linear-gradient(135deg, #1a4fa0, #062a6b);
     border-radius: 18px;
     padding: 2rem;
     color: #fff;
     box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
     position: relative;
     overflow: hidden;
 }

 .cb-card-img::before {
     content: '';
     position: absolute;
     top: -40px;
     right: -40px;
     width: 160px;
     height: 160px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .04);
 }

 .cb-chip {
     width: 38px;
     height: 27px;
     background: linear-gradient(135deg, var(--gold), var(--blue3));
     border-radius: 5px;
     margin-bottom: 1.4rem;
 }

 .cb-num {
     font-size: .95rem;
     letter-spacing: .13em;
     margin-bottom: 1.1rem;
 }

 .cb-bot {
     display: flex;
     justify-content: space-between;
 }

 .cb-bot .lbl {
     font-size: .58rem;
     opacity: .5;
     text-transform: uppercase;
     letter-spacing: .07em;
 }

 .cb-bot .val {
     font-size: .8rem;
     font-weight: 600;
     margin-top: .15rem;
 }

 .contact-card {
     background: #fff;
     border-radius: 20px;
     padding: 2.25rem;
     box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
 }

 .contact-card h3 {
     font-family: 'Poppins', sans-serif;
     font-weight: 800;
     font-size: 1.2rem;
     margin-bottom: 1.5rem;
     color: var(--text);
 }

 .fg {
     margin-bottom: 1rem;
 }

 .fg label {
     display: block;
     font-size: .8rem;
     font-weight: 600;
     color: var(--text2);
     margin-bottom: .4rem;
 }

 .fg input,
 .fg textarea,
 .fg select {
     width: 100%;
     border: 1.5px solid var(--bd);
     border-radius: 10px;
     padding: 11px 14px;
     color: var(--text);
     font-family: 'Inter', sans-serif;
     font-size: .875rem;
     outline: none;
     transition: border .2s;
     background: var(--bg2);
 }

 .fg input:focus,
 .fg textarea:focus,
 .fg select:focus {
     border-color: var(--blue);
     background: #fff;
 }

 .fg textarea {
     resize: vertical;
     min-height: 88px;
 }

 /* ── FAQ ── */
 .faq-sec {
     background: var(--bg3);
 }

 .faq-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: start;
 }

 .faq-list {
     display: flex;
     flex-direction: column;
     gap: .75rem;
 }

 .faq-item {
     background: #fff;
     border: 1px solid var(--bd);
     border-radius: 12px;
     overflow: hidden;
     transition: border-color .2s;
 }

 .faq-item:hover,
 .faq-item.open {
     border-color: var(--blue);
 }

 .faq-q {
     padding: 1.1rem 1.5rem;
     font-family: 'Poppins', sans-serif;
     font-weight: 600;
     font-size: .9rem;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--text);
     user-select: none;
 }

 .faq-item.open .faq-q {
     color: var(--blue);
 }

 .faq-icon {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: var(--bg3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .85rem;
     flex-shrink: 0;
     transition: all .2s;
     font-style: normal;
 }

 .faq-item.open .faq-icon {
     background: var(--blue);
     color: #fff;
     transform: rotate(45deg);
 }

 .faq-a {
     padding: 0 1.5rem 1.1rem;
     color: var(--text2);
     font-size: .875rem;
     line-height: 1.76;
     display: none;
 }

 .faq-item.open .faq-a {
     display: block;
 }

 .faq-right {
     background: linear-gradient(135deg, var(--blue3), var(--blue));
     border-radius: 20px;
     padding: 2.5rem;
     color: #fff;
 }

 .faq-right h3 {
     font-family: 'Poppins', sans-serif;
     font-weight: 800;
     font-size: 1.35rem;
     margin-bottom: .6rem;
 }

 .faq-right p {
     opacity: .82;
     font-size: .9rem;
     margin-bottom: 1.75rem;
     line-height: 1.72;
 }

 .faq-right input,
 .faq-right textarea {
     width: 100%;
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .22);
     border-radius: 10px;
     padding: 12px 14px;
     color: #fff;
     font-family: 'Inter', sans-serif;
     font-size: .875rem;
     outline: none;
     margin-bottom: 1rem;
 }

 .faq-right input::placeholder,
 .faq-right textarea::placeholder {
     color: rgba(255, 255, 255, .42);
 }

 .faq-right textarea {
     resize: vertical;
     min-height: 88px;
 }

 /* ── TESTIMONIALS ── */
 .testi-sec {
     background: #fff;
 }

 .testi-card {
     background: var(--bg2);
     border: 1px solid var(--bd);
     border-radius: var(--r);
     padding: 1.75rem;
     transition: all .3s;
 }

 .testi-card:hover {
     box-shadow: var(--sh2);
     transform: translateY(-3px);
     background: #fff;
 }

 .stars {
     color: var(--gold);
     font-size: .9rem;
     margin-bottom: .85rem;
 }

 .testi-txt {
     color: var(--text2);
     font-size: .9rem;
     line-height: 1.78;
     margin-bottom: 1.25rem;
     font-style: italic;
 }

 .testi-auth {
     display: flex;
     align-items: center;
     gap: .75rem;
 }

 .t-av {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--blue), var(--gold));
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Poppins', sans-serif;
     font-weight: 800;
     color: #fff;
     font-size: .88rem;
     flex-shrink: 0;
 }

 .t-name {
     font-weight: 700;
     font-size: .88rem;
     color: var(--text);
 }

 .t-loc {
     color: var(--text3);
     font-size: .75rem;
 }

 .tp {
     display: inline-flex;
     align-items: center;
     gap: .3rem;
     margin-top: .55rem;
     font-size: .7rem;
     font-weight: 700;
     color: #00b67a;
 }

 /* ── NEWS ── */
 .news-sec {
     background: var(--bg2);
 }

 .news-card {
     background: #fff;
     border: 1px solid var(--bd);
     border-radius: var(--r);
     overflow: hidden;
     transition: all .3s;
 }

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

 .news-img {
     width: 100%;
     height: 188px;
     background: var(--bg3);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: var(--text3);
     font-size: .8rem;
     gap: .4rem;
     text-align: center;
     overflow: hidden;
 }

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

 .news-ico {
     font-size: 2.6rem;
 }

 .news-body {
     padding: 1.25rem;
 }

 .news-tag {
     font-size: .7rem;
     font-weight: 700;
     color: var(--blue);
     text-transform: uppercase;
     letter-spacing: .1em;
     margin-bottom: .5rem;
 }

 .news-body h4 {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     font-size: .95rem;
     line-height: 1.5;
     margin-bottom: .5rem;
     color: var(--text);
 }

 .news-body p {
     color: var(--text2);
     font-size: .825rem;
     line-height: 1.65;
 }

 .news-date {
     color: var(--text3);
     font-size: .74rem;
     margin-top: .75rem;
 }

 /* ── CTA ── */
 .cta-sec {
     background: var(--bg3);
     text-align: center;
 }

 .cta-sec h2 {
     font-family: 'Poppins', sans-serif;
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 800;
     color: var(--text);
     margin-bottom: 1rem;
 }

 .cta-sec p {
     color: var(--text2);
     max-width: 520px;
     margin: 0 auto 2.25rem;
     line-height: 1.8;
 }

 .cta-btns {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
 }

 /* ── FOOTER ── */
 footer {
     background: #0e1c36;
     color: rgba(255, 255, 255, .9);
     padding: 4rem 6% 2rem;
 }

 .foot-grid {
     display: grid;
     grid-template-columns: 1.6fr 1fr 1fr 1fr;
     gap: 3rem;
     margin-bottom: 3rem;
 }

 .foot-logo {
     font-family: 'Poppins', sans-serif;
     font-weight: 900;
     font-size: 1.35rem;
     color: #fff;
     margin-bottom: .75rem;
 }

 .foot-logo span {
     color: var(--gold);
 }

 .foot-desc {
     color: rgba(255, 255, 255, .48);
     font-size: .845rem;
     line-height: 1.78;
 }

 .foot-col h4 {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     font-size: .9rem;
     margin-bottom: 1.1rem;
     color: #fff;
 }

 .foot-col ul {
     display: flex;
     flex-direction: column;
     gap: .6rem;
 }

 .foot-col ul a {
     color: rgba(255, 255, 255, .48);
     font-size: .845rem;
     transition: color .2s;
 }

 .foot-col ul a:hover {
     color: var(--gold);
 }

 .foot-bottom {
     border-top: 1px solid rgba(255, 255, 255, .1);
     padding-top: 1.5rem;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 1rem;
     color: rgba(255, 255, 255, .35);
     font-size: .8rem;
 }

 /* ── MODALS ── */
 .overlay {
     position: fixed;
     inset: 0;
     background: rgba(6, 20, 50, .7);
     backdrop-filter: blur(7px);
     z-index: 2000;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 1rem;
 }

 .overlay.show {
     display: flex;
 }

 .modal {
     background: #fff;
     border-radius: 20px;
     width: 100%;
     max-width: 440px;
     overflow: hidden;
     box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
     animation: mIn .3s ease;
 }

 @keyframes mIn {
     from {
         opacity: 0;
         transform: translateY(22px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .m-head {
     background: linear-gradient(135deg, var(--blue3), var(--blue));
     padding: 1.75rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .m-head h3 {
     font-family: 'Poppins', sans-serif;
     font-weight: 800;
     font-size: 1.2rem;
     color: #fff;
 }

 .m-close {
     background: rgba(255, 255, 255, .15);
     border: none;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     color: #fff;
     font-size: 1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .2s;
 }

 .m-close:hover {
     background: rgba(255, 255, 255, .28);
 }

 .m-body {
     padding: 1.75rem;
 }

 .mfg {
     margin-bottom: 1.1rem;
 }

 .mfg label {
     display: block;
     font-size: .8rem;
     font-weight: 600;
     color: var(--text2);
     margin-bottom: .4rem;
 }

 .mfg input,
 .mfg select {
     width: 100%;
     border: 1.5px solid var(--bd);
     border-radius: 10px;
     padding: 11px 14px;
     color: var(--text);
     font-family: 'Inter', sans-serif;
     font-size: .875rem;
     outline: none;
     transition: border .2s;
     background: var(--bg2);
 }

 .mfg input:focus,
 .mfg select:focus {
     border-color: var(--blue);
     background: #fff;
 }

 .m-foot {
     padding: 0 1.75rem 1.75rem;
 }

 .div-or {
     display: flex;
     align-items: center;
     gap: .75rem;
     margin: 1rem 0;
     color: var(--text3);
     font-size: .78rem;
 }

 .div-or::before,
 .div-or::after {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--bd);
 }

 .tog-p {
     text-align: center;
     font-size: .83rem;
     color: var(--text2);
     margin-top: .75rem;
 }

 .tog-p a {
     color: var(--blue);
     font-weight: 600;
     cursor: pointer;
 }

 .frow {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }

 .rem-row {
     display: flex;
     align-items: center;
     gap: .5rem;
     font-size: .82rem;
     color: var(--text2);
     cursor: pointer;
     margin-bottom: .85rem;
 }

 .rem-row input[type=checkbox] {
     width: 15px;
     height: 15px;
     accent-color: var(--blue);
 }

 .forgot {
     text-align: right;
     font-size: .78rem;
     color: var(--blue);
     margin-bottom: .85rem;
     cursor: pointer;
     display: block;
 }

 /* ── SCROLL TOP ── */
 #stb {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: var(--blue);
     color: #fff;
     border: none;
     font-size: 1rem;
     cursor: pointer;
     box-shadow: 0 4px 16px rgba(10, 61, 145, .3);
     z-index: 500;
     display: none;
     align-items: center;
     justify-content: center;
     transition: all .2s;
 }

 #stb.on {
     display: flex;
 }

 #stb:hover {
     background: var(--blue2);
     transform: translateY(-2px);
 }

 /* ── RESPONSIVE ── */
 @media(max-width:1100px) {

     .grid2,
     .flare-top,
     .cb-grid,
     .faq-grid {
         grid-template-columns: 1fr;
         gap: 2.5rem;
     }

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

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

     .foot-grid {
         grid-template-columns: 1fr 1fr;
         gap: 2rem;
     }

     .float-badge {
         display: none;
     }
 }

 @media(max-width:768px) {
     .nav-links {
         display: none;
     }

     .grid3,
     .vids4 {
         grid-template-columns: 1fr;
     }

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

 @media(max-width:480px) {
     .nav-cta .btn-outline {
         display: none;
     }

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

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

     .stat-box {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, .1);
     }
 }

 /* DARK MODE STYLES */
 html.dark body {
     background: #010409;
     color: #e6edf3;
 }

 html.dark .nav {
     background: rgba(1, 4, 9, 0.9);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 html.dark .sec {
     background: #010409;
 }

 html.dark .sec-h {
     color: white;
 }

 html.dark .sec-p,
 html.dark p {
     color: #8b949e;
 }

 html.dark .bar {
     background: var(--blue);
 }

 html.dark .card-wrap,
 html.dark .faq-container,
 html.dark .testimonial-container {
     background: #0d1117;
     border: 1px solid #30363d;
 }

 html.dark .faq-item {
     background: #161b22;
     border-bottom: 1px solid #30363d;
 }

 html.dark .faq-q {
     color: white;
 }

 html.dark .contact-form input,
 html.dark .contact-form textarea {
     background: #0d1117;
     border: 1px solid #30363d;
     color: white;
 }

 html.dark .nav-logo {
     color: white;
 }

 html.dark .nav-links li a {
     color: #8b949e;
 }

 html.dark .nav-links li a:hover {
     color: white;
 }

 html.dark .footer {
     background: #010409;
     border-top: 1px solid #30363d;
 }

 html.dark .news-card {
     background: #0d1117;
     border: 1px solid #30363d;
 }

 html.dark .news-h {
     color: white;
 }