:root {
    --ch-dark: #080e1d;
    --ch-navy: #ffffff;
    --ch-accent: #00d4ff;
    --ch-blue: #1a6fff;
    --ch-text: #363636;
    --ch-muted: #7a95bb;
    --ch-white: #FFFFFF;
    --ch-border: rgba(0, 212, 255, .13);
    --ch-hover: rgba(0, 212, 255, .08);
}

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

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ═══════════════════════════════════════
TOPBAR
═══════════════════════════════════════ */
.topbar {
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    padding: 0px 0;    
/*background: var(--ch-dark);*/
border-bottom: 1px solid var(--ch-border);
font-size: .75rem;
color: var(--ch-muted);
/*padding: .3rem 0;*/
    height: 35px;
}
.topbar-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.topbar-left {
display: flex; align-items: center; gap: .5rem;
color: var(--ch-white);
font-size: .8rem;
    margin-top: -6px;
}

.topbar-right { display: flex; align-items: center; gap: 32.25rem; margin-top: -6px; }
.topbar-links { padding-top: 12px;display: flex; gap: 1rem; list-style: none; }
.topbar-links a {font-size: 1rem; color: var(--ch-white); text-decoration: none; transition: color .2s; }
.topbar-links a:hover { color: var(--ch-accent); }
.topbar-social { display: flex; gap: .4rem; }
.topbar-social a {
background: var(--ch-white);    
width: 30px; height: 28px; border-radius: 50%;
border: 1px solid var(--ch-border);
display: flex; align-items: center; justify-content: center;
color: var(--ch-muted); font-size: 1rem; text-decoration: none;
transition: all .2s;
}
.topbar-social a:hover { background: var(--ch-accent); border-color: var(--ch-accent); color: #000; }

/* ═══════════════════════════════════════
NAVBAR SHELL
═══════════════════════════════════════ */
.main-navbar {
background: var(--ch-navy);
border-bottom: 1px solid var(--ch-border);
box-shadow: 0 6px 40px rgba(0,0,0,.5);
position: sticky;
top: 0;
z-index: 1040;
}

.navbar-inner {
max-width: 1400px;
margin: 0 auto;
padding: .65rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}

/* Brand */
.brand {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: var(--ch-text);
text-decoration: none;
letter-spacing: -.4px;
white-space: nowrap;
flex-shrink: 0;
}

.brand img{
    height: 50px;  
}

.brand span { color: var(--ch-accent); }

/* Hamburger */
.nav-toggler {
display: none;
background: none;
border: 1px solid var(--ch-border);
border-radius: 6px;
padding: .42rem .65rem;
cursor: pointer;
color: var(--ch-accent);
font-size: 1.05rem;
flex-shrink: 0;
transition: background .2s;
align-items: center;
justify-content: center;
}
.nav-toggler:hover { background: var(--ch-hover); }

/* ── DESKTOP NAV ── */
.nav-desktop {
display: flex;
align-items: center;
gap: .05rem;
flex: 1;
justify-content: center;
}

/* Each nav item wrapper — position:static so the mega menu uses navbar as parent */
.nav-item-d { position: static; }

.nav-btn {
/*font-family: 'Syne', sans-serif;*/
font-weight: 500;
font-size: 15px;
/*letter-spacing: .04em;*/
/*text-transform: uppercase;*/
color: var(--ch-text);
background: none;
border: none;
border-radius: 6px;
padding: .48rem .72rem;
cursor: pointer;
display: flex; align-items: center; gap: .28rem;
transition: color .2s, background .2s;
white-space: nowrap;
text-decoration: none;
}
.nav-btn .ch { font-size: .55rem; opacity: .6; transition: transform .25s; }
.nav-btn:hover, .nav-btn.is-open { color: var(--ch-accent); background: var(--ch-hover); }
.nav-btn.is-open .ch { transform: rotate(180deg); }

/* ── DROP PANELS ── */
.drop-panel {
display: none;
position: absolute;
top: 100%;
background: var(--ch-white);
border: 1px solid var(--ch-border);
border-radius: 0px;
box-shadow: 0 20px 60px rgba(0,0,0,.65);
padding: 1rem;
z-index: 3000;
animation: fadeDown .17s ease;
}
.drop-panel.is-open { display: block; }

@keyframes fadeDown {
from { opacity: 0; transform: translateY(-7px); }
to   { opacity: 1; transform: translateY(0); }
}

/* Simple list dropdown */
.drop-simple { min-width: 240px; }
/*.drop-simple a {
display: block; font-size: .82rem; color: var(--ch-muted);
padding: .42rem .8rem; border-radius: 6px; text-decoration: none;
transition: background .15s, color .15s, padding-left .14s;
}*/
.drop-simple a {
position: relative;    
display: block;
padding: 12px 25px;
/*border-radius: 6px;*/
color: #555 !important;
text-decoration: none;
font-size: .82rem;
width: 100%;
clear: both;
font-weight: 400;
white-space: nowrap;
transition: background .15s, color .15s, padding-left .14s;
}
.drop-simple a:hover { background: var(--ch-hover); color: var(--ch-accent); padding-left: 1.1rem; }

.drop-simple a:before {
    content: '●';
    position: absolute;
    left: 0px;
    color: #7CB342;
    font-size: 8px;
    top: 50%;
    transform: translateY(-50%);
}


/* Mega dropdown */
.drop-mega      { width: 860px; max-width: calc(100vw - 2rem); }
.drop-mega.xl   { width: 900px; }

.mega-grid { display: grid; gap: 0 1.1rem; }
.mega-grid.g3 { grid-template-columns: repeat(3,1fr); }
.mega-grid.g4 { grid-template-columns: repeat(4,1fr); }

.m-col { padding: .2rem .45rem; border-right: 1px solid var(--ch-border); }
.m-col:last-child { border-right: none; }

.m-title {
font-family: 'Syne', sans-serif;
font-size: .63rem; font-weight: 700; letter-spacing: .13em;
text-transform: uppercase; color: var(--ch-accent);
padding: .15rem .45rem .5rem; border-bottom: 2px solid var(--ch-accent);
margin-bottom: .38rem;
}
.m-col a {
position: relative;     
display: block; 
font-size: .79rem; 
color: #555;
padding: 10px 15px;
/*border-radius: 5px; */
text-decoration: none;
line-height: 1.35; 
transition: background .14s, color .14s, padding-left .13s;
}
.m-col a:hover { background: var(--ch-hover); color: var(--ch-accent); padding-left: .85rem; }

.m-col a:before {
    content: '●';
    position: absolute;
    left: 0px;
    color: #7CB342;
    font-size: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* CTA */
.cta-btn {
    background: linear-gradient(135deg, #00BCD4, #00ACC1);
    color: white;
    padding: 8px 28px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
}
.cta-btn:hover { opacity: .85; transform: translateY(-1px); color: #000; }

/* ═══════════════════════════════════════
MOBILE MENU
═══════════════════════════════════════ */
.nav-mobile {
display: none;
background: var(--ch-white);
border-top: 1px solid var(--ch-border);
overflow-y: auto;
max-height: calc(100svh - 58px);
}
.nav-mobile.is-open { display: block; }

.mob-item { border-bottom: 1px solid var(--ch-border); }

.mob-trigger {
width: 100%; background: none; border: none;
color: var(--ch-text);
font-family: 'Syne', sans-serif; font-weight: 600;
font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
padding: .88rem 1.25rem;
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; transition: color .2s, background .2s; text-align: left;
}
.mob-trigger:hover, .mob-trigger.is-open {
color: var(--ch-accent); background: var(--ch-hover);
}
.mob-trigger .ch { font-size: .6rem; transition: transform .25s; flex-shrink: 0; }
.mob-trigger.is-open .ch { transform: rotate(180deg); }

.mob-panel {
display: none;
background: rgb(245 241 241 / 22%);
border-top: 1px solid var(--ch-border);
padding-bottom: .5rem;
}
.mob-panel.is-open { display: block; }

.mob-section {
font-family: 'Syne', sans-serif; font-size: .63rem; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase; color: var(--ch-accent);
padding: .75rem 1.4rem .3rem;
}
.mob-panel a {
display: block; font-size: .82rem; color: var(--ch-muted);
padding: .42rem 1.4rem .42rem 2rem; text-decoration: none;
border-left: 2px solid transparent;
transition: color .14s, border-color .14s, background .14s;
}
.mob-panel a:hover {
color: var(--ch-accent);
border-left-color: var(--ch-accent);
background: var(--ch-hover);
}

.mob-cta-wrap { padding: 1rem 1.25rem 1.4rem; border-top: 1px solid var(--ch-border); }
.mob-cta {
display: block; text-align: center;
background: linear-gradient(135deg, var(--ch-accent), var(--ch-blue));
color: #fff; font-family: 'Syne', sans-serif; font-weight: 700;
font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
padding: .78rem; border-radius: 8px; text-decoration: none;
}

/* ═══════════════════════════════════════
BREAKPOINT — hide desktop, show mobile
═══════════════════════════════════════ */
@media (max-width: 1199px) {
.nav-desktop { display: none !important; }
.cta-btn     { display: none !important; }
.nav-toggler { display: flex !important; }
}

@media (max-width: 720px) {
.mob-trigger {
color: var(--ch-text);  
}
.topbar-links a {font-size: 0.8rem; }
.topbar-social a {   
width: 30px; min-height: 30px !important; border-radius: 50%;
}
}

@media (max-width: 480px) {
.topbar-left { display: none; }
}