/* FlexCloud WHMCS Skin (premium / white-violet) - template: six */
:root{
  --fc-violet:#7c3aed;
  --fc-violet-700:#6d28d9;
  --fc-indigo:#4f46e5;
  --fc-slate-950:#020617;
  --fc-slate-900:#0f172a;
  --fc-slate-700:#334155;
  --fc-slate-600:#475569;
  --fc-slate-500:#64748b;
  --fc-border:rgba(226,232,240,0.95);
  --fc-card-bg:rgba(255,255,255,0.74);
  --fc-shadow:0 18px 50px -30px rgba(15,23,42,0.22);
  --fc-shadow-strong:0 26px 80px -55px rgba(124,58,237,0.55);
  --fc-radius:28px;
  --fc-radius-sm:18px;
}

html,body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,"Noto Sans";
  color: var(--fc-slate-900);
  background:#fff;
}

/* Subtle premium grid (less glow) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(124,58,237,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,58,237,0.045) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image: radial-gradient(ellipse at center, black 55%, transparent 78%);
  opacity:.62;
}

/* Links */
a{ color: var(--fc-violet-700); }
a:hover{ color: var(--fc-violet); }

/* Buttons */
.btn{
  border-radius: var(--fc-radius-sm) !important;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.btn-primary{
  background: var(--fc-violet) !important;
  border-color: rgba(124,58,237,.35) !important;
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--fc-violet-700) !important;
}
.btn-default,.btn-secondary,.btn-outline-secondary{
  background:#fff !important;
  border-color: var(--fc-border) !important;
}
.btn-default:hover,.btn-secondary:hover,.btn-outline-secondary:hover{
  background:#f8fafc !important;
}

/* Forms */
.form-control{
  border-radius: 16px !important;
  border: 1px solid var(--fc-border) !important;
  box-shadow:none !important;
}
.form-control:focus{
  border-color: rgba(124,58,237,.45) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.14) !important;
}

/* Alerts / badges */
.alert{
  border-radius: var(--fc-radius-sm) !important;
  border: 1px solid var(--fc-border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.badge,.label{
  border-radius:999px !important;
  font-weight:700;
}

/* Panels / cards */
.panel,.panel-default,.card,.client-home-panels .panel{
  border-radius: var(--fc-radius) !important;
  border: 1px solid var(--fc-border) !important;
  background: var(--fc-card-bg) !important;
  box-shadow: var(--fc-shadow) !important;
}
.panel-heading{
  border-top-left-radius: var(--fc-radius) !important;
  border-top-right-radius: var(--fc-radius) !important;
  background: rgba(255,255,255,0.80) !important;
  border-bottom: 1px solid var(--fc-border) !important;
}
.panel-title{ font-weight: 800 !important; }

/* Tables */
.table,.dataTables_wrapper .table{
  border-radius: var(--fc-radius-sm);
  overflow:hidden;
}
.table>thead>tr>th{
  background: rgba(248,250,252,0.75);
  border-bottom:1px solid var(--fc-border) !important;
}

/* Headings */
.header-lined h1,.page-header h1{
  font-weight: 900;
  letter-spacing: -0.02em;
}
.header-lined{
  border-bottom-color: var(--fc-border) !important;
}

/* --- Navbar / top bars (covers many WHMCS variants) --- */
.navbar-main,.navbar-default,.navbar-inverse,
#main-menu,#primary-nav,#secondary-nav,
.top-nav,#top-nav,.navbar-primary,.navbar-secondary,
#navigation,#header,.header,.topbar{
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fc-border) !important;
}

.navbar-main .navbar-nav>li>a,.navbar-default .navbar-nav>li>a,
#main-menu a,#top-nav a,.navbar a,#navigation a{
  color: var(--fc-slate-600) !important;
  font-weight: 600 !important;
}
.navbar-main .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:hover,
#main-menu a:hover,#top-nav a:hover,.navbar a:hover,#navigation a:hover{
  color: var(--fc-slate-900) !important;
}
.navbar-main .navbar-brand,.navbar-default .navbar-brand{
  font-weight: 800;
  color: var(--fc-slate-900) !important;
}

/* Kill strong blue accents */
.bg-primary, .panel-primary > .panel-heading{
  background: rgba(255,255,255,0.80) !important;
  border-color: var(--fc-border) !important;
  color: var(--fc-slate-900) !important;
}

/* --- FlexCloud homepage blocks --- */
.fc-wrap{ max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.fc-section{ padding: 56px 0; }
.fc-hero{ position:relative; overflow:hidden; padding: 64px 0 42px; }
.fc-hero::after{
  content:"";
  position:absolute; inset:-120px -80px auto -80px;
  height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.16), transparent 60%),
              radial-gradient(circle at 70% 20%, rgba(79,70,229,.10), transparent 55%);
  filter: blur(18px);
  z-index:-1;
}
.fc-hero h1{
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fc-slate-900);
  margin: 10px 0 0;
}
.fc-hero p{
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fc-slate-600);
  max-width: 760px;
}

.fc-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px;
  border-radius: 999px;
  border:1px solid rgba(196,181,253,.55);
  background: rgba(255,255,255,.75);
  font-weight: 700;
  font-size: 12px;
  color: var(--fc-violet-700);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.fc-cta{
  margin-top: 18px;
  display:flex; flex-wrap:wrap; gap: 12px;
}
.fc-cta .btn{ padding: 12px 16px; }
.fc-cta .btn-primary{ box-shadow: var(--fc-shadow-strong); }

.fc-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.fc-col-7{ grid-column: span 7; }
.fc-col-5{ grid-column: span 5; }
@media (max-width: 991px){
  .fc-col-7,.fc-col-5{ grid-column: span 12; }
}

.fc-card{
  border-radius: var(--fc-radius);
  border: 1px solid var(--fc-border);
  background: var(--fc-card-bg);
  box-shadow: var(--fc-shadow);
}

.fc-card-pad{ padding: 22px; }

.fc-billing{
  display:flex; gap: 8px;
  width: fit-content;
  padding: 8px;
  border: 1px solid var(--fc-border);
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
}
.fc-billing button{
  border:0; background:transparent;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  color: var(--fc-slate-700);
}
.fc-billing button.is-active{
  background: var(--fc-violet);
  color: #fff;
}
.fc-billing small{
  font-weight: 800;
  margin-left: 8px;
  opacity: .95;
}

.fc-plans{ margin-top: 18px; display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.fc-plan{ grid-column: span 4; padding: 18px; }
@media (max-width: 991px){ .fc-plan{ grid-column: span 12; } }

.fc-plan.is-featured{
  border-color: rgba(196,181,253,.75);
  box-shadow: var(--fc-shadow-strong);
}
.fc-plan h3{ margin: 0; font-weight: 800; color: var(--fc-slate-900); }
.fc-plan .tag{ color: var(--fc-slate-600); font-weight: 600; margin-top: 4px; }
.fc-price{ margin-top: 14px; display:flex; align-items: baseline; gap: 10px; }
.fc-price .main{ font-size: 34px; font-weight: 900; letter-spacing: -0.02em; }
.fc-price .per{ color: var(--fc-slate-600); font-weight: 700; }
.fc-sub{ margin-top: 6px; color: var(--fc-slate-600); }
.fc-strike{ margin-top: 8px; color: var(--fc-slate-600); font-size: 12px; }
.fc-strike s{ color: rgba(51,65,85,.75); }

.fc-specs{ margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fc-spec{
  border:1px solid var(--fc-border);
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  padding: 10px 12px;
}
.fc-spec .k{ font-size: 11px; color: var(--fc-slate-500); font-weight: 700; }
.fc-spec .v{ font-size: 12px; color: var(--fc-slate-900); font-weight: 800; }

.fc-list{ margin-top: 14px; padding: 14px; border-radius: 22px; border:1px solid var(--fc-border); background: rgba(255,255,255,0.72); }
.fc-list ul{ margin: 10px 0 0; padding-left: 18px; color: var(--fc-slate-700); font-weight: 600; }
.fc-list li{ margin: 6px 0; }

.fc-band{
  margin-top: 24px;
  border-radius: 36px;
  border: 1px solid rgba(196,181,253,.55);
  background: linear-gradient(135deg, rgba(124,58,237,.92), rgba(79,70,229,.92));
  color:#fff;
  padding: 18px 18px;
}
.fc-band h4{ margin: 0; font-weight: 900; letter-spacing: -0.01em; }
.fc-band p{ margin: 6px 0 0; color: rgba(255,255,255,.86); }