/* ========== VARIABLES — LIGHT PREMIUM THEME ========== */

 :root {

     /* Palette */

     --c-primary: #0c5397;

     /* Navy Blue */

     --c-secondary: #e94367;

     /* Pinkish Red */

     --c-tertiary: #7fc247;

     /* Green */

     --c-orange: #FF6B35;

     /* Orange CTA */



     /* Backgrounds */

     --c-bg-main: #F9FAFB;

     --c-bg-alt: #FFFFFF;

     --c-bg-surface: #FFFFFF;



     /* Text */

     --c-text: #0c5397;

     --c-text-2: #2D3748;

     --c-text-3: #718096;



     /* UI Elements */

     --c-glass: rgba(255, 255, 255, 0.75);

     --c-glass-b: #E2E8F0;

     --c-glass-bh: #CBD5E0;

     --c-glass-hover: #F7FAFC;



     /* Gradients */

     --c-accent-gradient: linear-gradient(135deg, #FF6B35, #e94367);

     /* Orange to Pink */

     --c-text-gradient: linear-gradient(135deg, #0c5397, #e94367);

     /* Navy to Pink */

     /* --c-accent-glow: rgba(255, 107, 53, 0.35); */

     --c-accent-glow: rgba(233, 67, 103, 0.35);





     /* Fonts */

     --ff-h: 'Poppins', sans-serif;

     --ff-b: 'Nunito', sans-serif;



     /* Mobile-first LARGE fonts */

     --fs-hero: 2.15rem;

     --fs-h2: 1.6rem;

     --fs-h3: 1.2rem;

     --fs-h4: 1.08rem;

     --fs-body: 1rem;

     --fs-sm: 0.9rem;

     --fs-xs: 0.8rem;



     --r-md: 12px;

     --r-lg: 16px;

     --r-xl: 24px;

     --r-full: 9999px;



     --section-py: 56px;

 }



 @media(min-width:375px) {

     :root {

         --fs-hero: 2.3rem;

         --fs-h2: 1.7rem;

     }

 }



 @media(min-width:576px) {

     :root {

         --fs-hero: 2.6rem;

         --fs-h2: 1.85rem;

         --section-py: 64px;

     }

 }



 @media(min-width:768px) {

     :root {

         --fs-hero: 3rem;

         --fs-h2: 2.1rem;

         --fs-h3: 1.3rem;

         --section-py: 80px;

     }

 }



 @media(min-width:992px) {

     :root {

         --fs-hero: 3.8rem;

         --fs-h2: 2.5rem;

         --fs-h3: 1.45rem;

         --fs-h4: 1.15rem;

         --section-py: 100px;

     }

 }



 @media(min-width:1200px) {

     :root {

         --fs-hero: 4.2rem;

         --fs-h2: 2.75rem;

     }

 }



 /* ========== RESET ========== */

 *,

 *::before,

 *::after {

     box-sizing: border-box;

     margin: 0;

     padding: 0

 }



 html {

     scroll-behavior: smooth;

     -webkit-text-size-adjust: 100%;

     overflow-x: hidden

 }



 body {

     font-family: var(--ff-b);

     font-size: var(--fs-body);

     color: var(--c-text-2);

     background: var(--c-bg-main);

     line-height: 1.7;

     overflow-x: hidden;

     -webkit-font-smoothing: antialiased

 }



 body.menu-open {

     overflow: hidden

 }



 img {

     max-width: 100%;

     height: auto;

     display: block

 }



 a {

     color: inherit;

     text-decoration: none

 }



 ul {

     list-style: none

 }



 h1,

 h2,

 h3,

 h4,

 h5,

 h6 {

     font-family: var(--ff-h);

     font-weight: 700;

     line-height: 1.2;

     color: var(--c-text)

 }



 ::selection {

     background: var(--c-secondary);

     color: #fff

 }



 :focus-visible {

     outline: 2px solid var(--c-primary);

     outline-offset: 2px

 }



 @keyframes float-slow {



     0%,

     100% {

         transform: translateY(0)

     }



     50% {

         transform: translateY(-25px)

     }

 }



 @keyframes float {



     0%,

     100% {

         transform: translateY(0)

     }



     50% {

         transform: translateY(-18px)

     }

 }



 @keyframes marquee {

     0% {

         transform: translateX(0)

     }



     100% {

         transform: translateX(-50%)

     }

 }



 @keyframes spin {

     from {

         transform: rotate(0)

     }



     to {

         transform: rotate(360deg)

     }

 }



 @keyframes pulse-glow {



     0%,

     100% {

         box-shadow: 0 0 20px var(--c-accent-glow)

     }



     50% {

         box-shadow: 0 0 40px var(--c-accent-glow)

     }

 }



 /* ========== BUTTONS ========== */

 .btn-accent {

     display: inline-flex;

     align-items: center;

     justify-content: center;

     gap: 8px;

     padding: 14px 26px;

     min-height: 48px;

     font-family: var(--ff-h);

     font-size: 0.95rem;

     font-weight: 600;

     color: #fff;

     /* background: var(--c-secondary);; */

     background: var(--c-secondary);

     border: none;

     border-radius: var(--r-full);

     cursor: pointer;

     transition: all .3s ease;

     box-shadow: 0 4px 15px var(--c-accent-glow);

     white-space: nowrap;

     -webkit-tap-highlight-color: transparent;

     position: relative;

     overflow: hidden;

 }



 .btn-accent:hover {

     transform: translateY(-2px);

     box-shadow: 0 8px 25px var(--c-accent-glow)

 }



 .btn-accent:active {

     transform: scale(.97)

 }



 .btn-wa {

     display: inline-flex;

     align-items: center;

     justify-content: center;

     gap: 8px;

     padding: 14px 24px;

     min-height: 48px;

     font-family: var(--ff-h);

     font-size: 0.95rem;

     font-weight: 600;

     color: #fff;

     background: var(--c-tertiary);

     border: none;

     border-radius: var(--r-full);

     cursor: pointer;

     transition: all .3s ease;

     box-shadow: 0 4px 15px rgba(127, 194, 71, .3);

     white-space: nowrap;

     -webkit-tap-highlight-color: transparent;

 }



 .btn-wa:hover {

     transform: translateY(-2px);

     box-shadow: 0 6px 20px rgba(127, 194, 71, .4)

 }



 .btn-wa:active {

     transform: scale(.97)

 }



 .btn-sm {

     padding: 11px 20px;

     min-height: 44px;

     font-size: .88rem

 }



 .btn-lg {

     padding: 16px 32px;

     min-height: 52px;

     font-size: 1rem

 }



 /* ========== FORMS ========== */

 .ff {

     position: relative;

     margin-bottom: 14px

 }



 .ff input,

 .ff select {

     width: 100%;

     padding: 28px 16px 5px;

     min-height: 52px;

     font-family: var(--ff-b);

     font-size: 16px;

     color: var(--c-text-2);

     background: #fff;

     border: 1.5px solid var(--c-glass-b);

     border-radius: var(--r-md);

     transition: border-color .3s, box-shadow .3s;

     outline: none;

     -webkit-appearance: none;

     appearance: none;

 }



 .ff input::placeholder {

     color: transparent

 }



 .ff label {

     position: absolute;

     left: 16px;

     top: 50%;

     transform: translateY(-50%);

     font-size: 16px;

     color: var(--c-text-3);

     pointer-events: none;

     transition: all .25s ease;

 }



 .ff input:focus,

 .ff input:not(:placeholder-shown) {

     border-color: var(--c-primary);

     box-shadow: 0 0 0 3px rgba(12, 83, 151, .1)

 }



 .ff input:focus+label,

 .ff input:not(:placeholder-shown)+label {

     top: 12px;

     transform: translateY(0);

     font-size: .68rem;

     color: var(--c-primary);

     font-weight: 700;

     letter-spacing: .5px;

     text-transform: uppercase;

 }



 .ff select {

     cursor: pointer

 }



 .ff select+label {

     top: 12px;

     transform: translateY(0);

     font-size: .68rem;

     color: var(--c-primary);

     font-weight: 700;

     letter-spacing: .5px;

     text-transform: uppercase

 }



 .ff .arr {

     position: absolute;

     right: 16px;

     top: 50%;

     transform: translateY(-50%);

     color: var(--c-text-3);

     pointer-events: none;

     font-size: .8rem

 }



 /* ========== HEADER ========== */

 .hdr {

     position: fixed;

     top: 0;

     left: 0;

     right: 0;

     z-index: 1000;

     padding: 12px 0;

     transition: all .4s ease

 }



 .hdr.scrolled {

     padding: 8px 0;

     background: rgba(255, 255, 255, .92);

     backdrop-filter: blur(20px);

     -webkit-backdrop-filter: blur(20px);

     box-shadow: 0 2px 20px rgba(0, 0, 0, .05)

 }



 .hdr-in {

     display: flex;

     align-items: center;

     justify-content: space-between

 }



 /* .logo {

            font-family: var(--ff-h);

            font-size: 1.35rem;

            font-weight: 800;

            color: var(--c-primary);

            letter-spacing: -.5px;

            flex-shrink: 0

        }



        .logo span {

            color: var(--c-secondary);

            font-weight: 700

        } */



 .logo img {

     height: 60px;

 }



 .hdr-r {

     display: none;

     align-items: center;

     gap: 18px;

     flex-shrink: 0

 }



 .hdr-phone {

     display: flex;

     align-items: center;

     gap: 6px;

     font-family: var(--ff-h);

     font-size: .9rem;

     font-weight: 600;

     color: var(--c-text-2)

 }



 .hdr-phone i {

     color: var(--c-primary)

 }





 .hdr-phone-mob-btn {

     width: 38px;

     height: 38px;

     display: flex;

     align-items: center;

     justify-content: center;

     background: rgba(12, 83, 151, .06);

     border-radius: 12px;

     background: #7fc247;

     color: #fff;

     padding: 1px 0 0 0;

 }



 .mob-btn {

     display: flex;

     flex-direction: column;

     gap: 5px;

     background: none;

     border: none;

     cursor: pointer;

     padding: 10px;

     min-width: 44px;

     min-height: 44px;

     align-items: center;

     justify-content: center;

     -webkit-tap-highlight-color: transparent

 }



 .mob-btn span {

     display: block;

     width: 22px;

     height: 2px;

     background: var(--c-primary);

     border-radius: 9px;

     transition: all .3s ease

 }



 .mob-btn.on span:nth-child(1) {

     transform: rotate(45deg) translate(5px, 5px)

 }



 .mob-btn.on span:nth-child(2) {

     opacity: 0

 }



 .mob-btn.on span:nth-child(3) {

     transform: rotate(-45deg) translate(5px, -5px)

 }



 .mob-nav {

     position: fixed;

     inset: 0;

     z-index: 999;

     background: rgba(255, 255, 255, .97);

     backdrop-filter: blur(24px);

     display: flex;

     flex-direction: column;

     align-items: center;

     justify-content: center;

     gap: 24px;

     opacity: 0;

     visibility: hidden;

     transition: all .35s ease;

 }



 .mob-nav.on {

     opacity: 1;

     visibility: visible

 }



 .mob-nav a {

     font-family: var(--ff-h);

     font-size: 1.2rem;

     font-weight: 600;

     color: var(--c-text-2);

     padding: 8px 16px;

     min-height: 44px;

     display: flex;

     align-items: center;

     -webkit-tap-highlight-color: transparent

 }



 .mob-nav a:hover {

     color: var(--c-primary)

 }



 @media(min-width:992px) {

     .hdr-r {

         display: flex

     }



     .hdr-phone-mob-btn,

     .mob-btn {

         display: none

     }

 }



 /* ========== HERO ========== */

 .hero {

     position: relative;

     overflow: hidden;

     padding: 100px 0 48px;

     background: var(--c-bg-alt)

 }



 .hero-bg {

     position: absolute;

     inset: 0;

     z-index: 0;

     /* background: radial-gradient(ellipse 80% 60% at 20% 40%, rgba(12, 83, 151, .06)0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 20%, rgba(233, 67, 103, .05)0%, transparent 50%); */

     /* background: radial-gradient(ellipse 80% 60% at 20% 40%, rgba(255, 255, 255, 0) 0%, rgba(214, 232, 250, 0.85) 60%), radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0, 127, 255, 0) 0%, rgba(255, 255, 255, 0) 50%); */

     background: radial-gradient(ellipse 80% 60% at 20% 40%, rgba(255, 255, 255, 0) 0%, rgba(214, 232, 250, 0.5) 60%), radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0, 127, 255, 0) 0%, rgba(255, 255, 255, 0) 50%);

 }



 .hero-badge {

     display: inline-flex;

     align-items: center;

     gap: 8px;

     padding: 7px 14px;

     background: #fff4c0;

     color: #db7100;

     font-size: 15px;

     border-radius: 50px;

     margin-bottom: 10px;

     font-weight: 600;

 }



 .hero-badge i {

     font-size: 15px;

 }



 .hero-blob {

     position: absolute;

     border-radius: 50%;

     filter: blur(80px);

     opacity: .5;

     z-index: 0

 }



 .hb1 {

     width: 260px;

     height: 260px;

     background: rgba(12, 83, 151, .08);

     top: -8%;

     right: -4%;

     animation: float-slow 9s ease-in-out infinite

 }



 .hb2 {

     width: 200px;

     height: 200px;

     background: rgba(233, 67, 103, .06);

     bottom: 8%;

     left: -4%;

     animation: float-slow 11s ease-in-out infinite reverse

 }



 .hero-c {

     position: relative;

     z-index: 2

 }



 .hero-t {

     font-size: var(--fs-hero);

     font-weight: 800;

     line-height: 1.1;

     margin-bottom: 6px;

     letter-spacing: -1px;

     color: var(--c-primary)

 }



 .hero-t .hl {

     background: var(--c-text-gradient);

     /* background: var(--c-text); */

     -webkit-background-clip: text;

     -webkit-text-fill-color: transparent;

     background-clip: text

 }



 .hero-sub {

     font-size: clamp(1.05rem, 3.5vw, 1.45rem);

     font-weight: 700;

     color: var(--c-secondary);

     margin-bottom: 20px;

     font-family: var(--ff-h)

 }



 /* Trust chips */

 .chips {

     display: flex;

     flex-wrap: wrap;

     gap: 8px;

     margin-bottom: 22px

 }



 .chip {

     display: inline-flex;

     align-items: center;

     gap: 5px;

     padding: 7px 12px;

     background: rgba(12, 83, 151, .06);

     border: 1px solid rgba(12, 83, 151, .1);

     border-radius: var(--r-full);

     font-size: .84rem;

     font-weight: 600;

     color: var(--c-text-2);

     white-space: nowrap

 }



 .chip i {

     color: var(--c-primary);

     font-size: .85rem

 }



 .chip strong {

     color: var(--c-primary)

 }



 /* Stat boxes */

 .h-stats {

     display: grid;

     grid-template-columns: repeat(3, 1fr);

     gap: 10px;

     margin-bottom: 24px

 }



 .h-st {

     padding: 16px 8px;

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-lg);

     text-align: center;

     box-shadow: 0 2px 10px rgba(0, 0, 0, .03);

     transition: all .3s ease

 }



 .h-st:hover {

     transform: translateY(-2px);

     box-shadow: 0 8px 20px rgba(0, 0, 0, .06)

 }



 .h-st-n {

     font-family: var(--ff-h);

     font-size: clamp(1.25rem, 5vw, 1.9rem);

     font-weight: 800;

     background: var(--c-text-gradient);

     /* background: var(--c-text); */

     -webkit-background-clip: text;

     -webkit-text-fill-color: transparent;

     background-clip: text;

     line-height: 1.2

 }



 .h-st-l {

     font-size: clamp(.72rem, 2.2vw, .78rem);

     color: var(--c-text-3);

     margin-top: 3px;

     font-weight: 600;

     text-transform: uppercase;

     letter-spacing: .4px

 }





 /* Hero buttons */

 .h-btns {

     display: flex;

     flex-direction: column;

     gap: 10px

 }



 .h-btns .btn-accent,

 .h-btns .btn-wa {

     width: 100%;

     justify-content: center

 }



 @media(min-width:480px) {

     .h-btns {

         flex-direction: row

     }



     .h-btns .btn-accent,

     .h-btns .btn-wa {

         width: auto

     }

 }



 /* Hero form */

 .h-form {

     background: var(--c-glass);

     backdrop-filter: blur(20px);

     -webkit-backdrop-filter: blur(20px);

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-xl);

     padding: 22px 18px;

     position: relative;

     overflow: hidden;

     box-shadow: 0 10px 40px rgba(0, 0, 0, .05)

 }



 .h-form::before {

     content: '';

     position: absolute;

     top: 0;

     left: 0;

     right: 0;

     height: 3px;

     background: var(--c-secondary);

 }



 .h-form-t {

     font-family: var(--ff-h);

     font-size: 1.1rem;

     font-weight: 700;

     margin-bottom: 4px;

     color: var(--c-primary)

 }



 .h-form-s {

     font-size: .88rem;

     color: var(--c-text-3);

     margin-bottom: 18px

 }



 @media(min-width:992px) {

     .hero {

         padding: 130px 0 72px

     }



     .h-form {

         padding: 28px 24px

     }

 }



 /* ========== TRUST BAR ========== */



 /* =========================

   TRUST SECTION

========================= */



 .trust {

     padding: 32px 0;

     border-top: 1px solid var(--c-glass-b);

     border-bottom: 1px solid var(--c-glass-b);

     background: var(--c-bg-main);



     display: flex;

     align-items: center;

     flex-wrap: wrap;

     gap: 24px;



     overflow: hidden;

 }



 .trust-l {

     width: 100%;



     text-align: center;



     font-size: .82rem;

     font-weight: 600;

     text-transform: uppercase;

     letter-spacing: 1.8px;



     color: var(--c-text-3);



     white-space: nowrap;

 }



 .trust-mw {

     position: relative;

     width: 100%;

     overflow: hidden;



     mask-image: linear-gradient(90deg,

             transparent,

             #000 10%,

             #000 90%,

             transparent);



     -webkit-mask-image: linear-gradient(90deg,

             transparent,

             #000 10%,

             #000 90%,

             transparent);

 }



 /* =========================

   DESKTOP

========================= */



 .trust-m {

     display: flex;

     align-items: center;

     gap: 60px;



     width: max-content;



     will-change: transform;

     transform: translate3d(0, 0, 0);



     animation: trustMarquee 15s linear infinite;

 }



 .trust-m:hover {

     animation-play-state: paused;

 }



 /* =========================

   MOBILE

========================= */



 .trust-mob {

     display: none;

 }



 .trust-row {

     display: flex;

     align-items: center;

     gap: 28px;



     width: max-content;



     will-change: transform;

     transform: translate3d(0, 0, 0);

 }



 .trust-row.r1 {

     animation: trustMarquee 20s linear infinite;

 }



 .trust-row.r2 {

     animation: trustMarqueeReverse 20s linear infinite;

 }



 /* =========================

   ITEMS

========================= */



 .trust-item {

     flex: 0 0 auto;

 }



 /* =========================

   LOGOS

========================= */



 .trust-i {

     height: 24px;

     width: auto;



     display: block;

     object-fit: contain;



     opacity: .5;

     filter: grayscale(100%);



     transition:

         opacity .3s ease,

         transform .3s ease,

         filter .3s ease;

 }



 .trust-i:hover {

     opacity: .9;

     filter: grayscale(0%);

     transform: scale(1.05);

 }



 /* =========================

   DESKTOP

========================= */



 @media (min-width: 768px) {



     .trust {

         padding: 40px 0;

     }



     .trust-i {

         height: 28px;

     }



 }



 /* =========================

   MOBILE

========================= */



 @media (max-width: 767px) {



     .trust {

         flex-direction: column;

         align-items: flex-start;

         gap: 14px;

     }



     .trust-l {

         text-align: left;

     }



     .trust-m {

         display: none;

     }



     .trust-mob {

         display: flex;

         flex-direction: column;

         gap: 18px;



         width: 100%;

         overflow: hidden;

     }



     .trust-i {

         height: 24px;

     }



 }



 /* =========================

   ANIMATION

========================= */



 @keyframes trustMarquee {



     0% {

         transform: translate3d(0, 0, 0);

     }



     100% {

         transform: translate3d(-16.666%, 0, 0);

     }



 }



 @keyframes trustMarqueeReverse {



     0% {

         transform: translate3d(-16.666%, 0, 0);

     }



     100% {

         transform: translate3d(0, 0, 0);

     }



 }













 /* ========== SECTION COMMON ========== */

 .s-badge {

     display: inline-flex;

     align-items: center;

     gap: 7px;

     padding: 6px 14px;

     background: rgba(12, 83, 151, .06);

     border: 1px solid rgba(12, 83, 151, .1);

     border-radius: var(--r-full);

     font-size: .82rem;

     font-weight: 600;

     color: var(--c-primary);

     margin-bottom: 12px;

     letter-spacing: .4px;

     text-transform: uppercase

 }



 .s-title {

     font-size: var(--fs-h2);

     font-weight: 800;

     letter-spacing: -.5px;

     margin-bottom: 10px;

     color: var(--c-primary)

 }



 .s-sub {

     /* font-size: var(--fs-sm); */

     color: var(--c-text-2);

     max-width: 580px;

     margin-bottom: 32px;

     line-height: 1.75

 }



 .tg {

     background: var(--c-text-gradient);

     /* background: var(--c-text); */

     -webkit-background-clip: text;

     -webkit-text-fill-color: transparent;

     background-clip: text

 }



 .s-div {

     height: 1px;

     background: linear-gradient(90deg, transparent, var(--c-glass-bh), transparent);

     margin: 0 auto;

     max-width: 70%

 }



 /* ========== WHY CMA ========== */

 .why-cma {

     padding: var(--section-py) 0;

     background: var(--c-bg-alt)

 }



 .bcard {

     padding: 22px 18px;

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-xl);

     transition: all .4s ease;

     height: 100%;

     position: relative;

     overflow: hidden;

     box-shadow: 0 2px 15px rgba(0, 0, 0, .03)

 }



 .bcard::after {

     content: '';

     position: absolute;

     inset: 0;

     border-radius: var(--r-xl);

     background: linear-gradient(135deg, rgba(12, 83, 151, .02), transparent);

     opacity: 0;

     transition: opacity .4s

 }



 .bcard:hover {

     border-color: rgba(12, 83, 151, .15);

     transform: translateY(-4px);

     box-shadow: 0 12px 30px rgba(0, 0, 0, .07)

 }



 .bcard:hover::after {

     opacity: 1

 }



 .bcard-i {

     width: 50px;

     height: 50px;

     display: flex;

     align-items: center;

     justify-content: center;

     background: rgba(12, 83, 151, .08);

     border-radius: var(--r-lg);

     margin-bottom: 16px;

     font-size: 1.25rem;

     color: var(--c-primary);

     transition: all .35s ease

 }



 .bcard:hover .bcard-i {

     background: var(--c-secondary);

     ;

     color: #fff;

     transform: scale(1.06)

 }



 .bcard-t {

     font-size: var(--fs-h4);

     font-weight: 700;

     margin-bottom: 8px;

     position: relative;

     z-index: 1;

     color: var(--c-primary)

 }



 .bcard-d {

     /* font-size: var(--fs-sm); */

     color: var(--c-text-2);

     line-height: 1.7;

     position: relative;

     z-index: 1

 }



 /* ========== WHY MYLOGIC ========== */

 .why-ml {

     padding: var(--section-py) 0;

     background: var(--c-bg-main)

 }



 .acard {

     padding: 20px 18px;

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-xl);

     transition: all .4s ease;

     height: 100%;

     box-shadow: 0 2px 10px rgba(0, 0, 0, .02)

 }



 .acard:hover {

     border-color: rgba(233, 67, 103, .2);

     box-shadow: 0 8px 25px rgba(233, 67, 103, .06);

     transform: translateY(-3px)

 }



 .acard-i {

     width: 44px;

     height: 44px;

     display: flex;

     align-items: center;

     justify-content: center;

     background: rgba(12, 83, 151, .06);

     border-radius: var(--r-lg);

     margin-bottom: 14px;

     font-size: 1.15rem;

     color: var(--c-primary);

     transition: all .35s ease

 }



 .acard:hover .acard-i {

     background: var(--c-secondary);

     ;

     color: #fff

 }



 .acard-t {

     font-size: var(--fs-h4);

     font-weight: 700;

     margin-bottom: 6px;

     color: var(--c-primary)

 }



 .acard-d {

     /* font-size: var(--fs-sm); */

     color: var(--c-text-2);

     line-height: 1.7

 }



 /* ========== REVIEWS ========== */

 .revs {

     padding: var(--section-py) 0;

     position: relative;

     overflow: hidden;

     background: var(--c-bg-alt)

 }



 .g-rating {

     display: inline-flex;

     align-items: center;

     gap: 8px;

     padding: 8px 16px;

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-full);

     flex-wrap: wrap;

     justify-content: center;

     box-shadow: 0 2px 10px rgba(0, 0, 0, .03)

 }



 .g-rating svg {

     width: 20px;

     height: 20px;

     flex-shrink: 0

 }



 .g-rating b {

     font-family: var(--ff-h);

     font-size: 1rem;

     color: var(--c-primary)

 }



 .g-rating .stars {

     color: #FFB800;

     font-size: .85rem;

     display: flex;

     gap: 1px

 }



 .g-rating small {

     font-size: .82rem;

     color: var(--c-text-3)

 }



 .rcard {

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-xl);

     padding: 22px;

     transition: all .3s;

     height: 100%;

     box-shadow: 0 2px 15px rgba(0, 0, 0, .03)

 }



 .rcard:hover {

     border-color: var(--c-glass-bh);

     box-shadow: 0 8px 25px rgba(0, 0, 0, .06)

 }



 .rcard-h {

     display: flex;

     align-items: center;

     gap: 12px;

     margin-bottom: 10px

 }



 .rcard-a {

     width: 42px;

     height: 42px;

     border-radius: 50%;

     object-fit: cover;

     border: 2px solid var(--c-glass-b);

     flex-shrink: 0

 }



 .rcard-n {

     font-family: var(--ff-h);

     font-size: .92rem;

     font-weight: 600;

     color: var(--c-primary)

 }



 .rcard-d {

     font-size: .78rem;

     color: var(--c-text-3)

 }



 .rcard-s {

     display: flex;

     gap: 2px;

     color: #FFB800;

     font-size: .82rem;

     margin-bottom: 10px

 }



 .rcard-t {

     /* font-size: var(--fs-sm); */

     color: var(--c-text-2);

     line-height: 1.75

 }



 .rev-sw {

     padding-bottom: 48px;

     overflow: visible

 }



 .rev-sw .swiper-pagination {

     bottom: 0

 }



 .rev-sw .swiper-pagination-bullet {

     width: 8px;

     height: 8px;

     background: var(--c-glass-bh);

     opacity: 1;

     transition: all .3s

 }



 .rev-sw .swiper-pagination-bullet-active {

     width: 24px;

     border-radius: var(--r-full);

     background: var(--c-secondary);

 }



 /* ========== PLACEMENTS ========== */

 .placements {

     padding: var(--section-py) 0;

     background: var(--c-bg-main)

 }



 .pcard {

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-xl);

     padding: 18px;

     transition: all .35s ease;

     height: 100%;

     display: flex;

     flex-direction: column;

     box-shadow: 0 2px 10px rgba(0, 0, 0, .02)

 }



 .pcard:hover {

     border-color: var(--c-glass-bh);

     transform: translateY(-3px);

     box-shadow: 0 8px 24px rgba(0, 0, 0, .06)

 }



 .pcard-top {

     display: flex;

     align-items: center;

     gap: 10px;

     margin-bottom: 10px

 }



 .pcard-av {

     width: 44px;

     height: 44px;

     border-radius: 50%;

     object-fit: cover;

     border: 2px solid rgba(12, 83, 151, .15);

     flex-shrink: 0

 }



 .pcard-n {

     font-family: var(--ff-h);

     font-size: .9rem;

     font-weight: 700;

     line-height: 1.3;

     color: var(--c-primary)

 }



 .pcard-r {

     font-size: .78rem;

     color: var(--c-text-3)

 }



 .pcard-story {

     font-size: .85rem;

     color: var(--c-text-2);

     line-height: 1.65;

     font-style: italic;

     flex: 1;

     margin-bottom: 10px

 }



 .pcard-logo {

     height: 20px;

     width: auto;

     opacity: .6;

     object-fit: contain;

     align-self: flex-start

 }



 /* ========== COURSE ========== */

 .course {

     padding: var(--section-py) 0;

     background: var(--c-bg-alt)

 }



 .c-stats {

     display: grid;

     grid-template-columns: repeat(2, 1fr);

     gap: 10px;

     margin-bottom: 28px

 }



 .c-st {

     padding: 16px 12px;

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-lg);

     text-align: center;

     box-shadow: 0 2px 8px rgba(0, 0, 0, .02)

 }



 .c-st-i {

     font-size: 1.2rem;

     color: var(--c-primary);

     margin-bottom: 4px

 }



 .c-st-n {

     font-family: var(--ff-h);

     font-size: 1.25rem;

     font-weight: 800;

     color: var(--c-primary)

 }



 .c-st-l {

     font-size: .72rem;

     color: var(--c-text-3);

     text-transform: uppercase;

     letter-spacing: .5px;

     font-weight: 600

 }



 @media(min-width:768px) {

     .c-stats {

         grid-template-columns: repeat(4, 1fr)

     }

 }



 .c-acc .accordion-item {

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-md) !important;

     margin-bottom: 8px;

     overflow: hidden;

     box-shadow: 0 1px 4px rgba(0, 0, 0, .02)

 }



 .c-acc .accordion-button {

     background: transparent;

     color: var(--c-primary);

     font-family: var(--ff-h);

     font-size: .9rem;

     font-weight: 600;

     padding: 14px 16px;

     box-shadow: none;

     gap: 10px;

     min-height: 50px;

     line-height: 1.4;

     -webkit-tap-highlight-color: transparent

 }



 .c-acc .accordion-button::after {

     display: none

 }



 .c-acc .accordion-button .pi {

     margin-left: auto;

     width: 26px;

     min-width: 26px;

     height: 26px;

     display: flex;

     align-items: center;

     justify-content: center;

     background: rgba(12, 83, 151, .08);

     border-radius: 50%;

     font-size: 1rem;

     color: var(--c-primary);

     transition: all .3s ease

 }



 .c-acc .accordion-button:not(.collapsed) .pi {

     background: var(--c-secondary);

     ;

     color: #fff;

     transform: rotate(45deg)

 }



 .c-acc .accordion-button:not(.collapsed) {

     background: rgba(12, 83, 151, .03);

     color: var(--c-primary)

 }



 .c-acc .accordion-body {

     padding: 0 16px 14px;

     color: var(--c-text-2)

 }



 .c-acc .ml {

     padding-left: 0;

     margin-bottom: 0;

 }



 .c-acc .ml li {

     padding: 7px 0;

     border-bottom: 1px solid var(--c-glass-b);

     display: flex;

     align-items: flex-start;

     gap: 8px;

     font-size: .88rem;

     line-height: 1.6

 }



 .c-acc .ml li:last-child {

     border-bottom: none;

     padding-bottom: 0;

 }



 .c-acc .ml li i {

     color: var(--c-secondary);

     font-size: .7rem;

     margin-top: 2px;

     flex-shrink: 0

 }



 .pb {

     display: inline-flex;

     padding: 3px 8px;

     background: rgba(12, 83, 151, .08);

     border-radius: var(--r-full);

     font-size: .66rem;

     font-weight: 700;

     color: var(--c-primary);

     margin-right: 6px;

     text-transform: uppercase;

     letter-spacing: .3px

 }



 .ph {

     font-size: var(--fs-h4);

     font-weight: 700;

     margin-bottom: 14px;

     padding-bottom: 10px;

     border-bottom: 1px solid var(--c-glass-b);

     color: var(--c-primary)

 }



 /* ========== LEAD FORM ========== */

 .lead {

     padding: var(--section-py) 0;

     position: relative;

     overflow: hidden;

     background: var(--c-bg-main)

 }



 .lf-card {

     background: var(--c-glass);

     backdrop-filter: blur(20px);

     -webkit-backdrop-filter: blur(20px);

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-xl);

     padding: 24px 20px;

     position: relative;

     z-index: 1;

     overflow: hidden;

     max-width: 500px;

     margin: 0 auto;

     box-shadow: 0 15px 50px rgba(0, 0, 0, .05)

 }



 .lf-card::before {

     content: '';

     position: absolute;

     top: 0;

     left: 0;

     right: 0;

     height: 3px;

     background: var(--c-secondary);

 }



 .lf-t {

     font-size: var(--fs-h3);

     font-weight: 700;

     margin-bottom: 4px;

     color: var(--c-primary)

 }



 .lf-s {

     font-size: .88rem;

     color: var(--c-text-2);

     margin-bottom: 20px

 }



 /* ========== FAQ ========== */

 .faq {

     padding: var(--section-py) 0;

     background: var(--c-bg-alt)

 }



 .faq .accordion-item {

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-md) !important;

     margin-bottom: 8px;

     overflow: hidden;

     box-shadow: 0 1px 4px rgba(0, 0, 0, .02)

 }



 .faq .accordion-button {

     background: transparent;

     color: var(--c-primary);

     font-family: var(--ff-h);

     font-size: .92rem;

     font-weight: 600;

     padding: 16px;

     box-shadow: none;

     min-height: 50px;

     line-height: 1.5;

     -webkit-tap-highlight-color: transparent

 }



 .faq .accordion-button::after {

     background-image: none;

     content: '\F282';

     font-family: 'bootstrap-icons';

     font-size: .88rem;

     color: var(--c-primary);

     width: auto;

     height: auto;

     transition: transform .3s ease

 }



 .faq .accordion-button:not(.collapsed) {

     background: rgba(12, 83, 151, .03);

     color: var(--c-primary)

 }



 .faq .accordion-button:not(.collapsed)::after {

     color: var(--c-secondary)

 }



 .faq .accordion-body {

     padding: 0 16px 14px;

     color: var(--c-text-2);

     font-size: .9rem;

     line-height: 1.8

 }







 /* ========== FOUNDER SECTION ========== */

 .founder {

     padding: var(--section-py) 0;

     background: var(--c-bg-main);

     position: relative;

     overflow: hidden

 }



 .founder-bg {

     position: absolute;

     inset: 0;

     background: radial-gradient(ellipse 50% 60% at 30% 50%, rgb(0 130 255 / 18%) 0%, transparent 50%), #ffffff;

 }



 .fcard {

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: var(--r-xl);

     padding: 32px 24px;

     position: relative;

     z-index: 1;

     box-shadow: 0 8px 30px rgba(0, 0, 0, .04)

 }



 .fcard-av-wrap {

     width: 120px;

     height: 120px;

     border-radius: 50%;

     overflow: hidden;

     border: 3px solid rgba(12, 83, 151, .15);

     margin: 0 auto 20px;

     position: relative

 }



 .fcard-av-wrap::after {

     content: '';

     position: absolute;

     inset: -4px;

     border-radius: 50%;

     background: conic-gradient(from 0deg, var(--c-primary), var(--c-secondary), var(--c-primary));

     z-index: -1;

     animation: spin 6s linear infinite

 }



 .fcard-av {

     width: 100%;

     height: 100%;

     object-fit: cover

 }



 .fcard-name {

     font-size: var(--fs-h3);

     font-weight: 700;

     color: var(--c-primary);

     margin-bottom: 4px

 }



 .fcard-role {

     /* font-size: var(--fs-sm); */

     color: var(--c-secondary);

     font-weight: 600;

     margin-bottom: 18px

 }



 .fcard-quote {

     /* font-size: var(--fs-sm); */

     color: var(--c-text-2);

     line-height: 1.8;

     font-style: italic;

     position: relative;

     padding-left: 18px;

     border-left: 3px solid var(--c-secondary)

 }



 .fcard-creds {

     display: flex;

     flex-wrap: wrap;

     gap: 8px;

     margin-top: 20px;

     justify-content: center

 }



 .fcard-cred {

     display: inline-flex;

     align-items: center;

     gap: 5px;

     padding: 5px 12px;

     background: rgba(12, 83, 151, .05);

     border: 1px solid rgba(12, 83, 151, .1);

     border-radius: var(--r-full);

     font-size: var(--fs-xs);

     font-weight: 600;

     color: var(--c-primary)

 }



 .fcard-cred i {

     color: var(--c-secondary);

     font-size: .75rem

 }



 @media(min-width:768px) {

     .fcard {

         padding: 40px 32px

     }



     .fcard-av-wrap {

         width: 140px;

         height: 140px

     }

 }



 /* ========== FINAL CTA SECTION ========== */

 .final-cta {

     padding: var(--section-py) 0;

     position: relative;

     overflow: hidden;

     background: var(--c-primary)

 }



 .final-cta-bg {

     position: absolute;

     inset: 0;

     background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(233, 67, 103, .1)0%, transparent 60%), var(--c-primary)

 }



 .final-cta-blob {

     position: absolute;

     border-radius: 50%;

     filter: blur(80px);

     opacity: .3;

     z-index: 0

 }



 .fcb1 {

     width: 300px;

     height: 300px;

     background: rgba(255, 107, 53, .12);

     top: -10%;

     right: -5%;

     animation: float-slow 8s ease-in-out infinite

 }



 .fcb2 {

     width: 250px;

     height: 250px;

     background: rgba(233, 67, 103, .08);

     bottom: -5%;

     left: -5%;

     animation: float-slow 10s ease-in-out infinite reverse

 }



 .final-cta-c {

     position: relative;

     z-index: 1;

     text-align: center

 }



 .final-cta-t {

     font-size: var(--fs-h2);

     font-weight: 800;

     letter-spacing: -.5px;

     margin-bottom: 8px;

     color: #fff

 }



 /* .final-cta-t .hl {

     background: var(--c-secondary);

     -webkit-background-clip: text;

     -webkit-text-fill-color: transparent;

     background-clip: text

 } */



 .final-cta-sub {

     /* font-size: var(--fs-sm); */

     color: rgba(255, 255, 255, .8);

     max-width: 560px;

     margin: 0 auto 18px;

     line-height: 1.7;

     font-size: 16px;

 }



 .final-cta-btn {

     animation: pulse-glow 2.5s ease-in-out infinite

 }



 .urgency {

     display: flex;

     align-items: center;

     gap: 0 8px;

     margin: 18px 0;

     font-size: 18px;

     color: #beff87;

     /* font-weight: 600; */

     justify-content: center;

 }



 .urgency .dot {

     width: 8px;

     height: 8px;

     background: #beff87;

     border-radius: 50%;

     box-shadow: 0 0 12px var(--c-accent-glow);

     animation: pulse-dot 1.5s ease-in-out infinite

 }





 @media(max-width:767px) {



     .urgency {

         flex-wrap: wrap;

     }

 }







 /* ========== FOOTER ========== */

 .ftr {

     padding: 20px 0;

     background: #0a3d6e;

     color: rgba(255, 255, 255, .8)

 }



 .ftr-logo {

     font-family: var(--ff-h);

     font-size: 1.15rem;

     font-weight: 800;

     color: #fff;

     letter-spacing: -.5px

 }



 .ftr-logo img {

     height: 40px;

     width: auto;

 }



 .ftr-logo span {

     color: var(--c-secondary)

 }



 .ftr-in {

     display: flex;

     flex-direction: column;

     gap: 20px;

     align-items: center;

     text-align: center

 }



 .ftr-l {

     display: flex;

     flex-direction: column;

     gap: 8px;

     align-items: center

 }



 .ftr-copy {

     font-size: .82rem;

     color: rgba(255, 255, 255, .5)

 }



 .ftr-links {

     display: flex;

     gap: 18px

 }



 .ftr-links a {

     font-size: .82rem;

     color: rgba(255, 255, 255, .6);

     min-height: 24px;

     display: flex;

     align-items: center;

     transition: color .3s

 }



 .ftr-links a:hover {

     color: #fff

 }



 .ftr-r {

     display: flex;

     flex-direction: column;

     gap: 8px;

     align-items: center

 }



 .ftr-c {

     display: flex;

     align-items: center;

     gap: 6px;

     font-size: .85rem;

     color: rgba(255, 255, 255, .6);

     min-height: 24px;

     transition: color .3s

 }



 .ftr-c i {

     color: var(--c-secondary);

     font-size: .88rem

 }



 .ftr-c:hover {

     color: #fff

 }



 @media(min-width:768px) {

     .ftr-in {

         flex-direction: row;

         justify-content: space-between;

         text-align: left

     }



     .ftr-l,

     .ftr-r {

         flex-direction: row;

         align-items: center

     }



     .ftr-l {

         gap: 16px

     }

 }





 @media(max-width:767px) {



     .ftr-in {

         gap: 10px;

     }

 }



 /* ========== FLOATING ========== */

 .wa-float {

     position: fixed;

     bottom: 80px;

     right: 14px;

     z-index: 900;

     width: 50px;

     height: 50px;

     display: flex;

     align-items: center;

     justify-content: center;

     background: var(--c-tertiary);

     border-radius: 50%;

     color: #fff;

     font-size: 1.35rem;

     box-shadow: 0 4px 15px rgba(127, 194, 71, .35);

     cursor: pointer;

     transition: all .35s ease;

     opacity: 0;

     transform: scale(0);

     -webkit-tap-highlight-color: transparent

 }



 .wa-float.vis {

     opacity: 1;

     transform: scale(1)

 }



 .wa-float:hover {

     transform: scale(1.08) translateY(-2px)

 }



 .btt {

     position: fixed;

     bottom: 80px;

     left: 14px;

     z-index: 900;

     width: 42px;

     height: 42px;

     display: flex;

     align-items: center;

     justify-content: center;

     background: #fff;

     border: 1px solid var(--c-glass-b);

     border-radius: 50%;

     color: var(--c-primary);

     font-size: .95rem;

     cursor: pointer;

     transition: all .35s ease;

     opacity: 0;

     transform: translateY(16px);

     box-shadow: 0 2px 10px rgba(0, 0, 0, .05);

     -webkit-tap-highlight-color: transparent

 }



 .btt.vis {

     opacity: 1;

     transform: translateY(0)

 }



 .btt:hover {

     border-color: var(--c-primary);

     color: var(--c-secondary)

 }



 .mob-cta {

     position: fixed;

     bottom: 0;

     left: 0;

     right: 0;

     z-index: 800;

     padding: 10px 14px;

     padding-bottom: max(10px, env(safe-area-inset-bottom));

     background: rgba(255, 255, 255, .95);

     backdrop-filter: blur(16px);

     -webkit-backdrop-filter: blur(16px);

     border-top: 1px solid var(--c-glass-b);

     transform: translateY(100%);

     transition: transform .45s ease;

     box-shadow: 0 -4px 20px rgba(0, 0, 0, .05)

 }



 .mob-cta.vis {

     transform: translateY(0)

 }



 .mob-cta .btn-accent {

     width: 100%;

     font-size: .92rem;

     padding: 13px 20px

 }



 @media(min-width:992px) {

     .mob-cta {

         display: none

     }



     .wa-float {

         bottom: 28px;

         right: 28px;

         width: 54px;

         height: 54px;

         font-size: 1.45rem

     }



     .btt {

         bottom: 28px;

         left: 28px

     }

 }



 /* Toast */

 .toast {

     position: fixed;

     top: 14px;

     left: 14px;

     right: 14px;

     z-index: 10000;

     padding: 14px 18px;

     background: #fff;

     border: 1px solid rgba(127, 194, 71, .3);

     border-radius: var(--r-md);

     color: var(--c-text-2);

     font-family: var(--ff-h);

     font-size: .88rem;

     font-weight: 600;

     display: flex;

     align-items: center;

     gap: 8px;

     transform: translateY(-120%);

     transition: transform .4s ease;

     box-shadow: 0 8px 30px rgba(0, 0, 0, .1)

 }



 .toast.on {

     transform: translateY(0)

 }



 .toast i {

     color: var(--c-tertiary)

 }



 .toast.err {

     border-color: rgba(233, 67, 103, .3)

 }



 .toast.err i {

     color: var(--c-secondary)

 }



 /* Row gaps - mobile first */

 .row.gx {

     --bs-gutter-x: 14px;

     --bs-gutter-y: 14px

 }



 @media(min-width:576px) {

     .row.gx {

         --bs-gutter-x: 18px;

         --bs-gutter-y: 16px

     }

 }



 @media(min-width:768px) {

     .row.gx {

         --bs-gutter-x: 20px;

         --bs-gutter-y: 20px

     }

 }



 @media(min-width:992px) {

     .row.gx {

         --bs-gutter-x: 24px;

         --bs-gutter-y: 24px

     }

 }



 [id] {

     scroll-margin-top: 68px

 }



 @media(min-width:992px) {

     [id] {

         scroll-margin-top: 76px

     }

 }



 @media(max-width:991px) {

     body {

         padding-bottom: 68px

     }

 }



 .swiper {

     overflow: hidden

 }