/* ============================================================================
   SKPHost — BRAND-FILLED HOSTING DESIGN
   Unique hosting industry look: server racks, status pills, node IDs,
   dashboard-style cards. Built specifically for SKPHost brand identity.
   Layered on top of custom.css.
   ============================================================================ */

:root {
  /* SKPHost brand palette */
  --skp-navy:        #001f54;
  --skp-navy-mid:    #0a3d91;
  --skp-blue:        #1e58e7;
  --skp-cyan:        #00d2ff;
  --skp-purple:      #7c3aed;
  --skp-success:     #10b981;
  --skp-amber:       #fbbf24;
  --skp-danger:      #ef4444;

  --skp-bg:          #f8fafd;
  --skp-bg-light:    #eff6ff;
  --skp-text:        #0f172a;
  --skp-text-mid:    #475569;
  --skp-text-mute:   #64748b;
  --skp-border:      rgba(15,23,42,0.08);

  --skp-radius-sm:   6px;
  --skp-radius:      10px;
  --skp-radius-lg:   14px;
  --skp-radius-xl:   18px;

  --skp-shadow-sm:   0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --skp-shadow:      0 4px 12px rgba(15,23,42,0.08);
  --skp-shadow-md:   0 8px 24px rgba(15,23,42,0.10);
  --skp-shadow-blue: 0 8px 24px rgba(30,88,231,0.18);
  --skp-shadow-blue-lg: 0 14px 36px rgba(30,88,231,0.25);
}

body {
  background: var(--skp-bg);
  color: var(--skp-text);
}

/* ============================================================================
   ANNOUNCEMENT BAR — TICKER STYLE
   ============================================================================ */
.announce-bar {
  background: var(--skp-navy);
  border-bottom: 1px solid rgba(0,210,255,0.15);
  color: #fff;
  padding: 8px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.announce-bar::before {
  content: "●";
  color: var(--skp-success);
  font-size: 10px;
  animation: announce-blink 2s infinite;
  text-shadow: 0 0 8px var(--skp-success);
}
@keyframes announce-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.announce-bar a {
  color: var(--skp-cyan);
  text-decoration: underline;
  font-weight: 600;
}

/* ============================================================================
   HEADER — CLEAN PROFESSIONAL
   ============================================================================ */
.main-header {
  background: #fff !important;
  border-bottom: 1px solid var(--skp-border);
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
  transition: box-shadow 0.25s;
}
.main-header.scrolled,
.main-header.header-sticky {
  box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}
.main-header .nabbar-nav .mainmenu > li > a {
  font-weight: 600;
  color: var(--skp-text);
  transition: color 0.2s;
}
.main-header .nabbar-nav .mainmenu > li > a:hover,
.main-header .nabbar-nav .mainmenu > li.active > a {
  color: var(--skp-blue);
}

/* Header CTA button — SKPHost branded */
.main-header .ctabtn-1 a,
.main-header .ctabtn-2 a {
  background: var(--skp-blue) !important;
  color: #fff !important;
  padding: 10px 22px;
  border-radius: var(--skp-radius);
  font-weight: 600;
  box-shadow: var(--skp-shadow-blue);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.main-header .ctabtn-1 a:hover,
.main-header .ctabtn-2 a:hover {
  background: var(--skp-navy-mid) !important;
  transform: translateY(-1px);
  box-shadow: var(--skp-shadow-blue-lg);
}

/* ============================================================================
   HERO — SERVER RACK BACKGROUND
   ============================================================================ */
.main-banner.page-banner,
.main-banner {
  background: linear-gradient(135deg, var(--skp-navy) 0%, var(--skp-navy-mid) 50%, var(--skp-blue) 100%) !important;
  color: #fff !important;
  padding: 70px 0 80px !important;
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid var(--skp-cyan);
}

/* Server rack pattern overlay */
.main-banner::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100px;
  width: 50%;
  height: 100%;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 18px,
      rgba(0,210,255,0.06) 18px,
      rgba(0,210,255,0.06) 20px,
      transparent 20px,
      transparent 24px
    );
  pointer-events: none;
  opacity: 0.6;
}

/* Subtle status dots scattered */
.main-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 75% 20%, rgba(16,185,129,0.6), transparent),
    radial-gradient(2px 2px at 82% 35%, rgba(16,185,129,0.5), transparent),
    radial-gradient(2px 2px at 78% 50%, rgba(251,191,36,0.6), transparent),
    radial-gradient(2px 2px at 85% 65%, rgba(16,185,129,0.5), transparent),
    radial-gradient(2px 2px at 80% 80%, rgba(16,185,129,0.6), transparent);
  pointer-events: none;
}

.main-banner .container {
  position: relative;
  z-index: 2;
}

/* Hero text */
.main-banner h1,
.main-banner .display-4 {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.main-banner .text-dark { color: #fff !important; }
.main-banner .text-gradient,
.main-banner .text-success {
  color: var(--skp-cyan) !important;
  background: none !important;
  -webkit-text-fill-color: var(--skp-cyan) !important;
}
.main-banner p,
.main-banner p.fs-5,
.main-banner .text-muted {
  color: rgba(255,255,255,0.85) !important;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 22px;
}

/* Hero eyebrow badge — cyan accent */
.main-banner .top-heading,
.main-banner .badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  background: rgba(0,210,255,0.12) !important;
  border: 1px solid rgba(0,210,255,0.35);
  color: var(--skp-cyan) !important;
  padding: 6px 16px !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 16px;
  text-transform: none;
  box-shadow: 0 0 20px rgba(0,210,255,0.1);
}
.main-banner .top-heading i,
.main-banner .badge i {
  color: var(--skp-cyan) !important;
  font-size: 14px;
}

/* Hero feature list — checkmark items */
.main-banner .banner-list,
.main-banner ul.icon {
  margin-bottom: 24px !important;
}
.main-banner .banner-list li,
.main-banner ul.icon li {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500;
  font-size: 14.5px;
  padding: 5px 0;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.main-banner .banner-list li i,
.main-banner ul.icon li i {
  color: var(--skp-success) !important;
  font-size: 16px;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Hero CTA buttons — SKPHost branded */
.main-banner .btn-glow {
  background: var(--skp-cyan) !important;
  color: var(--skp-navy) !important;
  border: none !important;
  padding: 14px 28px !important;
  border-radius: var(--skp-radius) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,210,255,0.3), 0 0 0 0 rgba(0,210,255,0.4);
  transition: all 0.25s;
  text-transform: none;
}
.main-banner .btn-glow:hover {
  background: #fff !important;
  color: var(--skp-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,210,255,0.45), 0 0 0 6px rgba(0,210,255,0.1);
}

.main-banner .btn-outline-glow {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  padding: 14px 28px !important;
  border-radius: var(--skp-radius) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  transition: all 0.25s;
}
.main-banner .btn-outline-glow:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: var(--skp-cyan) !important;
  color: var(--skp-cyan) !important;
}

/* Hero image */
.main-banner .hero-img {
  filter: drop-shadow(0 20px 50px rgba(0,210,255,0.25));
  animation: skpFloat 5s ease-in-out infinite;
  border-radius: var(--skp-radius-lg) !important;
}
@keyframes skpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ============================================================================
   LIVE STATUS BAR — UNIQUE TO SKPHOST
   Like a "system status" strip
   ============================================================================ */
.trust-row {
  background: var(--skp-navy) !important;
  border: none !important;
  padding: 12px 0 !important;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
}
.trust-row .container > div {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 !important;
}
.trust-row .trust-item {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.9) !important;
  padding: 6px 18px !important;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.trust-row .trust-item:last-child { border-right: none; }
.trust-row .trust-item i {
  color: var(--skp-success) !important;
  font-size: 14px;
  position: relative;
}
/* First item gets a pulsing "all systems operational" dot */
.trust-row .trust-item:first-child i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--skp-success) !important;
  box-shadow: 0 0 12px var(--skp-success);
  animation: status-pulse 2s infinite;
  display: inline-block;
}
.trust-row .trust-item:first-child i::before { content: ""; }
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================================
   BREADCRUMB — CLEAN
   ============================================================================ */
.breadcrumb-wrap {
  background: #fff !important;
  border-bottom: 1px solid var(--skp-border);
  padding: 12px 0;
}
.breadcrumb-wrap .breadcrumb-item a {
  color: var(--skp-blue);
  font-weight: 500;
}
.breadcrumb-wrap .breadcrumb-item.active {
  color: var(--skp-text-mute);
}
.breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--skp-text-mute);
}

/* ============================================================================
   SECTION LABELS — EYEBROW PILLS
   ============================================================================ */
.section-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--skp-bg-light) !important;
  border: 1px solid #B5D4F4 !important;
  color: var(--skp-blue) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  margin-bottom: 14px !important;
  background-clip: padding-box;
}
.section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--skp-blue);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(30,88,231,0.5);
  flex-shrink: 0;
}

/* Section headings */
h2.fw-bold {
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 800 !important;
  color: var(--skp-text) !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.text-center h2.fw-bold + p.text-muted {
  font-size: 15.5px;
  color: var(--skp-text-mute);
  max-width: 640px;
  margin: 0 auto 24px;
  line-height: 1.65;
}

/* ============================================================================
   PRICING CARDS — SERVER NODE STYLE
   Each card looks like a server provision card
   ============================================================================ */
.pricing-card {
  background: #fff !important;
  border: 1px solid var(--skp-border) !important;
  border-radius: var(--skp-radius-lg) !important;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--skp-shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pricing-card:hover {
  border-color: var(--skp-blue) !important;
  transform: translateY(-6px);
  box-shadow: var(--skp-shadow-blue);
}

/* Top accent bar — replaced with a top header strip */
.pricing-card .card-top {
  display: none !important;
}

/* Card body — needs internal restructure via CSS */
.pricing-card .card-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Plan header section (icon + title + badge) — given a tinted background */
.pricing-card .card-body > .d-flex:first-child {
  background: linear-gradient(135deg, #f8fafd, var(--skp-bg-light)) !important;
  padding: 16px !important;
  border-bottom: 1px solid var(--skp-border);
  margin: 0 !important;
}

/* Popular card — full brand fill on header */
.pricing-card.popular {
  border: 2px solid var(--skp-blue) !important;
  box-shadow: 0 8px 24px rgba(30,88,231,0.15);
}
.pricing-card.popular .card-body > .d-flex:first-child {
  background: linear-gradient(135deg, var(--skp-blue), var(--skp-navy-mid)) !important;
  border-bottom-color: var(--skp-navy-mid);
}
.pricing-card.popular .plan-title {
  color: #fff !important;
}
.pricing-card.popular .card-body > .d-flex:first-child > div > div[style*="font-size:12px"] {
  color: rgba(255,255,255,0.75) !important;
}

/* Plan icon */
.pricing-card .card-body > .d-flex:first-child img {
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, var(--skp-blue), var(--skp-purple));
  border-radius: 9px;
  padding: 7px;
}
.pricing-card.popular .card-body > .d-flex:first-child img {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
}

/* Plan title */
.pricing-card .plan-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--skp-text);
  margin-bottom: 2px;
}

/* Plan badge in header — small pill */
.pricing-card .card-body > .d-flex:first-child .badge {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  background: var(--skp-blue) !important;
  color: #fff !important;
  text-transform: uppercase;
}
.pricing-card.popular .card-body > .d-flex:first-child .badge {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3);
}

/* POPULAR ribbon */
.pricing-card.popular > .badge.position-absolute {
  position: absolute !important;
  top: 14px !important;
  right: -34px !important;
  left: auto !important;
  background: var(--skp-purple) !important;
  color: #fff !important;
  padding: 4px 36px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  border-radius: 0 !important;
  transform: rotate(35deg);
  box-shadow: 0 2px 8px rgba(124,58,237,0.3);
  z-index: 5;
  text-transform: uppercase;
}

/* Card body content (everything below header) */
.pricing-card .billing-selector,
.pricing-card .price-main,
.pricing-card .price-sub,
.pricing-card .divider,
.pricing-card .powered-by,
.pricing-card .feature-list,
.pricing-card .btn-start {
  margin-left: 16px;
  margin-right: 16px;
}

/* Add "node ID" tag before price */
.pricing-card .price-main::before {
  content: "node-01";
  display: inline-block;
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--skp-purple);
  background: #EEEDFE;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: -22px;
  border: 1px solid #CECBF6;
}
.pricing-card:nth-of-type(2) .price-main::before { content: "node-02"; }
.pricing-card:nth-of-type(3) .price-main::before { content: "node-03"; }
.pricing-card:nth-of-type(4) .price-main::before { content: "node-04"; }

/* Billing selector */
.pricing-card .billing-selector {
  margin-top: 32px !important;
}
.pricing-card .dd-toggle {
  background: #f8fafd !important;
  border: 1px solid var(--skp-border) !important;
  border-radius: var(--skp-radius-sm) !important;
  padding: 9px 12px !important;
  font-weight: 500;
  transition: border-color 0.2s;
}
.pricing-card .dd-toggle:hover {
  border-color: var(--skp-blue) !important;
}
.pricing-card .dd-main {
  color: var(--skp-text) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.pricing-card .dd-meta {
  color: var(--skp-text-mute) !important;
  font-size: 10.5px !important;
}
.pricing-card .toggle-save {
  background: var(--skp-success) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  box-shadow: 0 1px 4px rgba(16,185,129,0.3);
}

.pricing-card .dd-panel {
  border-radius: var(--skp-radius) !important;
  border: 1px solid var(--skp-border) !important;
  box-shadow: var(--skp-shadow-md) !important;
}

/* Price display */
.pricing-card .price-main {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 14px 16px 4px !important;
  position: relative;
}
.pricing-card .price-main .currency {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--skp-text-mute) !important;
  align-self: flex-start;
  margin-top: 4px;
}
.pricing-card .price-main .amount {
  font-size: 42px !important;
  font-weight: 800 !important;
  color: var(--skp-text) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  background: none !important;
  -webkit-text-fill-color: var(--skp-text) !important;
}
.pricing-card.popular .price-main .amount {
  color: var(--skp-blue) !important;
  -webkit-text-fill-color: var(--skp-blue) !important;
}
.pricing-card .price-main .term {
  font-size: 14px !important;
  color: var(--skp-text-mute) !important;
  font-weight: 600;
  margin-left: 2px;
}

.pricing-card .price-sub {
  font-size: 11.5px !important;
  color: var(--skp-text-mute) !important;
  margin-bottom: 10px !important;
}

.pricing-card .divider {
  background: var(--skp-border) !important;
  height: 1px;
  margin: 14px 16px !important;
}

/* Powered by box */
.pricing-card .powered-by {
  background: #f8fafd !important;
  border: 1px solid var(--skp-border);
  border-radius: var(--skp-radius-sm);
  padding: 8px !important;
  margin-bottom: 14px !important;
  font-size: 10.5px;
}

/* Feature list — clean checkmarks */
.pricing-card .feature-list {
  margin-bottom: 16px !important;
}
.pricing-card .feature-list li {
  padding: 7px 0 !important;
  font-size: 13px !important;
  color: var(--skp-text-mid) !important;
  border-bottom: 1px solid var(--skp-border) !important;
  display: flex;
  align-items: center;
  gap: 9px;
}
.pricing-card .feature-list li:last-child {
  border-bottom: none;
}
.pricing-card .feature-list li i {
  color: var(--skp-success) !important;
  font-size: 12px !important;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pricing-card .feature-list li b {
  font-weight: 500 !important;
  color: var(--skp-text);
}

/* Deploy button */
.pricing-card .btn-start {
  background: var(--skp-blue) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px !important;
  border-radius: var(--skp-radius) !important;
  letter-spacing: 0.3px;
  box-shadow: var(--skp-shadow-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px !important;
  margin-top: auto;
  transition: all 0.2s;
  text-transform: none;
}
.pricing-card .btn-start:hover {
  background: var(--skp-navy-mid) !important;
  transform: translateY(-1px);
  box-shadow: var(--skp-shadow-blue-lg);
}
.pricing-card .btn-start.btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid var(--skp-blue) !important;
  color: var(--skp-blue) !important;
  box-shadow: none;
}
.pricing-card .btn-start.btn-outline-primary:hover {
  background: var(--skp-blue) !important;
  color: #fff !important;
  box-shadow: var(--skp-shadow-blue);
}

/* Popular card buy button */
.pricing-card.popular .btn-start {
  background: var(--skp-purple) !important;
  box-shadow: 0 8px 24px rgba(124,58,237,0.25);
}
.pricing-card.popular .btn-start:hover {
  background: #5b21b6 !important;
  box-shadow: 0 12px 32px rgba(124,58,237,0.35);
}

/* ============================================================================
   FEATURE CARDS — DASHBOARD STYLE
   ============================================================================ */
.feature-card {
  background: #fff !important;
  border: 1px solid var(--skp-border) !important;
  border-radius: var(--skp-radius-lg) !important;
  padding: 22px !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  height: 100%;
  position: relative;
  box-shadow: var(--skp-shadow-sm);
}
.feature-card:hover {
  border-color: var(--skp-blue) !important;
  transform: translateY(-4px);
  box-shadow: var(--skp-shadow-blue);
}

.icon-wrap {
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, var(--skp-blue), var(--skp-purple)) !important;
  border-radius: var(--skp-radius) !important;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(30,88,231,0.25);
}
.icon-wrap i {
  color: #fff !important;
  font-size: 22px !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}

.feature-card i.fs-1 {
  font-size: 32px !important;
  color: var(--skp-blue) !important;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--skp-bg-light), #DBEAFE);
  border: 1px solid #BFDBFE;
  width: 56px;
  height: 56px;
  border-radius: var(--skp-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature-card h5,
.feature-card h6 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--skp-text) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em;
}
.feature-card h6 { font-size: 14.5px !important; }
.feature-card p,
.feature-card p.text-muted {
  font-size: 13.5px !important;
  color: var(--skp-text-mute) !important;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================================
   CTA DARK — SKPHOST DEPLOY STYLE
   ============================================================================ */
#cta-dark {
  background:
    linear-gradient(135deg, var(--skp-navy) 0%, var(--skp-navy-mid) 100%) !important;
  padding: 60px 0 !important;
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid var(--skp-cyan);
}
#cta-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 30px,
      rgba(0,210,255,0.025) 30px,
      rgba(0,210,255,0.025) 31px
    );
  pointer-events: none;
}

#cta-dark .wrap {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
#cta-dark .card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--skp-radius-lg) !important;
  padding: 36px 40px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
#cta-dark .title {
  color: #fff !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
}
#cta-dark .subtitle {
  color: rgba(255,255,255,0.75) !important;
  font-size: 15px;
  line-height: 1.6;
  max-width: 560px;
}
#cta-dark .subtitle strong {
  color: var(--skp-cyan) !important;
}
#cta-dark .accent {
  width: 48px;
  height: 3px;
  background: var(--skp-cyan);
  border-radius: 3px;
  margin-top: 16px;
  box-shadow: 0 0 12px rgba(0,210,255,0.5);
}
#cta-dark .cta {
  background: var(--skp-cyan) !important;
  color: var(--skp-navy) !important;
  padding: 14px 28px !important;
  border-radius: var(--skp-radius) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0,210,255,0.3);
  transition: all 0.25s;
  white-space: nowrap;
}
#cta-dark .cta:hover {
  background: #fff !important;
  color: var(--skp-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,210,255,0.5);
}

@media (max-width: 768px) {
  #cta-dark .card {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px !important;
  }
  #cta-dark .cta { width: 100%; justify-content: center; }
}

/* ============================================================================
   FAQ ACCORDION — CLEAN PROFESSIONAL
   ============================================================================ */
.accordion-item {
  background: #fff !important;
  border: 1px solid var(--skp-border) !important;
  border-radius: var(--skp-radius) !important;
  overflow: hidden;
  transition: all 0.2s;
  margin-bottom: 10px !important;
  box-shadow: var(--skp-shadow-sm);
}
.accordion-item:hover {
  border-color: rgba(30,88,231,0.25) !important;
  box-shadow: var(--skp-shadow);
}
.accordion-button {
  background: #fff !important;
  font-weight: 600 !important;
  color: var(--skp-text) !important;
  padding: 16px 20px !important;
  font-size: 14.5px !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  background: var(--skp-bg-light) !important;
  color: var(--skp-blue) !important;
}
.accordion-button i {
  color: var(--skp-blue) !important;
}
.accordion-button::after {
  background-image: none !important;
  content: "+";
  width: 26px;
  height: 26px;
  background: var(--skp-bg-light) !important;
  border: 1px solid #BFDBFE;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--skp-blue);
  transition: all 0.25s;
  transform: none !important;
}
.accordion-button:not(.collapsed)::after {
  content: "−";
  background: var(--skp-blue) !important;
  color: #fff !important;
  border-color: var(--skp-blue);
}
.accordion-body {
  padding: 4px 20px 18px !important;
  color: var(--skp-text-mid);
  line-height: 1.65;
  font-size: 14px;
  background: #fff;
}
.accordion-body strong { color: var(--skp-blue); }

/* ============================================================================
   FOOTER — DARK DEPLOY STYLE
   ============================================================================ */
footer,
.footer-light {
  background: var(--skp-navy) !important;
  color: rgba(255,255,255,0.75) !important;
  border-top: 4px solid var(--skp-cyan);
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 100px,
      rgba(0,210,255,0.04) 100px,
      rgba(0,210,255,0.04) 101px
    );
  pointer-events: none;
}
footer > *,
.footer-light > * {
  position: relative;
  z-index: 1;
}

footer h5,
footer h6,
footer .col-title,
.footer-light h5,
.footer-light h6,
.footer-light .col-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
footer a,
.footer-light a,
.f-col a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13.5px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
footer a::before,
.footer-light a::before,
.f-col a::before {
  content: "›";
  color: rgba(0,210,255,0.4);
  font-size: 14px;
}
footer a:hover,
.footer-light a:hover,
.f-col a:hover {
  color: var(--skp-cyan) !important;
}
footer a:hover::before,
.footer-light a:hover::before,
.f-col a:hover::before {
  color: var(--skp-cyan);
}

footer .footer-bottom,
.footer-light .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
  color: rgba(255,255,255,0.55);
  padding: 16px 0;
}

/* ============================================================================
   MOBILE STICKY CTA
   ============================================================================ */
.mobile-sticky-cta {
  background: var(--skp-navy) !important;
  border-top: 1px solid rgba(0,210,255,0.2) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.mobile-sticky-cta a,
.mobile-sticky-cta .btn {
  background: var(--skp-cyan) !important;
  color: var(--skp-navy) !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: var(--skp-radius) !important;
  box-shadow: 0 4px 12px rgba(0,210,255,0.3);
}

/* ============================================================================
   SCROLL-TO-TOP
   ============================================================================ */
.scroll-top {
  background: var(--skp-blue) !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: var(--skp-shadow-blue) !important;
  border: none !important;
  transition: all 0.25s;
}
.scroll-top:hover {
  background: var(--skp-navy-mid) !important;
  transform: translateY(-3px);
  box-shadow: var(--skp-shadow-blue-lg) !important;
}

/* ============================================================================
   SECTION BACKGROUNDS
   ============================================================================ */
.section-white { background: #fff !important; }
.section-light { background: var(--skp-bg) !important; }

/* ============================================================================
   PROFESSIONAL FEATURES SECTION (top section in pricing pages)
   ============================================================================ */
.section-gap.section-light .feature-card {
  background: #fff !important;
  text-align: center;
}
.section-gap.section-light .feature-card .icon-wrap {
  margin: 0 auto 14px !important;
}

/* ============================================================================
   FORM ELEMENTS
   ============================================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  border: 1.5px solid var(--skp-border) !important;
  border-radius: var(--skp-radius-sm) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  background: #fff !important;
  transition: all 0.2s !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--skp-blue) !important;
  box-shadow: 0 0 0 3px rgba(30,88,231,0.1) !important;
  outline: none !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 991px) {
  .main-banner { padding: 50px 0 60px !important; }
  .main-banner::before { display: none; }
  .section-gap { padding: 44px 0 !important; }
}
@media (max-width: 575px) {
  .main-banner { padding: 38px 0 44px !important; }
  .main-banner h1 { font-size: 26px !important; }
  .main-banner p.fs-5 { font-size: 14.5px !important; }
  .main-banner .btn-glow,
  .main-banner .btn-outline-glow {
    width: 100%;
    justify-content: center;
  }
  .pricing-card .price-main .amount { font-size: 36px !important; }
  h2.fw-bold { font-size: 24px !important; }
  .trust-row .trust-item {
    padding: 4px 10px !important;
    font-size: 11.5px;
  }
  #cta-dark { padding: 44px 0 !important; }
  #cta-dark .card { padding: 24px 20px !important; }
}

/* ============================================================================
   ANIMATIONS — RESPECT REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .pricing-card {
    animation: skp-fade-up 0.5s cubic-bezier(0.4,0,0.2,1) backwards;
  }
  .pricing-card:nth-of-type(1) { animation-delay: 0.05s; }
  .pricing-card:nth-of-type(2) { animation-delay: 0.12s; }
  .pricing-card:nth-of-type(3) { animation-delay: 0.19s; }
  .pricing-card:nth-of-type(4) { animation-delay: 0.26s; }
  @keyframes skp-fade-up {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
  .main-banner::before,
  .main-banner::after,
  .trust-row,
  #cta-dark,
  .scroll-top,
  .mobile-sticky-cta { display: none !important; }
  body { background: #fff !important; }
  .main-banner { background: #fff !important; color: #000 !important; }
  .main-banner h1 { color: #000 !important; }
}