/* NexusSpira shared public layout — header, footer, nav (load after global.css) */

body.site-public {
  overflow-x: hidden;
}

/* === Layout: header, footer, nav === */
.ns-main { padding-top: 64px; min-height: 60vh; }

.container {
  width: 100%; max-width: var(--container-xl);
  margin-left: auto; margin-right: auto;
  padding-left: var(--space-6); padding-right: var(--space-6);
}

.section { padding-top: var(--space-20); padding-bottom: var(--space-20); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 50px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; border: none; text-decoration: none;
  transition: all .2s;
}
.btn--primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 4px 20px rgba(26,111,191,0.3);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(26,111,191,0.4); }
.btn--secondary {
  background: transparent; border: 2px solid var(--border); color: var(--navy);
}
.btn--secondary:hover { border-color: var(--blue); color: var(--blue); background: rgba(26,111,191,0.05); }

.nav-item.active > a { color: #fff; background: rgba(255,255,255,0.14); }
.mob-link.active { color: var(--cyan); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }

/* === Shared inner-page patterns === */
.ns-main--page,
.ns-main--home { padding-top: 0; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 184, 200, 0.12);
  border: 1px solid rgba(0, 184, 200, 0.3);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 24px;
}
.hero-eyebrow span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
  animation: eyebrowPulse 1.8s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.page-hero {
  padding: 150px 5% 110px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.15;
  font-family: var(--font-body) !important;
}
.page-hero h1 .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-hero p {
  font-size: 16px;
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto;
}
.page-hero--compact { padding: 150px 5% 70px; }
.page-hero--compact h1 {
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  margin-bottom: 12px;
}
.page-hero .updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--border);
  padding: 6px 16px;
  border-radius: 50px;
  margin-top: 6px;
}

section { padding: 80px 5%; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--blue);
  background: rgba(26, 111, 191, 0.1);
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
}
.section-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.2;
}
.section-header p {
  font-size: 16px;
  color: var(--muted);
  max-width: 540px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .page-hero { padding: 140px 5% 90px; }
  .page-hero--compact { padding: 140px 5% 70px; }
}

/* ===== HEADER / NAV ===== */
header{position:fixed;top:0;left:0;width:100%;z-index:200}

/* Top bar */
.nav-topbar{
  background:linear-gradient(135deg,#0B1845 0%,#122272 55%,#0A3570 100%);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4%;height:64px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  box-shadow:0 2px 20px rgba(0,0,0,0.3);
}

/* LOGO */
.logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-wrap img.logo-img{height:46px;width:auto;object-fit:contain;display:block}
.logo-mark{width:40px;height:40px;flex-shrink:0;display:block}
.logo-text{display:flex;flex-direction:column;line-height:1.05}
.logo-text__main{font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:-0.03em}
.logo-text__main em{font-style:normal;background:linear-gradient(90deg,#00C8D8,#6EE7F0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-text__sub{font-size:9px;font-weight:600;color:rgba(255,255,255,0.45);letter-spacing:1.2px;text-transform:uppercase;margin-top:2px}
.logo-icon-only{display:none}

/* Main nav menu */
.nav-menu{display:flex;align-items:center;gap:4px;list-style:none;flex:1;justify-content:center}
.nav-item{position:relative}
.nav-item > a{
  display:flex;align-items:center;gap:5px;
  text-decoration:none;font-size:13.5px;font-weight:700;
  color:#ffffff;
  padding:8px 14px;border-radius:8px;
  transition:all .2s;white-space:nowrap;
}
.nav-item > a:hover,.nav-item.active > a{color:#fff;background:rgba(255,255,255,0.14)}
.nav-item > a .arrow{font-size:9px;opacity:0.95;transition:transform .2s;display:inline-block}
.nav-item:hover > a .arrow{transform:rotate(180deg)}

/* Dropdown — text only, no icons */
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;
  background:#fff;border-radius:14px;
  box-shadow:0 12px 40px rgba(11,24,69,0.18);
  border:1px solid rgba(209,218,234,0.7);
  min-width:200px;padding:8px;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:all .22s ease;
  z-index:300;
}
.dropdown.wide{min-width:420px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.nav-item:hover > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.drop-section{padding:6px}
.drop-section-title{
  font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.2px;
  padding:4px 10px 8px;border-bottom:1px solid var(--border);margin-bottom:4px;
}

/* Drop items — text only, clean */
.drop-item{
  display:block;
  padding:9px 12px;border-radius:9px;text-decoration:none;
  color:var(--text);font-size:13.5px;font-weight:600;
  transition:all .18s;
}
.drop-item:hover{background:var(--bg);color:var(--navy)}
.drop-item small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:1px}

/* Mega divider */
.drop-divider{width:1px;background:var(--border);margin:8px 0}

/* Sub-dropdown (nested) */
.has-sub{position:relative}
.has-sub > a{display:flex;align-items:center;justify-content:space-between}
.has-sub > a::after{content:'›';font-size:14px;opacity:0.5;margin-left:8px}
.sub-dropdown{
  position:absolute;left:100%;top:0;
  background:#fff;border-radius:14px;
  box-shadow:0 12px 40px rgba(11,24,69,0.18);
  border:1px solid rgba(209,218,234,0.7);
  min-width:180px;padding:8px;
  opacity:0;visibility:hidden;
  transform:translateX(-6px);
  transition:all .2s;
  z-index:310;
}
.has-sub:hover > .sub-dropdown{opacity:1;visibility:visible;transform:translateX(0)}

/* Discover mega menu */
.nav-item--discover > a{
  background:rgba(110,231,240,0.12);
  border:1px solid rgba(110,231,240,0.22);
}
.nav-item--discover:hover > a,
.nav-item--discover.active > a{
  background:rgba(110,231,240,0.2);
  border-color:rgba(110,231,240,0.35);
}

.dropdown--discover{
  left:50%;
  min-width:min(560px, calc(100vw - 32px));
  padding:0;
  border-radius:16px;
  overflow:hidden;
  transform:translateX(-50%) translateY(-8px);
}
.nav-item--discover:hover > .dropdown--discover{
  transform:translateX(-50%) translateY(0);
}

.discover-panel{
  display:grid;
  grid-template-columns:1fr 200px;
  min-height:100%;
}
.discover-panel__links{padding:18px 10px 14px 14px}
.discover-panel__aside{
  background:linear-gradient(160deg,#f0f7ff 0%,#e8f8fa 100%);
  border-left:1px solid var(--border);
  padding:20px 18px;
  display:flex;
  align-items:center;
}

.discover-group + .discover-group{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.discover-group__label{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 12px 10px;
}

.discover-link{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  transition:background .18s ease;
}
.discover-link:hover{background:var(--bg)}
.discover-link__title{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--navy);
  line-height:1.25;
}
.discover-link__desc{
  display:block;
  margin-top:2px;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  line-height:1.35;
}

.discover-teaser__eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:8px;
}
.discover-teaser h3{
  font-size:15px;
  font-weight:900;
  color:var(--navy);
  line-height:1.25;
  margin-bottom:8px;
}
.discover-teaser p{
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
  margin-bottom:14px;
}
.discover-teaser__cta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12.5px;
  font-weight:800;
  color:var(--blue);
  text-decoration:none;
}
.discover-teaser__cta:hover{color:var(--navy)}

@media(max-width:1100px){
  .discover-panel{grid-template-columns:1fr}
  .discover-panel__aside{display:none}
  .dropdown--discover{min-width:min(320px, calc(100vw - 32px))}
}

/* ===== SEARCH BAR ===== */
.nav-search{position:relative;display:flex;align-items:center;flex-shrink:0}
.search-wrap{
  display:flex;align-items:center;
  background:rgba(255,255,255,0.1);
  border:1.5px solid rgba(255,255,255,0.18);
  border-radius:50px;
  padding:0 14px;height:38px;
  transition:all .3s;width:200px;
}
.search-wrap:focus-within{
  background:rgba(255,255,255,0.16);
  border-color:rgba(0,184,200,0.7);
  box-shadow:0 0 0 3px rgba(0,184,200,0.15);
  width:240px;
}
.search-wrap svg{width:15px;height:15px;opacity:0.55;flex-shrink:0;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.search-input{
  background:transparent;border:none;outline:none;
  color:#fff;font-size:13px;font-family:inherit;font-weight:500;
  width:100%;padding-left:8px;
}
.search-input::placeholder{color:rgba(255,255,255,0.45)}

/* Mobile search in drawer */
.mob-search-wrap{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.07);
  border:1.5px solid rgba(255,255,255,0.14);
  border-radius:12px;padding:10px 14px;margin-bottom:4px;
}
.mob-search-wrap svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:rgba(255,255,255,0.5);stroke-width:2;stroke-linecap:round}
.mob-search-input{
  background:transparent;border:none;outline:none;
  color:#fff;font-size:14px;font-family:inherit;width:100%;
}
.mob-search-input::placeholder{color:rgba(255,255,255,0.4)}

/* Auth buttons */
.nav-auth{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn-login{
  padding:8px 18px;border-radius:8px;border:1.5px solid rgba(255,255,255,0.35);
  background:transparent;color:#fff;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .2s;
  display:inline-block;text-decoration:none;text-align:center;
}
.btn-login:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.6)}
.btn-signup{
  padding:8px 18px;border-radius:8px;
  background:#4F46E5;
  border:none;color:#fff;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .2s;
  box-shadow:0 2px 12px rgba(79,70,229,0.35);
  display:inline-block;text-decoration:none;text-align:center;
}
.btn-signup:hover{background:#4338CA;transform:translateY(-1px);box-shadow:0 4px 18px rgba(67,56,202,0.45)}
.btn-signup:active{background:#3730A3;transform:translateY(0)}
.btn-signup:disabled,.btn-signup[disabled]{background:#A5B4FC;cursor:not-allowed;box-shadow:none;transform:none}

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

/* Mobile drawer */
.mobile-nav{
  display:none;background:#0B1845;padding:0;
  max-height:0;overflow:hidden;transition:max-height .4s ease;
}
.mobile-nav.open{max-height:700px;overflow-y:auto}
.mobile-nav-inner{padding:16px 5% 8px}
.mob-item{border-bottom:1px solid rgba(255,255,255,0.08)}
.mob-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;color:#ffffff;font-size:14px;font-weight:700;
  text-decoration:none;cursor:pointer;
}
.mob-arrow{transition:transform .25s;font-size:11px;opacity:0.9}
.mob-sub{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mob-sub.open{max-height:520px}
.mob-sub a{
  display:block;padding:9px 0 9px 16px;
  color:rgba(255,255,255,0.88);font-size:13px;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.mob-sub a:hover{color:var(--cyan)}
.mob-group-label{
  padding:12px 0 4px 16px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.38);
}
.mob-group-label:first-child{padding-top:4px}
.mob-explore-link{
  margin-top:8px;
  color:var(--cyan) !important;
  font-weight:700 !important;
}

/* Mobile auth — inline at bottom, Login | Sign Up */
.mob-auth-row{
  display:flex;align-items:center;justify-content:center;
  gap:0;padding:20px 0 24px;
  border-top:1px solid rgba(255,255,255,0.08);
  margin-top:4px;
}
.mob-auth-row a{
  color:rgba(255,255,255,0.78);font-size:14px;font-weight:700;
  text-decoration:none;padding:0 18px;transition:color .2s;
}
.mob-auth-row a:hover{color:#fff}
.mob-auth-row .mob-divider{
  color:rgba(255,255,255,0.25);font-size:16px;font-weight:300;
}

/* FOOTER */
footer{background:#0D1A3A;color:rgba(255,255,255,0.7);padding:56px 5% 30px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand p{font-size:13.5px;line-height:1.7;margin-top:14px;color:rgba(255,255,255,0.55);max-width:280px}
.footer-col h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:16px;text-transform:uppercase;letter-spacing:.8px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{text-decoration:none;font-size:13.5px;color:rgba(255,255,255,0.55);transition:color .2s}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:13px}
.footer-socials{display:flex;gap:12px}
.social-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .2s;text-decoration:none;color:rgba(255,255,255,0.6)}
.social-btn:hover{background:rgba(0,184,200,0.2);border-color:var(--teal);color:var(--cyan)}

/* BACK TO TOP */
.back-top{position:fixed;bottom:30px;right:30px;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px);transition:all .3s;z-index:99}
.back-top.show{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .nav-menu{display:none}
  .nav-auth{display:none}
  .nav-search{display:none}
  .hamburger{display:flex}
  .mobile-nav{display:block}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px 32px}
  .footer-brand{grid-column:1 / -1}
  .logo-wrap .logo-text{display:none}
  .logo-wrap .logo-mark{display:none}
  .logo-icon-only{display:block;height:40px;width:40px}
}
@media(max-width:1200px){
  .search-wrap{width:160px}
  .search-wrap:focus-within{width:190px}
}
@media(max-width:600px){
  .footer-top{grid-template-columns:1fr 1fr;gap:24px 28px}
  .footer-brand{grid-column:1 / -1}
  .footer-col h4{margin-bottom:12px}
  .footer-col a{font-size:13px}
}