/* ==========================================================================
   Cloud India Hub — Homepage layout system
   File: public/frontend/css/home-layout.css
   Load LAST (after cih-sections.css / cih-theme.css / hero-search.css).

   PURPOSE
   -------
   Structure only. No colour, no copy, no JS hooks are changed here.
   This file exists because the homepage was assembled section by section
   over time, so it carried six different container widths (1400 / 1240 /
   1200 / 960 / bootstrap .container / container-fluid), section padding
   ranging from 9px to 80px, and five different section-title sizes.

   Everything below is scoped under `.cih-page` (the homepage wrapper) so it
   has specificity 0,2,0 and reliably beats the page's own in-body <style>
   blocks (0,1,0) without needing !important, and so no other page on the
   site is affected.
   ========================================================================== */

.cih-page {
    /* --- Spacing scale. 4px base. Everything on the page snaps to this. --- */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    /* --- Vertical rhythm ------------------------------------------------
       One value drives every section's top/bottom padding. Fluid, so the
       page breathes on desktop and tightens on mobile without a stack of
       breakpoint overrides. */
    --sec-y: clamp(56px, 4.4vw + 28px, 96px);
    --sec-y-tight: clamp(40px, 3vw + 22px, 64px);

    /* Gap between a section's header block and its content. */
    --sec-head-gap: clamp(32px, 2.4vw + 20px, 56px);

    /* --- Containers -----------------------------------------------------
       Two widths only. Wide for card grids, narrow for prose/CTA. */
    --wrap: 1240px;
    --wrap-narrow: 880px;
    --gutter: clamp(16px, 3.2vw, 32px);

    /* --- Grid gaps ------------------------------------------------------ */
    --grid-gap: clamp(16px, 1.6vw + 8px, 28px);

    /* --- Type scale ----------------------------------------------------- */
    --fs-h2: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
    --fs-card-title: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-lead: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
    --fs-body: 1rem;
    --fs-small: 0.9375rem;

    --lh-tight: 1.18;
    --lh-head: 1.28;
    --lh-body: 1.65;

    --radius-card: 16px;

    /* --- Heading roles --------------------------------------------------
       cih-sections.css sizes headings by tag with !important, which meant an
       <h3> section title rendered smaller than an <h2> card title. It now
       reads --h-display / --h-sub instead, so the size is decided by what a
       heading IS rather than which tag it uses. Custom properties inherit,
       so these are set per scope below with no specificity conflict. */
    --h-display: var(--fs-h3);
    --h-sub: var(--fs-card-title);
    --h-display-lh: var(--lh-head);
    --h-sub-lh: 1.35;

    /* Consumed by the .container / .container-fluid rule in cih-sections.css,
       which previously hard-zeroed the side padding — content ran to the
       viewport edge on mobile. */
    --container-w: 1240px;
    --container-pad: var(--gutter);
}

/* A section header is the only place that gets display size, whatever tag
   the section happens to use. */
.cih-page .home-head,
.cih-page .pricing-header,
.cih-page .section-heading,
.cih-page .header-section,
.cih-page .hosting-tab-container > h2,
.cih-page .cih-services-section > .home-wrap > h2,
.cih-page .cih-services-section > h2,
.cih-page .cih-contact-cta > .home-wrap {
    --h-display: var(--fs-h2);
    --h-sub: var(--fs-h2);
    --h-sub-lh: var(--lh-head);
}

/* Cards never carry display size, however deep their heading tag is. */
.cih-page .home-card,
.cih-page .plan-card,
.cih-page .cih-service-card,
.cih-page .vps-preview-plan,
.cih-page .faq-item,
.cih-page .domain-card-available,
.cih-page .feature-wrap {
    --h-display: var(--fs-h3);
    --h-sub: var(--fs-card-title);
    --h-display-lh: 1.3;
}

/* --------------------------------------------------------------------------
   Hand the rhythm knob to this file.

   cih-sections.css applies `padding-block: var(--cih-band) !important` to every
   direct child of .cih-page, so --cih-band — not any padding rule written here —
   is what actually decides section height. Pointing it at --sec-y makes the two
   systems one system instead of two competing ones.

   Note both values are in px on purpose. home-page.css sets `html { font-size:
   14px }` below 790px, so every rem-based length on the site silently shrinks
   12.5% on tablet and phone. That is why the old --cih-band: 2.5rem measured
   35px rather than 40px, and why spacing that looked right on desktop came out
   tight on mobile. Spacing tokens stay in px so the scale means what it says.
   -------------------------------------------------------------------------- */

.cih-page.cih-page {
    --cih-band: var(--sec-y);
    --cih-gutter: var(--gutter);
}

/* ==========================================================================
   1. Section rhythm
   Every top-level section gets the same vertical padding, and a section
   never carries its own margin — margins between sections were the main
   source of collapsed/doubled gaps.
   ========================================================================== */

.cih-page .home-sec {
    padding-top: var(--sec-y);
    padding-bottom: var(--sec-y);
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    position: relative;
}

/* Sections that sit on the same background colour as their neighbour
   should not double up the gap between them — the pair reads as one band. */
.cih-page .home-sec--tight {
    padding-top: var(--sec-y-tight);
    padding-bottom: var(--sec-y-tight);
}

.cih-page .home-sec--flush-top {
    padding-top: 0;
}

.cih-page .home-sec--flush-bottom {
    padding-bottom: 0;
}

/* ==========================================================================
   2. Containers
   ========================================================================== */

.cih-page .home-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
    box-sizing: border-box;
}

.cih-page .home-wrap--narrow {
    max-width: var(--wrap-narrow);
}

/* Bring the legacy containers on this page onto the same width and gutter
   so section edges line up vertically down the whole page. */
.cih-page .container,
.cih-page .container-fluid,
.cih-page .hosting-tab-container,
.cih-page .cih-services-grid,
.cih-page .pricing-controls,
.cih-page .plans-grid {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
    box-sizing: border-box;
}

/* A container nested directly inside another container must not add a
   second gutter — that was pushing content inward by up to 64px in the
   "Why register" and benefits sections. */
.cih-page .container .container,
.cih-page .container .container-fluid,
.cih-page .container-fluid .container-fluid {
    max-width: 100%;
    padding-inline: 0;
}

/* The countdown + domain-result row above the fold sat at 1400px with its own
   40px/20px padding, so it did not line up with anything below it. */
.cih-page .main-container {
    max-width: var(--wrap);
    margin-inline: auto;
    padding: var(--sec-y-tight) var(--gutter);
    gap: var(--grid-gap);
    box-sizing: border-box;
}

.cih-page .main-container > * {
    min-width: 0;
}

/* ==========================================================================
   3. Section headers
   Title + subtitle share one size, one measure, one gap to the content.
   ========================================================================== */

.cih-page .home-head {
    text-align: center;
    margin: 0 0 var(--sec-head-gap);
}

.cih-page .home-head > *:last-child {
    margin-bottom: 0;
}

.cih-page .home-title,
.cih-page .home-sec > .home-wrap > .home-head > h1,
.cih-page .home-sec .home-head h1,
.cih-page .home-sec .home-head h2,
.cih-page .home-sec .home-head h3 {
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
}

.cih-page .home-sub,
.cih-page .home-sec .home-head p {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    max-width: 62ch;
    margin: 0 auto;
}

/* Legacy titles that are not inside a .home-head still get the scale, so
   the page has one heading size regardless of which section you look at. */
.cih-page .home-sec > .home-wrap > h2,
.cih-page .hosting-tab-container > h2,
.cih-page .cih-services-section h2,
.cih-page .pricing-title,
.cih-page .domain-carousel .main-title,
.cih-page .section-heading h2 {
    margin-top: 0;
    margin-bottom: var(--sp-4);
    text-wrap: balance;
}

.cih-page .pricing-subtitle,
.cih-page .cih-services-section .cih-services-sub,
.cih-page .domain-carousel .main-title + p {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    max-width: 62ch;
    margin-inline: auto;
}

/* The "Hosting for every stage" / "Flexible hosting plans" pair were two
   sibling h2s with default browser margins stacked on top of each other. */
.cih-page .hosting-tab-container > h2 + h2 {
    --h-display: var(--fs-h3);
    margin-top: calc(var(--sp-2) * -1);
    font-weight: 600;
    opacity: 0.75;
}

/* ==========================================================================
   4. Section-level padding resets
   These sections previously set their own vertical padding in an in-body
   <style> block. They now defer to --sec-y so the rhythm holds.
   ========================================================================== */

.cih-page .cih-services-section,
.cih-page .hosting-section,
.cih-page .Why-Should,
.cih-page .feature-part1,
.cih-page .cih-contact-cta {
    padding-top: var(--sec-y);
    padding-bottom: var(--sec-y);
}

.cih-page .cih-services-section .cih-services-sub {
    margin-bottom: var(--sec-head-gap);
}

.cih-page .cih-services-section .cih-services-eyebrow {
    margin-bottom: var(--sp-3);
}

.cih-page .pricing-header {
    margin-bottom: var(--sec-head-gap);
}

.cih-page .pricing-controls {
    margin: 0 auto var(--sp-10);
}

/* ==========================================================================
   5. Card grids — equal heights, consistent gaps
   Uneven card heights were the loudest "individually built" tell: the
   pricing, VPS, services and benefit grids each had a different gap and
   none of them stretched their cards.
   ========================================================================== */

.cih-page .cih-services-grid,
.cih-page .plans-grid,
.cih-page .home-grid {
    gap: var(--grid-gap);
    align-items: stretch;
}

.cih-page .row.g-4 {
    --bs-gutter-x: var(--grid-gap);
    --bs-gutter-y: var(--grid-gap);
    align-items: stretch;
}

.cih-page .cih-service-card,
.cih-page .plan-card,
.cih-page .home-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 1.4vw + 18px, 32px);
    box-sizing: border-box;
}

/* Push the CTA to the bottom edge of every card so buttons align across a
   row even when the copy above them differs in length. */
.cih-page .cih-service-card > :last-child,
.cih-page .plan-card > .btn,
.cih-page .plan-card > a.btn,
.cih-page .home-card > .home-card__cta {
    margin-top: auto;
}

/* Bootstrap columns holding cards need to stretch too, or the card's
   height:100% has nothing to fill. */
.cih-page .row > [class*="col-"] {
    display: flex;
}

.cih-page .row > [class*="col-"] > * {
    width: 100%;
}

/* The "Get expert support" section capped its left card at 340px, which
   clipped content on tablet and left a ragged edge against the form. */
.cih-page .home-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 2.2vw + 12px, 40px);
    align-items: stretch;
}

.cih-page .home-split > * {
    max-height: none;
    min-width: 0;
}

/* FAQ items: one gap value, and a floor on the card so short answers
   don't produce a jagged final row. */
.cih-page .faq-grid {
    gap: var(--grid-gap);
}

.cih-page .faq-item {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   6. Vertical rhythm inside sections
   ========================================================================== */

.cih-page .home-sec p {
    line-height: var(--lh-body);
}

.cih-page .home-stack > * + * {
    margin-top: var(--sp-4);
}

/* Kill the stray <br> spacers and rogue top margins the page used instead
   of a spacing system. */
.cih-page .home-sec > br,
.cih-page > br {
    display: none;
}

.cih-page .home-sec > :first-child:not(style):not(script) {
    margin-top: 0;
}

.cih-page .home-sec > :last-child:not(style):not(script) {
    margin-bottom: 0;
}

/* ==========================================================================
   7. Full-bleed strips (scrolling offer banner, CTA band)
   These should span edge to edge but keep the same internal gutter.
   ========================================================================== */

.cih-page .home-strip {
    padding-block: var(--sp-5);
}

.cih-page .cih-contact-cta {
    padding-inline: var(--gutter);
}

/* ==========================================================================
   8. Responsive
   Container width, section rhythm and grid columns step down together, so
   the proportions stay the same rather than each section reflowing on its
   own breakpoint.
   ========================================================================== */

@media (max-width: 1200px) {
    .cih-page .cih-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .cih-page {
        --sec-y: clamp(48px, 5vw + 20px, 72px);
        --sec-head-gap: 36px;
    }

    .cih-page .home-split {
        grid-template-columns: 1fr;
    }

    .cih-page .main-container {
        flex-direction: column;
    }

    .cih-page .main-container > * {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .cih-page {
        --sec-y: 48px;
        --sec-y-tight: 36px;
        --sec-head-gap: 28px;
        --gutter: 20px;
        --grid-gap: 16px;
    }

    .cih-page .cih-services-grid {
        grid-template-columns: 1fr;
    }

    .cih-page .row > [class*="col-"] {
        display: block;
    }

    .cih-page .cih-service-card,
    .cih-page .plan-card,
    .cih-page .home-card {
        height: auto;
        padding: 24px 20px;
    }

    .cih-page .home-head {
        text-align: left;
    }

    .cih-page .home-sub,
    .cih-page .home-sec .home-head p {
        margin-inline: 0;
    }
}

@media (max-width: 480px) {
    .cih-page {
        --sec-y: 40px;
        --sec-y-tight: 32px;
        --gutter: 16px;
    }
}

/* ==========================================================================
   9. Quality floor
   ========================================================================== */

.cih-page a:focus-visible,
.cih-page button:focus-visible,
.cih-page input:focus-visible,
.cih-page select:focus-visible,
.cih-page textarea:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cih-page *,
    .cih-page *::before,
    .cih-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   10. Domain benefits section — rebuilt to the supplied reference

   Why this was rebuilt rather than tweaked
   ----------------------------------------
   The cards were white with an inline `color: #1a1a4d` on their <h4>, but
   cih-sections.css sets

       .cih-page.cih-page > section.feature-part1 :is(h1,h2,h3,h4,.main-title)
       { color: #fff !important }

   for every heading inside this dark section. `!important` beat the inline
   colour, so every card title rendered white on white and was invisible on
   the live site. Dark cards make the forced-white heading correct instead of
   fighting it, so the rule can stay as-is for the other dark sections.

   Layout is a uniform image-left / text-right card at every position. The
   reference varies card 01 (image on top, heading beneath) from the other
   five; that inconsistency is the thing this pass exists to remove, so the
   grid is regular. Nothing else about the reference treatment changed.
   ========================================================================== */

.cih-page.cih-page > section.feature-part1 {
    /* Six accents, cycled by position. Colour here is positional, not
       semantic — the benefits are an unordered set, so no accent means
       anything on its own; the variation exists to keep six near-identical
       cards from reading as one grey mass. */
    --b1: 168, 85, 247;
    --b2: 59, 130, 246;
    --b3: 16, 185, 129;
    --b4: 245, 158, 11;
    --b5: 139, 92, 246;
    --b6: 37, 99, 235;

    --benefit-ground: #070a24;

    background-color: var(--benefit-ground) !important;
    background-image:
        radial-gradient(70rem 34rem at 78% -12%, #1a1152 0%, rgba(26, 17, 82, 0) 62%),
        radial-gradient(52rem 28rem at 2% 108%, #101a4e 0%, rgba(16, 26, 78, 0) 60%) !important;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* Decorative arc and dot field, matching the reference. Both are inert. */
.cih-page .benefits-arc,
.cih-page .benefits-dots {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.cih-page .benefits-arc {
    inset: -20% auto -20% -18%;
    width: 46%;
    border-right: 1px solid rgba(139, 92, 246, 0.38);
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

.cih-page .benefits-dots {
    top: 6%;
    right: 0;
    width: 26%;
    height: 46%;
    background-image: radial-gradient(rgba(125, 155, 255, 0.5) 1px, transparent 1px);
    background-size: 15px 15px;
    -webkit-mask-image: linear-gradient(255deg, #000 8%, transparent 68%);
    mask-image: linear-gradient(255deg, #000 8%, transparent 68%);
    opacity: 0.55;
}

/* ---- Section header ---------------------------------------------------- */

.cih-page .benefits-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: var(--sec-head-gap);
}

.cih-page .benefits-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6f8dff;
    margin: 0 0 var(--sp-3);
}

.cih-page .benefits-title {
    --h-display: clamp(2rem, 1.1rem + 2.9vw, 3.25rem);
    --h-display-lh: 1.1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.4em;
    margin: 0 0 var(--sp-4);
}

.cih-page .benefits-title .w1 { color: #ffffff; }
.cih-page .benefits-title .w2 { color: #a78bfa; }
.cih-page .benefits-title .w3 { color: #56b8f5; }

.cih-page .benefits-standfirst {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #b9c2e8 !important;
    max-width: 52ch;
    margin: 0 auto;
}

/* ---- Card grid --------------------------------------------------------- */

.cih-page .benefits-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: stretch;
}

.cih-page .benefit-card {
    --accent: var(--b1);
    --h-sub: var(--fs-card-title);
    --h-sub-lh: 1.3;

    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-6);
    border-radius: 18px;
    border: 1px solid rgba(var(--accent), 0.42);
    background:
        linear-gradient(152deg, rgba(var(--accent), 0.16) 0%, rgba(var(--accent), 0.03) 46%, rgba(7, 10, 36, 0.55) 100%),
        rgba(9, 13, 42, 0.72);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.cih-page .benefits-grid > :nth-child(6n + 1) { --accent: var(--b1); }
.cih-page .benefits-grid > :nth-child(6n + 2) { --accent: var(--b2); }
.cih-page .benefits-grid > :nth-child(6n + 3) { --accent: var(--b3); }
.cih-page .benefits-grid > :nth-child(6n + 4) { --accent: var(--b4); }
.cih-page .benefits-grid > :nth-child(6n + 5) { --accent: var(--b5); }
.cih-page .benefits-grid > :nth-child(6n + 6) { --accent: var(--b6); }

.cih-page .benefit-card:hover,
.cih-page .benefit-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(var(--accent), 0.85);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 18px 40px -18px rgba(var(--accent), 0.6);
}

.cih-page .benefit-num {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    min-width: 40px;
    padding: 5px 9px;
    border-radius: 9px;
    background: rgba(var(--accent), 0.9);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.4;
}

.cih-page .benefit-media {
    width: 96px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(var(--accent), 0.1);
    border: 1px solid rgba(var(--accent), 0.22);
    overflow: hidden;
}

.cih-page .benefit-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

.cih-page .benefit-heading {
    color: #ffffff !important;
    margin: 0 0 var(--sp-2);
    padding-right: 46px;
}

.cih-page .benefit-text,
.cih-page .benefit-text p {
    font-size: 0.9375rem;
    line-height: 1.62;
    color: #aab4dd !important;
    margin: 0;
}

.cih-page .benefit-text p + p {
    margin-top: var(--sp-2);
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1100px) {
    .cih-page .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .cih-page .benefits-grid {
        grid-template-columns: 1fr;
    }

    .cih-page .benefit-card {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: var(--sp-4);
        padding: var(--sp-5);
    }

    .cih-page .benefit-media {
        width: 84px;
    }

    .cih-page .benefits-head {
        text-align: left;
    }

    .cih-page .benefits-title {
        justify-content: flex-start;
    }

    .cih-page .benefits-standfirst {
        margin-inline: 0;
    }

    .cih-page .benefits-dots {
        display: none;
    }
}

/* ==========================================================================
   11. FAQ section — rebuilt to the supplied reference

   Rhythm note: cih-sections.css alternates section grounds white / pale
   violet via :nth-of-type(even), and forces both with !important. Turning
   this section dark puts three dark bands in a row — benefits, FAQ, contact
   CTA — so the light/dark alternation the previous author built is gone
   across the bottom third of the page. The three grounds are pitched
   slightly apart below so the seams still read, but if the page starts
   feeling bottom-heavy, this section is the one to pull back to light.
   ========================================================================== */

.cih-page.cih-page > section.faq-section {
    --faq-ground: #0a0f2e;

    background-color: var(--faq-ground) !important;
    background-image:
        radial-gradient(58rem 30rem at 88% 8%, #221a5c 0%, rgba(34, 26, 92, 0) 60%),
        radial-gradient(46rem 26rem at 4% 92%, #14205a 0%, rgba(20, 32, 90, 0) 58%) !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cih-page .faq-section :is(h3, h4) {
    color: #ffffff;
}

.cih-page .faq-arc,
.cih-page .faq-dots {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.cih-page .faq-arc {
    inset: -30% auto 40% -22%;
    width: 44%;
    border-right: 1px solid rgba(219, 62, 177, 0.34);
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

.cih-page .faq-dots {
    left: 0;
    bottom: 4%;
    width: 22%;
    height: 34%;
    background-image: radial-gradient(rgba(125, 155, 255, 0.45) 1px, transparent 1px);
    background-size: 15px 15px;
    -webkit-mask-image: linear-gradient(60deg, #000 10%, transparent 70%);
    mask-image: linear-gradient(60deg, #000 10%, transparent 70%);
    opacity: 0.5;
}

/* ---- Header ------------------------------------------------------------ */

.cih-page .faq-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: var(--sec-head-gap);
}

.cih-page .faq-eyebrow {
    display: inline-block;
    margin: 0 0 var(--sp-5);
    padding: 8px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #cdd6ff !important;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cih-page .faq-title {
    --h-sub: clamp(2rem, 1.1rem + 2.9vw, 3.25rem);
    --h-sub-lh: 1.12;
    color: #ffffff;
    margin: 0 0 var(--sp-4);
}

.cih-page .faq-title span {
    color: #9b7cf6;
}

.cih-page .faq-standfirst {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #b4bee4 !important;
    max-width: 52ch;
    margin: 0 auto var(--sp-5);
}

/* Rule + dot under the standfirst. Purely a full stop on the header block. */
.cih-page .faq-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cih-page .faq-rule::before,
.cih-page .faq-rule::after {
    content: "";
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(155, 124, 246, 0), #9b7cf6);
}

.cih-page .faq-rule::after {
    background: linear-gradient(90deg, #4f8ef7, rgba(79, 142, 247, 0));
}

/* ---- Cards ------------------------------------------------------------- */

.cih-page .faq-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--grid-gap);
}

.cih-page .faq-item {
    --accent: 139, 92, 246;

    flex: 1 1 320px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid rgba(var(--accent), 0.42);
    background:
        linear-gradient(158deg, rgba(var(--accent), 0.13) 0%, rgba(var(--accent), 0.02) 44%, rgba(8, 12, 40, 0.6) 100%),
        rgba(10, 15, 46, 0.72);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cih-page .faq-grid > :nth-child(4n + 1) { --accent: 139, 92, 246; }
.cih-page .faq-grid > :nth-child(4n + 2) { --accent: 59, 130, 246; }
.cih-page .faq-grid > :nth-child(4n + 3) { --accent: 20, 184, 166; }
.cih-page .faq-grid > :nth-child(4n + 4) { --accent: 124, 92, 240; }

.cih-page .faq-item:hover,
.cih-page .faq-item:focus-within {
    border-color: rgba(var(--accent), 0.85);
    box-shadow: 0 18px 40px -20px rgba(var(--accent), 0.55);
}

.cih-page .faq-q {
    padding: var(--sp-6);
    cursor: pointer;
}

.cih-page .faq-q-top {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.cih-page .faq-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    background: linear-gradient(140deg, rgba(var(--accent), 1), rgba(var(--accent), 0.55));
    box-shadow: 0 6px 18px -8px rgba(var(--accent), 0.9);
}

.cih-page .faq-num {
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(var(--accent), 0.9);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.cih-page .faq-chev {
    margin-left: auto;
    color: rgba(var(--accent), 1);
    font-size: 15px;
    transition: transform 0.3s ease;
}

.cih-page .faq-question {
    color: #ffffff;
    margin: 0;
    text-wrap: balance;
}

/* The answer wrapper is collapsed by inline max-height from toggleAnswer().
   Only the inner padding and the hairline live here so the JS keeps working
   exactly as it did. */
.cih-page .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.cih-page .faq-a-inner {
    padding: var(--sp-5) var(--sp-6) var(--sp-6);
    border-top: 1px solid rgba(var(--accent), 0.28);
}

.cih-page .faq-a-inner,
.cih-page .faq-a-inner p,
.cih-page .faq-a-inner li {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #aab4dd !important;
}

.cih-page .faq-a-inner > :first-child { margin-top: 0; }
.cih-page .faq-a-inner > :last-child { margin-bottom: 0; }

/* ---- Footer link ------------------------------------------------------- */

.cih-page .faq-more {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: var(--sec-head-gap);
}

.cih-page .faq-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6d5cf0, #4f8ef7);
    color: #fff !important;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cih-page .faq-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -16px rgba(109, 92, 240, 0.9);
}

.cih-page .faq-more-btn i {
    font-size: 13px;
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 700px) {
    .cih-page .faq-head {
        text-align: left;
    }

    .cih-page .faq-standfirst {
        margin-inline: 0;
    }

    .cih-page .faq-rule {
        justify-content: flex-start;
    }

    .cih-page .faq-item {
        max-width: 100%;
    }

    .cih-page .faq-q {
        padding: var(--sp-5);
    }

    .cih-page .faq-a-inner {
        padding: var(--sp-4) var(--sp-5) var(--sp-5);
    }

    .cih-page .faq-dots {
        display: none;
    }
}

/* ==========================================================================
   12. Hero — proof panel + trust strip, to the supplied reference

   Scoped to .cih-hero, not .cih-page: the hero partial is included before
   the .cih-page wrapper opens, so it sits outside it. Doubled class for
   0,2,0 specificity to match hero-search.css, which this file loads after.
   ========================================================================== */

/* Rule + dot closing the headline block. */
.cih-hero.cih-hero .cih-hero__rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

.cih-hero.cih-hero .cih-hero__rule::before {
    content: "";
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(109, 40, 217, 0), var(--cih-brand, #6d28d9));
}

.cih-hero.cih-hero .cih-hero__rule::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cih-brand-lift, #8b5cf6);
}

/* ---- Proof panel ------------------------------------------------------- */

/* One card holding four cells, not four cards. The reference groups them
   behind a single surface with hairline separators, which reads as one
   statement about the company rather than four unrelated claims. */
.cih-hero.cih-hero .cih-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--cih-line, #e2dcf4);
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px rgba(21, 14, 46, 0.06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.cih-hero.cih-hero .cih-proof__item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.25rem clamp(0.75rem, 1.6vw, 1.5rem);
    text-align: left;
}

.cih-hero.cih-hero .cih-proof__item + .cih-proof__item {
    border-left: 1px solid var(--cih-line, #e2dcf4);
}

.cih-hero.cih-hero .cih-proof__icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cih-hue) 15%, #fff);
    color: var(--cih-hue);
}

.cih-hero.cih-hero .cih-proof__icon svg {
    width: 23px;
    height: 23px;
}

.cih-hero.cih-hero .cih-proof__body {
    min-width: 0;
}

.cih-hero.cih-hero .cih-proof__title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--cih-ink, #150e2e);
    margin: 0 0 0.3rem;
}

.cih-hero.cih-hero .cih-proof__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cih-muted, #5f5680);
}

/* ---- Trust strip ------------------------------------------------------- */

/* Sits on the page ground rather than a card, so it reads as a footnote to
   the panel above instead of competing with it. */
.cih-hero.cih-hero .cih-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-top: clamp(1.25rem, 2.4vw, 2rem);
    list-style: none;
}

.cih-hero.cih-hero .cih-trust li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.25rem clamp(0.75rem, 1.6vw, 1.5rem);
    font-weight: 400;
}

.cih-hero.cih-hero .cih-trust li + li {
    border-left: 1px solid var(--cih-line, #e2dcf4);
}

.cih-hero.cih-hero .cih-trust__icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cih-brand-wash, #ede9fe);
    color: var(--cih-brand, #6d28d9);
}

.cih-hero.cih-hero .cih-trust__icon svg {
    width: 21px;
    height: 21px;
}

.cih-hero.cih-hero .cih-trust__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cih-hero.cih-hero .cih-trust__body strong {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--cih-ink, #150e2e);
}

.cih-hero.cih-hero .cih-trust__body span {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--cih-muted, #5f5680);
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1100px) {
    .cih-hero.cih-hero .cih-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 0;
    }

    .cih-hero.cih-hero .cih-proof__item:nth-child(odd) {
        border-left: 0;
    }
}

@media (max-width: 820px) {
    .cih-hero.cih-hero .cih-trust {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .cih-hero.cih-hero .cih-trust li {
        padding-inline: 0;
    }

    .cih-hero.cih-hero .cih-trust li + li {
        border-left: 0;
    }
}

@media (max-width: 560px) {
    .cih-hero.cih-hero .cih-proof {
        grid-template-columns: 1fr;
        gap: 1rem 0;
        padding: 1.1rem;
    }

    .cih-hero.cih-hero .cih-proof__item {
        border-left: 0 !important;
        padding-inline: 0;
    }

    /* The <br> stays. display:none on a <br> concatenates the words either
       side of it with no space — "across Indiaregister with us". */
    .cih-hero.cih-hero .cih-hero__rule {
        display: none;
    }
}

/* ==========================================================================
   13. Fixes
   ========================================================================== */

/* ---- (1) Light divider band between benefits and FAQ -------------------

   cih-sections.css applies `padding-block: var(--cih-band) !important` to
   every direct child of .cih-page, section or div alike, so the band has to
   opt out explicitly or it inherits 91px of section padding and stops being
   a divider.

   The two SVG curves are filled with the grounds of the sections either
   side, so the light band looks cut out of them rather than laid on top.
   Change --divider-above / --divider-below if either ground moves. */
.cih-page.cih-page > .cih-divider {
    --divider-above: #070a24;
    --divider-below: #0a0f2e;

    position: relative;
    display: block;
    padding: 0 !important;
    margin: 0;
    height: clamp(84px, 8vw, 132px);
    background: linear-gradient(180deg, #f5f4ff 0%, #ffffff 48%, #f3f6ff 100%);
    overflow: hidden;
}

/* FAQ -> contact CTA. The contact section's ground is a 135deg gradient
   running #05061f -> #12154a, so the curve is cut from the colour at its
   TOP edge, not the average of the whole gradient. */
.cih-page.cih-page > .cih-divider--faq-contact {
    --divider-above: #0a0f2e;
    --divider-below: #06081f;
    background: linear-gradient(180deg, #f3f6ff 0%, #ffffff 48%, #f5f4ff 100%);
}

.cih-page .cih-divider__top,
.cih-page .cih-divider__bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(16px, 1.7vw, 26px);
    display: block;
}

.cih-page .cih-divider__top {
    top: 0;
    fill: var(--divider-above);
}

.cih-page .cih-divider__bottom {
    bottom: 0;
    fill: var(--divider-below);
}

/* Small centre mark so the band reads as deliberate rather than as a gap
   something failed to fill. */
.cih-page .cih-divider__mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cih-page .cih-divider__mark i {
    display: block;
    width: clamp(28px, 4vw, 56px);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0), #8b5cf6);
}

.cih-page .cih-divider__mark i:last-child {
    background: linear-gradient(90deg, #56b8f5, rgba(86, 184, 245, 0));
}

.cih-page .cih-divider__mark b {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient(135deg, #8b5cf6, #56b8f5);
    transform: rotate(45deg);
}

/* ---- (2) VPS slider dots colliding with the CTA ------------------------
   .plans-dots carried `margin-top: 2px` and the CTA block had no top margin
   at all, so on mobile the pagination dots sat directly against the "View
   All VPS Plans" button and the two overlapped once the button grew to fill
   the width. Both get real space, and the dots get a hit area tall enough
   to tap without catching the button underneath. */
.cih-page .plans-dots {
    margin: var(--sp-6) 0 0;
    padding: var(--sp-1) 0;
    position: relative;
    z-index: 1;
}

.cih-page #vps-plans-dots {
    margin-bottom: var(--sp-8);
}

.cih-page .vps-cta-wrap {
    margin-top: var(--sp-6);
}

@media (max-width: 768px) {
    .cih-page .plans-dots {
        margin-top: var(--sp-5);
        gap: 10px;
    }

    .cih-page #vps-plans-dots {
        margin-bottom: var(--sp-6);
    }

    /* The dots are 8px tall; a 44px tappable row keeps them reachable
       without moving them visually. */
    .cih-page .plans-dots span {
        position: relative;
    }

    .cih-page .plans-dots span::after {
        content: "";
        position: absolute;
        inset: -18px -6px;
    }

    .cih-page .vps-cta-wrap {
        margin-top: var(--sp-4);
    }
}

/* ==========================================================================
   14. AI website platform section (.cloud-hero)

   MERGE NOTE. This section's markup arrived from the branch that was not
   pulled, with no stylesheet of any kind — .cloud-hero, .hero-grid, .stack,
   .hero-strip and the rest matched nothing in either tree, so the section
   would have rendered as a stack of unstyled divs. cih-sections.css already
   listed section.cloud-hero among the dark-ground sections, so the intended
   treatment was dark; only the layout was missing. Class names were given a
   cloud-hero__ prefix on the way in because the originals (.stack, .hero-tag,
   .hero-btn, .hero-grid) are generic enough to collide with other pages.
   ========================================================================== */

.cih-page.cih-page > section.cloud-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cih-page .cloud-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.cih-page .cloud-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cdd6ff !important;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--sp-5);
}

.cih-page .cloud-hero__title {
    --h-display: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
    --h-display-lh: 1.12;
    color: #ffffff;
    margin: 0 0 var(--sp-4);
}

.cih-page .cloud-hero__title span {
    display: block;
    background: linear-gradient(90deg, #a78bfa, #56b8f5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cih-page .cloud-hero__text {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: #b8adde !important;
    max-width: 46ch;
    margin: 0 0 var(--sp-8);
}

.cih-page .cloud-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
}

.cih-page .cloud-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6d5cf0, #4f8ef7);
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cih-page .cloud-hero__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -16px rgba(109, 92, 240, 0.95);
    color: #fff !important;
}

.cih-page .cloud-hero__metric {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #a79dcf !important;
}

.cih-page .cloud-hero__metric strong {
    color: #fff;
}

/* ---- Feature stack ------------------------------------------------------ */

.cih-page .cloud-hero__stack {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.cih-page .cloud-hero__stack li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.cih-page .cloud-hero__stack li:hover {
    border-color: rgba(167, 139, 250, 0.55);
    background: rgba(255, 255, 255, 0.08);
}

.cih-page .cloud-hero__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(140deg, rgba(139, 92, 246, 0.9), rgba(79, 142, 247, 0.75));
    color: #fff;
}

.cih-page .cloud-hero__icon svg {
    width: 20px;
    height: 20px;
}

.cih-page .cloud-hero__stack li > span:last-child {
    display: block;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #a79dcf;
    min-width: 0;
}

.cih-page .cloud-hero__stack strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

/* ---- Metric strip ------------------------------------------------------- */

.cih-page .cloud-hero__strip {
    list-style: none;
    margin: clamp(32px, 4vw, 56px) auto 0;
    padding-top: var(--sp-8);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    position: relative;
    z-index: 1;
}

.cih-page .cloud-hero__strip li {
    text-align: center;
    font-size: 0.875rem;
    color: #a79dcf;
}

.cih-page .cloud-hero__strip strong {
    display: block;
    font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

@media (max-width: 900px) {
    .cih-page .cloud-hero__grid {
        grid-template-columns: 1fr;
    }

    .cih-page .cloud-hero__text {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .cih-page .cloud-hero__strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-6) var(--sp-4);
    }

    .cih-page .cloud-hero__actions {
        gap: var(--sp-4);
    }
}

/* ---- Divider grounds for the two new seams ------------------------------
   cloud-hero uses --cih-ink (#150e2e) from cih-theme.css as its ground. */

.cih-page.cih-page > .cih-divider--benefits-cloud {
    --divider-above: #070a24;
    --divider-below: #150e2e;
}

.cih-page.cih-page > .cih-divider--cloud-faq {
    --divider-above: #150e2e;
    --divider-below: #0a0f2e;
    background: linear-gradient(180deg, #f3f6ff 0%, #ffffff 48%, #f5f4ff 100%);
}

/* ==========================================================================
   15. Dead space before the footer

   cih-sections.css applies `padding-block: var(--cih-band) !important` to
   every direct child of .cih-page, div as well as section. A bare utility
   wrapper — the toast notification container sitting last in the page — is
   a direct child too, so it was picking up 91px top AND bottom: 183px of
   empty space between the contact section and the footer, from an element
   with no visible content at all.

   An unclassed <div> at page level is never a section, so it opts out.
   ========================================================================== */

.cih-page.cih-page > div:not([class]) {
    padding-block: 0 !important;
}

/* ==========================================================================
   16. Offer row — three equal cards, to the reference

   The markup already had all three cards (countdown, available domain,
   hosting + free domain); they were laid out as a flex row with unequal
   heights and inconsistent internals. Nothing here changes copy, prices,
   the countdown script or the checkout buttons.
   ========================================================================== */

.cih-page.cih-page > .main-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--grid-gap);
}

.cih-page .main-container > .timer-card,
.cih-page .main-container > .domain-card-available {
    min-height: 0;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Countdown card: the reference drops the neon pulse for a flat deep-navy
   panel. The pulse animation drew the eye away from the two cards that
   actually carry a call to action. */
.cih-page .main-container > .timer-card {
    animation: none !important;
    padding: 0 !important;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(60% 60% at 80% 0%, rgba(124, 58, 237, .45), transparent 70%),
        linear-gradient(160deg, #1b1147 0%, #0f0a2e 60%, #140d38 100%) !important;
    box-shadow: 0 18px 40px -20px rgba(20, 13, 56, .8) !important;
}

.cih-page .main-container > .timer-card:hover {
    animation: none !important;
}

.cih-page .main-container .timer-glow {
    display: none;
}

.cih-page .main-container .timer-content {
    background: transparent !important;
    border-radius: 0;
    padding: clamp(24px, 2vw, 34px) !important;
    height: 100%;
}

.cih-page .main-container .timer-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    padding: 7px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .75rem !important;
    letter-spacing: .1em;
    margin-bottom: 18px !important;
}

.cih-page .main-container .timer-icon {
    animation: none !important;
    width: 15px;
    height: 15px;
}

.cih-page .main-container .timer-subtitle {
    color: #fcd34d !important;
    font-size: 1rem !important;
    margin-bottom: 22px !important;
}

.cih-page .main-container .timer-box {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 14px !important;
    padding: 14px 10px !important;
    min-width: 84px !important;
}

.cih-page .main-container .timer-box::before {
    display: none;
}

.cih-page .main-container .timer-number {
    font-size: clamp(1.6rem, 2.4vw, 2.25rem) !important;
    font-variant-numeric: tabular-nums;
}

.cih-page .main-container .timer-separator {
    animation: none !important;
    opacity: .5;
}

/* The two white cards: badge, body, then the button pinned to the bottom so
   both buttons line up regardless of how much copy sits above them. */
.cih-page .main-container > .domain-card-available {
    padding: clamp(24px, 2vw, 32px);
    border-radius: 18px;
    border: 1px solid #e8e4f5;
    box-shadow: 0 10px 30px -18px rgba(24, 16, 61, .35);
}

.cih-page .main-container .available-badge {
    position: static;
    align-self: flex-start;
    margin-bottom: 18px;
    border-radius: 8px;
}

.cih-page .main-container > .domain-card-available > :last-child {
    margin-top: auto;
}

.cih-page .main-container .continue-button {
    margin-top: 20px;
}

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

    .cih-page .main-container > .timer-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .cih-page.cih-page > .main-container {
        grid-template-columns: 1fr;
    }

    .cih-page .main-container .timer-box {
        min-width: 0 !important;
        padding: 12px 8px !important;
    }
}

/* ==========================================================================
   17. Hero search — moving pattern behind the search band
   Two slow-drifting layers: a dot grid and a soft aurora. Both are painted
   behind the content and are inert. Anyone with reduced motion enabled gets
   the same look with the drift switched off (the global reduced-motion rule
   in section 9 already stops the animations).
   ========================================================================== */

.cih-hero {
    position: relative;
    isolation: isolate;
}

.cih-hero__fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.cih-hero__fx::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image: radial-gradient(rgba(109, 40, 217, .17) 1px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 78%);
    mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 78%);
    animation: cihDrift 38s linear infinite;
}

.cih-hero__fx::after {
    content: "";
    position: absolute;
    inset: -30% -10%;
    background:
        radial-gradient(34% 40% at 22% 30%, rgba(139, 92, 246, .22), transparent 70%),
        radial-gradient(30% 38% at 78% 26%, rgba(86, 184, 245, .20), transparent 70%),
        radial-gradient(28% 34% at 55% 72%, rgba(236, 72, 153, .13), transparent 70%);
    filter: blur(26px);
    animation: cihAurora 26s ease-in-out infinite alternate;
}

@keyframes cihDrift {
    to { transform: translate3d(26px, 26px, 0); }
}

@keyframes cihAurora {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* Everything the hero already contains sits above the effect layer. */
.cih-hero > *:not(.cih-hero__fx) {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   18. Hero — fit above the fold, and a pattern you can actually see

   Measured before: hero 832px + header ~80px = 912px, so the offer row was
   always just off-screen on a 900px laptop. Trimmed to fit by tightening the
   four blocks rather than shrinking type: search band top padding, the gap
   before the headline, and the internal padding of the proof panel.
   ========================================================================== */

.cih-hero .cih-searchband {
    padding-top: clamp(20px, 2.2vw, 30px) !important;
}

.cih-hero .cih-hero__head {
    margin-top: clamp(18px, 2vw, 26px) !important;
}

.cih-hero__title {
    margin-bottom: 0.4rem !important;
}

.cih-hero .cih-hero__rule {
    margin-top: clamp(8px, 1vw, 12px) !important;
}

.cih-hero.cih-hero .cih-proof {
    margin-top: clamp(18px, 2vw, 28px) !important;
    padding: clamp(14px, 1.3vw, 20px) !important;
}

.cih-hero.cih-hero .cih-proof__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.cih-hero.cih-hero .cih-trust {
    margin-top: clamp(12px, 1.4vw, 18px) !important;
}

.cih-hero.cih-hero .cih-trust__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
}

/* ---- Hero background ---------------------------------------------------

   No repeating pattern. The dot grid was the second attempt and it read as
   cheap texture rather than depth — a tiled motif at that scale always looks
   like a placeholder. Replaced with a slow mesh gradient: four large, soft
   colour fields drifting against each other at different speeds and in
   different directions, so the background never quite repeats and never
   resolves into a visible grid. A single light sweep crosses on top.

   All of it is blurred well past the point where any edge is visible, which
   is what keeps it reading as lighting rather than as shapes. */

.cih-hero__fx::before,
.cih-hero__fx::after {
    content: "";
    position: absolute;
    inset: -35% -20%;
    pointer-events: none;
}

/* Layer one: the warm side. */
.cih-hero__fx::before {
    background:
        radial-gradient(38% 44% at 18% 28%, rgba(139, 92, 246, .42), transparent 66%),
        radial-gradient(32% 38% at 62% 78%, rgba(236, 72, 153, .26), transparent 68%);
    filter: blur(60px);
    animation: cihMeshA 28s ease-in-out infinite alternate;
}

/* Layer two: the cool side, drifting the other way so the two never move as
   one block. */
.cih-hero__fx::after {
    background:
        radial-gradient(36% 42% at 82% 22%, rgba(56, 189, 248, .40), transparent 66%),
        radial-gradient(30% 36% at 40% 88%, rgba(99, 102, 241, .30), transparent 68%);
    filter: blur(64px);
    animation: cihMeshB 34s ease-in-out infinite alternate;
}

@keyframes cihMeshA {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) scale(1.16); }
}

@keyframes cihMeshB {
    from { transform: translate3d(3%, 2%, 0) scale(1.12); }
    to   { transform: translate3d(-4%, -3%, 0) scale(1); }
}

/* Light sweep across the band. */
.cih-hero__fx > i {
    position: absolute;
    top: -40%;
    bottom: -40%;
    width: 34%;
    left: -45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-14deg);
    animation: cihSweep 11s ease-in-out infinite;
}

@keyframes cihSweep {
    0%   { left: -45%; opacity: 0; }
    14%  { opacity: .85; }
    62%  { opacity: .85; }
    100% { left: 108%; opacity: 0; }
}

/* ==========================================================================
   19. Floating hosting / domain glyphs in the hero

   Ten line icons drifting behind the search band. Deliberately kept to the
   outer thirds of the hero: the centre column holds the search field, the
   headline and the proof panel, and anything moving under live text hurts
   readability more than it decorates. Low opacity for the same reason —
   these should register as texture, not as content.
   ========================================================================== */

.cih-hero .cih-fx-ico {
    position: absolute;
    display: block;
    color: var(--cih-brand, #6d28d9);
    opacity: 0.16;
    will-change: transform;
}

.cih-hero .cih-fx-ico svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Positioned from the centre line, not by percentage.

   The content column is capped at 1240px, so the only safe area is outside
   `calc(50% ± 620px)`. Percentages looked fine at 1440 and walked straight
   into the proof panel at 1280, because a percentage tracks the viewport
   while the text column does not. --edge is the distance outward from the
   column edge; every glyph is placed relative to that. */
.cih-hero .cih-fx-ico {
    --edge: 620px;
}

.cih-hero .i1  { width: 44px; height: 44px; top: 14%; right: calc(50% + var(--edge) + 18px); animation: cihFloatA 17s ease-in-out infinite; }
.cih-hero .i2  { width: 54px; height: 54px; top: 44%; right: calc(50% + var(--edge) + 72px); animation: cihFloatB 23s ease-in-out infinite; color: #38bdf8; }
.cih-hero .i3  { width: 38px; height: 38px; top: 70%; right: calc(50% + var(--edge) + 30px); animation: cihFloatA 20s ease-in-out infinite reverse; }
.cih-hero .i7  { width: 34px; height: 34px; top: 28%; right: calc(50% + var(--edge) + 96px); animation: cihFloatB 26s ease-in-out infinite; color: #ec4899; }
.cih-hero .i9  { width: 40px; height: 40px; top: 86%; right: calc(50% + var(--edge) + 84px); animation: cihFloatA 24s ease-in-out infinite; color: #38bdf8; }

.cih-hero .i4  { width: 50px; height: 50px; top: 12%; left: calc(50% + var(--edge) + 20px); animation: cihFloatB 19s ease-in-out infinite; }
.cih-hero .i5  { width: 36px; height: 36px; top: 40%; left: calc(50% + var(--edge) + 78px); animation: cihFloatA 22s ease-in-out infinite; color: #38bdf8; }
.cih-hero .i6  { width: 34px; height: 34px; top: 68%; left: calc(50% + var(--edge) + 26px); animation: cihFloatB 25s ease-in-out infinite reverse; }
.cih-hero .i8  { width: 42px; height: 42px; top: 26%; left: calc(50% + var(--edge) + 100px); animation: cihFloatA 21s ease-in-out infinite; color: #ec4899; }
.cih-hero .i10 { width: 38px; height: 38px; top: 84%; left: calc(50% + var(--edge) + 90px); animation: cihFloatB 28s ease-in-out infinite; }

@keyframes cihFloatA {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(10px, -18px, 0) rotate(6deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes cihFloatB {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(-12px, -14px, 0) rotate(-5deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* Narrow screens: the outer thirds no longer exist, so the glyphs would sit
   under the search field and the headline. Dropped rather than shrunk. */
/* Below ~1560px there is no room outside the 1240px column for a 50px glyph
   plus its drift, so they are dropped rather than allowed to wander over the
   search field. */
@media (max-width: 1560px) {
    .cih-hero .cih-fx-ico {
        display: none;
    }
}