.AiHero_section {
    background-size: contain;
    background-blend-mode: overlay;
    background-position: top left;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 54.57%, rgba(0, 0, 0, 0.4) 62.76%), url(../Images/ai-banner.png) top / contain no-repeat;
}

.hero_content_wrap.justify-content-end {
    justify-content: flex-end;
}

.hero_title.ai-hero_title,
.ai-knowing_title,
h2.answer-right-title,
.site-bandwidth-title,
.ai-tab-section-heading h1,
.chance-slide__heading {
    font-size: clamp(32px, 3.61vw, 48px);
}

.ai-para,
.ai-knowing_para,
p.answer-right-para,
.ctaPara p,
.ai-tab-section-heading p,
.ai-tab-desc,
.chance-slide__subheading,
.chance-feature__desc {
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.5;
}

.ai-headerIn {
    width: clamp(27px, 10.9vw, 157px);
    height: auto;
}

.ai-navLogo {
    width: 100%;
    height: 100%;
    max-width: 100%;
}

.headerIn.mt-30 {
    margin-top: 30px;
}

a.pageButton.ai_pageButton {
    position: relative;
    box-shadow: 0px 0px 0px 1px #524AD4;
    background: linear-gradient(0deg, #682DF4, #682DF4), radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    border: 0.7px solid rgba(255, 255, 255, 0.24);
    padding: clamp(14px, 1.25vw, 14px) clamp(42px, 5.69vw, 98px);
    font-size: clamp(13px, 0.97vw, 14px);
    margin-top: 25px;
    line-height: 150%;
    display: inline-block;
    overflow: hidden;
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
}


a.pageButton.ai_pageButton::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(220, 200, 255, 0.82) 0%, rgba(180, 140, 255, 0.32) 45%, transparent 72%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

a.pageButton.ai_pageButton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 60% at 50% 115%, rgba(230, 210, 255, 0.55) 0%, rgba(200, 170, 255, 0.18) 40%, transparent 68%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

/* Make sure text sits above pseudo-elements */
a.pageButton.ai_pageButton>* {
    position: relative;
    z-index: 1;
}

a.pageButton.ai_pageButton:hover::before,
a.pageButton.ai_pageButton:hover::after,
.ai_plan_card:hover a.pageButton.ai_pageButton::before,
.ai_plan_card:hover a.pageButton.ai_pageButton::after {
    opacity: 1;
}

a.pageButton.ai_pageButton:hover,
.ai_plan_card:hover a.pageButton.ai_pageButton {
    box-shadow: 0 0 0 1px #524AD4, 0 0 28px 0 rgba(104, 45, 244, 0.2);
    border-color: rgba(255, 255, 255, 0.32);
}

a.pageButton.ai_pageButton:active,
.ai_plan_card:active a.pageButton.ai_pageButton {
    background:
        radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(0deg, #682DF4, #682DF4);
    border: 0.7px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 0 0 1px #524AD4;
    transition: none;
}

.ai-knowing_in {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    overflow: visible;
    height: 590px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-knowing-gra {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(180.16deg, #131313 0.14%, #0F1A97 45.44%, #895BF6 91.02%, #F9783E 113.15%);
    opacity: 0.9;
    z-index: 0;
    filter: blur(50px);
}

.gradient_text_ai {
    background: linear-gradient(91.07deg,
            #0F1A97 3.61%,
            #895BF6 62.53%,
            #F9783E 95.4%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    display: inline-block;
}

h2.ai-knowing_title {
    margin-bottom: 15px;
}

.answer-main {
    display: flex;
    align-items: center;
    position: relative;
    gap: 80px;
}

.section_CTA.answer-CTA {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    text-align: center;
}

.answer-left-main {
    width: 80%;
    height: auto;
}

.answer-right-content {
    padding-right: 10%;
}

p.answer-right-para {
    width: 80%;
}

.site-bandwidth_in {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    position: relative;
}

.site-bandwidth-boxes-inner {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.site-bandwidth-right {
    width: 45%;
}

.bandwidth-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 45px 35px;
    backdrop-filter: blur(4px);
    border: 1px solid #272727;
    background: #000000;
}

.bandwidth-box-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

p.bandwidth-box-subhead {
    width: 80%;
    color: #B0B0B0;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.5;
}

.site-bandwidth-left {
    position: sticky;
    top: 10%;
    height: 100vh;
}

.fade-bottom {
    position: sticky;
    height: auto;
    width: 100%;
    bottom: -10px;
}

.ai-tab-section-heading {
    text-align: center;
    margin-bottom: 56px
}

.ai-tab-section-heading h1 {
    max-width: 70%;
    margin: 0 auto 15px;
}

.ai-tab-section-heading p {
    max-width: 57%;
    margin: auto;
    color: #B0B0B0;
    line-height: 150%;
    letter-spacing: 1%;
}

.ai-tabs-wrap {
    position: relative;
    margin-bottom: 80px
}

.ai-tabs {
    display: flex;
    overflow: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
}

.ai-tabs::-webkit-scrollbar {
    display: none
}

.ai-tab-btn {
    background: none;
    border: none;
    color: #5A5A5A;
    padding: 16px 24px 10px;
    cursor: pointer;
    white-space: nowrap;
    font-size: clamp(14px, 1.11vw, 16px);
    line-height: 130%;
    font-weight: 400;
    letter-spacing: 1%;
}

.ai-tab-btn.active {
    color: #fff
}

.ai-tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90.06deg, #895BF6 53%, #F9783E 101.94%);
    transition: .35s
}

.ai-tab-content {
    display: none
}

.ai-tab-content.active {
    display: block;
    padding: 0 30px;
}

.ai-tab-meta {
    margin-bottom: 24px
}

.ai-tab-label {
    color: #FFFFFF;
    font-size: clamp(16px, 1.39vw, 20px);
    font-weight: 400;
    letter-spacing: -2%;
    line-height: 40px;
}

.ai-tab-desc {
    color: #B0B0B0;
}

.carousel-outer {
    overflow: hidden
}

.carousel-track {
    display: flex;
    transition: transform .4s ease
}

.carousel-slide {
    min-width: 25%;
    padding: 0 8px;
    flex-shrink: 0
}

.ai-card {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.ai-card-img {
    aspect-ratio: 2.81 / 3.18;
    border-radius: 12px;
    background: linear-gradient(135deg, #2a1a66, #8c5cff);
    max-width: 100%;
    height: auto;
}

.ai-card-name {
    color: #FFFFFF;
    font-size: clamp(16px, 1.39vw, 20px);
    font-weight: 400;
    letter-spacing: -2%;
    line-height: 40px;
}

.ai-nav-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px
}

.arrow-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #2a2a2a;
    background: none;
    color: #fff;
    cursor: pointer
}

.dots {
    display: flex;
    gap: 8px
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #333;
    cursor: pointer;
    transition: .3s
}

.dot.active {
    width: 22px;
    background: linear-gradient(90deg, #7c6af5, #c084fc)
}

.cta-wrap {
    text-align: center;
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid #161616
}

.carousel-slide:first-child {
    padding-left: 0;
}

.carousel-slide:last-child {
    padding-right: 0;
}

@media(max-width:991px) {
    .carousel-slide {
        min-width: 50%
    }
}

@media(max-width:767px) {

    .ai-tab-section-heading h1 {
        font-size: 34px
    }

    .carousel-slide {
        min-width: 100%
    }
}

/* Process Section Styles */

.process-section-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.process-title {
    text-align: center;
    font-size: clamp(32px, 3.61vw, 52px);
    font-weight: 400;
    color: #fff;
    max-width: 900px;
}

.process-cards-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 50px;
    margin: 0 auto;
}

/* Circle Cards */

.process-card-circle {
    width: 335px;
    height: 326px;
    border-radius: 50%;

    border: 0.7px solid #5C5C5C;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    position: relative;
    flex-shrink: 0;

    transition: all 0.4s ease;
}

/* Overlap Effect */

.process-card:not(:first-child) {
    margin-left: -15px;
}

/* Layering */

.process-card-circle:nth-child(1) {
    z-index: 1;
}

.process-card-circle:nth-child(2) {
    z-index: 2;
}

.process-card-circle:nth-child(3) {
    z-index: 3;
}

.process-card-circle:nth-child(4) {
    z-index: 4;
}

/* Optional Hover */

.process-card-circle:hover {
    transform: translateY(-6px);
    z-index: 10;
}

/* Content */

.process-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    height: 100%;
}

.process-card-number {
    font-size: clamp(20px, 1.67vw, 24px);
    font-weight: 400;
    color: #fff;
    margin: 0;
    line-height: 150%;
    letter-spacing: 1%;
}

.process-card-text {
    font-size: clamp(13px, 1vw, 15px);
    color: #fff;
    line-height: 1.5;
    margin: 0;
    font-weight: 300;
    width: 60%;
}

.circle-gradient {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.ai_plan_card:hover .pageButton.ai_pagebtn {
    box-shadow: 0px 0px 0px 1px #524AD4;
    background: linear-gradient(0deg, #682DF4, #682DF4),
        radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    display: inline-block;

}

.ai_plan_card:hover .pageButton.ai_pagebtn::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.ai_plan_card:hover .pageButton.ai_pagebtn::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.ai_plan_card:hover a.pageButton.ai_pagebtn::before,
.ai_plan_card:hover a.pageButton.ai_pagebtn::after {
    opacity: 0;
}

/* Bottom Glow */
.ai_plan_card:hover .pageButton.ai_pagebtn::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -45px;
    width: 140%;
    height: 80px;
    transform: translateX(-50%) scale(0.8);
    border-radius: 50%;

    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, .40) 0%,
            rgba(255, 255, 255, .18) 35%,
            rgba(255, 255, 255, 0) 70%);

    filter: blur(15px);
    opacity: 0.8;

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.16, 1, .3, 1);

    pointer-events: none;
}

/* Top Reflection */
.ai_plan_card:hover .pageButton.ai_pagebtn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -55px;
    width: 120%;
    height: 70px;
    transform: translateX(-50%) scale(0.8);
    border-radius: 50%;

    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, .22) 0%,
            rgba(255, 255, 255, .10) 40%,
            rgba(255, 255, 255, 0) 70%);

    filter: blur(17px);
    opacity: 0.8;

    pointer-events: none;

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.16, 1, .3, 1);
}

/* Base styles for the button to match your image */
.pageButton.ai_pagebtn {
    display: inline-block;
    background: linear-gradient(180deg, #7c4dff 0%, #5e35b1 100%);
    /* Purple gradient */
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    padding: 16px 48px;
    border: 1px solid #4527a0;
    /* Darker purple border */
    border-radius: 2px;

    /* Smooth transition for the hover effect */
    transition: box-shadow 0.3s ease, transform 0.1s ease;
}

/* The Hover Effect */
.pageButton.ai_pagebtn:hover {
    /* Shadow 1 (inset): Creates the white reflection inside the bottom edge
    Shadow 2 (outer): Creates a soft white light bleeding below the button
  */
    box-shadow:
        inset 0px -15px 15px -10px rgba(255, 255, 255, 0.65),
        0px 8px 20px -5px rgba(255, 255, 255, 0.2);

    /* Optional: Slight lift effect on hover */
    transform: translateY(-1px);
}

/* Optional: Click effect to make it feel tactile */
.pageButton.ai_pagebtn:active {
    transform: translateY(1px);
    box-shadow: inset 0px -5px 10px -5px rgba(255, 255, 255, 0.4);
}

a.pageButton.ai_pageButton.ai-plan-btn {
    background: linear-gradient(90.65deg, #161616 1.28%, #212121 99.44%);
    box-shadow: 0px 0px 11px 0px #FFFFFF21 inset;
    transition: box-shadow 0.5s ease, border-color 0.5s ease, background 0.5s ease;
}

a.pageButton.ai_pageButton.ai-plan-btn:hover,
.ai_plan_card:hover a.pageButton.ai_pageButton.ai-plan-btn {
    box-shadow: 0px 0px 0px 1px #524AD4;
    background: linear-gradient(0deg, #682DF4, #682DF4), radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.ai-footer-inner {
    width: 100%;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.footer_in.footer-in-ai {
    gap: 0;
}

.ai-footer-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

/* Tablet */

@media (max-width: 1200px) {

    .process-cards-wrap {
        padding: 0 20px;
    }

    .process-card-circle {
        width: 280px;
        height: 280px;
    }

    .process-card-circle:not(:first-child) {
        margin-left: -55px;
    }
}

/* Mobile */

@media (max-width: 768px) {

    .ai-headerIn {
        width: 160px;
        height: auto;
    }

    .process-section-in {
        gap: 50px;
    }

    .process-cards-wrap {
        flex-direction: column;
        padding: 0;
    }

    .process-card-circle {
        width: 220px;
        height: 220px;
    }

    .process-card-circle:not(:first-child) {
        margin-left: 0;
        margin-top: -45px;
    }

    .process-card-number {
        font-size: 16px;
    }

    .process-card-text {
        font-size: 13px;
    }

    .human-edge-content-wrap {
        height: 85rem;
    }
}

.human-edge-header {
    text-align: center;
}

.human-edge-header h2 {
    font-size: clamp(32px, 3.61vw, 52px);
    line-height: 1.2;
    font-weight: 400;
}

.human-edge-content-wrap {
    position: relative;
    height: 200vh;
}

.human-edge-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Sphere */

.human-edge-image-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.human-edge-sphere {
    width: 853px;
    height: 722px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gradient-globe {
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
}

/* Left Text */

.human-edge-text-left {
    position: absolute;
    left: 5%;
    bottom: 40%;
    max-width: 380px;
    z-index: 3;
}

/* Right Text */

.human-edge-text-right {
    position: absolute;
    right: 80px;
    top: 160px;
    max-width: 400px;
    text-align: left;
    z-index: 3;
}

/* Content */

.human-edge-item {
    opacity: 0;
    transform: translateY(80px);
    will-change: transform, opacity;
}

.human-edge-title {
    line-height: 150%;
    font-weight: 400;
    margin-bottom: 5px;
    font-size: clamp(20px, 1.67vw, 24px);
    letter-spacing: 1%;
}

.human-edge-description {
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 150%;
    font-weight: 400;
    color: #B0B0B0;
    letter-spacing: 1%;
}

.ai_plan_card {
    background: none;
    background-position: unset;
    background-size: unset;
}

.card-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

a.pageButton.ai_pagebtn {
    box-shadow: 0px 0px 11px 0px #FFFFFF21 inset;
    background: linear-gradient(90.65deg, #161616 1.28%, #212121 99.44%);
}

.ai-cta-inner {
    position: relative;
}





/* ==========================
   MOBILE
========================== */

@media(max-width:991px) {

    .human-edge-content-wrap {
        height: 85rem;
    }

    .human-edge-sticky-wrapper {
        position: relative;
        height: 100vh !important;
        min-height: auto;
        flex-direction: column;
        gap: 40px;
        padding: 40px 0;
        max-height: 100vh !important;
    }

    .human-edge-image-container,
    .human-edge-text-left,
    .human-edge-text-right {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        text-align: center;
        max-width: 100%;
    }

    .human-edge-image-container {
        order: 1;
    }

    .human-edge-text-right {
        order: 2;
    }

    .human-edge-text-left {
        order: 3;
    }

    .human-edge-item {
        opacity: 1;
        transform: none;
    }

    .human-edge-sphere {
        width: 400px;
        height: 400px;
    }
}

.cta-top-fade {
    position: absolute;
    inset: -80px auto auto 0;
    width: 100%;
    height: 160px;
    pointer-events: none;
}

.cta-top-fade::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0A0A0A;
    filter: blur(30px);
    transform: scale(1.15);
}

.cta-bottom-fade {
    position: absolute;
    inset: auto 0 -80px 0;
    width: 100%;
    height: 160px;
    pointer-events: none;
}

.cta-bottom-fade::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0A0A0A;
    filter: blur(30px);
    transform: scale(1.15);
}

.ai-cta-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 40%;
}

.ai-human-era-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 72px;
    align-items: end;
}

.ai-human-era-heading h1 {
    font-size: clamp(32px, 3.61vw, 48px);
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -2%;
    letter-spacing: -0.5px;
}

.para-top-bottom {
    display: flex;
    align-items: center;
    padding-top: 8px;
    justify-content: flex-end;
}

.para-top-bottom p {
    font-size: clamp(16px, 1.25vw, 18px);
    color: #B0B0B0;
    line-height: 150%;
    font-weight: 400;
    transition: color 0.4s;
    letter-spacing: 1%;
    width: 75%;
}

.ai-human-era-rows {
    position: relative;
}

.ai-human-era-row {
    display: grid;
    grid-template-columns: 80px 1fr 22%;
    align-items: center;
    border-top: 0.5px solid #1e1e1e;
    padding: 32px 0;
    cursor: default;
    position: relative;
    transition: background 0.4s ease;
    padding-right: 84px;
}

.ai-human-era-row:last-child {
    border-bottom: 0.5px solid #1e1e1e;
}

.ai-human-era-num {
    font-size: 13px;
    color: #333;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-num-circle {
    width: 57px;
    height: 57px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 1.25vw, 18px);
    color: #ffff;
    transition: border-color 0.4s, color 0.4s;
    border: 0.79px solid #5A5A5A;
}

.ai-human-era-row:hover .ai-num-circle {
    border-color: #7c6af5;
    color: #a78bfa;
}

.ai-human-era-title {
    font-size: clamp(20px, 1.67vw, 24px);
    font-weight: 300;
    color: #fff;
    letter-spacing: 1%;
    transition: color 0.4s;
    text-align: center;
    line-height: 150%;
}

.ai-human-era-row:hover .ai-human-era-title {
    color: #fff;
}

.ai-human-era-desc {
    font-size: clamp(16px, 1.25vw, 18px);
    color: #B0B0B0;
    line-height: 150%;
    font-weight: 400;
    transition: color 0.4s;
    letter-spacing: 1%;
}

.ai-human-era-row:hover .ai-human-era-desc {
    color: #888;
}

.ai-human-era-img-float {
    position: fixed;
    width: 200px;
    height: 255px;
    border-radius: 5px;
    overflow: hidden;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.35s ease;
    transform: translate(-50%, -50%);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}

.ai-human-era-img-float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ai-human-era-img-float.visible {
    opacity: 1;
}

.ai-human-era-subhead {
    width: 78%;
}

.chance-section {
    position: relative;
    height: 400vh;
}

.chance-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.chance-belt {
    display: flex;
    width: 200%;
    height: 100%;
    will-change: transform;
    transition: transform 0.05s linear;
}

/* ── SINGLE SLIDE ── */
.chance-slide {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 4% 0;
}

.chance-feature__title--sm {
    font-size: clamp(14px, 1.2vw, 18px);
}

.chance-feature__desc {
    color: #B0B0B0;
    font-size: clamp(14px, 1.11vw, 16px);
}

.chance-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.science-grid {
    display: grid;
    grid-template-columns: 59% 1fr;
}

p.chance-slide__subheading {
    color: #B0B0B0;
    width: 42%;
}

.science-content-one {
    display: flex;
    gap: 20px;
}

.science-grid__tested-img {
    width: 100%;
    max-width: 293px;
    aspect-ratio: 293 / 272;
}

.science-grid__tested-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.science-grid__tested-row {
    display: flex;
    gap: 20px;
    align-items: end;
}

.science-grid__hero-img {
    width: 100%;
    max-width: 383px;
    aspect-ratio: 383 / 468;
}

h2.chance-feature__title {
    font-size: clamp(20px, 1.67vw, 24px);
    line-height: 150%;
    letter-spacing: 1%;
    font-weight: 400;
}

.structured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.structured-grid__sauna-img {
    width: 100%;
    max-width: 584px;
    aspect-ratio: 584 / 314;
}

.structured-grid__sauna-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.structured-grid__cold-img {
    width: 100%;
    max-width: 378px;
    aspect-ratio: 378 / 312;
}

.structured-grid__cold-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.structured-grid__protocol-text .chance-feature__desc {
    width: 43%;
}

.structured-content-one {
    display: flex;
    flex-direction: column;
    gap: 48px;
    justify-content: flex-end;
}

.structured-grid__hold-text .chance-feature__desc {
    width: 70%;
}

.structured-content-two {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

section.ai-cta {
    overflow: hidden;
}

section.ai-knowing {
    background: #0A0A0A;
}

.ai-human-era-rows .ai-knowing-gra {
    z-index: -1;
}

/* ── 1200px – Large Tablet / Small Desktop ─────────────── */
@media (max-width: 1200px) {

    .ai-headerIn {
        width: 140px;
        height: auto;
    }

    /* --- Hero --- */
    .AiHero_section {
        background-size: cover !important;
    }

    /* --- Knowing --- */
    .ai-knowing_in {
        width: 90%;
    }

    /* --- Answer --- */
    .answer-main {
        gap: 48px;
    }

    .answer-right-content {
        padding-right: 5%;
    }

    /* --- Bandwidth sticky --- */
    .site-bandwidth-right {
        width: 50%;
    }

    /* --- Tab section --- */
    .ai-tab-section-heading p {
        max-width: 70%;
    }

    /* --- Human Era rows --- */
    .ai-human-era-row {
        grid-template-columns: 64px 1fr 28%;
        padding-right: 40px;
    }

    /* --- AI CTA --- */
    .ai-cta-content {
        width: 55%;
    }

    /* --- Chance section --- */
    .chance-slide {
        padding: 4% 0;
    }

    .science-grid {
        grid-template-columns: 55% 1fr;
    }

    .structured-grid {
        gap: 32px;
    }

    .ai-tab-indicator {
        display: none;
    }
}


/* ── 991px – Tablet ────────────────────────────────────── */
@media (max-width: 991px) {

    /* --- Hero --- */
    .AiHero_section {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%),
            url(../Images/ai-banner.png) top center / cover no-repeat;
    }

    .hero_content_wrap.justify-content-end {
        justify-content: center;
        text-align: center;
    }

    /* --- Knowing --- */
    .ai-knowing_in {
        width: 100%;
    }

    .ai-knowing-gra {
        width: 60%;
        height: 60%;
    }

    /* --- Answer --- */
    .answer-main {
        flex-direction: column;
        gap: 32px;
    }

    .answer-left-main {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }

    .answer-right-content {
        padding-right: 0;
        text-align: center;
    }

    p.answer-right-para {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }

    .section_CTA.answer-CTA {
        position: static;
        transform: none;
        margin-top: 24px;
    }

    /* --- Bandwidth sticky --- */
    .site-bandwidth_in {
        flex-direction: column;
        gap: 32px;
    }

    .site-bandwidth-left {
        position: static;
        height: auto;
        width: 100%;
    }

    .site-bandwidth-right {
        width: 100%;
    }

    /* --- Tab section heading --- */
    .ai-tab-section-heading h1 {
        max-width: 90%;
    }

    .ai-tab-section-heading p {
        max-width: 85%;
    }

    /* --- Tab indicator + content --- */
    .ai-tabs {
        justify-content: flex-start;
    }

    .ai-tab-content.active {
        padding: 0 12px;
    }

    /* --- Human Era rows --- */
    .ai-human-era-heading {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 40px;
    }

    .para-top-bottom {
        justify-content: flex-start;
    }

    .para-top-bottom p {
        width: 100%;
    }

    .ai-human-era-subhead {
        width: 100%;
    }

    .ai-human-era-row {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
        padding-right: 0;
        gap: 0 20px;
    }

    .structured-content-two {
        align-items: flex-start;
    }

    .ai-human-era-title {
        text-align: left;
    }

    .ai-human-era-desc {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    /* Float image hidden on touch devices */
    .ai-human-era-img-float {
        display: none;
    }

    /* --- AI Plan Cards --- */
    .ai_plan_card {
        width: 100%;
    }

    /* --- AI CTA --- */
    .ai-cta-content {
        width: 75%;
    }

    /* --- Chance section — disable horizontal scroll, stack vertically --- */
    .chance-section {
        height: auto;
    }

    .chance-viewport {
        position: static;
        height: auto;
        overflow: visible;
    }

    .chance-belt {
        flex-direction: column;
        width: 100%;
        height: auto;
        transform: none !important;
        transition: none;
    }

    .chance-slide {
        width: 100%;
        height: auto;
        padding: 48px 0;
    }

    p.chance-slide__subheading {
        width: 100%;
    }

    .science-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .science-grid__hero-img {
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }

    .science-content-one {
        flex-direction: column;
    }

    .science-grid__tested-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .science-grid__tested-img {
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }

    .structured-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .structured-grid__sauna-img,
    .structured-grid__cold-img {
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }

    .structured-grid__protocol-text .chance-feature__desc {
        width: 100%;
    }

    .structured-grid__hold-text .chance-feature__desc {
        width: 100%;
    }

    .structured-content-one {
        gap: 24px;
    }

    .chance-progress {
        display: none;
    }

    /* --- AI Footer --- */
    .ai-footer-inner {
        height: auto;
        min-height: 320px;
        padding: 60px 0;
    }

    .answer-right-main,
    .section_CTA.answer-CTA {
        margin: 0 auto;
        padding: 0 30px;
    }

    .cta-top-fade {
        position: absolute;
        inset: -30px auto auto 0;
        width: 100%;
        height: 86px;
        pointer-events: none;
    }

    .cta-bottom-fade {
        position: absolute;
        inset: auto 0 -30px 0;
        width: 100%;
        height: 86px;
        pointer-events: none;
    }
}


/* ── 767px – Mobile Landscape / Large Phone ────────────── */
@media (max-width: 767px) {

    /* --- CTA Button --- */
    a.pageButton.ai_pageButton {
        padding: clamp(12px, 3.5vw, 14px) clamp(28px, 8vw, 48px);
        margin-top: 20px;
    }

    /* --- Process cards (already stacked at 768px) --- */
    .process-section-in {
        gap: 40px;
    }

    .process-title {
        font-size: clamp(26px, 6vw, 36px);
    }

    /* --- Human Edge --- */
    .human-edge-sphere {
        width: 280px;
        height: 240px;
    }

    /* --- Human Era rows --- */
    .ai-human-era-row {
        grid-template-columns: 48px 1fr;
        padding: 20px 0;
    }

    .ai-num-circle {
        width: 40px;
        height: 40px;
    }

    /* --- Tab section --- */
    .ai-tabs-wrap {
        margin-bottom: 48px;
    }

    .ai-tab-btn {
        padding: 14px 16px 10px;
    }

    /* --- Bandwidth --- */
    .bandwidth-box {
        padding: 28px 20px;
    }

    p.bandwidth-box-subhead {
        width: 100%;
    }

    /* --- AI CTA --- */
    .ai-cta-content {
        width: 60%;
        padding: 40px 0;
    }

    /* --- Chance section --- */
    .chance-slide {
        padding: 36px 0;
    }

    .science-grid__hero-img,
    .science-grid__tested-img,
    .structured-grid__sauna-img,
    .structured-grid__cold-img {
        aspect-ratio: 4 / 3;
    }

    /* --- Footer --- */
    .ai-footer-inner {
        min-height: 260px;
    }

    .process-card-circle:not(:first-child) {
        margin-bottom: -55px;
        margin-left: 0;
    }

    .human-edge-content-wrap {
        height: auto;
    }
}


/* ── 480px – Mobile Portrait ───────────────────────────── */
@media (max-width: 480px) {

    /* --- Hero --- */
    .ai-headerIn {
        width: 160px;
    }

    .ai-knowing-gra {
        width: 100%;
        height: 55%;
        filter: blur(36px);
    }

    /* --- CTA Button --- */
    a.pageButton.ai_pageButton {
        width: 100%;
        text-align: center;
        padding: 11px 20px;
    }

    /* --- Tab section --- */
    .ai-tab-section-heading h1 {
        max-width: 100%;
    }

    .ai-tab-section-heading p {
        max-width: 100%;
    }

    .ai-tab-btn {
        padding: 12px 12px 8px;
        font-size: 13px;
    }

    .ai-tab-content.active {
        padding: 0;
    }

    /* --- Process cards --- */
    .process-card-circle {
        width: 180px;
        height: 180px;
        padding: 20px;
    }

    .process-card-text {
        width: 75%;
        font-size: 12px;
    }

    /* --- Human Edge --- */
    .human-edge-sphere {
        width: 220px;
        height: 190px;
    }

    /* --- Human Era --- */
    .ai-human-era-row {
        grid-template-columns: 40px 1fr;
        padding: 16px 0;
    }

    .ai-num-circle {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .ai-human-era-title {
        text-align: left;
        font-size: clamp(16px, 4.5vw, 20px);
    }

    /* --- Bandwidth boxes --- */
    .bandwidth-box {
        padding: 22px 16px;
        gap: 10px;
    }

    /* --- Chance section --- */
    .chance-slide {
        padding: 28px 0;
    }

    /* --- AI CTA --- */
    .ai-cta-content {
        width: 80%;
        margin: 0 auto;
        padding: 0 30px;
    }

    /* --- Footer --- */
    .ai-footer-inner {
        min-height: 200px;
    }

    .cta-bottom-fade,
    .cta-top-fade {
        height: 90px;
    }

    h2.hero_title\.ai-hero_title.reveal-up {
        font-size: 24px;
    }

    .ai-cta-bg {
        height: 300px;
    }
}