:root{

--nav-bg:#ffffff;
--nav-text:#101214;
--nav-muted:#68717a;

--nav-line:#d4d9de;

--nav-blue:#426D8C;
--nav-blue-dark:#1f4058;

--nav-panel:#f3f6f8;

--nav-black:#080a0c;

--nav-radius:4px;

--nav-max:1280px;

--shadow-soft:
0 12px 30px rgba(0,0,0,.08);

--shadow-hard:
0 20px 50px rgba(0,0,0,.15);

}



*{

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

background:
linear-gradient(
180deg,
#ffffff 0%,
#f7f9fa 100%
);

color:var(--nav-text);

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

}



a{

color:inherit;

text-decoration:none;

}



img{

max-width:100%;

height:auto;

display:block;

}





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


.main-header{

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

backdrop-filter:blur(12px);

border-bottom:
1px solid var(--nav-line);

position:sticky;

top:0;

z-index:100;

}



.header-inner{

max-width:var(--nav-max);

margin:auto;

padding:15px 25px;

display:flex;

align-items:center;

gap:25px;

}





.logo-link{

display:flex;

align-items:center;

}



.logo-link img{

width:82px;
height:82px;

filter:
drop-shadow(
0 5px 12px rgba(0,0,0,.15)
);

transition:.25s;

}


.logo-link:hover img{

transform:
rotate(-3deg)
scale(1.05);

}



.brand{

display:flex;

flex-direction:column;

line-height:1.2;

}


.brand-name{

font-size:1.35rem;

font-weight:950;

letter-spacing:.14em;

color:#050505;

}






.brand-sub{

font-size:.72rem;

font-weight:700;

letter-spacing:.22em;

color:var(--nav-blue);

margin-top:5px;

}




/* =========================
MENU
========================= */


.main-menu a{


border:

1px solid transparent;


}


.main-menu a:hover{

background:#111;

color:white;

border-color:#111;

}


.main-menu a{

padding:10px 15px;

font-size:.85rem;

font-weight:700;

letter-spacing:.05em;

border-radius:6px;

transition:
background .2s ease,
color .2s ease;

}




/* =========================
MAIN
========================= */


.navigator-page{

max-width:var(--nav-max);

margin:auto;

padding:40px 25px;

}




/* =========================
ENGINEERING INDEX
========================= */


.engineering-index{

width:100%;

}



.index-header{

border-left:4px solid var(--nav-blue);

padding-left:25px;

margin-bottom:35px;

}



.index-label{

font-size:.75rem;

letter-spacing:.18em;

color:var(--nav-muted);

font-weight:700;

margin-bottom:10px;

}



.index-header h1{

margin:0;

font-size:clamp(2rem,5vw,3.2rem);

font-weight:900;

letter-spacing:-.04em;

}



.index-header p{

margin-top:10px;

color:var(--nav-muted);

font-size:1.05rem;

}





/* =========================
SEARCH
========================= */


.navigator-search{

background:white;

padding:20px;

border:

1px solid var(--nav-line);

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

border-radius:6px;

}



.navigator-search form{

display:flex;

gap:10px;

}



.navigator-search input{

width:100%;

padding:14px 18px;

border:1px solid #cbd3da;

background:#fafbfc;

font-family:
"JetBrains Mono",
"Consolas",
monospace;

font-size:1rem;

border-radius:4px;

color:var(--nav-text);

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

}


.navigator-search input:focus{


box-shadow:

0 0 0 3px
rgba(66,109,140,.15);


}



.navigator-search input:focus{

outline:none;

border-color:var(--nav-blue);

}




.navigator-search button{


background:#111;


letter-spacing:.12em;


}


.navigator-search button:hover{


background:
var(--nav-blue);


}



.navigator-search button:hover{

background:var(--nav-blue-dark);

}






/* =========================
BREADCRUMB
========================= */


.breadcrumbs{

display:flex;

gap:10px;

font-size:.85rem;

color:var(--nav-muted);

margin:25px 0;

}



.breadcrumbs a:hover{

color:var(--nav-blue);

}







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


.tree{

background:white;

border:

1px solid var(--nav-line);

padding:25px;

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

border-radius:6px;

}



.tree h2{

font-size:1rem;

letter-spacing:.12em;

margin:35px 0 15px;

font-weight:800;

}




.tree-group{


background:#fff;


transition:.2s;


}



.tree-group:hover{


background:#fafafa;


}



.tree-group summary{

list-style:none;

cursor:pointer;

display:flex;

align-items:center;

gap:12px;

padding:18px 15px;

font-weight:800;

font-size:1.05rem;

transition:.2s;

}



.tree-group summary::-webkit-details-marker{

display:none;

}



.tree-group summary:hover{

background:var(--nav-panel);

color:var(--nav-blue);

}



.tree-icon{

font-size:1.2rem;

color:var(--nav-blue);

width:20px;

}



.counter{

margin-left:auto;

font-size:.75rem;

color:var(--nav-muted);

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

padding:3px 10px;

border-radius:20px;

font-weight:600;

}





/* =========================
TREE ITEMS
========================= */


.tree-items{

margin-left:45px;

padding:5px 0 20px;

border-left:1px solid var(--nav-line);

}



.tree-items a{

display:block;

position:relative;

font-family:
"JetBrains Mono",
"Consolas",
monospace;

font-size:.9rem;

padding:10px 20px;

border-left:
2px solid transparent;

transition:.2s;

}






.tree-items a::before{

content:"";

position:absolute;

left:-1px;

top:50%;

width:15px;

height:1px;

background:var(--nav-line);

}



.tree-items a:hover{

border-left:2px solid var(--nav-blue);

padding-left:30px;

background:var(--nav-panel);

color:var(--nav-blue);

}



/* =========================
RELATED TOPICS
========================= */


.article-navigator{

margin-top:70px;

border-top:1px solid var(--nav-line);

padding-top:40px;

}



.nav-box{

margin-bottom:40px;

}



.nav-title{

font-size:.75rem;

font-weight:800;

letter-spacing:.18em;

color:var(--nav-muted);

margin-bottom:20px;

}





.related-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(240px,1fr));

gap:12px;

}





.related-grid a{


background:

linear-gradient(
135deg,
#fff,
#f4f7f9
);


box-shadow:

0 5px 15px rgba(0,0,0,.05);


}



.related-grid a span{

font-size:.75rem;

color:var(--nav-blue);

font-weight:900;

}



.related-grid a:hover{

background:var(--nav-blue);

color:white;

border-color:var(--nav-blue);

transform:translateY(-2px);

}





.related-grid a:hover span{

color:white;

}









/* =========================
PREVIOUS NEXT
========================= */


.page-switch{

margin:45px 0;

border-top:1px solid var(--nav-line);

border-bottom:1px solid var(--nav-line);

padding:25px 0;


display:grid;

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

align-items:center;

gap:20px;

}



.previous-page,
.next-page{

font-size:.75rem;

font-weight:800;

letter-spacing:.12em;

color:var(--nav-muted);

padding:15px;

transition:.2s;

}



.next-page{

text-align:right;

}



.previous-page:hover,
.next-page:hover{

color:var(--nav-blue);

}



.navigator-center{

text-align:center;

font-size:.75rem;

letter-spacing:.15em;

font-weight:900;

color:var(--nav-blue);

}







/* =========================
CONTACT PANEL
========================= */


.technical-contact{

margin:50px 0;

padding:40px;

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

background:

linear-gradient(
135deg,
#ffffff,
#f7f8f9
);


text-align:center;

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

}



.contact-label{

font-size:.75rem;

font-weight:800;

letter-spacing:.18em;

color:var(--nav-muted);

}



.technical-contact h3{

font-size:2rem;

margin:15px 0;

letter-spacing:-.03em;

}



.technical-contact p{

color:var(--nav-muted);

margin-bottom:25px;

}





.phone-button{

display:inline-flex;

padding:14px 35px;

background:var(--nav-blue);

color:white;

font-weight:800;

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

transition:.25s;

}



.phone-button:hover{

background:var(--nav-blue-dark);

transform:translateY(-2px);

}



/* =========================
COMPRESSED DARK ENGINEERED FOOTER
========================= */


.main-footer{

margin-top:70px;

background:#141618;

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

padding:3rem 0 1.5rem;

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

position:relative;

overflow:hidden;

}



.main-footer::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;


background-image:

linear-gradient(
var(--nav-line) 1px,
transparent 1px
),

linear-gradient(
90deg,
var(--nav-line) 1px,
transparent 1px
);


background-size:100px 100px;

opacity:.05;

pointer-events:none;

}



.footer-container{

max-width:1100px;

margin:0 auto;

padding:0 6vw;

position:relative;

z-index:1;

}




.footer-grid{

display:grid;

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

gap:2.5rem;

margin-bottom:2.5rem;

}




.footer-tag{

font-family:
"JetBrains Mono",
monospace;

font-size:.65rem;

text-transform:uppercase;

letter-spacing:.2em;

color:var(--nav-blue);

margin-bottom:.75rem;

font-weight:700;

}




.footer-column h3{

font-size:1.1rem;

font-weight:700;

color:#fff;

margin:0 0 .8rem;

}




.footer-column p{

font-size:.85rem;

line-height:1.6;

opacity:.7;

font-weight:500;

color:#fff;

}




.footer-nav{

display:flex;

flex-direction:column;

gap:.5rem;

}




.footer-nav a{

color:#fff;

font-size:.9rem;

font-weight:600;

opacity:.6;

transition:.3s ease;

}




.footer-nav a:hover{

color:var(--nav-blue);

opacity:1;

transform:translateX(5px);

}




.footer-phone{

font-size:1.3rem;

color:#fff;

margin:0 0 .8rem;

}




.footer-manifesto{

border-top:

1px solid rgba(255,255,255,.05);


margin-top:2.5rem;

padding-top:1.5rem;


display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;


font-size:.65rem;

letter-spacing:.05em;

text-transform:uppercase;

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

}




.status-mini{

display:flex;

align-items:center;

gap:8px;

font-family:
"JetBrains Mono",
monospace;

color:var(--nav-blue);

font-weight:700;

}




.status-dot{

width:6px;

height:6px;

background:var(--nav-blue);

border-radius:50%;

display:inline-block;

box-shadow:

0 0 8px var(--nav-blue);


animation:

footerPulse 2s infinite ease-in-out;

}




@keyframes footerPulse{


0%,100%{

opacity:1;

transform:scale(1);

}


50%{

opacity:.4;

transform:scale(.8);

}


}




.footer-bottom{

margin-top:1rem;

padding-top:.8rem;

border-top:

1px solid rgba(255,255,255,.03);


text-align:center;

font-family:

"JetBrains Mono",
monospace;


font-size:.52rem;

letter-spacing:.12em;

line-height:1.4;

color:#fff;

opacity:.8;

}



.footer-bottom p{

margin:.15rem 0;

}




@media(max-width:900px){


.footer-grid{

grid-template-columns:1fr;

gap:2rem;

text-align:center;

}


.footer-nav a:hover{

transform:none;

}


.footer-manifesto{

flex-direction:column;

justify-content:center;

text-align:center;

}


}





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


@media(max-width:768px){



.header-inner{

padding:15px;

gap:15px;

flex-wrap:wrap;

}



.logo-link img{

width:65px;

height:65px;

}



.brand-name{

font-size:1rem;

}

.main-menu{

display:flex;

gap:10px;

margin-left:auto;

align-items:center;

}

.main-menu{

width:100%;

margin-left:0;

display:grid;

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

}



.main-menu a{

text-align:center;

padding:12px 8px;

font-size:.75rem;

}




.navigator-page{

padding:25px 15px;

}





.index-header{

padding-left:15px;

}



.index-header h1{

font-size:2rem;

}



.navigator-search button{

background:var(--nav-black);

color:#ffffff;

border:none;

padding:14px 28px;

font-size:.85rem;

font-weight:800;

letter-spacing:.12em;

text-transform:uppercase;

border-radius:4px;

cursor:pointer;

transition:
background .25s ease,
transform .25s ease;

}


.navigator-search button:hover{

background:var(--nav-blue-dark);

transform:translateY(-1px);

}}

.search-box{

display:flex;

gap:10px;

}

.search-box input{

flex:1;

padding:14px 18px;

font-size:1rem;

border-radius:4px;

}

.search-box button{

padding:14px 25px;

border:none;

cursor:pointer;

color:white;

}



.tree-group summary{

font-size:.9rem;

padding:15px 8px;

}



.tree-items{

margin-left:25px;

}




.related-grid{

grid-template-columns:1fr;

}




.page-switch{

grid-template-columns:1fr;

text-align:center;

}



.next-page{

text-align:center;

}




.technical-contact{

padding:25px 15px;

}



.technical-contact h3{

font-size:1.5rem;

}



.footer-container{

padding:40px 15px 25px;

}




.footer-manifesto{

flex-direction:column;

}




}






/* =========================
SMALL PHONES
========================= */


@media(max-width:380px){


.brand-sub{

display:none;

}



.main-menu{

grid-template-columns:1fr;

}



.tree-group summary{

font-size:.85rem;

}



.related-grid a{

padding:14px;

}


}

@media(prefers-reduced-motion:no-preference){

.tree-group,
.related-grid a,
.phone-button,
.main-menu a{

transition:
all .25s cubic-bezier(.4,0,.2,1);

}

}


body{

margin:0;

}

h1,h2,h3,h4,p{

margin-top:0;

}

.related-grid a{

display:block;

padding:20px;

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

border-radius:6px;

transition:.25s;

}

mark{

background:var(--nav-blue);

color:white;

padding:2px 5px;

border-radius:3px;

font-weight:700;

}