/* =============================================================================
   CuteSMM — Layout & Pages (Rewrite v4)
   Scope: #site-layout / .neworder / .updates-page / .orders-page / .addfunds-page
          / #affiliates-page / #page-signin / #page-signup
   Palette: emerald + soft teal + warm neutral (no dark blue)
   Base text size: 2rem inside layout scopes
   ============================================================================= */

/* =========================
   Base: fonts, box-sizing, text size
   ========================= */
#site-layout,
#page-signin,
#page-signup{
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 2rem;          /* ← base text size as requested */
  line-height: 1.4;
}

#site-layout *,
#page-signin *,
#page-signup *,
#site-layout *::before,
#page-signin *::before,
#page-signup *::before,
#site-layout *::after,
#page-signin *::after,
#page-signup *::after{
  box-sizing: border-box;
}

/* =========================
   #site-layout: Design tokens
   ========================= */
#site-layout{
  --brand:       rgb(16,185,129);   /* emerald */
  --brand-600:   rgb(5,150,105);    /* darker emerald */
  --brand-50:    rgb(236,253,245);  /* mint */

  --gold:        rgb(245,158,11);   /* warm accent if needed */

  --ink:         rgb(17,24,39);
  --ink-2:       rgb(75,85,99);
  --muted:       rgb(107,114,128);

  --bg:          rgb(249,250,251);
  --surface:     #ffffff;

  --stroke:      rgba(15,23,42,.08);
  --stroke-2:    rgba(15,23,42,.12);

  --shadow-s:    0 4px 14px rgba(15,23,42,.08);
  --shadow-m:    0 10px 26px rgba(15,23,42,.14);

  --sidebar-w:   260px;

  color: var(--ink);
  background: var(--bg);
}

/* =========================
   A11y & helpers
   ========================= */
#site-layout a{
  text-decoration: none;
  color: inherit;
}
#site-layout a:hover{
  color: var(--brand-600);
}
#site-layout img{
  max-width: 100%;
  height: auto;
}

#site-layout .container,
#site-layout .container-fluid{
  padding-inline: 1rem;
}

/* unified focus-visible */
#site-layout :where(a,button,.chip,.btn):focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(16,185,129,.30);
  border-radius: .6rem;
}

@media (prefers-reduced-motion: reduce){
  #site-layout *{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================
   Top Nav (public + auth)
   ========================= */
#site-layout .nav-wrap,
#site-layout .top-nav{
  position: sticky;
  top: 0;
  z-index: 1040;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgb(229,231,235);
}

#site-layout .topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem 1rem;
}

#site-layout .topnav-title{
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* top actions right side */
#site-layout .top-actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

/* navbar brand */
#site-layout .navbar-brand .brand-text{
  font-weight: 900;
  letter-spacing: .03em;
}
#site-layout .navbar-brand .brand-logo{
  width: 200px;
  height: 60px;
  object-fit: contain;
}

/* navbar links */
#site-layout .nav-wrap .nav-link{
  font-weight: 600;
  font-size: 2rem; /* smaller than base 2rem for nav items */
}
#site-layout .nav-wrap .nav-link:hover{
  color: var(--brand);
}

/* XS–SM topbar layout */
@media (max-width: 575.98px){
  #site-layout .navbar-brand .brand-logo{
    width: 150px;
    height: 48px;
  }

  #site-layout .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    padding: .5rem .75rem;
  }

  #site-layout .topbar > .d-flex.align-items-center.gap-2:first-child{
    width: 100%;
    justify-content: space-between;
  }

  #site-layout .top-actions{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .5rem;
    width: 100%;
  }

  #site-layout .dropdown-currencies .dropdown-menu{
    width: calc(100vw - 32px);
    max-width: 520px;
  }
}

@media (max-width: 420px){
  #site-layout .top-actions{
    grid-template-columns: repeat(2,1fr);
  }
  #site-layout .top-actions > *:last-child{
    grid-column: 1 / -1;
  }
}

/* =========================
   Chips
   ========================= */
#site-layout .chip{
  --chip-border: rgb(226,232,240);
  --chip-bg: rgb(249,250,251);
  --chip-ink: rgb(17,24,39);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;

  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-ink);

  font-weight: 700;
  font-size: .5em; /* ~1rem visually given base 2rem */
  line-height: 1.1;
  white-space: nowrap;
}

#site-layout .chip i{
  font-size: .95em;
}

#site-layout .chip--tg{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.30);
  color: var(--brand-600);
}

#site-layout .chip--danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.22);
  color: rgb(220,38,38);
}

#site-layout .dropdown-currencies > .chip.dropdown-toggle::after{
  margin-left: .5rem;
}

#site-layout .dropdown-currencies .dropdown-menu{
  max-height: 60vh;
  overflow: auto;
  border-radius: .75rem;
  border-color: rgb(226,232,240);
}

/* =========================
   Socials
   ========================= */
#site-layout .socials{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
#site-layout .socials a{
  width: 2.2rem;
  height: 2.2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
}

/* =========================
   Scroll to top (+ safe area)
   ========================= */
#site-layout .scrolltop{
  position: fixed;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 2.5rem;
  height: 2.5rem;

  display: grid;
  place-items: center;

  border: 1px solid var(--stroke);
  background: var(--surface);
  border-radius: .9rem;
  box-shadow: var(--shadow-s);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);

  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 1040;
}

#site-layout .scrolltop.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========================
   Auth Dashboard Layout
   ========================= */
#site-layout .wrapper{
  display: flex;
  min-height: 100svh;
}

/* Sidebar (desktop) */
#site-layout .sidebar-wrap{
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);

  position: sticky;
  top: 0;
  height: 100svh;
  overflow-y: auto;

  /* New bright, non–blue gradient */
  background: linear-gradient(
    145deg,
    rgb(16,185,129),
    rgb(45,212,191)
  );
  border-right: 1px solid var(--stroke);
  box-shadow: var(--shadow-s);
  color: #ffffff;
}

#site-layout .sidebar-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;

  padding: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

#site-layout .sidebar-head .logo img{
  width: 200px;
  height: 60px;
  object-fit: contain;
}

#site-layout .auth-user-profile{
  padding: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.22);
  text-align: center;
}

#site-layout .auth-user-profile .avatar img{
  width: 72px;
  height: 72px;
  border-radius: 1.3rem;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(15,23,42,.35);
}

#site-layout .auth-user-profile .username{
  font-weight: 900;
  margin-top: .35rem;
  font-size: .8em;
}

#site-layout .auth-user-profile .balance{
  color: var(--gold);
  font-weight: 800;
  font-size: .7em;
}

#site-layout .sidebar-menu{
  list-style: none;
  padding: .5rem;
  margin: 0;
  display: grid;
  gap: .25rem;
}

#site-layout .sidebar-menu li a{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;

  border-radius: .75rem;
  color: #f9fafb;
  background: transparent;

  font-size: .6em;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}

#site-layout .sidebar-menu li a:hover,
#site-layout .sidebar-menu li.active a{
  background: rgba(255,255,255,.16);
  transform: translateX(2px);
}

#site-layout .sidebar-menu i{
  width: 1.1rem;
  text-align: center;
}

/* Content area */
#site-layout .inner-wrap{
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg);
}

/* Icon button (sidebar toggles) */
#site-layout .btn-icon{
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;

  border-radius: .75rem;
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-s);
}

/* Off-canvas sidebar (<992px) */
@media (max-width: 991.98px){
  #site-layout .sidebar-wrap{
    position: fixed;
    left: 0;
    top: 0;
    height: 100svh;
    width: 280px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1050;
  }

  #site-layout.sidebar-open .sidebar-wrap{
    transform: translateX(0);
  }

  #site-layout .sidebar-overlay{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 1040;
  }

  #site-layout.sidebar-open .sidebar-overlay{
    opacity: 1;
    visibility: visible;
  }

  body.sidebar-open{
    overflow: hidden;
  }
}

/* Collapsed (desktop >= 992px) */
@media (min-width: 992px){
  #site-layout.sidebar-collapsed .sidebar-wrap{
    width: 84px;
    flex-basis: 84px;
  }

  #site-layout.sidebar-collapsed .sidebar-menu span,
  #site-layout.sidebar-collapsed .auth-user-profile :is(.username,.balance){
    display: none;
  }

  #site-layout.sidebar-collapsed .auth-user-profile .avatar img{
    width: 48px;
    height: 48px;
  }
}

/* =========================
   Tables & pagination
   ========================= */
#site-layout .table{
  background: var(--surface);
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: var(--shadow-s);
  font-size: .55em;
}

#site-layout .pagination{
  gap: .25rem;
}

#site-layout .pagination .page-link{
  color: var(--ink-2);
  border-color: var(--stroke);
  font-size: .5em;
}

#site-layout .pagination .active .page-link{
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}

/* =========================
   RTL helpers
   ========================= */
#site-layout.rtl .navbar .navbar-toggler{
  margin-left: .5rem;
}

#site-layout.rtl .sidebar-wrap{
  border-right: 0;
  border-left: 1px solid var(--stroke);
  left: auto;
  right: 0;
  transform: translateX(100%);
}

#site-layout.rtl.sidebar-open .sidebar-wrap{
  transform: translateX(0);
}

#site-layout.rtl .inner-wrap{
  margin-left: 0;
}

/* =========================
   Footer v3 (public footer)
   ========================= */
#site-layout .footer-v3{
  --ink:   rgb(55,65,81);
  --muted: rgb(107,114,128);
  --green: rgb(16,185,129);
  --teal:  rgb(45,212,191);
  --border: rgba(15,23,42,.08);
  --stroke: rgba(15,23,42,.10);

  position: relative;
  color: var(--ink);

  background:
    radial-gradient(1100px 360px at 0%   0%, rgba(16,185,129,.12), rgba(255,255,255,0) 60%),
    radial-gradient(1100px 340px at 100% 100%, rgba(45,212,191,.12), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgb(248,250,252) 0%, rgb(255,255,255) 100%);

  border-top: 1px solid var(--border);
  padding: 3rem 0 1.75rem;
  overflow: clip;
}

#site-layout .footer-v3 .footer-auras{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(380px 180px at 10% 0%, rgba(16,185,129,.18), rgba(255,255,255,0) 70%),
    radial-gradient(420px 200px at 95% 100%, rgba(45,212,191,.16), rgba(255,255,255,0) 70%);
  filter: blur(2px);
}

#site-layout .footer-v3 .footer-top{
  position: relative;
  z-index: 1;
}

#site-layout .footer-v3 .footer-logo{
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border);
}

#site-layout .footer-v3 .brand-name{
  margin: 0;
  font-weight: 900;
  letter-spacing: .03em;
  font-size: 1em;
  line-height: 1.2;

  background-image: linear-gradient(90deg, rgb(15,23,42), rgb(16,185,129), rgb(45,212,191));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: footerSheen 6s linear infinite;
}

#site-layout .footer-v3 .brand-desc{
  color: var(--muted);
  margin: .35rem 0 .75rem;
  font-size: .55em;
  line-height: 1.6;
}

/* social buttons in footer */
#site-layout .footer-v3 .socials{
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}

#site-layout .footer-v3 .social-btn{
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .9rem;

  background: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(18,18,18,.06);

  color: rgb(55,55,55);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .12s ease;
}

#site-layout .footer-v3 .social-btn:hover{
  transform: translateY(-3px) scale(1.03);
  background: linear-gradient(135deg, var(--green), var(--teal));
  color: rgb(15,23,42);
  box-shadow: 0 12px 28px rgba(18,18,18,.10);
}

#site-layout .footer-v3 .trustline{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
}

#site-layout .footer-v3 .badge-soft{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: .35rem .65rem;
  border-radius: 999px;

  background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.40);
  color: rgb(120,53,15);

  font-weight: 800;
  font-size: .55em;
}

#site-layout .footer-v3 .trust-text{
  color: var(--muted);
  font-weight: 700;
  font-size: .55em;
}

/* footer columns */
#site-layout .footer-v3 .f-head{
  font-weight: 900;
  font-size: .7em;
  margin: 0 0 .7rem;
  letter-spacing: .03em;
}

#site-layout .footer-v3 .f-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
}

#site-layout .footer-v3 .f-list a{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .2rem 0;

  font-size: .52em;
  color: rgb(55,65,81);

  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

#site-layout .footer-v3 .f-list a i{
  color: var(--muted);
  font-size: .9em;
}

#site-layout .footer-v3 .f-list a:hover{
  color: var(--green);
  text-decoration: underline;
}

/* contact list */
#site-layout .footer-v3 .contact-list li{
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  color: rgb(55,65,81);
  font-size: .55em;
  line-height: 1.6;
}

#site-layout .footer-v3 .contact-list i{
  color: var(--muted);
  margin-top: .35rem;
  font-size: .8em;
}

/* secure badges row */
#site-layout .footer-v3 .secure-badges{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .9rem;
}

#site-layout .footer-v3 .secure-chip{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border-radius: 999px;

  font-weight: 800;
  font-size: .55em;

  background: rgba(16,185,129,.10);
  border: 1px dashed rgba(16,185,129,.45);
  color: rgb(22,101,52);
}

/* divider & bottom row */
#site-layout .footer-v3 .divider{
  border: none;
  height: 1px;
  background: var(--stroke);
  margin: 1.6rem 0 1rem;
}

#site-layout .footer-v3 .foot-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;

  color: var(--muted);
  font-weight: 700;
  font-size: .55em;
  line-height: 1.6;
}

#site-layout .footer-v3 .foot-row a{
  color: rgb(55,65,81);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

#site-layout .footer-v3 .foot-row a:hover{
  color: var(--green);
  text-decoration: underline;
}

#site-layout .footer-v3 .foot-row .sep{
  color: rgba(15,23,42,.35);
  margin: 0 .4rem;
}

/* footer animation */
@keyframes footerSheen{
  0%{ background-position: 200% 0; }
  100%{ background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce){
  #site-layout .footer-v3 .brand-name{
    animation: none;
    background-image: none;
    color: var(--ink);
  }
}

/* Responsive footer tweaks */
@media (max-width: 991.98px){
  #site-layout .footer-v3{
    padding-top: 2.4rem;
  }
  #site-layout .footer-v3 .brand-name{
    font-size: .9em;
  }
  #site-layout .footer-v3 .f-head{
    font-size: .65em;
  }
}

@media (max-width: 575.98px){
  #site-layout .footer-v3{
    padding: 2rem 0 1.2rem;
  }
  #site-layout .footer-v3 .brand-name{
    font-size: .8em;
  }
  #site-layout .footer-v3 .brand-desc{
    font-size: .55em;
  }
  #site-layout .footer-v3 .foot-row{
    flex-direction: column;
    text-align: center;
  }
}

/* =========================
   Public Alt Footer (auth landing)
   ========================= */
#site-layout .auth-landing-footer{
  --ink:   rgb(16,24,40);
  --stroke:rgba(15,23,42,.10);

  margin-top: 40px;
  color: var(--ink);
  background: linear-gradient(
    135deg,
    rgb(253, 230, 138),
    rgb(16,185,129)
  );
  border-top: 1px solid var(--stroke);
}

#site-layout .auth-landing-footer .site-title{
  font-weight: 900;
  font-size: .7em;
}

#site-layout .auth-landing-footer .f-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

#site-layout .auth-landing-footer .f-list li{
  margin: 8px 0;
  font-size: .55em;
}

#site-layout .auth-landing-footer .f-list a{
  color: var(--ink);
}

#site-layout .auth-landing-footer .divider{
  border-color: var(--stroke);
}

#site-layout .auth-landing-footer .foot-row{
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .55em;
}

@media (max-width: 575.98px){
  #site-layout .auth-landing-footer .foot-row{
    flex-direction: column;
    text-align: center;
  }
}



/* =============================================================================
   NEW ORDER — .neworder
   ============================================================================= */
.neworder{
  --brand: rgb(253,190,2);
  --ink: rgb(17,24,39);
  --muted: rgb(100,116,139);
  --line: rgb(228,231,235);
  --bg: rgb(250,250,252);
  --card: #fff;
  --shadow: 0 6px 20px rgba(2,8,23,.06);
  color: var(--ink); background: transparent;
}
.neworder .neworder__title{ font-weight: 900; letter-spacing: .2px; }
.neworder .neworder__badge{
  background: linear-gradient(90deg, rgb(16,185,129), var(--brand)); color: #111; font-weight: 900;
}
.neworder .stats-box{
  display: flex; gap: 14px; align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 14px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.neworder .stats-box:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2,8,23,.08); }
.neworder .stats-icon{
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(253,190,2,.12); color: var(--brand); font-size: 18px; font-weight: 800;
}
.neworder .stats-icon.orders{ background: rgba(59,130,246,.12); color: rgb(59,130,246); }
.neworder .stats-icon.service{ background: rgba(16,185,129,.12); color: rgb(16,185,129); }
.neworder .stats-icon.balance{ background: rgba(251,146,60,.12); color: rgb(251,146,60); }
.neworder .stats-icon.status{ background: rgba(139,92,246,.12); color: rgb(139,92,246); }
.neworder .stats-txt{
  margin: 0; color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
}
.neworder .stats-title{ margin: 0; font-size: 20px; font-weight: 900; }
.neworder .filter-toggle{
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 12px; padding: .45rem .75rem; display: inline-flex; align-items: center; gap: .5rem;
  box-shadow: var(--shadow);
}
.neworder .filter-toggle .caret{ transition: transform .2s ease; }
.neworder .filter-toggle[aria-expanded="true"] .caret{ transform: rotate(180deg); }
.neworder .new-bgss{ background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.neworder .brand-category{
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  background: var(--card); color: var(--ink); font-weight: 800;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.neworder .brand-category:hover{ transform: translateY(-1px); border-color: rgba(2,8,23,.12); box-shadow: var(--shadow); }
.neworder .sershortcut-icon{
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 900;
}

/* Brand colors */
.neworder .brand-fb{ background: rgb(24,119,242); }
.neworder .brand-ig{
  background: linear-gradient(135deg, rgb(254,218,117), rgb(250,126,30), rgb(214,41,118), rgb(150,47,191), rgb(79,91,213));
}
.neworder .brand-x{ background: rgb(23,23,23); }
.neworder .brand-yt{ background: rgb(255,0,0); }
.neworder .brand-sp{ background: rgb(30,215,96); color: rgb(17,24,39); }
.neworder .brand-tt{ background: #000; }
.neworder .brand-li{ background: rgb(10,102,194); }
.neworder .brand-gg{ background: rgb(66,133,244); }
.neworder .brand-tg{ background: rgb(0,136,204); }
.neworder .brand-dc{ background: rgb(88,101,242); }
.neworder .brand-sc{ background: rgb(255,252,0); color: rgb(17,24,39); }
.neworder .brand-twc{ background: rgb(145,70,255); }
.neworder .brand-traffic{ background: rgb(14,165,233); }
.neworder .brand-reviews{ background: rgb(250,204,21); color: rgb(17,24,39); }
.neworder .brand-other{ background: rgb(148,163,184); }
.neworder .brand-all{ background: var(--brand); color: rgb(17,24,39); }

.neworder .cate-shortcut-txt{ font-weight: 800; font-size: 14px; }
.neworder .neworder-card{ border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); background: var(--card); }

/* Tabs */
.neworder .tabs-sky{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.neworder .tabs-sky :is(.tab-ico,.tab-pill){
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 12px; padding: .5rem .8rem; font-weight: 800;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.neworder .tabs-sky :is(.tab-ico,.tab-pill):hover{
  transform: translateY(-1px); border-color: rgba(2,8,23,.15);
}
.neworder .tabs-sky .tab-pill i{ color: var(--brand); }

/* CTA */
.neworder .cta-submit{
  width: 100%; border-radius: 12px; padding: .75rem 1rem; border: 0;
  background: linear-gradient(90deg, var(--brand), rgb(255,214,84)); color: #000; font-weight: 900; letter-spacing: .3px;
  box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.neworder .cta-submit:hover{ transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 14px 30px rgba(2,8,23,.12); }

/* Best services */
.neworder .bestsvc-grid{ display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 576px){ .neworder .bestsvc-grid{ grid-template-columns: repeat(2,1fr); } }
.neworder .bestsvc-card{
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); padding: 14px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.neworder .bestsvc-card::after{
  content: ""; position: absolute; inset: auto -30% 0; height: 6px;
  background: linear-gradient(90deg, var(--brand), rgb(255,214,84)); opacity: .8;
}
.neworder .bestsvc-card:hover{ transform: translateY(-2px); border-color: rgba(2,8,23,.12); box-shadow: 0 12px 28px rgba(2,8,23,.08); }
.neworder .bestsvc-top{ display: flex; align-items: center; gap: 10px; }
.neworder .bestsvc-icon{
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 900; background: var(--brand); color: rgb(17,24,39);
}
.neworder .is-fb .bestsvc-icon{ background: rgb(24,119,242); color: #fff; }
.neworder .is-ig .bestsvc-icon{ background: rgb(225,48,108); color: #fff; }
.neworder .is-yt .bestsvc-icon{ background: rgb(255,0,0); color: #fff; }
.neworder .is-x  .bestsvc-icon{ background: rgb(23,23,23); color: #fff; }
.neworder .is-sp .bestsvc-icon{ background: rgb(30,215,96); color: rgb(17,24,39); }
.neworder .is-tt .bestsvc-icon{ background: #000; color: #fff; }
.neworder .bestsvc-title h6{ font-weight: 900; }
.neworder .badge.id{ background: rgba(2,8,23,.06); color: var(--ink); border-radius: 10px; font-weight: 900; }
.neworder .bestsvc-price{ font-weight: 900; font-size: 18px; }
.neworder .bestsvc-meta{ display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0 8px; }
.neworder .bestsvc-meta .meta{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.neworder .bestsvc-meta strong{ color: var(--ink); }
neworder .bestsvc-footer{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.neworder .bestsvc-footer .range{ color: var(--muted); font-size: 13px; }
.neworder .neworder__note{ font-weight: 900; color: var(--ink); }
.neworder .neworder__note b{ color: var(--brand); }
@media (prefers-reduced-motion: reduce){ .neworder *{ transition: none !important; animation: none !important; } }

/* =============================================================================
   UPDATES PAGE — .updates-page
   ============================================================================= */
.updates-page{ font-family: inherit; }
.updates-page .btn-gradient{
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  color: #fff; border: 0; border-radius: 12px; font-weight: 900;
}
.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; }

.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: #fff;
  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: #fff; 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: 800; 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); }
.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;
}
.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: #fff;
}
.rtl-nav .dropdown-menu{ text-align: right; }
@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 — .orders-page
   ============================================================================= */
.orders-page{ font-family: inherit; }
.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; }
.orders-page .orders-status-pills{ gap: 8px; flex-wrap: wrap; }
.orders-page .orders-status-pills .nav-link{
  border-radius: 999px; font-weight: 800; color: rgb(17,24,39);
  background: rgb(241,245,249); padding: 8px 14px;
}
.orders-page .orders-status-pills .nav-link.active{
  color: #fff; background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  box-shadow: 0 8px 18px rgba(14,165,233,.24);
}
.orders-page .well-ord{ background: #fff; 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: 900; 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); }
.orders-page .copy-order{ border-radius: 10px; border: 1px solid rgba(2,6,23,.1); }
.orders-page .status-chip{
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; font-weight: 900; border: 1px solid transparent; text-transform: capitalize;
}

/* Status colors */
.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);
}

.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: #fff; border-color: transparent;
}

/* Mobile table → 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: 900; color: rgb(55,65,81); margin-right: 10px;
  }
  .orders-page .order-actions{ justify-content: flex-end; }
}
.rtl-nav .nav-link{ direction: rtl; }

/* =============================================================================
   ADD FUNDS — .addfunds-page
   ============================================================================= */
.addfunds-page{
  --ink: rgb(16,24,40);
  --muted: rgb(102,112,133);
  --surface: #fff;
  --brand: rgb(14,165,233);
  --brand-600: rgb(2,132,199);
  --gold: rgb(253,190,2);
  --border: rgba(2,6,23,.08);
  --shadow-s: 0 6px 22px rgba(2,6,23,.08);
  color: var(--ink); position: relative;
}
.addfunds-page .af-auras{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(700px 280px at 0% 0%, rgba(253,190,2,.14), transparent 60%),
    radial-gradient(800px 320px at 100% 0%, rgba(14,165,233,.12), transparent 65%);
  filter: blur(1px);
}
.addfunds-page .page-head{ position: relative; z-index: 1; }
.addfunds-page .af-title{ font-weight: 900; margin: .25rem 0; }
.addfunds-page .af-sub{ color: var(--muted); margin: 0; }
.addfunds-page .af-badges{ flex-wrap: wrap; }
.addfunds-page .af-chip{
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 999px; font-weight: 800;
  background: rgba(14,165,233,.10); border: 1px dashed rgba(14,165,233,.35); color: rgb(9,108,150);
}
.addfunds-page .af-card{
  position: relative; z-index: 1; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-s);
}
.addfunds-page .af-card .card-header{
  background: linear-gradient(180deg, #fff, rgb(250,252,255)); border-bottom: 1px solid var(--border);
}
.addfunds-page .af-avatar{
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgb(246,248,252); border: 1px solid var(--border); color: rgb(55,65,81); font-size: 1rem;
}
.addfunds-page .af-tabs .nav-link{ border: none; font-weight: 800; color: rgb(55,65,81); }
.addfunds-page .af-tabs .nav-link.active{ color: var(--brand); position: relative; }
.addfunds-page .af-tabs .nav-link.active::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 3px;
  border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--brand));
}
.addfunds-page .form-label{ font-weight: 900; }
.addfunds-page .form-text{ color: var(--muted); }
.addfunds-page .input-group-text{ background: rgb(247,250,255); color: rgb(51,65,85); }
.addfunds-page .af-quick{ gap: .35rem; }
.addfunds-page .af-quick .btn{ border-radius: 999px; }
.addfunds-page .af-pay-btn{
  background: var(--brand); border-color: rgba(14,165,233,.35); font-weight: 900;
  box-shadow: 0 10px 22px rgba(14,165,233,.25); color: #fff;
}
.addfunds-page .af-pay-btn:hover{ background: var(--brand-600); }
.addfunds-page .af-accordion .accordion-item{
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: .75rem;
}
.addfunds-page .af-accordion .accordion-button{ font-weight: 900; background: #fff; }
.addfunds-page .af-accordion .accordion-button:not(.collapsed){
  color: var(--brand); background: linear-gradient(180deg, #fff, rgb(248,250,255));
}
.addfunds-page .af-code{
  display: inline-block; border-radius: 10px; padding: .35rem .5rem; background: rgb(246,248,252);
  border: 1px dashed rgba(2,6,23,.12); color: rgb(30,41,59);
}
.addfunds-page table.table th{ font-weight: 900; }
.addfunds-page .nowrap{ white-space: nowrap; }
.addfunds-page .tooltip-inner{ background: rgb(17,24,39); }
.addfunds-page .tooltip .tooltip-arrow::before{ border-top-color: rgb(17,24,39) !important; }
.addfunds-page .af-modal .modal-content{
  border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-s);
}
.addfunds-page .rtl-form .input-group .input-group-text{ border-radius: 0 .375rem .375rem 0; }
.addfunds-page .rtl-pagination .page-link{ direction: rtl; }
@media (max-width: 575.98px){
  .addfunds-page .af-title{ font-size: 1.5rem; }
  .addfunds-page .af-quick{ display: none !important; }
}

/* =============================================================================
   AFFILIATES PAGE — #affiliates-page
   ============================================================================= */
#affiliates-page{ font-family: inherit; }
#affiliates-page .card-glass{
  background: #fff; border: 1px solid rgba(2,6,23,.08); border-radius: 18px; box-shadow: 0 10px 24px rgba(2,8,23,.06);
}
#affiliates-page .aff-info-card{ border: 1px solid rgba(2,6,23,.08); border-radius: 16px; }
#affiliates-page .aff-info-icon{
  flex: 0 0 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, rgb(14,165,233), rgb(2,132,199)); box-shadow: 0 8px 18px rgba(14,165,233,.25);
}
#affiliates-page .aff-info-icon.is-green{ background: linear-gradient(135deg, rgb(16,185,129), rgb(2,132,199)); }
#affiliates-page .aff-info-icon.is-amber{ background: linear-gradient(135deg, rgb(245,158,11), rgb(234,88,12)); }
#affiliates-page .aff-ref{
  display: inline-block; padding: .35rem .5rem; background: rgb(246,248,252); border: 1px solid rgba(2,6,23,.08); border-radius: 10px;
}
#affiliates-page .aff-stat{
  height: 100%; background: #fff; border: 1px solid rgba(2,6,23,.08);
  border-radius: 16px; padding: 12px; box-shadow: 0 6px 18px rgba(2,8,23,.06);
}
#affiliates-page .aff-stat-ico{
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
}
#affiliates-page .aff-stat-label{ color: rgb(75,85,99); font-weight: 800; margin-top: 8px; }
#affiliates-page .aff-stat-val{ font-weight: 900; color: rgb(17,24,39); font-size: 1.1rem; }
#affiliates-page .aff-cta-ico{
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: rgb(55,43,11);
  background: radial-gradient(60px 60px at 30% 30%, rgba(253,190,2,.22), rgba(255,255,255,.85)),
              linear-gradient(135deg, rgb(253,190,2), rgb(255,205,75));
  border: 2px solid rgba(253,190,2,.25);
}
#affiliates-page .payout-btn{ height: 48px; line-height: 48px; padding: 0 18px; border-radius: 14px; font-weight: 900; }
#affiliates-page .badge.bg-soft{
  background: rgba(14,165,233,.12); color: rgb(14,165,233); border: 1px solid rgba(14,165,233,.25);
  padding: .35rem .6rem; font-weight: 900; border-radius: 999px;
}
#affiliates-page .pagination .page-link{
  border-radius: 10px; border: 1px solid rgba(2,6,23,.12); color: rgb(17,24,39);
}
#affiliates-page .pagination .page-item.active .page-link{
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233)); color: #fff; border-color: transparent;
}
#affiliates-page.rtl .copy-ref i{ margin-inline: 0 .5rem; }



/* -------------------- Sign Up Page (Professional, Mobile-first) -------------------- */
#page-signup{
  --ink: rgb(16,24,40);
  --muted: rgb(102,112,133);
  --surface: #fff;
  --brand: rgb(14,165,233);
  --brand-600: rgb(2,132,199);
  --gold: rgb(253,190,2);
  --border: rgba(2,6,23,.08);
  --border-strong: rgba(2,6,23,.14);
  --shadow-s: 0 10px 28px rgba(2,6,23,.10);
  --shadow-m: 0 18px 44px rgba(2,6,23,.14);

  color: var(--ink);
  background: transparent;
  position: relative;
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* Background auras */
#page-signup .auth-auras{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 360px at 0% 0%, rgba(253,190,2,.12), transparent 60%),
    radial-gradient(900px 360px at 100% 100%, rgba(14,165,233,.14), transparent 60%);
  filter: blur(1px);
}
#page-signup .container{ position: relative; z-index: 1; padding: 1.25rem 0 1.75rem; }

/* Cards */
#page-signup .signup-card{
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-s);
  transition: box-shadow .25s ease, transform .25s ease;
}
#page-signup .signup-card:hover{ box-shadow: var(--shadow-m); transform: translateY(-1px); }

/* Visual side */
#page-signup .signup-visual{
  position: relative; height: 100%; min-height: 340px; display: grid; place-items: center;
  background: linear-gradient(180deg, #fff, rgb(248,250,255));
}
#page-signup .signup-visual img{
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); filter: saturate(105%);
}
#page-signup .signup-visual::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(14,165,233,.10) 70%);
}
#page-signup .visual-badges{ position: absolute; inset: 0; pointer-events: none; }
#page-signup .visual-badges .vb{
  position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  background: rgba(255,255,255,.95); border: 1px solid var(--border); box-shadow: var(--shadow-m);
  color: rgb(31,41,55); font-size: 1.25rem; backdrop-filter: blur(2px);
}
#page-signup .visual-badges .vb-1{ top: 10%; left: 10%; }
#page-signup .visual-badges .vb-2{ bottom: 12%; right: 12%; }
#page-signup .visual-badges .vb-3{ top: 18%; right: 22%; }
#page-signup .visual-blurb{
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,.92); border: 1px solid var(--border);
  border-radius: 14px; padding: .6rem .8rem; box-shadow: var(--shadow-s);
}
#page-signup .visual-blurb h3{ font-weight: 900; margin: 0; }
#page-signup .visual-blurb p{ color: var(--muted); margin: .25rem 0 0; }

/* Typography */
#page-signup .auth-title{ font-weight: 900; margin: 0 0 .25rem; letter-spacing: .2px; }
#page-signup .text-brand{ color: var(--brand); }
#page-signup .auth-lead{ color: var(--muted); margin: .5rem 0 0; }
#page-signup .auth-benefits{
  list-style: none; padding: 0; margin: .75rem 0 .25rem; display: grid; gap: .25rem;
}
#page-signup .auth-benefits li{
  display: flex; align-items: center; gap: .5rem; color: rgb(51,65,85); font-weight: 800;
}
#page-signup .auth-benefits i{ color: var(--brand); }

/* Inputs */
#page-signup .fancy-input .input-group-text{
  background: rgb(246,248,252); border-color: var(--border); color: rgb(51,65,85);
}
#page-signup .fancy-input .form-control{ border-color: var(--border); padding-top: .65rem; padding-bottom: .65rem; }
#page-signup .fancy-input .form-control:focus{
  border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(14,165,233,.15);
}
#page-signup .fancy-input .btn-eye{ border-color: var(--border); }
#page-signup .password-hint{ margin-top: .25rem; color: var(--muted); }

/* Primary buttons/links */
#page-signup .btn-brand{
  background: var(--brand); border-color: rgba(14,165,233,.35); color: #fff;
  font-weight: 900; box-shadow: 0 12px 28px rgba(14,165,233,.28);
}
#page-signup .btn-brand:hover{ background: var(--brand-600); color: #fff; }
#page-signup .btn-brand:disabled{ opacity: .7; cursor: not-allowed; }
#page-signup .link-brand{ color: var(--brand); text-decoration: underline; font-weight: 900; }
#page-signup .link-brand:hover{ color: var(--brand-600); text-decoration: none; }

/* Divider */
#page-signup .or-divider{
  display: grid; place-items: center; position: relative; height: 1.75rem; color: var(--muted); font-weight: 800;
}
#page-signup .or-divider::before{
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border);
}
#page-signup .or-divider > span{
  position: relative; padding: .1rem .6rem; background: var(--surface);
  border-radius: 999px; border: 1px solid var(--border);
}

/* Social / federated sign-in */
#page-signup .social-stack{ display: grid; gap: .6rem; }
#page-signup .social-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  border: 1px solid var(--border); background: #fff; color: var(--ink);
  padding: .75rem 1rem; border-radius: 12px; font-weight: 800; box-shadow: var(--shadow-s);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
#page-signup .social-btn i{ font-size: 1.1rem; }
#page-signup .social-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-m); border-color: var(--border-strong); }
#page-signup .social-apple{ color: #111; }
#page-signup .social-facebook{ color: #1877f2; }
#page-signup .social-github{ color: #111; }
#page-signup .g_id_signin { width: 100% !important; }
#page-signup .g_id_signin iframe { width: 100% !important; }

/* RTL tweaks */
#page-signup.rtl .me-2{ margin-inline-end: 0 !important; margin-inline-start: .5rem !important; }
#page-signup.rtl .auth-foot .me-1{ margin-inline-end: 0 !important; margin-inline-start: .25rem !important; }

/* Responsive */
@media (max-width: 575.98px){
  #page-signup .container{ padding: .9rem 0 1.2rem; }
  #page-signup .signup-visual{ min-height: 280px; }
  #page-signup .visual-badges .vb{ width: 48px; height: 48px; }
  #page-signup .auth-title{ font-size: 1.75rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #page-signup .signup-card{ transition: none; }
}

/* ============================================================================
   SIGN-IN LANDING — Modern, Gradient, Mobile-first
   Scope: #page-signin only
   Works with your existing HTML/Twig
============================================================================ */

#page-signin {
  /* Brand system */
  --brand: #06b6d4;
  --brand-alt: #14b8a6;
  --brand-deep: #0e7490;
  --brand-soft: #e0f9ff;
  --brand-grad: linear-gradient(135deg, #22c55e, #06b6d4);

  --bg: #f4f7fb;
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --card-radius-lg: 22px;
  --card-radius-md: 18px;
  --pill-radius: 999px;

  --ink: #0f172a;
  --muted: #64748b;

  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.06);
  --shadow-strong: 0 30px 70px rgba(15, 23, 42, 0.10);
  --focus-ring: 0 0 0 3px rgba(34, 197, 94, 0.35);

  --fs-body: 15px;
  --lh: 1.6;

  background: radial-gradient(circle at 0% -10%, rgba(34, 197, 94, 0.16), transparent 55%),
              radial-gradient(circle at 110% 0%, rgba(6, 182, 212, 0.18), transparent 60%),
              var(--bg);
  color: var(--ink);
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Reset inside scope */
#page-signin *,
#page-signin *::before,
#page-signin *::after {
  box-sizing: border-box;
}
#page-signin img {
  max-width: 100%;
  height: auto;
}
#page-signin a {
  color: inherit;
  text-decoration: none;
}
#page-signin p,
#page-signin li,
#page-signin input,
#page-signin button,
#page-signin .btn,
#page-signin .form-control {
  font-size: var(--fs-body);
  line-height: var(--lh);
}
#page-signin .rtl {
  direction: rtl;
}

/* Focus */
#page-signin :where(a, button, input, .btn, [role="tab"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}

/* Section spacing */
#page-signin .section-padding {
  padding: 80px 0;
}
#page-signin .section-padding-sm {
  padding: 50px 0;
}
@media (max-width: 575.98px) {
  #page-signin .section-padding {
    padding: 60px 0;
  }
  #page-signin .section-padding-sm {
    padding: 40px 0;
  }
}

/* Section headers */
#page-signin .section-header .section-title,
#page-signin .hero-title,
#page-signin .about-title,
#page-signin .svc-title,
#page-signin .hiw-title,
#page-signin .mk-title,
#page-signin .t4-headline,
#page-signin .auth-title {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-size: 2rem;
}
#page-signin .section-header .section-subtitle,
#page-signin .hero-subtitle,
#page-signin .about-lead,
#page-signin .svc-lead,
#page-signin .hiw-lead,
#page-signin .mk-subtitle,
#page-signin .t4-text,
#page-signin .payv7-subtitle {
  color: var(--muted);
}

/* Accent text */
#page-signin .u-accent,
#page-signin .text-accent {
  color: var(--brand-deep);
}
#page-signin .u-gradient,
#page-signin .payv7-grad,
#page-signin .mk-accent,
#page-signin .hiw-accent {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================================
   PRELOADER
============================================================================ */

#page-signin .preloader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.25), transparent 60%),
              radial-gradient(circle at 120% 0%, rgba(6, 182, 212, 0.30), transparent 60%),
              #020617;
  z-index: 9999;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
#page-signin .preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}
#page-signin .preloader-inner {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 8px;
  justify-items: center;
}
#page-signin .preloader-logo {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 18px;
  font-weight: 900;
}
#page-signin .preloader-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--brand);
  animation: signinSpin 0.8s linear infinite;
}
#page-signin .preloader-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
@keyframes signinSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   HERO SECTION
============================================================================ */
/* ======================================================
   HERO + SIGN-IN (GetmyFollow style)
   ====================================================== */

#page-signin .hero-signin{
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vh, 110px) 0 clamp(72px, 8vh, 110px);
  background: radial-gradient(circle at top left, #dff7f1 0, #f5fffc 45%, #ffffff 100%);
}

/* soft green bubbles on the right */
#page-signin .hero-signin-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 680px at 85% 35%, rgba(16,185,129,.35), transparent 60%),
    radial-gradient(540px 540px at 105% 80%, rgba(45,212,191,.30), transparent 65%);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

#page-signin .hero-signin .container{
  position: relative;
  z-index: 1;
}

/* --- Columns --- */
#page-signin .hero-signin-col-text{
  order: 2;
}
#page-signin .hero-signin-col-media{
  order: 1;
  display: flex;
  justify-content: center;
}

@media (min-width: 992px){
  #page-signin .hero-signin-col-text{ order: 1; }
  #page-signin .hero-signin-col-media{
    order: 2;
    justify-content: flex-end;
  }
}

/* --- Copy --- */
#page-signin .hero-signin-copy{
  max-width: 640px;
  margin-bottom: 20px;
}

#page-signin .hero-signin-kicker{
  font-size: 33px;
    font-weight: 500;
    margin-bottom: .5rem;
    
  color: #0f172a;
}
#page-signin .hero-signin-kicker span{
  font-weight: 700;
  color: #0f766e;
}

#page-signin .hero-signin-title{
  font-size: clamp(2.1rem, 2.4vw + 1rem, 2.8rem);
  line-height: 1.12;
  font-weight: 800;
  margin-bottom: .75rem;
  color: #020617;
}
#page-signin .hero-signin-title span{
  color: #0f766e;
}

#page-signin .hero-signin-subtitle{
  font-size: 20px;
  line-height: 1.6;
  color: #4b5563;
  max-width: 54ch;
}

/* --- Card --- */
#page-signin .hero-signin-card{
  margin-top: 1.5rem;
  background: rgba(255,255,255,.96);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
  padding: 20px 20px 22px;
  border: 1px solid rgba(148,163,184,.3);
}

/* --- Fields --- */
#page-signin .hero-field{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#page-signin .hero-field.is-focus{
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34,197,94,.25), 0 12px 30px rgba(22,163,74,.18);
  transform: translateY(-1px);
}

#page-signin .hero-field-icon{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#22c55e,#14b8a6);
  color: #ecfdf5;
  font-size: 1rem;
}

#page-signin .hero-field-body{
  flex: 1;
  min-width: 0;
}

#page-signin .hero-field-label,
#page-signin .hero-field-label-row{
 font-size: 2rem;
    font-weight: 900;
    color: #6b7280;
    margin-bottom: 7px;
}

#page-signin .hero-field-label-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#page-signin .hero-forgot-link{
  font-size: .8rem;
  color: #0f766e;
  text-decoration: none;
}
#page-signin .hero-forgot-link:hover{
  text-decoration: underline;
}

/* Input & password wrapper */
#page-signin .hero-field-input{
  border: 0;
  outline: 0;
  padding: 4px 0 2px;
  width: 100%;
  background: transparent;
  font-size: 2rem;
  color: #020617;
}
#page-signin .hero-field-input::placeholder{
  color: #9ca3af;
}

#page-signin .hero-password-wrap{
  position: relative;
}
#page-signin .hero-password-toggle{
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #94a3b8;
  padding: 0 4px;
  font-size: .98rem;
}
#page-signin .hero-password-toggle:hover{
  color: #0f766e;
}

/* Remember row */
#page-signin .hero-remember-row{
  font-size: .9rem;
  color: #111827;
}
#page-signin .hero-remember span{
  cursor: pointer;
}

/* --- Buttons --- */
#page-signin .hero-signin-actions{
  margin-top: 6px;
}

#page-signin .hero-btn-primary{
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color: #ecfdf5;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  padding-block: .7rem;
  box-shadow: 0 14px 30px rgba(22,163,74,.35);
}
#page-signin .hero-btn-primary:hover{
  filter: brightness(.97);
  transform: translateY(-1px);
}

#page-signin .hero-btn-google{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding-block: .7rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: #ffffff;
  font-weight: 600;
  font-size: .9rem;
  color: #111827;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  text-decoration: none;
}
#page-signin .hero-btn-google:hover{
  background: #f9fafb;
}

#page-signin .hero-google-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #ea4335;
}

/* Sign-up note */
#page-signin .hero-signup-note{
  font-size: .86rem;
  color: #6b7280;
}
#page-signin .hero-signup-note a{
  font-weight: 600;
  color: #0f766e;
}

/* --- Visual column --- */
#page-signin .hero-signin-visual{
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#page-signin .hero-signin-circle{
  position: absolute;
  inset: 8% 4% 2%;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 15%, rgba(255,255,255,.7), transparent 50%),
              radial-gradient(circle at 70% 85%, rgba(22,163,74,.45), rgba(5,150,105,.9));
}
#page-signin .hero-signin-image{
  position: relative;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- Mobile tweaks --- */
@media (max-width: 991.98px){
  #page-signin .hero-signin{
    padding-top: 64px;
    padding-bottom: 56px;
  }
  #page-signin .hero-signin-card{
    margin-top: 1rem;
  }
  #page-signin .hero-signin-col-media{
    margin-bottom: 14px;
  }
}
@media (max-width: 575.98px){
  #page-signin .hero-signin-card{
    padding-inline: 16px;
  }
  #page-signin .hero-field{
    padding-inline: 10px;
  }
}


/* ============================================================================
   MINI STATS
============================================================================ */

#page-signin .mini-stats {
  background: transparent;
}
#page-signin .mini-stats-v2 .stat-card {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--card-radius-md);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
  padding: 16px 14px 14px;
  overflow: hidden;
}
#page-signin .mini-stats-v2 .stat-aura {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(6, 182, 212, 0.18), transparent 60%);
  opacity: 0.4;
  pointer-events: none;
}
#page-signin .mini-stats-v2 .stat-top {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
#page-signin .mini-stats-v2 .stat-chip {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 1.1rem;
}
#page-signin .mini-stats-v2 .stat-main {
  position: relative;
}
#page-signin .mini-stats-v2 .stat-value {
  font-size: 1.4rem;
  font-weight: 800;
}
#page-signin .mini-stats-v2 .stat-label {
  font-size: 0.8rem;
  color: var(--muted);
}

/* =========================================
   Services v7 Real – similar to GetmyFollow
   ========================================= */
/* ==============================
   Services v8 – Pro platforms
   ============================== */
.services-v8 {
  position: relative;
  padding: 3.75rem 0 3.25rem;
  background: linear-gradient(180deg, #f9fafb 0%, #ffffff 40%, #f3f4f6 100%);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #0f172a;
  font-size: 16px; /* base text */
}

/* ---------- HEADER ---------- */
.services-v8 .svc8-header {
  max-width: 640px;
}

.services-v8 .svc8-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #bbf7d0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.services-v8 .svc8-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.services-v8 .svc8-title span {
  color: #16a34a;
}

.services-v8 .svc8-subtitle {
  font-size: 18px;
  color: #4b5563;
  margin-bottom: 0.9rem;
}

/* header meta pills */
.services-v8 .svc8-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.services-v8 .svc8-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #1d4ed8;
  font-size: 16px;
  font-weight: 500;
}

.services-v8 .svc8-meta-pill i {
  font-size: 16px;
}

/* ---------- HIGHLIGHT CARD (FB) ---------- */
.services-v8 .svc8-highlight-card {
  border-radius: 20px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(15, 23, 42, 0.85);
}

.services-v8 .svc8-highlight-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.services-v8 .svc8-highlight-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d4ed8;
  color: #eff6ff;
  font-size: 18px;
}

.services-v8 .svc8-highlight-label {
  font-size: 16px;
  font-weight: 600;
  color: #bfdbfe;
  margin: 0 0 0.1rem;
}

.services-v8 .svc8-highlight-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.services-v8 .svc8-highlight-text {
  font-size: 16px;
  color: #d1d5db;
  margin: 0.6rem 0 0.7rem;
}

.services-v8 .svc8-highlight-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.9rem;
}

.services-v8 .svc8-highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 16px;
  color: #e5e7eb;
  margin-bottom: 0.35rem;
}

.services-v8 .svc8-highlight-list i {
  font-size: 16px;
  color: #4ade80;
  margin-top: 0.2rem;
}

.services-v8 .svc8-highlight-btn {
  border-radius: 999px;
  font-size: 18px;
  padding-inline: 1.3rem;
}

/* ---------- FEATURE VISUAL ---------- */
.services-v8 .svc8-feature-shell {
  margin-bottom: 2.4rem;
  padding: 1.3rem 1rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.services-v8 .svc8-feature-visual {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #f9fafb;
}

.services-v8 .svc8-feature-tag {
  position: absolute;
  left: 0.8rem;
  top: 0.75rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.94);
  color: #e5e7eb;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  z-index: 2;
}

.services-v8 .svc8-feature-tag i {
  font-size: 16px;
}

.services-v8 .svc8-feature-img {
  width: 100%;
  height: auto;
  display: block;
}

/* feature content */
.services-v8 .svc8-feature-details {
  padding-inline: 0.5rem;
}

.services-v8 .svc8-feature-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.services-v8 .svc8-feature-text {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 0.9rem;
}

.services-v8 .svc8-feature-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.3rem;
}

.services-v8 .svc8-stat-item {
  min-width: 120px;
}

.services-v8 .svc8-stat-item .value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.services-v8 .svc8-stat-item .label {
  display: block;
  font-size: 16px;
  color: #6b7280;
}

/* ---------- PLATFORM GRID ---------- */
.services-v8 .svc8-grid-wrapper {
  padding: 1.3rem 1.1rem 1.5rem;
  border-radius: 20px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.services-v8 .svc8-grid-head {
  margin-bottom: 1.1rem;
}

.services-v8 .svc8-grid-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.services-v8 .svc8-grid-subtitle {
  font-size: 16px;
  color: #6b7280;
}

/* platform cards */
.services-v8 .svc8-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 0.7rem 0.7rem 0.85rem;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
  color: inherit;
}

.services-v8 .svc8-card:hover {
  transform: translateY(-3px);
  border-color: #22c55e;
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.18);
}

/* floating chip in top-left of card */
.services-v8 .svc8-card-chip {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  z-index: 2;
}

.services-v8 .svc8-card-chip i {
  font-size: 16px;
}

/* card media */
.services-v8 .svc8-card-media {
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
}

.services-v8 .svc8-card-media img {
  width: 100%;
  height: auto;
  display: block;
}

.services-v8 .svc8-card-media-fallback {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #eff6ff;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* card body */
.services-v8 .svc8-card-body {
  flex: 1 1 auto;
}

.services-v8 .svc8-card-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.15rem;
}

.services-v8 .svc8-card-text {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
}

/* grid footer link */
.services-v8 .svc8-grid-footer {
  margin-top: 1.15rem;
  display: flex;
  justify-content: flex-end;
}

.services-v8 .svc8-link-all {
  font-size: 16px;
  color: #1d4ed8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.services-v8 .svc8-link-all i {
  font-size: 16px;
}

.services-v8 .svc8-link-all:hover {
  text-decoration: underline;
}

/* ---------- ANIMATION ---------- */
.services-v8 [data-svc-anim] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.services-v8 [data-svc-anim].show {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px) {
  .services-v8 .svc8-feature-shell {
    padding-inline: 0.9rem;
  }

  .services-v8 .svc8-feature-details {
    margin-top: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .services-v8 {
    padding: 3.25rem 0;
  }

  .services-v8 .svc8-header {
    text-align: left;
  }

  .services-v8 .svc8-meta-row {
    justify-content: flex-start;
  }

  .services-v8 .svc8-highlight-card {
    margin-top: 0.25rem;
  }

  .services-v8 .svc8-feature-stats {
    flex-direction: column;
  }

  .services-v8 .svc8-grid-footer {
    justify-content: center;
    text-align: center;
  }
}


/* ============================================================================
   ABOUT
============================================================================ */

#page-signin #about-pro .about-eyebrow {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  font-weight: 800;
}
#page-signin #about-pro .about-title {
  font-size: 2.1rem;
  margin-bottom: 10px;
}
#page-signin #about-pro .about-lead {
  color: var(--muted);
}
#page-signin .about-text {
  color: var(--muted);
}

#page-signin .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--pill-radius);
  border: 1px solid var(--card-border);
  background: #f9fafb;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Visual device */
#page-signin .about-visual {
  position: relative;
}
#page-signin .about-device {
  position: relative;
  padding: 14px;
  border-radius: 26px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}
#page-signin .about-photo {
  border-radius: 18px;
}
#page-signin .about-aura {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.25), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(6, 182, 212, 0.25), transparent 60%);
  filter: blur(22px);
  opacity: 0.7;
  pointer-events: none;
}

#page-signin .about-float.about-card {
  position: absolute;
  left: -6px;
  top: -6px;
  width: min(260px, 70%);
  border-radius: 18px;
  border: 1px solid var(--card-border);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 10px 12px;
}
#page-signin .about-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
#page-signin .about-card-body {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
#page-signin .about-tile {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 70px;
  border-radius: 18px;
  background: #0f172a;
  color: #fff;
  display: grid;
  place-items: center;
}
#page-signin .about-tile .ribbon,
#page-signin .about-tile .medal {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
#page-signin .about-tile .ribbon {
  right: -8px;
  top: -8px;
  background: #22c55e;
}
#page-signin .about-tile .medal {
  left: -8px;
  bottom: -8px;
  background: #fbbf24;
  color: #78350f;
}
#page-signin .about-bubble {
  position: absolute;
  right: -10px;
  top: 28%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px dashed rgba(148, 163, 184, 0.8);
  display: grid;
  place-items: center;
  background: #f9fafb;
  color: #c026d3;
}

/* ============================================================================
   HOW IT WORKS
============================================================================ */

#page-signin .how-orb {
  position: relative;
}

#page-signin .hiw-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 4rem;
  font-weight: 700;
  color: var(--muted);
}
#page-signin .hiw-title {
  font-size: 2rem;
  margin-bottom: 6px;
}
#page-signin .hiw-lead {
  color: var(--muted);
}

/* Orb only on desktop, cards on all */
#page-signin .hiw-orb-wrap {
  position: relative;
  margin-top: 24px;
  min-height: 520px;
}
#page-signin .hiw-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 340px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
#page-signin .hiw-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle, #f9fafb 72%, transparent 73%),
    conic-gradient(var(--brand) 0deg, var(--brand) 90deg, #e2e8f0 90deg 360deg);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}
#page-signin .hiw-orb-core {
  position: relative;
  width: 45%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #f0f9ff 0, transparent 65%),
              linear-gradient(180deg, #ffffff, #e5f7ff);
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
}
#page-signin .hiw-orb-core i {
  font-size: 1.5rem;
  color: var(--brand-deep);
}
#page-signin .hiw-orb-pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #f9fafb;
  background: var(--brand);
  translate: -50% -50%;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
}
#page-signin .hiw-orb-pin:nth-of-type(1){ left:50%; top:4%; }
#page-signin .hiw-orb-pin:nth-of-type(2){ left:96%; top:50%; }
#page-signin .hiw-orb-pin:nth-of-type(3){ left:50%; top:96%; }
#page-signin .hiw-orb-pin:nth-of-type(4){ left:4%; top:50%; }

/* Cards */
#page-signin .hiw-card {
  position: absolute;
  width: min(420px, 46vw);
  border-radius: 18px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
#page-signin .hiw-card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
#page-signin .hiw-card-h i {
  margin-left: auto;
  color: var(--brand-deep);
}
#page-signin .hiw-badge {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
}
#page-signin .hiw-card p {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}
#page-signin .hiw-meta {
  list-style: none;
  padding-left: 0;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
#page-signin .hiw-meta i {
  color: var(--brand-deep);
  margin-right: 4px;
}
#page-signin .btn-brand-soft {
  border-radius: var(--pill-radius);
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: #ecfdf3;
  color: #166534;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
}
#page-signin .hiw-card.is-active {
  border-color: var(--brand);
  background: #f0fdf4;
  box-shadow: 0 20px 44px rgba(22, 163, 74, 0.3);
}

/* Card positions */
#page-signin .hiw-pos-nw { left: calc(50% - 430px); top: calc(50% - 220px); }
#page-signin .hiw-pos-ne { left: calc(50% + 40px);  top: calc(50% - 220px); }
#page-signin .hiw-pos-se { left: calc(50% + 40px);  top: calc(50% + 60px); }
#page-signin .hiw-pos-sw { left: calc(50% - 430px); top: calc(50% + 60px); }

/* Mobile/Tablet: hide orb, stack cards */
@media (max-width: 991.98px) {
  #page-signin .hiw-orb-wrap {
    min-height: 0;
  }
  #page-signin .hiw-orb {
    display: none;
  }
  #page-signin .hiw-card {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    margin-bottom: 12px;
  }
}

/* Mobile progress bar */
#page-signin .hiw-linear {
  margin-top: 10px;
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
#page-signin .hiw-linear-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--brand-grad);
}

/* ============================================================================
   MARKETS
============================================================================ */

#page-signin .markets-v3 {
  --tile-min: 230px;
}
#page-signin .mk-title {
  font-size: 4rem;
  margin-bottom: 6px;
}
#page-signin .mk-subtitle {
  max-width: 640px;
  margin: 0 auto;
  color: var(--muted);
}
#page-signin .mk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr));
  gap: 18px;
  margin-top: 18px;
}
#page-signin .mk-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
#page-signin .mk-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
}
#page-signin .mk-flag {
  width: 60px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  overflow: hidden;
}
#page-signin .mk-body {
  display: grid;
  gap: 2px;
}
#page-signin .mk-card-title {
  font-size: 0.98rem;
  font-weight: 800;
}
#page-signin .mk-card-text {
  font-size: 0.82rem;
  color: var(--muted);
}
#page-signin .mk-cta {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  display: grid;
  place-items: center;
  color: var(--brand-deep);
}

/* ============================================================================
   TESTIMONIALS
============================================================================ */

#page-signin .testimonials-v4 .t4-card {
  background: var(--card-bg);
  border-radius: 20px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 16px;
}
#page-signin .t4-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#page-signin .t4-quote-badge {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-deep);
}
#page-signin .t4-stars i {
  color: #fbbf24;
}
#page-signin .t4-headline {
  margin: 12px 0 4px;
}
#page-signin .t4-text {
  font-size: 0.94rem;
}
#page-signin .t4-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
#page-signin .t4-avatar {
  border-radius: 50%;
}
#page-signin .t4-loc {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ============================================================================
   PAYMENTS
============================================================================ */

#page-signin .payments-v7 {
  background: #ffffff;
}
#page-signin .payv7-header {
  max-width: 720px;
  margin: 0 auto 22px;
}
#page-signin .payv7-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--muted);
}
#page-signin .payv7-title {
  font-size: 1.9rem;
  font-weight: 800;
  margin-bottom: 6px;
}

/* Pills */
#page-signin .payv7-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
#page-signin .payv7-pill {
  border-radius: var(--pill-radius);
  padding: 7px 16px;
  border: 1px solid transparent;
  background: #f1f5f9;
  font-size: 0.84rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
#page-signin .payv7-pill.active,
#page-signin .payv7-pill:hover {
  background: var(--brand-grad);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.35);
}

/* Logos */
#page-signin .payv7-shell {
  border-radius: 22px;
  border: 1px solid var(--card-border);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  background: #ffffff;
}
#page-signin .payv7-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
}
#page-signin .payv7-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 10px 10px 8px;
  background: #f9fafb;
  text-align: center;
}
#page-signin .payv7-logo-wrap {
  display: grid;
  place-items: center;
  min-height: 40px;
}
#page-signin .payv7-name {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}

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

#page-signin .faq-section .accordion-item {
  margin-bottom: 10px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: #ffffff;
}
#page-signin .faq-section .accordion-button {
  background: #f9fafb;
  font-weight: 600;
}
#page-signin .faq-section .accordion-button:not(.collapsed) {
  background: #ecfeff;
  color: var(--brand-deep);
}
#page-signin .faq-section .accordion-body {
  color: var(--muted);
}

/* ============================================================================
   BACK TO TOP BUTTON
============================================================================ */

#page-signin .back-to-top-btn {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: var(--brand-grad);
  color: #ffffff;
  box-shadow: var(--shadow-strong);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 999;
}
#page-signin .back-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ============================================================================
   SCROLL REVEAL
============================================================================ */

#page-signin [data-anim] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
#page-signin [data-anim].in {
  opacity: 1;
  transform: translateY(0);
}