/* =================== CUTESMM THEME — SCOPED =================== */
#site-layout{ --brand: rgb(14,165,233); --brand-2: rgb(99,102,241); --ink: rgb(14,23,42); --muted: rgb(107,114,128); --bg: rgb(246,248,252); --card: rgba(255,255,255,0.9); --stroke: rgba(2,6,23,0.08); --ring: rgba(14,165,233,0.35); font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); min-height: 100vh; }

/* Links & buttons */
#site-layout .btn-brand{ background: var(--brand); color: rgb(255,255,255); border: 0; box-shadow: 0 8px 20px rgba(14,165,233,0.28); }
#site-layout .btn-brand:hover{ filter: brightness(0.96); }
#site-layout .btn-outline-brand{ border: 1px solid var(--brand); color: var(--brand); background: transparent; }
#site-layout .btn-outline-brand:hover{ background: var(--brand); color: rgb(255,255,255); }
/* ============ DASHBOARD UPGRADE ============ */

/* compact icon button */
#site-layout .btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; border-radius:12px;
  background: rgb(255,255,255); color: rgb(17,24,39);
  box-shadow: 0 6px 16px rgba(2,6,23,0.08);
}

/* Sidebar head */
#site-layout .sidebar-wrap .sidebar-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:10px;
}
#site-layout .sidebar-wrap .logo img{ height:36px; }

/* Top bar (upper menu) */
#site-layout .top-nav{
  position: sticky; top:0; z-index:1010;
  background: rgb(255,255,255);
  border-bottom:1px solid rgba(2,6,23,0.08);
}
#site-layout .topbar{
  padding:10px 8px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#site-layout .topnav-title{
  font-weight:800; color: rgb(17,24,39);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#site-layout .top-actions .chip{ margin:2px 0; }

/* Overlay for mobile menu */
#site-layout .sidebar-overlay{
  position:fixed; inset:0; background: rgba(2,6,23,0.45);
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
#site-layout.sidebar-open .sidebar-overlay{ opacity:1; pointer-events:auto; }

/* Sidebar base */
#site-layout .sidebar-wrap{
  width:270px; background: linear-gradient(180deg, rgb(14,165,233), rgb(99,102,241));
  color: rgb(255,255,255); position: sticky; top:0; height:100vh;
  padding:18px 14px; overflow-y:auto;
}

/* Collapse (desktop) */
#site-layout.sidebar-collapsed .sidebar-wrap{ width:76px; }
#site-layout.sidebar-collapsed .auth-user-profile,
#site-layout.sidebar-collapsed .sidebar-menu li a span{ display:none; }
#site-layout.sidebar-collapsed .sidebar-menu li a{ justify-content:center; }
#site-layout.sidebar-collapsed .sidebar-collapse i{ transform: rotate(180deg); }

/* Mobile offcanvas behavior */
@media (max-width: 991.98px){
  #site-layout .sidebar-wrap{
    position: fixed; inset: 0 auto 0 0; transform: translateX(-100%);
    transition: transform .28s ease; width: 280px;
  }
  #site-layout.sidebar-open .sidebar-wrap{ transform: translateX(0); }
}

/* Sidebar items */
#site-layout .sidebar-menu{ list-style:none; margin:10px 0 0; padding:0; }
#site-layout .sidebar-menu li a{
  display:flex; gap:10px; align-items:center; padding:10px 12px;
  border-radius:12px; color: rgb(255,255,255); text-decoration:none;
}
#site-layout .sidebar-menu li a i{ width:20px; text-align:center; }
#site-layout .sidebar-menu li.active a,
#site-layout .sidebar-menu li a:hover{ background: rgba(255,255,255,0.2); }

/* Chips */
#site-layout .chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  background: rgb(248,250,252); border:1px solid rgba(2,6,23,0.08);
  border-radius:999px; text-decoration:none; color: rgb(17,24,39); font-weight:600;
}
#site-layout .chip--tg{ background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.25); color: rgb(14,165,233); }
#site-layout .chip--danger{ background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); color: rgb(239,68,68); }

/* Main & scroll-to-top */
#site-layout main{ padding: 18px 16px; }
#site-layout .scrolltop{ position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 12px; border:0; background: rgb(14,165,233); color: rgb(255,255,255); display:none; align-items:center; justify-content:center; box-shadow: 0 10px 20px rgba(14,165,233,0.35); }
#site-layout .scrolltop.show{ display:flex; }

/* =================== NAVBAR =================== */
#site-layout .nav-wrap{ position: sticky; top:0; z-index:1020; background: linear-gradient(90deg, rgba(14,165,233,0.1), rgba(99,102,241,0.1)); backdrop-filter: blur(8px); border-bottom: 1px solid var(--stroke); }
#site-layout .navbar-brand img{ height: 36px; width: auto; }
#site-layout .navbar .nav-link{ font-weight: 500; position: relative; }
#site-layout .navbar .nav-link:after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; background: transparent; border-radius: 99px; transition: .25s; }
#site-layout .navbar .nav-link:hover:after, #site-layout .navbar .active>.nav-link:after{ background: var(--brand); }
#site-layout .navbar-toggler{ border: 0; background: rgb(255,255,255); }
#site-layout .brand-text{ font-weight: 900; letter-spacing: .3px; }

/* =================== FOOTER =================== */
#site-layout .auth-landing-footer{ background: linear-gradient(180deg, rgba(14,165,233,0.06), rgba(99,102,241,0.06)); padding: 48px 0; border-top: 1px solid var(--stroke); }
#site-layout .auth-landing-footer .f-list{ list-style:none; padding:0; margin:0; }
#site-layout .auth-landing-footer .f-list li{ margin-bottom: 6px; }
#site-layout .auth-landing-footer .socials a{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; background: rgb(255,255,255); border:1px solid var(--stroke); margin-right:6px; color: var(--ink); }
#site-layout .auth-landing-footer .divider{ border-color: var(--stroke); margin: 20px 0; }
#site-layout .auth-landing-footer .foot-row{ display:flex; gap: 12px; justify-content: space-between; align-items:center; flex-wrap:wrap; }

/* =================== AUTH LAYOUT =================== */
#site-layout .wrapper{ display:flex; min-height: 100vh; }
#site-layout .sidebar-wrap{ width: 270px; background: linear-gradient(180deg, rgb(14,165,233), rgb(99,102,241)); color: rgb(255,255,255); position: sticky; top:0; height:100vh; padding: 18px 14px; overflow-y:auto; }
#site-layout .sidebar-logo img{ height: 36px; display:block; margin: 4px auto 14px; }
#site-layout .auth-user-profile{ text-align:center; background: rgba(255,255,255,0.15); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
#site-layout .auth-user-profile .avatar img{ width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,0.7); object-fit:cover; }
#site-layout .auth-user-profile .username{ font-weight:800; margin-top:6px; }
#site-layout .auth-user-profile .balance{ opacity: .95; font-weight:600; }

#site-layout .sidebar-menu{ list-style:none; margin: 10px 0 0; padding:0; }
#site-layout .sidebar-menu li a{ display:flex; gap:10px; align-items:center; padding: 10px 12px; border-radius: 12px; color: rgb(255,255,255); text-decoration:none; }
#site-layout .sidebar-menu li a i{ width:20px; text-align:center; }
#site-layout .sidebar-menu li.active a, #site-layout .sidebar-menu li a:hover{ background: rgba(255,255,255,0.2); }

#site-layout .inner-wrap{ flex: 1; min-width: 0; }
#site-layout .top-nav{ position: sticky; top:0; z-index: 1010; background: rgb(255,255,255); border-bottom:1px solid var(--stroke); padding: 12px 16px; display:flex; align-items:center; gap: 12px; justify-content: space-between; }
#site-layout .sidebar-toggle{ border:0; background: rgb(255,255,255); width:40px; height:40px; border-radius: 12px; box-shadow: 0 6px 16px rgba(2,6,23,0.08); }
#site-layout .chip{ display:inline-flex; align-items:center; gap: 6px; padding: 8px 12px; background: rgb(248,250,252); border:1px solid var(--stroke); border-radius: 999px; text-decoration:none; color: var(--ink); font-weight:600; }
#site-layout .chip--tg{ background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.25); color: rgb(14,165,233); }
#site-layout .chip--danger{ background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); color: rgb(239,68,68); }

/* Offcanvas behavior on mobile */
@media (max-width: 991.98px){
  #site-layout .sidebar-wrap{ position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .3s ease; width: 280px; }
  #site-layout.sidebar-open .sidebar-wrap{ transform: translateX(0); }
  #site-layout .inner-wrap{ width: 100%; }
}

/* =================== CONTENT BASICS =================== */
#site-layout main{ padding: 18px 16px; }
#site-layout .card-glass{ background: var(--card); border:1px solid var(--stroke); box-shadow: 0 10px 24px rgba(2,8,23,0.06); border-radius: 18px; }

/* =================== UTILITIES =================== */
#site-layout .scrolltop{ position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 12px; border:0; background: var(--brand); color: rgb(255,255,255); display:none; align-items:center; justify-content:center; box-shadow: 0 10px 20px rgba(14,165,233,0.35); }
#site-layout .scrolltop.show{ display:flex; }
#site-layout .rtl .top-nav{ direction: rtl; }




/* ========================== New Order (scoped) ========================== */
.neworder { font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

/* Title & tag */
.neworder .neworder__title { font-weight: 900; color: rgb(17,24,39); }
.neworder .neworder__badge { background: rgb(99,102,241); color: rgb(255,255,255); }

/* Stats boxes */
.neworder .stats-box{
  display:flex; gap:12px; align-items:center; height:100%;
  padding:16px; border-radius:16px; background: rgb(255,255,255);
  box-shadow: 0 6px 24px rgba(2,6,23,0.06); border:1px solid rgba(2,6,23,0.06);
}
.neworder .stats-left .stats-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:14px; color:rgb(255,255,255);
  box-shadow: 0 10px 20px rgba(2,6,23,0.1);
}
.neworder .stats-icon.orders{ background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233)); }
.neworder .stats-icon.service{ background: linear-gradient(135deg, rgb(2,132,199), rgb(16,185,129)); }
.neworder .stats-icon.balance{ background: linear-gradient(135deg, rgb(234,88,12), rgb(245,158,11)); }
.neworder .stats-icon.status{ background: linear-gradient(135deg, rgb(139,92,246), rgb(236,72,153)); }
.neworder .stats-right .stats-txt{ margin:0; font-weight:600; color: rgb(55,65,81); }
.neworder .stats-right .stats-title{ margin:2px 0 0; font-size:1.5rem; font-weight:900; color: rgb(17,24,39); }

/* Filter toggle */
.neworder .filter-toggle{
  background: rgb(248,250,252); border:1px solid rgba(2,6,23,0.08);
  border-radius:12px; font-weight:700; color: rgb(17,24,39);
}
.neworder .filter-toggle .caret{ transition: transform .25s ease; }
.neworder .filter-toggle.collapsed .caret{ transform: rotate(180deg); }

/* Brand grid */
.neworder .new-bgss{ background: rgb(255,255,255); border:1px solid rgba(2,6,23,0.06); border-radius:16px; padding:12px; }
.neworder .brand-category{
  display:flex; gap:10px; align-items:center; padding:12px; width:100%;
  text-decoration:none; background: rgb(248,250,252);
  border:1px solid rgba(2,6,23,0.06); border-radius:12px; transition: transform .15s ease, box-shadow .15s ease;
  color: rgb(17,24,39);
}
.neworder .brand-category:hover{ transform: translateY(-2px); box-shadow:0 12px 24px rgba(2,6,23,0.06); }
.neworder .brand-category.active{ outline: 2px solid rgb(99,102,241); }
.neworder .sershortcut-icon{
  display:inline-flex; width:36px; height:36px; border-radius:10px; align-items:center; justify-content:center; color:rgb(255,255,255);
}
.neworder .brand-fb{ background: rgb(59,89,152); }
.neworder .brand-ig{ background: linear-gradient(135deg, rgb(253,29,29), rgb(253,190,2)); }
.neworder .brand-x{ background: rgb(17,24,39); }
.neworder .brand-yt{ background: rgb(239,68,68); }
.neworder .brand-sp{ background: rgb(16,185,129); }
.neworder .brand-tt{ background: rgb(14,165,233); }
.neworder .brand-li{ background: rgb(37,99,235); }
.neworder .brand-gg{ background: rgb(234,179,8); }
.neworder .brand-tg{ background: rgb(14,165,233); }
.neworder .brand-dc{ background: rgb(99,102,241); }
.neworder .brand-sc{ background: rgb(245,158,11); }
.neworder .brand-twc{ background: rgb(139,92,246); }
.neworder .brand-traffic{ background: rgb(2,132,199); }
.neworder .brand-reviews{ background: rgb(236,72,153); }
.neworder .brand-other{ background: rgb(55,65,81); }
.neworder .brand-all{ background: rgb(34,197,94); }
.neworder .cate-shortcut-txt{ font-weight:700; }

/* Note */
.neworder .neworder__note{ color: rgb(17,24,39); font-weight:800; }

/* Card skin */
.neworder .neworder-card{ border:1px solid rgba(2,6,23,0.06); border-radius:16px; box-shadow: 0 10px 24px rgba(2,6,23,0.06); }

/* Tabs sky */
.neworder .tabs-sky{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.neworder .tabs-sky .tab-ico{
  width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background: rgb(248,250,252); border:1px solid rgba(2,6,23,0.08); color: rgb(17,24,39); text-decoration:none; font-size:1.05rem;
}
.neworder .tabs-sky .tab-ico:hover{ background: rgb(255,255,255); }
.neworder .tabs-sky .tab-pill{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; text-decoration:none;
  background: rgba(99,102,241,0.08); border:1px solid rgba(99,102,241,0.25); color: rgb(55,65,81); font-weight:800;
}
.neworder .tabs-sky .tab-pill:hover{ background: rgba(99,102,241,0.16); }

/* Form fields */
.neworder .form-group{ margin-bottom:14px; }
.neworder .panel-body{ background: rgb(248,250,252); padding:12px; border-radius:12px; border:1px dashed rgba(2,6,23,0.1); }

/* Submit CTA */
.neworder .cta-submit{
  width:100%; padding:12px 16px; border-radius:14px; border:0; font-weight:900;
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233)); color: rgb(255,255,255);
  box-shadow:0 12px 24px rgba(14,165,233,0.35); transition: transform .08s ease;
}
.neworder .cta-submit:active{ transform: translateY(1px); }

/* Right column best services */
.neworder .bg-wrap{
  background: rgb(255,255,255); border:1px solid rgba(2,6,23,0.06); border-radius:16px; padding:12px 14px; margin:10px 0;
  display:flex; justify-content:space-between; gap:8px; position:relative; overflow:hidden;
}
.neworder .bg-wrap::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background: linear-gradient(180deg, rgb(14,165,233), rgb(99,102,241));
}
.neworder .icon-social{
  width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:rgb(255,255,255);
}
.neworder .is-fb{ background: rgb(59,89,152); } .neworder .is-ig{ background: rgb(236,72,153); }
.neworder .is-yt{ background: rgb(239,68,68); } .neworder .is-x{ background: rgb(17,24,39); }
.neworder .is-sp{ background: rgb(16,185,129); } .neworder .is-tt{ background: rgb(14,165,233); }
.neworder .order-txt{ margin:0; font-weight:800; color: rgb(17,24,39); }
.neworder .order-txt-label{ color: rgb(55,65,81); font-weight:700; }

/* Search field */
.neworder .search-form-group .input-wrapper{
  position:relative; display:flex; align-items:center;
}
.neworder .search-form-group .search-ico{
  position:absolute; left:12px; color: rgb(107,114,128);
}
.neworder .search-form-group .form-control{
  padding-left:38px; border-radius:12px; border:1px solid rgba(2,6,23,0.12);
}

/* Alerts */
.neworder .neworder-alert{ border-radius:12px; }

/* Responsive tweaks */
@media (max-width: 575.98px){
  .neworder .stats-right .stats-title{ font-size:1.25rem; }
  .neworder .order-txt{ font-size:1rem; }
}




/* =================== Updates Page (scoped) =================== */
.updates-page { font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

.updates-page .btn-gradient{
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  color: rgb(255,255,255);
  border: 0;
  border-radius: 12px;
  font-weight: 800;
}
.updates-page .btn-gradient:focus,
.updates-page .btn-gradient:hover{ filter: brightness(1.05); }

.updates-page .updates-search .form-control{
  border-radius: 0 12px 12px 0;
  border-left: 0;
}
.updates-page .updates-search .input-group-text{
  border-radius: 12px 0 0 12px;
}

/* Update card */
.updates-page .update-card{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 16px 16px 16px 12px;
  border-radius: 16px;
  background: rgb(255,255,255);
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 12px 24px rgba(2,6,23,.06);
  margin-bottom: 12px;
}
.updates-page .update-card__rail{
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, rgb(14,165,233), rgb(99,102,241));
  border-radius: 8px 0 0 8px;
}
.updates-page .update-card__icon .icon-circle{
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgb(255,255,255);
  background: linear-gradient(135deg, rgb(99,102,241), rgb(139,92,246));
  box-shadow: 0 10px 18px rgba(99,102,241,.25);
}
.updates-page .update-card__head{
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  margin-bottom: 8px;
}
.updates-page .update-card__service,
.updates-page .update-card__date{
  font-weight: 700; color: rgb(17,24,39);
}
.updates-page .update-card__service .label,
.updates-page .update-card__date .label{ color: rgb(55,65,81); font-weight: 700; }
.updates-page .update-card__service .value,
.updates-page .update-card__date .value{ font-weight: 900; }

.updates-page .update-card__content{
  display: flex; align-items: flex-start; gap: 8px;
  color: rgb(31,41,55); line-height: 1.5;
}
.updates-page .update-card__actions .btn{
  border-radius: 10px; border: 1px solid rgba(2,6,23,.08);
}

/* Dropdown menu polishing */
.updates-page .update-filter-dropdown .dropdown-menu{
  border-radius: 12px; border: 1px solid rgba(2,6,23,.08);
}
.updates-page .dropdown-item.active{
  background: rgba(99,102,241,.12); color: rgb(17,24,39); font-weight: 800;
}

/* Pagination */
.updates-page .pagination .page-link{
  border-radius: 10px; border: 1px solid rgba(2,6,23,.12); color: rgb(17,24,39);
}
.updates-page .pagination .page-item.active .page-link{
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  border-color: transparent; color: rgb(255,255,255);
}

/* RTL minor helpers */
.rtl-nav .dropdown-menu{ text-align: right; }

/* Small devices */
@media (max-width: 575.98px){
  .updates-page .update-card{ grid-template-columns: auto 1fr; }
  .updates-page .update-card__actions{ grid-column: 1 / -1; justify-self: end; }
}



/* ================= Orders Page (scoped) ================= */
.orders-page { font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

/* Search bar */
.orders-page .orders-search .form-control{ border-radius: 0 14px 14px 0; border-left: 0; }
.orders-page .orders-search .input-group-text{ border-radius: 14px 0 0 14px; }

/* Pills */
.orders-page .orders-status-pills{ gap: 8px; flex-wrap: wrap; }
.orders-page .orders-status-pills .nav-link{
  border-radius: 999px; font-weight: 700;
  color: rgb(17,24,39); background: rgb(241,245,249);
  padding: 8px 14px;
}
.orders-page .orders-status-pills .nav-link.active{
  color: rgb(255,255,255);
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  box-shadow: 0 8px 18px rgba(14,165,233,.24);
}

/* Table look */
.orders-page .well-ord{ background: rgb(255,255,255); border: 1px solid rgba(2,6,23,.06); }
.orders-page .table-head{ background: rgb(248,250,252); z-index: 1; }
.orders-page table thead th{ font-weight: 800; color: rgb(17,24,39); border: 0; }
.orders-page table tbody tr{ border-top: 1px solid rgba(2,6,23,.06); }
.orders-page table tbody tr:hover{ background: rgba(14,165,233,.04); }

/* Order id copy button */
.orders-page .copy-order{ border-radius: 10px; border: 1px solid rgba(2,6,23,.1); }

/* Status chip (uses order['status'] as class) */
.orders-page .status-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-weight: 800;
  border: 1px solid transparent; text-transform: capitalize;
}
.orders-page .btn-bgs.pending, .orders-page .btn-bgs.Pending{ background: rgba(253,230,138,.35); color: rgb(161,98,7); border-color: rgba(253,230,138,.8); }
.orders-page .btn-bgs.inprogress, .orders-page .btn-bgs.Inprogress{ background: rgba(191,219,254,.45); color: rgb(30,64,175); border-color: rgba(191,219,254,.9); }
.orders-page .btn-bgs.processing, .orders-page .btn-bgs.Processing{ background: rgba(187,247,208,.45); color: rgb(22,101,52); border-color: rgba(187,247,208,.9); }
.orders-page .btn-bgs.partial, .orders-page .btn-bgs.Partial{ background: rgba(254,215,170,.45); color: rgb(154,52,18); border-color: rgba(254,215,170,.9); }
.orders-page .btn-bgs.completed, .orders-page .btn-bgs.Completed{ background: rgba(187,247,208,.55); color: rgb(22,101,52); border-color: rgba(187,247,208,.9); }
.orders-page .btn-bgs.canceled, .orders-page .btn-bgs.Canceled{ background: rgba(254,202,202,.55); color: rgb(153,27,27); border-color: rgba(254,202,202,.9); }

/* Pagination */
.orders-page .pagination .page-link{ border-radius: 10px; color: rgb(17,24,39); border: 1px solid rgba(2,6,23,.12); }
.orders-page .pagination .page-item.active .page-link{
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  color: rgb(255,255,255); border-color: transparent;
}

/* Mobile: turn table rows into cards */
@media (max-width: 991.98px){
  .orders-page table thead { display: none; }
  .orders-page table tbody tr{ display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px; border-radius: 16px; margin-bottom: 12px; box-shadow: 0 12px 24px rgba(2,6,23,.06); }
  .orders-page table tbody td{ display: flex; justify-content: space-between; align-items: center; border: 0 !important; padding: 6px 0; }
  .orders-page table tbody td::before{
    content: attr(data-label);
    font-weight: 800; color: rgb(55,65,81); margin-right: 10px;
  }
  .orders-page .order-actions{ justify-content: flex-end; }
}

/* RTL helpers */
.rtl-nav .nav-link { direction: rtl; }


/* Add Funds page custom styles (scoped) */
.addfunds-page {
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* User chip */
.add-wrap .user-thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.adds-title {
  font-weight: 800;
  letter-spacing: .2px;
}

.well-adds.card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .75rem;
}

.invoice-btn {
  white-space: nowrap;
}

/* Inputs & labels */
.form-label i { opacity: .85; }

/* Accordion polish */
.accordion-button i { opacity: .9; }
.accordion-button:not(.collapsed) {
  background: rgba(14,165,233,.08);
  color: rgb(14,165,233);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
}

/* Table tweaks */
.table thead th { font-weight: 700; }
.nowrap { white-space: nowrap; }

/* Invoice print window wrapper (when injected) */
.invoice-print {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: .5rem;
}

/* RTL helpers if needed */
.rtl-table { direction: rtl; }
.rtl-pagination { direction: rtl; }
.rtl-form { direction: rtl; }


/* ==========================================================================
   SIGN-IN PAGE — LIGHT, COLORFUL THEME (RGB only) • Bootstrap 5 friendly
   Scope: #page-signin (CuteSMM theming requirement)
   ========================================================================== */
/* ==========================================================================
   LIGHT THEME — COLORFUL UI (RGB/RGBA only) — Scoped to #page-signin
   ========================================================================== */

#page-signin{
  /* Core palette */
  --bg: rgb(250, 249, 247);
  --bg-2: rgb(241, 246, 255);
  --surface: rgb(255, 255, 255);
  --surface-2: rgb(253, 252, 249);
  --border: rgba(0, 0, 0, .08);
  --line: rgba(0, 0, 0, .10);

  --text: rgb(28, 27, 25);
  --text-2: rgb(100, 96, 92);
  --heading: rgb(20, 19, 18);

  /* Brand + lively accents */
  --brand: rgb(253, 190, 2);        /* primary */
  --brand-soft: rgba(253, 190, 2, .18);
  --sky:  rgb(100, 181, 246);
  --rose: rgb(255, 107, 129);
  --lime: rgb(129, 199, 132);
  --lav:  rgb(179, 157, 219);
  --teal: rgb(77, 182, 172);
  --peach:rgb(255, 138, 101);

  --grad-brand: linear-gradient(135deg, var(--brand), rgb(255, 205, 75));
  --bg-gradient:
    radial-gradient(1100px 500px at 0% -10%, rgba(253,190,2,.10), rgba(255,255,255,0) 70%),
    radial-gradient(1100px 500px at 100% 0%, rgba(100,181,246,.10), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--bg) 0%, rgb(255,255,255) 100%);

  --radius-s: 12px; --radius-m: 16px; --radius-l: 22px;
  --shadow-s: 0 6px 14px rgba(18,18,18,.06);
  --shadow-m: 0 12px 28px rgba(18,18,18,.10);
  --shadow-l: 0 18px 46px rgba(18,18,18,.14);
  --focus-ring: 0 0 0 4px rgba(253,190,2,.22);
  --py: clamp(2.5rem, 6vw, 5rem);

  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-gradient);
  color: var(--text);

  --bs-primary: var(--brand);
  --bs-primary-rgb: 253,190,2;
  --bs-link-color: var(--brand);
  --bs-link-hover-color: rgb(255, 205, 75);
}

#page-signin section { content-visibility: auto; contain-intrinsic-size: 600px 800px; }
#page-signin img { max-width: 100%; height: auto; display: block; }
#page-signin a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
#page-signin a:hover { color: rgb(255, 205, 75); text-decoration: underline; }
#page-signin :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 10px; }
#page-signin.rtl { direction: rtl; }

/* Section headers */
#page-signin .section-padding { padding-block: var(--py); }
#page-signin .section-padding-sm { padding-block: calc(var(--py) * .6); }
#page-signin .section-header { margin-bottom: 1.25rem; }
#page-signin .section-title { color: var(--heading); font-weight: 900; letter-spacing: .2px; }
#page-signin .section-subtitle { color: var(--text-2); max-width: 760px; margin-inline: auto; }
#page-signin .text-accent { color: var(--brand); }

/* Buttons */
#page-signin .btn-brand{
  background: var(--grad-brand); color: rgb(55, 43, 11);
  border: 0; padding: .8rem 1.6rem; border-radius: 999px; font-weight: 800;
  box-shadow: 0 14px 28px rgba(253,190,2,.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#page-signin .btn-brand:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(253,190,2,.30); }

#page-signin .btn-outline-brand{
  border: 2px solid var(--brand); color: var(--brand); background: transparent;
  padding: .7rem 1.4rem; border-radius: 999px; font-weight: 800; transition: all .18s ease;
}
#page-signin .btn-outline-brand:hover{ background: var(--grad-brand); color: rgb(55, 43, 11); transform: translateY(-2px); }

#page-signin .btn-google{
  background: rgb(255,255,255); color: rgb(40,40,40);
  border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: .7rem 1rem;
  display: inline-flex; gap: .7rem; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .18s ease;
}
#page-signin .btn-google:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(18,18,18,.06); }

/* =============================== HERO =================================== */
.hero-auth-section{
  background:
    radial-gradient(900px 320px at 8% -8%, rgba(253,190,2,.12), rgba(255,255,255,0) 70%),
    radial-gradient(900px 320px at 92% -6%, rgba(100,181,246,.10), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, var(--bg) 0%, rgb(255,255,255) 100%);
}
.hero-auth-section .hero-title{ font-weight: 900; line-height: 1.15; }
.hero-auth-section .hero-title .text-accent{
  background: linear-gradient(90deg, var(--brand), rgb(255, 205, 75), var(--brand));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-auth-section .hero-subtitle{ color: var(--text-2); }

.hero-auth-section .auth-card{
  position: relative;
  background:
    linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box,
    linear-gradient(135deg, var(--brand), var(--sky), var(--lime)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-l); padding: 1.25rem; box-shadow: var(--shadow-m); overflow: hidden;
}
.hero-auth-section .auth-card::before{
  content: ""; position: absolute; inset: -2px;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%); pointer-events: none;
}
.hero-auth-section .auth-card:hover::before { animation: shine 1.1s ease forwards; }

.auth-card-header{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.auth-title{ font-size: 1.1rem; font-weight: 900; color: var(--heading); margin: 0; }
.auth-link a{ font-weight: 800; }

.auth-card .form-label{ font-size: .9rem; color: var(--text-2); font-weight: 700; }
.auth-card .input-group .input-group-text{ background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-right: 0; }
#page-signin.rtl .auth-card .input-group .input-group-text{ border-left: 0; border-right: 1px solid var(--border); }

.auth-card .input-group .form-control{
  background: rgb(255,255,255); border: 1px solid var(--border); color: var(--text);
  padding: .85rem 1rem; border-radius: 12px;
}
.auth-card .input-group .form-control::placeholder{ color: rgb(150,148,145); }
.auth-card .input-group .form-control:focus{ border-color: var(--brand); box-shadow: var(--focus-ring); }

.auth-card #togglePass{ border-left: 0; background: var(--surface-2); color: var(--text-2); }
#page-signin.rtl .auth-card #togglePass{ border-right: 0; border-left: 1px solid var(--border); }
.auth-card .form-check-input{ background: rgb(255,255,255); border: 1px solid var(--border); }
.auth-card .form-check-input:checked{ background: var(--brand); border-color: var(--brand); }
.or-divider{ display: flex; align-items: center; gap: .5rem; color: var(--text-2); margin: 1.1rem 0; }
.or-divider::before, .or-divider::after{ content: ""; flex: 1; height: 1px; background: var(--line); }

.hero-media-wrapper{ position: relative; }
.hero-image{ border-radius: 18px; box-shadow: var(--shadow-l); }
.hero-badge{
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--border);
  background: rgb(255,255,255); color: rgb(80,65,14); box-shadow: var(--shadow-s);
  animation: floatY 6s ease-in-out infinite;
}
.hero-badge.fb{ top: 10%; left: -22px; }
.hero-badge.tk{ bottom: 16%; left: -32px; animation-delay: .9s; }
.hero-badge.yt{ top: 26%; right: -22px; animation-delay: .4s; }

@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes shine{ from{transform:translateX(-120%)} to{transform:translateX(220%)} }

/* ============================== MINI STATS =============================== */
.mini-stats-section{ background: var(--surface); border-top: 1px solid var(--border); }
.stat-item{
  text-align:center; padding: 1rem; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--border); transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.stat-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-m); background: linear-gradient(180deg, rgba(253,190,2,.12), rgba(255,255,255,1)); }
.stat-icon{
  font-size: 2rem; margin-bottom: .35rem;
  background: linear-gradient(135deg, var(--brand), var(--sky)); -webkit-background-clip:text; background-clip:text; color: transparent;
}
.stat-value{ font-size: clamp(1.6rem, 2.2vw, 2.3rem); font-weight: 900; color: var(--heading); }
.stat-label{ color: var(--text-2); }

/* =============================== SERVICES ================================ */
.services-section{ background: linear-gradient(180deg, var(--bg) 0%, rgb(255,255,255) 100%); border-block: 1px solid var(--border); }
.services-board{ background: var(--surface); border:1px solid var(--border); border-radius: 16px; padding: 1.25rem; box-shadow: var(--shadow-s); }
.services-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.pill-item{
  background: rgb(255,255,255); border: 1px solid var(--border); color: var(--text-2);
  padding: .55rem 1rem; border-radius: 999px; font-weight: 800; display:flex; align-items:center; gap:.5rem; transition: all .18s ease;
}
.pill-item:hover, .pill-item.active{
  background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box,
              linear-gradient(135deg, var(--brand), var(--rose), var(--sky)) border-box;
  border: 1px solid transparent; color: rgb(55, 43, 11); transform: translateY(-2px);
}
.services-content .tab-pane{
  background: var(--surface); border-radius: 16px; padding: 1.25rem; box-shadow: var(--shadow-s);
  border: 1px solid var(--border);
}
.service-pane-title{ font-weight: 900; color: var(--heading); }
.services-content p{ color: var(--text-2); }
.service-pane-visual img{ border-radius: 12px; box-shadow: var(--shadow-m); border: 1px solid var(--border); }

/* ============================= WHY CHOOSE US ============================= */
/* =========================================================================
   HOW IT WORKS — V2 (HEX STEPS)  |  Light & colorful, mobile-first
   All selectors are scoped to #page-signin per CuteSMM documentation.
   Brand color: rgb(253,190,2)
   ========================================================================= */

#page-signin {
  /* Friendly palette (light RGB) */
  --brand: rgb(253,190,2);
  --brand-ink: rgb(110,84,0);
  --sky: rgb(14,165,233);
  --ink: rgb(12,24,42);
  --muted: rgb(93,105,122);
  --surface: #fff;
  --border: rgba(15, 23, 42, .08);
  --sh-s: 0 4px 14px rgba(0,0,0,.06);
  --sh-m: 0 10px 24px rgba(0,0,0,.10);
}

/* Section spacing inherited from your .section-padding */
#page-signin .how-v2 .section-header { max-width: 980px; margin-inline: auto; }
#page-signin .how-v2 .hiwv2-eyebrow{
  font-weight:900; letter-spacing:.4px; color: var(--sky); margin-bottom:.25rem;
}
#page-signin .how-v2 .hiwv2-title{
  font-weight:900; line-height:1.15; color: var(--ink);
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
}
#page-signin .how-v2 .hiwv2-accent{ color: var(--sky); }
#page-signin .how-v2 .hiwv2-lead{
  color: var(--muted); margin-top:.6rem; font-size: clamp(.98rem, 1.2vw, 1.05rem);
}

/* Grid & step cards */
#page-signin .how-v2 .hiwv2-grid{ margin-top: .75rem; }
#page-signin .how-v2 .hiwv2-step{
  position: relative;
  padding-top: .25rem;
}
#page-signin .how-v2 .hiwv2-step-title{
  margin-top: 1rem; margin-bottom: .35rem;
  font-weight: 900; color: var(--ink);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}
#page-signin .how-v2 .hiwv2-step-text{
  color: var(--muted); margin: 0;
  max-width: 36ch;
}

/* Hex badge */
#page-signin .how-v2 .hiwv2-hex{
  width: 92px; height: 104px; position: relative;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  background:
    radial-gradient(120px 80px at 20% 15%, rgba(253,190,2,.28), transparent 60%),
    radial-gradient(120px 80px at 85% 85%, rgba(14,165,233,.25), transparent 60%),
    #ffffff;
  border: 2px solid rgba(253,190,2,.45);
  box-shadow: var(--sh-s);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#page-signin .how-v2 .hiwv2-hex:hover{
  transform: translateY(-4px) rotate(.5deg);
  border-color: rgba(14,165,233,.55);
  box-shadow: var(--sh-m);
}
#page-signin .how-v2 .hiwv2-hex-inner{
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center;
}
#page-signin .how-v2 .hiwv2-hex .num{
  display:block; font-weight: 900; font-size: 1.5rem; line-height: 1;
  color: var(--sky);
}
#page-signin .how-v2 .hiwv2-hex .lab{
  display:block; margin-top:.2rem; font-weight:800; font-size:.9rem;
  color: var(--brand-ink);
}

/* Better touch targets on small screens */
@media (max-width: 575.98px){
  #page-signin .how-v2 .hiwv2-step { display:flex; gap: 1rem; align-items:flex-start; }
  #page-signin .how-v2 .hiwv2-hex { flex: 0 0 84px; height: 96px; }
  #page-signin .how-v2 .hiwv2-step-title { margin-top:.2rem; }
  #page-signin .how-v2 .hiwv2-step-text { max-width: none; }
}



/* =========================================================================
   ABOUT / PREMIER PARTNER — Light, colorful, mobile-first
   ========================================================================= */
#page-signin .about-partner{
  background:
    radial-gradient(1200px 420px at 0% -10%, rgba(253,190,2,.10), rgba(255,255,255,0) 70%),
    radial-gradient(1200px 420px at 100% 0%, rgba(100,181,246,.10), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--surface) 0%, #fff 100%);
  position: relative;
}

#page-signin .ap-header{ max-width: 640px; }
#page-signin .ap-eyebrow{
  font-weight:900; color: rgb(14,165,233); letter-spacing:.2px; margin-bottom:.3rem;
}
#page-signin .ap-title{
  font-weight: 900; line-height: 1.08; letter-spacing: -.4px;
  font-size: clamp(1.9rem, 3.6vw, 3rem); color: var(--heading);
  margin-bottom: .4rem;
}
#page-signin .ap-title .ap-grad{
  background: linear-gradient(90deg, rgb(65,105,255), rgb(155,81,224), rgb(255,166,0));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#page-signin .ap-lead{ color: var(--text-2); margin-bottom:.6rem; }
#page-signin .ap-note{ color: var(--text-2); }

/* Benefits */
#page-signin .ap-benefit{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.9rem; border-radius:16px; background:#fff;
  border:1px solid var(--border); box-shadow: var(--shadow-s);
}
#page-signin .ap-check{
  display:grid; place-items:center; flex:0 0 36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg, rgba(253,190,2,.25), rgba(14,165,233,.25));
  color: rgb(29,78,216);
  border:1px solid rgba(253,190,2,.35);
}
#page-signin .ap-benefit-title{ font-weight: 900; color: var(--heading); }
#page-signin .ap-benefit-text{ color: var(--text-2); margin-top:.1rem; }

/* KPIs */
#page-signin .ap-kpis{
  display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr));
  margin: .25rem 0 1rem;
}
@media (max-width: 575.98px){
  #page-signin .ap-kpis{ grid-template-columns: 1fr; }
}
#page-signin .ap-kpi{
  background: linear-gradient(180deg, rgba(253,190,2,.08), rgba(255,255,255,1));
  border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow: var(--shadow-s);
}
#page-signin .ap-kpi-label{ font-weight:800; color: var(--text-2); }
#page-signin .ap-kpi-value{
  font-weight:900; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--heading);
}

/* CTAs */
#page-signin .ap-ctas .btn{ padding:.7rem 1.2rem; }

/* Visual */
#page-signin .ap-visual{ position: relative; max-width: 640px; margin-left:auto; }
#page-signin .ap-phone{
  width: 100%; border-radius: 24px; box-shadow: var(--shadow-l); border: 1px solid var(--border);
}

/* Floating bubbles */
#page-signin .ap-bubble{
  position:absolute; width:70px; height:70px; border-radius:50%;
  display:grid; place-items:center; font-size:30px; color:#fff;
  background: radial-gradient(60px 60px at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.05)),
              linear-gradient(135deg, #fd1d1d, #833ab4);
  box-shadow: 0 14px 30px rgba(18,18,18,.15), inset 0 0 16px rgba(255,255,255,.3);
  animation: apFloat 6s ease-in-out infinite;
}
#page-signin .ap-bubble.b1{ left:-18px; top:8%; }
#page-signin .ap-bubble.b2{ right:-18px; top:32%; animation-delay:.6s; }
#page-signin .ap-bubble.b3{ right:14%; bottom:-18px; animation-delay:1.1s; }
@keyframes apFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Overlay widget card */
#page-signin .ap-widget{
  position:absolute; left:6%; bottom:6%;
  display:flex; align-items:center; gap:12px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border:1px solid rgba(15,23,42,.08); border-radius:20px; padding:14px 16px;
  box-shadow: 0 14px 38px rgba(15,23,42,.12);
}
#page-signin .ap-widget-icon{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(14,165,233,.16), rgba(14,165,233,.08));
  color: rgb(14,165,233); border:1px solid rgba(14,165,233,.25);
}
#page-signin .ap-widget-title{ font-weight:900; color: rgb(18,18,18); line-height:1.1; }
#page-signin .ap-widget-sub{ color: var(--text-2); font-size:.85rem; }
#page-signin .ap-widget-kpi{ color: rgb(16,185,129); font-weight:800; }
#page-signin .ap-ig-chip{
  margin-left: 8px; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); color:#fff;
  box-shadow: inset 0 0 12px rgba(255,255,255,.4), 0 10px 22px rgba(18,18,18,.12);
}


/* ============================= HOW IT WORKS ============================== */
.how-it-works-section{ background: var(--surface); border-top: 1px solid var(--border); }
.hiw-timeline{ position: relative; }
.hiw-step{ text-align:center; padding: 1.25rem .75rem; transition: transform .15s ease; }
.hiw-step:hover{ transform: translateY(-4px); }
.hiw-icon{
  width: 74px; height: 74px; border-radius: 50%; display:inline-grid; place-items:center; font-size:1.6rem; color: rgb(55, 43, 11);
  background: radial-gradient(60px 60px at 30% 30%, rgba(253,190,2,.25), rgba(255,255,255,.85)), var(--grad-brand);
  border: 2px solid rgba(253,190,2,.25);
}
.hiw-step h4{ margin-top: .9rem; margin-bottom: .35rem; font-weight: 900; color: var(--heading); }
.hiw-step p{ color: var(--text-2); font-size: .95rem; }
@media (min-width: 768px){
  .hiw-timeline::before{
    content:""; position:absolute; top: 36px; left: 10%; right: 10%; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--sky), var(--rose), var(--lime)); opacity: .25; border-radius: 999px;
  }
}

/* =========================================================================
   KEY MARKETS — V2
   - Light, colorful cards w/ flag CDN
   - Exactly 10 items via Twig slice in HTML
   - Fully scoped under #page-signin (CuteSMM docs)
   ========================================================================= */
#page-signin {
  --brand: rgb(253,190,2);
  --ink: #0f172a;
  --muted: #62748b;
  --soft: #f4f7fb;
  --ring: rgba(253,190,2,.45);
}

#page-signin .markets-v2 {
  background: linear-gradient(180deg, var(--soft) 0%, #ffffff 100%);
}

#page-signin .markets-v2 .mk-title {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.3px;
}
#page-signin .markets-v2 .mk-accent { color: var(--brand); }
#page-signin .markets-v2 .mk-subtitle {
  color: var(--muted);
  max-width: 980px;
  margin: 0 auto;
}

/* Card */
#page-signin .markets-v2 .mk-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
  position: relative;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}

#page-signin .markets-v2 .mk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(253,190,2,.35);
  box-shadow: 0 16px 42px rgba(15,23,42,.09);
}

/* Flag */
#page-signin .markets-v2 .mk-flag {
  width: 64px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(253,190,2,.18), rgba(253,190,2,.08));
  border: 1px solid rgba(253,190,2,.35);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.6);
}
#page-signin .markets-v2 .mk-flag img { border-radius: 8px; }

/* Content */
#page-signin .markets-v2 .mk-card-title {
  color: var(--ink);
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 1.05rem;
}
#page-signin .markets-v2 .mk-card-text {
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Decorative shine & ring on hover */
#page-signin .markets-v2 .mk-shine,
#page-signin .markets-v2 .mk-ring {
  position: absolute; inset: 0; pointer-events: none;
}
#page-signin .markets-v2 .mk-shine {
  background: radial-gradient(480px 120px at -5% -30%, rgba(253,190,2,.18), transparent 65%),
              radial-gradient(300px 100px at 105% 120%, rgba(59,130,246,.12), transparent 70%);
  mix-blend-mode: screen;
  opacity: .85;
}
#page-signin .markets-v2 .mk-ring { box-shadow: 0 0 0 0 var(--ring); border-radius: 20px; }
#page-signin .markets-v2 .mk-card:hover .mk-ring { box-shadow: 0 0 0 6px var(--ring); }

/* Compact spacing for smaller phones */
@media (max-width: 360px) {
  #page-signin .markets-v2 .mk-card { grid-template-columns: 64px 1fr; padding: 16px; }
}


/* ============================== TESTIMONIALS ============================= */
.testimonial-card{
  background: var(--surface); border-radius: 16px; padding: 1.75rem; border: 1px solid var(--border); box-shadow: var(--shadow-s);
  transition: transform .18s ease, box-shadow .18s ease;
}
.testimonial-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-m); }
.testimonial-quote{ font-size: 2.2rem; color: var(--brand); opacity: .55; }
.testimonial-stars{ color: var(--brand); margin-block: .7rem; }
.testimonial-body{ font-style: italic; font-size: 1.05rem; line-height: 1.7; color: rgb(70,66,62); }
.testimonial-author{ display:flex; align-items:center; gap:.9rem; }
.author-avatar{ width:48px; height:48px; border-radius:50%; border:1px solid var(--border); }
.author-name{ font-weight: 800; }
.author-location{ color: var(--text-2); font-size: .9rem; }
#testimonialSlider .carousel-indicators button{ width:10px; height:10px; border-radius:50%; background: rgb(206,198,186); }
#testimonialSlider .carousel-indicators button.active{ background: var(--brand); }

/* ======================== PAYMENTS — COLORFUL (V3) ======================= */
#page-signin .payments-v3{
  background: radial-gradient(1200px 520px at 0% -10%, rgba(30,144,255,.08), rgba(255,255,255,0) 70%),
              linear-gradient(180deg, rgb(235, 245, 255) 0%, rgb(239, 247, 255) 100%);
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
#page-signin .pmv3-header{ margin-bottom: 1rem; }
#page-signin .pmv3-title{ font-weight: 900; letter-spacing: .2px; line-height: 1.15; color: rgb(18,18,18); margin-bottom: .6rem; }
#page-signin .pmv3-accent{ background: linear-gradient(90deg, var(--sky), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#page-signin .pmv3-subtitle{ color: var(--text-2); max-width: 46ch; }
#page-signin .pmv3-chips{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin: 1rem 0 1.25rem; }
#page-signin .pmv3-chip{
  display:inline-flex; align-items:center; padding:.45rem .8rem; border-radius:999px; font-weight:800;
  background: rgb(255,255,255); color: rgb(60,60,60); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 18px rgba(18,18,18,.06);
}
#page-signin .pmv3-cta{ margin-top: .25rem; }

/* Grid */
#page-signin .pmv3-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 991.98px){  #page-signin .pmv3-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 575.98px){  #page-signin .pmv3-grid{ grid-template-columns: repeat(2,1fr); } }

/* Card */
#page-signin .pmv3-card{
  position: relative; isolation: isolate; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding: 1rem .9rem; min-height:98px; border-radius:16px; cursor: default; overflow:hidden;
  background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box,
              linear-gradient(135deg, var(--sky), var(--brand)) border-box;
  border: 1px solid transparent; box-shadow: 0 10px 24px rgba(18,18,18,.06);
  transition: transform .18s ease, box-shadow .22s ease, filter .18s ease;
}
/* Rotate gradients for variety */
#page-signin .pmv3-card:nth-child(6n+1){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--rose), var(--brand)) border-box; }
#page-signin .pmv3-card:nth-child(6n+2){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--sky),  var(--peach)) border-box; }
#page-signin .pmv3-card:nth-child(6n+3){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--lime), var(--sky))   border-box; }
#page-signin .pmv3-card:nth-child(6n+4){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--lav),  var(--brand)) border-box; }
#page-signin .pmv3-card:nth-child(6n+5){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--peach),var(--lav))   border-box; }
#page-signin .pmv3-card:nth-child(6n){   background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--teal), var(--rose))  border-box; }

#page-signin .pmv3-aura{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:16px;
  background: radial-gradient(160px 80px at 30% 30%, rgba(253,190,2,.16), rgba(255,255,255,0) 70%),
              radial-gradient(140px 70px at 70% 70%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%);
  transition: opacity .18s ease, transform .18s ease;
}
#page-signin .pmv3-shine{
  content:""; position:absolute; top:-20%; bottom:-20%; width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 80%);
  transform: translateX(-140%) rotate(16deg); pointer-events:none; z-index: 1; opacity: .0;
  transition: transform .6s ease, opacity .35s ease;
}

#page-signin .pmv3-card img{ position:relative; z-index:2; max-width:100%; object-fit:contain; filter: grayscale(100%) contrast(105%); transition: filter .18s ease, transform .18s ease; }
#page-signin .pmv3-name{ position:relative; z-index:2; margin:0; font-size:.8rem; font-weight:700; letter-spacing:.2px; color: rgb(95,93,89); }

#page-signin .pmv3-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 38px rgba(18,18,18,.12); }
#page-signin .pmv3-card:hover img{ filter: grayscale(0%) contrast(110%); transform: scale(1.03); }
#page-signin .pmv3-card:hover .pmv3-aura{ opacity:1; transform: scale(1.02); }
#page-signin .pmv3-card:hover .pmv3-shine{ transform: translateX(160%) rotate(16deg); opacity: .8; }

/* Tooltip on light */
#page-signin .tooltip-inner{ background: rgb(35,35,35); color: rgb(255,255,255); font-weight:600; }
#page-signin .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
#page-signin .tooltip.bs-tooltip-top .tooltip-arrow::before{ border-top-color: rgb(35,35,35); }

/* ================================== FAQ ================================== */
.faq-accordion-wrapper{ max-width: 860px; margin-inline: auto; }
#page-signin .accordion-item{ background: var(--surface); border: 1px solid var(--border); }
#page-signin .accordion-button{ background: var(--surface); color: var(--heading); font-weight: 800; box-shadow: none !important; padding-block: 1rem; }
#page-signin .accordion-button:not(.collapsed){
  background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box,
              linear-gradient(90deg, var(--brand), var(--sky), var(--rose)) border-box;
  border: 1px solid transparent; color: rgb(55,43,11);
}
#page-signin .accordion-button::after{ filter: invert(0) brightness(.5); }
#page-signin .accordion-body{ color: var(--text-2); }

/* ========================= FINAL CTA + BACK-TO-TOP ======================= */
.final-cta-section{
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(600px 360px at 0% 0%, rgba(253,190,2,.14), rgba(255,255,255,0) 70%),
              radial-gradient(700px 420px at 100% 100%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%),
              url('https://images.unsplash.com/photo-1611162617474-5b21e879e113?q=80&w=1974&auto=format&fit=crop') center/cover no-repeat;
}
.final-cta-section::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.78)); }
.cta-title{ font-weight: 900; font-size: clamp(1.8rem, 2.8vw, 2.6rem); color: rgb(24,24,24); margin-bottom:.4rem; }
.cta-subtitle{ color: rgb(86,82,78); max-width: 560px; margin-inline:auto; margin-bottom: 1.4rem; }

.back-to-top-btn{
  position: fixed; right: 18px; bottom: 18px; width: 50px; height: 50px; border-radius: 50%;
  border: none; background: var(--grad-brand); color: rgb(55, 43, 11); display:grid; place-items:center; font-size: 1.1rem;
  box-shadow: var(--shadow-m); cursor: pointer; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease, filter .18s ease, box-shadow .18s ease;
}
.back-to-top-btn.visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top-btn:hover{ filter: saturate(1.06); box-shadow: 0 16px 32px rgba(18,18,18,.14); }

/* ============================== RESPONSIVE =============================== */
@media (max-width: 991.98px){
  #page-signin .section-title,
  #page-signin h1, #page-signin h2 { font-size: calc(1.35rem + .8vw); }
  .hero-auth-section .hero-content { text-align: center; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 767.98px){
  #page-signin { --py: clamp(2.2rem, 8vw, 3.2rem); }
  .hero-auth-section .hero-title { font-size: 2.1rem; line-height: 1.2; }
  .hero-auth-section .auth-card { padding: 1rem; }
  .auth-card-header { flex-direction: column; gap: .45rem; }
  .stat-value { font-size: 1.7rem; }
}

/* Keyframes (repeat for safety if bundlers split files) */
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes shine{ from{transform:translateX(-120%)} to{transform:translateX(220%)} }








/* =========================================================================
   STYLE: Sign In Page (Light, Colorful, Mobile-first)
   - All selectors prefixed with #page-signin  (CuteSMM docs)
   - RGB/RGBA colors only
   - Balanced shadows, rounded corners, friendly motion
   ========================================================================= */

/* ---------------------------
   0) CSS Variables (Theme)
   --------------------------- */
#page-signin {
  /* Brand + accents (RGB only) */
  --brand: rgb(253, 190, 2);          /* primary (requested) */
  --brand-ink: rgb(47, 38, 8);
  --sky: rgb(14, 165, 233);
  --rose: rgb(255, 99, 132);
  --lime: rgb(124, 207, 99);
  --violet: rgb(155, 135, 245);

  /* Surfaces / text */
  --bg: rgb(250, 250, 248);
  --surface: rgb(255, 255, 255);
  --muted: rgb(93, 94, 98);
  --border: rgb(230, 230, 228);

  /* Alphas */
  --brand-08: rgba(253, 190, 2, .08);
  --brand-14: rgba(253, 190, 2, .14);
  --sky-10: rgba(14, 165, 233, .10);

  /* Radii + shadows */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --sh-s: 0 6px 14px rgba(18,18,18,.06);
  --sh-m: 0 12px 28px rgba(18,18,18,.10);
  --ring: 0 0 0 4px rgba(253,190,2,.22);

  /* Typography */
  --font: 'Roboto', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------------------------
   1) Base + Helpers
   --------------------------- */
#page-signin {
  font-family: var(--font);
  color: rgb(28,28,27);
  background:
    radial-gradient(1100px 360px at 0% -20%, var(--brand-08), rgba(255,255,255,0) 70%),
    radial-gradient(1100px 360px at 100% -10%, var(--sky-10), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--bg) 0%, rgb(255,255,255) 100%);
}

#page-signin .section-padding { padding-block: clamp(2rem, 4vw, 3.5rem); }
#page-signin .section-padding-sm { padding-block: clamp(1.25rem, 3vw, 2rem); }
#page-signin .text-accent { color: var(--brand); }

#page-signin a { color: var(--sky); text-decoration: none; }
#page-signin a:hover { color: var(--brand); text-decoration: underline; }
#page-signin :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* ---------------------------
   2) Buttons
   --------------------------- */
#page-signin .btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-color: var(--brand-ink);
  --bs-btn-border-color: rgba(0,0,0,0);
  --bs-btn-hover-bg: rgb(255, 197, 26);
  --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-focus-shadow-rgb: 253,190,2;
  font-weight: 800; border-radius: 999px; box-shadow: var(--sh-s);
}
#page-signin .btn-outline-brand{
  border-radius: 999px;
  border: 2px solid var(--brand);
  color: var(--brand-ink);
  background: rgba(253,190,2,.08);
  font-weight: 800;
}
#page-signin .btn-outline-brand:hover{ background: var(--brand); color: var(--brand-ink); }
#page-signin .btn-google{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-weight:800; border:1px solid var(--border); background: var(--surface);
  border-radius: 999px; box-shadow: var(--sh-s);
}

/* ---------------------------
   3) Hero
   --------------------------- */
#page-signin .hero-auth-section{
  position: relative;
}
#page-signin .hero-title{ font-weight: 900; }
#page-signin .hero-media-wrapper{
  position: relative; max-width: 600px; margin-left: auto;
  filter: saturate(1.05);
}
#page-signin .hero-image{
  border-radius: var(--r-l); box-shadow: var(--sh-m); background: var(--surface);
}
#page-signin .hero-badge{
  position:absolute; display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  color: var(--brand-ink); background: var(--brand); box-shadow: var(--sh-m);
  animation: floatY 5.2s ease-in-out infinite;
}
#page-signin .hero-badge.fb{ left:75px; top:52%; }
#page-signin .hero-badge.tk{ left:460px; top:60%; animation-delay: .6s; }
#page-signin .hero-badge.yt{ left:22%; bottom:-18px; animation-delay: 1.2s; }
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ---------------------------
   4) Auth Card
   --------------------------- */
#page-signin .auth-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-l);
  box-shadow: var(--sh-m); padding: 1.25rem;
}
#page-signin .auth-card-header{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.5rem;
}
#page-signin .auth-title{ font-weight: 900; margin:0; }
#page-signin .auth-link a{ font-weight: 800; }

#page-signin .input-group-text{
  background: rgba(253,190,2,.10); border-color: var(--border); font-weight: 800;
}
#page-signin .form-control{
  border-color: var(--border);
}
#page-signin .form-control:focus{ box-shadow: var(--ring); border-color: rgba(253,190,2,.6); }
#page-signin .link-forgot{ font-weight: 800; }

#page-signin .or-divider{
  display:flex; align-items:center; justify-content:center; gap:.8rem; margin:1rem 0;
}
#page-signin .or-divider::before,
#page-signin .or-divider::after{
  content:""; height:1px; background: var(--border); flex:1;
}
#page-signin .or-divider span{ font-weight:800; color: var(--muted); }

/* ---------------------------
   5) Mini Stats
   --------------------------- */
#page-signin .stat-item{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-m);
  padding: 1rem; text-align:center; box-shadow: var(--sh-s); transition: transform .15s ease;
}
#page-signin .stat-item:hover{ transform: translateY(-2px); }
#page-signin .stat-icon{ font-size:1.4rem; color: var(--brand-ink); background: var(--brand-14); display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; margin-bottom:.5rem; }
#page-signin .stat-value{ font-weight: 900; font-size: clamp(1.25rem, 2.7vw, 1.8rem); }
#page-signin .stat-label{ color: var(--muted); font-weight: 700; }

/* ---------------------------
   6) Services — Pills & Pane
   --------------------------- */
#page-signin .services-pills{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
#page-signin .pill-item{
  border:1px solid var(--border); background: var(--surface); border-radius: 999px; padding:.45rem .8rem;
  display:inline-flex; align-items:center; gap:.45rem; font-weight:800; color: rgb(55,55,55); box-shadow: var(--sh-s);
  transition: background .12s ease, color .12s ease, transform .12s ease, border-color .12s ease;
}
#page-signin .pill-item.active,
#page-signin .pill-item:hover{
  background: linear-gradient(90deg, var(--brand), var(--sky));
  color: var(--brand-ink); border-color: rgba(0,0,0,0); transform: translateY(-1px);
}
#page-signin .service-pane-content{ background: var(--surface); border:1px solid var(--border); border-radius: var(--r-m); padding:1rem; box-shadow: var(--sh-s); }
#page-signin .service-pane-title{ font-weight: 900; }

/* ---------------------------
   7) Why Cards
   --------------------------- */
/* =========================================================================
   WHY V2 — Light, colorful, mobile-first (scoped to #page-signin)
   ========================================================================= */

/* Section wrapper */
#page-signin .why-v2 .section-header .section-title { font-weight: 900; }
#page-signin .why-v2 .section-header .section-subtitle { color: var(--muted); }

/* Chips row */
#page-signin .whyv2-chips{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.75rem 0 1.25rem;
}
#page-signin .whyv2-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .7rem; border-radius:999px; font-weight:800;
  background: rgba(14,165,233,.09); color: rgb(9,108,150); border:1px solid rgba(14,165,233,.22);
}

/* KPIs */
#page-signin .whyv2-kpi{
  background: var(--surface); border:1px solid var(--border); border-radius: 14px;
  padding:.9rem; text-align:center; box-shadow: var(--sh-s);
}
#page-signin .whyv2-kpi-label{ font-weight:800; color: var(--muted); }
#page-signin .whyv2-kpi-value{ font-weight:900; font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Feature cards */
#page-signin .whyv2-card{
  position:relative; background: var(--surface);
  border:1px solid var(--border); border-radius: 18px; padding: 1rem .95rem 1.1rem;
  box-shadow: var(--sh-s); overflow:hidden; isolation:isolate;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#page-signin .whyv2-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-m); border-color: rgba(253,190,2,.45); }
#page-signin .whyv2-card-top{ display:flex; align-items:center; justify-content:space-between; }

#page-signin .whyv2-icon{
  width:56px; height:56px; display:grid; place-items:center; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--sky)); color: var(--brand-ink);
  box-shadow: var(--sh-s); font-size:1.25rem;
}

#page-signin .whyv2-tag{
  font-size:.75rem; font-weight:900; padding:.25rem .55rem; border-radius:999px;
  color: var(--brand-ink); background: var(--brand-08); border:1px solid rgba(253,190,2,.28);
}

#page-signin .whyv2-title{ margin:.7rem 0 .25rem; font-weight:900; }
#page-signin .whyv2-text{ color: var(--muted); margin-bottom:.65rem; }

/* Bullets */
#page-signin .whyv2-bullets{ list-style:none; padding:0; margin:0 0 .5rem 0; }
#page-signin .whyv2-bullets li{
  display:flex; align-items:flex-start; gap:.5rem; line-height:1.35; margin:.35rem 0;
  font-weight:500; color: rgb(48,48,48);
}
#page-signin .whyv2-bullets i{
  color: var(--lime); margin-top:.15rem;
}

/* Card actions */
#page-signin .whyv2-actions{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.6rem;
}
#page-signin .whyv2-link{
  display:inline-flex; align-items:center; gap:.45rem; font-weight:800; color: var(--sky); text-decoration:none;
}
#page-signin .whyv2-link:hover{ color: var(--brand); text-decoration:underline; }
#page-signin .whyv2-link-icon{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background: rgba(253,190,2,.12); color: var(--brand-ink); border:1px solid rgba(253,190,2,.28);
}

/* Expanded body */
#page-signin .whyv2-more{ margin-top:.6rem; }
#page-signin .whyv2-more-body{
  background: rgba(14,165,233,.06); border:1px dashed rgba(14,165,233,.35);
  border-radius: 14px; padding: .7rem .8rem; color: rgb(40,40,40);
}

/* Subtle ambient glow */
#page-signin .whyv2-glow{
  content:""; position:absolute; inset:-40% -40% auto -40%; height:42%;
  background:
    radial-gradient(320px 160px at 12% 8%, rgba(253,190,2,.15), rgba(255,255,255,0)),
    radial-gradient(300px 160px at 88% 92%, rgba(14,165,233,.12), rgba(255,255,255,0));
  filter: blur(10px); z-index:-1; pointer-events:none;
}

/* RTL niceties */
#page-signin.rtl .whyv2-actions{ flex-direction: row-reverse; }
#page-signin.rtl .whyv2-bullets li{ flex-direction:row-reverse; }

/* ---------------------------
   8) HIW Timeline
   --------------------------- */
/* ============ HOW IT WORKS — V3 (scoped) ============ */
#page-signin .how-v3 {
  --brand: rgb(253,190,2);
  --ink: #0f172a;
  --muted: #6b7280;
  --card: rgba(255,255,255,0.72);
  --ring: rgba(253,190,2,0.35);
  --stroke: rgba(15,23,42,0.06);
  position: relative;
}

#page-signin .how-v3 .hiw-eyebrow{
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .25rem;
}

#page-signin .how-v3 .hiw-title{
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 .5rem 0;
}

#page-signin .how-v3 .hiw-accent{
  background: linear-gradient(90deg, var(--brand), #ff7a00 60%, #ff3d3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#page-signin .how-v3 .hiw-lead{
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto 1.25rem;
}

/* Progress rail behind cards */
#page-signin .how-v3 .hiw-track{
  position: relative;
  height: 4px;
  background: var(--stroke);
  border-radius: 999px;
  margin: 2rem auto 1.5rem;
  width: min(780px, 92%);
}
#page-signin .how-v3 .hiw-track-progress{
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), #ff7a00);
  border-radius: inherit;
  transition: width .6s ease;
}

/* Cards grid */
#page-signin .how-v3 .hiw-grid{ position: relative; z-index: 1; }

#page-signin .how-v3 .hiw-step{
  height: 100%;
  background: var(--card);
  backdrop-filter: blur(6px);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: 0 8px 24px rgba(2,8,23,0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}

#page-signin .how-v3 .hiw-step::after{
  content: "";
  position: absolute; inset: -1px -1px auto -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), #ff7a00, #ff3d3d);
  opacity: .0;
  transition: opacity .3s ease;
}

#page-signin .how-v3 .hiw-step:hover{
  transform: translateY(-4px);
  border-color: var(--ring);
  box-shadow: 0 14px 36px rgba(2,8,23,0.12);
}
#page-signin .how-v3 .hiw-step:hover::after{ opacity: 1; }

/* Top row */
#page-signin .how-v3 .hiw-step-top{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem;
}
#page-signin .how-v3 .hiw-step-badge{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  font-weight: 800; color: #111827; background: #fff;
  border: 2px solid var(--ring);
  box-shadow: 0 4px 12px rgba(253,190,2,0.25);
}
#page-signin .how-v3 .hiw-step-ico{
  font-size: 1.35rem; line-height: 1; color: var(--brand);
  filter: drop-shadow(0 8px 14px rgba(253,190,2,.25));
}

/* Titles & body */
#page-signin .how-v3 .hiw-step-title{
  font-weight: 800; margin: .25rem 0 .25rem; line-height: 1.2;
}
#page-signin .how-v3 .hiw-step-text{ color: var(--muted); margin-bottom: .65rem; }

/* Meta chips */
#page-signin .how-v3 .hiw-step-meta{
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem;
}
#page-signin .how-v3 .hiw-step-meta span{
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px dashed var(--stroke);
  background: rgba(255,255,255,.7);
  padding: .35rem .55rem; border-radius: 999px; font-size: .8rem;
}

/* CTA */
#page-signin .how-v3 .hiw-step-cta.btn{
  --bs-btn-border-radius: 12px;
  --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .8rem; font-weight: 600;
}

/* Mobile vertical connector */
@media (max-width: 991.98px){
  #page-signin .how-v3 .hiw-track{ display:none; }
  #page-signin .how-v3 .hiw-grid{
    position: relative;
  }
  #page-signin .how-v3 .hiw-grid::before{
    content:"";
    position:absolute; left: 20px; top: .2rem; bottom: .2rem;
    width: 3px; background: var(--stroke); border-radius: 999px;
  }
  #page-signin .how-v3 .hiw-step{
    padding-left: 3.2rem;
  }
  #page-signin .how-v3 .hiw-step-badge{
    position:absolute; left: .65rem; top: .85rem;
  }
}

/* =========================================================================
   TESTIMONIALS — V4
   - Light, colorful cards with brand accent
   - Mobile: horizontal snap; Desktop: responsive grid
   - Scoped to #page-signin to follow CuteSMM theming guidelines
   ========================================================================= */
#page-signin {
  --brand: rgb(253,190,2);        /* Primary brand color */
  --ink: #0f172a;                 /* Headline/text (dark slate for contrast) */
  --muted: #61738a;               /* Muted text */
  --card-bg: #ffffff;             /* Card base */
  --soft: #f6f8fb;                /* Soft section background */
  --ring: rgba(253,190,2,.45);    /* Focus ring / glow */
}

#page-signin .testimonials-v4 {
  background: linear-gradient(180deg, var(--soft) 0%, #fff 100%);
  position: relative;
}

#page-signin .testimonials-v4 .section-title {
  font-weight: 900;
  letter-spacing: -.3px;
  color: var(--ink);
}

#page-signin .testimonials-v4 .text-accent {
  color: var(--brand);
}

/* Grid / Horizontal snapping on mobile */
#page-signin .t4-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  padding-bottom: 8px;
}
#page-signin .t4-grid::-webkit-scrollbar { height: 8px; }
#page-signin .t4-grid::-webkit-scrollbar-thumb {
  background: rgba(31,41,55,.15);
  border-radius: 10px;
}

@media (min-width: 576px) {
  #page-signin .t4-grid { grid-template-columns: repeat(2, 1fr); overflow: visible; }
}
@media (min-width: 992px) {
  #page-signin .t4-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Card */
#page-signin .t4-card {
  position: relative;
  scroll-snap-align: start;
  background:
    radial-gradient(1200px 200px at -20% -40%, rgba(253,190,2,.12), transparent 60%),
    linear-gradient(180deg, #fff, #fff);
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
  padding: 22px 20px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  will-change: transform;
  overflow: hidden;
}
#page-signin .t4-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 42px rgba(15,23,42,.09);
  border-color: rgba(253,190,2,.35);
}

/* Decorative sparkle & shine */
#page-signin .t4-sparkle,
#page-signin .t4-shine {
  position: absolute;
  pointer-events: none;
  inset: 0;
}
#page-signin .t4-sparkle {
  background:
    radial-gradient(12px 12px at 15% 25%, rgba(253,190,2,.35), transparent 70%),
    radial-gradient(10px 10px at 85% 15%, rgba(36,99,235,.18), transparent 70%),
    radial-gradient(9px 9px at 90% 70%, rgba(16,185,129,.18), transparent 70%),
    radial-gradient(8px 8px at 25% 85%, rgba(244,63,94,.18), transparent 70%);
  filter: blur(.2px);
}
#page-signin .t4-shine {
  background: radial-gradient(350px 80px at -10% -30%, rgba(253,190,2,.18), transparent 65%);
  mix-blend-mode: screen;
}

/* Top row */
#page-signin .t4-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
#page-signin .t4-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(253,190,2,.25), rgba(253,190,2,.12));
  color: #915c00;
  border: 1px solid rgba(253,190,2,.35);
}

/* Stars (auto-filled by JS) */
#page-signin .t4-stars { font-size: 14px; color: var(--brand); }

/* Headline & quote */
#page-signin .t4-headline {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 6px 0 10px;
  color: var(--ink);
}
#page-signin .t4-quote {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 14px;
  padding: 14px 14px 14px 42px;
}
#page-signin .t4-quote-ico {
  position: absolute; left: 12px; top: 12px;
  color: rgba(253,190,2,.9);
  font-size: 18px;
}
#page-signin .t4-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Author */
#page-signin .t4-author {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
}
#page-signin .t4-avatar {
  border-radius: 50%;
  border: 2px solid var(--brand);
  padding: 2px;
  background: #fff;
}
#page-signin .t4-name { color: var(--ink); font-weight: 800; display: block; }
#page-signin .t4-loc  { color: var(--muted); font-size: .9rem; }
/* =========================================================================
   ABOUT — PREMIER PARTNER (Screenshot style)  |  Scoped to #page-signin
   ========================================================================= */
#page-signin .about-spotlight-v1{
  background:
    radial-gradient(1200px 420px at 100% -10%, rgba(100,181,246,.10), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--surface) 0%, #fff 100%);
  position: relative;
}

#page-signin .as-eyebrow{
  color: rgb(20, 115, 230);
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: .25rem;
}
#page-signin .as-title{
  font-weight: 900;
  letter-spacing: -.3px;
  line-height: 1.05;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  color: var(--heading);
  margin-bottom: .6rem;
}
#page-signin .as-title .as-accent{
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ffa600);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#page-signin .as-lead{ color: var(--text-2); max-width: 56ch; }

/* ------------ Visual ------------- */
#page-signin .as-visual{
  position: relative;
  max-width: 720px;
  margin-left: auto;
  isolation: isolate;
}
#page-signin .as-person{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  filter: saturate(1.03);
}

/* Big gradient disc */
#page-signin .as-visual::before{
  content:"";
  position:absolute; inset:-10% -8% -10% -8%;
  border-radius: 40px;
  background:
    radial-gradient(1000px 560px at 80% 10%, rgba(253,190,2,.18), rgba(255,255,255,0) 60%),
    radial-gradient(800px 480px at 20% 80%, rgba(124,58,237,.16), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgb(248,241,255), rgb(255,241,233));
  z-index:-1;
  filter: saturate(1.05);
}

/* Dashed ring */
#page-signin .as-visual::after{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: 86%; aspect-ratio: 1/1; border-radius: 50%;
  background: repeating-conic-gradient(rgba(0,0,0,.18) 0 14deg, transparent 14deg 26deg);
  opacity: .25;
  -webkit-mask: radial-gradient(farthest-side, transparent 78%, #000 80%);
          mask: radial-gradient(farthest-side, transparent 78%, #000 80%);
  pointer-events:none;
}

/* Growth badge card */
#page-signin .as-badge-card{
  position:absolute; left:4%; top:8%;
  display:flex; gap:10px; align-items:center;
  padding:10px 12px; border-radius:14px;
  background: rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
#page-signin .as-badge-icon{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(59,130,246,.18), rgba(59,130,246,.08));
  color:#2563eb; border:1px solid rgba(59,130,246,.28);
}
#page-signin .as-badge-title{ font-weight: 900; line-height:1; color: rgb(17,24,39); }
#page-signin .as-badge-sub{ font-size:.8rem; color: var(--text-2); line-height:1.1; }
#page-signin .as-badge-kpi{ font-weight:800; color: rgb(16,185,129); font-size:.9rem; }

/* Stats sticker */
#page-signin .as-sticker{
  position:absolute; left:10%; bottom:8%;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:16px;
  background: linear-gradient(180deg, rgba(14,165,233,.14), rgba(14,165,233,.06));
  border:1px solid rgba(14,165,233,.28);
  color:#0ea5e9; box-shadow: 0 12px 28px rgba(15,23,42,.12);
}
#page-signin .as-sticker .sep{
  width:1px; height:18px; background: rgba(14,165,233,.35);
  margin-inline: 2px;
}

/* IG bubble */
#page-signin .as-ig-bubble{
  position:absolute; right:2%; bottom:10%;
  width:84px; height:84px; border-radius:24px; display:grid; place-items:center;
  font-size:42px; color:#fff;
  background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
  box-shadow: inset 0 0 14px rgba(255,255,255,.35), 0 14px 36px rgba(15,23,42,.16);
}

/* Hover polish on large screens */
@media (min-width: 992px){
  #page-signin .as-badge-card { transition: transform .25s ease; }
  #page-signin .as-badge-card:hover { transform: translateY(-3px); }
  #page-signin .as-ig-bubble { transition: transform .25s ease; }
  #page-signin .as-ig-bubble:hover { transform: translateY(-4px) scale(1.02); }
}

/* Responsive tweaks */
@media (max-width: 991.98px){
  #page-signin .as-visual::after{ opacity:.18; width: 92%; }
  #page-signin .as-badge-card{ left:2%; top:4%; transform: scale(.96); }
  #page-signin .as-sticker{ left:4%; bottom:6%; transform: scale(.96); }
  #page-signin .as-ig-bubble{ right:1%; bottom:6%; width:68px; height:68px; font-size:34px; border-radius:18px; }
}
@media (max-width: 575.98px){
  #page-signin .as-badge-card{ position:absolute; left:8px; right:auto; top:10px; }
  #page-signin .as-sticker{ left:10px; bottom:10px; }
  #page-signin .as-visual::after{ display:none; } /* reduce overlap on small phones */
}



/* Reduce padding on very small screens */
@media (max-width: 360px) {
  #page-signin .t4-card { padding: 18px 16px; }
}

/* ---------------------------
  10) Payments v3 — Colorful grid
  --------------------------- */
/* ===== Payments v4 — Colorful, glassy, mobile-first (scoped) ===== */
#page-signin .payments-v4{
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(1200px 520px at 0% -10%, rgba(30,144,255,.08), rgba(255,255,255,0) 70%),
    radial-gradient(1200px 520px at 100% 110%, rgba(253,190,2,.10), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgb(239,247,255) 0%, rgb(255,255,255) 100%);
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Header */
#page-signin .payv4-eyebrow{
  margin: 0 0 .25rem; font-weight: 900; letter-spacing: .35px; color: var(--sky);
}
#page-signin .payv4-title{
  margin: 0 0 .45rem; font-weight: 900; line-height: 1.15;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); color: rgb(24,24,24);
}
#page-signin .payv4-grad{
  background: linear-gradient(90deg, var(--brand), var(--sky));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#page-signin .payv4-subtitle{ color: var(--text-2); max-width: 52ch; }

/* Chips */
#page-signin .payv4-chips{ display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: .9rem 0 1.1rem; }
#page-signin .payv4-chip{
  display: inline-flex; align-items: center; padding: .45rem .8rem; border-radius: 999px;
  font-weight: 800; background: rgb(255,255,255); color: rgb(60,60,60);
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 18px rgba(18,18,18,.06);
}

/* Actions */
#page-signin .payv4-actions .btn{ border-radius: 12px; }
@media (max-width: 575.98px){
  #page-signin .payv4-actions .btn{ width: 100%; }
}
#page-signin .payv4-note{ color: var(--text-2); }

/* Grid */
#page-signin .pmv4-grid{
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 991.98px){ #page-signin .pmv4-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 575.98px){ #page-signin .pmv4-grid{ grid-template-columns: repeat(2,1fr); } }

/* Card */
#page-signin .pmv4-card{
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .45rem; min-height: 102px;
  padding: .9rem .8rem; border-radius: 16px; cursor: default; overflow: hidden;

  /* colorful gradient border with white fill */
  background:
    linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box,
    linear-gradient(135deg, var(--sky), var(--brand)) border-box;
  border: 1px solid transparent;

  box-shadow: 0 10px 24px rgba(18,18,18,.06);
  transition: transform .18s ease, box-shadow .22s ease, filter .18s ease;
}

/* Rotate border gradients for variety */
#page-signin .pmv4-card:nth-child(6n+1){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--rose), var(--brand)) border-box; }
#page-signin .pmv4-card:nth-child(6n+2){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--sky),  var(--peach)) border-box; }
#page-signin .pmv4-card:nth-child(6n+3){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--lime), var(--sky))   border-box; }
#page-signin .pmv4-card:nth-child(6n+4){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--lav),  var(--brand)) border-box; }
#page-signin .pmv4-card:nth-child(6n+5){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--peach),var(--lav))   border-box; }
#page-signin .pmv4-card:nth-child(6n){   background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--teal), var(--rose))  border-box; }

/* Auras + shine */
#page-signin .pmv4-aura{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:16px;
  background:
    radial-gradient(160px 80px at 30% 30%, rgba(253,190,2,.16), rgba(255,255,255,0) 70%),
    radial-gradient(140px 70px at 70% 70%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%);
  transition: opacity .18s ease, transform .18s ease;
}
#page-signin .pmv4-shine{
  content:""; position:absolute; top:-22%; bottom:-22%; width: 42%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 80%);
  transform: translateX(-140%) rotate(16deg); pointer-events:none; z-index: 1; opacity: .0;
  transition: transform .6s ease, opacity .35s ease;
}

/* Logo & name */
#page-signin .pmv4-card img{
  position:relative; z-index:2; max-width:100%; object-fit:contain;
  transition: filter .18s ease, transform .18s ease;
}
#page-signin .pmv4-name{
  position:relative; z-index:2; margin:0; font-size:.82rem; font-weight:800; letter-spacing:.2px; color: rgb(95,93,89);
}

/* Hover */
#page-signin .pmv4-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 38px rgba(18,18,18,.12); }
#page-signin .pmv4-card:hover img{ filter: grayscale(0%) contrast(110%); transform: scale(1.03); }
#page-signin .pmv4-card:hover .pmv4-aura{ opacity: 1; transform: scale(1.02); }
#page-signin .pmv4-card:hover .pmv4-shine{ transform: translateX(160%) rotate(16deg); opacity: .8; }

/* Dark tooltip on light bg (keeps RGB) */
#page-signin .tooltip-inner{ background: rgb(35,35,35); color: rgb(255,255,255); font-weight:600; }
#page-signin .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
#page-signin .tooltip.bs-tooltip-top .tooltip-arrow::before{ border-top-color: rgb(35,35,35); }


/* ---------------------------
  12) Final CTA
  --------------------------- */
#page-signin .final-cta-section{ text-align:center; }
#page-signin .cta-title{ font-weight: 900; }
/* ===== Final CTA v2 (scoped) ===== */
#page-signin .final-cta-v2{
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(700px 360px at 0% 0%, rgba(253,190,2,.14), rgba(255,255,255,0) 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgb(245,248,255) 0%, rgb(255,255,255) 100%);
  border-block: 1px solid rgba(0,0,0,.05);
}

/* Eyebrow / titles */
#page-signin .final-cta-v2 .cta-eyebrow{
  font-weight:900; letter-spacing:.3px; color: var(--sky); margin-bottom:.15rem;
}
#page-signin .final-cta-v2 .cta-title{
  font-weight: 900; color: rgb(24,24,24);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom:.35rem;
}
#page-signin .final-cta-v2 .cta-subtitle{
  color: var(--text-2); max-width: 56ch; margin: 0 auto;
}
@media (min-width: 992px){
  #page-signin .final-cta-v2 .cta-subtitle{ margin: 0; }
}

/* Chips */
#page-signin .final-cta-v2 .cta-chips{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin: .9rem 0 1.1rem;
  justify-content:center;
}
@media (min-width: 992px){
  #page-signin .final-cta-v2 .cta-chips{ justify-content:flex-start; }
}
#page-signin .final-cta-v2 .cta-chip{
  display:inline-flex; align-items:center; padding:.45rem .8rem; border-radius:999px; font-weight:800;
  background: rgb(255,255,255); color: rgb(60,60,60);
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 18px rgba(18,18,18,.06);
}

/* Trust line */
#page-signin .final-cta-v2 .cta-trust{ color: var(--text-2); }

/* Visual block */
#page-signin .final-cta-v2 .cta-visual{
  position: relative; min-height: 220px;
  background:
    linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box,
    linear-gradient(135deg, var(--sky), var(--brand)) border-box;
  border: 1px solid transparent; border-radius: 18px; padding: 16px;
  box-shadow: 0 14px 32px rgba(18,18,18,.10);
}

/* KPI card inside visual */
#page-signin .final-cta-v2 .cta-kpi-card{
  position: relative; z-index: 2; background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(18,18,18,.08);
}
#page-signin .final-cta-v2 .kpi-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem;
}
#page-signin .final-cta-v2 .kpi-badge{
  width: 36px; height: 36px; border-radius: 10px; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(253,190,2,.25), rgba(253,190,2,.12));
  color: rgb(145,92,0); border: 1px solid rgba(253,190,2,.35);
}
#page-signin .final-cta-v2 .kpi-stars{ color: var(--brand); font-size: 14px; letter-spacing: 2px; }
#page-signin .final-cta-v2 .kpi-head{ font-weight: 900; color: rgb(24,24,24); }
#page-signin .final-cta-v2 .kpi-sub{ color: var(--text-2); font-size:.95rem; }

/* Floating social bubbles */
#page-signin .final-cta-v2 .cta-icon{
  position:absolute; display:grid; place-items:center; width:50px; height:50px;
  border-radius:50%; color: rgb(55,43,11);
  background: radial-gradient(60px 60px at 30% 30%, rgba(253,190,2,.22), rgba(255,255,255,.85)),
              var(--grad-brand, linear-gradient(135deg, var(--brand), rgb(255,205,75)));
  border: 2px solid rgba(253,190,2,.25); box-shadow: 0 12px 24px rgba(18,18,18,.10);
  animation: floatY 6s ease-in-out infinite;
}
#page-signin .final-cta-v2 .cta-icon.ig{ right: 18px; top: -18px; animation-delay: .1s; }
#page-signin .final-cta-v2 .cta-icon.yt{ left: -14px; bottom: 18px; animation-delay: .6s; }
#page-signin .final-cta-v2 .cta-icon.tk{ right: -12px; bottom: -14px; animation-delay: 1.2s; }

/* Mobile tweaks */
@media (max-width: 575.98px){
  #page-signin .final-cta-v2 .cta-visual{ min-height: 200px; }
}

/* Reuse existing keyframes (fallback) */
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ===== Final CTA v2 (scoped to #page-signin) ===== */
#page-signin .final-cta-section.cta-v2{
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(700px 360px at 0% 0%, rgba(253,190,2,.14), rgba(255,255,255,0) 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgb(245,248,255) 0%, rgb(255,255,255) 100%);
  border-block: 1px solid rgba(0,0,0,.05);
}

/* ===== CTA v3 — Glass stats banner (scoped) ===== */
#page-signin .cta-v3{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(900px 360px at 0% -10%, rgba(253,190,2,.12), rgba(255,255,255,0) 70%),
    radial-gradient(900px 360px at 100% 110%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgb(245,248,255) 0%, #fff 100%);
  border-block: 1px solid rgba(0,0,0,.05);
}

#page-signin .cta3-eyebrow{
  font-weight:900; letter-spacing:.35px; color: var(--sky); margin-bottom:.2rem;
}
#page-signin .cta3-title{
  font-weight:900; color: rgb(24,24,24);
  font-size: clamp(1.6rem, 3.2vw, 2.45rem); margin:0 0 .35rem;
}
#page-signin .cta3-grad{
  background: linear-gradient(90deg, var(--brand), var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#page-signin .cta3-subtitle{
  color: var(--text-2); max-width: 56ch; margin:0 auto .6rem;
}
@media (min-width: 992px){ #page-signin .cta3-subtitle{ margin:0 0 .6rem 0; } }

#page-signin .cta3-list{
  list-style:none; padding:0; margin:.6rem 0 1.1rem; display:grid; gap:.4rem;
}
#page-signin .cta3-list li{
  display:flex; align-items:flex-start; gap:.5rem; color: rgb(48,48,48); font-weight:600;
}
#page-signin .cta3-list i{ color: var(--lime); margin-top:.15rem; }

#page-signin .cta3-actions .btn{ border-radius:12px; }
#page-signin .cta3-trust{ color: var(--text-2); }

/* Glass card */
#page-signin .cta3-card{
  position:relative; background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px; padding: 16px; box-shadow: 0 14px 32px rgba(18,18,18,.08);
}
#page-signin .cta3-ring{
  position:absolute; inset:-1px; border-radius:18px; pointer-events:none;
  background: linear-gradient(135deg, var(--brand), var(--sky));
  opacity:.15; filter: blur(10px);
}
#page-signin .cta3-card-row{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; position:relative; z-index:1;
}
@media (max-width: 575.98px){
  #page-signin .cta3-card-row{ grid-template-columns:1fr; }
}
#page-signin .cta3-kpi{
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:14px;
  padding:12px 14px; text-align:center;
}
#page-signin .kpi-value{
  font-weight:900; font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: rgb(24,24,24);
}
#page-signin .kpi-label{ color: var(--text-2); font-weight:700; font-size:.95rem; }

#page-signin .cta3-note{
  position:relative; z-index:1; margin-top:10px; text-align:center;
  color: rgb(70,66,62); font-weight:700;
}

/* Buttons behave well on mobile */
@media (max-width: 575.98px){
  #page-signin .cta3-actions .btn{ width:100%; }
}


/* ---------------------------
  13) Back to Top
  --------------------------- */
#page-signin .back-to-top-btn{
  position: fixed; right: 16px; bottom: 16px; z-index: 999; width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--sky)); color: var(--brand-ink); border: none; box-shadow: var(--sh-m);
  display: grid; place-items: center; transform: translateY(16px); opacity: 0; visibility: hidden; transition: all .22s ease;
}
#page-signin .back-to-top-btn.show{ transform: translateY(0); opacity: 1; visibility: visible; }

/* ---------------------------
  14) RTL small fixes
  --------------------------- */
#page-signin.rtl .auth-card-header{ flex-direction: row-reverse; }
#page-signin.rtl .hero-content { text-align: start; }