/* ==========================================================================
   Cloud Propeller — Marketing Site CSS
   Loads AFTER bootstrap.min.css. Cherry-picks the design tokens and nav
   treatments from cp-twenty-one/custom.css that the marketing site needs,
   then layers on hero / services / footer styles written for this site.
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------ */
:root {
    --cp-pink:       #de3580;
    --cp-pink-dark:  #c02870;
    --cp-pink-light: #ff5aa0;

    --cp-bg:         #ffffff;
    --cp-bg-alt:     #f6f8fb;
    --cp-bg-footer:  #0f1826;

    --cp-text:         #2c3e50;
    --cp-text-heading: #0f1826;
    --cp-text-muted:   #5a6b82;

    --cp-border:         rgba(26, 34, 51, 0.08);
    --cp-border-strong:  rgba(26, 34, 51, 0.16);

    --cp-gradient-default: linear-gradient(135deg, #1a3050 0%, #4d1230 18%, #de3580 38%, #bf6bb4 58%, #7a9dbe 78%, #2d4a6b 100%);
    --cp-gradient-mcc:     linear-gradient(135deg, #1a3050 0%, #4d1230 45%, #de3580 100%);
    --cp-gradient-gpc:     linear-gradient(135deg, #a0558a 0%, #5a7a9a 60%, #1d3a5b 100%);

    --cp-shadow-card:        0 4px 20px rgba(222, 53, 128, 0.10);
    --cp-shadow-card-hover:  0 12px 36px rgba(222, 53, 128, 0.18);

    --cp-r-sm: 8px;
    --cp-r:    12px;
    --cp-r-lg: 20px;

    --font-heading: 'Exo 2', 'Segoe UI', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-tech:    'Share Tech', 'Exo 2', monospace;
}

/* 2. Body + typography (Bootstrap overrides) ---------------------------- */
body {
    font-family: var(--font-body);
    color: var(--cp-text);
    background: var(--cp-bg);
    line-height: 1.6;
    /* Body content keeps `antialiased` — main sections (hero, services,
       testimonials, final-cta) stay clean and thin like modern hero
       pages. The header chrome (nav, breadcrumb) and footer override
       this below to use subpixel rendering for extra weight — they
       match the WHMCS chrome that way. */
    -webkit-font-smoothing: antialiased;
}
/* Chrome override — heavier text in header + breadcrumb + footer */
header.header,
.master-breadcrumb,
footer.cp-footer {
    -webkit-font-smoothing: subpixel-antialiased;
}
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--cp-text-heading);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 0;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); }
h2 { font-size: clamp(1.85rem, 3.2vw, 2.75rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.05rem; }

a { color: var(--cp-pink); }
a:hover, a:focus { color: var(--cp-pink-dark); text-decoration: none; }

/* 3. Layout helpers ----------------------------------------------------- */
.section { padding: 96px 0; position: relative; }
@media (max-width: 768px) { .section { padding: 64px 0; } }

/* Wider container at xl to match the visual width of my.cloudpropeller.com.
   Bootstrap's default is 1140 at ≥1200; measurement of WHMCS shows content
   spanning ~1208 CSS px at the same viewport. Bumping to 1220 restores the
   breathing room so both sites feel like siblings rather than the marketing
   site being cramped. */
@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1220px;
    }
}

/* 4. Background watermark logo ----------------------------------------- */
.bg-logo-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(70vmin, 720px);
    height: min(70vmin, 720px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
    background: url('../img/logos/cp-logo.svg') center / contain no-repeat;
}
.site-wrap { position: relative; z-index: 1; }

/* ==========================================================================
   5. Header + primary navbar (cp-twenty-one overrides)
   ========================================================================== */
header.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    /* Glass effect — semi-transparent white with backdrop blur. On light
       backgrounds this reads as a soft frosted pane, reminiscent of the
       below0day aesthetic adapted to a light theme. */
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.2s ease, box-shadow 0.25s ease,
                border-color 0.2s ease;
}
header.header .navbar {
    /* Reduced from 12/12 so the logo can grow into this budget without
       making the total header taller. Total height = navbar padding +
       logo box = 8+8 + 88 = 104px, same as the old 12+12 + 80. */
    padding-top: 8px;
    padding-bottom: 8px;
    transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo — explicit height + width:auto so the PNG (or sizeless SVG, if we
   ever swap back) has a concrete dimension to scale from. Internal padding
   removed so the full 88px box is visible content (was 74 of 80). */
header.header .logo-img {
    height: 88px;
    width: auto;
    max-height: 88px;
    max-width: 500px;
    padding: 0;
    box-sizing: border-box;
    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state — triggered by site.js when window.scrollY > 8.
   Header becomes more opaque (so content scrolling past it is less
   visible), gains a soft shadow, compresses navbar padding, and shrinks
   the logo. All smoothly transitioned via the properties above. */
header.header.scrolled {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 16px rgba(26, 34, 51, 0.08);
}
header.header.scrolled .navbar {
    padding-top: 4px;
    padding-bottom: 4px;
}
header.header.scrolled .logo-img {
    height: 52px;
    max-height: 52px;
    padding: 2px 0;
}

/* Desktop nav: Exo 2 font, underline-draw hover, pink active */
@media (min-width: 1200px) {
    .navbar-light #nav {
        align-items: center;
    }
    .navbar-light #nav > li > a {
        padding: 8px 14px !important;
        font-family: var(--font-heading);
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0.3px;
        color: var(--cp-text);
        position: relative;
        transition: color 0.3s ease;
        text-decoration: none;
    }
    .navbar-light #nav > li > a:hover {
        color: var(--cp-pink);
        text-decoration: none;
    }

    /* Underline draw-in — plain links use ::after */
    .navbar-light #nav > li > a:not(.dropdown-toggle)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 14px;
        right: 14px;
        height: 2.5px;
        background: var(--cp-pink);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .navbar-light #nav > li > a:not(.dropdown-toggle):hover::after {
        transform: scaleX(1);
    }

    /* Underline draw-in — dropdown toggles use ::before
       (Bootstrap's ::after is the caret) */
    .navbar-light #nav > li > a.dropdown-toggle {
        position: relative;
    }
    .navbar-light #nav > li > a.dropdown-toggle::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 14px;
        right: 14px;
        height: 2.5px;
        background: var(--cp-pink);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .navbar-light #nav > li > a.dropdown-toggle:hover::before,
    .navbar-light #nav > li.show > a.dropdown-toggle::before {
        transform: scaleX(1);
    }

    /* Active section — pink text, full underline */
    .navbar-light #nav > li.cp-nav-active > a {
        color: var(--cp-pink) !important;
    }
    .navbar-light #nav > li.cp-nav-active > a:not(.dropdown-toggle)::after,
    .navbar-light #nav > li.cp-nav-active > a.dropdown-toggle::before {
        transform: scaleX(1);
    }

    .navbar-light #nav .dropdown-menu {
        font-family: var(--font-heading);
    }
}

/* Mobile nav (below xl) */
@media (max-width: 1199px) {
    header.header .navbar { padding-top: 8px; padding-bottom: 8px; }
    header.header .logo-img { max-height: 56px; }
    #mainNavbar #nav { padding: 8px 0; }
    #mainNavbar #nav > li { border-bottom: 1px solid #eee; }
    #mainNavbar #nav > li:last-child { border-bottom: none; }
    header.header .navbar-nav#nav > li > a,
    #mainNavbar #nav > li > a {
        display: block !important;
        width: 100% !important;
        font-family: var(--font-heading);
        font-size: 18px !important;
        font-weight: 600 !important;
        padding: 14px 20px 14px 24px !important;
        color: var(--cp-text) !important;
        text-align: left;
    }
    header.header .navbar-nav#nav > li > a:hover,
    header.header .navbar-nav#nav > li > a:active,
    #mainNavbar #nav > li > a:hover,
    #mainNavbar #nav > li > a:active {
        color: var(--cp-pink) !important;
        background: rgba(222, 53, 128, 0.04);
    }
    #mainNavbar #nav > li.cp-nav-active > a {
        color: var(--cp-pink) !important;
        background: rgba(222, 53, 128, 0.04);
    }
}

/* Cart button — darker than the rest so it reads as an icon, not a link */
.navbar-light .navbar-nav .nav-link.cart-btn,
.navbar .toolbar button.nav-link {
    color: var(--cp-text) !important;
}
header.header .toolbar .nav-link.cart-btn {
    padding-left: calc(1rem - 2px);
    padding-right: calc(1rem + 6px);
    position: relative;
}
.navbar-light .navbar-nav .nav-link.cart-btn:hover,
.navbar-light .navbar-nav .nav-link.cart-btn:focus,
.navbar .toolbar button.nav-link:hover,
.navbar .toolbar button.nav-link:focus {
    color: var(--cp-pink) !important;
}

/* Cart badge — green pill (not Bootstrap's info blue) */
#cartItemCount.badge-info,
#cartItemCountDesktop.badge-info,
.badge-info {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

/* ==========================================================================
   6. Master breadcrumb bar
   ========================================================================== */
.master-breadcrumb {
    min-height: 48px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1a3050 0%, #4d1230 40%, #de3580 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
    padding-top: 6px;
    padding-bottom: 6px;
}
.master-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}
.master-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading);
    letter-spacing: 0.3px;
}
/* Home page tagline variant — bold, reads as marketing copy next to
   the Ohio's badge image. */
.master-breadcrumb .breadcrumb-item.breadcrumb-tagline {
    font-weight: 700;
}
/* Icon/image that can prefix a breadcrumb label — used for the Ohio
   state logo on the home tagline. Sized large (36px) so it reads as
   a proper badge rather than a decoration. width:auto keeps the
   natural aspect ratio of the SVG source. */
.master-breadcrumb .breadcrumb-icon {
    height: 36px;
    width: auto;
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
}
/* State of Ohio logo — navy portions were recolored to white directly in
   the SVG source file (the CSS filter trick would have flattened red + gray
   into the same color). Red state outline stays red on the dark gradient.
   Drop-shadow keeps it feeling lifted, not pasted-on. */
.master-breadcrumb .breadcrumb-icon--ohio {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.master-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.88);
}
.master-breadcrumb .breadcrumb-item a:hover {
    color: #ffffff;
    text-decoration: none;
}
.master-breadcrumb .breadcrumb-item.active {
    color: #ffffff;
}
/* Chevron separator — unicode to avoid FA dependency */
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A"; /* › */
    display: inline-block;
    padding: 0 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* Phone pill — matches cp-twenty-one */
.cp-nav-phone {
    background: #ffffff;
    color: var(--cp-pink);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 5px 14px;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: none;
}
.cp-nav-phone:hover {
    background: rgba(222, 53, 128, 0.25);
    color: #ffffff;
    border-color: #ffffff;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(222, 53, 128, 0.3);
}
.cp-nav-phone i {
    font-size: 10px;
    margin-left: 6px;
    transition: color 0.2s ease;
}
.cp-nav-phone:hover i { color: #ffffff; }

/* ==========================================================================
   7. Services mega dropdown (cp-mega-*) — lifted from custom.css
   ========================================================================== */

/* Kill Bootstrap's default dropdown card so we can use our own surface */
.cp-store-dropdown-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}
@media (min-width: 1200px) {
    .cp-store-dropdown-wrap {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        /* Push the visible mega card down so its top lands right under the
           navbar (and OVER the breadcrumb, not past it). Bootstrap anchors
           the dropdown at `top: 100%` of the <li>, which in a flex navbar
           is the bottom of the nav-link text line — that sits in the
           middle of the navbar. Navbar bottom is ~42px below that baseline,
           so 42px pushes the card to navbar-bottom. The breadcrumb is then
           covered by the card (same pattern as cp-twenty-one's 41px). */
        padding-top: 45px !important;
    }
}

.cp-mega-clip {
    overflow: hidden;
    margin: 0 -50px -80px;
    padding: 0 50px 80px;
}

.cp-mega-dropdown {
    background: #ffffff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 740px;
    max-width: calc(100vw - 40px);
}

.cp-mega-heroes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.cp-mega-hero {
    padding: 29px 28px 26px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    text-decoration: none !important;
    display: block;
    color: inherit !important;
}
.cp-mega-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}
.cp-mega-hero:hover::before { opacity: 1; }
.cp-mega-hero > * {
    position: relative;
    z-index: 1;
}

.cp-mega-hero--gen3 {
    background: var(--cp-gradient-gpc);
    box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, 0.25);
}
.cp-mega-hero--gen3::before {
    background: linear-gradient(135deg, #b060a0 0%, #6a8cac 60%, #253f60 100%);
    box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, 0.22);
}
.cp-mega-hero--gen4 {
    background: var(--cp-gradient-mcc);
    box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, 0.2);
}
.cp-mega-hero--gen4::before {
    background: linear-gradient(135deg, #2a4060 0%, #5d2240 45%, #ee4590 100%);
    box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, 0.15);
}

.cp-mega-hero__toprow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.cp-mega-hero__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}
.cp-mega-hero--gen3 .cp-mega-hero__icon {
    background: linear-gradient(135deg, #de3580, #bf6bb4);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cp-mega-hero--gen4 .cp-mega-hero__icon {
    background: linear-gradient(135deg, #bf6bb4, #8e44ad);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cp-mega-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cp-mega-hero__feat {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    line-height: 1.4;
}

.cp-mega-hero__gen {
    font-family: var(--font-tech);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.85);
}

.cp-mega-hero__name,
a.cp-mega-hero__name {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff !important;
    text-decoration: none !important;
    display: block;
}
a.cp-mega-hero__name:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
}

.cp-mega-hero__desc {
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    margin: 0 0 14px 0;
}

.cp-mega-hero__content {
    background: rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    padding: 12px 14px;
    position: relative;
    z-index: 1;
}
.cp-mega-hero__content .cp-mega-hero__desc {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 10px;
}

.cp-mega-hero__links {
    display: flex;
    gap: 6px;
    align-items: center;
}
.cp-mega-hero__links a {
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #fff;
    color: var(--cp-pink) !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.cp-mega-hero__links a:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #de3580, #bf6bb4);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(222, 53, 128, 0.3);
}
.cp-mega-hero__links a i {
    font-size: 10px;
    margin-left: 4px;
}
.cp-mega-hero__links .cp-mega-hero__sep {
    color: #ccc;
    font-size: 12px;
}

.cp-mega-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
.cp-mega-hero--gen3::after {
    border-color: rgba(255, 255, 255, 0.15);
    width: 100px; height: 100px;
    bottom: -20px; right: 30px;
}
.cp-mega-hero--gen4::after {
    border-color: rgba(255, 255, 255, 0.15);
    width: 120px; height: 120px;
    top: -30px; right: -20px;
}

/* Bottom row: secondary product + browse-all */
.cp-mega-bottom {
    display: flex;
    border-top: 1px solid #eee;
}
.cp-mega-secondary {
    flex: 1;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none !important;
    color: var(--cp-text) !important;
    border-radius: 0 0 0 12px;
    background: #f0faf3;
}
.cp-mega-secondary:hover {
    background: #e0f2e6;
    color: var(--cp-text) !important;
}
.cp-mega-secondary__icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.cp-mega-secondary__name {
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-heading);
}
.cp-mega-secondary__desc {
    font-size: 12px;
    color: #666;
}

.cp-mega-domain {
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none !important;
    color: #5b8db8 !important;
    border-left: 1px solid #eee;
    border-radius: 0 0 12px 0;
    white-space: nowrap;
}
.cp-mega-domain:hover {
    background: #edf4fa;
    color: #5b8db8 !important;
}
.cp-mega-domain i { font-size: 14px; }
.cp-mega-domain span {
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-heading);
}

.cp-store-mobile {
    font-family: var(--font-heading);
    background: #fff;
    border-radius: 0 0 8px 8px;
    margin: 0;
    padding: 8px 0;
    border: 1px solid var(--cp-border);
    border-top: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.cp-store-mobile .dropdown-item {
    font-size: 15px;
    padding: 8px 20px;
    color: var(--cp-text);
    white-space: normal;
}
.cp-store-mobile .dropdown-item:hover {
    color: var(--cp-pink);
    background: rgba(222, 53, 128, 0.04);
}

/* Submenu (Support, Account) — matches WHMCS cp-twenty-one exactly:
   16px items (Bootstrap default inherited from .dropdown-menu 1rem), with
   a neutral very-light-gray hover (#f8f9fa — Bootstrap's stock) instead
   of pink. Text stays dark on hover so the contrast/tone matches WHMCS. */
.navbar-light #nav .dropdown-menu:not(.cp-store-dropdown-wrap) {
    border: 1px solid var(--cp-border);
    border-radius: 0 0 var(--cp-r-sm) var(--cp-r-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    min-width: 200px;
    margin-top: 0;
}
.navbar-light #nav .dropdown-menu:not(.cp-store-dropdown-wrap) .dropdown-item {
    font-size: 16px;
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--cp-text);
    padding: 8px 20px;
}
.navbar-light #nav .dropdown-menu:not(.cp-store-dropdown-wrap) .dropdown-item:hover,
.navbar-light #nav .dropdown-menu:not(.cp-store-dropdown-wrap) .dropdown-item:focus {
    color: var(--cp-text-heading);
    background: #f8f9fa;
}

/* ==========================================================================
   8. Buttons (pink override of Bootstrap .btn-primary)
   ========================================================================== */
.btn-primary {
    background: var(--cp-pink);
    border-color: var(--cp-pink);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 4px 14px rgba(222, 53, 128, 0.3);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--cp-pink-dark) !important;
    border-color: var(--cp-pink-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(222, 53, 128, 0.42);
    transform: translateY(-1px);
}
.btn-secondary {
    background: #ffffff;
    color: var(--cp-text);
    border: 2px solid var(--cp-border-strong);
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 10px;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: #ffffff;
    border-color: var(--cp-pink);
    color: var(--cp-pink);
}
.btn-ghost {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.45);
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 10px;
}
.btn-ghost:hover, .btn-ghost:focus {
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-1px);
}
.btn .fa-arrow-right,
.btn svg { margin-left: 8px; }

/* ==========================================================================
   9. Hero section
   ========================================================================== */
.hero {
    padding: 120px 0 110px;
    text-align: center;
    position: relative;
    background:
        radial-gradient(ellipse at top left, rgba(222, 53, 128, 0.06), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(122, 157, 190, 0.08), transparent 50%);
}
.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(222, 53, 128, 0.08);
    border: 1px solid rgba(222, 53, 128, 0.22);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--cp-pink);
    font-weight: 600;
    margin-bottom: 26px;
    font-family: var(--font-heading);
}
.hero .eyebrow .dot {
    width: 8px;
    height: 8px;
    background: var(--cp-pink);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(222, 53, 128, 0.18);
}
.hero h1 { max-width: 920px; margin: 0 auto 24px; }
.hero h1 .highlight {
    background: var(--cp-gradient-default);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.hero .lead {
    max-width: 680px;
    margin: 0 auto 44px;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    color: var(--cp-text-muted);
}
.hero .cta-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .hero { padding: 72px 0 56px; }
}

/* Coming Soon placeholder — used on pages whose body isn't built yet.
   Fills most of the viewport between header and footer and vertically
   centers whatever lives inside. Headline is the gradient `.highlight`. */
.hero--coming-soon {
    min-height: calc(100vh - 340px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    text-align: center;
}
.hero--coming-soon h1 {
    font-size: clamp(3rem, 7vw, 6rem);
    margin: 0;
}
@media (max-width: 768px) {
    .hero--coming-soon { min-height: 55vh; }
}

/* ==========================================================================
   10. Section headers
   ========================================================================== */
.section-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-header .eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cp-pink);
    font-weight: 700;
    margin-bottom: 14px;
    font-family: var(--font-heading);
}
.section-header p {
    color: var(--cp-text-muted);
    font-size: 1.1rem;
    margin-top: 16px;
}

/* ==========================================================================
   11. Services grid — LEGACY / SIMPLE VARIANT
   ----------------------------------------------------------------------------
   These are the flat white `.service-card` tiles that shipped on the MVP
   home page. The current home page uses `.cp-store-card` (section 11b
   below) to match the WHMCS store-browse layout. These rules are kept
   intentionally because the user may want to revive the simple look for
   a lighter secondary page or as an alternate home treatment. Named
   effectively as the "simple" variant — nothing currently references
   them, but they stay idle rather than being deleted.
   ========================================================================== */
.services { background: var(--cp-bg-alt); }
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.service-card {
    background: #ffffff;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r);
    padding: 32px;
    box-shadow: var(--cp-shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cp-shadow-card-hover);
    border-color: rgba(222, 53, 128, 0.3);
    color: inherit;
    text-decoration: none;
}
.service-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(222, 53, 128, 0.08);
    color: var(--cp-pink);
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    font-size: 22px;
}
.service-card h3 { margin-bottom: 10px; }
.service-card p { color: var(--cp-text-muted); font-size: 0.95rem; margin-bottom: 0; }
.service-card .arrow {
    margin-top: 22px;
    color: var(--cp-pink);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
    font-family: var(--font-heading);
}
.service-card:hover .arrow { gap: 10px; }

/* ==========================================================================
   11b. Store cards — cp-store-card / cp-store-browse
   ----------------------------------------------------------------------------
   Ported verbatim from cp-twenty-one/custom.css ~L2833-3122. These are
   the gradient product cards on the WHMCS store-browse page: gen3 (GPC)
   purple-navy, gen4 (MCC) navy-pink, veeam green, plus a default slate.
   Each card has a feature pill row at the top, a "CATEGORY" eyebrow, a
   product name, a white semi-transparent inner panel with description
   and "Pay As You Go / Dedicated Capacity" pill links, then a browse
   footer. Used on the home page and category pages.
   ========================================================================== */
.cp-store-browse {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0 40px;
}
.cp-store-browse__header {
    text-align: center;
    margin-bottom: 30px;
}
.cp-store-browse__header h1 {
    font-size: 28px;
    margin-bottom: 6px;
}
.cp-store-browse__header p {
    font-family: var(--font-heading);
    color: #888;
    font-size: 15px;
    margin: 0;
}
.cp-store-browse__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
/* Center the last card when there's an odd number */
.cp-store-browse__grid > .cp-store-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
    justify-self: center;
}
@media (max-width: 767px) {
    .cp-store-browse__grid {
        grid-template-columns: 1fr;
    }
    .cp-store-browse__grid > .cp-store-card:last-child:nth-child(odd) {
        max-width: 100%;
    }
}

/* Card base */
.cp-store-card {
    display: flex;
    flex-direction: column;
    padding: 28px 28px 20px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}
.cp-store-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}
.cp-store-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}
.cp-store-card:hover::before {
    opacity: 1;
}
.cp-store-card > * {
    position: relative;
    z-index: 1;
}
.cp-store-card::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    width: 120px;
    height: 120px;
    bottom: -30px;
    right: -10px;
}

/* Gradient variants */
.cp-store-card--gen3 {
    background: linear-gradient(135deg, #a0558a 0%, #5a7a9a 60%, #1d3a5b 100%);
}
.cp-store-card--gen3::before {
    background: linear-gradient(135deg, #b060a0 0%, #6a8cac 60%, #253f60 100%);
}
.cp-store-card--gen4 {
    background: linear-gradient(135deg, #1a3050 0%, #4d1230 45%, #de3580 100%);
}
.cp-store-card--gen4::before {
    background: linear-gradient(135deg, #2a4060 0%, #5d2240 45%, #ee4590 100%);
}
.cp-store-card--veeam {
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #40916c 100%);
}
.cp-store-card--veeam::before {
    background: linear-gradient(135deg, #2b5342 0%, #3d7a5f 50%, #50a17c 100%);
}
.cp-store-card--default {
    background: linear-gradient(135deg, #2c3e50 0%, #4a6274 50%, #7a9dbe 100%);
}
.cp-store-card--default::before {
    background: linear-gradient(135deg, #3c4e60 0%, #5a7284 50%, #8aadce 100%);
}

/* Top row: icon + features */
.cp-store-card__toprow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.cp-store-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cp-store-card--gen3 .cp-store-card__icon { background: linear-gradient(135deg, #de3580, #bf6bb4); }
.cp-store-card--gen4 .cp-store-card__icon { background: linear-gradient(135deg, #bf6bb4, #8e44ad); }
.cp-store-card--veeam .cp-store-card__icon { background: linear-gradient(135deg, #28a745, #20c997); }
.cp-store-card--default .cp-store-card__icon { background: linear-gradient(135deg, #4a6274, #7a9dbe); }

/* Feature pills */
.cp-store-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cp-store-card__feat {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    line-height: 1.4;
}

/* Gen label / eyebrow */
.cp-store-card__gen {
    font-family: 'Share Tech', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.85);
}

/* Product name */
.cp-store-card__name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    font-family: var(--font-heading);
}

/* Inner content panel */
.cp-store-card__content {
    flex: 1;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    padding: 12px 14px;
}
.cp-store-card__desc {
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 10px 0;
}
.cp-store-card__content .cp-store-card__desc:last-child {
    margin-bottom: 0;
}

/* Billing model pill links */
.cp-store-card__links {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.cp-store-card__pill {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #fff;
    color: #de3580;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.cp-store-card__pill:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #de3580, #bf6bb4);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(222, 53, 128, 0.3);
}
.cp-store-card__pill i {
    font-size: 10px;
    margin-left: 4px;
}
.cp-store-card__sep {
    color: #ccc;
    font-size: 12px;
}
@media (max-width: 991px) and (min-width: 768px) {
    .cp-store-card__pill { font-size: 10px; padding: 2px 7px; }
    .cp-store-card__pill i { font-size: 8px; margin-left: 3px; }
    .cp-store-card__sep { font-size: 10px; }
    .cp-store-card__name { font-size: 15px; }
    .cp-store-card--veeam .cp-store-card__name { font-size: 13px; }
    .cp-store-card--veeam .cp-store-card__pill { font-size: 9px; padding: 2px 6px; }
    .cp-store-card--veeam .cp-store-card__pill i { font-size: 7px; }
    .cp-store-card--veeam .cp-store-card__sep { font-size: 9px; }
}

/* Footer: browse link */
.cp-store-card__footer {
    margin-top: 14px;
}
.cp-store-card__browse {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.cp-store-card__browse i {
    margin-left: 4px;
    font-size: 11px;
    transition: transform 0.2s ease;
}
.cp-store-card:hover .cp-store-card__browse {
    color: #fff;
}
.cp-store-card:hover .cp-store-card__browse i {
    transform: translateX(3px);
}

/* Section wrapper the home page uses to hold grids of these cards */
.cp-store-section {
    padding: 72px 0;
}
.cp-store-section:nth-of-type(even) {
    background: var(--cp-bg-alt);
}
.cp-store-section__intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}
.cp-store-section__eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cp-pink);
    font-weight: 700;
    margin-bottom: 14px;
    font-family: var(--font-heading);
}
.cp-store-section__intro h2 {
    margin-bottom: 16px;
}
.cp-store-section__intro p {
    color: var(--cp-text-muted);
    font-size: 1.05rem;
}

/* 3-up grid override for Data Protection section */
.cp-store-browse__grid--three {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .cp-store-browse__grid--three {
        grid-template-columns: 1fr;
    }
    .cp-store-browse__grid--three > .cp-store-card {
        max-width: 100%;
    }
}
/* Wider container for the cards section so they breathe */
.cp-store-section .cp-store-browse {
    max-width: 1080px;
}

/* ==========================================================================
   11c. Home page narrative sections
   Intro strip, section lead, why-us pillars, and the "Designed for
   Predictability" platform principle band. All quiet, understated,
   enterprise-tone layouts — no hero gradients, no decorative chrome.
   ========================================================================== */

/* Intro strip — a single short paragraph just under the hero */
.intro-strip {
    padding: 40px 0 0;
    text-align: center;
}
.intro-strip p {
    max-width: 820px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--cp-text-muted);
}

/* Section lead — bridge headline + paragraph (replaces "Better by Design") */
.section-lead {
    padding: 80px 0 40px;
    text-align: center;
}
.section-lead__inner {
    max-width: 760px;
    margin: 0 auto;
}
.section-lead h2 {
    margin-bottom: 18px;
}
.section-lead p {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--cp-text-muted);
}

/* Why Cloud Propeller — 5-pillar grid */
.why-cp { background: var(--cp-bg-alt); }
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
    max-width: 1140px;
    margin: 0 auto;
}
.pillar {
    background: #ffffff;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r);
    padding: 32px 28px 28px;
    position: relative;
    box-shadow: var(--cp-shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pillar:hover {
    transform: translateY(-2px);
    box-shadow: var(--cp-shadow-card-hover);
    border-color: rgba(222, 53, 128, 0.22);
}
.pillar__number {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--cp-pink);
    margin-bottom: 10px;
}
.pillar h3 {
    margin-bottom: 12px;
    font-size: 1.2rem;
    line-height: 1.3;
}
.pillar p {
    color: var(--cp-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Platform Principle — quiet full-width statement band */
.platform-principle {
    background: var(--cp-bg-footer);
    color: rgba(255, 255, 255, 0.88);
    padding: 100px 0;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.platform-principle::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 40%, rgba(222, 53, 128, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 60%, rgba(122, 157, 190, 0.06) 0%, transparent 55%);
    pointer-events: none;
}
.platform-principle__inner {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.platform-principle__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cp-pink-light);
    margin-bottom: 18px;
}
.platform-principle h2 {
    color: #ffffff;
    margin-bottom: 24px;
    font-size: clamp(2rem, 3.5vw, 3rem);
}
.platform-principle__lead {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.4;
}
.platform-principle p:not(.platform-principle__lead) {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 680px;
    margin: 0 auto;
}

/* ==========================================================================
   11d. Category page patterns
   Hero band (gradient matching the corresponding store-card variant),
   category intro, verbatim product blocks, and the cross-sell band at
   the bottom. Used on /mission-critical-compute, /general-purpose-compute,
   /veeam-backup and (eventually) any other category pages.
   ========================================================================== */

/* Category hero — gradient band, matches .cp-store-card--gen3/gen4/veeam */
.category-hero {
    padding: 96px 0 72px;
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.category-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.1), transparent 70%);
    pointer-events: none;
}
.category-hero > .container { position: relative; z-index: 1; }
.category-hero--gen4 {
    background: linear-gradient(135deg, #1a3050 0%, #4d1230 45%, #de3580 100%);
}
.category-hero--gen3 {
    background: linear-gradient(135deg, #a0558a 0%, #5a7a9a 60%, #1d3a5b 100%);
}
.category-hero--veeam {
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #40916c 100%);
}
.category-hero--default {
    background: linear-gradient(135deg, #2c3e50 0%, #4a6274 50%, #7a9dbe 100%);
}
.category-hero__eyebrow {
    display: inline-block;
    font-family: 'Share Tech', var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 14px;
}
.category-hero h1 {
    color: #ffffff;
    margin: 0 0 18px;
    font-size: clamp(2.4rem, 5vw, 3.75rem);
}
.category-hero__lead {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 720px;
    margin: 0 auto 28px;
    line-height: 1.55;
}
.category-hero__features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 720px;
    margin: 0 auto;
}
.category-hero__features .cp-store-card__feat {
    font-size: 10px;
    padding: 3px 9px;
}

/* Category intro — my-authored 150-ish-word lead-in */
.category-intro {
    padding: 80px 0 40px;
}
.category-intro__inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.category-intro h2 {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    margin-bottom: 22px;
}
.category-intro p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--cp-text-muted);
    margin-bottom: 16px;
}
.category-intro p:last-child { margin-bottom: 0; }

/* Product block — verbatim description card */
.product-block {
    padding: 56px 0;
}
.product-block:nth-of-type(even) { background: var(--cp-bg-alt); }
.product-block__card {
    max-width: 920px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r);
    box-shadow: var(--cp-shadow-card);
    overflow: hidden;
}
.product-block__header {
    padding: 36px 40px 28px;
    border-bottom: 1px solid var(--cp-border);
}
.product-block__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.product-block__num {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--cp-pink);
    padding: 4px 10px;
    border: 1px solid rgba(222, 53, 128, 0.3);
    border-radius: 4px;
    background: rgba(222, 53, 128, 0.06);
}
.product-block__label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--cp-text-muted);
    text-transform: uppercase;
}
.product-block__name {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    line-height: 1.25;
}
.product-block__tagline {
    color: var(--cp-text-muted);
    font-size: 1.05rem;
    margin: 0 0 18px;
    font-style: italic;
}
.product-block__features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.product-block__features .cp-store-card__feat {
    background: rgba(26, 34, 51, 0.06);
    color: var(--cp-text);
    border: 1px solid rgba(26, 34, 51, 0.08);
    font-size: 10px;
    padding: 3px 9px;
}
.product-block__body {
    padding: 32px 40px;
    font-family: var(--font-body);
    line-height: 1.72;
    color: var(--cp-text);
}
.product-block__body > p {
    margin: 0 0 16px;
    font-size: 1rem;
}
.product-block__body > p:last-of-type { margin-bottom: 0; }
.product-block__body strong { color: var(--cp-text-heading); font-weight: 600; }
.product-block__group {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--cp-border);
}
.product-block__group h5 {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cp-pink);
    margin: 0 0 12px;
    font-weight: 700;
}
.product-block__group ul {
    margin: 0;
    padding-left: 20px;
}
.product-block__group ul li {
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: var(--cp-text);
}
.product-block__footer {
    padding: 24px 40px 32px;
    border-top: 1px solid var(--cp-border);
    background: var(--cp-bg-alt);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.product-block__footer .btn-primary { padding: 12px 22px; font-size: 0.95rem; }
.product-block__link {
    color: var(--cp-pink);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: var(--font-heading);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.15s ease;
}
.product-block__link:hover { gap: 10px; color: var(--cp-pink-dark); }
@media (max-width: 640px) {
    .product-block__header { padding: 28px 22px 20px; }
    .product-block__body { padding: 22px 22px; }
    .product-block__footer { padding: 20px 22px 26px; }
}

/* Cross-sell — the note-like link at the bottom */
.cross-sell {
    padding: 48px 0 64px;
    background: var(--cp-bg-alt);
}
.cross-sell__inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 22px 28px;
    background: #ffffff;
    border: 1px solid var(--cp-border);
    border-left: 4px solid var(--cp-pink);
    border-radius: var(--cp-r-sm);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.cross-sell__inner p {
    margin: 0;
    font-size: 1rem;
    color: var(--cp-text);
    line-height: 1.6;
}
.cross-sell__inner i {
    color: var(--cp-pink);
    margin-right: 8px;
}
.cross-sell__inner a { text-decoration: none; }
.cross-sell__inner a:hover { text-decoration: underline; }

/* About-page / narrative section — used for /about-us and /data-centers */
.about-section {
    padding: 80px 0;
}
.about-section--alt { background: var(--cp-bg-alt); }
.about-section__inner {
    max-width: 780px;
    margin: 0 auto;
}
.about-section__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.about-section__num {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--cp-pink);
    padding: 4px 10px;
    border: 1px solid rgba(222, 53, 128, 0.3);
    border-radius: 4px;
    background: rgba(222, 53, 128, 0.06);
}
.about-section__label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--cp-text-muted);
    text-transform: uppercase;
}
.about-section h2 {
    font-size: clamp(1.65rem, 2.8vw, 2.2rem);
    margin-bottom: 20px;
    line-height: 1.3;
}
.about-section p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--cp-text);
    margin-bottom: 16px;
}
.about-section p:last-child { margin-bottom: 0; }

/* Data center card grid */
.dc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 32px;
}
.dc-card {
    background: #ffffff;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r);
    padding: 32px 28px;
    box-shadow: var(--cp-shadow-card);
}
.dc-card__label {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cp-pink);
    margin-bottom: 10px;
}
.dc-card h3 {
    margin: 0 0 8px;
    font-size: 1.35rem;
}
.dc-card__tagline {
    color: var(--cp-text-muted);
    font-size: 0.95rem;
    margin-bottom: 18px;
}
.dc-card__address {
    font-size: 0.88rem;
    color: var(--cp-text-muted);
    margin-bottom: 18px;
    padding: 12px 14px;
    background: var(--cp-bg-alt);
    border-radius: 8px;
    font-family: var(--font-heading);
}
.dc-card ul {
    margin: 0;
    padding-left: 20px;
}
.dc-card ul li {
    margin-bottom: 6px;
    font-size: 0.92rem;
    color: var(--cp-text);
}
.dc-capabilities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.dc-capability {
    background: #ffffff;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r-sm);
    padding: 20px 22px;
    text-align: center;
}
.dc-capability i {
    font-size: 26px;
    color: var(--cp-pink);
    margin-bottom: 10px;
}
.dc-capability h4 {
    font-size: 0.95rem;
    margin: 0 0 6px;
}
.dc-capability p {
    font-size: 0.85rem;
    color: var(--cp-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   12. Stats strip
   ========================================================================== */
.stats {
    padding: 64px 0;
    border-top: 1px solid var(--cp-border);
    border-bottom: 1px solid var(--cp-border);
    background: #ffffff;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
    text-align: center;
}
.stat__value {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    background: var(--cp-gradient-default);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-bottom: 6px;
}
.stat__label { color: var(--cp-text-muted); font-size: 0.92rem; font-weight: 500; }

/* ==========================================================================
   13. Testimonials
   ========================================================================== */
.testimonials { background: var(--cp-bg-alt); }
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
.testimonial-card {
    background: #ffffff;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r);
    padding: 36px 32px 32px;
    position: relative;
    box-shadow: var(--cp-shadow-card);
    overflow: hidden;
}
.testimonial-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(222, 53, 128, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.testimonial-card__quote {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 0.8;
    color: var(--cp-pink);
    opacity: 0.22;
    margin-bottom: 8px;
}
.testimonial-card__body {
    font-style: italic;
    color: var(--cp-text);
    margin-bottom: 24px;
    position: relative;
}
.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 14px;
}
.testimonial-card__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--cp-gradient-default);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-weight: 700;
    flex-shrink: 0;
}
.testimonial-card__name { font-weight: 600; font-size: 0.95rem; color: var(--cp-text-heading); }
.testimonial-card__role { font-size: 0.8rem; color: var(--cp-text-muted); }

/* ==========================================================================
   14. Final CTA
   ========================================================================== */
.final-cta { padding: 120px 0; }
.final-cta .cta-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 48px;
    background: var(--cp-gradient-default);
    border-radius: var(--cp-r-lg);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 24px 64px rgba(26, 34, 51, 0.2);
}
.final-cta h2 { color: #ffffff; margin-bottom: 18px; }
.final-cta p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 36px;
    font-size: 1.1rem;
}
.final-cta .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Secondary row of ghost buttons, stacked below the primary CTA */
.final-cta .cta-row + .cta-row-secondary {
    margin-top: 16px;
}
.final-cta .btn-primary {
    background: #ffffff !important;
    color: var(--cp-pink) !important;
    border-color: #ffffff !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}
.final-cta .btn-primary:hover,
.final-cta .btn-primary:focus {
    background: #ffffff !important;
    color: var(--cp-pink-dark) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}
@media (max-width: 640px) {
    .final-cta { padding: 80px 0; }
    .final-cta .cta-wrap { padding: 56px 28px; }
}

/* ==========================================================================
   15. Footer — cp-footer, lifted from cp-twenty-one/custom.css ~L2419-2650.
   Shimmer SVG logo + two contact groups + Company/Services/Resources
   columns, dark background with a huge faint cloud watermark, pink border
   under column headers, green "Systems Status" terminal-pill in the
   bottom-right. FA6 Free replaces FA6 Pro for the cloud glyph.
   ========================================================================== */
footer.cp-footer {
    background: #1e2a38 !important;
    color: #ccc;
    padding: 50px 0 0 !important;
    margin-top: 0;
    position: relative;
    overflow: hidden;
    font-family: var(--font-heading);
    box-shadow: inset 0 12px 24px -6px rgba(0, 0, 0, 0.45);
}
/* Huge cloud watermark — bottom-left, only the top peeks up */
footer.cp-footer::before {
    content: "\f0c2"; /* fa-cloud */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    font-size: 600px;
    color: rgba(255, 255, 255, 0.022);
    bottom: -320px;
    left: -80px;
    pointer-events: none;
    z-index: 0;
}
footer.cp-footer > .container {
    position: relative;
    z-index: 1;
}
.cp-footer-inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.cp-footer-brand {
    flex: 0 0 auto;
}
.cp-footer-logo {
    max-width: 200px;
    margin-bottom: 20px;
    background: transparent !important;
}
/* Contact info — two groups side by side on desktop */
.cp-footer-contact {
    margin-top: 18px;
    display: flex;
    gap: 32px;
}
.cp-footer-contact-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.cp-footer-contact-label {
    color: #8899aa;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Share Tech', 'Exo 2', sans-serif;
    margin-bottom: 2px;
}
.cp-footer-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.cp-footer-contact-item i {
    color: #667788;
    font-size: 13px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.cp-footer-contact-item a {
    color: #8899aa;
    text-decoration: none;
    transition: color 0.2s ease;
}
.cp-footer-contact-item a:hover {
    color: #de3580;
}
.cp-footer-links {
    flex: 1;
    display: flex;
    gap: 40px;
    justify-content: flex-end;
}
.cp-footer-col {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
}
.cp-footer-col h5 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #de3580;
    font-family: 'Share Tech', 'Exo 2', sans-serif;
}
.cp-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cp-footer-col ul li {
    margin-bottom: 8px;
}
.cp-footer-col ul li a {
    color: #8899aa;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s ease;
    letter-spacing: 0.3px;
}
.cp-footer-col ul li a:hover {
    color: #fff;
}
.cp-footer-separator {
    color: #8899aa;
}
/* Bottom bar — split: copyright left, status right */
.cp-footer-bottom {
    margin-top: 16px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cp-footer-bottom p {
    margin: 0;
    color: #556677;
    font-size: 15px;
    letter-spacing: 0.5px;
    font-family: 'Share Tech', 'Exo 2', sans-serif;
}
/* Systems Status link — green terminal-style pill */
.cp-status-link {
    color: #4caf50 !important;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 14px !important;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 6px;
    background: rgba(76, 175, 80, 0.06);
    transition: all 0.25s ease;
}
.cp-status-link:hover {
    color: #69f0ae !important;
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
    text-decoration: none;
    border-color: rgba(76, 175, 80, 0.5);
    background: rgba(76, 175, 80, 0.1);
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.15);
}
.cp-status-dot {
    font-size: 8px;
    color: #4caf50;
    vertical-align: middle;
    margin-right: 2px;
    animation: cp-pulse-dot 2s ease-in-out infinite;
}
@keyframes cp-pulse-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* Footer columns — prevent Services text wrap at narrower desktop */
@media only screen and (max-width: 1020px) {
    .cp-footer-col {
        min-width: auto;
    }
    .cp-footer-col ul li a {
        white-space: nowrap;
    }
}
/* Footer responsive — stack brand above links at tablet widths */
@media only screen and (max-width: 990px) {
    .cp-footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .cp-footer-brand {
        flex: none;
    }
    .cp-footer-contact {
        gap: 24px;
    }
    .cp-footer-links {
        flex-wrap: wrap;
        gap: 24px;
        justify-content: space-evenly;
        width: 100%;
    }
    .cp-footer-col {
        text-align: center;
    }
    .cp-footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}
/* Footer — decorative background scales down on small screens */
@media only screen and (max-width: 767px) {
    footer.cp-footer::before {
        font-size: 360px;
        bottom: -200px;
        left: -60px;
    }
}