/* SKN Electronics inner pages - separate from homepage styles */
:root {
    --skn-navy: #071b31;
    --skn-blue: #0b4c80;
    --skn-cyan: #32d6e8;
    --skn-ice: #f2f7fb;
    --skn-text: #23354a;
    --skn-muted: #65788c;
    --skn-white: #fff;

    --reach-blue: #0878cf;
    --reach-blue-light: #35a6ff;
    --reach-navy: #071827;
    --reach-text: #dce8f2;
    --reach-muted: #9aafc1;
    --reach-white: #ffffff;


    --skn-blue: #0866d5;
    --skn-dark: #0b214b;
    --skn-text: #40516d;
    --skn-light: #f2f8ff;
    --skn-border: #dfebfa;




    --skn-q-blue: #0361b0;
    --skn-q-blue-dark: #034c88;
    --skn-q-navy: #071827;
    --skn-q-text: #27384a;
    --skn-q-muted: #68798b;
    --skn-q-light: #f4f8fc;
    --skn-q-white: #ffffff;
    --skn-q-border: #e1eaf3;


    --skn-about-navy: #071b31;
    --skn-about-blue: #0878cf;
    --skn-about-cyan: #32d6e8;
    --skn-about-ice: #f2f7fb;
    --skn-about-white: #ffffff;
    --skn-about-text: #34485d;
    --skn-about-muted: #65788c;


    --skn-vmv-navy: #071b31;
    --skn-vmv-blue: #075da8;
    --skn-vmv-cyan: #08bde8;
    --skn-vmv-text: #263b51;
    --skn-vmv-muted: #62758a;
    --skn-vmv-border: #dceaf5;

    --infra-blue: var(--skn-q-blue);
    --infra-blue-dark: var(--skn-q-blue-dark);
    --infra-navy: var(--skn-q-navy);
    --infra-text: var(--skn-q-text);
    --infra-muted: var(--skn-q-muted);
    --infra-light: var(--skn-q-light);
    --infra-border: var(--skn-q-border);
    --infra-white: var(--skn-q-white);



    --skn-border: rgba(9, 55, 91, .13)
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--skn-text);
    overflow-x: hidden
}

.container {
    max-width: 1200px
}

.topbar {
    background: #061426;
    color: #d8e6f4;
    font-size: 12px;
    padding: 9px 0
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center
}

.topbar a {
    color: #d8e6f4;
    text-decoration: none;
    margin-right: 12px
}

.topbar i {
    color: var(--skn-cyan);
    margin-right: 5px
}

.top-sep {
    color: #54718c;
    margin-right: 12px
}

.top-meta {
    letter-spacing: .2px
}

.top-meta b {
    color: var(--skn-cyan);
    padding: 0 8px
}

.inner-header {
    position: relative;
    z-index: 100;
    background: #fff;
    box-shadow: 0 7px 24px rgba(3, 25, 46, .07)
}

.nav-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 86px;
    gap: 20px
}

.inner-brand img {
    width: 190px;
    max-height: 65px;
    object-fit: contain
}

.inner-nav {
    display: flex;
    align-items: center;
    gap: 22px
}

.inner-nav>a,
.inner-dropdown>a {
    font-size: 13px;
    font-weight: 700;
    color: #172e45;
    text-decoration: none;
    transition: color .25s;
    white-space: nowrap
}

.inner-nav>a:hover,
.inner-dropdown>a:hover {
    color: #0789bd
}

.inner-dropdown {
    position: relative
}

.inner-dropdown>a i {
    font-size: 9px;
    margin-left: 3px
}

.inner-dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: -15px;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e4edf5;
    box-shadow: 0 16px 38px #0614261c;
    border-radius: 8px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .25s
}

.inner-dropdown:hover .inner-dropdown-menu,
.inner-dropdown:focus-within .inner-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.inner-dropdown-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 5px;
    color: #253d54;
    font-size: 12px;
    text-decoration: none
}

.inner-dropdown-menu a:hover {
    background: #eef8fc;
    color: #0878a9
}

.inner-quote {
    background: #0a4c80;
    color: white !important;
    border-radius: 5px;
    padding: 13px 15px;
    box-shadow: 0 6px 15px #0a4c8025
}

.inner-quote:hover {
    background: #087da8;
    color: #fff !important
}

.inner-menu-toggle {
    display: none;
    background: #092746;
    color: white;
    border: 0;
    border-radius: 5px;
    padding: 10px 13px;
    font-size: 19px
}

.inner-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(110deg, #06182c 0%, #092b4b 55%, #0a4166 100%);
    padding: 78px 0 88px;
    color: white
}

.inner-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .15;
    background-image: radial-gradient(circle at 1px 1px, #8beeff 1px, transparent 1.5px);
    background-size: 27px 27px;
    mask-image: linear-gradient(90deg, #000, transparent 85%)
}

.inner-hero:after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 1px solid #54d9ed30;
    border-radius: 50%;
    right: -110px;
    top: -180px;
    z-index: -1;
    box-shadow: 0 0 0 35px #54d9ed08, 0 0 0 75px #54d9ed05;
    animation: slowRotate 32s linear infinite
}

.inner-hero-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 60px;
    position: relative
}

.inner-eyebrow,
.section-kicker {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
    color: #0a84b7;
    display: flex;
    align-items: center;
    gap: 10px
}

.inner-eyebrow {
    color: #9feafa;
    margin-bottom: 22px
}

.inner-eyebrow span {
    width: 25px;
    height: 2px;
    background: var(--skn-cyan);
    box-shadow: 0 0 12px #32d6e8
}

.inner-eyebrow b {
    color: #6286a4
}

.inner-hero h1 {
    font-size: clamp(34px, 4.1vw, 56px);
    line-height: 1.08;
    letter-spacing: -1.6px;
    max-width: 630px;
    margin: 0 0 23px;
    font-weight: 800
}

.inner-hero-copy>p {
    font-size: 15px;
    line-height: 1.85;
    color: #d1deeb;
    max-width: 590px;
    margin-bottom: 27px
}

.inner-hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap
}

.inner-primary-btn {
    display: inline-flex;
    gap: 15px;
    align-items: center;
    padding: 14px 18px;
    border-radius: 4px;
    background: #25bfd7;
    color: #06233a;
    font-weight: 800;
    font-size: 12px;
    text-decoration: none;
    transition: .3s;
    box-shadow: 0 0 0 rgba(37, 191, 215, 0)
}

.inner-primary-btn:hover {
    transform: translateY(-4px);
    background: #75eafa;
    box-shadow: 0 12px 30px #20d0e640;
    color: #06233a
}

.inner-text-link {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid #6f9cb8;
    padding: 0 0 6px
}

.inner-text-link:hover {
    color: #65e5f5
}

.inner-hero-visual {
    position: relative;
    padding: 10px 15px 26px 25px;
    min-width: 0
}

.hero-image-frame {
    position: relative;
    height: 360px;
    border: 1px solid #70e6f34a;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 25px 65px #0005;
    transform: perspective(900px) rotateY(-3deg);
    background: #0c2b43
}

.hero-image-frame:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, #06182c70, transparent 55%), linear-gradient(120deg, #39d4e91c, transparent 60%);
    pointer-events: none
}

.hero-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .6s;
    filter: saturate(.86)
}

.hero-image-frame:hover img {
    transform: scale(1.09) rotate(1deg);
    filter: saturate(1.15)
}

.image-scan-line {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    height: 2px;
    top: -3px;
    background: #75f1ff;
    box-shadow: 0 0 18px #43eaff;
    animation: scan 5s ease-in-out infinite
}

.hero-float-card {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: #15334d;
    padding: 15px 20px;
    box-shadow: 0 14px 35px #0003;
    border-radius: 5px;
    animation: floatCard 5s ease-in-out infinite
}

.hero-float-card>span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: #e4faff;
    color: #0783aa;
    font-size: 18px
}

.hero-float-card strong,
.hero-float-card small {
    display: block
}

.hero-float-card strong {
    font-size: 12px
}

.hero-float-card small {
    font-size: 10px;
    color: #708397;
    margin-top: 4px
}

.hero-orbit {
    position: absolute;
    border: 1px solid #56d9ee5c;
    border-radius: 50%;
    pointer-events: none;
    animation: slowRotate 24s linear infinite
}

.orbit-one {
    width: 115px;
    height: 115px;
    right: -10px;
    top: -25px
}

.orbit-two {
    width: 68px;
    height: 68px;
    right: 13px;
    top: -1px;
    border-style: dashed;
    animation-direction: reverse
}

.hero-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #26d4e8, transparent);
    opacity: .7
}

.inner-hero-pattern {
    position: absolute;
    border: 1px solid #39cfe52a;
    transform: rotate(45deg);
    pointer-events: none
}

.pattern-a {
    width: 120px;
    height: 120px;
    left: 43%;
    top: 8%;
    animation: slowRotate 30s linear infinite
}

.pattern-b {
    width: 60px;
    height: 60px;
    left: 48%;
    bottom: 5%;
    animation: slowRotate 20s linear infinite reverse
}

.section-light {
    background: #f5f8fb;
    position: relative;
    overflow: hidden
}

.intro-grid {
    display: grid;
    grid-template-columns: .34fr 1fr;
    gap: 45px;
    padding-top: 90px;
    padding-bottom: 92px
}

.section-kicker {
    align-items: flex-start;
    gap: 12px
}

.section-kicker span {
    font-size: 12px;
    color: #0784b5;
    border: 1px solid #b5d9e8;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none
}

.section-kicker p {
    padding-top: 9px;
    margin: 0
}

.intro-main h2,
.image-section-copy h2 {
    font-size: clamp(28px, 3vw, 41px);
    line-height: 1.2;
    letter-spacing: -1px;
    color: #0a2540;
    margin: 0 0 19px;
    font-weight: 800
}

.intro-main>p,
.image-section-copy>p {
    font-size: 14px;
    line-height: 1.9;
    color: #62758a;
    max-width: 800px
}

.intro-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 34px;
    border-top: 1px solid #dce6ed;
    padding-top: 25px
}

.intro-stat-row>div {
    display: flex;
    align-items: center;
    gap: 12px
}

.intro-stat-row strong {
    font-size: 26px;
    color: #0b6e9c
}

.intro-stat-row span {
    font-size: 11px;
    font-weight: 700;
    color: #354d63;
    max-width: 110px;
    line-height: 1.5
}

.section-dark {
    background: #06182b;
    color: #fff;
    position: relative;
    overflow: hidden
}

.inner-capabilities {
    padding: 50px 0 40px
}

.section-heading {
    max-width: 720px;
    position: relative;
    z-index: 2
}

.section-kicker-light {
    color: #91d9e9
}

.section-kicker-light span {
    border-color: #2a607b;
    color: #70e4f5
}

.section-heading h2 {
    font-size: clamp(31px, 3.5vw, 46px);
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 22px 0 16px;
    font-weight: 800
}

.section-heading h2 em {
    font-style: normal;
    color: #46d5e8
}

.section-heading>p {
    font-size: 14px;
    color: #9db1c5;
    line-height: 1.8;
    max-width: 620px
}

.inner-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
    position: relative;
    z-index: 2
}

.inner-feature {
    background: #0b2540;
    border: 1px solid #6c9db526;
    padding: 28px 25px 30px;
    margin-bottom: 30px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    transition: transform .35s, border-color .35s, box-shadow .35s;
}

.inner-feature:before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    right: -55px;
    bottom: -70px;
    background: #28d5e8;
    opacity: .08;
    transition: transform .5s, opacity .5s
}

.inner-feature:hover {
    transform: translateY(-8px);
    border-color: #3bd7e66b;
    box-shadow: 0 20px 45px #0003
}

.inner-feature:hover:before {
    transform: scale(1.8);
    opacity: .15
}



.inner-feature:hover .feature-icon {
    transform: rotate(-8deg) scale(1.08);
    background: #1a5267
}

.inner-feature h3 {
    font-size: 17px;
    color: #fff;
    font-weight: 750;
    margin-bottom: 10px
}

.inner-feature h3 a {
    color: #fff;
}

.inner-feature p {
    font-size: 12px;
    line-height: 1.8;
    color: #9bb0c4;
    margin: 0
}

.dark-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .13;
    pointer-events: none
}

.glow-one {
    background: #13cde2;
    right: -100px;
    top: 10px;
    animation: glowPulse 8s ease-in-out infinite
}

.glow-two {
    background: #0878df;
    left: -120px;
    bottom: -120px;
    animation: glowPulse 10s ease-in-out infinite reverse
}

.rotating-circuit {
    position: absolute;
    right: -125px;
    bottom: -220px;
    width: 430px;
    height: 430px;
    border: 1px dashed #42cfe51d;
    border-radius: 50%;
    box-shadow: 0 0 0 35px #42cfe508, 0 0 0 75px #42cfe505;
    animation: slowRotate 60s linear infinite
}

.inner-image-section {
    padding: 95px 0
}

.image-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px
}

.image-hover-wrap {
    position: relative;
    height: 410px;
    overflow: hidden;
    border-radius: 5px;
    background: #0a2d4b;
    box-shadow: 18px 18px 0 #dceaf1
}

.image-hover-wrap:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #06182ca8, transparent 55%);
    pointer-events: none
}

.image-hover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s, filter .8s
}

.image-hover-wrap:hover img {
    transform: scale(1.1) rotate(1.5deg);
    filter: saturate(1.18) contrast(1.04)
}

.image-hover-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 22px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    z-index: 2;
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 800
}

.image-hover-caption i {
    font-size: 18px;
    color: #58e5f4;
    transition: transform .3s
}

.image-hover-wrap:hover .image-hover-caption i {
    transform: translate(4px, -4px)
}

.image-section-copy .section-kicker {
    margin-bottom: 23px
}

.image-section-copy h2 {
    font-size: clamp(28px, 3vw, 38px)
}

.check-list {
    list-style: none;
    margin: 25px 0;
    padding: 0
}

.check-list li {
    margin: 13px 0;
    font-size: 12px;
    font-weight: 700;
    color: #304c63
}

.check-list i {
    color: #078db5;
    margin-right: 9px
}

.inner-dark-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 5px;
    color: #0a527e;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
    border-bottom: 1px solid #8ebed0;
    padding-bottom: 8px
}

.inner-dark-link:hover {
    color: #08a1c6
}

.inner-cta {
    padding: 0 0 90px;
    background: #f5f8fb
}

.inner-cta-box {
    position: relative;
    overflow: hidden;
    background: #0a2b49;
    color: white;
    padding: 38px 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-radius: 5px;
    box-shadow: 0 20px 40px #082d4b19
}

.inner-cta-box>div:not(.cta-pattern) {
    position: relative;
    z-index: 1
}

.cta-eyebrow {
    font-size: 10px;
    letter-spacing: 1.8px;
    color: #66e4f2;
    font-weight: 800
}

.inner-cta h2 {
    font-size: clamp(24px, 2.5vw, 34px);
    margin: 12px 0 8px;
    font-weight: 800
}

.inner-cta p {
    font-size: 12px;
    color: #b4c9d9;
    margin: 0
}

.inner-cta-box>a {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #06243a;
    background: #4ad7e8;
    padding: 15px 19px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    transition: .3s
}

.inner-cta-box>a:hover {
    transform: translateY(-4px);
    background: #9af4fb;
    box-shadow: 0 10px 25px #22cfe633
}

.cta-pattern {
    position: absolute;
    right: 20%;
    top: -110px;
    width: 280px;
    height: 280px;
    border: 1px solid #4dd9ed2a;
    border-radius: 50%;
    box-shadow: 0 0 0 25px #4dd9ed08, 0 0 0 55px #4dd9ed05;
    animation: slowRotate 35s linear infinite
}

.inner-footer {
    background: #04101e;
    color: #9fb2c4;
    padding: 60px 0 0
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr .8fr 1fr 1fr;
    gap: 38px;
    padding-bottom: 42px
}

.footer-logo {
    width: 175px;
    max-height: 65px;
    object-fit: contain;
    background: #fff;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 18px
}

.footer-grid p {
    font-size: 12px;
    line-height: 1.8;
    color: #8da3b7
}

.footer-grid h4 {
    font-size: 13px;
    color: #fff;
    margin: 7px 0 20px;
    font-weight: 800
}

.footer-grid a:not(:first-child) {
    display: block;
    font-size: 12px;
    color: #9fb2c4;
    text-decoration: none;
    margin: 12px 0;
    transition: color .25s
}

.footer-grid a:hover {
    color: #4ad7e8
}

.inner-footer-bottom {
    border-top: 1px solid #ffffff16;
    padding: 20px 0;
    text-align: center;
    font-size: 11px;
    color: #6f879b
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

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

@keyframes scan {

    0%,
    100% {
        top: 0;
        opacity: 0
    }

    15%,
    80% {
        opacity: 1
    }

    50% {
        top: 100%
    }
}

@keyframes floatCard {

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

    50% {
        transform: translateY(-9px)
    }
}

@keyframes glowPulse {

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

    50% {
        transform: scale(1.15);
        opacity: .2
    }
}

@media(max-width:1100px) {
    .inner-nav {
        gap: 13px
    }

    .inner-nav>a,
    .inner-dropdown>a {
        font-size: 12px
    }

    .inner-brand img {
        width: 160px
    }

    .inner-hero-grid {
        gap: 35px
    }

    .hero-image-frame {
        height: 320px
    }
}

@media(max-width:991px) {
    .top-meta {
        display: none
    }

    .inner-menu-toggle {
        display: block
    }

    .nav-shell {
        min-height: 76px
    }

    .inner-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 15px 22px 22px;
        box-shadow: 0 18px 25px #06142620;
        align-items: stretch;
        gap: 0;
        flex-direction: column;
        max-height: 75vh;
        overflow-y: auto
    }

    .inner-nav.is-open {
        display: flex
    }

    .inner-nav>a,
    .inner-dropdown>a {
        display: block;
        padding: 12px 6px;
        font-size: 13px
    }

    .inner-dropdown-menu {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid #b9e7f0;
        border-radius: 0;
        margin: 0 0 8px 10px;
        padding: 0 0 0 8px
    }

    .inner-dropdown:hover .inner-dropdown-menu {
        display: block
    }

    .inner-dropdown:focus-within .inner-dropdown-menu {
        display: block
    }

    .inner-quote {
        text-align: center;
        margin-top: 10px
    }

    .inner-hero {
        padding: 60px 0 75px
    }

    .inner-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .inner-hero-copy {
        max-width: 720px
    }

    .inner-hero-visual {
        max-width: 650px;
        width: 100%;
        margin: auto
    }

    .hero-image-frame {
        height: 350px
    }

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding-top: 65px;
        padding-bottom: 65px
    }

    .inner-capabilities,
    .inner-image-section {
        padding: 70px 0
    }

    .image-section-grid {
        gap: 38px
    }

    .image-hover-wrap {
        height: 350px
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:650px) {
    .topbar {
        font-size: 11px
    }

    .topbar-inner {
        justify-content: center
    }

    .topbar-inner>div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center
    }

    .topbar a {
        margin: 0 5px
    }

    .inner-brand img {
        width: 150px
    }

    .inner-hero {
        padding: 50px 0 65px
    }

    .inner-hero h1 {
        font-size: 36px;
        letter-spacing: -.8px
    }

    .inner-hero-copy>p {
        font-size: 13px
    }

    .inner-hero-actions {
        gap: 15px
    }

    .inner-primary-btn {
        font-size: 11px;
        padding: 13px 14px
    }

    .inner-hero-visual {
        padding: 0 0 22px 8px
    }

    .hero-image-frame {
        height: 260px
    }

    .hero-float-card {
        padding: 10px 12px;
        gap: 8px
    }

    .hero-float-card>span {
        width: 34px;
        height: 34px
    }

    .hero-float-card strong {
        font-size: 11px
    }

    .hero-orbit {
        display: none
    }

    .intro-stat-row {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .intro-stat-row>div {
        border-bottom: 1px solid #dce6ed;
        padding-bottom: 12px
    }

    .inner-feature-grid {
        grid-template-columns: 1fr
    }

    .inner-feature {
        min-height: 0
    }

    .section-heading h2 {
        font-size: 32px
    }

    .image-section-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .image-hover-wrap {
        height: 280px;
        box-shadow: 10px 10px 0 #dceaf1
    }

    .inner-cta {
        padding-bottom: 60px
    }

    .inner-cta-box {
        padding: 28px 23px;
        align-items: flex-start;
        flex-direction: column
    }

    .inner-cta-box>a {
        margin-top: 5px
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .footer-grid h4 {
        margin-bottom: 12px
    }

    .inner-footer {
        padding-top: 42px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}

/* =========================================
   SKN ELECTRONICS CONTACT SECTION
========================================= */

.skn-reach-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 60px 0 40px;
    background: #ffffff;
    color: #071827;
    font-family: inherit;
}

/* Rotating technical background */

.skn-reach-pattern {
    position: absolute;
    inset: -45%;
    z-index: -2;
    pointer-events: none;
    opacity: 0.3;
    background-image:
        linear-gradient(rgba(53, 166, 255, 0.09) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(53, 166, 255, 0.09) 1px,
            transparent 1px);
    background-size: 46px 46px;
    animation: reachPatternRotate 65s linear infinite;
}

/* Lighting */

.skn-reach-glow {
    position: absolute;
    z-index: -1;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    animation: reachGlowMove 9s ease-in-out infinite alternate;
}

.skn-reach-glow-left {
    top: 5%;
    left: -170px;
    background: rgba(8, 120, 207, 0.35);
}

.skn-reach-glow-right {
    right: -150px;
    bottom: 5%;
    background: rgba(53, 166, 255, 0.22);
    animation-delay: -4s;
}

/* Container */

.skn-reach-container {
    position: relative;
    z-index: 1;
    width: min(1200px, 92%);
    margin: 0 auto;
}

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

.skn-reach-heading {
    max-width: 950px;
    margin: 0 auto 55px;
    text-align: center;
    animation: reachFadeUp 0.8s ease both;
}

.skn-reach-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 17px;
    border: 1px solid rgba(53, 166, 255, 0.28);
    border-radius: 50px;
    background: #071827;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.skn-reach-status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #35a6ff;
    box-shadow: 0 0 13px rgba(53, 166, 255, 0.9);
    animation: reachDotPulse 2s ease-in-out infinite;
}

.skn-reach-heading h2 {
    margin: 0 0 20px;
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.3px;
}

.skn-reach-heading h2 span {
    color: #55b7ff;
}

.skn-reach-heading>p {
    max-width: 1250px;
    margin: 0 auto;
    color: #0b3353;
    font-size: 17px;
    line-height: 1.9;
    font-weight: 600;
}

/* =========================================
   TWO-COLUMN LAYOUT
========================================= */

.skn-reach-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: stretch;
}

/* =========================================
   LEFT INTRO PANEL
========================================= */

.skn-reach-intro {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 38px 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%,
            rgba(8, 120, 207, 0.22),
            transparent 45%),
        #0c2437;
    transition: border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.skn-reach-intro:hover {
    border-color: rgba(53, 166, 255, 0.48);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
}

.skn-reach-intro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 30px;
    border: 1px solid rgba(53, 166, 255, 0.35);
    border-radius: 17px;
    background: rgba(8, 120, 207, 0.18);
    color: #65bdff;
    font-size: 29px;
    transition: 0.4s ease;
}

.skn-reach-intro:hover .skn-reach-intro-icon {
    transform: rotate(-8deg) scale(1.06);
    background: #0878cf;
    color: #ffffff;
}

.skn-reach-small-title {
    margin-bottom: 13px;
    color: #61bcff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.skn-reach-intro h3 {
    max-width: 380px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(25px, 2.5vw, 32px);
    font-weight: 750;
    line-height: 1.4;
}

.skn-reach-intro h3 span {
    display: block;
    color: #72c4ff;
}

.skn-reach-intro>p {
    margin: 0;
    color: #b3c4d2;
    font-size: 16px;
    line-height: 1.9;
}

.skn-reach-divider {
    width: 100%;
    height: 1px;
    margin: 28px 0;
    background: linear-gradient(90deg,
            rgba(53, 166, 255, 0.6),
            rgba(255, 255, 255, 0.06));
}

.skn-reach-points {
    display: grid;
    gap: 18px;
}

.skn-reach-points>div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #e0ebf4;
    font-size: 15px;
    line-height: 1.7;
}

.skn-reach-points i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(53, 166, 255, 0.17);
    color: #61bcff;
    font-size: 11px;
}

/* Decorative microchip */

.skn-reach-circuit-decoration {
    position: absolute;
    right: -30px;
    bottom: -42px;
    z-index: -1;
    color: rgba(53, 166, 255, 0.06);
    font-size: 190px;
    transform: rotate(-15deg);
    transition: transform 0.7s ease, color 0.5s ease;
}

.skn-reach-intro:hover .skn-reach-circuit-decoration {
    color: rgba(53, 166, 255, 0.12);
    transform: rotate(0deg) scale(1.08);
}

/* =========================================
   CONTACT DETAIL CARDS
========================================= */

.skn-reach-details {
    display: grid;
    gap: 16px;
}

.skn-reach-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
    padding: 25px 23px;
    overflow: hidden;
    border: 1px solid #e0eaf3;
    border-radius: 16px;
    background: #ffffff;
    color: #071827;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    animation: reachFadeUp 0.8s ease both;
}

.skn-reach-item:nth-child(1) {
    animation-delay: 0.15s;
}

.skn-reach-item:nth-child(2) {
    animation-delay: 0.3s;
}

.skn-reach-item:nth-child(3) {
    animation-delay: 0.45s;
}

.skn-reach-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: #0878cf;
    transition: height 0.4s ease;
}

.skn-reach-item:hover {
    transform: translateX(7px);
    border-color: rgba(8, 120, 207, 0.5);
    box-shadow: 0 16px 35px rgba(8, 50, 85, 0.12);
}

.skn-reach-item:hover::before {
    height: 100%;
}

/* Contact icons */

.skn-reach-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 57px;
    flex-shrink: 0;
    border-radius: 15px;
    background: #0c3352;
    color: #ffffff;
    font-size: 23px;
    transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.skn-reach-item:hover .skn-reach-item-icon {
    background: #0878cf;
    color: #ffffff;
    transform: scale(1.08) rotate(-5deg);
}

/* Card content */

.skn-reach-item-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-right: 20px;
}

.skn-reach-item-label {
    display: block;
    margin-bottom: 7px;
    color: #0878cf;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: 1px;
}

.skn-reach-item h4 {
    margin: 0 0 7px;
    color: #071827;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.4;
}

.skn-reach-item p {
    margin: 0 0 12px;
    color: #607184;
    font-size: 15px;
    line-height: 1.7;
}

.skn-reach-item-content>a {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: #076cba;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.6;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 0.3s ease;
}

.skn-reach-item-content>a:hover {
    color: #071827;
}

.skn-reach-item-content>a i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.skn-reach-item-content>a:hover i {
    transform: translate(3px, -3px);
}

/* Card numbering */

.skn-reach-item-number {
    position: absolute;
    top: 17px;
    right: 18px;
    color: #e7eff6;
    font-size: 23px;
    font-weight: 800;
    transition: color 0.4s ease;
}

.skn-reach-item:hover .skn-reach-item-number {
    color: #a7d8ff;
}

/* =========================================
   BOTTOM CALL TO ACTION
========================================= */

.skn-reach-bottom {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding: 25px 30px;
    border: 1px solid rgba(53, 166, 255, 0.22);
    border-radius: 16px;
    background: rgba(12, 36, 55, 0.88);
    transition: border-color 0.4s ease;
}

.skn-reach-bottom:hover {
    border-color: rgba(53, 166, 255, 0.55);
}

.skn-reach-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(8, 120, 207, 0.2);
    color: #72c4ff;
    font-size: 23px;
}

.skn-reach-bottom-text {
    flex: 1;
    min-width: 0;
}

.skn-reach-bottom-text h4 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 750;
}

.skn-reach-bottom-text p {
    margin: 0;
    color: #b4c7d7;
    font-size: 15px;
    line-height: 1.7;
}

/* CTA button */

.skn-reach-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 15px 22px;
    border: 1px solid #1689dc;
    border-radius: 8px;
    background: #0878cf;
    color: #ffffff;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.skn-reach-cta:hover {
    transform: translateY(-3px);
    border-color: #50b4ff;
    background: #0968ad;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(8, 120, 207, 0.25);
}

.skn-reach-cta i {
    transition: transform 0.3s ease;
}

.skn-reach-cta:hover i {
    transform: translateX(5px);
}

/* =========================================
   ANIMATIONS - NO JAVASCRIPT
========================================= */

@keyframes reachFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes reachPatternRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes reachGlowMove {
    from {
        transform: translate(0, 0) scale(0.9);
        opacity: 0.55;
    }

    to {
        transform: translate(35px, -20px) scale(1.15);
        opacity: 1;
    }
}

@keyframes reachDotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(53, 166, 255, 0.4);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(53, 166, 255, 0);
    }
}

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

@media (max-width: 991px) {
    .skn-reach-section {
        padding: 70px 0;
    }

    .skn-reach-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .skn-reach-intro {
        padding: 32px;
    }

    .skn-reach-intro h3 {
        max-width: 550px;
    }

    .skn-reach-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .skn-reach-item {
        flex-direction: column;
        gap: 15px;
        padding: 23px 20px;
    }

    .skn-reach-item-content {
        padding-right: 0;
    }

    .skn-reach-item-number {
        top: 17px;
        right: 17px;
    }

    .skn-reach-item:last-child {
        grid-column: 1 / -1;
    }
}

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

@media (max-width: 575px) {
    .skn-reach-section {
        padding: 52px 0;
    }

    .skn-reach-container {
        width: 91%;
    }

    .skn-reach-heading {
        margin-bottom: 34px;
    }

    .skn-reach-eyebrow {
        gap: 8px;
        padding: 9px 12px;
        font-size: 15px;
        letter-spacing: 0.7px;
    }

    .skn-reach-heading h2 {
        font-size: 31px;
        letter-spacing: -0.6px;
    }

    .skn-reach-heading>p {
        font-size: 15px;
        line-height: 1.8;
    }

    .skn-reach-intro {
        padding: 25px 22px;
        border-radius: 15px;
    }

    .skn-reach-intro-icon {
        width: 57px;
        height: 57px;
        margin-bottom: 23px;
        font-size: 25px;
    }

    .skn-reach-intro h3 {
        font-size: 26px;
    }

    .skn-reach-intro>p {
        font-size: 15px;
    }

    .skn-reach-divider {
        margin: 23px 0;
    }

    .skn-reach-details {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .skn-reach-item,
    .skn-reach-item:last-child {
        grid-column: auto;
        flex-direction: row;
        gap: 14px;
        padding: 22px 17px;
        border-radius: 13px;
    }

    .skn-reach-item-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
        border-radius: 12px;
    }

    .skn-reach-item-content {
        padding-right: 0;
    }

    .skn-reach-item h4 {
        font-size: 19px;
    }

    .skn-reach-item-number {
        display: none;
    }

    .skn-reach-bottom {
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 22px;
        padding: 22px 18px;
    }

    .skn-reach-bottom-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .skn-reach-bottom-text {
        flex: 1 1 calc(100% - 65px);
    }

    .skn-reach-bottom-text h4 {
        font-size: 18px;
    }

    .skn-reach-cta {
        width: 100%;
        padding: 14px 18px;
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {

    .skn-reach-section *,
    .skn-reach-section *::before,
    .skn-reach-section *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =====================================
   SKN ELECTRONICS CAREERS
===================================== */

.skn-careers-section {
    color: var(--skn-text);
    overflow: hidden;
    background: #fff;
    font-size: 16px;
}

.skn-careers-section * {
    box-sizing: border-box;
}

.skn-careers-section img {
    max-width: 100%;
}


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

.skn-career-hero {
    position: relative;
    padding: 50px 0;
    background:
        radial-gradient(circle at 8% 10%,
            rgba(8, 102, 213, .09),
            transparent 32%),
        linear-gradient(120deg, #fff 30%, #f2f8ff 100%);
    isolation: isolate;
}

.skn-career-hero::before {
    content: "";
    position: absolute;
    width: 390px;
    height: 390px;
    top: -160px;
    left: -150px;
    border: 1px solid rgba(8, 102, 213, .13);
    border-radius: 50%;
    box-shadow:
        0 0 0 24px rgba(8, 102, 213, .025),
        0 0 0 50px rgba(8, 102, 213, .025);
    animation: sknOrbit 24s linear infinite;
    pointer-events: none;
    z-index: -1;
}

.skn-career-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--skn-blue);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.skn-career-title {
    color: var(--skn-dark);
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}

.skn-career-title span,
.skn-apply-title span {
    display: block;
    color: var(--skn-blue);
}

.skn-career-intro {
    font-size: 17px;
    line-height: 1.9;
    max-width: 580px;
    margin-bottom: 30px;
    color: #425574;
}

.skn-career-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 15px 25px;
    border-radius: 6px;
    color: #fff;
    background: var(--skn-blue);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(8, 102, 213, .2);
    transition: transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.skn-career-btn:hover {
    color: #fff;
    background: var(--skn-dark);
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(11, 33, 75, .22);
}

.skn-career-btn i {
    transition: transform .3s ease;
}

.skn-career-btn:hover i {
    transform: translateX(5px);
}


/* Hero image */

.skn-career-hero-image {
    position: relative;
    isolation: isolate;
    padding: 0 12px 12px 0;
}

.skn-career-hero-image::before {
    content: "";
    position: absolute;
    top: -15px;
    right: -5px;
    width: 150px;
    height: 150px;
    border-top: 3px solid rgba(8, 102, 213, .45);
    border-right: 3px solid rgba(8, 102, 213, .45);
    z-index: -1;
    transition: all .4s ease;
}

.skn-career-hero-image:hover::before {
    top: -22px;
    right: -12px;
}

.skn-career-hero-image img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    box-shadow: 0 20px 50px rgba(11, 33, 75, .14);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1),
        filter .5s ease;
}

.skn-career-hero-image:hover img {
    transform: scale(1.025);
    filter: saturate(1.12);
}

.skn-career-image-tag {
    position: absolute;
    left: -20px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 22px;
    background: #fff;
    border: 1px solid var(--skn-border);
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(11, 33, 75, .12);
}

.skn-career-image-tag>i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #fff;
    background: var(--skn-blue);
    border-radius: 8px;
    font-size: 22px;
}

.skn-career-image-tag strong,
.skn-career-image-tag span {
    display: block;
}

.skn-career-image-tag strong {
    color: var(--skn-dark);
    font-size: 15px;
}

.skn-career-image-tag span {
    margin-top: 4px;
    color: #687994;
    font-size: 13px;
}


/* =====================================
   CAREER OPPORTUNITIES
===================================== */

.skn-career-opportunities {
    position: relative;
    padding: 50px 0 45px;
    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(8, 102, 213, .07),
            transparent 65%),
        #f2f8ff;
    isolation: isolate;
}

.skn-career-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(90deg,
            transparent 49.5%,
            rgba(8, 102, 213, .06) 50%,
            transparent 50.5%),
        linear-gradient(transparent 49.5%,
            rgba(8, 102, 213, .06) 50%,
            transparent 50.5%);
    background-size: 65px 65px;
    mask-image: linear-gradient(90deg,
            transparent,
            #000 30%,
            #000 70%,
            transparent);
}

.skn-career-pattern::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(36, 137, 255, .13) 45deg,
            transparent 90deg,
            transparent 360deg);
    animation: sknLightRotate 20s linear infinite;
}

.skn-career-heading {
    margin-bottom: 45px;
}

.skn-career-heading .skn-career-eyebrow {
    margin-bottom: 12px;
}

.skn-career-heading h2 {
    color: var(--skn-dark);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.8px;
    margin-bottom: 15px;
}

.skn-career-heading p {
    color: #63738c;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 650px;
}


/* Career cards */

.skn-career-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 170px;
    height: 100%;
    padding: 25px 22px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #e2ecf9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(21, 70, 125, .035);
    transition: transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.skn-career-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: var(--skn-blue);
    transition: height .4s ease;
}

.skn-career-card:hover {
    transform: translateY(-8px);
    border-color: rgba(8, 102, 213, .4);
    box-shadow: 0 18px 35px rgba(21, 70, 125, .12);
}

.skn-career-card:hover::before {
    height: 100%;
}

.skn-career-icon {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    color: #fff;
    border-radius: 9px;
    font-size: 22px;
    transition: transform .4s ease,
        border-radius .4s ease;
}

.skn-career-card:hover .skn-career-icon {
    transform: rotate(-7deg) scale(1.08);
    border-radius: 15px;
}

.icon-blue {
    background: linear-gradient(135deg, #168bff, #0756c9);
}

.icon-green {
    background: linear-gradient(135deg, #49c878, #15934d);
}

.icon-purple {
    background: linear-gradient(135deg, #9275ff, #5638c8);
}

.icon-cyan {
    background: linear-gradient(135deg, #1fc4d7, #0088ad);
}

.icon-orange {
    background: linear-gradient(135deg, #ffad46, #ed6500);
}

.icon-indigo {
    background: linear-gradient(135deg, #7187ff, #354bc4);
}

.icon-pink {
    background: linear-gradient(135deg, #ff6099, #d92667);
}

.icon-slate {
    background: linear-gradient(135deg, #8295b0, #405573);
}

.skn-career-card-content {
    flex: 1;
    min-width: 0;
    padding-right: 8px;
}

.skn-career-card h3 {
    color: var(--skn-dark);
    font-size: 17px;
    line-height: 1.45;
    font-weight: 750;
    margin: 1px 0 8px;
}

.skn-career-card p {
    color: #65758d;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.skn-career-arrow {
    position: absolute;
    right: 18px;
    bottom: 17px;
    color: var(--skn-blue);
    font-size: 15px;
    transition: transform .3s ease;
}

.skn-career-card:hover .skn-career-arrow {
    transform: translateX(5px);
}


/* =====================================
   HOW TO APPLY
===================================== */

.skn-career-apply-section {
    position: relative;
    padding: 50px 0;
    background:
        radial-gradient(circle at 0% 100%,
            rgba(8, 102, 213, .08),
            transparent 35%),
        #fff;
}

.skn-apply-title {
    color: var(--skn-dark);
    font-size: clamp(30px, 3.5vw, 43px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 22px;
}

.skn-apply-description {
    color: #536681;
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 25px;
}

.skn-apply-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--skn-dark);
    font-size: 15px;
    font-weight: 600;
}

.skn-apply-check i {
    color: var(--skn-blue);
    font-size: 18px;
}

.skn-apply-visual {
    position: relative;
    padding: 0 0 65px 35px;
}

.skn-apply-visual>img {
    width: 100%;
    height: 400px;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(11, 33, 75, .12);
    transition: transform .6s ease,
        filter .6s ease;
}

.skn-apply-visual:hover>img {
    transform: scale(1.02);
    filter: saturate(1.1);
}

.skn-apply-email-card {
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(390px, 88%);
    padding: 28px;
    background: #fff;
    border: 1px solid var(--skn-border);
    border-radius: 10px;
    box-shadow: 0 15px 45px rgba(11, 33, 75, .13);
}

.skn-apply-email-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    color: #fff;
    background: var(--skn-blue);
    border-radius: 50%;
    font-size: 22px;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(8, 102, 213, .2);
}

.skn-apply-email-card>span {
    display: block;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.skn-apply-email-card h3 {
    color: var(--skn-dark);
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 18px;
}

.skn-apply-email-card a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    color: #fff;
    background: var(--skn-blue);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .3s ease,
        transform .3s ease;
}

.skn-apply-email-card a:hover {
    color: #fff;
    background: var(--skn-dark);
    transform: translateY(-3px);
}

.skn-apply-email-card p {
    color: #718099;
    font-size: 13px;
    line-height: 1.7;
    margin: 16px 0 0;
}


/* =====================================
   ANIMATED BACKGROUND
===================================== */

@keyframes sknOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes sknLightRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 991px) {

    .skn-career-hero {
        padding: 65px 0;
    }

    .skn-career-hero-image img {
        height: 380px;
    }

    .skn-career-image-tag {
        left: 12px;
    }

    .skn-career-opportunities {
        padding: 65px 0;
    }

    .skn-career-apply-section {
        padding: 65px 0;
    }

    .skn-career-card {
        min-height: 155px;
    }
}

@media (max-width: 575px) {

    .skn-career-hero {
        padding: 45px 0;
    }

    .skn-career-title {
        font-size: 35px;
        letter-spacing: -.8px;
    }

    .skn-career-intro {
        font-size: 15px;
        line-height: 1.8;
    }

    .skn-career-hero-image img {
        height: 290px;
    }

    .skn-career-image-tag {
        bottom: 22px;
        padding: 12px 15px;
    }

    .skn-career-image-tag>i {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .skn-career-opportunities {
        padding: 50px 0;
    }

    .skn-career-heading {
        margin-bottom: 30px;
    }

    .skn-career-heading h2 {
        font-size: 29px;
    }

    .skn-career-card {
        min-height: 135px;
        padding: 20px 16px;
        gap: 13px;
    }

    .skn-career-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 19px;
    }

    .skn-career-card h3 {
        font-size: 16px;
    }

    .skn-career-card p {
        font-size: 14px;
    }

    .skn-career-apply-section {
        padding: 50px 0;
    }

    .skn-apply-visual {
        padding: 0 0 55px 12px;
    }

    .skn-apply-visual>img {
        height: 300px;
    }

    .skn-apply-email-card {
        padding: 20px;
    }

    .skn-apply-email-card h3 {
        font-size: 19px;
    }
}


/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {

    .skn-careers-section *,
    .skn-careers-section *::before,
    .skn-careers-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================
   SKN ELECTRONICS - QUALITY PAGE
   Primary: #0361b0
   Dark:    #071827
   Light:   #f4f8fc
========================================== */

.skn-quality-page {

    color: var(--skn-q-text);
    font-size: 16px;
    line-height: 1.8;
    overflow: hidden;
    background: #fff;
}

.skn-quality-page *,
.skn-quality-page *::before,
.skn-quality-page *::after {
    box-sizing: border-box;
}

.skn-quality-page img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.skn-quality-page h1,
.skn-quality-page h2,
.skn-quality-page h3,
.skn-quality-page h4,
.skn-quality-page p {
    margin-top: 0;
}

.skn-quality-page h1,
.skn-quality-page h2,
.skn-quality-page h3,
.skn-quality-page h4 {
    line-height: 1.25;
}

.skn-quality-page h1 {
    font-size: clamp(34px, 4vw, 55px);
    font-weight: 800;
    letter-spacing: -1.5px;
}

.skn-quality-page h2 {
    font-size: clamp(29px, 3.2vw, 42px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.skn-quality-page h3 {
    font-size: 22px;
    font-weight: 750;
}

.skn-quality-page p {
    font-size: 16px;
}

.skn-quality-page a {
    text-decoration: none;
}

.skn-quality-page .container {
    position: relative;
    z-index: 2;
}


/* ------------------------------------------
   HERO
------------------------------------------ */

.skn-quality-hero {
    position: relative;
    isolation: isolate;
    padding: 50px 0 50px;
    background:
        radial-gradient(circle at 10% 10%,
            rgba(3, 97, 176, 0.07),
            transparent 35%),
        linear-gradient(135deg, #ffffff, #f2f7fc);
}

.skn-quality-pattern {
    position: absolute;
    z-index: -1;
    inset: -35%;
    pointer-events: none;
    opacity: 0.45;

    background-image:
        linear-gradient(30deg,
            transparent 48%,
            rgba(3, 97, 176, 0.12) 49%,
            rgba(3, 97, 176, 0.12) 50%,
            transparent 51%),
        linear-gradient(150deg,
            transparent 48%,
            rgba(3, 97, 176, 0.08) 49%,
            rgba(3, 97, 176, 0.08) 50%,
            transparent 51%);

    background-size: 76px 76px;
    animation: sknQualityPatternRotate 65s linear infinite;
}

.skn-quality-hero-content {
    position: relative;
    z-index: 2;
    animation: sknQualityFadeUp 0.8s ease both;
}

.skn-quality-eyebrow,
.skn-quality-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    color: var(--skn-q-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.skn-quality-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--skn-q-blue);
    box-shadow: 0 0 0 5px rgba(3, 97, 176, 0.10);
    animation: sknQualityPulse 2s ease-in-out infinite;
}

.skn-quality-hero-content h1 {
    margin-bottom: 24px;
    color: var(--skn-q-navy);
}

.skn-quality-hero-content h1 span,
.skn-quality-heading h2 span,
.skn-quality-strip-content h3 span {
    color: var(--skn-q-blue);
}

.skn-quality-hero-content p {
    max-width: 570px;
    margin-bottom: 30px;
    color: var(--skn-q-muted);
}

.skn-quality-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 15px 24px;
    border: 1px solid var(--skn-q-blue);
    border-radius: 5px;
    background: var(--skn-q-blue);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.skn-quality-btn:hover {
    color: var(--skn-q-blue) !important;
    background: #fff;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(3, 97, 176, 0.15);
}

.skn-quality-btn i {
    transition: transform 0.3s ease;
}

.skn-quality-btn:hover i {
    transform: translateX(5px);
}


/* Hero image */

.skn-quality-hero-image {
    position: relative;
    z-index: 1;
    padding: 0 0 25px 25px;
    animation: sknQualityFadeUp 1s ease 0.15s both;
}

.skn-quality-hero-image::before {
    position: absolute;
    z-index: -1;
    top: -20px;
    right: -12px;
    bottom: 45px;
    left: 55px;
    border: 1px solid rgba(3, 97, 176, 0.35);
    content: "";
    animation: sknQualityOutline 6s ease-in-out infinite;
}

.skn-quality-image-glow {
    position: absolute;
    z-index: -2;
    inset: -25px;
    border-radius: 50%;
    background: rgba(3, 97, 176, 0.12);
    filter: blur(55px);
    animation: sknQualityGlow 5s ease-in-out infinite;
}

.skn-quality-hero-image>img {
    position: relative;
    height: 440px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 25px 60px rgba(7, 24, 39, 0.15);
    transition:
        transform 0.7s cubic-bezier(.2, .7, .2, 1),
        filter 0.5s ease;
}

.skn-quality-hero-image:hover>img {
    transform: scale(1.035);
    filter: saturate(1.12) contrast(1.03);
}

.skn-quality-image-label {
    position: absolute;
    right: -5px;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 255px;
    padding: 17px 22px;
    background: #fff;
    border-left: 4px solid var(--skn-q-blue);
    box-shadow: 0 12px 40px rgba(7, 24, 39, 0.12);
    animation: sknQualityFloat 4s ease-in-out infinite;
}

.skn-quality-label-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--skn-q-blue);
    background: #eaf4ff;
    border-radius: 4px;
    font-size: 21px;
}

.skn-quality-image-label strong,
.skn-quality-image-label small {
    display: block;
}

.skn-quality-image-label strong {
    color: var(--skn-q-navy);
    font-size: 15px;
}

.skn-quality-image-label small {
    color: var(--skn-q-muted);
    font-size: 13px;
}

.skn-quality-orbit {
    position: absolute;
    top: -14px;
    right: 15%;
    width: 19px;
    height: 19px;
    border: 4px solid #56b9ff;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(3, 97, 176, 0.5);
    animation: sknQualityPulse 2.5s ease-in-out infinite;
}


/* ------------------------------------------
   LIGHT QUALITY APPROACH
------------------------------------------ */

.skn-quality-approach {
    position: relative;
    isolation: isolate;
    padding: 50px 0;
    background: var(--skn-q-light);
}

.skn-quality-section-pattern {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    opacity: 0.45;
    pointer-events: none;

    background-image: radial-gradient(rgba(3, 97, 176, 0.2) 1px,
            transparent 1.5px);

    background-size: 22px 22px;
    mask-image: linear-gradient(to left,
            black,
            transparent);
}

.skn-quality-heading {
    max-width: 760px;
    margin: 0 auto 55px;
}

.skn-quality-heading h2 {
    margin-bottom: 20px;
    color: var(--skn-q-navy);
}

.skn-quality-heading p {
    margin-bottom: 0;
    color: var(--skn-q-muted);
}

.skn-quality-card-row {
    position: relative;
}

.skn-quality-card {
    position: relative;
    height: 100%;
    min-height: 265px;
    overflow: hidden;
    padding: 30px;
    border: 1px solid var(--skn-q-border);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(7, 24, 39, 0.035);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.skn-quality-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--skn-q-blue);
    content: "";
    transition: width 0.4s ease;
}

.skn-quality-card::after {
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(3, 97, 176, 0.045);
    content: "";
    transition:
        transform 0.5s ease,
        background 0.5s ease;
}

.skn-quality-card:hover {
    transform: translateY(-9px);
    border-color: rgba(3, 97, 176, 0.4);
    box-shadow: 0 22px 45px rgba(7, 24, 39, 0.09);
}

.skn-quality-card:hover::before {
    width: 100%;
}

.skn-quality-card:hover::after {
    transform: scale(1.5);
    background: rgba(3, 97, 176, 0.08);
}

.skn-quality-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 27px;
}

.skn-quality-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid #d7eaff;
    border-radius: 5px;
    background: #edf6ff;
    color: var(--skn-q-blue);
    font-size: 23px;
    transition:
        color 0.4s ease,
        background 0.4s ease,
        transform 0.4s ease;
}

.skn-quality-card:hover .skn-quality-icon {
    color: #fff;
    background: var(--skn-q-blue);
    transform: rotate(-6deg) scale(1.05);
}

.skn-quality-number {
    color: #d4e1ef;
    font-size: 30px;
    font-weight: 800;
    transition: color 0.4s ease;
}

.skn-quality-card:hover .skn-quality-number {
    color: var(--skn-q-blue);
}

.skn-quality-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 13px;
    color: var(--skn-q-navy);
}

.skn-quality-card p {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    color: var(--skn-q-muted);
    font-size: 15px;
}

.skn-quality-card-line {
    width: 42px;
    height: 2px;
    margin-top: 22px;
    background: var(--skn-q-blue);
    transition: width 0.4s ease;
}

.skn-quality-card:hover .skn-quality-card-line {
    width: 75px;
}


/* ------------------------------------------
   IMAGE STRIP
------------------------------------------ */

.skn-quality-image-strip {
    overflow: hidden;
    margin-top: 85px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 15px 45px rgba(7, 24, 39, 0.06);
}

.skn-quality-strip-image {
    height: 100%;
    min-height: 390px;
    overflow: hidden;
}

.skn-quality-strip-image img {
    height: 100%;
    min-height: 390px;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.skn-quality-strip-image:hover img {
    transform: scale(1.07);
}

.skn-quality-strip-content {
    padding: 48px;
}

.skn-quality-strip-content h3 {
    margin-bottom: 20px;
    color: var(--skn-q-navy);
    font-size: clamp(27px, 3vw, 35px);
}

.skn-quality-strip-content p {
    color: var(--skn-q-muted);
}

.skn-quality-strip-content ul {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

.skn-quality-strip-content li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--skn-q-text);
    font-size: 15px;
}

.skn-quality-strip-content li i {
    margin-top: 6px;
    color: var(--skn-q-blue);
}


/* ------------------------------------------
   TRACEABILITY - DARK BLUE
------------------------------------------ */

.skn-quality-traceability {
    position: relative;
    isolation: isolate;
    padding: 50px 0;
    overflow: hidden;
    background: #071827;
    color: #fff;
}

.skn-quality-trace-pattern {
    position: absolute;
    z-index: -1;
    inset: -50%;
    pointer-events: none;
    opacity: 0.45;

    background-image:
        linear-gradient(45deg,
            transparent 48%,
            rgba(58, 157, 255, 0.13) 49%,
            rgba(58, 157, 255, 0.13) 50%,
            transparent 51%);

    background-size: 70px 70px;
    animation: sknQualityPatternRotate 75s linear infinite;
}

.skn-quality-trace-image {
    position: relative;
    padding: 0 0 25px 25px;
}

.skn-quality-trace-image::before {
    position: absolute;
    z-index: -1;
    top: -15px;
    left: 5px;
    width: 75%;
    height: 75%;
    border: 1px solid rgba(72, 174, 255, 0.55);
    content: "";
}

.skn-quality-trace-image::after {
    position: absolute;
    z-index: 1;
    inset: 0 0 25px 25px;
    background: linear-gradient(180deg,
            transparent 60%,
            rgba(7, 24, 39, 0.25));
    content: "";
    pointer-events: none;
}

.skn-quality-trace-image img {
    height: 440px;
    object-fit: cover;
    border-radius: 5px;
    transition:
        transform 0.7s ease,
        filter 0.5s ease;
}

.skn-quality-trace-image:hover img {
    transform: scale(1.035);
    filter: brightness(1.1);
}

.skn-quality-trace-badge {
    position: absolute;
    z-index: 2;
    right: -5px;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    color: var(--skn-q-navy);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.skn-quality-trace-badge i {
    color: var(--skn-q-blue);
    font-size: 22px;
}

.skn-quality-trace-content .skn-quality-kicker {
    color: #63bdff;
}

.skn-quality-trace-content h2 {
    margin-bottom: 22px;
    color: #fff;
}

.skn-quality-trace-content h2 span {
    color: #68c2ff;
}

.skn-quality-trace-content>p {
    margin-bottom: 30px;
    color: #b6c6d7;
}

.skn-quality-trace-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.skn-quality-trace-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.skn-quality-trace-item:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 189, 255, 0.5);
    background: rgba(3, 97, 176, 0.15);
}

.skn-quality-trace-item>span {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    color: #80cbff;
    background: rgba(3, 97, 176, 0.23);
    font-size: 18px;
}

.skn-quality-trace-item h4 {
    margin-bottom: 6px;
    color: #fff;
    font-size: 16px;
}

.skn-quality-trace-item p {
    margin-bottom: 0;
    color: #b6c6d7;
    font-size: 14px;
    line-height: 1.7;
}


/* ------------------------------------------
   CERTIFICATIONS
------------------------------------------ */

.skn-quality-certifications {
    padding: 50px 0;
    background: #fff;
}

.skn-quality-cert-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px;
    border: 1px solid #dfeaf5;
    border-radius: 6px;
    background: #f4f8fc;
}

.skn-quality-cert-decoration {
    position: absolute;
    z-index: -1;
    top: -120px;
    right: -100px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(3, 97, 176, 0.14);
    border-radius: 50%;
    box-shadow:
        0 0 0 25px rgba(3, 97, 176, 0.025),
        0 0 0 55px rgba(3, 97, 176, 0.025);
    animation: sknQualityOutline 8s ease-in-out infinite;
}

.skn-quality-cert-icon {
    display: grid;
    place-items: center;
    width: 105px;
    height: 105px;
    margin: auto;
    border: 1px solid #c9e1f8;
    border-radius: 50%;
    background: #fff;
    color: var(--skn-q-blue);
    font-size: 43px;
    box-shadow: 0 12px 30px rgba(3, 97, 176, 0.09);
    transition: transform 0.5s ease;
}

.skn-quality-cert-icon:hover {
    transform: rotate(12deg) scale(1.05);
}

.skn-quality-cert-box h2 {
    margin-bottom: 17px;
    color: var(--skn-q-navy);
}

.skn-quality-cert-box h2 span {
    color: var(--skn-q-blue);
}

.skn-quality-cert-box p {
    color: var(--skn-q-muted);
}

.skn-quality-cert-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.skn-quality-cert-details span {
    padding: 7px 11px;
    border: 1px solid #dbe7f2;
    border-radius: 3px;
    background: #fff;
    color: var(--skn-q-text);
    font-size: 13px;
    font-weight: 600;
}

.skn-quality-cert-note {
    padding: 20px;
    border-left: 3px solid var(--skn-q-blue);
    background: #fff;
}

.skn-quality-cert-note i {
    margin-bottom: 10px;
    color: var(--skn-q-blue);
    font-size: 28px;
}

.skn-quality-cert-note p {
    margin-bottom: 0;
    font-size: 14px;
}

.skn-quality-cert-note strong {
    display: block;
    color: var(--skn-q-navy);
}


/* ------------------------------------------
   BOTTOM CTA - DARK
------------------------------------------ */

.skn-quality-bottom {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 85px 20px;
    background:
        radial-gradient(circle at 50% 0%,
            rgba(3, 97, 176, 0.30),
            transparent 55%),
        #071827;
    text-align: center;
    color: #fff;
}

.skn-quality-bottom-pattern {
    position: absolute;
    z-index: -1;
    inset: -40%;
    opacity: 0.4;
    pointer-events: none;

    background-image:
        radial-gradient(rgba(83, 177, 255, 0.5) 1px,
            transparent 1.5px);

    background-size: 30px 30px;
    animation: sknQualityPatternRotate 80s linear infinite;
}

.skn-quality-bottom-inner {
    max-width: 800px;
    margin: 0 auto;
}

.skn-quality-bottom-inner>span {
    display: inline-block;
    margin-bottom: 15px;
    color: #73c5ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.skn-quality-bottom h2 {
    margin-bottom: 20px;
    color: #fff;
}

.skn-quality-bottom h2 span {
    color: #71c4ff;
}

.skn-quality-bottom p {
    max-width: 660px;
    margin: 0 auto 30px;
    color: #c2d0df;
}

.skn-quality-bottom .skn-quality-btn:hover {
    border-color: #fff;
}


/* ------------------------------------------
   ANIMATIONS
------------------------------------------ */

@keyframes sknQualityPatternRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes sknQualityFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes sknQualityPulse {

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

    50% {
        transform: scale(1.12);
        opacity: 0.65;
    }
}

@keyframes sknQualityGlow {

    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes sknQualityFloat {

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

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

@keyframes sknQualityOutline {

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

    50% {
        transform: rotate(5deg) scale(1.04);
    }
}


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

@media (max-width: 991.98px) {
    .skn-quality-hero-image {
        margin: 10px 12px 15px 0;
    }

    .skn-quality-hero-image>img {
        height: 400px;
    }

    .skn-quality-image-strip {
        margin-top: 60px;
    }

    .skn-quality-strip-content {
        padding: 32px;
    }

    .skn-quality-trace-image img {
        height: 380px;
    }

    .skn-quality-cert-box {
        padding: 35px;
    }

    .skn-quality-cert-note {
        margin-top: 10px;
    }
}

@media (max-width: 767.98px) {
    .skn-quality-page {
        font-size: 16px;
    }

    .skn-quality-hero,
    .skn-quality-approach,
    .skn-quality-traceability {
        padding: 40px 0;
    }

    .skn-quality-hero-content h1 {
        font-size: 36px;
        letter-spacing: -0.8px;
    }

    .skn-quality-heading {
        margin-bottom: 35px;
    }

    .skn-quality-heading h2,
    .skn-quality-trace-content h2 {
        font-size: 30px;
    }

    .skn-quality-hero-image {
        margin: 15px 10px 15px 0;
        padding-left: 12px;
    }

    .skn-quality-hero-image>img {
        height: 320px;
    }

    .skn-quality-hero-image::before {
        left: 28px;
        right: -7px;
    }

    .skn-quality-image-label {
        right: -5px;
        min-width: auto;
        max-width: 255px;
        padding: 12px 15px;
    }

    .skn-quality-card {
        min-height: auto;
        padding: 25px;
    }

    .skn-quality-image-strip {
        margin-top: 45px;
    }

    .skn-quality-strip-image,
    .skn-quality-strip-image img {
        min-height: 0;
        height: 300px;
    }

    .skn-quality-strip-content {
        padding: 28px 24px 32px;
    }

    .skn-quality-trace-image {
        padding-left: 12px;
    }

    .skn-quality-trace-image img {
        height: 320px;
    }

    .skn-quality-trace-image::after {
        left: 12px;
    }

    .skn-quality-trace-badge {
        right: -4px;
        padding: 12px 14px;
        font-size: 13px;
    }

    .skn-quality-trace-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .skn-quality-certifications {
        padding: 60px 0;
    }

    .skn-quality-cert-box {
        padding: 28px 22px;
    }

    .skn-quality-cert-icon {
        width: 78px;
        height: 78px;
        margin-bottom: 15px;
        font-size: 32px;
    }

    .skn-quality-bottom {
        padding: 65px 15px;
    }

    .skn-quality-bottom h2 {
        font-size: 30px;
    }
}

@media (max-width: 420px) {
    .skn-quality-hero-content h1 {
        font-size: 32px;
    }

    .skn-quality-image-label {
        gap: 9px;
        padding: 10px;
    }

    .skn-quality-label-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .skn-quality-cert-details span {
        font-size: 12px;
    }
}


/* Respect reduced-motion accessibility settings */

@media (prefers-reduced-motion: reduce) {

    .skn-quality-page *,
    .skn-quality-page *::before,
    .skn-quality-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


/* =====================================================
   SKN ELECTRONICS - INFRASTRUCTURE PAGE
   Uses Existing SKN Root Variables
===================================================== */

.skn-infra-page {
    position: relative;
    overflow: hidden;
    background: var(--infra-white);
    color: var(--infra-text);
    font-size: 16px;
    line-height: 1.8;
    padding: 40px 0;
}

.skn-infra-page *,
.skn-infra-page *::before,
.skn-infra-page *::after {
    box-sizing: border-box;
}

.skn-infra-page img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.skn-infra-page h1,
.skn-infra-page h2,
.skn-infra-page h3,
.skn-infra-page p {
    margin-top: 0;
}

.skn-infra-page h1,
.skn-infra-page h2,
.skn-infra-page h3 {
    line-height: 1.3;
}

.skn-infra-page h1 {
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
}

.skn-infra-page h2 {
    font-size: clamp(29px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: -0.7px;
}

.skn-infra-page h3 {
    font-size: 20px;
    font-weight: 750;
}

.skn-infra-page p {
    font-size: 16px;
}

.skn-infra-page a {
    text-decoration: none;
}

.skn-infra-page .container {
    position: relative;
    z-index: 2;
}


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

.skn-infra-hero {
    position: relative;
    isolation: isolate;
    padding: 15px 0 95px;
    background:
        radial-gradient(circle at 75% 35%,
            rgba(3, 97, 176, 0.12),
            transparent 36%),
        linear-gradient(130deg,
            #ffffff 0%,
            var(--infra-light) 100%);
}

.skn-infra-pattern {
    position: absolute;
    z-index: -1;
    inset: -35%;
    pointer-events: none;
    opacity: 0.4;

    background-image:
        linear-gradient(45deg,
            transparent 48%,
            rgba(3, 97, 176, 0.10) 49%,
            rgba(3, 97, 176, 0.10) 50%,
            transparent 51%),
        radial-gradient(rgba(3, 97, 176, 0.3) 1px,
            transparent 1.5px);

    background-size: 90px 90px, 24px 24px;

    animation: sknInfraPatternRotate 75s linear infinite;
}

.skn-infra-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 15px 0 25px;
    margin-bottom: 35px;
    border-bottom: 1px solid rgba(3, 97, 176, 0.1);
    color: var(--infra-muted);
    font-size: 14px;
}

.skn-infra-breadcrumb a {
    color: var(--infra-blue);
    transition: color 0.3s ease;
}

.skn-infra-breadcrumb a:hover {
    color: var(--infra-navy);
}

.skn-infra-breadcrumb i {
    font-size: 11px;
}

.skn-infra-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--infra-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.skn-infra-kicker>span {
    width: 28px;
    height: 2px;
    background: var(--infra-blue);
}

.skn-infra-hero h1 {
    margin-bottom: 23px;
    color: var(--infra-navy);
}

.skn-infra-hero h1 span,
.skn-infra-heading h2 span,
.skn-infra-introduction h2 span {
    color: var(--infra-blue);
}

.skn-infra-intro {
    max-width: 590px;
    margin-bottom: 16px;
    color: var(--infra-muted);
}

.skn-infra-hero-line {
    width: 55px;
    height: 3px;
    margin-top: 25px;
    background: var(--infra-blue);
}


/* =====================================================
   HERO IMAGE AND LIGHTING
===================================================== */

.skn-infra-hero-visual {
    position: relative;
    z-index: 1;
    padding: 0 18px 25px 0;
}

.skn-infra-hero-img {
    position: relative;
    z-index: 1;
    height: 435px;
    object-fit: cover;
    border-radius: 7px;

    box-shadow: 0 25px 60px rgba(7, 24, 39, 0.15);

    transition:
        transform 0.7s ease,
        filter 0.5s ease;
}

.skn-infra-hero-visual:hover .skn-infra-hero-img {
    transform: scale(1.025);
    filter: saturate(1.12);
}

.skn-infra-hero-frame {
    position: absolute;
    z-index: 0;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 35px;
    border: 2px solid rgba(3, 97, 176, 0.4);
    border-radius: 7px;

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

.skn-infra-hero-glow {
    position: absolute;
    z-index: -1;
    inset: -25px;
    border-radius: 50%;
    background: rgba(3, 97, 176, 0.18);
    filter: blur(55px);

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

.skn-infra-image-note {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    gap: 13px;

    max-width: 310px;
    padding: 17px 20px;

    border-left: 4px solid var(--infra-blue);
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(7, 24, 39, 0.13);

    animation: sknInfraFloat 4s ease-in-out infinite;
}

.skn-infra-note-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;

    width: 45px;
    height: 45px;

    border-radius: 50%;
    background: var(--infra-blue);
    color: #ffffff;
    font-size: 20px;
}

.skn-infra-image-note strong,
.skn-infra-image-note small {
    display: block;
}

.skn-infra-image-note strong {
    color: var(--infra-navy);
    font-size: 14px;
    line-height: 1.5;
}

.skn-infra-image-note small {
    color: var(--infra-muted);
    font-size: 12px;
}

.skn-infra-orbit {
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(3, 97, 176, 0.5);
    border-radius: 50%;
    pointer-events: none;
}

.skn-infra-orbit-one {
    top: -25px;
    right: 10%;
    width: 110px;
    height: 110px;

    animation: sknInfraOrbit 15s linear infinite;
}

.skn-infra-orbit-two {
    bottom: 40px;
    left: -25px;
    width: 65px;
    height: 65px;
    border-style: dashed;

    animation: sknInfraOrbit 10s linear infinite reverse;
}


/* =====================================================
   FACILITIES SECTION - LIGHT BACKGROUND
===================================================== */

.skn-infra-facilities {
    position: relative;
    isolation: isolate;
    padding: 20px 0;

    background:
        radial-gradient(circle at 5% 15%,
            rgba(3, 97, 176, 0.07),
            transparent 25%),
        var(--infra-light);
}

.skn-infra-facility-pattern {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.38;
    pointer-events: none;

    background-image: radial-gradient(rgba(3, 97, 176, 0.23) 1px,
            transparent 1.5px);

    background-size: 24px 24px;

    mask-image: linear-gradient(135deg,
            black,
            transparent 60%);
}

.skn-infra-heading {
    max-width: 1050px;
    margin: 0 auto 55px;
}

.skn-infra-heading h2 {
    margin-bottom: 18px;
    color: var(--infra-navy);
}

.skn-infra-heading p {
    max-width: 1050px;
    margin: 0 auto;
    color: var(--infra-muted);
}


/* =====================================================
   FACILITY CARDS
===================================================== */

.skn-infra-card {
    position: relative;
    height: 100%;
    overflow: hidden;

    border: 1px solid var(--infra-border);
    border-radius: 7px;
    background: #ffffff;

    box-shadow: 0 5px 20px rgba(7, 24, 39, 0.035);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.skn-infra-card:hover {
    transform: translateY(-9px);
    border-color: rgba(3, 97, 176, 0.35);

    box-shadow: 0 20px 42px rgba(7, 24, 39, 0.11);
}

.skn-infra-card-image {
    position: relative;
    overflow: hidden;
    margin: 7px 7px 0;
    border-radius: 5px;
}

.skn-infra-card-image img {
    height: 205px;
    object-fit: cover;

    transition:
        transform 0.65s ease,
        filter 0.5s ease;
}

.skn-infra-card:hover .skn-infra-card-image img {
    transform: scale(1.09);
    filter: brightness(1.08) saturate(1.12);
}

.skn-infra-card-image::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;

    background: linear-gradient(180deg,
            rgba(7, 24, 39, 0.02),
            transparent 45%,
            rgba(7, 24, 39, 0.25));
}

.skn-infra-card-number {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;

    display: grid;
    place-items: center;

    width: 37px;
    height: 37px;

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;

    background: rgba(7, 24, 39, 0.75);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;

    backdrop-filter: blur(6px);
}

.skn-infra-card-icon {
    position: absolute;
    z-index: 3;
    bottom: -22px;
    left: 15px;

    display: grid;
    place-items: center;

    width: 53px;
    height: 53px;

    border: 4px solid #ffffff;
    border-radius: 50%;

    background: var(--infra-blue);
    color: #ffffff;
    font-size: 19px;

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.skn-infra-card:hover .skn-infra-card-icon {
    transform: rotate(-8deg) scale(1.08);
    background: var(--infra-navy);
}

.skn-infra-card-body {
    display: flex;
    flex-direction: column;
    padding: 34px 22px 21px;
}

.skn-infra-card-body h3 {
    margin-bottom: 13px;

    color: var(--infra-navy);
    font-size: 19px;
    line-height: 1.4;

    transition: color 0.3s ease;
}

.skn-infra-card:hover .skn-infra-card-body h3 {
    color: var(--infra-blue);
}

.skn-infra-card-body p {
    flex-grow: 1;
    margin-bottom: 0px;

    color: var(--infra-muted);
    font-size: 15px;
    line-height: 1.8;
}

.skn-infra-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding-top: 14px;
    border-top: 1px solid var(--infra-border);

    color: var(--infra-blue);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.2px;
}

.skn-infra-card-bottom i {
    display: grid;
    flex-shrink: 0;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid #c9dff2;
    border-radius: 50%;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.skn-infra-card:hover .skn-infra-card-bottom i {
    transform: translateX(3px);
    color: #ffffff;
    background: var(--infra-blue);
}


/* =====================================================
   INTRODUCTION SECTION
===================================================== */

.skn-infra-introduction {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 40px 0;
    background: #ffffff;
}

.skn-infra-intro-pattern {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    opacity: 0.45;
    pointer-events: none;

    background-image: linear-gradient(135deg,
            transparent 48%,
            rgba(3, 97, 176, 0.08) 49%,
            rgba(3, 97, 176, 0.08) 50%,
            transparent 51%);

    background-size: 75px 75px;

    animation: sknInfraPatternRotate 85s linear infinite;
}

.skn-infra-feature-image {
    position: relative;
    overflow: hidden;
    padding-bottom: 25px;
    border-radius: 6px;
}

.skn-infra-feature-image>img {
    height: 420px;
    object-fit: cover;
    border-radius: 6px;

    transition:
        transform 0.7s ease,
        filter 0.5s ease;
}

.skn-infra-feature-image:hover>img {
    transform: scale(1.045);
    filter: saturate(1.1);
}

.skn-infra-feature-overlay {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 12px;

    padding: 19px 12px;
    border-radius: 0 0 6px 6px;

    background: rgba(7, 24, 39, 0.93);
    color: #ffffff;
}

.skn-infra-feature-overlay>div {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 12px;
    font-weight: 700;
}

.skn-infra-feature-overlay i {
    color: #79c4ff;
    font-size: 18px;
}

.skn-infra-introduction h2 {
    margin-bottom: 22px;
    color: var(--infra-navy);
}

.skn-infra-introduction p {
    color: var(--infra-muted);
}


/* Commitment list */

.skn-infra-commitment-list {
    display: grid;
    gap: 12px;
    margin: 27px 0 30px;
}

.skn-infra-commitment-list>div {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    color: var(--infra-text);
    font-size: 15px;
    font-weight: 600;
}

.skn-infra-commitment-list i {
    display: grid;
    flex-shrink: 0;
    place-items: center;

    width: 24px;
    height: 24px;
    margin-top: 1px;

    border-radius: 50%;
    background: #e7f3ff;
    color: var(--infra-blue);
    font-size: 11px;
}


/* Button */

.skn-infra-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    padding: 14px 23px;
    border: 1px solid var(--infra-blue);
    border-radius: 4px;

    background: var(--infra-blue);
    color: #ffffff !important;

    font-size: 14px;
    font-weight: 750;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.skn-infra-button:hover {
    transform: translateY(-3px);
    background: var(--infra-navy);
    border-color: var(--infra-navy);

    box-shadow: 0 12px 25px rgba(3, 97, 176, 0.18);
}

.skn-infra-button i {
    transition: transform 0.3s ease;
}

.skn-infra-button:hover i {
    transform: translateX(5px);
}


/* =====================================================
   EQUIPMENT INFORMATION NOTICE
===================================================== */

.skn-infra-notice {
    background: #ffffff;
}

.skn-infra-notice-inner {
    display: flex;
    align-items: flex-start;
    gap: 23px;

    padding: 30px;
    border: 1px solid var(--infra-border);
    border-left: 4px solid var(--infra-blue);
    border-radius: 5px;

    background: var(--infra-light);
}

.skn-infra-notice-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;

    width: 57px;
    height: 57px;

    border-radius: 5px;
    background: #e1f0ff;
    color: var(--infra-blue);
    font-size: 24px;
}

.skn-infra-notice h3 {
    margin-bottom: 10px;
    color: var(--infra-navy);
    font-size: 20px;
}

.skn-infra-notice p {
    margin-bottom: 0;
    color: var(--infra-muted);
    font-size: 15px;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes sknInfraPatternRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes sknInfraGlow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes sknInfraFloat {

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

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

@keyframes sknInfraFrame {

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

    50% {
        transform: translate(7px, -5px);
    }
}

@keyframes sknInfraOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =====================================================
   RESPONSIVE - TABLET
===================================================== */

@media (max-width: 1199.98px) {
    .skn-infra-card-image img {
        height: 190px;
    }

    .skn-infra-card-body {
        padding-right: 18px;
        padding-left: 18px;
    }

    .skn-infra-card-body h3 {
        font-size: 18px;
    }
}

@media (max-width: 991.98px) {
    .skn-infra-hero {
        padding-bottom: 75px;
    }

    .skn-infra-hero-img {
        height: 380px;
    }

    .skn-infra-facilities,
    .skn-infra-introduction {
        padding: 75px 0;
    }

    .skn-infra-heading {
        margin-bottom: 40px;
    }

    .skn-infra-feature-image>img {
        height: 370px;
    }

    .skn-infra-notice {
        padding-bottom: 65px;
    }
}


/* =====================================================
   RESPONSIVE - MOBILE
===================================================== */

@media (max-width: 767.98px) {
    .skn-infra-page h1 {
        font-size: 35px;
        letter-spacing: -0.7px;
    }

    .skn-infra-page h2 {
        font-size: 30px;
    }

    .skn-infra-hero {
        padding-bottom: 60px;
    }

    .skn-infra-breadcrumb {
        margin-bottom: 28px;
    }

    .skn-infra-hero-img {
        height: 320px;
    }

    .skn-infra-image-note {
        right: -5px;
        max-width: 280px;
        padding: 12px;
    }

    .skn-infra-orbit-one {
        width: 75px;
        height: 75px;
    }

    .skn-infra-facilities,
    .skn-infra-introduction {
        padding: 60px 0;
    }

    .skn-infra-card-image img {
        height: 230px;
    }

    .skn-infra-card-body h3 {
        min-height: 0;
    }

    .skn-infra-feature-image>img {
        height: 320px;
    }

    .skn-infra-feature-overlay {
        gap: 10px;
    }

    .skn-infra-feature-overlay>div {
        font-size: 11px;
    }

    .skn-infra-notice {
        padding-bottom: 55px;
    }

    .skn-infra-notice-inner {
        gap: 15px;
        padding: 22px;
    }

    .skn-infra-notice-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

@media (max-width: 420px) {
    .skn-infra-page h1 {
        font-size: 31px;
    }

    .skn-infra-page h2 {
        font-size: 27px;
    }

    .skn-infra-kicker {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .skn-infra-hero-img {
        height: 275px;
    }

    .skn-infra-card-image img {
        height: 200px;
    }

    .skn-infra-notice-inner {
        display: block;
    }

    .skn-infra-notice-icon {
        margin-bottom: 17px;
    }
}


/* =====================================================
   ACCESSIBILITY - REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .skn-infra-page *,
    .skn-infra-page *::before,
    .skn-infra-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   SKN ELECTRONICS - ABOUT US
   Unique class prefix: skn-about-
========================================== */

.skn-about-section {

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(ellipse at 8% 12%,
            rgba(50, 214, 232, .13),
            transparent 32%),
        radial-gradient(ellipse at 92% 48%,
            rgba(8, 120, 207, .10),
            transparent 30%),
        linear-gradient(135deg, #f7fbff, #edf5fb 50%, #f8fbff);
    color: var(--skn-about-navy);
    font-family: inherit;
}

/* Background PCB-style circuit pattern */

.skn-about-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -20%;
    pointer-events: none;
    opacity: .36;

    background-image:
        radial-gradient(circle,
            rgba(8, 120, 207, .34) 1.4px,
            transparent 2px),
        linear-gradient(90deg,
            transparent 49.5%,
            rgba(8, 120, 207, .10) 50%,
            transparent 50.5%),
        linear-gradient(transparent 49.5%,
            rgba(8, 120, 207, .10) 50%,
            transparent 50.5%);

    background-size: 34px 34px, 68px 68px, 68px 68px;
    animation: sknAboutPatternRotate 65s linear infinite;
}

.skn-about-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .65;

    background:
        linear-gradient(115deg,
            transparent 20%,
            rgba(50, 214, 232, .09) 48%,
            transparent 68%);

    background-size: 220% 100%;
    animation: sknAboutLightSweep 12s ease-in-out infinite;
}

/* Decorative rotating circuit rings */

.skn-about-orbit {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(8, 120, 207, .17);
    border-radius: 50%;
}

.skn-about-orbit-one {
    width: 390px;
    height: 390px;
    top: 15%;
    right: -180px;
    animation: sknAboutOrbit 32s linear infinite;
}

.skn-about-orbit-two {
    width: 270px;
    height: 270px;
    left: -130px;
    bottom: 8%;
    border-style: dashed;
    animation: sknAboutOrbitReverse 40s linear infinite;
}

.skn-about-glow {
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    filter: blur(75px);
    opacity: .28;
    pointer-events: none;
    animation: sknAboutGlowPulse 8s ease-in-out infinite alternate;
}

.skn-about-glow-one {
    top: 20%;
    left: -80px;
    background: #32d6e8;
}

.skn-about-glow-two {
    right: 5%;
    bottom: 20%;
    background: #0878cf;
    animation-delay: -4s;
}

/* Heading */

.skn-about-heading {
    position: relative;
    max-width: 800px;
    margin: 0 auto 65px;
}

.skn-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
    color: var(--skn-about-blue);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.skn-about-eyebrow-line {
    display: inline-block;
    width: 30px;
    height: 2px;
    background: var(--skn-about-cyan);
}

.skn-about-heading h2 {
    margin: 0 0 20px;
    color: var(--skn-about-navy);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.2px;
}

.skn-about-heading h2 span,
.skn-about-intro-title span,
.skn-about-services-heading h3 span,
.skn-about-commitment-title span {
    color: var(--skn-about-blue);
}

.skn-about-heading>p {
    max-width: 640px;
    margin: auto;
    color: var(--skn-about-muted);
    font-size: 16px;
    line-height: 1.9;
}

/* Main image */

.skn-about-intro {
    margin-bottom: 50px;
}

.skn-about-image-wrap {
    position: relative;
    margin: 0 18px 25px 0;
    padding: 0 0 24px 20px;
}

.skn-about-image-frame {
    position: absolute;
    inset: 20px -18px 0 0;
    border: 2px solid rgba(8, 120, 207, .26);
    border-radius: 24px;
    transform: rotate(3deg);
    transition: transform .6s ease, border-color .5s ease;
}

.skn-about-image-wrap:hover .skn-about-image-frame {
    transform: rotate(0deg);
    border-color: var(--skn-about-cyan);
}

.skn-about-main-image {
    display: block;
    position: relative;
    width: 100%;
    height: 490px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(7, 27, 49, .15);
    transition:
        transform .8s cubic-bezier(.2, .7, .2, 1),
        filter .6s ease,
        box-shadow .6s ease;
}

.skn-about-image-wrap:hover .skn-about-main-image {
    transform: scale(1.025);
    filter: saturate(1.12);
    box-shadow: 0 30px 65px rgba(7, 27, 49, .22);
}

.skn-about-image-label {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: calc(100% - 20px);
    padding: 19px 23px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 15px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 15px 40px rgba(7, 27, 49, .13);
    backdrop-filter: blur(12px);
    transition: transform .4s ease, box-shadow .4s ease;
}

.skn-about-image-wrap:hover .skn-about-image-label {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(8, 120, 207, .18);
}

.skn-about-label-icon {
    display: grid;
    flex-shrink: 0;
    width: 49px;
    height: 49px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #0878cf, #32bde0);
    font-size: 21px;
}

.skn-about-image-label strong,
.skn-about-image-label small {
    display: block;
}

.skn-about-image-label strong {
    color: var(--skn-about-navy);
    font-size: 15px;
    font-weight: 800;
}

.skn-about-image-label small {
    margin-top: 4px;
    color: var(--skn-about-muted);
    font-size: 13px;
}

.skn-about-image-corner {
    position: absolute;
    top: 38px;
    right: -5px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 4px solid var(--skn-about-ice);
    border-radius: 50%;
    background: var(--skn-about-blue);
    color: #fff;
    transition: transform .4s ease, background .4s ease;
}

.skn-about-image-wrap:hover .skn-about-image-corner {
    transform: rotate(90deg);
    background: var(--skn-about-navy);
}

/* Intro content */

.skn-about-subtitle {
    display: block;
    margin-bottom: 15px;
    color: var(--skn-about-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.3px;
    line-height: 1.7;
}

.skn-about-intro-title {
    margin: 0 0 22px;
    color: var(--skn-about-navy);
    font-size: clamp(27px, 3vw, 37px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.7px;
}

.skn-about-description {
    margin: 0 0 16px;
    color: var(--skn-about-text);
    font-size: 15.5px;
    line-height: 1.95;
}

.skn-about-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 27px;
}

.skn-about-highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 13px;
    border: 1px solid rgba(8, 120, 207, .12);
    border-radius: 13px;
    background: rgba(255, 255, 255, .7);
    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.skn-about-highlight:hover {
    transform: translateY(-5px);
    border-color: rgba(8, 120, 207, .4);
    box-shadow: 0 12px 30px rgba(7, 27, 49, .08);
}

.skn-about-highlight-icon {
    display: grid;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 10px;
    background: #e0f4ff;
    color: var(--skn-about-blue);
}

.skn-about-highlight h4 {
    margin: 1px 0 6px;
    color: var(--skn-about-navy);
    font-size: 14px;
    font-weight: 800;
}

.skn-about-highlight p {
    margin: 0;
    color: var(--skn-about-muted);
    font-size: 13px;
    line-height: 1.7;
}

/* Capabilities */

.skn-about-services {
    position: relative;
    margin-bottom: 100px;
}

.skn-about-services-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}

.skn-about-services-heading h3 {
    margin: 0;
    color: var(--skn-about-navy);
    font-size: clamp(30px, 3vw, 39px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.skn-about-services-heading>p {
    max-width: 370px;
    margin: 0 0 5px;
    color: var(--skn-about-muted);
    font-size: 15px;
    line-height: 1.8;
}

.skn-about-service-card {
    position: relative;
    height: 100%;
    min-height: 250px;
    overflow: hidden;
    padding: 32px 27px;
    border: 1px solid rgba(8, 120, 207, .13);
    border-radius: 17px;
    background: #071827;
    box-shadow: 0 8px 25px rgba(7, 27, 49, .035);
    transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease, background .45s ease;
}

.skn-about-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--skn-about-blue),
            var(--skn-about-cyan));
    transition: width .5s ease;
}

.skn-about-service-card::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -55px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(8, 120, 207, .10);
    border-radius: 50%;
    transition: transform .6s ease, border-color .5s ease;
}

.skn-about-service-card:hover {
    transform: translateY(-9px);
    border-color: rgba(8, 120, 207, .4);
    background: #fff;
    box-shadow: 0 22px 45px rgba(7, 27, 49, .10);
}

.skn-about-service-card:hover::before {
    width: 100%;
}

.skn-about-service-card:hover::after {
    transform: scale(1.5);
    border-color: rgba(50, 214, 232, .5);
}

.skn-about-service-number {
    position: absolute;
    top: 22px;
    right: 24px;
    color: rgb(102 152 190 / 59%);
    font-size: 27px;
    font-weight: 900;
    transition: color .4s ease, transform .4s ease;
}

.skn-about-service-card:hover .skn-about-service-number {
    color: rgba(8, 120, 207, .55);
    transform: translateY(-3px);
}

.skn-about-service-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 23px;
    place-items: center;
    border-radius: 15px;
    background: #e4f5ff;
    color: var(--skn-about-blue);
    font-size: 23px;
    transition:
        transform .45s ease,
        color .45s ease,
        background .45s ease;
}

.skn-about-service-card:hover .skn-about-service-icon {
    transform: translateY(-4px) rotate(-5deg);
    color: #fff;
    background: linear-gradient(135deg, #0878cf, #32bde0);
}

.skn-about-service-card h4 {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: #dce9f7;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.45;
}

.skn-about-service-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #b4c0cd;
    font-size: 15px;
    line-height: 1.85;
}

/* Service card dark hover effect */
.skn-about-service-card {
    position: relative;
    overflow: hidden;
    background: #071b31;
    border: 1px solid rgba(50, 214, 232, 0.15);
    transition: all 0.45s ease;
}

/* Heading */
.skn-about-service-card h4 {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: #dce9f7;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.45;
    transition: color 0.4s ease;
}

/* Description */
.skn-about-service-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #b4c0cd;
    font-size: 15px;
    line-height: 1.85;
    transition: color 0.4s ease;
}

/* Blue lighting overlay */
.skn-about-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg,
            rgba(8, 120, 207, 0.30),
            rgba(50, 214, 232, 0.08),
            transparent 75%);
    opacity: 0;
    transition: opacity 0.45s ease;
}

/* Hover */
.skn-about-service-card:hover {
    background: #0b2945;
    border-color: #32d6e8;
    transform: translateY(-9px);
    box-shadow:
        0 15px 35px rgba(7, 27, 49, 0.25),
        0 0 20px rgba(50, 214, 232, 0.16);
}

/* Reveal lighting */
.skn-about-service-card:hover::before {
    opacity: 1;
}

/* Brighter text on hover */
.skn-about-service-card:hover h4 {
    color: #ffffff;
}

.skn-about-service-card:hover p {
    color: #d5e8f5;
}

/* Icon hover */
.skn-about-service-card .skn-about-service-icon {
    transition: all 0.45s ease;
}

.skn-about-service-card:hover .skn-about-service-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #0878cf, #32d6e8);
    transform: translateY(-4px) rotate(-5deg);
}

/* Number hover */
.skn-about-service-card .skn-about-service-number {
    transition: color 0.4s ease, transform 0.4s ease;
}

.skn-about-service-card:hover .skn-about-service-number {
    color: rgba(50, 214, 232, 0.7);
    transform: translateY(-3px);
}

/* Commitment */

.skn-about-commitment {
    position: relative;
    overflow: hidden;
    padding: 35px;
    border: 1px solid rgba(8, 120, 207, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 20px 55px rgba(7, 27, 49, .07);
}

.skn-about-commitment-image {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border-radius: 17px;
    background: #dcebf5;
}

.skn-about-commitment-image img {
    display: block;
    width: 100%;
    height: 370px;
    object-fit: cover;
    transition: transform .8s ease, filter .6s ease;
}

.skn-about-commitment-image:hover img {
    transform: scale(1.08);
    filter: saturate(1.12);
}

.skn-about-commitment-image-overlay {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 12px;
    background: rgba(7, 27, 49, .86);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.skn-about-commitment-image-overlay i {
    color: var(--skn-about-cyan);
    font-size: 23px;
}

.skn-about-commitment-title {
    margin: 0 0 22px;
    color: var(--skn-about-navy);
    font-size: clamp(29px, 3.3vw, 42px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.8px;
}

.skn-about-commitment-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 20px;
    margin-top: 25px;
}

.skn-about-commitment-points>div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--skn-about-navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.skn-about-commitment-points i {
    display: grid;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: #dff7ed;
    color: #087a50;
    font-size: 11px;
}

/* Animations */

@keyframes sknAboutPatternRotate {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes sknAboutOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes sknAboutOrbitReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes sknAboutLightSweep {

    0%,
    100% {
        background-position: 100% 0;
        opacity: .25;
    }

    50% {
        background-position: 0 0;
        opacity: .8;
    }
}

@keyframes sknAboutGlowPulse {
    from {
        transform: scale(.85);
        opacity: .17;
    }

    to {
        transform: scale(1.18);
        opacity: .36;
    }
}

/* Tablet */

@media (max-width: 991.98px) {
    .skn-about-section {
        padding: 75px 0;
    }

    .skn-about-intro {
        margin-bottom: 80px;
    }

    .skn-about-main-image {
        height: 420px;
    }

    .skn-about-services {
        margin-bottom: 75px;
    }

    .skn-about-commitment {
        padding: 25px;
    }
}

/* Mobile */

@media (max-width: 767.98px) {
    .skn-about-section {
        padding: 60px 0;
    }

    .skn-about-heading {
        margin-bottom: 45px;
    }

    .skn-about-heading h2 {
        letter-spacing: -.5px;
    }

    .skn-about-intro {
        margin-bottom: 65px;
    }

    .skn-about-image-wrap {
        margin-right: 12px;
        padding-left: 10px;
    }

    .skn-about-main-image {
        height: 340px;
    }

    .skn-about-image-frame {
        right: -10px;
    }

    .skn-about-image-label {
        gap: 10px;
        padding: 13px;
    }

    .skn-about-label-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .skn-about-image-label strong {
        font-size: 13px;
    }

    .skn-about-image-label small {
        font-size: 12px;
    }

    .skn-about-highlights {
        grid-template-columns: 1fr;
    }

    .skn-about-services-heading {
        display: block;
    }

    .skn-about-services-heading>p {
        margin-top: 16px;
    }

    .skn-about-service-card {
        min-height: 225px;
        padding: 27px 23px;
    }

    .skn-about-commitment {
        padding: 17px;
        border-radius: 18px;
    }

    .skn-about-commitment-image,
    .skn-about-commitment-image img {
        height: 300px;
        min-height: 300px;
    }

    .skn-about-commitment-points {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .skn-about-orbit-one {
        right: -280px;
    }
}

/* Small phones */

@media (max-width: 420px) {
    .skn-about-main-image {
        height: 290px;
    }

    .skn-about-service-card {
        min-height: auto;
    }

    .skn-about-heading h2 {
        font-size: 30px;
    }

    .skn-about-commitment-image,
    .skn-about-commitment-image img {
        height: 250px;
        min-height: 250px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .skn-about-section *,
    .skn-about-section *::before,
    .skn-about-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   SKN VISION MISSION VALUES
========================================== */

.skn-vmv-section {

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    background:
        radial-gradient(ellipse at 10% 15%, rgba(8, 189, 232, .09), transparent 35%),
        radial-gradient(ellipse at 90% 75%, rgba(7, 93, 168, .08), transparent 32%),
        #f5f9fd;
    color: var(--skn-vmv-text);
}

.skn-vmv-section .container {
    position: relative;
    z-index: 2;
}

/* Rotating illuminated circuit pattern */

.skn-vmv-pattern {
    position: absolute;
    z-index: -1;
    top: -240px;
    right: -200px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(8, 189, 232, .20);
    border-radius: 50%;
    pointer-events: none;
    animation: sknVmvRotate 35s linear infinite;
}

.skn-vmv-pattern::before,
.skn-vmv-pattern::after {
    position: absolute;
    content: "";
    border: 1px dashed rgba(7, 93, 168, .22);
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(8, 189, 232, .10);
}

.skn-vmv-pattern::before {
    inset: 35px;
}

.skn-vmv-pattern::after {
    inset: 80px;
    border-style: dotted;
    box-shadow: 0 0 40px rgba(8, 189, 232, .18);
}

@keyframes sknVmvRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Headings */

.skn-vmv-heading,
.skn-vmv-values-heading {
    position: relative;
    text-align: center;
}

.skn-vmv-heading {
    max-width: 800px;
    margin: 0 auto 48px;
}

.skn-vmv-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--skn-vmv-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.skn-vmv-heading h2,
.skn-vmv-values-heading h2 {
    margin: 0 0 15px;
    color: var(--skn-vmv-navy);
    font-size: clamp(30px, 4vw, 43px);
    font-weight: 800;
    line-height: 1.2;
}

.skn-vmv-heading h2 span {
    color: var(--skn-vmv-blue);
}

.skn-vmv-heading p,
.skn-vmv-values-heading p {
    margin: 0;
    color: var(--skn-vmv-muted);
    font-size: 17px;
    line-height: 1.8;
}

/* Vision and Mission */

.skn-vmv-feature {
    display: flex;
    height: 100%;
    min-height: 285px;
    overflow: hidden;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--skn-vmv-border);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(7, 27, 49, .045);
    transition: transform .4s ease, box-shadow .4s ease,
        border-color .4s ease;
}

.skn-vmv-feature:hover {
    transform: translateY(-7px);
    border-color: rgba(8, 189, 232, .65);
    box-shadow: 0 22px 45px rgba(7, 93, 168, .12);
}

.skn-vmv-feature-image {
    position: relative;
    flex: 0 0 43%;
    min-height: 285px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

.skn-vmv-feature-image img,
.skn-vmv-card-image img,
.skn-vmv-quality-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1),
        filter .5s ease;
}

.skn-vmv-feature:hover .skn-vmv-feature-image img,
.skn-vmv-card:hover .skn-vmv-card-image img,
.skn-vmv-quality:hover .skn-vmv-quality-image img {
    transform: scale(1.09);
    filter: saturate(1.12);
}

.skn-vmv-feature-content {
    position: relative;
    flex: 1;
    align-self: center;
    padding: 30px 25px 30px 12px;
}

.skn-vmv-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    color: #fff;
    background: var(--skn-vmv-blue);
    border-radius: 13px;
    font-size: 27px;
    transition: background .3s ease, transform .3s ease;
}

.skn-vmv-feature:hover .skn-vmv-icon {
    background: var(--skn-vmv-cyan);
    transform: rotate(-8deg);
}

.skn-vmv-feature-content h3 {
    margin: 0 0 12px;
    color: var(--skn-vmv-navy);
    font-size: 25px;
    font-weight: 800;
}

.skn-vmv-feature-content p {
    margin: 0;
    color: var(--skn-vmv-muted);
    font-size: 15.5px;
    line-height: 1.85;
}

/* Core values */

.skn-vmv-values-heading {
    margin: 75px 0 35px;
}

.skn-vmv-values-heading h2 {
    font-size: 36px;
}

.skn-vmv-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--skn-vmv-border);
    border-radius: 15px;
    box-shadow: 0 9px 26px rgba(7, 27, 49, .045);
    transition: transform .4s ease, box-shadow .4s ease,
        border-color .4s ease;
}

.skn-vmv-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg,
            var(--skn-vmv-blue), var(--skn-vmv-cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.skn-vmv-card:hover {
    transform: translateY(-9px);
    border-color: #b9e6f4;
    box-shadow: 0 20px 35px rgba(7, 93, 168, .12);
}

.skn-vmv-card:hover::after {
    transform: scaleX(1);
}

.skn-vmv-card-image {
    height: 255px;
    overflow: hidden;
    background: #eaf2f9;
}

.skn-vmv-card-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    margin: -25px auto 0;
    color: #fff;
    background: var(--skn-vmv-blue);
    border: 4px solid #fff;
    border-radius: 50%;
    font-size: 23px;
    font-weight: 700;
    z-index: 1;
    transition: transform .4s ease, background .4s ease;
}

.skn-vmv-card:hover .skn-vmv-card-icon {
    transform: rotate(360deg);
    background: #08a9d7;
}

.skn-vmv-card-body {
    padding: 13px 17px 27px;
    text-align: center;
}

.skn-vmv-card-body h3 {
    margin: 0 0 12px;
    color: var(--skn-vmv-navy);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
}

.skn-vmv-card-body p {
    margin: 0;
    color: var(--skn-vmv-muted);
    font-size: 15px;
    line-height: 1.8;
}

/* Quality policy */

.skn-vmv-quality {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    min-height: 300px;
    margin-top: 65px;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 20%, rgba(8, 189, 232, .15), transparent 30%),
        var(--skn-vmv-navy);
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(7, 27, 49, .14);
}

.skn-vmv-quality-image {
    min-height: 300px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}

.skn-vmv-quality-content {
    align-self: center;
    padding: 45px 45px 45px 20px;
}

.skn-vmv-quality-content .skn-vmv-eyebrow {
    color: var(--skn-vmv-cyan);
}

.skn-vmv-quality-content h2 {
    margin: 0 0 15px;
    color: #fff;
    font-size: clamp(28px, 3vw, 37px);
    font-weight: 800;
}

.skn-vmv-quality-line {
    display: block;
    width: 65px;
    height: 4px;
    margin-bottom: 20px;
    background: var(--skn-vmv-cyan);
    border-radius: 5px;
}

.skn-vmv-quality-content p {
    margin: 0;
    color: #d4e2ef;
    font-size: 15.5px;
    line-height: 1.9;
}

/* Tablet */

@media (max-width: 1199.98px) {
    .skn-vmv-card-image {
        height: 190px;
    }

    .skn-vmv-feature-content {
        padding-right: 20px;
    }
}

/* Mobile */

@media (max-width: 767.98px) {
    .skn-vmv-section {
        padding: 60px 0;
    }

    .skn-vmv-heading {
        margin-bottom: 32px;
    }

    .skn-vmv-heading h2,
    .skn-vmv-values-heading h2 {
        font-size: 30px;
    }

    .skn-vmv-heading p,
    .skn-vmv-values-heading p {
        font-size: 15px;
    }

    .skn-vmv-feature {
        display: block;
        min-height: auto;
    }

    .skn-vmv-feature-image {
        height: 210px;
        min-height: 210px;
        clip-path: none;
    }

    .skn-vmv-feature-content {
        padding: 25px;
    }

    .skn-vmv-feature-content h3 {
        font-size: 23px;
    }

    .skn-vmv-values-heading {
        margin: 55px 0 28px;
    }

    .skn-vmv-card-image {
        height: 200px;
    }

    .skn-vmv-quality {
        grid-template-columns: 1fr;
        margin-top: 45px;
    }

    .skn-vmv-quality-image {
        min-height: 220px;
        height: 220px;
        clip-path: none;
    }

    .skn-vmv-quality-content {
        padding: 30px 25px 35px;
    }

    .skn-vmv-pattern {
        right: -400px;
    }
}

/* Reduced motion accessibility */

@media (prefers-reduced-motion: reduce) {
    .skn-vmv-pattern {
        animation: none;
    }

    .skn-vmv-section *,
    .skn-vmv-section *::before,
    .skn-vmv-section *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================
   SKN ELECTRONICS - PCBA MANUFACTURING PAGE
   Complete Responsive CSS
   Bootstrap 5 Compatible
========================================================== */

/* ================= BRAND COLORS ================= */

.skn-pcba-section {

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    background:
        radial-gradient(ellipse at 5% 10%,
            rgba(50, 214, 232, 0.12),
            transparent 30%),
        radial-gradient(ellipse at 95% 55%,
            rgba(8, 120, 207, 0.09),
            transparent 35%),
        var(--skn-ice);
    color: var(--skn-text);
    font-size: 16px;
    line-height: 1.7;
}

.skn-pcba-section *,
.skn-pcba-section *::before,
.skn-pcba-section *::after {
    box-sizing: border-box;
}

.skn-pcba-section .container {
    position: relative;
    z-index: 2;
}

.skn-pcba-section img {
    max-width: 100%;
}

.skn-pcba-section a {
    text-decoration: none;
}

/* ================= BACKGROUND PATTERN ================= */

.skn-pcba-pattern {
    position: absolute;
    z-index: -2;
    top: -250px;
    right: -250px;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(50, 214, 232, 0.25);
    border-radius: 50%;
    pointer-events: none;
    animation: sknPcbaRotate 38s linear infinite;
}

.skn-pcba-pattern::before,
.skn-pcba-pattern::after {
    position: absolute;
    content: "";
    border: 1px dashed rgba(8, 120, 207, 0.22);
    border-radius: 50%;
}

.skn-pcba-pattern::before {
    inset: 45px;
    box-shadow: 0 0 35px rgba(50, 214, 232, 0.13);
}

.skn-pcba-pattern::after {
    inset: 100px;
    border-style: dotted;
    box-shadow: inset 0 0 35px rgba(50, 214, 232, 0.08);
}

@keyframes sknPcbaRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ================= MOVING LIGHT EFFECT ================= */

.skn-pcba-glow {
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    background: rgba(53, 166, 255, 0.15);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: sknPcbaGlow 9s ease-in-out infinite alternate;
}

.skn-pcba-glow-one {
    top: 20%;
    left: -100px;
}

.skn-pcba-glow-two {
    right: -100px;
    bottom: 15%;
    background: rgba(50, 214, 232, 0.15);
    animation-delay: -4s;
}

@keyframes sknPcbaGlow {
    from {
        transform: translate(0, 0) scale(0.85);
        opacity: 0.45;
    }

    to {
        transform: translate(55px, 35px) scale(1.2);
        opacity: 1;
    }
}

/* ================= PAGE HEADING ================= */

.skn-pcba-heading {
    max-width: 950px;
    margin: 0 auto 65px;
    text-align: center;
}

.skn-pcba-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--reach-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
    line-height: 1.6;
    text-transform: uppercase;
}

.skn-pcba-heading h1 {
    margin: 0 0 20px;
    color: var(--skn-navy);
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 800;
    line-height: 1.2;
}

.skn-pcba-heading h1 span {
    display: inline;
    color: var(--reach-blue);
}

.skn-pcba-heading>p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--skn-muted);
    font-size: 17px;
    line-height: 1.8;
}

.skn-pcba-heading-line {
    width: 75px;
    height: 4px;
    margin: 25px auto 0;
    background: linear-gradient(90deg,
            var(--reach-blue),
            var(--skn-cyan));
    border-radius: 5px;
}

/* ================= INTRODUCTION IMAGE ================= */

.skn-pcba-main-image {
    position: relative;
    height: 475px;
    overflow: hidden;
    background: #dce8f2;
    border: 6px solid var(--skn-white);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(7, 27, 49, 0.12);
}

.skn-pcba-main-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg,
            transparent 45%,
            rgba(7, 24, 39, 0.72));
    pointer-events: none;
}

.skn-pcba-main-image>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.6s ease;
}

.skn-pcba-main-image:hover>img {
    transform: scale(1.09);
    filter: saturate(1.12) contrast(1.03);
}

.skn-pcba-image-label {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 20px;
    color: var(--reach-white);
    background: rgba(7, 24, 39, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.skn-pcba-image-label strong,
.skn-pcba-image-label small {
    display: block;
}

.skn-pcba-image-label strong {
    color: var(--reach-white);
    font-size: 17px;
    font-weight: 800;
}

.skn-pcba-image-label small {
    margin-top: 4px;
    color: var(--reach-text);
    font-size: 14px;
}

.skn-pcba-status-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: var(--skn-cyan);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--skn-cyan);
    animation: sknPcbaPulse 2s ease-in-out infinite;
}

@keyframes sknPcbaPulse {
    50% {
        box-shadow:
            0 0 8px var(--skn-cyan),
            0 0 25px var(--skn-cyan);
    }
}

.skn-pcba-image-corner {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-top: 4px solid var(--skn-cyan);
    border-right: 4px solid var(--skn-cyan);
    border-radius: 0 14px 0 0;
    pointer-events: none;
}

/* ================= INTRODUCTION CONTENT ================= */

.skn-pcba-intro-content {
    padding: 10px 0;
}

.skn-pcba-subtitle {
    display: block;
    margin-bottom: 13px;
    color: var(--reach-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.7;
}

.skn-pcba-intro-content h2,
.skn-pcba-quote-intro h2 {
    margin: 0 0 22px;
    color: var(--skn-navy);
    font-size: clamp(27px, 3vw, 35px);
    font-weight: 800;
    line-height: 1.3;
}

.skn-pcba-intro-content h2 span,
.skn-pcba-quote-intro h2 span {
    color: var(--reach-blue);
}

.skn-pcba-intro-content p,
.skn-pcba-quote-intro>p {
    margin: 0 0 17px;
    color: var(--skn-muted);
    font-size: 15.5px;
    line-height: 1.9;
}

/* ================= BUTTONS ================= */

.skn-pcba-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 12px;
    padding: 15px 23px;
    color: var(--reach-white);
    background: var(--reach-blue);
    border: 1px solid var(--reach-blue);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.skn-pcba-btn span {
    display: inline-block;
    font-size: 21px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.skn-pcba-btn:hover {
    color: var(--reach-navy);
    background: var(--skn-cyan);
    border-color: var(--skn-cyan);
    box-shadow: 0 10px 25px rgba(50, 214, 232, 0.25);
    transform: translateY(-3px);
}

.skn-pcba-btn:hover span {
    transform: translateX(5px);
}

.skn-pcba-btn:focus-visible {
    outline: 3px solid var(--reach-blue-light);
    outline-offset: 4px;
}

/* ================= SERVICES SECTION ================= */

.skn-pcba-services-section {
    margin-top: 105px;
}

.skn-pcba-section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.skn-pcba-section-heading h2 {
    margin: 0 0 14px;
    color: var(--skn-navy);
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.25;
}

.skn-pcba-section-heading h2 span {
    color: var(--reach-blue);
}

.skn-pcba-section-heading>p {
    margin: 0;
    color: var(--skn-muted);
    font-size: 16px;
    line-height: 1.8;
}

/* ================= SERVICE CARDS ================= */

.skn-pcba-service-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: var(--skn-white);
    border: 1px solid #dce8f2;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(7, 27, 49, 0.045);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.skn-pcba-service-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg,
            var(--reach-blue),
            var(--skn-cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.skn-pcba-service-card:hover {
    transform: translateY(-9px);
    border-color: var(--skn-cyan);
    box-shadow: 0 23px 45px rgba(7, 76, 128, 0.13);
}

.skn-pcba-service-card:hover::after {
    transform: scaleX(1);
}

/* Service image */

.skn-pcba-service-image {
    position: relative;
    height: 225px;
    overflow: hidden;
    background: #dce8f2;
}

.skn-pcba-service-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg,
            transparent 45%,
            rgba(7, 24, 39, 0.5));
    pointer-events: none;
}

.skn-pcba-service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}

.skn-pcba-service-card:hover .skn-pcba-service-image img {
    transform: scale(1.1);
    filter: saturate(1.15);
}

.skn-pcba-service-number {
    position: absolute;
    z-index: 1;
    right: 15px;
    bottom: 15px;
    color: var(--reach-white);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    opacity: 0.95;
}

/* Service content */

.skn-pcba-service-body {
    position: relative;
    padding: 28px 23px 30px;
}

.skn-pcba-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: -49px;
    margin-bottom: 18px;
    color: var(--reach-white);
    background: var(--skn-blue);
    border: 4px solid var(--skn-white);
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 5px 16px rgba(7, 27, 49, 0.12);
    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.skn-pcba-service-card:hover .skn-pcba-card-icon {
    color: var(--reach-white);
    background: var(--reach-blue);
    transform: rotate(-8deg) scale(1.08);
}

.skn-pcba-service-body h3 {
    margin: 0 0 13px;
    color: var(--skn-navy);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.45;
}

.skn-pcba-service-body p {
    margin: 0;
    color: var(--skn-muted);
    font-size: 15px;
    line-height: 1.85;
}

/* ================= QUOTATION SECTION ================= */

.skn-pcba-quote-section {
    position: relative;
    margin-top: 105px;
    padding: 55px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid #dce8f2;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(7, 27, 49, 0.045);
}

.skn-pcba-quote-intro h2 {
    margin-bottom: 17px;
}

.skn-pcba-quote-intro>p {
    margin-bottom: 20px;
}

/* Quote image */

.skn-pcba-quote-image {
    height: 230px;
    margin-top: 25px;
    overflow: hidden;
    background: #dce8f2;
    border-radius: 13px;
}

.skn-pcba-quote-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.7s ease,
        filter 0.5s ease;
}

.skn-pcba-quote-image:hover img {
    transform: scale(1.08);
    filter: saturate(1.1);
}

/* Quote note */

.skn-pcba-quote-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 20px;
    padding: 18px;
    background: #eaf6fd;
    border-left: 3px solid var(--skn-cyan);
    border-radius: 8px;
}

.skn-pcba-note-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: var(--reach-white);
    background: var(--reach-blue);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.skn-pcba-quote-note p {
    margin: 0;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.8;
}

/* ================= QUOTATION CHECKLIST ================= */

.skn-pcba-checklist {
    padding: 5px 0;
}

.skn-pcba-check-item {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 21px 0;
    border-bottom: 1px solid #dce8f2;
    transition: padding-left 0.3s ease;
}

.skn-pcba-check-item:first-child {
    padding-top: 0;
}

.skn-pcba-check-item:last-child {
    border-bottom: 0;
}

.skn-pcba-check-item:hover {
    padding-left: 7px;
}

.skn-pcba-check-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: var(--reach-white);
    background: var(--reach-blue);
    border: 1px solid var(--reach-blue);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.skn-pcba-check-item:hover .skn-pcba-check-icon {
    color: var(--reach-navy);
    background: var(--skn-cyan);
    border-color: var(--skn-cyan);
    transform: scale(1.08);
}

.skn-pcba-check-item h3 {
    margin: 0 0 6px;
    color: var(--skn-navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}

.skn-pcba-check-item p {
    margin: 0;
    color: var(--skn-muted);
    font-size: 15px;
    line-height: 1.8;
}

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

.skn-pcba-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 65px;
    padding: 45px 50px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%,
            rgba(53, 166, 255, 0.16),
            transparent 35%),
        var(--reach-navy);
    border: 1px solid rgba(50, 214, 232, 0.25);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(7, 27, 49, 0.13);
}

.skn-pcba-cta-pattern {
    position: absolute;
    top: -100px;
    right: -70px;
    width: 270px;
    height: 270px;
    border: 1px dashed rgba(50, 214, 232, 0.3);
    border-radius: 50%;
    box-shadow: 0 0 45px rgba(50, 214, 232, 0.08);
    pointer-events: none;
    animation: sknPcbaRotate 28s linear infinite;
}

.skn-pcba-cta-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.skn-pcba-cta .skn-pcba-eyebrow {
    color: var(--skn-cyan);
}

.skn-pcba-cta h2 {
    margin: 0 0 14px;
    color: var(--reach-white);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.35;
}

.skn-pcba-cta p {
    margin: 0;
    color: var(--reach-text);
    font-size: 15px;
    line-height: 1.9;
}

.skn-pcba-btn-light {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    color: var(--reach-navy);
    background: var(--skn-cyan);
    border-color: var(--skn-cyan);
}

.skn-pcba-btn-light:hover {
    color: var(--reach-white);
    background: var(--reach-blue);
    border-color: var(--reach-blue-light);
}

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

@media (max-width: 1199.98px) {
    .skn-pcba-service-image {
        height: 210px;
    }

    .skn-pcba-service-body {
        padding-right: 20px;
        padding-left: 20px;
    }

    .skn-pcba-service-body h3 {
        font-size: 19px;
    }
}

@media (max-width: 991.98px) {
    .skn-pcba-section {
        padding: 65px 0;
    }

    .skn-pcba-heading {
        margin-bottom: 45px;
    }

    .skn-pcba-main-image {
        height: 390px;
    }

    .skn-pcba-services-section,
    .skn-pcba-quote-section {
        margin-top: 75px;
    }

    .skn-pcba-quote-section {
        padding: 35px;
    }

    .skn-pcba-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 35px;
    }

    .skn-pcba-cta-content {
        max-width: 100%;
    }
}

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

@media (max-width: 767.98px) {
    .skn-pcba-heading h1 {
        font-size: 34px;
    }

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

    .skn-pcba-intro-content {
        padding-top: 5px;
    }

    .skn-pcba-services-section {
        margin-top: 60px;
    }

    .skn-pcba-section-heading {
        margin-bottom: 30px;
    }

    .skn-pcba-section-heading h2 {
        font-size: 32px;
    }

    .skn-pcba-service-image {
        height: 230px;
    }

    .skn-pcba-service-body {
        padding: 27px 22px 28px;
    }

    .skn-pcba-quote-section {
        margin-top: 60px;
        padding: 28px 22px;
    }

    .skn-pcba-quote-image {
        height: 220px;
    }

    .skn-pcba-cta {
        gap: 23px;
        margin-top: 45px;
        padding: 30px 25px;
    }
}

@media (max-width: 575.98px) {
    .skn-pcba-section {
        padding: 50px 0;
    }

    .skn-pcba-heading {
        margin-bottom: 35px;
    }

    .skn-pcba-heading h1 {
        font-size: 29px;
        line-height: 1.3;
    }

    .skn-pcba-heading>p {
        font-size: 15px;
        line-height: 1.8;
    }

    .skn-pcba-eyebrow {
        font-size: 12px;
        letter-spacing: 1.8px;
    }

    .skn-pcba-main-image {
        height: 300px;
        border-width: 4px;
        border-radius: 15px;
    }

    .skn-pcba-image-label {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 13px;
    }

    .skn-pcba-intro-content h2,
    .skn-pcba-quote-intro h2 {
        font-size: 27px;
    }

    .skn-pcba-intro-content p,
    .skn-pcba-quote-intro>p {
        font-size: 15px;
    }

    .skn-pcba-btn {
        width: 100%;
        gap: 10px;
        padding: 14px 12px;
        font-size: 14px;
    }

    .skn-pcba-section-heading h2 {
        font-size: 28px;
    }

    .skn-pcba-section-heading>p {
        font-size: 15px;
    }

    .skn-pcba-service-image {
        height: 205px;
    }

    .skn-pcba-service-body h3 {
        font-size: 19px;
    }

    .skn-pcba-quote-section {
        padding: 24px 17px;
        border-radius: 14px;
    }

    .skn-pcba-quote-image {
        height: 190px;
    }

    .skn-pcba-check-item {
        gap: 12px;
        padding: 18px 0;
    }

    .skn-pcba-check-item h3 {
        font-size: 16px;
    }

    .skn-pcba-check-item p {
        font-size: 14px;
    }

    .skn-pcba-cta {
        gap: 20px;
        margin-top: 45px;
        padding: 27px 20px;
        border-radius: 14px;
    }

    .skn-pcba-cta h2 {
        font-size: 26px;
    }

    .skn-pcba-cta p {
        font-size: 14px;
    }

    .skn-pcba-pattern {
        right: -480px;
    }
}

/* ================= ACCESSIBILITY ================= */

@media (prefers-reduced-motion: reduce) {

    .skn-pcba-section *,
    .skn-pcba-section *::before,
    .skn-pcba-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

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

.smt-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    color: var(--skn-text);
    background:
        radial-gradient(ellipse at 8% 8%,
            rgba(50, 214, 232, 0.12),
            transparent 36%),
        radial-gradient(ellipse at 95% 52%,
            rgba(11, 76, 128, 0.09),
            transparent 34%),
        linear-gradient(145deg,
            #ffffff 0%,
            var(--skn-ice) 52%,
            #ffffff 100%);
    font-family: inherit;
}

.smt-section *,
.smt-section *::before,
.smt-section *::after {
    box-sizing: border-box;
}

.smt-container {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* =========================================================
   ANIMATED CIRCUIT BACKGROUND
========================================================= */

.smt-circuit-pattern {
    position: absolute;
    inset: -150px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;

    background-image:
        radial-gradient(circle,
            rgba(50, 214, 232, 0.45) 1.5px,
            transparent 2px),
        linear-gradient(90deg,
            transparent 49.8%,
            rgba(11, 76, 128, 0.07) 50%,
            transparent 50.2%),
        linear-gradient(0deg,
            transparent 49.8%,
            rgba(11, 76, 128, 0.07) 50%,
            transparent 50.2%);

    background-size:
        36px 36px,
        72px 72px,
        72px 72px;

    animation:
        smtCircuitMove 32s linear infinite,
        smtCircuitRotate 90s linear infinite;
}

.smt-glow {
    position: absolute;
    z-index: -1;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    filter: blur(75px);
    pointer-events: none;

    animation: smtGlowPulse 8s ease-in-out infinite alternate;
}

.smt-glow-one {
    top: 10%;
    left: -180px;
    background: rgba(50, 214, 232, 0.18);
}

.smt-glow-two {
    right: -180px;
    bottom: 5%;
    background: rgba(11, 76, 128, 0.14);
    animation-delay: -4s;
}

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

.smt-heading {
    max-width: 1250px;
    margin: 0 auto 62px;
    text-align: center;
    animation: smtFadeUp 0.8s ease both;
}

.smt-eyebrow,
.smt-small-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.smt-eyebrow {
    margin-bottom: 22px;
    padding: 10px 17px;
    border: 1px solid rgba(11, 76, 128, 0.16);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 5px 20px rgba(7, 27, 49, 0.05);
}

.smt-eyebrow-dot,
.smt-live-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--skn-cyan);
    box-shadow: 0 0 0 4px rgba(50, 214, 232, 0.13);
    animation: smtDotPulse 2s infinite;
}

.smt-heading h2 {
    margin: 0 0 23px;
    color: var(--skn-navy);
    font-size: clamp(30px, 4vw, 49px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.3px;
}

.smt-heading h2 span {
    display: block;
    color: var(--skn-blue);
}

.smt-intro {
    max-width: 1200px;
    margin: 0 auto;
    color: var(--skn-muted);
    font-size: 16px;
    line-height: 1.9;
}

/* =========================================================
   FEATURE GRID
========================================================= */

.smt-feature-grid {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    gap: 65px;
    align-items: center;
    margin-bottom: 50px;
}

.smt-image-wrap {
    min-width: 0;
    animation: smtFadeLeft 0.9s ease both;
}

.smt-image-frame {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    aspect-ratio: 1.12 / 1;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    background: #dce9f2;
    box-shadow: 0 25px 65px rgba(7, 27, 49, 0.16);
}

.smt-image-frame img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.6s ease;
}

.smt-image-frame:hover img {
    transform: scale(1.09);
    filter: saturate(1.13) contrast(1.04);
}

.smt-image-frame::after {
    position: absolute;
    inset: 0;
    content: "";
    border: 1px solid rgba(50, 214, 232, 0.3);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color 0.4s ease;
}

.smt-image-frame:hover::after {
    border-color: rgba(50, 214, 232, 0.9);
}

.smt-image-overlay {
    position: absolute;
    z-index: 1;
    inset: 35% 0 0;
    background: linear-gradient(to bottom,
            transparent,
            rgba(7, 27, 49, 0.85));
    pointer-events: none;
}

.smt-image-label {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 22px;
    left: 22px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 17px 19px;
    color: var(--skn-white);
    background: rgba(7, 27, 49, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 13px;
    backdrop-filter: blur(12px);
}

.smt-image-label strong,
.smt-image-label small {
    display: block;
}

.smt-image-label strong {
    margin-bottom: 4px;
    color: var(--skn-white);
    font-size: 16px;
}

.smt-image-label small {
    color: #d3e7f7;
    font-size: 12px;
}

.smt-corner {
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-color: var(--skn-cyan);
    border-style: solid;
    pointer-events: none;
}

.smt-corner-tl {
    top: 15px;
    left: 15px;
    border-width: 2px 0 0 2px;
    border-radius: 7px 0 0;
}

.smt-corner-br {
    right: 15px;
    bottom: 15px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 7px;
}

.smt-image-caption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 19px;
    color: var(--skn-muted);
    font-size: 13px;
    font-weight: 600;
}

.smt-caption-line {
    width: 34px;
    height: 2px;
    flex-shrink: 0;
    background: var(--skn-cyan);
}

/* =========================================================
   FEATURE CONTENT
========================================================= */

.smt-feature-content {
    animation: smtFadeRight 0.9s ease both;
}

.smt-feature-content h3,
.smt-process-heading h3,
.smt-applications h3 {
    margin: 17px 0;
    color: var(--skn-navy);
    font-size: clamp(27px, 3vw, 37px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.7px;
}

.smt-feature-content h3 span {
    display: block;
    color: var(--skn-blue);
}

.smt-feature-content>p {
    color: var(--skn-muted);
    font-size: 15px;
    line-height: 1.85;
}

/* =========================================================
   BENEFIT LIST
========================================================= */

.smt-benefit-list {
    display: grid;
    gap: 23px;
    margin: 28px 0 32px;
}

.smt-benefit {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 14px;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.smt-benefit:hover {
    transform: translateX(7px);
    background: rgba(255, 255, 255, 0.9);
    border-color: #dce7f0;
    box-shadow: 0 10px 25px rgba(7, 27, 49, 0.07);
}

.smt-benefit-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    border-radius: 12px;
    color: var(--skn-navy);
    background: var(--skn-cyan);
    box-shadow: 0 5px 15px rgba(50, 214, 232, 0.2);
}

.smt-benefit h4 {
    margin: 1px 0 7px;
    color: var(--skn-navy);
    font-size: 16px;
    font-weight: 750;
}

.smt-benefit p {
    margin: 0;
    color: var(--skn-muted);
    font-size: 13px;
    line-height: 1.8;
}

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

.smt-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    padding: 15px 23px;
    border: 1px solid transparent;
    border-radius: 8px;

    color: var(--skn-white);
    background: linear-gradient(110deg,
            var(--skn-navy),
            var(--skn-blue));

    box-shadow: 0 8px 20px rgba(7, 27, 49, 0.17);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.smt-cta span {
    font-size: 21px;
    transition: transform 0.3s ease;
}

.smt-cta:hover,
.smt-cta:focus-visible {
    color: var(--skn-navy);
    background: var(--skn-cyan);
    transform: translateY(-3px);
    box-shadow: 0 13px 28px rgba(7, 27, 49, 0.2);
}

.smt-cta:hover span {
    transform: translateX(5px);
}

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

.smt-process-heading {
    max-width: 700px;
    margin: 0 auto 45px;
    text-align: center;
    scroll-margin-top: 35px;
}

.smt-process-heading h3 {
    margin: 13px 0;
}

.smt-process-heading>p {
    margin: 0;
    color: var(--skn-muted);
    font-size: 15px;
    line-height: 1.85;
}

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

.smt-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.smt-process-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px;
    overflow: hidden;

    border: 1px solid #dce7f0;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 28px rgba(7, 27, 49, 0.045);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

    animation: smtFadeUp 0.7s ease both;
}

.smt-process-card:hover {
    z-index: 2;
    transform: translateY(-9px);
    border-color: var(--skn-cyan);
    box-shadow: 0 20px 45px rgba(7, 27, 49, 0.13);
}

.smt-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.smt-step-number {
    color: var(--skn-blue);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 1.5px;
}

.smt-step-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border: 1px solid #d8e8f1;
    border-radius: 12px;
    color: var(--skn-blue);
    background: var(--skn-ice);
    font-size: 21px;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease;
}

.smt-process-card:hover .smt-step-icon {
    transform: rotate(12deg) scale(1.1);
    color: var(--skn-navy);
    background: var(--skn-cyan);
}

/* =========================================================
   PROCESS CARD IMAGES
========================================================= */

.smt-process-image {
    position: relative;
    height: 155px;
    margin-bottom: 19px;
    overflow: hidden;
    border-radius: 11px;
    background: #e2edf5;
}

.smt-process-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.4s ease;
}

.smt-process-image::after {
    position: absolute;
    inset: 0;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: inherit;
    pointer-events: none;
}

.smt-process-card:hover .smt-process-image img {
    transform: scale(1.12);
    filter: saturate(1.15) contrast(1.03);
}

/* =========================================================
   PROCESS CARD TEXT
========================================================= */

.smt-process-card h4 {
    margin: 0 0 11px;
    color: var(--skn-navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}

.smt-process-card p {
    margin: 0 0 20px;
    color: var(--skn-muted);
    font-size: 15px;
    line-height: 1.8;
}

.smt-step-bottom {
    width: 32px;
    height: 3px;
    margin-top: auto;
    border-radius: 10px;
    background: linear-gradient(90deg,
            var(--skn-blue),
            var(--skn-cyan));
    transition: width 0.4s ease;
}

.smt-process-card:hover .smt-step-bottom {
    width: 75px;
}

/* Staggered animation */

.smt-process-card:nth-child(2) {
    animation-delay: 0.08s;
}

.smt-process-card:nth-child(3) {
    animation-delay: 0.16s;
}

.smt-process-card:nth-child(4) {
    animation-delay: 0.24s;
}

.smt-process-card:nth-child(5) {
    animation-delay: 0.32s;
}

.smt-process-card:nth-child(6) {
    animation-delay: 0.40s;
}

.smt-process-card:nth-child(7) {
    animation-delay: 0.48s;
}

/* =========================================================
   APPLICATIONS SECTION
========================================================= */

.smt-applications {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 35px;

    margin-top: 75px;
    padding: 35px;

    border: 1px solid #dce7f0;
    border-radius: 22px;

    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.97),
            rgba(242, 247, 251, 0.95));

    box-shadow: 0 15px 45px rgba(7, 27, 49, 0.06);
}

.smt-applications h3 {
    margin: 13px 0;
    font-size: 28px;
}

.smt-applications-content>p {
    margin: 0;
    color: var(--skn-muted);
    font-size: 14px;
    line-height: 1.85;
}

.smt-application-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
}

.smt-application-tags span {
    display: inline-flex;
    align-items: center;

    padding: 11px 15px;
    border: 1px solid #d5e7f3;
    border-radius: 50px;

    color: var(--skn-blue);
    background: var(--skn-white);

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.3s ease,
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.smt-application-tags span:hover {
    transform: translateY(-4px);
    color: var(--skn-navy);
    border-color: var(--skn-cyan);
    background: var(--skn-cyan);
    box-shadow: 0 8px 20px rgba(50, 214, 232, 0.18);
}

/* =========================================================
   ANIMATION KEYFRAMES
========================================================= */

@keyframes smtFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes smtFadeLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes smtFadeRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

@keyframes smtCircuitMove {
    from {
        background-position:
            0 0,
            0 0,
            0 0;
    }

    to {
        background-position:
            180px 180px,
            72px 72px,
            72px 72px;
    }
}

@keyframes smtCircuitRotate {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes smtGlowPulse {
    from {
        opacity: 0.55;
        scale: 0.9;
    }

    to {
        opacity: 1;
        scale: 1.12;
    }
}

@keyframes smtDotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(50, 214, 232, 0.13);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(50, 214, 232, 0.04);
    }
}

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

@media (max-width: 1000px) {
    .smt-section {
        padding: 75px 0;
    }

    .smt-feature-grid {
        gap: 35px;
    }

    .smt-image-frame {
        min-height: 340px;
    }

    .smt-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .smt-applications {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

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

@media (max-width: 600px) {
    .smt-section {
        padding: 58px 0;
    }

    .smt-container {
        width: calc(100% - 30px);
    }

    .smt-heading {
        margin-bottom: 40px;
    }

    .smt-eyebrow,
    .smt-small-label {
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .smt-heading h2 {
        font-size: 31px;
        letter-spacing: -0.7px;
    }

    .smt-intro {
        font-size: 14px;
        line-height: 1.85;
    }

    .smt-feature-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 70px;
    }

    .smt-image-frame {
        min-height: 280px;
        aspect-ratio: 1.1 / 1;
        border-radius: 18px;
    }

    .smt-image-label {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 13px;
    }

    .smt-image-label strong {
        font-size: 14px;
    }

    .smt-image-label small {
        font-size: 11px;
    }

    .smt-feature-content h3 {
        font-size: 29px;
    }

    .smt-benefit-list {
        gap: 13px;
    }

    .smt-benefit {
        padding: 12px;
    }

    .smt-benefit:hover {
        transform: translateY(-3px);
    }

    .smt-process-heading {
        margin-bottom: 30px;
    }

    .smt-process-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .smt-process-card {
        padding: 16px;
    }

    .smt-process-image {
        height: 205px;
    }

    .smt-applications {
        margin-top: 50px;
        padding: 23px 18px;
    }

    .smt-applications h3 {
        font-size: 25px;
    }

    .smt-application-tags {
        gap: 9px;
    }

    .smt-application-tags span {
        padding: 10px 12px;
        font-size: 11px;
    }

    .smt-glow {
        width: 220px;
        height: 220px;
        filter: blur(60px);
    }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .smt-section *,
    .smt-section *::before,
    .smt-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   SKN THROUGH HOLE ASSEMBLY
========================================== */

.skn-th-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0 50px;
    background:
        radial-gradient(ellipse at 8% 12%,
            rgba(50, 214, 232, 0.12),
            transparent 32%),
        radial-gradient(ellipse at 95% 42%,
            rgba(11, 76, 128, 0.10),
            transparent 35%),
        linear-gradient(140deg, #f8fbfe 0%, var(--skn-ice) 55%, #eaf5fa 100%);
    color: var(--skn-text);
    font-family: inherit;
}

.skn-th-section *,
.skn-th-section *::before,
.skn-th-section *::after {
    box-sizing: border-box;
}

.skn-th-container {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* Animated technical background grid */

.skn-th-bg-pattern {
    position: absolute;
    z-index: -1;
    inset: -50%;
    pointer-events: none;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(11, 76, 128, 0.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 76, 128, 0.065) 1px, transparent 1px);
    background-size: 46px 46px;
    transform-origin: center;
    animation: skn-th-grid-rotate 100s linear infinite;
}

.skn-th-orb {
    position: absolute;
    z-index: -1;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(50, 214, 232, 0.3);
    border-radius: 50%;
    pointer-events: none;
    animation: skn-th-orbit 18s ease-in-out infinite alternate;
}

.skn-th-orb::before,
.skn-th-orb::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(11, 76, 128, 0.14);
    border-radius: 50%;
    inset: 25px;
}

.skn-th-orb::after {
    inset: 55px;
    border-color: rgba(50, 214, 232, 0.22);
}

.skn-th-orb-one {
    top: 7%;
    right: -170px;
}

.skn-th-orb-two {
    left: -210px;
    bottom: 18%;
    width: 380px;
    height: 380px;
    animation-delay: -6s;
}

@keyframes skn-th-grid-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes skn-th-orbit {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    to {
        transform: translate3d(-25px, 20px, 0) rotate(30deg);
    }
}

/* Heading */

.skn-th-heading {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

.skn-th-eyebrow,
.skn-th-small-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.skn-th-eyebrow {
    padding: 10px 17px;
    border: 1px solid rgba(11, 76, 128, 0.12);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 5px 20px rgba(7, 27, 49, 0.04);
}

.skn-th-pulse {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--skn-cyan);
    box-shadow: 0 0 0 5px rgba(50, 214, 232, 0.13);
    animation: skn-th-pulse 2s ease-in-out infinite;
}

@keyframes skn-th-pulse {
    50% {
        box-shadow: 0 0 0 9px rgba(50, 214, 232, 0.02);
    }
}

.skn-th-heading h2 {
    margin: 24px 0 18px;
    color: var(--skn-navy);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.skn-th-heading h2 span,
.skn-th-content h3 span,
.skn-th-process-heading h3 span {
    color: var(--skn-blue);
}

.skn-th-heading>p {
    max-width: 690px;
    margin: 0 auto;
    color: var(--skn-muted);
    font-size: 16px;
    line-height: 1.9;
}

/* Main two-column layout */

.skn-th-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
    margin-bottom: 50px;
}

/* Main image */

.skn-th-visual {
    position: relative;
    min-width: 0;
    padding: 0 16px 22px 0;
}

.skn-th-image-frame {
    position: relative;
    height: 470px;
    overflow: hidden;
    isolation: isolate;
    border: 7px solid rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    background: #d9e8f0;
    box-shadow:
        0 30px 70px rgba(7, 27, 49, 0.15),
        0 5px 15px rgba(11, 76, 128, 0.08);
}

.skn-th-image-frame>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.7s ease;
}

.skn-th-image-frame:hover>img {
    transform: scale(1.09) rotate(1deg);
    filter: saturate(1.12);
}

.skn-th-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(7, 27, 49, 0.02) 30%,
            rgba(7, 27, 49, 0.82) 100%);
    pointer-events: none;
}

.skn-th-image-label {
    position: absolute;
    right: 18px;
    bottom: 20px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 15px;
    background: rgba(7, 27, 49, 0.48);
    color: var(--skn-white);
    backdrop-filter: blur(12px);
}

.skn-th-label-icon {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    place-items: center;
    border-radius: 12px;
    background: var(--skn-cyan);
    color: var(--skn-navy);
    font-size: 22px;
}

.skn-th-image-label strong,
.skn-th-image-label small {
    display: block;
}

.skn-th-image-label strong {
    margin-bottom: 5px;
    font-size: 16px;
}

.skn-th-image-label small {
    color: #dcecf5;
    font-size: 12px;
}

.skn-th-image-ring {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(50, 214, 232, 0.85);
    border-radius: 50%;
    pointer-events: none;
    animation: skn-th-ring-spin 12s linear infinite;
}

.skn-th-image-ring::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 28px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--skn-cyan);
    box-shadow: 0 0 15px var(--skn-cyan);
}

@keyframes skn-th-ring-spin {
    to {
        transform: rotate(360deg);
    }
}

.skn-th-floating-card {
    position: absolute;
    z-index: 3;
    right: -15px;
    top: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 19px;
    border: 1px solid rgba(11, 76, 128, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 15px 40px rgba(7, 27, 49, 0.12);
    animation: skn-th-float 4s ease-in-out infinite;
}

.skn-th-floating-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #e2fbfd;
    color: var(--skn-blue);
    font-size: 20px;
    font-weight: 800;
}

.skn-th-floating-card strong,
.skn-th-floating-card small {
    display: block;
}

.skn-th-floating-card strong {
    color: var(--skn-navy);
    font-size: 13px;
}

.skn-th-floating-card small {
    margin-top: 4px;
    color: var(--skn-muted);
    font-size: 11px;
}

@keyframes skn-th-float {

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

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

.skn-th-image-dots {
    position: absolute;
    z-index: -1;
    right: -10px;
    bottom: 0;
    width: 110px;
    height: 100px;
    background-image: radial-gradient(var(--skn-cyan) 2px, transparent 2px);
    background-size: 13px 13px;
    opacity: 0.7;
}

/* Main text */

.skn-th-content {
    min-width: 0;
}

.skn-th-small-title {
    margin-bottom: 15px;
}

.skn-th-content h3 {
    margin: 0 0 22px;
    color: var(--skn-navy);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.8px;
}

.skn-th-content h3 span {
    display: block;
}

.skn-th-content>p {
    margin: 0 0 17px;
    color: var(--skn-muted);
    font-size: 15px;
    line-height: 1.95;
}

.skn-th-benefits {
    display: grid;
    gap: 14px;
    margin: 27px 0 30px;
}

.skn-th-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--skn-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}

.skn-th-check {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    place-items: center;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(50, 214, 232, 0.2);
    color: var(--skn-blue);
    font-size: 13px;
    font-weight: 900;
}

.skn-th-button {
    display: inline-flex;
    align-items: center;
    gap: 23px;
    padding: 15px 22px;
    border: 1px solid var(--skn-blue);
    border-radius: 8px;
    background: var(--skn-blue);
    color: var(--skn-white);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(11, 76, 128, 0.15);
    transition: background 0.3s ease, color 0.3s ease,
        transform 0.3s ease, box-shadow 0.3s ease;
}

.skn-th-button:hover {
    transform: translateY(-3px);
    background: var(--skn-navy);
    color: var(--skn-white);
    box-shadow: 0 13px 28px rgba(7, 27, 49, 0.2);
}

.skn-th-button-arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.skn-th-button:hover .skn-th-button-arrow {
    transform: translateX(5px);
}

/* Process cards */

.skn-th-process {
    scroll-margin-top: 35px;
}

.skn-th-process-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 35px;
    margin-bottom: 35px;
}

.skn-th-process-heading h3 {
    margin: 8px 0 0;
    color: var(--skn-navy);
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.2;
    font-weight: 800;
}

.skn-th-process-heading>p {
    max-width: 390px;
    margin: 0 0 3px;
    color: var(--skn-muted);
    font-size: 14px;
    line-height: 1.8;
}

.skn-th-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.skn-th-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(11, 76, 128, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 25px rgba(7, 27, 49, 0.045);
    transition: transform 0.4s ease, border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.skn-th-card:hover {
    transform: translateY(-9px);
    border-color: rgba(50, 214, 232, 0.7);
    box-shadow: 0 22px 45px rgba(7, 27, 49, 0.12);
}

.skn-th-card-image {
    position: relative;
    height: 205px;
    overflow: hidden;
    background: #dcebf3;
}

.skn-th-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 50%,
            rgba(7, 27, 49, 0.45) 100%);
    pointer-events: none;
}

.skn-th-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}

.skn-th-card:hover .skn-th-card-image img {
    transform: scale(1.12);
    filter: saturate(1.15) contrast(1.04);
}

.skn-th-card-number {
    position: absolute;
    z-index: 1;
    right: 15px;
    bottom: 14px;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    background: rgba(7, 27, 49, 0.8);
    color: var(--skn-cyan);
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(8px);
    transition: background 0.3s ease, color 0.3s ease;
}

.skn-th-card:hover .skn-th-card-number {
    background: var(--skn-cyan);
    color: var(--skn-navy);
}

.skn-th-card-body {
    position: relative;
    padding: 25px 23px 27px;
}

.skn-th-card-icon {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    margin-top: -47px;
    margin-bottom: 19px;
    position: relative;
    z-index: 2;
    border: 4px solid white;
    border-radius: 13px;
    background: var(--skn-blue);
    color: var(--skn-cyan);
    font-size: 23px;
    font-weight: 700;
    box-sizing: content-box;
    transition: transform 0.4s ease, background 0.4s ease;
}

.skn-th-card:hover .skn-th-card-icon {
    transform: translateY(-4px) rotate(-6deg);
    background: var(--skn-navy);
}

.skn-th-card-body h4 {
    margin: 0 0 11px;
    color: var(--skn-navy);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
}

.skn-th-card-body p {
    margin: 0;
    color: var(--skn-muted);
    font-size: 13px;
    line-height: 1.9;
}

/* Bottom CTA banner */

.skn-th-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
    margin-top: 75px;
    padding: 38px 42px;
    border: 1px solid rgba(50, 214, 232, 0.3);
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 20%, rgba(50, 214, 232, 0.16), transparent 32%),
        linear-gradient(120deg, var(--skn-navy), var(--skn-blue));
    box-shadow: 0 20px 50px rgba(7, 27, 49, 0.15);
}

.skn-th-bottom-decoration {
    position: absolute;
    right: 100px;
    top: -115px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(50, 214, 232, 0.3);
    border-radius: 50%;
    pointer-events: none;
    animation: skn-th-ring-spin 35s linear infinite;
}

.skn-th-bottom-decoration::before,
.skn-th-bottom-decoration::after {
    content: "";
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(50, 214, 232, 0.18);
    border-radius: 50%;
}

.skn-th-bottom-decoration::after {
    inset: 48px;
}

.skn-th-bottom-content {
    position: relative;
    z-index: 1;
}

.skn-th-bottom-content>span {
    color: var(--skn-cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.skn-th-bottom-content h3 {
    margin: 12px 0 10px;
    color: var(--skn-white);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.35;
    font-weight: 800;
}

.skn-th-bottom-content p {
    margin: 0;
    color: #d0dfeb;
    font-size: 14px;
    line-height: 1.8;
}

.skn-th-bottom-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 18px;
    padding: 15px 22px;
    border: 1px solid var(--skn-cyan);
    border-radius: 8px;
    background: var(--skn-cyan);
    color: var(--skn-navy);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease,
        box-shadow 0.3s ease;
}

.skn-th-bottom-button:hover {
    transform: translateY(-3px);
    background: var(--skn-white);
    color: var(--skn-navy);
    box-shadow: 0 8px 25px rgba(50, 214, 232, 0.2);
}

.skn-th-bottom-button span {
    font-size: 19px;
}

/* Responsive design */

@media (max-width: 991px) {
    .skn-th-section {
        padding: 75px 0;
    }

    .skn-th-main {
        gap: 45px;
        margin-bottom: 85px;
    }

    .skn-th-image-frame {
        height: 400px;
    }

    .skn-th-floating-card {
        right: -5px;
    }

    .skn-th-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .skn-th-card-image {
        height: 220px;
    }

    .skn-th-process-heading {
        align-items: start;
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 767px) {
    .skn-th-section {
        padding: 60px 0;
    }

    .skn-th-container {
        width: min(100% - 30px, 540px);
    }

    .skn-th-heading {
        margin-bottom: 45px;
    }

    .skn-th-heading h2 {
        font-size: 32px;
        letter-spacing: -0.6px;
    }

    .skn-th-heading>p {
        font-size: 14px;
        line-height: 1.8;
    }

    .skn-th-main {
        grid-template-columns: 1fr;
        gap: 45px;
        margin-bottom: 70px;
    }

    .skn-th-visual {
        padding-right: 8px;
    }

    .skn-th-image-frame {
        height: 360px;
        border-width: 5px;
        border-radius: 19px;
    }

    .skn-th-floating-card {
        top: 25px;
        right: -2px;
        padding: 11px 13px;
    }

    .skn-th-content h3 {
        font-size: 31px;
    }

    .skn-th-content>p {
        font-size: 14px;
    }

    .skn-th-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .skn-th-card-image {
        height: 235px;
    }

    .skn-th-card-body {
        padding: 24px;
    }

    .skn-th-process-heading h3 {
        font-size: 32px;
    }

    .skn-th-bottom {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 50px;
        padding: 30px 25px;
        gap: 22px;
    }

    .skn-th-bottom-content h3 {
        font-size: 25px;
    }
}

@media (max-width: 420px) {
    .skn-th-heading h2 {
        font-size: 28px;
    }

    .skn-th-eyebrow {
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .skn-th-image-frame {
        height: 300px;
    }

    .skn-th-image-label {
        right: 10px;
        bottom: 10px;
        left: 10px;
        padding: 12px;
    }

    .skn-th-floating-card {
        gap: 8px;
    }

    .skn-th-floating-card small {
        font-size: 10px;
    }

    .skn-th-card-image {
        height: 200px;
    }
}

/* Accessibility: disable animations when requested */

@media (prefers-reduced-motion: reduce) {

    .skn-th-section *,
    .skn-th-section *::before,
    .skn-th-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================
   MIXED TECHNOLOGY ASSEMBLY
   SKN BLUE THEME
========================================= */

.skn-mixed-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0 50px;
    background:
        radial-gradient(ellipse at 82% 18%,
            rgba(8, 102, 213, 0.10), transparent 32%),
        radial-gradient(ellipse at 10% 75%,
            rgba(8, 102, 213, 0.08), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, var(--skn-light) 55%, #eaf4ff 100%);
    font-family: inherit;
    color: var(--skn-text);
}

.skn-mixed-section *,
.skn-mixed-section *::before,
.skn-mixed-section *::after {
    box-sizing: border-box;
}

.skn-mixed-container {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* =========================================
   ANIMATED BACKGROUND PATTERN
========================================= */

.skn-mixed-bg-grid {
    position: absolute;
    z-index: -1;
    inset: -50%;
    pointer-events: none;
    opacity: 0.30;
    background-image:
        linear-gradient(rgba(8, 102, 213, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 102, 213, 0.08) 1px, transparent 1px);
    background-size: 42px 42px;
    animation: sknMixedGridRotate 100s linear infinite;
}

@keyframes sknMixedGridRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.skn-mixed-circle {
    position: absolute;
    z-index: -1;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(8, 102, 213, 0.14);
    border-radius: 50%;
    pointer-events: none;
    animation: sknMixedCircleFloat 9s ease-in-out infinite alternate;
}

.skn-mixed-circle::before,
.skn-mixed-circle::after {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(8, 102, 213, 0.12);
    border-radius: 50%;
}

.skn-mixed-circle::after {
    inset: 45px;
    border-color: rgba(8, 102, 213, 0.18);
}

.skn-mixed-circle-one {
    top: -160px;
    right: -100px;
}

.skn-mixed-circle-two {
    left: -190px;
    bottom: -120px;
    width: 350px;
    height: 350px;
    animation-delay: -4s;
}

@keyframes sknMixedCircleFloat {
    from {
        transform: translateY(0) rotate(0deg);
    }

    to {
        transform: translateY(25px) rotate(35deg);
    }
}

.skn-mixed-dots {
    position: absolute;
    z-index: -1;
    width: 115px;
    height: 115px;
    pointer-events: none;
    opacity: 0.45;
    background-image: radial-gradient(var(--skn-blue) 1.7px,
            transparent 1.7px);
    background-size: 17px 17px;
    animation: sknMixedDotsFloat 6s ease-in-out infinite alternate;
}

.skn-mixed-dots-left {
    top: 35px;
    left: 12px;
}

.skn-mixed-dots-right {
    right: 10px;
    bottom: 100px;
    animation-delay: -3s;
}

@keyframes sknMixedDotsFloat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-16px);
    }
}

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

.skn-mixed-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
    margin-bottom: 25px;
}

.skn-mixed-content {
    position: relative;
    z-index: 2;
    animation: sknMixedReveal 0.9s ease both;
}

@keyframes sknMixedReveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

/* Eyebrow */

.skn-mixed-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.skn-mixed-eyebrow>span {
    display: inline-block;
    width: 35px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--skn-blue);
    box-shadow: 0 0 12px rgba(8, 102, 213, 0.35);
}

.skn-mixed-content h1 {
    margin: 0 0 23px;
    color: var(--skn-dark);
    font-size: clamp(34px, 3.5vw, 47px);
    line-height: 1.17;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.skn-mixed-content h1 span {
    display: inline;
    color: var(--skn-blue);
}

.skn-mixed-content>p {
    margin: 0 0 23px;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.9;
}

/* Feature checklist */

.skn-mixed-features {
    display: grid;
    gap: 12px;
    margin: 27px 0 30px;
}

.skn-mixed-feature {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--skn-dark);
    font-size: 14px;
    font-weight: 600;
}

.skn-mixed-feature>span {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    background: rgba(8, 102, 213, 0.10);
    color: var(--skn-blue);
    font-size: 13px;
    font-weight: 900;
    transition: transform 0.3s ease, background 0.3s ease;
}

.skn-mixed-feature:hover>span {
    transform: rotate(360deg);
    background: rgba(8, 102, 213, 0.18);
}

/* Main CTA */

.skn-mixed-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 15px 22px;
    border: 1px solid var(--skn-blue);
    border-radius: 7px;
    background: var(--skn-blue);
    color: var(--skn-white);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(8, 102, 213, 0.18);
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.skn-mixed-button>span {
    font-size: 21px;
    transition: transform 0.3s ease;
}

.skn-mixed-button:hover {
    transform: translateY(-4px);
    background: var(--skn-dark);
    color: var(--skn-white);
    box-shadow: 0 15px 30px rgba(11, 33, 75, 0.20);
}

.skn-mixed-button:hover>span {
    transform: translateX(5px);
}

/* =========================================
   IMAGE AREA AND IMAGE HOVER EFFECT
========================================= */

.skn-mixed-visual {
    position: relative;
    min-width: 0;
    min-height: 455px;
    display: grid;
    place-items: center;
    isolation: isolate;
    animation: sknMixedVisualEnter 1s ease both;
    animation-delay: 0.15s;
}

@keyframes sknMixedVisualEnter {
    from {
        opacity: 0;
        transform: translateX(25px);
    }

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

.skn-mixed-main-image {
    position: relative;
    z-index: 1;
    width: 88%;
    height: 375px;
    overflow: hidden;
    border: 7px solid rgba(255, 255, 255, 0.95);
    border-radius: 28px;
    background: #dcecff;
    box-shadow:
        0 25px 65px rgba(8, 102, 213, 0.18),
        0 0 35px rgba(8, 102, 213, 0.08);
    transform: rotate(-3deg);
    transition:
        transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.5s ease;
}

.skn-mixed-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}

.skn-mixed-main-image:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow:
        0 35px 75px rgba(8, 102, 213, 0.25),
        0 0 40px rgba(8, 102, 213, 0.12);
}

.skn-mixed-main-image:hover img {
    transform: scale(1.12);
    filter: saturate(1.15) contrast(1.04);
}

/* Rotating image rings */

.skn-mixed-image-orbit {
    position: absolute;
    z-index: -1;
    width: 390px;
    height: 390px;
    border: 2px solid rgba(8, 102, 213, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.skn-mixed-orbit-one {
    animation: sknMixedOrbit 24s linear infinite;
}

.skn-mixed-orbit-one::before {
    content: "";
    position: absolute;
    top: 35px;
    left: 55px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--skn-blue);
    box-shadow: 0 0 15px rgba(8, 102, 213, 0.5);
}

.skn-mixed-orbit-two {
    width: 335px;
    height: 335px;
    border-style: dashed;
    border-color: rgba(8, 102, 213, 0.20);
    animation: sknMixedOrbit 35s linear infinite reverse;
}

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

/* Circular inset image */

.skn-mixed-inset-image {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 36px;
    width: 145px;
    height: 145px;
    overflow: hidden;
    border: 6px solid var(--skn-white);
    border-radius: 50%;
    background: #dcecff;
    box-shadow:
        0 15px 35px rgba(8, 102, 213, 0.20),
        0 0 25px rgba(8, 102, 213, 0.10);
    animation: sknMixedInsetFloat 4s ease-in-out infinite;
}

.skn-mixed-inset-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.skn-mixed-inset-image:hover img {
    transform: scale(1.2);
}

@keyframes sknMixedInsetFloat {

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

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

/* Floating SMT/THT badge */

.skn-mixed-floating-badge {
    position: absolute;
    z-index: 4;
    top: 24px;
    right: -5px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    border: 1px solid rgba(8, 102, 213, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 35px rgba(8, 102, 213, 0.14);
    animation: sknMixedBadgeFloat 4s ease-in-out infinite;
}

.skn-mixed-badge-icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 11px;
    background: #e5f1ff;
    color: var(--skn-blue);
    font-size: 23px;
}

.skn-mixed-floating-badge strong,
.skn-mixed-floating-badge small {
    display: block;
}

.skn-mixed-floating-badge strong {
    color: var(--skn-dark);
    font-size: 15px;
    font-weight: 800;
}

.skn-mixed-floating-badge small {
    margin-top: 4px;
    color: var(--skn-text);
    font-size: 11px;
}

@keyframes sknMixedBadgeFloat {

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

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

/* Image label */

.skn-mixed-tech-label {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 17px;
    border: 1px solid rgba(8, 102, 213, 0.10);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--skn-dark);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(8, 102, 213, 0.12);
}

.skn-mixed-tech-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--skn-blue);
    box-shadow: 0 0 0 5px rgba(8, 102, 213, 0.10);
    animation: sknMixedPulse 2s infinite;
}

@keyframes sknMixedPulse {
    50% {
        box-shadow: 0 0 0 9px rgba(8, 102, 213, 0.02);
    }
}

.skn-mixed-image-dots {
    position: absolute;
    z-index: -1;
    right: -5px;
    bottom: 5px;
    width: 90px;
    height: 90px;
    background-image: radial-gradient(var(--skn-blue) 2px,
            transparent 2px);
    background-size: 14px 14px;
    opacity: 0.25;
}

/* =========================================
   REQUIREMENTS SECTION
========================================= */

.skn-mixed-requirements {
    position: relative;
    padding-top: 48px;
    border-top: 1px solid rgba(8, 102, 213, 0.12);
    scroll-margin-top: 30px;
}

.skn-mixed-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 17px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-align: center;
}

.skn-mixed-heading-line {
    width: 30px;
    height: 3px;
    border-radius: 5px;
    background: var(--skn-blue);
}

.skn-mixed-requirements>h2 {
    margin: 0 0 12px;
    color: var(--skn-dark);
    font-size: clamp(27px, 3vw, 36px);
    line-height: 1.3;
    font-weight: 800;
    text-align: center;
}

.skn-mixed-requirements>h2 span {
    color: var(--skn-blue);
}

.skn-mixed-subtitle {
    max-width: 650px;
    margin: 0 auto 38px;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
}

/* Requirement card grid */

.skn-mixed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* Individual cards */

.skn-mixed-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    min-height: 116px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--skn-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 8px 25px rgba(8, 102, 213, 0.045);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}

.skn-mixed-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(100deg,
            transparent,
            rgba(8, 102, 213, 0.07),
            transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
}

.skn-mixed-card:hover::before {
    left: 150%;
}

.skn-mixed-card:hover {
    transform: translateY(-7px);
    border-color: rgba(8, 102, 213, 0.40);
    background: var(--skn-white);
    box-shadow: 0 20px 40px rgba(8, 102, 213, 0.12);
}

/* Card icons */

.skn-mixed-card-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: linear-gradient(145deg, #edf6ff, #dcecff);
    color: var(--skn-blue);
    transition:
        transform 0.5s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}

.skn-mixed-card-icon svg {
    display: block;
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.skn-mixed-card:hover .skn-mixed-card-icon {
    transform: rotate(-8deg) scale(1.08);
    border-color: rgba(8, 102, 213, 0.12);
    background: var(--skn-blue);
    color: var(--skn-white);
}

/* Card text */

.skn-mixed-card-text {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    padding-right: 3px;
}

.skn-mixed-card-text h3 {
    margin: 0 0 5px;
    color: var(--skn-dark);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.skn-mixed-card-text p {
    margin: 0;
    color: var(--skn-text);
    font-size: 13px;
    line-height: 1.6;
}

.skn-mixed-card:hover .skn-mixed-card-text h3 {
    color: var(--skn-blue);
}

/* Arrow animation */

.skn-mixed-card-arrow {
    position: relative;
    z-index: 1;
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 1px solid #cde3ff;
    border-radius: 50%;
    background: #f0f7ff;
    color: var(--skn-blue);
    font-size: 19px;
    line-height: 1;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.skn-mixed-card:hover .skn-mixed-card-arrow {
    transform: translateX(3px);
    border-color: var(--skn-blue);
    background: var(--skn-blue);
    color: var(--skn-white);
}

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

@media (max-width: 1100px) {
    .skn-mixed-hero {
        gap: 30px;
    }

    .skn-mixed-content h1 {
        font-size: 36px;
    }

    .skn-mixed-visual {
        min-height: 400px;
    }

    .skn-mixed-main-image {
        height: 325px;
    }

    .skn-mixed-image-orbit {
        width: 330px;
        height: 330px;
    }

    .skn-mixed-orbit-two {
        width: 290px;
        height: 290px;
    }

    .skn-mixed-inset-image {
        width: 120px;
        height: 120px;
    }

    .skn-mixed-card {
        gap: 13px;
        padding: 16px;
    }

    .skn-mixed-card-icon {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .skn-mixed-card-icon svg {
        width: 30px;
        height: 30px;
    }
}

/* =========================================
   RESPONSIVE TABLET / MOBILE
========================================= */

@media (max-width: 767px) {
    .skn-mixed-section {
        padding: 60px 0 70px;
    }

    .skn-mixed-container {
        width: calc(100% - 32px);
    }

    .skn-mixed-hero {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 55px;
    }

    .skn-mixed-content h1 {
        font-size: clamp(31px, 7vw, 40px);
        letter-spacing: -0.8px;
    }

    .skn-mixed-content>p {
        font-size: 14px;
        line-height: 1.85;
    }

    .skn-mixed-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .skn-mixed-visual {
        min-height: 370px;
        margin: 0 8px;
    }

    .skn-mixed-main-image {
        width: 88%;
        height: 300px;
    }

    .skn-mixed-image-orbit {
        width: 310px;
        height: 310px;
    }

    .skn-mixed-orbit-two {
        width: 265px;
        height: 265px;
    }

    .skn-mixed-floating-badge {
        top: 10px;
        right: -5px;
        gap: 9px;
        padding: 10px 12px;
    }

    .skn-mixed-badge-icon {
        width: 33px;
        height: 33px;
    }

    .skn-mixed-floating-badge strong {
        font-size: 13px;
    }

    .skn-mixed-floating-badge small {
        font-size: 10px;
    }

    .skn-mixed-inset-image {
        right: -2px;
        bottom: 24px;
        width: 105px;
        height: 105px;
        border-width: 5px;
    }

    .skn-mixed-tech-label {
        left: -5px;
        bottom: 5px;
        padding: 10px 12px;
        font-size: 11px;
    }

    .skn-mixed-requirements {
        padding-top: 38px;
    }

    .skn-mixed-requirements>h2 {
        font-size: 29px;
    }

    .skn-mixed-subtitle {
        margin-bottom: 28px;
    }

    .skn-mixed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .skn-mixed-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
        min-height: 0;
        padding: 18px 15px;
    }

    .skn-mixed-card-icon {
        width: 57px;
        height: 57px;
        flex-basis: 57px;
    }

    .skn-mixed-card-icon svg {
        width: 28px;
        height: 28px;
    }

    .skn-mixed-card-text h3 {
        font-size: 14px;
    }

    .skn-mixed-card-text p {
        font-size: 12px;
    }

    .skn-mixed-card-arrow {
        position: absolute;
        right: 12px;
        top: 15px;
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        font-size: 16px;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {
    .skn-mixed-section {
        padding: 45px 0 55px;
    }

    .skn-mixed-container {
        width: calc(100% - 26px);
    }

    .skn-mixed-content h1 {
        font-size: 30px;
    }

    .skn-mixed-eyebrow {
        gap: 8px;
        letter-spacing: 1.3px;
    }

    .skn-mixed-eyebrow>span {
        width: 23px;
    }

    .skn-mixed-visual {
        min-height: 310px;
    }

    .skn-mixed-main-image {
        height: 250px;
        border-width: 5px;
        border-radius: 19px;
    }

    .skn-mixed-image-orbit {
        width: 260px;
        height: 260px;
    }

    .skn-mixed-orbit-two {
        width: 220px;
        height: 220px;
    }

    .skn-mixed-inset-image {
        width: 83px;
        height: 83px;
    }

    .skn-mixed-floating-badge {
        right: -5px;
    }

    .skn-mixed-tech-label {
        font-size: 10px;
    }

    .skn-mixed-section-heading {
        gap: 9px;
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .skn-mixed-heading-line {
        width: 18px;
    }

    .skn-mixed-requirements>h2 {
        font-size: 25px;
    }

    .skn-mixed-grid {
        grid-template-columns: 1fr;
    }

    .skn-mixed-card {
        align-items: center;
        flex-direction: row;
        gap: 13px;
        padding: 16px;
    }

    .skn-mixed-card-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .skn-mixed-card-text h3 {
        font-size: 14px;
    }

    .skn-mixed-card-text p {
        font-size: 12px;
    }

    .skn-mixed-card-arrow {
        position: static;
        margin-left: auto;
        flex-shrink: 0;
    }
}

/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .skn-mixed-section *,
    .skn-mixed-section *::before,
    .skn-mixed-section *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   SKN PROTOTYPE & NPI SUPPORT
   Brand colors
========================================================= */


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

.npi-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    color: var(--skn-text);

    background:
        radial-gradient(circle at 8% 10%,
            rgba(8, 102, 213, 0.09),
            transparent 28%),
        radial-gradient(circle at 92% 70%,
            rgba(8, 102, 213, 0.08),
            transparent 30%),
        linear-gradient(140deg,
            #ffffff 0%,
            var(--skn-light) 48%,
            #ffffff 100%);

    font-family: inherit;
}

.npi-section *,
.npi-section *::before,
.npi-section *::after {
    box-sizing: border-box;
}

.npi-container {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* =========================================================
   ANIMATED TECHNICAL BACKGROUND
========================================================= */

.npi-bg-pattern {
    position: absolute;
    z-index: -1;
    inset: -160px;
    opacity: 0.48;
    pointer-events: none;

    background-image:
        radial-gradient(circle,
            rgba(8, 102, 213, 0.35) 1.5px,
            transparent 2px),
        linear-gradient(90deg,
            transparent 49.5%,
            rgba(8, 102, 213, 0.06) 50%,
            transparent 50.5%),
        linear-gradient(0deg,
            transparent 49.5%,
            rgba(8, 102, 213, 0.06) 50%,
            transparent 50.5%);

    background-size:
        35px 35px,
        70px 70px,
        70px 70px;

    animation:
        npiPatternMove 35s linear infinite,
        npiPatternRotate 100s linear infinite;
}

.npi-glow {
    position: absolute;
    z-index: -1;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.7;
    pointer-events: none;

    animation: npiGlow 8s ease-in-out infinite alternate;
}

.npi-glow-one {
    top: 5%;
    left: -180px;
    background: rgba(8, 102, 213, 0.15);
}

.npi-glow-two {
    right: -170px;
    bottom: 8%;
    background: rgba(71, 157, 255, 0.15);
    animation-delay: -4s;
}

/* Rotating technical rings */

.npi-orbit {
    position: absolute;
    z-index: -1;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(8, 102, 213, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.npi-orbit::before,
.npi-orbit::after {
    position: absolute;
    content: "";
    border: 1px dashed rgba(8, 102, 213, 0.17);
    border-radius: 50%;
}

.npi-orbit::before {
    inset: 18px;
}

.npi-orbit::after {
    inset: 40px;
}

.npi-orbit-one {
    top: -155px;
    right: -100px;
    animation: npiOrbitRotate 38s linear infinite;
}

.npi-orbit-two {
    bottom: -180px;
    left: -130px;
    width: 340px;
    height: 340px;
    animation: npiOrbitRotate 48s linear infinite reverse;
}

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

.npi-heading {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
    animation: npiFadeUp 0.8s ease both;
}

.npi-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 18px;

    color: var(--skn-blue);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--skn-border);
    border-radius: 50px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.npi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--skn-blue);
    box-shadow: 0 0 0 4px rgba(8, 102, 213, 0.12);

    animation: npiDotPulse 2s infinite;
}

.npi-heading h2 {
    margin: 0;
    color: var(--skn-dark);
    font-size: clamp(32px, 4.2vw, 50px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.4px;
}

.npi-heading h2 span {
    display: block;
    color: var(--skn-blue);
}

.npi-heading-line {
    width: 65px;
    height: 4px;
    margin: 23px auto 0;
    border-radius: 10px;
    background: linear-gradient(90deg,
            var(--skn-blue),
            #70c6ff);

    animation: npiLineExpand 1s ease both;
}

/* =========================================================
   INTRODUCTION GRID
========================================================= */

.npi-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
    margin-bottom: 80px;
}

/* Main image */

.npi-hero-image {
    min-width: 0;
    animation: npiFadeLeft 0.9s ease both;
}

.npi-image-frame {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    aspect-ratio: 1.15 / 1;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    background: #dceafb;

    box-shadow: 0 25px 65px rgba(11, 33, 75, 0.14);
}

.npi-image-frame img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}

.npi-image-frame:hover img {
    transform: scale(1.1);
    filter: saturate(1.12) contrast(1.03);
}

.npi-image-frame::after {
    position: absolute;
    inset: 0;
    content: "";
    border: 1px solid rgba(8, 102, 213, 0.15);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color 0.4s ease;
}

.npi-image-frame:hover::after {
    border-color: rgba(8, 102, 213, 0.7);
}

.npi-image-shade {
    position: absolute;
    inset: 35% 0 0;
    z-index: 1;
    background: linear-gradient(to bottom,
            transparent,
            rgba(11, 33, 75, 0.72));
    pointer-events: none;
}

.npi-image-badge {
    position: absolute;
    z-index: 2;
    left: 18px;
    bottom: 18px;

    display: flex;
    align-items: center;
    gap: 12px;

    max-width: calc(100% - 36px);
    padding: 15px 17px;

    color: var(--skn-dark);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 13px;
    box-shadow: 0 8px 25px rgba(11, 33, 75, 0.12);

    transition: transform 0.35s ease;
}

.npi-image-frame:hover .npi-image-badge {
    transform: translateY(-5px);
}

.npi-badge-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    border-radius: 12px;
    color: var(--skn-blue);
    background: var(--skn-light);
    font-size: 22px;
}

.npi-image-badge strong,
.npi-image-badge small {
    display: block;
}

.npi-image-badge strong {
    margin-bottom: 4px;
    color: var(--skn-dark);
    font-size: 13px;
}

.npi-image-badge small {
    color: var(--skn-text);
    font-size: 11px;
}

.npi-frame-corner {
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-color: #55c9ff;
    border-style: solid;
    pointer-events: none;
}

.npi-frame-top {
    top: 14px;
    left: 14px;
    border-width: 2px 0 0 2px;
    border-radius: 6px 0 0;
}

.npi-frame-bottom {
    right: 14px;
    bottom: 14px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 6px;
}

.npi-image-caption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;

    color: var(--skn-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.npi-image-caption span {
    width: 30px;
    height: 2px;
    flex-shrink: 0;
    background: var(--skn-blue);
}

/* =========================================================
   INTRODUCTION CONTENT
========================================================= */

.npi-intro-content {
    animation: npiFadeRight 0.9s ease both;
}

.npi-subtitle {
    display: inline-block;
    color: var(--skn-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    line-height: 1.6;
}

.npi-intro-content h3 {
    margin: 15px 0 20px;
    color: var(--skn-dark);
    font-size: clamp(27px, 3vw, 37px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.7px;
}

.npi-intro-content h3 span {
    display: block;
    color: var(--skn-blue);
}

.npi-intro-content>p {
    margin: 0 0 17px;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.95;
}

/* Highlight list */

.npi-highlights {
    display: grid;
    gap: 13px;
    margin: 25px 0 30px;
}

.npi-highlight {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--skn-text);
    font-size: 13px;
    font-weight: 600;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.npi-highlight:hover {
    color: var(--skn-blue);
    transform: translateX(5px);
}

.npi-check {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex-shrink: 0;

    color: var(--skn-blue);
    background: #e5f2ff;
    border: 1px solid #d5e8ff;
    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;
}

/* Button */

.npi-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    padding: 14px 22px;
    color: var(--skn-white);
    background: var(--skn-dark);
    border: 1px solid var(--skn-dark);
    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    box-shadow: 0 8px 20px rgba(11, 33, 75, 0.14);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.npi-button span {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.npi-button:hover,
.npi-button:focus-visible {
    color: var(--skn-white);
    background: var(--skn-blue);
    border-color: var(--skn-blue);
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(8, 102, 213, 0.2);
}

.npi-button:hover span {
    transform: translateX(5px);
}

/* =========================================================
   ACTIVITIES HEADING
========================================================= */

.npi-activities-heading {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
    scroll-margin-top: 35px;
    animation: npiFadeUp 0.8s ease both;
}

.npi-activities-heading h3 {
    margin: 12px 0;
    color: var(--skn-dark);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.25;
}

.npi-activities-heading>p {
    margin: 0;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================================
   ACTIVITIES GRID
========================================================= */

.npi-activities-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* Activity card */

.npi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 220px;
    padding: 22px 20px 20px;
    overflow: hidden;

    border: 1px solid var(--skn-border);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 25px rgba(11, 33, 75, 0.035);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;

    animation: npiFadeUp 0.7s ease both;
}

.npi-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    content: "";

    background: linear-gradient(90deg,
            var(--skn-blue),
            #76caff);

    transition: width 0.45s ease;
}

.npi-card:hover {
    z-index: 2;
    transform: translateY(-8px);
    border-color: #b8d7fa;
    background: var(--skn-white);
    box-shadow: 0 18px 40px rgba(11, 33, 75, 0.11);
}

.npi-card:hover::before {
    width: 100%;
}

/* Card top */

.npi-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.npi-card-icon {
    display: grid;
    place-items: center;
    width: 53px;
    height: 53px;
    flex-shrink: 0;

    border: 1px solid #d4e8ff;
    border-radius: 50%;

    color: var(--skn-blue);
    background: linear-gradient(135deg,
            #e5f2ff,
            #f8fbff);

    transition:
        transform 0.4s ease,
        color 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}

.npi-card-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.npi-card:hover .npi-card-icon {
    transform: rotate(-8deg) scale(1.08);
    color: var(--skn-white);
    background: var(--skn-blue);
    box-shadow: 0 8px 20px rgba(8, 102, 213, 0.2);
}

.npi-number {
    color: var(--skn-blue);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Card content */

.npi-card h4 {
    margin: 0 0 11px;
    color: var(--skn-dark);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;

    transition: color 0.3s ease;
}

.npi-card:hover h4 {
    color: var(--skn-blue);
}

.npi-card p {
    margin: 0 0 18px;
    color: var(--skn-text);
    font-size: 12.5px;
    line-height: 1.85;
}

.npi-card-line {
    width: 30px;
    height: 3px;
    margin-top: auto;
    border-radius: 10px;

    background: var(--skn-blue);

    transition:
        width 0.4s ease,
        background 0.4s ease;
}

.npi-card:hover .npi-card-line {
    width: 65px;
    background: #4bbcff;
}

/* Staggered entry animations */

.npi-card:nth-child(2) {
    animation-delay: 0.06s;
}

.npi-card:nth-child(3) {
    animation-delay: 0.12s;
}

.npi-card:nth-child(4) {
    animation-delay: 0.18s;
}

.npi-card:nth-child(5) {
    animation-delay: 0.24s;
}

.npi-card:nth-child(6) {
    animation-delay: 0.30s;
}

.npi-card:nth-child(7) {
    animation-delay: 0.36s;
}

/* =========================================================
   SUPPORTING IMAGE CARD
========================================================= */

.npi-support-card {
    position: relative;
    min-height: 240px;
    overflow: hidden;
    isolation: isolate;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 15px;

    background: var(--skn-dark);
    box-shadow: 0 12px 35px rgba(11, 33, 75, 0.13);

    animation: npiFadeUp 0.7s ease both;
    animation-delay: 0.42s;
}

.npi-support-card>img {
    position: absolute;
    z-index: -2;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.8s ease,
        filter 0.5s ease;
}

.npi-support-card:hover>img {
    transform: scale(1.1);
    filter: saturate(1.1);
}

.npi-support-card::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";

    background: linear-gradient(180deg,
            rgba(11, 33, 75, 0.2),
            rgba(11, 33, 75, 0.95));
}

.npi-support-overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height: 240px;
    padding: 23px;
    color: var(--skn-white);
}

.npi-support-tag {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 7px 10px;

    color: var(--skn-white);
    background: rgba(8, 102, 213, 0.9);
    border-radius: 4px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.npi-support-overlay h4 {
    margin: 0 0 10px;
    color: var(--skn-white);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
}

.npi-support-overlay p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    line-height: 1.8;
}

.npi-support-decoration {
    position: absolute;
    top: -35px;
    right: -35px;

    width: 120px;
    height: 120px;

    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;

    transition: transform 0.6s ease;
}

.npi-support-card:hover .npi-support-decoration {
    transform: scale(1.3) rotate(25deg);
}

/* =========================================================
   BOTTOM BANNER
========================================================= */

.npi-bottom-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 55px;
    padding: 27px 30px;
    overflow: hidden;

    border: 1px solid var(--skn-border);
    border-radius: 16px;

    background: linear-gradient(110deg,
            #ffffff,
            #eaf4ff);

    box-shadow: 0 12px 35px rgba(11, 33, 75, 0.05);
}

.npi-bottom-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    flex-shrink: 0;

    color: var(--skn-white);
    background: var(--skn-blue);
    border-radius: 50%;

    font-size: 22px;
    box-shadow: 0 7px 18px rgba(8, 102, 213, 0.2);
}

.npi-bottom-banner h3 {
    margin: 0 0 7px;
    color: var(--skn-dark);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
}

.npi-bottom-banner p {
    margin: 0;
    color: var(--skn-text);
    font-size: 13px;
    line-height: 1.8;
}

.npi-bottom-decoration {
    position: absolute;
    right: -55px;
    bottom: -100px;

    width: 200px;
    height: 200px;

    border: 1px solid rgba(8, 102, 213, 0.14);
    border-radius: 50%;

    pointer-events: none;
}

/* =========================================================
   KEYFRAME ANIMATIONS
========================================================= */

@keyframes npiFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes npiFadeLeft {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }

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

@keyframes npiFadeRight {
    from {
        opacity: 0;
        transform: translateX(28px);
    }

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

@keyframes npiPatternMove {
    from {
        background-position:
            0 0,
            0 0,
            0 0;
    }

    to {
        background-position:
            175px 175px,
            70px 70px,
            70px 70px;
    }
}

@keyframes npiPatternRotate {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes npiOrbitRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes npiGlow {
    from {
        opacity: 0.45;
        scale: 0.9;
    }

    to {
        opacity: 0.85;
        scale: 1.12;
    }
}

@keyframes npiDotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(8, 102, 213, 0.12);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(8, 102, 213, 0.035);
    }
}

@keyframes npiLineExpand {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

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

@media (max-width: 1024px) {
    .npi-section {
        padding: 75px 0;
    }

    .npi-intro-grid {
        gap: 35px;
    }

    .npi-image-frame {
        min-height: 310px;
    }

    .npi-activities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .npi-support-card {
        min-height: 240px;
    }

    .npi-support-overlay {
        min-height: 240px;
    }
}

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

@media (max-width: 600px) {
    .npi-section {
        padding: 55px 0;
    }

    .npi-container {
        width: calc(100% - 30px);
    }

    .npi-heading {
        margin-bottom: 35px;
    }

    .npi-heading h2 {
        font-size: 31px;
        letter-spacing: -0.7px;
    }

    .npi-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .npi-intro-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 60px;
    }

    .npi-image-frame {
        min-height: 260px;
        aspect-ratio: 1.1 / 1;
        border-radius: 16px;
    }

    .npi-image-badge {
        left: 12px;
        bottom: 12px;
        padding: 11px 12px;
    }

    .npi-badge-icon {
        width: 34px;
        height: 34px;
    }

    .npi-image-badge strong {
        font-size: 11px;
    }

    .npi-image-badge small {
        font-size: 10px;
    }

    .npi-image-caption {
        font-size: 9px;
        letter-spacing: 0.8px;
    }

    .npi-intro-content h3 {
        font-size: 29px;
    }

    .npi-intro-content>p {
        font-size: 13px;
        line-height: 1.9;
    }

    .npi-activities-heading {
        margin-bottom: 28px;
    }

    .npi-activities-heading h3 {
        font-size: 28px;
    }

    .npi-activities-heading>p {
        font-size: 13px;
    }

    .npi-activities-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .npi-card {
        min-height: 0;
        padding: 20px;
    }

    .npi-card-top {
        margin-bottom: 15px;
    }

    .npi-card p {
        font-size: 13px;
    }

    .npi-support-card,
    .npi-support-overlay {
        min-height: 250px;
    }

    .npi-bottom-banner {
        align-items: flex-start;
        gap: 14px;
        margin-top: 38px;
        padding: 21px 17px;
    }

    .npi-bottom-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .npi-bottom-banner h3 {
        font-size: 15px;
    }

    .npi-bottom-banner p {
        font-size: 12px;
    }

    .npi-orbit {
        width: 180px;
        height: 180px;
    }

    .npi-glow {
        width: 200px;
        height: 200px;
        filter: blur(65px);
    }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .npi-section *,
    .npi-section *::before,
    .npi-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================
   SKN COMPONENT SOURCING & BOM SUPPORT
===================================================== */

.bom-section,
.bom-section * {
    box-sizing: border-box;
}

.bom-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    color: var(--skn-text);

    background:
        radial-gradient(circle at 5% 15%,
            rgba(8, 102, 213, 0.10),
            transparent 27%),
        radial-gradient(circle at 95% 65%,
            rgba(63, 166, 255, 0.12),
            transparent 30%),
        linear-gradient(135deg,
            #ffffff 0%,
            var(--skn-light) 50%,
            #ffffff 100%);

    font-family: inherit;
}

.bom-container {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* =====================================================
   ROTATING TECHNICAL BACKGROUND PATTERN
===================================================== */

.bom-bg-pattern {
    position: absolute;
    z-index: -1;
    inset: -180px;
    opacity: 0.45;
    pointer-events: none;

    background-image:
        radial-gradient(circle,
            rgba(8, 102, 213, 0.34) 1.5px,
            transparent 2px),
        linear-gradient(90deg,
            transparent 49.5%,
            rgba(8, 102, 213, 0.07) 50%,
            transparent 50.5%),
        linear-gradient(0deg,
            transparent 49.5%,
            rgba(8, 102, 213, 0.07) 50%,
            transparent 50.5%);

    background-size: 34px 34px, 68px 68px, 68px 68px;

    animation:
        bomPatternMove 32s linear infinite,
        bomPatternRotate 100s linear infinite;
}

/* Glowing light effects */

.bom-glow {
    position: absolute;
    z-index: -1;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(85px);
    pointer-events: none;

    animation: bomGlowPulse 8s ease-in-out infinite alternate;
}

.bom-glow-one {
    top: 8%;
    left: -180px;
    background: rgba(8, 102, 213, 0.18);
}

.bom-glow-two {
    right: -160px;
    bottom: 10%;
    background: rgba(63, 166, 255, 0.18);
    animation-delay: -4s;
}

/* Rotating circles */

.bom-orbit {
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(8, 102, 213, 0.15);
    border-radius: 50%;
    pointer-events: none;
}

.bom-orbit::before,
.bom-orbit::after {
    position: absolute;
    inset: 20px;
    content: "";
    border: 1px dashed rgba(8, 102, 213, 0.18);
    border-radius: 50%;
}

.bom-orbit::after {
    inset: 45px;
    border-style: solid;
    opacity: 0.7;
}

.bom-orbit-one {
    top: -130px;
    right: -90px;
    animation: bomOrbitRotate 40s linear infinite;
}

.bom-orbit-two {
    bottom: -150px;
    left: -120px;
    width: 330px;
    height: 330px;
    animation: bomOrbitRotate 50s linear infinite reverse;
}

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

.bom-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
    animation: bomFadeUp 0.8s ease both;
}

.bom-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 18px;

    color: var(--skn-blue);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--skn-border);
    border-radius: 50px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.bom-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--skn-blue);
    box-shadow: 0 0 0 4px rgba(8, 102, 213, 0.12);

    animation: bomDotPulse 2s infinite;
}

.bom-heading h2 {
    margin: 0;
    color: var(--skn-dark);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.2px;
}

.bom-heading h2 span {
    display: block;
    color: var(--skn-blue);
}

.bom-heading-line {
    width: 65px;
    height: 4px;
    margin: 22px auto 0;
    border-radius: 10px;
    background: linear-gradient(90deg,
            var(--skn-blue),
            #70caff);

    animation: bomLineExpand 1s ease both;
}

/* =====================================================
   INTRODUCTION GRID
===================================================== */

.bom-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
    margin-bottom: 25px;
}

/* Introduction content */

.bom-intro-content {
    min-width: 0;
    animation: bomFadeLeft 0.9s ease both;
}

.bom-subtitle {
    display: inline-block;
    color: var(--skn-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.7;
}

.bom-intro-content h3 {
    margin: 14px 0 20px;
    color: var(--skn-dark);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.8px;
}

.bom-intro-content h3 span {
    display: block;
    color: var(--skn-blue);
}

.bom-intro-content>p {
    margin: 0 0 17px;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.9;
}

/* Benefits */

.bom-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 28px;
}

.bom-benefit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;

    color: var(--skn-dark);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--skn-border);
    border-radius: 30px;

    font-size: 11px;
    font-weight: 700;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bom-benefit:hover {
    transform: translateY(-3px);
    border-color: #a8d0ff;
    box-shadow: 0 6px 18px rgba(8, 102, 213, 0.08);
}

.bom-benefit-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;

    color: var(--skn-white);
    background: var(--skn-blue);
    font-size: 11px;
    font-weight: 800;
}

/* Button */

.bom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 14px 22px;

    color: var(--skn-white);
    background: var(--skn-dark);
    border: 1px solid var(--skn-dark);
    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    box-shadow: 0 8px 20px rgba(11, 33, 75, 0.13);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bom-button span {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.bom-button:hover,
.bom-button:focus-visible {
    color: var(--skn-white);
    background: var(--skn-blue);
    border-color: var(--skn-blue);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(8, 102, 213, 0.22);
}

.bom-button:hover span {
    transform: translateX(5px);
}

/* =====================================================
   HERO IMAGE AND IMAGE HOVER EFFECT
===================================================== */

.bom-hero-visual {
    min-width: 0;
    animation: bomFadeRight 0.9s ease both;
}

.bom-image-frame {
    position: relative;
    min-height: 350px;
    overflow: hidden;
    aspect-ratio: 1.15 / 1;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    background: #dcecff;

    box-shadow: 0 25px 60px rgba(11, 33, 75, 0.14);
}

.bom-image-frame img {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}

.bom-image-frame:hover img {
    transform: scale(1.1);
    filter: saturate(1.15) contrast(1.04);
}

.bom-image-overlay {
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(to bottom,
            transparent,
            rgba(11, 33, 75, 0.72));
    pointer-events: none;
}

.bom-image-frame::after {
    position: absolute;
    inset: 0;
    content: "";
    border: 1px solid rgba(8, 102, 213, 0.15);
    border-radius: inherit;
    pointer-events: none;

    transition: border-color 0.4s ease;
}

.bom-image-frame:hover::after {
    border-color: rgba(8, 102, 213, 0.8);
}

/* Image border corners */

.bom-image-corner {
    position: absolute;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-color: #54c8ff;
    border-style: solid;
    pointer-events: none;
}

.bom-corner-top {
    top: 13px;
    left: 13px;
    border-width: 2px 0 0 2px;
    border-radius: 6px 0 0;
}

.bom-corner-bottom {
    right: 13px;
    bottom: 13px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 6px;
}

/* Image information badge */

.bom-image-badge {
    position: absolute;
    z-index: 3;
    left: 18px;
    bottom: 18px;

    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 36px);
    padding: 14px 16px;

    color: var(--skn-dark);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 13px;

    box-shadow: 0 8px 25px rgba(11, 33, 75, 0.12);

    transition: transform 0.35s ease;
}

.bom-image-frame:hover .bom-image-badge {
    transform: translateY(-5px);
}

.bom-chip-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    color: var(--skn-blue);
    background: var(--skn-light);
    border: 1px solid var(--skn-border);
    border-radius: 11px;

    font-size: 22px;
}

.bom-image-badge strong,
.bom-image-badge small {
    display: block;
}

.bom-image-badge strong {
    margin-bottom: 4px;
    color: var(--skn-dark);
    font-size: 12px;
}

.bom-image-badge small {
    color: var(--skn-text);
    font-size: 10px;
}

.bom-image-caption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;

    color: var(--skn-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.bom-image-caption span {
    width: 28px;
    height: 2px;
    flex-shrink: 0;
    background: var(--skn-blue);
}

/* =====================================================
   BOM SUPPORT HEADING
===================================================== */

.bom-support-heading {
    max-width: 700px;
    margin: 0 auto 38px;
    text-align: center;
    scroll-margin-top: 30px;
    animation: bomFadeUp 0.8s ease both;
}

.bom-support-heading h3 {
    margin: 12px 0;
    color: var(--skn-dark);
    font-size: clamp(29px, 3vw, 37px);
    font-weight: 800;
    line-height: 1.25;
}

.bom-support-heading>p {
    margin: 0;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.8;
}

/* =====================================================
   BOM SUPPORT CARDS
===================================================== */

.bom-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.bom-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 230px;
    padding: 22px 20px 20px;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--skn-border);
    border-radius: 15px;

    box-shadow: 0 8px 25px rgba(11, 33, 75, 0.035);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;

    animation: bomFadeUp 0.7s ease both;
}

/* Animated blue line */

.bom-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    content: "";

    background: linear-gradient(90deg,
            var(--skn-blue),
            #74caff);

    transition: width 0.45s ease;
}

.bom-card:hover {
    z-index: 2;
    transform: translateY(-8px);
    background: var(--skn-white);
    border-color: #b4d6fb;
    box-shadow: 0 18px 40px rgba(11, 33, 75, 0.11);
}

.bom-card:hover::before {
    width: 100%;
}

/* Card icon and number */

.bom-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.bom-card-icon {
    display: grid;
    place-items: center;
    width: 53px;
    height: 53px;
    flex-shrink: 0;

    color: var(--skn-blue);
    background: linear-gradient(135deg,
            #e2f0ff,
            #ffffff);

    border: 1px solid #d1e6ff;
    border-radius: 50%;

    transition:
        transform 0.4s ease,
        color 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}

.bom-card-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bom-card:hover .bom-card-icon {
    transform: rotate(-8deg) scale(1.08);
    color: var(--skn-white);
    background: var(--skn-blue);
    box-shadow: 0 8px 20px rgba(8, 102, 213, 0.2);
}

.bom-number {
    color: var(--skn-blue);
    font-size: 17px;
    font-weight: 800;
}

/* Card text */

.bom-card h4 {
    margin: 0 0 11px;
    color: var(--skn-dark);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;

    transition: color 0.3s ease;
}

.bom-card:hover h4 {
    color: var(--skn-blue);
}

.bom-card p {
    margin: 0 0 18px;
    color: var(--skn-text);
    font-size: 14.5px;
    line-height: 1.85;
}

.bom-card-line {
    width: 30px;
    height: 3px;
    margin-top: auto;

    background: var(--skn-blue);
    border-radius: 10px;

    transition:
        width 0.4s ease,
        background 0.4s ease;
}

.bom-card:hover .bom-card-line {
    width: 65px;
    background: #4bbcff;
}

/* Staggered card entrance */

.bom-card:nth-child(2) {
    animation-delay: 0.06s;
}

.bom-card:nth-child(3) {
    animation-delay: 0.12s;
}

.bom-card:nth-child(4) {
    animation-delay: 0.18s;
}

.bom-card:nth-child(5) {
    animation-delay: 0.24s;
}

.bom-card:nth-child(6) {
    animation-delay: 0.30s;
}

.bom-card:nth-child(7) {
    animation-delay: 0.36s;
}

/* =====================================================
   SUPPORTING IMAGE CARD
===================================================== */

.bom-support-image {
    position: relative;
    min-height: 245px;
    overflow: hidden;
    isolation: isolate;

    background: var(--skn-dark);
    border: 1px solid var(--skn-border);
    border-radius: 15px;

    box-shadow: 0 12px 35px rgba(11, 33, 75, 0.12);

    animation: bomFadeUp 0.7s ease both;
    animation-delay: 0.42s;
}

.bom-support-image img {
    position: absolute;
    z-index: -2;
    inset: 0;

    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transition:
        transform 0.8s ease,
        filter 0.5s ease;
}

.bom-support-image:hover img {
    transform: scale(1.1);
    filter: saturate(1.12);
}

.bom-support-image::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";

    background: linear-gradient(180deg,
            rgba(11, 33, 75, 0.12),
            rgba(11, 33, 75, 0.95));
}

.bom-support-image-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 245px;
    padding: 23px;
    color: var(--skn-white);
}

.bom-support-image-overlay>span {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 7px 10px;

    color: var(--skn-white);
    background: rgba(8, 102, 213, 0.92);
    border-radius: 4px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.bom-support-image-overlay h4 {
    margin: 0 0 10px;
    color: var(--skn-white);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
}

.bom-support-image-overlay p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.8;
}

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

.bom-bottom-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 50px;
    padding: 26px 28px;
    overflow: hidden;

    background: linear-gradient(110deg,
            #ffffff,
            #eaf4ff);

    border: 1px solid var(--skn-border);
    border-radius: 16px;

    box-shadow: 0 12px 35px rgba(11, 33, 75, 0.05);
}

.bom-bottom-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    flex-shrink: 0;

    color: var(--skn-white);
    background: var(--skn-blue);
    border-radius: 50%;

    font-size: 22px;
    box-shadow: 0 7px 18px rgba(8, 102, 213, 0.2);
}

.bom-bottom-content {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.bom-bottom-content h3 {
    margin: 0 0 7px;
    color: var(--skn-dark);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
}

.bom-bottom-content p {
    margin: 0;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.8;
}

/* CTA button */

.bom-cta-button {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;

    padding: 13px 19px;
    color: var(--skn-white);
    background: var(--skn-blue);
    border: 1px solid var(--skn-blue);
    border-radius: 50px;

    font-size: 12px;
    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.bom-cta-button span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.bom-cta-button:hover {
    color: var(--skn-white);
    background: var(--skn-dark);
    border-color: var(--skn-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(11, 33, 75, 0.18);
}

.bom-cta-button:hover span {
    transform: translateX(4px);
}

/* Decorative CTA circle */

.bom-banner-orbit {
    position: absolute;
    right: -65px;
    bottom: -110px;

    width: 210px;
    height: 210px;

    border: 1px solid rgba(8, 102, 213, 0.15);
    border-radius: 50%;
    pointer-events: none;
}

.bom-banner-orbit::after {
    position: absolute;
    inset: 20px;
    content: "";
    border: 1px dashed rgba(8, 102, 213, 0.2);
    border-radius: 50%;
}

/* =====================================================
   KEYFRAME ANIMATIONS
===================================================== */

@keyframes bomFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes bomFadeLeft {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }

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

@keyframes bomFadeRight {
    from {
        opacity: 0;
        transform: translateX(28px);
    }

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

@keyframes bomPatternMove {
    from {
        background-position: 0 0, 0 0, 0 0;
    }

    to {
        background-position: 170px 170px, 68px 68px, 68px 68px;
    }
}

@keyframes bomPatternRotate {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes bomOrbitRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes bomGlowPulse {
    from {
        opacity: 0.4;
        scale: 0.9;
    }

    to {
        opacity: 0.85;
        scale: 1.12;
    }
}

@keyframes bomDotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(8, 102, 213, 0.12);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(8, 102, 213, 0.035);
    }
}

@keyframes bomLineExpand {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {
    .bom-section {
        padding: 75px 0;
    }

    .bom-intro-grid {
        gap: 32px;
    }

    .bom-image-frame {
        min-height: 300px;
    }

    .bom-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bom-card {
        min-height: 220px;
    }

    .bom-support-image {
        min-height: 230px;
    }

    .bom-support-image-overlay {
        min-height: 230px;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {
    .bom-section {
        padding: 55px 0;
    }

    .bom-container {
        width: calc(100% - 30px);
    }

    .bom-heading {
        margin-bottom: 35px;
    }

    .bom-heading h2 {
        font-size: 30px;
        letter-spacing: -0.6px;
    }

    .bom-eyebrow {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .bom-intro-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 60px;
    }

    .bom-intro-content h3 {
        font-size: 29px;
    }

    .bom-intro-content>p {
        font-size: 13px;
        line-height: 1.9;
    }

    .bom-benefits {
        gap: 8px;
    }

    .bom-benefit {
        font-size: 10px;
        padding: 8px 10px;
    }

    .bom-image-frame {
        min-height: 260px;
        aspect-ratio: 1.1 / 1;
        border-radius: 16px;
    }

    .bom-image-badge {
        left: 12px;
        bottom: 12px;
        padding: 11px 12px;
    }

    .bom-chip-icon {
        width: 34px;
        height: 34px;
    }

    .bom-image-badge strong {
        font-size: 11px;
    }

    .bom-image-badge small {
        font-size: 9px;
    }

    .bom-image-caption {
        font-size: 8px;
        letter-spacing: 0.6px;
    }

    .bom-support-heading {
        margin-bottom: 28px;
    }

    .bom-support-heading h3 {
        font-size: 28px;
    }

    .bom-support-heading>p {
        font-size: 13px;
    }

    .bom-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .bom-card {
        min-height: 0;
        padding: 20px;
    }

    .bom-card-top {
        margin-bottom: 15px;
    }

    .bom-card p {
        font-size: 13px;
    }

    .bom-support-image,
    .bom-support-image-overlay {
        min-height: 250px;
    }

    .bom-bottom-banner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 14px;

        margin-top: 35px;
        padding: 20px 17px;
    }

    .bom-bottom-icon {
        width: 39px;
        height: 39px;
        font-size: 18px;
    }

    .bom-bottom-content {
        flex-basis: calc(100% - 55px);
    }

    .bom-bottom-content h3 {
        font-size: 15px;
    }

    .bom-bottom-content p {
        font-size: 12px;
    }

    .bom-cta-button {
        margin-left: 53px;
    }

    .bom-orbit {
        width: 180px;
        height: 180px;
    }

    .bom-glow {
        width: 200px;
        height: 200px;
        filter: blur(65px);
    }
}

/* =====================================================
   ACCESSIBILITY: REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .bom-section *,
    .bom-section *::before,
    .bom-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   SKN INSPECTION & TESTING SECTION
========================================= */

.skn-inspection {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0 50px;
    background:
        radial-gradient(
            ellipse at 85% 18%,
            rgba(8, 102, 213, 0.12),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 5% 72%,
            rgba(8, 102, 213, 0.08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--skn-light) 55%,
            #eaf4ff 100%
        );
    color: var(--skn-text);
    font-family: inherit;
}

.skn-inspection *,
.skn-inspection *::before,
.skn-inspection *::after {
    box-sizing: border-box;
}

.skn-inspection-container {
    position: relative;
    z-index: 2;
    width: min(1400px, calc(100% - 50px));
    margin: 0 auto;
}

/* =========================================
   ANIMATED BACKGROUND
========================================= */

.skn-inspection-grid-bg {
    position: absolute;
    z-index: -1;
    inset: -50%;
    pointer-events: none;
    opacity: 0.24;
    background-image:
        linear-gradient(
            rgba(8, 102, 213, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 102, 213, 0.08) 1px,
            transparent 1px
        );
    background-size: 45px 45px;
    animation: sknInspectionGridRotate 100s linear infinite;
}

@keyframes sknInspectionGridRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.skn-inspection-circle {
    position: absolute;
    z-index: -1;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(8, 102, 213, 0.15);
    border-radius: 50%;
    pointer-events: none;
    animation: sknInspectionCircleFloat 10s ease-in-out infinite alternate;
}

.skn-inspection-circle::before,
.skn-inspection-circle::after {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(8, 102, 213, 0.12);
    border-radius: 50%;
}

.skn-inspection-circle::after {
    inset: 48px;
    border-color: rgba(8, 102, 213, 0.20);
}

.skn-circle-top {
    top: -175px;
    right: -120px;
}

.skn-circle-bottom {
    bottom: -175px;
    left: -160px;
    width: 360px;
    height: 360px;
    animation-delay: -5s;
}

@keyframes sknInspectionCircleFloat {
    from {
        transform: translateY(0) rotate(0deg);
    }
    to {
        transform: translateY(25px) rotate(35deg);
    }
}

.skn-inspection-dots {
    position: absolute;
    z-index: -1;
    width: 110px;
    height: 110px;
    pointer-events: none;
    opacity: 0.35;
    background-image: radial-gradient(
        var(--skn-blue) 1.8px,
        transparent 1.8px
    );
    background-size: 17px 17px;
    animation: sknInspectionDotsFloat 5s ease-in-out infinite alternate;
}

.skn-dots-left {
    top: 20px;
    left: 8px;
}

.skn-dots-right {
    right: 10px;
    bottom: 100px;
    animation-delay: -2.5s;
}

@keyframes sknInspectionDotsFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-15px); }
}

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

.skn-inspection-hero {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    align-items: center;
    gap: 55px;
    margin-bottom: 70px;
}

.skn-inspection-content {
    position: relative;
    z-index: 2;
    animation: sknInspectionReveal 0.8s ease both;
}

@keyframes sknInspectionReveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.skn-inspection-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.skn-inspection-line {
    width: 35px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--skn-blue);
    box-shadow: 0 0 12px rgba(8, 102, 213, 0.3);
}

.skn-inspection-content h2 {
    margin: 0 0 23px;
    color: var(--skn-dark);
    font-size: clamp(32px, 3.5vw, 47px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.2px;
}

.skn-inspection-content h2 span {
    display: block;
    color: var(--skn-blue);
}

.skn-inspection-content > p {
    margin: 0 0 18px;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.9;
}

/* Hero highlights */

.skn-inspection-highlights {
    display: grid;
    gap: 12px;
    margin: 24px 0 28px;
}

.skn-inspection-highlight {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--skn-dark);
    font-size: 14px;
    font-weight: 600;
}

.skn-inspection-check {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    background: rgba(8, 102, 213, 0.10);
    color: var(--skn-blue);
    font-size: 13px;
    font-weight: 900;
    transition: transform 0.4s ease, background 0.3s ease;
}

.skn-inspection-highlight:hover .skn-inspection-check {
    transform: rotate(360deg);
    background: rgba(8, 102, 213, 0.20);
}

/* Hero button */

.skn-inspection-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 15px 22px;
    border: 1px solid var(--skn-blue);
    border-radius: 7px;
    background: var(--skn-blue);
    color: var(--skn-white);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 9px 25px rgba(8, 102, 213, 0.18);
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.skn-inspection-button > span {
    font-size: 21px;
    transition: transform 0.3s ease;
}

.skn-inspection-button:hover {
    transform: translateY(-4px);
    background: var(--skn-dark);
    color: var(--skn-white);
    box-shadow: 0 15px 30px rgba(11, 33, 75, 0.20);
}

.skn-inspection-button:hover > span {
    transform: translateX(5px);
}

/* =========================================
   HERO IMAGE AND HOVER ANIMATION
========================================= */

.skn-inspection-visual {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 440px;
    place-items: center;
    isolation: isolate;
    animation: sknInspectionVisualEnter 1s ease both;
    animation-delay: 0.15s;
}

@keyframes sknInspectionVisualEnter {
    from {
        opacity: 0;
        transform: translateX(25px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.skn-inspection-main-image {
    position: relative;
    z-index: 1;
    width: 85%;
    height: 365px;
    overflow: hidden;
    border: 7px solid rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    background: #dcecff;
    box-shadow:
        0 25px 65px rgba(8, 102, 213, 0.18),
        0 0 35px rgba(8, 102, 213, 0.08);
    transform: rotate(-4deg);
    transition:
        transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.5s ease;
}

.skn-inspection-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}

.skn-inspection-main-image:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow:
        0 35px 75px rgba(8, 102, 213, 0.24),
        0 0 40px rgba(8, 102, 213, 0.12);
}

.skn-inspection-main-image:hover img {
    transform: scale(1.12);
    filter: saturate(1.15) contrast(1.04);
}

/* Rotating technical circles */

.skn-inspection-orbit {
    position: absolute;
    z-index: -1;
    width: 390px;
    height: 390px;
    border: 2px solid rgba(8, 102, 213, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

.skn-orbit-one {
    animation: sknInspectionOrbit 25s linear infinite;
}

.skn-orbit-one::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 65px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--skn-blue);
    box-shadow: 0 0 14px rgba(8, 102, 213, 0.5);
}

.skn-orbit-two {
    width: 335px;
    height: 335px;
    border-style: dashed;
    border-color: rgba(8, 102, 213, 0.2);
    animation: sknInspectionOrbit 35s linear infinite reverse;
}

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

/* Secondary circular image */

.skn-inspection-inset {
    position: absolute;
    z-index: 3;
    right: -2px;
    bottom: 23px;
    width: 145px;
    height: 145px;
    overflow: hidden;
    border: 6px solid var(--skn-white);
    border-radius: 50%;
    background: #dcecff;
    box-shadow:
        0 15px 35px rgba(8, 102, 213, 0.20),
        0 0 25px rgba(8, 102, 213, 0.10);
    animation: sknInspectionFloat 4s ease-in-out infinite;
}

.skn-inspection-inset img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.skn-inspection-inset:hover img {
    transform: scale(1.2);
}

@keyframes sknInspectionFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* Floating information badges */

.skn-inspection-badge {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    border: 1px solid rgba(8, 102, 213, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 35px rgba(8, 102, 213, 0.14);
    animation: sknInspectionBadgeFloat 4s ease-in-out infinite;
}

.skn-badge-top {
    top: 15px;
    right: -3px;
}

.skn-badge-bottom {
    bottom: 45px;
    left: -12px;
    animation-delay: -2s;
}

.skn-inspection-badge-icon {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border-radius: 11px;
    background: #e5f1ff;
    color: var(--skn-blue);
    font-size: 23px;
    font-weight: 800;
}

.skn-inspection-badge strong,
.skn-inspection-badge small {
    display: block;
}

.skn-inspection-badge strong {
    color: var(--skn-dark);
    font-size: 13px;
    font-weight: 800;
}

.skn-inspection-badge small {
    margin-top: 4px;
    color: var(--skn-text);
    font-size: 10px;
}

@keyframes sknInspectionBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.skn-inspection-image-dots {
    position: absolute;
    z-index: -1;
    right: -8px;
    bottom: 0;
    width: 90px;
    height: 90px;
    background-image: radial-gradient(
        var(--skn-blue) 2px,
        transparent 2px
    );
    background-size: 14px 14px;
    opacity: 0.25;
}

/* =========================================
   QUALITY CHECKPOINTS HEADING
========================================= */

.skn-quality-checkpoints {
    position: relative;
    padding-top: 40px;
    border-top: 1px solid rgba(8, 102, 213, 0.12);
    scroll-margin-top: 30px;
}

.skn-quality-heading {
    margin-bottom: 30px;
    text-align: center;
}

.skn-quality-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 13px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.skn-quality-eyebrow span {
    display: inline-block;
    width: 32px;
    height: 3px;
    border-radius: 5px;
    background: var(--skn-blue);
}

.skn-quality-heading h2 {
    margin: 0 0 12px;
    color: var(--skn-dark);
    font-size: clamp(29px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.3;
}

.skn-quality-heading h2 span {
    color: var(--skn-blue);
}

.skn-quality-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================
   SEVEN QUALITY CARDS
========================================= */

.skn-quality-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.skn-quality-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 265px;
    padding: 22px 13px 19px;
    overflow: hidden;
    border: 1px solid var(--skn-border);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 8px 25px rgba(8, 102, 213, 0.045);
    text-align: center;
    transition:
        transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}

/* Animated shine */

.skn-quality-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 75%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(8, 102, 213, 0.08),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
}

.skn-quality-card:hover::before {
    left: 150%;
}

.skn-quality-card:hover {
    transform: translateY(-8px);
    border-color: rgba(8, 102, 213, 0.4);
    background: var(--skn-white);
    box-shadow: 0 20px 40px rgba(8, 102, 213, 0.12);
}

/* Card icons */

.skn-quality-icon {
    position: relative;
    display: grid;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    place-items: center;
    margin-bottom: 12px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: linear-gradient(145deg, #edf6ff, #dcecff);
    color: var(--skn-blue);
    transition:
        transform 0.5s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}

.skn-quality-icon svg {
    display: block;
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.skn-quality-card:hover .skn-quality-icon {
    transform: rotate(-8deg) scale(1.08);
    border-color: rgba(8, 102, 213, 0.12);
    background: var(--skn-blue);
    color: var(--skn-white);
}

/* Number */

.skn-quality-number {
    display: block;
    margin-bottom: 10px;
    color: var(--skn-blue);
    font-size: 15px;
    font-weight: 800;
    opacity: 0.55;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.skn-quality-card:hover .skn-quality-number {
    opacity: 1;
    transform: translateY(-2px);
}

/* Card heading */

.skn-quality-card h3 {
    margin: 0 0 11px;
    color: var(--skn-dark);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
    transition: color 0.3s ease;
}

.skn-quality-card:hover h3 {
    color: var(--skn-blue);
}

/* Card description */

.skn-quality-card p {
    margin: 0;
    color: var(--skn-text);
    font-size: 14.5px;
    line-height: 1.8;
}

.skn-quality-underline {
    display: block;
    width: 28px;
    height: 2px;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0;
    transform: translateY(8px);
    background: var(--skn-blue);
    opacity: 0.55;
    transition:
        width 0.4s ease,
        opacity 0.4s ease,
        transform 0.4s ease;
}

.skn-quality-card:hover .skn-quality-underline {
    width: 55px;
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   ADDITIONAL TESTING NOTE
========================================= */

.skn-inspection-note {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 28px;
    padding: 24px 28px;
    overflow: hidden;
    border: 1px solid rgba(8, 102, 213, 0.10);
    border-radius: 15px;
    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(8, 102, 213, 0.07),
            transparent 30%
        ),
        linear-gradient(110deg, #e5f2ff, #f4f9ff);
}

.skn-inspection-note::after {
    content: "";
    position: absolute;
    top: 0;
    right: -100px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(8, 102, 213, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.skn-inspection-note-icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border-radius: 13px;
    background: var(--skn-blue);
    color: var(--skn-white);
}

.skn-inspection-note-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: sknInspectionGear 18s linear infinite;
}

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

.skn-inspection-note-title {
    min-width: 190px;
}

.skn-inspection-note-title h3 {
    margin: 0 0 5px;
    color: var(--skn-dark);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}

.skn-inspection-note-title span {
    color: var(--skn-text);
    font-size: 13px;
}

.skn-inspection-note-divider {
    width: 1px;
    height: 50px;
    flex: 0 0 1px;
    background: rgba(8, 102, 213, 0.3);
}

.skn-inspection-note > p {
    position: relative;
    z-index: 1;
    flex: 1;
    margin: 0;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.9;
}

.skn-inspection-note-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    padding: 10px 15px 10px 10px;
    border: 1px solid var(--skn-blue);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--skn-blue);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.skn-inspection-note-button > span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    background: var(--skn-blue);
    color: var(--skn-white);
    font-size: 17px;
    transition: transform 0.3s ease;
}

.skn-inspection-note-button:hover {
    transform: translateY(-3px);
    background: var(--skn-blue);
    color: var(--skn-white);
    box-shadow: 0 10px 22px rgba(8, 102, 213, 0.2);
}

.skn-inspection-note-button:hover > span {
    transform: translateX(3px);
    background: var(--skn-white);
    color: var(--skn-blue);
}

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

@media (max-width: 1150px) {
    .skn-inspection-hero {
        gap: 30px;
    }

    .skn-inspection-content h2 {
        font-size: 37px;
    }

    .skn-inspection-visual {
        min-height: 380px;
    }

    .skn-inspection-main-image {
        height: 310px;
    }

    .skn-inspection-orbit {
        width: 335px;
        height: 335px;
    }

    .skn-orbit-two {
        width: 290px;
        height: 290px;
    }

    .skn-inspection-inset {
        width: 120px;
        height: 120px;
    }

    .skn-quality-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 15px;
    }

    .skn-quality-card {
        min-height: 245px;
    }

    .skn-inspection-note {
        flex-wrap: wrap;
    }

    .skn-inspection-note > p {
        min-width: 55%;
    }
}

/* =========================================
   RESPONSIVE MOBILE / TABLET
========================================= */

@media (max-width: 767px) {
    .skn-inspection {
        padding: 55px 0;
    }

    .skn-inspection-container {
        width: calc(100% - 32px);
    }

    .skn-inspection-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }

    .skn-inspection-content h2 {
        font-size: clamp(30px, 7vw, 39px);
        letter-spacing: -0.7px;
    }

    .skn-inspection-content > p {
        font-size: 14px;
        line-height: 1.85;
    }

    .skn-inspection-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .skn-inspection-visual {
        min-height: 360px;
        margin: 0 8px;
    }

    .skn-inspection-main-image {
        width: 87%;
        height: 290px;
    }

    .skn-inspection-orbit {
        width: 310px;
        height: 310px;
    }

    .skn-orbit-two {
        width: 270px;
        height: 270px;
    }

    .skn-inspection-inset {
        right: -2px;
        bottom: 20px;
        width: 105px;
        height: 105px;
    }

    .skn-badge-top {
        top: 7px;
        right: -4px;
    }

    .skn-badge-bottom {
        bottom: 32px;
        left: -5px;
    }

    .skn-inspection-badge {
        gap: 8px;
        padding: 10px 12px;
    }

    .skn-inspection-badge-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 18px;
    }

    .skn-inspection-badge strong {
        font-size: 11px;
    }

    .skn-inspection-badge small {
        font-size: 9px;
    }

    .skn-quality-checkpoints {
        padding-top: 30px;
    }

    .skn-quality-heading h2 {
        font-size: 29px;
    }

    .skn-quality-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .skn-quality-card {
        min-height: 250px;
        padding: 20px 12px 17px;
    }

    .skn-quality-icon {
        width: 65px;
        height: 65px;
        flex-basis: 65px;
    }

    .skn-quality-icon svg {
        width: 33px;
        height: 33px;
    }

    .skn-quality-card h3 {
        font-size: 12px;
    }

    .skn-quality-card p {
        font-size: 11px;
    }

    .skn-inspection-note {
        align-items: flex-start;
        gap: 15px;
        padding: 22px 18px;
    }

    .skn-inspection-note-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .skn-inspection-note-icon svg {
        width: 26px;
        height: 26px;
    }

    .skn-inspection-note-title {
        min-width: 0;
        flex: 1;
    }

    .skn-inspection-note-title h3 {
        font-size: 14px;
    }

    .skn-inspection-note-divider {
        display: none;
    }

    .skn-inspection-note > p {
        flex-basis: 100%;
        min-width: 0;
        font-size: 12px;
    }

    .skn-inspection-note-button {
        flex-basis: auto;
        font-size: 10px;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {
    .skn-inspection {
        padding: 42px 0;
    }

    .skn-inspection-container {
        width: calc(100% - 26px);
    }

    .skn-inspection-content h2 {
        font-size: 29px;
    }

    .skn-inspection-visual {
        min-height: 310px;
    }

    .skn-inspection-main-image {
        height: 245px;
        border-width: 5px;
        border-radius: 18px;
    }

    .skn-inspection-orbit {
        width: 255px;
        height: 255px;
    }

    .skn-orbit-two {
        width: 220px;
        height: 220px;
    }

    .skn-inspection-inset {
        width: 83px;
        height: 83px;
        border-width: 4px;
    }

    .skn-inspection-badge {
        padding: 8px;
    }

    .skn-badge-bottom {
        left: -5px;
        bottom: 24px;
    }

    .skn-quality-eyebrow {
        gap: 8px;
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .skn-quality-eyebrow span {
        width: 19px;
    }

    .skn-quality-heading h2 {
        font-size: 25px;
    }

    .skn-quality-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .skn-quality-card {
        min-height: 0;
        display: grid;
        grid-template-columns: 55px 30px 1fr;
        align-items: center;
        column-gap: 11px;
        row-gap: 4px;
        padding: 17px 13px;
        text-align: left;
    }

    .skn-quality-icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 52px;
        height: 52px;
        margin: 0;
    }

    .skn-quality-icon svg {
        width: 27px;
        height: 27px;
    }

    .skn-quality-number {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0;
        font-size: 12px;
    }

    .skn-quality-card h3 {
        grid-column: 3;
        grid-row: 1;
        align-self: end;
        margin: 0;
        font-size: 12px;
    }

    .skn-quality-card p {
        grid-column: 2 / 4;
        grid-row: 2;
        font-size: 11px;
    }

    .skn-quality-underline {
        display: none;
    }

    .skn-inspection-note {
        gap: 12px;
        padding: 17px 13px;
    }

    .skn-inspection-note-title h3 {
        font-size: 13px;
    }

    .skn-inspection-note-title span {
        font-size: 10px;
    }

    .skn-inspection-note > p {
        line-height: 1.8;
    }

    .skn-inspection-note-button {
        padding: 8px 12px 8px 8px;
    }
}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
    .skn-inspection *,
    .skn-inspection *::before,
    .skn-inspection *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================
   SKN REWORK & REPAIR SECTION
========================================= */


.skn-rework-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0 50px;
    background: var(--skn-light);
    color: var(--skn-text);
    font-family: inherit;
}

/* Animated technical background pattern */

.rework-bg-pattern {
    position: absolute;
    inset: -30%;
    z-index: -3;
    pointer-events: none;
    opacity: 0.55;

    background-image:
        radial-gradient(
            circle,
            rgba(8, 102, 213, 0.24) 1.4px,
            transparent 1.8px
        ),
        linear-gradient(
            rgba(8, 102, 213, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 102, 213, 0.055) 1px,
            transparent 1px
        );

    background-size: 30px 30px, 60px 60px, 60px 60px;

    animation: reworkPatternRotate 55s linear infinite;
    transform-origin: center;
}

/* Glowing light effects */

.rework-glow {
    position: absolute;
    z-index: -2;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(75px);
    opacity: 0.5;
    animation: reworkGlowPulse 7s ease-in-out infinite alternate;
}

.rework-glow-one {
    top: -180px;
    left: -120px;
    background: rgba(64, 164, 255, 0.25);
}

.rework-glow-two {
    right: -180px;
    bottom: -100px;
    background: rgba(8, 102, 213, 0.18);
    animation-delay: 2s;
}

.rework-container {
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

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

.rework-hero {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    align-items: center;
    gap: 55px;
    margin-bottom: 80px;
}

.rework-content {
    animation: reworkFadeUp 0.9s ease both;
}

.rework-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 17px;
    margin-bottom: 24px;
    border: 1px solid rgba(8, 102, 213, 0.15);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.tag-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--skn-blue);
    box-shadow: 0 0 0 5px rgba(8, 102, 213, 0.10);
    animation: reworkDotPulse 2s infinite;
}

.rework-content h2 {
    margin: 0 0 20px;
    color: var(--skn-dark);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.rework-content h2 span {
    display: block;
    color: var(--skn-blue);
}

.rework-heading-line {
    width: 65px;
    height: 4px;
    margin: 0 0 23px;
    border-radius: 10px;
    background: var(--skn-blue);
    position: relative;
    overflow: hidden;
}

.rework-heading-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #8fd3ff;
    transform: translateX(-100%);
    animation: reworkLineMove 3s ease-in-out infinite;
}

.rework-description {
    max-width: 610px;
    margin: 0;
    color: var(--skn-text);
    font-size: 16px;
    line-height: 1.9;
}

/* Feature pills */

.rework-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.rework-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border: 1px solid transparent;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--skn-dark);
    font-size: 13px;
    line-height: 1.5;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.rework-feature:hover {
    transform: translateY(-5px);
    border-color: var(--skn-border);
    box-shadow: 0 12px 28px rgba(8, 102, 213, 0.12);
}

.feature-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-bottom: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1385ff, #064ab7);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 15px rgba(8, 102, 213, 0.2);
    transition: transform 0.4s ease;
}

.rework-feature:hover .feature-icon {
    transform: rotate(12deg) scale(1.08);
}

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

.rework-visual {
    position: relative;
    padding: 10px 8px 35px;
    animation: reworkFadeUp 1.1s ease both;
}

.rework-image-frame {
    position: relative;
    height: 370px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.95);
    border-radius: 30px 30px 30px 8px;
    box-shadow: 0 24px 60px rgba(11, 33, 75, 0.15);
    transform: perspective(1000px) rotateY(-3deg);
    transition:
        transform 0.65s ease,
        box-shadow 0.65s ease;
}

.rework-image-frame::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 1px solid rgba(8, 102, 213, 0.15);
    border-radius: inherit;
    pointer-events: none;
}

.rework-image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.6s ease;
}

.rework-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(8, 102, 213, 0.12),
        transparent 60%
    );
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.rework-visual:hover .rework-image-frame {
    transform: perspective(1000px) rotateY(0deg) translateY(-5px);
    box-shadow: 0 32px 75px rgba(8, 102, 213, 0.22);
}

.rework-visual:hover .rework-image-frame img {
    transform: scale(1.09);
    filter: saturate(1.12);
}

.rework-visual:hover .rework-image-overlay {
    opacity: 0.45;
}

/* Image information badge */

.rework-image-badge {
    position: absolute;
    left: -10px;
    bottom: 55px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 21px;
    border: 1px solid rgba(223, 235, 250, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 35px rgba(11, 33, 75, 0.13);
    animation: reworkBadgeFloat 4s ease-in-out infinite;
}

.badge-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: var(--skn-light);
    color: var(--skn-blue);
    font-size: 25px;
}

.rework-image-badge strong,
.rework-image-badge small {
    display: block;
}

.rework-image-badge strong {
    color: var(--skn-dark);
    font-size: 14px;
    margin-bottom: 5px;
}

.rework-image-badge small {
    color: var(--skn-text);
    font-size: 12px;
}

.rework-image-caption {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    color: var(--skn-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.rework-image-caption > span {
    width: 32px;
    height: 2px;
    background: var(--skn-blue);
}

.rework-image-caption b {
    color: #8ca7c9;
}

/* =========================================
   REWORK SCOPE
========================================= */

.rework-scope {
    position: relative;
    padding: 35px 30px 28px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.48);
    box-shadow:
        0 20px 60px rgba(11, 33, 75, 0.035),
        inset 0 0 0 1px rgba(8, 102, 213, 0.025);
    backdrop-filter: blur(10px);
}

.scope-heading {
    margin: 0 0 26px;
}

.scope-eyebrow {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    color: var(--skn-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.scope-eyebrow span {
    width: 45px;
    height: 2px;
    background: var(--skn-blue);
}

.scope-heading h3 {
    margin: 0 0 8px;
    color: var(--skn-dark);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.25;
}

.scope-heading p {
    max-width: 690px;
    margin: 0;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.8;
}

/* =========================================
   SERVICE CARDS
========================================= */

.rework-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.rework-card {
    position: relative;
    min-width: 0;
    padding: 22px 20px 25px;
    overflow: hidden;
    border: 1px solid var(--skn-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.75);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}

/* Moving highlight across each card */

.rework-card::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -70%;
    width: 45%;
    height: 300%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.9),
        transparent
    );
    transform: rotate(25deg);
    transition: left 0.75s ease;
    pointer-events: none;
}

.rework-card:hover::before {
    left: 140%;
}

.rework-card:hover {
    transform: translateY(-9px);
    border-color: rgba(8, 102, 213, 0.42);
    background: #fff;
    box-shadow: 0 20px 40px rgba(8, 102, 213, 0.11);
}

.scope-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 17px;
    border: 1px solid rgba(8, 102, 213, 0.09);
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #dceeff);
    color: var(--skn-blue);
    font-size: 24px;
    box-shadow: 0 5px 16px rgba(8, 102, 213, 0.08);
    transition:
        transform 0.45s ease,
        color 0.35s ease,
        background 0.35s ease;
}

.rework-card:hover .scope-icon {
    transform: rotate(-8deg) scale(1.1);
    background: var(--skn-blue);
    color: #fff;
}

.scope-number {
    display: block;
    margin-bottom: 9px;
    color: var(--skn-blue);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

.rework-card h4 {
    margin: 0 0 12px;
    color: var(--skn-dark);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rework-card p {
    margin: 0;
    color: var(--skn-text);
    font-size: 13px;
    line-height: 1.7;
}

.card-bottom-line {
    display: block;
    width: 35px;
    height: 3px;
    margin-top: 20px;
    border-radius: 5px;
    background: var(--skn-blue);
    transition: width 0.4s ease;
}

.rework-card:hover .card-bottom-line {
    width: 75px;
}

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

.rework-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    min-height: 115px;
    margin-top: 22px;
    padding: 22px 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0.98),
        rgba(231, 244, 255, 0.93)
    );
    box-shadow: 0 12px 35px rgba(8, 102, 213, 0.07);
}

.cta-shield {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e5f3ff, #c4e2ff);
    color: var(--skn-blue);
    font-size: 34px;
    transition: transform 0.5s ease;
}

.rework-cta:hover .cta-shield {
    transform: rotate(10deg) scale(1.06);
}

.cta-divider {
    position: relative;
    z-index: 2;
    width: 2px;
    height: 52px;
    flex-shrink: 0;
    background: var(--skn-blue);
}

.cta-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.cta-content h4 {
    margin: 0 0 7px;
    color: var(--skn-dark);
    font-size: 17px;
    font-weight: 800;
}

.cta-content p {
    margin: 0;
    color: var(--skn-text);
    font-size: 13px;
    line-height: 1.7;
}

.rework-cta-button {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-shrink: 0;
    padding: 14px 22px;
    border: 1px solid var(--skn-blue);
    border-radius: 50px;
    background: var(--skn-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(8, 102, 213, 0.17);
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.rework-cta-button:hover {
    transform: translateY(-3px);
    background: var(--skn-dark);
    border-color: var(--skn-dark);
    color: #fff;
    box-shadow: 0 12px 26px rgba(11, 33, 75, 0.2);
}

.rework-cta-button i {
    transition: transform 0.35s ease;
}

.rework-cta-button:hover i {
    transform: translateX(5px);
}

/* Decorative CTA image on right */

.cta-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 24%;
    height: 100%;
    opacity: 0.15;
    background-image: url(
        "../images/about-1.jpg"
    );
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(90deg, transparent, #000);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none;
}

/* =========================================
   ANIMATION KEYFRAMES
========================================= */

@keyframes reworkPatternRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes reworkGlowPulse {
    from {
        transform: scale(0.9);
        opacity: 0.28;
    }

    to {
        transform: scale(1.15);
        opacity: 0.58;
    }
}

@keyframes reworkFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes reworkDotPulse {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(8, 102, 213, 0.10);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(8, 102, 213, 0.04);
    }
}

@keyframes reworkLineMove {
    0%, 100% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(100%);
    }
}

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

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

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

@media (max-width: 1100px) {
    .rework-hero {
        gap: 30px;
    }

    .rework-content h2 {
        font-size: 40px;
    }

    .rework-image-frame {
        height: 330px;
    }

    .rework-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rework-card h4 {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .skn-rework-section {
        padding: 60px 0 45px;
    }

    .rework-container {
        width: min(100% - 30px, 600px);
    }

    .rework-hero {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 55px;
    }

    .rework-content h2 {
        font-size: clamp(32px, 7vw, 43px);
        letter-spacing: -0.8px;
    }

    .rework-description {
        font-size: 15px;
    }

    .rework-features {
        gap: 10px;
    }

    .rework-feature {
        padding: 9px 12px;
        font-size: 12px;
    }

    .feature-icon {
        width: 38px;
        height: 38px;
    }

    .rework-visual {
        padding: 5px 5px 35px;
    }

    .rework-image-frame {
        height: 320px;
        border-radius: 22px;
        transform: none;
    }

    .rework-visual:hover .rework-image-frame {
        transform: translateY(-4px);
    }

    .rework-image-badge {
        left: 0;
        bottom: 55px;
        padding: 12px 15px;
    }

    .rework-scope {
        padding: 26px 18px 20px;
        border-radius: 20px;
    }

    .rework-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .rework-card {
        padding: 18px 15px 20px;
    }

    .scope-icon {
        width: 50px;
        height: 50px;
        font-size: 21px;
    }

    .rework-card h4 {
        font-size: 14px;
    }

    .rework-card p {
        font-size: 12px;
    }

    .rework-cta {
        flex-wrap: wrap;
        gap: 15px;
        padding: 22px 18px;
    }

    .cta-content {
        flex-basis: calc(100% - 100px);
    }

    .cta-divider {
        display: none;
    }

    .rework-cta-button {
        margin-left: 83px;
    }

    .cta-image {
        width: 45%;
    }
}

@media (max-width: 480px) {
    .rework-tag {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .rework-content h2 {
        font-size: 32px;
    }

    .rework-features {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rework-feature {
        width: fit-content;
        min-width: 175px;
    }

    .rework-image-frame {
        height: 250px;
    }

    .rework-image-badge {
        gap: 10px;
        max-width: 90%;
    }

    .badge-icon {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .rework-image-badge strong {
        font-size: 12px;
    }

    .rework-image-caption {
        gap: 7px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .scope-heading h3 {
        font-size: 25px;
    }

    .scope-heading p {
        font-size: 13px;
    }

    .rework-grid {
        grid-template-columns: 1fr;
    }

    .rework-card {
        padding: 20px;
    }

    .rework-card h4 {
        font-size: 15px;
    }

    .rework-card p {
        font-size: 13px;
    }

    .rework-cta {
        gap: 12px;
    }

    .cta-shield {
        width: 52px;
        height: 52px;
        font-size: 27px;
    }

    .cta-content {
        flex-basis: calc(100% - 70px);
    }

    .cta-content h4 {
        font-size: 14px;
        line-height: 1.5;
    }

    .cta-content p {
        font-size: 12px;
    }

    .rework-cta-button {
        margin-left: 0;
        width: 100%;
    }
}

/* Respect reduced-motion accessibility preferences */

@media (prefers-reduced-motion: reduce) {
    .skn-rework-section *,
    .skn-rework-section *::before,
    .skn-rework-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   SKN INDUSTRIAL ELECTRONICS & AUTOMATION
========================================== */


.skn-industrial-section,
.skn-industrial-section * {
    box-sizing: border-box;
}

.skn-industrial-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    color: var(--skn-text);
    background:
        radial-gradient(
            ellipse at 8% 12%,
            rgba(8, 102, 213, 0.10),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 92% 46%,
            rgba(70, 166, 255, 0.10),
            transparent 32%
        ),
        var(--skn-light);
    font-family: "Poppins", Arial, sans-serif;
}

/* Animated engineering grid */
.skn-industrial-grid-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.40;
    background-image:
        linear-gradient(
            rgba(8, 102, 213, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 102, 213, 0.055) 1px,
            transparent 1px
        );
    background-size: 44px 44px;
    animation: skn-grid-drift 30s linear infinite;
}

/* Rotating background lights */
.skn-industrial-orbit {
    position: absolute;
    z-index: -1;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(8, 102, 213, 0.12);
    border-radius: 50%;
    pointer-events: none;
    animation: skn-orbit-rotate 32s linear infinite;
}

.skn-orbit-one {
    top: 90px;
    left: -270px;
    box-shadow:
        0 0 60px rgba(8, 102, 213, 0.05),
        inset 0 0 60px rgba(8, 102, 213, 0.035);
}

.skn-orbit-two {
    right: -300px;
    top: 700px;
    width: 560px;
    height: 560px;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 45s;
}

.skn-industrial-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    position: relative;
}

/* Heading */
.skn-industrial-heading {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
    animation: skn-fade-up 0.8s ease both;
}

.skn-industrial-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.skn-industrial-pulse,
.skn-industrial-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--skn-blue);
    box-shadow: 0 0 0 5px rgba(8, 102, 213, 0.10);
    animation: skn-pulse 2s ease-in-out infinite;
}

.skn-industrial-heading h2 {
    margin: 0 0 22px;
    color: var(--skn-dark);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -1.2px;
}

.skn-industrial-heading h2 span {
    display: block;
    color: var(--skn-blue);
}

.skn-industrial-heading > p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.9;
}

/* Main two-column layout */
.skn-industrial-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
    margin-bottom: 105px;
}

/* Image */
.skn-industrial-visual {
    position: relative;
    min-width: 0;
    padding: 0 18px 18px 0;
}

.skn-industrial-image-frame {
    position: relative;
    overflow: hidden;
    height: 470px;
    border-radius: 22px;
    background: #dcecff;
    box-shadow: 0 25px 65px rgba(11, 33, 75, 0.15);
}

.skn-industrial-image-frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: inherit;
    pointer-events: none;
}

.skn-industrial-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 0.9s cubic-bezier(.2, .7, .2, 1),
        filter 0.7s ease;
}

.skn-industrial-image-frame:hover img {
    transform: scale(1.10) rotate(1deg);
    filter: saturate(1.12) contrast(1.04);
}

.skn-industrial-image-shine {
    position: absolute;
    z-index: 1;
    top: -100%;
    left: -70%;
    width: 45%;
    height: 300%;
    opacity: 0;
    pointer-events: none;
    transform: rotate(25deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transition: opacity 0.3s ease;
}

.skn-industrial-image-frame:hover .skn-industrial-image-shine {
    opacity: 1;
    animation: skn-image-shine 1.2s ease forwards;
}

.skn-industrial-image-label {
    position: absolute;
    z-index: 2;
    left: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    color: var(--skn-white);
    background: rgba(11, 33, 75, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.skn-industrial-status-dot {
    background: #6ce6b4;
    box-shadow: 0 0 0 5px rgba(108, 230, 180, 0.12);
}

/* Floating information card */
.skn-industrial-floating-card {
    position: absolute;
    z-index: 3;
    right: -15px;
    bottom: 52px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 290px;
    padding: 18px;
    border: 1px solid rgba(223, 235, 250, 0.9);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 15px 40px rgba(11, 33, 75, 0.13);
    animation: skn-float 4s ease-in-out infinite;
}

.skn-industrial-floating-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 10px;
    color: var(--skn-blue);
    background: #eaf3ff;
}

.skn-industrial-floating-icon svg {
    width: 27px;
    height: 27px;
}

.skn-industrial-floating-card strong,
.skn-industrial-floating-card span {
    display: block;
}

.skn-industrial-floating-card strong {
    margin-bottom: 5px;
    color: var(--skn-dark);
    font-size: 13px;
}

.skn-industrial-floating-card div:last-child span {
    color: var(--skn-text);
    font-size: 10px;
    line-height: 1.6;
}

.skn-industrial-decoration {
    position: absolute;
    z-index: -1;
    right: -5px;
    top: -15px;
    width: 130px;
    height: 130px;
    border: 2px solid rgba(8, 102, 213, 0.23);
    border-radius: 20px;
    transform: rotate(12deg);
    animation: skn-decoration-rotate 18s linear infinite;
}

/* Main content */
.skn-industrial-content {
    animation: skn-fade-up 0.9s ease both;
}

.skn-industrial-small-title {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--skn-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    line-height: 1.7;
}

.skn-industrial-content h3 {
    margin: 0 0 20px;
    color: var(--skn-dark);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.6px;
}

.skn-industrial-content h3 span {
    color: var(--skn-blue);
}

.skn-industrial-description {
    margin: 0 0 24px;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.95;
}

.skn-industrial-features {
    display: grid;
    gap: 13px;
    margin-bottom: 30px;
}

.skn-industrial-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--skn-dark);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
    transition: transform 0.3s ease, color 0.3s ease;
}

.skn-industrial-feature:hover {
    color: var(--skn-blue);
    transform: translateX(7px);
}

.skn-industrial-check {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border-radius: 50%;
    color: var(--skn-blue);
    background: #e2efff;
    font-size: 13px;
    font-weight: 800;
}

.skn-industrial-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 15px 23px;
    color: #fff;
    background: var(--skn-blue);
    border: 1px solid var(--skn-blue);
    border-radius: 7px;
    box-shadow: 0 10px 24px rgba(8, 102, 213, 0.20);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.skn-industrial-button:hover {
    color: #fff;
    background: var(--skn-dark);
    border-color: var(--skn-dark);
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(11, 33, 75, 0.20);
}

.skn-industrial-button-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.skn-industrial-button:hover .skn-industrial-button-arrow {
    transform: translate(3px, -3px);
}

/* Application section */
.skn-industrial-applications {
    margin-bottom: 80px;
}

.skn-industrial-app-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 32px;
}

.skn-industrial-app-heading h3 {
    margin: 0;
    color: var(--skn-dark);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.35;
}

.skn-industrial-app-heading > p {
    max-width: 400px;
    margin: 0 0 4px;
    color: var(--skn-text);
    font-size: 13px;
    line-height: 1.9;
}

.skn-industrial-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.skn-industrial-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--skn-border);
    border-radius: 14px;
    background: var(--skn-white);
    box-shadow: 0 8px 25px rgba(11, 33, 75, 0.045);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
    animation: skn-fade-up 0.7s ease both;
}

.skn-industrial-card:hover {
    transform: translateY(-10px);
    border-color: rgba(8, 102, 213, 0.45);
    box-shadow: 0 22px 45px rgba(11, 33, 75, 0.12);
}

.skn-industrial-card-image {
    position: relative;
    height: 215px;
    overflow: hidden;
    background: #e3edfa;
}

.skn-industrial-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(11, 33, 75, 0.02) 40%,
        rgba(11, 33, 75, 0.42) 100%
    );
    transition: opacity 0.4s ease;
}

.skn-industrial-card:hover .skn-industrial-card-image::after {
    opacity: 0.7;
}

.skn-industrial-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.8s cubic-bezier(.2, .7, .2, 1),
        filter 0.5s ease;
}

.skn-industrial-card:hover .skn-industrial-card-image img {
    transform: scale(1.12);
    filter: saturate(1.15);
}

.skn-industrial-card-number {
    position: absolute;
    z-index: 2;
    right: 15px;
    bottom: 14px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    opacity: 0.9;
    transition: transform 0.4s ease;
}

.skn-industrial-card:hover .skn-industrial-card-number {
    transform: translateY(-5px);
}

.skn-industrial-card-body {
    position: relative;
    padding: 27px 22px 25px;
}

.skn-industrial-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-top: -49px;
    margin-bottom: 20px;
    position: relative;
    z-index: 3;
    color: var(--skn-blue);
    background: #fff;
    border: 1px solid var(--skn-border);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(11, 33, 75, 0.08);
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.skn-industrial-card:hover .skn-industrial-card-icon {
    color: #fff;
    background: var(--skn-blue);
    transform: rotate(-8deg);
}

.skn-industrial-card-body h4 {
    margin: 0 0 12px;
    color: var(--skn-dark);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.skn-industrial-card:hover .skn-industrial-card-body h4 {
    color: var(--skn-blue);
}

.skn-industrial-card-body p {
    margin: 0;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.9;
}

/* Project review CTA */
.skn-industrial-review {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 25px;
    overflow: hidden;
    padding: 38px 40px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(69, 164, 255, 0.26),
            transparent 38%
        ),
        var(--skn-dark);
    box-shadow: 0 20px 50px rgba(11, 33, 75, 0.14);
}

.skn-industrial-review-pattern {
    position: absolute;
    z-index: -1;
    inset: -50%;
    pointer-events: none;
    opacity: 0.25;
    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.8) 1px,
            transparent 1.6px
        );
    background-size: 24px 24px;
    animation: skn-grid-drift 35s linear infinite;
}

.skn-industrial-review-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 14px;
    transition: transform 0.4s ease, background 0.4s ease;
}

.skn-industrial-review:hover .skn-industrial-review-icon {
    transform: rotate(8deg) scale(1.05);
    background: rgba(255, 255, 255, 0.17);
}

.skn-industrial-review-icon svg {
    width: 30px;
    height: 30px;
}

.skn-industrial-review-content {
    flex: 1;
    min-width: 0;
}

.skn-industrial-review-content > span {
    display: block;
    margin-bottom: 9px;
    color: #8bc6ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.skn-industrial-review-content h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-industrial-review-content p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.9;
}

.skn-industrial-review-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex: 0 0 auto;
    padding: 15px 19px;
    color: var(--skn-dark);
    background: #fff;
    border: 1px solid #fff;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.skn-industrial-review-button:hover {
    color: #fff;
    background: var(--skn-blue);
    border-color: var(--skn-blue);
    transform: translateY(-3px);
}

.skn-industrial-review-button span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.skn-industrial-review-button:hover span {
    transform: translateX(4px);
}

/* Animations */
@keyframes skn-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes skn-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes skn-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(8, 102, 213, 0.10);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(8, 102, 213, 0.035);
    }
}

@keyframes skn-orbit-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes skn-decoration-rotate {
    from {
        transform: rotate(12deg);
    }
    to {
        transform: rotate(372deg);
    }
}

@keyframes skn-grid-drift {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 88px 88px;
    }
}

@keyframes skn-image-shine {
    from {
        left: -70%;
    }
    to {
        left: 150%;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .skn-industrial-section {
        padding: 75px 0;
    }

    .skn-industrial-main {
        gap: 35px;
        margin-bottom: 75px;
    }

    .skn-industrial-image-frame {
        height: 400px;
    }

    .skn-industrial-floating-card {
        right: -8px;
        bottom: 30px;
        max-width: 245px;
        padding: 13px;
    }

    .skn-industrial-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .skn-industrial-review {
        flex-wrap: wrap;
        padding: 30px;
    }

    .skn-industrial-review-content {
        flex-basis: calc(100% - 100px);
    }

    .skn-industrial-review-button {
        margin-left: 91px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .skn-industrial-section {
        padding: 60px 0;
    }

    .skn-industrial-container {
        width: calc(100% - 30px);
    }

    .skn-industrial-heading {
        margin-bottom: 42px;
    }

    .skn-industrial-heading h2 {
        font-size: 30px;
        letter-spacing: -0.6px;
    }

    .skn-industrial-heading > p {
        font-size: 13px;
    }

    .skn-industrial-main {
        grid-template-columns: 1fr;
        gap: 38px;
        margin-bottom: 65px;
    }

    .skn-industrial-visual {
        padding-right: 8px;
        padding-bottom: 10px;
    }

    .skn-industrial-image-frame {
        height: 330px;
        border-radius: 15px;
    }

    .skn-industrial-floating-card {
        right: -2px;
        bottom: 23px;
        max-width: 250px;
    }

    .skn-industrial-decoration {
        width: 85px;
        height: 85px;
    }

    .skn-industrial-content h3 {
        font-size: 28px;
    }

    .skn-industrial-description {
        font-size: 13px;
    }

    .skn-industrial-applications {
        margin-bottom: 60px;
    }

    .skn-industrial-app-heading {
        display: block;
        margin-bottom: 25px;
    }

    .skn-industrial-app-heading h3 {
        font-size: 27px;
    }

    .skn-industrial-app-heading > p {
        margin-top: 12px;
        font-size: 12px;
    }

    .skn-industrial-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .skn-industrial-card-image {
        height: 230px;
    }

    .skn-industrial-review {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 25px 22px;
        border-radius: 12px;
    }

    .skn-industrial-review-content {
        flex-basis: auto;
    }

    .skn-industrial-review-button {
        margin-left: 0;
        justify-self: start;
    }
}

/* Small mobile */
@media (max-width: 380px) {
    .skn-industrial-heading h2 {
        font-size: 26px;
    }

    .skn-industrial-image-frame {
        height: 270px;
    }

    .skn-industrial-floating-card {
        max-width: 220px;
    }

    .skn-industrial-card-body {
        padding-right: 17px;
        padding-left: 17px;
    }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skn-industrial-section *,
    .skn-industrial-section *::before,
    .skn-industrial-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==============================================
   SKN AUTOMOTIVE & ELECTRIC MOBILITY
   ============================================== */


/* Main section */

.skn-automotive-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 60px 0;
    background: var(--skn-light);
    color: var(--skn-text);
}

.skn-automotive-section .container {
    position: relative;
    z-index: 2;
}

/* Rotating background pattern */

.skn-automotive-pattern {
    position: absolute;
    z-index: -1;
    top: -290px;
    right: -250px;
    width: 780px;
    height: 780px;
    border: 1px solid rgba(8, 102, 213, 0.10);
    border-radius: 50%;
    pointer-events: none;
    animation: skn-automotive-rotate 55s linear infinite;
}

.skn-automotive-pattern::before,
.skn-automotive-pattern::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(8, 102, 213, 0.13);
    border-radius: 50%;
    inset: 45px;
}

.skn-automotive-pattern::after {
    inset: 105px;
    border-style: dashed;
    border-color: rgba(8, 102, 213, 0.18);
}

/* Animated lighting */

.skn-automotive-glow {
    position: absolute;
    z-index: -1;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    filter: blur(95px);
    pointer-events: none;
    opacity: 0.32;
    animation: skn-automotive-light 9s ease-in-out infinite alternate;
}

.skn-automotive-glow-one {
    top: 10%;
    left: -210px;
    background: rgba(8, 102, 213, 0.27);
}

.skn-automotive-glow-two {
    right: -210px;
    bottom: 15%;
    background: rgba(76, 169, 255, 0.28);
    animation-delay: 2.5s;
}

@keyframes skn-automotive-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes skn-automotive-light {
    from {
        transform: translate(0, 0) scale(0.85);
        opacity: 0.20;
    }

    to {
        transform: translate(35px, -30px) scale(1.15);
        opacity: 0.42;
    }
}

/* Header */

.skn-automotive-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--skn-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1.6;
}

.skn-automotive-eyebrow-line {
    width: 34px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 5px;
    background: var(--skn-blue);
}

.skn-automotive-heading {
    margin: 0 0 20px;
    color: var(--skn-dark);
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -1px;
}

.skn-automotive-heading > span {
    display: block;
    color: var(--skn-blue);
}

.skn-automotive-intro {
    max-width: 790px;
    margin: 0;
    color: var(--skn-text);
    font-size: 16px;
    line-height: 1.9;
}

/* Header badge */

.skn-automotive-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--skn-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 35px rgba(11, 33, 75, 0.06);
    text-align: left;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.skn-automotive-header-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(11, 33, 75, 0.10);
}

.skn-automotive-badge-icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 13px;
    background: #e6f2ff;
    color: var(--skn-blue);
    font-size: 24px;
}

.skn-automotive-header-badge strong,
.skn-automotive-header-badge span {
    display: block;
}

.skn-automotive-header-badge strong {
    color: var(--skn-dark);
    font-size: 16px;
    font-weight: 800;
}

.skn-automotive-header-badge span {
    margin-top: 5px;
    color: var(--skn-text);
    font-size: 13px;
}

/* Feature image */

.skn-automotive-hero-image {
    position: relative;
    height: 100%;
    min-height: 450px;
    overflow: hidden;
    border-radius: 23px;
    background: #dceafa;
    box-shadow: 0 22px 50px rgba(11, 33, 75, 0.13);
}

.skn-automotive-hero-image > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 450px;
    object-fit: cover;
    transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.skn-automotive-hero-image:hover > img {
    transform: scale(1.09);
}

.skn-automotive-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 33, 75, 0.02) 20%,
        rgba(11, 33, 75, 0.9) 100%
    );
    transition: background 0.4s ease;
}

.skn-automotive-hero-image:hover .skn-automotive-hero-overlay {
    background: linear-gradient(
        180deg,
        rgba(8, 102, 213, 0.07) 15%,
        rgba(11, 33, 75, 0.94) 100%
    );
}

/* Rotating ring over image */

.skn-automotive-tech-ring {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.12);
    pointer-events: none;
    animation: skn-automotive-rotate 18s linear infinite;
}

.skn-automotive-tech-ring::before,
.skn-automotive-tech-ring::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    inset: 12px;
}

.skn-automotive-tech-ring::after {
    inset: 28px;
    border-style: dashed;
}

.skn-automotive-image-content {
    position: absolute;
    right: 30px;
    bottom: 32px;
    left: 30px;
    color: #fff;
    transform: translateY(5px);
    transition: transform 0.4s ease;
}

.skn-automotive-hero-image:hover .skn-automotive-image-content {
    transform: translateY(0);
}

.skn-automotive-image-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    background: rgba(11, 33, 75, 0.48);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    backdrop-filter: blur(8px);
}

.skn-automotive-image-content h3 {
    max-width: 560px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.3;
}

.skn-automotive-image-content p {
    max-width: 510px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    line-height: 1.8;
}

.skn-automotive-image-corner {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 60px;
    height: 60px;
    border-top: 2px solid rgba(255, 255, 255, 0.7);
    border-left: 2px solid rgba(255, 255, 255, 0.7);
    transition: width 0.4s ease, height 0.4s ease;
}

.skn-automotive-hero-image:hover .skn-automotive-image-corner {
    width: 90px;
    height: 90px;
}

/* Introduction card */

.skn-automotive-intro-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: clamp(25px, 3vw, 39px);
    border: 1px solid var(--skn-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(11, 33, 75, 0.055);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.skn-automotive-intro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 55px rgba(11, 33, 75, 0.10);
}

.skn-automotive-small-label {
    margin-bottom: 14px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.skn-automotive-intro-card h3 {
    margin: 0 0 17px;
    color: var(--skn-dark);
    font-size: clamp(24px, 2.5vw, 30px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-automotive-intro-card > p {
    margin: 0 0 14px;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.9;
}

.skn-automotive-check-list {
    display: grid;
    gap: 13px;
    margin: 10px 0 25px;
}

.skn-automotive-check-list > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--skn-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}

.skn-automotive-check-list > div > span {
    display: grid;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: #e5f2ff;
    color: var(--skn-blue);
    font-size: 11px;
}

.skn-automotive-text-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    align-self: flex-start;
    color: var(--skn-blue);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}

.skn-automotive-text-link:hover {
    gap: 17px;
    color: var(--skn-dark);
}

/* Applications heading */

.skn-automotive-applications {
    padding-top: 35px;
}

.skn-automotive-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 35px;
}

.skn-automotive-section-heading h3 {
    margin: 0;
    color: var(--skn-dark);
    font-size: clamp(26px, 3vw, 35px);
    font-weight: 800;
    line-height: 1.35;
}

.skn-automotive-section-heading > p {
    max-width: 390px;
    margin: 0;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.8;
}

/* Application cards */

.skn-automotive-app-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--skn-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(11, 33, 75, 0.045);
    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.skn-automotive-app-card:hover {
    transform: translateY(-9px);
    border-color: rgba(8, 102, 213, 0.5);
    box-shadow: 0 24px 45px rgba(11, 33, 75, 0.12);
}

.skn-automotive-card-image {
    position: relative;
    height: 320px;
    overflow: hidden;
    background: #dceafa;
}

.skn-automotive-card-image::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 33, 75, 0.02),
        rgba(11, 33, 75, 0.25)
    );
    content: "";
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.skn-automotive-app-card:hover .skn-automotive-card-image::after {
    opacity: 0.6;
}

.skn-automotive-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}

.skn-automotive-app-card:hover .skn-automotive-card-image img {
    transform: scale(1.1) rotate(1deg);
    filter: saturate(1.12);
}

.skn-automotive-card-number {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 15px;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 12px;
    background: rgba(11, 33, 75, 0.8);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(8px);
    transition: background 0.3s ease, transform 0.3s ease;
}

.skn-automotive-app-card:hover .skn-automotive-card-number {
    transform: translateY(-3px);
    background: var(--skn-blue);
}

.skn-automotive-card-body {
    position: relative;
    padding: 25px 23px 32px;
}

.skn-automotive-card-icon {
    position: relative;
    z-index: 2;
    display: grid;
    width: 48px;
    height: 48px;
    box-sizing: content-box;
    margin-top: -49px;
    margin-bottom: 18px;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 14px;
    background: var(--skn-blue);
    color: #fff;
    font-size: 19px;
    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.skn-automotive-app-card:hover .skn-automotive-card-icon {
    transform: translateY(-4px) rotate(-6deg);
    background: var(--skn-dark);
}

.skn-automotive-card-body h4 {
    margin: 0 0 12px;
    padding-right: 5px;
    color: var(--skn-dark);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
}

.skn-automotive-card-body p {
    margin: 0;
    padding-right: 4px;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.85;
}

.skn-automotive-card-arrow {
    position: absolute;
    right: 19px;
    bottom: 18px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--skn-light);
    color: var(--skn-blue);
    font-size: 13px;
    opacity: 0;
    transform: translate(-5px, 5px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.skn-automotive-app-card:hover .skn-automotive-card-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* Project review CTA */

.skn-automotive-project-review {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 75px;
    padding: 48px;
    border-radius: 22px;
    background: var(--skn-dark);
    box-shadow: 0 20px 50px rgba(11, 33, 75, 0.16);
}

.skn-automotive-review-pattern {
    position: absolute;
    z-index: -1;
    top: -170px;
    right: -100px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle,
        transparent 0,
        transparent 24px,
        rgba(255, 255, 255, 0.06) 25px,
        transparent 26px
    );
    pointer-events: none;
    animation: skn-automotive-rotate 45s linear infinite;
}

.skn-automotive-review-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #91c7ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.skn-automotive-project-review h3 {
    max-width: 720px;
    margin: 0 0 15px;
    color: #fff;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-automotive-project-review p {
    max-width: 820px;
    margin: 0;
    color: #d0def3;
    font-size: 15px;
    line-height: 1.9;
}

.skn-automotive-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 14px 22px;
    border: 1px solid var(--skn-blue);
    border-radius: 10px;
    background: var(--skn-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.skn-automotive-cta:hover {
    transform: translateY(-3px);
    border-color: #fff;
    background: #fff;
    color: var(--skn-dark);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* Responsive */

@media (max-width: 991.98px) {
    .skn-automotive-section {
        padding: 75px 0;
    }

    .skn-automotive-hero-image,
    .skn-automotive-hero-image > img {
        min-height: 380px;
    }

    .skn-automotive-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .skn-automotive-project-review {
        padding: 35px;
    }
}

@media (max-width: 575.98px) {
    .skn-automotive-section {
        padding: 55px 0;
    }

    .skn-automotive-heading {
        letter-spacing: -0.5px;
    }

    .skn-automotive-hero-image,
    .skn-automotive-hero-image > img {
        min-height: 330px;
    }

    .skn-automotive-image-content {
        right: 20px;
        bottom: 22px;
        left: 20px;
    }

    .skn-automotive-image-content h3 {
        font-size: 25px;
    }

    .skn-automotive-intro-card {
        padding: 25px 21px;
    }

    .skn-automotive-card-image {
        height: 215px;
    }

    .skn-automotive-card-body {
        min-height: 205px;
        padding: 24px 21px 30px;
    }

    .skn-automotive-project-review {
        margin-top: 50px;
        padding: 28px 22px;
        border-radius: 17px;
    }

    .skn-automotive-cta {
        width: 100%;
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .skn-automotive-section *,
    .skn-automotive-section *::before,
    .skn-automotive-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


.skn-telecom-section,
.skn-telecom-section * {
    box-sizing: border-box;
}

.skn-telecom-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    background: var(--skn-light);
    font-family: 'Poppins', sans-serif;
}

.skn-telecom-container {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    margin: auto;
}

/* LIGHT ANIMATED BACKGROUND */

.skn-telecom-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .48;
    background-image:
        linear-gradient(rgba(8,102,213,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8,102,213,.06) 1px, transparent 1px);
    background-size: 46px 46px;
    animation: sknTelecomGrid 25s linear infinite;
}

.skn-telecom-orbit {
    position: absolute;
    z-index: -1;
    border: 2px dashed rgba(8,102,213,.16);
    border-radius: 50%;
    pointer-events: none;
    animation: sknTelecomRotate 35s linear infinite;
}

.skn-telecom-orbit::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 12%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(8,102,213,.35);
    box-shadow: 0 0 25px rgba(8,102,213,.4);
}

.skn-telecom-orbit-one {
    width: 450px;
    height: 450px;
    top: 90px;
    left: -280px;
}

.skn-telecom-orbit-two {
    width: 600px;
    height: 600px;
    right: -360px;
    top: 650px;
    animation-direction: reverse;
}

.skn-telecom-glow {
    position: absolute;
    z-index: -1;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(8,102,213,.08);
    filter: blur(85px);
    pointer-events: none;
    animation: sknTelecomGlow 8s ease-in-out infinite alternate;
}

.skn-telecom-glow-one {
    top: 100px;
    left: -100px;
}

.skn-telecom-glow-two {
    right: -150px;
    bottom: 150px;
    animation-delay: -4s;
}

/* HEADING */

.skn-telecom-heading {
    max-width: 830px;
    margin: 0 auto 65px;
    text-align: center;
}

.skn-telecom-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.skn-telecom-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--skn-blue);
    box-shadow: 0 0 0 5px rgba(8,102,213,.1);
    animation: sknTelecomPulse 2s infinite;
}

.skn-telecom-heading h2 {
    margin: 0 0 20px;
    color: var(--skn-dark);
    font-size: clamp(30px, 4vw, 47px);
    font-weight: 800;
    line-height: 1.3;
}

.skn-telecom-heading h2 span {
    display: block;
    color: var(--skn-blue);
}

.skn-telecom-heading p {
    max-width: 700px;
    margin: auto;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.9;
}

/* ABOUT SECTION */

.skn-telecom-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
    margin-bottom: 50px;
}

.skn-telecom-about-image {
    position: relative;
    min-width: 0;
    padding: 0 15px 18px 0;
}

.skn-telecom-image-wrap {
    position: relative;
    overflow: hidden;
    height: 465px;
    border-radius: 22px;
    background: #dcecff;
    box-shadow: 0 25px 60px rgba(11,33,75,.13);
}

.skn-telecom-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .9s ease, filter .7s ease;
}

.skn-telecom-image-wrap:hover img {
    transform: scale(1.12) rotate(1deg);
    filter: saturate(1.15);
}

.skn-telecom-image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 45%,
        rgba(11,33,75,.45)
    );
}

.skn-telecom-image-wrap::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -90%;
    width: 45%;
    height: 300%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );
    transform: rotate(25deg);
    pointer-events: none;
}

.skn-telecom-image-wrap:hover::after {
    animation: sknTelecomShine 1.2s ease;
}

.skn-telecom-image-caption {
    position: absolute;
    left: 20px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 17px;
    border-radius: 8px;
    color: #fff;
    background: rgba(11,33,75,.88);
    font-size: 12px;
    font-weight: 600;
}

.skn-telecom-caption-icon {
    color: #8bc6ff;
    font-size: 19px;
}

.skn-telecom-image-decoration {
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -5px;
    width: 130px;
    height: 130px;
    border: 2px solid rgba(8,102,213,.25);
    border-radius: 22px;
    animation: sknTelecomRotate 20s linear infinite;
}

.skn-telecom-float-box {
    position: absolute;
    right: -10px;
    bottom: 55px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 20px;
    border: 1px solid var(--skn-border);
    border-radius: 12px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 15px 35px rgba(11,33,75,.13);
    animation: sknTelecomFloat 4s ease-in-out infinite;
}

.skn-telecom-float-symbol {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--skn-blue);
    background: #eaf3ff;
    border-radius: 10px;
    font-size: 23px;
}

.skn-telecom-float-box strong,
.skn-telecom-float-box small {
    display: block;
}

.skn-telecom-float-box strong {
    color: var(--skn-dark);
    font-size: 13px;
}

.skn-telecom-float-box small {
    margin-top: 4px;
    color: var(--skn-text);
    font-size: 11px;
}

/* ABOUT CONTENT */

.skn-telecom-section-label {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.skn-telecom-about-content h3 {
    margin: 0 0 22px;
    color: var(--skn-dark);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-telecom-about-content h3 span {
    color: var(--skn-blue);
}

.skn-telecom-about-content > p {
    margin: 0 0 25px;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 2;
}

.skn-telecom-feature-list {
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
}

.skn-telecom-feature {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--skn-dark);
    font-size: 15px;
    font-weight: 600;
    transition: transform .3s ease, color .3s ease;
}

.skn-telecom-feature:hover {
    color: var(--skn-blue);
    transform: translateX(8px);
}

.skn-telecom-feature span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    color: var(--skn-blue);
    background: #e3efff;
    border-radius: 50%;
    font-size: 13px;
}

.skn-telecom-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 15px 24px;
    color: #fff;
    background: var(--skn-blue);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all .35s ease;
}

.skn-telecom-primary-btn:hover {
    color: #fff;
    background: var(--skn-dark);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(8,102,213,.22);
}

/* APPLICATION CARDS */

.skn-telecom-applications {
    margin-bottom: 75px;
}

.skn-telecom-app-heading {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.skn-telecom-app-heading h3 {
    margin: 0 0 15px;
    color: var(--skn-dark);
    font-size: clamp(27px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-telecom-app-heading p {
    margin: 0;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.9;
}

.skn-telecom-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 25px;
}

.skn-telecom-card {
    overflow: hidden;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--skn-border);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(11,33,75,.05);
    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.skn-telecom-card:hover {
    transform: translateY(-10px);
    border-color: rgba(8,102,213,.4);
    box-shadow: 0 22px 45px rgba(11,33,75,.13);
}

.skn-telecom-card-image {
    position: relative;
    height: 215px;
    overflow: hidden;
    background: #dcecff;
}

.skn-telecom-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease, filter .5s ease;
}

.skn-telecom-card:hover img {
    transform: scale(1.13);
    filter: saturate(1.15);
}

.skn-telecom-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(11,33,75,.5)
    );
}

.skn-telecom-card-number {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 15px;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
}

.skn-telecom-card-content {
    position: relative;
    padding: 25px 23px 30px;
}

.skn-telecom-card-icon {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-top: -51px;
    margin-bottom: 20px;
    color: var(--skn-blue);
    background: #fff;
    border: 1px solid var(--skn-border);
    border-radius: 11px;
    box-shadow: 0 7px 18px rgba(11,33,75,.09);
    font-size: 21px;
    transition: all .4s ease;
}

.skn-telecom-card:hover .skn-telecom-card-icon {
    color: #fff;
    background: var(--skn-blue);
    transform: rotate(-10deg);
}

.skn-telecom-card-content h4 {
    margin: 0 0 12px;
    color: var(--skn-dark);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    transition: color .3s ease;
}

.skn-telecom-card:hover h4 {
    color: var(--skn-blue);
}

.skn-telecom-card-content p {
    margin: 0;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.9;
}

/* PROJECT REVIEW */

.skn-telecom-project {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    overflow: hidden;
    padding: 45px;
    color: #fff;
    background: var(--skn-dark);
    border-radius: 17px;
    box-shadow: 0 20px 50px rgba(11,33,75,.16);
}

.skn-telecom-project-pattern {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .16;
    background-image:
        radial-gradient(circle, #fff 1px, transparent 2px);
    background-size: 25px 25px;
    animation: sknTelecomGrid 30s linear infinite;
}

.skn-telecom-project-content {
    max-width: 730px;
}

.skn-telecom-project-content > span {
    display: block;
    margin-bottom: 12px;
    color: #90caff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.skn-telecom-project-content h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(23px, 3vw, 31px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-telecom-project-content p {
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 13px;
    line-height: 1.9;
}

.skn-telecom-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 0 0 auto;
    padding: 16px 23px;
    color: var(--skn-dark);
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all .35s ease;
}

.skn-telecom-project-btn:hover {
    color: #fff;
    background: var(--skn-blue);
    transform: translateY(-4px);
}

/* KEYFRAMES */

@keyframes sknTelecomRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sknTelecomGrid {
    from { background-position: 0 0; }
    to { background-position: 92px 92px; }
}

@keyframes sknTelecomGlow {
    from { transform: translate(0,0) scale(1); }
    to { transform: translate(65px,45px) scale(1.2); }
}

@keyframes sknTelecomFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes sknTelecomPulse {
    0%,100% {
        box-shadow: 0 0 0 4px rgba(8,102,213,.12);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(8,102,213,.02);
    }
}

@keyframes sknTelecomShine {
    from { left: -90%; }
    to { left: 160%; }
}

/* TABLET */

@media (max-width: 991px) {
    .skn-telecom-section {
        padding: 75px 0;
    }

    .skn-telecom-about {
        gap: 35px;
        margin-bottom: 75px;
    }

    .skn-telecom-image-wrap {
        height: 390px;
    }

    .skn-telecom-card-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 20px;
    }

    .skn-telecom-project {
        flex-direction: column;
        align-items: flex-start;
        padding: 35px;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .skn-telecom-section {
        padding: 60px 0;
    }

    .skn-telecom-container {
        width: calc(100% - 30px);
    }

    .skn-telecom-heading {
        margin-bottom: 45px;
    }

    .skn-telecom-heading h2 {
        font-size: 30px;
    }

    .skn-telecom-heading p {
        font-size: 13px;
    }

    .skn-telecom-about {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 65px;
    }

    .skn-telecom-about-image {
        padding-right: 8px;
    }

    .skn-telecom-image-wrap {
        height: 320px;
        border-radius: 15px;
    }

    .skn-telecom-float-box {
        right: 0;
        bottom: 35px;
        padding: 12px 15px;
    }

    .skn-telecom-about-content h3 {
        font-size: 27px;
    }

    .skn-telecom-about-content > p {
        font-size: 13px;
    }

    .skn-telecom-app-heading h3 {
        font-size: 27px;
    }

    .skn-telecom-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .skn-telecom-card-image {
        height: 230px;
    }

    .skn-telecom-project {
        padding: 28px 22px;
        gap: 25px;
    }

    .skn-telecom-project-btn {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .skn-telecom-heading h2 {
        font-size: 26px;
    }

    .skn-telecom-image-wrap {
        height: 270px;
    }

    .skn-telecom-float-box {
        max-width: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skn-telecom-section *,
    .skn-telecom-section *::before,
    .skn-telecom-section *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =============================================
   SKN CONSUMER ELECTRONICS SECTION
   ============================================= */

.skn-consumer-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    background: var(--skn-light);
    color: var(--skn-text);
}

.skn-consumer-section .container {
    position: relative;
    z-index: 2;
}

/* Rotating background pattern */

.skn-consumer-pattern {
    position: absolute;
    z-index: -1;
    top: -290px;
    right: -250px;
    width: 780px;
    height: 780px;
    border: 1px solid rgba(8, 102, 213, 0.10);
    border-radius: 50%;
    pointer-events: none;
    animation: skn-consumer-rotate 55s linear infinite;
}

.skn-consumer-pattern::before,
.skn-consumer-pattern::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(8, 102, 213, 0.13);
    border-radius: 50%;
    inset: 45px;
}

.skn-consumer-pattern::after {
    inset: 105px;
    border-style: dashed;
    border-color: rgba(8, 102, 213, 0.17);
}

/* Background lighting */

.skn-consumer-glow {
    position: absolute;
    z-index: -1;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    filter: blur(95px);
    pointer-events: none;
    opacity: 0.32;
    animation: skn-consumer-light 9s ease-in-out infinite alternate;
}

.skn-consumer-glow-one {
    top: 12%;
    left: -210px;
    background: rgba(8, 102, 213, 0.27);
}

.skn-consumer-glow-two {
    right: -210px;
    bottom: 12%;
    background: rgba(76, 169, 255, 0.27);
    animation-delay: 2.5s;
}

@keyframes skn-consumer-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes skn-consumer-light {
    from {
        transform: translate(0, 0) scale(0.85);
        opacity: 0.20;
    }

    to {
        transform: translate(35px, -30px) scale(1.15);
        opacity: 0.42;
    }
}

/* Header */

.skn-consumer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--skn-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1.6;
}

.skn-consumer-eyebrow-line {
    width: 34px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 5px;
    background: var(--skn-blue);
}

.skn-consumer-heading {
    margin: 0 0 20px;
    color: var(--skn-dark);
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -1px;
}

.skn-consumer-heading span {
    display: block;
    color: var(--skn-blue);
}

.skn-consumer-intro {
    max-width: 790px;
    margin: 0;
    color: var(--skn-text);
    font-size: 16px;
    line-height: 1.9;
}

/* Header badge */

.skn-consumer-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--skn-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 35px rgba(11, 33, 75, 0.06);
    text-align: left;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.skn-consumer-header-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(11, 33, 75, 0.10);
}

.skn-consumer-badge-icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 13px;
    background: #e6f2ff;
    color: var(--skn-blue);
    font-size: 24px;
}

.skn-consumer-header-badge strong,
.skn-consumer-header-badge span {
    display: block;
}

.skn-consumer-header-badge strong {
    color: var(--skn-dark);
    font-size: 16px;
    font-weight: 800;
}

.skn-consumer-header-badge span {
    margin-top: 5px;
    color: var(--skn-text);
    font-size: 13px;
}

/* Hero image */

.skn-consumer-hero-image {
    position: relative;
    height: 100%;
    min-height: 450px;
    overflow: hidden;
    border-radius: 23px;
    background: #dceafa;
    box-shadow: 0 22px 50px rgba(11, 33, 75, 0.13);
}

.skn-consumer-hero-image > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 450px;
    object-fit: cover;
    transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.skn-consumer-hero-image:hover > img {
    transform: scale(1.09);
}

.skn-consumer-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 33, 75, 0.02) 20%,
        rgba(11, 33, 75, 0.90) 100%
    );
    transition: background 0.4s ease;
}

.skn-consumer-hero-image:hover .skn-consumer-hero-overlay {
    background: linear-gradient(
        180deg,
        rgba(8, 102, 213, 0.07) 15%,
        rgba(11, 33, 75, 0.94) 100%
    );
}

/* Rotating image ring */

.skn-consumer-tech-ring {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.12);
    pointer-events: none;
    animation: skn-consumer-rotate 18s linear infinite;
}

.skn-consumer-tech-ring::before,
.skn-consumer-tech-ring::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    inset: 12px;
}

.skn-consumer-tech-ring::after {
    inset: 28px;
    border-style: dashed;
}

.skn-consumer-image-content {
    position: absolute;
    right: 30px;
    bottom: 32px;
    left: 30px;
    color: #fff;
    transform: translateY(5px);
    transition: transform 0.4s ease;
}

.skn-consumer-hero-image:hover .skn-consumer-image-content {
    transform: translateY(0);
}

.skn-consumer-image-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    background: rgba(11, 33, 75, 0.48);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    backdrop-filter: blur(8px);
}

.skn-consumer-image-content h3 {
    max-width: 560px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.3;
}

.skn-consumer-image-content p {
    max-width: 510px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    line-height: 1.8;
}

.skn-consumer-image-corner {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 60px;
    height: 60px;
    border-top: 2px solid rgba(255, 255, 255, 0.7);
    border-left: 2px solid rgba(255, 255, 255, 0.7);
    transition: width 0.4s ease, height 0.4s ease;
}

.skn-consumer-hero-image:hover .skn-consumer-image-corner {
    width: 90px;
    height: 90px;
}

/* Intro card */

.skn-consumer-intro-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: clamp(25px, 3vw, 39px);
    border: 1px solid var(--skn-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(11, 33, 75, 0.055);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.skn-consumer-intro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 55px rgba(11, 33, 75, 0.10);
}

.skn-consumer-small-label {
    margin-bottom: 14px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.skn-consumer-intro-card h3 {
    margin: 0 0 17px;
    color: var(--skn-dark);
    font-size: clamp(24px, 2.5vw, 30px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-consumer-intro-card > p {
    margin: 0 0 14px;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.9;
}

.skn-consumer-check-list {
    display: grid;
    gap: 13px;
    margin: 10px 0 25px;
}

.skn-consumer-check-list > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--skn-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}

.skn-consumer-check-list > div > span {
    display: grid;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: #e5f2ff;
    color: var(--skn-blue);
    font-size: 11px;
}

.skn-consumer-text-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    align-self: flex-start;
    color: var(--skn-blue);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}

.skn-consumer-text-link:hover {
    gap: 17px;
    color: var(--skn-dark);
}

/* Application heading */

.skn-consumer-applications {
    padding-top: 35px;
}

.skn-consumer-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 35px;
}

.skn-consumer-section-heading h3 {
    margin: 0;
    color: var(--skn-dark);
    font-size: clamp(26px, 3vw, 35px);
    font-weight: 800;
    line-height: 1.35;
}

.skn-consumer-section-heading > p {
    max-width: 390px;
    margin: 0;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.8;
}

/* Application cards */

.skn-consumer-app-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--skn-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(11, 33, 75, 0.045);
    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.skn-consumer-app-card:hover {
    transform: translateY(-9px);
    border-color: rgba(8, 102, 213, 0.5);
    box-shadow: 0 24px 45px rgba(11, 33, 75, 0.12);
}

.skn-consumer-card-image {
    position: relative;
    height: 285px;
    overflow: hidden;
    background: #dceafa;
}

.skn-consumer-card-image::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 33, 75, 0.02),
        rgba(11, 33, 75, 0.25)
    );
    content: "";
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.skn-consumer-app-card:hover .skn-consumer-card-image::after {
    opacity: 0.6;
}

.skn-consumer-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}

.skn-consumer-app-card:hover .skn-consumer-card-image img {
    transform: scale(1.1) rotate(1deg);
    filter: saturate(1.12);
}

.skn-consumer-card-number {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 15px;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 12px;
    background: rgba(11, 33, 75, 0.8);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(8px);
    transition: background 0.3s ease, transform 0.3s ease;
}

.skn-consumer-app-card:hover .skn-consumer-card-number {
    transform: translateY(-3px);
    background: var(--skn-blue);
}

.skn-consumer-card-body {
    position: relative;
    min-height: 225px;
    padding: 25px 23px 32px;
}

.skn-consumer-card-icon {
    position: relative;
    z-index: 2;
    display: grid;
    width: 48px;
    height: 48px;
    box-sizing: content-box;
    margin-top: -49px;
    margin-bottom: 18px;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 14px;
    background: var(--skn-blue);
    color: #fff;
    font-size: 19px;
    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.skn-consumer-app-card:hover .skn-consumer-card-icon {
    transform: translateY(-4px) rotate(-6deg);
    background: var(--skn-dark);
}

.skn-consumer-card-body h4 {
    margin: 0 0 12px;
    padding-right: 5px;
    color: var(--skn-dark);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
}

.skn-consumer-card-body p {
    margin: 0;
    padding-right: 4px;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.85;
}

.skn-consumer-card-arrow {
    position: absolute;
    right: 19px;
    bottom: 18px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--skn-light);
    color: var(--skn-blue);
    font-size: 13px;
    opacity: 0;
    transform: translate(-5px, 5px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.skn-consumer-app-card:hover .skn-consumer-card-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* Project review */

.skn-consumer-project-review {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 75px;
    padding: 48px;
    border-radius: 22px;
    background: var(--skn-dark);
    box-shadow: 0 20px 50px rgba(11, 33, 75, 0.16);
}

.skn-consumer-review-pattern {
    position: absolute;
    z-index: -1;
    top: -170px;
    right: -100px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle,
        transparent 0,
        transparent 24px,
        rgba(255, 255, 255, 0.06) 25px,
        transparent 26px
    );
    pointer-events: none;
    animation: skn-consumer-rotate 45s linear infinite;
}

.skn-consumer-review-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #91c7ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.skn-consumer-project-review h3 {
    max-width: 720px;
    margin: 0 0 15px;
    color: #fff;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-consumer-project-review p {
    max-width: 820px;
    margin: 0;
    color: #d0def3;
    font-size: 15px;
    line-height: 1.9;
}

.skn-consumer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 14px 22px;
    border: 1px solid var(--skn-blue);
    border-radius: 10px;
    background: var(--skn-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.skn-consumer-cta:hover {
    transform: translateY(-3px);
    border-color: #fff;
    background: #fff;
    color: var(--skn-dark);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* Responsive */

@media (max-width: 991.98px) {
    .skn-consumer-section {
        padding: 75px 0;
    }

    .skn-consumer-hero-image,
    .skn-consumer-hero-image > img {
        min-height: 380px;
    }

    .skn-consumer-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .skn-consumer-project-review {
        padding: 35px;
    }
}

@media (max-width: 575.98px) {
    .skn-consumer-section {
        padding: 55px 0;
    }

    .skn-consumer-heading {
        letter-spacing: -0.5px;
    }

    .skn-consumer-hero-image,
    .skn-consumer-hero-image > img {
        min-height: 330px;
    }

    .skn-consumer-image-content {
        right: 20px;
        bottom: 22px;
        left: 20px;
    }

    .skn-consumer-image-content h3 {
        font-size: 25px;
    }

    .skn-consumer-intro-card {
        padding: 25px 21px;
    }

    .skn-consumer-card-image {
        height: 215px;
    }

    .skn-consumer-card-body {
        min-height: 205px;
        padding: 24px 21px 30px;
    }

    .skn-consumer-project-review {
        margin-top: 50px;
        padding: 28px 22px;
        border-radius: 17px;
    }

    .skn-consumer-cta {
        width: 100%;
    }
}

/* Reduced motion accessibility */

@media (prefers-reduced-motion: reduce) {
    .skn-consumer-section *,
    .skn-consumer-section *::before,
    .skn-consumer-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================
   SKN POWER AND ENERGY PCBA SECTION
========================================= */

.skn-energy-section,
.skn-energy-section * {
    box-sizing: border-box;
}

.skn-energy-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 0;
    background: var(--skn-light);
    font-family: 'Poppins', Arial, sans-serif;
}

.skn-energy-container {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* BACKGROUND GRID */

.skn-energy-grid-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .5;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(8,102,213,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,102,213,.055) 1px,
            transparent 1px
        );
    background-size: 45px 45px;
    animation: sknEnergyGrid 28s linear infinite;
}

/* GLOWING LIGHT EFFECTS */

.skn-energy-glow {
    position: absolute;
    z-index: -1;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(8,102,213,.12);
    filter: blur(95px);
    pointer-events: none;
    animation: sknEnergyGlow 9s ease-in-out infinite alternate;
}

.skn-energy-glow-one {
    top: -180px;
    left: -200px;
}

.skn-energy-glow-two {
    right: -200px;
    bottom: 150px;
    background: rgba(64,156,255,.12);
    animation-delay: 3s;
}

/* ROTATING ORBITS */

.skn-energy-orbit {
    position: absolute;
    z-index: -1;
    width: 430px;
    height: 430px;
    border: 1px dashed rgba(8,102,213,.17);
    border-radius: 50%;
    pointer-events: none;
    animation: sknEnergyRotate 36s linear infinite;
}

.skn-energy-orbit::before {
    content: "";
    position: absolute;
    inset: 45px;
    border: 1px solid rgba(8,102,213,.12);
    border-radius: 50%;
}

.skn-energy-orbit::after {
    content: "";
    position: absolute;
    top: 40px;
    right: 50px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--skn-blue);
    box-shadow: 0 0 25px rgba(8,102,213,.7);
}

.skn-energy-orbit-one {
    top: 100px;
    left: -290px;
}

.skn-energy-orbit-two {
    right: -290px;
    bottom: 450px;
    animation-direction: reverse;
    animation-duration: 45s;
}

/* HEADING */

.skn-energy-heading {
    max-width: 900px;
    margin: 0 auto 65px;
    text-align: center;
    animation: sknEnergyFadeUp .8s ease both;
}

.skn-energy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--skn-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.skn-energy-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--skn-blue);
    box-shadow: 0 0 0 5px rgba(8,102,213,.1);
    animation: sknEnergyPulse 2s ease-in-out infinite;
}

.skn-energy-heading h2 {
    margin: 0 0 22px;
    color: var(--skn-dark);
    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.8px;
}

.skn-energy-heading h2 span {
    display: block;
    color: var(--skn-blue);
}

.skn-energy-heading > p {
    max-width: 750px;
    margin: auto;
    color: var(--skn-text);
    font-size: 14px;
    line-height: 1.95;
}

/* INTRODUCTION LAYOUT */

.skn-energy-intro {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items: center;
    gap: 65px;
    margin-bottom: 50px;
}

/* MAIN IMAGE */

.skn-energy-visual {
    position: relative;
    min-width: 0;
    padding: 0 15px 15px 0;
}

.skn-energy-main-image {
    position: relative;
    height: 465px;
    overflow: hidden;
    border-radius: 20px;
    background: #dceafb;
    box-shadow: 0 25px 55px rgba(11,33,75,.15);
}

.skn-energy-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .9s cubic-bezier(.2,.7,.2,1),
        filter .6s ease;
}

.skn-energy-main-image:hover img {
    transform: scale(1.11) rotate(1deg);
    filter: saturate(1.12) contrast(1.04);
}

.skn-energy-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 45%,
        rgba(11,33,75,.7)
    );
    pointer-events: none;
}

.skn-energy-image-shine {
    position: absolute;
    top: -100%;
    left: -80%;
    width: 42%;
    height: 300%;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    transform: rotate(25deg);
    pointer-events: none;
}

.skn-energy-main-image:hover .skn-energy-image-shine {
    opacity: 1;
    animation: sknEnergyShine 1.2s ease forwards;
}

.skn-energy-image-caption {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
}

.skn-energy-caption-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    font-size: 20px;
}

.skn-energy-image-caption strong,
.skn-energy-image-caption small {
    display: block;
}

.skn-energy-image-caption strong {
    margin-bottom: 5px;
    font-size: 14px;
}

.skn-energy-image-caption small {
    color: rgba(255,255,255,.85);
    font-size: 11px;
}

.skn-energy-image-frame {
    position: absolute;
    top: -14px;
    right: 0;
    width: 125px;
    height: 125px;
    z-index: -1;
    border: 2px solid rgba(8,102,213,.25);
    border-radius: 18px;
    animation: sknEnergyDecorationRotate 20s linear infinite;
}

/* FLOATING CARD */

.skn-energy-floating-card {
    position: absolute;
    right: -15px;
    bottom: 45px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    background: rgba(255,255,255,.97);
    border: 1px solid var(--skn-border);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(11,33,75,.15);
    animation: sknEnergyFloat 4s ease-in-out infinite;
}

.skn-energy-floating-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 10px;
    color: var(--skn-blue);
    background: #e9f3ff;
    font-size: 22px;
}

.skn-energy-floating-card strong,
.skn-energy-floating-card span {
    display: block;
}

.skn-energy-floating-card strong {
    margin-bottom: 5px;
    color: var(--skn-dark);
    font-size: 12px;
}

.skn-energy-floating-card span {
    color: var(--skn-text);
    font-size: 10px;
}

/* INTRO CONTENT */

.skn-energy-label {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--skn-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.7;
}

.skn-energy-intro-content h3 {
    margin: 0 0 20px;
    color: var(--skn-dark);
    font-size: clamp(27px,3vw,36px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-energy-intro-content h3 span {
    color: var(--skn-blue);
}

.skn-energy-intro-content > p {
    margin: 0 0 16px;
    color: var(--skn-text);
    font-size: 13px;
    line-height: 1.95;
}

.skn-energy-feature-list {
    display: grid;
    gap: 14px;
    margin: 25px 0 30px;
}

.skn-energy-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--skn-dark);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    transition: transform .3s ease,color .3s ease;
}

.skn-energy-feature > span {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border-radius: 50%;
    color: var(--skn-blue);
    background: #e2efff;
}

.skn-energy-feature:hover {
    color: var(--skn-blue);
    transform: translateX(6px);
}

.skn-energy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 15px 22px;
    color: #fff;
    background: var(--skn-blue);
    border: 1px solid var(--skn-blue);
    border-radius: 7px;
    box-shadow: 0 10px 25px rgba(8,102,213,.2);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all .35s ease;
}

.skn-energy-button:hover {
    color: #fff;
    background: var(--skn-dark);
    border-color: var(--skn-dark);
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(11,33,75,.2);
}

.skn-energy-button i {
    transition: transform .3s ease;
}

.skn-energy-button:hover i {
    transform: translateX(5px);
}

/* APPLICATION HEADING */

.skn-energy-applications {
    margin-bottom: 85px;
}

.skn-energy-section-title {
    max-width: 750px;
    margin: 0 auto 40px;
    text-align: center;
}

.skn-energy-section-title h3 {
    margin: 0 0 17px;
    color: var(--skn-dark);
    font-size: clamp(27px,3vw,36px);
    line-height: 1.4;
    font-weight: 800;
}

.skn-energy-section-title h3 span {
    color: var(--skn-blue);
}

.skn-energy-section-title p {
    margin: 0;
    color: var(--skn-text);
    font-size: 13px;
    line-height: 1.9;
}

/* APPLICATION CARDS */

.skn-energy-card-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 25px;
}

.skn-energy-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--skn-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(11,33,75,.045);
    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.skn-energy-card:hover {
    transform: translateY(-10px);
    border-color: rgba(8,102,213,.4);
    box-shadow: 0 22px 45px rgba(11,33,75,.13);
}

.skn-energy-card-image {
    position: relative;
    height: 215px;
    overflow: hidden;
    background: #dceafb;
}

.skn-energy-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 40%,
        rgba(11,33,75,.48)
    );
}

.skn-energy-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease,filter .5s ease;
}

.skn-energy-card:hover .skn-energy-card-image img {
    transform: scale(1.12);
    filter: saturate(1.15);
}

.skn-energy-number {
    position: absolute;
    z-index: 2;
    right: 17px;
    bottom: 13px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    transition: transform .35s ease;
}

.skn-energy-card:hover .skn-energy-number {
    transform: translateY(-5px);
}

.skn-energy-card-body {
    padding: 25px 22px 28px;
}

.skn-energy-card-icon {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: -49px;
    margin-bottom: 20px;
    border: 1px solid var(--skn-border);
    border-radius: 10px;
    color: var(--skn-blue);
    background: #fff;
    box-shadow: 0 7px 20px rgba(11,33,75,.09);
    font-size: 21px;
    transition: transform .35s ease,background .35s ease,color .35s ease;
}

.skn-energy-card:hover .skn-energy-card-icon {
    color: #fff;
    background: var(--skn-blue);
    transform: rotate(-8deg);
}

.skn-energy-card-body h4 {
    margin: 0 0 12px;
    color: var(--skn-dark);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.55;
    transition: color .3s ease;
}

.skn-energy-card:hover .skn-energy-card-body h4 {
    color: var(--skn-blue);
}

.skn-energy-card-body p {
    margin: 0;
    color: var(--skn-text);
    font-size: 15px;
    line-height: 1.9;
}

/* PROJECT REVIEW */

.skn-energy-review {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 25px;
    overflow: hidden;
    padding: 38px 40px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(63,151,255,.25),
            transparent 38%
        ),
        var(--skn-dark);
    box-shadow: 0 20px 50px rgba(11,33,75,.15);
}

.skn-energy-review-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .23;
    pointer-events: none;
    background-image:
        radial-gradient(
            rgba(255,255,255,.7) 1px,
            transparent 1.5px
        );
    background-size: 25px 25px;
    animation: sknEnergyGrid 30s linear infinite;
}

.skn-energy-review-orbit {
    position: absolute;
    z-index: -1;
    right: -100px;
    top: -145px;
    width: 330px;
    height: 330px;
    border: 2px dashed rgba(255,255,255,.22);
    border-radius: 50%;
    animation: sknEnergyRotate 35s linear infinite;
}

.skn-energy-review-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    color: #fff;
    background: rgba(255,255,255,.1);
    font-size: 27px;
    transition: transform .4s ease;
}

.skn-energy-review:hover .skn-energy-review-icon {
    transform: rotate(8deg) scale(1.05);
}

.skn-energy-review-content {
    flex: 1;
    min-width: 0;
}

.skn-energy-review-content > span {
    display: block;
    margin-bottom: 9px;
    color: #8bc6ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.skn-energy-review-content h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(22px,2.5vw,29px);
    font-weight: 800;
    line-height: 1.4;
}

.skn-energy-review-content p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 12px;
    line-height: 1.9;
}

.skn-energy-review-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex: 0 0 auto;
    padding: 15px 20px;
    color: var(--skn-dark);
    background: #fff;
    border: 1px solid #fff;
    border-radius: 7px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: all .35s ease;
}

.skn-energy-review-button:hover {
    color: #fff;
    background: var(--skn-blue);
    border-color: var(--skn-blue);
    transform: translateY(-4px);
}

.skn-energy-review-button i {
    transition: transform .3s ease;
}

.skn-energy-review-button:hover i {
    transform: translateX(5px);
}

/* ANIMATIONS */

@keyframes sknEnergyFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sknEnergyRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sknEnergyDecorationRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sknEnergyGrid {
    from { background-position: 0 0; }
    to { background-position: 90px 90px; }
}

@keyframes sknEnergyGlow {
    from {
        opacity: .45;
        transform: translate(0,0) scale(1);
    }
    to {
        opacity: .9;
        transform: translate(35px,25px) scale(1.12);
    }
}

@keyframes sknEnergyPulse {
    0%,100% {
        box-shadow: 0 0 0 4px rgba(8,102,213,.1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(8,102,213,.035);
    }
}

@keyframes sknEnergyFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes sknEnergyShine {
    from { left: -80%; }
    to { left: 160%; }
}

/* TABLET */

@media (max-width: 991px) {
    .skn-energy-section {
        padding: 75px 0;
    }

    .skn-energy-intro {
        gap: 35px;
        margin-bottom: 75px;
    }

    .skn-energy-main-image {
        height: 400px;
    }

    .skn-energy-floating-card {
        right: -8px;
        padding: 13px;
    }

    .skn-energy-card-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 20px;
    }

    .skn-energy-review {
        flex-wrap: wrap;
        padding: 30px;
    }

    .skn-energy-review-content {
        flex-basis: calc(100% - 100px);
    }

    .skn-energy-review-button {
        margin-left: 91px;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .skn-energy-section {
        padding: 60px 0;
    }

    .skn-energy-container {
        width: calc(100% - 30px);
    }

    .skn-energy-heading {
        margin-bottom: 42px;
    }

    .skn-energy-heading h2 {
        font-size: 29px;
        letter-spacing: -.4px;
    }

    .skn-energy-heading > p {
        font-size: 13px;
    }

    .skn-energy-intro {
        grid-template-columns: 1fr;
        gap: 42px;
        margin-bottom: 65px;
    }

    .skn-energy-main-image {
        height: 320px;
        border-radius: 15px;
    }

    .skn-energy-floating-card {
        right: 0;
        bottom: 25px;
    }

    .skn-energy-intro-content h3 {
        font-size: 28px;
    }

    .skn-energy-intro-content > p {
        font-size: 13px;
    }

    .skn-energy-applications {
        margin-bottom: 60px;
    }

    .skn-energy-section-title h3 {
        font-size: 28px;
    }

    .skn-energy-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .skn-energy-card-image {
        height: 230px;
    }

    .skn-energy-review {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 25px 22px;
        border-radius: 12px;
    }

    .skn-energy-review-content {
        flex-basis: auto;
    }

    .skn-energy-review-content h3 {
        font-size: 24px;
    }

    .skn-energy-review-button {
        margin-left: 0;
        justify-self: start;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .skn-energy-heading h2 {
        font-size: 26px;
    }

    .skn-energy-main-image {
        height: 270px;
    }

    .skn-energy-floating-card {
        max-width: 250px;
    }

    .skn-energy-card-body {
        padding-right: 18px;
        padding-left: 18px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .skn-energy-section *,
    .skn-energy-section *::before,
    .skn-energy-section *::after {
        animation: none !important;
        transition: none !important;
    }
}