/* =====================================================================
   Infraclusters client portal — child theme of Twenty-One (WHMCS 9)
   Brand tokens pulled from infraclusters.com
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --ic-ink: #0B0C1B;
  --ic-blue: #2A5CFF;
  --ic-blue-dark: #1A3FD1;
  --ic-blue-soft: #EEF2FF;
  --ic-muted: #5A5C76;
  --ic-soft: #C3C5D8;
  --ic-surface: #F8F8F8;
  --ic-line: #E4E4EA;
  --ic-input: #C9CAD6;
  --ic-green: #16A34A;
  --ic-accent-light: #8FA8FF;
}

/* ---------- Base ---------- */
body,
.primary-bg-color {
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ic-ink);
  background-color: var(--ic-surface);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: Manrope, system-ui, sans-serif;
  color: var(--ic-ink);
  letter-spacing: -0.01em;
}
h1, .h1 { font-weight: 500; }
h2, h3, .h2, .h3 { font-weight: 600; }
a { color: var(--ic-blue); }
a:hover, a:focus { color: var(--ic-blue-dark); }
.text-muted { color: var(--ic-muted) !important; }
.text-primary { color: var(--ic-blue) !important; }
.bg-primary { background-color: var(--ic-blue) !important; }

/* ---------- Header ---------- */
header.header .topbar {
  background-color: var(--ic-ink);
  color: var(--ic-soft);
  padding: 4px 0;
}
header.header .topbar .btn,
header.header .topbar .input-group-text { color: var(--ic-soft); background: transparent; border: 0; }
header.header .topbar .btn-active-client span { color: #fff; font-weight: 600; }

header.header .navbar:not(.main-navbar-wrapper) {
  background: #fff;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ic-line);
}
header.header .logo-img { max-height: 46px; max-width: 220px; }
header.header .navbar a { color: var(--ic-ink); }
header.header .search .form-control,
header.header .search .btn {
  border-color: var(--ic-line);
  background: var(--ic-surface);
  border-radius: 0;
}
header.header .cart-btn .badge {
  background: var(--ic-blue);
  color: #fff;
  border-radius: 0;
}

header.header .main-navbar-wrapper {
  background: #fff;
  border-bottom: 1px solid var(--ic-line);
}
header.header .main-navbar-wrapper .navbar-collapse { padding: 0 1rem; }
header.header .main-navbar-wrapper .navbar-nav > li > a,
header.header .main-navbar-wrapper .navbar-nav > .nav-item > .nav-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--ic-ink);
  padding: 18px 0;
  margin-right: 28px;
  border-bottom: 3px solid transparent;
}
header.header .main-navbar-wrapper .navbar-nav > li.active > a,
header.header .main-navbar-wrapper .navbar-nav > li > a:hover,
header.header .main-navbar-wrapper .navbar-nav > .nav-item.active > .nav-link {
  border-bottom-color: var(--ic-blue);
  color: var(--ic-ink);
}
header.header .dropdown-menu {
  border-radius: 0;
  border: 1px solid var(--ic-line);
  box-shadow: 0 12px 32px rgba(11, 12, 27, 0.10);
  padding: 8px 0;
}
header.header .dropdown-menu .dropdown-item { font-size: 14px; padding: 8px 18px; }
header.header .dropdown-menu .dropdown-item:active,
header.header .dropdown-menu .dropdown-item.active { background: var(--ic-blue-soft); color: var(--ic-blue); }

/* ---------- Page band (breadcrumb) ---------- */
.master-breadcrumb {
  background-color: var(--ic-ink);
  padding: 30px 0 34px;
}
.master-breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a { color: var(--ic-accent-light); }
.master-breadcrumb .breadcrumb-item.active { color: #fff; }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ic-muted); }

#main-body { padding-top: 32px; padding-bottom: 56px; }

/* ---------- Cards / panels ---------- */
.card,
.panel,
.list-group-item {
  border-radius: 0 !important;
  border-color: var(--ic-line);
  box-shadow: none;
}
.card-header,
.card-footer {
  background: #fff;
  border-color: var(--ic-line);
  border-radius: 0 !important;
}
.card-title,
.card-header h3 { font-weight: 700; font-size: 18px; }

/* Sidebar */
.sidebar .card { margin-bottom: 20px; }
.sidebar .card-title { font-size: 15px; font-weight: 700; }
.sidebar .list-group-item { font-size: 14px; color: var(--ic-ink); border-left: 0; border-right: 0; }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
  background: var(--ic-blue-soft);
  color: var(--ic-blue);
  border-color: var(--ic-line);
  font-weight: 700;
}
.sidebar .list-group-item .badge { border-radius: 0; background: var(--ic-ink); }

/* Client area home tiles */
.tiles .tile {
  background: #fff;
  border: 1px solid var(--ic-line);
  padding: 24px;
  transition: border-color 0.15s ease;
}
.tiles .tile:hover { border-color: var(--ic-blue); }
.tiles .tile i { color: var(--ic-blue); }
.tiles .tile .stat { font-size: 36px; font-weight: 600; color: var(--ic-ink); letter-spacing: -0.02em; }
.tiles .tile .title { color: var(--ic-muted); font-weight: 600; text-transform: none; }
.tiles .tile .highlight { display: none; }

/* ---------- Buttons: pill + green contour ---------- */
.btn {
  border-radius: 999px !important;
  font-weight: 600;
  padding: 0.55rem 1.4rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-sm, .btn-group-sm > .btn { padding: 0.35rem 1rem; }
.btn-lg { padding: 0.8rem 1.8rem; }
.btn-primary,
.btn-success,
.btn-info {
  background-color: var(--ic-blue);
  border: 2px solid var(--ic-green);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
.btn-info:hover, .btn-info:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ic-blue-dark);
  border-color: var(--ic-green);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
}
.btn-default,
.btn-secondary,
.btn-outline-primary {
  background: #fff;
  color: var(--ic-ink);
  border: 2px solid var(--ic-green);
}
.btn-default:hover,
.btn-secondary:hover,
.btn-outline-primary:hover { background: #F0FAF3; color: var(--ic-ink); border-color: var(--ic-green); }
.btn-danger { border: 2px solid #A61B1B; background: #fff; color: #A61B1B; }
.btn-danger:hover { background: #A61B1B; color: #fff; }
/* keep input-group addons and icon-only toggles square to the field */
.input-group .btn,
.btn-reveal-pw,
header.header .topbar .btn,
header.header .toolbar .btn,
header.header .search .btn { border-radius: 0 !important; border-width: 1px; }

/* ---------- Forms ---------- */
.form-control,
.custom-select {
  border-radius: 0;
  border-color: var(--ic-input);
  min-height: 44px;
  color: var(--ic-ink);
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--ic-blue);
  box-shadow: 0 0 0 3px rgba(42, 92, 255, 0.15);
}
.input-group-text { border-radius: 0; border-color: var(--ic-input); background: var(--ic-surface); color: var(--ic-muted); }
label, .form-control-label { font-weight: 700; font-size: 13px; color: var(--ic-ink); }

/* ---------- Tables ---------- */
.table thead th,
table.dataTable thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ic-muted);
  border-bottom: 1px solid var(--ic-line);
  border-top: 0;
}
.table td { border-color: var(--ic-line); vertical-align: middle; }
.table-hover tbody tr:hover,
table.dataTable tbody tr:hover { background: #F6F8FF; }
.dataTables_wrapper .pagination .page-item .page-link { border-radius: 0; color: var(--ic-ink); }
.dataTables_wrapper .pagination .page-item.active .page-link { background: var(--ic-ink); border-color: var(--ic-ink); color: #fff; }

/* ---------- Status labels ---------- */
.label,
.status,
.badge {
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.status-active, .status-open, .status-completed, .status-paid, .label-success, .badge-success {
  background-color: #E3F3EA !important; color: #0B6B3A !important;
}
.status-pending, .status-pending-transfer, .status-customer-reply, .status-onhold, .label-warning, .badge-warning {
  background-color: #FFF3D6 !important; color: #7A4E00 !important;
}
.status-unpaid, .status-overdue, .status-suspended, .status-fraud, .label-danger, .badge-danger {
  background-color: #FDE7E7 !important; color: #A61B1B !important;
}
.status-answered, .status-inprogress, .label-info, .badge-info {
  background-color: #E7ECFF !important; color: #1D43C9 !important;
}
.status-closed, .status-cancelled, .status-terminated, .status-expired, .status-refunded, .label-default, .badge-secondary {
  background-color: #EEEEF2 !important; color: #474960 !important;
}
header.header .cart-btn .badge-info { background: var(--ic-blue) !important; color: #fff !important; }

/* ---------- Alerts ---------- */
.alert { border-radius: 0; border-width: 1px; }
.alert-info { background: var(--ic-blue-soft); border-color: #D2DCFF; color: #1D43C9; }

/* ---------- Login / register ---------- */
.login-form .card,
.mw-540.card {
  border: 1px solid var(--ic-line);
}
.login-form .card .h3 { font-size: 30px; font-weight: 600; }
.login-form .btn-primary { min-width: 160px; }

/* ---------- Footer ---------- */
footer.footer {
  background-color: var(--ic-ink);
  color: var(--ic-soft);
  padding: 40px 0 48px;
}
footer.footer .nav-link { color: #fff; font-weight: 600; }
footer.footer .nav-link:hover { color: var(--ic-accent-light); }
footer.footer .copyright { color: var(--ic-soft); }
footer.footer .btn { border-radius: 999px !important; border: 1px solid rgba(255,255,255,0.2); }

/* ---------- Misc ---------- */
.modal-content { border-radius: 0; border: 0; }
.nav-tabs .nav-link { border-radius: 0; font-weight: 600; color: var(--ic-muted); }
.nav-tabs .nav-link.active { color: var(--ic-ink); border-bottom: 3px solid var(--ic-blue); }
.progress { border-radius: 0; }
.progress-bar { background-color: var(--ic-blue); }

/* ---------- Logo (brand SVG from infraclusters.com) ---------- */
header.header .navbar-brand {
  display: block;
  width: 195px;
  height: 47px;
  background: url("https://infraclusters.com/wp-content/themes/infraclusters/dist/assets/images/logoInfra.svg") left center / contain no-repeat;
  font-size: 0;
  color: transparent;
}
header.header .navbar-brand .logo-img { display: none; }

/* =====================================================================
   Portal home (homepage.tpl)
   ===================================================================== */
body:has(.ic-home) .master-breadcrumb { display: none; }
body:has(.ic-home) #main-body { padding-top: 0; }
body:has(.ic-home) { overflow-x: hidden; }
.ic-home { padding-bottom: 8px; }

.ic-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ic-accent-light);
  margin-bottom: 14px;
}
.ic-eyebrow-dark { color: var(--ic-blue); margin-bottom: 8px; }

/* Hero: full-bleed ink band */
.ic-hero {
  background: var(--ic-ink);
  margin: 0 calc(50% - 50vw) 56px;
  padding: 72px 0 80px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ic-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(143,168,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,168,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.ic-hero .container { position: relative; }
.ic-hero h1 {
  color: #fff;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.ic-hero .ic-lead { font-size: 18px; line-height: 1.65; color: var(--ic-soft); max-width: 520px; margin-bottom: 32px; }
.ic-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.ic-btn-ghost,
.ic-btn-ghost:focus { background: transparent; color: #fff; border: 2px solid var(--ic-green); }
.ic-btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ic-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ic-trust li { font-size: 14px; font-weight: 600; color: #fff; }
.ic-trust i { color: #4ADE80; margin-right: 8px; }

.ic-hero-art { position: relative; height: 380px; }
.ic-hero-art img { position: absolute; display: block; border: 1px solid rgba(143,168,255,0.25); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.ic-hero-art .ic-art-main { width: 78%; right: 4%; top: 40px; z-index: 2; }
.ic-hero-art .ic-art-a { width: 44%; left: 0; top: 0; opacity: 0.9; z-index: 1; }
.ic-hero-art .ic-art-b { width: 42%; right: 0; bottom: 0; z-index: 3; }

/* Sections */
.ic-section { margin-bottom: 56px; }
.ic-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ic-section-head h2 { font-size: 32px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.ic-link { font-weight: 700; font-size: 15px; white-space: nowrap; }
.ic-link i { margin-left: 6px; }

/* Product group cards */
.ic-group-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--ic-line);
  color: var(--ic-ink); text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ic-group-card:hover { border-color: var(--ic-blue); box-shadow: 0 0 0 4px rgba(42,92,255,0.12); transform: translateY(-2px); color: var(--ic-ink); }
.ic-group-art { display: block; background: var(--ic-ink); line-height: 0; }
.ic-group-art img { width: 100%; height: 170px; object-fit: cover; }
.ic-group-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; flex-grow: 1; }
.ic-group-name { font-size: 20px; font-weight: 700; }
.ic-group-tagline { font-size: 14px; line-height: 1.6; color: var(--ic-muted); flex-grow: 1; }
.ic-group-cta { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--ic-blue); }
.ic-group-cta i { margin-left: 6px; transition: transform .15s ease; }
.ic-group-card:hover .ic-group-cta i { transform: translateX(3px); }

/* Help tiles */
.ic-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ic-tile {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--ic-line); padding: 22px;
  color: var(--ic-ink); text-decoration: none !important;
  transition: border-color .15s ease;
}
.ic-tile:hover { border-color: var(--ic-blue); color: var(--ic-ink); }
.ic-tile-icon { width: 44px; height: 44px; background: var(--ic-blue-soft); color: var(--ic-blue); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 10px; }
.ic-tile-title { font-size: 16px; font-weight: 700; }
.ic-tile-text { font-size: 13px; color: var(--ic-muted); }

/* Account quick links */
.ic-account { display: flex; flex-wrap: wrap; gap: 12px; }
.ic-account a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; min-height: 48px;
  background: #fff; border: 2px solid var(--ic-green); border-radius: 999px;
  color: var(--ic-ink); font-weight: 600; font-size: 15px; text-decoration: none !important;
}
.ic-account a:hover { background: #F0FAF3; color: var(--ic-ink); }
.ic-account i { color: var(--ic-blue); }

/* CTA band */
.ic-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  background: var(--ic-ink); color: var(--ic-soft);
  padding: 48px 56px; margin-bottom: 8px;
}
.ic-cta h2 { color: #fff; font-size: 30px; font-weight: 500; margin: 0 0 10px; }
.ic-cta p { margin: 0; font-size: 16px; }
.ic-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 991px) {
  .ic-hero { padding: 48px 0 56px; }
  .ic-hero h1 { font-size: 38px; }
  .ic-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic-cta { padding: 32px 24px; }
}
@media (max-width: 575px) {
  .ic-tiles { grid-template-columns: 1fr; }
  .ic-section-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Colourful canvases (homepage sections) ---------- */
.ic-canvas {
  position: relative;
  margin: 0 calc(50% - 50vw) 0;
  padding: 64px calc(50vw - 50%) 64px;
  overflow: hidden;
  isolation: isolate;
}
.ic-canvas::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(11,12,27,0.07) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.ic-canvas::after {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%;
  filter: blur(90px); opacity: 0.55; right: -140px; top: -180px;
}
.ic-canvas-blue   { background: linear-gradient(135deg, #EEF2FF 0%, #E3F1FF 55%, #F4F0FF 100%); }
.ic-canvas-blue::after   { background: #7B9BFF; }
.ic-canvas-mint   { background: linear-gradient(135deg, #E9FBF1 0%, #E6F8FA 55%, #F2FBE8 100%); }
.ic-canvas-mint::after   { background: #4ADE80; left: -160px; right: auto; }
.ic-canvas-violet { background: linear-gradient(135deg, #F4EFFF 0%, #FCEFF7 55%, #FFF4E8 100%); }
.ic-canvas-violet::after { background: #C084FC; }
.ic-canvas + .ic-canvas { margin-top: 0; }
.ic-canvas .ic-section-head h2 { color: var(--ic-ink); }
.ic-canvas-blue .ic-eyebrow-dark   { color: #1D43C9; }
.ic-canvas-mint .ic-eyebrow-dark   { color: #0B7A45; }
.ic-canvas-violet .ic-eyebrow-dark { color: #6D28D9; }
.ic-home .ic-section.ic-canvas { margin-bottom: 0; }

/* colour-coded help tiles */
.ic-tile.tone-green  .ic-tile-icon { background: #DCFCE7; color: #0B7A45; }
.ic-tile.tone-amber  .ic-tile-icon { background: #FEF3C7; color: #92400E; }
.ic-tile.tone-blue   .ic-tile-icon { background: #DBEAFE; color: #1D4ED8; }
.ic-tile.tone-pink   .ic-tile-icon { background: #FCE7F3; color: #9D174D; }
.ic-tile.tone-violet .ic-tile-icon { background: #EDE9FE; color: #5B21B6; }
.ic-tile { box-shadow: 0 1px 0 rgba(11,12,27,0.04); }
.ic-tile.tone-green:hover  { border-color: #16A34A; }
.ic-tile.tone-amber:hover  { border-color: #D97706; }
.ic-tile.tone-blue:hover   { border-color: #2563EB; }
.ic-tile.tone-pink:hover   { border-color: #DB2777; }
.ic-tile.tone-violet:hover { border-color: #7C3AED; }
.ic-canvas-violet .ic-account a { background: rgba(255,255,255,0.85); }

/* hero colour glows */
.ic-hero { margin-bottom: 0; }
.ic-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; pointer-events: none; }
.ic-blob-1 { width: 420px; height: 420px; background: #2A5CFF; left: -120px; top: -160px; }
.ic-blob-2 { width: 360px; height: 360px; background: #7C3AED; right: 8%; top: 30%; opacity: 0.35; }
.ic-blob-3 { width: 300px; height: 300px; background: #16A34A; right: -80px; bottom: -160px; opacity: 0.3; }

/* CTA band: colourful gradient canvas */
.ic-cta.ic-canvas-sunrise {
  margin: 0 calc(50% - 50vw) 0;
  padding: 64px calc(50vw - 50%);
  background: linear-gradient(120deg, #0B0C1B 0%, #1A2A8F 45%, #2A5CFF 75%, #16A34A 130%);
}
.ic-cta.ic-canvas-sunrise p { color: #DCE3FF; }
body:has(.ic-home) #main-body { padding-bottom: 0; }

/* ---------- Rounded palettes + motion (homepage) ---------- */
:root { --ic-r-xl: 32px; --ic-r-lg: 20px; --ic-r-md: 14px; --ic-r-sm: 10px; }

/* sections become rounded, inset "palettes" */
.ic-hero,
.ic-canvas,
.ic-cta.ic-canvas-sunrise {
  border-radius: var(--ic-r-xl);
  margin-left: calc(50% - 50vw + 20px) !important;
  margin-right: calc(50% - 50vw + 20px) !important;
  padding-left: calc(50vw - 50% - 20px) !important;
  padding-right: calc(50vw - 50% - 20px) !important;
}
.ic-hero { margin-top: 20px; }
.ic-canvas, .ic-cta.ic-canvas-sunrise { margin-top: 20px !important; }
.ic-cta.ic-canvas-sunrise { margin-bottom: 20px !important; }

/* rounded cards, tiles, art */
.ic-group-card { border-radius: var(--ic-r-lg); overflow: hidden; }
.ic-tile { border-radius: var(--ic-r-lg); }
.ic-tile-icon { border-radius: var(--ic-r-sm); }
.ic-hero-art img { border-radius: var(--ic-r-md); }

/* hover motion */
.ic-group-card { transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.7,.2,1); }
.ic-group-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(42,92,255,0.18); }
.ic-group-art img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ic-group-card:hover .ic-group-art img { transform: scale(1.06); }
.ic-tile { transition: border-color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
.ic-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11,12,27,0.10); }
.ic-tile-icon { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.ic-tile:hover .ic-tile-icon { transform: scale(1.12) rotate(-6deg); }
.ic-account a { transition: transform .2s ease, background-color .2s ease; }
.ic-account a:hover { transform: translateY(-2px); }
.ic-home .btn { transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.ic-home .btn:hover { transform: translateY(-2px); }

/* ambient motion */
@keyframes ic-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ic-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes ic-drift   { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.12); } }
@keyframes ic-glow    { 0%,100% { opacity: .45; } 50% { opacity: .75; } }
@keyframes ic-sheen   { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.ic-hero-art .ic-art-main { animation: ic-float 7s ease-in-out infinite; }
.ic-hero-art .ic-art-a    { animation: ic-float-b 8s ease-in-out infinite; }
.ic-hero-art .ic-art-b    { animation: ic-float 6s ease-in-out -2s infinite; }
.ic-blob-1 { animation: ic-drift 14s ease-in-out infinite; }
.ic-blob-2 { animation: ic-drift 18s ease-in-out -6s infinite reverse; }
.ic-blob-3 { animation: ic-drift 16s ease-in-out -3s infinite; }
.ic-canvas::after { animation: ic-drift 20s ease-in-out infinite, ic-glow 9s ease-in-out infinite; }
.ic-cta.ic-canvas-sunrise { background-size: 200% 100%; animation: ic-sheen 14s linear infinite alternate; }
.ic-trust i { animation: ic-glow 3s ease-in-out infinite; }

/* scroll reveal (only when JS enabled it) */
.ic-anim .ic-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--ic-delay, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--ic-delay, 0ms);
}
.ic-anim .ic-reveal.is-in { opacity: 1; transform: none; }
.ic-anim .ic-hero-art img.ic-reveal.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ic-home *, .ic-home *::before, .ic-home *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 767px) {
  .ic-hero, .ic-canvas, .ic-cta.ic-canvas-sunrise {
    border-radius: 22px;
    margin-left: calc(50% - 50vw + 10px) !important;
    margin-right: calc(50% - 50vw + 10px) !important;
    padding-left: calc(50vw - 50% - 10px) !important;
    padding-right: calc(50vw - 50% - 10px) !important;
  }
}

/* ---------- Icon-style product art (light, gray line decorations) ---------- */
.ic-group-art { background: #F7F8FB; border-bottom: 1px solid var(--ic-line); }
.ic-hero-art img { border: 1px solid rgba(255,255,255,0.18); background: #F7F8FB; }

/* ---------- Logo system (mask-based so one SVG gives every colour variant) ---------- */
.ic-logo {
  display: inline-block;
  width: 200px;
  aspect-ratio: 1151 / 276;
  -webkit-mask: url("../img/logo.svg") no-repeat 0 0 / contain;
          mask: url("../img/logo.svg") no-repeat 0 0 / contain;
  background: var(--ic-ink);
}
.ic-logo-white { background: #fff; }
.ic-logo-ink   { background: var(--ic-ink); }
.ic-logo-blue  { background: linear-gradient(90deg, #8FA8FF, #2A5CFF); }
/* icon-only crop of the same SVG: the mark spans x 0-100, y 0-204 of the 1151x276 artwork */
.ic-mark {
  --h: 48px;
  display: inline-block;
  height: var(--h);
  width: calc(var(--h) * 0.49);
  -webkit-mask: url("../img/logo.svg") no-repeat 0 0 / calc(var(--h) * 5.642) calc(var(--h) * 1.353);
          mask: url("../img/logo.svg") no-repeat 0 0 / calc(var(--h) * 5.642) calc(var(--h) * 1.353);
  background: currentColor;
}
.ic-mark-gradient { background: linear-gradient(160deg, #2A5CFF 10%, #16A34A 100%); }

/* ---------- Login ---------- */
body:has(.ic-login) .master-breadcrumb { display: none; }
body:has(.ic-login) #main-body { padding-top: 24px; padding-bottom: 32px; }
.ic-login {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 640px;
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ic-line);
  box-shadow: 0 30px 80px rgba(11, 12, 27, 0.10);
}
.ic-login-brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ic-ink);
  color: var(--ic-soft);
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.ic-login-brand::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(143,168,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,168,255,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
}
.ic-login-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ic-login-glow-1 { width: 380px; height: 380px; background: #2A5CFF; opacity: .45; left: -120px; bottom: -140px; animation: ic-drift 16s ease-in-out infinite; }
.ic-login-glow-2 { width: 300px; height: 300px; background: #16A34A; opacity: .28; right: -90px; top: -90px; animation: ic-drift 20s ease-in-out -5s infinite reverse; }
.ic-mark-watermark {
  --h: 520px;
  position: absolute; z-index: -1;
  right: -40px; bottom: -70px;
  background: linear-gradient(180deg, rgba(143,168,255,0.22), rgba(143,168,255,0.02));
}
.ic-login-brand .ic-logo { width: 210px; }
.ic-login-copy { margin-top: auto; }
.ic-login-copy h1 { color: #fff; font-size: 44px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 16px; }
.ic-login-copy p { font-size: 16px; line-height: 1.65; margin: 0 0 22px; max-width: 440px; }
.ic-login-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ic-login-points li { color: #fff; font-weight: 600; font-size: 14px; }
.ic-login-points i { width: 22px; color: #4ADE80; }

.ic-logo-set { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ic-logo-tile {
  height: 64px; min-width: 64px; padding: 0 18px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.ic-logo-tile:hover { transform: translateY(-4px); }
.ic-logo-tile .ic-mark { --h: 36px; }
.ic-tile-gradient { background: linear-gradient(145deg, #2A5CFF, #16A34A); color: #fff; }
.ic-tile-outline  { border: 1px solid rgba(143,168,255,0.35); color: #8FA8FF; }
.ic-tile-light    { background: #fff; color: var(--ic-ink); }
.ic-tile-wide     { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.ic-tile-wide .ic-logo { width: 130px; }

.ic-login-panel {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(600px 300px at 100% 0%, #EEF2FF 0%, transparent 70%),
    radial-gradient(500px 260px at 0% 100%, #E9FBF1 0%, transparent 70%),
    #fff;
}
.ic-login-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ic-login-panel-head .ic-mark { --h: 40px; }
.ic-login-panel-head .ic-logo { width: 150px; }
/* restyle the stock Twenty-One login card inside the panel */
.ic-login-panel .login-form .card { border: 0 !important; background: transparent; box-shadow: none; margin: 0 !important; max-width: none; }
.ic-login-panel .login-form .card-body { padding: 16px 0 8px !important; }
.ic-login-panel .login-form .card-footer { background: transparent; border: 0; padding: 12px 0 0 !important; }
.ic-login-panel .login-form .h3 { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.ic-login-panel .form-control,
.ic-login-panel .input-group-text { border-radius: 12px !important; min-height: 50px; }
.ic-login-panel .input-group-merge .input-group-prepend .input-group-text { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.ic-login-panel .input-group-merge .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.ic-login-panel .input-group-merge .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.ic-login-panel .input-group-append .btn { border-radius: 0 12px 12px 0 !important; }
.ic-login-panel #login { min-width: 170px; padding: 0.75rem 1.8rem; }
.ic-login-help { margin: 18px 0 0; font-size: 13px; color: var(--ic-muted); }

@media (max-width: 991px) {
  .ic-login { grid-template-columns: 1fr; border-radius: 24px; }
  .ic-login-brand { padding: 36px 28px; gap: 24px; }
  .ic-login-copy h1 { font-size: 32px; }
  .ic-logo-set { display: none; }
  .ic-login-panel { padding: 32px 24px; }
}

/* ---------- Login: logo artwork background ---------- */
.ic-login-brand {
  background:
    linear-gradient(90deg, rgba(11,12,27,0.94) 0%, rgba(11,12,27,0.80) 45%, rgba(11,12,27,0.62) 100%),
    url("../img/login-bg.webp") 115% 55% / auto 118% no-repeat,
    #000;
}
.ic-login-brand .ic-mark-watermark { display: none; }
.ic-login-brand::before { opacity: 0.5; }
@media (max-width: 991px) {
  .ic-login-brand {
    background:
      linear-gradient(180deg, rgba(11,12,27,0.78) 0%, rgba(11,12,27,0.92) 100%),
      url("../img/login-bg.webp") center / cover no-repeat,
      #000;
  }
}

/* ---------- Footer: back to main website ---------- */
footer.footer { padding-top: 48px; }
.ic-footer-top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 32px; margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.ic-footer-top .ic-logo { width: 190px; }
footer.footer .ic-back-btn {
  background: var(--ic-blue); color: #fff; border: 2px solid var(--ic-green) !important;
  border-radius: 999px !important; padding: 0.75rem 1.6rem; font-size: 15px; line-height: 1.5;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
footer.footer .ic-back-btn:hover { background: var(--ic-blue-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(22,163,74,0.25); }
@media (max-width: 575px) { .ic-footer-top { flex-direction: column; align-items: flex-start; } }