/* ============================================================================
   SoftSys Hosting — Modern CSS layer  (Direction D: "Modern + AI-Forward")
   ----------------------------------------------------------------------------
   Presentation-only refresh on top of HostIM + Elementor. Loaded LAST via
   functions.php (priority 9999, depends on 'hostim-root').

   ITERATION 1 of N — ships: design tokens, global base, hero.
   Components (nav, feature cards, pricing, forms/FAQ, testimonials, footer,
   responsive) follow in later iterations once this is approved.

   Conventions:
   - All values flow from the --ss-* tokens in :root. Tweak there, not inline.
   - We override by the theme's own selectors (.zlp_*, .elementor-button in
     content, etc.). !important is used ONLY where Elementor inline styles or
     the vendor child's own !important rules force it — each is flagged.
   ========================================================================== */


/* ============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* ---- Brand / colour ---- */
  --ss-primary:        #1E63E9;   /* SoftSys blue, modernised (flatter, true azure) */
  --ss-primary-dark:   #1450C4;
  --ss-primary-light:  #EAF1FF;
  --ss-accent:         #7C5CFC;   /* violet — replaces the old coral CTA / orange */
  --ss-accent-2:       #22D3EE;   /* cyan — the "AI" highlight, used in gradients   */
  --ss-accent-hover:   #6A48F0;

  --ss-ink:            #0E1426;   /* headings */
  --ss-body:           #344056;   /* body text — higher contrast than the old grey */
  --ss-muted:          #5A6786;   /* secondary / captions */

  --ss-surface:        #ffffff;
  --ss-surface-alt:    #F4F7FC;   /* alternating section tone */
  --ss-surface-dark:   #0A1330;   /* dark hero / dark sections */
  --ss-border:         #E6EDF5;
  --ss-border-strong:  #D2DEEC;

  --ss-success:        #16A34A;
  --ss-info:           #1E63E9;

  /* Signature gradients */
  --ss-grad-accent:    linear-gradient(95deg, #7C5CFC 0%, #2E7BFF 100%); /* CTA */
  --ss-grad-ai:        linear-gradient(90deg, #22D3EE 0%, #A78BFA 100%); /* highlight text */
  --ss-grad-hero:      linear-gradient(150deg, #081233 0%, #0C2050 52%, #171545 100%);

  /* ---- Typography ---- */
  --ss-font-head: "Plus Jakarta Sans", "Urbanist", system-ui, sans-serif;
  --ss-font-body: "Inter", "Mulish", system-ui, sans-serif;

  --ss-text-base: 1.0625rem;   /* ~17px */
  --ss-leading:   1.65;
  --ss-measure:   68ch;        /* comfortable reading max line length */

  /* Modular scale (~1.25) — used by the heading rules below */
  --ss-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  --ss-h2: clamp(1.85rem, 1.4rem + 1.8vw, 2.5rem);
  --ss-h3: clamp(1.45rem, 1.2rem + 1.0vw, 1.85rem);
  --ss-h4: 1.3rem;
  --ss-h5: 1.1rem;
  --ss-h6: 0.95rem;

  --ss-weight-head: 800;
  --ss-tracking-head: -0.02em;

  /* ---- Spacing scale (4/8px based) ---- */
  --ss-s1: 0.25rem; --ss-s2: 0.5rem;  --ss-s3: 0.75rem; --ss-s4: 1rem;
  --ss-s5: 1.5rem;  --ss-s6: 2rem;    --ss-s7: 3rem;    --ss-s8: 4rem;
  --ss-s9: 5rem;    --ss-s10: 6rem;
  --ss-section-y: clamp(3.5rem, 2rem + 5vw, 6rem);   /* vertical section rhythm */
  --ss-container: 1200px;

  /* ---- Radius ---- */
  --ss-radius-sm: 8px;
  --ss-radius:    14px;
  --ss-radius-lg: 20px;
  --ss-radius-pill: 999px;

  /* ---- Elevation (soft, modern) ---- */
  --ss-shadow-1: 0 1px 3px rgba(14,20,38,.05);
  --ss-shadow-2: 0 12px 34px rgba(14,20,38,.10);
  --ss-shadow-accent: 0 8px 24px rgba(124,92,252,.30);
  --ss-glow-ai: 0 0 0 1px rgba(124,92,252,.16), 0 6px 18px rgba(34,211,238,.16);

  /* ---- Motion ---- */
  --ss-ease: cubic-bezier(.22,.61,.36,1);
  --ss-dur:  .22s;
}


/* ============================================================================
   2. HYBRID: re-point the Elementor Global Kit colours at our tokens.  [ENABLED]
   ----------------------------------------------------------------------------
   The whole site (and the Elementor editor) colours via --e-global-color-*,
   defined in the live kit (.elementor-kit-9 / post-9.css). Re-pointing them at
   the source is the cleanest fix: it recolours every element that uses a global
   — including Elementor's DEFAULT button (the coral "View Plans" etc., which the
   kit paints with linear-gradient(var(--5f2e4d2), var(--225ea40))) — in one place.

   Hex values below are the REAL kit values (confirmed from the live site), each
   mapped to its Direction-D replacement. This also recolours the Elementor
   editor for the marketing team (intended — keeps editing WYSIWYG).
   ========================================================================== */
/* CRITICAL: Elementor declares these vars on <body class="elementor-kit-9">, not
   on :root. A declaration directly on <body> shadows the inherited :root value,
   so re-pointing only :root does NOT change elements that inherit from body
   (e.g. the default "View Plans" button). We therefore re-declare on the body
   kit element too. `body[class*="elementor-kit-"]` (specificity 0,1,1) beats
   `.elementor-kit-9` (0,1,0) and is kit-id-agnostic (survives kit renumbering).
   :root is kept for the editor / non-kit contexts. */
:root,
body,
body[class*="elementor-kit-"]{
  --e-global-color-primary:   var(--ss-primary);  /* #1C40F2 royal blue   -> modern azure   */
  --e-global-color-secondary: var(--ss-ink);      /* #001042              -> ink            */
  --e-global-color-text:      var(--ss-body);     /* #666666 low-contrast -> readable #344056 */
  --e-global-color-5f2e4d2:   var(--ss-accent);   /* #FF7E5D coral stop 1 -> violet #7C5CFC  */
  --e-global-color-225ea40:   var(--ss-primary);  /* #FF0766 coral stop 2 -> azure (gradient) */
  /* Left intentionally unchanged: 550c625 #FFB800 (gold star ratings),
     947f9e3 #FFFFFF (white surface), accent #F6F9FF (light page bg), and the
     light-blue border/surface hashes — they already fit Direction D. */
}


/* ============================================================================
   3. GLOBAL BASE
   ========================================================================== */
body{
  font-family: var(--ss-font-body);
  font-size: var(--ss-text-base);
  line-height: var(--ss-leading);
  color: var(--ss-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fix the vendor's broken `::root` typo: define the font vars it expected so
   any parent/child rule using var(--font-1/2) renders the intended families. */
:root{
  --font-1: var(--ss-font-head);
  --font-2: var(--ss-font-body);
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family: var(--ss-font-head);
  color: var(--ss-ink);
  font-weight: var(--ss-weight-head);
  letter-spacing: var(--ss-tracking-head);
  line-height: 1.15;
}
h1{ font-size: var(--ss-h1); }
h2{ font-size: var(--ss-h2); }
h3{ font-size: var(--ss-h3); }
h4{ font-size: var(--ss-h4); }
h5{ font-size: var(--ss-h5); }
h6{ font-size: var(--ss-h6); letter-spacing: .02em; }

p{ line-height: var(--ss-leading); }

/* Links: brand colour, no permanent underline (kills the dated underlined-link
   look in hero/body copy), clear hover. */
a{
  color: var(--ss-primary);
  text-decoration: none;
  transition: color var(--ss-dur) var(--ss-ease);
}
a:hover{ color: var(--ss-accent); }

/* Restore underline only for in-body prose links (accessibility) but not in
   hero / headings / buttons / nav. */
.elementor-widget-text-editor p a{ text-decoration: underline; text-underline-offset: 2px; }

::selection{ background: rgba(124,92,252,.20); }

/* Readable measure for long-form text blocks. Centring the *block* (margin auto)
   turns the wide centred "description" paragraphs (e.g. the bottom-of-page intros
   like "US Managed Servers") into a tidy column instead of a full-width blob.
   In normal narrower columns the max-width never triggers, so layouts are unaffected. */
.elementor-widget-text-editor .elementor-widget-container{
  max-width: var(--ss-measure);
  margin-inline: auto;
}

/* Consistent, slightly tighter focus ring for keyboard users. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--ss-accent);
  outline-offset: 2px;
}


/* ============================================================================
   4. BUTTONS — modern primary (gradient accent) + de-coral the old CTAs
   ========================================================================== */

/* Base Elementor button polish (front-end content buttons). */
.elementor-button,
.wpcf7 input[type="submit"]{
  font-family: var(--ss-font-head);
  font-weight: 700;
  border-radius: var(--ss-radius-sm);
  transition: transform var(--ss-dur) var(--ss-ease),
              box-shadow var(--ss-dur) var(--ss-ease),
              background var(--ss-dur) var(--ss-ease);
}
.elementor-button:hover,
.wpcf7 input[type="submit"]:hover{
  transform: translateY(-2px);
}

/* Replace the vendor coral gradient button (.zlp_red_btn) with our accent.
   Elementor/vendor set background-IMAGE (sometimes inline on the element), so we
   override the image AND use !important here — this is one of the documented
   spots where Elementor's inline styles genuinely require it. */
.zlp_red_btn.elementor-element .elementor-button,
.zlp_red_btn.elementor-element .elementor-button:hover,
.zlp_red_btn.elementor-element .elementor-button:focus,
.zlp_red_btn.elementor-element .elementor-button:active{
  background-image: var(--ss-grad-accent) !important;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--ss-shadow-accent);
}
.zlp_red_btn.elementor-element .elementor-button:hover{ filter: brightness(1.06); }

/* Theme pricing/hero coral primary button (.zlp_red_hero .primary-btn, the
   .hero-btns variant, and their ::before overlay) — kill the FF7E5D->FF0766
   coral. background shorthand + background-image both, with !important to beat
   the hardcoded vendor gradient and any Elementor inline background. */
.zlp_red_hero .primary-btn,
.hero-btns .primary-btn,
.primary-btn{
  background: var(--ss-grad-accent) !important;
  background-image: var(--ss-grad-accent) !important;
  box-shadow: var(--ss-shadow-accent);
  border: none;
}
.zlp_red_hero .primary-btn::before,
.hero-btns .primary-btn::before,
.primary-btn::before{
  background: var(--ss-grad-accent) !important;
}

/* ---- UNIFY all Elementor buttons to one accent ----
   The kit's DEFAULT .elementor-button is the OLD royal blue
   (linear-gradient(var(--a0721f7 #0082F8), var(--7e158c4 #1C40F2))), and a few
   buttons (View Plans / View Details) carry per-widget CORAL. Both are dated and
   inconsistent. One rule replaces every Elementor button background with our
   accent. body[kit] .elementor-button (0,2,1) beats the kit (0,2,0) and per-widget
   (0,2,0) rules; !important also covers any inline background.
   NOTE: secondary hero buttons use the theme's .outline-btn (NOT .elementor-button),
   so they keep their ghost style — only filled CTAs are recoloured. */
body[class*="elementor-kit-"] .elementor-button{
  background-color: transparent !important;
  background-image: var(--ss-grad-accent) !important;
  color: #fff !important;
  box-shadow: var(--ss-shadow-accent);
}
body[class*="elementor-kit-"] .elementor-button:hover,
body[class*="elementor-kit-"] .elementor-button:focus{
  background-image: var(--ss-grad-accent) !important;
  filter: brightness(1.07);
}

/* ---- HERO CTAs: make them POP on the dark backdrop ----
   On the navy hero a normal accent button blends in. Give hero CTAs a brighter
   violet->bright-azure gradient + a coloured glow so they stand out. Secondary
   .outline-btn stays a crisp white ghost for clear hierarchy. */
.zlp_page_header .elementor-button,
.zlp_page_header .template-btn.primary-btn,
.zlp_page_header .primary-btn,
.hostim-hero .elementor-button,
.hostim-hero .template-btn.primary-btn,
.hostim-hero .primary-btn{
  background-image: linear-gradient(100deg, #7C5CFC 0%, #2E9BFF 100%) !important;
  box-shadow: 0 12px 34px rgba(124,92,252,.55), 0 4px 16px rgba(46,155,255,.40) !important;
  color: #fff !important;
}
.zlp_page_header .elementor-button:hover,
.zlp_page_header .primary-btn:hover,
.hostim-hero .elementor-button:hover,
.hostim-hero .primary-btn:hover{
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.zlp_page_header .template-btn.outline-btn,
.hostim-hero .template-btn.outline-btn{
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.zlp_page_header .template-btn.outline-btn:hover,
.hostim-hero .template-btn.outline-btn:hover{
  background: rgba(255,255,255,.12);
  border-color: #fff;
}


/* ============================================================================
   5. HERO BAND  (the shared product/page hero)
   ----------------------------------------------------------------------------
   Targets the theme's page-header container. Calms the saturated royal-blue
   gradient into the deep "Direction D" backdrop, lifts heading treatment,
   removes underlined hero links, and adds a subtle AI glow.

   NOTE: the orange-highlight word in headings is applied per-element inside
   Elementor (an inline colour on a <span>). It cannot be reliably retargeted
   from CSS alone. RECOMMENDED on staging: either (a) wrap the highlight word in
   a class we provide, or (b) clear the inline colour in Elementor so the rule
   below paints it with the AI gradient. The .ss-hl helper is ready for (a).
   ========================================================================== */

.zlp_page_header{
  position: relative;
  background: var(--ss-grad-hero); /* fallback if no Elementor inline bg */
  color: #fff;
  isolation: isolate;
}
/* The hero's royal-blue background is an Elementor INLINE style on the section,
   which we can't reliably remove from CSS. Instead of fighting it, we lay a
   ::before that (1) darkens whatever is behind it toward the Direction-D navy,
   then (2) adds the soft glows + faint grid on top. This modernises the hero
   regardless of the inline background — no !important needed. All CSS, no extra
   requests. (NOTE: applies to every .zlp_page_header; if any non-product page
   header should stay light, we'll scope this by an extra class.) */
.zlp_page_header::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* glows (top) */
    radial-gradient(60% 60% at 80% 0%, rgba(46,123,255,.50), transparent 70%),
    radial-gradient(55% 55% at 12% 100%, rgba(124,92,252,.42), transparent 70%),
    /* faint grid (middle) */
    linear-gradient(transparent 0 95%, rgba(93,123,255,.10) 95%) 0 0 / 100% 38px,
    linear-gradient(90deg, transparent 0 95%, rgba(93,123,255,.10) 95%) 0 0 / 38px 100%,
    /* darkening wash toward navy (bottom) — converts the royal-blue inline bg */
    linear-gradient(150deg, rgba(8,18,51,.82) 0%, rgba(12,32,80,.80) 52%, rgba(23,21,69,.86) 100%);
}
.zlp_page_header > .e-con-inner{
  position: relative;
  z-index: 1;
  /* Only add enough TOP padding to clear the transparent sticky header. We do NOT
     impose flex centring / min-height / max-width here any more — that fought each
     hero's own Elementor layout and made sub-headers look cramped/misaligned.
     Elementor handles per-page alignment; we just clear the header. */
  padding-top: clamp(120px, 7vw, 150px);
}

/* ---- Homepage hero (.hero-area.hostim-hero) ----
   Different template from the product page-header. Calm the bright
   .bg-primary-gradient royal blue to the Direction-D navy + glows, in a single
   background declaration so it doesn't conflict with the hero's decorative
   pseudo-elements. The isometric illustration + shapes sit on top unchanged. */
.hero-area.bg-primary-gradient,
.hostim-hero.hero-area{
  background:
    radial-gradient(50% 60% at 86% 4%, rgba(46,123,255,.42), transparent 70%),
    radial-gradient(46% 56% at 4% 96%, rgba(124,92,252,.32), transparent 70%),
    var(--ss-grad-hero);
}
/* Keep hero copy legible on the darker backdrop. */
.hostim-hero .hero1-content-wrap h1,
.hostim-hero .hero1-content-wrap .hero_title{ color: #fff; }
.hostim-hero .hero1-content-wrap p,
.hostim-hero .hero1-content-wrap .lead{ color: rgba(226,232,245,.88); }

/* ---- Blog / archive / single-post page-title banner (.breadcrumb-area) ----
   The non-Elementor theme header used on the blog index, category/archive
   pages and individual posts. It ships a bright royal-blue gradient
   (#001DAC→#000F57) that clashes with the Direction-D navy used everywhere
   else. Re-skin it to the same navy hero treatment + soft glows so the blog
   matches the main site. Title + breadcrumb text already render white. */
.breadcrumb-area.bg-primary-gradient{
  background:
    radial-gradient(50% 60% at 86% 4%, rgba(46,123,255,.42), transparent 70%),
    radial-gradient(46% 56% at 4% 96%, rgba(124,92,252,.32), transparent 70%),
    var(--ss-grad-hero) !important;
}
/* Keep the banner heading + breadcrumb trail legible on the dark backdrop. */
.breadcrumb-area .breadcrumb-title,
.breadcrumb-area h1,
.breadcrumb-area h2{ color: #fff; }
.breadcrumb-area .breadcrumb-list,
.breadcrumb-area .breadcrumb-list *,
.breadcrumb-area nav,
.breadcrumb-area nav *{ color: rgba(220,228,246,.9); }
.breadcrumb-area .breadcrumb-list a,
.breadcrumb-area nav a{ color: #9fe6ff; text-decoration: none; }
.breadcrumb-area .breadcrumb-list a:hover,
.breadcrumb-area nav a:hover{ color: #fff; }

/* Hero headings + copy on the dark backdrop. */
.zlp_page_header h1,
.zlp_page_header h2,
.zlp_page_header .elementor-heading-title{
  color: #fff;
  letter-spacing: -0.025em;
}
.zlp_page_header p,
.zlp_page_header .elementor-widget-text-editor{
  color: rgba(220,228,246,.88);
}
/* Kill underlined inline links in hero copy (early-2010s look). Broadened to
   any hero link that isn't a button. */
.zlp_page_header a:not(.elementor-button):not(.primary-btn){
  color: #9fe6ff;
  text-decoration: none !important;
  border-bottom: none;       /* drop the dated permanent underline */
  font-weight: 600;          /* keep the link affordance via weight + colour */
}
.zlp_page_header a:not(.elementor-button):not(.primary-btn):hover{
  color: #fff;
  text-decoration: underline !important;   /* underline on hover only */
  text-underline-offset: 3px;
}

/* ---- Highlight word ----
   Across the WHOLE site the highlighted word is wrapped in <mark> (confirmed on
   live: "Expert <mark>Cloud Hosting</mark>", "<mark>Fast</mark> Windows VPS",
   "<mark>Windows, Linux</mark>"). The theme renders it dated orange. We repaint
   it with the Direction-D AI gradient in headings, and a clean solid accent for
   any <mark> used in body copy. Targeting <mark> fixes every hero in one rule. */
h1 mark, h2 mark, h3 mark,
.hero_title mark,
.elementor-heading-title mark,
.ss-hl{
  background: var(--ss-grad-ai);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
mark{
  background-color: transparent;
  color: var(--ss-accent);
}


/* ============================================================================
   6. SURFACES — baseline card/box modernisation (lighter, softer)
      (Full feature-card + pricing restyle comes in the next iteration; this is
       just the global box baseline so nothing looks half-done after step 1.)
   ========================================================================== */
.zlp_box{
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-border);
}
.zlp_box.zlp_shadow_box{
  box-shadow: var(--ss-shadow-1);
  transition: transform var(--ss-dur) var(--ss-ease),
              box-shadow var(--ss-dur) var(--ss-ease);
}
.zlp_box.zlp_shadow_box:hover{
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-2);
}


/* ============================================================================
   7. NAVIGATION  (.header-section / .header_box / .nav-wrapper)
   ========================================================================== */
.header-section .header_box{
  transition: box-shadow var(--ss-dur) var(--ss-ease),
              background var(--ss-dur) var(--ss-ease);
  border-radius: var(--ss-radius);
}
/* Top utility bar (Sales/Support) was painted by the old royal-blue header-gradient
   (linear-gradient(#011788,#00126B)). Recolour to the dark navy so it matches the
   hero + footer instead of clashing. Scoped to :not(.sticky-header) so the white
   sticky nav is untouched on scroll. */
.header-section.header-gradient:not(.sticky-header){
  background-image: linear-gradient(269deg, #0E1638 0%, #070A1C 100%) !important;
}
/* Soft modern shadow once the header sticks. */
.header-section.sticky-header .header_box,
.header-section.is-sticky .header_box{
  box-shadow: 0 8px 30px rgba(14,20,38,.10);
}
/* Menu items: tidy weight + smooth hover/active (colour comes from the
   re-pointed --e-global-color-primary). */
.nav-wrapper ul li > a{
  font-family: var(--ss-font-head);
  font-weight: 600;
  transition: color var(--ss-dur) var(--ss-ease);
}
/* Keep the top contact bar readable (it's on a dark band; guard against the
   global text-colour darkening). */
.topbar, .topbar a, .topbar span{ color: rgba(255,255,255,.92); }
.topbar a:hover{ color: #fff; }


/* ============================================================================
   8. FEATURE CARDS  (Elementor image-box in a .zlp_box card)
   ----------------------------------------------------------------------------
   The icon SVGs bake a rounded badge on the LEFT and decorative "sparkle" dots
   on the RIGHT of a landscape (133x80) canvas. We frame the icon in a square and
   object-fit:cover, which crops the outer sparkles and empty margin, leaving the
   clean centred badge — the modern icon container the brief asked for, with no
   per-icon edits. (Overrides the vendor's width:auto !important.)
   ========================================================================== */
.zlp_top_image_box .elementor-image-box-img{
  width: 88px !important;
  height: 88px;
  margin: 0 auto 20px !important;
  border-radius: var(--ss-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-primary-light);
}
.zlp_top_image_box .elementor-image-box-img img{
  width: 100% !important;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transition: transform var(--ss-dur) var(--ss-ease);
}
/* Card: equal-height feel, consistent padding, tidy hover lift + accent top-line.
   (.zlp_box / .zlp_shadow_box base shadow/border already set in section 6.) */
.zlp_box.zlp_shadow_box{
  height: 100%;
  position: relative;
  overflow: hidden;
}
.zlp_box.zlp_shadow_box::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ss-grad-ai);
  opacity: 0;
  transition: opacity var(--ss-dur) var(--ss-ease);
}
.zlp_box.zlp_shadow_box:hover::before{ opacity: 1; }
.zlp_box.zlp_shadow_box:hover .elementor-image-box-img img{ transform: scale(1.05); }
.elementor-image-box-title{
  font-family: var(--ss-font-head);
  color: var(--ss-ink);
  font-weight: 700;
  letter-spacing: .01em;
}
.elementor-image-box-description{
  color: var(--ss-muted);
  line-height: var(--ss-leading);
}


/* ============================================================================
   9. PRICING  (.pricing-column / .zlp_quota_featured / .feature-list)
   ========================================================================== */
.pricing-column{
  border-radius: var(--ss-radius-lg);
  border: 1px solid var(--ss-border);
  box-shadow: var(--ss-shadow-1);
  transition: transform var(--ss-dur) var(--ss-ease),
              box-shadow var(--ss-dur) var(--ss-ease);
}
.pricing-column:hover{
  transform: translateY(-4px);
  box-shadow: var(--ss-shadow-2);
}
.plan_title{
  font-family: var(--ss-font-head);
  color: var(--ss-muted);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.monthly-price, .yearly-price, .price_title{
  font-family: var(--ss-font-head);
  color: var(--ss-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.monthly-price span, .yearly-price span, .price_title span{
  color: var(--ss-muted);
  font-weight: 600;
}
.pricing-label{ color: var(--ss-muted); }
.feature-list li{ color: var(--ss-body); }
.feature-list li i.fa-check,
.feature-list li i.fa-solid{ color: var(--ss-primary); }

/* Highlighted "popular" plan — the featured wrapper gets a gradient border +
   elevation + a small lift so it clearly stands out. (.pricing-column is
   overflow-hidden, so we use a border treatment, not an overhanging ribbon.) */
.zlp_quota_featured .pricing-column{
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              var(--ss-grad-accent) border-box;
  box-shadow: var(--ss-shadow-2);
  transform: translateY(-6px);
}
.zlp_quota_featured .pricing-column:hover{
  transform: translateY(-10px);
}


/* ============================================================================
   10. FAQ ACCORDION  (.hm2-accordion)
   ========================================================================== */
.hm2-accordion{ border-radius: var(--ss-radius-lg); }
.hm2-accordion .accordion-item{
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--ss-dur) var(--ss-ease),
              box-shadow var(--ss-dur) var(--ss-ease);
}
.hm2-accordion .accordion-item:hover{
  border-color: var(--ss-border-strong);
}
.hm2-accordion .accordion-header a,
.hm2-accordion .accordion-header button{
  font-family: var(--ss-font-head);
  font-weight: 600;
  color: var(--ss-ink);
}
/* Open item: subtle tinted header so the active question reads clearly. */
.hm2-accordion .accordion-item .accordion-header a:not(.collapsed),
.hm2-accordion .accordion-item.active .accordion-header a{
  color: var(--ss-primary);
}


/* ============================================================================
   11. TESTIMONIALS  (.zlp_testimonal — vendor block)
   ========================================================================== */
.zlp_testimonal{
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-1);
  transition: transform var(--ss-dur) var(--ss-ease),
              box-shadow var(--ss-dur) var(--ss-ease);
}
.zlp_testimonal:hover{
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-2);
}
/* On a DARK band the testimonial cards (.h4-feedback-single / .zlp_testimonal) are
   white with vendor-forced white text = invisible. Make them dark so the white
   text reads; names in cyan, stars stay gold. */
.zlp_cont_dark .h4-feedback-single,
.zlp_dark_section .h4-feedback-single,
.zlp_cont_dark .zlp_testimonal,
.zlp_dark_section .zlp_testimonal{
  background: linear-gradient(160deg, #1C2649, #141A37) !important;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.zlp_cont_dark .h4-feedback-single :where(p,span,strong),
.zlp_dark_section .h4-feedback-single :where(p,span,strong){ color: rgba(232,238,250,.9) !important; }
.zlp_cont_dark .h4-feedback-single h5,
.zlp_cont_dark .h4-feedback-single h6,
.zlp_cont_dark .h4-feedback-single .h4-clients-name,
.zlp_dark_section .h4-feedback-single h5,
.zlp_dark_section .h4-feedback-single h6{ color: #9fd9ff !important; }


/* ============================================================================
   12. FOOTER  (.hostim-footer)
   ----------------------------------------------------------------------------
   The footer is a dark band; explicitly keep its text/links light so the global
   text-colour darkening (section 2) can't make it dark-on-dark.
   ========================================================================== */
/* Footer background was the old royal navy (#000F57) set on an inner
   .elementor-top-section. Give it a RICHER, deeper gradient than the flat middle
   dark bands (so a dark section directly above it doesn't merge into one blob)
   plus a hairline top divider — it now bookends the hero/header. */
.hostim-footer .elementor-top-section{
  background-color: #070A1C !important;
  background-image: linear-gradient(180deg, #10193E 0%, #0A0F2A 55%, #06091C 100%) !important;
  border-top: 1px solid rgba(120,160,255,.20);
}
.hostim-footer{ color: rgba(226,232,245,.78); }
.hostim-footer h1, .hostim-footer h2, .hostim-footer h3,
.hostim-footer h4, .hostim-footer h5, .hostim-footer h6,
.hostim-footer .elementor-heading-title{
  color: #fff;
  font-family: var(--ss-font-head);
}
.hostim-footer a{ color: rgba(226,232,245,.78); transition: color var(--ss-dur) var(--ss-ease); }
.hostim-footer a:hover{ color: #fff; }


/* ============================================================================
   13. FORMS  (Contact Form 7 — light polish on top of vendor base)
   ========================================================================== */
.wpcf7 input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 select,
.wpcf7 textarea,
.cta_form .wpcf7 .elementor-field-textual{
  border: 1.5px solid var(--ss-border-strong);
  border-radius: var(--ss-radius-sm);
  transition: border-color var(--ss-dur) var(--ss-ease),
              box-shadow var(--ss-dur) var(--ss-ease);
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus{
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 3px rgba(30,99,233,.14);
  outline: none;
}
.wpcf7 input[type="submit"]{
  background: var(--ss-grad-accent);
  border-radius: var(--ss-radius-sm);
}


/* ============================================================================
   14. RESPONSIVE PASS
   ========================================================================== */
@media (max-width: 1024px){
  .zlp_page_header > .e-con-inner{
    padding-top: clamp(120px, 16vw, 150px);
    min-height: 400px;
  }
}
@media (max-width: 767px){
  :root{ --ss-text-base: 1rem; }
  .zlp_page_header > .e-con-inner{
    padding-top: 120px;
    padding-bottom: 56px;
    min-height: 0;
  }
  /* Tidy stacked cards / spacing on mobile. */
  .zlp_box,
  .pricing-column{ padding: 22px; }
  .zlp_quota_featured .pricing-column{ transform: none; } /* don't offset when stacked */
  .zlp_top_image_box .elementor-image-box-img{ width: 76px !important; height: 76px; }
}


/* ============================================================================
   15. PREMIUM LAYER — alternating dark/light, glass + elevated, depth
   ----------------------------------------------------------------------------
   The agreed direction: rich premium look with DARK and LIGHT bands alternating.
   - LIGHT sections: elevated cards, gradient hover-border, coloured shadow.
   - DARK sections (theme's .zlp_dark_section / .zlp_cont_dark toggle): a rich
     mesh background + glassmorphic cards. The marketing team controls which bands
     are dark via the existing Elementor "dark section" switch, which is how we
     get the alternation. Wherever a band is dark, it auto-renders premium-glass.
   ========================================================================== */

/* ---- Rich dark sections (mesh + glow instead of flat dark) ----
   Target ALL .zlp_cont_dark / .zlp_dark_section (NOT only those with .zlp_cont_bg
   — a dark section without the bg-gap class, e.g. testimonials, still needs a dark
   background or it renders white-text-on-light). Glow toned down so it doesn't
   bleed brightly through cards. */
.zlp_dark_section,
.zlp_cont_dark{
  position: relative;
  /* !important is required: the "Dark Section" toggle only flips TEXT to white;
     the section often still has its own Elementor background (e.g. the pricing
     band sets background-color:#E6F2FE) whose per-element selector (0,2,0) beats
     a plain class. Force the dark backdrop so dark text/cards aren't left on a
     pale band. */
  background-color: #0A0F28 !important;
  background-image:
    radial-gradient(42% 52% at 86% -12%, rgba(46,139,255,.16), transparent 62%),
    radial-gradient(42% 52% at 4% 112%, rgba(139,92,246,.15), transparent 62%) !important;
}
/* dark sections that lack the bg-gap class need some breathing room */
.zlp_cont_dark:not(.zlp_cont_bg){ padding-block: clamp(48px, 5vw, 80px); }

/* ---- Feature cards: LIGHT premium (default) ---- */
.zlp_box.zlp_shadow_box{
  background: #fff;
  border: 1px solid rgba(120,140,190,.16);
  border-radius: var(--ss-radius-lg);
  box-shadow: 0 10px 34px rgba(20,40,120,.07);
}
/* upgrade the hover accent from a top-line to a full gradient border */
.zlp_box.zlp_shadow_box::before{
  content: "";
  position: absolute; inset: 0; height: auto;
  border-radius: var(--ss-radius-lg);
  padding: 1.5px;
  background: linear-gradient(140deg, #38E0FF, #8B5CF6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--ss-dur) var(--ss-ease);
}
.zlp_box.zlp_shadow_box:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(46,107,255,.16);
}

/* ---- Feature cards: DARK glass (inside a dark section) ---- */
.zlp_cont_dark .zlp_box.zlp_shadow_box,
.zlp_dark_section .zlp_box.zlp_shadow_box{
  background: linear-gradient(160deg, #1C2649, #141A37);   /* SOLID — no glow bleed */
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 50px rgba(0,0,0,.40);
}
.zlp_cont_dark .zlp_box.zlp_shadow_box:hover,
.zlp_dark_section .zlp_box.zlp_shadow_box:hover{
  border-color: rgba(120,180,255,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 30px 70px rgba(46,139,255,.25);
}
/* Feature-card text on dark: the title is ink (section 8) → invisible on a dark
   card; the description is muted → too dim. Force them light. */
.zlp_cont_dark .elementor-image-box-title,
.zlp_dark_section .elementor-image-box-title{ color: #fff !important; }
.zlp_cont_dark .elementor-image-box-description,
.zlp_dark_section .elementor-image-box-description{ color: rgba(226,232,245,.75) !important; }

/* ---- Icon tiles: gradient + glow (light) / luminous glass (dark) ---- */
.zlp_top_image_box .elementor-image-box-img{
  background: linear-gradient(140deg, #E4F4FF, #EFE7FF) !important;
  border: 1px solid rgba(139,92,246,.15);
  box-shadow: 0 8px 22px rgba(56,160,255,.18);
}
.zlp_cont_dark .zlp_top_image_box .elementor-image-box-img,
.zlp_dark_section .zlp_top_image_box .elementor-image-box-img{
  background: linear-gradient(140deg, rgba(56,224,255,.22), rgba(139,92,246,.22)) !important;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 6px 20px rgba(56,224,255,.20);
}

/* ---- Pricing: premium elevated (light) ---- */
.pricing-column{
  border-radius: var(--ss-radius-lg);
  box-shadow: 0 10px 40px rgba(20,40,120,.08);
}
.pricing-column:hover{
  box-shadow: 0 24px 60px rgba(46,107,255,.16);
}
/* DARK glass pricing (inside a dark section) */
.zlp_cont_dark .pricing-column,
.zlp_dark_section .pricing-column{
  background: linear-gradient(160deg, #1C2649, #141A37) !important;   /* SOLID — no glow bleed */
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}
.zlp_cont_dark .pricing-column .plan_title,
.zlp_dark_section .pricing-column .plan_title{ color: #9fd9ff; }
.zlp_cont_dark .pricing-column .monthly-price,
.zlp_cont_dark .pricing-column .price_title,
.zlp_dark_section .pricing-column .price_title{ color: #fff; }
/* feature list + labels readable on the dark cards */
.zlp_cont_dark .pricing-column .feature-list li,
.zlp_cont_dark .pricing-column .feature-list span,
.zlp_cont_dark .pricing-column .pricing-label,
.zlp_dark_section .pricing-column .feature-list li,
.zlp_dark_section .pricing-column .feature-list span,
.zlp_dark_section .pricing-column .pricing-label{ color: rgba(226,232,245,.85); }
/* Catch-all: many in-card labels are UNCLASSED <span>s at near-black (Bootstrap
   default) — force all card text light on dark, then re-assert the accents. */
.zlp_cont_dark .pricing-column :where(span,h3,h4,h5,h6,p,li,strong,a:not(.elementor-button)),
.zlp_dark_section .pricing-column :where(span,h3,h4,h5,h6,p,li,strong,a:not(.elementor-button)){
  color: rgba(232,238,250,.86) !important;
}
.zlp_cont_dark .pricing-column .monthly-price,
.zlp_cont_dark .pricing-column .price_title,
.zlp_cont_dark .pricing-column .yearly-price,
.zlp_dark_section .pricing-column .monthly-price,
.zlp_dark_section .pricing-column .price_title{ color: #fff !important; }
.zlp_cont_dark .pricing-column .plan_title,
.zlp_dark_section .pricing-column .plan_title{ color: #9fd9ff !important; }
/* pricing location tabs + monthly/yearly toggle stay visible on dark */
.zlp_cont_dark .sh-pricing .tab-switch-btn,
.zlp_cont_dark .sh-pricing .nav-link,
.zlp_cont_dark .sh-pricing .tab-title,
.zlp_cont_dark .monthly,
.zlp_cont_dark .yearly{ color: rgba(232,238,250,.86) !important; }
/* Location pills are nested-tabs styled solid white by the vendor — on a dark
   band that's a jarring white bar. Make the bar + inactive pills translucent
   glass; the active pill keeps its gradient. */
.zlp_cont_dark .zlp_nested_tab .e-n-tabs-heading{
  background-color: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12);
}
.zlp_cont_dark .zlp_nested_tab .e-n-tab-title{
  background-color: rgba(255,255,255,.06) !important;
  color: rgba(226,232,245,.9) !important;
}
.zlp_cont_dark .zlp_nested_tab .e-n-tab-title[aria-selected="true"]{
  color: #fff !important;  /* keeps the vendor's gradient background */
}

/* ---- Featured plan: glowing gradient border (works light or dark) ---- */
.zlp_quota_featured .pricing-column{
  border: 2px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(120deg, #22D3EE, #8B5CF6) border-box;
  box-shadow: 0 0 0 1px rgba(120,200,255,.25), 0 30px 70px rgba(46,107,255,.28);
  transform: translateY(-8px);
}
.zlp_cont_dark .zlp_quota_featured .pricing-column,
.zlp_dark_section .zlp_quota_featured .pricing-column{
  /* SOLID fill (slightly lighter than siblings) so the gradient stays a BORDER,
     not a bright fill bleeding through. */
  background: linear-gradient(160deg, #243168, #181F45) padding-box,
              linear-gradient(120deg, #38E0FF, #8B5CF6) border-box !important;
  box-shadow: 0 30px 70px rgba(46,107,255,.40);
}


/* ============================================================================
   16. FEATURE / SERVICE ICON CONTAINER
   ----------------------------------------------------------------------------
   The modern icons (assets/svg/icons-all/) are dropped in at the MEDIA level
   (same filenames overwrite the originals) — no CSS swaps needed; single-load.
   This just frames each image-box icon as a clean square tile.
   ========================================================================== */
.zlp_top_image_box .elementor-image-box-img{
  width: 84px !important; height: 84px; margin: 0 auto 18px !important;
  border-radius: 20px; overflow: hidden; background: transparent !important;
  border: none; box-shadow: 0 10px 24px rgba(20,40,120,.10);
  display: flex; align-items: center; justify-content: center;
}
.zlp_top_image_box .elementor-image-box-img img{ width:100% !important; height:100%; object-fit: cover; }


/* ============================================================================
   17. HOMEPAGE HERO ILLUSTRATION (modern Canva cloud-infra render)
   ----------------------------------------------------------------------------
   The hero illustration is now EMBEDDED in Elementor as hero-cloud.webp (a
   transparent cutout). The old content:url swap + mask are no longer needed; we
   only size it up a touch for presence.
   ========================================================================== */
.hostim-hero img[src*="hero-cloud"],
.hero-area img[src*="hero-cloud"]{
  transform: scale(1.12);
  transform-origin: center right;
}
/* Other pages (e.g. the cost-optimization landing) reuse the ORIGINAL hero image
   filename and weren't embedded — swap them via content:url (inert on the homepage
   where the embedded src is hero-cloud.webp). */
img[src*="home-header-image"]{
  content: url("/wp-content/themes/softsys-child/assets/img/hero-cloud.webp") !important;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(135% 135% at 50% 50%, #000 78%, transparent 100%);
          mask-image: radial-gradient(135% 135% at 50% 50%, #000 78%, transparent 100%);
}


/* ============================================================================
   18. MOTION — scroll-reveal + subtle hero glow (CSS-only, progressive)
   ----------------------------------------------------------------------------
   Cards/headings/illustrations fade + rise as they enter the viewport, using
   CSS scroll-driven animations (animation-timeline: view()). Guarded by
   @supports + prefers-reduced-motion so unsupported browsers / reduced-motion
   users simply see static content (no hidden elements, no JS).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .zlp_box.zlp_shadow_box,
    .pricing-column,
    .zlp_testimonal,
    .h4-feedback-single,
    .elementor-widget-image-box,
    .elementor-widget-image,        /* homepage section illustrations are plain image widgets */
    .hm2-accordion .accordion-item,
    .elementor-widget-heading,
    .elementor-widget-text-editor{
      animation: ss-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
    @keyframes ss-rise{
      from{ opacity: 0; transform: translateY(26px); }
      to  { opacity: 1; transform: none; }
    }
    /* gentle stagger so a row of cards doesn't pop in unison */
    .zlp_box.zlp_shadow_box:nth-child(2),
    .pricing-column:nth-child(2){ animation-range: entry 4% entry 42%; }
    .zlp_box.zlp_shadow_box:nth-child(3),
    .pricing-column:nth-child(3){ animation-range: entry 8% entry 46%; }
  }
  /* slow breathing glow on the hero backdrop */
  .zlp_page_header::before{ animation: ss-breathe 9s ease-in-out infinite alternate; }
  @keyframes ss-breathe{ from{ opacity: .82; } to{ opacity: 1; } }
}


/* ============================================================================
   19. BUTTON UNIFY — make every primary CTA visually identical
   ----------------------------------------------------------------------------
   Different button systems (Elementor .elementor-button, theme .primary-btn,
   CF7 submit) had slightly different radius/size. Force one shape + the accent
   gradient so all CTAs match. (!important beats the kit's 5px radius rule.)
   Secondary/ghost (.outline-btn) and small toggles (.expand-btn, tab titles)
   are intentionally left out.
   ========================================================================== */
.elementor-button:not(.expand-btn),
.template-btn.primary-btn,
.template-btn.secondary-btn,
.pricing_btn__,
.tablepress a.button,
.wpcf7 input[type="submit"]{
  background-image: var(--ss-grad-accent) !important;
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 15px 30px !important;
  font-family: var(--ss-font-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: var(--ss-shadow-accent);
  transition: transform var(--ss-dur) var(--ss-ease), filter var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease) !important;
}
/* comparison-table CTAs are small — keep tighter padding/size */
.tablepress a.button{ padding: 9px 16px !important; font-size: 14px !important; }
.tablepress a.button::before{ background: var(--ss-grad-accent) !important; }
.elementor-button:not(.expand-btn):hover,
.template-btn.primary-btn:hover,
.template-btn.secondary-btn:hover,
.pricing_btn__:hover,
.tablepress a.button:hover,
.wpcf7 input[type="submit"]:hover{ transform: translateY(-2px); filter: brightness(1.06); }
/* hero CTAs keep their brighter glow but the SAME shape/size as everything else */
.zlp_page_header .elementor-button,
.zlp_page_header .template-btn.primary-btn,
.hostim-hero .elementor-button,
.hostim-hero .template-btn.primary-btn{
  border-radius: 10px !important;
  padding: 15px 30px !important;
}


/* ============================================================================
   20. HOMEPAGE PEOPLE-ILLUSTRATION REPLACEMENTS (cohesive Concept-3 set)
   ----------------------------------------------------------------------------
   Kept GLOBAL: these images are reused on more than one page (homepage AND the
   cost-optimization landing). On the homepage they're embedded (src changed →
   these rules are inert, no double-load). On any other page still referencing the
   original filename, the swap shows the new illustration. To make those other
   pages single-load too, embed them there (or replace the source media files).
   ========================================================================== */
img[src*="Our-People-Differentiate"]{ content: url("/wp-content/themes/softsys-child/assets/img/ill-our-people.webp") !important; object-fit: contain; }
img[src*="you-need-not-manage-your-hardware"]{ content: url("/wp-content/themes/softsys-child/assets/img/ill-hardware.webp") !important; object-fit: contain; }
img[src*="Cloud-IT-Security-Is-Guaranteed"]{ content: url("/wp-content/themes/softsys-child/assets/img/ill-security.webp") !important; object-fit: contain; }
img[src*="Your-Cloud-Hosting-Services-Are-Monitored"]{ content: url("/wp-content/themes/softsys-child/assets/img/ill-monitoring.webp") !important; object-fit: contain; }
img[src*="your-business-will-stay-compliant"]{ content: url("/wp-content/themes/softsys-child/assets/img/ill-compliance.webp") !important; object-fit: contain; }
img[src*="You-Get-The-Flexibility-Since-Day-1"]{ content: url("/wp-content/themes/softsys-child/assets/img/ill-flexibility.webp") !important; object-fit: contain; }
img[src*="You-Get-Support-From-Customer-Loving-Team"]{ content: url("/wp-content/themes/softsys-child/assets/img/ill-support.webp") !important; object-fit: contain; }
img[src*="incremental-business-with-superior"]{ content: url("/wp-content/themes/softsys-child/assets/img/ill-growth.webp") !important; object-fit: contain; }
img[src*="Managed-Cloud-Hosting-Solutions"]{ content: url("/wp-content/themes/softsys-child/assets/img/ill-managed-cloud.webp") !important; object-fit: contain; }