:root {
--ph-navy:   #0A1628;
--ph-orange: #D4722A;
--ph-org-w:  #E08035;
--ph-white:  #FFFFFF;
--ph-gl:     rgba(255,255,255,0.10);
--ph-gm:     rgba(255,255,255,0.55);
--ph-fb:     'Barlow', sans-serif;
--ph-height: 80px;
} #pulse-header {
position: sticky;
top: 0; left: 0; right: 0;
z-index: 9999; height: var(--ph-height);
background: linear-gradient(90deg, #000000 0%, #010346 100%);
border-bottom: 1px solid var(--ph-gl);
font-family: var(--ph-fb);
}
#pulse-header.ph--scrolled {
box-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.ph-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
height: 100%;
display: flex;
align-items: center;
gap: 48px;
} .ph-logo {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
.ph-logo__img {
height: 68px;
width: auto;
display: block;
object-fit: contain;
} .ph-nav {
flex: 1;
display: flex;
justify-content: center;
}
.ph-nav__list {
list-style: none;
margin: 0; padding: 0;
display: flex;
align-items: center;
gap: 4px;
}
.ph-nav__link {
font-family: var(--ph-fb);
font-size: 18px;
font-weight: 400;
color: var(--ph-gm);
text-decoration: none;
padding: 6px 14px;
border-radius: 4px;
transition: color 0.15s;
white-space: nowrap;
display: block;
position: relative;
}
.ph-nav__link::after {
content: '';
position: absolute;
bottom: 0; left: 14px; right: 14px;
height: 2px;
background: var(--ph-orange);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.25s ease;
}
.ph-nav__link:hover             { color: var(--ph-white); }
.ph-nav__link:hover::after      { transform: scaleX(1); }
.ph-nav__link--active           { color: var(--ph-white); font-weight: 500; }
.ph-nav__link--active::after    { transform: scaleX(1); } .ph-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
#pulse-header .ph-btn {
font-family: var(--ph-fb);
font-size: 14px;
font-weight: 400;
color: #fff !important;
text-decoration: none !important;
padding: 0 28px;
height: 44px;
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent !important;
border: 1.5px solid rgba(255,255,255,0.6) !important;
border-radius: 50px !important;
transition: background 0.2s, color 0.2s, border-color 0.2s;
white-space: nowrap;
box-shadow: none !important;
}
#pulse-header .ph-btn:hover {
background: #F6F4EF !important;
border-color: #F6F4EF !important;
color: #D4722A !important;
} .ph-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
background: none;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
touch-action: manipulation;
position: relative;
z-index: 10000; }
.ph-burger span {
display: block;
width: 100%;
height: 2px;
background: #fff;
border-radius: 2px;
} #ph-mobile-overlay {
display: none;
}  @media (max-width: 1200px) {
.ph-inner { padding: 0 24px; gap: 28px; }
} @media (max-width: 1080px) {
.ph-inner { gap: 16px; }
.ph-nav__list { gap: 2px; }
.ph-nav__link { font-size: 15px; padding: 6px 10px; }
.ph-nav__link::after { left: 10px; right: 10px; }
#pulse-header .ph-btn { padding: 0 18px; font-size: 13px; height: 40px; }
} @media (max-width: 980px) {
.ph-inner { gap: 10px; padding: 0 16px; }
.ph-nav__list { gap: 0; }
.ph-nav__link { font-size: 13px; padding: 5px 7px; }
.ph-nav__link::after { left: 7px; right: 7px; }
#pulse-header .ph-btn { padding: 0 14px; font-size: 12px; height: 36px; }
} @media (max-width: 900px) {
:root { --ph-height: 64px; } .ph-inner {
padding: 0 20px;
gap: 0;
justify-content: space-between;
}
.ph-logo__img { height: 48px; } .ph-nav { display: none !important; }
#pulse-header .ph-actions .ph-btn { display: none !important; } .ph-burger { display: flex; } #ph-mobile-overlay {
display: flex !important;
flex-direction: column;
position: fixed;
inset: 0;
z-index: 10000;
background: linear-gradient(160deg, #010346 0%, #000000 100%);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
opacity: 0;
pointer-events: none;
transform: translateY(-12px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
#ph-mobile-overlay.is-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
} .ph-mob-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--ph-gl);
flex-shrink: 0;
} .ph-mob-close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: none;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%;
color: #fff;
font-size: 18px;
line-height: 1;
cursor: pointer;
touch-action: manipulation;
flex-shrink: 0;
transition: background 0.15s;
}
.ph-mob-close:hover { background: rgba(255,255,255,0.12); }
.ph-mob-logo { display: flex; align-items: center; text-decoration: none; }
.ph-mob-logo img { height: 40px; width: auto; } .ph-mob-body {
flex: 1;
padding: 12px 24px 40px;
display: flex;
flex-direction: column;
} .ph-mobile-list {
list-style: none;
margin: 0; padding: 0;
}
.ph-mobile-item { border-bottom: 1px solid var(--ph-gl); }
.ph-mobile-link {
display: block;
padding: 18px 0;
font-family: var(--ph-fb);
font-size: 22px;
font-weight: 400;
color: var(--ph-gm);
text-decoration: none;
transition: color 0.15s;
}
.ph-mobile-link:hover,
.ph-mobile-link--active    { color: var(--ph-white); }
.ph-mobile-link--active    { font-weight: 500; } .ph-mobile-cta {
margin-top: 36px;
display: flex;
flex-direction: column;
gap: 12px;
}
.ph-mobile-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--ph-fb);
font-size: 16px;
font-weight: 400;
color: #fff !important;
text-decoration: none !important;
height: 52px;
border: 1.5px solid rgba(255,255,255,0.5) !important;
border-radius: 50px !important;
background: transparent !important;
transition: background 0.2s, color 0.2s, border-color 0.2s;
touch-action: manipulation;
}
.ph-mobile-btn:hover {
background: #F6F4EF !important;
border-color: #F6F4EF !important;
color: #D4722A !important;
}
.ph-mobile-btn--primary {
background: var(--ph-orange) !important;
border-color: var(--ph-orange) !important;
}
.ph-mobile-btn--primary:hover {
background: var(--ph-org-w) !important;
border-color: var(--ph-org-w) !important;
color: #fff !important;
}
} @media (max-width: 480px) {
:root { --ph-height: 58px; }
.ph-inner { padding: 0 16px; }
.ph-logo__img { height: 42px; }
} @media (max-width: 400px) {
.ph-mob-body     { padding: 8px 18px 32px; }
.ph-mobile-link  { font-size: 20px; }
}