:root {

    --blue: #102c92;
    --blue-dark: #061a45;
    --cyan: #08c8ee;
    --cyan-dark: #008fd5;

    --text: #263f61;
    --muted: #667085;

    --white: #ffffff;
    --light: #f5fbfe;
    --border: #dceaf2;

    --container: 1400px;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 30px;

    --shadow-sm:
        0 8px 25px rgba(5,65,105,.05);

    --shadow-md:
        0 18px 45px rgba(5,65,105,.10);

    --shadow-lg:
        0 30px 70px rgba(5,65,105,.15);

    --transition:
        .35s cubic-bezier(.2,.8,.2,1);

}

/* =====================================================
   ABOUT PAGE
===================================================== */


/* =====================================================
   ABOUT HERO
===================================================== */

.about-page-hero {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #061a45,
            #073d6c
        );

    color: white;
}


.about-page-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .08;

    background-image:
        linear-gradient(
            rgba(80,220,255,.5) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(80,220,255,.5) 1px,
            transparent 1px
        );

    background-size: 60px 60px;
}


.about-hero-glow {

    position: absolute;

    width: 600px;

    height: 600px;

    right: -250px;

    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,207,244,.20),
            transparent 68%
        );

    animation:
        aboutHeroGlow
        8s
        ease-in-out
        infinite;
}


@keyframes aboutHeroGlow {

    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

}


.about-hero-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

    padding: 100px 0 80px;
}


.about-hero-content .section-eyebrow {

    color: #58dfff;
}


.about-hero-content h1 {

    margin: 20px 0;

    font-size:
        clamp(50px, 6vw, 82px);

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 600;
}


.about-hero-content h1 .gradient-text {

    color: #58dfff;

    background: none;
}


.about-hero-content > p {

    max-width: 650px;

    color:
        rgba(255,255,255,.62);

    font-size: 16px;

    line-height: 1.8;
}


.about-breadcrumb {

    margin-top: 35px;

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        rgba(255,255,255,.45);

    font-size: 11px;
}


.about-breadcrumb a {

    color: #58dfff;
}


.about-breadcrumb i {

    font-size: 8px;
}


/* =====================================================
   STORY
===================================================== */

.about-story {

    padding: 115px 0;

    background: white;
}


.about-story-grid {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 90px;

    align-items: center;
}


.about-story-visual {

    position: relative;

    min-height: 550px;
}


.story-image {

    width: 90%;

    height: 520px;

    overflow: hidden;

    border-radius: 26px;

    transform: rotate(-2deg);

    box-shadow:
        var(--shadow-lg);
}


.story-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .8s ease;
}


.story-image:hover img {

    transform: scale(1.05);
}


.story-experience {

    position: absolute;

    right: 0;

    bottom: 45px;

    width: 280px;

    padding: 17px;

    border:
        1px solid #dcebf2;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 13px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        var(--shadow-md);

    backdrop-filter: blur(12px);
}


.story-experience > i {

    width: 48px;

    height: 48px;

    border-radius: 13px;

    display: grid;

    place-items: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );
}


.story-experience strong {

    display: block;

    color: var(--blue);

    font-size: 13px;

    line-height: 1.3;
}


.story-experience span {

    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 8px;
}


.about-story-content > h2 {

    margin: 15px 0 22px;

    max-width: 650px;
}


.about-lead {

    color: #344054 !important;

    font-size: 17px !important;

    font-weight: 500;
}


.about-story-content > p {

    max-width: 650px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}


.about-story-points {

    margin-top: 28px;

    padding-top: 24px;

    border-top: 1px solid #e5eef3;

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 14px;
}


.about-story-points div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #52677a;

    font-size: 11px;
}


.about-story-points i {

    color: var(--cyan-dark);

}


/* =====================================================
   VISION MISSION
===================================================== */

.vision-mission-section {

    padding: 110px 0;

    background:
        #f5fbfe;
}


.vm-heading {

    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;
}


.vm-heading .section-eyebrow {

    justify-content: center;
}


.vm-heading .section-title {

    margin: 15px 0;
}


.vm-heading > p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


.vm-grid {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 22px;
}


.vm-card {

    position: relative;

    min-height: 390px;

    padding: 45px;

    overflow: hidden;

    border-radius: 22px;

    background: white;

    border: 1px solid var(--border);

    box-shadow: var(--shadow-sm);

    transition: var(--transition);
}


.vm-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow-md);
}


.vm-card::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    right: -130px;

    bottom: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,193,237,.10),
            transparent 70%
        );
}


.vm-number {

    position: absolute;

    top: 28px;

    right: 30px;

    color: #cbdce5;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


.vm-icon {

    width: 62px;

    height: 62px;

    margin-bottom: 28px;

    border-radius: 17px;

    display: grid;

    place-items: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    font-size: 21px;

    box-shadow:
        0 12px 25px rgba(0,130,200,.15);
}


.vm-label {

    color: var(--cyan-dark);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


.vm-card h3 {

    margin: 10px 0 14px;

    color: var(--blue);

    font-size: 26px;

    font-weight: 600;
}


.vm-card p {

    max-width: 550px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}


.vm-line {

    width: 55px;

    height: 2px;

    margin-top: 25px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue)
        );
}


.vm-keyword {

    display: block;

    margin-top: 14px;

    color: #a0aeba;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =====================================================
   APPROACH
===================================================== */

.about-approach {

    padding: 115px 0;

    background: white;
}


.approach-heading {

    max-width: 750px;

    margin-bottom: 60px;
}


.approach-heading .section-title {

    margin: 15px 0;
}


.approach-heading > p {

    color: var(--muted);

    font-size: 14px;
}


.approach-grid {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 12px;
}


.approach-step {

    position: relative;

    padding: 30px 20px;

    border: 1px solid var(--border);

    border-radius: 18px;

    background: #fbfdfe;

    transition: var(--transition);
}


.approach-step:hover {

    transform: translateY(-7px);

    background: white;

    box-shadow: var(--shadow-md);
}


.step-number {

    position: absolute;

    top: 15px;

    right: 17px;

    color: #cbdde7;

    font-size: 9px;

    font-weight: 800;
}


.step-icon {

    width: 50px;

    height: 50px;

    margin-bottom: 20px;

    border-radius: 14px;

    display: grid;

    place-items: center;

    color: var(--cyan-dark);

    background: #eaf9fd;

    font-size: 17px;

    transition: var(--transition);
}


.approach-step:hover .step-icon {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );
}


.approach-step h3 {

    margin: 0 0 8px;

    color: var(--blue);

    font-size: 18px;
}


.approach-step p {

    margin: 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.6;
}


.approach-connector {

    width: 28px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue)
        );
}


/* =====================================================
   WHY CRYSTAL
===================================================== */

.why-crystal-section {

    padding: 110px 0;

    color: white;

    background:
        linear-gradient(
            135deg,
            #061a45,
            #073c6b
        );
}


.why-crystal-grid {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 90px;

    align-items: center;
}


.why-crystal-content .section-eyebrow {

    color: #55ddff;
}


.why-crystal-content .section-title {

    margin: 15px 0 20px;

    color: white;
}


.why-crystal-content > p {

    max-width: 520px;

    margin-bottom: 30px;

    color:
        rgba(255,255,255,.58);

    font-size: 14px;

    line-height: 1.8;
}


.why-crystal-content .btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;
}


.why-crystal-features {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 15px;
}


.why-feature {

    padding: 25px;

    border:
        1px solid rgba(88,220,255,.14);

    border-radius: 17px;

    background:
        rgba(255,255,255,.04);

    transition: var(--transition);
}


.why-feature:hover {

    transform: translateY(-5px);

    border-color:
        rgba(88,220,255,.35);

    background:
        rgba(255,255,255,.07);
}


.why-feature-icon {

    width: 42px;

    height: 42px;

    margin-bottom: 15px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    color: #55ddff;

    background:
        rgba(50,210,245,.08);
}


.why-feature h3 {

    margin: 0 0 7px;

    color: white;

    font-size: 14px;
}


.why-feature p {

    margin: 0;

    color:
        rgba(255,255,255,.48);

    font-size: 11px;

    line-height: 1.6;
}


/* =====================================================
   COMMITMENT
===================================================== */

.crystal-commitment {

    padding: 90px 0;

    background: #f5fbfe;
}


.commitment-box {

    position: relative;

    min-height: 260px;

    padding: 50px 60px;

    overflow: hidden;

    border-radius: 25px;

    display: flex;

    align-items: center;

    gap: 50px;

    background: white;

    border: 1px solid var(--border);

    box-shadow: var(--shadow-sm);
}


.commitment-water {

    width: 160px;

    height: 160px;

    flex-shrink: 0;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle,
            rgba(0,199,240,.18),
            transparent 68%
        );
}


.commitment-drop {

    width: 85px;

    height: 85px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    font-size: 27px;

    box-shadow:
        0 15px 35px rgba(0,130,200,.20);
}


.commitment-content {

    max-width: 750px;
}


.commitment-content h2 {

    margin: 14px 0;

    color: var(--blue);

    font-size:
        clamp(30px,4vw,48px);

    line-height: 1.05;
}


.commitment-content p {

    max-width: 650px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}


/* =====================================================
   ABOUT CTA
===================================================== */

.about-page-cta {

    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #061a45,
            #073d6c
        );
}


.about-cta-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    right: -200px;

    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,210,250,.18),
            transparent 70%
        );
}


.about-cta-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.about-cta-inner > div > span {

    color: #55ddff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


.about-cta-inner h2 {

    margin: 10px 0 8px;

    color: white;

    font-size:
        clamp(32px,4vw,50px);

    line-height: 1.05;
}


.about-cta-inner p {

    margin: 0;

    color:
        rgba(255,255,255,.55);

    font-size: 13px;
}


.about-cta-button {

    min-height: 55px;

    padding: 0 23px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #102c92;

    background: white;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    transition: var(--transition);
}


.about-cta-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.2);
}


.about-cta-button i {

    color: var(--cyan-dark);

    transition: transform .3s ease;
}


.about-cta-button:hover i {

    transform: translateX(4px);
}


/* =====================================================
   ABOUT PAGE RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .about-story-grid,
    .why-crystal-grid {

        gap: 50px;
    }


    .approach-grid {

        grid-template-columns:
            repeat(2,1fr);
    }


    .approach-connector {

        display: none;
    }

}


@media (max-width: 800px) {

    .about-page-hero {

        min-height: 450px;
    }


    .about-story-grid,
    .why-crystal-grid {

        grid-template-columns: 1fr;
    }


    .about-story-visual {

        max-width: 600px;

        width: 100%;

        margin: auto;
    }


    .vm-grid {

        grid-template-columns: 1fr;
    }


    .why-crystal-content {

        max-width: 650px;
    }


    .commitment-box {

        flex-direction: column;

        align-items: flex-start;

        padding: 40px;
    }


    .about-cta-inner {

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .about-story,
    .vision-mission-section,
    .about-approach,
    .why-crystal-section {

        padding: 75px 0;
    }


    .about-hero-content h1 {

        font-size: 52px;

        letter-spacing: -2px;
    }


    .story-image {

        width: 92%;

        height: 400px;
    }


    .story-experience {

        right: 0;

        bottom: 30px;

        width: 235px;
    }


    .about-story-points {

        grid-template-columns: 1fr;
    }


    .vm-card {

        padding: 30px;

        min-height: auto;
    }


    .approach-grid {

        grid-template-columns: 1fr;
    }


    .why-crystal-features {

        grid-template-columns: 1fr;
    }


    .commitment-box {

        padding: 30px;

        gap: 25px;
    }


    .commitment-water {

        width: 110px;

        height: 110px;
    }


    .commitment-drop {

        width: 65px;

        height: 65px;

        font-size: 20px;
    }


    .about-cta-inner h2 {

        font-size: 34px;
    }


    .about-cta-button {

        width: 100%;

        justify-content: center;
    }

}

/* =====================================================
   CONTACT PAGE
===================================================== */


/* =====================================================
   CONTACT HERO
===================================================== */

.contact-hero {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #061a45,
            #073d6c
        );

    color: #fff;
}


.contact-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .06;

    background-image:
        linear-gradient(
            rgba(80,220,255,.5) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(80,220,255,.5) 1px,
            transparent 1px
        );

    background-size: 60px 60px;
}


.contact-hero-glow {

    position: absolute;

    width: 650px;

    height: 650px;

    right: -300px;

    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,210,250,.20),
            transparent 68%
        );

    animation:
        contactGlow 8s ease-in-out infinite;
}


.contact-hero-ring {

    position: absolute;

    border: 1px solid rgba(85,220,255,.12);

    border-radius: 50%;

    pointer-events: none;
}


.ring-one {

    width: 500px;

    height: 500px;

    left: -280px;

    bottom: -320px;
}


.ring-two {

    width: 330px;

    height: 330px;

    left: -190px;

    bottom: -220px;
}


@keyframes contactGlow {

    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

}


.contact-hero-content {

    position: relative;

    z-index: 2;

    max-width: 800px;

    padding: 100px 0 80px;
}


.contact-hero-content .section-eyebrow {

    color: #55ddff;
}


.contact-hero-content h1 {

    margin: 18px 0;

    font-size:
        clamp(48px, 6vw, 78px);

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 600;
}


.contact-hero-content h1 .gradient-text {

    color: #55ddff;

    background: none;
}


.contact-hero-content > p {

    max-width: 650px;

    color:
        rgba(255,255,255,.62);

    font-size: 17px;

    line-height: 1.8;
}


.contact-breadcrumb {

    margin-top: 30px;

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,.42);

    font-size: 12px;
}


.contact-breadcrumb a {

    color: #55ddff;
}


.contact-breadcrumb i {

    font-size: 7px;
}


/* =====================================================
   QUICK CONTACT CARDS
===================================================== */

.contact-quick {

    position: relative;

    z-index: 5;

    margin-top: -45px;

    padding-bottom: 75px;
}


.contact-quick-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
}


.contact-quick-card {

    min-height: 105px;

    padding: 18px;

    border:
        1px solid var(--border);

    border-radius: 17px;

    display: flex;

    align-items: center;

    gap: 13px;

    color: inherit;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(4,60,100,.08);

    transition: var(--transition);
}


.contact-quick-card:hover {

    transform: translateY(-6px);

    border-color: #9bd9eb;

    box-shadow:
        0 22px 45px rgba(4,60,100,.13);
}


.contact-quick-icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    border-radius: 14px;

    display: grid;

    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );
}


.contact-quick-card > div:nth-child(2) {

    flex: 1;
}


.contact-quick-card span {

    display: block;

    margin-bottom: 4px;

    color: var(--cyan-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.contact-quick-card strong {

    display: block;

    color: var(--blue);

    font-size: 14px;
}


.contact-quick-card small {

    display: block;

    margin-top: 4px;

    color: #8b99a7;

    font-size: 11px;
}


.contact-quick-card > i:last-child {

    color: #9aabb8;

    font-size: 12px;

    transition:
        transform .3s ease,
        color .3s ease;
}


.contact-quick-card:hover > i:last-child {

    color: var(--cyan-dark);

    transform: translateX(4px);
}


.whatsapp-card .contact-quick-icon {

    background:
        linear-gradient(
            135deg,
            #25d366,
            #128c7e
        );
}


/* =====================================================
   MAIN CONTACT SECTION
===================================================== */

.contact-section {

    padding: 35px 0 110px;

    background: #f7fbfd;
}


.contact-grid {

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 80px;

    align-items: start;
}


/* =====================================================
   CONTACT INFORMATION
===================================================== */

.contact-info {

    padding-top: 35px;
}


.contact-info .section-title {

    margin: 15px 0 20px;
}


.contact-info-intro {

    max-width: 520px;

    margin-bottom: 40px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.8;
}


.contact-info-item {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 27px;
}


.contact-info-icon {

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    border-radius: 12px;

    display: grid;

    place-items: center;

    color: var(--cyan-dark);

    background: #eaf8fc;
}


.contact-info-item span {

    display: block;

    margin-bottom: 5px;

    color: #8a9aa8;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.contact-info-item strong,
.contact-info-item a {

    display: block;

    color: var(--blue);

    font-size: 16px;

    font-weight: 600;
}


.contact-info-item p {

    max-width: 360px;

    margin: 5px 0 0;

    color: #7d8d9a;

    font-size: 12px;

    line-height: 1.6;
}


/* =====================================================
   WHATSAPP
===================================================== */

.contact-whatsapp {

    min-height: 67px;

    margin-top: 35px;

    padding: 10px 13px;

    border:
        1px solid #cfe7df;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: #165c43;

    background: #f2fbf7;

    transition: var(--transition);
}


.contact-whatsapp:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 30px rgba(20,130,90,.10);
}


.contact-whatsapp > div {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: #fff;

    background: #20b76c;

    font-size: 19px;
}


.contact-whatsapp span {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;

    font-size: 13px;

    font-weight: 700;
}


.contact-whatsapp small {

    color: #62a287;

    font-size: 7px;

    letter-spacing: 1px;
}


.contact-whatsapp > i {

    color: #58a486;

    font-size: 12px;
}


/* =====================================================
   FORM CARD
===================================================== */

.contact-form-card {

    padding: 38px;

    border:
        1px solid var(--border);

    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 20px 55px rgba(5,65,105,.08);
}


.contact-form-heading {

    margin-bottom: 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.contact-form-heading span {

    color: var(--cyan-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.contact-form-heading h3 {

    margin: 6px 0 0;

    color: var(--blue);

    font-size: 27px;

    font-weight: 600;
}


.contact-form-drop {

    width: 52px;

    height: 52px;

    border-radius: 15px;

    display: grid;

    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    box-shadow:
        0 10px 25px rgba(0,130,200,.16);
}


/* =====================================================
   FORM GRID
===================================================== */

.crystal-contact-form {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


.contact-field {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.contact-field.full {

    grid-column: 1 / -1;
}


.contact-field label {

    color: #52677a;

    font-size: 12px;

    font-weight: 700;
}


.contact-field label em {

    color: var(--cyan-dark);

    font-style: normal;
}


.contact-field > div {

    position: relative;
}


.contact-field > div > i:first-child {

    position: absolute;

    left: 15px;

    top: 50%;

    z-index: 2;

    transform: translateY(-50%);

    color: #8ba2b1;

    font-size: 14px;

    pointer-events: none;
}


.contact-field input,
.contact-field select,
.contact-field textarea {

    width: 100%;

    border:
        1px solid #dce7ed;

    border-radius: 11px;

    outline: none;

    color: #263f61;

    background: #fbfdfe;

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.contact-field input,
.contact-field select {

    height: 48px;

    padding:
        0 15px 0 42px;
}


.contact-field textarea {

    min-height: 125px;

    padding:
        15px 15px 15px 42px;

    resize: vertical;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {

    color: #a5b1bb;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {

    border-color: #66cde7;

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(0,170,220,.07);
}


/* =====================================================
   SELECT
===================================================== */

.contact-field select {

    appearance: none;

    cursor: pointer;
}


.select-icon {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #8ba2b1;

    font-size: 11px;

    pointer-events: none;
}


/* =====================================================
   TEXTAREA
===================================================== */

.textarea-wrap > i {

    top: 18px !important;

    transform: none !important;
}


/* =====================================================
   SUBMIT
===================================================== */

.contact-submit {

    grid-column: 1 / -1;

    min-height: 54px;

    border: 0;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    color: #fff;

    background:
        linear-gradient(
            110deg,
            var(--blue),
            var(--cyan-dark)
        );

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(0,110,180,.16);

    transition: var(--transition);
}


.contact-submit:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(0,110,180,.24);
}


.contact-submit span {

    width: 32px;

    height: 32px;

    border:
        1px solid rgba(255,255,255,.22);

    border-radius: 50%;

    display: grid;

    place-items: center;
}


.contact-submit i {

    transition:
        transform .3s ease;
}


.contact-submit:hover i {

    transform: translateX(3px);
}


.contact-form-note {

    grid-column: 1 / -1;

    text-align: center;

    color: #9aa8b3;

    font-size: 11px;
}


.contact-form-note i {

    margin-right: 4px;

    color: #6db4cb;
}


/* =====================================================
   FORM MESSAGES
===================================================== */

.form-message {

    margin-bottom: 20px;

    padding: 14px;

    border-radius: 11px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-size: 13px;
}


.form-message.success {

    color: #176647;

    background: #effaf5;

    border: 1px solid #c9eadb;
}


.form-message.error {

    color: #9b3434;

    background: #fff5f5;

    border: 1px solid #f0d0d0;
}


.form-message strong {

    display: block;

    margin-bottom: 3px;
}


.form-message p {

    margin: 0;

    line-height: 1.5;
}


/* =====================================================
   VISIT SECTION
===================================================== */

.contact-visit {

    padding: 110px 0;

    background: #fff;
}


.visit-heading {

    max-width: 700px;

    margin-bottom: 42px;
}


.visit-heading .section-title {

    margin: 15px 0;
}


.visit-heading > p {

    max-width: 600px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.7;
}


.visit-card {

    min-height: 390px;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 23px;

    display: grid;

    grid-template-columns: .4fr .6fr;

    box-shadow:
        var(--shadow-sm);
}


.visit-details {

    padding: 45px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    background: #f4fbfe;
}


.visit-icon {

    width: 55px;

    height: 55px;

    margin-bottom: 22px;

    border-radius: 15px;

    display: grid;

    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    font-size: 19px;
}


.visit-details > span {

    color: var(--cyan-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.6px;
}


.visit-details h3 {

    margin: 8px 0;

    color: var(--blue);

    font-size: 25px;
}


.visit-details p {

    max-width: 300px;

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


.directions-btn {

    margin-top: 25px;

    padding: 12px 18px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #fff;

    background: var(--blue);

    font-size: 12px;

    font-weight: 700;

    transition: var(--transition);
}


.directions-btn:hover {

    transform: translateY(-3px);

    background: var(--cyan-dark);
}


.visit-map {

    min-height: 390px;

    background: #dcecf2;
}


.map-placeholder {

    width: 100%;

    height: 100%;

    min-height: 390px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #e9f5f8,
            #dcecf2
        );

    color: #718c9b;
}


.map-placeholder i {

    margin-bottom: 15px;

    color: var(--cyan-dark);

    font-size: 38px;
}


.map-placeholder strong {

    color: var(--blue);

    font-size: 16px;
}


.map-placeholder span {

    margin-top: 5px;

    color: #8196a2;

    font-size: 11px;
}


/* =====================================================
   BOTTOM CTA
===================================================== */

.contact-bottom-cta {

    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #061a45,
            #073d6c
        );

    color: #fff;
}


.contact-bottom-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    right: -200px;

    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,210,250,.18),
            transparent 70%
        );
}


.contact-bottom-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}


.contact-bottom-inner > div:first-child > span {

    color: #55ddff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.contact-bottom-inner h2 {

    margin: 10px 0;

    color: #fff;

    font-size:
        clamp(32px, 4vw, 50px);

    line-height: 1.05;
}


.contact-bottom-inner p {

    margin: 0;

    color:
        rgba(255,255,255,.52);

    font-size: 15px;
}


.contact-bottom-actions {

    display: flex;

    align-items: center;

    gap: 10px;
}


.bottom-call,
.bottom-whatsapp {

    min-height: 52px;

    padding: 0 20px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-size: 13px;

    font-weight: 700;

    transition: var(--transition);
}


.bottom-call {

    color: var(--blue);

    background: #fff;
}


.bottom-whatsapp {

    color: #fff;

    border:
        1px solid rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.08);
}


.bottom-call:hover,
.bottom-whatsapp:hover {

    transform: translateY(-4px);
}


.bottom-call:hover {

    box-shadow:
        0 15px 30px rgba(0,0,0,.2);
}


.bottom-whatsapp:hover {

    background:
        rgba(255,255,255,.14);
}


/* =====================================================
   CONTACT RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .contact-grid {

        gap: 45px;
    }


    .contact-quick-grid {

        grid-template-columns: 1fr;
    }


    .visit-card {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 850px) {

    .contact-grid {

        grid-template-columns: 1fr;
    }


    .contact-info {

        padding-top: 0;
    }


    .contact-form-card {

        max-width: 750px;
    }


    .contact-bottom-inner {

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .contact-hero {

        min-height: 440px;
    }


    .contact-hero-content {

        padding: 80px 0 65px;
    }


    .contact-hero-content h1 {

        font-size: 50px;

        letter-spacing: -2px;
    }


    .contact-quick {

        margin-top: -25px;

        padding-bottom: 55px;
    }


    .contact-section {

        padding-bottom: 75px;
    }


    .contact-form-card {

        padding: 25px 18px;

        border-radius: 18px;
    }


    .crystal-contact-form {

        grid-template-columns: 1fr;
    }


    .contact-field.full {

        grid-column: auto;
    }


    .contact-submit,
    .contact-form-note {

        grid-column: auto;
    }


    .contact-form-heading h3 {

        font-size: 23px;
    }


    .contact-visit {

        padding: 75px 0;
    }


    .visit-details {

        padding: 30px 25px;
    }


    .visit-map,
    .map-placeholder {

        min-height: 300px;
    }


    .contact-bottom-cta {

        padding: 65px 0;
    }


    .contact-bottom-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .bottom-call,
    .bottom-whatsapp {

        width: 100%;
    }

}

/* =====================================================
   TYPOGRAPHY REFINEMENT — LARGER, EASIER TO READ
   ===================================================== */

.contact-hero-content > p{
    font-size:17px;
}

.contact-breadcrumb{
    font-size:12px;
}

.contact-quick-card span{
    font-size:11px;
}

.contact-quick-card strong{
    font-size:15px;
}

.contact-quick-card small{
    font-size:11px;
}

.contact-info-intro{
    font-size:16px;
}

.contact-info-item span{
    font-size:11px;
}

.contact-info-item strong,
.contact-info-item a{
    font-size:16px;
}

.contact-info-item p{
    font-size:12px;
}

.contact-whatsapp span{
    font-size:13px;
}

.contact-whatsapp small{
    font-size:10px;
}

.contact-form-heading span{
    font-size:11px;
}

.contact-form-heading h3{
    font-size:29px;
}

.contact-field label{
    font-size:12px;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
    font-size:14px;
}

.contact-submit{
    font-size:14px;
}

.contact-form-note{
    font-size:10px;
}

.visit-heading > p{
    font-size:16px;
}

.visit-details > span{
    font-size:11px;
}

.visit-details h3{
    font-size:27px;
}

.visit-details p{
    font-size:14px;
}

.directions-btn{
    font-size:12px;
}

.map-placeholder strong{
    font-size:16px;
}

.map-placeholder span{
    font-size:11px;
}

.contact-bottom-inner > div:first-child > span{
    font-size:11px;
}

.contact-bottom-inner p{
    font-size:15px;
}

.bottom-call,
.bottom-whatsapp{
    font-size:13px;
}

@media (max-width:600px){
    .contact-hero-content > p{
        font-size:16px;
    }

    .contact-info-intro{
        font-size:15px;
    }

    .contact-info-item strong,
    .contact-info-item a{
        font-size:15px;
    }

    .contact-field input,
    .contact-field select,
    .contact-field textarea{
        font-size:15px;
    }

    .visit-details p{
        font-size:14px;
    }

    .contact-bottom-inner p{
        font-size:14px;
    }
}

/* =====================================================
   RO TECHNOLOGY PAGE
===================================================== */

.ro-technology-page {
    overflow: hidden;
}


/* =====================================================
   HERO
===================================================== */

.ro-tech-hero {

    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        linear-gradient(
            120deg,
            #031b43 0%,
            #064f7a 55%,
            #008fb9 100%
        );
}


.ro-hero-water {

    position: absolute;

    inset: 0;

    opacity: .28;

    background:
        radial-gradient(
            ellipse at 80% 55%,
            rgba(255,255,255,.45),
            transparent 5%
        ),
        radial-gradient(
            ellipse at 75% 60%,
            rgba(80,220,255,.3),
            transparent 25%
        );
}


.ro-hero-water::before {

    content: "";

    position: absolute;

    width: 120%;

    height: 220px;

    left: -10%;

    bottom: -70px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    filter: blur(8px);

    animation:
        roWave 7s ease-in-out infinite;
}


@keyframes roWave {

    0%,100% {
        transform: translateX(0) rotate(-2deg);
    }

    50% {
        transform: translateX(35px) rotate(2deg);
    }

}


.ro-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,27,67,.95),
            rgba(3,27,67,.58),
            rgba(0,145,185,.18)
        );
}


.ro-hero-bubbles span {

    position: absolute;

    bottom: -30px;

    width: 10px;

    height: 10px;

    border:
        1px solid rgba(255,255,255,.4);

    border-radius: 50%;

    animation:
        roBubble 8s linear infinite;
}


.ro-hero-bubbles span:nth-child(1) {
    left: 20%;
    animation-delay: 1s;
}

.ro-hero-bubbles span:nth-child(2) {
    left: 40%;
    width: 6px;
    height: 6px;
    animation-delay: 3s;
}

.ro-hero-bubbles span:nth-child(3) {
    left: 60%;
    width: 14px;
    height: 14px;
    animation-delay: 0s;
}

.ro-hero-bubbles span:nth-child(4) {
    left: 75%;
    animation-delay: 4s;
}

.ro-hero-bubbles span:nth-child(5) {
    left: 88%;
    width: 7px;
    height: 7px;
    animation-delay: 2s;
}


@keyframes roBubble {

    0% {
        transform:
            translateY(0)
            scale(.7);

        opacity: 0;
    }

    15% {
        opacity: .7;
    }

    100% {
        transform:
            translateY(-700px)
            translateX(70px)
            scale(1.4);

        opacity: 0;
    }

}


.ro-tech-hero .site-container {

    position: relative;

    z-index: 3;
}


.ro-hero-content {

    max-width: 720px;

    padding:
        110px 0 100px;
}


.ro-hero-content .section-eyebrow {

    color: #60e4ff;
}


.ro-hero-content h1 {

    margin: 20px 0;

    font-size:
        clamp(55px,7vw,90px);

    line-height: .9;

    letter-spacing: -4px;

    font-weight: 600;
}


.ro-hero-content h1 span {

    display: block;

    color: #60e4ff;
}


.ro-hero-content p {

    max-width: 600px;

    color:
        rgba(255,255,255,.65);

    font-size: 15px;

    line-height: 1.8;
}


.ro-hero-buttons {

    margin-top: 32px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.ro-primary-btn,
.ro-secondary-btn {

    min-height: 50px;

    padding:
        0 21px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 10px;

    font-weight: 700;

    transition: var(--transition);
}


.ro-primary-btn {

    color: #fff;

    background:
        linear-gradient(
            110deg,
            #0872a6,
            #06b7d4
        );

    box-shadow:
        0 12px 30px rgba(0,150,200,.2);
}


.ro-primary-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0,150,200,.3);
}


.ro-secondary-btn {

    color: #fff;

    border:
        1px solid rgba(255,255,255,.22);

    background:
        rgba(255,255,255,.06);
}


.ro-secondary-btn:hover {

    transform: translateY(-4px);

    background:
        rgba(255,255,255,.12);
}


.ro-hero-card {

    position: absolute;

    right: 5%;

    bottom: 80px;

    width: 160px;

    padding: 18px;

    border:
        1px solid rgba(255,255,255,.2);

    border-radius: 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    background:
        rgba(255,255,255,.08);

    backdrop-filter: blur(15px);

    animation:
        heroFloat 5s ease-in-out infinite;
}


@keyframes heroFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


.ro-card-drop {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    color: #fff;

    background:
        rgba(50,210,240,.25);
}


.ro-hero-card span {

    display: block;

    color: rgba(255,255,255,.5);

    font-size: 7px;

    letter-spacing: 1.5px;
}


.ro-hero-card strong {

    display: block;

    margin-top: 3px;

    font-size: 20px;
}


/* =====================================================
   INTRO
===================================================== */

.ro-intro-section {

    padding: 120px 0;

    background: #fff;
}


.ro-intro-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}


/* RO DIAGRAM */

.ro-diagram-frame {

    min-height: 430px;

    padding: 35px;

    overflow: hidden;

    border-radius: 25px;

    position: relative;

    background:
        linear-gradient(
            145deg,
            #eaf8fd,
            #d8f0f7
        );

    border:
        1px solid #cbe6ef;

    box-shadow:
        0 20px 50px rgba(0,100,150,.08);
}


.ro-diagram-title span {

    display: block;

    color: #009ac0;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;
}


.ro-diagram-title strong {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 7px;

    color: var(--blue);

    font-size: 16px;
}


.ro-water-flow {

    min-height: 230px;

    margin-top: 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.water-drop {

    width: 125px;

    height: 150px;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #137bc1,
            #004d99
        );

    border-radius:
        55% 55% 55% 10%;

    transform:
        rotate(45deg);
}


.water-drop span,
.water-drop small {

    transform:
        rotate(-45deg);
}


.water-drop span {

    font-size: 14px;

    font-weight: 700;
}


.water-drop small {

    margin-top: 3px;

    font-size: 7px;

    letter-spacing: 1px;
}


.water-drop.pure {

    background:
        linear-gradient(
            145deg,
            #06bdd8,
            #0874b5
        );
}


.membrane {

    width: 90px;

    height: 180px;

    position: relative;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blue);

    background: #fff;

    border:
        2px solid #64cce3;

    box-shadow:
        0 12px 30px rgba(0,120,170,.12);
}


.membrane span {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    font-size: 25px;

    font-weight: 800;
}


.membrane span small {

    font-size: 6px;

    letter-spacing: 1px;
}


.membrane-lines {

    position: absolute;

    inset: 15px;

    opacity: .35;

    background:
        repeating-linear-gradient(
            90deg,
            #009fc4 0,
            #009fc4 2px,
            transparent 2px,
            transparent 8px
        );
}


.contaminant-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.contaminant-tags span {

    padding: 8px 10px;

    border-radius: 50px;

    color: #42677a;

    background: rgba(255,255,255,.7);

    font-size: 8px;
}


.contaminant-tags i {

    color: #d65d63;
}


/* INTRO CONTENT */

.ro-intro-content .section-title {

    margin: 15px 0 22px;

    max-width: 600px;
}


.ro-intro-content p {

    max-width: 620px;

    margin-bottom: 17px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.85;
}


.ro-info-highlight {

    max-width: 500px;

    margin-top: 30px;

    padding: 15px;

    border:
        1px solid #d8edf4;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    background: #f6fcfe;
}


.ro-highlight-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    border-radius: 11px;

    display: grid;

    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );
}


.ro-info-highlight strong {

    display: block;

    color: var(--blue);

    font-size: 11px;
}


.ro-info-highlight span {

    display: block;

    margin-top: 3px;

    color: #80929e;

    font-size: 9px;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.ro-section-heading {

    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;
}


.ro-section-heading .section-title {

    margin: 13px 0;
}


.ro-section-heading > p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}


/* =====================================================
   PROCESS
===================================================== */

.ro-process-section {

    padding: 110px 0;

    background: #f5fbfd;
}


.ro-process-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 15px;
}


.ro-process-card {

    min-height: 270px;

    position: relative;

    padding: 27px 22px;

    border:
        1px solid #dbeaf0;

    border-radius: 19px;

    background: #fff;

    transition: var(--transition);
}


.ro-process-card:hover {

    transform: translateY(-7px);

    border-color: #91d6e7;

    box-shadow:
        0 20px 40px rgba(0,100,150,.09);
}


.process-number {

    position: absolute;

    top: 18px;

    right: 18px;

    color: #c4dce5;

    font-size: 11px;

    font-weight: 800;
}


.process-icon {

    width: 52px;

    height: 52px;

    margin-bottom: 25px;

    border-radius: 14px;

    display: grid;

    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );
}


.ro-process-card h3 {

    margin-bottom: 10px;

    color: var(--blue);

    font-size: 16px;
}


.ro-process-card p {

    color: var(--muted);

    font-size: 10px;

    line-height: 1.7;
}


/* =====================================================
   HOW RO WORKS
===================================================== */

.ro-how-section {

    padding: 120px 0;

    background: #fff;
}


.ro-how-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}


.ro-image-box {

    min-height: 450px;

    position: relative;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #071c46,
            #075c86
        );
}


.ro-image-water {

    position: absolute;

    width: 650px;

    height: 300px;

    left: -80px;

    bottom: -80px;

    border-radius: 50%;

    background:
        rgba(80,215,240,.2);

    filter: blur(5px);

    animation:
        roImageWave 6s ease-in-out infinite;
}


@keyframes roImageWave {

    0%,100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg) translateY(-15px);
    }

}


.ro-lab-glass {

    position: absolute;

    width: 170px;

    height: 230px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%);

    border:
        3px solid rgba(255,255,255,.65);

    border-top: 0;

    border-radius:
        0 0 35px 35px;

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

    backdrop-filter: blur(5px);
}


.glass-water {

    position: absolute;

    left: 5px;

    right: 5px;

    bottom: 5px;

    height: 55%;

    border-radius:
        0 0 30px 30px;

    background:
        linear-gradient(
            180deg,
            rgba(50,210,240,.25),
            rgba(0,130,200,.55)
        );
}


.glass-bubbles span {

    position: absolute;

    width: 8px;

    height: 8px;

    border:
        1px solid rgba(255,255,255,.5);

    border-radius: 50%;

    animation:
        glassBubble 4s linear infinite;
}


.glass-bubbles span:nth-child(1) {

    left: 35%;

    bottom: 25%;
}


.glass-bubbles span:nth-child(2) {

    left: 60%;

    bottom: 10%;

    animation-delay: 1s;
}


.glass-bubbles span:nth-child(3) {

    left: 48%;

    bottom: 40%;

    animation-delay: 2s;
}


@keyframes glassBubble {

    0% {
        transform: translateY(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100px);
        opacity: 0;
    }

}


.pressure-badge {

    position: absolute;

    right: 30px;

    top: 30px;

    width: 100px;

    padding: 15px;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius: 15px;

    color: #fff;

    background:
        rgba(255,255,255,.08);

    backdrop-filter: blur(12px);

    text-align: center;
}


.pressure-badge i {

    display: block;

    margin-bottom: 8px;

    color: #60e4ff;
}


.pressure-badge span {

    display: block;

    font-size: 7px;

    letter-spacing: 1px;

    color:
        rgba(255,255,255,.5);
}


.pressure-badge strong {

    font-size: 17px;
}


.ro-how-content .section-title {

    margin: 15px 0 22px;
}


.ro-how-content > p {

    max-width: 600px;

    margin-bottom: 15px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}


.ro-flow-box {

    margin-top: 30px;

    padding: 15px;

    border:
        1px solid #dcecf2;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    background: #f7fcfe;
}


.ro-flow-box > div {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: var(--blue);

    font-size: 8px;

    font-weight: 700;

    text-align: center;
}


.ro-flow-box > div i {

    font-size: 18px;

    color: var(--cyan-dark);
}


.ro-flow-box > i {

    color: #9ab8c5;

    font-size: 10px;
}


.flow-membrane {

    padding:
        7px 10px;

    border-radius: 9px;

    background: #e5f5f9;
}


/* =====================================================
   GOOD / BAD
===================================================== */

.ro-good-bad {

    padding: 110px 0;

    background: #f5fbfd;
}


.good-bad-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;
}


.good-card,
.bad-card {

    padding: 35px;

    border-radius: 22px;

    background: #fff;

    border:
        1px solid #dceaf0;
}


.good-card {

    border-top:
        3px solid #1db879;
}


.bad-card {

    border-top:
        3px solid #e5a341;
}


.good-bad-icon {

    width: 48px;

    height: 48px;

    margin-bottom: 20px;

    border-radius: 13px;

    display: grid;

    place-items: center;
}


.good-card .good-bad-icon {

    color: #149a61;

    background: #e8f9f1;
}


.bad-card .good-bad-icon {

    color: #c58422;

    background: #fff5df;
}


.good-card h3,
.bad-card h3 {

    margin-bottom: 20px;

    color: var(--blue);

    font-size: 19px;
}


.good-card ul,
.bad-card ul {

    margin: 0;

    padding: 0;

    list-style: none;
}


.good-card li,
.bad-card li {

    padding: 11px 0;

    border-bottom:
        1px solid #edf2f4;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;
}


.good-card li i {

    margin-top: 3px;

    color: #1db879;

    font-size: 9px;
}


.bad-card li i {

    margin-top: 5px;

    color: #e2a33d;

    font-size: 5px;
}


/* =====================================================
   SOLUTION
===================================================== */

.ro-solution-section {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    color: #fff;

    background:
        linear-gradient(
            125deg,
            #061b43,
            #07557b
        );
}


.ro-solution-glow {

    position: absolute;

    width: 600px;

    height: 600px;

    right: -300px;

    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(50,220,250,.18),
            transparent 70%
        );
}


.ro-solution-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 90px;

    align-items: center;
}


.ro-solution-content .section-eyebrow {

    color: #60e4ff;
}


.ro-solution-content .section-title {

    margin: 15px 0 25px;

    color: #fff;
}


.ro-solution-content .gradient-text {

    color: #60e4ff;

    background: none;
}


.ro-solution-content p {

    max-width: 620px;

    margin-bottom: 15px;

    color:
        rgba(255,255,255,.62);

    font-size: 13px;

    line-height: 1.8;
}


.ro-solution-content .ro-primary-btn {

    margin-top: 18px;
}


.ro-solution-stats {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.solution-stat {

    min-height: 160px;

    padding: 23px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius: 17px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter: blur(10px);

    transition: var(--transition);
}


.solution-stat:hover {

    transform: translateY(-5px);

    background:
        rgba(255,255,255,.09);
}


.solution-stat i {

    color: #60e4ff;

    font-size: 19px;
}


.solution-stat strong {

    display: block;

    margin-top: 22px;

    font-size: 14px;
}


.solution-stat span {

    display: block;

    margin-top: 5px;

    color:
        rgba(255,255,255,.42);

    font-size: 9px;
}


/* =====================================================
   BENEFITS
===================================================== */

.ro-benefits {

    padding: 110px 0;

    background: #fff;
}


.ro-benefit-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 15px;
}


.ro-benefit {

    padding: 27px 22px;

    border:
        1px solid #dceaf0;

    border-radius: 18px;

    background: #fff;

    transition: var(--transition);
}


.ro-benefit:hover {

    transform: translateY(-6px);

    box-shadow:
        0 18px 40px rgba(0,90,140,.08);
}


.ro-benefit > div {

    width: 48px;

    height: 48px;

    margin-bottom: 20px;

    border-radius: 13px;

    display: grid;

    place-items: center;

    color: var(--cyan-dark);

    background: #e9f8fc;
}


.ro-benefit h3 {

    min-height: 38px;

    margin-bottom: 10px;

    color: var(--blue);

    font-size: 13px;
}


.ro-benefit p {

    color: var(--muted);

    font-size: 9px;

    line-height: 1.7;
}


/* =====================================================
   CTA
===================================================== */

.ro-tech-cta {

    position: relative;

    overflow: hidden;

    padding: 75px 0;

    background:
        linear-gradient(
            110deg,
            #061a45,
            #0785a9
        );

    color: #fff;
}


.ro-cta-bubbles span {

    position: absolute;

    width: 70px;

    height: 70px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 50%;

    animation:
        roCtaFloat 6s ease-in-out infinite;
}


.ro-cta-bubbles span:nth-child(1) {

    left: 5%;

    bottom: -35px;
}


.ro-cta-bubbles span:nth-child(2) {

    right: 18%;

    top: -30px;

    width: 100px;

    height: 100px;

    animation-delay: 1s;
}


.ro-cta-bubbles span:nth-child(3) {

    right: 5%;

    bottom: -45px;

    width: 130px;

    height: 130px;

    animation-delay: 2s;
}


@keyframes roCtaFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}


.ro-cta-content {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}


.ro-cta-content .section-eyebrow {

    color: #60e4ff;
}


.ro-cta-content h2 {

    margin: 10px 0;

    color: #fff;

    font-size:
        clamp(32px,4vw,52px);

    line-height: 1.05;
}


.ro-cta-content h2 span {

    color: #60e4ff;
}


.ro-cta-content p {

    margin: 0;

    color:
        rgba(255,255,255,.5);

    font-size: 13px;
}


.ro-cta-button {

    min-height: 55px;

    padding: 0 25px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;

    color: var(--blue);

    background: #fff;

    font-size: 11px;

    font-weight: 700;

    transition: var(--transition);
}


.ro-cta-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.2);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .ro-hero-card {

        display: none;
    }


    .ro-intro-grid,
    .ro-how-grid,
    .ro-solution-grid {

        gap: 45px;
    }


    .ro-process-grid {

        grid-template-columns:
            repeat(2,1fr);
    }


    .ro-benefit-grid {

        grid-template-columns:
            repeat(2,1fr);
    }

}


@media (max-width: 800px) {

    .ro-intro-grid,
    .ro-how-grid,
    .ro-solution-grid {

        grid-template-columns: 1fr;
    }


    .ro-intro-content {

        order: 1;
    }


    .ro-diagram {

        order: 2;
    }


    .good-bad-grid {

        grid-template-columns: 1fr;
    }


    .ro-cta-content {

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .ro-tech-hero {

        min-height: 560px;
    }


    .ro-hero-content {

        padding: 90px 0 80px;
    }


    .ro-hero-content h1 {

        font-size: 55px;

        letter-spacing: -2px;
    }


    .ro-hero-buttons {

        flex-direction: column;

        align-items: stretch;
    }


    .ro-primary-btn,
    .ro-secondary-btn {

        width: 100%;
    }


    .ro-intro-section,
    .ro-how-section,
    .ro-process-section,
    .ro-good-bad,
    .ro-solution-section,
    .ro-benefits {

        padding: 75px 0;
    }


    .ro-diagram-frame {

        padding: 22px;

        min-height: 390px;
    }


    .ro-water-flow {

        gap: 8px;
    }


    .water-drop {

        width: 80px;

        height: 105px;
    }


    .membrane {

        width: 60px;

        height: 130px;
    }


    .ro-process-grid,
    .ro-benefit-grid {

        grid-template-columns: 1fr;
    }


    .ro-process-card {

        min-height: auto;
    }


    .ro-image-box {

        min-height: 380px;
    }


    .ro-flow-box {

        gap: 5px;

        padding: 10px;
    }


    .ro-flow-box > i {

        font-size: 7px;
    }


    .ro-solution-stats {

        grid-template-columns: 1fr;
    }


    .solution-stat {

        min-height: 125px;
    }


    .ro-cta-content h2 {

        font-size: 36px;
    }


    .ro-cta-button {

        width: 100%;

        justify-content: center;
    }

}

/* =====================================================
   UV TECHNOLOGY PAGE
===================================================== */

.uv-technology-page {
    overflow: hidden;
}


/* =====================================================
   UV HERO
===================================================== */

.uv-tech-hero {
    min-height: 630px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(0,220,255,.22),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #031b43,
            #064f7a 55%,
            #008eb7
        );
}


.uv-grid-bg {
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image:
        linear-gradient(
            rgba(90,225,255,.7) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(90,225,255,.7) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    transform: perspective(500px) rotateX(55deg) scale(1.5);
    transform-origin: bottom;
}


.uv-light-beam {
    position: absolute;
    width: 550px;
    height: 100px;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(70,230,255,.25),
            transparent 70%
        );
    filter: blur(10px);
    transform: rotate(-25deg);
    animation: uvBeam 7s ease-in-out infinite;
}


.beam-one {
    right: -80px;
    top: 25%;
}


.beam-two {
    right: 15%;
    top: 48%;
    animation-delay: 2s;
}


.beam-three {
    right: -150px;
    bottom: 10%;
    animation-delay: 4s;
}


@keyframes uvBeam {
    0%,100% {
        transform:
            rotate(-25deg)
            translateX(0);
        opacity: .5;
    }

    50% {
        transform:
            rotate(-25deg)
            translateX(-100px);
        opacity: 1;
    }
}


.uv-particles span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #65e9ff;
    box-shadow: 0 0 15px #65e9ff;
    animation: uvParticle 8s linear infinite;
}


.uv-particles span:nth-child(1) {
    left: 12%;
    bottom: 10%;
}

.uv-particles span:nth-child(2) {
    left: 28%;
    bottom: 20%;
    animation-delay: 2s;
}

.uv-particles span:nth-child(3) {
    left: 45%;
    bottom: 5%;
    animation-delay: 4s;
}

.uv-particles span:nth-child(4) {
    right: 30%;
    bottom: 15%;
    animation-delay: 1s;
}

.uv-particles span:nth-child(5) {
    right: 15%;
    bottom: 8%;
    animation-delay: 3s;
}

.uv-particles span:nth-child(6) {
    right: 5%;
    bottom: 30%;
    animation-delay: 5s;
}


@keyframes uvParticle {
    0% {
        transform: translateY(0) scale(.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(-600px)
            translateX(100px)
            scale(1.5);
        opacity: 0;
    }
}


.uv-tech-hero .site-container {
    position: relative;
    z-index: 3;
}


.uv-hero-content {
    max-width: 720px;
    padding: 115px 0 105px;
}


.uv-hero-content .section-eyebrow {
    color: #63e7ff;
}


.uv-hero-content h1 {
    margin: 20px 0;
    font-size: clamp(55px,7vw,90px);
    line-height: .9;
    letter-spacing: -4px;
    font-weight: 600;
}


.uv-hero-content h1 span {
    display: block;
    color: #63e7ff;
}


.uv-hero-content p {
    max-width: 600px;
    color: rgba(255,255,255,.65);
    font-size: 15px;
    line-height: 1.8;
}


.uv-hero-buttons {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


.uv-primary-btn,
.uv-secondary-btn {
    min-height: 50px;
    padding: 0 21px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    transition: var(--transition);
}


.uv-primary-btn {
    color: #fff;
    background:
        linear-gradient(
            110deg,
            #0872a6,
            #06c4dd
        );
    box-shadow:
        0 12px 30px rgba(0,160,210,.2);
}


.uv-primary-btn:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 40px rgba(0,160,210,.3);
}


.uv-secondary-btn {
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
}


.uv-secondary-btn:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.12);
}


/* =====================================================
   UV CORE
===================================================== */

.uv-core {
    position: absolute;
    right: 5%;
    top: 50%;
    width: 360px;
    height: 360px;
    transform: translateY(-50%);
}


.uv-core-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(90,230,255,.22);
    border-radius: 50%;
    animation: uvRotate 12s linear infinite;
}


.uv-core-ring::before,
.uv-core-ring::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #62eaff;
    box-shadow: 0 0 20px #62eaff;
}


.uv-core-ring::before {
    top: 15px;
    left: 50%;
}


.uv-core-ring::after {
    right: 15px;
    top: 50%;
}


.ring-b {
    inset: 35px;
    animation-direction: reverse;
    animation-duration: 9s;
}


.ring-c {
    inset: 75px;
    animation-duration: 7s;
}


@keyframes uvRotate {
    to {
        transform: rotate(360deg);
    }
}


.uv-core-center {
    position: absolute;
    inset: 105px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background:
        radial-gradient(
            circle,
            rgba(80,230,255,.35),
            rgba(0,85,130,.7)
        );
    border:
        1px solid rgba(130,240,255,.35);
    box-shadow:
        0 0 70px rgba(60,225,255,.2),
        inset 0 0 40px rgba(80,225,255,.15);
    animation: uvCorePulse 3s ease-in-out infinite;
}


@keyframes uvCorePulse {
    0%,100% {
        box-shadow:
            0 0 50px rgba(60,225,255,.15);
    }

    50% {
        box-shadow:
            0 0 90px rgba(60,225,255,.35);
    }
}


.uv-core-center i {
    margin-bottom: 5px;
    color: #8ff1ff;
    font-size: 20px;
}


.uv-core-center strong {
    font-size: 38px;
    line-height: 1;
}


.uv-core-center span {
    margin-top: 6px;
    color: rgba(255,255,255,.5);
    font-size: 7px;
    letter-spacing: 2px;
}


/* =====================================================
   INTRO
===================================================== */

.uv-intro-section {
    padding: 120px 0;
    background: #fff;
}


.uv-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}


/* UV DIAGRAM */

.uv-diagram-card {
    min-height: 450px;
    padding: 32px;
    overflow: hidden;
    position: relative;
    border:
        1px solid #cfeaf2;
    border-radius: 25px;
    background:
        linear-gradient(
            145deg,
            #edfaff,
            #d9f3f9
        );
}


.uv-diagram-heading span {
    display: block;
    color: #009cc2;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}


.uv-diagram-heading strong {
    display: block;
    margin-top: 7px;
    color: var(--blue);
    font-size: 17px;
}


/* CHAMBER */

.uv-chamber {
    height: 250px;
    margin-top: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.uv-tube {
    position: relative;
    width: 270px;
    height: 75px;
    border:
        3px solid #8edfeb;
    border-radius: 50px;
    background:
        rgba(255,255,255,.55);
    box-shadow:
        0 0 40px rgba(40,220,255,.15);
}


.uv-tube-light {
    position: absolute;
    inset: 14px 20px;
    border-radius: 30px;
    background:
        linear-gradient(
            90deg,
            #54dfff,
            #b7f9ff,
            #54dfff
        );
    box-shadow:
        0 0 35px rgba(60,225,255,.8);
    animation: uvTubeGlow 2s ease-in-out infinite;
}


@keyframes uvTubeGlow {
    0%,100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }
}


.uv-tube i {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #006b9b;
    font-size: 20px;
}


.uv-water-stream {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 180px;
    border-radius: 50%;
    border-top: 2px solid rgba(30,175,215,.4);
    border-bottom: 2px solid rgba(30,175,215,.3);
}


.uv-water-stream span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ccce6;
    animation: waterMove 3s linear infinite;
}


.uv-water-stream span:nth-child(1) {
    left: 10%;
    top: 45%;
}

.uv-water-stream span:nth-child(2) {
    left: 25%;
    top: 35%;
    animation-delay: .4s;
}

.uv-water-stream span:nth-child(3) {
    left: 45%;
    top: 55%;
    animation-delay: .8s;
}

.uv-water-stream span:nth-child(4) {
    left: 60%;
    top: 40%;
    animation-delay: 1.2s;
}

.uv-water-stream span:nth-child(5) {
    left: 75%;
    top: 52%;
    animation-delay: 1.6s;
}

.uv-water-stream span:nth-child(6) {
    left: 88%;
    top: 38%;
    animation-delay: 2s;
}


@keyframes waterMove {
    from {
        transform: translateX(-15px);
        opacity: .2;
    }

    50% {
        opacity: 1;
    }

    to {
        transform: translateX(15px);
        opacity: .2;
    }
}


.uv-microbes {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    opacity: .75;
}


.uv-microbes span {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: #7099a7;
    font-size: 12px;
    animation: microbePulse 2s ease-in-out infinite;
}


.uv-microbes span:nth-child(2) {
    animation-delay: .7s;
}


.uv-microbes span:nth-child(3) {
    animation-delay: 1.3s;
}


@keyframes microbePulse {
    0%,100% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(.5);
        opacity: .25;
    }
}


.uv-diagram-labels {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}


.uv-diagram-labels > div {
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    background: rgba(255,255,255,.65);
}


.uv-diagram-labels i {
    display: block;
    margin-bottom: 5px;
    color: #079cc2;
}


.uv-diagram-labels span {
    color: #547181;
    font-size: 7px;
}


/* CONTENT */

.uv-intro-content .section-title {
    margin: 15px 0 22px;
}


.uv-intro-content p {
    max-width: 620px;
    margin-bottom: 17px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.85;
}


.uv-highlight {
    max-width: 510px;
    margin-top: 30px;
    padding: 15px;
    border:
        1px solid #d8edf4;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f6fcfe;
}


.uv-highlight-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #06b8d5,
            #0871a7
        );
}


.uv-highlight strong {
    display: block;
    color: var(--blue);
    font-size: 11px;
}


.uv-highlight span {
    display: block;
    margin-top: 3px;
    color: #80929e;
    font-size: 9px;
}


/* =====================================================
   PROCESS
===================================================== */

.uv-process-section {
    padding: 110px 0;
    background: #f5fbfd;
}


.uv-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}


.uv-process-card {
    min-height: 275px;
    position: relative;
    padding: 27px 22px;
    border:
        1px solid #dbeaf0;
    border-radius: 19px;
    background: #fff;
    transition: var(--transition);
}


.uv-process-card:hover {
    transform: translateY(-7px);
    border-color: #80d9e9;
    box-shadow:
        0 20px 40px rgba(0,100,150,.09);
}


.uv-step-number {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #c4dce5;
    font-size: 11px;
    font-weight: 800;
}


.uv-process-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #09c5df,
            #086da5
        );
    box-shadow:
        0 8px 20px rgba(0,170,210,.15);
}


.uv-process-card h3 {
    margin-bottom: 10px;
    color: var(--blue);
    font-size: 16px;
}


.uv-process-card p {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.7;
}


/* =====================================================
   UV CHAMBER
===================================================== */

.uv-chamber-section {
    padding: 120px 0;
    background: #fff;
}


.uv-chamber-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}


.uv-visual {
    min-height: 470px;
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            145deg,
            #041b44,
            #066487
        );
}


.uv-machine {
    width: 210px;
    position: relative;
    filter:
        drop-shadow(
            0 25px 35px rgba(0,0,0,.25)
        );
}


.machine-top {
    height: 60px;
    padding: 12px 18px;
    border-radius: 15px 15px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #e9f4f7;
}


.machine-top span {
    color: #075789;
    font-size: 9px;
    font-weight: 800;
}


.machine-top small {
    margin-top: 3px;
    color: #7c919d;
    font-size: 6px;
    letter-spacing: 1px;
}


.machine-body {
    height: 280px;
    position: relative;
    background:
        linear-gradient(
            90deg,
            #d9e8ed,
            #f7fbfc,
            #c9dce3
        );
}


.machine-display {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 58px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #08294e;
    box-shadow: inset 0 0 15px rgba(50,220,255,.2);
}


.display-light {
    width: 8px;
    height: 8px;
    margin-bottom: 3px;
    border-radius: 50%;
    background: #42e4ff;
    box-shadow: 0 0 12px #42e4ff;
    animation: displayBlink 1.5s infinite;
}


@keyframes displayBlink {
    50% {
        opacity: .3;
    }
}


.machine-display strong {
    font-size: 14px;
}


.machine-display span {
    color: #69dcec;
    font-size: 5px;
    letter-spacing: 1px;
}


.machine-lamp {
    position: absolute;
    top: 105px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 120px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            #8ddff0,
            #fff,
            #6bd8ed
        );
    box-shadow:
        0 0 30px rgba(50,220,255,.7);
}


.machine-lamp div {
    position: absolute;
    inset: 10px;
    border-radius: 20px;
    background: #baf8ff;
    box-shadow:
        0 0 20px #60eaff;
    animation: lampPulse 2s infinite;
}


@keyframes lampPulse {
    50% {
        opacity: .55;
    }
}


.machine-flow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #168bad;
}


.flow-top {
    top: 90px;
}


.flow-bottom {
    bottom: 10px;
}


.machine-base {
    height: 35px;
    border-radius: 0 0 15px 15px;
    background: #b6cdd5;
}


.uv-energy {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 100px;
    padding: 12px;
    border:
        1px solid rgba(255,255,255,.15);
    border-radius: 13px;
    color: #fff;
    background:
        rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
}


.uv-energy > span {
    font-size: 7px;
    letter-spacing: 1px;
    color: rgba(255,255,255,.5);
}


.energy-line {
    display: flex;
    gap: 4px;
    margin-top: 9px;
}


.energy-line i {
    flex: 1;
    height: 4px;
    border-radius: 5px;
    background: #57e5fa;
    box-shadow: 0 0 8px #57e5fa;
    animation: energyPulse 1.5s infinite;
}


.energy-line i:nth-child(2) {
    animation-delay: .2s;
}

.energy-line i:nth-child(3) {
    animation-delay: .4s;
}

.energy-line i:nth-child(4) {
    animation-delay: .6s;
}


@keyframes energyPulse {
    50% {
        opacity: .25;
    }
}


.uv-chamber-content .section-title {
    margin: 15px 0 22px;
}


.uv-chamber-content > p {
    max-width: 600px;
    margin-bottom: 15px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}


.uv-feature-list {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}


.uv-feature-list > div {
    padding: 12px;
    border:
        1px solid #e0edf1;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #536d7a;
    background: #f8fcfd;
    font-size: 9px;
}


.uv-feature-list i {
    color: #08a8c8;
}


/* =====================================================
   BENEFITS
===================================================== */

.uv-benefits-section {
    padding: 110px 0;
    background: #f5fbfd;
}


.uv-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}


.uv-benefit-card {
    padding: 28px 22px;
    border:
        1px solid #dceaf0;
    border-radius: 18px;
    background: #fff;
    transition: var(--transition);
}


.uv-benefit-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 18px 40px rgba(0,90,140,.08);
}


.uv-benefit-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #08a8c8;
    background: #e7f9fd;
}


.uv-benefit-card h3 {
    margin-bottom: 10px;
    color: var(--blue);
    font-size: 13px;
}


.uv-benefit-card p {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.7;
}


/* =====================================================
   COMPARISON
===================================================== */

.uv-comparison {
    padding: 110px 0;
    background: #fff;
}


.uv-tech-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 45px 1fr 45px 1fr;
    align-items: center;
    gap: 10px;
}


.uv-compare-card {
    min-height: 220px;
    padding: 25px;
    border:
        1px solid #dceaf0;
    border-radius: 19px;
    background: #fff;
    transition: var(--transition);
}


.uv-compare-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 18px 35px rgba(0,100,150,.08);
}


.uv-compare-card.active {
    color: #fff;
    border-color: #078db5;
    background:
        linear-gradient(
            145deg,
            #06386a,
            #058fae
        );
    box-shadow:
        0 20px 45px rgba(0,120,170,.18);
}


.compare-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #06a5c7;
    background: #e8f9fc;
}


.uv-compare-card.active .compare-icon {
    color: #fff;
    background:
        rgba(255,255,255,.13);
}


.uv-compare-card h3 {
    margin-bottom: 10px;
    color: var(--blue);
    font-size: 18px;
}


.uv-compare-card.active h3 {
    color: #fff;
}


.uv-compare-card p {
    min-height: 62px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.7;
}


.uv-compare-card.active p {
    color: rgba(255,255,255,.6);
}


.uv-compare-card span {
    color: #8ca2ad;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}


.uv-compare-card.active span {
    color: #63e8ff;
}


.uv-compare-plus {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #08a8c8;
    background: #eaf9fc;
}


/* =====================================================
   SOLUTION
===================================================== */

.uv-solution-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    color: #fff;
    background:
        linear-gradient(
            125deg,
            #061b43,
            #075b82
        );
}


.uv-solution-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    right: -300px;
    top: -300px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(60,225,255,.18),
            transparent 70%
        );
}


.uv-solution-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}


.uv-solution-content .section-eyebrow {
    color: #60e7ff;
}


.uv-solution-content .section-title {
    margin: 15px 0 25px;
    color: #fff;
}


.uv-solution-content .gradient-text {
    color: #60e7ff;
    background: none;
}


.uv-solution-content p {
    max-width: 620px;
    margin-bottom: 15px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.8;
}


.uv-solution-content .uv-primary-btn {
    margin-top: 18px;
}


.uv-solution-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


.uv-solution-stat {
    min-height: 135px;
    padding: 22px;
    border:
        1px solid rgba(255,255,255,.12);
    border-radius: 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        rgba(255,255,255,.055);
    backdrop-filter: blur(10px);
    transition: var(--transition);
}


.uv-solution-stat:hover {
    transform: translateY(-5px);
    background:
        rgba(255,255,255,.09);
}


.uv-solution-stat > i {
    color: #62e8ff;
    font-size: 18px;
}


.uv-solution-stat strong {
    display: block;
    font-size: 13px;
}


.uv-solution-stat span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.42);
    font-size: 8px;
}


/* =====================================================
   CTA
===================================================== */

.uv-tech-cta {
    position: relative;
    overflow: hidden;
    padding: 75px 0;
    color: #fff;
    background:
        linear-gradient(
            110deg,
            #061a45,
            #078caf
        );
}


.uv-cta-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    left: -250px;
    top: -250px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(70,230,255,.18),
            transparent 70%
        );
}


.uv-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}


.uv-cta-content .section-eyebrow {
    color: #63e8ff;
}


.uv-cta-content h2 {
    margin: 10px 0;
    color: #fff;
    font-size: clamp(32px,4vw,52px);
    line-height: 1.05;
}


.uv-cta-content h2 span {
    color: #63e8ff;
}


.uv-cta-content p {
    margin: 0;
    color: rgba(255,255,255,.5);
    font-size: 13px;
}


.uv-cta-button {
    min-height: 55px;
    padding: 0 25px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: var(--blue);
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    transition: var(--transition);
}


.uv-cta-button:hover {
    transform: translateY(-4px);
    box-shadow:
        0 15px 35px rgba(0,0,0,.2);
}


/* =====================================================
   UV RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .uv-core {
        right: -80px;
        opacity: .65;
    }

    .uv-process-grid,
    .uv-benefits-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .uv-intro-grid,
    .uv-chamber-grid,
    .uv-solution-grid {
        gap: 45px;
    }

}


@media (max-width: 800px) {

    .uv-core {
        display: none;
    }

    .uv-intro-grid,
    .uv-chamber-grid,
    .uv-solution-grid {
        grid-template-columns: 1fr;
    }

    .uv-tech-comparison-grid {
        grid-template-columns: 1fr;
    }

    .uv-compare-plus {
        margin: auto;
    }

    .uv-cta-content {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .uv-tech-hero {
        min-height: 560px;
    }

    .uv-hero-content {
        padding: 90px 0 80px;
    }

    .uv-hero-content h1 {
        font-size: 55px;
        letter-spacing: -2px;
    }

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

    .uv-primary-btn,
    .uv-secondary-btn {
        width: 100%;
    }

    .uv-intro-section,
    .uv-process-section,
    .uv-chamber-section,
    .uv-benefits-section,
    .uv-comparison,
    .uv-solution-section {
        padding: 75px 0;
    }

    .uv-diagram-card {
        padding: 22px;
    }

    .uv-tube {
        width: 210px;
    }

    .uv-process-grid,
    .uv-benefits-grid {
        grid-template-columns: 1fr;
    }

    .uv-visual {
        min-height: 390px;
    }

    .uv-feature-list {
        grid-template-columns: 1fr;
    }

    .uv-solution-panel {
        grid-template-columns: 1fr;
    }

    .uv-cta-content h2 {
        font-size: 36px;
    }

    .uv-cta-button {
        width: 100%;
        justify-content: center;
    }

}