/* =========================================================
   SHARED STYLE INDEX
   1. Theme Variables + Global Styles
   2. Navbar + Mega Menu
   3. Drawers + Shared Overlays
   4. Search + Settings + Auth Modals
   5. Shared Video Modal
   6. Shared Responsive Rules
   7. Footer
   ========================================================= */

    /* =========================================================
       CSS INDEX
       1. Theme Variables
       2. Global Styles
       3. Loader
       4. Navbar
       5. Profile Dropdown
       6. Overlays
       7. Mega Menu (Desktop + Mobile)
       8. Drawers
       9. Modals / Auth
      10. Hero Section
      11. Reels Section + Video Modal
      12. Home Showcase Sections
      13. Utilities / Responsive
       ========================================================= */
    :root{
      --nav-bg: linear-gradient(90deg,#05052b 0%,#070733 100%);
      --menu-bg: linear-gradient(180deg,#040420 0%,#070733 50%,#050526 100%);
      --panel-bg: linear-gradient(180deg,#060625 0%,#0a0a38 100%);
      --page-bg:#050526;
      --card-bg:rgba(255,255,255,.04);
      --card-soft:rgba(255,255,255,.03);
      --text-main:#fff;
      --text-muted:rgba(255,255,255,.68);
      --border-light:rgba(255,255,255,.12);
      --bg-light:rgba(255,255,255,.04);
      --blue:#2563ff;
      --shadow:0 10px 30px rgba(0,0,0,.25);
      --overlay:rgba(3,4,26,.78);
      --success:#22c55e;
      --danger:#ef4444;
      --scrollbar-track:rgba(255,255,255,.055);
      --scrollbar-thumb:rgba(79,134,255,.72);
      --scrollbar-thumb-hover:rgba(92,137,255,.95);
    }

    html[data-theme="light"]{
      --nav-bg: linear-gradient(90deg,#ffffff 0%,#f4f7ff 100%);
      --menu-bg: linear-gradient(180deg,#ffffff 0%,#eef4ff 50%,#f8fbff 100%);
      --panel-bg: linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%);
      --page-bg:#ffffff;
      --card-bg:rgba(15,23,42,.04);
      --card-soft:rgba(15,23,42,.03);
      --text-main:#0f172a;
      --text-muted:rgba(15,23,42,.65);
      --border-light:rgba(15,23,42,.12);
      --bg-light:rgba(15,23,42,.04);
      --shadow:0 12px 30px rgba(15,23,42,.10);
      --overlay:rgba(226,234,247,.75);
      --scrollbar-track:rgba(15,23,42,.075);
      --scrollbar-thumb:rgba(37,99,255,.58);
      --scrollbar-thumb-hover:rgba(37,99,255,.82);
    }

    *{box-sizing:border-box}

    html,
    *{
      scrollbar-width:thin;
      scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
    }

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

    *::-webkit-scrollbar-track{
      background:var(--scrollbar-track);
      border-radius:999px;
    }

    *::-webkit-scrollbar-thumb{
      min-height:42px;
      border:2px solid transparent;
      border-radius:999px;
      background:
        linear-gradient(180deg,var(--scrollbar-thumb-hover) 0%,var(--scrollbar-thumb) 100%)
        padding-box;
    }

    *::-webkit-scrollbar-thumb:hover{
      background:
        linear-gradient(180deg,#6f99ff 0%,var(--scrollbar-thumb-hover) 100%)
        padding-box;
    }

    *::-webkit-scrollbar-corner{
      background:transparent;
    }


    /* GLOBAL Z-INDEX SYSTEM */
    .fullscreen-menu { z-index: 9999 !important; }
    .panel-overlay { z-index: 9998 !important; }
    .side-drawer { z-index: 10000 !important; }
    .modal-overlay { z-index: 10001 !important; }
    .modal-card,
    .auth-modal { z-index: 10002 !important; }


    body{
      margin:0;
      background:var(--page-bg);
      color:var(--text-main);
      font-family:Arial,sans-serif;
      overflow-x:hidden;
      transition:.3s ease;
    }

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

    body.is-loading{
      overflow:hidden;
    }

    .page-loader{
      position:fixed;
      inset:0;
      z-index:12000;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      background:radial-gradient(circle at top, rgba(79,134,255,.16), transparent 38%), var(--page-bg);
      transform:translateY(0);
      transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .5s ease;
    }

    .page-loader.slide-up{
      transform:translateY(-100%);
      opacity:0;
      pointer-events:none;
    }

    .loader-content{
      width:min(420px, 100%);
      text-align:center;
      animation:loaderFadeIn .7s ease;
    }

    .loader-logo-wrap{
      position:relative;
      width:108px;
      height:108px;
      margin:0 auto 22px;
      display:grid;
      place-items:center;
      overflow:hidden;
      border:1px solid var(--border-light);
      border-radius:50%;
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      box-shadow:0 18px 45px rgba(0,0,0,.28), 0 0 36px rgba(37,99,255,.18);
    }

    .loader-logo-wrap::before{
      content:"";
      position:absolute;
      inset:-35%;
      background:conic-gradient(from 0deg, transparent, rgba(79,134,255,.55), transparent 55%);
      animation:loaderSpin 2.2s linear infinite;
    }

    .loader-logo{
      position:relative;
      z-index:1;
      width:74px;
      height:74px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:linear-gradient(180deg, rgba(5,5,43,.92), rgba(7,7,51,.96));
    }

    html[data-theme="light"] .loader-logo{
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,247,255,.96));
    }

    .loader-logo img{
      width:48px;
      height:48px;
      object-fit:contain;
    }

    .loader-title{
      margin:0 0 8px;
      color:var(--text-main);
      font-size:clamp(30px, 4vw, 44px);
      font-weight:700;
      letter-spacing:0;
    }

    .loader-slogan{
      margin:0;
      color:var(--text-muted);
      font-size:15px;
      line-height:1.8;
    }

    .loader-progress{
      position:relative;
      width:min(260px, 100%);
      height:4px;
      margin:24px auto 0;
      overflow:hidden;
      border-radius:999px;
      background:rgba(255,255,255,.08);
    }

    html[data-theme="light"] .loader-progress{
      background:rgba(15,23,42,.08);
    }

    .loader-progress span{
      display:block;
      width:40%;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,#4f86ff 0%,#2563ff 100%);
      animation:loaderProgress 1.2s ease-in-out infinite;
    }

    @keyframes loaderSpin{
      to{transform:rotate(360deg)}
    }

    @keyframes loaderProgress{
      0%{transform:translateX(-120%)}
      100%{transform:translateX(320%)}
    }

    @keyframes loaderFadeIn{
      from{opacity:0;transform:translateY(16px)}
      to{opacity:1;transform:translateY(0)}
    }

    .container{
      max-width:1920px;
    }

    .top-nav-wrap{
      padding:14px;
      max-width:1920px;
      margin:0 auto;
      position:relative;
      z-index:2000;
    }

    .custom-navbar{
      background:var(--nav-bg);
      border:1px solid var(--border-light);
      border-radius:50px;
      padding:10px 14px;
      position:relative;
      z-index:2001;
      box-shadow:var(--shadow);
      min-height:76px;
    }

    .nav-left-group,
    .nav-icon-group,
    .nav-right-group{
      display:flex;
      align-items:center;
      gap:12px;
      position:relative;
      z-index:2;
    }

    .nav-left-group{
      flex:1 1 auto;
      min-width:0;
    }

    .pref-badges{
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .pref-badge{
      height:42px;
      padding:0 16px;
      border-radius:999px;
      border:1px solid var(--border-light);
      background:var(--bg-light);
      color:var(--text-main);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-size:14px;
      font-weight:600;
      line-height:1;
      cursor:pointer;
      transition:.3s ease;
      box-shadow:0 10px 26px rgba(0,0,0,.12);
    }

    .pref-badge:hover{
      transform:translateY(-2px);
      border-color:rgba(79,134,255,.34);
      background:rgba(255,255,255,.10);
      box-shadow:0 14px 28px rgba(0,0,0,.18);
    }

    .pref-badge i{
      font-size:15px;
    }

    .circle-btn{
      width:48px;
      height:48px;
      border-radius:50%;
      border:1px solid var(--border-light);
      background:var(--bg-light);
      color:var(--text-main);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      cursor:pointer;
      transition:.3s ease;
      text-decoration:none;
      flex-shrink:0;
    }

    .circle-btn:hover{
      background:rgba(37,99,255,.12);
      transform:translateY(-2px);
      color:var(--text-main);
    }

    .icon-wrap{position:relative}

    .icon-badge{
      position:absolute;
      top:-4px;
      right:-3px;
      min-width:22px;
      height:22px;
      border-radius:999px;
      background:linear-gradient(180deg,#4f86ff 0%,#2563ff 100%);
      color:#fff;
      font-size:11px;
      font-weight:700;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0 6px;
      box-shadow:0 8px 18px rgba(37,99,255,.35);
    }

    html[dir="rtl"] .icon-badge{
      right:auto;
      left:-3px;
    }

    .fab-top{
      position:fixed;
      right:22px;
      bottom:22px;
      z-index:10020;
      width:54px;
      height:54px;
      border:0;
      border-radius:50%;
      background:linear-gradient(180deg,#4f86ff 0%,#2563ff 100%);
      color:#fff;
      box-shadow:0 14px 28px rgba(37,99,255,.35);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      cursor:pointer;
      opacity:0;
      visibility:hidden;
      transform:translateY(16px);
      transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
    }

    .fab-top.show{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    .fab-top:hover{
      transform:translateY(-3px);
    }

    html[dir="rtl"] .fab-top{
      right:auto;
      left:22px;
    }

    .brand-logo{
      text-decoration:none;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      flex-shrink:0;
      position:relative;
      z-index:2;
    }

    .brand-logo img{
      height:52px;
      width:auto;
      max-width:min(100%, 260px);
      object-fit:contain;
    }

    .auth-btn{
      min-width:102px;
      height:50px;
      border-radius:30px;
      padding:0 24px;
      font-weight:600;
      font-size:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition:.3s ease;
      text-decoration:none;
      border:0;
      cursor:pointer;
    }

    .btn-signin{
      border:2px solid var(--border-light);
      color:var(--text-main);
      background:transparent;
    }

    .btn-signin:hover{
      background:var(--bg-light);
      color:var(--text-main);
    }

    .btn-signup,.btn-gradient{
      color:#fff;
      background:linear-gradient(180deg,#4f86ff 0%,#2563ff 100%);
      box-shadow:0 8px 20px rgba(37,99,255,.35);
      border:0;
    }

    .btn-signup:hover,.btn-gradient:hover{
      color:#fff;
      transform:translateY(-2px);
    }

    /* PROFILE */
    .profile-dropdown-wrap{position:relative}

    .profile-btn{
      height:52px;
      border-radius:999px;
      border:1px solid var(--border-light);
      background:var(--bg-light);
      color:var(--text-main);
      padding:0 14px 0 10px;
      display:inline-flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      transition:.3s ease;
    }

    .profile-btn:hover{background:rgba(37,99,255,.12)}

    .profile-avatar{
      width:34px;
      height:34px;
      border-radius:50%;
      background:linear-gradient(180deg,#4f86ff 0%,#2563ff 100%);
      color:#fff;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:14px;
    }

    .profile-name{
      font-size:14px;
      font-weight:700;
    }

    .profile-dropdown-menu{
      position:absolute;
      top:calc(100% + 10px);
      right:0;
      width:230px;
      background:var(--panel-bg);
      border:1px solid var(--border-light);
      border-radius:18px;
      padding:10px;
      box-shadow:0 20px 40px rgba(0,0,0,.22);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translateY(10px);
      transition:.3s ease;
      z-index:100;
    }

    html[dir="rtl"] .profile-dropdown-menu{
      right:auto;
      left:0;
    }

    .profile-dropdown-menu.active{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateY(0);
    }

    .profile-menu-item{
      width:100%;
      height:46px;
      border:0;
      background:transparent;
      color:var(--text-main);
      border-radius:12px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 14px;
      cursor:pointer;
      transition:.3s ease;
      text-align:left;
    }

    html[dir="rtl"] .profile-menu-item{text-align:right}

    .profile-menu-item:hover{background:var(--bg-light)}

    /* OVERLAYS */
    .fullscreen-menu,
    .panel-overlay,
    .modal-overlay{
      position:fixed;
      inset:0;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:.35s ease;
    }

    .fullscreen-menu,
    .modal-overlay,
    .panel-overlay{
      background:var(--overlay);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    .fullscreen-menu.active,
    .panel-overlay.active,
    .modal-overlay.active{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    /* MEGA MENU */
    .desktop-full-menu{
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(40,76,255,.10), transparent 35%), var(--menu-bg);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:110px 60px 60px;
      opacity:0;
      transform:scale(1.03);
      transition:.45s ease;
    }

    .fullscreen-menu.active .desktop-full-menu{
      opacity:1;
      transform:scale(1);
    }

    .desktop-menu-close,
    .panel-close-btn,
    .modal-close-btn{
      width:48px;
      height:48px;
      border-radius:50%;
      border:1px solid var(--border-light);
      background:var(--card-bg);
      color:var(--text-main);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      cursor:pointer;
      transition:.3s ease;
      flex-shrink:0;
    }

    .desktop-menu-close{
      position:absolute;
      top:28px;
      right:28px;
    }

    html[dir="rtl"] .desktop-menu-close{
      right:auto;
      left:28px;
    }

    .desktop-menu-close:hover,
    .panel-close-btn:hover,
    .modal-close-btn:hover{
      background:var(--bg-light);
      transform:rotate(90deg);
    }

    .desktop-menu-inner{
      width:100%;
      max-width:1400px;
      display:grid;
      grid-template-columns:1fr 1.2fr;
      gap:60px;
      align-items:start;
    }

    .desktop-menu-left small{
      display:inline-block;
      font-size:14px;
      letter-spacing:3px;
      text-transform:uppercase;
      color:var(--text-muted);
      margin-bottom:18px;
    }

    .desktop-menu-left h2{
      font-size:68px;
      line-height:1;
      font-weight:700;
      margin-bottom:20px;
    }

    .desktop-menu-left p{
      font-size:18px;
      line-height:1.8;
      color:var(--text-muted);
      max-width:520px;
      margin-bottom:28px;
    }

    .desktop-menu-auth{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:22px;
    }

    .mega-nav-columns{
      display:grid;
      grid-template-columns:280px 1fr;
      gap:20px;
      align-items:start;
    }

    .desktop-menu-links,
    .mega-submenu-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:14px;
    }

    .desktop-menu-links a,
    .mega-submenu-list a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      text-decoration:none;
      color:var(--text-main);
      font-size:24px;
      font-weight:600;
      padding:18px 20px;
      border-radius:20px;
      background:var(--card-soft);
      border:1px solid var(--border-light);
      transition:.3s ease;
    }

    .mega-submenu-list a{
      font-size:17px;
      padding:16px 18px;
      font-weight:600;
    }

    .desktop-menu-links a:hover,
    .desktop-menu-links a.active,
    .mega-submenu-list a:hover{
      background:rgba(37,99,255,.12);
      border-color:rgba(37,99,255,.30);
    }

    .mega-submenu-panel{
      border:1px solid var(--border-light);
      background:var(--card-soft);
      border-radius:24px;
      padding:20px;
      min-height:520px;
    }

    .mega-submenu-panel h4{
      margin:0 0 8px;
      font-size:30px;
      font-weight:700;
    }

    .mega-submenu-panel p{
      margin:0 0 18px;
      color:var(--text-muted);
      font-size:14px;
      line-height:1.7;
    }

    .mega-feature-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px;
    }

    .mega-feature-card{
      position:relative;
      overflow:hidden;
      min-height:180px;
      border-radius:22px;
      border:1px solid var(--border-light);
      background:var(--card-soft);
      text-decoration:none;
      color:#fff;
    }

    .mega-feature-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:brightness(.72);
    }

    .mega-feature-card .content{
      position:absolute;
      inset:auto 0 0 0;
      padding:18px;
      background:linear-gradient(to top, rgba(0,0,0,.62), transparent);
    }

    .mega-feature-card h5{
      margin:0 0 6px;
      font-size:20px;
      font-weight:700;
      color:#fff;
    }

    .mega-feature-card p{
      margin:0;
      font-size:13px;
      color:rgba(255,255,255,.84);
    }

    /* MOBILE MENU */
    .mobile-menu-panel{
      display:none;
      position:absolute;
      top:0;
      left:0;
      width:360px;
      max-width:92%;
      height:100%;
      background:var(--menu-bg);
      border-right:1px solid var(--border-light);
      box-shadow:20px 0 50px rgba(0,0,0,.20);
      transform:translateX(-100%);
      transition:.45s ease;
      z-index:10000;
      flex-direction:column;
      padding:22px 18px 24px;
      overflow-y:auto;
    }

    html[dir="rtl"] .mobile-menu-panel{
      left:auto;
      right:0;
      border-right:0;
      border-left:1px solid var(--border-light);
      box-shadow:-20px 0 50px rgba(0,0,0,.20);
      transform:translateX(100%);
    }

    .fullscreen-menu.active .mobile-menu-panel{transform:translateX(0)}

    .menu-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:26px;
    }

    .menu-logo img{height:46px}

    .menu-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:12px;
    }

    .menu-links a,
    .mobile-submenu-toggle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      width:100%;
      color:var(--text-main);
      text-decoration:none;
      font-size:18px;
      font-weight:600;
      padding:16px 18px;
      border-radius:18px;
      background:var(--card-soft);
      border:1px solid var(--border-light);
      transition:.3s ease;
      cursor:pointer;
    }

    .mobile-submenu{
      display:none;
      padding:10px 0 4px 14px;
    }

    html[dir="rtl"] .mobile-submenu{
      padding:10px 14px 4px 0;
    }

    .mobile-submenu.show{display:grid;gap:10px}

    .mobile-submenu a{
      font-size:15px;
      padding:12px 14px;
      font-weight:500;
    }

    .menu-auth{
      margin-top:22px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .menu-auth .auth-btn{width:100%}

    .menu-tools{
      display:flex;
      gap:10px;
      margin-top:16px;
      flex-wrap:wrap;
    }

    /* DRAWERS */
    .side-drawer{
      position:fixed;
      top:0;
      right:0 !important;
      left:auto !important;
      width:420px;
      max-width:100%;
      height:100vh;
      background:var(--panel-bg);
      border-left:1px solid var(--border-light);
      border-right:0;
      box-shadow:none;
      z-index:10030;
      transform:translateX(100%);
      transition:transform .45s ease;
      will-change:transform;
      display:flex;
      flex-direction:column;
    }

    html[dir="ltr"] .side-drawer,
    html[dir="rtl"] .side-drawer{
      right:0 !important;
      left:auto !important;
      border-left:1px solid var(--border-light);
      border-right:0;
      box-shadow:none;
      transform:translateX(100%);
    }

    html[dir="ltr"] .side-drawer.active,
    html[dir="rtl"] .side-drawer.active,
    .side-drawer.active{
      box-shadow:-20px 0 50px rgba(0,0,0,.20);
      transform:translateX(0) !important;
    }

    .panel-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:22px 20px;
      border-bottom:1px solid var(--border-light);
    }

    .panel-header h4{
      margin:0;
      font-size:22px;
      font-weight:700;
      color:var(--text-main);
    }

    .drawer-body{
      flex:1;
      overflow-y:auto;
      padding:18px;
    }

    .drawer-item{
      display:flex;
      gap:14px;
      padding:14px;
      border:1px solid var(--border-light);
      background:var(--card-soft);
      border-radius:20px;
      margin-bottom:14px;
    }

    .drawer-item-thumb{
      width:82px;
      height:82px;
      border-radius:16px;
      object-fit:cover;
      flex-shrink:0;
      background:var(--bg-light);
    }

    .drawer-item-content{flex:1;min-width:0}

    .drawer-item-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:8px;
    }

    .drawer-item-title{
      margin:0;
      font-size:16px;
      font-weight:700;
      line-height:1.4;
      color:var(--text-main);
    }

    .drawer-remove{
      border:0;
      background:transparent;
      color:var(--text-muted);
      font-size:18px;
      padding:0;
      line-height:1;
      cursor:pointer;
      transition:.3s ease;
    }

    .drawer-remove:hover{
      color:var(--text-main);
      transform:scale(1.08);
    }

    .drawer-meta{
      font-size:13px;
      color:var(--text-muted);
      margin-bottom:10px;
    }

    .drawer-bottom-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .qty-box{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:6px;
      border-radius:999px;
      border:1px solid var(--border-light);
      background:var(--card-soft);
    }

    .qty-btn{
      width:30px;
      height:30px;
      border:0;
      border-radius:50%;
      background:var(--bg-light);
      color:var(--text-main);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:.3s ease;
    }

    .qty-btn:hover{background:rgba(37,99,255,.30)}

    .qty-value{
      min-width:18px;
      text-align:center;
      font-size:14px;
      font-weight:700;
      color:var(--text-main);
    }

    .drawer-price{
      font-size:17px;
      font-weight:700;
      white-space:nowrap;
      color:var(--text-main);
    }

    .drawer-footer{
      padding:20px;
      border-top:1px solid var(--border-light);
      background:var(--card-soft);
    }

    .drawer-summary{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:16px;
    }

    .drawer-summary span:first-child{
      color:var(--text-muted);
      font-size:15px;
    }

    .drawer-summary strong{
      font-size:24px;
      color:var(--text-main);
    }

    .drawer-actions{
      display:grid;
      gap:12px;
    }

    .btn-drawer{
      height:52px;
      border-radius:16px;
      font-weight:700;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition:.3s ease;
    }

    .btn-outline-lite{
      background:transparent;
      color:var(--text-main);
      border:1px solid var(--border-light);
    }

    .btn-outline-lite:hover{background:var(--bg-light)}

    .notify-item{
      display:flex;
      gap:14px;
      padding:16px;
      border:1px solid var(--border-light);
      background:var(--card-soft);
      border-radius:18px;
      margin-bottom:14px;
    }

    .notify-icon{
      width:46px;
      height:46px;
      border-radius:14px;
      background:rgba(37,99,255,.14);
      color:#4f86ff;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      flex-shrink:0;
    }

    .notify-content h6{
      margin:0 0 5px;
      font-size:15px;
      font-weight:700;
    }

    .notify-content p{
      margin:0 0 6px;
      font-size:13px;
      color:var(--text-muted);
      line-height:1.6;
    }

    .notify-time{
      font-size:12px;
      color:var(--text-muted);
    }

    /* MODALS */
    .modal-card,
    .auth-modal{
      position:fixed;
      top:50%;
      left:50%;
      width:min(680px, calc(100% - 24px));
      transform:translate(-50%, -50%) scale(.94);
      background:var(--panel-bg);
      border:1px solid var(--border-light);
      border-radius:28px;
      box-shadow:0 24px 60px rgba(0,0,0,.22);
      z-index:10060;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:.35s ease;
      overflow:hidden;
    }

    .search-modal{width:min(840px, calc(100% - 24px))}
    .auth-modal{width:min(520px, calc(100% - 24px))}
    .otp-modal{width:min(460px, calc(100% - 24px))}

    .modal-card.active,
    .auth-modal.active{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translate(-50%, -50%) scale(1);
    }

    .modal-header-custom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:22px 24px;
      border-bottom:1px solid var(--border-light);
    }

    .modal-title-wrap h4{
      margin:0 0 4px;
      font-size:24px;
      font-weight:700;
      color:var(--text-main);
    }

    .modal-title-wrap p{
      margin:0;
      font-size:14px;
      color:var(--text-muted);
    }

    .settings-body,
    .search-body,
    .auth-body{
      padding:24px;
    }

    .settings-body{
      display:grid;
      gap:20px;
    }

    .settings-card{
      border:1px solid var(--border-light);
      background:var(--card-soft);
      border-radius:22px;
      padding:20px;
    }

    #settingsModal{
      color-scheme:dark;
    }

    .settings-card-header{margin-bottom:16px}

    .settings-card-header h5{
      margin:0 0 6px;
      font-size:18px;
      font-weight:700;
    }

    .settings-card-header p{
      margin:0;
      color:var(--text-muted);
      font-size:14px;
    }

    .theme-options{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }

    .theme-option{
      border:1px solid var(--border-light);
      border-radius:20px;
      background:var(--card-bg);
      padding:16px;
      cursor:pointer;
      transition:.3s ease;
      text-align:left;
      color:var(--text-main);
      width:100%;
    }

    html[dir="rtl"] .theme-option{text-align:right}

    .theme-option:hover{
      transform:translateY(-2px);
      border-color:rgba(37,99,255,.35);
    }

    .theme-option.active{
      border-color:rgba(37,99,255,.55);
      box-shadow:0 0 0 3px rgba(37,99,255,.12);
    }

    .theme-preview{
      height:88px;
      border-radius:16px;
      margin-bottom:12px;
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      position:relative;
    }

    .theme-preview.dark-preview{
      background:linear-gradient(180deg,#050526 0%,#0a0a38 100%);
    }

    .theme-preview.light-preview{
      background:linear-gradient(180deg,#ffffff 0%,#edf3ff 100%);
      border-color:rgba(15,23,42,.08);
    }

    .theme-preview::before{
      content:"";
      position:absolute;
      top:12px;
      left:12px;
      right:12px;
      height:14px;
      border-radius:999px;
      background:rgba(255,255,255,.14);
    }

    .light-preview::before{background:rgba(15,23,42,.10)}

    .theme-preview::after{
      content:"";
      position:absolute;
      left:12px;
      right:12px;
      bottom:12px;
      height:38px;
      border-radius:12px;
      background:rgba(255,255,255,.10);
    }

    .light-preview::after{background:rgba(15,23,42,.08)}

    .theme-option strong{
      display:block;
      font-size:16px;
      margin-bottom:4px;
    }

    .theme-option span{
      display:block;
      font-size:13px;
      color:var(--text-muted);
    }

    .settings-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
    }

    .form-select.custom-select,
    .search-input,
    .auth-input,
    input.form-control,
    select.form-control,
    textarea.form-control{
      height:54px;
      border-radius:999px;
      border:1px solid var(--border-light);
      background-color:var(--card-bg);
      color:var(--text-main);
      box-shadow:none;
      padding-left:16px;
      padding-right:16px;
      width:100%;
      transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
    }

    textarea.form-control{
      height:auto;
      min-height:120px;
      border-radius:24px;
      padding-top:16px;
      padding-bottom:16px;
    }

    .form-select.custom-select{
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      color-scheme:dark;
      border-color:rgba(255,255,255,.12);
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(255,255,255,.72) 50%),
        linear-gradient(135deg, rgba(255,255,255,.72) 50%, transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      background-position:
        calc(100% - 22px) calc(50% - 2px),
        calc(100% - 16px) calc(50% - 2px),
        0 0;
      background-size:6px 6px, 6px 6px, 100% 100%;
      background-repeat:no-repeat;
      padding-right:42px;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.12);
    }

    .form-select.custom-select:hover{
      border-color:rgba(88,164,255,.28);
      box-shadow:inset 0 0 0 1px rgba(88,164,255,.08), 0 12px 26px rgba(0,0,0,.16);
    }

    .form-select.custom-select option,
    .form-select.custom-select optgroup{
      background-color:#0f1238;
      color:#f8fbff;
    }

    .form-select.custom-select:focus,
    .search-input:focus,
    .auth-input:focus,
    input.form-control:focus,
    select.form-control:focus,
    textarea.form-control:focus{
      border-color:rgba(37,99,255,.45);
      box-shadow:0 0 0 3px rgba(37,99,255,.10);
      outline:none;
    }

    .settings-footer{
      padding:0 24px 24px;
      display:flex;
      justify-content:flex-end;
      gap:12px;
      flex-wrap:wrap;
    }

    .settings-btn{
      min-width:140px;
      height:52px;
      border-radius:16px;
      font-weight:700;
      border:1px solid var(--border-light);
      transition:.3s ease;
      cursor:pointer;
    }

    .settings-btn.secondary{
      background:transparent;
      color:var(--text-main);
    }

    .settings-btn.secondary:hover{background:var(--bg-light)}

    .settings-btn.primary{
      background:linear-gradient(180deg,#4f86ff 0%,#2563ff 100%);
      border:0;
      color:#fff;
      box-shadow:0 8px 20px rgba(37,99,255,.30);
    }

    .search-box-wrap{
      position:relative;
      margin-bottom:20px;
    }

    .search-box-wrap i{
      position:absolute;
      top:50%;
      left:18px;
      transform:translateY(-50%);
      color:var(--text-muted);
      font-size:18px;
    }

    html[dir="rtl"] .search-box-wrap i{
      left:auto;
      right:18px;
    }

    .search-input{
      padding-left:50px;
      padding-right:18px;
      font-size:16px;
    }

    html[dir="rtl"] .search-input{
      padding-left:18px;
      padding-right:50px;
    }

    .search-results{
      display:grid;
      gap:12px;
    }

    .search-result-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:16px 18px;
      border-radius:18px;
      border:1px solid var(--border-light);
      background:var(--card-soft);
      transition:.3s ease;
    }

    .search-result-item:hover{
      background:rgba(37,99,255,.10);
      border-color:rgba(37,99,255,.25);
    }

    .search-result-item strong{
      display:block;
      font-size:16px;
      margin-bottom:4px;
    }

    .search-result-item span{
      font-size:13px;
      color:var(--text-muted);
    }

    /* AUTH */
    .auth-form{
      display:grid;
      gap:16px;
    }

    .auth-field label{
      display:block;
      font-size:14px;
      font-weight:600;
      margin-bottom:8px;
    }

    .auth-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }

    .auth-input-wrap{
      position:relative;
    }

    .toggle-password{
      position:absolute;
      top:50%;
      right:14px;
      transform:translateY(-50%);
      border:0;
      background:transparent;
      color:var(--text-muted);
      font-size:18px;
      cursor:pointer;
      padding:0;
    }

    html[dir="rtl"] .toggle-password{
      right:auto;
      left:14px;
    }

    .auth-input.has-toggle{
      padding-right:46px;
    }

    html[dir="rtl"] .auth-input.has-toggle{
      padding-right:16px;
      padding-left:46px;
    }

    .auth-error{
      font-size:12px;
      color:var(--danger);
      margin-top:6px;
      display:none;
    }

    .auth-input.invalid{
      border-color:rgba(239,68,68,.55);
      box-shadow:0 0 0 3px rgba(239,68,68,.10);
    }

    .auth-options{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    .auth-check{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--text-muted);
      font-size:14px;
      cursor:pointer;
      user-select:none;
    }

    .auth-check input{
      appearance:none;
      -webkit-appearance:none;
      width:20px;
      height:20px;
      margin:0;
      flex:0 0 20px;
      border-radius:7px;
      border:1px solid var(--border-light);
      background:rgba(255,255,255,.06);
      display:inline-grid;
      place-items:center;
      cursor:pointer;
      transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .auth-check input::before{
      content:"";
      width:10px;
      height:6px;
      border-left:2px solid #fff;
      border-bottom:2px solid #fff;
      transform:rotate(-45deg) scale(0);
      transform-origin:center;
      transition:transform .18s ease;
    }

    .auth-check input:checked{
      border-color:rgba(79,134,255,.8);
      background:linear-gradient(180deg,#4f86ff 0%,#2563ff 100%);
      box-shadow:0 10px 20px rgba(37,99,255,.24);
    }

    .auth-check input:checked::before{
      transform:rotate(-45deg) scale(1);
    }

    .auth-check input:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(37,99,255,.16);
    }

    html[data-theme="light"] .auth-check input{
      background:rgba(255,255,255,.88);
      border-color:rgba(15,23,42,.16);
    }

    html[data-theme="light"] .auth-check input:checked{
      border-color:rgba(37,99,255,.78);
      background:linear-gradient(180deg,#4f86ff 0%,#2563ff 100%);
    }

    .auth-link{
      color:#4f86ff;
      text-decoration:none;
      font-size:14px;
      font-weight:600;
    }

    .auth-link:hover{text-decoration:underline}

    .auth-submit{
      height:54px;
      border-radius:16px;
      border:0;
      background:linear-gradient(180deg,#4f86ff 0%,#2563ff 100%);
      color:#fff;
      font-weight:700;
      box-shadow:0 8px 20px rgba(37,99,255,.30);
      cursor:pointer;
      transition:.3s ease;
    }

    .auth-submit:hover{transform:translateY(-2px)}

    .auth-divider{
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--text-muted);
      font-size:13px;
      margin:2px 0;
    }

    .auth-divider::before,.auth-divider::after{
      content:"";
      flex:1;
      height:1px;
      background:var(--border-light);
    }

    .auth-socials{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }

    .auth-social-btn{
      height:50px;
      border-radius:16px;
      border:1px solid var(--border-light);
      background:var(--card-bg);
      color:var(--text-main);
      font-weight:600;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      cursor:pointer;
      transition:.3s ease;
    }

    .auth-social-btn:hover{background:var(--bg-light)}

    .auth-switch{
      text-align:center;
      color:var(--text-muted);
      font-size:14px;
      margin-top:4px;
    }

    .auth-switch button{
      border:0;
      background:transparent;
      color:#4f86ff;
      font-weight:700;
      cursor:pointer;
      padding:0;
    }

    .product-action-btn{
      min-width:136px;
      height:46px;
      padding:0 16px;
      border-radius:16px;
      border:1px solid var(--border-light);
      background:var(--card-soft);
      color:var(--text-main);
      font-weight:700;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      cursor:pointer;
      white-space:nowrap;
      box-shadow:0 10px 22px rgba(0,0,0,.14);
      transition:.3s ease;
    }

    .product-action-btn:hover{
      transform:translateY(-2px);
      border-color:rgba(79,134,255,.34);
      background:rgba(255,255,255,.08);
    }

    .product-action-btn.primary{
      border-color:transparent;
      background:linear-gradient(180deg,#58a4ff 0%,#2563ff 100%);
      color:#fff;
      box-shadow:0 12px 26px rgba(37,99,255,.28);
    }

    .product-action-btn.primary:hover{
      background:linear-gradient(180deg,#6bb0ff 0%,#2f6dff 100%);
    }

    .toast-stack{
      position:fixed;
      left:24px;
      bottom:24px;
      z-index:1400;
      display:flex;
      flex-direction:column;
      gap:14px;
      width:min(360px, calc(100vw - 32px));
      pointer-events:none;
    }

    html[dir="rtl"] .toast-stack{
      left:auto;
      right:24px;
    }

    .site-toast{
      pointer-events:auto;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:flex-start;
      gap:14px;
      padding:16px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at top right, rgba(88,164,255,.20), transparent 34%),
        linear-gradient(180deg, rgba(16,19,68,.96), rgba(8,11,42,.94));
      box-shadow:0 20px 50px rgba(0,0,0,.30);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      color:#fff;
      opacity:0;
      transform:translate3d(-18px, 20px, 0);
      transition:opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1);
      overflow:hidden;
    }

    .site-toast.is-visible{
      opacity:1;
      transform:translate3d(0, 0, 0);
    }

    html[dir="rtl"] .site-toast{
      transform:translate3d(18px, 20px, 0);
    }

    html[dir="rtl"] .site-toast.is-visible{
      transform:translate3d(0, 0, 0);
    }

    .site-toast::before{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:4px;
      border-radius:999px;
      background:linear-gradient(180deg,#58a4ff 0%,#2563ff 100%);
    }

    html[dir="rtl"] .site-toast::before{
      inset:0 0 0 auto;
    }

    .site-toast-icon{
      width:48px;
      height:48px;
      border-radius:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(88,164,255,.14);
      border:1px solid rgba(88,164,255,.18);
      color:#9bc2ff;
      font-size:20px;
      box-shadow:0 12px 24px rgba(37,99,255,.16);
      flex:0 0 auto;
    }

    .site-toast-body{
      min-width:0;
    }

    .site-toast-title{
      margin:0 0 4px;
      font-size:15px;
      font-weight:800;
      letter-spacing:-.02em;
      color:#fff;
    }

    .site-toast-text{
      margin:0;
      font-size:13px;
      line-height:1.6;
      color:rgba(255,255,255,.72);
      word-break:break-word;
    }

    .site-toast-actions{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:12px;
      flex-wrap:wrap;
    }

    .site-toast-action{
      min-width:auto;
      height:38px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(88,164,255,.16);
      background:linear-gradient(180deg,#58a4ff 0%,#2563ff 100%);
      color:#fff;
      font-size:12px;
      font-weight:700;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 12px 24px rgba(37,99,255,.22);
      transition:.3s ease;
    }

    .site-toast-action:hover{
      transform:translateY(-2px);
      filter:brightness(1.05);
    }

    .site-toast-close{
      width:36px;
      height:36px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:rgba(255,255,255,.78);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition:.3s ease;
      flex:0 0 auto;
    }

    .site-toast-close:hover{
      background:rgba(255,255,255,.08);
      color:#fff;
      transform:translateY(-2px);
    }

    .site-toast.is-info .site-toast-icon{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.10);
      color:#dce7ff;
      box-shadow:none;
    }

    html[data-theme="light"] .site-toast{
      background:
        radial-gradient(circle at top right, rgba(88,164,255,.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,255,.96));
      border-color:rgba(15,23,42,.08);
      box-shadow:0 18px 42px rgba(15,23,42,.12);
      color:var(--text-main);
    }

    html[data-theme="light"] .site-toast-title{
      color:var(--text-main);
    }

    html[data-theme="light"] .site-toast-text{
      color:var(--text-muted);
    }

    html[data-theme="light"] .site-toast-close{
      background:rgba(15,23,42,.04);
      border-color:rgba(15,23,42,.08);
      color:var(--text-main);
    }

    #otpInput{
      text-align:center;
      font-size:22px;
      letter-spacing:8px;
      font-weight:700;
    }


    .iam-video-modal{
      width:min(820px, calc(100% - 24px));
    }

    .iam-video-modal .video-shell{
      background:#000;
      border-radius:24px;
      overflow:hidden;
      border:1px solid var(--border-light);
    }

    .iam-video-modal video{
      width:100%;
      max-height:80vh;
      display:block;
      background:#000;
    }

    .iam-video-close{
      position:absolute;
      top:16px;
      right:16px;
      width:42px;
      height:42px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.12);
      color:#fff;
      z-index:4;
    }

    html[dir="rtl"] .iam-video-close{
      right:auto;
      left:16px;
    }

    html[data-theme="light"] .iam-video-modal .video-shell,
    html[data-theme="light"] .iam-video-modal video{
      background:#dfe7f4;
    }

    html[data-theme="light"] .iam-video-close{
      border-color:rgba(15,23,42,.12);
      background:rgba(15,23,42,.08);
      color:var(--text-main);
    }

    @media (max-width:1199.98px){
      .showcase-carousel[data-carousel="brands"]{--carousel-items:3}
      .showcase-carousel[data-carousel="products"]{--carousel-items:3}
      .showcase-carousel[data-carousel="news"]{--carousel-items:2}
      .showcase-carousel[data-carousel="creators"]{--carousel-items:4}
      .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .desktop-menu-left h2{font-size:54px}
      .desktop-menu-links a{font-size:20px}
      .mega-nav-columns{grid-template-columns:240px 1fr}
    }

    @media (max-width:991.98px){
      .home-showcase-section{padding:26px 16px 90px}
      .section-head h2{font-size:30px}
      .brand-showcase-block{padding:28px 20px 24px}
      .brand-showcase-copy{font-size:18px}
      .showcase-carousel[data-carousel="brands"]{--carousel-items:3}
      .showcase-carousel[data-carousel="products"],
      .showcase-carousel[data-carousel="news"]{--carousel-items:2}
      .showcase-carousel[data-carousel="creators"]{--carousel-items:4}
      .showcase-toolbar-actions{width:100%}
      .news-filter-row{width:100%}
      .pricing-switch{width:100%;justify-content:center}
      .pricing-switch button{min-width:0;flex:1}
      .community-cta{padding:38px 24px 120px}
      .cta-avatar{width:48px;height:48px}
      .quick-view-gallery{grid-template-columns:1fr}
      .quick-view-image-wrap,
      .quick-view-image{min-height:460px}
      .quick-view-meta-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
      .quick-view-actions{grid-template-columns:1fr 1fr}
      .quick-view-actions .product-action-btn.primary{grid-column:1 / -1}
      .brand-logo img{height:44px;max-width:220px}
      .circle-btn{width:44px;height:44px;font-size:18px}
      .desktop-full-menu{display:none}
      .mobile-menu-panel{display:flex}
      .settings-grid{grid-template-columns:1fr}
      .pref-badges{display:none}
      .search-modal,
      .modal-card{width:calc(100% - 16px)}
    }

    @media (min-width:992px){
      .mobile-menu-panel{display:none !important}
    }

    @media (max-width:767.98px){
      .toast-stack{
        left:16px;
        right:16px;
        bottom:16px;
        width:auto;
      }
      .pricing-grid,
      .creators-grid{grid-template-columns:1fr}
      .showcase-carousel[data-carousel="brands"]{--carousel-items:2}
      .showcase-carousel[data-carousel="products"],
      .showcase-carousel[data-carousel="news"]{--carousel-items:1}
      .showcase-carousel[data-carousel="creators"]{--carousel-items:2}
      .carousel-toolbar{align-items:flex-start}
      .carousel-controls{margin-left:0;margin-right:0}
      .showcase-toolbar-actions{width:100%}
      .carousel-btn{width:42px;height:42px}
      .brand-logo-card{min-height:104px;padding:18px 16px}
      .brand-logo-lockup{gap:12px}
      .brand-logo-mark{width:38px;height:38px;font-size:16px}
      .brand-logo-word{font-size:15px;letter-spacing:.12em}
      .quick-view-body{padding:18px}
      .quick-view-image-wrap,
      .quick-view-image{min-height:360px}
      .quick-view-thumbs{grid-template-columns:repeat(3, minmax(0, 1fr))}
      .quick-view-meta-grid{grid-template-columns:1fr}
      .site-toast{
        grid-template-columns:auto 1fr;
      }
      .site-toast-close{
        grid-column:2;
        justify-self:end;
      }
      .news-filter-row{
        flex-wrap:nowrap;
        overflow-x:auto;
        width:100%;
        padding-bottom:4px;
        scrollbar-width:none;
      }
      .news-filter-row::-webkit-scrollbar{display:none}
      .news-filter-row .chip-btn{flex:0 0 auto}
      .section-head h2{font-size:28px}
      .quick-view-actions{grid-template-columns:1fr}
      .quick-view-nav{width:42px;height:42px;font-size:16px}
      .quick-view-image-badge{top:14px;left:14px}
      html[dir="rtl"] .quick-view-image-badge{left:auto;right:14px}
      .news-card-title,
      .showcase-product-title{min-height:auto}
      .news-card-text,
      .showcase-product-text,
      .pricing-copy{min-height:auto}
      .community-cta{
        padding:34px 18px 140px;
        border-radius:24px;
      }
      .community-cta h3{font-size:28px}
      .cta-avatar.a1{left:14px;top:18px}
      .cta-avatar.a2{left:18px;bottom:18px}
      .cta-avatar.a3{left:8%;top:62%}
      .cta-avatar.a4{right:12px;top:18px}
      .cta-avatar.a5{right:18px;bottom:18px}
      .cta-avatar.a6{right:10%;top:66%}
      .fab-top{right:16px;bottom:16px}
      html[dir="rtl"] .fab-top{right:auto;left:16px}
      .top-nav-wrap{padding:10px}

      .custom-navbar{
        border-radius:24px;
        padding:10px;
        min-height:64px;
      }

      .nav-left-group,
      .nav-icon-group,
      .nav-right-group{
        gap:8px;
      }

      .brand-logo img{height:36px;max-width:190px}

      .mobile-menu-panel{
        width:100%;
        max-width:100%;
        padding:20px 16px 24px;
      }

      .side-drawer{width:100%}

      .modal-card,
      .auth-modal,
      .otp-modal{
        width:calc(100% - 16px);
        border-radius:22px;
      }

      .modal-header-custom,
      .settings-body,
      .search-body,
      .auth-body{
        padding:18px;
      }

      .settings-footer{padding:0 18px 18px}
      .theme-options{grid-template-columns:1fr}
      .auth-row,
      .auth-socials,
      .mega-feature-grid{grid-template-columns:1fr}

      .icon-badge{
        min-width:20px;
        height:20px;
        font-size:10px;
      }
    }

    @media (max-width:575.98px){
      .showcase-carousel[data-carousel="creators"]{--carousel-items:1}
    }







  

    /* IAM FOOTER */
:root {
      --footer-bg-start: #070037;
      --footer-bg-end: #04002d;
      --footer-bg: #050033;
      --footer-card: #0b0a4f;
      --footer-text: rgba(255, 255, 255, 0.72);
      --footer-heading: #ffffff;
      --footer-line: rgba(255, 255, 255, 0.10);
      --footer-accent: #2094ff;
      --footer-accent-soft: rgba(32, 148, 255, 0.14);
    }

    html[data-theme="light"] {
      --footer-bg-start: #ffffff;
      --footer-bg-end: #eef4ff;
      --footer-bg: #eef4ff;
      --footer-card: #ffffff;
      --footer-text: rgba(15, 23, 42, 0.68);
      --footer-heading: #0f172a;
      --footer-line: rgba(15, 23, 42, 0.10);
      --footer-accent: #2563ff;
      --footer-accent-soft: rgba(37, 99, 255, 0.14);
    }

    .footer-modern {
      background:
        radial-gradient(circle at top right, rgba(59, 43, 176, 0.18), transparent 28%),
        linear-gradient(180deg, var(--footer-bg-start) 0%, var(--footer-bg-end) 100%);
    }

    .footer-modern {
      position: relative;
      padding: 72px 0 32px;
      overflow: hidden;
    }

    .footer-modern::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 90% 0%, rgba(50, 75, 255, 0.15), transparent 25%);
    }

    html[data-theme="light"] .footer-modern::before {
      background: none;
    }

    html[data-theme="light"] .footer-modern {
      background: linear-gradient(180deg, var(--footer-bg-start) 0%, var(--footer-bg-end) 100%);
    }

    .footer-modern::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 220px;
      pointer-events: none;
      background: url("../images/footer-bg-arts.png") center bottom / cover no-repeat;
      opacity: 0.14;
      z-index: 0;
    }

    html[data-theme="dark"] .footer-modern::after {
      opacity: 0.08;
      filter: brightness(1.15);
    }

    .footer-modern > .container {
      position: relative;
      z-index: 1;
    }

    .footer-logo-wrap {
      text-align: center;
      margin-bottom: 42px;
    }

    .footer-logo-img {
      display: block;
      max-width: 140px;
      height: auto;
      margin: 0 auto 10px;
    }

    .footer-brand {
      color: var(--footer-accent);
      font-weight: 800;
      font-size: clamp(1.8rem, 2vw, 2.8rem);
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin: 0;
      text-transform: uppercase;
    }

    .newsletter-card {
      background: rgba(10, 10, 80, 0.94);
      border-radius: 2rem;
      padding: 2rem;
      margin-bottom: 3.5rem;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
      border: 1px solid var(--footer-line);
    }

    html[data-theme="light"] .newsletter-card {
      background: rgba(255, 255, 255, 0.94);
    }

    .newsletter-title {
      font-size: clamp(1.8rem, 2vw, 2.5rem);
      font-weight: 700;
      color: var(--footer-heading);
      margin-bottom: 0.5rem;
    }

    .newsletter-text {
      color: var(--footer-text);
      margin: 0;
      font-size: 1rem;
    }

    .newsletter-form .input-group {
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.4);
      border-radius: 999px;
      overflow: hidden;
      min-height: 64px;
    }

    .newsletter-form .form-control {
      background: transparent;
      border: 0;
      color: var(--footer-heading);
      padding-left: 1.5rem;
      padding-right: 0.75rem;
      font-size: 1rem;
      box-shadow: none !important;
    }

    .newsletter-form .form-control::placeholder {
      color: rgba(255, 255, 255, 0.55);
    }

    html[data-theme="light"] .newsletter-form .input-group {
      border-color: rgba(15, 23, 42, 0.14);
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
    }

    html[data-theme="light"] .newsletter-form .form-control::placeholder {
      color: rgba(15, 23, 42, 0.45);
    }

    .newsletter-form .btn-submit {
      border: 0;
      background: transparent;
      color: var(--footer-accent);
      padding: 0 1.5rem;
      font-size: 1.75rem;
      transition: transform 0.25s ease, color 0.25s ease;
    }

    .newsletter-form .btn-submit:hover {
      color: #5ab2ff;
      transform: translateX(4px);
    }

    .footer-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--footer-heading);
      margin-bottom: 1.5rem;
    }

    .footer-desc {
      color: var(--footer-text);
      line-height: 1.95;
      max-width: 360px;
      margin-bottom: 1.5rem;
    }

    .footer-widget-title {
      color: var(--footer-heading);
      font-size: 1.6rem;
      font-weight: 600;
      margin-bottom: 1.5rem;
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links li + li {
      margin-top: 0.95rem;
    }

    .footer-links a {
      text-decoration: none;
      color: var(--footer-text);
      transition: color 0.25s ease, transform 0.25s ease;
      display: inline-block;
    }

    .footer-links a:hover {
      color: var(--footer-heading);
      transform: translateX(4px);
    }

    .footer-social {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .footer-social a {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      border: 1px solid var(--footer-accent);
      color: var(--footer-accent);
      background: transparent;
      transition: all 0.25s ease;
      font-size: 1rem;
    }

    .footer-social a:hover,
    .footer-social a.active {
      background: var(--footer-accent);
      color: #fff;
      box-shadow: 0 0 0 8px var(--footer-accent-soft);
    }

    html[data-theme="light"] .pref-badge{
      background:rgba(255,255,255,.94);
      border-color:rgba(15,23,42,.10);
      box-shadow:0 12px 28px rgba(15,23,42,.08);
    }

    html[data-theme="light"] .pref-badge:hover{
      background:rgba(244,247,255,.96);
      border-color:rgba(37,99,255,.22);
      box-shadow:0 16px 32px rgba(37,99,255,.12);
    }

    .footer-bottom {
      margin-top: 3.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--footer-line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
      color: var(--footer-text);
      font-size: 0.98rem;
    }

    .footer-copyright-text {
      flex: 1 1 260px;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:0.85rem;
    }

    .footer-copyright-label {
      display:block;
    }

    .footer-pref-badges {
      justify-content:flex-start;
    }

    .footer-payment-methods {
      flex: 1 1 420px;
    }

    .footer-payment-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.45rem;
      flex-wrap: wrap;
    }

    .payment-method-item {
      flex: 0 0 auto;
      line-height: 0;
    }

    .payment-method-logo {
      display: block;
      height: 40px;
      background-image: url("../images/payment-methods.svg");
      background-repeat: no-repeat;
      background-size: 324px 40px;
    }

    .payment-logo-visa {
      width: 50px;
      background-position: -2px center;
    }

    .payment-logo-mastercard {
      width: 50px;
      background-position: -56px center;
    }

    .payment-logo-maestro {
      width: 50px;
      background-position: -109px center;
    }

    .payment-logo-amex {
      width: 50px;
      background-position: -163px center;
    }

    .payment-logo-apple {
      width: 52px;
      background-position: -216px center;
    }

    .payment-logo-gpay {
      width: 52px;
      background-position: -271px center;
    }

    @media (max-width: 991.98px) {
      .footer-modern::after {
        height: 170px;
        background-size: contain;
      }

      .newsletter-card {
        padding: 1.5rem;
      }

      .newsletter-form {
        margin-top: 1.5rem;
      }
    }

    @media (max-width: 767.98px) {
      .footer-modern::after {
        height: 120px;
        background-size: contain;
        opacity: 0.12;
      }

      .footer-modern {
        padding-top: 56px;
      }

      .footer-bottom {
        margin-top: 2rem;
        padding-top: 1.1rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.9rem;
      }

      .footer-payment-methods {
        flex: 0 0 auto;
        width: 100%;
      }

      .footer-payment-list {
        justify-content: center;
      }

      .payment-method-logo {
        height: 36px;
        background-size: 292px 36px;
      }

      .payment-logo-visa {
        width: 45px;
        background-position: -2px center;
      }

      .payment-logo-mastercard {
        width: 45px;
        background-position: -50px center;
      }

      .payment-logo-maestro {
        width: 45px;
        background-position: -98px center;
      }

      .payment-logo-amex {
        width: 45px;
        background-position: -147px center;
      }

      .payment-logo-apple {
        width: 47px;
        background-position: -194px center;
      }

      .payment-logo-gpay {
        width: 47px;
        background-position: -244px center;
      }

      .footer-copyright-text {
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
        align-items:center;
      }

      .footer-logo-wrap {
        margin-bottom: 32px;
      }

      .newsletter-card {
        border-radius: 1.5rem;
      }

      .newsletter-form .input-group {
        min-height: 58px;
      }

      .footer-widget {
        margin-top: 2rem;
      }
    }