/* ==========================================================================
   Cloud India Hub — offers row (the three cards under the hero)
   File: public/frontend/css/cih-offers.css
   Load AFTER cih-color.css.

   Replaces the in-body <style> block that used to live inside
   resources/views/frontend/index.blade.php. It is a linked stylesheet rather
   than an inline block for the same reason cih-color.css is: body <style>
   blocks land after every <head> sheet in document order and win ties, which
   is what made the old section so hard to restyle from outside.

   The `.cih-page.cih-page > .main-container.main-container` ground, glyph field
   and full-bleed rules stay in cih-color.css. This file only styles what is
   inside the band.
   ========================================================================== */

.cih-page.cih-page > .main-container.main-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.12fr);
    align-items: stretch;
    gap: 18px;
    max-width: 1340px;
    margin-inline: auto !important;
    padding-inline: clamp(1rem, 3vw, 1.5rem) !important;
}

@media (max-width: 1080px) {
    .cih-page.cih-page > .main-container.main-container {
        grid-template-columns: minmax(0, 1fr);
        max-width: 620px;
    }
}

/* Script and style children of the grid would otherwise take a column. */
.cih-page .main-container > :is(script, style, link) {
    display: none;
}

/* --------------------------------------------------------------------------
   Shared card shell
   -------------------------------------------------------------------------- */

.cih-offer {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    font-family: var(--cih-font, inherit);
}

.cih-offer--light {
    background: #fff;
    border: 1px solid #ece8f8;
    box-shadow: 0 18px 40px -20px rgba(8, 5, 30, 0.45);
}

/* The third card carries a faint lavender wash so the paired offer reads as
   the upgrade without needing a second accent colour. */
.cih-offer--tint {
    background: linear-gradient(170deg, #fbfaff 0%, #f6f3ff 100%);
}

/* --------------------------------------------------------------------------
   Badge — outlined, not filled. A solid green block next to a green tick read
   as a status chip; outlined reads as a label.
   -------------------------------------------------------------------------- */

.cih-offer__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 5px 11px;
    border: 1.5px solid #34d399;
    border-radius: 999px;
    background: #f0fdf7;
    color: #047857;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.cih-offer__badge svg {
    width: 15px;
    height: 15px;
    flex: none;
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

/* cih-sections.css line 184 sets
   `.cih-page.cih-page :is(h1, h2, .main-title)` with !important on font-size,
   line-height, letter-spacing, weight AND colour, to normalise headings across
   the page. These card titles are <h2> inside .cih-page, so without !important
   here they render at the page display size and in --cih-ink — which is what
   made "Big Savings, Bigger Start" near-invisible on the dark card. */
.cih-page.cih-page .cih-offer .cih-offer__title {
    margin: 18px 0 0 !important;
    font-size: clamp(1.2rem, 1.5vw, 1.38rem) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    color: #150e2e !important;
    text-wrap: balance;
}

.cih-page.cih-page .cih-offer .cih-offer__title em {
    font-style: normal;
    color: #6d28d9 !important;
}

.cih-offer__sub {
    margin: 8px 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #5f5680;
}

.cih-offer__hr {
    height: 1px;
    margin: 18px 0 0;
    border: 0;
    background: #e9e4f7;
}

/* --------------------------------------------------------------------------
   Card 2 — domain lookup
   -------------------------------------------------------------------------- */

.cih-offer__search {
    display: flex;
    align-items: stretch;
    margin-top: 18px;
    border: 1.5px solid #c4b5fd;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cih-offer__search:focus-within {
    border-color: #6d28d9;
    box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.14);
}

.cih-offer__search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 11px 14px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #150e2e;
}

.cih-offer__search input::placeholder {
    color: #9d95bb;
    font-weight: 500;
}

.cih-offer__search button {
    flex: none;
    width: 58px;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(160deg, #7c3aed, #6d28d9);
}

.cih-offer__search button:hover { background: #5b21b6; }
.cih-offer__search button:focus-visible { outline: 3px solid #4c1d95; outline-offset: -3px; }
.cih-offer__search button svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Price row
   -------------------------------------------------------------------------- */

.cih-offer__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.cih-offer__was {
    font-size: 1.05rem;
    font-weight: 600;
    color: #9d95bb;
    text-decoration: line-through;
}

.cih-offer__now {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #6d28d9;
    line-height: 1;
}

.cih-offer__save {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Feature lists
   -------------------------------------------------------------------------- */

.cih-offer__list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.cih-offer__list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #3f3a52;
}

.cih-offer__list svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
    color: #6d28d9;
}

/* --------------------------------------------------------------------------
   Card 3 — split price block
   -------------------------------------------------------------------------- */

.cih-offer__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.cih-offer__split hr {
    width: 1px;
    height: 100%;
    margin: 0;
    border: 0;
    background: #e9e4f7;
}

.cih-offer__splitlabel {
    font-size: 0.92rem;
    font-weight: 600;
    color: #3f3a52;
}

.cih-offer__splitvalue {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #150e2e;
    line-height: 1;
}

.cih-offer__splitvalue small {
    font-size: 0.95rem;
    font-weight: 600;
    color: #5f5680;
}

.cih-offer__free {
    padding: 5px 11px;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cih-offer__note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 20px;
    padding: 10px 13px;
    border-radius: 14px;
    background: #f4f0ff;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4a4266;
}

.cih-offer__note svg {
    width: 19px;
    height: 19px;
    flex: none;
    margin-top: 1px;
    color: #7c3aed;
}

/* --------------------------------------------------------------------------
   CTA — the button pins to the bottom so the three cards line up whatever
   their content height.

   The slack is taken by .cih-offer__body rather than by an auto margin on the
   button. An auto margin absorbs the free space AND the intended gap, so on a
   short card the button ends up flush against the copy; letting the body grow
   keeps a real 22px gap in every case. Pooling the slack in one auto margin is
   exactly what produced the dead area in the old markup.
   -------------------------------------------------------------------------- */

.cih-offer__body {
    flex: 1 1 auto;
}

.cih-offer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    padding: 13px 18px;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 12px 26px -12px rgba(76, 29, 149, 0.75);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.cih-offer__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -12px rgba(76, 29, 149, 0.85);
}

.cih-offer__cta:focus-visible { outline: 3px solid #ede9fe; outline-offset: 3px; }
.cih-offer__cta svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   Card 1 — countdown
   -------------------------------------------------------------------------- */

.cih-offer--dark {
    background:
        radial-gradient(30rem 18rem at 15% 0%, #4c1d95 0%, rgba(76, 29, 149, 0) 62%),
        linear-gradient(165deg, #2a1055 0%, #1c0b3d 55%, #150a30 100%);
    color: #fff;
}

/* Centred rather than top-aligned: the card is stretched to the height of the
   taller pricing cards beside it, and pinning the clock to the top left an
   empty band above the date row. */
.cih-offer--dark .cih-offer__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cih-page.cih-page .cih-offer--dark .cih-offer__title { color: #fff !important; }
.cih-offer--dark .cih-offer__sub { color: #cfc6f2; }

.cih-offer__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.28);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
}

.cih-offer--dark .cih-offer__title,
.cih-offer--dark .cih-offer__sub {
    text-align: center;
}

.cih-offer__clock {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.cih-offer__unit {
    flex: 1 1 0;
    max-width: 118px;
    text-align: center;
}

.cih-offer__box {
    display: grid;
    place-items: center;
    padding: 11px 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.07);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.cih-offer__unitlabel {
    margin-top: 9px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #b6a9e0;
}

.cih-offer__colon {
    padding-top: 20px;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.34);
}

.cih-offer__ends {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 26px;
}

.cih-offer__ends svg { width: 30px; height: 30px; flex: none; color: #fbbf24; }
.cih-offer__endslabel { font-size: 0.85rem; color: #cfc6f2; }
.cih-offer__endsdate {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fbbf24;
}

/* Decoration. Absolutely positioned and pointer-events:none, so it cannot
   intercept clicks on the card. */
.cih-offer__deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.cih-offer__deco--burst-a { top: -30px; left: -34px; width: 108px; opacity: .8; }
.cih-offer__deco--burst-b { top: -36px; right: -30px; width: 122px; opacity: .8; }
.cih-offer__deco--wave { left: 0; right: 0; bottom: 0; width: 100%; }

.cih-offer--dark > *:not(.cih-offer__deco) { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .cih-offer { padding: 22px 18px; }
    .cih-offer__split { grid-template-columns: minmax(0, 1fr); }
    .cih-offer__split hr { width: 100%; height: 1px; }
    .cih-offer__save { margin-left: 0; }
}


/* --------------------------------------------------------------------------
   Terms line
   Replaces the tinted note box on card 3 and the commitment bullet on card 2.
   Both restated figures already shown a few lines above; the only new
   information was the condition, so only the condition survives. Set as small
   print rather than a ticked list item, because a condition is not a benefit.
   -------------------------------------------------------------------------- */

.cih-offer__terms {
    margin: 8px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #6b6280;
}

.cih-offer--dark .cih-offer__terms { color: #b3a7d4; }


/* --------------------------------------------------------------------------
   Band padding for this container only
   cih-sections.css applies `padding-block: var(--cih-band) !important` to every
   direct child of .cih-page, which put 61px above and below this row — 122px of
   the row's total height, spent on nothing. --cih-band is the page-wide section
   rhythm and is right for full content sections; this is three compact cards,
   so it is overridden here rather than changed globally.

   Doubling .main-container in the selector (0,4,0) keeps this ahead of
   `.cih-page.cih-page > div` (0,3,0) regardless of stylesheet order.
   -------------------------------------------------------------------------- */

.cih-page.cih-page > .main-container.main-container {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

@media (max-width: 767px) {
    .cih-page.cih-page > .main-container.main-container {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}


/* ==========================================================================
   HOME-BRAND — first three sections recoloured to the logo
   ==========================================================================

   The first three bands were all the same muddy lavender:
       hero     rgb(107, 88, 168)
       offers   rgb( 90, 82, 181)
       hosting  rgb(122, 86, 189)
   so they read as one long block and nothing separated them.

   None of that purple is in the logo. The logo is a magenta-to-blue sweep
   with deep navy for "India Hub" — measured from Logo.png:
       navy     #004890    magenta #D80078
       royal    #1878C0    plum    #A81878
       cyan     #0090D8

   Now three clearly different bands, all from that palette:
       1. hero     deep navy        (dark)
       2. offers   cool paper       (light)
       3. hosting  deep magenta-plum (dark, a different hue from 1)

   Specificity: cih-color.css sets these with !important at
   .cih-hero.cih-hero.cih-hero and
   .cih-page.cih-page > .main-container.main-container. The rules below
   match or exceed that, and this file loads last, so they win.
   ========================================================================== */

:root {
    --brand-navy:     #0A2350;
    --brand-navy-2:   #0E3A7A;
    --brand-royal:    #1878C0;
    --brand-cyan:     #0090D8;
    --brand-magenta:  #D80078;
    --brand-plum:     #7A1462;
    --brand-plum-2:   #A81878;
}

/* ---- 1. Hero — deep navy, with the logo's magenta and cyan as soft glows */

/* The hero is BODY > MAIN > SECTION.cih-hero — it sits OUTSIDE .cih-page,
   so these are anchored on main rather than .cih-page. (0,4,1) beats
   cih-color.css's .cih-hero.cih-hero.cih-hero (0,3,0) !important. */
main > .cih-hero.cih-hero.cih-hero.cih-hero {
    background-color: var(--brand-navy) !important;
    background-image:
        radial-gradient(900px 520px at 8% 0%,   rgba(216, 0, 120, .28), transparent 62%),
        radial-gradient(820px 520px at 96% 6%,  rgba(0, 144, 216, .32), transparent 60%),
        linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%) !important;
    /* Same guard as the hosting band: never inherit a tile size. */
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0 0, 0 0, 0 0 !important;
}

/* The two drifting mesh blobs were violet and sky-blue. Recoloured to the
   logo so the motion stays but the hue stops fighting the brand. */
main .cih-hero .cih-hero__fx::before {
    background: radial-gradient(38% 44% at 18% 28%, rgba(216, 0, 120, .30), transparent 70%) !important;
}
main .cih-hero .cih-hero__fx::after {
    background: radial-gradient(36% 42% at 82% 22%, rgba(0, 144, 216, .30), transparent 70%) !important;
}

/* The white light sweep — removed.
   .cih-hero__fx > i was a 50%-white gradient bar crossing the hero every 11s.
   It also animated `left`, which forces a layout recalculation on every frame,
   so removing it is a performance win as well as a visual one. */
main .cih-hero .cih-hero__fx > i {
    display: none !important;
    animation: none !important;
}

/* ---- 2. Offer cards row — light, so it separates the two dark bands */

.cih-page.cih-page > .main-container.main-container.main-container {
    background-color: #F3F6FB !important;
    background-image: none !important;
}

/* White cards on a light band need a defined edge to stay distinct. */
.cih-page .main-container .cih-offer:not(.cih-offer--dark) {
    border: 1px solid #DCE4F0 !important;
    box-shadow: 0 10px 30px -18px rgba(10, 35, 80, .35) !important;
}

/* ---- 3. Hosting plans — deep magenta-plum, a different dark from the hero */

.cih-page.cih-page > section.hosting-section.hosting-section {
    background-color: var(--brand-plum) !important;
    background-image:
        radial-gradient(900px 500px at 90% 0%, rgba(0, 144, 216, .22), transparent 62%),
        linear-gradient(165deg, var(--brand-plum) 0%, #5A0E4C 100%) !important;
    /* The original tiled section-glyphs.svg with background-size: 640px 640px
       and background-repeat: repeat. Replacing only background-image left those
       in force, so the first gradient layer was sized to a 640px tile and
       repeated — hard vertical seams every 640px. Reset explicitly. */
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0 0, 0 0 !important;
}

/* Brand accents inside the hero */
main .cih-hero .cih-hero__title em,
main .cih-hero .cih-hero__title .accent {
    color: #FFD36A !important;
    -webkit-text-fill-color: #FFD36A !important;
}

@media (prefers-reduced-motion: reduce) {
    main .cih-hero .cih-hero__fx::before,
    main .cih-hero .cih-hero__fx::after { animation: none !important; }
}

/* ---- Primary buttons: logo magenta -> blue, instead of violet ------------

   The Search, Continue to Checkout and Book Now buttons were a violet
   gradient (#8B5CF6 -> #6D28D9). With the bands now navy and magenta, that
   violet was a third, unrelated hue. The logo's own magenta-to-blue sweep
   gives one consistent action colour across all three sections.
   ------------------------------------------------------------------------- */

main .cih-hero .cih-btn,
.cih-page .main-container .cih-offer__cta {
    background: linear-gradient(135deg, #D80078 0%, #1878C0 100%) !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 8px 20px -10px rgba(216, 0, 120, .6) !important;
}
main .cih-hero .cih-btn:hover,
.cih-page .main-container .cih-offer__cta:hover {
    filter: brightness(1.06);
}

/* Plan-card Book Now buttons live on a white card inside the magenta band.
   Scoped to .hosting-section so no other .btn-primary on the site changes. */
.cih-page .hosting-section .book-now-btn,
.cih-page .hosting-section .btn.btn-primary {
    background: linear-gradient(135deg, #D80078 0%, #1878C0 100%) !important;
    border: 0 !important;
    color: #fff !important;
}

/* The "Most popular" card was violet; now the logo's navy-to-royal, so it
   stands out against the magenta band instead of blending into it. */
/* index.blade.php sets this in an inline <style> in the body with
   .cih-page.cih-page .hosting-section .plan-card.popular (0,5,0) !important.
   Inline body styles load AFTER this stylesheet, so an equal selector loses —
   this needs strictly higher specificity: (0,6,0). */
.cih-page.cih-page .hosting-section.hosting-section .plan-card.popular {
    background: linear-gradient(160deg, #0E3A7A 0%, #1878C0 100%) !important;
    border-color: rgba(255, 255, 255, .25) !important;
}

/* ---- Offer row with no live campaign — centre the two remaining cards ----

   The row is a fixed 3-track grid (1fr 1.05fr 1.12fr). When no campaign is
   live, the dark offer card is not rendered, so the two remaining cards filled
   tracks 1 and 2 and track 3 sat empty — everything hugging the left edge.

   :has(> :last-child:nth-child(2)) matches a container with exactly two
   children, so the three-card layout is untouched whenever an offer is live.

   Specificity: (0,4,0) for the base selector + (0,2,0) from the :has()
   argument = (0,6,0), which beats the existing (0,4,0) !important rule.

   Desktop only. At 1080px and below the row is already a single column, so
   there is nothing to centre.

   Browsers without :has() keep the current left-aligned layout — nothing
   breaks, it just is not centred.
   ------------------------------------------------------------------------- */

@media (min-width: 1081px) {
    .cih-page.cih-page > .main-container.main-container:has(> :last-child:nth-child(2)) {
        grid-template-columns: repeat(2, minmax(0, 470px)) !important;
        justify-content: center !important;
    }

    /* A single remaining card, if that ever happens, centred too. */
    .cih-page.cih-page > .main-container.main-container:has(> :only-child) {
        grid-template-columns: minmax(0, 520px) !important;
        justify-content: center !important;
    }
}

/* The search button inside the domain card has no class of its own, so it
   was missed when the other buttons moved to the logo gradient. Targeted by
   position: the button that sits beside the domain input in an offer card. */
.cih-page .main-container .cih-offer input + button,
.cih-page .main-container .cih-offer form button[type="submit"] {
    background: linear-gradient(160deg, #D80078 0%, #1878C0 100%) !important;
    border: 0 !important;
    color: #fff !important;
}


/* ==========================================================================
   "Why register your domain with Cloud India Hub?"
   ==========================================================================

   Was a flat dusty pink (rgb 244,232,236) with plain white text-only cards.
   The cards have no visual anchor because their image line is commented out
   in index.blade.php, so each one is just a heading and a sentence.

   It also carried background-size: 640px 640px from a tiled glyph pattern —
   the same inherited-tile problem that put seams in the hosting band. Reset
   explicitly below.

   Kept light on purpose: it sits between two dark bands, and alternating
   dark/light is what stops the page reading as one block. Light, but with
   the logo's magenta and cyan as soft washes rather than a flat fill.

   Specificity: cih-color.css sets this at .cih-page.cih-page > .Why-Should.Why-Should
   (0,4,0) !important. This is (0,5,1).
   ========================================================================== */

.cih-page.cih-page > section.Why-Should.Why-Should {
    background-color: #F6F8FD !important;
    background-image:
        radial-gradient(760px 420px at 6% 0%,   rgba(216, 0, 120, .10), transparent 65%),
        radial-gradient(760px 460px at 96% 100%, rgba(0, 144, 216, .12), transparent 65%),
        linear-gradient(180deg, #FBFCFF 0%, #EEF3FB 100%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0 0, 0 0, 0 0 !important;
}

/* Heading accent: was an inline tomato-red bar (#FF6347), off-brand. */
/* (0,5,1): an existing rule forces this violet with !important. */
.cih-page.cih-page > .Why-Should.Why-Should .main-title > span {
    background: linear-gradient(90deg, #D80078, #1878C0) !important;
    height: 4px !important;
    border-radius: 4px !important;
}

/* ---- cards: a visual anchor without touching the data ------------------

   A numbered badge via a CSS counter, so every card gets one regardless of
   how many rows are in the database, plus the logo gradient as a top edge.
   ---------------------------------------------------------------------- */


.cih-page .Why-Should .domain-card {
    position: relative;
    background: #fff !important;
    border: 1px solid #E3E9F4 !important;
    border-radius: 16px !important;
    padding: 58px 26px 26px !important;
    box-shadow: 0 14px 34px -22px rgba(10, 35, 80, .45) !important;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}

.cih-page .Why-Should .domain-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, #D80078 0%, #1878C0 100%);
    /* index.blade.php already had this bar, but held at scaleX(0) and only
       revealed on hover — the same pattern as the footer social icons. Shown
       by default now, so the card has an edge before anyone interacts. */
    transform: none !important;
}

.cih-page .Why-Should .domain-card::after {
    /* Was a CSS counter (01, 02 ...). The carousel opens on item 2 — item 1 has
       empty content and sits off-screen — so the first visible card read "02".
       A single shield-check icon avoids numbering entirely. */
    content: "";
    position: absolute;
    top: 18px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 40px;
    border-radius: 12px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3A7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/><path d='M9 12l2 2 4-4'/></svg>") center / 22px 22px no-repeat,
        linear-gradient(135deg, rgba(216, 0, 120, .12), rgba(24, 120, 192, .16));
}

.cih-page .Why-Should .domain-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -22px rgba(10, 35, 80, .55) !important;
}

.cih-page .Why-Should .domain-card .card-title {
    color: #0A2350 !important;
    text-align: center !important;
}
.cih-page .Why-Should .domain-card .card-text {
    color: #4A5670 !important;
    text-align: center !important;
}

/* ---- carousel controls: were stock Bootstrap blue ---------------------- */

.cih-page .Why-Should .dots-container .dot {
    background: #C9D3E6 !important;
}
.cih-page .Why-Should .dots-container .dot.active {
    background: linear-gradient(90deg, #D80078, #1878C0) !important;
}

.cih-page.cih-page > .Why-Should.Why-Should .navigation-controls .nav-button {
    background: #fff !important;
    color: #0E3A7A !important;
    border: 1px solid #DCE4F0 !important;
}
.cih-page.cih-page > .Why-Should.Why-Should .navigation-controls .nav-button:hover {
    background: linear-gradient(135deg, #D80078, #1878C0) !important;
    color: #fff !important;
    border-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
    .cih-page .Why-Should .domain-card { transition: none; }
    .cih-page .Why-Should .domain-card:hover { transform: none; }
}


/* ==========================================================================
   Bottom of the page — re-rhythmed
   ==========================================================================

   The last four bands were near-identical near-black in a row:
       Reliable (7,10,36)  Launch (21,14,46)  FAQ (10,15,46)  Contact (21,14,46)
   and "Expert Support" above them was the old off-brand lavender (95,71,162).

   Now neighbours alternate, in logo colours:
       Expert Support  navy -> royal     dark
       Reliable        cool light        LIGHT
       Launch Faster   magenta -> blue   dark, vivid
       FAQ             cool light        LIGHT
       Contact         deep plum         dark

   SPECIFICITY — why every selector below is so heavy.
   Reliable and FAQ were built as dark sections. cih-sections.css forces their
   headings white with
       .cih-page.cih-page > section.feature-part1 :is(h1,h2,h3,h4) !important
   which is (0,3,2). My first pass used (0,3,0) and lost, which left
   "Uptime guarantee" as white text on a white card — 1.00:1, invisible. A
   contrast scan caught it. Every rule here is (0,6,0) or higher so it wins
   outright rather than by load order.
   ========================================================================== */

/* ---- Expert Support ------------------------------------------------------ */
/* cih-color.css reaches this band BY EXCLUSION — eight :not() clauses, each
   counting toward specificity — which puts it at (0,11,1) !important. My
   first selector was (0,7,1) and could never win. This mirrors the same
   exclusion with extra weight: (0,13,1). */
.cih-page.cih-page.cih-page > section.home-sec.home-sec:not(.hosting-section):not(.cih-services-section):not(.idx-vps):not(.Why-Should):not(.feature-part1):not(.cloud-hero):not(.faq-section):not(.cih-contact-cta) {
    background-color: #0A2350 !important;
    background-image:
        radial-gradient(760px 420px at 92% 0%, rgba(0, 144, 216, .30), transparent 62%),
        linear-gradient(160deg, #0A2350 0%, #0E3A7A 100%) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
}

/* ---- Reliable. Secure. Always. — LIGHT ----------------------------------- */
.cih-page.cih-page.cih-page > .feature-part1.feature-part1.feature-part1 {
    background-color: #F4F7FC !important;
    background-image:
        radial-gradient(700px 400px at 4% 0%,   rgba(216, 0, 120, .08), transparent 64%),
        radial-gradient(700px 420px at 98% 100%, rgba(0, 144, 216, .10), transparent 64%) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
}
.cih-page.cih-page > .feature-part1.feature-part1 .benefits-eyebrow.benefits-eyebrow {
    color: #1668AE !important; -webkit-text-fill-color: #1668AE !important; }
.cih-page.cih-page > .feature-part1.feature-part1 .benefits-title.benefits-title,
.cih-page.cih-page > .feature-part1.feature-part1 .benefits-title .w1.w1 {
    color: #0A2350 !important; -webkit-text-fill-color: #0A2350 !important; }
.cih-page.cih-page > .feature-part1.feature-part1 .benefits-title .w2.w2 {
    color: #B0005F !important; -webkit-text-fill-color: #B0005F !important; background: none !important; }
.cih-page.cih-page > .feature-part1.feature-part1 .benefits-title .w3.w3 {
    color: #1668AE !important; -webkit-text-fill-color: #1668AE !important; background: none !important; }
.cih-page.cih-page > .feature-part1.feature-part1 .benefits-standfirst.benefits-standfirst {
    color: #4A5670 !important; -webkit-text-fill-color: #4A5670 !important; }

.cih-page.cih-page > .feature-part1.feature-part1 .benefit-card.benefit-card {
    background: #FFFFFF !important;
    border: 1px solid #E1E8F3 !important;
    box-shadow: 0 14px 32px -22px rgba(10, 35, 80, .40) !important;
    backdrop-filter: none !important;
}
.cih-page.cih-page > .feature-part1.feature-part1 .benefit-heading.benefit-heading {
    color: #0A2350 !important; -webkit-text-fill-color: #0A2350 !important; }
.cih-page.cih-page > .feature-part1.feature-part1 .benefit-text.benefit-text,
.cih-page.cih-page > .feature-part1.feature-part1 .benefit-text.benefit-text p {
    color: #4A5670 !important; -webkit-text-fill-color: #4A5670 !important; }
.cih-page.cih-page > .feature-part1.feature-part1 .benefits-arc.benefits-arc,
.cih-page.cih-page > .feature-part1.feature-part1 .benefits-dots.benefits-dots { opacity: .25 !important; }

/* ---- Launch Faster — the logo gradient ----------------------------------- */
.cih-page.cih-page.cih-page > .cloud-hero.cloud-hero.cloud-hero {
    background-color: #6E1466 !important;
    background-image:
        radial-gradient(640px 380px at 90% 10%, rgba(0, 144, 216, .30), transparent 62%),
        linear-gradient(120deg, #8A0E64 0%, #4E1670 50%, #10457F 100%) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
}
/* Body copy was a pale lavender (167,157,207) — 3.98:1 on the new ground,
   just under the line. Lifted to a near-white. */
.cih-page.cih-page > .cloud-hero.cloud-hero p,
.cih-page.cih-page > .cloud-hero.cloud-hero small,
.cih-page.cih-page > .cloud-hero.cloud-hero li {
    color: #EDE6F7 !important; -webkit-text-fill-color: #EDE6F7 !important; }

/* ---- FAQ — LIGHT --------------------------------------------------------- */
.cih-page.cih-page.cih-page > .faq-section.faq-section.faq-section {
    background-color: #F4F7FC !important;
    background-image:
        radial-gradient(700px 420px at 96% 0%,  rgba(0, 144, 216, .10), transparent 64%),
        radial-gradient(700px 400px at 2% 100%, rgba(216, 0, 120, .08), transparent 64%) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
}
.cih-page.cih-page > .faq-section.faq-section .faq-eyebrow.faq-eyebrow {
    color: #1668AE !important; -webkit-text-fill-color: #1668AE !important; }
.cih-page.cih-page > .faq-section.faq-section .faq-title.faq-title {
    color: #0A2350 !important; -webkit-text-fill-color: #0A2350 !important; }
.cih-page.cih-page > .faq-section.faq-section .faq-title.faq-title span,
.cih-page.cih-page > .faq-section.faq-section .faq-title.faq-title em {
    color: #B0005F !important; -webkit-text-fill-color: #B0005F !important; background: none !important; }
.cih-page.cih-page > .faq-section.faq-section .faq-standfirst.faq-standfirst {
    color: #4A5670 !important; -webkit-text-fill-color: #4A5670 !important; }

.cih-page.cih-page > .faq-section.faq-section .faq-item.faq-item {
    background: #FFFFFF !important;
    border: 1px solid #E1E8F3 !important;
    box-shadow: 0 12px 28px -22px rgba(10, 35, 80, .40) !important;
    backdrop-filter: none !important;
}
.cih-page.cih-page > .faq-section.faq-section .faq-question.faq-question,
.cih-page.cih-page > .faq-section.faq-section .faq-q.faq-q {
    color: #0A2350 !important; -webkit-text-fill-color: #0A2350 !important; }
.cih-page.cih-page > .faq-section.faq-section .faq-a-inner.faq-a-inner,
.cih-page.cih-page > .faq-section.faq-section .faq-a-inner.faq-a-inner p,
.cih-page.cih-page > .faq-section.faq-section .faq-a-inner.faq-a-inner li {
    color: #4A5670 !important; -webkit-text-fill-color: #4A5670 !important; }
.cih-page.cih-page > .faq-section.faq-section .faq-chev.faq-chev { color: #1668AE !important; }
.cih-page.cih-page > .faq-section.faq-section .faq-arc.faq-arc,
.cih-page.cih-page > .faq-section.faq-section .faq-dots.faq-dots { opacity: .25 !important; }

/* ---- Contact — deep plum ------------------------------------------------- */
.cih-page.cih-page.cih-page > .cih-contact-cta.cih-contact-cta.cih-contact-cta {
    background-color: #5A0E4C !important;
    background-image:
        radial-gradient(700px 400px at 10% 0%, rgba(216, 0, 120, .35), transparent 62%),
        linear-gradient(165deg, #6E1260 0%, #3E0A40 100%) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
}

/* ---- Number badges, FAQ markers, buttons in the re-rhythmed sections ------

   The 01-06 badges were violet, orange and green at 90% opacity, built for a
   dark ground. On the new white cards, white text on them fell to between
   2.15:1 and 4.2:1. Now one logo gradient, both ends deep enough for white:
   #B0005F is 6.2:1 and #1668AE is 5.3:1 against white text.
   ------------------------------------------------------------------------- */
.cih-page.cih-page > .feature-part1.feature-part1 .benefit-num.benefit-num,
.cih-page.cih-page > .faq-section.faq-section .faq-num.faq-num,
.cih-page.cih-page > .faq-section.faq-section .faq-mark.faq-mark {
    background: linear-gradient(135deg, #B0005F 0%, #1668AE 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 0 !important;
}

.cih-page.cih-page > .faq-section.faq-section .faq-more-btn.faq-more-btn,
.cih-page.cih-page.cih-page > section.home-sec.home-sec:not(.hosting-section):not(.cih-services-section):not(.idx-vps):not(.Why-Should):not(.feature-part1):not(.cloud-hero):not(.faq-section):not(.cih-contact-cta) a.btn,
.cih-page.cih-page.cih-page > section.home-sec.home-sec:not(.hosting-section):not(.cih-services-section):not(.idx-vps):not(.Why-Should):not(.feature-part1):not(.cloud-hero):not(.faq-section):not(.cih-contact-cta) button {
    background: linear-gradient(135deg, #B0005F 0%, #1668AE 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 0 !important;
}

/* ---- Section dividers — curves re-matched to the new neighbours ---------

   Each .cih-divider draws a curve continuing the section above
   (--divider-above) and one continuing the section below (--divider-below).
   Both were set for the old near-black bands, so once Reliable and FAQ
   turned light, the curves showed as thick black swooshes at every join.

   Light neighbour -> the same light tone, so the curve blends away.
   Dark neighbour  -> that section's colour at the edge it meets.
   ------------------------------------------------------------------------- */
.cih-page.cih-page.cih-page > .cih-divider.cih-divider--benefits-cloud {
    --divider-above: #F4F7FC;   /* Reliable, now light */
    --divider-below: #7C1166;   /* Launch, magenta end of its gradient */
}
.cih-page.cih-page.cih-page > .cih-divider.cih-divider--cloud-faq {
    --divider-above: #2A2C78;   /* Launch, lower edge */
    --divider-below: #F4F7FC;   /* FAQ, now light */
}
.cih-page.cih-page.cih-page > .cih-divider.cih-divider--faq-contact {
    --divider-above: #F4F7FC;   /* FAQ, now light */
    --divider-below: #6E1260;   /* Contact, top edge of its gradient */
}

/* ---- The three remaining violet CTAs ------------------------------------

   "Contact us" has no class — only an inline background: #667eea — so it is
   matched by its link inside the Support band. An !important stylesheet rule
   beats a non-important inline style. It was also 3.66:1 white-on-blue.
   ------------------------------------------------------------------------- */
.cih-page.cih-page.cih-page > section.home-sec.home-sec:not(.hosting-section):not(.cih-services-section):not(.idx-vps):not(.Why-Should):not(.feature-part1):not(.cloud-hero):not(.faq-section):not(.cih-contact-cta) a[href*="contact-us"],
.cih-page.cih-page > .cloud-hero.cloud-hero .cloud-hero__btn.cloud-hero__btn,
.cih-page.cih-page > .cih-contact-cta.cih-contact-cta .cih-cta-primary.cih-cta-primary {
    background: linear-gradient(135deg, #B0005F 0%, #1668AE 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 0 !important;
}