/* ==========================================================================
   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;
}