/* ─── Integration section ────────────────────────────────────── */
/* Stage 1920 × 1500px (y 1301–2800 of original sdk.css).        */
/* Elements positioned relative to section top (y − 1301).       */

.integration {
    overflow-x: clip;
    position: relative;
    z-index: 2;
    margin-top: -300px;
}

/* Smooth fade over the hero in the overlap zone.
   z-index: 0 — below stage (z-index:1), above hero (z-index:1 in parent context). */
.integration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--cod-gray) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.integration__stage {
    position: relative;
    width: 1920px;
    height: 1500px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* ════════════════════════════════════════════════════════════════
   H2 HEADING — top:1301 → stage y:0
   left:160, width:1600, height:214

   Staggered layout (matches screenshot):
     Line 1 (y=0):   "One Integration."  — left-aligned, 595px wide
     Line 2 (y=88):  "Infinite Monetization Paths." — offset left 595px
     Line 3 (y=176): subtitle — same 595px offset
════════════════════════════════════════════════════════════════ */

.integration__heading {
    left: 160px;
    position: absolute;
    top: 0;
    width: 1600px;
}

/* "One Integration." — row 1, left-aligned */
.integration__title-blue {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    align-items: center;
    background: linear-gradient(90deg, rgba(1, 114, 253, 1) 0%, rgba(0, 79, 227, 1) 100%);
    background-clip: text;
    color: transparent;
    display: flex;
    font-family: var(--font-montserrat), sans-serif;
    font-size: 72px;
    font-weight: 700;
    height: 72px;
    left: 0;
    letter-spacing: -1.5px;
    line-height: 72px;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

/* "Infinite Monetization Paths." + subtitle — rows 2+3,
   offset 595px to the right (starts where "One Integration." ends) */
.integration__title-right {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    left: 595px;
    position: absolute;
    top: 88px; /* 72px (line-1 height) + 16px (gap) */
    width: 1040px;
}

.integration__title-main {
    align-items: center;
    align-self: stretch;
    color: var(--white-solid);
    display: flex;
    font-family: var(--font-montserrat), sans-serif;
    font-size: 72px;
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 72px;
    margin-top: -1px;
}

.integration__subtitle {
    align-self: stretch;
    color: var(--blue-ribbon);
    display: block;
    font-family: var(--font-raleway), sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 38.4px;
}

.integration__subtitle .highlight {
    color: var(--white-solid);
    letter-spacing: -0.16px;
    font-size: 42px;
    line-height: 42px; /* ≥ font-size to prevent line clipping */
    padding: 0 5px;
    margin-bottom: 10px;
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    white-space: nowrap;
}

.highlight__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

/* ════════════════════════════════════════════════════════════════
   CARD "Immediate Global Scale"
   top:1584 → stage y:283   left:160   875×261
════════════════════════════════════════════════════════════════ */

.integration__card {
    background-color: var(--eerie-black);
    background-image: linear-gradient(
            169deg,
            rgba(1, 114, 253, 0.22) 0%,
            rgba(1, 114, 253, 0) 40%,
            rgba(1, 114, 253, 0.06) 100%
    );
    border-radius: 44px;
    height: 261px;
    left: 160px;
    position: absolute;
    top: 283px;
    width: 875px;
}

/* Inner text block: left:36, top:40 */
.integration__card-inner {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    gap: 20px;
    left: 36px;
    position: absolute;
    top: 40px;
}

.integration__card-title {
    align-items: center;
    color: var(--white-solid);
    display: flex;
    font-family: var(--font-montserrat), sans-serif;
    font-size: 44px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: -1.5px;
    line-height: 44px;
    margin-top: -1px;
    white-space: nowrap;
}

.integration__card-text {
    align-items: center;
    color: var(--silver-chalice);
    display: flex;
    font-family: var(--font-raleway), sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 39.2px;
    width: 790px;
}

/* ════════════════════════════════════════════════════════════════
   SDK ANIMATION
   top:1584 → stage y:283   left:1092   667×1109
════════════════════════════════════════════════════════════════ */

.integration__anim {
    height: 1210px;
    left: 1092px;
    overflow: hidden;
    position: absolute;
    top: 283px;
    width: 667px;
}

#integration-spine-canvas {
    height: 1207px;
    left: -87px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 841px;
    z-index: 0;
}

/* ── group-23499: left column (names+arrows) + right column (hub+cards) ── */

.integration__anim-inner {
    height: 862px;
    left: 0;
    position: absolute;
    top: 0;
    width: 667px;
}

/* ── Left sub-column: 3 network name labels with arrows ── */

/* AdMob — top:215 */
.integration__net-admob {
    height: 108px;
    left: 0;
    position: absolute;
    top: 215px;
    width: 291px;
}

/* AppLovin — top:420 */
.integration__net-applovin {
    height: 108px;
    left: 0;
    position: absolute;
    top: 420px;
    width: 291px;
}

/* IronSource — top:625 */
.integration__net-ironsource {
    height: 108px;
    left: 0;
    position: absolute;
    top: 625px;
    width: 291px;
}

/* Network name text (shared .ad class) */
.integration__net-name {
    align-items: center;
    color: var(--white-solid);
    display: flex;
    font-family: var(--font-montserrat), sans-serif;
    font-size: 36px;
    font-weight: 500;
    height: 40px;
    left: 58px;
    letter-spacing: -1.5px;
    line-height: 39.6px;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

/* Arrow SVG (vector-37) */
.integration__net-arrow {
    height: 111px;
    left: -5px;
    position: absolute;
    top: -3px;
    width: 295px;
}

/* ── Right sub-column: ONE SDK hub + 3 network cards ── */

.integration__hub-col {
    height: 862px;
    left: 286px;
    position: absolute;
    top: 0;
    width: 381px;
}

/* ONE SDK smaller logo (top:0, 377×259) */
.integration__hub-logo {
    height: 259px;
    left: 3px;
    position: absolute;
    top: 0;
    width: 377px;
    z-index: 20;
}

.integration__hub-logo-bg {
    background-image: url(../img/img.png);
    background-position: 50% 50%;
    background-size: cover;
    height: 259px;
    left: 1px;
    position: absolute;
    top: 1px;
    width: 377px;
}

.integration__hub-v26 {
    height: 246px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 385px;
}

.integration__hub-v27 {
    height: 125px;
    left: -4px;
    position: absolute;
    top: 137px;
    width: 385px;
}

.integration__hub-v25 {
    height: 205px;
    left: 46px;
    position: absolute;
    top: 9px;
    width: 291px;
}

.integration__hub-v24 {
    height: 180px;
    left: 63px;
    position: absolute;
    top: 17px;
    width: 255px;
}

.integration__hub-v28 {
    height: 180px;
    left: 63px;
    position: absolute;
    top: 17px;
    width: 255px;
}

.integration__hub-label {
    align-items: center;
    color: var(--tropical-blue);
    display: flex;
    font-family: var(--font-raleway), sans-serif;
    font-size: 50.9px;
    font-style: italic;
    font-weight: 600;
    height: 51px;
    left: 88px;
    letter-spacing: -1.82px;
    line-height: 50.9px;
    position: absolute;
    text-shadow: 0 0 5.28px #0d1626;
    top: 82px;
    white-space: nowrap;
    width: 205px;
}

/* Network card — AdMob (top:197) */
.integration__net-card {
    background-image: url(../img/image-938@2x.png);
    background-position: 50% 50%;
    background-size: cover;
    height: 261px;
    left: 0;
    position: absolute;
    width: 379px;
}

.integration__net-card--admob {
    top: 197px;
    z-index: 19;
}

.integration__net-card--applovin {
    top: 397px;
    z-index: 18;
}

.integration__net-card--ironsrc {
    top: 601px;
    z-index: 17;
}

/* Glow behind logo */
.integration__net-glow {
    background: radial-gradient(50% 50% at 45% 50%, rgba(35, 118, 220, 1) 0%, rgba(1, 114, 253, 0) 85%);
    border-radius: 72.5px;
    filter: blur(20px);
    height: 145px;
    left: calc(50% - 73px);
    position: absolute;
    top: 40px;
    width: 145px;
}

/* Logo container (centered on card) */
.integration__net-logo {
    align-items: center;
    display: flex;
    height: 156px;
    justify-content: center;
    left: calc(50% - 106px);
    position: absolute;
    top: 37px;
    width: 212px;
}

.integration__net-logo img {
    object-fit: cover;
}

.integration__net-logo--admob {
    height: 156px;
    left: 111px;
    position: absolute;
    top: 37px;
    width: 156px;
}

.integration__net-logo--admob img {
    height: 115px;
    margin-left: 20.5px;
    margin-top: 20.5px;
    width: 115px;
    object-fit: cover;
}


/* Card stack (staggered images below hub col) — group-23500 */
.integration__card-stack {
    height: 401px;
    left: 286px;
    position: absolute;
    top: 708px;
    width: 379px;
}

.integration__stack-img {
    aspect-ratio: 1.46;
    height: 261px;
    left: 0;
    object-fit: cover;
    position: absolute;
    width: 379px;
}

.integration__stack-img:nth-child(1) {
    top: 140px;
}

.integration__stack-img:nth-child(2) {
    top: 120px;
}

.integration__stack-img:nth-child(3) {
    top: 100px;
}

.integration__stack-img:nth-child(4) {
    top: 80px;
}

.integration__stack-img:nth-child(5) {
    top: 60px;
}

.integration__stack-img:nth-child(6) {
    top: 40px;
}

.integration__stack-img:nth-child(7) {
    top: 20px;
}

.integration__stack-img:nth-child(8) {
    top: 0;
}

/* ════════════════════════════════════════════════════════════════
   CARD-1 "CAS.AI BRINGS THE WORLD'S TOP AD NETWORKS…"
   top:2538 → stage y:1237   centered in 1920px page
   left: calc(50% - 800px) = 160px   width:918   height:260
════════════════════════════════════════════════════════════════ */

.integration__card2 {
    background-color: var(--eerie-black);
    background-image: linear-gradient(
            169deg,
            rgba(1, 114, 253, 0.22) 0%,
            rgba(1, 114, 253, 0) 40%,
            rgba(1, 114, 253, 0.06) 100%
    );
    border-radius: 44px;
    height: 260px;
    left: 160px;
    overflow: hidden;
    position: absolute;
    top: 1265px;
    width: 918px;
}

/* Blue ellipse glow inside card-2 */
.integration__card2-glow {
    background-color: var(--blue-ribbon);
    border-radius: 335.5px / 63.54px;
    filter: blur(93px);
    height: 127px;
    left: calc(50% - 344px);
    opacity: 0.3;
    position: absolute;
    top: 66px;
    width: 671px;
}

/* Title text */
.integration__card2-title {
    align-items: center;
    color: var(--white-solid);
    display: flex;
    font-family: var(--font-raleway), sans-serif;
    font-size: 32px;
    font-weight: 500;
    height: 90px;
    left: calc(50% - 371px);
    letter-spacing: -0.5px;
    line-height: 44.8px;
    position: absolute;
    top: 40px;
    width: 738px;
}

/* Subtitle text */
.integration__card2-text {
    align-items: center;
    color: var(--silver-chalice);
    display: flex;
    font-family: var(--font-raleway), sans-serif;
    font-size: 28px;
    font-weight: 400;
    height: 78px;
    left: calc(50% - 371px);
    letter-spacing: -1px;
    line-height: 39.2px;
    position: absolute;
    top: 142px;
    width: 645px;
}

/* ── Integration→Comparison bridge connector ─────────────────── */
/* Separate zero-height block between sections — avoids           */
/* overflow-x:clip clipping. img sits at top:-398px so its       */
/* bottom aligns with comparison Y-connector (stage top:99).     */

.integ-comp-bridge {
    height: 200px;
    overflow: visible;
    pointer-events: none;
    position: relative;
    z-index: 0;
}

.integ-comp-connector {
    height: 897px;
    width: 935px;
    pointer-events: none;
    position: absolute;
    /* top / left are set dynamically by connector-align.js */
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
}

/* ── Mobile bridge: line grows → dot appears → discharge → dot gone ── */

.integ-comp-bridge-mobile {
    display: none;
    justify-content: center;
    padding: 8px 0;
}

@media (max-width: 1024px) {
    .integ-comp-bridge-mobile {
        display: flex;
    }
}

.bridge-mobile__connector {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 32px;
    height: 72px;
}

/* ── Line: starts invisible, grows top→bottom on trigger ── */
.bridge-mobile__line {
    width: 2px;
    height: 64px;
    background: linear-gradient(to bottom, #1881E1, rgba(19, 19, 19, 0));
    transform: scaleY(0);
    transform-origin: top center;
    flex-shrink: 0;
}

/* ── Dot: appears after line, disappears on discharge hit ── */
.bridge-mobile__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1881E1;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0);
    will-change: transform, opacity, box-shadow;
}

/* ── Charge: bright spark that travels down the line ── */
.bridge-mobile__charge {
    position: absolute;
    width: 2px;
    height: 16px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0));
    box-shadow: 0 0 8px 3px rgba(24, 129, 225, 0.9),
                0 0 16px 6px rgba(255, 255, 255, 0.3);
    left: 50%;
    transform: translateX(-50%);
    top: -16px;
    border-radius: 1px;
    opacity: 0;
}

/* ── Triggered by .is-animated (added by bridge-mobile-anim.js) ── */

.bridge-mobile__connector.is-animated .bridge-mobile__line {
    animation: bridgeLineGrow 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0s forwards;
}

.bridge-mobile__connector.is-animated .bridge-mobile__dot {
    animation: bridgeDotLife 1.2s ease-out 0.5s both;
}

.bridge-mobile__connector.is-animated .bridge-mobile__charge {
    animation: bridgeChargeFall 0.8s ease-in 0.5s both;
}

/* ── Keyframes ── */

@keyframes bridgeLineGrow {
    0%   { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

@keyframes bridgeDotLife {
    /* invisible until discharge hits */
    0%   { opacity: 0; transform: scale(0); box-shadow: none; }
    64%  { opacity: 0; transform: scale(0); box-shadow: none; }
    /* 65–73%: discharge hits → FLASH */
    73%  { opacity: 1; transform: scale(1.9);
           box-shadow: 0 0 14px 6px rgba(24, 129, 225, 1),
                       0 0 26px 12px rgba(255, 255, 255, 0.35); }
    /* 73–100%: burst and disappear */
    85%  { opacity: 0.5; transform: scale(2.6);
           box-shadow: 0 0 22px 12px rgba(24, 129, 225, 0.3); }
    100% { opacity: 0; transform: scale(0.3); box-shadow: none; }
}

@keyframes bridgeChargeFall {
    0%   { top: -16px; opacity: 0; }
    8%   { opacity: 1; }
    90%  { opacity: 0.9; }
    100% { top: 64px;  opacity: 0; }
}

/* ─── Zoom scaling ───────────────────────────────────────────── */

@media (max-width: 1919px) {
    .integration, .integ-comp-bridge { zoom: 0.97; }
}

@media (max-width: 1800px) {
    .integration, .integ-comp-bridge { zoom: 0.91; }
}

@media (max-width: 1700px) {
    .integration, .integ-comp-bridge { zoom: 0.86; }
}

@media (max-width: 1600px) {
    .integration, .integ-comp-bridge { zoom: 0.83; }
}

@media (max-width: 1500px) {
    .integration, .integ-comp-bridge { zoom: 0.78; }
}

@media (max-width: 1400px) {
    .integration, .integ-comp-bridge { zoom: 0.73; }
}

@media (max-width: 1280px) {
    .integration, .integ-comp-bridge { zoom: 0.67; }
}

@media (max-width: 1100px) {
    .integration, .integ-comp-bridge { zoom: 0.57; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE / TABLET LAYOUT  ≤ 1024px
   Switches from absolute zoom-stage to flex-column left-aligned.
   Animation (.integration__anim) centered via align-self.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* ── Reset zoom, remove hero overlap ── */
    .integration        { zoom: 1; margin-top: 0; }
    .integ-comp-bridge  { display: none; }

    .integration::before { display: none; }

    /* ── Stage: flex column, left-aligned ── */
    .integration__stage {
        width: 100%;
        height: auto;
        left: auto;
        transform: none;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 48px 24px 35px;
        gap: 32px;
    }

    /* ── Heading ── */
    .integration__heading {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
    }

    .integration__title-blue {
        position: relative;
        left: auto;
        top: auto;
        height: auto;
        font-size: 46px;
        line-height: 50px;
    }

    .integration__title-right {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin-top: 8px;
    }

    .integration__title-main {
        font-size: 40px;
        line-height: 44px;
    }

    .integration__subtitle {
        font-size: 22px;
        line-height: 30px;
        margin-top: 8px;
    }

    .integration__subtitle .highlight {
        font-size: 26px;
        line-height: 30px;
    }

    /* ── Card "Immediate Global Scale" ── */
    .integration__card {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        border-radius: clamp(16px, 2.5vw, 24px);
    }

    .integration__card-inner {
        position: relative;
        left: auto;
        top: auto;
        padding: 28px 24px;
        width: auto;
    }

    .integration__card-title {
        font-size: clamp(22px, 4.2vw, 30px);
        line-height: 1.2;
        white-space: normal;
        text-align: left;
        justify-content: flex-start;
    }

    .integration__card-text {
        font-size: clamp(15px, 2.1vw, 18px);
        line-height: 1.6;
        width: auto;
    }

    /* ── Animation: scale to fit viewport ──────────────────────
       anim-inner: 667px wide × 862px tall (desktop).
       Base scale: 0.5 → content 333px × 431px.
       height: 550px — shows all 3 cards at 0.5 scale + breathing room.
       translateX = -(333 * 0.5) = -167px (centers 333px in 50% origin).
       Sub-breakpoints only needed for viewport < 381px (333+48). */
    .integration__anim {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 650px;
        overflow: hidden;
        align-self: center;
        border-radius: 24px;
        /* Ambient hub glow */
        background: radial-gradient(ellipse 70% 42% at 50% 36%,
            rgba(1, 114, 253, 0.11) 0%,
            transparent 70%);
    }


    #integration-spine-canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(0.5);
        transform-origin: top center;
        z-index: 1;
    }

    .integration__anim-inner {
        position: absolute;
        top: 0;
        left: 50%;
        transform-origin: top left;
        transform: translateX(-167px) scale(0.5);
        z-index: 1;
    }

    /* card-stack is decorative and already clipped — hide on mobile */
    .integration__card-stack {
        display: none;
    }

    /* ── Card2 ── */
    .integration__card2 {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        overflow: hidden;
        border-radius: clamp(16px, 2.5vw, 24px);
    }

    .integration__card2-title {
        position: relative;
        left: auto;
        top: auto;
        height: auto;
        width: auto;
        font-size: clamp(18px, 3.4vw, 26px);
        line-height: 1.4;
        padding: 24px 24px 0;
    }

    .integration__card2-text {
        position: relative;
        left: auto;
        top: auto;
        height: auto;
        width: auto;
        font-size: clamp(14px, 2.1vw, 18px);
        line-height: 1.6;
        padding: 8px 24px 24px;
    }

    .integration__card2-glow {
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ── Integration animation: scale sub-breakpoints ─────────────
   Active only in mobile layout (≤1024px sets zoom:1).
   anim-inner: 667px wide. Fits without scale at viewport ≥ 715px.
   Formula: scale = (viewport - 48) / 667
            translateX = -(333 * scale)px
            height     = 600 * scale                              */

/* ≤430px: match hero side padding (20px vs 24px) */
@media (max-width: 430px) {
    .integration__stage {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ≤380px: 333px content no longer fits (333+48=381).
   scale = (viewport-48)/667. At 375px: (375-48)/667 ≈ 0.49.
   Use 0.46 for safe margin: content 307px, height=550*(0.46/0.5)=506px */
@media (max-width: 380px) {
    .integration__anim { height: 598px; }
    .integration__anim-inner { transform: translateX(-153px) scale(0.46); }
}

@media (min-width: 2200px) {
    .integration, .integ-comp-bridge { zoom: 1.15; }
}

@media (min-width: 2800px) {
    .integration, .integ-comp-bridge { zoom: 1.46; }
}

@media (min-width: 3840px) {
    .integration, .integ-comp-bridge { zoom: 2.0; }
}