@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --nx-navy: #0A1D37;
  --nx-navy-mid: #132C4E;
  --nx-navy-soft: #1E3A5F;
  --nx-emerald: #15803D;
  --nx-emerald-bright: #22C55E;
  --nx-emerald-soft: #ECFDF5;
  --nx-gold: #D97706;
  --nx-gold-bright: #F59E0B;
  --nx-gold-pale: #FEF3C7;
  --nx-berry: #581C87;
  --nx-bg: #F8FAFC;
  --nx-ivory: #FBF9F5;
  --nx-surface: #FFFFFF;
  --nx-border: #E2E8F0;
  --nx-text: #0F172A;
  --nx-muted: #475569;
  --nx-radius: 14px;
  --nx-shadow: 0 10px 30px -10px rgba(10, 29, 55, 0.10);
  --nx-shadow-lg: 0 20px 50px -15px rgba(10, 29, 55, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--nx-text);
  background: var(--nx-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .font-serif { font-family: 'Playfair Display', Georgia, serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 20px; }

/* Top Announcement & Navbar */
.topbar {
  background: var(--nx-navy);
  color: #E2E8F0;
  font-size: 12.5px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.topbar-badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: #FDE68A; font-weight: 600;
}
.navbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nx-border);
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 0;
}
.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-logo img { height: 50px; width: auto; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 14px; color: var(--nx-navy); }
.nav-links a:hover { color: var(--nx-emerald); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.mobile-toggle {
  display: none; background: transparent; border: 1px solid var(--nx-border);
  border-radius: 8px; padding: 8px 11px; cursor: pointer; font-size: 18px; color: var(--nx-navy);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: 14px;
  border: 1px solid transparent; cursor: pointer; transition: all .2s ease; font-family: inherit;
}
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: 12px; }
.btn-primary {
  background: linear-gradient(135deg, var(--nx-emerald), #166534);
  color: #fff; box-shadow: 0 8px 20px -6px rgba(21, 128, 61, 0.45);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-gold {
  background: linear-gradient(135deg, #F59E0B, #B45309);
  color: #fff; box-shadow: 0 8px 20px -6px rgba(217, 119, 6, 0.45);
}
.btn-gold:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-navy { background: var(--nx-navy); color: #fff; }
.btn-navy:hover { background: var(--nx-navy-mid); }
.btn-outline { background: #fff; color: var(--nx-navy); border-color: var(--nx-border); }
.btn-outline:hover { border-color: var(--nx-navy); background: #F8FAFC; }
.btn-outline-light { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-outline-light:hover { background: rgba(255,255,255,0.18); }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.16), transparent 45%),
              radial-gradient(circle at 15% 80%, rgba(245, 158, 11, 0.18), transparent 40%),
              linear-gradient(135deg, #071529 0%, #0E294B 55%, #0D352B 100%);
  color: #fff; padding: 64px 0 72px;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: center;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(245, 158, 11, 0.16); border: 1px solid rgba(253, 230, 138, 0.35);
  color: #FDE68A; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 16px;
}
.hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.12; margin: 0 0 18px; color: #fff; }
.hero h1 span { color: #FBBF24; }
.hero p.lead { font-size: 17px; color: #CBD5E1; margin: 0 0 26px; max-width: 590px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-stat strong { display: block; font-size: 22px; color: #FDE68A; }
.hero-stat span { font-size: 12.5px; color: #CBD5E1; }

.hero-visual {
  position: relative;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(253, 230, 138, 0.3);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  background: #091B33;
}
.hero-visual img { width: 100%; height: 420px; object-fit: cover; }
.hero-float-card {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  background: rgba(10, 29, 55, 0.88); backdrop-filter: blur(10px);
  border: 1px solid rgba(253, 230, 138, 0.35);
  border-radius: 14px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* Sections & Cards */
.section { padding: 72px 0; }
.section-ivory { background: var(--nx-ivory); }
.section-navy { background: linear-gradient(135deg, #071529 0%, #112A4A 100%); color: #fff; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.section-kicker {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--nx-emerald);
  background: var(--nx-emerald-soft); padding: 5px 14px; border-radius: 999px; margin-bottom: 10px;
}
.section-navy .section-kicker { background: rgba(245, 158, 11, 0.18); color: #FDE68A; }
.section-head h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 12px; line-height: 1.2; }
.section-head p { margin: 0; color: var(--nx-muted); font-size: 16px; }
.section-navy .section-head p { color: #CBD5E1; }

.card {
  background: var(--nx-surface); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius); padding: 24px; box-shadow: var(--nx-shadow);
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Kit Pricing Cards */
.kit-card {
  position: relative; background: #fff; border: 2px solid var(--nx-border);
  border-radius: 18px; padding: 26px 22px; display: flex; flex-direction: column;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kit-card:hover { transform: translateY(-4px); box-shadow: var(--nx-shadow-lg); border-color: var(--nx-emerald); }
.kit-card.featured { border-color: var(--nx-gold-bright); background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 35%); }
.kit-pv-pill {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 13px;
  background: var(--nx-navy); color: #FDE68A; margin-bottom: 12px;
}
.kit-card.featured .kit-pv-pill { background: linear-gradient(135deg, #D97706, #B45309); color: #fff; }
.kit-price { font-size: 30px; font-weight: 800; color: var(--nx-navy); margin: 8px 0 4px; }
.kit-mrp { font-size: 13px; color: var(--nx-muted); }
.kit-features { list-style: none; padding: 0; margin: 16px 0 22px; display: grid; gap: 9px; font-size: 13.5px; color: #334155; }
.kit-features li { display: flex; align-items: center; gap: 8px; }
.kit-features li::before { content: "✓"; color: var(--nx-emerald); font-weight: 900; }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--nx-border); background: #fff; }
table.nx-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
table.nx-table th {
  background: var(--nx-navy); color: #fff; font-weight: 700; padding: 13px 16px; white-space: nowrap;
}
table.nx-table td { padding: 12px 16px; border-bottom: 1px solid var(--nx-border); vertical-align: middle; }
table.nx-table tr:last-child td { border-bottom: none; }
table.nx-table tr:hover td { background: #F8FAFC; }

/* Badges & Alerts */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.badge-emerald { background: #DCFCE7; color: #166534; }
.badge-gold { background: #FEF3C7; color: #92400E; }
.badge-blue { background: #DBEAFE; color: #1E40AF; }
.badge-indigo { background: #E0E7FF; color: #3730A3; }
.badge-amber { background: #FFEDD5; color: #9A3412; }
.badge-purple { background: #F3E8FF; color: #6B21A8; }
.badge-rose { background: #FFE4E6; color: #9F1239; }
.badge-teal { background: #CCFBF1; color: #115E59; }
.badge-slate { background: #E2E8F0; color: #334155; }
.badge-danger { background: #FEE2E2; color: #991B1B; }

.alert {
  padding: 13px 18px; border-radius: 11px; margin-bottom: 18px; font-size: 14px; font-weight: 500;
  border: 1px solid transparent; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.alert-success { background: #ECFDF5; border-color: #86EFAC; color: #14532D; }
.alert-warning { background: #FFFBEB; border-color: #FCD34D; color: #78350F; }
.alert-danger { background: #FEF2F2; border-color: #FCA5A5; color: #7F1D1D; }
.alert-info { background: #EFF6FF; border-color: #93C5FD; color: #1E3A8A; }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 700; color: var(--nx-navy); margin-bottom: 6px; }
.form-control {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid #CBD5E1;
  font-family: inherit; font-size: 14px; color: var(--nx-text); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--nx-emerald); box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.14); }
.form-hint { font-size: 12px; color: var(--nx-muted); margin-top: 4px; }

/* Portal Layout (Member & Admin) */
.portal-shell { display: flex; min-height: 100vh; background: #F1F5F9; }
.portal-sidebar {
  width: 268px; flex-shrink: 0; background: var(--nx-navy); color: #E2E8F0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.portal-brand {
  padding: 18px 20px; background: #fff; border-bottom: 2px solid var(--nx-gold-bright);
  display: flex; align-items: center; justify-content: space-between;
}
.portal-brand img { height: 42px; width: auto; }
.portal-nav { padding: 14px 12px; display: grid; gap: 4px; }
.portal-nav-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: #94A3B8; padding: 10px 12px 4px; font-weight: 700;
}
.portal-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: #CBD5E1; transition: all .15s;
}
.portal-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.portal-nav a.active {
  background: linear-gradient(135deg, var(--nx-emerald), #166534);
  color: #fff; box-shadow: 0 6px 15px -5px rgba(34, 197, 94, 0.5);
}
.portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.portal-topbar {
  background: #fff; border-bottom: 1px solid var(--nx-border);
  padding: 13px 26px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.portal-content { padding: 26px; max-width: 1340px; width: 100%; margin: 0 auto; }

.stat-card {
  background: #fff; border: 1px solid var(--nx-border); border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.08);
}
.stat-card .stat-label { font-size: 12.5px; font-weight: 700; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .03em; }
.stat-card .stat-val { font-size: 25px; font-weight: 800; color: var(--nx-navy); margin: 6px 0 3px; }
.stat-card .stat-sub { font-size: 12.5px; color: var(--nx-muted); }

/* Binary Genealogy Tree */
.tree-scroll { overflow-x: auto; padding: 24px 10px; background: #F8FAFC; border-radius: 16px; border: 1px solid var(--nx-border); }
.tree-level { display: flex; flex-direction: column; align-items: center; position: relative; }
.tree-children { display: flex; justify-content: center; gap: 22px; margin-top: 28px; position: relative; }
.tree-children::before {
  content: ""; position: absolute; top: -15px; left: 25%; right: 25%; height: 2px; background: #94A3B8;
}
.tree-branch { display: flex; flex-direction: column; align-items: center; position: relative; }
.tree-branch::before {
  content: ""; position: absolute; top: -15px; width: 2px; height: 15px; background: #94A3B8;
}
.tree-node {
  width: 210px; background: #fff; border: 2px solid var(--nx-border); border-radius: 14px;
  padding: 12px; text-align: center; box-shadow: 0 8px 20px -10px rgba(10, 29, 55, 0.16);
  transition: transform .15s;
}
.tree-node:hover { transform: translateY(-2px); }
.tree-node.active-nbo { border-color: var(--nx-emerald); }
.tree-node.pending-nbo { border-color: #F59E0B; background: #FFFBEB; }
.tree-node.empty-slot {
  border: 2px dashed #CBD5E1; background: rgba(255,255,255,0.65); color: var(--nx-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 112px;
}
.tree-code { font-weight: 800; font-size: 13px; color: var(--nx-navy); }
.tree-name { font-weight: 700; font-size: 13.5px; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-gv { font-size: 11.5px; color: #475569; margin-top: 6px; display: flex; justify-content: space-between; background: #F1F5F9; padding: 4px 8px; border-radius: 7px; }

/* Progress Bar */
.progress-track { height: 10px; background: #E2E8F0; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--nx-emerald), var(--nx-gold-bright)); border-radius: 999px; }

/* Footer */
.site-footer { background: #071529; color: #CBD5E1; padding: 54px 0 26px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 30px; margin-bottom: 34px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: #94A3B8; }

@media (max-width: 980px) {
  .hero-grid, .grid-4, .grid-3, .grid-2, .footer-grid { grid-template-columns: 1fr; }
  .nav-links, .nav-actions { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; padding: 18px 20px; border-bottom: 1px solid var(--nx-border); box-shadow: var(--nx-shadow);
  }
  .mobile-toggle { display: inline-flex; }
  .portal-shell { flex-direction: column; }
  .portal-sidebar { width: 100%; height: auto; position: static; }
  .tree-node { width: 165px; padding: 9px; }
}