/* =============================================================
   INDUSTRY PAGE — css/industry.css
   All values from Figma node 1120-71 (1366×5040px frame)
   Breakpoints: 1399 · 1199 · 991 · 767 · 575
   ============================================================= */

/* ── Gradient text helper (reused across sections) ────────────── */
.ind-grad-text {
    background: linear-gradient(269deg, #6e196f 5%, #f433e7 152%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =============================================================
   SECTION 1 — HERO
   Figma: y=130, 1366×500, gradient 181.51deg
   ============================================================= */
.ind-hero {
    padding: 160px 0 80px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(181.51deg, rgba(255, 214, 219, 0) 29.59%, rgb(255, 212, 254) 67.12%);
    min-height: 600px;
}

.ind-hero__left {
    position: relative;
    z-index: 2;
}

/* Heading: Outfit Medium 58px, lh 68px, tracking -0.58px */
.ind-hero__heading {
    font-family: var(--font-body);
    font-size: var(--fs-h1);
    font-weight: 500;
    color: #000;
    line-height: 1.172;
    letter-spacing: -0.58px;
    margin: 0 0 20px;
}

/* Body copy: Light 20px, lh 28px, tracking -0.2px */
.ind-hero__desc {
    font-family: var(--font-body);
    font-size: var(--fs-p);
    font-weight: 300;
    color: #000;
    line-height: 1.4;
    letter-spacing: -0.2px;
    margin: 0 0 28px;
    max-width: 639px;
}
.ind-hero__desc p { margin: 0 0 14px; }
.ind-hero__desc p:first-child {
    font-weight: 400;
    margin-bottom: 10px;
}
.ind-hero__desc p:last-child { margin-bottom: 0; }

.ind-hero__btn {
    display: inline-block;
    margin-bottom: 28px;
}

/* Breadcrumb: Light 18px, active #9d248f */
.ind-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: -0.18px;
}
.ind-bc-link {
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}
.ind-bc-link:hover { color: var(--squibit-purple, #9d248f); }
.ind-bc-sep { color: #000; font-size: 14px; line-height: 1; }
.ind-bc-active { color: var(--squibit-purple, #9d248f); }

/* Right column — animated composite */
.ind-hero__right {
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

/* ── Composite canvas (Figma group 1131:22656: 545.77×354.16) ── */
.ind-hr {
    position: relative;
    width: 100%;
    max-width: 546px;
    aspect-ratio: 546 / 354;
}

/* Decorative soft radial circle (Figma Ellipse236) */
.ind-hr__bg-circle {
    position: absolute;
    left: 24.9%; top: 6.8%;
    width: 52.9%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(210, 150, 255, 0.30) 0%, rgba(255, 212, 254, 0.10) 70%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
}

/* Photo 1 — woman with laptop */
.ind-hr__photo1 {
    position: absolute;
    left: 0; top: 0;
    width: 47.4%; height: 56.1%;
    object-fit: cover;
    border-radius: 2%;
    z-index: 9;
    box-shadow: 14px 18px 32px rgba(0,0,0,0.18);
}

/* Photo 2 — man with laptop, mirrored horizontally */
.ind-hr__photo2 {
    position: absolute;
    left: 52.56%; top: 43.9%;
    width: 47.4%; height: 56.1%;
    object-fit: cover;
    border-radius: 2%;
    transform: scaleX(-1);
    z-index: 2;
    box-shadow: 14px 18px 32px rgba(0,0,0,0.18);
}

/* SVG canvas — animated dotted paths + purple junction dots */
.ind-hr__svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 3;
    overflow: visible;
    pointer-events: none;
}

/* Dotted flowing path — stroke-dasharray: 0.001 gap creates perfect round dots via linecap:round */
.ind-hr__path {
fill: none;
    stroke: #9d248f;
    stroke-width: 3px;
    stroke-dasharray: 0.001 8;
    stroke-linecap: round;
    animation: indPathFlow 2s linear infinite;
}

/* Offset lower path so they don't animate in sync */
.ind-hr__path--b { animation-delay: -1s; }

@keyframes indPathFlow {
    to { stroke-dashoffset: -13; }
}

/* Icon card boxes — CSS box with correct fixed-px padding (NOT %, which uses container width) */
.ind-hr__icon {
    position: absolute;
    width: 7%;
    aspect-ratio: 1;
    background: #fff;
    border: 1.5px solid rgba(157, 36, 143, 0.50);
    border-radius: 20%;
    box-sizing: border-box;
    box-shadow: 0 3px 14px rgba(110, 25, 111, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.ind-hr__icon img {     width: 100%;
    height: 100%; object-fit: contain; display: block; }

/* Icon center positions — (Figma left+17.12)÷546, (Figma top+17.12)÷354 */
.ind-hr__icon--1 { left: 57.2%; top:  7.2%; animation: indFloat 3.0s ease-in-out infinite; }
.ind-hr__icon--2 { left: 69.8%; top: 17.9%; animation: indFloat 3.2s ease-in-out infinite 0.45s; }
.ind-hr__icon--3 { left: 76.7%; top: 37.3%; animation: indFloat 2.9s ease-in-out infinite 0.9s; }
.ind-hr__icon--4 { left: 28.9%; top: 66.3%; animation: indFloat 3.1s ease-in-out infinite 0.2s; }
.ind-hr__icon--5 { left: 37.2%; top: 79.4%; animation: indFloat 3.3s ease-in-out infinite 0.65s; }
.ind-hr__icon--6 { left: 47.9%; top: 86.4%; animation: indFloat 3.0s ease-in-out infinite 1.1s; }

@keyframes indFloat {
    0%, 100% { transform: translate(-50%, -50%); }
    50%       { transform: translate(-50%, calc(-50% - 6px)); }
}


/* =============================================================
   SECTION 2 — ONE PLATFORM
   Figma: 1120:11145, y=715, bg #fff, py=80px
   Left images: w=557, h=419 relative container
   Right text: SemiBold 45px heading, Light 20px body lh=30px
   ============================================================= */
.ind-platform {
    padding: 80px 0;
    background: #fff;
}

.ind-platform__left {
    position: relative;
}

/* Container sized to hold both images with overlap */
/* img1: 380×300 top=0 left=0; img2: 356×260 top=159 left=201 → total h=419 w=557 */
.ind-platform__imgs {
    position: relative;
    width: 557px;
    height: 419px;
    max-width: 100%;
}

/* Image 1: 380×300px, br=24px */
.ind-platform__img-main {
    position: absolute;
    left: 0;
    top: 0;
    width: 380px;
    height: 300px;
    object-fit: cover;
    border-radius: 24px;
    z-index: 1;
    display: block;
}

/* Image 2: 356×260px, left=201, top=159, br=24px */
.ind-platform__img-over {
    position: absolute;
    left: 201px;
    top: 159px;
    width: 356px;
    height: 260px;
    object-fit: cover;
    border-radius: 24px;
    z-index: 2;
    display: block;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}



/* Heading: SemiBold 45px, lh=55px, tracking=-0.45px */
.ind-platform__heading {
    font-family: var(--font-body);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: #13002e;
    line-height: 1.222;
    letter-spacing: -0.45px;
    margin: 0 0 24px;
}

/* Body: Light 20px, lh=30px, tracking=-0.2px */
.ind-platform__body {
    max-width: 557px;
}
.ind-platform__body p {
    font-family: var(--font-body);
    font-size: var(--fs-p);
    font-weight: 300;
    color: #13002e;
    line-height: 1.5;
    letter-spacing: -0.2px;
    margin: 0 0 16px;
}
.ind-platform__body p:last-child { margin-bottom: 0; }
.ind-platform__body strong { font-weight: 600; }


/* =============================================================
   SECTION 3 — INDUSTRY CARDS
   Figma bg (1120:76): y=1219, h=1136
   gradient: 269.96deg, #6e196f 4.97% → #f433e7 151.61%
   Card: white bg, br=20px, p=32px
   Icon: 76×76px; title: Bold 32px; bullets: Light 18px
   ============================================================= */
.ind-cards {
    padding: 85px 0 80px;
    background: linear-gradient(269.96deg, #6e196f 4.97%, #f433e7 151.61%);
}

.ind-cards__header {
    margin-bottom: 48px;
}

/* Tag: border white, br=25px, h=51px, Light 18px, white */
.ind-cards__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 51px;
    min-width: 164px;
    padding: 0 24px;
    border: 1.5px solid #fff;
    border-radius: 25px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.18px;
    margin-bottom: 20px;
}

/* Heading: SemiBold 45px, lh=55px, white */
.ind-cards__heading {
    font-family: var(--font-body);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: #fff;
    line-height: 1.222;
    letter-spacing: -0.45px;
    margin: 0;
}

/* Card: transparent on gradient — no background, no border-radius */
/* Figma: cards are direct content on the purple gradient background */
.ind-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

/* Head row: icon + title side by side — gap=11px, items-center */
.ind-card__head {
    display: flex;
    align-items: center;
    gap: 11px;
}

/* Icon: 76×76px */
.ind-card__icon {
    padding: 10px;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ind-card__icon img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    display: block;
}

/* Title: Outfit Bold 32px, white (NOT gradient) */
.ind-card__title {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: #fff;
    line-height: normal;
    letter-spacing: 0;
    margin: 0;
    max-width: 242px;
}

/* Body: flex-col gap=18px */
.ind-card__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Intro (desc + label): flex-col gap=14px, lh=20px */
.ind-card__intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Description: Light 18px, white, lh=20px */
.ind-card__desc {
    font-family: var(--font-body);
    font-size: var(--fs-p);
    font-weight: 300;
    color: #fff;
    line-height: 20px;
    margin: 0;
}

/* "Key needs supported:" — same style as desc */
.ind-card__label {
    font-family: var(--font-body);
    font-size: var(--fs-p);
    font-weight: 300;
    color: #fff;
    line-height: 20px;
    margin: 0;
}

/* Bullet list: Light 18px white, lh=30px */
.ind-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ind-card__list li {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.32vw, 18px);
    font-weight: 300;
    color: #fff;
    line-height: 30px;
    padding-left: 20px;
    position: relative;
}
/* Right-pointing triangle arrow (matches Figma Union icon ▶) */
.ind-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #fff;
}


/* =============================================================
   SECTION 4 — WHAT EVERY INDUSTRY GAINS
   Figma bg (1124:11928): y=2355, h=870, bg=#fff
   Left py=135px; Right image 520×700px
   Heading: SemiBold 45px; Item title: Bold 20px gradient; body: Light 20px lh=30px
   ============================================================= */
.ind-gains {
    padding: 80px 0;
    background: linear-gradient(143.05deg, rgba(255, 214, 219, 0) 18.34%, rgb(204, 118, 201) 77.99%, rgb(255, 255, 255) 90.61%);
    overflow: hidden;
}

.ind-gains__left {
    padding-right: 40px;
}

/* Tag: border #0f233d, br=25px, h=51px, w=218px, Regular 18px, #0f233d */
.ind-gains__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 51px;
    min-width: 218px;
    padding: 0 24px;
    border: 1.5px solid #0f233d;
    border-radius: 25px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: #0f233d;
    letter-spacing: -0.18px;
    margin-bottom: 20px;
    white-space: nowrap;
}

/* Heading: SemiBold 45px, lh=55px, tracking=-0.45px */
.ind-gains__heading {
    font-family: var(--font-body);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: #13002e;
    line-height: 1.222;
    letter-spacing: -0.45px;
    margin: 0 0 32px;
}

.ind-gains__item {
    margin-bottom: 0;
}

/* Item title: Bold 20px gradient */
.ind-gains__item-title {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.46vw, 20px);
    font-weight: 700;
    background: linear-gradient(269deg, #6e196f 5%, #f433e7 152%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.5;
    letter-spacing: -0.2px;
    margin: 16px 0 8px;
}

/* Item body: Light 20px, lh=30px */
.ind-gains__item-body {
    font-family: var(--font-body);
    font-size: var(--fs-p);
    font-weight: 300;
    color: #13002e;
    line-height: 1.5;
    letter-spacing: -0.2px;
    margin: 0;
}

/* Divider: 1px solid */
.ind-gains__divider {
    height: 1px;
    background: rgba(19, 0, 46, 0.15);
    margin: 16px 0 0;
}

/* Right: tall image 520×700px */
.ind-gains__right {
    align-items: flex-start;
}

.ind-gains__img-wrap {
    width: 520px;
    max-width: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.ind-gains__img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* =============================================================
   SECTION 5 — CTA
   Figma bg (1124:11963): y=3225, h=432
   gradient: 269.89deg, #6e196f 4.97% → #f433e7 151.61%
   py=76px
   Tag: white border, br=25px, h=51px, Regular 18px, white
   Heading: SemiBold 49px, lh=57px, tracking=-0.49px, white
   Body: Light 18px, lh=25px, tracking=-0.18px, white
   Button: white bg, br=33px, h=65px, w=262px
     "Get a free demo" Light 23px, #9d248f
   ============================================================= */
.ind-cta {
    padding: 76px 0;
    background: linear-gradient(269.89deg, #6e196f 4.97%, #f433e7 151.61%);
    position: relative;
    overflow: hidden;
}

/* Dotted pattern overlay — Figma node 1124:11964
   PNG is exported with white bg + gray dots.
   invert(1): white→black bg, gray dots→light dots
   mix-blend-mode:screen: black bg becomes transparent,
   light dots lighten the purple gradient ✓ */
.ind-cta::after {
       content: '';
    position: absolute;
    inset: 0;
    background: url(../images/cta-dots.webp) no-repeat;
    pointer-events: none;
    z-index: 0;
    background-size: cover;
    opacity: 0.1;
    background-position: right top;
    mix-blend-mode: luminosity;
}
.ind-cta .container {
    position: relative;
    z-index: 1;
}


/* Tag: border white, br=25px, h=51px, Regular 18px, white */
.ind-cta__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 51px;
    min-width: 164px;
    padding: 0 24px;
    border: 1.5px solid #fff;
    border-radius: 25px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.18px;
    margin-bottom: 20px;
}

/* Heading: SemiBold 49px, lh=57px, tracking=-0.49px, white */
.ind-cta__heading {
    font-family: var(--font-body);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: #fff;
    line-height: 1.163;
    letter-spacing: -0.49px;
    margin: 0 0 20px;
}

/* Body: Light 18px, lh=25px, tracking=-0.18px, white */
.ind-cta__body {
    font-family: var(--font-body);
    font-size: var(--fs-p);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.388;
    letter-spacing: -0.18px;
    margin: 0;
    max-width: 704px;
}

/* Button: white bg, h=65px, w=262px, br=33px, Light 23px, #9d248f */
.ind-cta__btn {
       display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 33px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 300;
    color: #9d248f;
    letter-spacing: -0.23px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.22s, color 0.22s, transform 0.22s, box-shadow 0.22s;
    padding: 15px 40px;
}
.ind-cta__btn:hover {
    background: rgba(255, 255, 255, 0.92);
    color: #6e196f;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}


/* =============================================================
   RESPONSIVE — 1399px
   ============================================================= */
@media (max-width: 1399.98px) {
    .ind-platform__imgs { width: 500px; height: 380px; }
    .ind-platform__img-main { width: 340px; height: 268px; }
    .ind-platform__img-over { width: 318px; height: 232px; left: 182px; top: 148px; }

    .ind-gains__img-wrap { width: 460px; }
    .ind-gains__img { height: 620px; }
}


/* =============================================================
   RESPONSIVE — 1199px
   ============================================================= */
@media (max-width: 1199.98px) {
    .ind-hero { padding: 140px 0 70px; }

    .ind-platform { padding: 70px 0; }
    .ind-platform__imgs { width: 440px; height: 338px; }
    .ind-platform__img-main { width: 300px; height: 238px; }
    .ind-platform__img-over { width: 282px; height: 206px; left: 158px; top: 132px; }


    .ind-gains__left { padding-right: 24px; }
    .ind-gains__img-wrap { width: 400px; }
    .ind-gains__img { height: 560px; }

    .ind-cta__btn { font-size: 20px; width: 230px; height: 58px; }
}


/* =============================================================
   RESPONSIVE — 991px (single column)
   ============================================================= */
@media (max-width: 991.98px) {
    .ind-hero { padding: 120px 0 60px; min-height: auto; }

    .ind-platform { padding: 60px 0; }


    .ind-cards { padding: 70px 0 60px; }

    .ind-gains { padding: 60px 0; }
    .ind-gains__left { padding-right: 0; }

    .ind-cta { padding: 60px 0; }
    .ind-cta__left { margin-bottom: 32px; }
    .ind-platform__img-over{        left: 67px;}
}


/* =============================================================
   RESPONSIVE — 767px
   ============================================================= */
@media (max-width: 767.98px) {
    .ind-hero { padding: 110px 0 50px; }

    .ind-cards { padding: 60px 0 50px; }

    .ind-gains { padding: 60px 0; }

    .ind-cta { padding: 50px 0; }
    .ind-cta__btn { font-size: 18px; width: 220px; height: 54px; }
}


/* =============================================================
   RESPONSIVE — 575px
   ============================================================= */
@media (max-width: 575.98px) {
    .ind-hero { padding: 100px 0 44px; }
    .ind-hero__breadcrumb { font-size: 15px; }

    .ind-platform { padding: 50px 0; }

    .ind-cards { padding: 50px 0 44px; }
    .ind-cards__tag { font-size: 15px; min-width: auto; }
    .ind-card__icon,
    .ind-card__icon img { width: 56px; height: 56px; }
    .ind-card__title { max-width: none; }

    .ind-gains { padding: 44px 0; }
    .ind-gains__tag { font-size: 15px; min-width: auto; height: 44px; }
    .ind-gains__item-title { font-size: 16px; }

    .ind-cta { padding: 44px 0; }
    .ind-cta__tag { font-size: 15px; min-width: auto; }
    .ind-cta__btn { font-size: 17px; width: 200px; height: 50px; }
    .ind-hr{        margin-top: 10px;
        margin-bottom: 30px;}
    .ind-platform__img-over {
        width: 282px;
        height: 206px;
        left: 65px;
        top: 132px;
    }
    .ind-platform__imgs{margin-bottom: 30px;}
    .ind-card{margin-bottom: 30px;}
    .ind-cards .col-lg-4:last-child     .ind-card{margin-bottom: 0px;}
    .ind-gains__img-wrap {margin-top: 30px;}
    .ind-cards__header {
    margin-bottom: 30px;
}
.ind-platform{padding:40px 0px!important;}
.ind-cards{padding:40px 0px!important;}
.ind-gains{padding:40px 0px!important;}
.ind-cta{padding:40px 0px!important;}
.page-industry .blog-section{padding-top:40px!important}
.ind-hero__left{text-align:center!important}
.ind-platform__right{text-align:center!important}
.ind-gains__left{text-align:center!important}
.ind-cta{text-align:center!important}
.ind-cta__left + div{justify-content:center!important}
}