@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800;900&display=swap"); :root{
--aileron: "Aileron", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--ng-font: var(--aileron);
--ng-max: 80rem;
--ng-header-h: 78px;
--ng-accent: #2f6fde;
--ng-accent-2: #1f56b7;
--ng-glass: rgba(255,255,255,0);
--ng-border: rgba(255,255,255,.22);
--ng-scroll-pad: calc(var(--ng-header-h) + 14px);
}
html{
scroll-behavior: smooth;
scroll-padding-top: var(--ng-scroll-pad);
}
.hero-nugleus{
position: relative;
min-height: 100vh;
min-height: 100svh;
box-sizing: border-box;
display: grid;
place-items: center;
padding: clamp(28px, 5vw, 72px) 16px;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-nugleus::before{
content:"";
position:absolute;
inset:0;
background: radial-gradient(
circle at center,
rgba(0,0,0,.18) 0%,
rgba(0,0,0,.14) 40%,
rgba(0,0,0,.10) 100%
);
pointer-events:none;
z-index: 1;
}
.hero-nugleus__content{
position: relative;
z-index: 2;
text-align: center;
color: #fff;
font-family: var(--aileron);
animation: heroFade .65s ease-out both;
}
.hero-nugleus__top{
font-weight: 600;
font-size: clamp(12px, 1.4vw, 18px);
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.9;
margin-bottom: clamp(10px, 2vw, 18px);
text-shadow: 0 2px 14px rgba(0,0,0,.25);
}
.hero-nugleus__brand{
margin: 0;
font-weight: 300;
font-size: clamp(56px, 10vw, 140px);
line-height: 0.95;
letter-spacing: -0.03em;
text-shadow: 0 8px 26px rgba(0,0,0,.25);
}
.ng-brand__name img{
width: 20rem;
padding-top: 2rem;
}
.hero-nugleus__reg{
font-size: 0.22em;
vertical-align: super;
margin-left: -0.6em;
opacity: 0.95;
}
.hero-nugleus__reg img{
max-width: 5rem;
height: auto;
}
@media(max-width:746px){
.hero-nugleus__reg img{
max-width: 1.8rem;
height: auto;
}
}
.hero-nugleus__bottom{
margin-top: clamp(10px, 2vw, 18px);
font-weight: 700;
font-size: clamp(22px, 3.2vw, 44px);
letter-spacing: -0.01em;
text-shadow: 0 6px 22px rgba(0,0,0,.25);
}
@keyframes heroFade{
from{ opacity: 0; transform: translateY(10px); }
to  { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.hero-nugleus__content{ animation: none; }
}
.ng-header-wrap{
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
}
.ng-toggle{
position: absolute;
opacity: 0;
pointer-events: none;
}
.ng-header{
height: var(--ng-header-h);
font-family: var(--ng-font);
display: flex;
align-items: center;
background: var(--ng-glass);
}
.ng-inner{
width: 100%;
margin: 0 auto;
padding: 0 22px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
}
.ng-brand{
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.ng-brand__bar{
width: 8px;
height: 44px;
border-radius: 999px;
background: var(--ng-accent);
box-shadow: 0 10px 24px rgba(0,0,0,.20);
}
.ng-brand__link{
display: inline-flex;
flex-direction: column;
text-decoration: none;
color: #fff;
line-height: 1.05;
}
.ng-brand__name{
font-weight: 800;
font-size: clamp(18px, 1.6vw, 25px);
letter-spacing: -0.3px;
text-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.ng-brand__tag{
margin-top: 2px;
font-weight: 600;
font-size: clamp(11px, 1.05vw, 14px);
color: rgba(255,255,255,.82);
}
.ng-nav{
display: flex;
justify-content: center;
gap: 10px;
}
.ng-nav a{
text-decoration: none;
color: rgba(255,255,255,.92);
font-weight: 800;
font-size: clamp(13px, 1.25vw, 18px);
padding: 10px 12px;
border-radius: 999px;
transition: .18s ease;
}
.ng-nav a:hover{
background: rgba(255,255,255,.14);
color: #fff;
}
.ng-right{
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
.ng-cta{
text-decoration: none;
font-weight: 900;
font-size: clamp(13px, 1.25vw, 18px);
color: #0b1b33;
background: rgba(255,255,255,.92);
border: 1px solid rgba(255,255,255,.55);
padding: 12px 16px;
border-radius: 999px;
box-shadow: 0 14px 30px rgba(0,0,0,.18);
transition: .18s ease;
white-space: nowrap;
}
.ng-cta:hover{ transform: translateY(-1px); background: #fff; }
@media(max-width:1024px){
.ng-cta{ display:none; }
}
.ng-burger{
display: none;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
cursor: pointer;
}
.ng-burger::before,
.ng-burger::after,
.ng-burger span{
content:"";
position:absolute;
left: 12px;
right: 12px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: .18s ease;
}
.ng-burger::before{ top: 15px; }
.ng-burger span{ top: 21px; }
.ng-burger::after{ top: 27px; }
.ng-panel{
display:none;
background: rgba(10,20,40,0);
}
.ng-panel__inner{
max-width: var(--ng-max);
margin: 0 auto;
padding: 14px 22px 18px;
display: grid;
gap: 8px;
}
.ng-panel a{
text-decoration:none;
color: #fff;
font-weight: 900;
font-size: clamp(13px, 1.35vw, 16px);
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.10);
}
.ng-toggle:checked ~ .ng-panel{ display:block; }
.ng-toggle:checked ~ .ng-header .ng-burger::before{ transform: translateY(6px) rotate(45deg); }
.ng-toggle:checked ~ .ng-header .ng-burger::after{ transform: translateY(-6px) rotate(-45deg); }
.ng-toggle:checked ~ .ng-header .ng-burger span{ opacity: 0; }
@media (max-width: 980px){
.ng-inner{ grid-template-columns: 1fr auto; }
.ng-nav{ display:none; }
.ng-burger{ display:inline-block; }
}