/*==================================================
INDUSTRIES PAGE — "ENGINEERING EXPERIENCE"
Prefix: in-
==================================================*/

/*---------- HERO (particles kept, no Three.js) ----------*/

.in-hero {

    position: relative;
    padding: 140px 6% 140px;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(70% 60% at 50% 0%, #0B1420 0%, #05070B 60%);

}

.in-hero .section-particles {
    z-index: 2;
}

.in-hero-overlay {

    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(55% 55% at 85% 15%, rgba(66, 165, 255, .14), transparent 70%),
        radial-gradient(50% 50% at 10% 90%, rgba(79, 246, 255, .08), transparent 70%);

}

.in-hero-inner {

    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;

}

.in-hero-inner h1 {

    margin-top: 25px;
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.05;

}

.in-hero-inner p {

    margin: 32px auto 0;
    max-width: 720px;
    color: #9FB1C2;
    line-height: 1.9;
    font-size: clamp(16px, 2vw, 19px);

}

.in-hero-tags {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 44px;

}

.in-hero-tag {

    padding: 12px 24px;
    border-radius: 40px;
    border: 1px solid rgba(79, 246, 255, .2);
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(20px);
    font-size: 13.5px;
    color: #C7D3DE;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: .5px;

}

.in-hero-buttons {

    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
    flex-wrap: wrap;

}

@media(max-width:560px) {

    .in-hero-buttons {
        flex-direction: column;
    }

}

/*---------- SHARED SECTION SHELL ----------*/

.in-section {

    padding: clamp(90px, 14vw, 160px) 6%;

}

.in-section.alt {

    background: #070B11;

}

.in-section-header {

    max-width: 850px;
    margin: 0 auto;
    text-align: center;

}

.in-section-header h2 {

    margin-top: 25px;
    font-size: clamp(32px, 4.5vw, 58px);
    line-height: 1.1;

}

.in-section-header p {

    margin-top: 26px;
    color: #9FB1C2;
    line-height: 1.9;
    font-size: clamp(15px, 1.7vw, 18px);

}

/*---------- COOLING APPLICATIONS (beveled hex-style cards) ----------*/

.in-hex-grid {

    max-width: 1200px;
    margin: clamp(60px, 9vw, 100px) auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;

}

.in-hex-card {

    position: relative;
    padding: clamp(34px, 4vw, 46px);
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .1);
    clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
    transition: .45s;
    opacity: 0;
    transform: translateY(24px);

}

.in-hex-card.in-view {

    opacity: 1;
    transform: translateY(0);

}

.in-hex-card:hover {

    border-color: rgba(79, 246, 255, .35);
    background: rgba(79, 246, 255, .04);
    box-shadow: 0 25px 60px rgba(66, 165, 255, .12);

}

.in-hex-icon {

    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(66, 165, 255, .25), rgba(79, 246, 255, .12));
    color: var(--cyan);
    margin-bottom: 22px;

}

.in-hex-card h3 {

    font-size: clamp(20px, 2.4vw, 25px);
    margin-bottom: 8px;

}

.in-hex-tagline {

    color: var(--cyan);
    font-size: 13.5px;
    letter-spacing: .3px;
    margin-bottom: 24px;
    display: block;

}

.in-hex-cols {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;

}

.in-hex-cols h4 {

    color: #7F93A6;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;

}

.in-hex-cols ul {

    list-style: none;
    padding: 0;

}

.in-hex-cols ul li {

    color: #C7D3DE;
    font-size: 13.5px;
    padding: 5px 0 5px 16px;
    position: relative;

}

.in-hex-cols ul li::before {

    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);

}

@media(max-width:900px) {

    .in-hex-grid {
        grid-template-columns: 1fr;
    }

}

@media(max-width:560px) {

    .in-hex-cols {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}

/*---------- INTERACTIVE COOLING ECOSYSTEM ----------*/

.in-eco-tabs {

    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: clamp(50px, 8vw, 80px) 0 0;

}

.in-eco-tab {

    padding: 14px 30px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .15);
    color: #9FB1C2;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .35s;

}

.in-eco-tab:hover {

    color: white;
    border-color: rgba(79, 246, 255, .35);

}

.in-eco-tab.active {

    color: #05070B;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(79, 246, 255, .25);

}

.in-eco-flow {

    max-width: 560px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.in-eco-step {

    width: 100%;
    padding: 20px 28px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .15);
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    letter-spacing: .5px;
    color: white;
    transition: border-color .4s, box-shadow .4s;
    opacity: 0;
    animation: in-eco-step-in .5s ease forwards;

}

@keyframes in-eco-step-in {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.in-eco-step:hover {

    border-color: rgba(79, 246, 255, .45);
    box-shadow: 0 10px 30px rgba(66, 165, 255, .15);

}

.in-eco-step.in-eco-final {

    background: linear-gradient(135deg, rgba(66, 165, 255, .18), rgba(79, 246, 255, .08));
    border-color: rgba(79, 246, 255, .4);
    color: var(--cyan);

}

.in-eco-arrow {

    width: 2px;
    height: 32px;
    margin: 4px auto;
    background: linear-gradient(180deg, rgba(79, 246, 255, .5), rgba(79, 246, 255, .1));
    position: relative;

}

.in-eco-arrow::after {

    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(79, 246, 255, .6);

}

/*---------- INDUSTRY CHALLENGES TABLE ----------*/

.in-challenge-panel {

    max-width: 900px;
    margin: clamp(50px, 8vw, 90px) auto 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(79, 246, 255, .12);
    background: rgba(255, 255, 255, .02);
    backdrop-filter: blur(20px);

}

.in-challenge-row {

    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;

}

.in-challenge-row+.in-challenge-row {

    border-top: 1px solid rgba(255, 255, 255, .06);

}

.in-challenge-row span {

    padding: 20px 24px;
    font-size: 14.5px;
    display: flex;
    align-items: center;

}

.in-challenge-head {

    background: rgba(79, 246, 255, .06);

}

.in-challenge-head span {

    font-size: 11.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    font-weight: 600;

}

.in-challenge-row:not(.in-challenge-head) span:first-child {

    color: white;
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
    font-size: 13.5px;

}

.in-challenge-row:not(.in-challenge-head) span:nth-child(2) {

    color: #9FB1C2;

}

.in-challenge-row:not(.in-challenge-head) span:last-child {

    color: var(--cyan);

}

@media(max-width:700px) {

    .in-challenge-row {

        grid-template-columns: 1fr;

    }

    .in-challenge-row span {

        padding: 12px 20px;

    }

    .in-challenge-head {

        display: none;

    }

    .in-challenge-row:not(.in-challenge-head) {

        padding: 14px 0;

    }

    .in-challenge-row:not(.in-challenge-head) span::before {

        content: attr(data-label);
        display: block;
        color: #7F93A6;
        font-size: 10.5px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 4px;

    }

}

/*---------- WHICH CHILLER DO I NEED? (selector) ----------*/

.in-selector {

    max-width: 900px;
    margin: clamp(50px, 8vw, 90px) auto 0;
    padding: clamp(34px, 4vw, 50px);
    border-radius: 26px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .12);

}

.in-selector-label {

    display: block;
    color: #7F93A6;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;

}

.in-selector-options {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;

}

.in-selector-btn {

    padding: 20px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .12);
    color: #C7D3DE;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .3s;
    text-align: center;

}

.in-selector-btn:hover {

    border-color: rgba(79, 246, 255, .4);
    color: white;

}

.in-selector-btn.active {

    color: #05070B;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(79, 246, 255, .25);

}

.in-selector-result {

    margin-top: 34px;
    padding-top: 34px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: none;
}

.in-selector-result.active {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    animation: in-eco-step-in .5s ease;

}

.in-selector-metric {

    text-align: center;
    padding: 22px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(79, 246, 255, .1);

}

.in-selector-metric span {

    display: block;
    color: #7F93A6;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;

}

.in-selector-metric b {

    font-family: 'Orbitron', sans-serif;
    color: white;
    font-size: 16px;
    line-height: 1.4;

}

.in-selector-metric.in-selector-rec b {

    background: linear-gradient(135deg, #42A5FF, #4FF6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 14.5px;

}

@media(max-width:800px) {

    .in-selector-options {
        grid-template-columns: 1fr 1fr;
    }

    .in-selector-result.active {
        grid-template-columns: 1fr;
    }

}

/*---------- INDUSTRIES & RECOMMENDED EQUIPMENT ----------*/

.in-equip-grid {

    max-width: 1100px;
    margin: clamp(50px, 8vw, 90px) auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;

}

.in-equip-card {

    padding: 28px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .08);
    transition: .4s;

}

.in-equip-card:hover {

    transform: translateY(-6px);
    border-color: rgba(79, 246, 255, .28);
    box-shadow: 0 20px 50px rgba(66, 165, 255, .1);

}

.in-equip-card h3 {

    font-size: 16.5px;
    margin-bottom: 18px;

}

.in-equip-card ul {

    list-style: none;
    padding: 0;

}

.in-equip-card ul li {

    color: #C7D3DE;
    font-size: 13.5px;
    padding: 8px 0 8px 22px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .05);

}

.in-equip-card ul li:last-child {

    border-bottom: none;

}

.in-equip-card ul li::before {

    content: "✓";
    position: absolute;
    left: 0;
    color: var(--cyan);

}

@media(max-width:900px) {

    .in-equip-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media(max-width:560px) {

    .in-equip-grid {
        grid-template-columns: 1fr;
    }

}

/*---------- COMMON COOLING PROBLEMS ----------*/

.in-problem-grid {

    max-width: 1000px;
    margin: clamp(50px, 8vw, 90px) auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;

}

.in-problem-card {

    padding: 28px 26px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .08);
    transition: .35s;

}

.in-problem-card:hover {

    border-color: rgba(79, 246, 255, .28);
    transform: translateY(-6px);

}

.in-problem-card h3 {

    font-size: 16px;
    margin-bottom: 16px;
    color: var(--cyan);

}

.in-problem-line {

    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.7;
    padding: 8px 0;

}

.in-problem-line.in-problem-bad {

    color: #9FB1C2;

}

.in-problem-line.in-problem-bad::before {

    content: "✕";
    color: #FF6B6B;
    flex-shrink: 0;
    font-weight: 700;

}

.in-problem-line.in-problem-good {

    color: #D3DEE8;

}

.in-problem-line.in-problem-good::before {

    content: "✓";
    color: var(--cyan);
    flex-shrink: 0;
    font-weight: 700;

}

@media(max-width:700px) {

    .in-problem-grid {
        grid-template-columns: 1fr;
    }

}

/*---------- WHY DIFFERENT INDUSTRIES CHOOSE LOHABOUR ----------*/

.in-why-grid {

    max-width: 1150px;
    margin: clamp(50px, 8vw, 90px) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;

}

.in-why-card {

    position: relative;
    overflow: hidden;
    padding: clamp(30px, 3.5vw, 40px);
    border-radius: 22px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .08);
    transition: .4s;

}

.in-why-card::before {

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    transform: translateX(-100%);
    transition: .6s;

}

.in-why-card:hover::before {

    transform: translateX(100%);

}

.in-why-card:hover {

    transform: translateY(-8px);
    border-color: rgba(79, 246, 255, .28);
    box-shadow: 0 20px 50px rgba(66, 165, 255, .1);

}

.in-why-icon {

    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: linear-gradient(135deg, rgba(66, 165, 255, .25), rgba(79, 246, 255, .12));
    color: var(--cyan);
    margin-bottom: 22px;

}

.in-why-card h3 {

    font-size: 18px;
    margin-bottom: 12px;

}

.in-why-card p {

    color: #9FB1C2;
    font-size: 14px;
    line-height: 1.75;

}

@media(max-width:900px) {

    .in-why-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media(max-width:560px) {

    .in-why-grid {
        grid-template-columns: 1fr;
    }

}

/*---------- INDUSTRY COMPARISON TABLE ----------*/

.in-compare-wrap {

    max-width: 1000px;
    margin: clamp(50px, 8vw, 90px) auto 0;
    overflow-x: auto;
    border-radius: 24px;
    border: 1px solid rgba(79, 246, 255, .12);
    background: rgba(255, 255, 255, .02);

}

.in-compare-table {

    width: 100%;
    border-collapse: collapse;
    min-width: 700px;

}

.in-compare-table th {

    text-align: left;
    padding: 20px 26px;
    font-size: 11.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(79, 246, 255, .06);
    border-bottom: 1px solid rgba(79, 246, 255, .15);

}

.in-compare-table td {

    padding: 20px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: #D2DCE5;
    font-size: 14.5px;

}

.in-compare-table tr:last-child td {

    border-bottom: none;

}

.in-compare-table td:first-child {

    color: white;
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;

}

.in-compare-table td:last-child {

    color: var(--cyan);

}

/*---------- ENGINEERING SUPPORT ----------*/

.in-support-grid {

    max-width: 1100px;
    margin: clamp(50px, 8vw, 90px) auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;

}

.in-support-questions {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;

}

.in-support-q {

    padding: 22px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .1);
    text-align: center;

}

.in-support-q span {

    display: block;
    font-family: 'Orbitron', sans-serif;
    color: var(--cyan);
    font-size: 20px;
    margin-bottom: 10px;

}

.in-support-q b {

    color: white;
    font-size: 13.5px;
    font-weight: 500;

}

.in-support-text p {

    color: #9FB1C2;
    line-height: 1.9;
    font-size: 15.5px;
    margin-bottom: 20px;

}

.in-support-text ul {

    list-style: none;
    padding: 0;
    margin: 24px 0 30px;

}

.in-support-text ul li {

    color: #D3DEE8;
    font-size: 14.5px;
    padding: 10px 0 10px 26px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .05);

}

.in-support-text ul li:last-child {

    border-bottom: none;

}

.in-support-text ul li::before {

    content: "✔";
    position: absolute;
    left: 0;
    color: var(--cyan);
    font-size: 12px;

}

@media(max-width:900px) {

    .in-support-grid {
        grid-template-columns: 1fr;
    }

}

@media(max-width:560px) {

    .in-support-questions {
        grid-template-columns: 1fr 1fr;
    }

}

/*---------- RESPONSIVE FIXES ----------*/

@media(max-width:480px) {

    .in-hero,
    .in-section {

        padding-left: 5%;
        padding-right: 5%;

    }

}