:root {
            --primary-blue: #003366;
            --accent-blue: #0056b3;
            --light-bg: #f8fafc;
            --text-dark: #1e293b;
            --text-muted: #64748b;
            --white: #ffffff;
            --border-color: #e2e8f0;
        }

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

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--light-bg);
            color: var(--text-dark);
            line-height: 1.6;
        }

        .heading {
            background: linear-gradient(135deg, var(--primary-blue) 0%, #001a33 100%);
            color: var(--white);
            padding: 80px 20px;
            text-align: center;
        }

        .container { max-width: 1000px; margin: 0 auto; }

        h1 { font-size: 2.5rem; margin-bottom: 20px; font-weight: 700; }

/* =========================================================
   FOUNDATIONS (Fonts, Variables, Resets)
   ========================================================= */

/* Preferred family (others commented in original kept intentional) */
@font-face{
  font-family:'Basier Square';
  src:url('https://www.casefox.com/assets/font/BasierSquare-Regular.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* Global Tokens */
:root{
  --default-font:'Basier Square',sans-serif; --heading-font:'Basier Square',sans-serif; --nav-font:'Basier Square',sans-serif; --body-font-weight:400;
  --background-color:#F8F9FB; --default-color:#0a0a0a; --heading-color:#0B3558; --accent-color:#0066f2; --surface-color:#ffffff; --contrast-color:#ffffff;
  --nav-color:#212529; --nav-hover-color:#0058D3; --nav-mobile-background-color:#ffffff; --nav-dropdown-background-color:#ffffff; --nav-dropdown-color:#212529; --nav-dropdown-hover-color:#0d83fd; scroll-behavior:smooth;
}
.light-background{
  --background-color:#f3f9ff; --surface-color:#ffffff;
}
.dark-background{
  --background-color:#0058D3; --default-color:#ffffff; --heading-color:#ffffff; --surface-color:#0058D3; --contrast-color:#ffffff;
}
body{
  color:var(--default-color); background-color:var(--background-color);
  font-family:var(--default-font); font-weight:var(--body-font-weight);
}
a{
  color:var(--accent-color); text-decoration:none; transition:0.3s;
}
a:hover{
  color:color-mix(in srgb,var(--accent-color),transparent 25%); text-decoration:none;
}
h1,h2,h3,h4,h5,h6{
  color:var(--heading-color); font-family:var(--heading-font);
}
.container {
    max-width: 1300px; margin: 0 auto;
}
/* =========================================================
   HEADER / NAV
   ========================================================= */

.header{
  margin-top:10px; color:var(--default-color); padding:0; transition:all 0.5s;
  z-index:997; position:fixed; width:100%; top:0; left:0;
}
.header .header-container{
  background-color:rgba(255,255,255,0.807); border-radius:15px;
  border:2px solid rgba(0,4,255,0.100); padding:5px 25px;
  max-width:1290px; margin:0 auto; display:flex; justify-content:space-between; align-items:center;
}

/* Scrolled state */
.scrolled .header{ background-color:#ffffff00; }
.scrolled .header .logo h1{ color:#2d405f; }
.scrolled .navmenu ul li a,
.scrolled .navmenu ul li a:focus{ color:#2d405f; }
.scrolled .navmenu ul li:hover > a,
.scrolled .navmenu .active,
.scrolled .navmenu .active:focus{ color:var(--accent-color); }
.scrolled .mobile-nav-toggle{ color:#2d405f; }

/* Logo */
.header .logo{
  line-height:1; padding-left:5px; display:flex; align-items:center;
}
.header .logo img{ max-height:50px; margin-right:0; }
.header .logo h1{
  font-size:24px; margin:0; font-weight:500; color:var(--default-color); transition:color 0.3s;
}

/* Buttons */
.header .btn-getstarted,
.header .btn-getstarted:focus{ border:none; cursor:pointer; }
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover{ color:var(--contrast-color); }

.header .bbtn-getstarted,
.header .bbtn-getstarted:focus{
  color:var(--contrast-color);
  background:linear-gradient(to right,#350091 0%,#0a93e4 100%);
  font-size:14px; padding:10px 20px; margin:0; border-radius:7px;
  transition:0.3s; border:none; cursor:pointer; font-family:var(--nav-font);
}
.header .bbtn-getstarted:hover,
.header .bbtn-getstarted:focus:hover{
  color:var(--contrast-color);
  background:color-mix(in srgb,var(--accent-color),transparent 15%);
}

/* Desktop Nav */
@media (min-width:1210px){
  .navmenu{ padding:0; }
  .navmenu ul{
    margin:0; padding:0; display:flex; list-style:none; align-items:center;
  }
  .navmenu li{ position:relative; }
  .navmenu a,
  .navmenu a:focus{
    color:#10021c; padding:18px 15px; font-size:16px;
    font-family:var(--nav-font); font-weight:500;
    display:flex; align-items:center; justify-content:space-between;
    white-space:nowrap; transition:0.3s; text-decoration:none;
  }
  .navmenu a i,
  .navmenu a:focus i{
    font-size:12px; line-height:0; margin-left:5px; transition:0.3s;
  }
  .navmenu li:last-child a{ padding-right:0; }
  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus{ color:#5d07a8a0; }

  /* Dropdown */
  .navmenu .dropdown ul{
    margin:0; padding:10px 0; display:block; position:absolute; visibility:hidden;
    left:14px; top:130%; opacity:0; transition:0.3s; border-radius:4px; z-index:99;
  }
  .navmenu .dropdown ul li{ min-width:200px; }
  .navmenu .dropdown ul a{ padding:10px 20px; font-size:15px; }
  .navmenu .dropdown ul a i{ font-size:12px; }
  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover > a{ color:var(--nav-dropdown-hover-color); }
  .navmenu .dropdown:hover > ul{ opacity:1; top:100%; visibility:visible; }
  .navmenu .dropdown .dropdown ul{ top:0; left:-90%; visibility:hidden; }
  .navmenu .dropdown .dropdown:hover > ul{ opacity:1; top:0; left:-100%; visibility:visible; }
}

/* Mobile Nav */
@media (max-width:1210px){
  .mobile-nav-toggle{
    color:#5c07a8; font-size:28px; line-height:0; margin-right:10px;
    cursor:pointer; transition:color .3s; display:block;
  }
  .navmenu{ padding:0; z-index:9997; }
  .navmenu ul{
    display:none; list-style:none; position:absolute; inset:60px 20px 20px 20px;
    padding:10px 0; margin:0; border-radius:6px; background:var(--nav-mobile-background-color);
    overflow-y:auto; transition:.3s; z-index:9998; box-shadow:0 0 30px rgba(0,0,0,.1);
  }
  .navmenu a,
  .navmenu a:focus{
    color:var(--nav-dropdown-color); padding:10px 20px; font-family:var(--nav-font);
    font-size:17px; font-weight:500; display:flex; align-items:center; justify-content:space-between;
    white-space:nowrap; transition:.3s; text-decoration:none;
  }
  .navmenu a i,
  .navmenu a:focus i{
    font-size:12px; line-height:0; margin-left:5px; width:30px; height:30px; display:flex;
    align-items:center; justify-content:center; border-radius:50%;
    transition:.3s; background-color:color-mix(in srgb,var(--accent-color),transparent 90%);
  }
  .navmenu a i:hover,
  .navmenu a:focus i:hover{ background-color:var(--accent-color); color:var(--contrast-color); }
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus{ color:var(--nav-dropdown-hover-color); }
  .navmenu .active i,
  .navmenu .active:focus i{
    background-color:var(--accent-color); color:var(--contrast-color); transform:rotate(180deg);
  }
  .navmenu .dropdown ul{
    position:static; display:none; z-index:99; padding:10px 0; margin:10px 20px;
    background:var(--nav-dropdown-background-color);
    border:1px solid color-mix(in srgb,var(--default-color),transparent 90%); box-shadow:none;
    transition:all .5s ease-in-out;
  }
  .navmenu .dropdown ul ul{ background-color:rgba(33,37,41,0.1); }
  .navmenu .dropdown > .dropdown-active{ display:block; background-color:rgba(33,37,41,0.03); }

  .mobile-nav-active{ overflow:hidden; }
  .mobile-nav-active .mobile-nav-toggle{
    color:#2d405f; position:absolute; font-size:32px; top:15px; right:15px; margin-right:0; z-index:9999;
  }
  .mobile-nav-active .navmenu{
    position:fixed; overflow:hidden; inset:0; background:rgba(33,37,41,.8); transition:.3s;
  }
  .mobile-nav-active .navmenu > ul{ display:block; }

  .scrolled .mobile-nav-toggle{ color:#2d405f; }
  .scrolled.mobile-nav-active .mobile-nav-toggle{ color:#2d405f; }
}

@media (max-width:1200px){
  .header{ padding-top:0; }
  .header .header-container{
    margin-left:0; margin-right:0; padding:10px 5px 10px 15px;
  }
  .header .logo{ order:1; }
  .header .btn-getstarted{
    order:2; margin:0 -10px 0 0; padding:6px 15px; margin-top:5px;
  }
  .navmenu{ order:3; }
}

.login-btn{
  display:inline-flex; align-items:center; text-decoration:none; color:#093444;
  font-size:16px; margin-right:8px; font-family:sans-serif;
}
.login-btn i{ color:#093444; font-size:20px; margin-right:8px; }
.login-btn:hover{ text-decoration:underline; }
@media (max-width:499px){ .login-btn{ display:none; } }

/* =========================================================
   CUSTOM MEGA MENU SECTIONS
   ========================================================= */

.ccustom-section{
  padding:0 40px; padding-top:20px; background:#ffffff; border-radius:20px;
  border-top:3px solid rgb(7,7,77); margin-left:-380px; padding-bottom:20px;
}
@media (max-width:768px){
  .ccustom-section{
    padding:0; background-color:#ffffff00; border-radius:20px;
    border-top:3px solid rgba(255,255,255,0); margin-left:0; margin-top:-42px;
  }
}
.custom-section{
  padding:0 40px; padding-top:20px; background:#ffffff; border-radius:20px;
  border-top:3px solid rgb(7,7,77); margin-left:-272px; padding-bottom:15px;
}
.custom-container{
  max-width:1000px; min-width:1200px; margin:auto; display:flex; justify-content:space-between; gap:30px;
}
.custom-column{ width:30%; }
.custom-heading{
  font-weight:600; background:#f3f4f6; color:#374151; padding:8px 12px; border-radius:6px;
  margin-bottom:10px; font-size:16px; margin-left:-5px;
}
.custom-heading.custom-active{ background:#e5e7eb; }
.custom-item{ margin-bottom:-5px; }
.custom-title{
  display:inline-block; font-weight:600; color:#0f172a; text-decoration:none; font-size:15px; margin-left:-20px;
}
.custom-title:hover{ text-decoration:underline; }
.custom-item p{
  color:#6b7280; font-size:11px; margin:-4px 0 0;
}
.custom-see-all{
  color:#6b7280; font-size:14px; text-decoration:none;
}
.custom-see-all:hover{ text-decoration:underline; }
.custom-column img{
  max-width:300px; height:auto; border-radius:10px; display:block;
}
@media (max-width:768px){
  .custom-column img{ display:none; }
  .custom-section{
    padding:0; background:#ffffff00; border-radius:20px;
    border-top:3px solid rgba(255,255,255,0); margin-left:0; margin-top:-42px;
  }
  .custom-title{ margin-top:-25px; }
}
@media (max-width:910px){
  .custom-container{ flex-direction:column; }
  .custom-column{ width:100%; }
  .custom-item{
    margin-bottom:5px; padding:10px; max-width:25%;
  }
}

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

.footer-v2{
  background-image:url('https://www.casefox.com/assets/img/footer-bg.png');
  font-size:15px; background-size:cover; color:#111;
}
.footer-v2 h5{
  font-weight:600; color:#111; margin-bottom:16px;
}
.footer-v2 ul{
  list-style:none; padding-left:0;
}
.footer-v2 ul li{ margin-bottom:10px; }
.footer-v2 ul li a{
  text-decoration:none; color:#111;
}
.footer-v2 ul li a:hover,
.footer-v2 .contact-sales{ text-decoration:underline; }
.footer-v2 .footer-top{ padding:60px 0; }
.footer-v2 .footer-bottom{
  background:#fff; padding:20px 0; border-top:1px solid #cfd8e1; font-size:14px;
}
.footer-v2 .social-icons a{
  margin-right:15px; color:#111; font-size:20px; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
}
.footer-v2 .legal-links{
  text-align:center; flex-grow:1; margin-top:10px; margin-left:0;
}
.footer-v2 .legal-links a{
  margin:0 12px; color:#111; text-decoration:none;
}
.footer-v2 .app-buttons{ display:flex; gap:10px; }
.footer-v2 .app-buttons img{ height:40px; }
.footer-v2 .arrow{ font-weight:500; margin-left:5px; }
.footer-v2 .emoji{ font-size:16px; }
@media (max-width:768px){
  .footer-v2 .footer-bottom .container{
    flex-direction:column; align-items:center; text-align:center; gap:20px;
  }
  .footer-v2 .legal-links a{
    display:inline-block; margin:6px;
  }
  .footer-v2 .app-buttons{ justify-content:center; }
}

/* =========================================================
   UTILITIES (Scroll top, AOS mobile)
   ========================================================= */

.scroll-top{
  position:fixed; visibility:hidden; opacity:0; right:15px; bottom:-15px; z-index:99999;
  background-color:var(--accent-color); width:44px; height:44px; border-radius:50px; transition:all .4s;
}
.scroll-top i{
  font-size:24px; color:var(--contrast-color); line-height:0;
}
.scroll-top:hover{
  background-color:color-mix(in srgb,var(--accent-color),transparent 20%); color:var(--contrast-color);
}
.scroll-top.active{
  visibility:visible; opacity:1; bottom:15px;
}
@media screen and (max-width:768px){
  [data-aos-delay]{ transition-delay:0 !important; }
}

/* =========================================================
   SECTIONS & TITLES
   ========================================================= */

section,.section{
  color:var(--default-color); background-color:var(--background-color);
  padding:0px 0; scroll-margin-top:90px; overflow:clip;
}
@media (max-width:1199px){
  section,.section{ scroll-margin-top:66px; }
}
.section-title{
  text-align:center; padding-bottom:60px; position:relative; margin-top:-30px;
}
.section-title h2{
  font-size:36px; font-weight:700; margin-bottom:20px; padding-bottom:20px; color:rgb(11,53,88); position:relative;
}
.section-title h2:after{
  content:""; position:absolute; display:block; width:50px; height:3px; background:var(--accent-color);
  left:0; right:0; bottom:0; margin:auto;
}
.section-title p{ margin-bottom:0; }
/* =========================================================
   ========================================================= */


  /* =========================
       Reference Layout Styling
       Scoped to #cfx-affiliate-ref
    ========================= */
    #cfx-affiliate-ref.cfx-ref{
        --cfxText:#101828;
        --cfxMuted:#475467;
        --cfxSoft:#F6FAFF;
        --cfxBorder:#E4E7EC;
        --cfxBorder2:#D0D5DD;
        --cfxBlue:#2B6EF3;
        --cfxBlue2:#1F5BD8;
        --cfxShadow: 0 16px 44px rgba(16,24,40,.10);
        --cfxShadow2: 0 10px 26px rgba(16,24,40,.10);

        padding: 56px 0;
        background:
            radial-gradient(1100px 520px at 30% 35%, rgba(43,110,243,.14), transparent 62%),
            radial-gradient(900px 420px at 70% 15%, rgba(43,110,243,.10), transparent 60%),
            linear-gradient(180deg, #ffffff, #fbfdff);
        position: relative;
    }

    #cfx-affiliate-ref .cfx-ref__container{
        width: min(1290px, calc(100% - 48px));
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.0fr 1.0fr;
        gap: 34px;
        align-items: start;
        margin-top: 45px;
    }

    /* LEFT COLUMN - STICKY SETUP WITH PURE CSS */
    #cfx-affiliate-ref .cfx-ref__left{
        position: relative;
        height: 100%;
    }

    #cfx-affiliate-ref .cfx-ref__image-wrapper{
        position: sticky;
        top: 110px; /* Adjust this to match your header height */
        max-width: 560px;
    }

    #cfx-affiliate-ref .cfx-ref__image{
        width: 100%;
        height: auto;
        border-radius: 18px;
        display: block;
    }

    /* RIGHT SIDE (FORM CARD) */
    #cfx-affiliate-ref .cfx-formCard{
        background: #fff;
        border: 1px solid var(--cfxBorder);
        border-radius: 18px;
        box-shadow: var(--cfxShadow);
        overflow: hidden;
    }

    #cfx-affiliate-ref .cfx-formCard__head{
        padding: 18px 20px 0;
    }

    #cfx-affiliate-ref .cfx-formCard__title{
        margin: 0 0 6px;
        color: var(--cfxText);
        font-weight: 900;
        letter-spacing: -0.01em;
        font-size: 20px;
        text-align: center;
    }

    #cfx-affiliate-ref .cfx-formCard__desc{
        margin: 0;
        color: #667085;
        font-size: 13.5px;
        line-height: 1.55;
        text-align: center;
    }

    #cfx-affiliate-ref .cfx-formCard__form{
        padding: 18px 20px 20px;
    }

    #cfx-affiliate-ref .cfx-formCard__grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 14px;
        margin-top: 14px;
    }

    #cfx-affiliate-ref .cfx-formCard__field{
        display: grid;
        gap: 8px;
    }

    #cfx-affiliate-ref .cfx-formCard__field--full{
        grid-column: 1 / -1;
    }

    #cfx-affiliate-ref .cfx-formCard__label{
        font-size: 12.5px;
        font-weight: 700;
        color: #344054;
    }

    #cfx-affiliate-ref .cfx-formCard__input{
        height: 46px;
        border-radius: 12px;
        border: 1px solid var(--cfxBorder2);
        background: #fff;
        padding: 0 12px;
        font-size: 14px;
        color: var(--cfxText);
        outline: none;
        transition: box-shadow .18s ease, border-color .18s ease;
    }

    #cfx-affiliate-ref .cfx-formCard__input:focus{
        border-color: rgba(43,110,243,.65);
        box-shadow: 0 0 0 4px rgba(43,110,243,.14);
    }

    #cfx-affiliate-ref .cfx-formCard__btn{
        width: 100%;
        height: 52px;
        margin-top: 16px;
        border-radius: 12px;
        border: 1px solid var(--cfxBlue);
        background: linear-gradient(180deg, var(--cfxBlue), var(--cfxBlue2));
        color: #fff;
        font-weight: 900;
        font-size: 15px;
        cursor: pointer;
        box-shadow: 0 14px 28px rgba(43,110,243,.22);
        transition: transform .12s ease, box-shadow .12s ease;
    }

    #cfx-affiliate-ref .cfx-formCard__btn:hover{
        transform: translateY(-1px);
        box-shadow: 0 18px 34px rgba(43,110,243,.26);
    }

    #cfx-affiliate-ref .cfx-formCard__btn:active{
        transform: translateY(0);
    }

    #cfx-affiliate-ref .cfx-formCard__note{
        margin: 12px 0 0;
        text-align: center;
        color: #667085;
        font-size: 12.8px;
        line-height: 1.55;
    }

    /* Responsive */
    @media (max-width: 980px){
        #cfx-affiliate-ref .cfx-ref__container{
            grid-template-columns: 1fr;
            gap: 22px;
        }
        
        #cfx-affiliate-ref .cfx-formCard__grid{
            grid-template-columns: 1fr;
        }
        
        #cfx-affiliate-ref .cfx-formCard__field--full{
            grid-column: auto;
        }
        
        /* Disable sticky on mobile */
        #cfx-affiliate-ref .cfx-ref__image-wrapper{
            position: static;
            max-width: 100%;
        }
    }
/* =========================================================
   FAQ
   ========================================================= */

.faq .faq-title{
  font-size:44px; font-weight:700; margin-bottom:1rem; color:var(--heading-color);
}
.faq .faq-description{
  font-size:1rem; color:var(--default-color); margin-bottom:2rem;
}
.faq .faq-arrow{ color:var(--accent-color); }
.faq .faq-container .faq-item{
  background-color:var(--surface-color); position:relative; padding:20px; margin-bottom:15px; border-radius:10px; overflow:hidden;
}
.faq .faq-container .faq-item:last-child{ margin-bottom:0; }
.faq .faq-container .faq-item h3{
  font-weight:600; font-size:16px; line-height:24px; margin:0 30px 0 0; transition:.3s; cursor:pointer; display:flex; align-items:center;
}
.faq .faq-container .faq-item h3 .num{ color:var(--accent-color); padding-right:5px; }
.faq .faq-container .faq-item h3:hover{ color:var(--accent-color); }
.faq .faq-container .faq-item .faq-content{
  display:grid; grid-template-rows:0fr; transition:.3s ease-in-out; visibility:hidden; opacity:0;
}
.faq .faq-container .faq-item .faq-content p{
  margin-bottom:0; overflow:hidden;
}
.faq .faq-container .faq-item .faq-toggle{
  position:absolute; top:20px; right:20px; font-size:16px; line-height:0; transition:.3s; cursor:pointer;
}
.faq .faq-container .faq-item .faq-toggle:hover{ color:var(--accent-color); }
.faq .faq-container .faq-active h3{ color:var(--accent-color); }
.faq .faq-container .faq-active .faq-content{
  grid-template-rows:1fr; visibility:visible; opacity:1; padding-top:10px;
}
.faq .faq-container .faq-active .faq-toggle{
  transform:rotate(90deg); color:var(--accent-color);
}
.faq-left{ position:static; }
@media (min-width:992px){
  .faq-left{
    position:sticky; top:100px; align-self:flex-start;
  }
}