/* ════════════════════════════════════════
   BASE
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background : #06070d;
  min-height : 100vh;
  display    : flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow-x : hidden;
}

/* ── Ambient glow blobs ── */
body::before, body::after {
  content      : '';
  position     : fixed;
  border-radius: 50%;
  filter       : blur(130px);
  pointer-events: none;
  z-index      : 0;
}
body::before {
  width : 460px; height: 460px;
  background: rgba(13, 110, 253, 0.22);
  top: -100px; left: -100px;
}
body::after {
  width : 380px; height: 380px;
  background: rgba(25, 135, 84, 0.2);
  bottom: -80px; right: -80px;
}

/* ════════════════════════════════════════
   WRAPPER
════════════════════════════════════════ */
.wrapper {
  position : relative;
  z-index  : 1;
  max-width: 740px;
  width    : 100%;
  padding  : 2rem 1.2rem;
}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.brand-icon {
  font-size  : 3.2rem;
  line-height: 1;
  filter     : drop-shadow(0 0 20px rgba(13,110,253,0.55));
  display    : inline-block;
  animation  : floatIcon 3.5s ease-in-out infinite;
}

@keyframes floatIcon {
  0%,100% { transform: translateY(0);   }
  50%     { transform: translateY(-9px);}
}

.brand-title {
  font-size             : 2.1rem;
  font-weight           : 800;
  letter-spacing        : 3px;
  background            : linear-gradient(135deg, #ffffff 25%, #7eb8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip       : text;
}

.brand-badge {
  display      : inline-block;
  padding      : 4px 16px;
  border-radius: 20px;
  font-size    : 0.72rem;
  font-weight  : 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background   : rgba(13,110,253,0.14);
  border       : 1px solid rgba(13,110,253,0.35);
  color        : #7eb8ff;
  margin-top   : 8px;
}

/* ════════════════════════════════════════
   NAV CARDS  — higher contrast vs bg
════════════════════════════════════════ */
.nav-card {
  background   : #111520;          /* noticeably lighter than #06070d bg */
  border       : 1px solid #1e2535;
  border-radius: 20px;
  padding      : 2rem 1.8rem;
  transition   : transform 0.25s ease, border-color 0.25s ease,
                 box-shadow 0.25s ease, background 0.25s ease;
  cursor       : pointer;
  text-decoration: none;
  display      : block;
  color        : inherit;
  position     : relative;
  overflow     : hidden;
  height       : 100%;
}

/* subtle inner shimmer */
.nav-card::after {
  content  : '';
  position : absolute;
  inset    : 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0)    60%);
  pointer-events: none;
  border-radius : inherit;
}

/* top-edge glow line */
.nav-card::before {
  content      : '';
  position     : absolute;
  top: 0; left: 12%; right: 12%;
  height       : 1px;
  border-radius: 50%;
  opacity      : 0;
  transition   : opacity 0.3s;
}
.nav-card.blue::before  {
  background: linear-gradient(90deg, transparent, #3d8bfd, transparent);
}
.nav-card.green::before {
  background: linear-gradient(90deg, transparent, #20c570, transparent);
}

.nav-card:hover {
  transform      : translateY(-8px);
  color          : inherit;
  text-decoration: none;
}
.nav-card:hover::before { opacity: 1; }

.nav-card.blue:hover {
  background  : #131b2e;
  border-color: rgba(13,110,253,0.55);
  box-shadow  : 0 20px 52px rgba(13,110,253,0.22),
                0 4px 12px rgba(0,0,0,0.5);
}
.nav-card.green:hover {
  background  : #0f1e18;
  border-color: rgba(25,135,84,0.55);
  box-shadow  : 0 20px 52px rgba(25,135,84,0.22),
                0 4px 12px rgba(0,0,0,0.5);
}

/* ── Icon pill ── */
.nav-icon-wrap {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 50px; height: 50px;
  border-radius  : 13px;
  font-size      : 1.5rem;
  margin-bottom  : 1rem;
}
.blue  .nav-icon-wrap { background: rgba(13,110,253,0.18); }
.green .nav-icon-wrap { background: rgba(25,135,84,0.18);  }

.nav-title {
  font-size    : 1.12rem;
  font-weight  : 700;
  color        : #e8edf7;
  margin-bottom: 0.45rem;
}

.nav-desc {
  font-size  : 0.82rem;
  color      : #7a8694;
  line-height: 1.6;
}

/* ── Arrow pill ── */
.nav-arrow {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  margin-top   : 1.3rem;
  font-size    : 0.78rem;
  font-weight  : 600;
  padding      : 5px 14px;
  border-radius: 20px;
  transition   : gap 0.2s, background 0.2s;
}
.nav-card:hover .nav-arrow { gap: 10px; }

.blue  .nav-arrow {
  background: rgba(13,110,253,0.15);
  color     : #5a9ef8;
  border    : 1px solid rgba(13,110,253,0.25);
}
.green .nav-arrow {
  background: rgba(25,135,84,0.15);
  color     : #3dbd79;
  border    : 1px solid rgba(25,135,84,0.25);
}
.blue:hover  .nav-arrow { background: rgba(13,110,253,0.25); }
.green:hover .nav-arrow { background: rgba(25,135,84,0.25);  }

/* ════════════════════════════════════════
   DIVIDER
════════════════════════════════════════ */
.divider-row {
  display    : flex;
  align-items: center;
  gap        : 12px;
  margin     : 2.2rem 0 1.2rem;
}
.divider-row::before,
.divider-row::after {
  content   : '';
  flex      : 1;
  height    : 1px;
  background: rgba(255,255,255,0.06);
}
.divider-text {
  color         : #2e3848;
  font-size     : 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space   : nowrap;
}

/* ════════════════════════════════════════
   ADMIN LINK
════════════════════════════════════════ */
.admin-link {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  color          : #3d4a5c;
  font-size      : 0.78rem;
  text-decoration: none;
  padding        : 9px 22px;
  border-radius  : 10px;
  border         : 1px solid #161e2b;
  background     : #0d1017;
  transition     : color 0.2s, background 0.2s, border-color 0.2s;
}
.admin-link:hover {
  color       : #adb5bd;
  background  : #131b28;
  border-color: #243044;
}
.admin-sep { opacity: 0.25; }

/* ── Version ── */
.version-tag {
  color        : #64748b;
  font-size    : 1 rem;
  margin-top   : 1.8rem;
  letter-spacing: 1px;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 576px) {
  .brand-title  { font-size: 1.7rem; }
  .nav-card     { padding: 1.5rem 1.4rem; }
}