/* =========================================================
   ISE ULTRA ENGINEERING SYSTEM UI
========================================================= */

:root{
    --navy:#061826;
    --navy2:#0a2236;
    --panel:#0f2436;
    --line:rgba(255,255,255,.08);
    --gold:#d4af37;
    --text:#12273a;
    --muted:#6c7f92;
}

/* BODY */

body{
    background:#f3f7fb;
    color:var(--text);
}

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

.header{
    height:82px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(6,24,38,.06);
}

.nav{
    height:82px;
}

.main-nav a{
    position:relative;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
    padding:13px 15px;
    border-radius:0;
}

.main-nav a:after{
    content:"";
    position:absolute;
    left:15px;
    bottom:8px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:.3s;
}

.main-nav a:hover:after,
.main-nav a.active:after{
    width:24px;
}

.main-nav a:hover,
.main-nav a.active{
    background:transparent;
    color:var(--navy);
}

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

.hero-system{
    min-height:auto;
    padding:95px 0 80px;
    background:
        linear-gradient(135deg,#05131f 0%,#081f31 55%,#0a2b42 100%);
}

.hero-system:before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:55px 55px;
    opacity:.45;
}

.hero-system:after{
    width:520px;
    height:520px;
    border-width:55px;
    opacity:.4;
}

.hero-system-grid{
    gap:50px;
}

.hero-copy{
    max-width:620px;
}

.hero-system h1{
    font-size:62px;
    line-height:0.96;
    letter-spacing:-3px;
    font-weight:800;
    max-width:600px;
    margin-top:10px;
}

.hero-system p{
    font-size:15px;
    line-height:1.9;
    color:#b8cad8;
    max-width:560px;
    margin-top:24px;
}

.kicker{
    background:transparent;
    padding:0;
    border-radius:0;
    letter-spacing:.16em;
    font-size:11px;
    color:var(--gold);
}

.hero-actions{
    margin-top:34px;
}

/* BUTTONS */

.btn{
    height:50px;
    padding:0 24px;
    border-radius:0;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:800;
}

.btn-gold{
    background:var(--gold);
}

.btn-outline{
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.03);
}

/* HERO BOXES */

.hero-codes{
    margin-top:42px;
    gap:10px;
}

.hero-codes div{
    border-radius:0;
    padding:18px;
    background:rgba(255,255,255,.04);
    border-left:3px solid var(--gold);
    backdrop-filter:blur(12px);
}

.hero-codes b{
    font-size:15px;
    margin-bottom:5px;
}

/* ========================================
   ENGINEERING PANEL
======================================== */

.system-map,
.console{
    border-radius:0;
    background:rgba(9,25,40,.82);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 40px 90px rgba(0,0,0,.35);
}

.map-header,
.console-top{
    height:58px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
}

.map-body{
    min-height:390px;
}

.flow-node{
    border-radius:0;
    background:
        linear-gradient(145deg,#0c2b45,#123958);
    border:1px solid rgba(255,255,255,.08);
    font-size:13px;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.flow-node:hover{
    transform:none;
    border-color:rgba(212,175,55,.45);
}

/* ========================================
   SECTIONS
======================================== */

.section{
    padding:82px 0;
}

.section-marker,
.section-head{
    border-left:2px solid var(--gold);
    padding-left:18px;
}

.section h2{
    font-size:44px;
    line-height:1.08;
    letter-spacing:-2px;
    max-width:760px;
}

.lead{
    font-size:16px;
    line-height:1.9;
}

/* ========================================
   MODULES
======================================== */

.module-grid{
    gap:18px;
}

.module-card{
    border-radius:0;
    padding:34px;
    background:white;
    border:1px solid #dce6ef;
    box-shadow:none;
    position:relative;
    overflow:hidden;
}

.module-card:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:4px;
    height:100%;
    background:var(--gold);
}

.module-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 25px 50px rgba(6,24,38,.08);
}

.module-card b{
    width:auto;
    height:auto;
    background:none;
    color:var(--gold);
    border-radius:0;
    margin-bottom:18px;
    font-size:42px;
    line-height:1;
}

.module-card h3{
    font-size:28px;
    letter-spacing:-1px;
}

.module-card p{
    margin-top:14px;
}

.module-card a{
    margin-top:24px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

/* ========================================
   PROJECT FILES
======================================== */

.project-file{
    border-radius:0;
    border:1px solid #dfe7ef;
    box-shadow:none;
    padding:24px;
    align-items:center;
}

.file-code{
    border-radius:0;
    min-height:72px;
    font-size:13px;
    letter-spacing:.08em;
}

.project-file h3{
    font-size:24px;
    letter-spacing:-1px;
}

/* ========================================
   CAPABILITIES
======================================== */

.cap-item{
    border-radius:0;
    text-align:left;
    border-top:3px solid var(--gold);
    box-shadow:none;
    padding:26px;
}

.cap-item span{
    display:block;
    font-size:14px;
    margin-bottom:18px;
}

.cap-item h3{
    font-size:22px;
    letter-spacing:-1px;
}

/* ========================================
   CONSOLE
======================================== */

.console-status div,
.console-steps div{
    border-radius:0;
}

.console-status b{
    font-size:20px;
}

.console-status small{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* ========================================
   FOOTER
======================================== */

.footer{
    background:#04121d;
    position:relative;
}

.footer:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.5),
        transparent
    );
}

.footer-grid{
    gap:50px;
}

.footer h4{
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold);
}

.footer a:hover{
    color:white;
}

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

@media(max-width:980px){

    .hero-system h1{
        font-size:46px;
    }

    .section h2{
        font-size:34px;
    }

}

@media(max-width:640px){

    .hero-system{
        padding:70px 0 60px;
    }

    .hero-system h1{
        font-size:36px;
        letter-spacing:-2px;
    }

    .hero-system p{
        font-size:14px;
    }

    .btn{
        width:100%;
    }

    .section h2{
        font-size:28px;
    }

    .module-card{
        padding:26px;
    }

}