/* ═════════════════════════════════════════════════════════════════
   NEURAL ARCHITECTURE — AeroField ANN
   Horizontal · 100vh viewport-lock · Emoji glow nodes
   ════════════════════════════════════════════════════════════════ */

/* ── RESET ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
    height:100vh;
    overflow:hidden;
    background:var(--bg-primary,#0a0a0f);
    color:#e0e0e8;
    font-family:'Inter',sans-serif;
    position:relative;
}

/* ── CANVAS BG ────────────────────────────────────────── */
#neuralBg{
    position:fixed;inset:0;
    width:100%;height:100%;
    z-index:0;
    pointer-events:none;
}

/* ── NAVBAR ───────────────────────────────────────────── */
.nn-navbar{
    position:fixed;top:0;left:0;right:0;
    height:46px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 clamp(1rem, 3vw, 2.5rem);
    background:rgba(8,8,14,0.88);
    backdrop-filter:blur(20px) saturate(1.3);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);
    border-bottom:1px solid rgba(255,255,255,0.06);
    box-shadow:0 2px 20px rgba(0,0,0,0.4);
    z-index:100;
}
.nn-logo{display:flex;align-items:center;gap:0.5rem;color:#e0e0e8;text-decoration:none;font-family:'Cinzel',serif;font-weight:600;font-size:0.85rem}
.nn-logo svg{opacity:0.8;filter:drop-shadow(0 0 4px rgba(255,255,255,0.15))}
.nn-nav-title{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:0.78rem;letter-spacing:0.12em;color:rgba(255,255,255,0.4);text-transform:uppercase}
.nn-nav-links{display:flex;gap:0.6rem}
.nn-btn{
    padding:0.28rem 0.85rem;
    border:1px solid rgba(255,255,255,0.10);
    border-bottom:2px solid rgba(255,255,255,0.14);
    border-radius:6px;
    color:rgba(255,255,255,0.55);
    text-decoration:none;
    font-size:0.68rem;
    font-family:'Rajdhani',sans-serif;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    transition:all 0.3s cubic-bezier(.25,.46,.45,.94);
    background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    position:relative;
    overflow:hidden;
}
.nn-btn::after{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 65%);
    pointer-events:none;
}
.nn-btn:hover{
    color:#fff;
    border-color:rgba(255,255,255,0.25);
    background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    box-shadow:0 4px 12px rgba(0,0,0,0.3), 0 0 12px rgba(255,255,255,0.04);
    transform:translateY(-1px);
}
.nn-btn:active{
    transform:translateY(1px);
    border-bottom-width:1px;
    box-shadow:0 1px 3px rgba(0,0,0,0.3), inset 0 1px 3px rgba(0,0,0,0.1);
}


/* ── MAIN HORIZONTAL LAYOUT ──────────────────────────── */
.nn-main{
    position:relative;z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(1.5rem, 4vw, 5rem);
    width:100%;
    height:calc(100vh - 46px - 72px);
    margin-top:46px;
    padding:0 clamp(1rem, 3vw, 4rem);
}

/* ── COLUMN ──────────────────────────────────────────── */
.nn-col{
    display:flex;flex-direction:column;align-items:center;
    position:relative;z-index:2;
    flex-shrink:0;
}
.nn-col-label{
    font-family:'Rajdhani',sans-serif;
    font-weight:700;font-size:clamp(0.5rem, 0.65vw, 0.68rem);
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.3);
    margin-bottom:clamp(0.4rem, 1vh, 0.8rem);
    text-align:center;
    display:flex;align-items:center;gap:0.4rem;
    white-space:nowrap;
}
.nn-tag{
    display:inline-block;
    padding:0.1rem 0.4rem;
    border-radius:3px;
    font-size:0.5rem;
    letter-spacing:0.08em;
    font-weight:600;
}
.nn-tag--teal{background:rgba(45,212,168,0.12);color:#2dd4a8;border:1px solid rgba(45,212,168,0.2)}
.nn-tag--amber{background:rgba(212,160,74,0.12);color:#d4a04a;border:1px solid rgba(212,160,74,0.2)}
.nn-tag--crimson{background:rgba(220,60,60,0.12);color:#dc3c3c;border:1px solid rgba(220,60,60,0.2)}

/* ── STACKED NODES (perception column) ───────────────── */
.nn-stack{
    display:flex;flex-direction:column;
    align-items:center;
    gap:clamp(0.6rem, 1.5vh, 1.2rem);
}
.nn-stack--single{justify-content:center}

/* ── NODE CARD ────────────────────────────────────────── */
.nn-node{
    position:relative;
    display:flex;flex-direction:column;align-items:center;
    padding:clamp(0.7rem, 1.3vh, 1.1rem) clamp(0.6rem, 1.1vw, 0.9rem);
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.07);
    background:rgba(10,10,18,0.60);
    backdrop-filter:blur(8px);
    cursor:pointer;
    transition:all 0.35s cubic-bezier(.25,.46,.45,.94);
    z-index:2;
    min-width:clamp(100px, 10vw, 140px);
    box-shadow:0 4px 16px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.06);
}
.nn-node--lg{min-width:clamp(110px, 11vw, 150px)}
.nn-node:hover{
    transform:scale(1.06) translateY(-2px);
    border-color:rgba(255,255,255,0.16);
    box-shadow:0 8px 28px rgba(0,0,0,0.4), 0 0 2px rgba(255,255,255,0.08);
}

/* ── NODE GLOW (radial behind card) ──────────────────── */
.nn-node-glow{
    position:absolute;
    inset:clamp(-24px, -3.5vw, -40px);
    border-radius:50%;
    opacity:0.35;
    z-index:-1;
    pointer-events:none;
    animation:nodeGlow 4s ease-in-out infinite;
    filter:blur(2px);
}
.nn-node:hover .nn-node-glow{opacity:0.65;filter:blur(4px)}
@keyframes nodeGlow{
    0%,100%{opacity:0.25;transform:scale(1)}
    50%{opacity:0.45;transform:scale(1.12)}
}

/* ── AVATAR WRAP (glowing circle) ─────────────────────── */
.nn-avatar-wrap{
    width:clamp(48px, 5.5vw, 68px);
    height:clamp(48px, 5.5vw, 68px);
    border-radius:50%;
    display:grid;place-items:center;
    margin-bottom:clamp(0.25rem, 0.5vh, 0.5rem);
    position:relative;
    transition:all 0.4s;
    overflow:hidden;
}
.nn-avatar-wrap::before{
    content:'';
    position:absolute;inset:-6px;
    border-radius:50%;
    border:1.5px solid transparent;
    animation:avatarRing 6s linear infinite;
    pointer-events:none;
    z-index:2;
}
@keyframes avatarRing{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
.nn-avatar-img{
    width:100%;height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
    filter:saturate(1.1) brightness(0.95);
    transition:transform 0.4s, filter 0.4s;
}
.nn-node:hover .nn-avatar-img{transform:scale(1.12);filter:saturate(1.3) brightness(1.05)}
/* SVG icons for User & Admin */
.nn-avatar-wrap svg{color:rgba(255,255,255,0.7);transition:color 0.3s}
.nn-node:hover .nn-avatar-wrap svg{color:rgba(255,255,255,0.95)}

/* ── Color-specific avatar glow ───────────────────────── */
.nn-avatar-wrap--teal{
    background:radial-gradient(circle, rgba(45,212,168,0.28) 0%, rgba(45,212,168,0.08) 55%, transparent 78%);
    box-shadow:0 0 32px rgba(45,212,168,0.18), 0 0 8px rgba(45,212,168,0.08), inset 0 0 20px rgba(45,212,168,0.10);
    border:1.5px solid rgba(45,212,168,0.24);
}
.nn-avatar-wrap--teal::before{border-color:rgba(45,212,168,0.22);box-shadow:0 0 14px rgba(45,212,168,0.10);animation-duration:5.5s}
.nn-node--teal:hover .nn-avatar-wrap{box-shadow:0 0 50px rgba(45,212,168,0.30), 0 0 16px rgba(45,212,168,0.15), inset 0 0 24px rgba(45,212,168,0.14)}

.nn-avatar-wrap--violet{
    background:radial-gradient(circle, rgba(180,60,220,0.28) 0%, rgba(180,60,220,0.08) 55%, transparent 78%);
    box-shadow:0 0 32px rgba(180,60,220,0.18), 0 0 8px rgba(180,60,220,0.08), inset 0 0 20px rgba(180,60,220,0.10);
    border:1.5px solid rgba(180,60,220,0.24);
}
.nn-avatar-wrap--violet::before{border-color:rgba(180,60,220,0.22);box-shadow:0 0 14px rgba(180,60,220,0.10);animation-duration:6s}
.nn-node--violet:hover .nn-avatar-wrap{box-shadow:0 0 50px rgba(180,60,220,0.30), 0 0 16px rgba(180,60,220,0.15), inset 0 0 24px rgba(180,60,220,0.14)}

.nn-avatar-wrap--blue{
    background:radial-gradient(circle, rgba(80,140,255,0.28) 0%, rgba(80,140,255,0.08) 55%, transparent 78%);
    box-shadow:0 0 32px rgba(80,140,255,0.18), 0 0 8px rgba(80,140,255,0.08), inset 0 0 20px rgba(80,140,255,0.10);
    border:1.5px solid rgba(80,140,255,0.24);
}
.nn-avatar-wrap--blue::before{border-color:rgba(80,140,255,0.22);box-shadow:0 0 14px rgba(80,140,255,0.10);animation-duration:6.3s}
.nn-node--blue:hover .nn-avatar-wrap{box-shadow:0 0 50px rgba(80,140,255,0.30), 0 0 16px rgba(80,140,255,0.15), inset 0 0 24px rgba(80,140,255,0.14)}

.nn-avatar-wrap--amber{
    background:radial-gradient(circle, rgba(212,160,74,0.35) 0%, rgba(212,160,74,0.10) 55%, transparent 78%);
    box-shadow:0 0 36px rgba(212,160,74,0.22), 0 0 10px rgba(212,160,74,0.10), inset 0 0 22px rgba(212,160,74,0.12);
    border:1.5px solid rgba(212,160,74,0.28);
}
.nn-avatar-wrap--amber::before{border-color:rgba(212,160,74,0.25);box-shadow:0 0 16px rgba(212,160,74,0.12);animation-duration:5.8s}
.nn-node--amber:hover .nn-avatar-wrap{box-shadow:0 0 55px rgba(212,160,74,0.32), 0 0 18px rgba(212,160,74,0.18), inset 0 0 26px rgba(212,160,74,0.16)}

.nn-avatar-wrap--crimson{
    background:radial-gradient(circle, rgba(220,60,60,0.35) 0%, rgba(220,60,60,0.10) 55%, transparent 78%);
    box-shadow:0 0 36px rgba(220,60,60,0.22), 0 0 10px rgba(220,60,60,0.10), inset 0 0 22px rgba(220,60,60,0.12);
    border:1.5px solid rgba(220,60,60,0.28);
}
.nn-avatar-wrap--crimson::before{border-color:rgba(220,60,60,0.25);box-shadow:0 0 16px rgba(220,60,60,0.12);animation-duration:5.2s}
.nn-node--crimson:hover .nn-avatar-wrap{box-shadow:0 0 55px rgba(220,60,60,0.32), 0 0 18px rgba(220,60,60,0.18), inset 0 0 26px rgba(220,60,60,0.16)}

.nn-avatar-wrap--white{
    background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 55%, transparent 78%);
    box-shadow:0 0 26px rgba(255,255,255,0.08), 0 0 6px rgba(255,255,255,0.04), inset 0 0 16px rgba(255,255,255,0.05);
    border:1.5px solid rgba(255,255,255,0.16);
}
.nn-avatar-wrap--white::before{border-color:rgba(255,255,255,0.12);box-shadow:0 0 8px rgba(255,255,255,0.04);animation-duration:7s}
.nn-node--white:hover .nn-avatar-wrap{box-shadow:0 0 38px rgba(255,255,255,0.14), 0 0 10px rgba(255,255,255,0.06), inset 0 0 20px rgba(255,255,255,0.08)}

.nn-avatar-wrap--admin{
    width:clamp(34px, 3.5vw, 44px);
    height:clamp(34px, 3.5vw, 44px);
    background:radial-gradient(circle, rgba(240,192,64,0.18) 0%, transparent 70%);
    box-shadow:0 0 22px rgba(240,192,64,0.10), 0 0 6px rgba(240,192,64,0.05);
    border:1px solid rgba(240,192,64,0.20);
    overflow:hidden;
}

/* ── GLOW RADIALS (behind cards) ─────────────────────── */
.nn-glow--teal{background:radial-gradient(circle,rgba(45,212,168,0.38) 0%,rgba(45,212,168,0.10) 50%,transparent 75%)}
.nn-glow--violet{background:radial-gradient(circle,rgba(180,60,220,0.38) 0%,rgba(180,60,220,0.10) 50%,transparent 75%)}
.nn-glow--blue{background:radial-gradient(circle,rgba(80,140,255,0.38) 0%,rgba(80,140,255,0.10) 50%,transparent 75%)}
.nn-glow--amber{background:radial-gradient(circle,rgba(212,160,74,0.45) 0%,rgba(212,160,74,0.12) 50%,transparent 75%)}
.nn-glow--crimson{background:radial-gradient(circle,rgba(220,60,60,0.45) 0%,rgba(220,60,60,0.12) 50%,transparent 75%)}
.nn-glow--white{background:radial-gradient(circle,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.03) 50%,transparent 72%)}

/* ── NODE TEXT ────────────────────────────────────────── */
.nn-node-name{
    font-family:'Cinzel',serif;
    font-size:clamp(0.55rem, 0.7vw, 0.72rem);
    font-weight:600;
    letter-spacing:0.04em;
    text-align:center;
    margin-bottom:0.1rem;
    white-space:nowrap;
}
.nn-name--teal{color:#2dd4a8;text-shadow:0 0 14px rgba(45,212,168,0.45), 0 0 4px rgba(45,212,168,0.2)}
.nn-name--violet{color:#b43cdc;text-shadow:0 0 14px rgba(180,60,220,0.45), 0 0 4px rgba(180,60,220,0.2)}
.nn-name--blue{color:#508cff;text-shadow:0 0 14px rgba(80,140,255,0.45), 0 0 4px rgba(80,140,255,0.2)}
.nn-name--amber{color:#d4a04a;text-shadow:0 0 16px rgba(212,160,74,0.5), 0 0 5px rgba(212,160,74,0.25)}
.nn-name--crimson{color:#dc3c3c;text-shadow:0 0 16px rgba(220,60,60,0.5), 0 0 5px rgba(220,60,60,0.25)}
.nn-name--white{color:rgba(255,255,255,0.8);text-shadow:0 0 8px rgba(255,255,255,0.15)}

.nn-node-role{
    font-family:'Rajdhani',sans-serif;
    font-size:clamp(0.45rem, 0.55vw, 0.58rem);
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.35);
    text-align:center;
}
.nn-node-code{
    font-family:'JetBrains Mono',monospace;
    font-size:clamp(0.42rem, 0.5vw, 0.5rem);
    font-weight:600;
    letter-spacing:0.1em;
    color:rgba(255,255,255,0.18);
    margin-top:0.15rem;
}

/* ── ADMIN (below Tom) ───────────────────────────────── */
.nn-admin{
    display:flex;flex-direction:column;align-items:center;
    margin-top:clamp(0.8rem, 2vh, 1.5rem);
}
.nn-admin-label{
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(0.48rem, 0.55vw, 0.58rem);
    letter-spacing:0.14em;color:rgba(240,192,64,0.55);
    margin-top:0.15rem;
}
.nn-admin-sub{
    font-size:clamp(0.4rem, 0.48vw, 0.5rem);
    color:rgba(240,192,64,0.28);
    text-align:center;
}

/* ── KEY BAR (legend strip) ───────────────────────────── */
.nn-key-bar{
    position:fixed;
    bottom:36px;left:0;right:0;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(0.8rem, 2vw, 2rem);
    background:rgba(8,8,14,0.75);
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,0.04);
    border-bottom:1px solid rgba(255,255,255,0.03);
    z-index:50;
    padding:0 1rem;
}
.nn-key-item{
    display:flex;align-items:center;gap:0.35rem;
    font-size:clamp(0.48rem, 0.55vw, 0.58rem);
    color:rgba(255,255,255,0.4);
    white-space:nowrap;
}
.nn-key-item--sep{padding-left:0.5rem;border-left:1px solid rgba(255,255,255,0.06)}
.nn-kd{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor, 0 0 3px currentColor}
.nn-kl{width:16px;height:2px;background:repeating-linear-gradient(90deg,rgba(99,102,241,0.3) 0 3px,transparent 3px 6px);flex-shrink:0}

/* ── INFO PANEL (modal) ──────────────────────────────── */
.nn-info{
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%,-50%) scale(0.92);
    width:380px;max-width:90vw;
    max-height:80vh;
    overflow-y:auto;
    background:rgba(10,10,15,0.94);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:1.6rem 1.5rem;
    z-index:200;
    opacity:0;
    pointer-events:none;
    transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
}
.nn-info.nn-info--open{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);
}
.nn-info-close{
    position:absolute;top:0.6rem;right:0.6rem;
    background:none;border:none;color:rgba(255,255,255,0.35);
    font-size:1.2rem;cursor:pointer;transition:color 0.2s;
}
.nn-info-close:hover{color:#fff}
.nn-info-name{
    font-family:'Cinzel',serif;font-size:1rem;font-weight:600;
    margin-bottom:0.25rem;
}
.nn-info-role{
    font-family:'Rajdhani',sans-serif;font-size:0.68rem;
    letter-spacing:0.1em;text-transform:uppercase;
    color:rgba(255,255,255,0.4);margin-bottom:0.8rem;
}
.nn-info-body{font-size:0.72rem;line-height:1.55;color:rgba(255,255,255,0.5)}
.nn-info-body strong{color:rgba(255,255,255,0.72);font-weight:500}

/* ── FOOTER ──────────────────────────────────────────── */
.nn-footer{
    position:fixed;
    bottom:0;left:0;right:0;
    height:36px;
    z-index:50;
    background:rgba(6,6,12,0.92);
    backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
    border-top:1px solid rgba(255,255,255,0.05);
    box-shadow:0 -2px 16px rgba(0,0,0,0.35);
}
.nn-footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:100%;
    padding:0 clamp(1rem, 3vw, 2.5rem);
    max-width:1600px;
    margin:0 auto;
}
.nn-footer-col{
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.nn-footer-brand{
    font-family:'Cinzel',serif;
    font-weight:600;
    font-size:0.62rem;
    color:rgba(255,255,255,0.5);
    letter-spacing:0.08em;
    text-shadow:0 0 10px rgba(255,255,255,0.06);
}
.nn-footer-sep{
    color:rgba(255,255,255,0.15);
    font-size:0.55rem;
}
.nn-footer-tagline{
    font-family:'Rajdhani',sans-serif;
    font-size:0.55rem;
    font-weight:500;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.28);
}
.nn-footer-links{
    gap:0.3rem;
}
.nn-footer-link{
    padding:0.15rem 0.6rem;
    border-radius:4px;
    color:rgba(255,255,255,0.35);
    text-decoration:none;
    font-family:'Rajdhani',sans-serif;
    font-size:0.55rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    transition:all 0.25s;
    border:1px solid transparent;
}
.nn-footer-link:hover{
    color:rgba(255,255,255,0.7);
    border-color:rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);
    text-shadow:0 0 6px rgba(255,255,255,0.08);
}
.nn-footer-right{
    gap:0.6rem;
}
.nn-footer-copy{
    font-family:'Rajdhani',sans-serif;
    font-size:0.52rem;
    font-weight:500;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.2);
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:900px){
    .nn-main{gap:clamp(0.8rem, 2vw, 1.5rem);padding:0 0.8rem}
    .nn-node{min-width:90px;padding:0.5rem 0.4rem}
    .nn-avatar-wrap{width:40px;height:40px}
    .nn-avatar-img{width:100%;height:100%}
    .nn-col-label{font-size:0.45rem}
    .nn-nav-title{display:none}
    .nn-footer-tagline{display:none}
}
@media(max-width:600px){
    .nn-main{flex-direction:column;gap:0.8rem;justify-content:flex-start;padding-top:0.5rem}
    .nn-stack{flex-direction:row;gap:0.6rem}
    .nn-col-label{font-size:0.42rem}
    .nn-key-bar{gap:0.5rem;bottom:36px}
    .nn-key-item{font-size:0.42rem}
    .nn-footer-links{display:none}
    .nn-footer-brand{font-size:0.55rem}
}