/* ─── Navbar Base (1240px Figma base) ─── */
.nav-public{
    width:100%;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid transparent;
    position:fixed;
    top:0;
    z-index:200;
    transition:background 0.4s ease, backdrop-filter 0.4s ease, border-bottom 0.4s ease, box-shadow 0.4s ease;
    isolation:isolate;
}
.nav-public.nav-scrolled{
    background:rgba(10,10,10,0.7);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 4px 30px rgba(0,0,0,0.3);
}
.nav-public-inner{
    max-width:1240px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 48px;
    height:68px;
    gap:24px;
}

/* ─── Logo (Figma: 206×50, bg #00151a) ─── */
.nav-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:206px;
    height:50px;
    background:transparent;
    border-radius:8px;
    padding:4px 10px;
    text-decoration:none;
    flex-shrink:0;
    opacity:1;
}

.nav-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

/* ─── Desktop Nav Links ─── */
.nav-links{
    display:flex;
    align-items:center;
    gap:46px;
    list-style:none;
    margin:0;
    padding:0;
    flex:1;
    justify-content:center;
}
.nav-links a{
    font-family:'Poppins',sans-serif;
    font-size:22px;
    font-weight:400;
    font-style:normal;
    color:rgba(255,255,255,0.82);
    text-decoration:none;
    transition:.18s;
    position:relative;
    padding-bottom:2px;
    line-height:22px;
    letter-spacing:0;
    white-space:nowrap;
}
.nav-links a:hover{color:#fff}
.nav-links a.nav-active{color:#fff;font-weight:700}
.nav-links a.nav-active::after{
    content:'';
    position:absolute;
    bottom:-4px;left:0;
    width:100%;height:2px;
    background:var(--orange);
    border-radius:2px;
}

/* ─── Login Button ─── */
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.nav-login-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 28px;
    background:var(--orange);
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:15px;font-weight:600;
    border-radius:8px;
    text-decoration:none;border:none;cursor:pointer;
    transition:.18s;white-space:nowrap;
}
.nav-login-btn:hover{background:var(--orange-2);color:#fff}

/* ─── Hamburger ─── */
.nav-hamburger{
    display:none;
    flex-direction:column;gap:5px;
    cursor:pointer;padding:6px;
    background:none;border:none;
    flex-shrink:0;
}
.nav-hamburger span{
    display:block;width:24px;height:2px;
    background:#fff;border-radius:2px;
    transition:.25s;
}
.nav-hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── Mobile Dropdown Menu ─── */
.nav-mobile-menu{
    display:flex;
    flex-direction:column;
    /* Float OVER page content — never pushes content down */
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    /* Frosted glass */
    background:rgba(8,8,8,0.88);
    backdrop-filter:blur(32px);
    -webkit-backdrop-filter:blur(32px);
    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,90,0,0.18);
    padding:12px 24px 24px;
    gap:0;
    box-shadow:0 28px 70px rgba(0,0,0,0.7), 0 1px 0 rgba(255,90,0,0.12) inset;
    /* Menu slide */
    opacity:0;
    transform:translateY(-16px) scaleY(0.96);
    transform-origin:top center;
    pointer-events:none;
    transition:opacity .32s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1);
    z-index:199;
}
/* Orange glow top line */
.nav-mobile-menu::before{
    content:'';
    position:absolute;
    top:0; left:10%; right:10%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,90,0,0.7), transparent);
    opacity:0;
    transition:opacity .4s .15s;
}
.nav-mobile-menu.open::before{ opacity:1; }

/* Each link starts hidden — JS adds .item-in class with stagger */
.nav-mobile-menu a,
.nav-mobile-menu .nav-login-btn{
    font-family:'Poppins',sans-serif;
    font-size:17px;
    font-weight:400;
    font-style:normal;
    line-height:100%;
    letter-spacing:0;
    color:rgba(255,255,255,0.75);
    text-decoration:none;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
    display:block;
    /* stagger start state */
    opacity:0;
    transform:translateX(-18px);
    transition:opacity .3s ease, transform .3s ease, color .15s, padding-left .15s;
}
.nav-mobile-menu a.item-in,
.nav-mobile-menu .nav-login-btn.item-in{
    opacity:1;
    transform:translateX(0);
}
.nav-mobile-menu a:last-of-type{ border-bottom:none }
.nav-mobile-menu a:hover{ color:#fff; padding-left:8px }
.nav-mobile-menu a.nav-active{
    color:#ff5a00;
    font-weight:700;
}
.nav-mobile-menu a.nav-active::before{
    content:'';
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    vertical-align:middle;
    margin-bottom:2px;
    flex-shrink:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23ff5a00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
}
.nav-mobile-menu .nav-login-btn{
    margin-top:16px;
    width:100%;
    text-align:center;
    border-radius:10px;
    padding:13px 28px;
    font-size:15px;
    font-weight:700;
    border-bottom:none;
    background:var(--orange);
    color:#fff;
}
.nav-mobile-menu .nav-login-btn:hover{ background:var(--orange-2); padding-left:0; }
.nav-mobile-menu.open{
    opacity:1;
    transform:translateY(0) scaleY(1);
    pointer-events:auto;
}

/* ─── Responsive Breakpoints ─── */

/* Large desktop: 1240px+ */
@media(min-width:1241px){
    .nav-public-inner{padding:0 48px}
}

/* Medium desktop: 1025px–1240px */
@media(max-width:1240px){
    .nav-public-inner{padding:0 32px}
    .nav-links{gap:32px}
    .nav-links a{font-size:18px}
    .nav-logo{width:180px}
}

/* Tablet landscape: 901px–1024px */
@media(max-width:1024px){
    .nav-public-inner{padding:0 24px}
    .nav-links{gap:22px}
    .nav-links a{font-size:13px}
    .nav-logo{width:150px;height:42px}
    .nav-login-btn{padding:9px 20px;font-size:13px}
}

/* Tablet portrait: 769px–900px → hamburger */
@media(max-width:900px){
    .nav-public-inner{padding:0 24px}
    .nav-links,.nav-right{display:none}
    .nav-hamburger{display:flex}
    .nav-logo{width:140px;height:40px}
}

/* Mobile landscape: 641px–768px */
@media(max-width:768px){
    .nav-public-inner{padding:0 20px;height:62px}
    .nav-logo{width:130px;height:38px}
    .nav-mobile-menu{padding:10px 20px 22px}
    .nav-mobile-menu a{font-size:16px;padding:13px 0}
}

/* Mobile portrait: 481px–640px */
@media(max-width:640px){
    .nav-public-inner{padding:0 16px;height:58px}
    .nav-logo{width:120px;height:36px;border-radius:6px}
    .nav-mobile-menu a{font-size:15px;padding:12px 0}
    .nav-mobile-menu{padding:10px 16px 20px}
}

/* Small mobile: 375px–480px */
@media(max-width:480px){
    .nav-public-inner{padding:0 14px;height:54px}
    .nav-logo{width:110px;height:32px}
    .nav-hamburger span{width:22px}
    .nav-mobile-menu{padding:8px 14px 18px}
    .nav-mobile-menu a{font-size:14px;padding:12px 0}
    .nav-mobile-menu .nav-login-btn{font-size:14px;padding:12px 20px}
}

/* Very small: <375px */
@media(max-width:374px){
    .nav-logo{width:96px;height:28px}
    .nav-mobile-menu a{font-size:13px;padding:11px 0}
}