﻿/* MNR SOFT TECH - Industries pages */
:root {
    --ind-blue: #155eef;
    --ind-cyan: #00b8d9;
    --ind-purple: #7657ff;
    --ind-ink: #111b35;
    --ind-muted: #5d6880;
    --ind-line: #e6ebf3
}

.ind-page {
    color: var(--ind-ink);
    background: #fff
}

.ind-container {
    width: min(1160px,calc(100% - 40px));
    margin: auto
}

.ind-hero {
    position: relative;
    overflow: hidden;
    padding: 145px 0 85px;
    background: radial-gradient(circle at 82% 22%,rgba(21,94,239,.13),transparent 30%),radial-gradient(circle at 8% 85%,rgba(0,184,217,.12),transparent 30%),#fbfcff
}

.ind-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 55px;
    align-items: center
}

.ind-eyebrow {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    letter-spacing: 1.8px;
    font-weight: 800;
    color: var(--ind-blue);
    text-transform: uppercase
}

.ind-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ind-cyan);
    box-shadow: 0 0 0 5px #00b8d91c
}

.ind-hero h1 {
    font-family: 'Space Grotesk',sans-serif;
    font-size: clamp(38px,5vw,62px);
    line-height: 1.08;
    letter-spacing: -2px;
    margin: 20px 0
}

    .ind-hero h1 span, .ind-gradient {
        background: linear-gradient(90deg,var(--ind-blue),var(--ind-purple),var(--ind-cyan));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

.ind-hero p {
    font-size: 17px;
    line-height: 1.85;
    color: var(--ind-muted);
    max-width: 650px
}

.ind-actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 28px
}

.ind-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 10px;
    font-weight: 700;
    border: 1px solid var(--ind-line);
    color: var(--ind-ink);
    background: white
}

    .ind-btn.primary {
        color: white;
        border: 0;
        background: linear-gradient(110deg,var(--ind-blue),var(--ind-purple));
        box-shadow: 0 12px 28px #155eef2b
    }

.ind-hero-art {
    position: relative;
    min-height: 330px;
    border: 1px solid #e7edfb;
    border-radius: 28px;
    background: linear-gradient(145deg,#fff,#f2f7ff);
    box-shadow: 0 28px 70px #142a5010;
    display: grid;
    place-items: center;
    padding: 28px
}

.ind-orbit {
    width: min(290px,90%);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #cbdcff;
    display: grid;
    place-items: center;
    position: relative;
    background: radial-gradient(circle,#fff 0 36%,#eef4ff 37% 60%,transparent 61%)
}

.ind-core {
    width: 118px;
    height: 118px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    color: white;
    font-size: 42px;
    background: linear-gradient(135deg,var(--ind-blue),var(--ind-purple),var(--ind-cyan));
    box-shadow: 0 15px 38px #155eef40
}

.ind-chip {
    position: absolute;
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 13px;
    padding: 12px 15px;
    box-shadow: 0 12px 28px #1d2d4c12;
    font-size: 13px;
    font-weight: 700
}

    .ind-chip i {
        color: var(--ind-blue);
        margin-right: 7px
    }

.chip-a {
    top: 18px;
    left: 0
}

.chip-b {
    right: -2px;
    top: 42%
}

.chip-c {
    bottom: 16px;
    left: 10%
}

.ind-section {
    padding: 78px 0
}

    .ind-section.soft {
        background: #f7f9fd
    }

.ind-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 38px
}

    .ind-heading .ind-eyebrow {
        justify-content: center
    }

    .ind-heading h2 {
        font-family: 'Space Grotesk',sans-serif;
        font-size: clamp(28px,3.5vw,42px);
        letter-spacing: -1px;
        line-height: 1.18;
        margin: 15px 0
    }

    .ind-heading p {
        color: var(--ind-muted);
        line-height: 1.8
    }

.ind-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.ind-card {
    border: 1px solid var(--ind-line);
    border-radius: 18px;
    padding: 25px;
    background: #fff;
    box-shadow: 0 10px 30px #12234406;
    transition: transform .2s,box-shadow .2s
}

    .ind-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px #12234410
    }

.ind-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--ind-blue);
    background: linear-gradient(135deg,#e9f0ff,#e4fbff);
    font-size: 20px;
    margin-bottom: 18px
}

.ind-card h3 {
    font-size: 19px;
    margin: 0 0 10px
}

.ind-card p {
    color: var(--ind-muted);
    line-height: 1.75;
    margin: 0
}

.ind-split {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 55px;
    align-items: start
}

    .ind-split h2 {
        font-family: 'Space Grotesk',sans-serif;
        font-size: clamp(28px,3vw,40px);
        line-height: 1.2;
        margin: 13px 0
    }

    .ind-split > div > p {
        color: var(--ind-muted);
        line-height: 1.85
    }

.ind-list {
    display: grid;
    gap: 14px
}

.ind-list-item {
    display: flex;
    gap: 14px;
    border: 1px solid var(--ind-line);
    border-radius: 15px;
    padding: 18px;
    background: white
}

.ind-check {
    flex: 0 0 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e7f9f8;
    color: #0891a5
}

.ind-list-item h3 {
    margin: 0 0 5px;
    font-size: 17px
}

.ind-list-item p {
    margin: 0;
    color: var(--ind-muted);
    line-height: 1.65;
    font-size: 14px
}

.ind-cta {
    padding: 45px;
    border-radius: 24px;
    color: white;
    background: linear-gradient(115deg,#123c98,#644be8 62%,#069eb7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

    .ind-cta h2 {
        font-family: 'Space Grotesk',sans-serif;
        font-size: clamp(25px,3vw,36px);
        margin: 0 0 10px
    }

    .ind-cta p {
        margin: 0;
        line-height: 1.7;
        color: #edf3ff;
        max-width: 650px
    }

    .ind-cta .ind-btn {
        white-space: nowrap;
        border: 0
    }

.ind-page .site-header {
    z-index: 100
}

.ind-page .main-nav a[href*="industries"] {
    color: var(--ind-blue)
}

@media(max-width:850px) {
    .ind-hero-grid, .ind-split {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .ind-hero {
        padding: 120px 0 65px
    }

    .ind-hero-art {
        min-height: 300px
    }

    .ind-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .ind-cta {
        padding: 30px;
        align-items: flex-start;
        flex-direction: column
    }
}

@media(max-width:560px) {
    .ind-container {
        width: min(100% - 28px,1160px)
    }

    .ind-grid {
        grid-template-columns: 1fr
    }

    .ind-section {
        padding: 55px 0
    }

    .ind-hero h1 {
        letter-spacing: -1px
    }

    .ind-hero-art {
        padding: 18px;
        min-height: 275px
    }

    .ind-chip {
        font-size: 11px;
        padding: 9px
    }

    .ind-cta {
        padding: 24px
    }
}


@media(max-width:850px) {
    .footer-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:560px) {
    .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-bottom {
        flex-direction: column
    }
}
