:root{
--petrol:#005D6D;
--petrol-dark:#014652;
--text:#111111;
--muted:#6b7280;
--line:#e5e7eb;
--bg:#f5f7fa;
--card:#ffffff;
--navy:#0f172a;
--navy-deep:#081327;
--soft:#f8fafc;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
height:100%;
margin:0;
padding:0;
}

body{
font-family:'Readex Pro',sans-serif;
background:var(--bg);
color:var(--navy);
display:flex;
flex-direction:column;
min-height:100vh;
margin:0;
padding:0;
overflow-x:hidden;
}

a{
color:inherit;
}

.wrap{
max-width:1380px;
margin:auto;
padding-left:40px;
padding-right:40px;
}

/* HEADER */

.site-header{
position:sticky;
top:0;
z-index:1000;
background:rgba(255,255,255,0.96);
backdrop-filter:blur(10px);
border-bottom:1px solid #e6eaf0;
box-shadow:0 10px 30px rgba(15,23,42,0.05);
}

.header-container{
max-width:1380px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding:16px 20px;
min-height:76px;
}

.logo-area{
display:flex;
align-items:center;
}

.logo-area a{
display:inline-flex;
align-items:center;
}

.logo-area img{
height:54px;
display:block;
}

.main-nav a{
font-family:'Readex Pro',sans-serif;
font-size:15px;
font-weight:500;
letter-spacing:.2px;
text-decoration:none;
border-bottom:none;
}

.main-nav a::after{
bottom:-14px;
}

.main-nav a:not(:hover)::after{
width:0;
}
.main-nav{
display:flex;
align-items:center;
gap:32px;
margin-left:auto;
flex:1;
}

.nav-left > a,
.nav-item > a{
text-decoration:none;
color:var(--navy);
font-weight:500;
font-size:15px;
padding:10px 4px;
position:relative;
display:inline-flex;
align-items:center;
}

.nav-left > a::after,
.nav-item > a::after{
content:"";
position:absolute;
left:0;
bottom:-16px;
width:0;
height:2px;
background:var(--petrol);
transition:.25s ease;
}

.nav-left > a:hover::after,
.nav-left > a.active::after,
.nav-item:hover > a::after,
.nav-item.active > a::after{
width:100%;
}

.nav-left > a:hover,
.nav-left > a.active,
.nav-item:hover > a,
.nav-item.active > a{
color:var(--petrol);
}

.nav-item{
position:relative;
}

/* MEGA MENU */

.mega-menu{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
width:620px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.25s ease;
padding-top:18px;
}

.nav-item:hover .mega-menu{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.mega-menu-inner{
background:#fff;
border:1px solid #e6eaf0;
border-radius:22px;
padding:20px;
box-shadow:0 22px 50px rgba(15,23,42,.10);
}

.mega-head{
margin-bottom:16px;
padding-bottom:14px;
border-bottom:1px solid #eef2f6;
}

.mega-kicker{
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
color:#64748b;
margin-bottom:6px;
}

.mega-title-main{
font-size:18px;
font-weight:600;
color:var(--navy);
}

.mega-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.mega-link{
text-decoration:none;
border:1px solid #eef2f6;
border-radius:16px;
padding:16px;
background:#f8fafc;
transition:.2s ease;
}

.mega-link:hover{
background:#fff;
transform:translateY(-2px);
border-color:#d9e1ea;
box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.mega-title{
font-size:15px;
font-weight:600;
color:var(--navy);
display:block;
margin-bottom:4px;
}

.mega-sub{
font-size:12px;
color:#64748b;
}

/* MOBILE NAV */

.mobile-menu-btn{
display:none;
width:46px;
height:46px;
border:1px solid #e5e7eb;
background:#fff;
border-radius:12px;
cursor:pointer;
padding:8px;
}

.mobile-menu-btn span{
display:block;
height:2px;
background:var(--navy);
margin:6px 0;
border-radius:4px;
}

.mobile-nav{
display:none;
max-width:1380px;
margin:auto;
padding:0 20px 18px;
}

.mobile-nav.open{
display:flex;
flex-direction:column;
gap:10px;
}

.mobile-nav a{
text-decoration:none;
color:var(--navy);
padding:12px 14px;
border:1px solid #e6eaf0;
border-radius:12px;
background:#fff;
}

.mobile-nav-divider{
padding:10px 4px 0;
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:#64748b;
}

.mobile-sub-link{
background:#f8fafc !important;
}

/* PAGE BODY */

.page-body{
max-width:1380px;
margin:auto;
padding:18px 20px 30px;
flex:1 0 auto;
width:100%;
background:var(--bg);
}

/* HOME GLOBAL */

.hero{
padding:6px 0 22px;
display:flex;
flex-direction:column;
gap:18px;
}

.hero-main{
background-image:
linear-gradient(rgba(0,93,109,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,93,109,.05) 1px, transparent 1px);
background-size:34px 34px;
border-radius:24px;
padding:36px;
background-color:#fff;
border:1px solid #e6eaf0;
box-shadow:0 16px 40px rgba(15,23,42,.05);
max-width:100%;
}

.hero-kicker{
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
color:#64748b;
margin-bottom:14px;
}

.hero-main h1{
font-size:48px;
font-weight:600;
line-height:1.12;
margin-bottom:22px;
max-width:760px;
}

.hero-main p{
max-width:620px;
font-size:16px;
line-height:1.85;
color:#334155;
}

.hero-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:28px;
}

.btn-primary,
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
border-radius:14px;
padding:14px 22px;
font-weight:600;
font-size:14px;
transition:.2s ease;
}

.btn-primary{
background:var(--petrol);
color:#fff;
}

.btn-primary:hover{
background:var(--petrol-dark);
transform:translateY(-1px);
}

.btn-secondary{
background:#fff;
color:var(--navy);
border:1px solid #dbe2ea;
}

.btn-secondary:hover{
background:#f8fafc;
}

.specs{
margin-top:28px;
font-size:13px;
letter-spacing:3px;
color:#64748b;
}

.section-block{
padding:40px 0 0;
}

.section-band{
margin-top:14px;
}

.section-head{
margin-bottom:24px;
}

.section-kicker{
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
color:#64748b;
margin-bottom:8px;
}

.section-head h2{
font-size:34px;
font-weight:600;
line-height:1.2;
}

.grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:28px;
}

.card{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:28px;
transition:.25s;
box-shadow:0 10px 28px rgba(15,23,42,.04);
}

.card:hover{
transform:translateY(-4px);
border-color:#cdd9e2;
box-shadow:0 16px 36px rgba(15,23,42,.07);
}

.icon{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:#eef6f7;
color:var(--petrol);
margin-bottom:16px;
}

.card h3{
font-size:20px;
font-weight:600;
margin-bottom:10px;
}

.card p{
color:#475569;
line-height:1.75;
font-size:15px;
}

.entry-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
}

.entry-card{
display:block;
text-decoration:none;
background:#fff;
border:1px solid #e6eaf0;
border-radius:20px;
padding:24px;
transition:.22s ease;
box-shadow:0 10px 26px rgba(15,23,42,.04);
}

.entry-card:hover{
transform:translateY(-3px);
box-shadow:0 18px 40px rgba(15,23,42,.07);
}

.entry-card span{
display:block;
color:#64748b;
font-size:13px;
margin-bottom:10px;
}

.entry-card strong{
font-size:22px;
font-weight:600;
color:var(--navy);
}

.contact-box{
padding:70px 0 0;
}

.contact-box h2{
font-size:34px;
font-weight:600;
margin-bottom:12px;
}

.form{
max-width:900px;
}

.row{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-bottom:18px;
}

.input-wrap{
position:relative;
}

.input-wrap i{
position:absolute;
left:14px;
top:15px;
color:#64748b;
width:18px;
height:18px;
}

.input-wrap input,
.input-wrap textarea{
width:100%;
border:1px solid #d9dde3;
border-radius:14px;
background:#fff;
font-family:'Readex Pro',sans-serif;
font-size:15px;
padding:14px 14px 14px 44px;
outline:none;
transition:.2s ease;
}

.input-wrap input:focus,
.input-wrap textarea:focus{
border-color:#9db8bf;
box-shadow:0 0 0 4px rgba(0,93,109,.08);
}

.textarea-wrap{
margin-top:8px;
margin-bottom:18px;
}

.textarea-wrap textarea{
min-height:170px;
resize:vertical;
}

.btn-submit{
margin-top:6px;
background:var(--petrol);
color:#fff;
border:none;
border-radius:14px;
padding:14px 22px;
font-family:inherit;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:.2s ease;
width:100%;
}

.btn-submit:hover{
background:var(--petrol-dark);
}

/* CATEGORY PAGE */

.category-layout{
display:grid;
grid-template-columns:290px minmax(0,1fr);
gap:28px;
}

.category-sidebar{
position:relative;
}

.sidebar-card{
position:sticky;
top:108px;
background:#fff;
border:1px solid #e6eaf0;
border-radius:22px;
padding:20px;
box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.sidebar-title{
font-size:18px;
font-weight:600;
margin-bottom:16px;
color:var(--navy);
}

.category-tree{
display:flex;
flex-direction:column;
gap:8px;
}

.category-tree.level-1,
.category-tree.level-2,
.category-tree.level-3,
.category-tree.level-4{
margin-top:8px;
margin-left:14px;
padding-left:12px;
border-left:1px solid #eef2f6;
}

.tree-link{
display:block;
text-decoration:none;
color:#334155;
font-size:14px;
padding:10px 12px;
border-radius:12px;
transition:.2s ease;
}

.tree-link:hover{
background:#f8fafc;
color:var(--navy);
}

.tree-link.active{
background:#eef6f7;
color:var(--petrol-dark);
font-weight:600;
}

.category-content{
min-width:0;
}

.category-head{
background:#fff;
border:1px solid #e6eaf0;
border-radius:24px;
padding:26px;
margin-bottom:24px;
box-shadow:0 10px 28px rgba(15,23,42,.04);
}

.category-title{
font-size:34px;
font-weight:600;
margin-top:6px;
}

.category-intro{
margin-top:12px;
max-width:860px;
color:#475569;
line-height:1.8;
}

.category-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
}

.category-card{
display:block;
text-decoration:none;
background:#fff;
border:1px solid #e6eaf0;
border-radius:20px;
padding:24px;
transition:.22s ease;
box-shadow:0 10px 26px rgba(15,23,42,.04);
}

.category-card:hover{
transform:translateY(-3px);
box-shadow:0 18px 36px rgba(15,23,42,.07);
}

.category-card-kicker{
display:block;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:#64748b;
margin-bottom:10px;
}

.category-card h3{
font-size:21px;
font-weight:600;
margin-bottom:14px;
color:var(--navy);
}

.category-card-link{
font-size:14px;
font-weight:500;
color:var(--petrol);
}

.product-list-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:18px;
}

.product-list-title{
font-size:24px;
font-weight:600;
}

.product-list-sub{
font-size:14px;
color:#64748b;
}

.product-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
}

.product-card{
display:block;
text-decoration:none;
background:#fff;
border:1px solid #e6eaf0;
border-radius:20px;
padding:22px;
transition:.22s ease;
box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.product-card:hover{
transform:translateY(-3px);
box-shadow:0 18px 36px rgba(15,23,42,.07);
}

.product-card-top{
display:flex;
justify-content:space-between;
margin-bottom:16px;
}

.product-card-code{
display:inline-flex;
padding:7px 10px;
border-radius:999px;
background:#eef2f7;
font-size:12px;
font-weight:600;
color:#334155;
}

.product-card h3{
font-size:20px;
font-weight:600;
line-height:1.35;
color:var(--navy);
margin-bottom:16px;
}

.product-card-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:18px;
}

.product-card-meta span{
display:inline-flex;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
font-size:12px;
color:#475569;
border:1px solid #eef2f6;
}

.product-card-link{
font-size:14px;
font-weight:600;
color:var(--petrol);
}

/* FOOTER */

.footer{
flex-shrink:0;
width:100%;
margin-top:0;
background:linear-gradient(180deg,#081327 0%, #040a18 100%);
color:#94a3b8;
}

.footer-main{
padding:60px 0 40px;
}

.footer-inner{
max-width:1240px;
margin:auto;
padding:0 24px;
display:grid;
grid-template-columns:1.7fr 1fr 1fr 1fr;
gap:54px;
}

.footer-col{
display:flex;
flex-direction:column;
gap:12px;
}

.footer-about-col{
padding-right:20px;
}

.footer-title{
font-size:15px;
font-weight:600;
color:#ffffff;
margin-bottom:10px;
}

.footer-about{
font-size:14px;
line-height:1.8;
color:#9fb0c3;
max-width:340px;
}

.footer-tag{
margin-top:10px;
font-size:13px;
color:#6f839b;
}

.footer-col a{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
font-size:14px;
color:#9fb0c3;
transition:.2s;
}

.footer-col a:hover{
color:#ffffff;
transform:translateX(3px);
}

.footer-contact{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
color:#9fb0c3;
}

.footer svg{
width:16px;
height:16px;
color:#7f95ad;
}

.footer-bottom{
width:100%;
border-top:1px solid rgba(255,255,255,.06);
background:#040a18;
}

.footer-bottom-wrap{
max-width:1240px;
margin:auto;
padding:18px 24px 22px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
text-align:center;
}

.footer-copy{
font-size:12px;
color:#7f95ad;
}

.footer-slogan{
font-size:11px;
color:#5f738a;
opacity:.85;
}

/* RESPONSIVE */

@media(max-width:1180px){
.entry-grid,
.category-grid,
.product-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.category-layout{
grid-template-columns:1fr;
}

.sidebar-card{
position:static;
}

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

@media(max-width:980px){
.main-nav{
display:none;
}

.mobile-menu-btn{
display:block;
}

.wrap{
padding-left:28px;
padding-right:28px;
}

.contact-shell{
grid-template-columns:1fr;
}
}

@media(max-width:760px){
.grid,
.entry-grid,
.category-grid,
.product-grid{
grid-template-columns:1fr;
}

.row{
grid-template-columns:1fr;
}

.hero-main{
padding:30px 24px;
}

.hero-main h1{
font-size:34px;
}

.section-head h2,
.contact-box h2,
.category-title{
font-size:28px;
}

.page-body{
padding:24px 16px 40px;
}

.footer-inner{
grid-template-columns:1fr;
padding:0 18px;
}

.footer-bottom-wrap{
padding:16px 18px;
}

.contact-form-card{
padding:18px;
}
}

.tech-container{
display:flex;
flex-direction:column;
gap:24px;
margin-top:20px;
}

.tech-overview{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.tech-pill{
background:var(--petrol);
color:white;
padding:6px 12px;
border-radius:20px;
font-size:12px;
}

.tech-group{
background:var(--card);
border:1px solid var(--line);
border-radius:10px;
padding:18px;
}

.tech-group-title{
font-size:15px;
font-weight:600;
margin-bottom:14px;
color:var(--petrol);
}

.tech-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:12px;
}

.tech-card{
background:#f8fafc;
border:1px solid #e5e7eb;
padding:12px;
border-radius:8px;
display:flex;
flex-direction:column;
gap:6px;
transition:0.2s;
}

.tech-card:hover{
background:#eef3f9;
}

.tech-card span{
font-size:12px;
color:var(--muted);
}

.tech-card b{
font-size:14px;
font-weight:600;
}

.tech-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.tech-tags span{
background:#eef3f9;
padding:6px 10px;
border-radius:6px;
font-size:12px;
}

.tech-note{
font-size:13px;
color:var(--muted);
line-height:1.6;
}