/* =========================================================
    NEXPAK SECURITY ACADEMY
    ACADEMY.CSS
    PART 1 — CORE FOUNDATION
    ========================================================= */


/* =========================================================
   GLOBAL VARIABLES
   ========================================================= */

:root {

    --academy-bg:
        #071018;

    --academy-bg-deep:
        #03070b;

    --academy-panel:
        #0c1720;

    --academy-panel-light:
        #12222d;

    --academy-panel-hover:
        #172b37;

    --academy-border:
        rgba(255,255,255,.09);

    --academy-border-strong:
        rgba(255,255,255,.16);

    --academy-text:
        #eef5f8;

    --academy-text-soft:
        #b7c7ce;

    --academy-text-muted:
        #81959f;

    --academy-accent:
        #f59e0b;

    --academy-accent-light:
        #fbbf24;

    --academy-accent-dark:
        #b45309;

    --academy-green:
        #22c55e;

    --academy-blue:
        #38bdf8;

    --academy-red:
        #ef4444;

    --academy-purple:
        #a78bfa;

    --academy-radius:
        18px;

    --academy-radius-small:
        12px;

    --academy-shadow:
        0 25px 70px rgba(0,0,0,.35);

    --academy-shadow-heavy:
        0 35px 90px rgba(0,0,0,.48);

    --academy-transition:
        .3s ease;

}


/* =========================================================
   RESET
   ========================================================= */

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    scroll-behavior:
        smooth;

    background:
        var(--academy-bg-deep);

}


body {

    min-height:
        100vh;

    background:

        radial-gradient(
            circle at 15% 8%,
            rgba(245,158,11,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 18%,
            rgba(56,189,248,.06),
            transparent 28%
        ),

        linear-gradient(
            180deg,
            var(--academy-bg),
            var(--academy-bg-deep)
        );

    color:
        var(--academy-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:
        1.7;

    overflow-x:
        hidden;

}


/* =========================================================
   TEXT
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    color:
        var(--academy-text);

    line-height:
        1.15;

}


p {

    color:
        var(--academy-text-soft);

}


strong {

    color:
        var(--academy-text);

}


::selection {

    background:
        rgba(245,158,11,.28);

    color:
        #ffffff;

}


/* =========================================================
   LINKS
   ========================================================= */

a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   IMAGES
   ========================================================= */

img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

}


/* =========================================================
   PAGE CONTAINERS
   ========================================================= */

.container,
.section,
main {

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   ACADEMY HEADER
   ========================================================= */

.academy-header {

    position:
        relative;

    width:
        100%;

    padding:
        22px 0;

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

    background:
        rgba(3,7,11,.84);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    z-index:
        50;

}


/* =========================================================
   HEADER INNER
   ========================================================= */

.academy-header-inner {

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


/* =========================================================
   ACADEMY BRAND
   ========================================================= */

.academy-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


/* =========================================================
   ACADEMY LOGO
   ========================================================= */

.academy-logo {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            var(--academy-accent),
            var(--academy-accent-dark)
        );

    color:
        #111111;

    font-size:
        21px;

    font-weight:
        900;

    box-shadow:
        0 10px 30px
        rgba(245,158,11,.25);

}


/* =========================================================
   BRAND TEXT
   ========================================================= */

.academy-brand-text {

    display:
        flex;

    flex-direction:
        column;

}


.academy-brand-text strong {

    color:
        var(--academy-text);

    font-size:
        16px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.academy-brand-text span {

    color:
        var(--academy-text-muted);

    font-size:
        12px;

}


/* =========================================================
   MODULE BADGE
   ========================================================= */

.module-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 15px;

    border:
        1px solid
        rgba(245,158,11,.25);

    border-radius:
        999px;

    background:
        rgba(245,158,11,.07);

    color:
        var(--academy-accent-light);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


.module-badge::before {

    content:
        "";

    width:
        7px;

    height:
        7px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--academy-accent);

    box-shadow:
        0 0 14px
        rgba(245,158,11,.65);

}


/* =========================================================
   GENERIC SECTION
   ========================================================= */

.content-section {

    position:
        relative;

    padding:
        82px 0;

}


.content-section
+ .content-section {

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

}


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

.section-heading {

    max-width:
        850px;

    margin-bottom:
        42px;

}


.section-heading .eyebrow {

    margin-bottom:
        12px;

    color:
        var(--academy-accent-light);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.section-heading h2 {

    font-size:
        clamp(
            29px,
            4vw,
            47px
        );

    letter-spacing:
        -.025em;

}


.section-heading p {

    margin-top:
        17px;

    color:
        var(--academy-text-soft);

    font-size:
        16px;

}


/* =========================================================
   STANDARD CONTENT
   ========================================================= */

.content-section > p {

    max-width:
        880px;

    margin-bottom:
        20px;

    color:
        var(--academy-text-soft);

}


/* =========================================================
   LISTS
   ========================================================= */

.content-section ul,
.content-section ol {

    max-width:
        850px;

    margin:
        20px 0 25px 24px;

    color:
        var(--academy-text-soft);

}


.content-section li {

    margin-bottom:
        10px;

    padding-left:
        5px;

}


.content-section li::marker {

    color:
        var(--academy-accent-light);

}


/* =========================================================
   GLOBAL CARD
   ========================================================= */

.academy-card {

    position:
        relative;

    padding:
        28px;

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

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            145deg,
            rgba(18,34,45,.94),
            rgba(7,16,24,.96)
        );

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

    transition:
        transform
        var(--academy-transition),

        border-color
        var(--academy-transition),

        box-shadow
        var(--academy-transition);

}


.academy-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--academy-border-strong);

    box-shadow:
        var(--academy-shadow-heavy);

}


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

@media (
    max-width: 900px
) {

    .academy-header-inner {

        width:
            calc(100% - 32px);

    }


    .container,
    .section,
    main {

        width:
            calc(100% - 32px);

    }


    .content-section {

        padding:
            68px 0;

    }

}


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

@media (
    max-width: 640px
) {

    .academy-header {

        padding:
            16px 0;

    }


    .academy-header-inner {

        width:
            calc(100% - 28px);

        gap:
            12px;

    }


    .academy-logo {

        width:
            40px;

        height:
            40px;

        border-radius:
            12px;

        font-size:
            17px;

    }


    .academy-brand-text strong {

        font-size:
            12px;

    }


    .academy-brand-text span {

        font-size:
            9px;

    }


    .module-badge {

        font-size:
            9px;

        padding:
            7px 11px;

    }


    .container,
    .section,
    main {

        width:
            calc(100% - 28px);

    }


    .content-section {

        padding:
            58px 0;

    }


    .section-heading {

        margin-bottom:
            30px;

    }


    .section-heading h2 {

        font-size:
            29px;

    }


    .section-heading p {

        font-size:
            15px;

    }


    .academy-card {

        padding:
            22px;

    }

}


/* =========================================================
   END PART 1
   ========================================================= */
/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 2 — COURSE HERO & MODULE LAYOUT
   ========================================================= */


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

.module-hero {

    position:
        relative;

    padding:
        95px 0 85px;

    overflow:
        hidden;

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

}


.module-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    top:
        -250px;

    right:
        -180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(245,158,11,.14),
            transparent 68%
        );

    pointer-events:
        none;

}


.module-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    bottom:
        -230px;

    left:
        -150px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(56,189,248,.08),
            transparent 68%
        );

    pointer-events:
        none;

}


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

.module-hero-inner {

    position:
        relative;

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        auto;

    z-index:
        2;

}


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

.module-hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(300px, .6fr);

    align-items:
        center;

    gap:
        70px;

}


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

.module-hero-content {

    max-width:
        760px;

}


.module-hero-content
.module-badge {

    margin-bottom:
        22px;

}


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

.module-hero h1 {

    max-width:
        850px;

    margin-bottom:
        24px;

    font-size:
        clamp(
            38px,
            6vw,
            68px
        );

    font-weight:
        900;

    letter-spacing:
        -.045em;

    line-height:
        1.03;

}


.module-hero h1 span {

    display:
        inline;

    color:
        var(--academy-accent-light);

}


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

.module-hero-intro {

    max-width:
        720px;

    color:
        var(--academy-text-soft);

    font-size:
        clamp(
            16px,
            2vw,
            19px
        );

    line-height:
        1.8;

}


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

.module-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        30px;

}


.module-meta-item {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 14px;

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

    border-radius:
        999px;

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

    color:
        var(--academy-text-soft);

    font-size:
        12px;

}


.module-meta-item strong {

    color:
        var(--academy-text);

}


/* =========================================================
   HERO VISUAL PANEL
   ========================================================= */

.module-hero-visual {

    position:
        relative;

    min-height:
        330px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


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

.hero-orbit {

    position:
        absolute;

    width:
        290px;

    height:
        290px;

    border:
        1px solid
        rgba(245,158,11,.18);

    border-radius:
        50%;

    animation:
        academyOrbit
        18s
        linear
        infinite;

}


.hero-orbit::before {

    content:
        "";

    position:
        absolute;

    inset:
        24px;

    border:
        1px dashed
        rgba(245,158,11,.13);

    border-radius:
        50%;

}


.hero-orbit::after {

    content:
        "";

    position:
        absolute;

    width:
        10px;

    height:
        10px;

    top:
        12px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        var(--academy-accent-light);

    box-shadow:
        0 0 20px
        rgba(245,158,11,.75);

}


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

.hero-core {

    position:
        relative;

    width:
        145px;

    height:
        145px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(245,158,11,.35);

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(245,158,11,.18),
            rgba(180,83,9,.08)
        );

    box-shadow:
        0 25px 65px
        rgba(0,0,0,.45),

        inset 0 0 40px
        rgba(245,158,11,.06);

    transform:
        rotate(45deg);

}


.hero-core-inner {

    width:
        92px;

    height:
        92px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        22px;

    background:
        rgba(7,16,24,.92);

    color:
        var(--academy-accent-light);

    font-size:
        30px;

    font-weight:
        900;

    transform:
        rotate(-45deg);

}


/* =========================================================
   HERO DECORATIVE LINES
   ========================================================= */

.hero-line {

    position:
        absolute;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,158,11,.4),
            transparent
        );

    opacity:
        .7;

}


.hero-line.line-one {

    width:
        260px;

    top:
        30px;

    left:
        10px;

    transform:
        rotate(-18deg);

}


.hero-line.line-two {

    width:
        220px;

    right:
        0;

    bottom:
        25px;

    transform:
        rotate(22deg);

}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes academyOrbit {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   COURSE PROGRESS
   ========================================================= */

.course-progress {

    width:
        100%;

    height:
        5px;

    margin-top:
        38px;

    overflow:
        hidden;

    border-radius:
        999px;

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

}


.course-progress span {

    display:
        block;

    width:
        var(--progress, 25%);

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--academy-accent-dark),
            var(--academy-accent-light)
        );

    box-shadow:
        0 0 16px
        rgba(245,158,11,.25);

}


/* =========================================================
   CONTENT GRID
   ========================================================= */

.content-grid {

    display:
        grid;

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

    gap:
        24px;

}


.content-grid.three {

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

}


/* =========================================================
   FEATURE CARD
   ========================================================= */

.feature-card {

    position:
        relative;

    padding:
        30px;

    overflow:
        hidden;

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

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            145deg,
            rgba(18,34,45,.94),
            rgba(7,16,24,.96)
        );

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.24);

    transition:
        transform
        var(--academy-transition),

        border-color
        var(--academy-transition),

        box-shadow
        var(--academy-transition);

}


.feature-card::before {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    top:
        -80px;

    right:
        -70px;

    border-radius:
        50%;

    background:
        rgba(245,158,11,.06);

}


.feature-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(245,158,11,.24);

    box-shadow:
        0 28px 65px
        rgba(0,0,0,.34);

}


.feature-card h3 {

    margin-bottom:
        12px;

    font-size:
        21px;

}


.feature-card p {

    font-size:
        15px;

}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.feature-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        20px;

    border:
        1px solid
        rgba(245,158,11,.2);

    border-radius:
        14px;

    background:
        rgba(245,158,11,.08);

    color:
        var(--academy-accent-light);

    font-size:
        19px;

    font-weight:
        900;

}


/* =========================================================
   NUMBERED CONTENT
   ========================================================= */

.numbered-list {

    display:
        grid;

    gap:
        18px;

}


.numbered-item {

    display:
        grid;

    grid-template-columns:
        48px
        minmax(0,1fr);

    gap:
        18px;

    align-items:
        start;

}


.numbered-number {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(245,158,11,.25);

    border-radius:
        14px;

    background:
        rgba(245,158,11,.07);

    color:
        var(--academy-accent-light);

    font-weight:
        900;

}


.numbered-content h3 {

    margin-bottom:
        6px;

    font-size:
        18px;

}


.numbered-content p {

    font-size:
        14px;

}


/* =========================================================
   CALLOUT
   ========================================================= */

.academy-callout {

    position:
        relative;

    margin:
        35px 0;

    padding:
        25px 28px 25px 32px;

    border:
        1px solid
        rgba(245,158,11,.2);

    border-radius:
        var(--academy-radius-small);

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,.08),
            rgba(245,158,11,.025)
        );

}


.academy-callout::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        4px;

    border-radius:
        4px 0 0 4px;

    background:
        var(--academy-accent);

}


.academy-callout strong {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--academy-accent-light);

}


/* =========================================================
   TABLE
   ========================================================= */

.academy-table-wrap {

    width:
        100%;

    overflow-x:
        auto;

    margin:
        30px 0;

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

    border-radius:
        var(--academy-radius-small);

}


.academy-table {

    width:
        100%;

    min-width:
        620px;

    border-collapse:
        collapse;

}


.academy-table th,
.academy-table td {

    padding:
        15px 18px;

    text-align:
        left;

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

}


.academy-table th {

    color:
        var(--academy-accent-light);

    background:
        rgba(245,158,11,.06);

    font-size:
        12px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.academy-table td {

    color:
        var(--academy-text-soft);

    font-size:
        14px;

}


.academy-table tr:last-child td {

    border-bottom:
        none;

}


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

@media (
    max-width: 900px
) {

    .module-hero {

        padding:
            75px 0 65px;

    }


    .module-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .module-hero-visual {

        min-height:
            280px;

    }


    .content-grid.three {

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

    }

}


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

@media (
    max-width: 640px
) {

    .module-hero {

        padding:
            58px 0 52px;

    }


    .module-hero-inner {

        width:
            calc(100% - 28px);

    }


    .module-hero h1 {

        font-size:
            38px;

    }


    .module-hero-intro {

        font-size:
            15px;

    }


    .module-meta {

        gap:
            8px;

    }


    .module-meta-item {

        padding:
            8px 11px;

        font-size:
            10px;

    }


    .module-hero-visual {

        min-height:
            230px;

    }


    .hero-orbit {

        width:
            220px;

        height:
            220px;

    }


    .hero-core {

        width:
            110px;

        height:
            110px;

        border-radius:
            23px;

    }


    .hero-core-inner {

        width:
            70px;

        height:
            70px;

        border-radius:
            17px;

        font-size:
            23px;

    }


    .content-grid,
    .content-grid.three {

        grid-template-columns:
            1fr;

    }


    .feature-card {

        padding:
            23px;

    }


    .numbered-item {

        grid-template-columns:
            40px
            minmax(0,1fr);

        gap:
            13px;

    }


    .numbered-number {

        width:
            40px;

        height:
            40px;

        border-radius:
            11px;

        font-size:
            13px;

    }


    .academy-callout {

        padding:
            21px 20px 21px 25px;

    }

}


/* =========================================================
   END PART 2
   ========================================================= */
/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 3 — TRAINING CONTENT COMPONENTS
   ========================================================= */


/* =========================================================
   CONTENT ARTICLE
   ========================================================= */

.academy-article {

    max-width:
        900px;

    margin:
        0 auto;

}


.academy-article > p {

    margin-bottom:
        20px;

    color:
        var(--academy-text-soft);

    font-size:
        16px;

}


.academy-article h2 {

    margin:
        45px 0 18px;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        );

}


.academy-article h3 {

    margin:
        32px 0 12px;

    font-size:
        22px;

}


.academy-article h4 {

    margin:
        24px 0 10px;

    color:
        var(--academy-accent-light);

    font-size:
        17px;

}


/* =========================================================
   LEARNING OBJECTIVES
   ========================================================= */

.learning-objectives {

    display:
        grid;

    gap:
        14px;

    margin:
        30px 0;

}


.objective-item {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;

    padding:
        18px 20px;

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

    border-radius:
        var(--academy-radius-small);

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

    transition:
        var(--academy-transition);

}


.objective-item:hover {

    transform:
        translateX(4px);

    border-color:
        rgba(245,158,11,.22);

    background:
        rgba(245,158,11,.035);

}


.objective-icon {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(34,197,94,.09);

    color:
        var(--academy-green);

    font-size:
        13px;

    font-weight:
        900;

}


.objective-item p {

    margin:
        0;

    color:
        var(--academy-text-soft);

    font-size:
        14px;

}


/* =========================================================
   KNOWLEDGE BOX
   ========================================================= */

.knowledge-box {

    margin:
        32px 0;

    padding:
        28px;

    border:
        1px solid
        rgba(56,189,248,.18);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.07),
            rgba(56,189,248,.015)
        );

}


.knowledge-box-title {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        14px;

    color:
        var(--academy-blue);

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.knowledge-box p {

    color:
        var(--academy-text-soft);

}


/* =========================================================
   WARNING BOX
   ========================================================= */

.warning-box {

    position:
        relative;

    margin:
        32px 0;

    padding:
        25px 27px 25px 31px;

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

    border-radius:
        var(--academy-radius-small);

    background:
        rgba(239,68,68,.055);

}


.warning-box::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        4px;

    border-radius:
        4px 0 0 4px;

    background:
        var(--academy-red);

}


.warning-box strong {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #f87171;

}


/* =========================================================
   STEP-BY-STEP PROCESS
   ========================================================= */

.process-list {

    position:
        relative;

    display:
        grid;

    gap:
        24px;

    margin:
        35px 0;

}


.process-list::before {

    content:
        "";

    position:
        absolute;

    top:
        24px;

    bottom:
        24px;

    left:
        23px;

    width:
        1px;

    background:
        linear-gradient(
            180deg,
            rgba(245,158,11,.45),
            rgba(245,158,11,.05)
        );

}


.process-step {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        48px
        minmax(0,1fr);

    gap:
        18px;

}


.process-number {

    position:
        relative;

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(245,158,11,.3);

    border-radius:
        50%;

    background:
        var(--academy-panel);

    color:
        var(--academy-accent-light);

    font-size:
        13px;

    font-weight:
        900;

    z-index:
        2;

}


.process-content {

    padding:
        20px 22px;

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

    border-radius:
        var(--academy-radius-small);

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

}


.process-content h3 {

    margin:
        0 0 7px;

    font-size:
        18px;

}


.process-content p {

    margin:
        0;

    font-size:
        14px;

}


/* =========================================================
   SYSTEM COMPONENT GRID
   ========================================================= */

.component-grid {

    display:
        grid;

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

    gap:
        18px;

    margin:
        30px 0;

}


.component-card {

    position:
        relative;

    padding:
        24px;

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

    border-radius:
        var(--academy-radius-small);

    background:
        var(--academy-panel);

    transition:
        var(--academy-transition);

}


.component-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(245,158,11,.25);

}


.component-card-number {

    margin-bottom:
        13px;

    color:
        var(--academy-accent);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .12em;

}


.component-card h3 {

    margin:
        0 0 9px;

    font-size:
        18px;

}


.component-card p {

    margin:
        0;

    font-size:
        13px;

}


/* =========================================================
   TECHNICAL SPECIFICATION
   ========================================================= */

.spec-grid {

    display:
        grid;

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

    gap:
        15px;

    margin:
        30px 0;

}


.spec-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        16px 18px;

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

    border-radius:
        11px;

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

}


.spec-label {

    color:
        var(--academy-text-muted);

    font-size:
        13px;

}


.spec-value {

    color:
        var(--academy-text);

    font-size:
        13px;

    font-weight:
        800;

    text-align:
        right;

}


/* =========================================================
   CHECKLIST
   ========================================================= */

.checklist {

    display:
        grid;

    gap:
        10px;

    margin:
        25px 0;

}


.checklist-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        14px 16px;

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

    border-radius:
        10px;

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

}


.checklist-item::before {

    content:
        "✓";

    flex:
        0 0 auto;

    color:
        var(--academy-green);

    font-weight:
        900;

}


.checklist-item span {

    color:
        var(--academy-text-soft);

    font-size:
        14px;

}


/* =========================================================
   QUOTE / PROFESSIONAL NOTE
   ========================================================= */

.professional-note {

    margin:
        35px 0;

    padding:
        32px;

    border:
        1px solid
        rgba(167,139,250,.18);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(167,139,250,.07),
            rgba(167,139,250,.015)
        );

}


.professional-note::before {

    content:
        "PROFESSIONAL PRACTICE";

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--academy-purple);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .15em;

}


.professional-note p {

    margin:
        0;

    color:
        var(--academy-text);

    font-size:
        16px;

    font-weight:
        600;

}


/* =========================================================
   DIAGRAM / VISUAL PANEL
   ========================================================= */

.diagram-panel {

    position:
        relative;

    min-height:
        260px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        35px 0;

    padding:
        30px;

    overflow:
        hidden;

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

    border-radius:
        var(--academy-radius);

    background:
        radial-gradient(
            circle at center,
            rgba(245,158,11,.07),
            transparent 55%
        ),

        var(--academy-panel);

}


.diagram-panel::before {

    content:
        "";

    position:
        absolute;

    inset:
        20px;

    border:
        1px dashed
        rgba(245,158,11,.12);

    border-radius:
        var(--academy-radius-small);

}


/* =========================================================
   DATA STAT CARDS
   ========================================================= */

.stat-grid {

    display:
        grid;

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

    gap:
        15px;

    margin:
        30px 0;

}


.stat-card {

    padding:
        22px 18px;

    text-align:
        center;

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

    border-radius:
        var(--academy-radius-small);

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

}


.stat-value {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--academy-accent-light);

    font-size:
        27px;

    font-weight:
        900;

}


.stat-label {

    color:
        var(--academy-text-muted);

    font-size:
        11px;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

}


/* =========================================================
   MOBILE CONTENT COMPONENTS
   ========================================================= */

@media (
    max-width: 900px
) {

    .component-grid {

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

    }


    .stat-grid {

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

    }

}


@media (
    max-width: 640px
) {

    .academy-article > p {

        font-size:
            15px;

    }


    .learning-objectives {

        gap:
            10px;

    }


    .objective-item {

        padding:
            15px;

    }


    .process-list {

        gap:
            18px;

    }


    .process-step {

        grid-template-columns:
            40px
            minmax(0,1fr);

        gap:
            13px;

    }


    .process-list::before {

        left:
            19px;

    }


    .process-number {

        width:
            40px;

        height:
            40px;

        font-size:
            11px;

    }


    .process-content {

        padding:
            17px;

    }


    .component-grid {

        grid-template-columns:
            1fr;

    }


    .spec-grid {

        grid-template-columns:
            1fr;

    }


    .spec-item {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;

    }


    .spec-value {

        text-align:
            left;

    }


    .professional-note {

        padding:
            24px;

    }


    .stat-grid {

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

    }


    .stat-value {

        font-size:
            23px;

    }

}


/* =========================================================
   END PART 3
   ========================================================= */
/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 4 — PRACTICAL / TECHNICAL MODULE STYLING
   ========================================================= */


/* =========================================================
   TECHNICAL SECTION
   ========================================================= */

.technical-section {

    position:
        relative;

    margin:
        35px 0;

    padding:
        32px;

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

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            145deg,
            rgba(12,23,32,.96),
            rgba(5,12,18,.96)
        );

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.25);

}


.technical-section h3 {

    margin:
        0 0 15px;

    color:
        var(--academy-accent-light);

    font-size:
        22px;

}


.technical-section p {

    margin-bottom:
        15px;

}


.technical-section p:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   PRACTICAL WORK AREA
   ========================================================= */

.practical-area {

    position:
        relative;

    margin:
        40px 0;

    padding:
        34px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(245,158,11,.18);

    border-radius:
        var(--academy-radius);

    background:

        linear-gradient(
            135deg,
            rgba(245,158,11,.08),
            rgba(7,16,24,.96)
        );

}


.practical-area::after {

    content:
        "";

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    right:
        -100px;

    bottom:
        -130px;

    border:
        1px solid
        rgba(245,158,11,.1);

    border-radius:
        50%;

}


.practical-label {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        7px 12px;

    margin-bottom:
        15px;

    border-radius:
        999px;

    background:
        rgba(245,158,11,.1);

    color:
        var(--academy-accent-light);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.practical-area h3 {

    margin-bottom:
        12px;

    font-size:
        25px;

}


/* =========================================================
   MATERIALS GRID
   ========================================================= */

.material-grid {

    display:
        grid;

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

    gap:
        16px;

    margin:
        25px 0;

}


.material-card {

    padding:
        22px;

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

    border-radius:
        var(--academy-radius-small);

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

    transition:
        var(--academy-transition);

}


.material-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(245,158,11,.25);

}


.material-card h4 {

    margin:
        0 0 8px;

    color:
        var(--academy-text);

    font-size:
        17px;

}


.material-card p {

    margin:
        0;

    font-size:
        13px;

}


/* =========================================================
   INSTALLATION STAGE
   ========================================================= */

.installation-stage {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        70px
        minmax(0,1fr);

    gap:
        22px;

    padding:
        24px 0;

}


.installation-stage
+ .installation-stage {

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

}


.installation-stage-number {

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(245,158,11,.28);

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            rgba(245,158,11,.13),
            rgba(245,158,11,.035)
        );

    color:
        var(--academy-accent-light);

    font-size:
        15px;

    font-weight:
        900;

}


.installation-stage h3 {

    margin:
        0 0 8px;

    font-size:
        19px;

}


.installation-stage p {

    margin:
        0;

    font-size:
        14px;

}


/* =========================================================
   FIELD NOTE
   ========================================================= */

.field-note {

    display:
        grid;

    grid-template-columns:
        44px
        minmax(0,1fr);

    gap:
        15px;

    margin:
        28px 0;

    padding:
        21px;

    border:
        1px solid
        rgba(34,197,94,.18);

    border-radius:
        var(--academy-radius-small);

    background:
        rgba(34,197,94,.045);

}


.field-note-icon {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        rgba(34,197,94,.1);

    color:
        var(--academy-green);

    font-weight:
        900;

}


.field-note h4 {

    margin:
        0 0 5px;

    color:
        var(--academy-green);

    font-size:
        15px;

}


.field-note p {

    margin:
        0;

    font-size:
        13px;

}


/* =========================================================
   INSPECTION PANEL
   ========================================================= */

.inspection-panel {

    margin:
        35px 0;

    padding:
        28px;

    border:
        1px solid
        rgba(56,189,248,.18);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            145deg,
            rgba(56,189,248,.055),
            rgba(7,16,24,.96)
        );

}


.inspection-panel h3 {

    margin-bottom:
        18px;

    color:
        var(--academy-blue);

    font-size:
        20px;

}


.inspection-grid {

    display:
        grid;

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

    gap:
        11px;

}


.inspection-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        13px 15px;

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

    border-radius:
        10px;

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

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


.inspection-item::before {

    content:
        "✓";

    flex:
        0 0 auto;

    color:
        var(--academy-blue);

    font-weight:
        900;

}


/* =========================================================
   COMPLIANCE PANEL
   ========================================================= */

.compliance-panel {

    position:
        relative;

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(167,139,250,.18);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            145deg,
            rgba(167,139,250,.065),
            rgba(7,16,24,.96)
        );

}


.compliance-panel h3 {

    margin-bottom:
        12px;

    color:
        var(--academy-purple);

}


.compliance-panel p {

    margin-bottom:
        12px;

}


.compliance-panel p:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   PERFORMANCE MONITOR
   ========================================================= */

.performance-panel {

    position:
        relative;

    margin:
        35px 0;

    padding:
        30px;

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

    border-radius:
        var(--academy-radius);

    background:
        var(--academy-panel);

}


.performance-panel h3 {

    margin-bottom:
        22px;

    font-size:
        21px;

}


.performance-row {

    display:
        grid;

    grid-template-columns:
        180px
        minmax(0,1fr)
        70px;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        17px;

}


.performance-row:last-child {

    margin-bottom:
        0;

}


.performance-name {

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


.performance-bar {

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

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

}


.performance-bar span {

    display:
        block;

    width:
        var(--performance, 70%);

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--academy-accent-dark),
            var(--academy-accent-light)
        );

}


.performance-value {

    color:
        var(--academy-text);

    font-size:
        12px;

    font-weight:
        800;

    text-align:
        right;

}


/* =========================================================
   TECHNICAL CODE / REFERENCE BOX
   ========================================================= */

.reference-box {

    margin:
        30px 0;

    padding:
        24px;

    overflow-x:
        auto;

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

    border-radius:
        var(--academy-radius-small);

    background:
        #02070b;

}


.reference-box-title {

    margin-bottom:
        13px;

    color:
        var(--academy-accent-light);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.reference-box code {

    color:
        var(--academy-text-soft);

    font-family:
        "Courier New",
        monospace;

    font-size:
        13px;

    line-height:
        1.8;

}


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

@media (
    max-width: 900px
) {

    .material-grid {

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

    }


    .performance-row {

        grid-template-columns:
            140px
            minmax(0,1fr)
            60px;

    }

}


@media (
    max-width: 640px
) {

    .technical-section,
    .practical-area,
    .inspection-panel,
    .compliance-panel,
    .performance-panel {

        padding:
            22px;

    }


    .material-grid {

        grid-template-columns:
            1fr;

    }


    .installation-stage {

        grid-template-columns:
            48px
            minmax(0,1fr);

        gap:
            14px;

    }


    .installation-stage-number {

        width:
            44px;

        height:
            44px;

        border-radius:
            12px;

        font-size:
            12px;

    }


    .inspection-grid {

        grid-template-columns:
            1fr;

    }


    .field-note {

        grid-template-columns:
            38px
            minmax(0,1fr);

        gap:
            12px;

        padding:
            17px;

    }


    .field-note-icon {

        width:
            38px;

        height:
            38px;

    }


    .performance-row {

        grid-template-columns:
            1fr
            55px;

        gap:
            8px;

    }


    .performance-bar {

        grid-column:
            1 / -1;

        grid-row:
            2;

    }


    .performance-value {

        grid-column:
            2;

        grid-row:
            1;

    }

}


/* =========================================================
   END PART 4
   ========================================================= */
/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 5 — ADVANCED TECHNICAL & SYSTEM DESIGN STYLING
   ========================================================= */


/* =========================================================
   SYSTEM ARCHITECTURE
   ========================================================= */

.system-architecture {

    position:
        relative;

    margin:
        40px 0;

    padding:
        35px;

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

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            145deg,
            rgba(18,34,45,.92),
            rgba(4,10,15,.98)
        );

    overflow:
        hidden;

}


.system-architecture::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    top:
        -180px;

    right:
        -120px;

    border:
        1px solid
        rgba(56,189,248,.12);

    border-radius:
        50%;

}


.system-architecture h3 {

    margin-bottom:
        22px;

    color:
        var(--academy-blue);

    font-size:
        22px;

}


/* =========================================================
   ARCHITECTURE FLOW
   ========================================================= */

.architecture-flow {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

    gap:
        12px;

    align-items:
        stretch;

}


.architecture-node {

    position:
        relative;

    min-height:
        120px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px 12px;

    text-align:
        center;

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

    border-radius:
        14px;

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

}


.architecture-node strong {

    margin-bottom:
        6px;

    color:
        var(--academy-text);

    font-size:
        14px;

}


.architecture-node span {

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


.architecture-node:not(:last-child)::after {

    content:
        "→";

    position:
        absolute;

    top:
        50%;

    right:
        -17px;

    transform:
        translateY(-50%);

    color:
        var(--academy-accent-light);

    font-size:
        18px;

    z-index:
        3;

}


/* =========================================================
   DESIGN PRINCIPLES
   ========================================================= */

.design-principles {

    display:
        grid;

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

    gap:
        18px;

    margin:
        30px 0;

}


.design-principle {

    position:
        relative;

    padding:
        25px;

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

    border-radius:
        var(--academy-radius-small);

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

    transition:
        var(--academy-transition);

}


.design-principle:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(56,189,248,.22);

}


.design-principle-number {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        var(--academy-blue);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .12em;

}


.design-principle h3 {

    margin:
        0 0 8px;

    font-size:
        18px;

}


.design-principle p {

    margin:
        0;

    font-size:
        14px;

}


/* =========================================================
   SYSTEM LAYERS
   ========================================================= */

.system-layers {

    display:
        grid;

    gap:
        10px;

    margin:
        30px 0;

}


.system-layer {

    display:
        grid;

    grid-template-columns:
        160px
        minmax(0,1fr);

    align-items:
        center;

    min-height:
        62px;

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

    border-radius:
        12px;

    overflow:
        hidden;

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

}


.system-layer-label {

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    padding:
        0 18px;

    background:
        rgba(245,158,11,.07);

    color:
        var(--academy-accent-light);

    font-size:
        12px;

    font-weight:
        800;

}


.system-layer-description {

    padding:
        14px 18px;

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


/* =========================================================
   DECISION MATRIX
   ========================================================= */

.decision-matrix {

    margin:
        35px 0;

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

    border-radius:
        var(--academy-radius);

    overflow:
        hidden;

}


.decision-row {

    display:
        grid;

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

}


.decision-row
+ .decision-row {

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

}


.decision-row > div {

    padding:
        15px 17px;

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


.decision-row > div
+ div {

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

}


.decision-header {

    background:
        rgba(245,158,11,.07);

}


.decision-header > div {

    color:
        var(--academy-accent-light);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* =========================================================
   SYSTEM DESIGN SCORE
   ========================================================= */

.design-score {

    margin:
        35px 0;

    padding:
        28px;

    border:
        1px solid
        rgba(245,158,11,.18);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            145deg,
            rgba(245,158,11,.06),
            rgba(7,16,24,.95)
        );

}


.design-score-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;

}


.design-score-header h3 {

    margin:
        0;

    font-size:
        20px;

}


.design-score-value {

    color:
        var(--academy-accent-light);

    font-size:
        24px;

    font-weight:
        900;

}


.design-score-bar {

    width:
        100%;

    height:
        9px;

    overflow:
        hidden;

    border-radius:
        999px;

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

}


.design-score-bar span {

    display:
        block;

    width:
        var(--score, 80%);

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--academy-accent-dark),
            var(--academy-accent-light)
        );

}


/* =========================================================
   RISK ASSESSMENT
   ========================================================= */

.risk-grid {

    display:
        grid;

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

    gap:
        15px;

    margin:
        30px 0;

}


.risk-card {

    padding:
        22px;

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

    border-radius:
        var(--academy-radius-small);

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

}


.risk-level {

    display:
        inline-flex;

    padding:
        5px 9px;

    margin-bottom:
        12px;

    border-radius:
        999px;

    background:
        rgba(239,68,68,.09);

    color:
        #f87171;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.risk-card h3 {

    margin:
        0 0 7px;

    font-size:
        17px;

}


.risk-card p {

    margin:
        0;

    font-size:
        13px;

}


/* =========================================================
   TECHNICAL FORMULA
   ========================================================= */

.formula-box {

    margin:
        30px 0;

    padding:
        28px;

    text-align:
        center;

    border:
        1px solid
        rgba(56,189,248,.18);

    border-radius:
        var(--academy-radius);

    background:
        rgba(56,189,248,.035);

}


.formula-label {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--academy-blue);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.formula {

    color:
        var(--academy-text);

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(
            17px,
            3vw,
            26px
        );

    font-weight:
        700;

}


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

@media (
    max-width: 900px
) {

    .architecture-flow {

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

    }


    .architecture-node:not(:last-child)::after {

        display:
            none;

    }


    .risk-grid {

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

    }

}


@media (
    max-width: 640px
) {

    .system-architecture {

        padding:
            22px;

    }


    .architecture-flow {

        grid-template-columns:
            1fr;

    }


    .design-principles {

        grid-template-columns:
            1fr;

    }


    .system-layer {

        grid-template-columns:
            1fr;

    }


    .system-layer-label {

        min-height:
            45px;

    }


    .decision-row {

        grid-template-columns:
            1fr;

    }


    .decision-row > div
    + div {

        border-left:
            none;

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

    }


    .risk-grid {

        grid-template-columns:
            1fr;

    }


    .design-score {

        padding:
            22px;

    }


    .design-score-header {

        align-items:
            flex-start;

    }

}


/* =========================================================
   END PART 5
   ========================================================= */

/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 6 — COMPLIANCE, STANDARDS & PROFESSIONAL PRACTICE
   ========================================================= */


/* =========================================================
   COMPLIANCE HERO PANEL
   ========================================================= */

.compliance-hero {

    position:
        relative;

    margin:
        40px 0;

    padding:
        38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(167,139,250,.2);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(167,139,250,.1),
            rgba(7,16,24,.97)
        );

}


.compliance-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    right:
        -120px;

    top:
        -120px;

    border:
        1px solid
        rgba(167,139,250,.15);

    border-radius:
        50%;

}


.compliance-hero-label {

    display:
        inline-flex;

    padding:
        7px 12px;

    margin-bottom:
        16px;

    border-radius:
        999px;

    background:
        rgba(167,139,250,.1);

    color:
        #c4b5fd;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


.compliance-hero h2 {

    margin:
        0 0 12px;

    font-size:
        clamp(
            26px,
            4vw,
            36px
        );

}


.compliance-hero p {

    max-width:
        780px;

    margin:
        0;

    color:
        var(--academy-text-soft);

}


/* =========================================================
   STANDARD / REGULATION CARDS
   ========================================================= */

.standard-grid {

    display:
        grid;

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

    gap:
        18px;

    margin:
        30px 0;

}


.standard-card {

    position:
        relative;

    padding:
        25px;

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

    border-radius:
        var(--academy-radius-small);

    background:
        var(--academy-panel);

    transition:
        var(--academy-transition);

}


.standard-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(167,139,250,.25);

}


.standard-code {

    display:
        inline-block;

    margin-bottom:
        11px;

    color:
        #c4b5fd;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .1em;

}


.standard-card h3 {

    margin:
        0 0 8px;

    font-size:
        18px;

}


.standard-card p {

    margin:
        0;

    font-size:
        13px;

}


/* =========================================================
   REQUIREMENTS TABLE
   ========================================================= */

.requirements-table {

    width:
        100%;

    margin:
        30px 0;

    border-collapse:
        collapse;

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

    border-radius:
        var(--academy-radius-small);

    overflow:
        hidden;

}


.requirements-table th {

    padding:
        15px 17px;

    background:
        rgba(167,139,250,.08);

    color:
        #c4b5fd;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .07em;

    text-align:
        left;

    text-transform:
        uppercase;

}


.requirements-table td {

    padding:
        15px 17px;

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

    color:
        var(--academy-text-soft);

    font-size:
        13px;

    vertical-align:
        top;

}


.requirements-table tr:hover td {

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

}


/* =========================================================
   COMPLIANCE CHECKLIST
   ========================================================= */

.compliance-checklist {

    display:
        grid;

    gap:
        11px;

    margin:
        30px 0;

}


.compliance-check {

    display:
        grid;

    grid-template-columns:
        35px
        minmax(0,1fr);

    align-items:
        start;

    gap:
        14px;

    padding:
        16px 18px;

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

    border-radius:
        11px;

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

}


.compliance-check-icon {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(34,197,94,.09);

    color:
        var(--academy-green);

    font-weight:
        900;

}


.compliance-check strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--academy-text);

    font-size:
        14px;

}


.compliance-check span {

    color:
        var(--academy-text-muted);

    font-size:
        12px;

}


/* =========================================================
   RESPONSIBILITY PANEL
   ========================================================= */

.responsibility-panel {

    margin:
        35px 0;

    padding:
        28px;

    border-left:
        4px solid
        #a78bfa;

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

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

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

    border-radius:
        0 var(--academy-radius-small)
        var(--academy-radius-small)
        0;

    background:
        rgba(167,139,250,.045);

}


.responsibility-panel h3 {

    margin:
        0 0 10px;

    color:
        #c4b5fd;

    font-size:
        20px;

}


.responsibility-panel p {

    margin:
        0;

    color:
        var(--academy-text-soft);

}


/* =========================================================
   PROFESSIONAL STANDARD
   ========================================================= */

.professional-standard {

    display:
        grid;

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

    gap:
        15px;

    margin:
        35px 0;

}


.professional-standard-card {

    padding:
        24px 20px;

    text-align:
        center;

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

    border-radius:
        var(--academy-radius-small);

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

}


.professional-standard-card strong {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--academy-accent-light);

    font-size:
        16px;

}


.professional-standard-card span {

    color:
        var(--academy-text-muted);

    font-size:
        12px;

}


/* =========================================================
   DOCUMENTATION PANEL
   ========================================================= */

.documentation-panel {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(56,189,248,.16);

    border-radius:
        var(--academy-radius);

    background:
        rgba(56,189,248,.035);

}


.documentation-panel h3 {

    margin:
        0 0 18px;

    color:
        var(--academy-blue);

    font-size:
        20px;

}


.documentation-grid {

    display:
        grid;

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

    gap:
        10px;

}


.documentation-item {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px 15px;

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

    border-radius:
        9px;

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

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


.documentation-item::before {

    content:
        "▣";

    color:
        var(--academy-blue);

    font-weight:
        900;

}


/* =========================================================
   COMPLIANCE NOTICE
   ========================================================= */

.compliance-notice {

    position:
        relative;

    margin:
        35px 0;

    padding:
        25px 28px;

    border:
        1px solid
        rgba(245,158,11,.2);

    border-radius:
        var(--academy-radius-small);

    background:
        rgba(245,158,11,.045);

}


.compliance-notice strong {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--academy-accent-light);

    font-size:
        14px;

}


.compliance-notice p {

    margin:
        0;

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


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

@media (
    max-width: 900px
) {

    .standard-grid {

        grid-template-columns:
            1fr;

    }


    .professional-standard {

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

    }

}


@media (
    max-width: 640px
) {

    .compliance-hero {

        padding:
            25px;

    }


      .requirements-table {

        display:
            block;

        overflow-x:
            auto;

        white-space:
            nowrap;

    }


    .documentation-grid {

        grid-template-columns:
            1fr;

    }


    .professional-standard {

        grid-template-columns:
            1fr;

    }


    .responsibility-panel {

        padding:
            22px;

    }

}


/* =========================================================
   END PART 6
   ========================================================= */

/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 7 — ADVANCED INSTALLATION & FIELD WORK
   ========================================================= */


/* =========================================================
   FIELD OPERATIONS HERO
   ========================================================= */

.field-operations {

    position:
        relative;

    margin:
        40px 0;

    padding:
        38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(34,197,94,.18);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.07),
            rgba(7,16,24,.97)
        );

}


.field-operations::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -140px;

    top:
        -150px;

    border:
        1px solid
        rgba(34,197,94,.12);

    border-radius:
        50%;

}


.field-operations-label {

    display:
        inline-flex;

    margin-bottom:
        14px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(34,197,94,.1);

    color:
        var(--academy-green);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


.field-operations h2 {

    margin:
        0 0 12px;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        );

}


.field-operations p {

    max-width:
        800px;

    margin:
        0;

    color:
        var(--academy-text-soft);

}


/* =========================================================
   INSTALLATION CHECKPOINTS
   ========================================================= */

.installation-checkpoints {

    display:
        grid;

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

    gap:
        14px;

    margin:
        35px 0;

}


.installation-checkpoint {

    position:
        relative;

    padding:
        22px 18px;

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

    border-radius:
        var(--academy-radius-small);

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

    transition:
        var(--academy-transition);

}


.installation-checkpoint:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(34,197,94,.24);

}


.checkpoint-number {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--academy-green);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .12em;

}


.installation-checkpoint h3 {

    margin:
        0 0 7px;

    font-size:
        16px;

}


.installation-checkpoint p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        12px;

}


/* =========================================================
   FIELD PROCEDURE
   ========================================================= */

.field-procedure {

    margin:
        35px 0;

    padding:
        28px;

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

    border-radius:
        var(--academy-radius);

    background:
        var(--academy-panel);

}


.field-procedure-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;

}


.field-procedure-header h3 {

    margin:
        0;

    font-size:
        21px;

}


.field-procedure-badge {

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        rgba(34,197,94,.08);

    color:
        var(--academy-green);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.field-procedure-step {

    display:
        grid;

    grid-template-columns:
        42px
        minmax(0,1fr);

    gap:
        15px;

    padding:
        17px 0;

}


.field-procedure-step
+ .field-procedure-step {

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

}


.field-procedure-step-number {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        rgba(34,197,94,.08);

    color:
        var(--academy-green);

    font-size:
        12px;

    font-weight:
        900;

}


.field-procedure-step h4 {

    margin:
        0 0 5px;

    color:
        var(--academy-text);

    font-size:
        16px;

}


.field-procedure-step p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        13px;

}


/* =========================================================
   TOOLS & EQUIPMENT
   ========================================================= */

.tools-grid {

    display:
        grid;

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

    gap:
        14px;

    margin:
        30px 0;

}


.tool-card {

    padding:
        20px 16px;

    text-align:
        center;

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

    border-radius:
        var(--academy-radius-small);

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

    transition:
        var(--academy-transition);

}


.tool-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(245,158,11,.22);

}


.tool-icon {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 12px;

    border-radius:
        12px;

    background:
        rgba(245,158,11,.09);

    color:
        var(--academy-accent-light);

    font-size:
        17px;

    font-weight:
        900;

}


.tool-card h3 {

    margin:
        0 0 5px;

    font-size:
        15px;

}


.tool-card p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


/* =========================================================
   INSTALLATION QUALITY PANEL
   ========================================================= */

.quality-panel {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(34,197,94,.18);

    border-radius:
        var(--academy-radius);

    background:
        rgba(34,197,94,.035);

}


.quality-panel h3 {

    margin:
        0 0 18px;

    color:
        var(--academy-green);

    font-size:
        20px;

}


.quality-grid {

    display:
        grid;

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

    gap:
        11px;

}


.quality-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    padding:
        14px 16px;

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

    border-radius:
        10px;

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

}


.quality-item::before {

    content:
        "✓";

    flex:
        0 0 auto;

    color:
        var(--academy-green);

    font-weight:
        900;

}


.quality-item span {

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


/* =========================================================
   ENVIRONMENTAL CONDITIONS
   ========================================================= */

.environment-grid {

    display:
        grid;

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

    gap:
        15px;

    margin:
        30px 0;

}


.environment-card {

    padding:
        23px;

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

    border-radius:
        var(--academy-radius-small);

    background:
        var(--academy-panel);

}


.environment-card h3 {

    margin:
        0 0 8px;

    color:
        var(--academy-blue);

    font-size:
        17px;

}


.environment-card p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        13px;

}


/* =========================================================
   FIELD SAFETY NOTICE
   ========================================================= */

.field-safety {

    position:
        relative;

    margin:
        35px 0;

    padding:
        25px 28px 25px 32px;

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

    border-radius:
        var(--academy-radius-small);

    background:
        rgba(239,68,68,.045);

}


.field-safety::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        4px;

    border-radius:
        4px 0 0 4px;

    background:
        var(--academy-red);

}


.field-safety strong {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #f87171;

    font-size:
        14px;

}


.field-safety p {

    margin:
        0;

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


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

@media (
    max-width: 1000px
) {

    .installation-checkpoints,
    .tools-grid {

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

    }


    .environment-grid {

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

    }

}


@media (
    max-width: 640px
) {

    .field-operations {

        padding:
            25px;

    }


    .installation-checkpoints,
    .tools-grid,
    .environment-grid {

        grid-template-columns:
            1fr;

    }


    .field-procedure {

        padding:
            22px;

    }


    .field-procedure-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .quality-grid {

        grid-template-columns:
            1fr;

    }


    .field-safety {

        padding:
            21px 21px 21px 27px;

    }

}


/* =========================================================
   END PART 7
   ========================================================= */
/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 8 — TESTING, DIAGNOSTICS & TROUBLESHOOTING
   ========================================================= */


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

.diagnostic-hero {

    position:
        relative;

    margin:
        40px 0;

    padding:
        38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(56,189,248,.2);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.08),
            rgba(7,16,24,.97)
        );

}


.diagnostic-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    right:
        -150px;

    top:
        -160px;

    border:
        1px solid
        rgba(56,189,248,.13);

    border-radius:
        50%;

}


.diagnostic-label {

    display:
        inline-flex;

    margin-bottom:
        15px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(56,189,248,.09);

    color:
        var(--academy-blue);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.diagnostic-hero h2 {

    margin:
        0 0 12px;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        );

}


.diagnostic-hero p {

    max-width:
        820px;

    margin:
        0;

    color:
        var(--academy-text-soft);

}


/* =========================================================
   TESTING INSTRUMENT CARDS
   ========================================================= */

.instrument-grid {

    display:
        grid;

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

    gap:
        14px;

    margin:
        30px 0;

}


.instrument-card {

    padding:
        22px 18px;

    text-align:
        center;

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

    border-radius:
        var(--academy-radius-small);

    background:
        var(--academy-panel);

    transition:
        var(--academy-transition);

}


.instrument-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(56,189,248,.24);

}


.instrument-icon {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 12px;

    border-radius:
        13px;

    background:
        rgba(56,189,248,.09);

    color:
        var(--academy-blue);

    font-size:
        17px;

    font-weight:
        900;

}


.instrument-card h3 {

    margin:
        0 0 6px;

    font-size:
        15px;

}


.instrument-card p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


/* =========================================================
   TEST SEQUENCE
   ========================================================= */

.test-sequence {

    position:
        relative;

    display:
        grid;

    gap:
        0;

    margin:
        35px 0;

}


.test-sequence-step {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        55px
        minmax(0,1fr);

    gap:
        18px;

    padding:
        0 0 28px;

}


.test-sequence-step:last-child {

    padding-bottom:
        0;

}


.test-sequence-step:not(:last-child)::before {

    content:
        "";

    position:
        absolute;

    left:
        27px;

    top:
        55px;

    bottom:
        0;

    width:
        1px;

    background:
        rgba(56,189,248,.2);

}


.test-sequence-number {

    position:
        relative;

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(56,189,248,.25);

    border-radius:
        50%;

    background:
        var(--academy-panel);

    color:
        var(--academy-blue);

    font-size:
        13px;

    font-weight:
        900;

    z-index:
        2;

}


.test-sequence-content {

    padding:
        20px 22px;

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

    border-radius:
        var(--academy-radius-small);

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

}


.test-sequence-content h3 {

    margin:
        0 0 7px;

    font-size:
        18px;

}


.test-sequence-content p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        13px;

}


/* =========================================================
   FAULT CLASSIFICATION
   ========================================================= */

.fault-grid {

    display:
        grid;

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

    gap:
        15px;

    margin:
        30px 0;

}


.fault-card {

    padding:
        24px;

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

    border-radius:
        var(--academy-radius-small);

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

}


.fault-severity {

    display:
        inline-flex;

    padding:
        5px 9px;

    margin-bottom:
        12px;

    border-radius:
        999px;

    background:
        rgba(239,68,68,.08);

    color:
        #f87171;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.fault-card h3 {

    margin:
        0 0 7px;

    font-size:
        17px;

}


.fault-card p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        13px;

}


/* =========================================================
   DIAGNOSTIC MATRIX
   ========================================================= */

.diagnostic-matrix {

    margin:
        35px 0;

    overflow:
        hidden;

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

    border-radius:
        var(--academy-radius);

}


.diagnostic-row {

    display:
        grid;

    grid-template-columns:
        1.1fr
        1fr
        1.4fr;

}


.diagnostic-row
+ .diagnostic-row {

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

}


.diagnostic-cell {

    padding:
        15px 17px;

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


.diagnostic-cell
+ .diagnostic-cell {

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

}


.diagnostic-header {

    background:
        rgba(56,189,248,.07);

}


.diagnostic-header
.diagnostic-cell {

    color:
        var(--academy-blue);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* =========================================================
   SYMPTOM → CAUSE → ACTION
   ========================================================= */

.symptom-card {

    display:
        grid;

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

    margin:
        30px 0;

    overflow:
        hidden;

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

    border-radius:
        var(--academy-radius);

}


.symptom-block {

    padding:
        25px;

}


.symptom-block
+ .symptom-block {

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

}


.symptom-block h3 {

    margin:
        0 0 9px;

    font-size:
        15px;

}


.symptom-block p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        13px;

}


.symptom-title {

    color:
        var(--academy-red);

}


.cause-title {

    color:
        var(--academy-accent-light);

}


.action-title {

    color:
        var(--academy-green);

}


/* =========================================================
   TEST RESULT PANEL
   ========================================================= */

.test-result {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(34,197,94,.18);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.055),
            rgba(7,16,24,.97)
        );

}


.test-result-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        20px;

}


.test-result-header h3 {

    margin:
        0;

    font-size:
        20px;

}


.test-status {

    padding:
        6px 11px;

    border-radius:
        999px;

    background:
        rgba(34,197,94,.1);

    color:
        var(--academy-green);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.test-result p {

    margin:
        0;

    color:
        var(--academy-text-soft);

}


/* =========================================================
   TROUBLESHOOTING CHECKLIST
   ========================================================= */

.troubleshooting-checklist {

    display:
        grid;

    gap:
        10px;

    margin:
        30px 0;

}


.troubleshooting-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    padding:
        16px 18px;

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

    border-radius:
        10px;

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

}


.troubleshooting-item::before {

    content:
        "01";

    flex:
        0 0 auto;

    color:
        var(--academy-blue);

    font-size:
        10px;

    font-weight:
        900;

}


.troubleshooting-item span {

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


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

@media (
    max-width: 1000px
) {

    .instrument-grid {

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

    }


    .fault-grid {

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

    }

}


@media (
    max-width: 700px
) {

    .diagnostic-hero {

        padding:
            25px;

    }


    .instrument-grid,
    .fault-grid {

        grid-template-columns:
            1fr;

    }


    .test-sequence-step {

        grid-template-columns:
            44px
            minmax(0,1fr);

        gap:
            13px;

    }


    .test-sequence-number {

        width:
            44px;

        height:
            44px;

    }


    .test-sequence-step:not(:last-child)::before {

        left:
            21px;

        top:
            44px;

    }


    .diagnostic-row {

        grid-template-columns:
            1fr;

    }


    .diagnostic-cell
    + .diagnostic-cell {

        border-left:
            none;

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

    }


    .symptom-card {

        grid-template-columns:
            1fr;

    }


    .symptom-block
    + .symptom-block {

        border-left:
            none;

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

    }


    .test-result {

        padding:
            23px;

    }


    .test-result-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


/* =========================================================
   END PART 8
   ========================================================= */
/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 9 — MAINTENANCE, SERVICE & SYSTEM PERFORMANCE
   ========================================================= */


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

.maintenance-hero {

    position:
        relative;

    margin:
        40px 0;

    padding:
        40px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(34,197,94,.2);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.08),
            rgba(7,16,24,.98)
        );

}


.maintenance-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    right:
        -160px;

    bottom:
        -180px;

    border:
        1px solid
        rgba(34,197,94,.12);

    border-radius:
        50%;

}


.maintenance-label {

    display:
        inline-flex;

    margin-bottom:
        15px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(34,197,94,.1);

    color:
        var(--academy-green);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


.maintenance-hero h2 {

    margin:
        0 0 12px;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        );

}


.maintenance-hero p {

    max-width:
        820px;

    margin:
        0;

    color:
        var(--academy-text-soft);

}


/* =========================================================
   SERVICE CYCLE
   ========================================================= */

.service-cycle {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

    gap:
        12px;

    margin:
        35px 0;

}


.service-cycle-step {

    position:
        relative;

    min-height:
        135px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px 12px;

    text-align:
        center;

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

    border-radius:
        14px;

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

}


.service-cycle-step:not(:last-child)::after {

    content:
        "→";

    position:
        absolute;

    right:
        -17px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--academy-green);

    font-size:
        18px;

    z-index:
        3;

}


.service-cycle-number {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        10px;

    border-radius:
        50%;

    background:
        rgba(34,197,94,.1);

    color:
        var(--academy-green);

    font-size:
        11px;

    font-weight:
        900;

}


.service-cycle-step strong {

    font-size:
        13px;

}


.service-cycle-step span {

    margin-top:
        4px;

    color:
        var(--academy-text-muted);

    font-size:
        10px;

}


/* =========================================================
   MAINTENANCE TASK GRID
   ========================================================= */

.maintenance-grid {

    display:
        grid;

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

    gap:
        16px;

    margin:
        30px 0;

}


.maintenance-card {

    padding:
        24px;

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

    border-radius:
        var(--academy-radius-small);

    background:
        var(--academy-panel);

    transition:
        var(--academy-transition);

}


.maintenance-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(34,197,94,.22);

}


.maintenance-card h3 {

    margin:
        0 0 8px;

    font-size:
        17px;

}


.maintenance-card p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        13px;

}


.maintenance-frequency {

    display:
        inline-flex;

    margin-bottom:
        12px;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        rgba(56,189,248,.08);

    color:
        var(--academy-blue);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* =========================================================
   PERFORMANCE MONITOR
   ========================================================= */

.performance-monitor {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(56,189,248,.18);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            145deg,
            rgba(56,189,248,.05),
            rgba(7,16,24,.98)
        );

}


.performance-monitor h3 {

    margin:
        0 0 20px;

    color:
        var(--academy-blue);

    font-size:
        21px;

}


.performance-row {

    display:
        grid;

    grid-template-columns:
        180px
        minmax(0,1fr)
        80px;

    align-items:
        center;

    gap:
        15px;

    padding:
        13px 0;

}


.performance-row
+ .performance-row {

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

}


.performance-name {

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


.performance-bar {

    width:
        100%;

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

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

}


.performance-bar span {

    display:
        block;

    width:
        var(--performance,75%);

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--academy-accent-dark),
            var(--academy-accent-light)
        );

}


.performance-value {

    color:
        var(--academy-accent-light);

    font-size:
        12px;

    font-weight:
        900;

    text-align:
        right;

}


/* =========================================================
   SERVICE RECORD
   ========================================================= */

.service-record {

    margin:
        35px 0;

    overflow:
        hidden;

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

    border-radius:
        var(--academy-radius);

}


.service-record-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px 24px;

    background:
        rgba(245,158,11,.06);

}


.service-record-header h3 {

    margin:
        0;

    font-size:
        19px;

}


.service-record-status {

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        rgba(34,197,94,.09);

    color:
        var(--academy-green);

    font-size:
        9px;

    font-weight:
        900;

    text-transform:
        uppercase;

}


.service-record-body {

    display:
        grid;

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

}


.service-record-field {

    padding:
        17px 20px;

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

}


.service-record-field:nth-child(even) {

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

}


.service-record-field strong {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--academy-text);

    font-size:
        12px;

}


.service-record-field span {

    color:
        var(--academy-text-muted);

    font-size:
        12px;

}


/* =========================================================
   PREVENTATIVE SERVICING
   ========================================================= */

.preventative-panel {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(245,158,11,.18);

    border-radius:
        var(--academy-radius);

    background:
        rgba(245,158,11,.035);

}


.preventative-panel h3 {

    margin:
        0 0 18px;

    color:
        var(--academy-accent-light);

    font-size:
        21px;

}


.preventative-list {

    display:
        grid;

    gap:
        10px;

}


.preventative-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        14px 16px;

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

    border-radius:
        10px;

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

}


.preventative-item::before {

    content:
        "✓";

    color:
        var(--academy-green);

    font-weight:
        900;

}


.preventative-item span {

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


/* =========================================================
   SYSTEM HEALTH STATUS
   ========================================================= */

.system-health {

    display:
        grid;

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

    gap:
        14px;

    margin:
        30px 0;

}


.health-card {

    padding:
        20px;

    text-align:
        center;

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

    border-radius:
        var(--academy-radius-small);

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

}


.health-indicator {

    width:
        11px;

    height:
        11px;

    margin:
        0 auto 11px;

    border-radius:
        50%;

    background:
        var(--academy-green);

    box-shadow:
        0 0 14px
        rgba(34,197,94,.4);

}


.health-card strong {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        14px;

}


.health-card span {

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


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

@media (
    max-width: 1000px
) {

    .service-cycle {

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

    }


    .service-cycle-step:not(:last-child)::after {

        display:
            none;

    }


    .maintenance-grid {

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

    }


    .system-health {

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

    }

}


@media (
    max-width: 700px
) {

    .maintenance-hero {

        padding:
            25px;

    }


    .service-cycle,
    .maintenance-grid,
    .system-health {

        grid-template-columns:
            1fr;

    }


    .performance-row {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .performance-value {

        text-align:
            left;

    }


    .service-record-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .service-record-body {

        grid-template-columns:
            1fr;

    }


    .service-record-field:nth-child(even) {

        border-left:
            none;

    }

}


/* =========================================================
   END PART 9
   ========================================================= */
/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 10 — ADVANCED FAULT FINDING & TECHNICAL DIAGNOSIS
   ========================================================= */


/* =========================================================
   ADVANCED DIAGNOSTIC HERO
   ========================================================= */

.advanced-diagnostic {

    position:
        relative;

    margin:
        40px 0;

    padding:
        40px;

    overflow:
        hidden;

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

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.07),
            rgba(7,16,24,.98)
        );

}


.advanced-diagnostic::before {

    content:
        "";

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    right:
        -170px;

    top:
        -170px;

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

    border-radius:
        50%;

}


.advanced-diagnostic-label {

    display:
        inline-flex;

    margin-bottom:
        15px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(239,68,68,.09);

    color:
        #f87171;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.advanced-diagnostic h2 {

    margin:
        0 0 12px;

    font-size:
        clamp(
            27px,
            4vw,
            39px
        );

}


.advanced-diagnostic p {

    max-width:
        840px;

    margin:
        0;

    color:
        var(--academy-text-soft);

}


/* =========================================================
   DIAGNOSTIC LEVELS
   ========================================================= */

.diagnostic-levels {

    display:
        grid;

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

    gap:
        14px;

    margin:
        35px 0;

}


.diagnostic-level {

    padding:
        23px 18px;

    text-align:
        center;

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

    border-radius:
        var(--academy-radius-small);

    background:
        var(--academy-panel);

    transition:
        var(--academy-transition);

}


.diagnostic-level:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(239,68,68,.24);

}


.diagnostic-level-number {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 12px;

    border-radius:
        50%;

    background:
        rgba(239,68,68,.08);

    color:
        #f87171;

    font-size:
        12px;

    font-weight:
        900;

}


.diagnostic-level h3 {

    margin:
        0 0 6px;

    font-size:
        16px;

}


.diagnostic-level p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


/* =========================================================
   FAULT TREE
   ========================================================= */

.fault-tree {

    position:
        relative;

    margin:
        35px 0;

    padding:
        30px;

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

    border-radius:
        var(--academy-radius);

    background:
        var(--academy-panel);

}


.fault-tree h3 {

    margin:
        0 0 25px;

    color:
        var(--academy-accent-light);

    font-size:
        21px;

}


.fault-tree-root {

    width:
        min(
            430px,
            100%
        );

    margin:
        0 auto 30px;

    padding:
        17px 20px;

    text-align:
        center;

    border:
        1px solid
        rgba(245,158,11,.2);

    border-radius:
        12px;

    background:
        rgba(245,158,11,.06);

    color:
        var(--academy-accent-light);

    font-size:
        13px;

    font-weight:
        800;

}


.fault-tree-grid {

    display:
        grid;

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

    gap:
        15px;

}


.fault-tree-branch {

    position:
        relative;

    padding:
        22px;

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

    border-radius:
        12px;

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

}


.fault-tree-branch::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        -30px;

    width:
        1px;

    height:
        30px;

    background:
        rgba(245,158,11,.2);

}


.fault-tree-branch h4 {

    margin:
        0 0 8px;

    color:
        var(--academy-text);

    font-size:
        15px;

}


.fault-tree-branch p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        12px;

}


/* =========================================================
   DIAGNOSTIC CHECKPOINTS
   ========================================================= */

.diagnostic-checkpoints {

    display:
        grid;

    gap:
        10px;

    margin:
        30px 0;

}


.diagnostic-checkpoint {

    display:
        grid;

    grid-template-columns:
        38px
        minmax(0,1fr);

    gap:
        13px;

    align-items:
        start;

    padding:
        16px;

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

    border-radius:
        10px;

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

}


.diagnostic-checkpoint-number {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(239,68,68,.08);

    color:
        #f87171;

    font-size:
        10px;

    font-weight:
        900;

}


.diagnostic-checkpoint h4 {

    margin:
        0 0 4px;

    font-size:
        14px;

}


.diagnostic-checkpoint p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        12px;

}


/* =========================================================
   MEASUREMENT PANEL
   ========================================================= */

.measurement-panel {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(56,189,248,.18);

    border-radius:
        var(--academy-radius);

    background:
        rgba(56,189,248,.035);

}


.measurement-panel h3 {

    margin:
        0 0 20px;

    color:
        var(--academy-blue);

    font-size:
        20px;

}


.measurement-grid {

    display:
        grid;

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

    gap:
        14px;

}


.measurement-card {

    padding:
        20px;

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

    border-radius:
        12px;

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

}


.measurement-card strong {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--academy-text);

    font-size:
        14px;

}


.measurement-card span {

    color:
        var(--academy-text-muted);

    font-size:
        12px;

}


/* =========================================================
   ROOT CAUSE ANALYSIS
   ========================================================= */

.root-cause {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(167,139,250,.18);

    border-radius:
        var(--academy-radius);

    background:
        rgba(167,139,250,.035);

}


.root-cause h3 {

    margin:
        0 0 18px;

    color:
        #c4b5fd;

    font-size:
        20px;

}


.root-cause-grid {

    display:
        grid;

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

    gap:
        12px;

}


.root-cause-step {

    position:
        relative;

    padding:
        20px 15px;

    text-align:
        center;

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

    border-radius:
        11px;

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

}


.root-cause-step strong {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #c4b5fd;

    font-size:
        13px;

}


.root-cause-step span {

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


.root-cause-step:not(:last-child)::after {

    content:
        "→";

    position:
        absolute;

    right:
        -17px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #c4b5fd;

    z-index:
        3;

}


/* =========================================================
   EXPERT DIAGNOSIS PANEL
   ========================================================= */

.expert-diagnosis {

    margin:
        35px 0;

    padding:
        30px;

    border-left:
        4px solid
        var(--academy-red);

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

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

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

    border-radius:
        0 var(--academy-radius-small)
        var(--academy-radius-small)
        0;

    background:
        rgba(239,68,68,.04);

}


.expert-diagnosis h3 {

    margin:
        0 0 10px;

    color:
        #f87171;

    font-size:
        20px;

}


.expert-diagnosis p {

    margin:
        0;

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


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

@media (
    max-width: 1000px
) {

    .diagnostic-levels {

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

    }


    .measurement-grid {

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

    }


    .root-cause-grid {

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

    }


    .root-cause-step:not(:last-child)::after {

        display:
            none;

    }

}


@media (
    max-width: 700px
) {

    .advanced-diagnostic {

        padding:
            25px;

    }


    .diagnostic-levels,
    .fault-tree-grid,
    .measurement-grid,
    .root-cause-grid {

        grid-template-columns:
            1fr;

    }


    .fault-tree {

        padding:
            22px;

    }


    .fault-tree-branch::before {

        display:
            none;

    }


    .diagnostic-checkpoint {

        grid-template-columns:
            34px
            minmax(0,1fr);

    }


    .diagnostic-checkpoint-number {

        width:
            34px;

        height:
            34px;

    }


    .expert-diagnosis {

        padding:
            23px;

    }

}


/* =========================================================
   END PART 10
   ========================================================= */

/* =========================================================
   NEXPAK SECURITY ACADEMY
   ACADEMY.CSS
   PART 11 — COMMISSIONING, HANDOVER & FINAL ASSESSMENT
   ========================================================= */


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

.commissioning-hero {

    position:
        relative;

    margin:
        40px 0;

    padding:
        40px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(34,197,94,.22);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.08),
            rgba(7,16,24,.98)
        );

}


.commissioning-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        340px;

    height:
        340px;

    right:
        -170px;

    top:
        -170px;

    border:
        1px solid
        rgba(34,197,94,.14);

    border-radius:
        50%;

}


.commissioning-label {

    display:
        inline-flex;

    margin-bottom:
        15px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(34,197,94,.1);

    color:
        var(--academy-green);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.commissioning-hero h2 {

    margin:
        0 0 12px;

    font-size:
        clamp(
            27px,
            4vw,
            40px
        );

}


.commissioning-hero p {

    max-width:
        850px;

    margin:
        0;

    color:
        var(--academy-text-soft);

}


/* =========================================================
   COMMISSIONING STATUS
   ========================================================= */

.commissioning-status {

    display:
        grid;

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

    gap:
        14px;

    margin:
        35px 0;

}


.commissioning-status-card {

    position:
        relative;

    padding:
        22px 18px;

    text-align:
        center;

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

    border-radius:
        var(--academy-radius-small);

    background:
        var(--academy-panel);

    transition:
        var(--academy-transition);

}


.commissioning-status-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(34,197,94,.24);

}


.commissioning-status-icon {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 11px;

    border-radius:
        50%;

    background:
        rgba(34,197,94,.09);

    color:
        var(--academy-green);

    font-size:
        17px;

    font-weight:
        900;

}


.commissioning-status-card h3 {

    margin:
        0 0 5px;

    font-size:
        15px;

}


.commissioning-status-card span {

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


/* =========================================================
   VERIFICATION CHECKLIST
   ========================================================= */

.verification-panel {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(34,197,94,.18);

    border-radius:
        var(--academy-radius);

    background:
        rgba(34,197,94,.035);

}


.verification-panel h3 {

    margin:
        0 0 20px;

    color:
        var(--academy-green);

    font-size:
        21px;

}


.verification-list {

    display:
        grid;

    gap:
        10px;

}


.verification-item {

    display:
        grid;

    grid-template-columns:
        35px
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        13px;

    padding:
        14px 16px;

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

    border-radius:
        10px;

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

}


.verification-icon {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(34,197,94,.09);

    color:
        var(--academy-green);

    font-weight:
        900;

}


.verification-item strong {

    display:
        block;

    color:
        var(--academy-text);

    font-size:
        13px;

}


.verification-item span {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


.verification-status {

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        rgba(34,197,94,.09);

    color:
        var(--academy-green);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* =========================================================
   HANDOVER PANEL
   ========================================================= */

.handover-panel {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(56,189,248,.18);

    border-radius:
        var(--academy-radius);

    background:
        rgba(56,189,248,.035);

}


.handover-panel h3 {

    margin:
        0 0 18px;

    color:
        var(--academy-blue);

    font-size:
        21px;

}


.handover-grid {

    display:
        grid;

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

    gap:
        12px;

}


.handover-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        15px 17px;

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

    border-radius:
        10px;

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

}


.handover-item::before {

    content:
        "✓";

    flex:
        0 0 auto;

    color:
        var(--academy-blue);

    font-weight:
        900;

}


.handover-item span {

    color:
        var(--academy-text-soft);

    font-size:
        13px;

}


/* =========================================================
   SYSTEM INTEGRATION
   ========================================================= */

.integration-panel {

    margin:
        35px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(167,139,250,.18);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(167,139,250,.055),
            rgba(7,16,24,.98)
        );

}


.integration-panel h3 {

    margin:
        0 0 10px;

    color:
        #c4b5fd;

    font-size:
        21px;

}


.integration-panel > p {

    max-width:
        800px;

    margin:
        0 0 22px;

    color:
        var(--academy-text-muted);

    font-size:
        13px;

}


.integration-grid {

    display:
        grid;

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

    gap:
        13px;

}


.integration-card {

    padding:
        20px 16px;

    text-align:
        center;

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

    border-radius:
        11px;

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

}


.integration-card strong {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--academy-text);

    font-size:
        13px;

}


.integration-card span {

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


/* =========================================================
   PROFESSIONAL HANDOVER CARD
   ========================================================= */

.handover-summary {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        18px;

    margin:
        35px 0;

}


.handover-summary-card {

    padding:
        25px;

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

    border-radius:
        var(--academy-radius-small);

    background:
        var(--academy-panel);

}


.handover-summary-card h3 {

    margin:
        0 0 10px;

    font-size:
        17px;

}


.handover-summary-card p {

    margin:
        0;

    color:
        var(--academy-text-muted);

    font-size:
        13px;

}


/* =========================================================
   FINAL EXAM HERO
   ========================================================= */

.exam-hero {

    position:
        relative;

    margin:
        40px 0;

    padding:
        45px;

    overflow:
        hidden;

    text-align:
        center;

    border:
        1px solid
        rgba(245,158,11,.24);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,.1),
            rgba(7,16,24,.98)
        );

}


.exam-hero::before,
.exam-hero::after {

    content:
        "";

    position:
        absolute;

    border:
        1px solid
        rgba(245,158,11,.1);

    border-radius:
        50%;

}


.exam-hero::before {

    width:
        320px;

    height:
        320px;

    left:
        -170px;

    top:
        -170px;

}


.exam-hero::after {

    width:
        240px;

    height:
        240px;

    right:
        -120px;

    bottom:
        -130px;

}


.exam-label {

    display:
        inline-flex;

    margin-bottom:
        15px;

    padding:
        7px 13px;

    border-radius:
        999px;

    background:
        rgba(245,158,11,.1);

    color:
        var(--academy-accent-light);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


.exam-hero h1 {

    position:
        relative;

    margin:
        0 0 12px;

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

    z-index:
        2;

}


.exam-hero p {

    position:
        relative;

    max-width:
        720px;

    margin:
        0 auto;

    color:
        var(--academy-text-soft);

    z-index:
        2;

}


/* =========================================================
   EXAM INFORMATION CARDS
   ========================================================= */

.exam-info {

    display:
        grid;

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

    gap:
        15px;

    margin:
        30px 0;

}


.exam-info-card {

    padding:
        24px;

    text-align:
        center;

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

    border-radius:
        var(--academy-radius-small);

    background:
        var(--academy-panel);

}


.exam-info-card strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--academy-accent-light);

    font-size:
        22px;

}


.exam-info-card span {

    color:
        var(--academy-text-muted);

    font-size:
        11px;

}


/* =========================================================
   EXAM QUESTION CARD
   ========================================================= */

.exam-question {

    position:
        relative;

    margin:
        25px 0;

    padding:
        28px;

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

    border-radius:
        var(--academy-radius);

    background:
        var(--academy-panel);

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

}


.question-number {

    display:
        inline-flex;

    margin-bottom:
        15px;

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        rgba(245,158,11,.08);

    color:
        var(--academy-accent-light);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.exam-question h2 {

    margin:
        0 0 22px;

    font-size:
        clamp(
            18px,
            3vw,
            23px
        );

    line-height:
        1.45;

}


/* =========================================================
   EXAM ANSWER OPTIONS
   ========================================================= */

.answer-option {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    margin:
        10px 0;

    padding:
        16px 18px;

    cursor:
        pointer;

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

    border-radius:
        11px;

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

    transition:
        var(--academy-transition);

}


.answer-option:hover {

    border-color:
        rgba(245,158,11,.25);

    background:
        rgba(245,158,11,.035);

}


.answer-option input {

    flex:
        0 0 auto;

    width:
        18px;

    height:
        18px;

    margin-top:
        3px;

    accent-color:
        var(--academy-accent);

}


.answer-option span {

    color:
        var(--academy-text-soft);

    font-size:
        13px;

    line-height:
        1.6;

}


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

.exam-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        14px;

    margin:
        40px 0;

}


.exam-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        190px;

    padding:
        14px 22px;

    border:
        1px solid
        rgba(245,158,11,.25);

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            var(--academy-accent),
            var(--academy-accent-dark)
        );

    color:
        #111;

    font-size:
        13px;

    font-weight:
        900;

    cursor:
        pointer;

    transition:
        var(--academy-transition);

}


.exam-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 35px
        rgba(245,158,11,.2);

}


/* =========================================================
   EXAM RESULT PANEL
   ========================================================= */

.exam-result {

    display:
        none;

    margin:
        35px 0;

    padding:
        35px;

    text-align:
        center;

    border:
        1px solid
        rgba(34,197,94,.22);

    border-radius:
        var(--academy-radius);

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.08),
            rgba(7,16,24,.98)
        );

}


.exam-result.active {

    display:
        block;

    animation:
        examResultIn
        .5s ease
        both;

}


.exam-result h2 {

    margin:
        0 0 10px;

    font-size:
        30px;

}


.exam-score {

    display:
        inline-block;

    margin:
        10px 0 15px;

    color:
        var(--academy-green);

    font-size:
        42px;

    font-weight:
        900;

}


.exam-result p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--academy-text-soft);

}


@keyframes examResultIn {

    from {

        opacity:
            0;

        transform:
            translateY(15px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   COURSE COMPLETION PANEL
   ========================================================= */

.course-completion {

    margin:
        40px 0;

    padding:
        35px;

    text-align:
        center;

    border:
        1px solid
        rgba(245,158,11,.2);

    border-radius:
        var(--academy-radius);

    background:
        rgba(245,158,11,.045);

}


.course-completion h2 {

    margin:
        0 0 10px;

    color:
        var(--academy-accent-light);

    font-size:
        27px;

}


.course-completion p {

    max-width:
        700px;

    margin:
        0 auto;

    color:
        var(--academy-text-soft);

}


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

@media (
    max-width: 1000px
) {

    .commissioning-status,
    .integration-grid {

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

    }


    .exam-info {

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

    }

}


@media (
    max-width: 700px
) {

    .commissioning-hero,
    .exam-hero {

        padding:
            26px;

    }


    .commissioning-status,
    .handover-grid,
    .integration-grid,
    .exam-info,
    .handover-summary {

        grid-template-columns:
            1fr;

    }


    .verification-item {

        grid-template-columns:
            34px
            minmax(0,1fr);

    }


    .verification-status {

        grid-column:
            2;

        justify-self:
            start;

    }


    .exam-question {

        padding:
            22px;

    }


    .exam-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .exam-button {

        width:
            100%;

    }


    .exam-result {

        padding:
            27px 21px;

    }


    .course-completion {

        padding:
            27px 21px;

    }

}


/* =========================================================
   END PART 11
   ACADEMY.CSS COMPLETE
   ========================================================= */