: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);
  }

  #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 */
  #cfx-affiliate-ref .cfx-ref__topline{
    color: var(--cfxText);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
  }

  #cfx-affiliate-ref .cfx-ref__headline{
    margin: 0 0 10px;
    color: var(--cfxText);
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.12;
    max-width: 620px;
  }

  #cfx-affiliate-ref .cfx-ref__subhead{
    margin: 0 0 22px;
    color: var(--cfxMuted);
    font-size: 16px;
    line-height: 1.65;
    max-width: 620px;
  }

  #cfx-affiliate-ref .cfx-ref__steps{
    display: grid;
    gap: 16px;
    max-width: 620px;
  }

  #cfx-affiliate-ref .cfx-ref__step{
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 18px 18px 18px 18px;
    border-radius: 16px;
    border: 1px solid var(--cfxBorder);
    background: #fff;
    box-shadow: 0 1px 0 rgba(16,24,40,.03);
    overflow: hidden;
  }

  /* The primary (blue) step like screenshot */
  #cfx-affiliate-ref .cfx-ref__step--primary{
    background: linear-gradient(180deg, #0D67C8 0%, #0A56AE 100%);
    border-color: rgba(255,255,255,.18);
    box-shadow: var(--cfxShadow2);
  }

  #cfx-affiliate-ref .cfx-ref__stepIcon{
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--cfxBlue);
    background: rgba(43,110,243,.10);
    border: 1px solid rgba(43,110,243,.18);
  }

  #cfx-affiliate-ref .cfx-ref__step--primary .cfx-ref__stepIcon{
    color: #ffffff;
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.24);
  }

  #cfx-affiliate-ref .cfx-ref__stepTitle{
    font-weight: 900;
    color: var(--cfxText);
    font-size: 18px;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
  }
  #cfx-affiliate-ref .cfx-ref__stepText{
    color: var(--cfxMuted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
  }

  #cfx-affiliate-ref .cfx-ref__step--primary .cfx-ref__stepTitle,
  #cfx-affiliate-ref .cfx-ref__step--primary .cfx-ref__stepText{
    color: rgba(255,255,255,.92);
  }

  /* Big step numbers on right */
  #cfx-affiliate-ref .cfx-ref__stepNum{
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: 60px;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: rgba(255,255,255,.20);
    user-select: none;
    pointer-events: none;
  }
  #cfx-affiliate-ref .cfx-ref__stepNum--light{
    color: rgba(16,24,40,.10);
  }

  #cfx-affiliate-ref .cfx-ref__miniCta{
    margin-top: 18px;
    color: var(--cfxText);
    font-weight: 700;
    font-size: 14px;
    opacity: .9;
  }

  /* RIGHT (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;
    }
  }
    .error-section {
        min-height: calc(100vh - 160px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        background: linear-gradient(100deg, #ecf9f5 0%, #ffffff 100%);
        padding-top: 70px;
    }

    .error-container {
        max-width: 1300px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Video Container - Top */
    .video-container {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        width: 100%;
        max-width: 800px;
        margin-bottom: 3rem;
        aspect-ratio: 16/9;
        background-color: #ffffff;
        margin-top: 20px;
    }

    .error-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .video-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
        pointer-events: none;
    }

    .video-fallback {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    }

    .fallback-content h1 {
        font-size: 8rem;
        font-weight: 800;
        background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
        margin-bottom: 0.5rem;
    }

    .fallback-content p {
        font-size: 1.5rem;
        color: #cbd5e1;
        font-weight: 600;
    }

    /* Error Content */
    .error-content {
        max-width: 700px;
        width: 100%;
        margin-top: -40px;
    }

    .error-description {
        font-size: 1.125rem;
        color: #64748b;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        padding: 0 1rem;
        margin-top: 20px;
    }

    /* Buttons - Bottom */
    .error-actions {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-primary, .btn-secondary {
        padding: 0.875rem 1.75rem;
        border-radius: 10px;
        font-weight: 600;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
        text-decoration: none;
        border: 2px solid transparent;
        margin-top: 20px;
    }

    .btn-primary {
        background: linear-gradient(135deg, #ff950b 0%, #ff620b 100%);
        color: white;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
        color: white;
    }

    .btn-secondary {
        background: white;
        color: #475569;
        border-color: #e2e8f0;
    }

    .btn-secondary:hover {
        border-color: #cbd5e1;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .video-container {
            margin-bottom: 2rem;
            aspect-ratio: 4/3;
        }
        
        .error-description {
            font-size: 1rem;
            margin-bottom: 2rem;
        }
        
        .error-actions {
            gap: 0.75rem;
        }
        
        .btn-primary, .btn-secondary {
            padding: 0.75rem 1.5rem;
            font-size: 0.9375rem;
        }
    }

    @media (max-width: 480px) {
        .error-actions {
            flex-direction: column;
            width: 100%;
        }
        
        .btn-primary, .btn-secondary {
            width: 100%;
            justify-content: center;
        }
        
        .fallback-content h1 {
            font-size: 5rem;
        }
        
        .fallback-content p {
            font-size: 1.25rem;
        }
    }
/* =========================================================
   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;
  }
}